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

package/fesm2022/ethlete-core.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, 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 { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, NgZone, signal, isSignal, untracked, DOCUMENT, linkedSignal, isDevMode, computed, afterNextRender, effect, Injector, booleanAttribute, numberAttribute, runInInjectionContext, RendererStyleFlags2, PLATFORM_ID, ApplicationRef, RendererFactory2, EnvironmentInjector, createComponent, model, ViewContainerRef, input, output, 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 { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, defer, exhaustMap, share } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { coerceElement } from '@angular/cdk/coercion';
-import { isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { Router, NavigationEnd, NavigationSkipped } from '@angular/router';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -996,6 +996,31 @@ const signalElementDimensions = (el) => {
     });
 };
 const signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
+const injectViewportSize = () => {
+    const document = inject(DOCUMENT$1);
+    const zone = inject(NgZone);
+    const destroyRef = inject(DestroyRef);
+    const getSize = () => {
+        const vv = document.defaultView?.visualViewport;
+        if (vv)
+            return { width: vv.width, height: vv.height };
+        const win = document.defaultView;
+        return { width: win?.innerWidth ?? 0, height: win?.innerHeight ?? 0 };
+    };
+    const size = signal(getSize(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    const onResize = () => zone.run(() => size.set(getSize()));
+    const vv = document.defaultView?.visualViewport;
+    if (vv) {
+        vv.addEventListener('resize', onResize);
+        destroyRef.onDestroy(() => vv.removeEventListener('resize', onResize));
+    }
+    else {
+        const win = document.defaultView;
+        win?.addEventListener('resize', onResize);
+        destroyRef.onDestroy(() => win?.removeEventListener('resize', onResize));
+    }
+    return size;
+};
 
 const previousSignalValue = (signal) => {
     const obs = toObservable(signal).pipe(pairwise(), map(([prev]) => prev));
@@ -2578,10 +2603,9 @@ const getObjectProperty = (obj, prop) => {
 
 const RUNTIME_ERROR_NO_DATA = '__ET_NO_DATA__';
 class RuntimeError extends Error {
-    constructor(code, message, devOnly = false, data = RUNTIME_ERROR_NO_DATA) {
-        super(formatRuntimeError(code, message, devOnly));
+    constructor(code, message, data = RUNTIME_ERROR_NO_DATA) {
+        super(formatRuntimeError(code, message));
         this.code = code;
-        this.devOnly = devOnly;
         this.data = data;
         if (data !== RUNTIME_ERROR_NO_DATA) {
             try {
@@ -2598,12 +2622,11 @@ class RuntimeError extends Error {
         }
     }
 }
-function formatRuntimeError(code, message, devOnly) {
+function formatRuntimeError(code, message) {
     // prefix code with zeros if it's less than 100
     const codeWithZeros = code < 10 ? `00${code}` : code < 100 ? `0${code}` : code;
     const fullCode = `ET${codeWithZeros}`;
-    const devOnlyText = devOnly ? ' [DEV ONLY] ' : '';
-    return `${devOnlyText}${fullCode}${message ? ': ' + message : ''}`;
+    return `${fullCode}${message ? ': ' + message : ''}`;
 }
 
 const [, injectAngularRootElement] = createRootProvider(() => {
@@ -2818,6 +2841,20 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
             setAttribute(element, `data-${key}`, value);
         });
     };
+    const moveBefore = (config) => {
+        const { newParent, child, before = null } = config;
+        if ('moveBefore' in newParent) {
+            try {
+                newParent.moveBefore(child, before);
+            }
+            catch {
+                newParent.insertBefore(child, before);
+            }
+        }
+        else {
+            newParent.insertBefore(child, before);
+        }
+    };
     return {
         addClass,
         removeClass,
@@ -2849,10 +2886,63 @@ const [provideRenderer, injectRenderer] = createRootProvider(() => {
         setDataAttributes,
         setCssProperty,
         setCssProperties,
+        moveBefore,
         renderer,
     };
 }, { name: 'Angular Renderer' });
 
+const [provideStyleManager, injectStyleManager] = createRootProvider(() => {
+    const appRef = inject(ApplicationRef);
+    const destroyRef = inject(DestroyRef);
+    const document = inject(DOCUMENT);
+    const envInjector = inject(EnvironmentInjector);
+    const renderer = injectRenderer();
+    let container = null;
+    const mountedComponents = new Map();
+    const getContainerParent = () => {
+        return document.body ?? document.documentElement;
+    };
+    const ensureContainer = () => {
+        if (container) {
+            return container;
+        }
+        const nextContainer = renderer.createElement('div');
+        renderer.addClass(nextContainer, 'et-style-manager');
+        renderer.setAttribute(nextContainer, 'aria-hidden', 'true');
+        renderer.setStyle(nextContainer, { display: 'none' });
+        renderer.appendChild(getContainerParent(), nextContainer);
+        container = nextContainer;
+        return nextContainer;
+    };
+    const mount = (component) => {
+        const existingComponent = mountedComponents.get(component);
+        if (existingComponent) {
+            return existingComponent;
+        }
+        const componentRef = createComponent(component, { environmentInjector: envInjector });
+        appRef.attachView(componentRef.hostView);
+        renderer.appendChild(ensureContainer(), componentRef.location.nativeElement);
+        mountedComponents.set(component, componentRef);
+        return componentRef;
+    };
+    destroyRef.onDestroy(() => {
+        mountedComponents.forEach((componentRef) => {
+            appRef.detachView(componentRef.hostView);
+            componentRef.destroy();
+        });
+        mountedComponents.clear();
+        if (!container) {
+            return;
+        }
+        const parent = renderer.parentNode(container);
+        if (parent) {
+            renderer.removeChild(parent, container);
+        }
+        container = null;
+    });
+    return { mount };
+}, { name: 'StyleManager' });
+
 const createUserConsentProvider = (options) => ({
     provide: options.for,
     useFactory: () => ({
@@ -3267,7 +3357,7 @@ class AnimatedOverlayDirective {
             this.unmountSubscription?.unsubscribe();
             this.unmountSubscription = null;
             this.applyComponentData(config.data);
-            this.applyThemeProvider(config.themeProvider);
+            this.applyColorProvider(config.colorProvider);
             const lifecycle = this.componentRef.instance.animatedLifecycle();
             if (lifecycle) {
                 this.state.set('mounting');
@@ -3290,7 +3380,7 @@ class AnimatedOverlayDirective {
             }
             return;
         }
-        const { component, providers, data, themeProvider } = config;
+        const { component, providers, data, colorProvider } = config;
         this.state.set('mounting');
         this.beforeOpened$.next();
         const injector = Injector.create({
@@ -3301,7 +3391,7 @@ class AnimatedOverlayDirective {
         this.portal = new ComponentPortal(component, this.viewContainerRef, injector);
         this.componentRef = this.overlayRef.attach(this.portal);
         this.applyComponentData(data);
-        this.applyThemeProvider(themeProvider);
+        this.applyColorProvider(colorProvider);
         this.updateOverlaySize();
         this.setupFloatingUI();
         return this.componentRef.instance;
@@ -3347,10 +3437,10 @@ class AnimatedOverlayDirective {
         Object.assign(this.componentRef.instance, data);
         this.componentRef.changeDetectorRef.markForCheck();
     }
-    applyThemeProvider(themeProvider) {
-        if (!this.componentRef || !themeProvider)
+    applyColorProvider(colorProvider) {
+        if (!this.componentRef || !colorProvider)
             return;
-        this.componentRef.instance.setThemeFromProvider(themeProvider);
+        this.componentRef.instance.setColorFromProvider(colorProvider);
     }
     updateOverlaySize() {
         if (!this.overlayRef || !this.mirrorWidth())
@@ -3730,6 +3820,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const setupDragObservable = (startEvent, el, commitThreshold) => {
+    const { pointerId, clientX: startX, clientY: startY } = startEvent;
+    const end$ = merge(fromEvent(document, 'pointerup'), fromEvent(document, 'pointercancel')).pipe(filter((e) => e.pointerId === pointerId), take(1));
+    let lastX = startX;
+    let lastY = startY;
+    let committed = false;
+    const moves$ = fromEvent(document, 'pointermove').pipe(filter((e) => e.pointerId === pointerId), concatMap((e) => {
+        if (!committed) {
+            if (Math.abs(e.clientX - startX) < commitThreshold && Math.abs(e.clientY - startY) < commitThreshold) {
+                return EMPTY;
+            }
+            committed = true;
+            el.setPointerCapture(pointerId);
+            lastX = e.clientX;
+            lastY = e.clientY;
+            return of({ type: 'start' });
+        }
+        const stepX = e.clientX - lastX;
+        const stepY = e.clientY - lastY;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        return of({ type: 'move', data: { stepX, stepY, clientX: e.clientX, clientY: e.clientY } });
+    }), takeUntil(end$));
+    return concat(moves$, defer(() => of(committed ? { type: 'end' } : { type: 'tapped' })));
+};
+class DragHandleDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.commitThreshold = input(8, ...(ngDevMode ? [{ debugName: "commitThreshold" }] : []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this.gestureStart$ = new Subject();
+        this.gesture$ = this.gestureStart$.pipe(exhaustMap((event) => setupDragObservable(event, this.el.nativeElement, this.commitThreshold())), takeUntilDestroyed(), share());
+        this.dragTapped = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'tapped'), map(() => undefined)));
+        this.dragStarted = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'start'), map(() => undefined)));
+        this.dragMoved = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'move'), map((e) => e.data)));
+        this.dragEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map(() => undefined)));
+        this.isDragging = toSignal(this.gesture$.pipe(map((e) => e.type === 'start' || e.type === 'move'), distinctUntilChanged()), { initialValue: false });
+        applyHostListener('pointerdown', (e) => this.startGesture(e));
+    }
+    startGesture(event) {
+        if (event.button !== 0 || this.disabled())
+            return;
+        event.stopPropagation();
+        this.gestureStart$.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: DragHandleDirective, isStandalone: true, selector: "[etDragHandle]", inputs: { commitThreshold: { classPropertyName: "commitThreshold", publicName: "commitThreshold", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragTapped: "dragTapped", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etDragHandle]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { commitThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitThreshold", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dragTapped: [{ type: i0.Output, args: ["dragTapped"] }], dragStarted: [{ type: i0.Output, args: ["dragStarted"] }], dragMoved: [{ type: i0.Output, args: ["dragMoved"] }], dragEnded: [{ type: i0.Output, args: ["dragEnded"] }] } });
+
 class NormalizeGameResultTypePipe {
     constructor() {
         this.transform = normalizeGameResultType;
@@ -4543,6 +4688,76 @@ const templateComputed = (templateSignal) => computed(() => {
     };
 });
 
+const EDGE_CURSORS = {
+    n: 'ns-resize',
+    s: 'ns-resize',
+    e: 'ew-resize',
+    w: 'ew-resize',
+    ne: 'nesw-resize',
+    sw: 'nesw-resize',
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+};
+const setupResizeObservable = (startEvent, edge) => {
+    const pointerId = startEvent.pointerId;
+    const startX = startEvent.clientX;
+    const startY = startEvent.clientY;
+    const end$ = merge(fromEvent(document, 'pointerup'), fromEvent(document, 'pointercancel')).pipe(filter((e) => e.pointerId === pointerId), take(1));
+    return concat(of({ type: 'start', edge }), fromEvent(document, 'pointermove').pipe(filter((e) => e.pointerId === pointerId), map((e) => ({ type: 'move', data: { edge, dx: e.clientX - startX, dy: e.clientY - startY } })), takeUntil(end$)), of({ type: 'end' }));
+};
+class ResizeHandlesComponent {
+    constructor() {
+        this.edges = input(['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'], ...(ngDevMode ? [{ debugName: "edges" }] : []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this.gestureStart$ = new Subject();
+        this.gesture$ = this.gestureStart$.pipe(exhaustMap(({ event, edge }) => setupResizeObservable(event, edge)), takeUntilDestroyed(), share());
+        this.resizeStarted = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'start'), map((e) => e.edge)));
+        this.resizeMoved = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'move'), map((e) => e.data)));
+        this.resizeEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map(() => undefined)));
+        this.isResizing = toSignal(this.gesture$.pipe(map((e) => e.type !== 'end'), distinctUntilChanged()), { initialValue: false });
+        this.activeEdge = toSignal(this.gesture$.pipe(map((e) => {
+            if (e.type === 'end')
+                return null;
+            if (e.type === 'start')
+                return e.edge;
+            return e.data.edge;
+        }), distinctUntilChanged()), { initialValue: null });
+        this.edgeCursors = EDGE_CURSORS;
+    }
+    startResizeGesture(event, edge) {
+        if (event.button !== 0 || this.disabled())
+            return;
+        event.stopPropagation();
+        this.gestureStart$.next({ event, edge });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ResizeHandlesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ResizeHandlesComponent, isStandalone: true, selector: "et-resize-handles", inputs: { edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStarted: "resizeStarted", resizeMoved: "resizeMoved", resizeEnded: "resizeEnded" }, host: { properties: { "attr.inert": "disabled() ? \"\" : null", "attr.data-active-edge": "activeEdge()" }, classAttribute: "et-resize-handles" }, ngImport: i0, template: `
+    @for (edge of edges(); track edge) {
+      <div
+        [style.cursor]="edgeCursors[edge]"
+        (pointerdown)="startResizeGesture($event, edge)"
+        class="et-resize-handle et-resize-handle--{{ edge }}"
+      ></div>
+    }
+  `, isInline: true, styles: ["@property --et-resize-handles-z-index{syntax: \"<integer>\"; inherits: true; initial-value: 10;}@property --et-resize-handles-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-resize-handles-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-resize-handles-edge-inset{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-side-top{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-resize-handles-side-bottom{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-touch-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-resize-handles-touch-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 28px;}et-resize-handles{position:absolute;inset:0;pointer-events:none}.et-resize-handle{position:absolute;z-index:var(--et-resize-handles-z-index);touch-action:none;pointer-events:auto}.et-resize-handle--n{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);top:0}.et-resize-handle--s{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);bottom:0}.et-resize-handle--e,.et-resize-handle--w{top:var(--et-resize-handles-side-top);bottom:var(--et-resize-handles-side-bottom);width:var(--et-resize-handles-edge-size)}.et-resize-handle--e{right:0}.et-resize-handle--w{left:0}.et-resize-handle--ne,.et-resize-handle--nw{top:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--ne{right:0}.et-resize-handle--nw{left:0}.et-resize-handle--se,.et-resize-handle--sw{bottom:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--se{right:0}.et-resize-handle--sw{left:0}@media(hover:none){.et-resize-handle--n,.et-resize-handle--s{height:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--e,.et-resize-handle--w{width:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--ne,.et-resize-handle--nw,.et-resize-handle--se,.et-resize-handle--sw{width:var(--et-resize-handles-touch-corner-size);height:var(--et-resize-handles-touch-corner-size)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ResizeHandlesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-resize-handles', template: `
+    @for (edge of edges(); track edge) {
+      <div
+        [style.cursor]="edgeCursors[edge]"
+        (pointerdown)="startResizeGesture($event, edge)"
+        class="et-resize-handle et-resize-handle--{{ edge }}"
+      ></div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-resize-handles',
+                        '[attr.inert]': 'disabled() ? "" : null',
+                        '[attr.data-active-edge]': 'activeEdge()',
+                    }, styles: ["@property --et-resize-handles-z-index{syntax: \"<integer>\"; inherits: true; initial-value: 10;}@property --et-resize-handles-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-resize-handles-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-resize-handles-edge-inset{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-side-top{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-resize-handles-side-bottom{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-resize-handles-touch-edge-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-resize-handles-touch-corner-size{syntax: \"<length>\"; inherits: true; initial-value: 28px;}et-resize-handles{position:absolute;inset:0;pointer-events:none}.et-resize-handle{position:absolute;z-index:var(--et-resize-handles-z-index);touch-action:none;pointer-events:auto}.et-resize-handle--n{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);top:0}.et-resize-handle--s{left:var(--et-resize-handles-edge-inset);right:var(--et-resize-handles-edge-inset);height:var(--et-resize-handles-edge-size);bottom:0}.et-resize-handle--e,.et-resize-handle--w{top:var(--et-resize-handles-side-top);bottom:var(--et-resize-handles-side-bottom);width:var(--et-resize-handles-edge-size)}.et-resize-handle--e{right:0}.et-resize-handle--w{left:0}.et-resize-handle--ne,.et-resize-handle--nw{top:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--ne{right:0}.et-resize-handle--nw{left:0}.et-resize-handle--se,.et-resize-handle--sw{bottom:0;width:var(--et-resize-handles-corner-size);height:var(--et-resize-handles-corner-size)}.et-resize-handle--se{right:0}.et-resize-handle--sw{left:0}@media(hover:none){.et-resize-handle--n,.et-resize-handle--s{height:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--e,.et-resize-handle--w{width:var(--et-resize-handles-touch-edge-size)}.et-resize-handle--ne,.et-resize-handle--nw,.et-resize-handle--se,.et-resize-handle--sw{width:var(--et-resize-handles-touch-corner-size);height:var(--et-resize-handles-touch-corner-size)}}\n"] }]
+        }], propDecorators: { edges: [{ type: i0.Input, args: [{ isSignal: true, alias: "edges", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], resizeStarted: [{ type: i0.Output, args: ["resizeStarted"] }], resizeMoved: [{ type: i0.Output, args: ["resizeMoved"] }], resizeEnded: [{ type: i0.Output, args: ["resizeEnded"] }] } });
+
 const applyHeadBinding = (binding, applyFn, removeFn, isValid) => {
     const destroyRef = inject(DestroyRef);
     const signalBinding = isSignal(binding) ? binding : signal(binding);
@@ -5424,22 +5639,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
-const createCssThemeName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+const createCssColorThemeName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
 const [ɵProvideColorThemes, injectColorThemes] = createStaticProvider(undefined, {
     name: 'Color Themes',
 });
-const [ɵProvideThemesPrefix, injectThemesPrefix] = createStaticProvider('et', { name: 'Themes Prefix' });
+const [ɵProvideColorThemesPrefix, injectColorThemesPrefix] = createStaticProvider('et', {
+    name: 'Themes Prefix',
+});
 const provideColorThemesWithTailwind4 = (themes, prefix = 'et') => [
     ɵProvideColorThemes(themes.map((theme) => theme.name)),
-    ɵProvideThemesPrefix(prefix),
+    ɵProvideColorThemesPrefix(prefix),
 ];
 
+class ColoredStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ColoredStylesComponent, isStandalone: true, selector: "et-colored-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-colored){--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-opacity: 1;--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-primary: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--et-theme-color-on-primary-rgb: var(--et-color-on-primary);--et-theme-color-on-primary-opacity: 1;--et-theme-color-on-primary-solid: rgb( var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity) );--et-theme-color-on-primary: rgb(var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-opacity: 1;--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity));--et-theme-color-ink: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity))}:where(.et-colored:hover){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) )}:where(.et-colored:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) )}:where(.et-colored:active){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) )}:where(.et-colored[disabled]),:where(.et-colored[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-colored-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-colored){--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-opacity: 1;--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-primary: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--et-theme-color-on-primary-rgb: var(--et-color-on-primary);--et-theme-color-on-primary-opacity: 1;--et-theme-color-on-primary-solid: rgb( var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity) );--et-theme-color-on-primary: rgb(var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-opacity: 1;--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity));--et-theme-color-ink: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity))}:where(.et-colored:hover){--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) )}:where(.et-colored:focus-visible){--et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));--et-theme-color-on-primary-rgb: var( --et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))) ) )}:where(.et-colored:active){--et-theme-color-primary-rgb: var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) )}:where(.et-colored[disabled]),:where(.et-colored[aria-disabled=true]){--et-theme-color-primary-rgb: var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) );--et-theme-color-on-primary-rgb: var( --et-color-on-primary-disabled, var( --et-color-on-primary-active, var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary))) ) );--et-theme-color-ink-rgb: var( --et-color-primary-ink-disabled, var( --et-color-primary-ink-active, var( --et-color-primary-ink-focus, var( --et-color-primary-ink-hover, var( --et-color-primary-ink, var( --et-color-primary-disabled, var( --et-color-primary-active, var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary))) ) ) ) ) ) ) )}\n"] }]
+        }] });
+
+class ColoredDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(ColoredStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ColoredDirective, isStandalone: true, selector: "[etColored]", host: { classAttribute: "et-colored" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColoredDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etColored]',
+                    host: {
+                        class: 'et-colored',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * @deprecated Migrate to Tailwind v4. Intent to remove in v6.
  */
 const createSwatchCss = (swatch, isAlt, data) => {
     const varSuffix = isAlt ? 'alt-' + swatch : swatch;
     const varOnSuffix = isAlt ? 'alt-' : '';
+    const inkDefault = data.inkColor?.default || data.color.default;
+    const inkHover = data.inkColor?.hover || inkDefault;
+    const inkFocus = data.inkColor?.focus || data.inkColor?.hover || inkDefault;
+    const inkActive = data.inkColor?.active || inkDefault;
+    const inkDisabled = data.inkColor?.disabled || inkDefault;
     return `
   --et-color-${varSuffix}: ${data.color.default};
   --et-color-${varSuffix}-hover: ${data.color.hover};
@@ -5452,6 +5701,12 @@ const createSwatchCss = (swatch, isAlt, data) => {
   --et-color-${varOnSuffix}on-${swatch}-focus: ${data.onColor.focus || data.onColor.hover || data.onColor.default};
   --et-color-${varOnSuffix}on-${swatch}-active: ${data.onColor.active || data.onColor.default};
   --et-color-${varOnSuffix}on-${swatch}-disabled: ${data.onColor.disabled || data.onColor.default};
+
+  --et-color-${varSuffix}-ink: ${inkDefault};
+  --et-color-${varSuffix}-ink-hover: ${inkHover};
+  --et-color-${varSuffix}-ink-focus: ${inkFocus};
+  --et-color-${varSuffix}-ink-active: ${inkActive};
+  --et-color-${varSuffix}-ink-disabled: ${inkDisabled};
   `;
 };
 /**
@@ -5459,6 +5714,11 @@ const createSwatchCss = (swatch, isAlt, data) => {
  */
 const createRootThemeCss = (themes) => {
     const createVars = (name, swatch) => {
+        const inkDefault = swatch.inkColor?.default || swatch.color.default;
+        const inkHover = swatch.inkColor?.hover || inkDefault;
+        const inkFocus = swatch.inkColor?.focus || swatch.inkColor?.hover || inkDefault;
+        const inkActive = swatch.inkColor?.active || inkDefault;
+        const inkDisabled = swatch.inkColor?.disabled || inkDefault;
         return `
     --et-color-${name}: ${swatch.color.default};
     --et-color-${name}-hover: ${swatch.color.hover};
@@ -5471,11 +5731,17 @@ const createRootThemeCss = (themes) => {
     --et-color-on-${name}-focus: ${swatch.onColor.focus || swatch.onColor.hover || swatch.onColor.default};
     --et-color-on-${name}-active: ${swatch.onColor.active || swatch.onColor.default};
     --et-color-on-${name}-disabled: ${swatch.onColor.disabled || swatch.onColor.default};
+
+    --et-color-${name}-ink: ${inkDefault};
+    --et-color-${name}-ink-hover: ${inkHover};
+    --et-color-${name}-ink-focus: ${inkFocus};
+    --et-color-${name}-ink-active: ${inkActive};
+    --et-color-${name}-ink-disabled: ${inkDisabled};
     `;
     };
     const vars = [];
     for (const theme of themes) {
-        const name = createCssThemeName(theme.name);
+        const name = createCssColorThemeName(theme.name);
         if (theme.secondary || theme.tertiary) {
             vars.push(createVars(`${name}-primary`, theme.primary));
             if (theme.secondary) {
@@ -5503,7 +5769,7 @@ const createRootThemeCss = (themes) => {
  * @deprecated Migrate to Tailwind v4. Intent to remove in v6.
  */
 const createThemeStyle = (theme, isAlt) => {
-    const cssThemeName = createCssThemeName(theme.name);
+    const cssThemeName = createCssColorThemeName(theme.name);
     const stringSuffix = isAlt ? '-alt' : '';
     const selectors = [
         ...((theme.isDefault && !isAlt) || (theme.isDefaultAlt && isAlt)
@@ -5555,6 +5821,23 @@ const createTailwindColorThemes = (themes, prefix = 'et') => {
             active: createTailwindRgbVar(theme.primary.onColor.active) || createTailwindRgbVar(theme.primary.onColor.default),
             disabled: createTailwindRgbVar(theme.primary.onColor.disabled) || createTailwindRgbVar(theme.primary.onColor.default),
         };
+        const keyInk = `${prefix}-${theme.name}-ink`;
+        twThemes[keyInk] = {
+            DEFAULT: createTailwindRgbVar(theme.primary.inkColor?.default) || createTailwindRgbVar(theme.primary.color.default),
+            hover: createTailwindRgbVar(theme.primary.inkColor?.hover) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+            focus: createTailwindRgbVar(theme.primary.inkColor?.focus) ||
+                createTailwindRgbVar(theme.primary.inkColor?.hover) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+            active: createTailwindRgbVar(theme.primary.inkColor?.active) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+            disabled: createTailwindRgbVar(theme.primary.inkColor?.disabled) ||
+                createTailwindRgbVar(theme.primary.inkColor?.default) ||
+                createTailwindRgbVar(theme.primary.color.default),
+        };
     }
     return twThemes;
 };
@@ -5580,44 +5863,44 @@ const provideColorThemes = (themes) => {
         createThemeStyle(theme, true);
     }
     createRootThemeCss(themes);
-    return [ɵProvideColorThemes(themes.map((theme) => theme.name)), ɵProvideThemesPrefix('et')];
+    return [ɵProvideColorThemes(themes.map((theme) => theme.name)), ɵProvideColorThemesPrefix('et')];
 };
 
-const THEME_PROVIDER = new InjectionToken('ThemeProvider');
-class ProvideThemeDirective {
+const COLOR_PROVIDER = new InjectionToken('ColorProvider');
+class ProvideColorDirective {
     constructor() {
         this.themes = injectColorThemes({ optional: true });
-        this.prefix = injectThemesPrefix({ optional: true });
+        this.prefix = injectColorThemesPrefix({ optional: true });
         this.injector = inject(Injector);
         this.currentProviderSync = null;
-        this.mainTheme = input(undefined, { ...(ngDevMode ? { debugName: "mainTheme" } : {}), alias: 'etProvideTheme' });
-        this.altTheme = input(undefined, { ...(ngDevMode ? { debugName: "altTheme" } : {}), alias: 'etProvideAltTheme' });
-        this.mainThemeName = computed(() => {
-            const value = this.mainTheme();
+        this.mainColor = input(undefined, { ...(ngDevMode ? { debugName: "mainColor" } : {}), alias: 'etProvideColor' });
+        this.altColor = input(undefined, { ...(ngDevMode ? { debugName: "altColor" } : {}), alias: 'etProvideAltColor' });
+        this.mainColorName = computed(() => {
+            const value = this.mainColor();
             if (!this.themes || !value)
                 return;
             if (isDevMode() && !this.themes?.some((theme) => theme === value) && value !== null) {
                 console.error(`Theme ${value} does not exist. Please make sure to add it to provideColorThemes()`);
             }
-            return createCssThemeName(value);
-        }, ...(ngDevMode ? [{ debugName: "mainThemeName" }] : []));
-        this.altThemeName = computed(() => {
-            const value = this.altTheme();
+            return createCssColorThemeName(value);
+        }, ...(ngDevMode ? [{ debugName: "mainColorName" }] : []));
+        this.altColorName = computed(() => {
+            const value = this.altColor();
             if (!this.themes || !value)
                 return;
             if (isDevMode() && !this.themes?.some((theme) => theme === value) && value !== null) {
                 console.warn(`Theme ${value} does not exist. Please make sure to add it to provideColorThemes()`);
             }
-            return createCssThemeName(value);
-        }, ...(ngDevMode ? [{ debugName: "altThemeName" }] : []));
+            return createCssColorThemeName(value);
+        }, ...(ngDevMode ? [{ debugName: "altColorName" }] : []));
         this.themeClass = computed(() => {
             const themes = [];
             const prefix = this.prefix || 'et';
-            if (this.mainThemeName()) {
-                themes.push(`${prefix}-theme--${this.mainThemeName()}`);
+            if (this.mainColorName()) {
+                themes.push(`${prefix}-color--${this.mainColorName()}`);
             }
-            if (this.altThemeName()) {
-                themes.push(`${prefix}-theme-alt--${this.altThemeName()}`);
+            if (this.altColorName()) {
+                themes.push(`${prefix}-color-alt--${this.altColorName()}`);
             }
             return themes.join(' ');
         }, ...(ngDevMode ? [{ debugName: "themeClass" }] : []));
@@ -5626,11 +5909,11 @@ class ProvideThemeDirective {
         this.currentProviderSync?.destroy();
         runInInjectionContext(this.injector, () => {
             this.currentProviderSync = effect(() => {
-                const provideMainTheme = provider.mainTheme();
-                const provideAltTheme = provider.altTheme();
+                const provideMainColor = provider.mainColor();
+                const provideAltColor = provider.altColor();
                 untracked(() => {
-                    setInputSignal(this.mainTheme, provideMainTheme);
-                    setInputSignal(this.altTheme, provideAltTheme);
+                    setInputSignal(this.mainColor, provideMainColor);
+                    setInputSignal(this.altColor, provideAltColor);
                 });
             }, ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : []));
         });
@@ -5639,23 +5922,152 @@ class ProvideThemeDirective {
         this.currentProviderSync?.destroy();
         this.currentProviderSync = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ProvideThemeDirective, isStandalone: true, selector: "[etProvideTheme]", inputs: { mainTheme: { classPropertyName: "mainTheme", publicName: "etProvideTheme", isSignal: true, isRequired: false, transformFunction: null }, altTheme: { classPropertyName: "altTheme", publicName: "etProvideAltTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "themeClass()" } }, providers: [{ provide: THEME_PROVIDER, useExisting: ProvideThemeDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ProvideColorDirective, isStandalone: true, selector: "[etProvideColor]", inputs: { mainColor: { classPropertyName: "mainColor", publicName: "etProvideColor", isSignal: true, isRequired: false, transformFunction: null }, altColor: { classPropertyName: "altColor", publicName: "etProvideAltColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "themeClass()" } }, providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideThemeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideColorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[etProvideTheme]',
-                    providers: [{ provide: THEME_PROVIDER, useExisting: ProvideThemeDirective }],
+                    selector: '[etProvideColor]',
+                    providers: [{ provide: COLOR_PROVIDER, useExisting: ProvideColorDirective }],
                     host: {
                         '[class]': 'themeClass()',
                     },
                 }]
-        }], propDecorators: { mainTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideTheme", required: false }] }], altTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideAltTheme", required: false }] }] } });
+        }], propDecorators: { mainColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideColor", required: false }] }], altColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideAltColor", required: false }] }] } });
+
+const SURFACE_TYPE = {
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+const createCssSurfaceName = (name) => name.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+const resolveSurfaceByElevation = (themes, type, elevation) => themes.find((t) => t.type === type && t.elevation === elevation) ?? null;
+const [ɵProvideSurfaceThemes, injectSurfaceThemes] = createStaticProvider(undefined, {
+    name: 'Surface Themes',
+});
+const [ɵProvideSurfaceThemesPrefix, injectSurfaceThemesPrefix] = createStaticProvider('et', {
+    name: 'Surface Themes Prefix',
+});
+const provideSurfaceThemesWithTailwind4 = (themes, prefix = 'et') => [
+    ɵProvideSurfaceThemes(themes),
+    ɵProvideSurfaceThemesPrefix(prefix),
+];
+
+const SURFACE_PROVIDER = new InjectionToken('SurfaceProvider');
+class ProvideSurfaceDirective {
+    constructor() {
+        this.themes = injectSurfaceThemes({ optional: true });
+        this.prefix = injectSurfaceThemesPrefix({ optional: true });
+        this.injector = inject(Injector);
+        this.currentProviderSync = null;
+        this.surface = input(undefined, { ...(ngDevMode ? { debugName: "surface" } : {}), alias: 'etProvideSurface' });
+        this.resolvedTheme = computed(() => {
+            const value = this.surface();
+            if (!this.themes || !value)
+                return null;
+            const theme = this.themes.find((t) => t.name === value) ?? null;
+            if (isDevMode() && !theme && value !== null) {
+                console.error(`Surface theme ${value} does not exist. Please make sure to add it to provideSurfaceThemesWithTailwind4()`);
+            }
+            return theme;
+        }, ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : []));
+        this.elevation = computed(() => this.resolvedTheme()?.elevation ?? 0, ...(ngDevMode ? [{ debugName: "elevation" }] : []));
+        this.surfaceType = computed(() => this.resolvedTheme()?.type ?? null, ...(ngDevMode ? [{ debugName: "surfaceType" }] : []));
+        this.neutralColor = computed(() => this.resolvedTheme()?.neutralColor ?? null, ...(ngDevMode ? [{ debugName: "neutralColor" }] : []));
+        this.surfaceName = computed(() => {
+            const value = this.surface();
+            if (!this.themes || !value)
+                return;
+            return createCssSurfaceName(value);
+        }, ...(ngDevMode ? [{ debugName: "surfaceName" }] : []));
+        this.surfaceClass = computed(() => {
+            const prefix = this.prefix || 'et';
+            if (this.surfaceName()) {
+                return `${prefix}-surface--${this.surfaceName()}`;
+            }
+            return '';
+        }, ...(ngDevMode ? [{ debugName: "surfaceClass" }] : []));
+    }
+    syncWithProvider(provider) {
+        this.currentProviderSync?.destroy();
+        runInInjectionContext(this.injector, () => {
+            this.currentProviderSync = effect(() => {
+                const provideSurface = provider.surface();
+                untracked(() => {
+                    setInputSignal(this.surface, provideSurface);
+                });
+            }, ...(ngDevMode ? [{ debugName: "currentProviderSync" }] : []));
+        });
+    }
+    stopSyncWithProvider() {
+        this.currentProviderSync?.destroy();
+        this.currentProviderSync = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideSurfaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: ProvideSurfaceDirective, isStandalone: true, selector: "[etProvideSurface]", inputs: { surface: { classPropertyName: "surface", publicName: "etProvideSurface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "surfaceClass()" } }, providers: [{ provide: SURFACE_PROVIDER, useExisting: ProvideSurfaceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ProvideSurfaceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etProvideSurface]',
+                    providers: [{ provide: SURFACE_PROVIDER, useExisting: ProvideSurfaceDirective }],
+                    host: {
+                        '[class]': 'surfaceClass()',
+                    },
+                }]
+        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "etProvideSurface", required: false }] }] } });
+
+let uniqueId = 0;
+const [provideSurfaceContextTracker, injectSurfaceContextTracker] = createRootProvider(() => {
+    const entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : []));
+    const topEntry = computed(() => {
+        const stack = entries();
+        return stack.length > 0 ? (stack[stack.length - 1] ?? null) : null;
+    }, ...(ngDevMode ? [{ debugName: "topEntry" }] : []));
+    const topType = computed(() => topEntry()?.type ?? null, ...(ngDevMode ? [{ debugName: "topType" }] : []));
+    const topElevation = computed(() => topEntry()?.elevation ?? 0, ...(ngDevMode ? [{ debugName: "topElevation" }] : []));
+    const topNeutralColor = computed(() => topEntry()?.neutralColor ?? null, ...(ngDevMode ? [{ debugName: "topNeutralColor" }] : []));
+    const register = (type, elevation, neutralColor) => {
+        const id = `surface-ctx-${uniqueId++}`;
+        const entry = { id, type, elevation, neutralColor: neutralColor ?? null };
+        entries.update((e) => [...e, entry]);
+        return () => {
+            entries.update((e) => e.filter((item) => item.id !== id));
+        };
+    };
+    return { topType, topElevation, topNeutralColor, register };
+}, { name: 'SurfaceContextTracker' });
+
+class SurfacedStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: SurfacedStylesComponent, isStandalone: true, selector: "et-surfaced-styles", ngImport: i0, template: '', isInline: true, styles: [":where(.et-surfaced){--et-surface-background-rgb: var(--et-surface-background);--et-surface-background-solid: rgb(var(--et-surface-background-rgb));--et-surface-color-rgb: var(--et-surface-color);--et-surface-color-solid: rgb(var(--et-surface-color-rgb));--et-surface-color-muted-rgb: var(--et-surface-color-muted);--et-surface-color-muted-solid: rgb(var(--et-surface-color-muted-rgb));--et-surface-color-subtle-rgb: var(--et-surface-color-subtle);--et-surface-color-subtle-solid: rgb(var(--et-surface-color-subtle-rgb));--et-surface-border-rgb: var(--et-surface-border);--et-surface-border-solid: rgb(var(--et-surface-border-rgb))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-surfaced-styles', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":where(.et-surfaced){--et-surface-background-rgb: var(--et-surface-background);--et-surface-background-solid: rgb(var(--et-surface-background-rgb));--et-surface-color-rgb: var(--et-surface-color);--et-surface-color-solid: rgb(var(--et-surface-color-rgb));--et-surface-color-muted-rgb: var(--et-surface-color-muted);--et-surface-color-muted-solid: rgb(var(--et-surface-color-muted-rgb));--et-surface-color-subtle-rgb: var(--et-surface-color-subtle);--et-surface-color-subtle-solid: rgb(var(--et-surface-color-subtle-rgb));--et-surface-border-rgb: var(--et-surface-border);--et-surface-border-solid: rgb(var(--et-surface-border-rgb))}\n"] }]
+        }] });
+
+class SurfacedDirective {
+    constructor() {
+        this.styleManager = injectStyleManager();
+        this.styleManager.mount(SurfacedStylesComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: SurfacedDirective, isStandalone: true, selector: "[etSurfaced]", host: { classAttribute: "et-surfaced" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SurfacedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etSurfaced]',
+                    host: {
+                        class: 'et-surfaced',
+                    },
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, 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 };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BOUNDARY_ELEMENT_TOKEN, BREAKPOINT_INSTANCE_TOKEN, BREAKPOINT_ORDER, COLOR_PROVIDER, ClickOutsideDirective, ColoredDirective, DEFAULT_MULTI_INSTANCE_RELS, DEFAULT_MULTI_INSTANCE_TAGS, DEFAULT_VIEWPORT_CONFIG, DISABLE_LOGGER_PARAM, DragHandleDirective, ET_DISABLE_SCROLL_TOP, ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE, ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE, ET_PROPERTY_REMOVED, FOCUS_VISIBLE_TRACKER_TOKEN, IS_ARRAY_NOT_EMPTY, IS_EMAIL, InferMimeTypePipe, IsArrayNotEmpty, IsEmail, jsonLd as JsonLD, KeyPressManager, MUST_MATCH, MustMatch, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, PropsDirective, ProvideColorDirective, ProvideSurfaceDirective, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeHandlesComponent, RuntimeError, SEO_DIRECTIVE_TOKEN, SURFACE_PROVIDER, SURFACE_TYPE, ScrollObserverDirective, ScrollObserverEndDirective, ScrollObserverStartDirective, SeoDirective, StructuredDataComponent, SurfacedDirective, 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, createCssColorThemeName, createCssSurfaceName, 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, injectColorThemesPrefix, 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, injectStyleManager, injectSurfaceContextTracker, injectSurfaceThemes, injectSurfaceThemesPrefix, injectTemplateRef, injectTitleConfig, injectTitleStore, injectUrl, injectViewportConfig, injectViewportDimensions, injectViewportSize, 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, provideStyleManager, provideSurfaceContextTracker, provideSurfaceThemesWithTailwind4, provideTitleConfig, provideTitleStore, provideViewportConfig, resolveSurfaceByElevation, 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, ɵProvideColorThemesPrefix, ɵProvideSurfaceThemes, ɵProvideSurfaceThemesPrefix };
 //# sourceMappingURL=ethlete-core.mjs.map