@ethlete/core 5.0.0-next.14 → 5.0.0-next.16

package/fesm2022/ethlete-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, DOCUMENT, linkedSignal, isDevMode, computed, afterNextRender, effect, Injector, booleanAttribute, numberAttribute, runInInjectionContext, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, EnvironmentInjector, createComponent, model, ViewContainerRef, input, output, inputBinding, Pipe, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, DOCUMENT, linkedSignal, isDevMode, computed, afterNextRender, effect, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, createComponent, model, ViewContainerRef, input, output, inputBinding, outputBinding, Pipe, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, defer, exhaustMap, share } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
@@ -13,6 +13,30 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { autoUpdate, computePosition, offset, flip, size, shift, limitShift, arrow, hide } from '@floating-ui/dom';
 import { Title, Meta, DomSanitizer } from '@angular/platform-browser';
 
+const ANIMATION_DEBUG_STORAGE_KEY = 'et-overlay-debug';
+let cachedEnabled = null;
+/**
+ * Debug logging for overlay and animation lifecycle internals.
+ * Enable via `localStorage.setItem('et-overlay-debug', 'true')` and reload.
+ */
+const isAnimationDebugEnabled = () => {
+    if (cachedEnabled === null) {
+        try {
+            cachedEnabled = globalThis.localStorage?.getItem(ANIMATION_DEBUG_STORAGE_KEY) === 'true';
+        }
+        catch {
+            cachedEnabled = false;
+        }
+    }
+    return cachedEnabled;
+};
+const animationDebugLog = (scope, ...args) => {
+    if (!isAnimationDebugEnabled())
+        return;
+    const timestamp = (globalThis.performance?.now() ?? 0).toFixed(1);
+    console.log(`\x1B[36m[et-overlay-debug ${timestamp}ms | ${scope}]\x1B[m`, ...args);
+};
+
 const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
 class AnimatableDirective {
     constructor() {
@@ -31,7 +55,7 @@ class AnimatableDirective {
         this.isAnimating$ = this.totalActiveAnimationCount$.pipe(map((count) => count > 0));
         let didEmitStart = false;
         const el = this.elementRef.nativeElement;
-        merge(merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'start')), merge(fromEvent(el, 'animationend'), fromEvent(el, 'transitionend')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'end')), merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'cancel')))
+        merge(merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionrun')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'start')), merge(fromEvent(el, 'animationend'), fromEvent(el, 'transitionend')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'end')), merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'cancel')))
             .pipe(tap((eventType) => {
             switch (eventType) {
                 case 'start': {
@@ -40,6 +64,7 @@ class AnimatableDirective {
                     if (startingNewBatch) {
                         this.activeBatchTransitionId = this.pendingTransitionIds.shift();
                     }
+                    animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `start (count ${this.activeAnimationCount}, batch "${this.activeBatchTransitionId}", pending [${this.pendingTransitionIds.join(', ')}])`);
                     if (!didEmitStart) {
                         didEmitStart = true;
                         this.animationStartSubject$.next();
@@ -50,6 +75,7 @@ class AnimatableDirective {
                 case 'cancel': {
                     if (this.activeAnimationCount > 0) {
                         this.updateActiveAnimationCount(-1);
+                        animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `${eventType} (count ${this.activeAnimationCount}, batch "${this.activeBatchTransitionId}")`);
                         if (this.activeAnimationCount === 0 && didEmitStart) {
                             didEmitStart = false;
                             this.animationEndSubject$.next({
@@ -60,6 +86,7 @@ class AnimatableDirective {
                         }
                     }
                     else {
+                        animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `${eventType} ignored — count already 0 (start ${didEmitStart ? '' : 'not '}emitted)`);
                         console.warn(`${el.tagName} received animation end/cancel event but activeAnimationCount is already 0. Start was ${didEmitStart ? '' : 'not '}emitted.`);
                     }
                     break;
@@ -1101,10 +1128,14 @@ const deferredSignal = (valueFn) => {
     return valueSignal;
 };
 const memoizeSignal = (factory) => {
-    let cached = null;
+    const cache = new WeakMap();
     return () => {
-        if (!cached)
-            cached = factory();
+        const envInjector = inject(EnvironmentInjector);
+        let cached = cache.get(envInjector);
+        if (!cached) {
+            cached = runInInjectionContext(envInjector, factory);
+            cache.set(envInjector, cached);
+        }
         return cached;
     };
 };
@@ -2326,21 +2357,29 @@ const injectIsRouterInitialized = memoizeSignal(() => {
  */
 const injectUrl = memoizeSignal(() => {
     const event = injectRouterEvent();
-    return linkedSignal({
-        source: event,
-        computation: (curr, prev) => {
-            if (curr instanceof NavigationEnd) {
-                return curr.urlAfterRedirects;
-            }
-            else if (curr instanceof NavigationSkipped) {
-                return curr.url;
-            }
-            else if (prev?.value) {
-                return prev.value;
-            }
-            return createInitialRoute();
-        },
-    }).asReadonly();
+    const router = inject(Router);
+    // Captured once for reads that happen before the router has committed any
+    // navigation (SSR / initial load), where `router.url` isn't reliable yet.
+    const initialRoute = createInitialRoute();
+    return computed(() => {
+        // We depend on `event` and `currentNavigation` only to get re-evaluated
+        // around each navigation, but we read the *committed* url straight from the
+        // router. The router commits `currentUrlTree` before it activates components,
+        // so `router.url` is already correct inside a child component's constructor —
+        // unlike the NavigationEnd event, which only reaches this signal *after*
+        // activation.
+        event();
+        const currentNavigation = router.currentNavigation();
+        // Before the very first navigation the router url isn't populated yet (e.g.
+        // SSR / a deep link read before the initial navigation runs), so fall back
+        // to the browser location captured at startup. `navigated` flips only at
+        // NavigationEnd, so we also check for an in-flight navigation to stay correct
+        // during the initial navigation's component construction.
+        if (router.navigated || currentNavigation !== null) {
+            return router.url;
+        }
+        return initialRoute;
+    });
 });
 /**
  * Inject the current route
@@ -2375,19 +2414,15 @@ const createRouterState = (router) => {
 const injectRouterState = memoizeSignal(() => {
     const event = injectRouterEvent();
     const router = inject(Router);
-    const routerState = signal(createRouterState(router), ...(ngDevMode ? [{ debugName: "routerState" }] : /* istanbul ignore next */ []));
-    effect(() => {
-        const e = event();
-        untracked(() => {
-            if (e instanceof NavigationEnd && e.id === -1) {
-                return;
-            }
-            else {
-                routerState.set(createRouterState(router));
-            }
-        });
-    });
-    return computed(() => routerState(), { equal });
+    // We only depend on `event` to get re-evaluated on every router event, but we
+    // read the *committed* snapshot straight from the router. The router commits
+    // `routerState` before it activates components (and emits ActivationStart
+    // before NavigationEnd), so this is already correct inside a child component's
+    // constructor — unlike an effect, which only flushes after construction.
+    return computed(() => {
+        event();
+        return createRouterState(router);
+    }, { equal });
 });
 /** Inject a signal containing the current route fragment (the part after the # inside the url if present) */
 const injectFragment = (config) => {
@@ -2912,6 +2947,72 @@ const createSessionMemory = ({ key, parse, serialize }) => {
     };
 };
 
+const getClientXY = (event) => {
+    if (event.type[0] === 't') {
+        const touch = event.targetTouches[0] ?? event.changedTouches[0];
+        return touch ? { clientX: touch.clientX, clientY: touch.clientY } : { clientX: 0, clientY: 0 };
+    }
+    return { clientX: event.clientX, clientY: event.clientY };
+};
+const createSwipeTracker = (startEvent) => {
+    const { clientX: originClientX, clientY: originClientY } = getClientXY(startEvent);
+    const startTime = Date.now();
+    let movementX = 0;
+    let movementY = 0;
+    let isSwiping = false;
+    let isScrolling = false;
+    const update = (event) => {
+        const { clientX, clientY } = getClientXY(event);
+        movementX = clientX - originClientX;
+        movementY = clientY - originClientY;
+        const positiveMovementX = Math.abs(movementX);
+        const positiveMovementY = Math.abs(movementY);
+        if (!isSwiping && !isScrolling) {
+            if (positiveMovementY > positiveMovementX) {
+                isScrolling = true;
+            }
+            else {
+                isSwiping = true;
+            }
+        }
+        return {
+            originClientX,
+            originClientY,
+            timestamp: startTime,
+            movementX,
+            movementY,
+            positiveMovementX,
+            positiveMovementY,
+            isScrolling,
+            isSwiping,
+        };
+    };
+    const end = () => {
+        const swipeTime = Math.max(1, Date.now() - startTime);
+        const positiveMovementX = Math.abs(movementX);
+        const positiveMovementY = Math.abs(movementY);
+        const pixelPerSecondX = (movementX / swipeTime) * 1000;
+        const pixelPerSecondY = (movementY / swipeTime) * 1000;
+        return {
+            movementX,
+            movementY,
+            positiveMovementX,
+            positiveMovementY,
+            pixelPerSecondX,
+            pixelPerSecondY,
+            positivePixelPerSecondX: Math.abs(pixelPerSecondX),
+            positivePixelPerSecondY: Math.abs(pixelPerSecondY),
+            originClientX,
+            originClientY,
+        };
+    };
+    const cancel = () => {
+        movementX = 0;
+        movementY = 0;
+    };
+    return { update, end, cancel };
+};
+
 const [, injectAngularRootElement] = createRootProvider(() => {
     const appRef = inject(ApplicationRef);
     const rootElement = signal(null, ...(ngDevMode ? [{ debugName: "rootElement" }] : /* istanbul ignore next */ []));
@@ -3318,6 +3419,7 @@ class AnimatedLifecycleDirective {
         if (currentState === 'entering')
             return;
         if ((currentState === 'init' && !this.isConstructed) || this.skipNextEnter()) {
+            this.debugLog('enter: instant (not constructed or skipNextEnter)', { currentState });
             this.updateState('entered');
             this.skipNextEnter.set(false);
             this.addClass(ANIMATION_CLASSES.enterDone);
@@ -3333,6 +3435,10 @@ class AnimatedLifecycleDirective {
         this.animatable.setTransitionId(transitionId);
         const skipAnimation = this.forcedAtFrameId !== null && this.forcedAtFrameId === this.currentFrameId;
         this.forcedAtFrameId = null;
+        this.debugLog(`enter: ${skipAnimation ? 'skip (forced this frame)' : isInterrupting ? 'interrupting leave' : 'normal'}`, {
+            currentState,
+            transitionId,
+        });
         if (skipAnimation) {
             this.removeClasses(ANIMATION_CLASSES.leaveFrom, ANIMATION_CLASSES.leaveActive, ANIMATION_CLASSES.leaveTo, ANIMATION_CLASSES.leaveInterrupt);
             this.updateState('entered');
@@ -3383,6 +3489,7 @@ class AnimatedLifecycleDirective {
         if (currentState === 'leaving')
             return;
         if (currentState === 'init') {
+            this.debugLog('leave: instant (state is init, enter never ran)');
             this.updateState('left');
             this.addClass(ANIMATION_CLASSES.leaveDone);
             this.forcedAtFrameId = null;
@@ -3397,6 +3504,10 @@ class AnimatedLifecycleDirective {
         this.animatable.setTransitionId(transitionId);
         const skipAnimation = this.forcedAtFrameId !== null && this.forcedAtFrameId === this.currentFrameId;
         this.forcedAtFrameId = null;
+        this.debugLog(`leave: ${skipAnimation ? 'skip (forced this frame)' : isInterrupting ? 'interrupting enter' : 'normal'}`, {
+            currentState,
+            transitionId,
+        });
         if (skipAnimation) {
             this.removeClasses(ANIMATION_CLASSES.enterFrom, ANIMATION_CLASSES.enterActive, ANIMATION_CLASSES.enterTo, ANIMATION_CLASSES.enterInterrupt);
             this.updateState('left');
@@ -3477,21 +3588,33 @@ class AnimatedLifecycleDirective {
         addClasses.forEach((cls) => this.addClass(cls));
         fromNextFrame()
             .pipe(switchMap(() => this.animatable.isAnimating$), take(1), switchMap((isAnimating) => {
+            if (isAnimating) {
+                return of(true);
+            }
+            this.debugLog(`${transitionId}: interrupt found no running transition, re-checking next frame`);
+            return fromNextFrame().pipe(switchMap(() => this.animatable.isAnimating$), take(1));
+        }), take(1), switchMap((isAnimating) => {
             if (!isAnimating && this.state$.value === expectedState) {
+                this.debugLog(`${transitionId}: interrupt completes INSTANTLY (no transition running after class swap)`);
                 return of({ cancelled: false, transitionId });
             }
+            this.debugLog(`${transitionId}: interrupt waiting for animation end`, { isAnimating });
             return this.animatable.animationEnd$.pipe(switchMap((e) => {
                 if (e.transitionId === transitionId) {
                     return of(e);
                 }
                 return this.animatable.isAnimating$.pipe(take(1), switchMap((stillAnimating) => {
                     if (!stillAnimating && this.state$.value === expectedState) {
+                        this.debugLog(`${transitionId}: interrupt completes via foreign animation end (batch id was "${e.transitionId}")`, { stillAnimating });
                         return of({ cancelled: false, transitionId });
                     }
                     return of(null);
                 }));
             }), filter((e) => e !== null && e.transitionId === transitionId));
-        }), filter((e) => this.state$.value === expectedState && !e.cancelled), tap(() => onComplete()), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+        }), filter((e) => this.state$.value === expectedState && !e.cancelled), tap(() => {
+            this.debugLog(`${transitionId}: interrupt complete`);
+            onComplete();
+        }), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     addClass(className) {
@@ -3504,8 +3627,19 @@ class AnimatedLifecycleDirective {
         this.renderer.removeClass(this.element, ...classNames);
     }
     updateState(newState) {
+        this.debugLog(`state: ${this.state$.value} → ${newState}`);
         this.state$.next(newState);
     }
+    debugLog(message, data) {
+        const el = this.element;
+        const scope = `lifecycle ${el.tagName.toLowerCase()}${el.classList.contains('et-overlay') ? '.et-overlay' : ''}`;
+        if (data) {
+            animationDebugLog(scope, message, data);
+        }
+        else {
+            animationDebugLog(scope, message);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", inputs: { skipNextEnter: { classPropertyName: "skipNextEnter", publicName: "skipNextEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", skipNextEnter: "skipNextEnterChange" }, host: { classAttribute: "et-force-invisible" }, providers: [
             {
@@ -4049,15 +4183,21 @@ class ScrollObserverDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.enabled = model(true, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        this.enabledValue = computed(() => {
+            const enabled = this.enabled();
+            if (isSignal(enabled))
+                return enabled();
+            return enabled;
+        }, ...(ngDevMode ? [{ debugName: "enabledValue" }] : /* istanbul ignore next */ []));
         this._startEl = signal(null, ...(ngDevMode ? [{ debugName: "_startEl" }] : /* istanbul ignore next */ []));
         this._endEl = signal(null, ...(ngDevMode ? [{ debugName: "_endEl" }] : /* istanbul ignore next */ []));
         this._startIntersection = signalElementIntersection(this._startEl, {
             root: this.elementRef,
-            enabled: this.enabled,
+            enabled: this.enabledValue,
         });
         this._endIntersection = signalElementIntersection(this._endEl, {
             root: this.elementRef,
-            enabled: this.enabled,
+            enabled: this.enabledValue,
         });
         this.isAtStart = computed(() => this._startIntersection()[0]?.isIntersecting ?? false, ...(ngDevMode ? [{ debugName: "isAtStart" }] : /* istanbul ignore next */ []));
         this.isAtEnd = computed(() => this._endIntersection()[0]?.isIntersecting ?? false, ...(ngDevMode ? [{ debugName: "isAtEnd" }] : /* istanbul ignore next */ []));
@@ -4284,8 +4424,50 @@ const applyCenteredPosition = (hostElement, paneElement, renderer, _config) => {
         position: 'relative',
     });
 };
+const applyGlobalPosition = (hostElement, paneElement, renderer, config) => {
+    renderer.setStyle(hostElement, {
+        display: 'grid',
+        // an explicit full-size cell keeps the grid area definite so percentage
+        // based pane sizes (e.g. max-height: calc(100% - 72px)) can resolve
+        gridTemplateRows: '100%',
+        gridTemplateColumns: '100%',
+        placeItems: `${config.vertical ?? 'center'} ${config.horizontal ?? 'center'}`,
+        padding: config.padding ?? '0',
+    });
+    renderer.setStyle(paneElement, {
+        position: 'relative',
+    });
+};
+/**
+ * Clears every inline style any position strategy kind may have set and
+ * restores the base element styles, so a different strategy can be applied afterwards.
+ */
+const resetPositioningStyles = (config, hostElement, paneElement, renderer) => {
+    renderer.setStyle(hostElement, {
+        gridTemplateRows: null,
+        gridTemplateColumns: null,
+        placeItems: null,
+        padding: null,
+        overflow: null,
+    });
+    renderer.setStyle(paneElement, {
+        position: null,
+        top: null,
+        left: null,
+        width: null,
+        transform: null,
+        visibility: null,
+    });
+    renderer.setCssProperties(paneElement, {
+        '--et-overlay-max-width': null,
+        '--et-overlay-max-height': null,
+        '--et-overlay-anchored-x': null,
+        '--et-overlay-anchored-y': null,
+    });
+    renderer.removeAttribute(paneElement, 'data-overlay-placement');
+    setBaseElementStyles(config, hostElement, paneElement, renderer);
+};
 const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, renderer) => {
-    const arrowElement = paneElement.querySelector('[et-floating-arrow]');
     renderer.setStyle(paneElement, {
         position: 'absolute',
         top: '0',
@@ -4293,6 +4475,7 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
         width: strategy.mirrorWidth ? `${strategy.referenceElement.offsetWidth}px` : 'max-content',
     });
     const cleanup = autoUpdate(strategy.referenceElement, paneElement, () => {
+        const arrowElement = paneElement.querySelector('[et-floating-arrow]');
         const middleware = [];
         middleware.push(offset(strategy.offset ?? 8));
         middleware.push(flip({
@@ -4336,6 +4519,11 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
                 transform: `translate3d(${x}px, ${y}px, 0)`,
                 width: strategy.mirrorWidth ? `${strategy.referenceElement.offsetWidth}px` : null,
             });
+            // exposed so animations can compose their transforms with the anchored position
+            renderer.setCssProperties(paneElement, {
+                '--et-overlay-anchored-x': `${x}px`,
+                '--et-overlay-anchored-y': `${y}px`,
+            });
             renderer.setAttribute(paneElement, 'data-overlay-placement', placement);
             if (arrowElement && middlewareData.arrow) {
                 renderer.setCssProperty(arrowElement, '--et-floating-arrow-translate', `translate3d(${middlewareData.arrow.x ?? 0}px, ${middlewareData.arrow.y ?? 0}px, 0)`);
@@ -4367,6 +4555,10 @@ const setupPositioning = (config, hostElement, paneElement, overlayRef, renderer
         });
         return createAnchoredPositionCleanup(strategy, paneElement, overlayRef, renderer);
     }
+    if (strategy.kind === 'global') {
+        applyGlobalPosition(hostElement, paneElement, renderer, strategy);
+        return () => undefined;
+    }
     applyCenteredPosition(hostElement, paneElement, renderer, strategy);
     return () => undefined;
 };
@@ -4374,6 +4566,7 @@ const setupPositioning = (config, hostElement, paneElement, overlayRef, renderer
 const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
     const _state = signal('mounting', ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
     const _componentInstance = signal(null, ...(ngDevMode ? [{ debugName: "_componentInstance" }] : /* istanbul ignore next */ []));
+    let positionUpdater = null;
     const beforeOpenedSubject = new Subject();
     const afterOpenedSubject = new Subject();
     const beforeClosedSubject = new Subject();
@@ -4407,6 +4600,16 @@ const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
         attachComponentRef(componentRef) {
             _componentInstance.set(componentRef.instance);
         },
+        /** @internal */
+        attachPositionUpdater(updater) {
+            positionUpdater = updater;
+        },
+        updatePositionStrategy(strategy) {
+            if (_state() === 'closing' || _state() === 'closed') {
+                return;
+            }
+            positionUpdater?.(strategy);
+        },
         markOpened() {
             if (_state() !== 'mounting') {
                 return;
@@ -4445,10 +4648,18 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
     const openEntriesState = signal([], ...(ngDevMode ? [{ debugName: "openEntriesState" }] : /* istanbul ignore next */ []));
     const openEntries = computed(() => openEntriesState(), ...(ngDevMode ? [{ debugName: "openEntries" }] : /* istanbul ignore next */ []));
     let rootElement = null;
+    // Synchronous teardown for each currently-mounted overlay, run when the runtime's injector is
+    // destroyed (app teardown). Registered on mount, removed once the overlay is destroyed normally.
+    const mountedTeardowns = new Set();
     const getRootElement = () => {
         if (rootElement) {
             return rootElement;
         }
+        // A previous Angular app (e.g. the one that existed before a Storybook HMR update or story
+        // switch) may have left its runtime root orphaned in <body> if it was torn down mid-animation.
+        // Such a node keeps a backdrop/pane on screen and blocks pointer events, so clear any stragglers
+        // before creating ours.
+        document.querySelectorAll('.et-overlay-runtime-root').forEach((el) => el.remove());
         rootElement = renderer.createElement('div');
         renderer.addClass(rootElement, 'et-overlay-runtime-root');
         renderer.setStyle(rootElement, {
@@ -4491,7 +4702,6 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
         const previousFocusedElement = isHTMLElement(document.activeElement) ? document.activeElement : null;
         const autoFocus = config.autoFocus ?? 'first-tabbable';
         renderer.addClass(hostElement, 'et-overlay-runtime-entry');
-        renderer.addClass(paneElement, 'et-overlay-runtime-pane');
         setBaseElementStyles(config, hostElement, paneElement, renderer);
         renderer.setAttributes(hostElement, {
             'data-overlay-id': config.id,
@@ -4503,7 +4713,6 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
             'aria-label': config.ariaLabel ?? null,
         });
         renderer.addClass(hostElement, ...(config.hostClass ?? []));
-        renderer.addClass(paneElement, ...(config.paneClass ?? []));
         if (backdropElement) {
             renderer.addClass(backdropElement, 'et-overlay-runtime-backdrop');
             setBackdropStyles(backdropElement, renderer);
@@ -4519,6 +4728,10 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
             backdropElement,
             paneElement,
         }, (result, source) => beginClose({ result, source }));
+        animationDebugLog(`runtime ${config.id}`, 'mount');
+        // matches the previous overlay behavior: escape/outside-pointer closes are
+        // ignored until the enter transition has started plus one frame
+        let interactiveCloseReady = false;
         const cleanupFns = [];
         const parentInjector = config.injector ?? config.viewContainerRef?.injector ?? environmentInjector;
         const elementInjector = Injector.create({
@@ -4529,15 +4742,31 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
             environmentInjector,
             elementInjector,
             hostElement: paneElement,
-            bindings: Object.entries(config.inputBindings ?? {}).map(([key, value]) => inputBinding(key, () => value)),
+            bindings: [
+                ...Object.entries(config.inputBindings ?? {}).map(([key, value]) => inputBinding(key, () => value)),
+                ...Object.entries(config.outputBindings ?? {}).map(([key, listener]) => outputBinding(key, listener)),
+            ],
         });
+        // pane classes are applied after component creation — Angular replaces the host
+        // element's class attribute with the component's static host class on creation
+        renderer.addClass(paneElement, 'et-overlay-runtime-pane', ...(config.paneClass ?? []));
         appRef.attachView(componentRef.hostView);
         overlayRef.attachComponentRef(componentRef);
         overlayRef.beforeOpenedSubject.next();
         overlayRef.beforeOpenedSubject.complete();
         openEntriesState.update((entries) => [...entries, overlayRef]);
-        cleanupFns.push(setupPositioning(config, hostElement, paneElement, overlayRef, renderer));
+        let positionCleanup = setupPositioning(config, hostElement, paneElement, overlayRef, renderer);
+        cleanupFns.push(() => positionCleanup());
+        let currentPositionStrategy = config.positionStrategy;
+        const getOriginElement = () => currentPositionStrategy?.kind === 'anchored' ? currentPositionStrategy.referenceElement : null;
+        overlayRef.attachPositionUpdater((strategy) => {
+            currentPositionStrategy = strategy;
+            positionCleanup();
+            resetPositioningStyles(config, hostElement, paneElement, renderer);
+            positionCleanup = setupPositioning({ ...config, positionStrategy: strategy }, hostElement, paneElement, overlayRef, renderer);
+        });
         const destroyMountedOverlay = (closeEvent) => {
+            animationDebugLog(`runtime ${config.id}`, `destroy (source "${closeEvent.source}")`);
             cleanupFns.forEach((cleanup) => cleanup());
             appRef.detachView(componentRef.hostView);
             componentRef.destroy();
@@ -4552,16 +4781,27 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
             }
             overlayRef.finishClose(closeEvent);
         };
+        // Allows the runtime to synchronously destroy this overlay on app teardown, bypassing the
+        // async leave animation (whose completion callback would never fire once the app is gone).
+        const forceTeardown = () => destroyMountedOverlay({ result: undefined, source: 'api' });
+        mountedTeardowns.add(forceTeardown);
+        cleanupFns.push(() => mountedTeardowns.delete(forceTeardown));
         const beginClose = (closeEvent) => {
             if (!overlayRef.beginClose(closeEvent)) {
                 return;
             }
             const lifecycle = getAnimatedLifecycle(componentRef);
+            animationDebugLog(`runtime ${config.id}`, `close requested (source "${closeEvent.source}", lifecycle state "${lifecycle?.state$.value ?? 'none'}", delegate ${config.animationDelegate?.leave ? 'yes' : 'no'})`);
             if (!lifecycle) {
                 destroyMountedOverlay(closeEvent);
                 return;
             }
-            lifecycle.leave();
+            if (config.animationDelegate?.leave) {
+                config.animationDelegate.leave({ lifecycle, elements: overlayRef.elements, closeEvent });
+            }
+            else {
+                lifecycle.leave();
+            }
             lifecycle.state$
                 .pipe(filter((state) => state === 'left'), take(1))
                 .subscribe(() => {
@@ -4574,6 +4814,10 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
                 if (event.key !== 'Escape' || !isTopMost(overlayRef)) {
                     return;
                 }
+                if (!interactiveCloseReady) {
+                    animationDebugLog(`runtime ${config.id}`, 'escape ignored (enter transition has not started yet)');
+                    return;
+                }
                 event.preventDefault();
                 overlayRef.close(undefined, 'escape');
             };
@@ -4590,7 +4834,21 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
                 if (!isHTMLElement(target) || paneElement.contains(target)) {
                     return;
                 }
+                if (!interactiveCloseReady) {
+                    animationDebugLog(`runtime ${config.id}`, 'outside pointer ignored (enter transition has not started yet)');
+                    return;
+                }
                 overlayRef.close(undefined, 'outside-pointer');
+                const originElement = getOriginElement();
+                if (originElement && originElement.contains(target)) {
+                    const swallowReopenClick = (clickEvent) => {
+                        if (isHTMLElement(clickEvent.target) && originElement.contains(clickEvent.target)) {
+                            clickEvent.stopImmediatePropagation();
+                            clickEvent.preventDefault();
+                        }
+                    };
+                    document.addEventListener('click', swallowReopenClick, { capture: true, once: true });
+                }
             };
             document.addEventListener('pointerdown', onPointerDown, true);
             cleanupFns.push(() => document.removeEventListener('pointerdown', onPointerDown, true));
@@ -4598,15 +4856,31 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
         cleanupFns.push(setupFocusTrap(paneElement, overlayRef, config.modal !== false, isTopMost, document));
         nextFrame(() => {
             if (overlayRef.state() !== 'mounting') {
+                animationDebugLog(`runtime ${config.id}`, `enter skipped (state "${overlayRef.state()}" before enter frame)`);
                 return;
             }
             const lifecycle = getAnimatedLifecycle(componentRef);
             if (!lifecycle) {
+                interactiveCloseReady = true;
                 applyInitialFocus(paneElement, autoFocus, document);
                 overlayRef.markOpened();
                 return;
             }
-            lifecycle.enter();
+            animationDebugLog(`runtime ${config.id}`, `enter (delegate ${config.animationDelegate?.enter ? 'yes' : 'no'}, lifecycle state "${lifecycle.state$.value}")`);
+            const readySubscription = lifecycle.state$
+                .pipe(filter((state) => state === 'entering' || state === 'entered'), take(1))
+                .subscribe(() => {
+                nextFrame(() => {
+                    interactiveCloseReady = true;
+                });
+            });
+            cleanupFns.push(() => readySubscription.unsubscribe());
+            if (config.animationDelegate?.enter) {
+                config.animationDelegate.enter({ lifecycle, elements: overlayRef.elements });
+            }
+            else {
+                lifecycle.enter();
+            }
             lifecycle.state$
                 .pipe(filter((state) => state === 'entered'), take(1))
                 .subscribe(() => {
@@ -4617,7 +4891,7 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
         return overlayRef;
     };
     destroyRef.onDestroy(() => {
-        openEntriesState().forEach((entry) => entry.close(undefined, 'api'));
+        [...mountedTeardowns].forEach((teardown) => teardown());
         maybeDestroyRootElement();
     });
     return {
@@ -6418,13 +6692,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
 
 class ColorInteractiveStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveStylesComponent, isStandalone: true, selector: "et-color-interactive-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--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))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, 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-active, var(--et-color-on-primary-focus, 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-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, 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-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, 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-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveStylesComponent, isStandalone: true, selector: "et-color-interactive-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-color-interactive){--et-theme-color-primary-rgb: 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);--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--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))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, 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-active, var(--et-color-on-primary-focus, 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-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, 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-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, 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-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-color-interactive-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--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))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, 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-active, var(--et-color-on-primary-focus, 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-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, 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-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, 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-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"] }]
+            args: [{ selector: 'et-color-interactive-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-color-interactive){--et-theme-color-primary-rgb: 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);--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--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))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, 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-active, var(--et-color-on-primary-focus, 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-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, 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-focus, 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-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, 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-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, 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-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"] }]
         }] });
 
+/**
+ * Cascades hover/active-driven color DOWN to descendants explicitly marked with
+ * `ColorInteractiveDirective` — this element does not color itself. Use it when a wrapper should
+ * expand a nested control's hit/visual area (e.g. clicking a checkbox's label should light up the
+ * checkbox itself), never to give a wrapper its own interactive coloring — that's
+ * `ColorInteractiveDirective`.
+ *
+ * Does nothing unless at least one descendant carries `ColorInteractiveDirective` — check for
+ * that before adding this. It was mistakenly added to a component with no such descendant once
+ * already, where it did nothing but was confusing to read.
+ */
 class ColorInteractiveContainerDirective {
     constructor() {
         this.styleManager = injectStyleManager();
@@ -6443,6 +6728,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Marks a descendant as NOT counting toward an ancestor's `ColorInteractiveDirective`
+ * `:hover`/`:active` reaction (via the `:has()` guard in color-interactive-styles.component.css).
+ * Use it for content that's incidentally inside an interactive ancestor but isn't part of what
+ * makes that ancestor interactive — e.g. a hint/error block sitting inside a form field's frame.
+ *
+ * This only suppresses the ancestor's OWN reaction to hovering/pressing the excluded element — it
+ * has no effect on custom-property inheritance into descendants past the excluded element. If
+ * what you actually need is "stop my own cosmetic styling from reacting to a parent's unrelated
+ * interaction," this is the wrong tool; that's the class of bug `ColorInteractiveHasFocusDirective`
+ * used to have (see its own comment).
+ */
 class ColorInteractiveExcludeDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveExcludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveExcludeDirective, isStandalone: true, selector: "[etColorInteractiveExclude]", host: { classAttribute: "et-color-interactive-exclude" }, ngImport: i0 }); }
@@ -6457,24 +6754,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * Tints `--et-theme-color-primary-*` etc. only when a descendant genuinely has `:focus-visible`
+ * (`:has(:focus-visible)`) — never on mouse `:hover`/`:active`. Use this for a wrapper (like a
+ * form field's frame) that should show the theme color while its control is focused, but must
+ * NOT react to incidental mouse interaction with unrelated nested widgets (a toolbar button, a
+ * rendered link) that happen to live inside the same wrapper.
+ *
+ * Deliberately does NOT also carry `ColorInteractiveDirective`'s `et-color-interactive` class:
+ * that class's plain `:hover`/`:active` rules locally override the same (inheriting)
+ * `--et-theme-color-primary-rgb`, so anything bubbling up from ANYWHERE in the subtree would
+ * leak the transient hover/press color into every descendant reading it for unrelated cosmetics —
+ * exactly the bug this directive's only consumer (form-field) shipped once, before the two
+ * behaviors were split apart. If you need the plain hover/active reaction too, add
+ * `ColorInteractiveDirective` explicitly and make sure you actually want both.
+ */
 class ColorInteractiveHasFocusDirective {
     constructor() {
         this.styleManager = injectStyleManager();
         this.styleManager.mount(ColorInteractiveStylesComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveHasFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveHasFocusDirective, isStandalone: true, selector: "[etColorInteractiveHasFocus]", host: { classAttribute: "et-color-interactive et-color-interactive--has-focus" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveHasFocusDirective, isStandalone: true, selector: "[etColorInteractiveHasFocus]", host: { classAttribute: "et-color-interactive--has-focus" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveHasFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etColorInteractiveHasFocus]',
                     host: {
-                        class: 'et-color-interactive et-color-interactive--has-focus',
+                        class: 'et-color-interactive--has-focus',
                     },
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Makes an element react to ITS OWN `:hover`/`:active`/`:focus-visible`/`[disabled]` by tinting
+ * `--et-theme-color-primary-*`/`-on-primary-*`/`-ink-*` with the current color theme. Use this on
+ * a single, self-contained interactive element — a button, a checkbox, a segmented button.
+ *
+ * Do NOT apply this to a wrapper that also contains OTHER, independently-interactive elements
+ * (e.g. a toolbar with its own buttons, or a form-field's control slot). These are ordinary
+ * inheriting CSS custom properties, so a descendant reading them for its own cosmetics (a caret
+ * color, a link color) gets swept along whenever ANYTHING inside the wrapper is hovered or
+ * clicked — not just when the wrapper itself is the thing being interacted with. That exact bug
+ * shipped once already; see ColorInteractiveContainerDirective/ColorInteractiveHasFocusDirective
+ * for the shapes that avoid it.
+ */
 class ColorInteractiveDirective {
     constructor() {
         this.styleManager = injectStyleManager();
@@ -6933,6 +7258,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ selector: 'et-surface-interactive-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-surface-interactive){--et-surface-interaction-rgb: var(--et-surface-interaction);--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:hover){--et-surface-interaction-rgb: var(--et-surface-interaction-hover, var(--et-surface-interaction));--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:focus-visible){--et-surface-interaction-rgb: var( --et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:active){--et-surface-interaction-rgb: var( --et-surface-interaction-active, var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction))) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive[disabled]),:where(.et-surface-interactive[aria-disabled=true]){--et-surface-interaction-rgb: var( --et-surface-interaction-disabled, var( --et-surface-interaction-active, var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction))) ) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}\n"] }]
         }] });
 
+/**
+ * Same shape as `ColorInteractiveDirective` — reacts to its own `:hover`/`:focus-visible`/
+ * `:active`/`[disabled]` — but drives `--et-surface-interaction-*`, a neutral/muted tint, instead
+ * of the ambient color theme. Use it for chrome-level interaction feedback that shouldn't borrow
+ * the page's brand color (a tab trigger's hover state, a toggle button that should look neutral
+ * until it's actually active — see `ButtonDirective`'s `mutedUntilPressed`).
+ *
+ * Has no container/exclude/has-focus variants: it has no descendant-cascading CSS at all, so
+ * applying it to a wrapper with independently-interactive children is safe by construction —
+ * unlike `ColorInteractiveDirective`, there's no bubbling-leak failure mode to worry about here.
+ */
 class SurfaceInteractiveDirective {
     constructor() {
         this.styleManager = injectStyleManager();
@@ -6955,5 +7291,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resetPositioningStyles, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map