@ethlete/core 5.0.0-next.0 → 5.0.0-next.10

package/fesm2022/ethlete-core.mjs

@@ -1,12 +1,12 @@
 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, Injector, booleanAttribute, numberAttribute, runInInjectionContext, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, EnvironmentInjector, createComponent, model, ViewContainerRef, input, output, inputBinding, 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';
@@ -77,15 +77,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: "21.2.13", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: AnimatableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatable]',
@@ -623,7 +623,7 @@ 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, ...(ngDevMode ? [{ debugName: "animatedValue" }] : /* istanbul ignore next */ []));
     let rafId = null;
     let currentAnimatedValue = initialValue;
     const cancelAnimation = () => {
@@ -710,41 +710,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 +901,12 @@ const firstElementSignal = (el) => computed(() => {
 });
 
 const signalIsRendered = () => {
-    const isRendered = signal(false, ...(ngDevMode ? [{ debugName: "isRendered" }] : []));
+    const isRendered = signal(false, ...(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, ...(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 +918,7 @@ const createIsRenderedSignal = () => {
     };
 };
 const createCanAnimateSignal = () => {
-    const value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    const value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     nextFrame(() => {
         value.set(true);
     });
@@ -886,102 +927,535 @@ 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(), ...(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(), ...(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))
+    }
+    const ref = effect(() => {
+        const formVal = from();
+        if (options?.skipFirstRun && isFirstRun) {
+            isFirstRun = false;
             return;
-        runInInjectionContext(injector, () => {
-            effects[tokens] = effect(() => {
-                const { currentElements } = untracked(() => elements());
-                const value = signal();
-                for (const el of currentElements) {
-                    const tokenArray = tokens.split(' ');
-                    if (!tokenArray.length)
-                        continue;
+        }
+        untracked(() => {
+            to.set(formVal);
+        });
+    }, ...(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, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const ref = effect(() => {
+        const val = source();
+        if (val) {
+            value.set(val);
+            ref.destroy();
+        }
+    }, ...(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, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    const ref = effect(() => {
+        const val = source();
+        if (!val) {
+            value.set(val);
+            ref.destroy();
+        }
+    }, ...(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, ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+    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(() => {
+    // 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, ...(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, ...(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();
+                for (const el of currentElements) {
+                    const tokenArray = tokens.split(' ');
+                    if (!tokenArray.length)
+                        continue;
                     config.updateFn(el, tokenArray, value);
                 }
             });
@@ -1075,75 +1549,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());
-    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 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 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;
+        }
+    };
+    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);
+            }
+            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 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));
-        }
-    });
-    effect(() => {
-        const els = firstEl();
-        untracked(() => {
-            elementDimensionsSignal.set(initialValue());
-            if (els.previousElement) {
-                observer.disconnect();
+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' };
+                }
+                return { element: firstVisible.target, index: firstIndex, origin: 'start' };
             }
-            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 {
+                if (isEndEdgeVisible) {
+                    const nextIndex = lastIndex + 1;
+                    const element = entries[nextIndex]?.target;
+                    if (!element)
+                        return null;
+                    return { element, index: nextIndex, origin: 'start' };
                 }
-                observer.observe(els.currentElement);
+                return { element: lastVisible.target, index: lastIndex, origin: 'end' };
             }
-        });
-    });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return computed(() => elementDimensionsSignal(), {
-        equal: (a, b) => equal(a, b),
-    });
+        }
+    }
+    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 +1867,8 @@ 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([], ...(ngDevMode ? [{ debugName: "elementIntersectionSignal" }] : /* istanbul ignore next */ []));
+    const observer = signal(null, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
     const currentlyObservedElements = new Set();
     const updateIntersections = (entries) => {
         let currentValues = [...elementIntersectionSignal()];
@@ -1292,7 +1984,7 @@ 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, ...(ngDevMode ? [{ debugName: "lastScrollDirection" }] : /* istanbul ignore next */ []));
     let lastScrollTop = 0;
     let lastScrollLeft = 0;
     toObservable(element)
@@ -1345,230 +2037,42 @@ const signalElementScrollState = (el, options) => {
             if (!isRendered())
                 return;
             const scrollPosition = initialScrollPosition();
-            const element = observedEl().currentElement;
-            if (scrollPosition && element) {
-                if (scrollPosition.left !== undefined)
-                    element.scrollLeft = scrollPosition.left;
-                if (scrollPosition.top !== undefined)
-                    element.scrollTop = scrollPosition.top;
-                ref.destroy();
-            }
-        }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
-    }
-    const notScrollable = (dimensions) => ({
-        canScroll: false,
-        canScrollHorizontally: false,
-        canScrollVertically: false,
-        elementDimensions: dimensions,
-    });
-    return computed(() => {
-        const element = observedEl().currentElement;
-        const dimensions = elementDimensions();
-        // We are not interested what the mutation is, just that there is one.
-        // Changes to the DOM can affect the scroll state of the element.
-        elementMutations();
-        if (!element || !isRendered())
-            return notScrollable(dimensions);
-        const { scrollWidth, scrollHeight, clientHeight, clientWidth } = element;
-        const canScrollHorizontally = scrollWidth > clientWidth;
-        const canScrollVertically = scrollHeight > clientHeight;
-        return {
-            canScroll: canScrollHorizontally || canScrollVertically,
-            canScrollHorizontally,
-            canScrollVertically,
-            elementDimensions: dimensions,
-        };
-    }, { equal: (a, b) => areScrollStatesEqual(a, b) });
-};
-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';
-    renderer.appendChild(document.body, scrollbarRuler);
-    const scrollContainerDimensions = signalElementDimensions(scrollbarRuler);
-    return scrollContainerDimensions;
-});
+            const element = observedEl().currentElement;
+            if (scrollPosition && element) {
+                if (scrollPosition.left !== undefined)
+                    element.scrollLeft = scrollPosition.left;
+                if (scrollPosition.top !== undefined)
+                    element.scrollTop = scrollPosition.top;
+                ref.destroy();
+            }
+        }, ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    }
+    const notScrollable = (dimensions) => ({
+        canScroll: false,
+        canScrollHorizontally: false,
+        canScrollVertically: false,
+        elementDimensions: dimensions,
+    });
+    return computed(() => {
+        const element = observedEl().currentElement;
+        const dimensions = elementDimensions();
+        // We are not interested what the mutation is, just that there is one.
+        // Changes to the DOM can affect the scroll state of the element.
+        elementMutations();
+        if (!element || !isRendered())
+            return notScrollable(dimensions);
+        const { scrollWidth, scrollHeight, clientHeight, clientWidth } = element;
+        const canScrollHorizontally = scrollWidth > clientWidth;
+        const canScrollVertically = scrollHeight > clientHeight;
+        return {
+            canScroll: canScrollHorizontally || canScrollVertically,
+            canScrollHorizontally,
+            canScrollVertically,
+            elementDimensions: dimensions,
+        };
+    }, { equal: (a, b) => areScrollStatesEqual(a, b) });
+};
+const signalHostElementScrollState = () => signalElementScrollState(inject(ElementRef));
 
 let hasWrittenScrollbarSizes = false;
 /**
@@ -1588,7 +2092,7 @@ const writeScrollbarSizeToCssVariables = () => {
     const renderer = injectRenderer();
     const scrollbarDimensions = injectScrollbarDimensions();
     effect(() => {
-        const dimensions = scrollbarDimensions().rect?.();
+        const dimensions = scrollbarDimensions();
         if (!dimensions)
             return;
         renderer.setCssProperties(document.documentElement, {
@@ -1638,11 +2142,11 @@ 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, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    const isInitDragging = signal(false, ...(ngDevMode ? [{ debugName: "isInitDragging" }] : /* istanbul ignore next */ []));
+    const initialDragPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "initialDragPosition" }] : /* istanbul ignore next */ []));
+    const initialScrollPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "initialScrollPosition" }] : /* istanbul ignore next */ []));
+    const dragAmount = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragAmount" }] : /* istanbul ignore next */ []));
     const document = inject(DOCUMENT);
     const canScroll = computed(() => {
         const currentScrollState = scrollState();
@@ -1655,7 +2159,7 @@ const useCursorDragScroll = (el, options) => {
             case 'vertical':
                 return currentScrollState.canScrollVertically;
         }
-    }, ...(ngDevMode ? [{ debugName: "canScroll" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "canScroll" }] : /* istanbul ignore next */ []));
     // Cleanup if the element the cursor drag scroll is bound to gets changed
     effect(() => {
         const { previousElement } = element();
@@ -1674,7 +2178,7 @@ const useCursorDragScroll = (el, options) => {
             if (!el)
                 return;
             if (!currCanScroll || !isEnabled) {
-                renderer.removeStyle(el, 'cursor', 'scrollSnapType', 'scrollBehavior');
+                renderer.removeStyles(el, 'cursor', 'scrollSnapType', 'scrollBehavior');
                 renderer.removeStyle(document.documentElement, 'cursor');
                 renderer.removeClass(el, CURSOR_DRAG_SCROLLING_CLASS, CURSOR_DRAG_INIT_CLASS);
                 return;
@@ -1697,7 +2201,7 @@ const useCursorDragScroll = (el, options) => {
                 renderer.setStyle(el, {
                     cursor: 'grab',
                 });
-                renderer.removeStyle(el, 'scrollSnapType', 'scrollBehavior');
+                renderer.removeStyles(el, 'scrollSnapType', 'scrollBehavior');
                 renderer.removeClass(el, CURSOR_DRAG_SCROLLING_CLASS, CURSOR_DRAG_INIT_CLASS);
                 renderer.removeStyle(document.documentElement, 'cursor');
             }
@@ -1871,7 +2375,7 @@ const createRouterState = (router) => {
 const injectRouterState = memoizeSignal(() => {
     const event = injectRouterEvent();
     const router = inject(Router);
-    const routerState = signal(createRouterState(router), ...(ngDevMode ? [{ debugName: "routerState" }] : []));
+    const routerState = signal(createRouterState(router), ...(ngDevMode ? [{ debugName: "routerState" }] : /* istanbul ignore next */ []));
     effect(() => {
         const e = event();
         untracked(() => {
@@ -1888,31 +2392,31 @@ const injectRouterState = memoizeSignal(() => {
 /** 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, ...(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, ...(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, ...(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, ...(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, ...(ngDevMode ? [{ debugName: "pathParams" }] : /* istanbul ignore next */ []));
     return pathParams;
 };
 const getQueryParamFromUrl = (key) => {
@@ -2099,10 +2603,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 {
@@ -2119,295 +2622,150 @@ 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);
         }
-    };
-    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 [, injectAngularRootElement] = createRootProvider(() => {
-    const appRef = inject(ApplicationRef);
-    const rootElement = signal(null, ...(ngDevMode ? [{ debugName: "rootElement" }] : []));
-    setTimeout(() => {
-        const appComponents = appRef.components;
-        if (appComponents.length > 0) {
-            rootElement.set(appComponents[0]?.location.nativeElement);
+        catch {
+            return null;
         }
-    });
-    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,
-    };
-}, { 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;
+    const write = (value) => {
+        const sessionStorage = getSessionStorage();
+        if (!sessionStorage) {
+            return false;
         }
-        if (option === 'min') {
-            return size;
+        try {
+            sessionStorage.setItem(key, serialize(value));
+            return true;
+        }
+        catch {
+            return false;
         }
-        // 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 remove = () => {
+        const sessionStorage = getSessionStorage();
+        if (!sessionStorage) {
+            return false;
         }
-        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)`);
-            }
+        try {
+            sessionStorage.removeItem(key);
+            return true;
         }
-        if (options.min && options.max) {
-            mediaQueryParts.push('and');
+        catch {
+            return false;
         }
-        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 {
+        read,
+        write,
+        remove,
+    };
+};
+
+const [, injectAngularRootElement] = createRootProvider(() => {
+    const appRef = inject(ApplicationRef);
+    const rootElement = signal(null, ...(ngDevMode ? [{ debugName: "rootElement" }] : /* istanbul ignore next */ []));
+    const poll = () => {
+        const appComponents = appRef.components;
+        if (appComponents.length > 0) {
+            rootElement.set(appComponents[0]?.location.nativeElement);
+        }
+        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, ...(ngDevMode ? [{ debugName: "override" }] : /* istanbul ignore next */ []));
+    const value = computed(() => override() ?? hostElement?.nativeElement ?? document.documentElement, ...(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, ...(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);
@@ -2429,7 +2787,7 @@ 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', ...(ngDevMode ? [{ debugName: "currentLocale" }] : /* istanbul ignore next */ []));
     return {
         currentLocale,
     };
@@ -2458,6 +2816,8 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
     };
     const setStyle = (element, style, flags) => {
         Object.entries(style).forEach(([key, value]) => {
+            if (!Number.isNaN(Number(key)))
+                return;
             if (value !== null && value !== undefined) {
                 renderer.setStyle(element, key, value, flags);
             }
@@ -2466,8 +2826,13 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
             }
         });
     };
-    const removeStyle = (element, ...styles) => {
-        styles.forEach((style) => renderer.removeStyle(element, style));
+    const removeStyle = (element, style, flags) => {
+        if (!Number.isNaN(Number(style)))
+            return;
+        renderer.removeStyle(element, style, flags);
+    };
+    const removeStyles = (element, ...styles) => {
+        styles.forEach((style) => removeStyle(element, style));
     };
     const setCssProperty = (element, name, value) => {
         if (value !== null && value !== undefined) {
@@ -2564,12 +2929,27 @@ 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,
         toggleClass,
         setStyle,
         removeStyle,
+        removeStyles,
         setAttribute,
         removeAttribute,
         setProperty,
@@ -2594,10 +2974,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);
@@ -2643,7 +3093,7 @@ 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, ...(ngDevMode ? [{ debugName: "skipNextEnter" }] : /* istanbul ignore next */ []));
         this.state$
             .pipe(tap((state) => {
             if (state !== 'init') {
@@ -2830,7 +3280,7 @@ class AnimatedLifecycleDirective {
         const { removeClasses, addClasses, expectedState, transitionId, onComplete, cancelSignal } = config;
         this.removeClasses(...removeClasses);
         addClasses.forEach((cls) => this.addClass(cls));
-        timer(0)
+        fromNextFrame()
             .pipe(switchMap(() => this.animatable.isAnimating$), take(1), switchMap((isAnimating) => {
             if (!isAnimating && this.state$.value === expectedState) {
                 return of({ cancelled: false, transitionId });
@@ -2861,15 +3311,15 @@ class AnimatedLifecycleDirective {
     updateState(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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", inputs: { skipNextEnter: { classPropertyName: "skipNextEnter", publicName: "skipNextEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", skipNextEnter: "skipNextEnterChange" }, host: { classAttribute: "et-force-invisible" }, providers: [
             {
                 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: "21.2.13", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatedLifecycle]',
@@ -2894,7 +3344,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) {
@@ -2916,15 +3366,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: "21.2.13", ngImport: i0, type: AnimatedIfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: AnimatedIfDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatedIf]',
@@ -2948,17 +3398,17 @@ 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', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        this.fallbackPlacements = input(...(ngDevMode ? [undefined, { debugName: "fallbackPlacements" }] : /* istanbul ignore next */ []));
+        this.offset = input(null, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        this.arrowPadding = input(4, ...(ngDevMode ? [{ debugName: "arrowPadding" }] : /* istanbul ignore next */ []));
+        this.viewportPadding = input(8, ...(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, ...(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;
@@ -2966,14 +3416,14 @@ 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', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.isMounted = computed(() => this.state() === 'mounted', ...(ngDevMode ? [{ debugName: "isMounted" }] : /* istanbul ignore next */ []));
+        this.isMounting = computed(() => this.state() === 'mounting', ...(ngDevMode ? [{ debugName: "isMounting" }] : /* istanbul ignore next */ []));
+        this.isUnmounted = computed(() => this.state() === 'unmounted', ...(ngDevMode ? [{ debugName: "isUnmounted" }] : /* istanbul ignore next */ []));
+        this.isUnmounting = computed(() => this.state() === 'unmounting', ...(ngDevMode ? [{ debugName: "isUnmounting" }] : /* istanbul ignore next */ []));
+        this.canMount = computed(() => !this.isMounted() && !this.isMounting(), ...(ngDevMode ? [{ debugName: "canMount" }] : /* istanbul ignore next */ []));
+        this.canUnmount = computed(() => (this.isMounted() || this.isMounting()) && !this.isUnmounting(), ...(ngDevMode ? [{ debugName: "canUnmount" }] : /* istanbul ignore next */ []));
+        this.isHidden = signal(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
         this.isMounted$ = toObservable(this.isMounted);
         this.isMounting$ = toObservable(this.isMounting);
         this.isUnmounted$ = toObservable(this.isUnmounted);
@@ -3003,7 +3453,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');
@@ -3026,7 +3476,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({
@@ -3037,7 +3487,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;
@@ -3083,10 +3533,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())
@@ -3224,10 +3674,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: "21.2.13", ngImport: i0, type: AnimatedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: AnimatedOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etAnimatedOverlay]',
@@ -3326,88 +3776,669 @@ const createFlipAnimation = (config) => {
         cleanup();
     };
     return {
-        updateInit,
-        play,
-        cancel,
-        onStart$: onStart$.asObservable(),
-        onFinish$: onFinish$.asObservable(),
-        onCancel$: onCancel$.asObservable(),
+        updateInit,
+        play,
+        cancel,
+        onStart$: onStart$.asObservable(),
+        onFinish$: onFinish$.asObservable(),
+        onCancel$: onCancel$.asObservable(),
+    };
+};
+
+class ClickOutsideDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.didClickOutside = output({ alias: 'etClickOutside' });
+        fromEvent(this.document.documentElement, 'click')
+            .pipe(tap((event) => {
+            const activeElement = event.target;
+            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.13", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ClickOutsideDirective, isStandalone: true, selector: "[etClickOutside]", outputs: { didClickOutside: "etClickOutside" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: RepeatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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.13", 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, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        this._startEl = signal(null, ...(ngDevMode ? [{ debugName: "_startEl" }] : /* istanbul ignore next */ []));
+        this._endEl = signal(null, ...(ngDevMode ? [{ debugName: "_endEl" }] : /* istanbul ignore next */ []));
+        this._startIntersection = signalElementIntersection(this._startEl, {
+            root: this.elementRef,
+            enabled: this.enabled,
+        });
+        this._endIntersection = signalElementIntersection(this._endEl, {
+            root: this.elementRef,
+            enabled: this.enabled,
+        });
+        this.isAtStart = computed(() => this._startIntersection()[0]?.isIntersecting ?? false, ...(ngDevMode ? [{ debugName: "isAtStart" }] : /* istanbul ignore next */ []));
+        this.isAtEnd = computed(() => this._endIntersection()[0]?.isIntersecting ?? false, ...(ngDevMode ? [{ debugName: "isAtEnd" }] : /* istanbul ignore next */ []));
+    }
+    _registerStart(el) {
+        this._startEl.set(el);
+    }
+    _registerEnd(el) {
+        this._endEl.set(el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ScrollObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", 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: "21.2.13", ngImport: i0, type: ScrollObserverEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ScrollObserverEndDirective, isStandalone: true, selector: "[etScrollObserverEnd]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: ScrollObserverStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ScrollObserverStartDirective, isStandalone: true, selector: "[etScrollObserverStart]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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, ...(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: "21.2.13", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", 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 createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, renderer) => {
+    const arrowElement = paneElement.querySelector('[et-floating-arrow]');
+    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 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,
+            });
+            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);
+    }
+    applyCenteredPosition(hostElement, paneElement, renderer, strategy);
+    return () => undefined;
+};
+
+const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
+    const _state = signal('mounting', ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    const _componentInstance = signal(null, ...(ngDevMode ? [{ debugName: "_componentInstance" }] : /* istanbul ignore next */ []));
+    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);
+        },
+        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 ClickOutsideDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.document = inject(DOCUMENT);
-        this.didClickOutside = output({ alias: 'etClickOutside' });
-        fromEvent(this.document.documentElement, 'click')
-            .pipe(tap((event) => {
-            const activeElement = event.target;
-            const isInside = this.elementRef.nativeElement.contains(activeElement);
-            if (isInside)
+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([], ...(ngDevMode ? [{ debugName: "openEntriesState" }] : /* istanbul ignore next */ []));
+    const openEntries = computed(() => openEntriesState(), ...(ngDevMode ? [{ debugName: "openEntries" }] : /* istanbul ignore next */ []));
+    let rootElement = null;
+    const getRootElement = () => {
+        if (rootElement) {
+            return rootElement;
+        }
+        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');
+        renderer.addClass(paneElement, 'et-overlay-runtime-pane');
+        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 ?? []));
+        renderer.addClass(paneElement, ...(config.paneClass ?? []));
+        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 }));
+        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)),
+        });
+        appRef.attachView(componentRef.hostView);
+        overlayRef.attachComponentRef(componentRef);
+        overlayRef.beforeOpenedSubject.next();
+        overlayRef.beforeOpenedSubject.complete();
+        openEntriesState.update((entries) => [...entries, overlayRef]);
+        cleanupFns.push(setupPositioning(config, hostElement, paneElement, overlayRef, renderer));
+        const destroyMountedOverlay = (closeEvent) => {
+            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);
+        };
+        const beginClose = (closeEvent) => {
+            if (!overlayRef.beginClose(closeEvent)) {
                 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"] }] } });
-
-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 lifecycle = getAnimatedLifecycle(componentRef);
+            if (!lifecycle) {
+                destroyMountedOverlay(closeEvent);
+                return;
+            }
+            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));
-                    }
+                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;
                 }
-                else if (viewsToCreate < 0) {
-                    for (let i = 0; i < -viewsToCreate; i++) {
-                        this.viewContainerRef.remove(this.viewContainerRef.length - 1);
-                    }
-                    views.splice(viewsToCreate);
+                const target = event.target;
+                if (!isHTMLElement(target) || paneElement.contains(target)) {
+                    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 }] }] } });
+                overlayRef.close(undefined, 'outside-pointer');
+            };
+            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') {
+                return;
+            }
+            const lifecycle = getAnimatedLifecycle(componentRef);
+            if (!lifecycle) {
+                applyInitialFocus(paneElement, autoFocus, document);
+                overlayRef.markOpened();
+                return;
+            }
+            lifecycle.enter();
+            lifecycle.state$
+                .pipe(filter((state) => state === 'entered'), take(1))
+                .subscribe(() => {
+                applyInitialFocus(paneElement, autoFocus, document);
+                overlayRef.markOpened();
+            });
+        });
+        return overlayRef;
+    };
+    destroyRef.onDestroy(() => {
+        openEntriesState().forEach((entry) => entry.close(undefined, 'api'));
+        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: "21.2.13", ngImport: i0, type: NormalizeGameResultTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: NormalizeGameResultTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeGameResultType' }]
         }] });
@@ -3449,10 +4480,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: "21.2.13", ngImport: i0, type: NormalizeMatchStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: NormalizeMatchStatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchState' }]
         }] });
@@ -3479,10 +4510,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: "21.2.13", ngImport: i0, type: NormalizeMatchParticipantsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: NormalizeMatchParticipantsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchParticipants' }]
         }] });
@@ -3536,10 +4567,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: "21.2.13", ngImport: i0, type: NormalizeMatchScorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: NormalizeMatchScorePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchScore' }]
         }] });
@@ -3672,10 +4703,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: "21.2.13", ngImport: i0, type: NormalizeMatchTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: NormalizeMatchTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchType' }]
         }] });
@@ -3714,6 +4745,8 @@ const normalizeMatchType = (matchType) => {
                 i18n: 'match-type.pools',
                 text: 'Pools',
             };
+        default:
+            return null;
     }
 };
 
@@ -3721,10 +4754,10 @@ 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: "21.2.13", ngImport: i0, type: InferMimeTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: InferMimeTypePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'inferMimeType',
@@ -3738,6 +4771,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)
@@ -3930,10 +4967,10 @@ 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: "21.2.13", ngImport: i0, type: ToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: ToArrayPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'toArray' }]
         }] });
@@ -3965,14 +5002,14 @@ const createElementDictionary = () => {
     const firstElement = computed(() => {
         const id = dictionary.ids()[0];
         return id ? (dictionary.elements()[id] ?? null) : null;
-    }, ...(ngDevMode ? [{ debugName: "firstElement" }] : []));
+    }, ...(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" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "firstId" }] : /* istanbul ignore next */ []));
+    const ids = computed(() => dictionary.ids(), ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    const elements = computed(() => ids().map((id) => dictionary.elements()[id]), ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    const isEmpty = computed(() => dictionary.ids().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     const has = (id) => {
         return dictionary.ids().includes(id);
     };
@@ -4056,7 +5093,7 @@ 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(), ...(ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []));
     const attachedElements = {
         first: dictionary.firstElement,
         firstId: dictionary.firstId,
@@ -4142,7 +5179,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: () => {
@@ -4159,10 +5196,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: "21.2.13", ngImport: i0, type: PropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: PropsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etProps]',
@@ -4209,6 +5246,76 @@ 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'], ...(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: "21.2.13", ngImport: i0, type: ResizeHandlesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: "21.2.13", 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);
@@ -4242,7 +5349,7 @@ 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()) ?? [], ...(ngDevMode ? [{ debugName: "valuesList" }] : /* istanbul ignore next */ []));
         valuesList().forEach((value, index) => {
             applyConfigFn(computed(() => configBuilder(value, index)));
         });
@@ -4287,7 +5394,7 @@ 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(), ...(ngDevMode ? [{ debugName: "linksByKey" }] : /* istanbul ignore next */ []));
     let priorityCounter = 0;
     const getLinkKey = (linkConfig) => {
         const isMultiInstance = config.multiInstanceRels.has(linkConfig.rel) || linkConfig.allowMultiple;
@@ -4449,7 +5556,7 @@ 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(), ...(ngDevMode ? [{ debugName: "titleParts" }] : /* istanbul ignore next */ []));
     const { currentLocale } = injectLocale();
     const titleService = inject(Title);
     const isRouterInitialized = injectIsRouterInitialized();
@@ -4477,7 +5584,7 @@ const [provideTitleStore, injectTitleStore] = createRootProvider(() => {
             finalTextParts.push(config.transformer(config.suffixPart.text, currentLocale()));
         }
         return finalTextParts.join(` ${config.divider} `);
-    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     const addPart = (id, part) => {
         titleParts.update((parts) => new Map(parts).set(id, part));
     };
@@ -4577,7 +5684,7 @@ 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(), ...(ngDevMode ? [{ debugName: "metaTagsBySelector" }] : /* istanbul ignore next */ []));
     let priorityCounter = 0;
     const getSelector = (config) => {
         if (config.name)
@@ -5004,10 +6111,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: "21.2.13", ngImport: i0, type: SeoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: SeoDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{ provide: SEO_DIRECTIVE_TOKEN, useExisting: SeoDirective }],
@@ -5021,7 +6128,7 @@ 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(), ...(ngDevMode ? [{ debugName: "scripts" }] : /* istanbul ignore next */ []));
     const getTargetElement = () => {
         return config.placement === 'head' ? document.head : document.body;
     };
@@ -5062,7 +6169,7 @@ const applyStructuredDataBinding = (binding) => {
 class StructuredDataComponent {
     constructor() {
         this.sanitizer = inject(DomSanitizer);
-        this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.jsonLD = computed(() => {
             const data = this.data();
             if (!data) {
@@ -5071,12 +6178,12 @@ 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" }] : []));
+        }, ...(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: "21.2.13", ngImport: i0, type: StructuredDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", ngImport: i0, type: StructuredDataComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-structured-data',
@@ -5090,15 +6197,114 @@ 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: "21.2.13", ngImport: i0, type: ColorInteractiveStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveStylesComponent, isStandalone: true, selector: "et-color-interactive-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-color-interactive-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:hover) :where(.et-color-interactive){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),:where(.et-color-interactive-container:active) :where(.et-color-interactive){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive--has-focus:has(:focus-visible)){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}:where(.et-color-interactive[disabled]),:where(.et-color-interactive[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb))}\n"] }]
+        }] });
+
+class ColorInteractiveContainerDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColorInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveContainerDirective, isStandalone: true, selector: "[etColorInteractiveContainer]", host: { classAttribute: "et-color-interactive-container" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractiveContainer]',
+                    host: {
+                        class: 'et-color-interactive-container',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorInteractiveExcludeDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveExcludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveExcludeDirective, isStandalone: true, selector: "[etColorInteractiveExclude]", host: { classAttribute: "et-color-interactive-exclude" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveExcludeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractiveExclude]',
+                    host: {
+                        class: 'et-color-interactive-exclude',
+                    },
+                }]
+        }] });
+
+class ColorInteractiveHasFocusDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColorInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveHasFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveHasFocusDirective, isStandalone: true, selector: "[etColorInteractiveHasFocus]", host: { classAttribute: "et-color-interactive et-color-interactive--has-focus" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveHasFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColorInteractiveHasFocus]',
+                    host: {
+                        class: 'et-color-interactive et-color-interactive--has-focus',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorInteractiveDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColorInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ColorInteractiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: ColorInteractiveDirective, isStandalone: true, selector: "[etColorInteractive]", host: { classAttribute: "et-color-interactive" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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.
@@ -5106,6 +6312,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};
@@ -5118,6 +6329,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};
   `;
 };
 /**
@@ -5125,6 +6342,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};
@@ -5137,11 +6359,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) {
@@ -5169,7 +6397,7 @@ const createRootThemeCss = (themes) => {
  * @deprecated Migrate to Tailwind v4. Intent to remove in v6.
  */
 const createThemeStyle = (theme, isAlt) => {
-    const cssThemeName = createCssThemeName(theme.name);
+    const cssThemeName = createCssColorThemeName(theme.name);
     const stringSuffix = isAlt ? '-alt' : '';
     const selectors = [
         ...((theme.isDefault && !isAlt) || (theme.isDefaultAlt && isAlt)
@@ -5221,6 +6449,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;
 };
@@ -5246,82 +6491,250 @@ 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, ...(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();
+        }, ...(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);
+        }, ...(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.altThemeName()) {
-                themes.push(`${prefix}-theme-alt--${this.altThemeName()}`);
+            if (this.colorName()) {
+                return `${prefix}-color--${this.colorName()}`;
             }
-            return themes.join(' ');
-        }, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
+            return `${prefix}-color--inherited`;
+        }, ...(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" }] : []));
+            }, ...(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: "21.2.13", ngImport: i0, type: ProvideColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", 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, ...(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();
+        }, ...(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;
+        }, ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : /* istanbul ignore next */ []));
+        this.elevation = computed(() => this.resolvedTheme()?.elevation ?? 0, ...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
+        this.surfaceType = computed(() => this.resolvedTheme()?.type ?? null, ...(ngDevMode ? [{ debugName: "surfaceType" }] : /* istanbul ignore next */ []));
+        this.surfaceName = computed(() => {
+            const value = this.effectiveSurface();
+            if (!this.themes || !value)
+                return;
+            return createCssSurfaceName(value);
+        }, ...(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`;
+        }, ...(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);
+                });
+            }, ...(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: "21.2.13", ngImport: i0, type: ProvideSurfaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", 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: "21.2.13", 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([], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    const topEntry = computed(() => {
+        const stack = entries();
+        return stack.length > 0 ? (stack[stack.length - 1] ?? null) : null;
+    }, ...(ngDevMode ? [{ debugName: "topEntry" }] : /* istanbul ignore next */ []));
+    const topType = computed(() => topEntry()?.type ?? null, ...(ngDevMode ? [{ debugName: "topType" }] : /* istanbul ignore next */ []));
+    const topElevation = computed(() => topEntry()?.elevation ?? 0, ...(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: "21.2.13", ngImport: i0, type: SurfaceInteractiveStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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: "21.2.13", 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"] }]
+        }] });
+
+class SurfaceInteractiveDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(SurfaceInteractiveStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SurfaceInteractiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SurfaceInteractiveDirective, isStandalone: true, selector: "[etSurfaceInteractive]", host: { classAttribute: "et-surface-interactive" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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, 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, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, StructuredDataComponent, SurfaceInteractiveDirective, ToArrayPipe, TypedQueryList, ValidateAtLeastOneRequired, Validators, applyAlternateBinding, applyAlternateLanguagesBindings, applyArticleBindings, applyAuthorBinding, applyCanonicalBinding, applyCenteredPosition, applyDescriptionBinding, applyHeadBinding, applyHeadTitleBinding, applyHostListener, applyHostListeners, applyInitialFocus, applyKeywordsBinding, applyLinkBinding, applyMetaBinding, applyNextBinding, applyOgBinding, applyOpenGraphBindings, applyPrevBinding, applyResourceHintsBindings, applyRobotsBinding, applySocialMediaBindings, applyStructuredDataBinding, applyTwitterCardBindings, areScrollStatesEqual, bindProps, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, buildElementSignal, buildSignalEffects, canUseSessionMemory, clamp, clone, cloneFormGroup, computedTillFalsy, computedTillTruthy, controlValueSignal, controlValueSignalWithPrevious, createAnchoredPositionCleanup, createArrayPropertyBinding, createAutoSessionMemoryKey, createBulkPropertyBinding, createCanAnimateSignal, createComponentId, createCssColorThemeName, createCssSurfaceName, createDependencyStash, createDestroy, createDocumentElementSignal, createElementDictionary, createElementDimensions, createEmptyElementSignal, createFlipAnimation, createFlipAnimationGroup, createHostProps, createIsRenderedSignal, createLogger, createOverlayRuntimeRef, createPropHandlers, createPropertyBinding, createProps, createProvider, createRootProvider, createRootThemeCss, createRxHostListener, createSessionMemory, createSetup, createStaticProvider, createStaticRootProvider, createSwatchCss, createTailwindColorThemes, createTailwindCssVar, createTailwindRgbVar, createThemeStyle, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, focusElement, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFocusableElements, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getHeadingElement, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, injectBreakpointIsMatched, injectBreakpointObserver, injectCanHover, injectColorThemes, injectColorThemesPrefix, injectCurrentBreakpoint, injectDeviceInputType, injectDisplayOrientation, injectErrorTheme, injectFocusVisibleTracker, injectFragment, injectHasPrecisionInput, injectHasTouchInput, injectHostElement, injectIs2Xl, injectIsLandscape, injectIsLg, injectIsMd, injectIsPortrait, injectIsRouterInitialized, injectIsSm, injectIsXl, injectIsXs, injectLinkStore, injectLinkStoreConfig, injectLocale, injectMediaQueryIsMatched, injectMetaConfig, injectMetaStore, injectObserveBreakpoint, injectObserveMediaQuery, injectOverlayRuntime, injectPathParam, injectPathParamChanges, injectPathParams, injectQueryParam, injectQueryParamChanges, injectQueryParams, injectRenderer, injectRoute, injectRouteData, injectRouteDataItem, injectRouteTitle, injectRouterEvent, injectRouterState, injectScrollbarDimensions, injectStructuredDataConfig, injectStructuredDataStore, injectStyleManager, injectSuccessTheme, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, injectWarningTheme, isArray, isElementSignal, isElementVisible, isFocusable, isGroupMatch, isHTMLElement, isKnockoutMatch, isObject, maybeSignalValue, memoizeSignal, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, provideBreakpointObserver, provideColorThemes, provideColorThemesWithTailwind4, provideFocusVisibleTracker, provideLinkStore, provideLinkStoreConfig, provideLocale, provideMetaConfig, provideMetaStore, provideOverlayRuntime, provideRenderer, provideStructuredDataConfig, provideStructuredDataStore, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resolveSurfaceByElevation, round, routerDisableScrollTop, scrollToElement, setBackdropStyles, setBaseElementStyles, setCookie, setInputSignal, setupFocusTrap, setupPositioning, setupScrollRestoration, signalAnimatedNumber, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementLastScrollDirection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementLastScrollDirection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, toStringBinding, transformOrReturn, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map