@ethlete/core 5.0.0-next.61 → 5.0.0-next.62

package/fesm2022/ethlete-core.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { assertInInjectionContext, inject, DestroyRef, ElementRef, TemplateRef, InjectionToken, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, untracked, ApplicationRef, runInInjectionContext, NgZone, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, EnvironmentInjector, createComponent, ViewEncapsulation, Component, Directive, model, ViewContainerRef, input, CSP_NONCE, provideEnvironmentInitializer, output, createEnvironmentInjector, Pipe, afterEveryRender } 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, 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, BehaviorSubject, combineLatest, Observable, isObservable, firstValueFrom, defaultIfEmpty, concatMap, concat, finalize, exhaustMap, share, shareReplay } from 'rxjs';
+import { Subject, fromEvent, switchMap, startWith, of, defer, from, map, catchError, timer, takeUntil, tap, pairwise, debounceTime, merge, distinctUntilChanged, EMPTY, expand, skip, take, filter, BehaviorSubject, combineLatest, Observable, isObservable, 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, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { isPlatformBrowser, Location, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { Router, NavigationEnd, NavigationSkipped, NavigationStart, NavigationError, RouterLink } from '@angular/router';
 import { Title, Meta, DomSanitizer } from '@angular/platform-browser';
 import { platform, offset, flip, shift, limitShift, computePosition, autoUpdate, hide, arrow, size } from '@floating-ui/dom';
@@ -63,6 +63,9 @@ const randomId = () => {
     return `et-id-${(randomIdFallbackCounter++).toString(36)}-${Date.now().toString(36)}`;
 };
 
+/**
+ * @deprecated Use `takeUntilDestroyed()` from `@angular/core/rxjs-interop`. `yarn nx g @ethlete/core:migrate-create-destroy` rewrites the common pattern.
+ */
 const createDestroy = () => {
     assertInInjectionContext(createDestroy);
     const destroy$ = new Subject();
@@ -91,11 +94,13 @@ const getObjectProperty = (obj, prop) => {
         if (!isObject(value))
             return undefined;
         if (prop.includes('[')) {
-            const [key, index] = prop.split('[').map((part) => part.replace(']', ''));
-            const arr = value[key];
-            if (!Array.isArray(arr))
-                return undefined;
-            value = arr[+index];
+            const [key, ...indexes] = prop.split('[').map((part) => part.replace(']', ''));
+            value = value[key];
+            for (const index of indexes) {
+                if (!Array.isArray(value))
+                    return undefined;
+                value = value[+index];
+            }
         }
         else {
             value = value[prop];
@@ -187,7 +192,8 @@ const createValueProviders = (token, defaultValue, valueOverride, options) => [
 ];
 const maybeMergeValues = (defaultValue, valueOverride) => {
     if (isObject(valueOverride) && isObject(defaultValue)) {
-        return { ...defaultValue, ...valueOverride };
+        const definedOverride = Object.fromEntries(Object.entries(valueOverride).filter(([, value]) => value !== undefined));
+        return { ...defaultValue, ...definedOverride };
     }
     return valueOverride ?? defaultValue;
 };
@@ -248,6 +254,12 @@ const applyHostListeners = (listeners, options) => {
     }
 };
 
+function optionalBooleanAttribute(value) {
+    if (value === null || value === undefined)
+        return value;
+    return booleanAttribute(value);
+}
+
 class TypedQueryList extends QueryList {
     get changes() {
         return super.changes;
@@ -540,7 +552,7 @@ const equal = (foo, bar) => {
                     if (!tmp)
                         return false;
                 }
-                if (!equal(len[1], bar.get(tmp))) {
+                if (!bar.has(tmp) || !equal(len[1], bar.get(tmp))) {
                     return false;
                 }
             }
@@ -580,6 +592,9 @@ const equal = (foo, bar) => {
     return foo !== foo && bar !== bar;
 };
 
+// Only what a cookie value cannot hold is escaped, so base64 and JWT values stay byte-identical for
+// servers and older readers that do not decode them.
+const encodeCookieValue = (value) => encodeURIComponent(value).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g, decodeURIComponent);
 const hasCookie = (name) => {
     if (typeof document === 'undefined') {
         return false;
@@ -593,38 +608,63 @@ const getCookie = (name) => {
         return null;
     }
     const cookie = document.cookie.split(';').find((entry) => entry.trim().startsWith(`${name}=`));
-    return cookie?.trim().slice(name.length + 1) ?? null;
+    const raw = cookie?.trim().slice(name.length + 1);
+    if (raw === undefined)
+        return null;
+    try {
+        return decodeURIComponent(raw);
+    }
+    catch {
+        return raw;
+    }
 };
-const setCookie = (name, data, expiresInDays, domain = getDomain(), path = '/', sameSite = 'lax') => {
+const setCookie = (name, data, expiresInDays, domain, path = '/', sameSite = 'lax') => {
     if (typeof document === 'undefined') {
         return;
     }
+    const derivedDomain = domain === undefined;
+    const resolvedDomain = derivedDomain ? getDomain() : domain;
     const sameSiteUpper = sameSite.toUpperCase();
     const expires = expiresInDays ?? 30;
-    let cookieString = `${name}=${data}; path=${path}`;
+    let cookieString = `${name}=${encodeCookieValue(data)}; path=${path}`;
     if (expiresInDays !== null) {
         const date = new Date();
         date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
         cookieString += `; expires=${date.toUTCString()}`;
     }
-    if (domain) {
-        cookieString += `; domain=${domain}`;
-    }
-    cookieString += `; SameSite=${sameSiteUpper}`;
+    const attributes = (withDomain) => {
+        let result = cookieString;
+        if (withDomain && resolvedDomain) {
+            result += `; domain=${resolvedDomain}`;
+        }
+        return result;
+    };
+    let suffix = `; SameSite=${sameSiteUpper}`;
     if (sameSite === 'none' || (typeof window !== 'undefined' && window.location.protocol === 'https:')) {
-        cookieString += '; Secure';
+        suffix += '; Secure';
+    }
+    suffix += ';';
+    document.cookie = attributes(true) + suffix;
+    if (derivedDomain && resolvedDomain && getCookie(name) !== data) {
+        document.cookie = attributes(false) + suffix;
     }
-    cookieString += ';';
-    document.cookie = cookieString;
 };
-const deleteCookie = (name, path = '/', domain = getDomain()) => {
-    if (hasCookie(name)) {
+const deleteCookie = (name, path = '/', domain) => {
+    if (!hasCookie(name))
+        return;
+    const derivedDomain = domain === undefined;
+    const resolvedDomain = derivedDomain ? getDomain() : domain;
+    const expire = (withDomain) => {
         document.cookie =
             name +
                 '=' +
                 (path ? ';path=' + path : '') +
-                (domain ? ';domain=' + domain : '') +
+                (withDomain && resolvedDomain ? ';domain=' + resolvedDomain : '') +
                 ';expires=Thu, 01 Jan 1970 00:00:01 GMT';
+    };
+    expire(true);
+    if (derivedDomain && hasCookie(name)) {
+        expire(false);
     }
 };
 const getDomain = () => {
@@ -646,6 +686,7 @@ const getDomain = () => {
     return hostname;
 };
 
+/** @deprecated Keyed on the deprecated `KeyboardEvent.keyCode`. Compare `KeyboardEvent.key` instead. */
 class KeyPressManager {
     constructor(key) {
         this.key = key;
@@ -1493,7 +1534,7 @@ const signalAnimatedNumber = (source, options = {}) => {
                 if (destroyed)
                     return;
                 const elapsed = timestamp - startTime;
-                const progress = Math.min(elapsed / duration, 1);
+                const progress = duration > 0 ? Math.min(Math.max(elapsed / duration, 0), 1) : 1;
                 const easedProgress = easing(progress);
                 const value = startValue + delta * easedProgress;
                 currentAnimatedValue = value;
@@ -1699,19 +1740,30 @@ const breakpointTransformBase = (coerce, defaultValue) => {
     const injector = inject(Injector);
     const raw = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "raw" }] : /* istanbul ignore next */ []));
+    let warnedMissingInstance = false;
     let cachedSig = null;
     const transformFn = (value) => {
-        const coerced = isBreakpointMap(value) ? value : coerce(value);
-        raw.set(coerced);
-        return isBreakpointMap(coerced) ? resolveFromMap(coerced, currentBp(), defaultValue) : coerced;
+        if (isBreakpointMap(value)) {
+            const map = value;
+            raw.set(map);
+            return resolveFromMap(map, currentBp(), defaultValue);
+        }
+        raw.set(undefined);
+        return coerce(value);
     };
     effect(() => {
         const bp = currentBp();
         const r = raw();
         if (!cachedSig) {
             const instance = injector.get(BREAKPOINT_INSTANCE_TOKEN, null);
-            if (!instance)
+            if (!instance) {
+                if (ngDevMode && r !== undefined && !warnedMissingInstance) {
+                    warnedMissingInstance = true;
+                    console.warn('[ethlete] A breakpoint map was bound to an input, but its component does not call ' +
+                        'provideBreakpointInstance(), so the value will not follow the breakpoint after the first render.');
+                }
                 return;
+            }
             for (const key of Object.keys(instance)) {
                 const val = instance[key];
                 if (val && typeof val === 'function' && val[SIGNAL]?.transformFn === transformFn) {
@@ -1720,7 +1772,7 @@ const breakpointTransformBase = (coerce, defaultValue) => {
                 }
             }
         }
-        if (!cachedSig || r === undefined || !isBreakpointMap(r))
+        if (!cachedSig || r === undefined)
             return;
         const resolved = resolveFromMap(r, bp, defaultValue);
         untracked(() => setInputSignal(cachedSig, resolved));
@@ -1966,14 +2018,13 @@ const signalElementChildren = (el, options) => {
 const buildSignalEffects = (el, config) => {
     const elements = buildElementSignal(el);
     const injector = inject(Injector);
+    const liveTokens = new Map(Object.entries(config.tokenMap));
     effect(() => {
         const { currentElements, previousElements } = elements();
         for (const previousEl of previousElements) {
             if (currentElements.includes(previousEl))
                 continue;
-            const tokens = Object.keys(config.tokenMap)
-                .map((key) => key.split(' '))
-                .flat();
+            const tokens = [...liveTokens.keys()].flatMap((key) => key.split(' '));
             if (!tokens.length)
                 continue;
             config.cleanupFn(previousEl, tokens);
@@ -1981,7 +2032,7 @@ const buildSignalEffects = (el, config) => {
         for (const currentEl of currentElements) {
             if (previousElements.includes(currentEl))
                 continue;
-            for (const [tokens, condition] of Object.entries(config.tokenMap)) {
+            for (const [tokens, condition] of liveTokens) {
                 untracked(() => {
                     const tokenArray = tokens.split(' ');
                     if (!tokenArray.length)
@@ -1996,6 +2047,7 @@ const buildSignalEffects = (el, config) => {
     const push = (tokens, signal) => {
         if (has(tokens))
             return;
+        liveTokens.set(tokens, signal);
         runInInjectionContext(injector, () => {
             effects[tokens] = effect(() => {
                 const { currentElements } = untracked(() => elements());
@@ -2017,6 +2069,7 @@ const buildSignalEffects = (el, config) => {
     const remove = (tokens) => {
         effects[tokens]?.destroy();
         delete effects[tokens];
+        liveTokens.delete(tokens);
         for (const el of elements().currentElements) {
             const tokenArray = tokens.split(' ');
             if (!tokenArray.length)
@@ -2163,9 +2216,22 @@ const isElementVisible = (options) => {
         intersectionRatio: Math.round(Math.min(inlineIntersectionPercentage, blockIntersectionPercentage) * 100) / 100,
     };
 };
+const nearestAlignment = (elStart, elEnd, conStart, conEnd) => {
+    const startOutside = elStart < conStart;
+    const endOutside = elEnd > conEnd;
+    const fits = elEnd - elStart <= conEnd - conStart;
+    if (startOutside === endOutside)
+        return null;
+    if (startOutside === fits)
+        return 'start';
+    return 'end';
+};
 const getElementScrollCoordinates = (options) => {
     const { container, element, direction, behavior = 'smooth', origin = 'nearest', scrollBlockMargin = 0, scrollInlineMargin = 0, } = options;
-    if (!element || !container || !elementCanScroll(container)) {
+    if (!element ||
+        !container ||
+        (container.isConnected && !container.contains(element)) ||
+        !elementCanScroll(container)) {
         return {
             behavior,
             left: undefined,
@@ -2193,33 +2259,33 @@ const getElementScrollCoordinates = (options) => {
     let scrollTopTo = scrollTop;
     const relativeTop = elTop - conTop;
     const relativeLeft = elLeft - conLeft;
+    const calculateInlineStart = () => (scrollLeftTo = scrollLeft + relativeLeft - scrollInlineMargin);
+    const calculateBlockStart = () => (scrollTopTo = scrollTop + relativeTop - scrollBlockMargin);
+    const calculateInlineEnd = () => (scrollLeftTo = scrollLeft + relativeLeft - conWidth + elWidth + scrollInlineMargin);
+    const calculateBlockEnd = () => (scrollTopTo = scrollTop + relativeTop - conHeight + elHeight + scrollBlockMargin);
     const calculateScrollToStart = () => {
-        scrollLeftTo = scrollLeft + relativeLeft - scrollInlineMargin;
-        scrollTopTo = scrollTop + relativeTop - scrollBlockMargin;
+        calculateInlineStart();
+        calculateBlockStart();
     };
     const calculateScrollToEnd = () => {
-        scrollLeftTo = scrollLeft + relativeLeft - conWidth + elWidth + scrollInlineMargin;
-        scrollTopTo = scrollTop + relativeTop - conHeight + elHeight + scrollBlockMargin;
+        calculateInlineEnd();
+        calculateBlockEnd();
     };
     const calculateScrollToCenter = () => {
         scrollLeftTo = scrollLeft + relativeLeft - conWidth / 2 + elWidth / 2;
         scrollTopTo = scrollTop + relativeTop - conHeight / 2 + elHeight / 2;
     };
     const calculateScrollToNearest = () => {
-        const isAbove = elBottom <= conTop;
-        const isPartialAbove = elTop < conTop && elBottom > conTop;
-        const isBelow = elTop >= conBottom;
-        const isPartialBelow = elTop < conBottom && elBottom > conBottom;
-        const isLeft = elRight <= conLeft;
-        const isPartialLeft = elLeft < conLeft && elRight > conLeft;
-        const isRight = elLeft >= conRight;
-        const isPartialRight = elLeft < conRight && elRight > conRight;
-        if (isAbove || isPartialAbove || isLeft || isPartialLeft) {
-            calculateScrollToStart();
-        }
-        else if (isBelow || isPartialBelow || isRight || isPartialRight) {
-            calculateScrollToEnd();
-        }
+        const inline = nearestAlignment(elLeft, elRight, conLeft, conRight);
+        const block = nearestAlignment(elTop, elBottom, conTop, conBottom);
+        if (inline === 'start')
+            calculateInlineStart();
+        else if (inline === 'end')
+            calculateInlineEnd();
+        if (block === 'start')
+            calculateBlockStart();
+        else if (block === 'end')
+            calculateBlockEnd();
     };
     switch (origin) {
         case 'start':
@@ -2403,8 +2469,10 @@ const createPositionObject = (entry) => {
         isVisible,
     };
 };
+const unwrap = (value) => (isSignal(value) ? value() : value);
+const isZeroMargin = (margin) => !margin || /^(0(px|%)?\s*)+$/.test(margin.trim());
 const signalElementIntersection = (el, options) => {
-    const { root: rootBinding, enabled, ...observerOptions } = options ?? {};
+    const { root: rootBinding, enabled, rootMargin, threshold, ...observerOptions } = options ?? {};
     const destroyRef = inject(DestroyRef);
     const elements = buildElementSignal(el);
     const root = firstElementSignal(rootBinding ? buildElementSignal(rootBinding) : createEmptyElementSignal());
@@ -2416,6 +2484,7 @@ const signalElementIntersection = (el, options) => {
     const observer = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
     const currentlyObservedElements = new Set();
+    let observedRootMargin;
     const updateIntersections = (entries) => {
         let currentValues = [...elementIntersectionSignal()];
         for (const entry of entries) {
@@ -2445,7 +2514,7 @@ const signalElementIntersection = (el, options) => {
         }
         zone.run(() => elementIntersectionSignal.set(currentValues));
     };
-    const updateIntersectionObserver = (rendered, enabled, rootEl) => {
+    const updateIntersectionObserver = (rendered, enabled, rootEl, margin, thresholdValue) => {
         observer()?.disconnect();
         currentlyObservedElements.clear();
         if (!rendered || !enabled) {
@@ -2455,8 +2524,11 @@ const signalElementIntersection = (el, options) => {
         }
         const newObserver = new IntersectionObserver((entries) => updateIntersections(entries), {
             ...observerOptions,
+            ...(margin !== undefined && { rootMargin: margin }),
+            ...(thresholdValue !== undefined && { threshold: thresholdValue }),
             root: rootEl,
         });
+        observedRootMargin = margin;
         observer.set(newObserver);
     };
     const updateObservedElements = (observer, elements) => {
@@ -2469,15 +2541,16 @@ const signalElementIntersection = (el, options) => {
         const newIntersectionValue = [];
         for (const el of elements.currentElements) {
             if (currentlyObservedElements.has(el)) {
-                const existingEntryIndex = currIntersectionValue.findIndex((v) => v.target === el);
-                const existingEntry = currIntersectionValue[existingEntryIndex];
-                if (!existingEntry) {
-                    console.warn('Could not find existing entry for element. The intersection observer might be broken now.', el);
-                    continue;
-                }
-                newIntersectionValue.push(existingEntry);
+                const existingEntry = currIntersectionValue.find((v) => v.target === el);
+                if (existingEntry)
+                    newIntersectionValue.push(existingEntry);
                 continue;
             }
+            currentlyObservedElements.add(el);
+            observer.observe(el);
+            // isElementVisible ignores rootMargin, so with one set the observer's own first entry is the only correct one.
+            if (!isZeroMargin(observedRootMargin))
+                continue;
             const initialElementVisibility = isElementVisible({
                 container: rootEl,
                 element: el,
@@ -2497,8 +2570,6 @@ const signalElementIntersection = (el, options) => {
                 ...intersectionEntry,
                 ...createPositionObject(intersectionEntry),
             });
-            currentlyObservedElements.add(el);
-            observer.observe(el);
         }
         for (const el of elements.previousElements) {
             if (elements.currentElements.includes(el))
@@ -2512,9 +2583,13 @@ const signalElementIntersection = (el, options) => {
         const rootEl = root().currentElement;
         const rendered = isRendered();
         const enabled = isEnabled();
-        untracked(() => updateIntersectionObserver(rendered, enabled, rootEl));
+        const margin = rootMargin === undefined ? undefined : unwrap(rootMargin);
+        const thresholdValue = threshold === undefined ? undefined : unwrap(threshold);
+        untracked(() => updateIntersectionObserver(rendered, enabled, rootEl, margin, thresholdValue));
     });
-    effect(() => {
+    // The initial entries are measured here, not in an effect: an effect runs during change detection,
+    // before elements rendered in the same pass have their layout.
+    afterRenderEffect(() => {
         const els = elements();
         const obs = observer();
         untracked(() => updateObservedElements(obs, els));
@@ -2540,6 +2615,8 @@ const signalElementLastScrollDirection = (el) => {
             lastScrollLeft = 0;
             return of(null);
         }
+        lastScrollTop = currentElement.scrollTop;
+        lastScrollLeft = currentElement.scrollLeft;
         return fromEvent(currentElement, 'scroll').pipe(tap(() => {
             const { scrollTop, scrollLeft } = currentElement;
             const time = Date.now();
@@ -2644,11 +2721,12 @@ const writeScrollbarSizeToCssVariables = () => {
     if (!isPlatformBrowser(inject(PLATFORM_ID))) {
         return;
     }
-    const environmentInjector = inject(EnvironmentInjector);
-    if (scrollbarSizeWriters.has(environmentInjector)) {
+    // The app's injector, not the caller's: a writer started from a component must outlive it.
+    const appInjector = inject(ApplicationRef).injector;
+    if (scrollbarSizeWriters.has(appInjector)) {
         return;
     }
-    scrollbarSizeWriters.add(environmentInjector);
+    scrollbarSizeWriters.add(appInjector);
     const document = inject(DOCUMENT);
     const renderer = injectRenderer();
     const scrollbarDimensions = injectScrollbarDimensions();
@@ -2660,7 +2738,7 @@ const writeScrollbarSizeToCssVariables = () => {
             '--et-sw': `${dimensions.width}px`,
             '--et-sh': `${dimensions.height}px`,
         });
-    });
+    }, { injector: appInjector });
 };
 const viewportSizeWriters = /* @__PURE__ */ new WeakSet();
 /**
@@ -2672,11 +2750,11 @@ const writeViewportSizeToCssVariables = () => {
     if (!isPlatformBrowser(inject(PLATFORM_ID))) {
         return;
     }
-    const environmentInjector = inject(EnvironmentInjector);
-    if (viewportSizeWriters.has(environmentInjector)) {
+    const appInjector = inject(ApplicationRef).injector;
+    if (viewportSizeWriters.has(appInjector)) {
         return;
     }
-    viewportSizeWriters.add(environmentInjector);
+    viewportSizeWriters.add(appInjector);
     const document = inject(DOCUMENT);
     const renderer = injectRenderer();
     const htmlElementDimensions = injectViewportDimensions();
@@ -2688,7 +2766,7 @@ const writeViewportSizeToCssVariables = () => {
             '--et-vw': `${dimensions.width}px`,
             '--et-vh': `${dimensions.height}px`,
         });
-    });
+    }, { injector: appInjector });
 };
 
 /** The deadzone in pixels after which the cursor drag scroll will take effect. */
@@ -2876,7 +2954,8 @@ const createInitialRoute = () => {
     if (!isBrowser) {
         return router.url;
     }
-    return window.location.pathname + window.location.search + window.location.hash;
+    const path = inject(Location).path(true);
+    return path.startsWith('/') ? path : `/${path}`;
 };
 /** Inject the current router event */
 const injectRouterEvent = /* @__PURE__ */ memoizeSignal(() => {
@@ -2943,6 +3022,7 @@ const injectRoute = /* @__PURE__ */ memoizeSignal(() => {
         return withoutFragment;
     });
 });
+const withInjector = (config, fn) => config?.injector ? runInInjectionContext(config.injector, fn) : fn();
 const createRouterState = (router) => {
     let route = router.routerState.snapshot.root;
     while (route.firstChild) {
@@ -2982,37 +3062,35 @@ const injectRouterState = /* @__PURE__ */ memoizeSignal(() => {
 });
 /** Inject a signal containing the current route fragment (the part after the # inside the url if present) */
 const injectFragment = (config) => {
-    const routerState = config?.injector
-        ? runInInjectionContext(config.injector, injectRouterState)
-        : injectRouterState();
+    const routerState = withInjector(config, injectRouterState);
     const fragment = computed(() => routerState().fragment, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fragment" }] : /* istanbul ignore next */ []));
     return transformOrReturn(fragment, config);
 };
 /** Inject all currently available query parameters as a signal */
-const injectQueryParams = () => {
-    const routerState = injectRouterState();
+const injectQueryParams = (config) => {
+    const routerState = withInjector(config, injectRouterState);
     const queryParams = computed(() => routerState().queryParams, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []));
     return queryParams;
 };
 /** Inject all currently available route data as a signal */
-const injectRouteData = () => {
-    const routerState = injectRouterState();
+const injectRouteData = (config) => {
+    const routerState = withInjector(config, injectRouterState);
     const data = computed(() => routerState().data, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     return data;
 };
 /** Inject the current route title as a signal */
 const injectRouteTitle = (config) => {
-    const routerState = injectRouterState();
+    const routerState = withInjector(config, injectRouterState);
     const title = computed(() => routerState().title, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     return transformOrReturn(title, config);
 };
 /** Inject all currently available path parameters as a signal */
-const injectPathParams = () => {
-    const routerState = injectRouterState();
+const injectPathParams = (config) => {
+    const routerState = withInjector(config, injectRouterState);
     const pathParams = computed(() => routerState().pathParams, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pathParams" }] : /* istanbul ignore next */ []));
     return pathParams;
@@ -3023,21 +3101,48 @@ const getQueryParamFromUrl = (key) => {
     const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get(key);
 };
-/** Inject a specific query parameter as a signal */
+const getAllQueryParamsFromUrl = (key) => {
+    if (typeof window === 'undefined')
+        return [];
+    return new URLSearchParams(window.location.search).getAll(key);
+};
+const toValues = (value) => {
+    if (value === undefined || value === null)
+        return [];
+    return Array.isArray(value) ? value : [value];
+};
+/**
+ * Inject a specific query parameter as a signal. A repeated parameter (`?tag=a&tag=b`) resolves to its first value;
+ * use `injectQueryParamAll` to read every value.
+ */
 const injectQueryParam = (key, config) => {
-    const queryParams = injectQueryParams();
-    const src = computed(() => queryParams()[key] ?? (config?.requireSync ? getQueryParamFromUrl(key) : null));
+    const queryParams = injectQueryParams(config);
+    const src = computed(() => {
+        const first = toValues(queryParams()[key])[0];
+        return first ?? (config?.requireSync ? getQueryParamFromUrl(key) : null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    return transformOrReturn(src, config);
+};
+/** Inject every value of a specific query parameter as a signal. Resolves to an empty array when it is absent. */
+const injectQueryParamAll = (key, config) => {
+    const queryParams = injectQueryParams(config);
+    const src = computed(() => {
+        const values = toValues(queryParams()[key]);
+        return values.length || !config?.requireSync ? values : getAllQueryParamsFromUrl(key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     return transformOrReturn(src, config);
 };
 /** Inject a specific route data item as a signal */
 const injectRouteDataItem = (key, config) => {
-    const data = injectRouteData();
+    const data = injectRouteData(config);
     const src = computed(() => data()[key] ?? null);
     return transformOrReturn(src, config);
 };
 /** Inject a specific path parameter as a signal */
 const injectPathParam = (key, config) => {
-    const pathParams = injectPathParams();
+    const pathParams = injectPathParams(config);
     const src = computed(() => pathParams()[key] ?? null);
     return transformOrReturn(src, config);
 };
@@ -3110,9 +3215,9 @@ const injectPathParamChanges = /* @__PURE__ */ memoizeSignal(() => {
  *   protected cameFromCart = this.navState?.fromCart ?? false;
  * }
  */
-const injectRouterNavigationState = () => {
-    const router = inject(Router);
-    return router.getCurrentNavigation()?.extras.state ?? null;
+const injectRouterNavigationState = (config) => {
+    const router = withInjector(config, () => inject(Router));
+    return router.currentNavigation()?.extras.state ?? null;
 };
 
 const ET_DISABLE_SCROLL_TOP = /* @__PURE__ */ Symbol('ET_DISABLE_SCROLL_TOP');
@@ -3341,7 +3446,7 @@ const setupScrollRestoration = (config = {}) => {
         // Read off the navigation rather than `history.state`: a symbol key does not survive being
         // structured-cloned into the history entry, which is what keeps the mark from outliving this
         // navigation and re-firing when the user later pops back to the entry it created.
-        const navigationState = router.getCurrentNavigation()?.extras.state;
+        const navigationState = router.currentNavigation()?.extras.state;
         wantsRestore = !isPopstate && navigationState?.[ET_RESTORE_SCROLL] === true;
     };
     const onNavigationEnd = (event) => {
@@ -3434,7 +3539,7 @@ const setupScrollRestoration = (config = {}) => {
 const DISABLE_LOGGER_PARAM = 'et-logger-quiet';
 const createLogger = (config) => {
     const { scope, feature } = config;
-    const disableLogging = injectQueryParam(DISABLE_LOGGER_PARAM);
+    const disableLogging = injectQueryParam(DISABLE_LOGGER_PARAM, { transform: (value) => value !== null });
     return {
         log: (...args) => {
             if (!disableLogging())
@@ -3465,9 +3570,10 @@ const escapeHtmlPreservingEntities = (str) => str
  *  text only. */
 const MARKDOWN_VERBATIM_ATTR = 'data-markdown-verbatim';
 const VERBATIM_RE = /* @__PURE__ */ new RegExp(`<span\\b[^>]*\\b${MARKDOWN_VERBATIM_ATTR}\\b[^>]*>([^<]*)<\\/span>`, 'gi');
+const codePointToString = (codePoint) => (codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : '\ufffd');
 const decodeUrlCharacterReferences = (url) => url
-    .replace(/&#(\d+);?/g, (_, value) => String.fromCodePoint(Number(value)))
-    .replace(/&#x([0-9a-f]+);?/gi, (_, value) => String.fromCodePoint(Number.parseInt(value, 16)))
+    .replace(/&#(\d+);?/g, (_, value) => codePointToString(Number(value)))
+    .replace(/&#x([0-9a-f]+);?/gi, (_, value) => codePointToString(Number.parseInt(value, 16)))
     .replace(/&(colon|tab|newline);/gi, (_, entity) => entity.toLowerCase() === 'colon' ? ':' : entity.toLowerCase() === 'tab' ? '\t' : '\n');
 /** Whether `url` may be embedded as an image `src`: everything except `javascript:` and `vbscript:`
  *  URLs and non-image `data:` URLs, however they are cased, spaced or entity-encoded. */
@@ -3584,6 +3690,10 @@ const processInline = (text) => {
         .replace(placeholderRe('IC'), (match, i) => inlineCodes[+i] ?? match)
         .replace(placeholderRe('ESC'), (match, i) => escapes[+i] ?? match);
 };
+const parseStartNumber = (openTag) => {
+    const value = /\bstart\s*=\s*["']?(-?\d+)/i.exec(openTag)?.[1];
+    return value === undefined ? 1 : Number(value);
+};
 /** The first top-level `<ul>`/`<ol>` in `html`, matched with balanced nesting. */
 const findList = (html) => {
     const open = /<(ul|ol)\b[^>]*>/i.exec(html);
@@ -3602,6 +3712,7 @@ const findList = (html) => {
                 start: open.index,
                 end: tag.lastIndex,
                 ordered: openTagName.toLowerCase() === 'ol',
+                startNumber: parseStartNumber(open[0]),
                 inner: html.slice(innerStart, match.index),
             };
         }
@@ -3701,15 +3812,15 @@ const buildBlockquoteHtml = (lines) => {
     return `<blockquote>${html || '<br>'}</blockquote>`;
 };
 /** Serializes a list's inner HTML to Markdown, indenting nested lists two spaces per level. */
-const listToMarkdown = (inner, ordered, depth) => {
+const listToMarkdown = (inner, ordered, startNumber, depth) => {
     const indent = '  '.repeat(depth);
-    let n = 1;
+    let n = startNumber;
     return findListItems(inner)
         .map((itemInner) => {
         let content = itemInner;
         let nestedMarkdown = '';
         for (let nested = findList(content); nested; nested = findList(content)) {
-            nestedMarkdown += `\n${listToMarkdown(nested.inner, nested.ordered, depth + 1)}`;
+            nestedMarkdown += `\n${listToMarkdown(nested.inner, nested.ordered, nested.startNumber, depth + 1)}`;
             content = content.slice(0, nested.start) + content.slice(nested.end);
         }
         const marker = ordered ? `${n++}. ` : '- ';
@@ -3723,7 +3834,12 @@ const parseListLines = (lines) => lines
     .map((line) => {
     const match = /^(\s*)([-*+]|\d+\.)\s+(.*)$/.exec(line);
     return match
-        ? { indent: Math.floor((match[1] ?? '').length / 2), ordered: /\d/.test(match[2] ?? ''), text: match[3] ?? '' }
+        ? {
+            indent: Math.floor((match[1] ?? '').length / 2),
+            ordered: /\d/.test(match[2] ?? ''),
+            number: Number.parseInt(match[2] ?? '', 10),
+            text: match[3] ?? '',
+        }
         : null;
 })
     .filter((line) => line !== null);
@@ -3744,7 +3860,9 @@ const buildListHtml = (lines, start, baseIndent) => {
         items += `<li>${item}</li>`;
     }
     const tag = ordered ? 'ol' : 'ul';
-    return { html: `<${tag}>${items}</${tag}>`, next: i };
+    const startNumber = ordered ? (lines[start]?.number ?? 1) : 1;
+    const startAttr = startNumber === 1 ? '' : ` start="${startNumber}"`;
+    return { html: `<${tag}${startAttr}>${items}</${tag}>`, next: i };
 };
 const escapeMarkdownText = (text) => text
     .replace(/[\\`[\]]/g, '\\$&')
@@ -3938,7 +4056,7 @@ const htmlToMarkdown = (html) => {
     }
     // Lists - replace each top-level list with its recursively-serialized Markdown (handles nesting).
     for (let list = findList(md); list; list = findList(md)) {
-        md = `${md.slice(0, list.start)}\n${listToMarkdown(list.inner, list.ordered, 0)}\n${md.slice(list.end)}`;
+        md = `${md.slice(0, list.start)}\n${listToMarkdown(list.inner, list.ordered, list.startNumber, 0)}\n${md.slice(list.end)}`;
     }
     // Tables
     md = md.replace(/<table[^>]*>([\s\S]*?)<\/table>/gi, (_, tableContent) => {
@@ -4536,6 +4654,22 @@ const createUserConsentProvider = (options) => ({
     }),
 });
 
+/**
+ * Declares the `et-visually-hidden` class as a styles-only component: content that stays in the
+ * accessibility tree but is clipped out of the layout. Mount it from any component whose template
+ * uses the class.
+ */
+class VisuallyHiddenStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VisuallyHiddenStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: VisuallyHiddenStylesComponent, isStandalone: true, selector: "et-visually-hidden-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{.et-visually-hidden{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VisuallyHiddenStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-visually-hidden-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-visually-hidden{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}\n"] }]
+        }] });
+/** Mounts {@link VisuallyHiddenStylesComponent}. Call from an injection context. */
+const mountVisuallyHidden = () => injectStyleManager().mount(VisuallyHiddenStylesComponent);
+
 /**
  * Declares the `--ease-*` custom properties that every animated stylesheet in the SDK
  * transitions with, as a styles-only component. Mount it from any component or directive whose
@@ -4670,6 +4804,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+// codes 9000-9099
+const ANIMATION_ERROR_CODES = {
+    /** `*etAnimatedIf` was used without an `[etAnimatedLifecycle]` element around it. */
+    MISSING_ANIMATED_LIFECYCLE: 9000,
+};
+
 /** Runs `cb` two frames from now. Returns a function that cancels it if it has not run yet. */
 const nextFrame = (cb) => {
     if (typeof requestAnimationFrame === 'undefined') {
@@ -4729,7 +4869,12 @@ class AnimatedLifecycleDirective {
         this.transitionIdCounter = 0;
         this.forcedThisFrame = false;
         this.forcedFrameResetId = null;
-        this.state$ = new BehaviorSubject('init');
+        this.stateSubject$ = new BehaviorSubject('init');
+        this._state = signal('init', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+        this.state = this._state.asReadonly();
+        /** Emits the current lifecycle state synchronously on subscribe, then every change. */
+        this.state$ = this.stateSubject$.asObservable();
         this.stateChange = outputFromObservable(this.state$);
         this.skipNextEnter = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "skipNextEnter" }] : /* istanbul ignore next */ []));
@@ -4752,7 +4897,7 @@ class AnimatedLifecycleDirective {
         this.isConstructed = true;
     }
     enter() {
-        const currentState = this.state$.value;
+        const currentState = this.state();
         if (currentState === 'entering')
             return;
         if ((currentState === 'init' && !this.isConstructed) || this.skipNextEnter()) {
@@ -4822,7 +4967,7 @@ class AnimatedLifecycleDirective {
         previousCancel$.complete();
     }
     leave() {
-        const currentState = this.state$.value;
+        const currentState = this.state();
         if (currentState === 'leaving')
             return;
         if (currentState === 'init') {
@@ -4923,11 +5068,11 @@ class AnimatedLifecycleDirective {
         this.addClass(activeClass);
         fromNextFrame()
             .pipe(tap(() => {
-            if (this.state$.value === expectedState) {
+            if (this.state() === expectedState) {
                 this.removeClass(fromClass);
                 this.addClass(toClass);
             }
-        }), switchMap(() => this.whenAnimationsSettled()), tap(() => this.debugLog(`${transitionId}: settled`)), filter(() => this.state$.value === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+        }), switchMap(() => this.whenAnimationsSettled()), tap(() => this.debugLog(`${transitionId}: settled`)), filter(() => this.state() === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     handleInterruptedTransition(config) {
@@ -4935,7 +5080,7 @@ class AnimatedLifecycleDirective {
         this.removeClasses(...removeClasses);
         addClasses.forEach((cls) => this.addClass(cls));
         this.whenAnimationsSettled()
-            .pipe(tap(() => this.debugLog(`${transitionId}: interrupt settled`)), filter(() => this.state$.value === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+            .pipe(tap(() => this.debugLog(`${transitionId}: interrupt settled`)), filter(() => this.state() === expectedState), tap(onComplete), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     /**
@@ -4970,8 +5115,9 @@ class AnimatedLifecycleDirective {
         this.renderer.removeClass(this.element, ...classNames);
     }
     updateState(newState) {
-        this.debugLog(`state: ${this.state$.value} → ${newState}`);
-        this.state$.next(newState);
+        this.debugLog(`state: ${this.state()} → ${newState}`);
+        this._state.set(newState);
+        this.stateSubject$.next(newState);
     }
     debugLog(message, data) {
         const el = this.element;
@@ -5011,27 +5157,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 const ANIMATED_IF_TOKEN = new InjectionToken('ANIMATED_IF_TOKEN');
 class AnimatedIfDirective {
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
     constructor() {
         this.templateRef = inject(TemplateRef);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
+        this.animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN, { optional: true });
         this.hasView = false;
+        this.context = { $implicit: null, etAnimatedIf: null };
         this.ifValue = input(null, { ...(ngDevMode ? { debugName: "ifValue" } : /* istanbul ignore next */ {}), alias: 'etAnimatedIf' });
+        const animatedLifecycle = this.animatedLifecycle;
+        if (!animatedLifecycle) {
+            throw new RuntimeError(ANIMATION_ERROR_CODES.MISSING_ANIMATED_LIFECYCLE, '*etAnimatedIf needs an element with [etAnimatedLifecycle] around it to animate against.');
+        }
         toObservable(this.ifValue)
             .pipe(switchMap((value) => {
             if (value) {
+                this.context.$implicit = value;
+                this.context.etAnimatedIf = value;
                 if (!this.hasView) {
-                    this.viewContainerRef.createEmbeddedView(this.templateRef);
+                    this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
                     this.hasView = true;
                 }
-                this.animatedLifecycle.enter();
+                if (animatedLifecycle.state() !== 'entered')
+                    animatedLifecycle.enter();
                 return of(null);
             }
             if (!this.hasView) {
                 return of(null);
             }
-            this.animatedLifecycle.leave();
-            return this.animatedLifecycle.state$.pipe(filter((state) => state === 'left'), take(1), tap(() => {
+            animatedLifecycle.leave();
+            return animatedLifecycle.state$.pipe(filter((state) => state === 'left'), take(1), tap(() => {
                 this.viewContainerRef.clear();
                 this.hasView = false;
             }));
@@ -5207,6 +5364,23 @@ const createFlipAnimation = (config) => {
     };
 };
 
+/** The confirm an unsaved-changes tracker or guard runs when its own config has none. */
+const UNSAVED_CHANGES_CONFIRM = /* @__PURE__ */ new InjectionToken('UNSAVED_CHANGES_CONFIRM');
+/**
+ * Sets the confirm every unsaved-changes tracker and guard below this injector runs when its config has no
+ * `confirm`. `factory` runs once, in an injection context, and returns the confirm.
+ *
+ * @example
+ * provideUnsavedChangesConfirm(() => {
+ *   const dialogs = inject(MyDialogs);
+ *   return () => dialogs.confirmDiscard();
+ * });
+ */
+const provideUnsavedChangesConfirm = (factory) => ({
+    provide: UNSAVED_CHANGES_CONFIRM,
+    useFactory: factory,
+});
+
 const UNSAVED_CHANGES_COORDINATOR_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const _registrations = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_registrations" }] : /* istanbul ignore next */ []));
@@ -5290,6 +5464,11 @@ const UNSAVED_CHANGES_COORDINATOR_DEF = /* @__PURE__ */ defineRootProvider(() =>
 const provideUnsavedChangesCoordinator = /* @__PURE__ */ toProvideFn(UNSAVED_CHANGES_COORDINATOR_DEF);
 const injectUnsavedChangesCoordinator = /* @__PURE__ */ toInjectFn(UNSAVED_CHANGES_COORDINATOR_DEF);
 
+const UNSAVED_CHANGES_ERROR_CODES = {
+    /** An unsaved-changes tracker or guard has no `confirm`, and no `provideUnsavedChangesConfirm()` is in scope. */
+    MISSING_CONFIRM: 9100,
+};
+
 const isAbstractControl = (value) => !!value &&
     typeof value === 'object' &&
     typeof value.getRawValue === 'function' &&
@@ -5313,22 +5492,25 @@ const normalizeUnsavedChangesSource = (source) => {
         const peek = untracked(source);
         // A signal that currently holds a FieldTree - or nothing yet (the late/async form case).
         if (peek === null || peek === undefined || isFieldTree(peek)) {
-            const fieldSignal = source;
+            const lateSource = source;
             return {
                 value: computed(() => {
-                    const field = fieldSignal();
-                    return isFieldTree(field) ? field().value() : null;
+                    const current = lateSource();
+                    if (isFieldTree(current))
+                        return current().value();
+                    return (current ?? null);
                 }),
                 setValue: (next) => {
-                    const field = untracked(fieldSignal);
-                    if (isFieldTree(field)) {
-                        field().value.set(next);
+                    const current = untracked(lateSource);
+                    if (isFieldTree(current)) {
+                        current().value.set(next);
+                    }
+                    else if (current !== null && current !== undefined && 'set' in source) {
+                        source.set(next);
                     }
                 },
             };
         }
-        // A plain writable value signal (escape hatch). Initialize it with a non-null value so it isn't
-        // mistaken for a late FieldTree source above.
         const writable = source;
         return { value: writable, setValue: (next) => writable.set(next) };
     }
@@ -5497,6 +5679,7 @@ const FAVICON_STORE_DEF = /* @__PURE__ */ defineRootProvider(() => {
         }
         return new Promise((resolve) => {
             const image = new Image();
+            image.crossOrigin = 'anonymous';
             image.onload = () => {
                 baseImage = image;
                 resolve(image);
@@ -6488,12 +6671,12 @@ const createUnsavedChangesTabLock = (config) => {
     return { destroy };
 };
 
-const toBooleanPromise = (result) => {
+const toBooleanPromise = (result, signal) => {
     if (result instanceof Promise) {
         return result.then(Boolean);
     }
     if (isObservable(result)) {
-        return firstValueFrom(result.pipe(take(1), map(Boolean), defaultIfEmpty(false), catchError(() => of(false))));
+        return firstValueFrom(result.pipe(take(1), map(Boolean), takeUntil(fromEvent(signal, 'abort')), defaultIfEmpty(false), catchError(() => of(false))));
     }
     return Promise.resolve(Boolean(result));
 };
@@ -6514,7 +6697,11 @@ const toBooleanPromise = (result) => {
  */
 const createUnsavedChangesTracker = (config) => {
     assertInInjectionContext(createUnsavedChangesTracker);
-    const { compareFn, confirm } = config;
+    const { compareFn } = config;
+    const confirm = config.confirm ?? inject(UNSAVED_CHANGES_CONFIRM, { optional: true });
+    if (!confirm && isDevMode()) {
+        throw new RuntimeError(UNSAVED_CHANGES_ERROR_CODES.MISSING_CONFIRM, '[createUnsavedChangesTracker] No confirm: pass `confirm` or call `provideUnsavedChangesConfirm()` in a parent injector.');
+    }
     const normalized = normalizeUnsavedChangesSource(config.source);
     const hasExplicitDefault = config.defaultValue !== undefined;
     const initialDefault = hasExplicitDefault
@@ -6565,7 +6752,10 @@ const createUnsavedChangesTracker = (config) => {
         if (untracked(_isAbandoned) || !untracked(hasChanges)) {
             return Promise.resolve(true);
         }
-        return coordinator.runCheck((context) => toBooleanPromise(confirm(untracked(normalized.value), context)));
+        if (!confirm) {
+            return Promise.resolve(true);
+        }
+        return coordinator.runCheck((context) => toBooleanPromise(confirm(untracked(normalized.value), context), context.signal));
     };
     const refreshDefaultValue = () => _defaultValue.set(untracked(normalized.value));
     const restoreDefaultValue = () => {
@@ -6877,12 +7067,19 @@ class ClickOutsideDirective {
         this.elementRef = inject(ElementRef);
         this.document = inject(DOCUMENT);
         this.didClickOutside = output({ alias: 'etClickOutside' });
+        this.pressStartedInside = false;
+        fromEvent(this.document.documentElement, 'pointerdown', { capture: true })
+            .pipe(tap((event) => {
+            this.pressStartedInside = event.composedPath().includes(this.elementRef.nativeElement);
+        }), takeUntilDestroyed())
+            .subscribe();
         fromEvent(this.document.documentElement, 'click')
             .pipe(tap((event) => {
             const hostElement = this.elementRef.nativeElement;
             const activeElement = event.target;
-            const isInside = hostElement.contains(activeElement);
-            if (isInside)
+            const startedInside = this.pressStartedInside;
+            this.pressStartedInside = false;
+            if (startedInside || event.composedPath().includes(hostElement))
                 return;
             if (isOnHigherOverlayLayer(activeElement, resolveOverlayLayer(hostElement)))
                 return;
@@ -6906,7 +7103,7 @@ class RepeatDirective {
         this.viewContainerRef = inject(ViewContainerRef);
         this.repeatCount = input(2, { ...(ngDevMode ? { debugName: "repeatCount" } : /* istanbul ignore next */ {}), alias: 'etRepeat', transform: numberAttribute });
         effect(() => {
-            const count = Math.max(0, this.repeatCount());
+            const count = Math.max(0, this.repeatCount()) || 0;
             while (this.viewContainerRef.length < count) {
                 this.viewContainerRef.createEmbeddedView(this.mainTemplateRef);
             }
@@ -7036,7 +7233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 // jsdom and other non-browser DOMs ship no pointer capture; the document listeners track the
 // gesture either way, so a failure here only costs events over a cross-origin frame.
-const capturePointer = (el, pointerId) => {
+const capturePointer$1 = (el, pointerId) => {
     try {
         el.setPointerCapture(pointerId);
     }
@@ -7066,7 +7263,7 @@ const setupDragObservable = (startEvent, el, commitThreshold) => {
                 return EMPTY;
             }
             committed = true;
-            capturePointer(el, pointerId);
+            capturePointer$1(el, pointerId);
             lastX = e.clientX;
             lastY = e.clientY;
             // Emit the catch-up move together with start so consumers snap to the pointer
@@ -8065,10 +8262,10 @@ const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
     ...(ngDevMode ? [{ debugName: "_componentInstance" }] : /* istanbul ignore next */ []));
     let positionUpdater = null;
     let backdropUpdater = null;
-    const beforeOpenedSubject = new Subject();
-    const afterOpenedSubject = new Subject();
-    const beforeClosedSubject = new Subject();
-    const afterClosedSubject = new Subject();
+    const beforeOpenedSubject = new ReplaySubject(1);
+    const afterOpenedSubject = new ReplaySubject(1);
+    const beforeClosedSubject = new ReplaySubject(1);
+    const afterClosedSubject = new ReplaySubject(1);
     const closeGuards = new Set();
     return {
         id,
@@ -8076,7 +8273,6 @@ const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
         elements,
         state: _state.asReadonly(),
         componentInstance: _componentInstance.asReadonly(),
-        beforeOpenedSubject,
         close(result, source = 'api') {
             if (_state() === 'closing' || _state() === 'closed') {
                 return;
@@ -8119,6 +8315,10 @@ const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
         attachComponentRef(componentRef) {
             _componentInstance.set(componentRef.instance);
         },
+        markBeforeOpened() {
+            beforeOpenedSubject.next();
+            beforeOpenedSubject.complete();
+        },
         attachPositionUpdater(updater) {
             positionUpdater = updater;
         },
@@ -8187,6 +8387,14 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
     // 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 armedReopenSwallows = new Set();
+    const focusRestoreChains = new WeakMap();
+    const resolveFocusRestoreChain = (focused) => {
+        if (!focused)
+            return [];
+        const owner = openEntriesState().find((entry) => entry.elements.hostElement.contains(focused));
+        return [focused, ...((owner && focusRestoreChains.get(owner)) ?? [])];
+    };
     const getRootElement = (targetDocument, zIndex) => {
         let documentRoots = rootElements.get(targetDocument);
         if (!documentRoots) {
@@ -8259,9 +8467,7 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
         const paneElement = renderer.createElement('div');
         const backdropElement = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "backdropElement" }] : /* istanbul ignore next */ []));
-        const previousFocusedElement = isHTMLOrSVGElement(targetDocument.activeElement)
-            ? targetDocument.activeElement
-            : null;
+        const focusRestoreChain = resolveFocusRestoreChain(isHTMLOrSVGElement(targetDocument.activeElement) ? targetDocument.activeElement : null);
         const autoFocus = config.autoFocus ?? 'first-tabbable';
         let currentHasBackdrop = config.hasBackdrop !== false;
         let currentPositionStrategy = config.positionStrategy;
@@ -8338,8 +8544,8 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
         renderer.addClass(paneElement, 'et-overlay-runtime-pane', ...(config.paneClass ?? []));
         appRef.attachView(componentRef.hostView);
         overlayRef.attachComponentRef(componentRef);
-        overlayRef.beforeOpenedSubject.next();
-        overlayRef.beforeOpenedSubject.complete();
+        overlayRef.markBeforeOpened();
+        focusRestoreChains.set(overlayRef, focusRestoreChain);
         openEntriesState.update((entries) => [...entries, overlayRef]);
         let positionCleanup = setupPositioning(activeConfig(), hostElement, paneElement, overlayRef, renderer);
         cleanupFns.push(() => positionCleanup());
@@ -8394,8 +8600,8 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
             }
             openEntriesState.update((entries) => entries.filter((entry) => entry !== overlayRef));
             maybeDestroyRootElements(targetDocument);
-            if (config.restoreFocus !== false && overlayStillOwnsFocus && previousFocusedElement?.isConnected) {
-                previousFocusedElement.focus({ preventScroll: true });
+            if (config.restoreFocus !== false && overlayStillOwnsFocus) {
+                focusRestoreChain.find((element) => element.isConnected)?.focus({ preventScroll: true });
             }
             overlayRef.finishClose(closeEvent);
         };
@@ -8413,7 +8619,7 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
                 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'})`);
+            animationDebugLog(`runtime ${config.id}`, `close requested (source "${closeEvent.source}", lifecycle state "${lifecycle?.state() ?? 'none'}", delegate ${config.animationDelegate?.leave ? 'yes' : 'no'})`);
             // The reference element is gone - there is nothing left to animate away from, so tear the
             // overlay down synchronously instead of playing a leave transition from a stale position.
             if (!lifecycle || closeEvent.source === 'reference-detached') {
@@ -8470,12 +8676,22 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
                 const originElement = getOriginElement();
                 if (originElement && originElement.contains(target)) {
                     const swallowReopenClick = (clickEvent) => {
+                        disarmReopenSwallow();
                         if (isElement(clickEvent.target) && originElement.contains(clickEvent.target)) {
                             clickEvent.stopImmediatePropagation();
                             clickEvent.preventDefault();
                         }
                     };
-                    targetDocument.addEventListener('click', swallowReopenClick, { capture: true, once: true });
+                    // A press that ends without a click (cancelled, dragged off) must not leave the swallow
+                    // armed for the next, unrelated click on the origin.
+                    const disarmReopenSwallow = () => {
+                        targetDocument.removeEventListener('click', swallowReopenClick, true);
+                        targetDocument.removeEventListener('pointerdown', disarmReopenSwallow, true);
+                        armedReopenSwallows.delete(disarmReopenSwallow);
+                    };
+                    targetDocument.addEventListener('click', swallowReopenClick, true);
+                    targetDocument.addEventListener('pointerdown', disarmReopenSwallow, true);
+                    armedReopenSwallows.add(disarmReopenSwallow);
                 }
             };
             targetDocument.addEventListener('pointerdown', onPointerDown, true);
@@ -8494,7 +8710,7 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
                 overlayRef.markOpened();
                 return;
             }
-            animationDebugLog(`runtime ${config.id}`, `enter (delegate ${config.animationDelegate?.enter ? 'yes' : 'no'}, lifecycle state "${lifecycle.state$.value}")`);
+            animationDebugLog(`runtime ${config.id}`, `enter (delegate ${config.animationDelegate?.enter ? 'yes' : 'no'}, lifecycle state "${lifecycle.state()}")`);
             const readySubscription = lifecycle.state$
                 .pipe(filter((state) => state === 'entering' || state === 'entered'), take(1), tap(() => {
                 nextFrame(() => {
@@ -8520,6 +8736,7 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
     };
     destroyRef.onDestroy(() => {
         [...mountedTeardowns].forEach((teardown) => teardown());
+        [...armedReopenSwallows].forEach((disarm) => disarm());
         [...rootElements.keys()].forEach((targetDocument) => maybeDestroyRootElements(targetDocument));
     });
     return {
@@ -9110,7 +9327,7 @@ const initials = (value, maxLength = 2) => {
         return '';
     return words
         .slice(0, maxLength)
-        .map((word) => word[0]?.toUpperCase() ?? '')
+        .map((word) => [...word.normalize()][0]?.toUpperCase() ?? '')
         .join('');
 };
 
@@ -9189,20 +9406,38 @@ const EDGE_CURSORS = {
     nw: 'nwse-resize',
     se: 'nwse-resize',
 };
-const setupResizeObservable = (startEvent, edge, doc) => {
+// jsdom and other non-browser DOMs ship no pointer capture; the document listeners track the
+// gesture either way, so a failure here only costs events over a cross-origin frame.
+const capturePointer = (el, pointerId) => {
+    try {
+        el.setPointerCapture(pointerId);
+    }
+    catch {
+        return;
+    }
+};
+const setupResizeObservable = (startEvent, handle, edge, doc) => {
     const pointerId = startEvent.pointerId;
     const startX = startEvent.clientX;
     const startY = startEvent.clientY;
     let cancelled = false;
+    let last = { edge, totalDx: 0, totalDy: 0, clientX: startX, clientY: startY };
     const end$ = merge(fromEvent(doc, 'pointerup'), fromEvent(doc, 'pointercancel')).pipe(filter((e) => e.pointerId === pointerId), take(1), 
     // Read below by the terminating `defer`, which only runs once this has completed the moves.
     tap((e) => (cancelled = e.type === 'pointercancel')));
     return defer(() => {
         const releaseSelection = suppressTextSelection(doc);
-        return concat(of({ type: 'start', edge }), fromEvent(doc, 'pointermove').pipe(filter((e) => e.pointerId === pointerId), map((e) => ({
-            type: 'move',
-            data: { edge, dx: e.clientX - startX, dy: e.clientY - startY, clientX: e.clientX, clientY: e.clientY },
-        })), takeUntil(end$)), defer(() => of({ type: cancelled ? 'cancelled' : 'end' }))).pipe(finalize(releaseSelection));
+        capturePointer(handle, pointerId);
+        return concat(of({ type: 'start', edge }), fromEvent(doc, 'pointermove').pipe(filter((e) => e.pointerId === pointerId), map((e) => {
+            last = {
+                edge,
+                totalDx: e.clientX - startX,
+                totalDy: e.clientY - startY,
+                clientX: e.clientX,
+                clientY: e.clientY,
+            };
+            return { type: 'move', data: last };
+        }), takeUntil(end$)), defer(() => of(cancelled ? { type: 'cancelled' } : { type: 'end', data: last }))).pipe(finalize(releaseSelection));
     });
 };
 class ResizeHandlesComponent {
@@ -9212,10 +9447,10 @@ class ResizeHandlesComponent {
         ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.gestureStart$ = new Subject();
-        this.gesture$ = this.gestureStart$.pipe(exhaustMap(({ event, edge }) => setupResizeObservable(event, edge, this.el.nativeElement.ownerDocument)), share(), takeUntilDestroyed());
+        this.gesture$ = this.gestureStart$.pipe(exhaustMap(({ event, handle, edge }) => setupResizeObservable(event, handle, edge, this.el.nativeElement.ownerDocument)), share(), takeUntilDestroyed());
         this.resizeStarted = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'start'), map((e) => e.edge)));
         this.resizeMoved = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'move'), map((e) => e.data)));
-        this.resizeEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map(() => undefined)));
+        this.resizeEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map((e) => e.data)));
         /**
          * The browser took the gesture away mid-resize (a system gesture, an incoming call, the tab going
          * to the background). Revert to the size the resize started from - the user never let go, so there
@@ -9236,7 +9471,7 @@ class ResizeHandlesComponent {
         if (event.button !== 0 || this.disabled())
             return;
         event.stopPropagation();
-        this.gestureStart$.next({ event, edge });
+        this.gestureStart$.next({ event, handle: event.currentTarget, edge });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizeHandlesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ResizeHandlesComponent, isStandalone: true, selector: "et-resize-handles", inputs: { edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStarted: "resizeStarted", resizeMoved: "resizeMoved", resizeEnded: "resizeEnded", resizeCancelled: "resizeCancelled" }, host: { properties: { "attr.inert": "disabled() ? \"\" : null", "attr.data-active-edge": "activeEdge()" }, classAttribute: "et-resize-handles" }, ngImport: i0, template: `
@@ -9498,6 +9733,226 @@ const injectDefaultSurfaceTheme = (type) => {
     return defaults.length === 1 ? (defaults[0] ?? null) : null;
 };
 
+/**
+ * Reserved color name. Resolves the color tokens from the ambient surface's neutral swatch
+ * (`SurfaceTheme['interactionColor']`) instead of a registered accent, so a secondary action can
+ * read as chrome without the app registering a neutral color theme. Apps must not register a color
+ * theme under this name.
+ */
+const SURFACE_COLOR = 'surface';
+const createCssColorThemeName = (name) => name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+const COLOR_THEMES_DEF = /* @__PURE__ */ defineStaticProvider(undefined, {
+    name: 'Color Themes',
+});
+const ɵProvideColorThemes = /* @__PURE__ */ toProvideFn(COLOR_THEMES_DEF);
+const injectColorThemes = /* @__PURE__ */ toInjectFn(COLOR_THEMES_DEF);
+const COLOR_THEMES_PREFIX_DEF = /* @__PURE__ */ defineStaticProvider('et', {
+    name: 'Themes Prefix',
+});
+const ɵProvideColorThemesPrefix = /* @__PURE__ */ toProvideFn(COLOR_THEMES_PREFIX_DEF);
+const injectColorThemesPrefix = /* @__PURE__ */ toInjectFn(COLOR_THEMES_PREFIX_DEF);
+const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => {
+    if (isDevMode() && themes.some((theme) => theme.name === SURFACE_COLOR)) {
+        console.error(`[provideColorThemesWithTailwind4] "${SURFACE_COLOR}" is a reserved color name that resolves to the ambient surface's neutral swatch. Rename your theme.`);
+    }
+    return [ɵProvideColorThemes(themes), ɵProvideColorThemesPrefix(prefix)];
+};
+const findColorThemeByType = (themes, type, caller) => {
+    if (!themes) {
+        throw new Error(`[${caller}] No color themes provided. Call provideColorThemesWithTailwind4() in your app config.`);
+    }
+    const theme = themes.find((t) => t.type === type);
+    if (!theme) {
+        throw new Error(`[${caller}] No color theme with type "${type}" found. Add a theme with type: "${type}" to provideColorThemesWithTailwind4().`);
+    }
+    if (isDevMode()) {
+        const duplicates = themes.filter((t) => t.type === type);
+        if (duplicates.length > 1) {
+            console.error(`[${caller}] Multiple themes with type "${type}" found: ${duplicates.map((t) => t.name).join(', ')}. Only the first one will be used.`);
+        }
+    }
+    return theme;
+};
+const injectColorThemeByType = (type) => findColorThemeByType(injectColorThemes({ optional: true }), type, 'injectColorThemeByType');
+/**
+ * A signal of the color theme for `type` on the surface this element renders on: the theme the nearest
+ * surface names in `semanticColorThemes`, else the first registered theme of that `type`. Reading it throws
+ * when the app registered no theme of that `type`, so read it only for a state that renders.
+ *
+ * @example
+ * protected successTheme = injectSemanticColorTheme('success');
+ * // <span [etProvideColor]="successTheme()">+12%</span>
+ */
+const injectSemanticColorTheme = (type) => {
+    const themes = injectColorThemes({ optional: true });
+    const surfaceProvider = inject(SURFACE_PROVIDER, { optional: true });
+    const defaultSurface = injectDefaultSurfaceTheme();
+    return computed(() => {
+        const surface = surfaceProvider?.activeTheme() ?? defaultSurface;
+        const mappedName = surface?.semanticColorThemes?.[type];
+        const mapped = mappedName ? themes?.find((t) => t.name === mappedName) : undefined;
+        if (mapped)
+            return mapped;
+        if (mappedName && isDevMode()) {
+            console.error(`[injectSemanticColorTheme] Surface theme "${surface?.name}" maps "${type}" to the color theme "${mappedName}", which is not registered. Add it to provideColorThemesWithTailwind4().`);
+        }
+        return findColorThemeByType(themes, type, 'injectSemanticColorTheme');
+    });
+};
+/** @deprecated Use `injectSemanticColorTheme('error')`, which follows the surface the element renders on. */
+const injectErrorTheme = () => injectColorThemeByType('error');
+/** @deprecated Use `injectSemanticColorTheme('warning')`, which follows the surface the element renders on. */
+const injectWarningTheme = () => injectColorThemeByType('warning');
+/** @deprecated Use `injectSemanticColorTheme('success')`, which follows the surface the element renders on. */
+const injectSuccessTheme = () => injectColorThemeByType('success');
+const injectDefaultColorTheme = () => {
+    const themes = injectColorThemes({ optional: true });
+    if (!themes) {
+        throw new Error(`[injectDefaultColorTheme] No color themes provided. Call provideColorThemesWithTailwind4() in your app config.`);
+    }
+    const theme = themes.find((t) => t.isDefault);
+    if (!theme) {
+        throw new Error(`[injectDefaultColorTheme] No color theme with isDefault: true found. Mark one theme as the default in provideColorThemesWithTailwind4().`);
+    }
+    if (isDevMode()) {
+        const duplicates = themes.filter((t) => t.isDefault);
+        if (duplicates.length > 1) {
+            console.error(`[injectDefaultColorTheme] Multiple themes with isDefault: true found: ${duplicates.map((t) => t.name).join(', ')}. Only the first one will be used.`);
+        }
+    }
+    return theme;
+};
+
+const COLOR_PROVIDER = new InjectionToken('ColorProvider');
+/**
+ * The color provider attached to a bootstrapped root component (e.g. `ProvideColorDirective` in
+ * the app component's `hostDirectives`), if any. Detached DOM such as overlay panes can't reach
+ * it through element DI, so overlay containers fall back to this when resolving the provider to
+ * `syncWithProvider()` - resolve at sync time, not at injection time, since root components only
+ * register with `ApplicationRef` once bootstrap completes.
+ */
+const resolveAppRootColorProvider = (appRef) => {
+    for (const componentRef of appRef.components) {
+        const provider = componentRef.injector.get(COLOR_PROVIDER, null);
+        if (provider) {
+            return provider;
+        }
+    }
+    return null;
+};
+const FORCED_COLOR_UNSET = /* @__PURE__ */ Symbol('FORCED_COLOR_UNSET');
+const appsWarnedAboutMissingThemes = /* @__PURE__ */ new WeakSet();
+class ProvideColorDirective {
+    constructor() {
+        this.themes = injectColorThemes({ optional: true });
+        this.prefix = injectColorThemesPrefix({ optional: true });
+        this.injector = inject(Injector);
+        this.parentProvider = inject(COLOR_PROVIDER, { optional: true, skipSelf: true });
+        this.appRef = inject(ApplicationRef);
+        this.currentProviderSync = null;
+        this.forcedColor = signal(FORCED_COLOR_UNSET, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "forcedColor" }] : /* istanbul ignore next */ []));
+        this.color = input(undefined, { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'etProvideColor' });
+        this.effectiveColor = computed(() => {
+            const forcedColor = this.forcedColor();
+            if (forcedColor !== FORCED_COLOR_UNSET) {
+                return forcedColor;
+            }
+            return this.color();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+        /**
+         * The color that actually applies at this provider's location: its own effective color, or -
+         * when this provider is passive (no input, nothing forced) - the nearest ancestor provider's.
+         * Mirrors the CSS cascade, which falls through a provider's `-color--inherited` scope class;
+         * consumers that re-apply context across detached DOM (overlay panes) must use this instead
+         * of `effectiveColor` or a passive in-between provider (e.g. a form field's) erases the theme.
+         */
+        this.resolvedColor = computed(() => {
+            const own = this.effectiveColor();
+            const ownName = typeof own === 'object' && own !== null ? own.name : own;
+            if (ownName) {
+                return own;
+            }
+            return this.parentProvider?.resolvedColor();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+        this.colorName = computed(() => {
+            const raw = this.effectiveColor();
+            const value = typeof raw === 'object' && raw !== null ? raw.name : raw;
+            if (value === SURFACE_COLOR)
+                return SURFACE_COLOR;
+            if (!value)
+                return;
+            if (!this.themes) {
+                if (isDevMode() && !appsWarnedAboutMissingThemes.has(this.appRef)) {
+                    appsWarnedAboutMissingThemes.add(this.appRef);
+                    console.warn(`etProvideColor="${value}" has no effect because no color themes are registered. Please make sure to add provideColorThemesWithTailwind4()`);
+                }
+                return;
+            }
+            if (isDevMode() && !this.themes.some((theme) => theme.name === value)) {
+                console.error(`Theme ${value} does not exist. Please make sure to add it to provideColorThemesWithTailwind4()`);
+            }
+            return createCssColorThemeName(value);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorName" }] : /* istanbul ignore next */ []));
+        this.themeClass = computed(() => {
+            const prefix = this.prefix || 'et';
+            if (this.colorName()) {
+                return `${prefix}-color--${this.colorName()}`;
+            }
+            return `${prefix}-color--inherited`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
+    }
+    syncWithProvider(provider) {
+        this.currentProviderSync?.destroy();
+        runInInjectionContext(this.injector, () => {
+            this.currentProviderSync = effect(() => {
+                const provideColor = provider.resolvedColor();
+                untracked(() => {
+                    if (provideColor === undefined) {
+                        this.clearForcedColor();
+                        return;
+                    }
+                    this.forceColor(provideColor);
+                });
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : /* istanbul ignore next */ []));
+        });
+    }
+    stopSyncWithProvider() {
+        const hadProviderSync = !!this.currentProviderSync;
+        this.currentProviderSync?.destroy();
+        this.currentProviderSync = null;
+        if (hadProviderSync) {
+            this.clearForcedColor();
+        }
+    }
+    forceColor(color) {
+        this.forcedColor.set(color);
+    }
+    clearForcedColor() {
+        if (this.forcedColor() === FORCED_COLOR_UNSET) {
+            return;
+        }
+        this.forcedColor.set(FORCED_COLOR_UNSET);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ProvideColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ProvideColorDirective, isStandalone: true, selector: "[etProvideColor]", inputs: { color: { classPropertyName: "color", publicName: "etProvideColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "themeClass()" } }, providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ProvideColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etProvideColor]',
+                    providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }],
+                    host: {
+                        '[class]': 'themeClass()',
+                    },
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideColor", required: false }] }] } });
+
 const SURFACE_PROVIDER = new InjectionToken('SurfaceProvider');
 const FORCED_SURFACE_UNSET = /* @__PURE__ */ Symbol('FORCED_SURFACE_UNSET');
 class ProvideSurfaceDirective {
@@ -9507,6 +9962,9 @@ class ProvideSurfaceDirective {
         this.injector = inject(Injector);
         this.parentProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.defaultTheme = injectDefaultSurfaceTheme();
+        this.colorThemes = injectColorThemes({ optional: true });
+        this.colorPrefix = injectColorThemesPrefix({ optional: true });
+        this.colorProvider = inject(COLOR_PROVIDER, { optional: true });
         this.currentProviderSync = null;
         this.forcedSurface = signal(FORCED_SURFACE_UNSET, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "forcedSurface" }] : /* istanbul ignore next */ []));
@@ -9552,12 +10010,23 @@ class ProvideSurfaceDirective {
             return createCssSurfaceName(value);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "surfaceName" }] : /* istanbul ignore next */ []));
+        this.colorThemeClass = computed(() => {
+            const colorTheme = this.resolvedTheme()?.colorTheme;
+            if (!colorTheme || this.colorProvider?.resolvedColor())
+                return null;
+            if (isDevMode() && !this.colorThemes?.some((theme) => theme.name === colorTheme)) {
+                console.error(`Surface theme ${this.resolvedTheme()?.name} names the color theme ${colorTheme}, which does not exist. Please make sure to add it to provideColorThemesWithTailwind4()`);
+            }
+            return `${this.colorPrefix || 'et'}-color--${createCssColorThemeName(colorTheme)}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorThemeClass" }] : /* istanbul ignore next */ []));
         this.surfaceClass = computed(() => {
             const prefix = this.prefix || 'et';
-            if (this.surfaceName()) {
-                return `${prefix}-surface--${this.surfaceName()}`;
-            }
-            return `${prefix}-surface--inherited`;
+            const surfaceClass = this.surfaceName()
+                ? `${prefix}-surface--${this.surfaceName()}`
+                : `${prefix}-surface--inherited`;
+            const colorThemeClass = this.colorThemeClass();
+            return colorThemeClass ? `${surfaceClass} ${colorThemeClass}` : surfaceClass;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "surfaceClass" }] : /* istanbul ignore next */ []));
     }
@@ -9766,87 +10235,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 const COLOR_PALETTE_DEF = /* @__PURE__ */ defineStaticProvider(undefined, {
     name: 'Color Palette',
 });
+const injectColorPaletteConfig = /* @__PURE__ */ toInjectFn(COLOR_PALETTE_DEF);
+const selectPalette = (config, surface) => {
+    if (Array.isArray(config))
+        return config;
+    return (surface === null ? undefined : config[surface]) ?? config.default;
+};
 /**
  * The color themes a subtree may offer a user as pickable choices, in the order they should appear.
  * A curated slice of what `provideColorThemesWithTailwind4` registered: an app registers every theme
  * it renders with, including ones nobody should pick by hand (`error`, `warning`), and adds the
  * user-facing label a swatch needs.
  *
- * Components that let a user choose a color read it optionally and fall back to accepting a raw
- * theme name when it is absent - the scheduler's `colorToken` field is the reference consumer.
+ * Pass one list, or one list per registered surface theme name plus a `default`. The charts draw with
+ * the list of the surface they sit on; a color picker always offers the `default` list.
  *
  * @example
  * provideColorPalette([
  *   { token: 'brand', label: 'Team green' },
  *   { token: 'ocean', label: 'Training blue' },
  * ]);
+ *
+ * @example
+ * provideColorPalette({
+ *   default: [{ token: 'ocean', label: 'Training' }],
+ *   'dark-card': [{ token: 'ocean-bright', label: 'Training' }],
+ * });
  */
-const provideColorPalette = /* @__PURE__ */ toProvideFn(COLOR_PALETTE_DEF);
-/** The palette from {@link provideColorPalette}. Pass `{ optional: true }` - most apps provide none. */
-const injectColorPalette = /* @__PURE__ */ toInjectFn(COLOR_PALETTE_DEF);
-const COLOR_PALETTE = /* @__PURE__ */ toToken(COLOR_PALETTE_DEF);
-
+const provideColorPalette = (palette) => COLOR_PALETTE_DEF.provide(palette);
+function injectColorPalette(options) {
+    const config = options ? injectColorPaletteConfig(options) : injectColorPaletteConfig();
+    return config ? selectPalette(config, null) : null;
+}
 /**
- * Reserved color name. Resolves the color tokens from the ambient surface's neutral swatch
- * (`SurfaceTheme['interactionColor']`) instead of a registered accent, so a secondary action can
- * read as chrome without the app registering a neutral color theme. Apps must not register a color
- * theme under this name.
+ * The palette from {@link provideColorPalette} for the surface the current subtree renders on: that
+ * surface theme's list, else the `default` list. `null` when no palette is provided.
  */
-const SURFACE_COLOR = 'surface';
-const createCssColorThemeName = (name) => name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-const COLOR_THEMES_DEF = /* @__PURE__ */ defineStaticProvider(undefined, {
-    name: 'Color Themes',
-});
-const ɵProvideColorThemes = /* @__PURE__ */ toProvideFn(COLOR_THEMES_DEF);
-const injectColorThemes = /* @__PURE__ */ toInjectFn(COLOR_THEMES_DEF);
-const COLOR_THEMES_PREFIX_DEF = /* @__PURE__ */ defineStaticProvider('et', {
-    name: 'Themes Prefix',
-});
-const ɵProvideColorThemesPrefix = /* @__PURE__ */ toProvideFn(COLOR_THEMES_PREFIX_DEF);
-const injectColorThemesPrefix = /* @__PURE__ */ toInjectFn(COLOR_THEMES_PREFIX_DEF);
-const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => {
-    if (isDevMode() && themes.some((theme) => theme.name === SURFACE_COLOR)) {
-        console.error(`[provideColorThemesWithTailwind4] "${SURFACE_COLOR}" is a reserved color name that resolves to the ambient surface's neutral swatch. Rename your theme.`);
-    }
-    return [ɵProvideColorThemes(themes), ɵProvideColorThemesPrefix(prefix)];
-};
-const injectColorThemeByType = (type) => {
-    const themes = injectColorThemes({ optional: true });
-    if (!themes) {
-        throw new Error(`[injectColorThemeByType] No color themes provided. Call provideColorThemesWithTailwind4() in your app config.`);
-    }
-    const theme = themes.find((t) => t.type === type);
-    if (!theme) {
-        throw new Error(`[injectColorThemeByType] No color theme with type "${type}" found. Add a theme with type: "${type}" to provideColorThemesWithTailwind4().`);
-    }
-    if (isDevMode()) {
-        const duplicates = themes.filter((t) => t.type === type);
-        if (duplicates.length > 1) {
-            console.error(`[injectColorThemeByType] Multiple themes with type "${type}" found: ${duplicates.map((t) => t.name).join(', ')}. Only the first one will be used.`);
-        }
-    }
-    return theme;
-};
-const injectErrorTheme = () => injectColorThemeByType('error');
-const injectWarningTheme = () => injectColorThemeByType('warning');
-const injectSuccessTheme = () => injectColorThemeByType('success');
-const injectDefaultColorTheme = () => {
-    const themes = injectColorThemes({ optional: true });
-    if (!themes) {
-        throw new Error(`[injectDefaultColorTheme] No color themes provided. Call provideColorThemesWithTailwind4() in your app config.`);
-    }
-    const theme = themes.find((t) => t.isDefault);
-    if (!theme) {
-        throw new Error(`[injectDefaultColorTheme] No color theme with isDefault: true found. Mark one theme as the default in provideColorThemesWithTailwind4().`);
-    }
-    if (isDevMode()) {
-        const duplicates = themes.filter((t) => t.isDefault);
-        if (duplicates.length > 1) {
-            console.error(`[injectDefaultColorTheme] Multiple themes with isDefault: true found: ${duplicates.map((t) => t.name).join(', ')}. Only the first one will be used.`);
-        }
-    }
-    return theme;
+const injectSurfaceColorPalette = () => {
+    const config = injectColorPaletteConfig({ optional: true });
+    const surface = injectParentSurface();
+    return computed(() => (config ? selectPalette(config, surface()?.name ?? null) : null));
 };
+const COLOR_PALETTE = /* @__PURE__ */ toToken(COLOR_PALETTE_DEF);
 
 /** Reads the nonce where Angular's default `CSP_NONCE` does, since these run outside any injector. */
 const createNoncedStyle = () => {
@@ -10049,127 +10479,6 @@ const provideColorThemes = (themes) => {
     return [ɵProvideColorThemes(themes), ɵProvideColorThemesPrefix('et')];
 };
 
-const COLOR_PROVIDER = new InjectionToken('ColorProvider');
-/**
- * The color provider attached to a bootstrapped root component (e.g. `ProvideColorDirective` in
- * the app component's `hostDirectives`), if any. Detached DOM such as overlay panes can't reach
- * it through element DI, so overlay containers fall back to this when resolving the provider to
- * `syncWithProvider()` - resolve at sync time, not at injection time, since root components only
- * register with `ApplicationRef` once bootstrap completes.
- */
-const resolveAppRootColorProvider = (appRef) => {
-    for (const componentRef of appRef.components) {
-        const provider = componentRef.injector.get(COLOR_PROVIDER, null);
-        if (provider) {
-            return provider;
-        }
-    }
-    return null;
-};
-const FORCED_COLOR_UNSET = /* @__PURE__ */ Symbol('FORCED_COLOR_UNSET');
-class ProvideColorDirective {
-    constructor() {
-        this.themes = injectColorThemes({ optional: true });
-        this.prefix = injectColorThemesPrefix({ optional: true });
-        this.injector = inject(Injector);
-        this.parentProvider = inject(COLOR_PROVIDER, { optional: true, skipSelf: true });
-        this.currentProviderSync = null;
-        this.forcedColor = signal(FORCED_COLOR_UNSET, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "forcedColor" }] : /* istanbul ignore next */ []));
-        this.color = input(undefined, { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'etProvideColor' });
-        this.effectiveColor = computed(() => {
-            const forcedColor = this.forcedColor();
-            if (forcedColor !== FORCED_COLOR_UNSET) {
-                return forcedColor;
-            }
-            return this.color();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
-        /**
-         * The color that actually applies at this provider's location: its own effective color, or -
-         * when this provider is passive (no input, nothing forced) - the nearest ancestor provider's.
-         * Mirrors the CSS cascade, which falls through a provider's `-color--inherited` scope class;
-         * consumers that re-apply context across detached DOM (overlay panes) must use this instead
-         * of `effectiveColor` or a passive in-between provider (e.g. a form field's) erases the theme.
-         */
-        this.resolvedColor = computed(() => {
-            const own = this.effectiveColor();
-            const ownName = typeof own === 'object' && own !== null ? own.name : own;
-            if (ownName) {
-                return own;
-            }
-            return this.parentProvider?.resolvedColor();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
-        this.colorName = computed(() => {
-            const raw = this.effectiveColor();
-            const value = typeof raw === 'object' && raw !== null ? raw.name : raw;
-            if (value === SURFACE_COLOR)
-                return SURFACE_COLOR;
-            if (!this.themes || !value)
-                return;
-            if (isDevMode() && !this.themes.some((theme) => theme.name === value)) {
-                console.error(`Theme ${value} does not exist. Please make sure to add it to provideColorThemesWithTailwind4()`);
-            }
-            return createCssColorThemeName(value);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "colorName" }] : /* istanbul ignore next */ []));
-        this.themeClass = computed(() => {
-            const prefix = this.prefix || 'et';
-            if (this.colorName()) {
-                return `${prefix}-color--${this.colorName()}`;
-            }
-            return `${prefix}-color--inherited`;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
-    }
-    syncWithProvider(provider) {
-        this.currentProviderSync?.destroy();
-        runInInjectionContext(this.injector, () => {
-            this.currentProviderSync = effect(() => {
-                const provideColor = provider.resolvedColor();
-                untracked(() => {
-                    if (provideColor === undefined) {
-                        this.clearForcedColor();
-                        return;
-                    }
-                    this.forceColor(provideColor);
-                });
-            }, /* @ts-ignore */
-            ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : /* istanbul ignore next */ []));
-        });
-    }
-    stopSyncWithProvider() {
-        const hadProviderSync = !!this.currentProviderSync;
-        this.currentProviderSync?.destroy();
-        this.currentProviderSync = null;
-        if (hadProviderSync) {
-            this.clearForcedColor();
-        }
-    }
-    forceColor(color) {
-        this.forcedColor.set(color);
-    }
-    clearForcedColor() {
-        if (this.forcedColor() === FORCED_COLOR_UNSET) {
-            return;
-        }
-        this.forcedColor.set(FORCED_COLOR_UNSET);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ProvideColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ProvideColorDirective, isStandalone: true, selector: "[etProvideColor]", inputs: { color: { classPropertyName: "color", publicName: "etProvideColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "themeClass()" } }, providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ProvideColorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etProvideColor]',
-                    providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }],
-                    host: {
-                        '[class]': 'themeClass()',
-                    },
-                }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideColor", required: false }] }] } });
-
 class SurfaceInteractiveStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SurfaceInteractiveStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SurfaceInteractiveStylesComponent, isStandalone: true, selector: "et-surface-interactive-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{:where(.et-surface-interactive){--et-surface-interaction-rgb: var(--et-surface-interaction);--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}@media(hover:hover){: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"], encapsulation: i0.ViewEncapsulation.None }); }
@@ -10210,11 +10519,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.61';
+const CORE_VERSION = '5.0.0-next.62';
 
 /**
  * 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, 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_TITLE_MARKER, ValidateAtLeastOneRequired, 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, createOverlayRuntimeRef, 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, 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, isElement, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isHTMLOrSVGElement, isKnockoutMatch, isObject, isOnHigherOverlayLayer, isSafeLinkUrl, isSafeUrl, isStaleBuildError, markdownToHtml, matchesReducedMotion, maybeSignalValue, memoizeSignal, mountEasingTokens, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, normalizeUnsavedChangesSource, numberBreakpointTransform, onOverlayViewportInsetsChange, overlayViewportInsets, overlayViewportInsetsFor, ownsActiveElement, 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, 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, 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, injectQueryParamAll, injectQueryParamChanges, injectQueryParams, injectRenderer, 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, 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, reserveOverlayViewportSpace, resolveAppRootColorProvider, 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