@ethlete/core 5.0.0-next.2 → 5.0.0-next.20

package/fesm2022/ethlete-core.mjs

@@ -1,18 +1,42 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, linkedSignal, DOCUMENT, isDevMode, computed, afterNextRender, effect, Injector, runInInjectionContext, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, model, ViewContainerRef, input, booleanAttribute, output, numberAttribute, Pipe, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, timer, takeUntil, distinctUntilChanged, pairwise, take, Observable } from 'rxjs';
+import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, DOCUMENT, linkedSignal, isDevMode, computed, afterNextRender, effect, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, createComponent, model, ViewContainerRef, input, output, inputBinding, outputBinding, Pipe, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
+import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, defer, exhaustMap, share } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
-import { coerceElement } from '@angular/cdk/coercion';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { coerceElement } from '@angular/cdk/coercion';
+import { DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd, NavigationSkipped } from '@angular/router';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { autoUpdate, computePosition, offset, flip, size, shift, limitShift, arrow, hide } from '@floating-ui/dom';
 import { Title, Meta, DomSanitizer } from '@angular/platform-browser';
 
+const ANIMATION_DEBUG_STORAGE_KEY = 'et-overlay-debug';
+let cachedEnabled = null;
+/**
+ * Debug logging for overlay and animation lifecycle internals.
+ * Enable via `localStorage.setItem('et-overlay-debug', 'true')` and reload.
+ */
+const isAnimationDebugEnabled = () => {
+    if (cachedEnabled === null) {
+        try {
+            cachedEnabled = globalThis.localStorage?.getItem(ANIMATION_DEBUG_STORAGE_KEY) === 'true';
+        }
+        catch {
+            cachedEnabled = false;
+        }
+    }
+    return cachedEnabled;
+};
+const animationDebugLog = (scope, ...args) => {
+    if (!isAnimationDebugEnabled())
+        return;
+    const timestamp = (globalThis.performance?.now() ?? 0).toFixed(1);
+    console.log(`\x1B[36m[et-overlay-debug ${timestamp}ms | ${scope}]\x1B[m`, ...args);
+};
+
 const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
 class AnimatableDirective {
     constructor() {
@@ -31,7 +55,7 @@ class AnimatableDirective {
         this.isAnimating$ = this.totalActiveAnimationCount$.pipe(map((count) => count > 0));
         let didEmitStart = false;
         const el = this.elementRef.nativeElement;
-        merge(merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'start')), merge(fromEvent(el, 'animationend'), fromEvent(el, 'transitionend')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'end')), merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'cancel')))
+        merge(merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionrun')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'start')), merge(fromEvent(el, 'animationend'), fromEvent(el, 'transitionend')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'end')), merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel')).pipe(filter((e) => e.target === el && !e.pseudoElement), map(() => 'cancel')))
             .pipe(tap((eventType) => {
             switch (eventType) {
                 case 'start': {
@@ -40,6 +64,7 @@ class AnimatableDirective {
                     if (startingNewBatch) {
                         this.activeBatchTransitionId = this.pendingTransitionIds.shift();
                     }
+                    animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `start (count ${this.activeAnimationCount}, batch "${this.activeBatchTransitionId}", pending [${this.pendingTransitionIds.join(', ')}])`);
                     if (!didEmitStart) {
                         didEmitStart = true;
                         this.animationStartSubject$.next();
@@ -50,6 +75,7 @@ class AnimatableDirective {
                 case 'cancel': {
                     if (this.activeAnimationCount > 0) {
                         this.updateActiveAnimationCount(-1);
+                        animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `${eventType} (count ${this.activeAnimationCount}, batch "${this.activeBatchTransitionId}")`);
                         if (this.activeAnimationCount === 0 && didEmitStart) {
                             didEmitStart = false;
                             this.animationEndSubject$.next({
@@ -60,6 +86,7 @@ class AnimatableDirective {
                         }
                     }
                     else {
+                        animationDebugLog(`animatable ${el.tagName.toLowerCase()}`, `${eventType} ignored — count already 0 (start ${didEmitStart ? '' : 'not '}emitted)`);
                         console.warn(`${el.tagName} received animation end/cancel event but activeAnimationCount is already 0. Start was ${didEmitStart ? '' : 'not '}emitted.`);
                     }
                     break;
@@ -77,15 +104,15 @@ class AnimatableDirective {
         this.activeAnimationCount = clampedVal;
         this.hostActiveAnimationCount$.next(clampedVal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", providers: [
             {
                 provide: ANIMATABLE_TOKEN,
                 useExisting: AnimatableDirective,
             },
         ], exportAs: ["etAnimatable"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatable]',
@@ -623,7 +650,8 @@ const signalAnimatedNumber = (source, options = {}) => {
     const easing = options.easing ?? easeOut;
     const round = options.round ?? ((v) => Math.round(v));
     const initialValue = options.initialValue ?? 0;
-    const animatedValue = signal(initialValue, ...(ngDevMode ? [{ debugName: "animatedValue" }] : []));
+    const animatedValue = signal(initialValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animatedValue" }] : /* istanbul ignore next */ []));
     let rafId = null;
     let currentAnimatedValue = initialValue;
     const cancelAnimation = () => {
@@ -710,41 +738,82 @@ const easeOutBackStrong = (t) => {
     return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
 };
 
-const controlValueSignal = (control, options) => {
-    const getRawValueSafe = (ctrl) => {
-        try {
-            return isSignal(ctrl) ? (ctrl()?.getRawValue() ?? null) : (ctrl?.getRawValue() ?? null);
-        }
-        catch {
-            // Ignore errors. This can happen if the passed control is a required input and is not yet initialized.
-            return null;
-        }
-    };
-    const initialValue = getRawValueSafe(control);
-    const controlStream = isSignal(control)
-        ? toObservable(control)
-        : of(control);
-    const controlObs = controlStream.pipe(switchMap((ctrl) => {
-        if (!ctrl)
-            return of(null);
-        const vcsObs = options?.debounceTime
-            ? ctrl.valueChanges.pipe(debounceTime(options.debounceTime))
-            : ctrl.valueChanges;
-        return vcsObs.pipe(startWith(ctrl.getRawValue()), map(() => ctrl.getRawValue()));
-    }));
-    const obs = !options?.debounceFirst ? merge(of(initialValue), controlObs) : controlObs;
-    return toSignal(obs.pipe(distinctUntilChanged((a, b) => equal(a, b))), {
-        initialValue,
-    });
-};
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 /**
- * The first item in the pair is the previous value and the second item is the current value.
+ * Default viewport config based on Tailwind CSS.
+ * @see https://tailwindcss.com/docs/screens
  */
-const controlValueSignalWithPrevious = (control, options) => {
-    const data = linkedSignal({ ...(ngDevMode ? { debugName: "data" } : {}), source: controlValueSignal(control, options),
-        computation: (curr, prev) => [prev?.source ?? null, curr] });
-    return data.asReadonly();
+const DEFAULT_VIEWPORT_CONFIG = {
+    breakpoints: {
+        xs: [0, 639],
+        sm: [640, 767],
+        md: [768, 1023],
+        lg: [1024, 1279],
+        xl: [1280, 1535],
+        '2xl': [1536, Infinity],
+    },
 };
+const [provideViewportConfig, injectViewportConfig] = createStaticRootProvider(DEFAULT_VIEWPORT_CONFIG, {
+    name: 'Viewport Config',
+});
+const [provideBreakpointObserver, injectBreakpointObserver] = createRootProvider(() => {
+    const breakpointObserver = inject(BreakpointObserver);
+    const viewportConfig = injectViewportConfig();
+    const isMediaQueryMatched = (mediaQuery) => breakpointObserver.isMatched(mediaQuery);
+    const observeMediaQuery = (mediaQuery) => {
+        return toSignal(breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), startWith(isMediaQueryMatched(mediaQuery))), { requireSync: true });
+    };
+    const observeBreakpoint = (options) => observeMediaQuery(buildMediaQueryString(options));
+    const isBreakpointMatched = (options) => isMediaQueryMatched(buildMediaQueryString(options));
+    const getBreakpointSize = (type, option) => {
+        const index = option === 'min' ? 0 : 1;
+        const size = viewportConfig.breakpoints[type][index];
+        if (size === Infinity || size === 0) {
+            return size;
+        }
+        if (option === 'min') {
+            return size;
+        }
+        // Due to scaling, the actual size of the viewport may be a decimal number.
+        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
+        // and thus not matching any of the default breakpoints.
+        return size + 0.9;
+    };
+    const buildMediaQueryString = (options) => {
+        if (!options.min && !options.max) {
+            throw new Error('At least one of min or max must be defined');
+        }
+        const mediaQueryParts = [];
+        if (options.min) {
+            if (typeof options.min === 'number') {
+                mediaQueryParts.push(`(min-width: ${options.min}px)`);
+            }
+            else {
+                mediaQueryParts.push(`(min-width: ${getBreakpointSize(options.min, 'min')}px)`);
+            }
+        }
+        if (options.min && options.max) {
+            mediaQueryParts.push('and');
+        }
+        if (options.max) {
+            if (typeof options.max === 'number') {
+                mediaQueryParts.push(`(max-width: ${options.max}px)`);
+            }
+            else {
+                mediaQueryParts.push(`(max-width: ${getBreakpointSize(options.max, 'max')}px)`);
+            }
+        }
+        return mediaQueryParts.join(' ');
+    };
+    return {
+        observeBreakpoint,
+        isBreakpointMatched,
+        getBreakpointSize,
+        buildMediaQueryString,
+        observeMediaQuery,
+        isMediaQueryMatched,
+    };
+}, { name: 'Breakpoint Observer' });
 
 const isElementSignal = (el) => {
     if (!isSignal(el))
@@ -860,12 +929,14 @@ const firstElementSignal = (el) => computed(() => {
 });
 
 const signalIsRendered = () => {
-    const isRendered = signal(false, ...(ngDevMode ? [{ debugName: "isRendered" }] : []));
+    const isRendered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRendered" }] : /* istanbul ignore next */ []));
     afterNextRender(() => isRendered.set(true));
     return isRendered.asReadonly();
 };
 const createIsRenderedSignal = () => {
-    const value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    const value = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     nextFrame(() => {
         if (!value()) {
             console.error('Render signal was not set to true. This can cause unexpected behavior. Make sure to .bind() the render signal at the end of the constructor.');
@@ -877,7 +948,8 @@ const createIsRenderedSignal = () => {
     };
 };
 const createCanAnimateSignal = () => {
-    const value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    const value = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     nextFrame(() => {
         value.set(true);
     });
@@ -886,95 +958,542 @@ const createCanAnimateSignal = () => {
     };
 };
 
-const signalElementMutations = (el, options) => {
+const boundingClientRectToElementRect = (rect) => ({
+    bottom: rect.bottom,
+    height: rect.height,
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    width: rect.width,
+    x: rect.x,
+    y: rect.y,
+});
+const createElementDimensions = (el, rect) => {
+    if (!el) {
+        return {
+            rect: null,
+            client: null,
+            scroll: null,
+            offset: null,
+        };
+    }
+    const cachedNormalizedRect = rect ? boundingClientRectToElementRect(rect) : null;
+    const rectFn = () => cachedNormalizedRect ? cachedNormalizedRect : boundingClientRectToElementRect(el.getBoundingClientRect());
+    return {
+        rect: rectFn,
+        client: { width: el.clientWidth, height: el.clientHeight },
+        scroll: { width: el.scrollWidth, height: el.scrollHeight },
+        offset: { width: el.offsetWidth, height: el.offsetHeight },
+    };
+};
+const signalElementDimensions = (el) => {
     const destroyRef = inject(DestroyRef);
     const elements = buildElementSignal(el);
     const firstEl = firstElementSignal(elements);
     const zone = inject(NgZone);
     const isRendered = signalIsRendered();
-    const elementMutationsSignal = signal(null, ...(ngDevMode ? [{ debugName: "elementMutationsSignal" }] : []));
-    const observer = new MutationObserver((e) => {
+    const initialValue = () => createElementDimensions(firstEl().currentElement);
+    const elementDimensionsSignal = signal(initialValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elementDimensionsSignal" }] : /* istanbul ignore next */ []));
+    const observer = new ResizeObserver((e) => {
         if (!isRendered())
             return;
         const entry = e[0];
         if (entry) {
-            zone.run(() => elementMutationsSignal.set(entry));
+            const target = entry.target;
+            const newDimensions = createElementDimensions(target);
+            zone.run(() => elementDimensionsSignal.set(newDimensions));
         }
     });
     effect(() => {
         const els = firstEl();
-        elementMutationsSignal.set(null);
-        if (els.previousElement) {
-            observer.disconnect();
-        }
-        if (els.currentElement) {
-            observer.observe(els.currentElement, options);
-        }
+        untracked(() => {
+            elementDimensionsSignal.set(initialValue());
+            if (els.previousElement) {
+                observer.disconnect();
+            }
+            if (els.currentElement) {
+                const computedDisplay = getComputedStyle(els.currentElement).display;
+                const currentElIsAngularComponent = els.currentElement?.tagName.toLowerCase().includes('-');
+                if (computedDisplay === 'inline' && isDevMode() && currentElIsAngularComponent) {
+                    console.error(`Element <${els.currentElement?.tagName.toLowerCase()}> is an Angular component and has a display of 'inline'. Inline elements cannot be observed for dimensions. Please change it to 'block' or something else.`);
+                }
+                observer.observe(els.currentElement);
+            }
+        });
     });
     destroyRef.onDestroy(() => observer.disconnect());
-    return elementMutationsSignal.asReadonly();
+    return computed(() => elementDimensionsSignal(), {
+        equal: (a, b) => equal(a, b),
+    });
 };
-const signalHostElementMutations = (options) => signalElementMutations(inject(ElementRef), options);
-
-const signalElementChildren = (el) => {
-    const elements = buildElementSignal(el);
-    const firstEl = firstElementSignal(elements);
-    const isRendered = signalIsRendered();
-    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true, attributes: true });
-    return computed(() => {
-        if (!isRendered())
-            return [];
-        const els = firstEl();
-        // We are not interested what the mutation is, just that there is one.
-        // Changes to the DOM may affect the children of the element.
-        elementMutations();
-        if (!els.currentElement)
-            return [];
-        const children = [];
-        for (let index = 0; index < els.currentElement.children.length; index++) {
-            const element = els.currentElement.children[index];
-            if (element instanceof HTMLElement) {
-                children.push(element);
-            }
-        }
-        return children;
-    }, { equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]) });
+const signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
+const injectViewportSize = () => {
+    const document = inject(DOCUMENT$1);
+    const zone = inject(NgZone);
+    const destroyRef = inject(DestroyRef);
+    const getSize = () => {
+        const vv = document.defaultView?.visualViewport;
+        if (vv)
+            return { width: vv.width, height: vv.height };
+        const win = document.defaultView;
+        return { width: win?.innerWidth ?? 0, height: win?.innerHeight ?? 0 };
+    };
+    const size = signal(getSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    const onResize = () => zone.run(() => size.set(getSize()));
+    const vv = document.defaultView?.visualViewport;
+    if (vv) {
+        vv.addEventListener('resize', onResize);
+        destroyRef.onDestroy(() => vv.removeEventListener('resize', onResize));
+    }
+    else {
+        const win = document.defaultView;
+        win?.addEventListener('resize', onResize);
+        destroyRef.onDestroy(() => win?.removeEventListener('resize', onResize));
+    }
+    return size;
 };
 
-const buildSignalEffects = (el, config) => {
-    const elements = buildElementSignal(el);
-    const injector = inject(Injector);
-    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();
-            if (!tokens.length)
-                continue;
-            config.cleanupFn(previousEl, tokens);
+const previousSignalValue = (signal) => {
+    const obs = toObservable(signal).pipe(pairwise(), map(([prev]) => prev));
+    return toSignal(obs);
+};
+const syncSignal = (from, to, options) => {
+    let isFirstRun = options?.skipSyncRead ? false : true;
+    if (!options?.skipSyncRead) {
+        try {
+            // this might throw if the signal is not yet initialized (eg. a required signal input inside the constructor)
+            // in that case we just skip the initial sync
+            to.set(from());
         }
-        for (const currentEl of currentElements) {
-            if (previousElements.includes(currentEl))
-                continue;
-            for (const [tokens, condition] of Object.entries(config.tokenMap)) {
-                untracked(() => {
-                    const tokenArray = tokens.split(' ');
-                    if (!tokenArray.length)
-                        return;
-                    config.updateFn(currentEl, tokenArray, condition());
-                });
+        catch {
+            isFirstRun = false;
+            if (isDevMode()) {
+                console.warn('Failed to sync signals. The target signal is not yet initialized.', { from, to });
             }
         }
-    });
-    const effects = {};
-    const has = (tokens) => tokens in effects;
-    const push = (tokens, signal) => {
-        if (has(tokens))
-            return;
-        runInInjectionContext(injector, () => {
+    }
+    const ref = effect(() => {
+        const formVal = from();
+        if (options?.skipFirstRun && isFirstRun) {
+            isFirstRun = false;
+            return;
+        }
+        untracked(() => {
+            to.set(formVal);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    return ref;
+};
+const maybeSignalValue = (value) => {
+    if (isSignal(value)) {
+        return value();
+    }
+    return value;
+};
+/**
+ * A computed that will only be reactive until the source signal contains a truthy value.
+ * All subsequent changes inside the computation will be ignored.
+ */
+const computedTillTruthy = (source) => {
+    const value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const ref = effect(() => {
+        const val = source();
+        if (val) {
+            value.set(val);
+            ref.destroy();
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    return value.asReadonly();
+};
+/**
+ * A computed that will only be reactive until the source signal contains a falsy value.
+ * All subsequent changes inside the computation will be ignored.
+ */
+const computedTillFalsy = (source) => {
+    const value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const ref = effect(() => {
+        const val = source();
+        if (!val) {
+            value.set(val);
+            ref.destroy();
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    return value.asReadonly();
+};
+/**
+ * A writeable signal that will be set to the provided value once all inputs are set.
+ * During that time, the signal will be set to `null`.
+ */
+const deferredSignal = (valueFn) => {
+    const valueSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+    afterNextRender(() => {
+        valueSignal.set(valueFn());
+    });
+    return valueSignal;
+};
+const memoizeSignal = (factory) => {
+    const cache = new WeakMap();
+    return () => {
+        const envInjector = inject(EnvironmentInjector);
+        let cached = cache.get(envInjector);
+        if (!cached) {
+            cached = runInInjectionContext(envInjector, factory);
+            cache.set(envInjector, cached);
+        }
+        return cached;
+    };
+};
+
+/** Inject a signal containing a boolean value indicating if the viewport is xs */
+const injectIsXs = memoizeSignal(() => injectObserveBreakpoint({ max: 'xs' }));
+/** Inject a signal containing a boolean value indicating if the viewport is sm */
+const injectIsSm = memoizeSignal(() => injectObserveBreakpoint({ min: 'sm', max: 'sm' }));
+/** Inject a signal containing a boolean value indicating if the viewport is md */
+const injectIsMd = memoizeSignal(() => injectObserveBreakpoint({ min: 'md', max: 'md' }));
+/** Inject a signal containing a boolean value indicating if the viewport is lg */
+const injectIsLg = memoizeSignal(() => injectObserveBreakpoint({ min: 'lg', max: 'lg' }));
+/** Inject a signal containing a boolean value indicating if the viewport is xl */
+const injectIsXl = memoizeSignal(() => injectObserveBreakpoint({ min: 'xl', max: 'xl' }));
+/** Inject a signal containing a boolean value indicating if the viewport is 2xl */
+const injectIs2Xl = memoizeSignal(() => injectObserveBreakpoint({ min: '2xl' }));
+/**
+ * Inject a boolean value indicating if the viewport is matching the provided options.
+ * This value is not reactive. If you want to react to changes, use the {@link injectObserveBreakpoint} function instead.
+ */
+const injectBreakpointIsMatched = (options) => injectBreakpointObserver().isBreakpointMatched(options);
+/**
+ * Inject a boolean value indicating if the media query is matched.
+ * This value is not reactive. If you want to react to changes, use the {@link injectObserveMediaQuery} function instead.
+ */
+const injectMediaQueryIsMatched = (mediaQuery) => injectBreakpointObserver().isMediaQueryMatched(mediaQuery);
+/**
+ * Inject a signal containing a boolean value indicating if the viewport is matching the provided options.
+ */
+const injectObserveBreakpoint = (options) => injectBreakpointObserver().observeBreakpoint(options);
+/**
+ * Inject a signal containing a boolean value indicating if the media query is matched.
+ */
+const injectObserveMediaQuery = (mediaQuery) => injectBreakpointObserver().observeMediaQuery(mediaQuery);
+/** Inject a signal containing the current breakpoint. */
+const injectCurrentBreakpoint = memoizeSignal(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const first = BREAKPOINT_ORDER[0];
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const last = BREAKPOINT_ORDER[BREAKPOINT_ORDER.length - 1];
+    const highToLow = [...BREAKPOINT_ORDER].reverse();
+    const signals = highToLow.map((bp) => injectObserveBreakpoint(bp === first ? { max: bp } : bp === last ? { min: bp } : { min: bp, max: bp }));
+    return computed(() => {
+        for (let i = 0; i < highToLow.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            if (signals[i]())
+                return highToLow[i];
+        }
+        return first;
+    });
+});
+/** Inject a signal that indicates if the user is using a portrait display */
+const injectIsPortrait = memoizeSignal(() => injectObserveMediaQuery('(orientation: portrait)'));
+/** Inject a signal that indicates if the user is using a landscape display */
+const injectIsLandscape = memoizeSignal(() => injectObserveMediaQuery('(orientation: landscape)'));
+/** Inject a signal containing the current display orientation */
+const injectDisplayOrientation = memoizeSignal(() => {
+    const isPortrait = injectIsPortrait();
+    return computed(() => {
+        if (isPortrait())
+            return 'portrait';
+        return 'landscape';
+    });
+});
+/** Inject a signal that indicates if the device has a touch input */
+const injectHasTouchInput = memoizeSignal(() => injectObserveMediaQuery('(pointer: coarse)'));
+/** Inject a signal that indicates if the device has a fine input (mouse or stylus)  */
+const injectHasPrecisionInput = memoizeSignal(() => injectObserveMediaQuery('(pointer: fine)'));
+/** Inject a signal containing the current device input type */
+const injectDeviceInputType = memoizeSignal(() => {
+    const isTouch = injectHasTouchInput();
+    return computed(() => {
+        if (isTouch())
+            return 'touch';
+        return 'mouse';
+    });
+});
+/** Inject a signal containing a boolean value indicating if the user can hover (eg. using a mouse) */
+const injectCanHover = memoizeSignal(() => injectObserveMediaQuery('(hover: hover)'));
+/** Inject a signal containing the viewport dimensions */
+const injectViewportDimensions = memoizeSignal(() => signalElementDimensions(createDocumentElementSignal()));
+/** Inject a signal containing the scrollbar dimensions. Dimensions will be 0 if scrollbars overlap the page contents (like on mobile). */
+const injectScrollbarDimensions = memoizeSignal(() => {
+    const document = inject(DOCUMENT);
+    const renderer = injectRenderer();
+    const scrollbarRuler = renderer.createElement('div');
+    scrollbarRuler.style.width = '100px';
+    scrollbarRuler.style.height = '100px';
+    scrollbarRuler.style.overflow = 'scroll';
+    scrollbarRuler.style.position = 'absolute';
+    scrollbarRuler.style.top = '-9999px';
+    scrollbarRuler.style.scrollbarWidth = getComputedStyle(document.documentElement).scrollbarWidth;
+    renderer.appendChild(document.body, scrollbarRuler);
+    const scrollContainerDimensions = signalElementDimensions(scrollbarRuler);
+    return computed(() => {
+        const client = scrollContainerDimensions().client;
+        if (!client)
+            return null;
+        return {
+            width: Math.max(0, 100 - client.width),
+            height: Math.max(0, 100 - client.height),
+        };
+    });
+});
+
+const BREAKPOINT_KEY_SET = new Set(BREAKPOINT_ORDER);
+const isBreakpointMap = (value) => {
+    if (value === null || typeof value !== 'object' || Array.isArray(value))
+        return false;
+    const keys = Object.keys(value);
+    return keys.length > 0 && keys.every((k) => BREAKPOINT_KEY_SET.has(k));
+};
+const resolveFromMap = (map, bp, defaultValue) => {
+    const idx = BREAKPOINT_ORDER.indexOf(bp);
+    for (let i = idx; i >= 0; i--) {
+        const v = map[BREAKPOINT_ORDER[i]];
+        if (v !== undefined)
+            return v;
+    }
+    return defaultValue;
+};
+const breakpointTransformBase = (coerce) => {
+    const currentBp = injectCurrentBreakpoint();
+    const injector = inject(Injector);
+    const raw = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "raw" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    let capturedDefault = undefined;
+    let initialized = false;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let cachedSig = null;
+    const transformFn = (value) => {
+        const coerced = isBreakpointMap(value) ? value : coerce(value);
+        if (!initialized) {
+            capturedDefault = coerced;
+            initialized = true;
+        }
+        raw.set(coerced);
+        return isBreakpointMap(coerced)
+            ? resolveFromMap(coerced, currentBp(), capturedDefault)
+            : coerced;
+    };
+    effect(() => {
+        const bp = currentBp();
+        const r = raw();
+        if (!cachedSig) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const instance = injector.get(BREAKPOINT_INSTANCE_TOKEN);
+            for (const key of Object.keys(instance)) {
+                const val = instance[key];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (val && typeof val === 'function' && val[SIGNAL]?.transformFn === transformFn) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    cachedSig = val;
+                    break;
+                }
+            }
+        }
+        if (!cachedSig || r === undefined || !isBreakpointMap(r))
+            return;
+        const resolved = resolveFromMap(r, bp, capturedDefault);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        untracked(() => setInputSignal(cachedSig, resolved));
+    });
+    return transformFn;
+};
+/**
+ * Transform factory for boolean inputs.
+ * Coerces plain values with `booleanAttribute`; resolves {@link BreakpointMap} mobile-first.
+ *
+ * @example
+ * snap = input(false, { transform: boolBreakpointTransform() });
+ * // Template: `snap` | `[snap]="true"` | `[snap]="{ xs: false, md: true }"`
+ */
+const boolBreakpointTransform = () => breakpointTransformBase(booleanAttribute);
+/**
+ * Transform factory for number inputs.
+ * Coerces plain values with `numberAttribute`; resolves {@link BreakpointMap} mobile-first.
+ *
+ * @example
+ * scrollMargin = input(0, { transform: numberBreakpointTransform() });
+ * // Template: `[scrollMargin]="16"` | `[scrollMargin]="{ xs: 0, md: 16 }"`
+ */
+const numberBreakpointTransform = () => breakpointTransformBase((v) => numberAttribute(v));
+/**
+ * Transform factory for any typed input (string unions, arrays, objects, etc.).
+ * Passes plain values through as-is; resolves {@link BreakpointMap} mobile-first.
+ * A value is treated as a {@link BreakpointMap} only when all its keys are valid breakpoint names.
+ *
+ * @example
+ * itemSize = input('auto', { transform: typedBreakpointTransform<ScrollableItemSize>() });
+ * tags = input([], { transform: typedBreakpointTransform<string[]>() });
+ * // Template: `[itemSize]="'third'"` | `[itemSize]="{ xs: 'full', md: 'third' }"`
+ */
+const typedBreakpointTransform = () => breakpointTransformBase((v) => v);
+const injectBreakpointInput = (inputSignal, defaultValue) => {
+    const currentBreakpoint = injectCurrentBreakpoint();
+    return computed(() => {
+        const value = inputSignal();
+        if (!isBreakpointMap(value))
+            return value;
+        return resolveFromMap(value, currentBreakpoint(), defaultValue);
+    });
+};
+const booleanBreakpointAttribute = (value) => {
+    if (isBreakpointMap(value))
+        return value;
+    return booleanAttribute(value);
+};
+const numberBreakpointAttribute = (value) => {
+    if (isBreakpointMap(value))
+        return value;
+    return numberAttribute(value);
+};
+const BREAKPOINT_INSTANCE_TOKEN = new InjectionToken('BREAKPOINT_INSTANCE_TOKEN');
+const provideBreakpointInstance = (componentClass) => ({
+    provide: BREAKPOINT_INSTANCE_TOKEN,
+    useExisting: componentClass,
+});
+
+const controlValueSignal = (control, options) => {
+    const getRawValueSafe = (ctrl) => {
+        try {
+            return isSignal(ctrl) ? (ctrl()?.getRawValue() ?? null) : (ctrl?.getRawValue() ?? null);
+        }
+        catch {
+            // Ignore errors. This can happen if the passed control is a required input and is not yet initialized.
+            return null;
+        }
+    };
+    const initialValue = getRawValueSafe(control);
+    const controlStream = isSignal(control)
+        ? toObservable(control)
+        : of(control);
+    const controlObs = controlStream.pipe(switchMap((ctrl) => {
+        if (!ctrl)
+            return of(null);
+        const vcsObs = options?.debounceTime
+            ? ctrl.valueChanges.pipe(debounceTime(options.debounceTime))
+            : ctrl.valueChanges;
+        return vcsObs.pipe(startWith(ctrl.getRawValue()), map(() => ctrl.getRawValue()));
+    }));
+    const obs = !options?.debounceFirst ? merge(of(initialValue), controlObs) : controlObs;
+    return toSignal(obs.pipe(distinctUntilChanged((a, b) => equal(a, b))), {
+        initialValue,
+    });
+};
+/**
+ * The first item in the pair is the previous value and the second item is the current value.
+ */
+const controlValueSignalWithPrevious = (control, options) => {
+    const data = linkedSignal({ ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), source: controlValueSignal(control, options),
+        computation: (curr, prev) => [prev?.source ?? null, curr] });
+    return data.asReadonly();
+};
+
+const signalElementMutations = (el, options) => {
+    const destroyRef = inject(DestroyRef);
+    const elements = buildElementSignal(el);
+    const firstEl = firstElementSignal(elements);
+    const zone = inject(NgZone);
+    const isRendered = signalIsRendered();
+    const elementMutationsSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elementMutationsSignal" }] : /* istanbul ignore next */ []));
+    const observer = new MutationObserver((e) => {
+        if (!isRendered())
+            return;
+        const entry = e[0];
+        if (entry) {
+            zone.run(() => elementMutationsSignal.set(entry));
+        }
+    });
+    effect(() => {
+        const els = firstEl();
+        elementMutationsSignal.set(null);
+        if (els.previousElement) {
+            observer.disconnect();
+        }
+        if (els.currentElement) {
+            observer.observe(els.currentElement, options);
+        }
+    });
+    destroyRef.onDestroy(() => observer.disconnect());
+    return elementMutationsSignal.asReadonly();
+};
+const signalHostElementMutations = (options) => signalElementMutations(inject(ElementRef), options);
+
+const signalElementChildren = (el) => {
+    const elements = buildElementSignal(el);
+    const firstEl = firstElementSignal(elements);
+    const isRendered = signalIsRendered();
+    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true, attributes: true });
+    return computed(() => {
+        if (!isRendered())
+            return [];
+        const els = firstEl();
+        // We are not interested what the mutation is, just that there is one.
+        // Changes to the DOM may affect the children of the element.
+        elementMutations();
+        if (!els.currentElement)
+            return [];
+        const children = [];
+        for (let index = 0; index < els.currentElement.children.length; index++) {
+            const element = els.currentElement.children[index];
+            if (element instanceof HTMLElement) {
+                children.push(element);
+            }
+        }
+        return children;
+    }, { equal: (a, b) => a.length === b.length && a.every((v, i) => v === b[i]) });
+};
+
+const buildSignalEffects = (el, config) => {
+    const elements = buildElementSignal(el);
+    const injector = inject(Injector);
+    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();
+            if (!tokens.length)
+                continue;
+            config.cleanupFn(previousEl, tokens);
+        }
+        for (const currentEl of currentElements) {
+            if (previousElements.includes(currentEl))
+                continue;
+            for (const [tokens, condition] of Object.entries(config.tokenMap)) {
+                untracked(() => {
+                    const tokenArray = tokens.split(' ');
+                    if (!tokenArray.length)
+                        return;
+                    config.updateFn(currentEl, tokenArray, condition());
+                });
+            }
+        }
+    });
+    const effects = {};
+    const has = (tokens) => tokens in effects;
+    const push = (tokens, signal) => {
+        if (has(tokens))
+            return;
+        runInInjectionContext(injector, () => {
             effects[tokens] = effect(() => {
                 const { currentElements } = untracked(() => elements());
                 const value = signal();
@@ -1075,75 +1594,293 @@ const signalStyles = (el, styleMap) => {
 };
 const signalHostStyles = (styleMap) => signalStyles(inject(ElementRef), styleMap);
 
-const boundingClientRectToElementRect = (rect) => ({
-    bottom: rect.bottom,
-    height: rect.height,
-    left: rect.left,
-    right: rect.right,
-    top: rect.top,
-    width: rect.width,
-    x: rect.x,
-    y: rect.y,
+const elementCanScroll = (element, direction) => {
+    const el = element || document.documentElement;
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = el;
+    if (direction === 'x') {
+        return scrollWidth > clientWidth;
+    }
+    else if (direction === 'y') {
+        return scrollHeight > clientHeight;
+    }
+    return scrollHeight > clientHeight || scrollWidth > clientWidth;
+};
+const createViewportRect = () => ({
+    left: 0,
+    top: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
 });
-const createElementDimensions = (el, rect) => {
-    if (!el) {
+const isElementVisible = (options) => {
+    const { container, element } = options;
+    if (!element) {
+        return null;
+    }
+    const elementRect = options.elementRect || element.getBoundingClientRect();
+    const containerRect = container ? options.containerRect || container.getBoundingClientRect() : createViewportRect();
+    const canScroll = elementCanScroll(container);
+    if (!canScroll) {
         return {
-            rect: null,
-            client: null,
-            scroll: null,
-            offset: null,
+            inline: true,
+            block: true,
+            blockIntersection: 1,
+            inlineIntersection: 1,
+            intersectionRatio: 1,
+            isIntersecting: true,
+            element,
+            containerRect,
+            elementRect,
         };
     }
-    const cachedNormalizedRect = rect ? boundingClientRectToElementRect(rect) : null;
-    const rectFn = () => cachedNormalizedRect ? cachedNormalizedRect : boundingClientRectToElementRect(el.getBoundingClientRect());
+    const elLeft = elementRect.left;
+    const elTop = elementRect.top;
+    const elWidth = elementRect.width || 1;
+    const elHeight = elementRect.height || 1;
+    const elRight = elLeft + elWidth;
+    const elBottom = elTop + elHeight;
+    const conLeft = containerRect.left;
+    const conTop = containerRect.top;
+    const conRight = conLeft + containerRect.width;
+    const conBottom = conTop + containerRect.height;
+    const isElementInlineVisible = elLeft >= conLeft && elRight <= conRight;
+    const isElementBlockVisible = elTop >= conTop && elBottom <= conBottom;
+    const inlineIntersection = Math.min(elRight, conRight) - Math.max(elLeft, conLeft);
+    const blockIntersection = Math.min(elBottom, conBottom) - Math.max(elTop, conTop);
+    const inlineIntersectionPercentage = clamp(inlineIntersection / elWidth, 0, 1);
+    const blockIntersectionPercentage = clamp(blockIntersection / elHeight, 0, 1);
     return {
-        rect: rectFn,
-        client: { width: el.clientWidth, height: el.clientHeight },
-        scroll: { width: el.scrollWidth, height: el.scrollHeight },
-        offset: { width: el.offsetWidth, height: el.offsetHeight },
+        inline: isElementInlineVisible,
+        block: isElementBlockVisible,
+        inlineIntersection: inlineIntersectionPercentage,
+        blockIntersection: blockIntersectionPercentage,
+        isIntersecting: isElementInlineVisible && isElementBlockVisible,
+        element,
+        containerRect,
+        elementRect,
+        // Round the intersection ratio to the nearest 0.01 to avoid floating point errors and system scaling issues.
+        intersectionRatio: Math.round(Math.min(inlineIntersectionPercentage, blockIntersectionPercentage) * 100) / 100,
     };
 };
-const signalElementDimensions = (el) => {
-    const destroyRef = inject(DestroyRef);
-    const elements = buildElementSignal(el);
-    const firstEl = firstElementSignal(elements);
-    const zone = inject(NgZone);
-    const isRendered = signalIsRendered();
-    const initialValue = () => createElementDimensions(firstEl().currentElement);
-    const elementDimensionsSignal = signal(initialValue(), ...(ngDevMode ? [{ debugName: "elementDimensionsSignal" }] : []));
-    const observer = new ResizeObserver((e) => {
-        if (!isRendered())
-            return;
-        const entry = e[0];
-        if (entry) {
-            const target = entry.target;
-            const newDimensions = createElementDimensions(target);
-            zone.run(() => elementDimensionsSignal.set(newDimensions));
+const getElementScrollCoordinates = (options) => {
+    const { container, element, direction, behavior = 'smooth', origin = 'nearest', scrollBlockMargin = 0, scrollInlineMargin = 0, } = options;
+    if (!element || !container || !elementCanScroll(container)) {
+        return {
+            behavior,
+            left: undefined,
+            top: undefined,
+        };
+    }
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const { scrollLeft, scrollTop } = container;
+    const elWidth = elementRect.width;
+    const elHeight = elementRect.height;
+    const elLeft = elementRect.left;
+    const elTop = elementRect.top;
+    const elRight = elementRect.right;
+    const elBottom = elementRect.bottom;
+    const conWidth = containerRect.width;
+    const conHeight = containerRect.height;
+    const conLeft = containerRect.left;
+    const conTop = containerRect.top;
+    const conRight = containerRect.right;
+    const conBottom = containerRect.bottom;
+    const shouldScrollLeft = direction === 'inline' || direction === 'both' || !direction;
+    const shouldScrollTop = direction === 'block' || direction === 'both' || !direction;
+    let scrollLeftTo = scrollLeft;
+    let scrollTopTo = scrollTop;
+    const relativeTop = elTop - conTop;
+    const relativeLeft = elLeft - conLeft;
+    const calculateScrollToStart = () => {
+        scrollLeftTo = scrollLeft + relativeLeft - scrollInlineMargin;
+        scrollTopTo = scrollTop + relativeTop - scrollBlockMargin;
+    };
+    const calculateScrollToEnd = () => {
+        scrollLeftTo = scrollLeft + relativeLeft - conWidth + elWidth + scrollInlineMargin;
+        scrollTopTo = scrollTop + relativeTop - conHeight + elHeight + scrollBlockMargin;
+    };
+    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();
+        }
+    };
+    switch (origin) {
+        case 'start':
+            calculateScrollToStart();
+            break;
+        case 'end':
+            calculateScrollToEnd();
+            break;
+        case 'center':
+            calculateScrollToCenter();
+            break;
+        case 'nearest':
+            calculateScrollToNearest();
+            break;
+    }
+    return {
+        behavior,
+        left: shouldScrollLeft ? scrollLeftTo : undefined,
+        top: shouldScrollTop ? scrollTopTo : undefined,
+    };
+};
+const scrollToElement = (options) => {
+    options.container?.scrollTo(getElementScrollCoordinates(options));
+};
+
+const MIN_SNAP_DELTA_PX = 1;
+const getScrollSnapTarget = (items, container, direction, origin, margin = 0) => {
+    if (!items.length)
+        return null;
+    const containerRect = container.getBoundingClientRect();
+    const containerSize = direction === 'horizontal' ? containerRect.width : containerRect.height;
+    let bestElement = null;
+    let bestOrigin = 'start';
+    let bestAbsDelta = Infinity;
+    const updateBest = (element, o, delta) => {
+        const abs = Math.abs(delta);
+        if (abs < bestAbsDelta) {
+            bestAbsDelta = abs;
+            bestElement = element;
+            bestOrigin = o;
         }
-    });
-    effect(() => {
-        const els = firstEl();
-        untracked(() => {
-            elementDimensionsSignal.set(initialValue());
-            if (els.previousElement) {
-                observer.disconnect();
+    };
+    for (const item of items) {
+        const itemRect = item.getBoundingClientRect();
+        const itemSize = direction === 'horizontal' ? itemRect.width : itemRect.height;
+        const relativeStart = direction === 'horizontal' ? itemRect.left - containerRect.left : itemRect.top - containerRect.top;
+        const relativeEnd = relativeStart + itemSize;
+        if (itemSize > containerSize) {
+            const isStartEdgeVisible = relativeStart >= 0;
+            const isEndEdgeVisible = relativeEnd <= containerSize;
+            if (!isStartEdgeVisible && !isEndEdgeVisible)
+                continue;
+            if (isStartEdgeVisible) {
+                updateBest(item, 'start', relativeStart - margin);
             }
-            if (els.currentElement) {
-                const computedDisplay = getComputedStyle(els.currentElement).display;
-                const currentElIsAngularComponent = els.currentElement?.tagName.toLowerCase().includes('-');
-                if (computedDisplay === 'inline' && isDevMode() && currentElIsAngularComponent) {
-                    console.error(`Element <${els.currentElement?.tagName.toLowerCase()}> is an Angular component and has a display of 'inline'. Inline elements cannot be observed for dimensions. Please change it to 'block' or something else.`);
+            else {
+                updateBest(item, 'end', relativeEnd - containerSize + margin);
+            }
+            continue;
+        }
+        const computeDelta = (o) => {
+            switch (o) {
+                case 'start':
+                    return relativeStart - margin;
+                case 'end':
+                    return relativeEnd - containerSize + margin;
+                case 'center':
+                    return relativeStart + itemSize / 2 - containerSize / 2;
+            }
+        };
+        if (origin === 'auto') {
+            for (const o of ['start', 'center', 'end']) {
+                updateBest(item, o, computeDelta(o));
+            }
+        }
+        else {
+            updateBest(item, origin, computeDelta(origin));
+        }
+    }
+    if (!bestElement || bestAbsDelta < MIN_SNAP_DELTA_PX)
+        return null;
+    return { element: bestElement, origin: bestOrigin };
+};
+const getScrollContainerTarget = (entries, direction) => {
+    const firstVisible = entries.find((i) => i.intersectionRatio > 0);
+    const lastVisible = [...entries].reverse().find((i) => i.intersectionRatio > 0);
+    const relevantEntry = direction === 'start' ? firstVisible : lastVisible;
+    if (!relevantEntry)
+        return null;
+    const relevantIndex = entries.indexOf(relevantEntry);
+    const nextIndex = relevantEntry.intersectionRatio !== 1
+        ? relevantIndex
+        : direction === 'start'
+            ? relevantIndex - 1
+            : relevantIndex + 1;
+    const element = entries[nextIndex]?.target ?? relevantEntry.target;
+    return { element, origin: direction === 'end' ? 'start' : 'end' };
+};
+const getScrollItemTarget = (entries, container, direction, scrollOrigin, axisDirection) => {
+    const firstVisible = entries.find((i) => i.intersectionRatio > 0);
+    const lastVisible = [...entries].reverse().find((i) => i.intersectionRatio > 0);
+    if (!firstVisible || !lastVisible)
+        return null;
+    const firstIndex = entries.indexOf(firstVisible);
+    const lastIndex = entries.indexOf(lastVisible);
+    const containerRect = container.getBoundingClientRect();
+    // Only a single item is visible — it must be oversized (wider/taller than the container).
+    if (firstVisible === lastVisible) {
+        const itemRect = firstVisible.target.getBoundingClientRect();
+        const isStartEdgeVisible = axisDirection === 'horizontal'
+            ? Math.round(itemRect.left) >= Math.round(containerRect.left)
+            : Math.round(itemRect.top) >= Math.round(containerRect.top);
+        const isEndEdgeVisible = axisDirection === 'horizontal'
+            ? Math.round(itemRect.right) <= Math.round(containerRect.right)
+            : Math.round(itemRect.bottom) <= Math.round(containerRect.bottom);
+        if (!isStartEdgeVisible || !isEndEdgeVisible) {
+            if (direction === 'start') {
+                if (isStartEdgeVisible) {
+                    const prevIndex = firstIndex - 1;
+                    const element = entries[prevIndex]?.target;
+                    if (!element)
+                        return null;
+                    return { element, index: prevIndex, origin: 'end' };
                 }
-                observer.observe(els.currentElement);
+                return { element: firstVisible.target, index: firstIndex, origin: 'start' };
             }
-        });
-    });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return computed(() => elementDimensionsSignal(), {
-        equal: (a, b) => equal(a, b),
-    });
+            else {
+                if (isEndEdgeVisible) {
+                    const nextIndex = lastIndex + 1;
+                    const element = entries[nextIndex]?.target;
+                    if (!element)
+                        return null;
+                    return { element, index: nextIndex, origin: 'start' };
+                }
+                return { element: lastVisible.target, index: lastIndex, origin: 'end' };
+            }
+        }
+    }
+    else if (scrollOrigin === 'center') {
+        const entry = direction === 'start' ? firstVisible : lastVisible;
+        const index = direction === 'start' ? firstIndex : lastIndex;
+        return { element: entry.target, index, origin: 'center' };
+    }
+    const entry = direction === 'start' ? firstVisible : lastVisible;
+    const entryIndex = direction === 'start' ? firstIndex : lastIndex;
+    if (Math.round(entry.intersectionRatio) === 1) {
+        if (direction === 'start' && entryIndex === 0)
+            return null;
+        if (direction === 'end' && entryIndex === entries.length - 1)
+            return null;
+        const nextIndex = direction === 'start' ? entryIndex - 1 : entryIndex + 1;
+        const element = entries[nextIndex]?.target;
+        if (!element)
+            return null;
+        return { element, index: nextIndex, origin: direction };
+    }
+    return { element: entry.target, index: entryIndex, origin: direction };
 };
-const signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
 
 const createPositionObject = (entry) => {
     const boundingRect = entry.boundingClientRect;
@@ -1175,8 +1912,10 @@ const signalElementIntersection = (el, options) => {
     const zone = inject(NgZone);
     const isRendered = signalIsRendered();
     const isEnabled = options?.enabled ?? signal(true);
-    const elementIntersectionSignal = signal([], ...(ngDevMode ? [{ debugName: "elementIntersectionSignal" }] : []));
-    const observer = signal(null, ...(ngDevMode ? [{ debugName: "observer" }] : []));
+    const elementIntersectionSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elementIntersectionSignal" }] : /* istanbul ignore next */ []));
+    const observer = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
     const currentlyObservedElements = new Set();
     const updateIntersections = (entries) => {
         let currentValues = [...elementIntersectionSignal()];
@@ -1292,7 +2031,8 @@ const signalElementLastScrollDirection = (el) => {
     const elements = buildElementSignal(el);
     const element = firstElementSignal(elements);
     const destroyRef = inject(DestroyRef);
-    const lastScrollDirection = signal(null, ...(ngDevMode ? [{ debugName: "lastScrollDirection" }] : []));
+    const lastScrollDirection = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastScrollDirection" }] : /* istanbul ignore next */ []));
     let lastScrollTop = 0;
     let lastScrollLeft = 0;
     toObservable(element)
@@ -1353,7 +2093,8 @@ const signalElementScrollState = (el, options) => {
                     element.scrollTop = scrollPosition.top;
                 ref.destroy();
             }
-        }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
     }
     const notScrollable = (dimensions) => ({
         canScroll: false,
@@ -1382,203 +2123,6 @@ const signalElementScrollState = (el, options) => {
 };
 const signalHostElementScrollState = () => signalElementScrollState(inject(ElementRef));
 
-const previousSignalValue = (signal) => {
-    const obs = toObservable(signal).pipe(pairwise(), map(([prev]) => prev));
-    return toSignal(obs);
-};
-const syncSignal = (from, to, options) => {
-    let isFirstRun = options?.skipSyncRead ? false : true;
-    if (!options?.skipSyncRead) {
-        try {
-            // this might throw if the signal is not yet initialized (eg. a required signal input inside the constructor)
-            // in that case we just skip the initial sync
-            to.set(from());
-        }
-        catch {
-            isFirstRun = false;
-            if (isDevMode()) {
-                console.warn('Failed to sync signals. The target signal is not yet initialized.', { from, to });
-            }
-        }
-    }
-    const ref = effect(() => {
-        const formVal = from();
-        if (options?.skipFirstRun && isFirstRun) {
-            isFirstRun = false;
-            return;
-        }
-        untracked(() => {
-            to.set(formVal);
-        });
-    }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
-    return ref;
-};
-const maybeSignalValue = (value) => {
-    if (isSignal(value)) {
-        return value();
-    }
-    return value;
-};
-/**
- * A computed that will only be reactive until the source signal contains a truthy value.
- * All subsequent changes inside the computation will be ignored.
- */
-const computedTillTruthy = (source) => {
-    const value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    const ref = effect(() => {
-        const val = source();
-        if (val) {
-            value.set(val);
-            ref.destroy();
-        }
-    }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
-    return value.asReadonly();
-};
-/**
- * A computed that will only be reactive until the source signal contains a falsy value.
- * All subsequent changes inside the computation will be ignored.
- */
-const computedTillFalsy = (source) => {
-    const value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    const ref = effect(() => {
-        const val = source();
-        if (!val) {
-            value.set(val);
-            ref.destroy();
-        }
-    }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
-    return value.asReadonly();
-};
-/**
- * A writeable signal that will be set to the provided value once all inputs are set.
- * During that time, the signal will be set to `null`.
- */
-const deferredSignal = (valueFn) => {
-    const valueSignal = signal(null, ...(ngDevMode ? [{ debugName: "valueSignal" }] : []));
-    afterNextRender(() => {
-        valueSignal.set(valueFn());
-    });
-    return valueSignal;
-};
-const memoizeSignal = (factory) => {
-    let cached = null;
-    return () => {
-        if (!cached)
-            cached = factory();
-        return cached;
-    };
-};
-
-/** Inject a signal containing a boolean value indicating if the viewport is xs */
-const injectIsXs = memoizeSignal(() => injectObserveBreakpoint({ max: 'xs' }));
-/** Inject a signal containing a boolean value indicating if the viewport is sm */
-const injectIsSm = memoizeSignal(() => injectObserveBreakpoint({ min: 'sm', max: 'sm' }));
-/** Inject a signal containing a boolean value indicating if the viewport is md */
-const injectIsMd = memoizeSignal(() => injectObserveBreakpoint({ min: 'md', max: 'md' }));
-/** Inject a signal containing a boolean value indicating if the viewport is lg */
-const injectIsLg = memoizeSignal(() => injectObserveBreakpoint({ min: 'lg', max: 'lg' }));
-/** Inject a signal containing a boolean value indicating if the viewport is xl */
-const injectIsXl = memoizeSignal(() => injectObserveBreakpoint({ min: 'xl', max: 'xl' }));
-/** Inject a signal containing a boolean value indicating if the viewport is 2xl */
-const injectIs2Xl = memoizeSignal(() => injectObserveBreakpoint({ min: '2xl' }));
-/**
- * Inject a boolean value indicating if the viewport is matching the provided options.
- * This value is not reactive. If you want to react to changes, use the {@link injectObserveBreakpoint} function instead.
- */
-const injectBreakpointIsMatched = (options) => injectBreakpointObserver().isBreakpointMatched(options);
-/**
- * Inject a boolean value indicating if the media query is matched.
- * This value is not reactive. If you want to react to changes, use the {@link injectObserveMediaQuery} function instead.
- */
-const injectMediaQueryIsMatched = (mediaQuery) => injectBreakpointObserver().isMediaQueryMatched(mediaQuery);
-/**
- * Inject a signal containing a boolean value indicating if the viewport is matching the provided options.
- */
-const injectObserveBreakpoint = (options) => injectBreakpointObserver().observeBreakpoint(options);
-/**
- * Inject a signal containing a boolean value indicating if the media query is matched.
- */
-const injectObserveMediaQuery = (mediaQuery) => injectBreakpointObserver().observeMediaQuery(mediaQuery);
-/** Inject a signal containing the current breakpoint. */
-const injectCurrentBreakpoint = memoizeSignal(() => {
-    const isXs = injectIsXs();
-    const isSm = injectIsSm();
-    const isMd = injectIsMd();
-    const isLg = injectIsLg();
-    const isXl = injectIsXl();
-    const is2Xl = injectIs2Xl();
-    return computed(() => {
-        switch (true) {
-            case is2Xl():
-                return '2xl';
-            case isXl():
-                return 'xl';
-            case isLg():
-                return 'lg';
-            case isMd():
-                return 'md';
-            case isSm():
-                return 'sm';
-            case isXs():
-            default:
-                return 'xs';
-        }
-    });
-});
-/** Inject a signal that indicates if the user is using a portrait display */
-const injectIsPortrait = memoizeSignal(() => injectObserveMediaQuery('(orientation: portrait)'));
-/** Inject a signal that indicates if the user is using a landscape display */
-const injectIsLandscape = memoizeSignal(() => injectObserveMediaQuery('(orientation: landscape)'));
-/** Inject a signal containing the current display orientation */
-const injectDisplayOrientation = memoizeSignal(() => {
-    const isPortrait = injectIsPortrait();
-    return computed(() => {
-        if (isPortrait())
-            return 'portrait';
-        return 'landscape';
-    });
-});
-/** Inject a signal that indicates if the device has a touch input */
-const injectHasTouchInput = memoizeSignal(() => injectObserveMediaQuery('(pointer: coarse)'));
-/** Inject a signal that indicates if the device has a fine input (mouse or stylus)  */
-const injectHasPrecisionInput = memoizeSignal(() => injectObserveMediaQuery('(pointer: fine)'));
-/** Inject a signal containing the current device input type */
-const injectDeviceInputType = memoizeSignal(() => {
-    const isTouch = injectHasTouchInput();
-    return computed(() => {
-        if (isTouch())
-            return 'touch';
-        return 'mouse';
-    });
-});
-/** Inject a signal containing a boolean value indicating if the user can hover (eg. using a mouse) */
-const injectCanHover = memoizeSignal(() => injectObserveMediaQuery('(hover: hover)'));
-/** Inject a signal containing the viewport dimensions */
-const injectViewportDimensions = memoizeSignal(() => signalElementDimensions(createDocumentElementSignal()));
-/** Inject a signal containing the scrollbar dimensions. Dimensions will be 0 if scrollbars overlap the page contents (like on mobile). */
-const injectScrollbarDimensions = memoizeSignal(() => {
-    const document = inject(DOCUMENT);
-    const renderer = injectRenderer();
-    const scrollbarRuler = renderer.createElement('div');
-    scrollbarRuler.style.width = '100px';
-    scrollbarRuler.style.height = '100px';
-    scrollbarRuler.style.overflow = 'scroll';
-    scrollbarRuler.style.position = 'absolute';
-    scrollbarRuler.style.top = '-9999px';
-    scrollbarRuler.style.scrollbarWidth = getComputedStyle(document.documentElement).scrollbarWidth;
-    renderer.appendChild(document.body, scrollbarRuler);
-    const scrollContainerDimensions = signalElementDimensions(scrollbarRuler);
-    return computed(() => {
-        const client = scrollContainerDimensions().client;
-        if (!client)
-            return null;
-        return {
-            width: Math.max(0, 100 - client.width),
-            height: Math.max(0, 100 - client.height),
-        };
-    });
-});
-
 let hasWrittenScrollbarSizes = false;
 /**
  * Applies scrollbar size CSS variables to the documentElement (html tag) in pixels.
@@ -1647,11 +2191,16 @@ const useCursorDragScroll = (el, options) => {
     const { enabled = signal(true), allowedDirection = 'both' } = options ?? {};
     const scrollState = signalElementScrollState(elements);
     const renderer = injectRenderer();
-    const isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    const isInitDragging = signal(false, ...(ngDevMode ? [{ debugName: "isInitDragging" }] : []));
-    const initialDragPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "initialDragPosition" }] : []));
-    const initialScrollPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "initialScrollPosition" }] : []));
-    const dragAmount = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragAmount" }] : []));
+    const isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    const isInitDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInitDragging" }] : /* istanbul ignore next */ []));
+    const initialDragPosition = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialDragPosition" }] : /* istanbul ignore next */ []));
+    const initialScrollPosition = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialScrollPosition" }] : /* istanbul ignore next */ []));
+    const dragAmount = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragAmount" }] : /* istanbul ignore next */ []));
     const document = inject(DOCUMENT);
     const canScroll = computed(() => {
         const currentScrollState = scrollState();
@@ -1664,7 +2213,8 @@ const useCursorDragScroll = (el, options) => {
             case 'vertical':
                 return currentScrollState.canScrollVertically;
         }
-    }, ...(ngDevMode ? [{ debugName: "canScroll" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScroll" }] : /* istanbul ignore next */ []));
     // Cleanup if the element the cursor drag scroll is bound to gets changed
     effect(() => {
         const { previousElement } = element();
@@ -1831,21 +2381,29 @@ const injectIsRouterInitialized = memoizeSignal(() => {
  */
 const injectUrl = memoizeSignal(() => {
     const event = injectRouterEvent();
-    return linkedSignal({
-        source: event,
-        computation: (curr, prev) => {
-            if (curr instanceof NavigationEnd) {
-                return curr.urlAfterRedirects;
-            }
-            else if (curr instanceof NavigationSkipped) {
-                return curr.url;
-            }
-            else if (prev?.value) {
-                return prev.value;
-            }
-            return createInitialRoute();
-        },
-    }).asReadonly();
+    const router = inject(Router);
+    // Captured once for reads that happen before the router has committed any
+    // navigation (SSR / initial load), where `router.url` isn't reliable yet.
+    const initialRoute = createInitialRoute();
+    return computed(() => {
+        // We depend on `event` and `currentNavigation` only to get re-evaluated
+        // around each navigation, but we read the *committed* url straight from the
+        // router. The router commits `currentUrlTree` before it activates components,
+        // so `router.url` is already correct inside a child component's constructor —
+        // unlike the NavigationEnd event, which only reaches this signal *after*
+        // activation.
+        event();
+        const currentNavigation = router.currentNavigation();
+        // Before the very first navigation the router url isn't populated yet (e.g.
+        // SSR / a deep link read before the initial navigation runs), so fall back
+        // to the browser location captured at startup. `navigated` flips only at
+        // NavigationEnd, so we also check for an in-flight navigation to stay correct
+        // during the initial navigation's component construction.
+        if (router.navigated || currentNavigation !== null) {
+            return router.url;
+        }
+        return initialRoute;
+    });
 });
 /**
  * Inject the current route
@@ -1874,54 +2432,64 @@ const createRouterState = (router) => {
         fragment,
     };
 };
+/**
+ * Read the current route (the committed url without query params and fragment) straight from the router.
+ * Unlike the `injectRoute` signal this reads synchronously, so it can be used inside a `router.events` handler
+ * where `router.url` is already committed. Falls back to the browser location before the first navigation commits.
+ */
+const createRoute = (router) => {
+    const url = router.navigated ? router.url : window.location.pathname + window.location.search + window.location.hash;
+    return url.split('?')[0]?.split('#')[0] ?? '';
+};
 /**
  * Inject the complete router state. This includes the current route data, path params, query params, title and fragment.
  */
 const injectRouterState = memoizeSignal(() => {
     const event = injectRouterEvent();
     const router = inject(Router);
-    const routerState = signal(createRouterState(router), ...(ngDevMode ? [{ debugName: "routerState" }] : []));
-    effect(() => {
-        const e = event();
-        untracked(() => {
-            if (e instanceof NavigationEnd && e.id === -1) {
-                return;
-            }
-            else {
-                routerState.set(createRouterState(router));
-            }
-        });
-    });
-    return computed(() => routerState(), { equal });
+    // We only depend on `event` to get re-evaluated on every router event, but we
+    // read the *committed* snapshot straight from the router. The router commits
+    // `routerState` before it activates components (and emits ActivationStart
+    // before NavigationEnd), so this is already correct inside a child component's
+    // constructor — unlike an effect, which only flushes after construction.
+    return computed(() => {
+        event();
+        return createRouterState(router);
+    }, { equal });
 });
 /** Inject a signal containing the current route fragment (the part after the # inside the url if present) */
 const injectFragment = (config) => {
     const routerState = injectRouterState();
-    const fragment = computed(() => routerState().fragment, ...(ngDevMode ? [{ debugName: "fragment" }] : []));
+    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 queryParams = computed(() => routerState().queryParams, ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
+    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 data = computed(() => routerState().data, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    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 title = computed(() => routerState().title, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    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 pathParams = computed(() => routerState().pathParams, ...(ngDevMode ? [{ debugName: "pathParams" }] : []));
+    const pathParams = computed(() => routerState().pathParams, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pathParams" }] : /* istanbul ignore next */ []));
     return pathParams;
 };
 const getQueryParamFromUrl = (key) => {
@@ -2010,14 +2578,18 @@ const setupScrollRestoration = (config = {}) => {
     if (!isPlatformBrowser(inject(PLATFORM_ID))) {
         return;
     }
-    const state = injectRouterState();
-    const route = injectRoute();
+    const router = inject(Router);
     const document = inject(DOCUMENT);
-    combineLatest([toObservable(state).pipe(pairwise()), toObservable(route).pipe(pairwise())])
-        .pipe(debounceTime(1))
-        .subscribe(([[prevState, currState], [prevRoute, currRoute]]) => {
-        const sameUrlNavigation = prevRoute === currRoute;
+    let prev = { state: createRouterState(router), route: createRoute(router) };
+    router.events
+        .pipe(filter((e) => e instanceof NavigationEnd || e instanceof NavigationSkipped), takeUntilDestroyed())
+        .subscribe(() => {
+        const curr = { state: createRouterState(router), route: createRoute(router) };
+        const prevState = prev.state;
+        const currState = curr.state;
+        const sameUrlNavigation = prev.route === curr.route;
         const didFragmentChange = prevState.fragment !== currState.fragment;
+        prev = curr;
         if (sameUrlNavigation) {
             const allQueryParams = [
                 ...new Set(Object.keys(prevState.queryParams).concat(Object.keys(currState.queryParams))),
@@ -2068,6 +2640,206 @@ const createLogger = (config) => {
     };
 };
 
+const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const unescapeHtml = (str) => str
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/g, ' ');
+const stripTags = (str) => str.replace(/<[^>]+>/g, '');
+const parseTableRow = (line) => line
+    .split('|')
+    .slice(1, -1)
+    .map((cell) => cell.trim());
+const isTableSeparatorLine = (line) => /^\|?(\s*:?-+:?\s*\|)+\s*$/.test(line);
+const makePlaceholder = (kind, idx) => `\u{E000}${kind}${idx}\u{E001}`;
+const placeholderRe = (kind) => new RegExp(`\u{E000}${kind}(\\d+)\u{E001}`, 'gu');
+const isPlaceholder = (kind, str) => new RegExp(`^\u{E000}${kind}\\d+\u{E001}$`, 'u').test(str);
+const processInline = (text) => {
+    const inlineCodes = [];
+    text = text.replace(/`([^`]+)`/g, (_, code) => {
+        const idx = inlineCodes.push(`<code>${escapeHtml(code)}</code>`) - 1;
+        return makePlaceholder('IC', idx);
+    });
+    // Bold + italic — *** before ** before *
+    text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    text = text.replace(/__(.+?)__/g, '<strong>$1</strong>');
+    text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+    // Images before links (order matters)
+    text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+    return text.replace(placeholderRe('IC'), (_, i) => inlineCodes[+i] ?? '');
+};
+/**
+ * Converts a markdown string to HTML.
+ * Covers headings, bold, italic, strikethrough, inline code, fenced code blocks,
+ * links, images, block quotes, unordered/ordered lists, tables, horizontal rules, and paragraphs.
+ */
+const markdownToHtml = (markdown) => {
+    if (!markdown)
+        return '';
+    let text = markdown.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    // Extract fenced code blocks before any other processing
+    const codeBlocks = [];
+    text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+        const langAttr = lang ? ` class="language-${lang}"` : '';
+        const idx = codeBlocks.push(`<pre><code${langAttr}>${escapeHtml(code.trim())}</code></pre>`) - 1;
+        return makePlaceholder('CODE', idx);
+    });
+    // Markdown headings don't require blank lines around them, but blocks are
+    // split on blank lines below. Isolate each heading line into its own block so
+    // a heading directly followed by a list/paragraph isn't swallowed into it.
+    text = text.replace(/^(#{1,6}\s+.+)$/gm, '\n\n$1\n\n');
+    const html = text
+        .split(/\n\n+/)
+        .map((block) => {
+        const trimmed = block.trim();
+        if (!trimmed)
+            return '';
+        if (isPlaceholder('CODE', trimmed))
+            return trimmed;
+        // Heading
+        const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch?.[1] && headingMatch?.[2]) {
+            const level = headingMatch[1].length;
+            return `<h${level}>${processInline(headingMatch[2].trim())}</h${level}>`;
+        }
+        // Horizontal rule
+        if (/^(---|\*\*\*|___)\s*$/.test(trimmed))
+            return '<hr>';
+        // Table (GFM)
+        const tableLines = trimmed.split('\n');
+        if (tableLines.length >= 2 && /\|/.test(tableLines[0] ?? '') && isTableSeparatorLine(tableLines[1] ?? '')) {
+            const headers = parseTableRow(tableLines[0] ?? '');
+            const thead = `<thead><tr>${headers.map((h) => `<th>${processInline(h)}</th>`).join('')}</tr></thead>`;
+            const bodyRows = tableLines.slice(2);
+            const tbody = bodyRows.length > 0
+                ? `<tbody>${bodyRows
+                    .map((row) => `<tr>${parseTableRow(row)
+                    .map((cell) => `<td>${processInline(cell)}</td>`)
+                    .join('')}</tr>`)
+                    .join('')}</tbody>`
+                : '';
+            return `<table>${thead}${tbody}</table>`;
+        }
+        // Blockquote
+        if (/^> /.test(trimmed)) {
+            const content = trimmed
+                .split('\n')
+                .map((l) => l.replace(/^>\s?/, ''))
+                .join('<br>');
+            return `<blockquote>${processInline(content)}</blockquote>`;
+        }
+        // Unordered list
+        if (/^[-*+]\s/.test(trimmed)) {
+            const items = trimmed
+                .split('\n')
+                .filter((l) => /^[-*+]\s/.test(l))
+                .map((l) => `<li>${processInline(l.replace(/^[-*+]\s+/, '').trim())}</li>`)
+                .join('');
+            return `<ul>${items}</ul>`;
+        }
+        // Ordered list
+        if (/^\d+\.\s/.test(trimmed)) {
+            const items = trimmed
+                .split('\n')
+                .filter((l) => /^\d+\.\s/.test(l))
+                .map((l) => `<li>${processInline(l.replace(/^\d+\.\s+/, '').trim())}</li>`)
+                .join('');
+            return `<ol>${items}</ol>`;
+        }
+        // Paragraph — single newlines within a block become <br>
+        return `<p>${trimmed
+            .split('\n')
+            .map((l) => processInline(l))
+            .join('<br>')}</p>`;
+    })
+        .filter(Boolean)
+        .join('\n');
+    return html.replace(placeholderRe('CODE'), (_, i) => codeBlocks[+i] ?? '');
+};
+/**
+ * Converts an HTML string to markdown.
+ * Covers headings, bold, italic, strikethrough, inline code, fenced code blocks,
+ * links, images, block quotes, unordered/ordered lists, tables, horizontal rules, and paragraphs.
+ */
+const htmlToMarkdown = (html) => {
+    if (!html)
+        return '';
+    let md = html;
+    // Code blocks — process before inline code
+    md = md.replace(/<pre[^>]*><code[^>]*class="language-([^"]+)"[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, lang, code) => `\n\`\`\`${lang}\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
+    md = md.replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, code) => `\n\`\`\`\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
+    md = md.replace(/<pre[^>]*>([\s\S]*?)<\/pre>/gi, (_, code) => `\n\`\`\`\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
+    // Headings — keep the inner markup so the inline passes below turn any nested
+    // bold/italic/link/code into markdown; leftover tags are stripped at the end.
+    for (let i = 6; i >= 1; i--) {
+        md = md.replace(new RegExp(`<h${i}[^>]*>([\\s\\S]*?)<\\/h${i}>`, 'gi'), (_, content) => `\n${'#'.repeat(i)} ${content.trim()}\n`);
+    }
+    // Bold + italic (combined before individual)
+    md = md.replace(/<strong[^>]*><em[^>]*>([\s\S]*?)<\/em><\/strong>/gi, '***$1***');
+    md = md.replace(/<em[^>]*><strong[^>]*>([\s\S]*?)<\/strong><\/em>/gi, '***$1***');
+    md = md.replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, '**$2**');
+    md = md.replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, '*$2*');
+    md = md.replace(/<(del|s|strike)[^>]*>([\s\S]*?)<\/\1>/gi, '~~$2~~');
+    // Inline code
+    md = md.replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, (_, code) => `\`${unescapeHtml(code)}\``);
+    // Links and images
+    md = md.replace(/<a[^>]+href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi, '[$2]($1)');
+    md = md.replace(/<img[^>]+src="([^"]*)"[^>]*alt="([^"]*)"[^>]*\/?>/gi, '![$2]($1)');
+    md = md.replace(/<img[^>]+alt="([^"]*)"[^>]*src="([^"]*)"[^>]*\/?>/gi, '![$1]($2)');
+    md = md.replace(/<img[^>]+src="([^"]*)"[^>]*\/?>/gi, '![]($1)');
+    // Block quotes
+    md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => {
+        return (stripTags(content)
+            .trim()
+            .split('\n')
+            .map((line) => `> ${line.trim()}`)
+            .join('\n') + '\n');
+    });
+    // Lists
+    md = md.replace(/<ul[^>]*>([\s\S]*?)<\/ul>/gi, (_, content) => {
+        return ('\n' +
+            content.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_m, item) => `- ${stripTags(item).trim()}\n`));
+    });
+    md = md.replace(/<ol[^>]*>([\s\S]*?)<\/ol>/gi, (_, content) => {
+        let n = 1;
+        return ('\n' +
+            content.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_m, item) => `${n++}. ${stripTags(item).trim()}\n`));
+    });
+    // Tables
+    md = md.replace(/<table[^>]*>([\s\S]*?)<\/table>/gi, (_, tableContent) => {
+        const extractCells = (row) => [...row.matchAll(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/gi)].map((m) => stripTags(m[1] ?? '').trim());
+        const theadMatch = tableContent.match(/<thead[^>]*>([\s\S]*?)<\/thead>/i);
+        const firstTrMatch = tableContent.match(/<tr[^>]*>([\s\S]*?)<\/tr>/i);
+        const headerCells = theadMatch
+            ? extractCells(theadMatch[1] ?? '')
+            : firstTrMatch
+                ? extractCells(firstTrMatch[1] ?? '')
+                : [];
+        if (headerCells.length === 0)
+            return '';
+        const separator = headerCells.map(() => '---').join(' | ');
+        const bodySource = theadMatch
+            ? tableContent.replace(theadMatch[0], '')
+            : tableContent.replace(firstTrMatch?.[0] ?? '', '');
+        const bodyRows = [...bodySource.matchAll(/<tr[^>]*>([\s\S]*?)<\/tr>/gi)].map((m) => extractCells(m[1] ?? '').join(' | '));
+        const lines = [`| ${headerCells.join(' | ')} |`, `| ${separator} |`, ...bodyRows.map((r) => `| ${r} |`)];
+        return `\n${lines.join('\n')}\n`;
+    });
+    // Block elements
+    md = md.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, (_, content) => `\n${stripTags(content).trim()}\n`);
+    md = md.replace(/<br\s*\/?>/gi, '\n');
+    md = md.replace(/<hr\s*\/?>/gi, '\n---\n');
+    return unescapeHtml(stripTags(md))
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+};
+
 const clamp = (value, min = 0, max = 100) => {
     return Math.max(min, Math.min(max, value));
 };
@@ -2108,10 +2880,9 @@ const getObjectProperty = (obj, prop) => {
 
 const RUNTIME_ERROR_NO_DATA = '__ET_NO_DATA__';
 class RuntimeError extends Error {
-    constructor(code, message, devOnly = false, data = RUNTIME_ERROR_NO_DATA) {
-        super(formatRuntimeError(code, message, devOnly));
+    constructor(code, message, data = RUNTIME_ERROR_NO_DATA) {
+        super(formatRuntimeError(code, message));
         this.code = code;
-        this.devOnly = devOnly;
         this.data = data;
         if (data !== RUNTIME_ERROR_NO_DATA) {
             try {
@@ -2128,299 +2899,220 @@ class RuntimeError extends Error {
         }
     }
 }
-function formatRuntimeError(code, message, devOnly) {
+function formatRuntimeError(code, message) {
     // prefix code with zeros if it's less than 100
     const codeWithZeros = code < 10 ? `00${code}` : code < 100 ? `0${code}` : code;
     const fullCode = `ET${codeWithZeros}`;
-    const devOnlyText = devOnly ? ' [DEV ONLY] ' : '';
-    return `${devOnlyText}${fullCode}${message ? ': ' + message : ''}`;
+    return `${fullCode}${message ? ': ' + message : ''}`;
 }
 
-/**
- * Checks if an element or the viewport can scroll in a given direction.
- * @param element The element to check. If null/undefined, checks if the viewport can scroll.
- * @param direction The direction to check. If not provided, checks both directions.
- * @returns true if the element or viewport can scroll in the given direction.
- */
-const elementCanScroll = (element, direction) => {
-    const el = element || document.documentElement;
-    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = el;
-    if (direction === 'x') {
-        return scrollWidth > clientWidth;
-    }
-    else if (direction === 'y') {
-        return scrollHeight > clientHeight;
+const createAutoSessionMemoryKey = ({ element, prefix }) => {
+    const pathSegments = [];
+    let currentElement = element;
+    while (currentElement) {
+        const currentElementName = currentElement.localName;
+        const parentElement = currentElement.parentElement;
+        if (!parentElement) {
+            pathSegments.unshift(currentElementName);
+            break;
+        }
+        const siblingElements = Array.from(parentElement.children);
+        const siblingIndex = siblingElements.indexOf(currentElement);
+        pathSegments.unshift(`${currentElementName}[${siblingIndex}]`);
+        currentElement = parentElement;
     }
-    return scrollHeight > clientHeight || scrollWidth > clientWidth;
+    const locationPath = element.ownerDocument.defaultView?.location.pathname ?? 'root';
+    return `${prefix}:${locationPath}:${pathSegments.join('/')}`;
 };
-const createViewportRect = () => ({
-    left: 0,
-    top: 0,
-    right: window.innerWidth,
-    bottom: window.innerHeight,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    x: 0,
-    y: 0,
-    toJSON: () => ({}),
-});
-const isElementVisible = (options) => {
-    const { container, element } = options;
-    if (!element) {
-        return null;
+const canUseSessionMemory = () => {
+    try {
+        if (typeof globalThis.window === 'undefined') {
+            return false;
+        }
+        if (typeof globalThis.document === 'undefined') {
+            return false;
+        }
+        return globalThis.sessionStorage != null;
     }
-    const elementRect = options.elementRect || element.getBoundingClientRect();
-    const containerRect = container ? options.containerRect || container.getBoundingClientRect() : createViewportRect();
-    const canScroll = elementCanScroll(container);
-    if (!canScroll) {
-        return {
-            inline: true,
-            block: true,
-            blockIntersection: 1,
-            inlineIntersection: 1,
-            intersectionRatio: 1,
-            isIntersecting: true,
-            element,
-            containerRect,
-            elementRect,
-        };
+    catch {
+        return false;
     }
-    const elLeft = elementRect.left;
-    const elTop = elementRect.top;
-    const elWidth = elementRect.width || 1;
-    const elHeight = elementRect.height || 1;
-    const elRight = elLeft + elWidth;
-    const elBottom = elTop + elHeight;
-    const conLeft = containerRect.left;
-    const conTop = containerRect.top;
-    const conRight = conLeft + containerRect.width;
-    const conBottom = conTop + containerRect.height;
-    const isElementInlineVisible = elLeft >= conLeft && elRight <= conRight;
-    const isElementBlockVisible = elTop >= conTop && elBottom <= conBottom;
-    const inlineIntersection = Math.min(elRight, conRight) - Math.max(elLeft, conLeft);
-    const blockIntersection = Math.min(elBottom, conBottom) - Math.max(elTop, conTop);
-    const inlineIntersectionPercentage = clamp(inlineIntersection / elWidth, 0, 1);
-    const blockIntersectionPercentage = clamp(blockIntersection / elHeight, 0, 1);
-    return {
-        inline: isElementInlineVisible,
-        block: isElementBlockVisible,
-        inlineIntersection: inlineIntersectionPercentage,
-        blockIntersection: blockIntersectionPercentage,
-        isIntersecting: isElementInlineVisible && isElementBlockVisible,
-        element,
-        containerRect,
-        elementRect,
-        // Round the intersection ratio to the nearest 0.01 to avoid floating point errors and system scaling issues.
-        intersectionRatio: Math.round(Math.min(inlineIntersectionPercentage, blockIntersectionPercentage) * 100) / 100,
-    };
 };
-const getElementScrollCoordinates = (options) => {
-    const { container, element, direction, behavior = 'smooth', origin = 'nearest', scrollBlockMargin = 0, scrollInlineMargin = 0, } = options;
-    if (!element || !container || !elementCanScroll(container)) {
-        return {
-            behavior,
-            left: undefined,
-            top: undefined,
-        };
+const getSessionStorage = () => {
+    if (!canUseSessionMemory()) {
+        return null;
     }
-    const elementRect = element.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const { scrollLeft, scrollTop } = container;
-    const elWidth = elementRect.width;
-    const elHeight = elementRect.height;
-    const elLeft = elementRect.left;
-    const elTop = elementRect.top;
-    const elRight = elementRect.right;
-    const elBottom = elementRect.bottom;
-    const conWidth = containerRect.width;
-    const conHeight = containerRect.height;
-    const conLeft = containerRect.left;
-    const conTop = containerRect.top;
-    const conRight = containerRect.right;
-    const conBottom = containerRect.bottom;
-    const shouldScrollLeft = direction === 'inline' || direction === 'both' || !direction;
-    const shouldScrollTop = direction === 'block' || direction === 'both' || !direction;
-    let scrollLeftTo = scrollLeft;
-    let scrollTopTo = scrollTop;
-    const relativeTop = elTop - conTop;
-    const relativeLeft = elLeft - conLeft;
-    const calculateScrollToStart = () => {
-        scrollLeftTo = scrollLeft + relativeLeft - scrollInlineMargin;
-        scrollTopTo = scrollTop + relativeTop - scrollBlockMargin;
-    };
-    const calculateScrollToEnd = () => {
-        scrollLeftTo = scrollLeft + relativeLeft - conWidth + elWidth + scrollInlineMargin;
-        scrollTopTo = scrollTop + relativeTop - conHeight + elHeight + scrollBlockMargin;
-    };
-    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();
+    return globalThis.sessionStorage;
+};
+const createSessionMemory = ({ key, parse, serialize }) => {
+    const read = () => {
+        const sessionStorage = getSessionStorage();
+        if (!sessionStorage) {
+            return null;
         }
-        else if (isBelow || isPartialBelow || isRight || isPartialRight) {
-            calculateScrollToEnd();
+        try {
+            const storedValue = sessionStorage.getItem(key);
+            if (storedValue === null) {
+                return null;
+            }
+            return parse(storedValue);
+        }
+        catch {
+            return null;
         }
     };
-    switch (origin) {
-        case 'start':
-            calculateScrollToStart();
-            break;
-        case 'end':
-            calculateScrollToEnd();
-            break;
-        case 'center':
-            calculateScrollToCenter();
-            break;
-        case 'nearest':
-            calculateScrollToNearest();
-            break;
-    }
-    return {
-        behavior,
-        left: shouldScrollLeft ? scrollLeftTo : undefined,
-        top: shouldScrollTop ? scrollTopTo : undefined,
+    const write = (value) => {
+        const sessionStorage = getSessionStorage();
+        if (!sessionStorage) {
+            return false;
+        }
+        try {
+            sessionStorage.setItem(key, serialize(value));
+            return true;
+        }
+        catch {
+            return false;
+        }
     };
-};
-const scrollToElement = (options) => {
-    options.container?.scrollTo(getElementScrollCoordinates(options));
-};
-
-const [, injectAngularRootElement] = createRootProvider(() => {
-    const appRef = inject(ApplicationRef);
-    const rootElement = signal(null, ...(ngDevMode ? [{ debugName: "rootElement" }] : []));
-    const poll = () => {
-        const appComponents = appRef.components;
-        if (appComponents.length > 0) {
-            rootElement.set(appComponents[0]?.location.nativeElement);
+    const remove = () => {
+        const sessionStorage = getSessionStorage();
+        if (!sessionStorage) {
+            return false;
         }
-        else {
-            setTimeout(poll, 25);
+        try {
+            sessionStorage.removeItem(key);
+            return true;
+        }
+        catch {
+            return false;
         }
     };
-    setTimeout(poll);
-    return rootElement;
-});
-
-const [provideBoundaryElement, injectBoundaryElement, BOUNDARY_ELEMENT_TOKEN] = createProvider(() => {
-    const hostElement = inject(ElementRef, { optional: true });
-    const document = inject(DOCUMENT);
-    const override = signal(null, ...(ngDevMode ? [{ debugName: "override" }] : []));
-    const value = computed(() => override() ?? hostElement?.nativeElement ?? document.documentElement, ...(ngDevMode ? [{ debugName: "value" }] : []));
     return {
-        value,
-        override,
+        read,
+        write,
+        remove,
     };
-}, { name: 'Boundary Element' });
-
-/**
- * Default viewport config based on Tailwind CSS.
- * @see https://tailwindcss.com/docs/screens
- */
-const DEFAULT_VIEWPORT_CONFIG = {
-    breakpoints: {
-        xs: [0, 639],
-        sm: [640, 767],
-        md: [768, 1023],
-        lg: [1024, 1279],
-        xl: [1280, 1535],
-        '2xl': [1536, Infinity],
-    },
 };
-const [provideViewportConfig, injectViewportConfig] = createStaticRootProvider(DEFAULT_VIEWPORT_CONFIG, {
-    name: 'Viewport Config',
-});
-const [provideBreakpointObserver, injectBreakpointObserver] = createRootProvider(() => {
-    const breakpointObserver = inject(BreakpointObserver);
-    const viewportConfig = injectViewportConfig();
-    const isMediaQueryMatched = (mediaQuery) => breakpointObserver.isMatched(mediaQuery);
-    const observeMediaQuery = (mediaQuery) => {
-        return toSignal(breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), startWith(isMediaQueryMatched(mediaQuery))), { requireSync: true });
-    };
-    const observeBreakpoint = (options) => observeMediaQuery(buildMediaQueryString(options));
-    const isBreakpointMatched = (options) => isMediaQueryMatched(buildMediaQueryString(options));
-    const getBreakpointSize = (type, option) => {
-        const index = option === 'min' ? 0 : 1;
-        const size = viewportConfig.breakpoints[type][index];
-        if (size === Infinity || size === 0) {
-            return size;
-        }
-        if (option === 'min') {
-            return size;
-        }
-        // Due to scaling, the actual size of the viewport may be a decimal number.
-        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
-        // and thus not matching any of the default breakpoints.
-        return size + 0.9;
-    };
-    const buildMediaQueryString = (options) => {
-        if (!options.min && !options.max) {
-            throw new Error('At least one of min or max must be defined');
-        }
-        const mediaQueryParts = [];
-        if (options.min) {
-            if (typeof options.min === 'number') {
-                mediaQueryParts.push(`(min-width: ${options.min}px)`);
+
+const getClientXY = (event) => {
+    if (event.type[0] === 't') {
+        const touch = event.targetTouches[0] ?? event.changedTouches[0];
+        return touch ? { clientX: touch.clientX, clientY: touch.clientY } : { clientX: 0, clientY: 0 };
+    }
+    return { clientX: event.clientX, clientY: event.clientY };
+};
+const createSwipeTracker = (startEvent) => {
+    const { clientX: originClientX, clientY: originClientY } = getClientXY(startEvent);
+    const startTime = Date.now();
+    let movementX = 0;
+    let movementY = 0;
+    let isSwiping = false;
+    let isScrolling = false;
+    const update = (event) => {
+        const { clientX, clientY } = getClientXY(event);
+        movementX = clientX - originClientX;
+        movementY = clientY - originClientY;
+        const positiveMovementX = Math.abs(movementX);
+        const positiveMovementY = Math.abs(movementY);
+        if (!isSwiping && !isScrolling) {
+            if (positiveMovementY > positiveMovementX) {
+                isScrolling = true;
             }
             else {
-                mediaQueryParts.push(`(min-width: ${getBreakpointSize(options.min, 'min')}px)`);
+                isSwiping = true;
             }
         }
-        if (options.min && options.max) {
-            mediaQueryParts.push('and');
+        return {
+            originClientX,
+            originClientY,
+            timestamp: startTime,
+            movementX,
+            movementY,
+            positiveMovementX,
+            positiveMovementY,
+            isScrolling,
+            isSwiping,
+        };
+    };
+    const end = () => {
+        const swipeTime = Math.max(1, Date.now() - startTime);
+        const positiveMovementX = Math.abs(movementX);
+        const positiveMovementY = Math.abs(movementY);
+        const pixelPerSecondX = (movementX / swipeTime) * 1000;
+        const pixelPerSecondY = (movementY / swipeTime) * 1000;
+        return {
+            movementX,
+            movementY,
+            positiveMovementX,
+            positiveMovementY,
+            pixelPerSecondX,
+            pixelPerSecondY,
+            positivePixelPerSecondX: Math.abs(pixelPerSecondX),
+            positivePixelPerSecondY: Math.abs(pixelPerSecondY),
+            originClientX,
+            originClientY,
+        };
+    };
+    const cancel = () => {
+        movementX = 0;
+        movementY = 0;
+    };
+    return { update, end, cancel };
+};
+
+const [, injectAngularRootElement] = createRootProvider(() => {
+    const appRef = inject(ApplicationRef);
+    const rootElement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootElement" }] : /* istanbul ignore next */ []));
+    const poll = () => {
+        const appComponents = appRef.components;
+        if (appComponents.length > 0) {
+            rootElement.set(appComponents[0]?.location.nativeElement);
         }
-        if (options.max) {
-            if (typeof options.max === 'number') {
-                mediaQueryParts.push(`(max-width: ${options.max}px)`);
-            }
-            else {
-                mediaQueryParts.push(`(max-width: ${getBreakpointSize(options.max, 'max')}px)`);
-            }
+        else {
+            setTimeout(poll, 25);
         }
-        return mediaQueryParts.join(' ');
     };
+    setTimeout(poll);
+    return rootElement;
+});
+
+const [provideBoundaryElement, injectBoundaryElement, BOUNDARY_ELEMENT_TOKEN] = createProvider(() => {
+    const hostElement = inject(ElementRef, { optional: true });
+    const document = inject(DOCUMENT);
+    const override = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "override" }] : /* istanbul ignore next */ []));
+    const value = computed(() => override() ?? hostElement?.nativeElement ?? document.documentElement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     return {
-        observeBreakpoint,
-        isBreakpointMatched,
-        getBreakpointSize,
-        buildMediaQueryString,
-        observeMediaQuery,
-        isMediaQueryMatched,
+        value,
+        override,
     };
-}, { name: 'Breakpoint Observer' });
+}, { name: 'Boundary Element' });
 
 const [provideFocusVisibleTracker, injectFocusVisibleTracker, FOCUS_VISIBLE_TRACKER_TOKEN] = createRootProvider(() => {
     const document = inject(DOCUMENT);
     const destroyRef = inject(DestroyRef);
-    const isFocusVisible = signal(false, ...(ngDevMode ? [{ debugName: "isFocusVisible" }] : []));
+    const isFocusVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocusVisible" }] : /* istanbul ignore next */ []));
     let hadKeyboardEvent = false;
     const onKeyDown = (e) => {
         if (e.key === 'Tab' || e.key === 'Shift' || e.key === 'Meta' || e.key === 'Alt' || e.key === 'Control') {
             hadKeyboardEvent = true;
-            isFocusVisible.set(true);
+            queueMicrotask(() => isFocusVisible.set(true));
         }
     };
     const onPointerDown = () => {
         hadKeyboardEvent = false;
-        isFocusVisible.set(false);
+        queueMicrotask(() => isFocusVisible.set(false));
     };
     const onFocus = () => {
         if (hadKeyboardEvent) {
-            isFocusVisible.set(true);
+            queueMicrotask(() => isFocusVisible.set(true));
         }
     };
     const onBlur = () => {
-        isFocusVisible.set(false);
+        queueMicrotask(() => isFocusVisible.set(false));
     };
     document.addEventListener('keydown', onKeyDown, true);
     document.addEventListener('mousedown', onPointerDown, true);
@@ -2442,7 +3134,8 @@ const [provideFocusVisibleTracker, injectFocusVisibleTracker, FOCUS_VISIBLE_TRAC
 }, { name: 'Focus Visible Tracker' });
 
 const [provideLocale, injectLocale] = createRootProvider(() => {
-    const currentLocale = signal('en', ...(ngDevMode ? [{ debugName: "currentLocale" }] : []));
+    const currentLocale = signal('en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLocale" }] : /* istanbul ignore next */ []));
     return {
         currentLocale,
     };
@@ -2584,6 +3277,20 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
             setAttribute(element, `data-${key}`, value);
         });
     };
+    const moveBefore = (config) => {
+        const { newParent, child, before = null } = config;
+        if ('moveBefore' in newParent) {
+            try {
+                newParent.moveBefore(child, before);
+            }
+            catch {
+                newParent.insertBefore(child, before);
+            }
+        }
+        else {
+            newParent.insertBefore(child, before);
+        }
+    };
     return {
         addClass,
         removeClass,
@@ -2615,10 +3322,80 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
         setDataAttributes,
         setCssProperty,
         setCssProperties,
+        moveBefore,
         renderer,
     };
 }, { name: 'Angular Renderer' });
 
+const [provideStyleManager, injectStyleManager] = createRootProvider(() => {
+    const appRef = inject(ApplicationRef);
+    const destroyRef = inject(DestroyRef);
+    const document = inject(DOCUMENT);
+    const envInjector = inject(EnvironmentInjector);
+    const renderer = injectRenderer();
+    let container = null;
+    const mountedComponents = new Map();
+    const getContainerParent = () => {
+        return document.body ?? document.documentElement;
+    };
+    const ensureContainer = () => {
+        if (container) {
+            return container;
+        }
+        const nextContainer = renderer.createElement('div');
+        renderer.addClass(nextContainer, 'et-style-manager');
+        renderer.setAttribute(nextContainer, 'aria-hidden', 'true');
+        renderer.setStyle(nextContainer, { display: 'none' });
+        renderer.appendChild(getContainerParent(), nextContainer);
+        container = nextContainer;
+        return nextContainer;
+    };
+    const cleanupContainer = () => {
+        if (!container) {
+            return;
+        }
+        const parent = renderer.parentNode(container);
+        if (parent) {
+            renderer.removeChild(parent, container);
+        }
+        container = null;
+    };
+    const mount = (component) => {
+        const existingComponent = mountedComponents.get(component);
+        if (existingComponent) {
+            return existingComponent;
+        }
+        const componentRef = createComponent(component, { environmentInjector: envInjector });
+        appRef.attachView(componentRef.hostView);
+        renderer.appendChild(ensureContainer(), componentRef.location.nativeElement);
+        mountedComponents.set(component, componentRef);
+        return componentRef;
+    };
+    destroyRef.onDestroy(() => {
+        if (appRef.destroyed) {
+            mountedComponents.clear();
+            cleanupContainer();
+            return;
+        }
+        mountedComponents.forEach((componentRef) => {
+            appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+        });
+        mountedComponents.clear();
+        cleanupContainer();
+    });
+    return { mount };
+}, { name: 'StyleManager' });
+
+const createUserConsentProvider = (options) => ({
+    provide: options.for,
+    useFactory: () => ({
+        isGranted: options.isGranted(),
+        grant: options.grant(),
+        ...(options.revoke ? { revoke: options.revoke() } : {}),
+    }),
+});
+
 const nextFrame = (cb) => {
     requestAnimationFrame(() => {
         requestAnimationFrame(cb);
@@ -2664,7 +3441,8 @@ class AnimatedLifecycleDirective {
         this.currentFrameId = 0;
         this.state$ = new BehaviorSubject('init');
         this.stateChange = outputFromObservable(this.state$);
-        this.skipNextEnter = model(false, ...(ngDevMode ? [{ debugName: "skipNextEnter" }] : []));
+        this.skipNextEnter = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "skipNextEnter" }] : /* istanbul ignore next */ []));
         this.state$
             .pipe(tap((state) => {
             if (state !== 'init') {
@@ -2694,6 +3472,7 @@ class AnimatedLifecycleDirective {
         if (currentState === 'entering')
             return;
         if ((currentState === 'init' && !this.isConstructed) || this.skipNextEnter()) {
+            this.debugLog('enter: instant (not constructed or skipNextEnter)', { currentState });
             this.updateState('entered');
             this.skipNextEnter.set(false);
             this.addClass(ANIMATION_CLASSES.enterDone);
@@ -2709,6 +3488,10 @@ class AnimatedLifecycleDirective {
         this.animatable.setTransitionId(transitionId);
         const skipAnimation = this.forcedAtFrameId !== null && this.forcedAtFrameId === this.currentFrameId;
         this.forcedAtFrameId = null;
+        this.debugLog(`enter: ${skipAnimation ? 'skip (forced this frame)' : isInterrupting ? 'interrupting leave' : 'normal'}`, {
+            currentState,
+            transitionId,
+        });
         if (skipAnimation) {
             this.removeClasses(ANIMATION_CLASSES.leaveFrom, ANIMATION_CLASSES.leaveActive, ANIMATION_CLASSES.leaveTo, ANIMATION_CLASSES.leaveInterrupt);
             this.updateState('entered');
@@ -2759,6 +3542,7 @@ class AnimatedLifecycleDirective {
         if (currentState === 'leaving')
             return;
         if (currentState === 'init') {
+            this.debugLog('leave: instant (state is init, enter never ran)');
             this.updateState('left');
             this.addClass(ANIMATION_CLASSES.leaveDone);
             this.forcedAtFrameId = null;
@@ -2773,6 +3557,10 @@ class AnimatedLifecycleDirective {
         this.animatable.setTransitionId(transitionId);
         const skipAnimation = this.forcedAtFrameId !== null && this.forcedAtFrameId === this.currentFrameId;
         this.forcedAtFrameId = null;
+        this.debugLog(`leave: ${skipAnimation ? 'skip (forced this frame)' : isInterrupting ? 'interrupting enter' : 'normal'}`, {
+            currentState,
+            transitionId,
+        });
         if (skipAnimation) {
             this.removeClasses(ANIMATION_CLASSES.enterFrom, ANIMATION_CLASSES.enterActive, ANIMATION_CLASSES.enterTo, ANIMATION_CLASSES.enterInterrupt);
             this.updateState('left');
@@ -2853,21 +3641,33 @@ class AnimatedLifecycleDirective {
         addClasses.forEach((cls) => this.addClass(cls));
         fromNextFrame()
             .pipe(switchMap(() => this.animatable.isAnimating$), take(1), switchMap((isAnimating) => {
+            if (isAnimating) {
+                return of(true);
+            }
+            this.debugLog(`${transitionId}: interrupt found no running transition, re-checking next frame`);
+            return fromNextFrame().pipe(switchMap(() => this.animatable.isAnimating$), take(1));
+        }), take(1), switchMap((isAnimating) => {
             if (!isAnimating && this.state$.value === expectedState) {
+                this.debugLog(`${transitionId}: interrupt completes INSTANTLY (no transition running after class swap)`);
                 return of({ cancelled: false, transitionId });
             }
+            this.debugLog(`${transitionId}: interrupt waiting for animation end`, { isAnimating });
             return this.animatable.animationEnd$.pipe(switchMap((e) => {
                 if (e.transitionId === transitionId) {
                     return of(e);
                 }
                 return this.animatable.isAnimating$.pipe(take(1), switchMap((stillAnimating) => {
                     if (!stillAnimating && this.state$.value === expectedState) {
+                        this.debugLog(`${transitionId}: interrupt completes via foreign animation end (batch id was "${e.transitionId}")`, { stillAnimating });
                         return of({ cancelled: false, transitionId });
                     }
                     return of(null);
                 }));
             }), filter((e) => e !== null && e.transitionId === transitionId));
-        }), filter((e) => this.state$.value === expectedState && !e.cancelled), tap(() => onComplete()), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
+        }), filter((e) => this.state$.value === expectedState && !e.cancelled), tap(() => {
+            this.debugLog(`${transitionId}: interrupt complete`);
+            onComplete();
+        }), take(1), takeUntil(cancelSignal), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
     addClass(className) {
@@ -2880,17 +3680,28 @@ class AnimatedLifecycleDirective {
         this.renderer.removeClass(this.element, ...classNames);
     }
     updateState(newState) {
+        this.debugLog(`state: ${this.state$.value} → ${newState}`);
         this.state$.next(newState);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", inputs: { skipNextEnter: { classPropertyName: "skipNextEnter", publicName: "skipNextEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", skipNextEnter: "skipNextEnterChange" }, host: { classAttribute: "et-force-invisible" }, providers: [
+    debugLog(message, data) {
+        const el = this.element;
+        const scope = `lifecycle ${el.tagName.toLowerCase()}${el.classList.contains('et-overlay') ? '.et-overlay' : ''}`;
+        if (data) {
+            animationDebugLog(scope, message, data);
+        }
+        else {
+            animationDebugLog(scope, message);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", inputs: { skipNextEnter: { classPropertyName: "skipNextEnter", publicName: "skipNextEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", skipNextEnter: "skipNextEnterChange" }, host: { classAttribute: "et-force-invisible" }, providers: [
             {
                 provide: ANIMATED_LIFECYCLE_TOKEN,
                 useExisting: AnimatedLifecycleDirective,
             },
         ], exportAs: ["etAnimatedLifecycle"], hostDirectives: [{ directive: AnimatableDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatedLifecycle]',
@@ -2915,7 +3726,7 @@ class AnimatedIfDirective {
         this.viewContainerRef = inject(ViewContainerRef);
         this.animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
         this.hasView = false;
-        this.ifValue = input(null, { ...(ngDevMode ? { debugName: "ifValue" } : {}), alias: 'etAnimatedIf' });
+        this.ifValue = input(null, { ...(ngDevMode ? { debugName: "ifValue" } : /* istanbul ignore next */ {}), alias: 'etAnimatedIf' });
         toObservable(this.ifValue)
             .pipe(switchMap((value) => {
             if (value) {
@@ -2937,15 +3748,15 @@ class AnimatedIfDirective {
         }), takeUntilDestroyed())
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatedIfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: AnimatedIfDirective, isStandalone: true, selector: "[etAnimatedIf]", inputs: { ifValue: { classPropertyName: "ifValue", publicName: "etAnimatedIf", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatedIfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: AnimatedIfDirective, isStandalone: true, selector: "[etAnimatedIf]", inputs: { ifValue: { classPropertyName: "ifValue", publicName: "etAnimatedIf", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: ANIMATED_IF_TOKEN,
                 useExisting: AnimatedIfDirective,
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatedIfDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatedIfDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatedIf]',
@@ -2969,17 +3780,23 @@ class AnimatedOverlayDirective {
         this.destroyRef = inject(DestroyRef);
         this.floatingElCleanupFn = null;
         this.unmountSubscription = null;
-        this.placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
-        this.fallbackPlacements = input(...(ngDevMode ? [undefined, { debugName: "fallbackPlacements" }] : []));
-        this.offset = input(null, ...(ngDevMode ? [{ debugName: "offset" }] : []));
-        this.arrowPadding = input(4, ...(ngDevMode ? [{ debugName: "arrowPadding" }] : []));
-        this.viewportPadding = input(8, ...(ngDevMode ? [{ debugName: "viewportPadding" }] : []));
-        this.autoResize = input(false, { ...(ngDevMode ? { debugName: "autoResize" } : {}), transform: booleanAttribute });
-        this.shift = input(true, { ...(ngDevMode ? { debugName: "shift" } : {}), transform: booleanAttribute });
-        this.autoHide = input(false, { ...(ngDevMode ? { debugName: "autoHide" } : {}), transform: booleanAttribute });
-        this.autoCloseIfReferenceHidden = input(false, { ...(ngDevMode ? { debugName: "autoCloseIfReferenceHidden" } : {}), transform: booleanAttribute });
-        this.referenceElement = input(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "referenceElement" }] : []));
-        this.mirrorWidth = input(false, { ...(ngDevMode ? { debugName: "mirrorWidth" } : {}), transform: booleanAttribute });
+        this.placement = input('bottom', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        this.fallbackPlacements = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "fallbackPlacements" }] : /* istanbul ignore next */ []));
+        this.offset = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        this.arrowPadding = input(4, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowPadding" }] : /* istanbul ignore next */ []));
+        this.viewportPadding = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportPadding" }] : /* istanbul ignore next */ []));
+        this.autoResize = input(false, { ...(ngDevMode ? { debugName: "autoResize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.shift = input(true, { ...(ngDevMode ? { debugName: "shift" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.autoHide = input(false, { ...(ngDevMode ? { debugName: "autoHide" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.autoCloseIfReferenceHidden = input(false, { ...(ngDevMode ? { debugName: "autoCloseIfReferenceHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.referenceElement = input(this.elementRef.nativeElement, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "referenceElement" }] : /* istanbul ignore next */ []));
+        this.mirrorWidth = input(false, { ...(ngDevMode ? { debugName: "mirrorWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.portal = null;
         this.overlayRef = null;
         this.componentRef = null;
@@ -2987,14 +3804,22 @@ class AnimatedOverlayDirective {
         this.afterOpened$ = new Subject();
         this.beforeClosed$ = new Subject();
         this.afterClosed$ = new Subject();
-        this.state = signal('init', ...(ngDevMode ? [{ debugName: "state" }] : []));
-        this.isMounted = computed(() => this.state() === 'mounted', ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
-        this.isMounting = computed(() => this.state() === 'mounting', ...(ngDevMode ? [{ debugName: "isMounting" }] : []));
-        this.isUnmounted = computed(() => this.state() === 'unmounted', ...(ngDevMode ? [{ debugName: "isUnmounted" }] : []));
-        this.isUnmounting = computed(() => this.state() === 'unmounting', ...(ngDevMode ? [{ debugName: "isUnmounting" }] : []));
-        this.canMount = computed(() => !this.isMounted() && !this.isMounting(), ...(ngDevMode ? [{ debugName: "canMount" }] : []));
-        this.canUnmount = computed(() => (this.isMounted() || this.isMounting()) && !this.isUnmounting(), ...(ngDevMode ? [{ debugName: "canUnmount" }] : []));
-        this.isHidden = signal(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
+        this.state = signal('init', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.isMounted = computed(() => this.state() === 'mounted', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMounted" }] : /* istanbul ignore next */ []));
+        this.isMounting = computed(() => this.state() === 'mounting', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMounting" }] : /* istanbul ignore next */ []));
+        this.isUnmounted = computed(() => this.state() === 'unmounted', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isUnmounted" }] : /* istanbul ignore next */ []));
+        this.isUnmounting = computed(() => this.state() === 'unmounting', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isUnmounting" }] : /* istanbul ignore next */ []));
+        this.canMount = computed(() => !this.isMounted() && !this.isMounting(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canMount" }] : /* istanbul ignore next */ []));
+        this.canUnmount = computed(() => (this.isMounted() || this.isMounting()) && !this.isUnmounting(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canUnmount" }] : /* istanbul ignore next */ []));
+        this.isHidden = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
         this.isMounted$ = toObservable(this.isMounted);
         this.isMounting$ = toObservable(this.isMounting);
         this.isUnmounted$ = toObservable(this.isUnmounted);
@@ -3024,7 +3849,7 @@ class AnimatedOverlayDirective {
             this.unmountSubscription?.unsubscribe();
             this.unmountSubscription = null;
             this.applyComponentData(config.data);
-            this.applyThemeProvider(config.themeProvider);
+            this.applyColorProvider(config.colorProvider);
             const lifecycle = this.componentRef.instance.animatedLifecycle();
             if (lifecycle) {
                 this.state.set('mounting');
@@ -3047,7 +3872,7 @@ class AnimatedOverlayDirective {
             }
             return;
         }
-        const { component, providers, data, themeProvider } = config;
+        const { component, providers, data, colorProvider } = config;
         this.state.set('mounting');
         this.beforeOpened$.next();
         const injector = Injector.create({
@@ -3058,7 +3883,7 @@ class AnimatedOverlayDirective {
         this.portal = new ComponentPortal(component, this.viewContainerRef, injector);
         this.componentRef = this.overlayRef.attach(this.portal);
         this.applyComponentData(data);
-        this.applyThemeProvider(themeProvider);
+        this.applyColorProvider(colorProvider);
         this.updateOverlaySize();
         this.setupFloatingUI();
         return this.componentRef.instance;
@@ -3104,10 +3929,10 @@ class AnimatedOverlayDirective {
         Object.assign(this.componentRef.instance, data);
         this.componentRef.changeDetectorRef.markForCheck();
     }
-    applyThemeProvider(themeProvider) {
-        if (!this.componentRef || !themeProvider)
+    applyColorProvider(colorProvider) {
+        if (!this.componentRef || !colorProvider)
             return;
-        this.componentRef.instance.setThemeFromProvider(themeProvider);
+        this.componentRef.instance.setColorFromProvider(colorProvider);
     }
     updateOverlaySize() {
         if (!this.overlayRef || !this.mirrorWidth())
@@ -3245,10 +4070,10 @@ class AnimatedOverlayDirective {
         this.state.set('unmounted');
         this.afterClosed$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: AnimatedOverlayDirective, isStandalone: true, selector: "[etAnimatedOverlay]", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fallbackPlacements: { classPropertyName: "fallbackPlacements", publicName: "fallbackPlacements", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, viewportPadding: { classPropertyName: "viewportPadding", publicName: "viewportPadding", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, autoCloseIfReferenceHidden: { classPropertyName: "autoCloseIfReferenceHidden", publicName: "autoCloseIfReferenceHidden", isSignal: true, isRequired: false, transformFunction: null }, referenceElement: { classPropertyName: "referenceElement", publicName: "referenceElement", isSignal: true, isRequired: false, transformFunction: null }, mirrorWidth: { classPropertyName: "mirrorWidth", publicName: "mirrorWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-animated-overlay" }, exportAs: ["etAnimatedOverlay"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: AnimatedOverlayDirective, isStandalone: true, selector: "[etAnimatedOverlay]", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fallbackPlacements: { classPropertyName: "fallbackPlacements", publicName: "fallbackPlacements", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, viewportPadding: { classPropertyName: "viewportPadding", publicName: "viewportPadding", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "shift", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, autoCloseIfReferenceHidden: { classPropertyName: "autoCloseIfReferenceHidden", publicName: "autoCloseIfReferenceHidden", isSignal: true, isRequired: false, transformFunction: null }, referenceElement: { classPropertyName: "referenceElement", publicName: "referenceElement", isSignal: true, isRequired: false, transformFunction: null }, mirrorWidth: { classPropertyName: "mirrorWidth", publicName: "mirrorWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-animated-overlay" }, exportAs: ["etAnimatedOverlay"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AnimatedOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AnimatedOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatedOverlay]',
@@ -3367,68 +4192,800 @@ class ClickOutsideDirective {
             const isInside = this.elementRef.nativeElement.contains(activeElement);
             if (isInside)
                 return;
-            this.didClickOutside.emit(event);
-        }), takeUntilDestroyed())
-            .subscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ClickOutsideDirective, isStandalone: true, selector: "[etClickOutside]", outputs: { didClickOutside: "etClickOutside" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etClickOutside]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { didClickOutside: [{ type: i0.Output, args: ["etClickOutside"] }] } });
+            this.didClickOutside.emit(event);
+        }), takeUntilDestroyed())
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ClickOutsideDirective, isStandalone: true, selector: "[etClickOutside]", outputs: { didClickOutside: "etClickOutside" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etClickOutside]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { didClickOutside: [{ type: i0.Output, args: ["etClickOutside"] }] } });
+
+class RepeatDirective {
+    constructor() {
+        this.mainTemplateRef = inject(TemplateRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.repeatCount = input(2, { ...(ngDevMode ? { debugName: "repeatCount" } : /* istanbul ignore next */ {}), alias: 'etRepeat', transform: numberAttribute });
+        this.views = linkedSignal({ ...(ngDevMode ? { debugName: "views" } : /* istanbul ignore next */ {}), source: this.repeatCount,
+            computation: (count, previous) => {
+                const prevCount = previous?.source ?? 0;
+                const views = previous?.value ?? [];
+                if (count === prevCount && previous?.value) {
+                    return previous.value;
+                }
+                const viewsToCreate = count - prevCount;
+                if (viewsToCreate > 0) {
+                    for (let i = 0; i < viewsToCreate; i++) {
+                        views.push(this.viewContainerRef.createEmbeddedView(this.mainTemplateRef));
+                    }
+                }
+                else if (viewsToCreate < 0) {
+                    for (let i = 0; i < -viewsToCreate; i++) {
+                        this.viewContainerRef.remove(this.viewContainerRef.length - 1);
+                    }
+                    views.splice(viewsToCreate);
+                }
+                return views;
+            } });
+        // Ugly but needed to trigger the linked signal.
+        // Otherwise it has no consumers and won't run.
+        effect(() => this.views());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RepeatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: RepeatDirective, isStandalone: true, selector: "[etRepeat]", inputs: { repeatCount: { classPropertyName: "repeatCount", publicName: "etRepeat", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RepeatDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etRepeat]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { repeatCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "etRepeat", required: false }] }] } });
+
+class ScrollObserverDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.enabled = model(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        this.enabledValue = computed(() => {
+            const enabled = this.enabled();
+            if (isSignal(enabled))
+                return enabled();
+            return enabled;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabledValue" }] : /* istanbul ignore next */ []));
+        this._startEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_startEl" }] : /* istanbul ignore next */ []));
+        this._endEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_endEl" }] : /* istanbul ignore next */ []));
+        this._startIntersection = signalElementIntersection(this._startEl, {
+            root: this.elementRef,
+            enabled: this.enabledValue,
+        });
+        this._endIntersection = signalElementIntersection(this._endEl, {
+            root: this.elementRef,
+            enabled: this.enabledValue,
+        });
+        this.isAtStart = computed(() => this._startIntersection()[0]?.isIntersecting ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAtStart" }] : /* istanbul ignore next */ []));
+        this.isAtEnd = computed(() => this._endIntersection()[0]?.isIntersecting ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAtEnd" }] : /* istanbul ignore next */ []));
+    }
+    _registerStart(el) {
+        this._startEl.set(el);
+    }
+    _registerEnd(el) {
+        this._endEl.set(el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: ScrollObserverDirective, isStandalone: true, selector: "[etScrollObserver]", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enabled: "enabledChange" }, exportAs: ["etScrollObserver"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etScrollObserver]',
+                    exportAs: 'etScrollObserver',
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }, { type: i0.Output, args: ["enabledChange"] }] } });
+
+class ScrollObserverEndDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.host = inject(ScrollObserverDirective);
+        this.host._registerEnd(this.elementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollObserverEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ScrollObserverEndDirective, isStandalone: true, selector: "[etScrollObserverEnd]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollObserverEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etScrollObserverEnd]',
+                }]
+        }], ctorParameters: () => [] });
+
+class ScrollObserverStartDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.host = inject(ScrollObserverDirective);
+        this.host._registerStart(this.elementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollObserverStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ScrollObserverStartDirective, isStandalone: true, selector: "[etScrollObserverStart]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollObserverStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etScrollObserverStart]',
+                }]
+        }], ctorParameters: () => [] });
+
+const setupDragObservable = (startEvent, el, commitThreshold) => {
+    const { pointerId, clientX: startX, clientY: startY } = startEvent;
+    const end$ = merge(fromEvent(document, 'pointerup'), fromEvent(document, 'pointercancel')).pipe(filter((e) => e.pointerId === pointerId), take(1));
+    let lastX = startX;
+    let lastY = startY;
+    let committed = false;
+    const moves$ = fromEvent(document, 'pointermove').pipe(filter((e) => e.pointerId === pointerId), concatMap((e) => {
+        if (!committed) {
+            if (Math.abs(e.clientX - startX) < commitThreshold && Math.abs(e.clientY - startY) < commitThreshold) {
+                return EMPTY;
+            }
+            committed = true;
+            el.setPointerCapture(pointerId);
+            lastX = e.clientX;
+            lastY = e.clientY;
+            return of({ type: 'start' });
+        }
+        const stepX = e.clientX - lastX;
+        const stepY = e.clientY - lastY;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        return of({ type: 'move', data: { stepX, stepY, clientX: e.clientX, clientY: e.clientY } });
+    }), takeUntil(end$));
+    return concat(moves$, defer(() => of(committed ? { type: 'end' } : { type: 'tapped' })));
+};
+class DragHandleDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.commitThreshold = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commitThreshold" }] : /* 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) => setupDragObservable(event, this.el.nativeElement, this.commitThreshold())), takeUntilDestroyed(), share());
+        this.dragTapped = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'tapped'), map(() => undefined)));
+        this.dragStarted = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'start'), map(() => undefined)));
+        this.dragMoved = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'move'), map((e) => e.data)));
+        this.dragEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map(() => undefined)));
+        this.isDragging = toSignal(this.gesture$.pipe(map((e) => e.type === 'start' || e.type === 'move'), distinctUntilChanged()), { initialValue: false });
+        applyHostListener('pointerdown', (e) => this.startGesture(e));
+    }
+    startGesture(event) {
+        if (event.button !== 0 || this.disabled())
+            return;
+        event.stopPropagation();
+        this.gestureStart$.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DragHandleDirective, isStandalone: true, selector: "[etDragHandle]", inputs: { commitThreshold: { classPropertyName: "commitThreshold", publicName: "commitThreshold", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragTapped: "dragTapped", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etDragHandle]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { commitThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitThreshold", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dragTapped: [{ type: i0.Output, args: ["dragTapped"] }], dragStarted: [{ type: i0.Output, args: ["dragStarted"] }], dragMoved: [{ type: i0.Output, args: ["dragMoved"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }] } });
+
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+].join(',');
+const isHTMLElement = (value) => {
+    return value instanceof HTMLElement;
+};
+const isFocusable = (element, document) => {
+    const view = document.defaultView;
+    const style = view?.getComputedStyle(element);
+    const isVisible = style?.display !== 'none' && style?.visibility !== 'hidden' && element.getClientRects().length > 0;
+    return isVisible && !element.hasAttribute('disabled') && element.tabIndex >= 0;
+};
+const getFocusableElements = (container, document) => {
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => isFocusable(el, document));
+};
+const getHeadingElement = (container) => {
+    return container.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
+};
+const focusElement = (element) => {
+    if (!element) {
+        return;
+    }
+    element.focus({ preventScroll: true });
+};
+const applyInitialFocus = (paneElement, autoFocus, document) => {
+    if (autoFocus === false) {
+        return;
+    }
+    if (autoFocus === 'container') {
+        focusElement(paneElement);
+        return;
+    }
+    if (autoFocus === 'first-heading') {
+        focusElement(getHeadingElement(paneElement) ?? paneElement);
+        return;
+    }
+    if (autoFocus === 'first-tabbable') {
+        focusElement(getFocusableElements(paneElement, document)[0] ?? paneElement);
+        return;
+    }
+    focusElement(paneElement.querySelector(autoFocus) ?? paneElement);
+};
+const setupFocusTrap = (paneElement, overlayRef, enabled, isTopMost, document) => {
+    if (!enabled) {
+        return () => undefined;
+    }
+    const onKeyDown = (event) => {
+        if (event.key !== 'Tab' || !isTopMost(overlayRef)) {
+            return;
+        }
+        const focusableElements = getFocusableElements(paneElement, document);
+        if (focusableElements.length === 0) {
+            event.preventDefault();
+            focusElement(paneElement);
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const activeElement = document.activeElement;
+        if (event.shiftKey && activeElement === firstElement) {
+            event.preventDefault();
+            focusElement(lastElement ?? null);
+            return;
+        }
+        if (!event.shiftKey && activeElement === lastElement) {
+            event.preventDefault();
+            focusElement(firstElement ?? null);
+        }
+    };
+    paneElement.addEventListener('keydown', onKeyDown);
+    return () => {
+        paneElement.removeEventListener('keydown', onKeyDown);
+    };
+};
+
+const setBaseElementStyles = (config, hostElement, paneElement, renderer) => {
+    renderer.setStyle(hostElement, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        right: '0',
+        bottom: '0',
+        display: 'block',
+        pointerEvents: config.hasBackdrop === false ? 'none' : 'auto',
+    });
+    renderer.setStyle(paneElement, {
+        pointerEvents: 'auto',
+        outline: 'none',
+    });
+};
+const setBackdropStyles = (backdropElement, renderer) => {
+    renderer.setStyle(backdropElement, {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        right: '0',
+        bottom: '0',
+    });
+};
+const applyCenteredPosition = (hostElement, paneElement, renderer, _config) => {
+    renderer.setStyle(hostElement, {
+        display: 'grid',
+        placeItems: 'center',
+        padding: '16px',
+        overflow: 'auto',
+    });
+    renderer.setStyle(paneElement, {
+        position: 'relative',
+    });
+};
+const applyGlobalPosition = (hostElement, paneElement, renderer, config) => {
+    renderer.setStyle(hostElement, {
+        display: 'grid',
+        // an explicit full-size cell keeps the grid area definite so percentage
+        // based pane sizes (e.g. max-height: calc(100% - 72px)) can resolve
+        gridTemplateRows: '100%',
+        gridTemplateColumns: '100%',
+        placeItems: `${config.vertical ?? 'center'} ${config.horizontal ?? 'center'}`,
+        padding: config.padding ?? '0',
+    });
+    renderer.setStyle(paneElement, {
+        position: 'relative',
+    });
+};
+/**
+ * Clears every inline style any position strategy kind may have set and
+ * restores the base element styles, so a different strategy can be applied afterwards.
+ */
+const resetPositioningStyles = (config, hostElement, paneElement, renderer) => {
+    renderer.setStyle(hostElement, {
+        gridTemplateRows: null,
+        gridTemplateColumns: null,
+        placeItems: null,
+        padding: null,
+        overflow: null,
+    });
+    renderer.setStyle(paneElement, {
+        position: null,
+        top: null,
+        left: null,
+        width: null,
+        transform: null,
+        visibility: null,
+    });
+    renderer.setCssProperties(paneElement, {
+        '--et-overlay-max-width': null,
+        '--et-overlay-max-height': null,
+        '--et-overlay-anchored-x': null,
+        '--et-overlay-anchored-y': null,
+    });
+    renderer.removeAttribute(paneElement, 'data-overlay-placement');
+    setBaseElementStyles(config, hostElement, paneElement, renderer);
+};
+const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, renderer) => {
+    renderer.setStyle(paneElement, {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: strategy.mirrorWidth ? `${strategy.referenceElement.offsetWidth}px` : 'max-content',
+    });
+    const cleanup = autoUpdate(strategy.referenceElement, paneElement, () => {
+        const arrowElement = paneElement.querySelector('[et-floating-arrow]');
+        const middleware = [];
+        middleware.push(offset(strategy.offset ?? 8));
+        middleware.push(flip({
+            fallbackPlacements: strategy.fallbackPlacements ?? undefined,
+            fallbackAxisSideDirection: 'start',
+        }));
+        if (strategy.autoResize) {
+            middleware.push(size({
+                padding: strategy.viewportPadding ?? 8,
+                apply({ availableHeight, availableWidth }) {
+                    renderer.setCssProperties(paneElement, {
+                        '--et-overlay-max-width': `${availableWidth}px`,
+                        '--et-overlay-max-height': `${availableHeight}px`,
+                    });
+                },
+            }));
+        }
+        if (strategy.shift !== false) {
+            middleware.push(shift({
+                limiter: limitShift(),
+                padding: strategy.viewportPadding ?? 8,
+            }));
+        }
+        if (arrowElement) {
+            middleware.push(arrow({
+                element: arrowElement,
+                padding: strategy.arrowPadding ?? 4,
+            }));
+        }
+        if (strategy.autoHide || strategy.autoCloseIfReferenceHidden) {
+            middleware.push(hide({
+                strategy: 'referenceHidden',
+            }));
+        }
+        computePosition(strategy.referenceElement, paneElement, {
+            placement: strategy.placement ?? 'bottom',
+            strategy: 'absolute',
+            middleware,
+        }).then(({ x, y, placement, middlewareData }) => {
+            renderer.setStyle(paneElement, {
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+                width: strategy.mirrorWidth ? `${strategy.referenceElement.offsetWidth}px` : null,
+            });
+            // exposed so animations can compose their transforms with the anchored position
+            renderer.setCssProperties(paneElement, {
+                '--et-overlay-anchored-x': `${x}px`,
+                '--et-overlay-anchored-y': `${y}px`,
+            });
+            renderer.setAttribute(paneElement, 'data-overlay-placement', placement);
+            if (arrowElement && middlewareData.arrow) {
+                renderer.setCssProperty(arrowElement, '--et-floating-arrow-translate', `translate3d(${middlewareData.arrow.x ?? 0}px, ${middlewareData.arrow.y ?? 0}px, 0)`);
+            }
+            if (middlewareData.hide?.referenceHidden) {
+                if (strategy.autoCloseIfReferenceHidden) {
+                    overlayRef.close(undefined, 'api');
+                    return;
+                }
+                renderer.setStyle(paneElement, {
+                    visibility: strategy.autoHide ? 'hidden' : null,
+                });
+                return;
+            }
+            renderer.setStyle(paneElement, {
+                visibility: null,
+            });
+        });
+    });
+    return () => {
+        cleanup();
+    };
+};
+const setupPositioning = (config, hostElement, paneElement, overlayRef, renderer) => {
+    const strategy = config.positionStrategy ?? { kind: 'center' };
+    if (strategy.kind === 'anchored') {
+        renderer.setStyle(hostElement, {
+            pointerEvents: config.hasBackdrop === false ? 'none' : 'auto',
+        });
+        return createAnchoredPositionCleanup(strategy, paneElement, overlayRef, renderer);
+    }
+    if (strategy.kind === 'global') {
+        applyGlobalPosition(hostElement, paneElement, renderer, strategy);
+        return () => undefined;
+    }
+    applyCenteredPosition(hostElement, paneElement, renderer, strategy);
+    return () => undefined;
+};
+
+const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
+    const _state = signal('mounting', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    const _componentInstance = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_componentInstance" }] : /* istanbul ignore next */ []));
+    let positionUpdater = null;
+    const beforeOpenedSubject = new Subject();
+    const afterOpenedSubject = new Subject();
+    const beforeClosedSubject = new Subject();
+    const afterClosedSubject = new Subject();
+    return {
+        id,
+        config,
+        elements,
+        state: _state.asReadonly(),
+        componentInstance: _componentInstance.asReadonly(),
+        // Internal — driven by overlay-runtime.ts
+        beforeOpenedSubject,
+        close(result, source = 'api') {
+            if (_state() === 'closing' || _state() === 'closed') {
+                return;
+            }
+            requestClose(result, source);
+        },
+        beforeOpened() {
+            return beforeOpenedSubject.asObservable();
+        },
+        afterOpened() {
+            return afterOpenedSubject.asObservable();
+        },
+        beforeClosed() {
+            return beforeClosedSubject.asObservable();
+        },
+        afterClosed() {
+            return afterClosedSubject.asObservable();
+        },
+        attachComponentRef(componentRef) {
+            _componentInstance.set(componentRef.instance);
+        },
+        /** @internal */
+        attachPositionUpdater(updater) {
+            positionUpdater = updater;
+        },
+        updatePositionStrategy(strategy) {
+            if (_state() === 'closing' || _state() === 'closed') {
+                return;
+            }
+            positionUpdater?.(strategy);
+        },
+        markOpened() {
+            if (_state() !== 'mounting') {
+                return;
+            }
+            _state.set('mounted');
+            afterOpenedSubject.next();
+            afterOpenedSubject.complete();
+        },
+        beginClose(closeEvent) {
+            if (_state() === 'closing' || _state() === 'closed') {
+                return false;
+            }
+            _state.set('closing');
+            beforeClosedSubject.next(closeEvent);
+            beforeClosedSubject.complete();
+            return true;
+        },
+        finishClose(closeEvent) {
+            if (_state() === 'closed') {
+                return;
+            }
+            _state.set('closed');
+            _componentInstance.set(null);
+            afterClosedSubject.next(closeEvent);
+            afterClosedSubject.complete();
+        },
+    };
+};
 
-class RepeatDirective {
-    constructor() {
-        this.mainTemplateRef = inject(TemplateRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.repeatCount = input(2, { ...(ngDevMode ? { debugName: "repeatCount" } : {}), alias: 'etRepeat', transform: numberAttribute });
-        this.views = linkedSignal({ ...(ngDevMode ? { debugName: "views" } : {}), source: this.repeatCount,
-            computation: (count, previous) => {
-                const prevCount = previous?.source ?? 0;
-                const views = previous?.value ?? [];
-                if (count === prevCount && previous?.value) {
-                    return previous.value;
+const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
+    const appRef = inject(ApplicationRef);
+    const destroyRef = inject(DestroyRef);
+    const document = inject(DOCUMENT);
+    const environmentInjector = inject(EnvironmentInjector);
+    const renderer = injectRenderer();
+    const openEntriesState = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openEntriesState" }] : /* istanbul ignore next */ []));
+    const openEntries = computed(() => openEntriesState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openEntries" }] : /* istanbul ignore next */ []));
+    let rootElement = null;
+    // Synchronous teardown for each currently-mounted overlay, run when the runtime's injector is
+    // destroyed (app teardown). Registered on mount, removed once the overlay is destroyed normally.
+    const mountedTeardowns = new Set();
+    const getRootElement = () => {
+        if (rootElement) {
+            return rootElement;
+        }
+        // A previous Angular app (e.g. the one that existed before a Storybook HMR update or story
+        // switch) may have left its runtime root orphaned in <body> if it was torn down mid-animation.
+        // Such a node keeps a backdrop/pane on screen and blocks pointer events, so clear any stragglers
+        // before creating ours.
+        document.querySelectorAll('.et-overlay-runtime-root').forEach((el) => el.remove());
+        rootElement = renderer.createElement('div');
+        renderer.addClass(rootElement, 'et-overlay-runtime-root');
+        renderer.setStyle(rootElement, {
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            pointerEvents: 'none',
+            zIndex: '1000',
+        });
+        renderer.appendChild(document.body, rootElement);
+        return rootElement;
+    };
+    const maybeDestroyRootElement = () => {
+        if (!rootElement || openEntriesState().length > 0) {
+            return;
+        }
+        const parentNode = renderer.parentNode(rootElement);
+        if (parentNode) {
+            renderer.removeChild(parentNode, rootElement);
+        }
+        rootElement = null;
+    };
+    const isTopMost = (overlayRef) => {
+        return openEntriesState().at(-1) === overlayRef;
+    };
+    const getAnimatedLifecycle = (componentRef) => {
+        const componentLifecycle = componentRef.instance.animatedLifecycle?.();
+        if (componentLifecycle) {
+            return componentLifecycle;
+        }
+        return componentRef.injector.get(ANIMATED_LIFECYCLE_TOKEN, null);
+    };
+    const mount = (config) => {
+        const root = getRootElement();
+        const hostElement = renderer.createElement('div');
+        const paneElement = renderer.createElement('div');
+        const backdropElement = config.hasBackdrop === false ? null : renderer.createElement('div');
+        const previousFocusedElement = isHTMLElement(document.activeElement) ? document.activeElement : null;
+        const autoFocus = config.autoFocus ?? 'first-tabbable';
+        renderer.addClass(hostElement, 'et-overlay-runtime-entry');
+        setBaseElementStyles(config, hostElement, paneElement, renderer);
+        renderer.setAttributes(hostElement, {
+            'data-overlay-id': config.id,
+            role: config.role ?? null,
+            tabindex: '-1',
+            'aria-modal': config.role ? `${config.modal !== false}` : null,
+            'aria-describedby': config.ariaDescribedBy ?? null,
+            'aria-labelledby': config.ariaLabelledBy ?? null,
+            'aria-label': config.ariaLabel ?? null,
+        });
+        renderer.addClass(hostElement, ...(config.hostClass ?? []));
+        if (backdropElement) {
+            renderer.addClass(backdropElement, 'et-overlay-runtime-backdrop');
+            setBackdropStyles(backdropElement, renderer);
+            renderer.setAttribute(backdropElement, 'data-overlay-id', config.id);
+            (config.backdropClass ?? []).forEach((className) => renderer.addClass(backdropElement, className));
+            renderer.appendChild(hostElement, backdropElement);
+        }
+        renderer.appendChild(hostElement, paneElement);
+        renderer.appendChild(root, hostElement);
+        const overlayRef = createOverlayRuntimeRef(config.id, { ...config }, {
+            rootElement: root,
+            hostElement,
+            backdropElement,
+            paneElement,
+        }, (result, source) => beginClose({ result, source }));
+        animationDebugLog(`runtime ${config.id}`, 'mount');
+        // matches the previous overlay behavior: escape/outside-pointer closes are
+        // ignored until the enter transition has started plus one frame
+        let interactiveCloseReady = false;
+        const cleanupFns = [];
+        const parentInjector = config.injector ?? config.viewContainerRef?.injector ?? environmentInjector;
+        const elementInjector = Injector.create({
+            parent: parentInjector,
+            providers: config.providers ?? [],
+        });
+        const componentRef = createComponent(config.component, {
+            environmentInjector,
+            elementInjector,
+            hostElement: paneElement,
+            bindings: [
+                ...Object.entries(config.inputBindings ?? {}).map(([key, value]) => inputBinding(key, () => value)),
+                ...Object.entries(config.outputBindings ?? {}).map(([key, listener]) => outputBinding(key, listener)),
+            ],
+        });
+        // pane classes are applied after component creation — Angular replaces the host
+        // element's class attribute with the component's static host class on creation
+        renderer.addClass(paneElement, 'et-overlay-runtime-pane', ...(config.paneClass ?? []));
+        appRef.attachView(componentRef.hostView);
+        overlayRef.attachComponentRef(componentRef);
+        overlayRef.beforeOpenedSubject.next();
+        overlayRef.beforeOpenedSubject.complete();
+        openEntriesState.update((entries) => [...entries, overlayRef]);
+        let positionCleanup = setupPositioning(config, hostElement, paneElement, overlayRef, renderer);
+        cleanupFns.push(() => positionCleanup());
+        let currentPositionStrategy = config.positionStrategy;
+        const getOriginElement = () => currentPositionStrategy?.kind === 'anchored' ? currentPositionStrategy.referenceElement : null;
+        overlayRef.attachPositionUpdater((strategy) => {
+            currentPositionStrategy = strategy;
+            positionCleanup();
+            resetPositioningStyles(config, hostElement, paneElement, renderer);
+            positionCleanup = setupPositioning({ ...config, positionStrategy: strategy }, hostElement, paneElement, overlayRef, renderer);
+        });
+        const destroyMountedOverlay = (closeEvent) => {
+            animationDebugLog(`runtime ${config.id}`, `destroy (source "${closeEvent.source}")`);
+            cleanupFns.forEach((cleanup) => cleanup());
+            appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+            const parentNode = renderer.parentNode(hostElement);
+            if (parentNode) {
+                renderer.removeChild(parentNode, hostElement);
+            }
+            openEntriesState.update((entries) => entries.filter((entry) => entry !== overlayRef));
+            maybeDestroyRootElement();
+            if (config.restoreFocus !== false && previousFocusedElement?.isConnected) {
+                previousFocusedElement.focus({ preventScroll: true });
+            }
+            overlayRef.finishClose(closeEvent);
+        };
+        // Allows the runtime to synchronously destroy this overlay on app teardown, bypassing the
+        // async leave animation (whose completion callback would never fire once the app is gone).
+        const forceTeardown = () => destroyMountedOverlay({ result: undefined, source: 'api' });
+        mountedTeardowns.add(forceTeardown);
+        cleanupFns.push(() => mountedTeardowns.delete(forceTeardown));
+        const beginClose = (closeEvent) => {
+            if (!overlayRef.beginClose(closeEvent)) {
+                return;
+            }
+            const lifecycle = getAnimatedLifecycle(componentRef);
+            animationDebugLog(`runtime ${config.id}`, `close requested (source "${closeEvent.source}", lifecycle state "${lifecycle?.state$.value ?? 'none'}", delegate ${config.animationDelegate?.leave ? 'yes' : 'no'})`);
+            if (!lifecycle) {
+                destroyMountedOverlay(closeEvent);
+                return;
+            }
+            if (config.animationDelegate?.leave) {
+                config.animationDelegate.leave({ lifecycle, elements: overlayRef.elements, closeEvent });
+            }
+            else {
+                lifecycle.leave();
+            }
+            lifecycle.state$
+                .pipe(filter((state) => state === 'left'), take(1))
+                .subscribe(() => {
+                destroyMountedOverlay(closeEvent);
+            });
+        };
+        const closeOnEscape = config.closeOnEscape ?? true;
+        if (closeOnEscape) {
+            const onKeyDown = (event) => {
+                if (event.key !== 'Escape' || !isTopMost(overlayRef)) {
+                    return;
                 }
-                const viewsToCreate = count - prevCount;
-                if (viewsToCreate > 0) {
-                    for (let i = 0; i < viewsToCreate; i++) {
-                        views.push(this.viewContainerRef.createEmbeddedView(this.mainTemplateRef));
-                    }
+                if (!interactiveCloseReady) {
+                    animationDebugLog(`runtime ${config.id}`, 'escape ignored (enter transition has not started yet)');
+                    return;
                 }
-                else if (viewsToCreate < 0) {
-                    for (let i = 0; i < -viewsToCreate; i++) {
-                        this.viewContainerRef.remove(this.viewContainerRef.length - 1);
-                    }
-                    views.splice(viewsToCreate);
+                event.preventDefault();
+                overlayRef.close(undefined, 'escape');
+            };
+            document.addEventListener('keydown', onKeyDown, true);
+            cleanupFns.push(() => document.removeEventListener('keydown', onKeyDown, true));
+        }
+        const closeOnOutsidePointer = config.closeOnOutsidePointer ?? config.modal === false;
+        if (closeOnOutsidePointer) {
+            const onPointerDown = (event) => {
+                if (!isTopMost(overlayRef)) {
+                    return;
                 }
-                return views;
-            } });
-        // Ugly but needed to trigger the linked signal.
-        // Otherwise it has no consumers and won't run.
-        effect(() => this.views());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RepeatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: RepeatDirective, isStandalone: true, selector: "[etRepeat]", inputs: { repeatCount: { classPropertyName: "repeatCount", publicName: "etRepeat", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RepeatDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etRepeat]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { repeatCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "etRepeat", required: false }] }] } });
+                const target = event.target;
+                if (!isHTMLElement(target) || paneElement.contains(target)) {
+                    return;
+                }
+                if (!interactiveCloseReady) {
+                    animationDebugLog(`runtime ${config.id}`, 'outside pointer ignored (enter transition has not started yet)');
+                    return;
+                }
+                overlayRef.close(undefined, 'outside-pointer');
+                const originElement = getOriginElement();
+                if (originElement && originElement.contains(target)) {
+                    const swallowReopenClick = (clickEvent) => {
+                        if (isHTMLElement(clickEvent.target) && originElement.contains(clickEvent.target)) {
+                            clickEvent.stopImmediatePropagation();
+                            clickEvent.preventDefault();
+                        }
+                    };
+                    document.addEventListener('click', swallowReopenClick, { capture: true, once: true });
+                }
+            };
+            document.addEventListener('pointerdown', onPointerDown, true);
+            cleanupFns.push(() => document.removeEventListener('pointerdown', onPointerDown, true));
+        }
+        cleanupFns.push(setupFocusTrap(paneElement, overlayRef, config.modal !== false, isTopMost, document));
+        nextFrame(() => {
+            if (overlayRef.state() !== 'mounting') {
+                animationDebugLog(`runtime ${config.id}`, `enter skipped (state "${overlayRef.state()}" before enter frame)`);
+                return;
+            }
+            const lifecycle = getAnimatedLifecycle(componentRef);
+            if (!lifecycle) {
+                interactiveCloseReady = true;
+                applyInitialFocus(paneElement, autoFocus, document);
+                overlayRef.markOpened();
+                return;
+            }
+            animationDebugLog(`runtime ${config.id}`, `enter (delegate ${config.animationDelegate?.enter ? 'yes' : 'no'}, lifecycle state "${lifecycle.state$.value}")`);
+            const readySubscription = lifecycle.state$
+                .pipe(filter((state) => state === 'entering' || state === 'entered'), take(1))
+                .subscribe(() => {
+                nextFrame(() => {
+                    interactiveCloseReady = true;
+                });
+            });
+            cleanupFns.push(() => readySubscription.unsubscribe());
+            if (config.animationDelegate?.enter) {
+                config.animationDelegate.enter({ lifecycle, elements: overlayRef.elements });
+            }
+            else {
+                lifecycle.enter();
+            }
+            lifecycle.state$
+                .pipe(filter((state) => state === 'entered'), take(1))
+                .subscribe(() => {
+                applyInitialFocus(paneElement, autoFocus, document);
+                overlayRef.markOpened();
+            });
+        });
+        return overlayRef;
+    };
+    destroyRef.onDestroy(() => {
+        [...mountedTeardowns].forEach((teardown) => teardown());
+        maybeDestroyRootElement();
+    });
+    return {
+        mount,
+        openEntries,
+    };
+}, { name: 'OverlayRuntime' });
 
 class NormalizeGameResultTypePipe {
     constructor() {
         this.transform = normalizeGameResultType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeGameResultTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: NormalizeGameResultTypePipe, isStandalone: true, name: "etNormalizeGameResultType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeGameResultTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NormalizeGameResultTypePipe, isStandalone: true, name: "etNormalizeGameResultType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeGameResultTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeGameResultTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeGameResultType' }]
         }] });
@@ -3470,10 +5027,10 @@ class NormalizeMatchStatePipe {
     constructor() {
         this.transform = normalizeMatchState;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchStatePipe, isStandalone: true, name: "etNormalizeMatchState" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchStatePipe, isStandalone: true, name: "etNormalizeMatchState" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchStatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchStatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchState' }]
         }] });
@@ -3500,10 +5057,10 @@ class NormalizeMatchParticipantsPipe {
     constructor() {
         this.transform = normalizeMatchParticipants;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchParticipantsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchParticipantsPipe, isStandalone: true, name: "etNormalizeMatchParticipants" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchParticipantsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchParticipantsPipe, isStandalone: true, name: "etNormalizeMatchParticipants" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchParticipantsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchParticipantsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchParticipants' }]
         }] });
@@ -3557,10 +5114,10 @@ class NormalizeMatchScorePipe {
     constructor() {
         this.transform = normalizeMatchScore;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchScorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchScorePipe, isStandalone: true, name: "etNormalizeMatchScore" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchScorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchScorePipe, isStandalone: true, name: "etNormalizeMatchScore" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchScorePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchScorePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchScore' }]
         }] });
@@ -3693,10 +5250,10 @@ class NormalizeMatchTypePipe {
     constructor() {
         this.transform = normalizeMatchType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchTypePipe, isStandalone: true, name: "etNormalizeMatchType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchTypePipe, isStandalone: true, name: "etNormalizeMatchType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NormalizeMatchTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NormalizeMatchTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchType' }]
         }] });
@@ -3735,17 +5292,31 @@ const normalizeMatchType = (matchType) => {
                 i18n: 'match-type.pools',
                 text: 'Pools',
             };
+        default:
+            return null;
     }
 };
 
+class HtmlToMarkdownPipe {
+    constructor() {
+        this.transform = htmlToMarkdown;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HtmlToMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: HtmlToMarkdownPipe, isStandalone: true, name: "htmlToMarkdown" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HtmlToMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'htmlToMarkdown' }]
+        }] });
+
 class InferMimeTypePipe {
     constructor() {
         this.transform = inferMimeType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InferMimeTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: InferMimeTypePipe, isStandalone: true, name: "inferMimeType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InferMimeTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: InferMimeTypePipe, isStandalone: true, name: "inferMimeType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InferMimeTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InferMimeTypePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'inferMimeType',
@@ -3759,6 +5330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 const inferMimeType = (srcset) => {
     if (!srcset)
         return null;
+    if (srcset.startsWith('data:')) {
+        const match = /^data:([^;,]+)/.exec(srcset);
+        return match?.[1] ?? null;
+    }
     const urls = srcset.split(',');
     const firstUrl = urls[0];
     if (!firstUrl)
@@ -3947,14 +5522,26 @@ const inferMimeType = (srcset) => {
     return null;
 };
 
+class MarkdownToHtmlPipe {
+    constructor() {
+        this.transform = markdownToHtml;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MarkdownToHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: MarkdownToHtmlPipe, isStandalone: true, name: "markdownToHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MarkdownToHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'markdownToHtml' }]
+        }] });
+
 class ToArrayPipe {
     constructor() {
         this.transform = toArray;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ToArrayPipe, isStandalone: true, name: "toArray" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: ToArrayPipe, isStandalone: true, name: "toArray" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ToArrayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToArrayPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'toArray' }]
         }] });
@@ -3986,14 +5573,19 @@ const createElementDictionary = () => {
     const firstElement = computed(() => {
         const id = dictionary.ids()[0];
         return id ? (dictionary.elements()[id] ?? null) : null;
-    }, ...(ngDevMode ? [{ debugName: "firstElement" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstElement" }] : /* istanbul ignore next */ []));
     const firstId = computed(() => {
         const id = dictionary.ids()[0];
         return id ?? null;
-    }, ...(ngDevMode ? [{ debugName: "firstId" }] : []));
-    const ids = computed(() => dictionary.ids(), ...(ngDevMode ? [{ debugName: "ids" }] : []));
-    const elements = computed(() => ids().map((id) => dictionary.elements()[id]), ...(ngDevMode ? [{ debugName: "elements" }] : []));
-    const isEmpty = computed(() => dictionary.ids().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstId" }] : /* istanbul ignore next */ []));
+    const ids = computed(() => dictionary.ids(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    const elements = computed(() => ids().map((id) => dictionary.elements()[id]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    const isEmpty = computed(() => dictionary.ids().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     const has = (id) => {
         return dictionary.ids().includes(id);
     };
@@ -4077,7 +5669,8 @@ const unbindProps = (config) => {
 const createProps = (props) => {
     const { bindId = false, single = true, classes: classBindings, attributes: attributeBindings, styles: styleBindings, staticAttributes: staticAttributeBindings = null, staticClasses: staticClassBindings = null, staticStyles: staticStyleBindings = null, listeners, name, } = props;
     const dictionary = createElementDictionary();
-    const attached = computed(() => !dictionary.isEmpty(), ...(ngDevMode ? [{ debugName: "attached" }] : []));
+    const attached = computed(() => !dictionary.isEmpty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []));
     const attachedElements = {
         first: dictionary.firstElement,
         firstId: dictionary.firstId,
@@ -4163,7 +5756,7 @@ const createDependencyStash = (stash) => {
 class PropsDirective {
     constructor() {
         this.destroyRef = inject(DestroyRef);
-        this.props = input.required({ ...(ngDevMode ? { debugName: "props" } : {}), alias: 'etProps', transform: (d) => d });
+        this.props = input.required({ ...(ngDevMode ? { debugName: "props" } : /* istanbul ignore next */ {}), alias: 'etProps', transform: (d) => d });
         this.propHandlers = createPropHandlers();
         afterNextRender({
             write: () => {
@@ -4180,10 +5773,10 @@ class PropsDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: PropsDirective, isStandalone: true, selector: "[etProps]", inputs: { props: { classPropertyName: "props", publicName: "etProps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: PropsDirective, isStandalone: true, selector: "[etProps]", inputs: { props: { classPropertyName: "props", publicName: "etProps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PropsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PropsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etProps]',
@@ -4230,6 +5823,77 @@ const templateComputed = (templateSignal) => computed(() => {
     };
 });
 
+const EDGE_CURSORS = {
+    n: 'ns-resize',
+    s: 'ns-resize',
+    e: 'ew-resize',
+    w: 'ew-resize',
+    ne: 'nesw-resize',
+    sw: 'nesw-resize',
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+};
+const setupResizeObservable = (startEvent, edge) => {
+    const pointerId = startEvent.pointerId;
+    const startX = startEvent.clientX;
+    const startY = startEvent.clientY;
+    const end$ = merge(fromEvent(document, 'pointerup'), fromEvent(document, 'pointercancel')).pipe(filter((e) => e.pointerId === pointerId), take(1));
+    return concat(of({ type: 'start', edge }), fromEvent(document, 'pointermove').pipe(filter((e) => e.pointerId === pointerId), map((e) => ({ type: 'move', data: { edge, dx: e.clientX - startX, dy: e.clientY - startY } })), takeUntil(end$)), of({ type: 'end' }));
+};
+class ResizeHandlesComponent {
+    constructor() {
+        this.edges = input(['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'], /* @ts-ignore */
+        ...(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)), takeUntilDestroyed(), share());
+        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.isResizing = toSignal(this.gesture$.pipe(map((e) => e.type !== 'end'), distinctUntilChanged()), { initialValue: false });
+        this.activeEdge = toSignal(this.gesture$.pipe(map((e) => {
+            if (e.type === 'end')
+                return null;
+            if (e.type === 'start')
+                return e.edge;
+            return e.data.edge;
+        }), distinctUntilChanged()), { initialValue: null });
+        this.edgeCursors = EDGE_CURSORS;
+    }
+    startResizeGesture(event, edge) {
+        if (event.button !== 0 || this.disabled())
+            return;
+        event.stopPropagation();
+        this.gestureStart$.next({ event, edge });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ResizeHandlesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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" }, host: { properties: { "attr.inert": "disabled() ? \"\" : null", "attr.data-active-edge": "activeEdge()" }, classAttribute: "et-resize-handles" }, ngImport: i0, template: `
+    @for (edge of edges(); track edge) {
+      <div
+        [style.cursor]="edgeCursors[edge]"
+        (pointerdown)="startResizeGesture($event, edge)"
+        class="et-resize-handle et-resize-handle--{{ edge }}"
+      ></div>
+    }
+  `, isInline: true, styles: ["@property --et-resize-handles-z-index{syntax: \"<integer>\"; inherits: true; initial-value: 10;}@property --et-resize-handles-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-resize-handles-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-resize-handles-edge-inset{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-side-top{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-resize-handles-side-bottom{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-touch-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-resize-handles-touch-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 28px;}et-resize-handles{position:absolute;inset:0;pointer-events:none}.et-resize-handle{position:absolute;z-index:var(--et-resize-handles-z-index);touch-action:none;pointer-events:auto}.et-resize-handle--n{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);top:0}.et-resize-handle--s{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);bottom:0}.et-resize-handle--e,.et-resize-handle--w{top:var(--et-resize-handles-side-top);bottom:var(--et-resize-handles-side-bottom);width:var(--et-resize-handles-edge-size)}.et-resize-handle--e{right:0}.et-resize-handle--w{left:0}.et-resize-handle--ne,.et-resize-handle--nw{top:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--ne{right:0}.et-resize-handle--nw{left:0}.et-resize-handle--se,.et-resize-handle--sw{bottom:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--se{right:0}.et-resize-handle--sw{left:0}@media(hover:none){.et-resize-handle--n,.et-resize-handle--s{height:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--e,.et-resize-handle--w{width:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--ne,.et-resize-handle--nw,.et-resize-handle--se,.et-resize-handle--sw{width:var(--et-resize-handles-touch-corner-size);height:var(--et-resize-handles-touch-corner-size)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ResizeHandlesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-resize-handles', template: `
+    @for (edge of edges(); track edge) {
+      <div
+        [style.cursor]="edgeCursors[edge]"
+        (pointerdown)="startResizeGesture($event, edge)"
+        class="et-resize-handle et-resize-handle--{{ edge }}"
+      ></div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-resize-handles',
+                        '[attr.inert]': 'disabled() ? "" : null',
+                        '[attr.data-active-edge]': 'activeEdge()',
+                    }, styles: ["@property --et-resize-handles-z-index{syntax: \"<integer>\"; inherits: true; initial-value: 10;}@property --et-resize-handles-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-resize-handles-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-resize-handles-edge-inset{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-side-top{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-resize-handles-side-bottom{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-touch-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-resize-handles-touch-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 28px;}et-resize-handles{position:absolute;inset:0;pointer-events:none}.et-resize-handle{position:absolute;z-index:var(--et-resize-handles-z-index);touch-action:none;pointer-events:auto}.et-resize-handle--n{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);top:0}.et-resize-handle--s{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);bottom:0}.et-resize-handle--e,.et-resize-handle--w{top:var(--et-resize-handles-side-top);bottom:var(--et-resize-handles-side-bottom);width:var(--et-resize-handles-edge-size)}.et-resize-handle--e{right:0}.et-resize-handle--w{left:0}.et-resize-handle--ne,.et-resize-handle--nw{top:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--ne{right:0}.et-resize-handle--nw{left:0}.et-resize-handle--se,.et-resize-handle--sw{bottom:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--se{right:0}.et-resize-handle--sw{left:0}@media(hover:none){.et-resize-handle--n,.et-resize-handle--s{height:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--e,.et-resize-handle--w{width:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--ne,.et-resize-handle--nw,.et-resize-handle--se,.et-resize-handle--sw{width:var(--et-resize-handles-touch-corner-size);height:var(--et-resize-handles-touch-corner-size)}}\n"] }]
+        }], propDecorators: { edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resizeStarted: [{ type: i0.Output, args: ["resizeStarted"] }], resizeMoved: [{ type: i0.Output, args: ["resizeMoved"] }], resizeEnded: [{ type: i0.Output, args: ["resizeEnded"] }] } });
+
 const applyHeadBinding = (binding, applyFn, removeFn, isValid) => {
     const destroyRef = inject(DestroyRef);
     const signalBinding = isSignal(binding) ? binding : signal(binding);
@@ -4263,7 +5927,8 @@ const createPropertyBinding = (configBuilder, applyConfigFn) => {
 const createArrayPropertyBinding = (configBuilder, applyConfigFn) => {
     return (binding) => {
         const valuesSignal = isSignal(binding) ? binding : signal(binding);
-        const valuesList = computed(() => untracked(() => valuesSignal()) ?? [], ...(ngDevMode ? [{ debugName: "valuesList" }] : []));
+        const valuesList = computed(() => untracked(() => valuesSignal()) ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valuesList" }] : /* istanbul ignore next */ []));
         valuesList().forEach((value, index) => {
             applyConfigFn(computed(() => configBuilder(value, index)));
         });
@@ -4308,7 +5973,8 @@ const [provideLinkStoreConfig, injectLinkStoreConfig] = createStaticRootProvider
 const [provideLinkStore, injectLinkStore] = createRootProvider(() => {
     const document = inject(DOCUMENT$1);
     const config = injectLinkStoreConfig();
-    const linksByKey = signal(new Map(), ...(ngDevMode ? [{ debugName: "linksByKey" }] : []));
+    const linksByKey = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linksByKey" }] : /* istanbul ignore next */ []));
     let priorityCounter = 0;
     const getLinkKey = (linkConfig) => {
         const isMultiInstance = config.multiInstanceRels.has(linkConfig.rel) || linkConfig.allowMultiple;
@@ -4470,7 +6136,8 @@ const [provideTitleConfig, injectTitleConfig] = createStaticRootProvider({
 }, { name: 'Title Config' });
 const [provideTitleStore, injectTitleStore] = createRootProvider(() => {
     const config = injectTitleConfig();
-    const titleParts = signal(new Map(), ...(ngDevMode ? [{ debugName: "titleParts" }] : []));
+    const titleParts = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleParts" }] : /* istanbul ignore next */ []));
     const { currentLocale } = injectLocale();
     const titleService = inject(Title);
     const isRouterInitialized = injectIsRouterInitialized();
@@ -4498,7 +6165,8 @@ const [provideTitleStore, injectTitleStore] = createRootProvider(() => {
             finalTextParts.push(config.transformer(config.suffixPart.text, currentLocale()));
         }
         return finalTextParts.join(` ${config.divider} `);
-    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     const addPart = (id, part) => {
         titleParts.update((parts) => new Map(parts).set(id, part));
     };
@@ -4598,7 +6266,8 @@ const [provideMetaStore, injectMetaStore] = createRootProvider(() => {
     const metaService = inject(Meta);
     const config = injectMetaConfig();
     const { currentLocale } = injectLocale();
-    const metaTagsBySelector = signal(new Map(), ...(ngDevMode ? [{ debugName: "metaTagsBySelector" }] : []));
+    const metaTagsBySelector = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metaTagsBySelector" }] : /* istanbul ignore next */ []));
     let priorityCounter = 0;
     const getSelector = (config) => {
         if (config.name)
@@ -5025,10 +6694,10 @@ class SeoDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SeoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: SeoDirective, isStandalone: true, providers: [{ provide: SEO_DIRECTIVE_TOKEN, useExisting: SeoDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SeoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: SeoDirective, isStandalone: true, providers: [{ provide: SEO_DIRECTIVE_TOKEN, useExisting: SeoDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SeoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SeoDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{ provide: SEO_DIRECTIVE_TOKEN, useExisting: SeoDirective }],
@@ -5042,7 +6711,8 @@ const [provideStructuredDataStore, injectStructuredDataStore] = createRootProvid
     const document = inject(DOCUMENT$1);
     const renderer = injectRenderer();
     const config = injectStructuredDataConfig();
-    const scripts = signal(new Map(), ...(ngDevMode ? [{ debugName: "scripts" }] : []));
+    const scripts = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scripts" }] : /* istanbul ignore next */ []));
     const getTargetElement = () => {
         return config.placement === 'head' ? document.head : document.body;
     };
@@ -5083,7 +6753,8 @@ const applyStructuredDataBinding = (binding) => {
 class StructuredDataComponent {
     constructor() {
         this.sanitizer = inject(DomSanitizer);
-        this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.data = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.jsonLD = computed(() => {
             const data = this.data();
             if (!data) {
@@ -5092,12 +6763,13 @@ class StructuredDataComponent {
             const json = data ? JSON.stringify(data, null, 2).replace(/<\/script>/g, '<\\/script>') : '';
             const html = `<script type="application/ld+json">${json}</script>`;
             return this.sanitizer.bypassSecurityTrustHtml(html);
-        }, ...(ngDevMode ? [{ debugName: "jsonLD" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jsonLD" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StructuredDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: StructuredDataComponent, isStandalone: true, selector: "et-structured-data", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "jsonLD()" }, styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StructuredDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: StructuredDataComponent, isStandalone: true, selector: "et-structured-data", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "jsonLD()" }, styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StructuredDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StructuredDataComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-structured-data',
@@ -5111,15 +6783,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
-const createCssThemeName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+class ColorInteractiveStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ColorInteractiveStylesComponent, isStandalone: true, selector: "et-color-interactive-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-color-interactive){--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary);--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-color-interactive-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-color-interactive){--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary);--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"] }]
+        }] });
+
+/**
+ * Cascades hover/active-driven color DOWN to descendants explicitly marked with
+ * `ColorInteractiveDirective` — this element does not color itself. Use it when a wrapper should
+ * expand a nested control's hit/visual area (e.g. clicking a checkbox's label should light up the
+ * checkbox itself), never to give a wrapper its own interactive coloring — that's
+ * `ColorInteractiveDirective`.
+ *
+ * Does nothing unless at least one descendant carries `ColorInteractiveDirective` — check for
+ * that before adding this. It was mistakenly added to a component with no such descendant once
+ * already, where it did nothing but was confusing to read.
+ */
+class ColorInteractiveContainerDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColorInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ColorInteractiveContainerDirective, isStandalone: true, selector: "[etColorInteractiveContainer]", host: { classAttribute: "et-color-interactive-container" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractiveContainer]',
+                    host: {
+                        class: 'et-color-interactive-container',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Marks a descendant as NOT counting toward an ancestor's `ColorInteractiveDirective`
+ * `:hover`/`:active` reaction (via the `:has()` guard in color-interactive-styles.component.css).
+ * Use it for content that's incidentally inside an interactive ancestor but isn't part of what
+ * makes that ancestor interactive — e.g. a hint/error block sitting inside a form field's frame.
+ *
+ * This only suppresses the ancestor's OWN reaction to hovering/pressing the excluded element — it
+ * has no effect on custom-property inheritance into descendants past the excluded element. If
+ * what you actually need is "stop my own cosmetic styling from reacting to a parent's unrelated
+ * interaction," this is the wrong tool; that's the class of bug `ColorInteractiveHasFocusDirective`
+ * used to have (see its own comment).
+ */
+class ColorInteractiveExcludeDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveExcludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ColorInteractiveExcludeDirective, isStandalone: true, selector: "[etColorInteractiveExclude]", host: { classAttribute: "et-color-interactive-exclude" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveExcludeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractiveExclude]',
+                    host: {
+                        class: 'et-color-interactive-exclude',
+                    },
+                }]
+        }] });
+
+/**
+ * Tints `--et-theme-color-primary-*` etc. only when a descendant genuinely has `:focus-visible`
+ * (`:has(:focus-visible)`) — never on mouse `:hover`/`:active`. Use this for a wrapper (like a
+ * form field's frame) that should show the theme color while its control is focused, but must
+ * NOT react to incidental mouse interaction with unrelated nested widgets (a toolbar button, a
+ * rendered link) that happen to live inside the same wrapper.
+ *
+ * Deliberately does NOT also carry `ColorInteractiveDirective`'s `et-color-interactive` class:
+ * that class's plain `:hover`/`:active` rules locally override the same (inheriting)
+ * `--et-theme-color-primary-rgb`, so anything bubbling up from ANYWHERE in the subtree would
+ * leak the transient hover/press color into every descendant reading it for unrelated cosmetics —
+ * exactly the bug this directive's only consumer (form-field) shipped once, before the two
+ * behaviors were split apart. If you need the plain hover/active reaction too, add
+ * `ColorInteractiveDirective` explicitly and make sure you actually want both.
+ */
+class ColorInteractiveHasFocusDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColorInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveHasFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ColorInteractiveHasFocusDirective, isStandalone: true, selector: "[etColorInteractiveHasFocus]", host: { classAttribute: "et-color-interactive--has-focus" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveHasFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractiveHasFocus]',
+                    host: {
+                        class: 'et-color-interactive--has-focus',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Makes an element react to ITS OWN `:hover`/`:active`/`:focus-visible`/`[disabled]` by tinting
+ * `--et-theme-color-primary-*`/`-on-primary-*`/`-ink-*` with the current color theme. Use this on
+ * a single, self-contained interactive element — a button, a checkbox, a segmented button.
+ *
+ * Do NOT apply this to a wrapper that also contains OTHER, independently-interactive elements
+ * (e.g. a toolbar with its own buttons, or a form-field's control slot). These are ordinary
+ * inheriting CSS custom properties, so a descendant reading them for its own cosmetics (a caret
+ * color, a link color) gets swept along whenever ANYTHING inside the wrapper is hovered or
+ * clicked — not just when the wrapper itself is the thing being interacted with. That exact bug
+ * shipped once already; see ColorInteractiveContainerDirective/ColorInteractiveHasFocusDirective
+ * for the shapes that avoid it.
+ */
+class ColorInteractiveDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColorInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ColorInteractiveDirective, isStandalone: true, selector: "[etColorInteractive]", host: { classAttribute: "et-color-interactive" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ColorInteractiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractive]',
+                    host: {
+                        class: 'et-color-interactive',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const createCssColorThemeName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
 const [ɵProvideColorThemes, injectColorThemes] = createStaticProvider(undefined, {
     name: 'Color Themes',
 });
-const [ɵProvideThemesPrefix, injectThemesPrefix] = createStaticProvider('et', { name: 'Themes Prefix' });
+const [ɵProvideColorThemesPrefix, injectColorThemesPrefix] = createStaticProvider('et', {
+    name: 'Themes Prefix',
+});
 const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => [
-    ɵProvideColorThemes(themes.map((theme) => theme.name)),
-    ɵProvideThemesPrefix(prefix),
+    ɵProvideColorThemes(themes),
+    ɵProvideColorThemesPrefix(prefix),
 ];
+const injectColorThemeByType = (type) => {
+    const themes = injectColorThemes();
+    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');
 
 /**
  * @deprecated Migrate to Tailwind v4. Intent to remove in v6.
@@ -5127,6 +6949,11 @@ const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => [
 const createSwatchCss = (swatch, isAlt, data) => {
     const varSuffix = isAlt ? 'alt-' + swatch : swatch;
     const varOnSuffix = isAlt ? 'alt-' : '';
+    const inkDefault = data.inkColor?.default || data.color.default;
+    const inkHover = data.inkColor?.hover || inkDefault;
+    const inkFocus = data.inkColor?.focus || data.inkColor?.hover || inkDefault;
+    const inkActive = data.inkColor?.active || inkDefault;
+    const inkDisabled = data.inkColor?.disabled || inkDefault;
     return `
   --et-color-${varSuffix}: ${data.color.default};
   --et-color-${varSuffix}-hover: ${data.color.hover};
@@ -5139,6 +6966,12 @@ const createSwatchCss = (swatch, isAlt, data) => {
   --et-color-${varOnSuffix}on-${swatch}-focus: ${data.onColor.focus || data.onColor.hover || data.onColor.default};
   --et-color-${varOnSuffix}on-${swatch}-active: ${data.onColor.active || data.onColor.default};
   --et-color-${varOnSuffix}on-${swatch}-disabled: ${data.onColor.disabled || data.onColor.default};
+
+  --et-color-${varSuffix}-ink: ${inkDefault};
+  --et-color-${varSuffix}-ink-hover: ${inkHover};
+  --et-color-${varSuffix}-ink-focus: ${inkFocus};
+  --et-color-${varSuffix}-ink-active: ${inkActive};
+  --et-color-${varSuffix}-ink-disabled: ${inkDisabled};
   `;
 };
 /**
@@ -5146,6 +6979,11 @@ const createSwatchCss = (swatch, isAlt, data) => {
  */
 const createRootThemeCss = (themes) => {
     const createVars = (name, swatch) => {
+        const inkDefault = swatch.inkColor?.default || swatch.color.default;
+        const inkHover = swatch.inkColor?.hover || inkDefault;
+        const inkFocus = swatch.inkColor?.focus || swatch.inkColor?.hover || inkDefault;
+        const inkActive = swatch.inkColor?.active || inkDefault;
+        const inkDisabled = swatch.inkColor?.disabled || inkDefault;
         return `
     --et-color-${name}: ${swatch.color.default};
     --et-color-${name}-hover: ${swatch.color.hover};
@@ -5158,11 +6996,17 @@ const createRootThemeCss = (themes) => {
     --et-color-on-${name}-focus: ${swatch.onColor.focus || swatch.onColor.hover || swatch.onColor.default};
     --et-color-on-${name}-active: ${swatch.onColor.active || swatch.onColor.default};
     --et-color-on-${name}-disabled: ${swatch.onColor.disabled || swatch.onColor.default};
+
+    --et-color-${name}-ink: ${inkDefault};
+    --et-color-${name}-ink-hover: ${inkHover};
+    --et-color-${name}-ink-focus: ${inkFocus};
+    --et-color-${name}-ink-active: ${inkActive};
+    --et-color-${name}-ink-disabled: ${inkDisabled};
     `;
     };
     const vars = [];
     for (const theme of themes) {
-        const name = createCssThemeName(theme.name);
+        const name = createCssColorThemeName(theme.name);
         if (theme.secondary || theme.tertiary) {
             vars.push(createVars(`${name}-primary`, theme.primary));
             if (theme.secondary) {
@@ -5190,13 +7034,13 @@ const createRootThemeCss = (themes) => {
  * @deprecated Migrate to Tailwind v4. Intent to remove in v6.
  */
 const createThemeStyle = (theme, isAlt) => {
-    const cssThemeName = createCssThemeName(theme.name);
-    const stringSuffix = isAlt ? '-alt' : '';
+    const cssThemeName = createCssColorThemeName(theme.name);
+    const classPrefix = isAlt ? 'et-color-alt' : 'et-color';
     const selectors = [
         ...((theme.isDefault && !isAlt) || (theme.isDefaultAlt && isAlt)
-            ? [':root', `.et-theme${stringSuffix}--default`]
+            ? [':root', `.${classPrefix}--default`]
             : []),
-        `.et-theme${stringSuffix}--${cssThemeName}`,
+        `.${classPrefix}--${cssThemeName}`,
     ];
     const css = `
   ${selectors.join(', ')} {
@@ -5206,7 +7050,7 @@ const createThemeStyle = (theme, isAlt) => {
   }
   `;
     const style = document.createElement('style');
-    style.id = `et-theme${stringSuffix}--${cssThemeName}`;
+    style.id = `${classPrefix}--${cssThemeName}`;
     style.appendChild(document.createTextNode(css));
     document.head.appendChild(style);
 };
@@ -5242,6 +7086,23 @@ const createTailwindColorThemes = (themes, prefix = 'et') => {
             active: createTailwindRgbVar(theme.primary.onColor.active) || createTailwindRgbVar(theme.primary.onColor.default),
             disabled: createTailwindRgbVar(theme.primary.onColor.disabled) || createTailwindRgbVar(theme.primary.onColor.default),
         };
+        const keyInk = `${prefix}-${theme.name}-ink`;
+        twThemes[keyInk] = {
+            DEFAULT: createTailwindRgbVar(theme.primary.inkColor?.default) || createTailwindRgbVar(theme.primary.color.default),
+            hover: createTailwindRgbVar(theme.primary.inkColor?.hover) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+            focus: createTailwindRgbVar(theme.primary.inkColor?.focus) ||
+                createTailwindRgbVar(theme.primary.inkColor?.hover) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+            active: createTailwindRgbVar(theme.primary.inkColor?.active) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+            disabled: createTailwindRgbVar(theme.primary.inkColor?.disabled) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+        };
     }
     return twThemes;
 };
@@ -5267,82 +7128,278 @@ const provideColorThemes = (themes) => {
         createThemeStyle(theme, true);
     }
     createRootThemeCss(themes);
-    return [ɵProvideColorThemes(themes.map((theme) => theme.name)), ɵProvideThemesPrefix('et')];
+    return [ɵProvideColorThemes(themes), ɵProvideColorThemesPrefix('et')];
 };
 
-const THEME_PROVIDER = new InjectionToken('ThemeProvider');
-class ProvideThemeDirective {
+const COLOR_PROVIDER = new InjectionToken('ColorProvider');
+const FORCED_COLOR_UNSET = Symbol('FORCED_COLOR_UNSET');
+class ProvideColorDirective {
     constructor() {
         this.themes = injectColorThemes({ optional: true });
-        this.prefix = injectThemesPrefix({ optional: true });
+        this.prefix = injectColorThemesPrefix({ optional: true });
         this.injector = inject(Injector);
         this.currentProviderSync = null;
-        this.mainTheme = input(undefined, { ...(ngDevMode ? { debugName: "mainTheme" } : {}), alias: 'etProvideTheme' });
-        this.altTheme = input(undefined, { ...(ngDevMode ? { debugName: "altTheme" } : {}), alias: 'etProvideAltTheme' });
-        this.mainThemeName = computed(() => {
-            const value = this.mainTheme();
-            if (!this.themes || !value)
-                return;
-            if (isDevMode() && !this.themes?.some((theme) => theme === value) && value !== null) {
-                console.error(`Theme ${value} does not exist. Please make sure to add it to provideColorThemes()`);
+        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 createCssThemeName(value);
-        }, ...(ngDevMode ? [{ debugName: "mainThemeName" }] : []));
-        this.altThemeName = computed(() => {
-            const value = this.altTheme();
+            return this.color();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+        this.colorName = computed(() => {
+            const raw = this.effectiveColor();
+            const value = typeof raw === 'object' && raw !== null ? raw.name : raw;
             if (!this.themes || !value)
                 return;
-            if (isDevMode() && !this.themes?.some((theme) => theme === value) && value !== null) {
-                console.warn(`Theme ${value} does not exist. Please make sure to add it to provideColorThemes()`);
+            if (isDevMode() && !this.themes.some((theme) => theme.name === value) && value !== null) {
+                console.error(`Theme ${value} does not exist. Please make sure to add it to provideColorThemesWithTailwind4()`);
             }
-            return createCssThemeName(value);
-        }, ...(ngDevMode ? [{ debugName: "altThemeName" }] : []));
+            return createCssColorThemeName(value);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colorName" }] : /* istanbul ignore next */ []));
         this.themeClass = computed(() => {
-            const themes = [];
             const prefix = this.prefix || 'et';
-            if (this.mainThemeName()) {
-                themes.push(`${prefix}-theme--${this.mainThemeName()}`);
+            if (this.colorName()) {
+                return `${prefix}-color--${this.colorName()}`;
             }
-            if (this.altThemeName()) {
-                themes.push(`${prefix}-theme-alt--${this.altThemeName()}`);
-            }
-            return themes.join(' ');
-        }, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
+            return `${prefix}-color--inherited`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "themeClass" }] : /* istanbul ignore next */ []));
     }
     syncWithProvider(provider) {
         this.currentProviderSync?.destroy();
         runInInjectionContext(this.injector, () => {
             this.currentProviderSync = effect(() => {
-                const provideMainTheme = provider.mainTheme();
-                const provideAltTheme = provider.altTheme();
+                const provideColor = provider.effectiveColor();
                 untracked(() => {
-                    setInputSignal(this.mainTheme, provideMainTheme);
-                    setInputSignal(this.altTheme, provideAltTheme);
+                    if (provideColor === undefined) {
+                        this.clearForcedColor();
+                        return;
+                    }
+                    this.forceColor(provideColor);
                 });
-            }, ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : []));
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : /* istanbul ignore next */ []));
         });
     }
     stopSyncWithProvider() {
+        const hadProviderSync = !!this.currentProviderSync;
         this.currentProviderSync?.destroy();
         this.currentProviderSync = null;
+        if (hadProviderSync) {
+            this.clearForcedColor();
+        }
+    }
+    /** @internal */
+    forceColor(color) {
+        this.forcedColor.set(color);
+    }
+    /** @internal */
+    clearForcedColor() {
+        if (this.forcedColor() === FORCED_COLOR_UNSET) {
+            return;
+        }
+        this.forcedColor.set(FORCED_COLOR_UNSET);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ProvideThemeDirective, isStandalone: true, selector: "[etProvideTheme]", inputs: { mainTheme: { classPropertyName: "mainTheme", publicName: "etProvideTheme", isSignal: true, isRequired: false, transformFunction: null }, altTheme: { classPropertyName: "altTheme", publicName: "etProvideAltTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "themeClass()" } }, providers: [{ provide: THEME_PROVIDER, useExisting: ProvideThemeDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProvideColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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: "21.2.1", ngImport: i0, type: ProvideThemeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProvideColorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[etProvideTheme]',
-                    providers: [{ provide: THEME_PROVIDER, useExisting: ProvideThemeDirective }],
+                    selector: '[etProvideColor]',
+                    providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }],
                     host: {
                         '[class]': 'themeClass()',
                     },
                 }]
-        }], propDecorators: { mainTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideTheme", required: false }] }], altTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideAltTheme", required: false }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideColor", required: false }] }] } });
+
+const SURFACE_TYPE = {
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+const createCssSurfaceName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+const resolveSurfaceByElevation = (themes, type, elevation) => themes.find((t) => t.type === type && t.elevation === elevation) ?? null;
+const [ɵProvideSurfaceThemes, injectSurfaceThemes] = createStaticProvider(undefined, {
+    name: 'Surface Themes',
+});
+const [ɵProvideSurfaceThemesPrefix, injectSurfaceThemesPrefix] = createStaticProvider('et', {
+    name: 'Surface Themes Prefix',
+});
+const provideSurfaceThemesWithTailwind4 = (themes, prefix = 'et') => [
+    ɵProvideSurfaceThemes(themes),
+    ɵProvideSurfaceThemesPrefix(prefix),
+];
+
+const SURFACE_PROVIDER = new InjectionToken('SurfaceProvider');
+const FORCED_SURFACE_UNSET = Symbol('FORCED_SURFACE_UNSET');
+class ProvideSurfaceDirective {
+    constructor() {
+        this.themes = injectSurfaceThemes({ optional: true });
+        this.prefix = injectSurfaceThemesPrefix({ optional: true });
+        this.injector = inject(Injector);
+        this.currentProviderSync = null;
+        this.forcedSurface = signal(FORCED_SURFACE_UNSET, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "forcedSurface" }] : /* istanbul ignore next */ []));
+        this.surface = input(undefined, { ...(ngDevMode ? { debugName: "surface" } : /* istanbul ignore next */ {}), alias: 'etProvideSurface' });
+        this.effectiveSurface = computed(() => {
+            const forcedSurface = this.forcedSurface();
+            if (forcedSurface !== FORCED_SURFACE_UNSET) {
+                return forcedSurface;
+            }
+            return this.surface();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveSurface" }] : /* istanbul ignore next */ []));
+        this.resolvedTheme = computed(() => {
+            const value = this.effectiveSurface();
+            if (!this.themes || !value)
+                return null;
+            const theme = this.themes.find((t) => t.name === value) ?? null;
+            if (isDevMode() && !theme && value !== null) {
+                console.error(`Surface theme ${value} does not exist. Please make sure to add it to provideSurfaceThemesWithTailwind4()`);
+            }
+            return theme;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : /* istanbul ignore next */ []));
+        this.elevation = computed(() => this.resolvedTheme()?.elevation ?? 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
+        this.surfaceType = computed(() => this.resolvedTheme()?.type ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "surfaceType" }] : /* istanbul ignore next */ []));
+        this.surfaceName = computed(() => {
+            const value = this.effectiveSurface();
+            if (!this.themes || !value)
+                return;
+            return createCssSurfaceName(value);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "surfaceName" }] : /* istanbul ignore next */ []));
+        this.surfaceClass = computed(() => {
+            const prefix = this.prefix || 'et';
+            if (this.surfaceName()) {
+                return `${prefix}-surface--${this.surfaceName()}`;
+            }
+            return `${prefix}-surface--inherited`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "surfaceClass" }] : /* istanbul ignore next */ []));
+    }
+    syncWithProvider(provider) {
+        this.currentProviderSync?.destroy();
+        runInInjectionContext(this.injector, () => {
+            this.currentProviderSync = effect(() => {
+                const provideSurface = provider.effectiveSurface();
+                untracked(() => {
+                    if (provideSurface === undefined) {
+                        this.clearForcedSurface();
+                        return;
+                    }
+                    this.forceSurface(provideSurface);
+                });
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : /* istanbul ignore next */ []));
+        });
+    }
+    stopSyncWithProvider() {
+        const hadProviderSync = !!this.currentProviderSync;
+        this.currentProviderSync?.destroy();
+        this.currentProviderSync = null;
+        if (hadProviderSync) {
+            this.clearForcedSurface();
+        }
+    }
+    /** @internal */
+    forceSurface(surface) {
+        this.forcedSurface.set(surface);
+    }
+    /** @internal */
+    clearForcedSurface() {
+        if (this.forcedSurface() === FORCED_SURFACE_UNSET) {
+            return;
+        }
+        this.forcedSurface.set(FORCED_SURFACE_UNSET);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProvideSurfaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: ProvideSurfaceDirective, isStandalone: true, selector: "[etProvideSurface]", inputs: { surface: { classPropertyName: "surface", publicName: "etProvideSurface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "surfaceClass()" } }, providers: [{ provide: SURFACE_PROVIDER, useExisting: ProvideSurfaceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProvideSurfaceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etProvideSurface]',
+                    providers: [{ provide: SURFACE_PROVIDER, useExisting: ProvideSurfaceDirective }],
+                    host: {
+                        '[class]': 'surfaceClass()',
+                    },
+                }]
+        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideSurface", required: false }] }] } });
+
+let uniqueId = 0;
+const [provideSurfaceContextTracker, injectSurfaceContextTracker] = createRootProvider(() => {
+    const entries = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    const topEntry = computed(() => {
+        const stack = entries();
+        return stack.length > 0 ? (stack[stack.length - 1] ?? null) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topEntry" }] : /* istanbul ignore next */ []));
+    const topType = computed(() => topEntry()?.type ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topType" }] : /* istanbul ignore next */ []));
+    const topElevation = computed(() => topEntry()?.elevation ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topElevation" }] : /* istanbul ignore next */ []));
+    const register = (type, elevation) => {
+        const id = `surface-ctx-${uniqueId++}`;
+        const entry = { id, type, elevation };
+        entries.update((e) => [...e, entry]);
+        return () => {
+            entries.update((e) => e.filter((item) => item.id !== id));
+        };
+    };
+    return { topType, topElevation, register };
+}, { name: 'SurfaceContextTracker' });
+
+class SurfaceInteractiveStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SurfaceInteractiveStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: SurfaceInteractiveStylesComponent, isStandalone: true, selector: "et-surface-interactive-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-surface-interactive){--et-surface-interaction-rgb: var(--et-surface-interaction);--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:hover){--et-surface-interaction-rgb: var(--et-surface-interaction-hover, var(--et-surface-interaction));--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:focus-visible){--et-surface-interaction-rgb: var( --et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:active){--et-surface-interaction-rgb: var( --et-surface-interaction-active, var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction))) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive[disabled]),:where(.et-surface-interactive[aria-disabled=true]){--et-surface-interaction-rgb: var( --et-surface-interaction-disabled, var( --et-surface-interaction-active, var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction))) ) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SurfaceInteractiveStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-surface-interactive-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-surface-interactive){--et-surface-interaction-rgb: var(--et-surface-interaction);--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:hover){--et-surface-interaction-rgb: var(--et-surface-interaction-hover, var(--et-surface-interaction));--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:focus-visible){--et-surface-interaction-rgb: var( --et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive:active){--et-surface-interaction-rgb: var( --et-surface-interaction-active, var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction))) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}:where(.et-surface-interactive[disabled]),:where(.et-surface-interactive[aria-disabled=true]){--et-surface-interaction-rgb: var( --et-surface-interaction-disabled, var( --et-surface-interaction-active, var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction))) ) );--et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb))}\n"] }]
+        }] });
+
+/**
+ * Same shape as `ColorInteractiveDirective` — reacts to its own `:hover`/`:focus-visible`/
+ * `:active`/`[disabled]` — but drives `--et-surface-interaction-*`, a neutral/muted tint, instead
+ * of the ambient color theme. Use it for chrome-level interaction feedback that shouldn't borrow
+ * the page's brand color (a tab trigger's hover state, a toggle button that should look neutral
+ * until it's actually active — see `ButtonDirective`'s `mutedUntilPressed`).
+ *
+ * Has no container/exclude/has-focus variants: it has no descendant-cascading CSS at all, so
+ * applying it to a wrapper with independently-interactive children is safe by construction —
+ * unlike `ColorInteractiveDirective`, there's no bubbling-leak failure mode to worry about here.
+ */
+class SurfaceInteractiveDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(SurfaceInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SurfaceInteractiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: SurfaceInteractiveDirective, isStandalone: true, selector: "[etSurfaceInteractive]", host: { classAttribute: "et-surface-interactive" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SurfaceInteractiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etSurfaceInteractive]',
+                    host: {
+                        class: 'et-surface-interactive',
+                    },
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, ClickOutsideDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUS_VISIBLE_TRACKER_TOKEN, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideThemeDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, RuntimeError, SEO_DIRECTIVE_TOKEN, SeoDirective, StructuredDataComponent, THEME_PROVIDER, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyDescriptionBinding, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boundingClientRectToElementRect, buildElementSignal, buildSignalEffects, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createArrayPropertyBinding, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssThemeName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRxHostListener, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, hasCookie, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectPathParam, injectPathParamChanges, injectPathParams, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectTemplateRef, injectThemesPrefix, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, isArray, isElementSignal, isElementVisible, isGroupMatch, isKnockoutMatch, isObject, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, previousSignalValue, provideBoundaryElement, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideTitleConfig, provideTitleStore, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, setInputSignal, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideThemesPrefix };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, ANIMATION_DEBUG_STORAGE_KEY, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColorInteractiveContainerDirective, ColorInteractiveDirective, ColorInteractiveExcludeDirective, ColorInteractiveHasFocusDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUSABLE_SELECTOR, FOCUS_VISIBLE_TRACKER_TOKEN, HtmlToMarkdownPipe, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MarkdownToHtmlPipe, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, animationDebugLog, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyGlobalPosition, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRoute, createRouterState, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createSwipeTracker, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, htmlToMarkdown, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isAnimationDebugEnabled, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, markdownToHtml, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resetPositioningStyles, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map