@ethlete/core 5.0.0-next.4 → 5.0.0-next.6

package/fesm2022/ethlete-core.mjs

@@ -1,11 +1,11 @@
 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, model, ViewContainerRef, input, output, 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 } 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 { coerceElement } from '@angular/cdk/coercion';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { Router, NavigationEnd, NavigationSkipped } from '@angular/router';
 import { Overlay } from '@angular/cdk/overlay';
@@ -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))
@@ -886,698 +927,1127 @@ 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" }] : []));
+    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 signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
 
-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 previousSignalValue = (signal) => {
+    const obs = toObservable(signal).pipe(pairwise(), map(([prev]) => prev));
+    return toSignal(obs);
 };
-
-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 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;
-                    config.updateFn(el, tokenArray, value);
-                }
-            });
-        });
-    };
-    const pushMany = (map) => {
-        for (const [tokens, signal] of Object.entries(map)) {
-            push(tokens, signal);
         }
-    };
-    const remove = (tokens) => {
-        effects[tokens]?.destroy();
-        delete effects[tokens];
-        for (const el of elements().currentElements) {
-            const tokenArray = tokens.split(' ');
-            if (!tokenArray.length)
-                continue;
-            config.cleanupFn(el, tokenArray);
+        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();
         }
-    };
-    const removeMany = (tokens) => {
-        for (const token of tokens) {
-            remove(token);
+    }, ...(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;
     };
-    pushMany(config.tokenMap);
-    return { remove, removeMany, has, push, pushMany };
 };
-const signalClasses = (el, classMap) => {
+
+/** 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();
-    return buildSignalEffects(el, {
-        tokenMap: classMap,
-        cleanupFn: (el, tokens) => tokens.forEach((token) => renderer.removeClass(el, token)),
-        updateFn: (el, tokens, condition) => {
-            if (!condition) {
-                tokens.forEach((token) => renderer.removeClass(el, token));
-            }
-            else {
-                tokens.forEach((token) => renderer.addClass(el, token));
-            }
-        },
+    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 signalHostClasses = (classMap) => signalClasses(inject(ElementRef), classMap);
-const ALWAYS_TRUE_ATTRIBUTE_KEYS = ['disabled', 'readonly', 'required', 'checked', 'selected', 'hidden', 'inert'];
-const signalAttributes = (el, attributeMap) => {
-    const renderer = injectRenderer();
-    return buildSignalEffects(el, {
-        tokenMap: attributeMap,
-        cleanupFn: (el, tokens) => tokens.forEach((token) => el.removeAttribute(token)),
-        updateFn: (el, tokens, condition) => {
-            for (const token of tokens) {
-                if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(token)) {
-                    if (condition) {
-                        renderer.setAttribute(el, token, '');
-                    }
-                    else {
-                        renderer.removeAttribute(el, token);
-                    }
-                    continue;
-                }
-                if (condition === null || condition === undefined) {
-                    renderer.removeAttribute(el, token);
-                }
-                else {
-                    renderer.setAttribute(el, token, `${condition}`);
+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" }] : []));
+    // 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;
 };
-const signalHostAttributes = (attributeMap) => signalAttributes(inject(ElementRef), attributeMap);
-const signalStyles = (el, styleMap) => {
-    const renderer = injectRenderer();
-    return buildSignalEffects(el, {
-        tokenMap: styleMap,
-        cleanupFn: (el, tokens) => tokens.forEach((token) => renderer.removeStyle(el, token, RendererStyleFlags2.DashCase)),
-        updateFn: (el, tokens, condition) => {
-            for (const token of tokens) {
-                if (condition === null || condition === undefined) {
-                    renderer.removeStyle(el, token, RendererStyleFlags2.DashCase);
-                }
-                else {
-                    renderer.setStyle(el, {
-                        [token]: `${condition}`,
-                    }, RendererStyleFlags2.DashCase);
-                }
-            }
-        },
+/**
+ * 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 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 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 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 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 signalElementDimensions = (el) => {
+/**
+ * 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" } : {}), 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 initialValue = () => createElementDimensions(firstEl().currentElement);
-    const elementDimensionsSignal = signal(initialValue(), ...(ngDevMode ? [{ debugName: "elementDimensionsSignal" }] : []));
-    const observer = new ResizeObserver((e) => {
+    const elementMutationsSignal = signal(null, ...(ngDevMode ? [{ debugName: "elementMutationsSignal" }] : []));
+    const observer = new MutationObserver((e) => {
         if (!isRendered())
             return;
         const entry = e[0];
         if (entry) {
-            const target = entry.target;
-            const newDimensions = createElementDimensions(target);
-            zone.run(() => elementDimensionsSignal.set(newDimensions));
+            zone.run(() => elementMutationsSignal.set(entry));
         }
     });
     effect(() => {
         const els = firstEl();
-        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);
-            }
-        });
+        elementMutationsSignal.set(null);
+        if (els.previousElement) {
+            observer.disconnect();
+        }
+        if (els.currentElement) {
+            observer.observe(els.currentElement, options);
+        }
     });
     destroyRef.onDestroy(() => observer.disconnect());
-    return computed(() => elementDimensionsSignal(), {
-        equal: (a, b) => equal(a, b),
-    });
+    return elementMutationsSignal.asReadonly();
 };
-const signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
+const signalHostElementMutations = (options) => signalElementMutations(inject(ElementRef), options);
 
-const createPositionObject = (entry) => {
-    const boundingRect = entry.boundingClientRect;
-    const rootBounds = entry.rootBounds;
-    let isAbove = false;
-    let isBelow = false;
-    let isLeft = false;
-    let isRight = false;
-    if (rootBounds) {
-        isAbove = boundingRect.bottom < rootBounds.top;
-        isBelow = boundingRect.top > rootBounds.bottom;
-        isLeft = boundingRect.right < rootBounds.left;
-        isRight = boundingRect.left > rootBounds.right;
-    }
-    // We cant use entry.isIntersecting to determine actual visibility since we are using a big threshold array to get more intersection events.
-    const isVisible = !isAbove && !isBelow && !isLeft && !isRight && entry.intersectionRatio > 0;
-    return {
-        isAbove,
-        isBelow,
-        isLeft,
-        isRight,
-        isVisible,
-    };
-};
-const signalElementIntersection = (el, options) => {
-    const destroyRef = inject(DestroyRef);
+const signalElementChildren = (el) => {
     const elements = buildElementSignal(el);
-    const root = firstElementSignal(options?.root ? buildElementSignal(options?.root) : createEmptyElementSignal());
-    const zone = inject(NgZone);
+    const firstEl = firstElementSignal(elements);
     const isRendered = signalIsRendered();
-    const isEnabled = options?.enabled ?? signal(true);
-    const elementIntersectionSignal = signal([], ...(ngDevMode ? [{ debugName: "elementIntersectionSignal" }] : []));
-    const observer = signal(null, ...(ngDevMode ? [{ debugName: "observer" }] : []));
-    const currentlyObservedElements = new Set();
-    const updateIntersections = (entries) => {
-        let currentValues = [...elementIntersectionSignal()];
-        for (const entry of entries) {
-            const existingEntryIndex = currentValues.findIndex((v) => v.target === entry.target);
-            // Round the intersection ratio to the nearest 0.01 to avoid floating point errors and system scaling issues.
-            const roundedIntersectionRatio = Math.round(entry.intersectionRatio * 100) / 100;
-            const intersectionEntry = {
-                boundingClientRect: entry.boundingClientRect,
-                intersectionRatio: roundedIntersectionRatio,
-                intersectionRect: entry.intersectionRect,
-                isIntersecting: entry.isIntersecting,
-                rootBounds: entry.rootBounds,
-                target: entry.target,
-                time: entry.time,
-                ...createPositionObject(entry),
-            };
-            if (existingEntryIndex !== -1) {
-                currentValues = [
-                    ...currentValues.slice(0, existingEntryIndex),
-                    intersectionEntry,
-                    ...currentValues.slice(existingEntryIndex + 1),
-                ];
-            }
-            else {
-                currentValues = [...currentValues, intersectionEntry];
+    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);
             }
         }
-        zone.run(() => elementIntersectionSignal.set(currentValues));
-    };
-    const updateIntersectionObserver = (rendered, enabled, rootEl) => {
-        observer()?.disconnect();
-        currentlyObservedElements.clear();
-        if (!rendered || !enabled) {
-            observer.set(null);
-            return;
-        }
-        const newObserver = new IntersectionObserver((entries) => updateIntersections(entries), {
-            ...options,
-            root: rootEl,
-        });
-        observer.set(newObserver);
-    };
-    const updateObservedElements = (observer, elements) => {
-        const rootEl = root().currentElement;
-        if (!observer)
-            return;
-        const currIntersectionValue = elementIntersectionSignal();
-        const newIntersectionValue = [];
-        for (const el of elements.currentElements) {
-            if (currentlyObservedElements.has(el)) {
-                const existingEntryIndex = currIntersectionValue.findIndex((v) => v.target === el);
-                const existingEntry = currIntersectionValue[existingEntryIndex];
-                if (!existingEntry) {
-                    console.warn('Could not find existing entry for element. The intersection observer might be broken now.', el);
-                    continue;
-                }
-                newIntersectionValue.push(existingEntry);
+        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 initialElementVisibility = isElementVisible({
-                container: rootEl,
-                element: el,
-            });
-            if (!initialElementVisibility) {
-                console.error('No visibility data found for element.', {
-                    element: el,
-                    container: rootEl,
-                });
+            const tokens = Object.keys(config.tokenMap)
+                .map((key) => key.split(' '))
+                .flat();
+            if (!tokens.length)
                 continue;
-            }
-            const intersectionEntry = {
-                boundingClientRect: initialElementVisibility.elementRect,
-                intersectionRatio: initialElementVisibility.intersectionRatio,
-                intersectionRect: initialElementVisibility.elementRect,
-                isIntersecting: initialElementVisibility.isIntersecting,
-                rootBounds: initialElementVisibility.containerRect,
-                target: el,
-                time: performance.now(),
-            };
-            newIntersectionValue.push({
-                ...intersectionEntry,
-                ...createPositionObject(intersectionEntry),
-            });
-            currentlyObservedElements.add(el);
-            observer.observe(el);
+            config.cleanupFn(previousEl, tokens);
         }
-        for (const el of elements.previousElements) {
-            if (elements.currentElements.includes(el))
+        for (const currentEl of currentElements) {
+            if (previousElements.includes(currentEl))
                 continue;
-            observer.unobserve(el);
-            currentlyObservedElements.delete(el);
+            for (const [tokens, condition] of Object.entries(config.tokenMap)) {
+                untracked(() => {
+                    const tokenArray = tokens.split(' ');
+                    if (!tokenArray.length)
+                        return;
+                    config.updateFn(currentEl, tokenArray, condition());
+                });
+            }
         }
-        elementIntersectionSignal.set(newIntersectionValue);
-    };
-    effect(() => {
-        const rootEl = root().currentElement;
-        const rendered = isRendered();
-        const enabled = isEnabled();
-        untracked(() => updateIntersectionObserver(rendered, enabled, rootEl));
     });
-    effect(() => {
-        const els = elements();
-        const obs = observer();
-        untracked(() => updateObservedElements(obs, els));
-    });
-    destroyRef.onDestroy(() => observer()?.disconnect());
-    return elementIntersectionSignal.asReadonly();
-};
-const signalHostElementIntersection = (options) => signalElementIntersection(inject(ElementRef), options);
-
-const signalElementLastScrollDirection = (el) => {
-    const elements = buildElementSignal(el);
-    const element = firstElementSignal(elements);
-    const destroyRef = inject(DestroyRef);
-    const lastScrollDirection = signal(null, ...(ngDevMode ? [{ debugName: "lastScrollDirection" }] : []));
-    let lastScrollTop = 0;
-    let lastScrollLeft = 0;
-    toObservable(element)
-        .pipe(switchMap(({ currentElement }) => {
-        if (!currentElement) {
-            lastScrollDirection.set(null);
-            lastScrollTop = 0;
-            lastScrollLeft = 0;
-            return of(null);
+    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);
+                }
+            });
+        });
+    };
+    const pushMany = (map) => {
+        for (const [tokens, signal] of Object.entries(map)) {
+            push(tokens, signal);
         }
-        return fromEvent(currentElement, 'scroll').pipe(tap(() => {
-            const { scrollTop, scrollLeft } = currentElement;
-            const time = Date.now();
-            if (scrollTop > lastScrollTop) {
-                lastScrollDirection.set({ type: 'down', time });
-            }
-            else if (scrollTop < lastScrollTop) {
-                lastScrollDirection.set({ type: 'up', time });
-            }
-            else if (scrollLeft > lastScrollLeft) {
-                lastScrollDirection.set({ type: 'right', time });
+    };
+    const remove = (tokens) => {
+        effects[tokens]?.destroy();
+        delete effects[tokens];
+        for (const el of elements().currentElements) {
+            const tokenArray = tokens.split(' ');
+            if (!tokenArray.length)
+                continue;
+            config.cleanupFn(el, tokenArray);
+        }
+    };
+    const removeMany = (tokens) => {
+        for (const token of tokens) {
+            remove(token);
+        }
+    };
+    pushMany(config.tokenMap);
+    return { remove, removeMany, has, push, pushMany };
+};
+const signalClasses = (el, classMap) => {
+    const renderer = injectRenderer();
+    return buildSignalEffects(el, {
+        tokenMap: classMap,
+        cleanupFn: (el, tokens) => tokens.forEach((token) => renderer.removeClass(el, token)),
+        updateFn: (el, tokens, condition) => {
+            if (!condition) {
+                tokens.forEach((token) => renderer.removeClass(el, token));
             }
-            else if (scrollLeft < lastScrollLeft) {
-                lastScrollDirection.set({ type: 'left', time });
+            else {
+                tokens.forEach((token) => renderer.addClass(el, token));
             }
-            lastScrollTop = scrollTop;
-            lastScrollLeft = scrollLeft;
-        }));
-    }), takeUntilDestroyed(destroyRef))
-        .subscribe();
-    return lastScrollDirection.asReadonly();
+        },
+    });
 };
-const signalHostElementLastScrollDirection = () => signalElementLastScrollDirection(inject(ElementRef));
-
-const areScrollStatesEqual = (a, b) => {
-    return (a.canScroll === b.canScroll &&
-        a.canScrollHorizontally === b.canScrollHorizontally &&
-        a.canScrollVertically === b.canScrollVertically &&
-        equal(a.elementDimensions, b.elementDimensions));
+const signalHostClasses = (classMap) => signalClasses(inject(ElementRef), classMap);
+const ALWAYS_TRUE_ATTRIBUTE_KEYS = ['disabled', 'readonly', 'required', 'checked', 'selected', 'hidden', 'inert'];
+const signalAttributes = (el, attributeMap) => {
+    const renderer = injectRenderer();
+    return buildSignalEffects(el, {
+        tokenMap: attributeMap,
+        cleanupFn: (el, tokens) => tokens.forEach((token) => el.removeAttribute(token)),
+        updateFn: (el, tokens, condition) => {
+            for (const token of tokens) {
+                if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(token)) {
+                    if (condition) {
+                        renderer.setAttribute(el, token, '');
+                    }
+                    else {
+                        renderer.removeAttribute(el, token);
+                    }
+                    continue;
+                }
+                if (condition === null || condition === undefined) {
+                    renderer.removeAttribute(el, token);
+                }
+                else {
+                    renderer.setAttribute(el, token, `${condition}`);
+                }
+            }
+        },
+    });
 };
-const signalElementScrollState = (el, options) => {
-    const elements = buildElementSignal(el);
-    const observedEl = firstElementSignal(elements);
-    const elementDimensions = signalElementDimensions(elements);
-    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true, attributes: true });
-    const isRendered = signalIsRendered();
-    const initialScrollPosition = options?.initialScrollPosition;
-    if (initialScrollPosition) {
-        const ref = effect(() => {
-            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();
+const signalHostAttributes = (attributeMap) => signalAttributes(inject(ElementRef), attributeMap);
+const signalStyles = (el, styleMap) => {
+    const renderer = injectRenderer();
+    return buildSignalEffects(el, {
+        tokenMap: styleMap,
+        cleanupFn: (el, tokens) => tokens.forEach((token) => renderer.removeStyle(el, token, RendererStyleFlags2.DashCase)),
+        updateFn: (el, tokens, condition) => {
+            for (const token of tokens) {
+                if (condition === null || condition === undefined) {
+                    renderer.removeStyle(el, token, RendererStyleFlags2.DashCase);
+                }
+                else {
+                    renderer.setStyle(el, {
+                        [token]: `${condition}`,
+                    }, RendererStyleFlags2.DashCase);
+                }
             }
-        }, ...(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 signalHostStyles = (styleMap) => signalStyles(inject(ElementRef), styleMap);
 
-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 elementCanScroll = (element, direction) => {
+    const el = element || document.documentElement;
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = el;
+    if (direction === 'x') {
+        return scrollWidth > clientWidth;
     }
-    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();
+    else if (direction === 'y') {
+        return scrollHeight > clientHeight;
     }
-    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();
+    return scrollHeight > clientHeight || scrollWidth > clientWidth;
 };
-/**
- * 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();
+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 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,
+        };
+    }
+    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();
         }
-    }, ...(ngDevMode ? [{ debugName: "ref" }] : []));
-    return value.asReadonly();
+        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,
+    };
 };
-/**
- * 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 scrollToElement = (options) => {
+    options.container?.scrollTo(getElementScrollCoordinates(options));
 };
-const memoizeSignal = (factory) => {
-    let cached = null;
-    return () => {
-        if (!cached)
-            cached = factory();
-        return cached;
+
+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 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' };
+            }
+            else {
+                if (isEndEdgeVisible) {
+                    const nextIndex = lastIndex + 1;
+                    const element = entries[nextIndex]?.target;
+                    if (!element)
+                        return null;
+                    return { element, index: nextIndex, origin: 'start' };
+                }
+                return { element: lastVisible.target, index: lastIndex, origin: 'end' };
+            }
+        }
+    }
+    else if (scrollOrigin === 'center') {
+        const entry = direction === 'start' ? firstVisible : lastVisible;
+        const index = direction === 'start' ? firstIndex : lastIndex;
+        return { element: entry.target, index, origin: 'center' };
+    }
+    const entry = direction === 'start' ? firstVisible : lastVisible;
+    const entryIndex = direction === 'start' ? firstIndex : lastIndex;
+    if (Math.round(entry.intersectionRatio) === 1) {
+        if (direction === 'start' && entryIndex === 0)
+            return null;
+        if (direction === 'end' && entryIndex === entries.length - 1)
+            return null;
+        const nextIndex = direction === 'start' ? entryIndex - 1 : entryIndex + 1;
+        const element = entries[nextIndex]?.target;
+        if (!element)
+            return null;
+        return { element, index: nextIndex, origin: direction };
+    }
+    return { element: entry.target, index: entryIndex, origin: direction };
 };
 
-/** 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';
+const createPositionObject = (entry) => {
+    const boundingRect = entry.boundingClientRect;
+    const rootBounds = entry.rootBounds;
+    let isAbove = false;
+    let isBelow = false;
+    let isLeft = false;
+    let isRight = false;
+    if (rootBounds) {
+        isAbove = boundingRect.bottom < rootBounds.top;
+        isBelow = boundingRect.top > rootBounds.bottom;
+        isLeft = boundingRect.right < rootBounds.left;
+        isRight = boundingRect.left > rootBounds.right;
+    }
+    // We cant use entry.isIntersecting to determine actual visibility since we are using a big threshold array to get more intersection events.
+    const isVisible = !isAbove && !isBelow && !isLeft && !isRight && entry.intersectionRatio > 0;
+    return {
+        isAbove,
+        isBelow,
+        isLeft,
+        isRight,
+        isVisible,
+    };
+};
+const signalElementIntersection = (el, options) => {
+    const destroyRef = inject(DestroyRef);
+    const elements = buildElementSignal(el);
+    const root = firstElementSignal(options?.root ? buildElementSignal(options?.root) : createEmptyElementSignal());
+    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 currentlyObservedElements = new Set();
+    const updateIntersections = (entries) => {
+        let currentValues = [...elementIntersectionSignal()];
+        for (const entry of entries) {
+            const existingEntryIndex = currentValues.findIndex((v) => v.target === entry.target);
+            // Round the intersection ratio to the nearest 0.01 to avoid floating point errors and system scaling issues.
+            const roundedIntersectionRatio = Math.round(entry.intersectionRatio * 100) / 100;
+            const intersectionEntry = {
+                boundingClientRect: entry.boundingClientRect,
+                intersectionRatio: roundedIntersectionRatio,
+                intersectionRect: entry.intersectionRect,
+                isIntersecting: entry.isIntersecting,
+                rootBounds: entry.rootBounds,
+                target: entry.target,
+                time: entry.time,
+                ...createPositionObject(entry),
+            };
+            if (existingEntryIndex !== -1) {
+                currentValues = [
+                    ...currentValues.slice(0, existingEntryIndex),
+                    intersectionEntry,
+                    ...currentValues.slice(existingEntryIndex + 1),
+                ];
+            }
+            else {
+                currentValues = [...currentValues, intersectionEntry];
+            }
+        }
+        zone.run(() => elementIntersectionSignal.set(currentValues));
+    };
+    const updateIntersectionObserver = (rendered, enabled, rootEl) => {
+        observer()?.disconnect();
+        currentlyObservedElements.clear();
+        if (!rendered || !enabled) {
+            observer.set(null);
+            return;
+        }
+        const newObserver = new IntersectionObserver((entries) => updateIntersections(entries), {
+            ...options,
+            root: rootEl,
+        });
+        observer.set(newObserver);
+    };
+    const updateObservedElements = (observer, elements) => {
+        const rootEl = root().currentElement;
+        if (!observer)
+            return;
+        const currIntersectionValue = elementIntersectionSignal();
+        const newIntersectionValue = [];
+        for (const el of elements.currentElements) {
+            if (currentlyObservedElements.has(el)) {
+                const existingEntryIndex = currIntersectionValue.findIndex((v) => v.target === el);
+                const existingEntry = currIntersectionValue[existingEntryIndex];
+                if (!existingEntry) {
+                    console.warn('Could not find existing entry for element. The intersection observer might be broken now.', el);
+                    continue;
+                }
+                newIntersectionValue.push(existingEntry);
+                continue;
+            }
+            const initialElementVisibility = isElementVisible({
+                container: rootEl,
+                element: el,
+            });
+            if (!initialElementVisibility) {
+                console.error('No visibility data found for element.', {
+                    element: el,
+                    container: rootEl,
+                });
+                continue;
+            }
+            const intersectionEntry = {
+                boundingClientRect: initialElementVisibility.elementRect,
+                intersectionRatio: initialElementVisibility.intersectionRatio,
+                intersectionRect: initialElementVisibility.elementRect,
+                isIntersecting: initialElementVisibility.isIntersecting,
+                rootBounds: initialElementVisibility.containerRect,
+                target: el,
+                time: performance.now(),
+            };
+            newIntersectionValue.push({
+                ...intersectionEntry,
+                ...createPositionObject(intersectionEntry),
+            });
+            currentlyObservedElements.add(el);
+            observer.observe(el);
+        }
+        for (const el of elements.previousElements) {
+            if (elements.currentElements.includes(el))
+                continue;
+            observer.unobserve(el);
+            currentlyObservedElements.delete(el);
         }
+        elementIntersectionSignal.set(newIntersectionValue);
+    };
+    effect(() => {
+        const rootEl = root().currentElement;
+        const rendered = isRendered();
+        const enabled = isEnabled();
+        untracked(() => updateIntersectionObserver(rendered, enabled, rootEl));
     });
-});
-/** 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';
+    effect(() => {
+        const els = elements();
+        const obs = observer();
+        untracked(() => updateObservedElements(obs, els));
     });
-});
-/** 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';
+    destroyRef.onDestroy(() => observer()?.disconnect());
+    return elementIntersectionSignal.asReadonly();
+};
+const signalHostElementIntersection = (options) => signalElementIntersection(inject(ElementRef), options);
+
+const signalElementLastScrollDirection = (el) => {
+    const elements = buildElementSignal(el);
+    const element = firstElementSignal(elements);
+    const destroyRef = inject(DestroyRef);
+    const lastScrollDirection = signal(null, ...(ngDevMode ? [{ debugName: "lastScrollDirection" }] : []));
+    let lastScrollTop = 0;
+    let lastScrollLeft = 0;
+    toObservable(element)
+        .pipe(switchMap(({ currentElement }) => {
+        if (!currentElement) {
+            lastScrollDirection.set(null);
+            lastScrollTop = 0;
+            lastScrollLeft = 0;
+            return of(null);
+        }
+        return fromEvent(currentElement, 'scroll').pipe(tap(() => {
+            const { scrollTop, scrollLeft } = currentElement;
+            const time = Date.now();
+            if (scrollTop > lastScrollTop) {
+                lastScrollDirection.set({ type: 'down', time });
+            }
+            else if (scrollTop < lastScrollTop) {
+                lastScrollDirection.set({ type: 'up', time });
+            }
+            else if (scrollLeft > lastScrollLeft) {
+                lastScrollDirection.set({ type: 'right', time });
+            }
+            else if (scrollLeft < lastScrollLeft) {
+                lastScrollDirection.set({ type: 'left', time });
+            }
+            lastScrollTop = scrollTop;
+            lastScrollLeft = scrollLeft;
+        }));
+    }), takeUntilDestroyed(destroyRef))
+        .subscribe();
+    return lastScrollDirection.asReadonly();
+};
+const signalHostElementLastScrollDirection = () => signalElementLastScrollDirection(inject(ElementRef));
+
+const areScrollStatesEqual = (a, b) => {
+    return (a.canScroll === b.canScroll &&
+        a.canScrollHorizontally === b.canScrollHorizontally &&
+        a.canScrollVertically === b.canScrollVertically &&
+        equal(a.elementDimensions, b.elementDimensions));
+};
+const signalElementScrollState = (el, options) => {
+    const elements = buildElementSignal(el);
+    const observedEl = firstElementSignal(elements);
+    const elementDimensions = signalElementDimensions(elements);
+    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true, attributes: true });
+    const isRendered = signalIsRendered();
+    const initialScrollPosition = options?.initialScrollPosition;
+    if (initialScrollPosition) {
+        const ref = effect(() => {
+            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,
     });
-});
-/** 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;
+        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 {
-            width: Math.max(0, 100 - client.width),
-            height: Math.max(0, 100 - client.height),
+            canScroll: canScrollHorizontally || canScrollVertically,
+            canScrollHorizontally,
+            canScrollVertically,
+            elementDimensions: dimensions,
         };
-    });
-});
+    }, { equal: (a, b) => areScrollStatesEqual(a, b) });
+};
+const signalHostElementScrollState = () => signalElementScrollState(inject(ElementRef));
 
 let hasWrittenScrollbarSizes = false;
 /**
@@ -1918,384 +2388,224 @@ const injectRouteTitle = (config) => {
     const title = computed(() => routerState().title, ...(ngDevMode ? [{ debugName: "title" }] : []));
     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" }] : []));
-    return pathParams;
-};
-const getQueryParamFromUrl = (key) => {
-    if (typeof window === 'undefined')
-        return null;
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get(key);
-};
-/** Inject a specific query parameter as a signal */
-const injectQueryParam = (key, config) => {
-    const queryParams = injectQueryParams();
-    const src = computed(() => queryParams()[key] ?? (config?.requireSync ? getQueryParamFromUrl(key) : null));
-    return transformOrReturn(src, config);
-};
-/** Inject a specific route data item as a signal */
-const injectRouteDataItem = (key, config) => {
-    const data = injectRouteData();
-    const src = computed(() => data()[key] ?? null);
-    return transformOrReturn(src, config);
-};
-/** Inject a specific path parameter as a signal */
-const injectPathParam = (key, config) => {
-    const pathParams = injectPathParams();
-    const src = computed(() => pathParams()[key] ?? null);
-    return transformOrReturn(src, config);
-};
-/**
- * Inject query params that changed during navigation. Unchanged query params will be ignored.
- * Removed query params will be represented by the symbol `ET_PROPERTY_REMOVED`.
- */
-const injectQueryParamChanges = memoizeSignal(() => {
-    const queryParams = injectQueryParams();
-    const prevQueryParams = previousSignalValue(queryParams);
-    return computed(() => {
-        const current = queryParams();
-        const previous = prevQueryParams() ?? {};
-        const changes = {};
-        const allKeys = new Set([
-            ...Object.keys(previous),
-            ...Object.keys(current),
-        ]);
-        for (const key of allKeys) {
-            if (!equal(previous[key], current[key])) {
-                const val = current[key] === undefined ? ET_PROPERTY_REMOVED : current[key];
-                changes[key] = val;
-            }
-        }
-        return changes;
-    });
-});
-/**
- * Inject path params that changed during navigation. Unchanged path params will be ignored.
- * Removed path params will be represented by the symbol `ET_PROPERTY_REMOVED`.
- */
-const injectPathParamChanges = memoizeSignal(() => {
-    const pathParams = injectPathParams();
-    const prevPathParams = previousSignalValue(pathParams);
-    return computed(() => {
-        const current = pathParams();
-        const previous = prevPathParams() ?? {};
-        const changes = {};
-        const allKeys = new Set([
-            ...Object.keys(previous),
-            ...Object.keys(current),
-        ]);
-        for (const key of allKeys) {
-            if (!equal(previous[key], current[key])) {
-                const val = current[key] === undefined ? ET_PROPERTY_REMOVED : current[key];
-                changes[key] = val;
-            }
-        }
-        return changes;
-    });
-});
-
-const ET_DISABLE_SCROLL_TOP = Symbol('ET_DISABLE_SCROLL_TOP');
-const ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE = Symbol('ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE');
-const ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE = Symbol('ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE');
-const routerDisableScrollTop = (config = {}) => {
-    return {
-        ...(!config.asReturnRoute ? { [ET_DISABLE_SCROLL_TOP]: true } : { [ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE]: true }),
-        ...(config.onPathParamChange ? { [ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE]: true } : {}),
-    };
-};
-const setupScrollRestoration = (config = {}) => {
-    if (!isPlatformBrowser(inject(PLATFORM_ID))) {
-        return;
-    }
-    const state = injectRouterState();
-    const route = injectRoute();
-    const document = inject(DOCUMENT);
-    combineLatest([toObservable(state).pipe(pairwise()), toObservable(route).pipe(pairwise())])
-        .pipe(debounceTime(1))
-        .subscribe(([[prevState, currState], [prevRoute, currRoute]]) => {
-        const sameUrlNavigation = prevRoute === currRoute;
-        const didFragmentChange = prevState.fragment !== currState.fragment;
-        if (sameUrlNavigation) {
-            const allQueryParams = [
-                ...new Set(Object.keys(prevState.queryParams).concat(Object.keys(currState.queryParams))),
-            ];
-            const changedQueryParams = allQueryParams.filter((key) => currState.queryParams[key] !== prevState.queryParams[key]);
-            if (!config.queryParamTriggerList?.length && !didFragmentChange) {
-                return;
-            }
-            const caseQueryParams = changedQueryParams.some((key) => config.queryParamTriggerList?.includes(key));
-            const caseFragment = didFragmentChange && config.fragment?.enabled;
-            if (caseQueryParams) {
-                (config.scrollElement ?? document.documentElement).scrollTop = 0;
-            }
-            else if (caseFragment) {
-                const fragmentElement = document.getElementById(currState.fragment ?? '');
-                if (fragmentElement) {
-                    fragmentElement.scrollIntoView({ behavior: config.fragment?.smooth ? 'smooth' : 'auto' });
-                }
-            }
-        }
-        else {
-            const viaReturnRoute = currState.data[ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE] && prevState.data[ET_DISABLE_SCROLL_TOP];
-            const explicitly = currState.data[ET_DISABLE_SCROLL_TOP];
-            const pathParamsChange = currState.data[ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE];
-            if (viaReturnRoute || explicitly || pathParamsChange) {
-                return;
-            }
-            const el = config.scrollElement ?? document.documentElement;
-            el.scrollTop = 0;
-        }
-    });
-};
-
-const DISABLE_LOGGER_PARAM = 'et-logger-quiet';
-const createLogger = (config) => {
-    const { scope, feature } = config;
-    const disableLogging = injectQueryParam(DISABLE_LOGGER_PARAM);
-    const writeLog = (...args) => {
-        if (disableLogging()) {
-            return;
-        }
-        console.log(...args);
-    };
-    return {
-        log: (...args) => writeLog(`\x1B[32;40;24m[${scope} ${feature}]\x1B[m`, ...args),
-        warn: (...args) => writeLog(`\x1B[93;40;24m[${scope} ${feature}]\x1B[m`, ...args),
-        error: (...args) => writeLog(`\x1B[31;40;24m[${scope} ${feature}]\x1B[m`, ...args),
-    };
-};
-
-const clamp = (value, min = 0, max = 100) => {
-    return Math.max(min, Math.min(max, value));
+/** Inject all currently available path parameters as a signal */
+const injectPathParams = () => {
+    const routerState = injectRouterState();
+    const pathParams = computed(() => routerState().pathParams, ...(ngDevMode ? [{ debugName: "pathParams" }] : []));
+    return pathParams;
 };
-const round = (value, precision = 0) => {
-    const multiplier = Math.pow(10, precision);
-    return Math.round(value * multiplier) / multiplier;
+const getQueryParamFromUrl = (key) => {
+    if (typeof window === 'undefined')
+        return null;
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get(key);
 };
-
-const isObject = (value) => {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
+/** Inject a specific query parameter as a signal */
+const injectQueryParam = (key, config) => {
+    const queryParams = injectQueryParams();
+    const src = computed(() => queryParams()[key] ?? (config?.requireSync ? getQueryParamFromUrl(key) : null));
+    return transformOrReturn(src, config);
 };
-const isArray = (value) => {
-    return Array.isArray(value);
+/** Inject a specific route data item as a signal */
+const injectRouteDataItem = (key, config) => {
+    const data = injectRouteData();
+    const src = computed(() => data()[key] ?? null);
+    return transformOrReturn(src, config);
 };
-const getObjectProperty = (obj, prop) => {
-    const hasDotNotation = prop.includes('.');
-    const hasBracketNotation = prop.includes('[');
-    if (!hasDotNotation && !hasBracketNotation)
-        return obj[prop];
-    const props = prop.split('.');
-    let value = obj;
-    for (const prop of props) {
-        if (!isObject(value))
-            return undefined;
-        if (prop.includes('[')) {
-            const [key, index] = prop.split('[').map((part) => part.replace(']', ''));
-            const arr = value[key];
-            if (!Array.isArray(arr))
-                return undefined;
-            value = arr[+index];
-        }
-        else {
-            value = value[prop];
-        }
-    }
-    return value;
+/** Inject a specific path parameter as a signal */
+const injectPathParam = (key, config) => {
+    const pathParams = injectPathParams();
+    const src = computed(() => pathParams()[key] ?? null);
+    return transformOrReturn(src, config);
 };
-
-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));
-        this.code = code;
-        this.devOnly = devOnly;
-        this.data = data;
-        if (data !== RUNTIME_ERROR_NO_DATA) {
-            try {
-                const _data = clone(data);
-                setTimeout(() => {
-                    console.error(_data);
-                }, 1);
-            }
-            catch {
-                setTimeout(() => {
-                    console.error(data);
-                }, 1);
+/**
+ * Inject query params that changed during navigation. Unchanged query params will be ignored.
+ * Removed query params will be represented by the symbol `ET_PROPERTY_REMOVED`.
+ */
+const injectQueryParamChanges = memoizeSignal(() => {
+    const queryParams = injectQueryParams();
+    const prevQueryParams = previousSignalValue(queryParams);
+    return computed(() => {
+        const current = queryParams();
+        const previous = prevQueryParams() ?? {};
+        const changes = {};
+        const allKeys = new Set([
+            ...Object.keys(previous),
+            ...Object.keys(current),
+        ]);
+        for (const key of allKeys) {
+            if (!equal(previous[key], current[key])) {
+                const val = current[key] === undefined ? ET_PROPERTY_REMOVED : current[key];
+                changes[key] = val;
             }
         }
-    }
-}
-function formatRuntimeError(code, message, devOnly) {
-    // 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 changes;
+    });
+});
 /**
- * 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.
+ * Inject path params that changed during navigation. Unchanged path params will be ignored.
+ * Removed path params will be represented by the symbol `ET_PROPERTY_REMOVED`.
  */
-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 injectPathParamChanges = memoizeSignal(() => {
+    const pathParams = injectPathParams();
+    const prevPathParams = previousSignalValue(pathParams);
+    return computed(() => {
+        const current = pathParams();
+        const previous = prevPathParams() ?? {};
+        const changes = {};
+        const allKeys = new Set([
+            ...Object.keys(previous),
+            ...Object.keys(current),
+        ]);
+        for (const key of allKeys) {
+            if (!equal(previous[key], current[key])) {
+                const val = current[key] === undefined ? ET_PROPERTY_REMOVED : current[key];
+                changes[key] = val;
+            }
+        }
+        return changes;
+    });
 });
-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 {
-            inline: true,
-            block: true,
-            blockIntersection: 1,
-            inlineIntersection: 1,
-            intersectionRatio: 1,
-            isIntersecting: true,
-            element,
-            containerRect,
-            elementRect,
-        };
-    }
-    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();
+
+const ET_DISABLE_SCROLL_TOP = Symbol('ET_DISABLE_SCROLL_TOP');
+const ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE = Symbol('ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE');
+const ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE = Symbol('ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE');
+const routerDisableScrollTop = (config = {}) => {
+    return {
+        ...(!config.asReturnRoute ? { [ET_DISABLE_SCROLL_TOP]: true } : { [ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE]: true }),
+        ...(config.onPathParamChange ? { [ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE]: true } : {}),
+    };
+};
+const setupScrollRestoration = (config = {}) => {
+    if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+        return;
+    }
+    const state = injectRouterState();
+    const route = injectRoute();
+    const document = inject(DOCUMENT);
+    combineLatest([toObservable(state).pipe(pairwise()), toObservable(route).pipe(pairwise())])
+        .pipe(debounceTime(1))
+        .subscribe(([[prevState, currState], [prevRoute, currRoute]]) => {
+        const sameUrlNavigation = prevRoute === currRoute;
+        const didFragmentChange = prevState.fragment !== currState.fragment;
+        if (sameUrlNavigation) {
+            const allQueryParams = [
+                ...new Set(Object.keys(prevState.queryParams).concat(Object.keys(currState.queryParams))),
+            ];
+            const changedQueryParams = allQueryParams.filter((key) => currState.queryParams[key] !== prevState.queryParams[key]);
+            if (!config.queryParamTriggerList?.length && !didFragmentChange) {
+                return;
+            }
+            const caseQueryParams = changedQueryParams.some((key) => config.queryParamTriggerList?.includes(key));
+            const caseFragment = didFragmentChange && config.fragment?.enabled;
+            if (caseQueryParams) {
+                (config.scrollElement ?? document.documentElement).scrollTop = 0;
+            }
+            else if (caseFragment) {
+                const fragmentElement = document.getElementById(currState.fragment ?? '');
+                if (fragmentElement) {
+                    fragmentElement.scrollIntoView({ behavior: config.fragment?.smooth ? 'smooth' : 'auto' });
+                }
+            }
         }
-        else if (isBelow || isPartialBelow || isRight || isPartialRight) {
-            calculateScrollToEnd();
+        else {
+            const viaReturnRoute = currState.data[ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE] && prevState.data[ET_DISABLE_SCROLL_TOP];
+            const explicitly = currState.data[ET_DISABLE_SCROLL_TOP];
+            const pathParamsChange = currState.data[ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE];
+            if (viaReturnRoute || explicitly || pathParamsChange) {
+                return;
+            }
+            const el = config.scrollElement ?? document.documentElement;
+            el.scrollTop = 0;
+        }
+    });
+};
+
+const DISABLE_LOGGER_PARAM = 'et-logger-quiet';
+const createLogger = (config) => {
+    const { scope, feature } = config;
+    const disableLogging = injectQueryParam(DISABLE_LOGGER_PARAM);
+    const writeLog = (...args) => {
+        if (disableLogging()) {
+            return;
         }
+        console.log(...args);
     };
-    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,
+        log: (...args) => writeLog(`\x1B[32;40;24m[${scope} ${feature}]\x1B[m`, ...args),
+        warn: (...args) => writeLog(`\x1B[93;40;24m[${scope} ${feature}]\x1B[m`, ...args),
+        error: (...args) => writeLog(`\x1B[31;40;24m[${scope} ${feature}]\x1B[m`, ...args),
     };
 };
-const scrollToElement = (options) => {
-    options.container?.scrollTo(getElementScrollCoordinates(options));
+
+const clamp = (value, min = 0, max = 100) => {
+    return Math.max(min, Math.min(max, value));
+};
+const round = (value, precision = 0) => {
+    const multiplier = Math.pow(10, precision);
+    return Math.round(value * multiplier) / multiplier;
+};
+
+const isObject = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isArray = (value) => {
+    return Array.isArray(value);
+};
+const getObjectProperty = (obj, prop) => {
+    const hasDotNotation = prop.includes('.');
+    const hasBracketNotation = prop.includes('[');
+    if (!hasDotNotation && !hasBracketNotation)
+        return obj[prop];
+    const props = prop.split('.');
+    let value = obj;
+    for (const prop of props) {
+        if (!isObject(value))
+            return undefined;
+        if (prop.includes('[')) {
+            const [key, index] = prop.split('[').map((part) => part.replace(']', ''));
+            const arr = value[key];
+            if (!Array.isArray(arr))
+                return undefined;
+            value = arr[+index];
+        }
+        else {
+            value = value[prop];
+        }
+    }
+    return value;
 };
 
+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));
+        this.code = code;
+        this.devOnly = devOnly;
+        this.data = data;
+        if (data !== RUNTIME_ERROR_NO_DATA) {
+            try {
+                const _data = clone(data);
+                setTimeout(() => {
+                    console.error(_data);
+                }, 1);
+            }
+            catch {
+                setTimeout(() => {
+                    console.error(data);
+                }, 1);
+            }
+        }
+    }
+}
+function formatRuntimeError(code, message, devOnly) {
+    // 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 : ''}`;
+}
+
 const [, injectAngularRootElement] = createRootProvider(() => {
     const appRef = inject(ApplicationRef);
     const rootElement = signal(null, ...(ngDevMode ? [{ debugName: "rootElement" }] : []));
@@ -2323,82 +2633,6 @@ const [provideBoundaryElement, injectBoundaryElement, BOUNDARY_ELEMENT_TOKEN] =
     };
 }, { name: 'Boundary Element' });
 
-/**
- * Default viewport config based on Tailwind CSS.
- * @see https://tailwindcss.com/docs/screens
- */
-const DEFAULT_VIEWPORT_CONFIG = {
-    breakpoints: {
-        xs: [0, 639],
-        sm: [640, 767],
-        md: [768, 1023],
-        lg: [1024, 1279],
-        xl: [1280, 1535],
-        '2xl': [1536, Infinity],
-    },
-};
-const [provideViewportConfig, injectViewportConfig] = createStaticRootProvider(DEFAULT_VIEWPORT_CONFIG, {
-    name: 'Viewport Config',
-});
-const [provideBreakpointObserver, injectBreakpointObserver] = createRootProvider(() => {
-    const breakpointObserver = inject(BreakpointObserver);
-    const viewportConfig = injectViewportConfig();
-    const isMediaQueryMatched = (mediaQuery) => breakpointObserver.isMatched(mediaQuery);
-    const observeMediaQuery = (mediaQuery) => {
-        return toSignal(breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), startWith(isMediaQueryMatched(mediaQuery))), { requireSync: true });
-    };
-    const observeBreakpoint = (options) => observeMediaQuery(buildMediaQueryString(options));
-    const isBreakpointMatched = (options) => isMediaQueryMatched(buildMediaQueryString(options));
-    const getBreakpointSize = (type, option) => {
-        const index = option === 'min' ? 0 : 1;
-        const size = viewportConfig.breakpoints[type][index];
-        if (size === Infinity || size === 0) {
-            return size;
-        }
-        if (option === 'min') {
-            return size;
-        }
-        // Due to scaling, the actual size of the viewport may be a decimal number.
-        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
-        // and thus not matching any of the default breakpoints.
-        return size + 0.9;
-    };
-    const buildMediaQueryString = (options) => {
-        if (!options.min && !options.max) {
-            throw new Error('At least one of min or max must be defined');
-        }
-        const mediaQueryParts = [];
-        if (options.min) {
-            if (typeof options.min === 'number') {
-                mediaQueryParts.push(`(min-width: ${options.min}px)`);
-            }
-            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 [provideFocusVisibleTracker, injectFocusVisibleTracker, FOCUS_VISIBLE_TRACKER_TOKEN] = createRootProvider(() => {
     const document = inject(DOCUMENT);
     const destroyRef = inject(DestroyRef);
@@ -2619,6 +2853,15 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
     };
 }, { name: 'Angular Renderer' });
 
+const createUserConsentProvider = (options) => ({
+    provide: options.for,
+    useFactory: () => ({
+        isGranted: options.isGranted(),
+        grant: options.grant(),
+        ...(options.revoke ? { revoke: options.revoke() } : {}),
+    }),
+});
+
 const nextFrame = (cb) => {
     requestAnimationFrame(() => {
         requestAnimationFrame(cb);
@@ -3421,6 +3664,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], 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" }] : []));
+        this._startEl = signal(null, ...(ngDevMode ? [{ debugName: "_startEl" }] : []));
+        this._endEl = signal(null, ...(ngDevMode ? [{ debugName: "_endEl" }] : []));
+        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" }] : []));
+        this.isAtEnd = computed(() => this._endIntersection()[0]?.isIntersecting ?? false, ...(ngDevMode ? [{ debugName: "isAtEnd" }] : []));
+    }
+    _registerStart(el) {
+        this._startEl.set(el);
+    }
+    _registerEnd(el) {
+        this._endEl.set(el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScrollObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", 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.1", 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.1", ngImport: i0, type: ScrollObserverEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ScrollObserverEndDirective, isStandalone: true, selector: "[etScrollObserverEnd]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", 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.1", ngImport: i0, type: ScrollObserverStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ScrollObserverStartDirective, isStandalone: true, selector: "[etScrollObserverStart]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScrollObserverStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etScrollObserverStart]',
+                }]
+        }], ctorParameters: () => [] });
+
 class NormalizeGameResultTypePipe {
     constructor() {
         this.transform = normalizeGameResultType;
@@ -5348,5 +5657,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * 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, 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, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, 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, boolBreakpointTransform, booleanBreakpointAttribute, boundingClientRectToElementRect, breakpointTransformBase, 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, createUserConsentProvider, deferredSignal, deleteCookie, easeElastic, easeIn, easeInOut, easeLinear, easeOut, easeOutBack, easeOutBackStrong, elementCanScroll, equal, firstElementSignal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementScrollCoordinates, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, getScrollContainerTarget, getScrollItemTarget, getScrollSnapTarget, hasCookie, inferMimeType, injectAngularRootElement, injectBoundaryElement, injectBreakpointInput, 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, numberBreakpointAttribute, numberBreakpointTransform, previousSignalValue, provideBoundaryElement, provideBreakpointInstance, 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, typedBreakpointTransform, unbindProps, useCursorDragScroll, writeScrollbarSizeToCssVariables, writeViewportSizeToCssVariables, ɵProvideColorThemes, ɵProvideThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map