@ethlete/core 5.0.0-next.51 → 5.0.0-next.52

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @ethlete/core
 
+## 5.0.0-next.52
+
+### Major Changes
+
+- [`4044a00`](https://github.com/ethlete-io/ethdk/commit/4044a0007de55d25b5a697c6e4190e21d68d022f) Thanks [@TomTomB](https://github.com/TomTomB)! - - Notifications: a toast keeps one elevation, paints above overlays, and keeps out of every reserved viewport edge.
+  - Query devtools: a side dock reserves the edge it covers.
+  - `SurfaceContextTracker` drops `topType` / `topElevation`.
+
+### Minor Changes
+
+- [`3122607`](https://github.com/ethlete-io/ethdk/commit/3122607d1727844a2d987032f45ad631f678c2ca) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlays and floating chrome now keep out of space a surface above the page reserved with `reserveOverlayViewportSpace()` - so a dialog, menu or toast is no longer stacked under the docked query devtools panel.
+
+### Patch Changes
+
+- [`0116464`](https://github.com/ethlete-io/ethdk/commit/0116464f3efc92bfa7dc094a2b20ae9d813a8c45) Thanks [@TomTomB](https://github.com/TomTomB)! - - `etAnimatedLifecycle` no longer ends an enter or leave before its animation started, which destroyed a routed overlay page without playing its exit animation.
+  - Adds `AnimatableDirective.getRunningAnimations()`.
+
+- [`68db91f`](https://github.com/ethlete-io/ethdk/commit/68db91fb975378cccebc4ad99f59365eba90fb43) Thanks [@TomTomB](https://github.com/TomTomB)! - - `etAutoSurface`, `et-grid-item` and `et-form-field` elevate above an app's root surface, instead of staying inherited.
+  - An unset `etProvideSurface` reports the surface it inherits, so content below it no longer resolves one elevation too low.
+  - Adds `injectParentSurface()`.
+
 ## 5.0.0-next.51
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -7,7 +7,7 @@ import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import { DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd, NavigationSkipped, NavigationStart, NavigationError, RouterLink } from '@angular/router';
 import { Title, Meta, DomSanitizer } from '@angular/platform-browser';
-import { autoUpdate, offset, flip, shift, limitShift, computePosition, hide, arrow, size } from '@floating-ui/dom';
+import { offset, flip, shift, limitShift, computePosition, autoUpdate, hide, arrow, size } from '@floating-ui/dom';
 
 const ANIMATION_DEBUG_STORAGE_KEY = 'et-overlay-debug';
 let cachedEnabled = null;
@@ -42,7 +42,6 @@ class AnimatableDirective {
         this.animationEndSubject$ = new Subject();
         this.activeAnimationCount = 0;
         this.hostActiveAnimationCount$ = new BehaviorSubject(0);
-        this.pendingTransitionIds = [];
         this.animationStart$ = this.animationStartSubject$.asObservable().pipe(debounceTime(0));
         this.animationEnd$ = this.animationEndSubject$.asObservable().pipe(debounceTime(0));
         this.totalActiveAnimationCount$ = this.parent
@@ -58,9 +57,10 @@ class AnimatableDirective {
                     const startingNewBatch = this.activeAnimationCount === 0;
                     this.updateActiveAnimationCount(1);
                     if (startingNewBatch) {
-                        this.activeBatchTransitionId = this.pendingTransitionIds.shift();
+                        this.activeBatchTransitionId = this.pendingTransitionId;
+                        this.pendingTransitionId = undefined;
                     }
-                    animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `start (count ${this.activeAnimationCount}, batch "${this.activeBatchTransitionId}", pending [${this.pendingTransitionIds.join(', ')}])`);
+                    animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `start (count ${this.activeAnimationCount}, batch "${this.activeBatchTransitionId}", pending "${this.pendingTransitionId ?? 'none'}")`);
                     if (!didEmitStart) {
                         didEmitStart = true;
                         this.animationStartSubject$.next();
@@ -91,8 +91,33 @@ class AnimatableDirective {
         }), takeUntilDestroyed())
             .subscribe();
     }
+    /**
+     * Labels the next batch of animations that starts on this element. Only the most recent id is
+     * kept: a call whose animations never start must not leave an id behind for a later batch.
+     */
     setTransitionId(id) {
-        this.pendingTransitionIds.push(id);
+        this.pendingTransitionId = id;
+    }
+    /**
+     * The animations running on this element right now, without the endless and pseudo-element ones.
+     *
+     * Reading this flushes pending style changes, so an animation a class change started in the same
+     * task is already listed here. `isAnimating$` cannot answer that: it turns true only once the
+     * browser dispatches `transitionrun`, a frame after the style change is committed.
+     */
+    getRunningAnimations() {
+        const el = this.elementRef.nativeElement;
+        if (typeof el.getAnimations !== 'function')
+            return [];
+        return el.getAnimations().filter((animation) => {
+            if (animation.playState !== 'running')
+                return false;
+            const effect = animation.effect;
+            if (!effect || effect.pseudoElement)
+                return false;
+            // An endless animation never resolves `finished`, so awaiting one would strand the transition.
+            return effect.getComputedTiming().iterations !== Infinity;
+        });
     }
     updateActiveAnimationCount(delta) {
         const newVal = this.activeAnimationCount + delta;
@@ -4696,73 +4721,39 @@ class AnimatedLifecycleDirective {
                 this.removeClass(fromClass);
                 this.addClass(toClass);
             }
-        }), switchMap(() => this.animatable.isAnimating$), take(1), switchMap((isAnimating) => {
-            if (isAnimating)
-                return of(true);
-            // Nothing started yet on the first check - give a transition with a delay one more
-            // frame before concluding none is coming (mirrors handleInterruptedTransition).
-            return fromNextFrame().pipe(switchMap(() => this.animatable.isAnimating$), take(1));
-        }), switchMap((isAnimating) => {
-            if (!isAnimating) {
-                // No transition ever started - e.g. `prefers-reduced-motion` collapsed every
-                // transition-duration to 0, which per spec never fires transitionrun/transitionend.
-                // Waiting on animationEnd$ here would hang forever, so treat it as settled.
-                this.debugLog(`${transitionId}: completes via fallback (no transition started)`);
-                return of(true);
-            }
-            return this.animatable.animationEnd$.pipe(filter(() => this.state$.value === expectedState), switchMap((e) => {
-                if (!e.cancelled && e.transitionId === transitionId) {
-                    return of(true);
-                }
-                // The batch ended cancelled or under a different id - e.g. the browser cancelled and
-                // restarted a running transition mid-flight (an anchored overlay whose ancestor pane got
-                // destroyed) or a foreign transition on the same element finished. If nothing is
-                // animating anymore the expected end event can never arrive, so treat the transition as
-                // settled instead of waiting forever (mirrors the fallback in handleInterruptedTransition).
-                return this.animatable.isAnimating$.pipe(take(1), tap((stillAnimating) => {
-                    if (!stillAnimating) {
-                        this.debugLog(`${transitionId}: completes via fallback (batch id "${e.transitionId ?? 'none'}", cancelled ${e.cancelled})`);
-                    }
-                }), map((stillAnimating) => !stillAnimating));
-            }));
-        }), filter((settled) => settled && this.state$.value === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+        }), switchMap(() => this.whenAnimationsSettled()), tap(() => this.debugLog(`${transitionId}: settled`)), filter(() => this.state$.value === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     handleInterruptedTransition(config) {
         const { removeClasses, addClasses, expectedState, transitionId, onComplete, cancelSignal } = config;
         this.removeClasses(...removeClasses);
         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(() => {
-            this.debugLog(`${transitionId}: interrupt complete`);
-            onComplete();
-        }), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+        this.whenAnimationsSettled()
+            .pipe(tap(() => this.debugLog(`${transitionId}: interrupt settled`)), filter(() => this.state$.value === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
+    /**
+     * Emits once every animation the class change started on this element has finished, or right away
+     * when the change starts none - a `transition-duration` of 0 (`prefers-reduced-motion`) or a
+     * property whose value did not change.
+     *
+     * `isAnimating$` cannot replace the reading here: it turns true a frame after the browser commits
+     * the style change, so a slow commit reads as "nothing will animate" and ends the transition
+     * before its animation starts.
+     */
+    whenAnimationsSettled(isFirstRead = true) {
+        return defer(() => {
+            const running = this.animatable.getRunningAnimations();
+            if (!running.length) {
+                // Settling on the first read means nothing was ever awaited, so emitting here would reenter
+                // the enter()/leave() call still on the stack. Every later read already runs off a promise.
+                return isFirstRead ? fromNextFrame() : of(undefined);
+            }
+            // A running animation may be replaced rather than finished - the browser retargets a transition
+            // whose end value changes - so re-read instead of settling on the first batch.
+            return from(Promise.allSettled(running.map((animation) => animation.finished))).pipe(switchMap(() => this.whenAnimationsSettled(false)));
+        });
+    }
     addClass(className) {
         this.renderer.addClass(this.element, className);
     }
@@ -7242,6 +7233,112 @@ const setupFocusTrap = (paneElement, overlayRef, enabled, isTopMost, document) =
     };
 };
 
+const NO_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
+const reservations = /* @__PURE__ */ new Set();
+const listeners = /* @__PURE__ */ new Set();
+/**
+ * The custom property each edge is published as on the document root, so page chrome that overlays
+ * cannot move for you - a sticky action bar, a floating button - can keep out of the same space:
+ * `inset-block-end: calc(1.6rem + var(--et-viewport-inset-bottom, 0px))`.
+ */
+const INSET_PROPERTIES = {
+    top: '--et-viewport-inset-top',
+    right: '--et-viewport-inset-right',
+    bottom: '--et-viewport-inset-bottom',
+    left: '--et-viewport-inset-left',
+};
+/**
+ * Page content paints below every reserving surface, so - unlike an overlay - it keeps out of every
+ * reservation, whichever level it was made on.
+ */
+const publishInsetProperties = () => {
+    const root = globalThis.document?.documentElement;
+    if (!root)
+        return;
+    const insets = overlayViewportInsets(Number.NEGATIVE_INFINITY);
+    Object.entries(INSET_PROPERTIES).forEach(([edge, property]) => {
+        if (!reservations.size) {
+            root.style.removeProperty(property);
+            return;
+        }
+        root.style.setProperty(property, `${insets[edge]}px`);
+    });
+};
+const notify = () => {
+    publishInsetProperties();
+    listeners.forEach((listener) => listener());
+};
+/**
+ * Reserves an edge of the viewport, so overlays keep out of it. Returns the release callback.
+ *
+ * Meant for a surface an application paints over its own content and above the overlay layer - a
+ * docked devtools panel, an always-on-top widget. A centered or globally positioned overlay is laid
+ * out inside what is left of the viewport, and an anchored one avoids the reserved edge the same way
+ * it avoids the viewport edge. Page chrome that nothing can move for you - a sticky action bar, a
+ * floating button - reads the published `--et-viewport-inset-*` custom properties instead.
+ */
+const reserveOverlayViewportSpace = (reservation) => {
+    const entry = {
+        top: reservation.top ?? 0,
+        right: reservation.right ?? 0,
+        bottom: reservation.bottom ?? 0,
+        left: reservation.left ?? 0,
+        layer: reservation.layer ?? DEFAULT_OVERLAY_LAYER + 1,
+    };
+    reservations.add(entry);
+    notify();
+    return () => {
+        if (!reservations.delete(entry))
+            return;
+        notify();
+    };
+};
+/**
+ * What an overlay on this stacking level must keep out of: the largest reservation per edge made by a
+ * surface that paints above it. Reservations on or below the level are ignored - they cannot cover it.
+ */
+const overlayViewportInsets = (layer = DEFAULT_OVERLAY_LAYER) => {
+    let insets = NO_INSET;
+    reservations.forEach((reservation) => {
+        if (reservation.layer <= layer)
+            return;
+        insets = {
+            top: Math.max(insets.top, reservation.top),
+            right: Math.max(insets.right, reservation.right),
+            bottom: Math.max(insets.bottom, reservation.bottom),
+            left: Math.max(insets.left, reservation.left),
+        };
+    });
+    return insets;
+};
+/** {@link overlayViewportInsets} for the stacking level `element` is rendered on. */
+const overlayViewportInsetsFor = (element) => overlayViewportInsets(resolveOverlayLayer(element));
+/**
+ * Runs `listener` whenever a reservation is made or released, so an already positioned overlay can be
+ * laid out again. Returns the unsubscribe callback.
+ *
+ * @internal
+ */
+const onOverlayViewportInsetsChange = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+
+/**
+ * Shrinks the host box to the part of the viewport nothing above this overlay has reserved, so a
+ * centered or globally placed pane is laid out inside it instead of under a docked panel.
+ */
+const applyViewportInsets = (hostElement, renderer) => {
+    const insets = overlayViewportInsetsFor(hostElement);
+    renderer.setStyle(hostElement, {
+        top: `${insets.top}px`,
+        right: `${insets.right}px`,
+        bottom: `${insets.bottom}px`,
+        left: `${insets.left}px`,
+    });
+};
 const setBaseElementStyles = (config, hostElement, paneElement, renderer) => {
     renderer.setStyle(hostElement, {
         position: 'fixed',
@@ -7273,6 +7370,7 @@ const applyCenteredPosition = (hostElement, paneElement, renderer, _config) => {
         padding: '16px',
         overflow: 'auto',
     });
+    applyViewportInsets(hostElement, renderer);
     renderer.setStyle(paneElement, {
         position: 'relative',
     });
@@ -7287,6 +7385,7 @@ const applyGlobalPosition = (hostElement, paneElement, renderer, config) => {
         placeItems: `${config.vertical ?? 'center'} ${config.horizontal ?? 'center'}`,
         padding: config.padding ?? '0',
     });
+    applyViewportInsets(hostElement, renderer);
     renderer.setStyle(paneElement, {
         position: 'relative',
     });
@@ -7348,10 +7447,10 @@ const setupPositioning = (config, hostElement, paneElement, overlayRef, renderer
     }
     if (strategy.kind === 'global') {
         applyGlobalPosition(hostElement, paneElement, renderer, strategy);
-        return () => undefined;
+        return onOverlayViewportInsetsChange(() => applyViewportInsets(hostElement, renderer));
     }
     applyCenteredPosition(hostElement, paneElement, renderer, strategy);
-    return () => undefined;
+    return onOverlayViewportInsetsChange(() => applyViewportInsets(hostElement, renderer));
 };
 
 let middlewareExtras = null;
@@ -7423,6 +7522,27 @@ const preferredSide = (options) => ({
             : { data: { availableSpace }, reset: { placement: toOppositeSidePlacement(placement) } };
     },
 });
+const toSideObject = (padding) => typeof padding === 'number'
+    ? { top: padding, right: padding, bottom: padding, left: padding }
+    : {
+        top: padding.top ?? 0,
+        right: padding.right ?? 0,
+        bottom: padding.bottom ?? 0,
+        left: padding.left ?? 0,
+    };
+/**
+ * The strategy's own viewport padding plus the space reserved on each edge. Every middleware that
+ * measures overflow gets it, so an edge a docked panel covers is as unavailable as the viewport edge.
+ */
+const paddingWithInsets = (padding, insets) => {
+    const own = toSideObject(padding);
+    return {
+        top: own.top + insets.top,
+        right: own.right + insets.right,
+        bottom: own.bottom + insets.bottom,
+        left: own.left + insets.left,
+    };
+};
 const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, renderer) => {
     // mirrorWidth needs a real element to measure; virtual references fall back to max-content
     const mirrorWidthElement = strategy.mirrorWidth && isHTMLElement(strategy.referenceElement) ? strategy.referenceElement : null;
@@ -7450,7 +7570,7 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             renderer.setStyle(paneElement, { visibility: 'hidden' });
         }
     };
-    const cleanup = autoUpdate(strategy.referenceElement, paneElement, () => {
+    const update = () => {
         // Checked here rather than left to the `hide` middleware, which is only in the list when `autoHide`
         // or `autoCloseIfReferenceHidden` asked for it: a trigger destroyed while its overlay is open (a
         // menu item that removes the button it was opened from) would otherwise fly to the corner for the
@@ -7460,19 +7580,22 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             return;
         }
         const arrowElement = paneElement.querySelector('[et-floating-arrow]');
+        const insets = overlayViewportInsetsFor(paneElement);
+        const viewportPadding = paddingWithInsets(strategy.viewportPadding ?? 8, insets);
         const middleware = [];
         middleware.push(offset(strategy.offset ?? 8));
         middleware.push(strategy.minAvailableSpace === undefined
             ? flip({
                 fallbackPlacements: strategy.fallbackPlacements ?? undefined,
                 fallbackAxisSideDirection: 'start',
+                padding: insets,
                 boundary: strategy.boundary,
             })
             : preferredSide({
                 minAvailableSpace: strategy.minAvailableSpace,
                 // must stay the padding `size` measures with: the threshold is then compared against the
                 // very height the pane ends up capped to
-                padding: strategy.viewportPadding ?? 8,
+                padding: viewportPadding,
                 boundary: strategy.boundary,
             }));
         if (strategy.shift !== false) {
@@ -7483,7 +7606,7 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
                 crossAxis: strategy.minAvailableSpace === undefined &&
                     (typeof strategy.shift === 'object' ? (strategy.shift.crossAxis ?? false) : false),
                 limiter: limitShift(),
-                padding: strategy.viewportPadding ?? 8,
+                padding: viewportPadding,
                 boundary: strategy.boundary,
             }));
         }
@@ -7493,7 +7616,7 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             const extras = requireMiddlewareExtras('autoResize');
             if (extras) {
                 middleware.push(extras.size({
-                    padding: strategy.viewportPadding ?? 8,
+                    padding: viewportPadding,
                     apply({ availableHeight, availableWidth }) {
                         renderer.setCssProperties(paneElement, {
                             '--et-overlay-max-width': `${availableWidth}px`,
@@ -7547,9 +7670,14 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
                 renderer.setCssProperty(arrowElement, '--et-floating-arrow-translate', `translate3d(${middlewareData.arrow.x ?? 0}px, ${middlewareData.arrow.y ?? 0}px, 0)`);
             }
         });
-    });
+    };
+    const cleanup = autoUpdate(strategy.referenceElement, paneElement, update);
+    // A panel docked over the page changes how much room the pane has without moving, resizing or
+    // scrolling anything `autoUpdate` watches.
+    const stopInsetUpdates = onOverlayViewportInsetsChange(update);
     return () => {
         cleanup();
+        stopInsetUpdates();
     };
 };
 /**
@@ -9184,9 +9312,16 @@ class ProvideSurfaceDirective {
             return theme;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : /* istanbul ignore next */ []));
-        this.elevation = computed(() => this.resolvedTheme()?.elevation ?? 0, /* @ts-ignore */
+        /**
+         * The surface theme in effect on this element - the theme this provider resolves itself, or,
+         * where it is left unset, the one it inherits from the closest ancestor provider. The outermost
+         * provider resolves the app default, so the chain ends there.
+         */
+        this.activeTheme = computed(() => this.resolvedTheme() ?? this.parentProvider?.activeTheme() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
+        this.elevation = computed(() => this.activeTheme()?.elevation ?? 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
-        this.surfaceType = computed(() => this.resolvedTheme()?.type ?? null, /* @ts-ignore */
+        this.surfaceType = computed(() => this.activeTheme()?.type ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "surfaceType" }] : /* istanbul ignore next */ []));
         this.surfaceName = computed(() => {
             const value = this.effectiveSurface();
@@ -9261,20 +9396,25 @@ const injectSurfaceType = () => {
     const defaultType = injectDefaultSurfaceTheme()?.type ?? SURFACE_TYPE.DARK;
     return computed(() => provider?.surfaceType() ?? defaultType);
 };
+/**
+ * Inject a signal containing the surface theme the current subtree renders on - the theme in
+ * effect on the surrounding surface provider, or the app's default surface where nothing provides
+ * one. Use it to derive an elevation relative to the surrounding surface.
+ *
+ * `null` where the app registers no surface themes, or registers a default per surface type -
+ * which of those two `:root` paints is a `prefers-color-scheme` decision, so it cannot be
+ * resolved at runtime.
+ */
+const injectParentSurface = () => {
+    const provider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
+    const defaultTheme = injectDefaultSurfaceTheme();
+    return computed(() => provider?.activeTheme() ?? defaultTheme);
+};
 
 let uniqueId = 0;
 const SURFACE_CONTEXT_TRACKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const entries = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
-    const topEntry = computed(() => {
-        const stack = entries();
-        return stack.length > 0 ? (stack[stack.length - 1] ?? null) : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "topEntry" }] : /* istanbul ignore next */ []));
-    const topType = computed(() => topEntry()?.type ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "topType" }] : /* istanbul ignore next */ []));
-    const topElevation = computed(() => topEntry()?.elevation ?? 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "topElevation" }] : /* istanbul ignore next */ []));
     const register = (type, elevation, element) => {
         const id = `surface-ctx-${uniqueId++}`;
         const entry = { id, type, elevation, element };
@@ -9294,7 +9434,7 @@ const SURFACE_CONTEXT_TRACKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
         }
         return null;
     };
-    return { topType, topElevation, register, surfaceForElement };
+    return { register, surfaceForElement };
 }, { name: 'SurfaceContextTracker' });
 const provideSurfaceContextTracker = /* @__PURE__ */ toProvideFn(SURFACE_CONTEXT_TRACKER_DEF);
 const injectSurfaceContextTracker = /* @__PURE__ */ toInjectFn(SURFACE_CONTEXT_TRACKER_DEF);
@@ -9314,9 +9454,9 @@ class AutoSurfaceDirective {
     }
     constructor() {
         this.ownSurfaceProvider = inject(ProvideSurfaceDirective);
-        this.contextSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.surfaceContextTracker = injectSurfaceContextTracker();
+        this.parentSurface = injectParentSurface();
         this.elementRef = inject(ElementRef);
         /**
          * Explicit surface provider to resolve the surface relative to. Falls back to the
@@ -9343,9 +9483,10 @@ class AutoSurfaceDirective {
             // Establish a dependency on the DOM-settle tick so the non-reactive containment read below
             // is re-evaluated after the element is grafted into its final overlay pane.
             this.domSettleTick();
-            const contextProvider = this.surfaceProvider() ?? this.contextSurfaceProvider ?? null;
-            const contextElevation = contextProvider?.elevation() ?? null;
-            const contextType = contextProvider?.surfaceType() ?? null;
+            const explicitProvider = this.surfaceProvider();
+            const contextTheme = explicitProvider ? explicitProvider.activeTheme() : this.parentSurface();
+            const contextElevation = contextTheme?.elevation ?? null;
+            const contextType = contextTheme?.type ?? null;
             // An overlay's projected/portaled content keeps the injector of where it was
             // *declared* (the trigger location), not the pane it renders into - so the
             // injector-derived parent surface is one elevation too low. The surface-context
@@ -9867,11 +10008,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/core` this build was cut from. */
-const CORE_VERSION = '5.0.0-next.51';
+const CORE_VERSION = '5.0.0-next.52';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AutoSurfaceDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PALETTE, COLOR_PROVIDER, CORE_VERSION, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_OVERLAY_LAYER, 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, ET_RESTORE_SCROLL, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NOTIFICATION_CLICK_MESSAGE_TYPE, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OVERLAY_LAYER_ATTRIBUTE, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RestoreScrollDirective, RuntimeError, SURFACE_COLOR, SURFACE_PROVIDER, SURFACE_TYPE, SWIPE_VELOCITY_WINDOW_MS, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SlugifyPipe, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, UNSAVED_CHANGES_TITLE_MARKER, ValidateAtLeastOneRequired, Validators, anchoredOverlayPosition, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyFaviconOverlay, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHeadTitleMarker, 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, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createObjectUrlHandle, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUnsavedChangesGuard, createUnsavedChangesTabLock, createUnsavedChangesTracker, createUserConsentProvider, deferredSignal, defineLabels, defineProvider, defineRootProvider, defineStaticProvider, defineStaticRootProvider, deleteCookie, dragGestureFrom, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, enableAnchoredOverlayPositionExtras, equal, fetchDeployedBuildFingerprint, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, holdScrollRestoration, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectAppUpdates, injectAppUpdatesConfig, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorPalette, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDefaultColorTheme, injectDefaultSurfaceTheme, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFaviconStore, injectFileDownload, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsDocumentVisible, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectNotifications, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectPrefersReducedMotion, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterNavigationState, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceType, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUnsavedChangesCoordinator, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, isOnHigherOverlayLayer, isStaleBuildError, markdownToHtml, matchesReducedMotion, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, normalizeUnsavedChangesSource, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideAppUpdates, provideAppUpdatesConfig, provideAppUpdatesInstance, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorPalette, provideColorThemes, provideColorThemesWithTailwind4, provideFaviconStore, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideNotifications, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideUnsavedChangesCoordinator, provideViewportConfig, randomId, readBuildFingerprint, readFromClipboard, registerAnchoredPositionMiddlewareExtras, registerAnchoredPositionSetup, resetPositioningStyles, resolveAppRootColorProvider, resolveOverlayLayer, resolveSurfaceByElevation, round, routerDisableScrollTop, routerRestoreScroll, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalDeferredLoading, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, suppressTextSelection, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toInjectFn, toProvideFn, toStringBinding, toToken, 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, AutoSurfaceDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PALETTE, COLOR_PROVIDER, CORE_VERSION, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_OVERLAY_LAYER, 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, ET_RESTORE_SCROLL, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NOTIFICATION_CLICK_MESSAGE_TYPE, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OVERLAY_LAYER_ATTRIBUTE, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RestoreScrollDirective, RuntimeError, SURFACE_COLOR, SURFACE_PROVIDER, SURFACE_TYPE, SWIPE_VELOCITY_WINDOW_MS, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SlugifyPipe, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, UNSAVED_CHANGES_TITLE_MARKER, ValidateAtLeastOneRequired, Validators, anchoredOverlayPosition, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyFaviconOverlay, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHeadTitleMarker, 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, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createObjectUrlHandle, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUnsavedChangesGuard, createUnsavedChangesTabLock, createUnsavedChangesTracker, createUserConsentProvider, deferredSignal, defineLabels, defineProvider, defineRootProvider, defineStaticProvider, defineStaticRootProvider, deleteCookie, dragGestureFrom, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, enableAnchoredOverlayPositionExtras, equal, fetchDeployedBuildFingerprint, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, holdScrollRestoration, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectAppUpdates, injectAppUpdatesConfig, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorPalette, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDefaultColorTheme, injectDefaultSurfaceTheme, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFaviconStore, injectFileDownload, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsDocumentVisible, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectNotifications, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectParentSurface, injectPathParam, injectPathParamChanges, injectPathParams, injectPrefersReducedMotion, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterNavigationState, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceType, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUnsavedChangesCoordinator, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, isOnHigherOverlayLayer, isStaleBuildError, markdownToHtml, matchesReducedMotion, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, normalizeUnsavedChangesSource, numberBreakpointAttribute, numberBreakpointTransform, onOverlayViewportInsetsChange, overlayViewportInsets, overlayViewportInsetsFor, previousSignalValue, provideAppUpdates, provideAppUpdatesConfig, provideAppUpdatesInstance, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorPalette, provideColorThemes, provideColorThemesWithTailwind4, provideFaviconStore, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideNotifications, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideUnsavedChangesCoordinator, provideViewportConfig, randomId, readBuildFingerprint, readFromClipboard, registerAnchoredPositionMiddlewareExtras, registerAnchoredPositionSetup, reserveOverlayViewportSpace, resetPositioningStyles, resolveAppRootColorProvider, resolveOverlayLayer, resolveSurfaceByElevation, round, routerDisableScrollTop, routerRestoreScroll, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalDeferredLoading, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, suppressTextSelection, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toInjectFn, toProvideFn, toStringBinding, toToken, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map