@ethlete/core 5.0.0-next.66 → 5.0.0-next.68

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @ethlete/core
 
+## 5.0.0-next.68
+
+### Minor Changes
+
+- Add `attributes` and `movingClass` options to `injectAnimatedListItems`: watch items a filter hides, and clip overflow while items move.
+- Add `injectAnimatedListItems`: items of a list that stay slide to their new place, new items fade in, and removed items fade out where they were.
+- `injectAnimatedListItems` takes an `animateChange` callback; returning `false` measures a change without moving or fading items.
+
+### Patch Changes
+
+- Place anchored overlays on whole device pixels, so their content no longer shifts by a pixel when an animation ends.
+- Round a shifted anchored overlay inward, so snapping to device pixels no longer pushes it past the viewport padding.
+- The fade-out copy in `injectAnimatedListItems` keeps the padding, border, colour and text styles its item had from ancestor selectors.
+- `createCanAnimateSignal` cancels its pending frame when its host is destroyed, and `matchesReducedMotion` returns `false` in an environment without `matchMedia` instead of throwing.
+- `injectAnimatedListItems` fades a new item in only after the removed items have faded out, so a select's "No results" or loading row cross-fades with the options instead of overlapping them.
+- `registerScrollRestorationState` now restores a page that registers after the navigation ended, such as a route component behind a nested `<router-outlet>`, on reload and back/forward navigation. The offset waits for that state before it is applied.
+- A quick mouse flick on a snapping scrollable or carousel now carries on to the next child in its direction instead of gliding back to the nearest one.
+
+## 5.0.0-next.67
+
+### Patch Changes
+
+- Keep `et-animation-leave-to` on an `AnimatedLifecycleDirective` host after its leave finishes, until the next `enter()`. An element removed a frame after its leave no longer flashes back to full opacity first.
+
 ## 5.0.0-next.66
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { assertInInjectionContext, inject, DestroyRef, ElementRef, TemplateRef, InjectionToken, booleanAttribute, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, untracked, ApplicationRef, runInInjectionContext, NgZone, Injector, numberAttribute, PLATFORM_ID, afterRenderEffect, EnvironmentInjector, createComponent, ViewEncapsulation, Component, Directive, model, ViewContainerRef, input, CSP_NONCE, provideEnvironmentInitializer, output, createEnvironmentInjector, Pipe, makeEnvironmentProviders, afterEveryRender } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
-import { Subject, fromEvent, switchMap, startWith, of, defer, from, map, catchError, timer, takeUntil, tap, pairwise, debounceTime, merge, distinctUntilChanged, EMPTY, expand, skip, take, filter, isObservable, ignoreElements, BehaviorSubject, combineLatest, Observable, firstValueFrom, defaultIfEmpty, concatMap, concat, finalize, exhaustMap, share, shareReplay, ReplaySubject } from 'rxjs';
+import { Subject, fromEvent, switchMap, startWith, of, defer, from, map, catchError, timer, takeUntil, tap, pairwise, debounceTime, merge, distinctUntilChanged, EMPTY, expand, skip, take, filter, Subscription, isObservable, ignoreElements, BehaviorSubject, combineLatest, Observable, firstValueFrom, defaultIfEmpty, concatMap, concat, finalize, exhaustMap, share, shareReplay, ReplaySubject } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import { isPlatformBrowser, Location, DOCUMENT as DOCUMENT$1, isPlatformServer } from '@angular/common';
@@ -1043,9 +1043,10 @@ const createIsRenderedSignal = () => {
 const createCanAnimateSignal = () => {
     const value = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    nextFrame(() => {
+    const cancel = nextFrame(() => {
         value.set(true);
     });
+    inject(DestroyRef).onDestroy(cancel);
     return {
         state: value.asReadonly(),
     };
@@ -1490,6 +1491,245 @@ const injectAnimatedBlockSize = (config) => {
     });
 };
 
+const translateOf = (element) => {
+    const match = /matrix\(([^)]+)\)/.exec(getComputedStyle(element).transform);
+    const values = match?.[1]?.split(',').map(Number);
+    return { x: values?.[4] ?? 0, y: values?.[5] ?? 0 };
+};
+const layoutBoxOf = (element, origin, scale) => {
+    const rect = element.getBoundingClientRect();
+    const translate = translateOf(element);
+    return {
+        top: (rect.top - origin.top) / scale - translate.y,
+        left: (rect.left - origin.left) / scale - translate.x,
+        width: element.offsetWidth,
+        height: element.offsetHeight,
+    };
+};
+const CONTEXT_STYLES = [
+    'padding-top',
+    'border-top-width',
+    'border-top-style',
+    'border-top-color',
+    'padding-right',
+    'border-right-width',
+    'border-right-style',
+    'border-right-color',
+    'padding-bottom',
+    'border-bottom-width',
+    'border-bottom-style',
+    'border-bottom-color',
+    'padding-left',
+    'border-left-width',
+    'border-left-style',
+    'border-left-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-bottom-right-radius',
+    'border-bottom-left-radius',
+    'background-color',
+    'color',
+    'font-size',
+    'font-weight',
+    'line-height',
+    'letter-spacing',
+    'text-transform',
+];
+const scaleOf = (host, hostRect) => host.offsetWidth && hostRect.width ? hostRect.width / host.offsetWidth : 1;
+/**
+ * Animates the items of a list when its content changes: an item that stays slides from its old spot to
+ * its new one, a new item fades in, and a removed item fades out where it was. Set up once in an injection
+ * context. A change during a running move starts from where the item is now. With `prefers-reduced-motion`,
+ * items only fade.
+ *
+ * @example
+ * injectAnimatedListItems({ host: this.listElement, items: '.my-row' });
+ */
+const injectAnimatedListItems = (config) => {
+    const hostBinding = config.host ?? inject(ElementRef);
+    const prefersReducedMotion = injectPrefersReducedMotion();
+    const destroyRef = inject(DestroyRef);
+    const isRendered = signalIsRendered();
+    const hostSignal = firstElementSignal(buildElementSignal(hostBinding));
+    const moveDuration = config.moveDuration ?? 300;
+    const moveEasing = config.moveEasing ?? 'ease';
+    const enterDuration = config.enterDuration ?? 150;
+    const leaveDuration = config.leaveDuration ?? 100;
+    const maxMoves = config.maxMoves ?? 30;
+    const copies = new WeakSet();
+    const moves = new Map();
+    let boxes = new Map();
+    let observer = null;
+    let resizeObserver = null;
+    let hostWidth = 0;
+    let running = 0;
+    const track = (animation) => {
+        const host = hostSignal().currentElement;
+        const movingClass = config.movingClass;
+        if (!movingClass || !host)
+            return;
+        running++;
+        host.classList.add(movingClass);
+        const settle = () => {
+            running--;
+            if (running === 0)
+                host.classList.remove(movingClass);
+        };
+        animation.finished.then(settle).catch(settle);
+    };
+    const measure = (host) => {
+        const next = new Map();
+        const hostRect = host.getBoundingClientRect();
+        const scale = scaleOf(host, hostRect);
+        for (const item of Array.from(host.querySelectorAll(config.items))) {
+            if (!copies.has(item) && (item.checkVisibility?.() ?? true))
+                next.set(item, layoutBoxOf(item, hostRect, scale));
+        }
+        return next;
+    };
+    const fadeOutCopy = (host, item, box) => {
+        const copy = item.cloneNode(true);
+        // read before the copy leaves the item's ancestors, whose selectors may style the item
+        if (item.isConnected) {
+            const style = getComputedStyle(item);
+            for (const property of CONTEXT_STYLES) {
+                const value = style.getPropertyValue(property);
+                if (value)
+                    copy.style.setProperty(property, value);
+            }
+        }
+        copy.removeAttribute('id');
+        for (const attribute of config.attributes ?? [])
+            copy.removeAttribute(attribute);
+        copy.setAttribute('aria-hidden', 'true');
+        copy.inert = true;
+        Object.assign(copy.style, {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: `${box.width}px`,
+            height: `${box.height}px`,
+            boxSizing: 'border-box',
+            margin: '0',
+            pointerEvents: 'none',
+        });
+        copies.add(copy);
+        host.append(copy);
+        const hostRect = host.getBoundingClientRect();
+        const scale = scaleOf(host, hostRect);
+        const containingBlock = layoutBoxOf(copy, hostRect, scale);
+        copy.style.top = `${box.top - containingBlock.top}px`;
+        copy.style.left = `${box.left - containingBlock.left}px`;
+        const fade = copy.animate([{ opacity: 0 }], { duration: leaveDuration, easing: 'ease-out' });
+        const remove = () => copy.remove();
+        track(fade);
+        fade.finished.then(remove).catch(remove);
+    };
+    const run = (host) => {
+        if (config.animateChange?.() === false) {
+            boxes = measure(host);
+            return;
+        }
+        const previous = boxes;
+        const next = measure(host);
+        const shifts = [];
+        const entering = [];
+        boxes = next;
+        for (const [item, box] of next) {
+            const before = previous.get(item);
+            if (!before) {
+                entering.push(item);
+                continue;
+            }
+            const translate = translateOf(item);
+            const x = before.left + translate.x - box.left;
+            const y = before.top + translate.y - box.top;
+            if (Math.abs(x) >= 1 || Math.abs(y) >= 1)
+                shifts.push({ item, x, y });
+        }
+        let removesItems = false;
+        for (const [item, box] of previous) {
+            if (next.has(item))
+                continue;
+            removesItems = true;
+            fadeOutCopy(host, item, box);
+        }
+        const movesItems = shifts.length > 0 && !prefersReducedMotion() && shifts.length <= maxMoves;
+        // A new item waits until moving items have passed its spot and removed ones have faded, or their text overlaps.
+        const enterDelay = Math.max(movesItems ? moveDuration * 0.4 : 0, removesItems ? leaveDuration : 0);
+        for (const item of entering) {
+            item.animate([{ opacity: 0, offset: 0 }], {
+                duration: enterDuration,
+                delay: enterDelay,
+                easing: 'ease-out',
+                fill: 'backwards',
+            });
+        }
+        if (!movesItems) {
+            for (const move of moves.values())
+                move.cancel();
+            moves.clear();
+            return;
+        }
+        for (const { item, x, y } of shifts) {
+            moves.get(item)?.cancel();
+            const move = item.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: 'none' }], {
+                duration: moveDuration,
+                easing: moveEasing,
+            });
+            moves.set(item, move);
+            track(move);
+            const forget = () => {
+                if (moves.get(item) === move)
+                    moves.delete(item);
+            };
+            move.finished.then(forget).catch(forget);
+        }
+    };
+    const touchesOnlyCopies = (record) => record.type === 'childList' &&
+        [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].every((node) => copies.has(node));
+    effect(() => {
+        const host = hostSignal().currentElement;
+        const rendered = isRendered();
+        untracked(() => {
+            observer?.disconnect();
+            resizeObserver?.disconnect();
+            boxes = new Map();
+            if (!host || !rendered || typeof MutationObserver === 'undefined')
+                return;
+            boxes = measure(host);
+            observer ??= new MutationObserver((records) => {
+                const current = hostSignal().currentElement;
+                if (current && !records.every(touchesOnlyCopies))
+                    run(current);
+            });
+            observer.observe(host, {
+                childList: true,
+                subtree: true,
+                ...(config.attributes?.length ? { attributes: true, attributeFilter: config.attributes } : {}),
+            });
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            hostWidth = host.offsetWidth;
+            // Boxes taken while the host was still narrow give fading copies the wrong width.
+            resizeObserver ??= new ResizeObserver(() => {
+                const current = hostSignal().currentElement;
+                if (!current || current.offsetWidth === hostWidth)
+                    return;
+                hostWidth = current.offsetWidth;
+                boxes = measure(current);
+            });
+            resizeObserver.observe(host);
+        });
+    });
+    destroyRef.onDestroy(() => {
+        observer?.disconnect();
+        resizeObserver?.disconnect();
+        for (const move of moves.values())
+            move.cancel();
+    });
+};
+
 /**
  * Creates a signal that animates the transition of a numeric signal's value over time.
  */
@@ -2315,7 +2555,7 @@ const scrollToElement = (options) => {
 
 const MIN_SNAP_DELTA_PX = 1;
 const FULLY_VISIBLE_RATIO = 0.99;
-const getScrollSnapTarget = (items, container, direction, origin, margin = 0) => {
+const getScrollSnapTarget = (items, container, direction, origin, margin = 0, towards) => {
     if (!items.length)
         return null;
     const containerRect = container.getBoundingClientRect();
@@ -2324,6 +2564,10 @@ const getScrollSnapTarget = (items, container, direction, origin, margin = 0) =>
     let bestOrigin = 'start';
     let bestAbsDelta = Infinity;
     const updateBest = (element, o, delta) => {
+        if (towards === 'forward' && delta < MIN_SNAP_DELTA_PX)
+            return;
+        if (towards === 'backward' && delta > -MIN_SNAP_DELTA_PX)
+            return;
         const abs = Math.abs(delta);
         if (abs < bestAbsDelta) {
             bestAbsDelta = abs;
@@ -2783,6 +3027,8 @@ const writeViewportSizeToCssVariables = () => {
 const CURSOR_DRAG_SCROLL_DEADZONE = 5;
 /** `MouseEvent.button` for the primary button. A secondary click opens a menu; it does not drag. */
 const PRIMARY_MOUSE_BUTTON = 0;
+/** How far back from the release the pointer's velocity is measured. */
+const RELEASE_VELOCITY_WINDOW_MS = 100;
 /** The class that is added to the element when the cursor is being dragged. */
 const CURSOR_DRAG_SCROLLING_CLASS = 'et-cursor-drag-scroll--scrolling';
 const CURSOR_DRAG_INIT_CLASS = 'et-cursor-drag-scroll--init';
@@ -2803,6 +3049,9 @@ const useCursorDragScroll = (el, options) => {
     ...(ngDevMode ? [{ debugName: "initialScrollPosition" }] : /* istanbul ignore next */ []));
     const dragAmount = signal({ x: 0, y: 0 }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragAmount" }] : /* istanbul ignore next */ []));
+    const releaseVelocity = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "releaseVelocity" }] : /* istanbul ignore next */ []));
+    let samples = [];
     const document = inject(DOCUMENT);
     // Only measured when the caller hasn't already: this costs a MutationObserver and a ResizeObserver.
     const suppliedCanScroll = options?.canScroll;
@@ -2911,11 +3160,30 @@ const useCursorDragScroll = (el, options) => {
         const dx = (e.clientX - initialDragPosition().x) * -1;
         const dy = (e.clientY - initialDragPosition().y) * -1;
         dragAmount.set({ x: dx, y: dy });
+        recordSample(dx, dy);
         if (Math.abs(dx) > CURSOR_DRAG_SCROLL_DEADZONE || Math.abs(dy) > CURSOR_DRAG_SCROLL_DEADZONE) {
             isDragging.set(true);
         }
     };
+    const recordSample = (x, y) => {
+        const t = performance.now();
+        samples.push({ t, x, y });
+        samples = samples.filter((sample) => t - sample.t <= RELEASE_VELOCITY_WINDOW_MS);
+    };
+    const measureReleaseVelocity = () => {
+        const now = performance.now();
+        const recent = samples.filter((sample) => now - sample.t <= RELEASE_VELOCITY_WINDOW_MS);
+        const first = recent[0];
+        const last = recent.at(-1);
+        const elapsed = first ? now - first.t : 0;
+        if (!first || !last || elapsed <= 0)
+            return { x: 0, y: 0 };
+        return { x: (last.x - first.x) / elapsed, y: (last.y - first.y) / elapsed };
+    };
     const updateDraggingEnd = () => {
+        // Set before `isDragging` flips, so whatever reacts to the release reads this drag's velocity.
+        releaseVelocity.set(isDragging() ? measureReleaseVelocity() : { x: 0, y: 0 });
+        samples = [];
         isDragging.set(false);
         isInitDragging.set(false);
         initialDragPosition.set({ x: 0, y: 0 });
@@ -2939,6 +3207,7 @@ const useCursorDragScroll = (el, options) => {
             .subscribe();
         initialDragPosition.set({ x: e.clientX, y: e.clientY });
         initialScrollPosition.set({ x: el.scrollLeft, y: el.scrollTop });
+        samples = [{ t: performance.now(), x: 0, y: 0 }];
         isInitDragging.set(true);
     };
     toObservable(element)
@@ -2947,6 +3216,8 @@ const useCursorDragScroll = (el, options) => {
     return {
         isDragging: isDragging.asReadonly(),
         currentDragAmount: dragAmount.asReadonly(),
+        /** The scroll velocity over the last 100ms of the most recent drag, set just before `isDragging` turns false. */
+        releaseVelocity: releaseVelocity.asReadonly(),
     };
 };
 
@@ -3275,9 +3546,12 @@ const routerRestoreScroll = () => ({ [ET_RESTORE_SCROLL]: true });
 const SCROLL_RESTORATION_HOLDS_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const holds = new Set();
     const states = new Set();
+    const stateWatchers = new Set();
     return {
         addState: (state) => {
             states.add(state);
+            for (const watcher of stateWatchers)
+                watcher(state);
             return () => states.delete(state);
         },
         saveStates: () => {
@@ -3289,16 +3563,11 @@ const SCROLL_RESTORATION_HOLDS_DEF = /* @__PURE__ */ defineRootProvider(() => {
             }
             return values;
         },
-        restoreStates: (values) => {
-            const pending = [];
-            for (const state of states) {
-                if (!(state.key in values))
-                    continue;
-                const result = state.restore(values[state.key]);
-                if (isObservable(result))
-                    pending.push(result);
-            }
-            return pending;
+        watchStates: (watcher) => {
+            stateWatchers.add(watcher);
+            for (const state of [...states])
+                watcher(state);
+            return () => stateWatchers.delete(watcher);
         },
         add: (isPending) => {
             holds.add(isPending);
@@ -3452,19 +3721,21 @@ const setupScrollRestoration = (config = {}) => {
         cancelPendingRestore();
         const target = entry.top;
         let frame = 0;
-        let started = false;
         let cancelled = false;
         let renderRef = null;
         let fallback;
-        let stateSubscription = null;
+        const stateSubscriptions = new Subscription();
         let stateDeadline;
+        let pendingStateCount = 0;
+        let stopWatchingStates = null;
+        const unrestoredStates = { ...entry.state };
         // The user scrolling always wins over a restoration we have not committed yet.
         const abortByUser = () => cancelPendingRestore();
         const hardDeadline = Date.now() + restoreMaxTimeout;
         let deadline = Date.now() + restoreTimeout;
         const step = () => {
             frame = 0;
-            if (cancelled)
+            if (cancelled || pendingStateCount)
                 return;
             const el = resolveScrollElement();
             const maxOffset = Math.max(0, el.scrollHeight - el.clientHeight);
@@ -3492,19 +3763,41 @@ const setupScrollRestoration = (config = {}) => {
         // components exist but the DOM still shows the previous page, whose height would be measured
         // instead. The timeout is a safety net in case no render pass follows.
         const start = () => {
-            if (started || cancelled)
+            if (frame || cancelled || pendingStateCount)
                 return;
-            started = true;
             frame = requestAnimationFrame(step);
         };
         const waitForRender = () => {
             if (cancelled)
                 return;
             clearTimeout(stateDeadline);
+            clearTimeout(fallback);
+            renderRef?.destroy();
             renderRef = afterNextRender({ read: start }, { injector });
             fallback = setTimeout(start);
         };
-        const pendingStates = entry.state ? holds.restoreStates(entry.state) : [];
+        const onStateSettled = () => {
+            pendingStateCount--;
+            if (!pendingStateCount)
+                waitForRender();
+        };
+        // A route component behind a nested outlet is created on the first render after `NavigationEnd`,
+        // so a state can register after this restoration was scheduled. It must still restore before the offset.
+        const restoreState = (state) => {
+            if (cancelled || !(state.key in unrestoredStates))
+                return;
+            const value = unrestoredStates[state.key];
+            delete unrestoredStates[state.key];
+            const result = state.restore(value);
+            if (!isObservable(result))
+                return;
+            if (!pendingStateCount) {
+                clearTimeout(stateDeadline);
+                stateDeadline = setTimeout(cancelPendingRestore, restoreMaxTimeout);
+            }
+            pendingStateCount++;
+            stateSubscriptions.add(result.pipe(ignoreElements()).subscribe({ complete: onStateSettled, error: onStateSettled }));
+        };
         for (const eventName of INTERACTION_EVENTS) {
             document.addEventListener(eventName, abortByUser, { capture: true, passive: true });
         }
@@ -3513,7 +3806,8 @@ const setupScrollRestoration = (config = {}) => {
             // not apply its (now stale) offset even if its hook had already been queued to run.
             cancelled = true;
             renderRef?.destroy();
-            stateSubscription?.unsubscribe();
+            stopWatchingStates?.();
+            stateSubscriptions.unsubscribe();
             clearTimeout(stateDeadline);
             if (frame)
                 cancelAnimationFrame(frame);
@@ -3522,15 +3816,10 @@ const setupScrollRestoration = (config = {}) => {
                 document.removeEventListener(eventName, abortByUser, { capture: true });
             }
         };
-        if (pendingStates.length) {
-            stateDeadline = setTimeout(cancelPendingRestore, restoreMaxTimeout);
-            stateSubscription = merge(...pendingStates)
-                .pipe(ignoreElements())
-                .subscribe({ complete: waitForRender, error: waitForRender });
-        }
-        else {
+        if (entry.state)
+            stopWatchingStates = holds.watchStates(restoreState);
+        if (!pendingStateCount)
             waitForRender();
-        }
     };
     /**
      * The offset the most recently left entry for this page had. A target without query params means
@@ -4990,7 +5279,7 @@ const forceReflow = (element) => {
  */
 const matchesReducedMotion = (element) => {
     const view = element?.ownerDocument.defaultView ?? (typeof window === 'undefined' ? null : window);
-    return view?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
+    return view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
 };
 
 const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
@@ -5061,7 +5350,7 @@ class AnimatedLifecycleDirective {
         }
         const isInterrupting = currentState === 'leaving';
         this.updateState('entering');
-        this.removeClass(ANIMATION_CLASSES.leaveDone);
+        this.removeClasses(ANIMATION_CLASSES.leaveDone, ANIMATION_CLASSES.leaveTo);
         const previousCancel$ = this.cancelCurrentAnimation$;
         this.cancelCurrentAnimation$ = new Subject();
         const transitionId = `enter-${++this.transitionIdCounter}`;
@@ -5157,7 +5446,7 @@ class AnimatedLifecycleDirective {
                 transitionId,
                 onComplete: () => {
                     this.updateState('left');
-                    this.removeClasses(ANIMATION_CLASSES.leaveActive, ANIMATION_CLASSES.leaveTo);
+                    this.removeClass(ANIMATION_CLASSES.leaveActive);
                     this.addClass(ANIMATION_CLASSES.leaveDone);
                 },
                 cancelSignal: this.cancelCurrentAnimation$,
@@ -5172,7 +5461,7 @@ class AnimatedLifecycleDirective {
                 transitionId,
                 onComplete: () => {
                     this.updateState('left');
-                    this.removeClasses(ANIMATION_CLASSES.leaveActive, ANIMATION_CLASSES.leaveTo);
+                    this.removeClass(ANIMATION_CLASSES.leaveActive);
                     this.addClass(ANIMATION_CLASSES.leaveDone);
                 },
                 cancelSignal: this.cancelCurrentAnimation$,
@@ -8125,6 +8414,11 @@ const setupPositioning = (config, hostElement, paneElement, overlayRef, renderer
     return onOverlayViewportInsetsChange(() => applyViewportInsets(hostElement, renderer));
 };
 
+const roundToDevicePixel = (value, shifted = 0) => {
+    const ratio = window.devicePixelRatio || 1;
+    const round = shifted > 0 ? Math.ceil : shifted < 0 ? Math.floor : Math.round;
+    return round(Number((value * ratio).toFixed(4))) / ratio;
+};
 let middlewareExtras = null;
 /**
  * Installs the `size` / `arrow` / `hide` middleware. Called by
@@ -8366,9 +8660,13 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             platform: strategy.autoResize && strategy.minAvailableSpace === undefined
                 ? platformMeasuringUncappedPaneFirst(paneElement, renderer)
                 : platform,
-        }).then(({ x, y, placement, middlewareData }) => {
+        }).then(({ x: rawX, y: rawY, placement, middlewareData }) => {
             if (destroyed || currentUpdateId !== updateId)
                 return;
+            // A fractional offset snaps the panel's content by a pixel whenever a child gets its own layer.
+            // A shifted pane sits on the viewport padding, so it rounds inward instead of past it.
+            const x = roundToDevicePixel(rawX, middlewareData.shift?.x);
+            const y = roundToDevicePixel(rawY, middlewareData.shift?.y);
             if (middlewareData.hide?.referenceHidden) {
                 handleUnusableReference();
                 return;
@@ -10867,11 +11165,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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.66';
+const CORE_VERSION = '5.0.0-next.68';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, ANIMATION_ERROR_CODES, 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, EasingTokensStylesComponent, EthleteValidators, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MARKDOWN_VERBATIM_ATTR, MUST_MATCH, MarkdownToHtmlPipe, MatchStateType, MustMatch, NOTIFICATION_CLICK_MESSAGE_TYPE, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OVERLAY_LAYER_ATTRIBUTE, 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_CONFIRM, UNSAVED_CHANGES_ERROR_CODES, UNSAVED_CHANGES_TITLE_MARKER, ValidateAtLeastOneRequired, VisuallyHiddenStylesComponent, 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, boolBreakpointTransform, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDestroy, createDocumentElementSignal, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createIsRenderedSignal, createLogger, createObjectUrlHandle, createPropertyBinding, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, 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, hasAnchoredOverlayPositionExtras, hasCookie, holdScrollRestoration, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectAppUpdates, injectAppUpdatesConfig, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorPalette, injectColorScheme, 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, injectQueryParamAll, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRootSurfaceTheme, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterNavigationState, injectRouterState, injectScrollbarDimensions, injectSemanticColorTheme, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceColorPalette, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceType, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUnsavedChangesCoordinator, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElement, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isHTMLOrSVGElement, isKnockoutMatch, isObject, isOnHigherOverlayLayer, isSafeLinkUrl, isSafeUrl, isStaleBuildError, markdownToHtml, matchesReducedMotion, maybeSignalValue, memoizeSignal, mountEasingTokens, mountVisuallyHidden, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, normalizeUnsavedChangesSource, numberBreakpointTransform, onOverlayViewportInsetsChange, optionalBooleanAttribute, overlayViewportInsets, overlayViewportInsetsFor, ownsActiveElement, previousSignalValue, provideAppUpdates, provideAppUpdatesConfig, provideAppUpdatesInstance, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorPalette, provideColorScheme, provideColorThemes, provideColorThemesWithTailwind4, provideFaviconStore, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideNotifications, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideUnsavedChangesConfirm, provideUnsavedChangesCoordinator, provideViewportConfig, randomId, readBuildFingerprint, readFromClipboard, registerScrollRestorationState, reserveOverlayViewportSpace, resolveAppRootColorProvider, resolveColorThemeVariant, resolveOverlayLayer, resolveSurfaceByElevation, round, routerDisableScrollTop, routerRestoreScroll, scrollToElement, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalCountdown, signalDeferredLoading, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, suppressTextSelection, switchQueryListChanges, syncSignal, toArray, toArrayTrackByFn, toInjectFn, toProvideFn, toStringBinding, toToken, transformOrReturn, typedBreakpointTransform, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, ANIMATION_ERROR_CODES, 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, EasingTokensStylesComponent, EthleteValidators, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, InitialsPipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MARKDOWN_VERBATIM_ATTR, MUST_MATCH, MarkdownToHtmlPipe, MatchStateType, MustMatch, NOTIFICATION_CLICK_MESSAGE_TYPE, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OVERLAY_LAYER_ATTRIBUTE, 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_CONFIRM, UNSAVED_CHANGES_ERROR_CODES, UNSAVED_CHANGES_TITLE_MARKER, ValidateAtLeastOneRequired, VisuallyHiddenStylesComponent, 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, boolBreakpointTransform, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, copyToClipboard, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDestroy, createDocumentElementSignal, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createIsRenderedSignal, createLogger, createObjectUrlHandle, createPropertyBinding, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, 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, hasAnchoredOverlayPositionExtras, hasCookie, holdScrollRestoration, htmlToMarkdown, inferMimeType, initials, injectAngularRootElement, injectAnimatedBlockSize, injectAnimatedListItems, injectAppUpdates, injectAppUpdatesConfig, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorPalette, injectColorScheme, 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, injectQueryParamAll, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRootSurfaceTheme, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterNavigationState, injectRouterState, injectScrollbarDimensions, injectSemanticColorTheme, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceColorPalette, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceType, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUnsavedChangesCoordinator, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElement, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isHTMLOrSVGElement, isKnockoutMatch, isObject, isOnHigherOverlayLayer, isSafeLinkUrl, isSafeUrl, isStaleBuildError, markdownToHtml, matchesReducedMotion, maybeSignalValue, memoizeSignal, mountEasingTokens, mountVisuallyHidden, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, normalizeUnsavedChangesSource, numberBreakpointTransform, onOverlayViewportInsetsChange, optionalBooleanAttribute, overlayViewportInsets, overlayViewportInsetsFor, ownsActiveElement, previousSignalValue, provideAppUpdates, provideAppUpdatesConfig, provideAppUpdatesInstance, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorPalette, provideColorScheme, provideColorThemes, provideColorThemesWithTailwind4, provideFaviconStore, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideNotifications, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideUnsavedChangesConfirm, provideUnsavedChangesCoordinator, provideViewportConfig, randomId, readBuildFingerprint, readFromClipboard, registerScrollRestorationState, reserveOverlayViewportSpace, resolveAppRootColorProvider, resolveColorThemeVariant, resolveOverlayLayer, resolveSurfaceByElevation, round, routerDisableScrollTop, routerRestoreScroll, scrollToElement, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalCountdown, signalDeferredLoading, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, slugify, suppressTextSelection, switchQueryListChanges, syncSignal, toArray, toArrayTrackByFn, toInjectFn, toProvideFn, toStringBinding, toToken, transformOrReturn, typedBreakpointTransform, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map