@cocoar/ui-overlay 0.1.0-beta.80 → 0.1.0-beta.82

package/fesm2022/cocoar-ui-overlay.mjs

@@ -1,123 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ApplicationRef, EnvironmentInjector, createComponent, Injectable, Injector, createEnvironmentInjector } from '@angular/core';
+import { InjectionToken, Injector, createEnvironmentInjector, createComponent, inject, ApplicationRef, EnvironmentInjector, Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 
-class ContentBuilder {
-    fromComponent(component) {
-        return { kind: 'component', component };
-    }
-    fromTemplate(template) {
-        return { kind: 'template', template };
-    }
-    fromText() {
-        return { kind: 'text' };
-    }
-}
-
-function deepFreeze(value) {
-    if (value == null)
-        return value;
-    if (typeof value !== 'object')
-        return value;
-    // Only freeze plain JSON-like objects/arrays.
-    // Framework objects (e.g. Angular TemplateRef) can have internal mutable state.
-    const proto = Object.getPrototypeOf(value);
-    const isPlainObject = proto === Object.prototype || proto === null;
-    if (!isPlainObject && !Array.isArray(value)) {
-        return value;
-    }
-    if (Object.isFrozen(value))
-        return value;
-    Object.freeze(value);
-    if (Array.isArray(value)) {
-        for (const entry of value) {
-            deepFreeze(entry);
-        }
-        return value;
-    }
-    for (const key of Object.keys(value)) {
-        deepFreeze(value[key]);
-    }
-    return value;
-}
-
-class OverlayBuilder {
-    draft;
-    constructor(seed) {
-        this.draft = { ...(seed ?? {}) };
-    }
-    backdrop(cfg) {
-        if (cfg === 'none') {
-            this.draft.backdrop = { kind: 'none' };
-            return this;
-        }
-        if (cfg === 'modal') {
-            this.draft.backdrop = { kind: 'modal', closeOnBackdropClick: true };
-            return this;
-        }
-        this.draft.backdrop = cfg;
-        return this;
-    }
-    anchor(cfg) {
-        this.draft.anchor = cfg;
-        return this;
-    }
-    position(cfg) {
-        this.draft.position = cfg;
-        return this;
-    }
-    size(cfg) {
-        this.draft.size = cfg;
-        return this;
-    }
-    scroll(cfg) {
-        this.draft.scroll = cfg;
-        return this;
-    }
-    dismiss(cfg) {
-        this.draft.dismiss = cfg;
-        return this;
-    }
-    focus(cfg) {
-        this.draft.focus = cfg;
-        return this;
-    }
-    a11y(cfg) {
-        this.draft.a11y = cfg;
-        return this;
-    }
-    attachment(cfg) {
-        this.draft.attachment = cfg;
-        return this;
-    }
-    content(fn) {
-        const contentBuilder = new ContentBuilder();
-        this.draft.content = fn(contentBuilder);
-        return this;
-    }
-    freeze() {
-        return deepFreeze({ ...this.draft });
-    }
-}
-
-class CoarOverlay {
-    static define(fn, ...presets) {
-        const builder = new OverlayBuilder();
-        for (const preset of presets) {
-            preset(builder);
-        }
-        fn(builder);
-        return builder.freeze();
-    }
-    static fork(base, fn) {
-        const builder = new OverlayBuilder(base);
-        fn(builder);
-        return builder.freeze();
-    }
-}
-/** Alias kept for spec parity (`Overlay.define(...)`). */
-const Overlay = CoarOverlay;
-
 /**
  * Multi-provider token. Resolvers are applied in registration order.
  */
@@ -138,6 +22,20 @@ const COAR_OVERLAY_DEFAULTS = {
     attachment: { strategy: 'body' },
 };
 
+/**
+ * The OverlayRef for the overlay currently rendering this content.
+ *
+ * Provided automatically by CoarOverlayService for overlay content so components
+ * can open true child overlays without DOM lookups.
+ */
+const COAR_OVERLAY_REF = new InjectionToken('COAR_OVERLAY_REF');
+/**
+ * Parent overlay reference for menu hierarchies.
+ * Each overlay provides this token pointing to itself, enabling child menu items
+ * to close siblings by calling parent.closeChildren().
+ */
+const COAR_MENU_PARENT = new InjectionToken('COAR_MENU_PARENT');
+
 function getViewportRect() {
     const docEl = document.documentElement;
     const width = docEl?.clientWidth || window.innerWidth;
@@ -351,984 +249,998 @@ function clamp(value, min, max) {
     return value;
 }
 
-/**
- * The OverlayRef for the overlay currently rendering this content.
- *
- * Provided automatically by CoarOverlayService for overlay content so components
- * can open true child overlays without DOM lookups.
- */
-const COAR_OVERLAY_REF = new InjectionToken('COAR_OVERLAY_REF');
-/**
- * Parent overlay reference for menu hierarchies.
- * Each overlay provides this token pointing to itself, enabling child menu items
- * to close siblings by calling parent.closeChildren().
- */
-const COAR_MENU_PARENT = new InjectionToken('COAR_MENU_PARENT');
-
-class CoarOverlayService {
-    appRef = inject(ApplicationRef);
-    environmentInjector = inject(EnvironmentInjector);
-    specResolvers = inject(COAR_OVERLAY_SPEC_RESOLVERS, { optional: true }) ??
-        [];
-    openOverlays = new Set();
-    globalListenersInstalled = false;
-    onDocumentPointerDown = (event) => {
-        const overlays = this.getOpenOverlaysInOrder();
-        if (overlays.length === 0)
-            return;
-        const target = event.target;
-        const topmostContaining = this.getTopmostOverlayContainingTarget(target);
-        if (topmostContaining) {
-            // When interacting with an overlay, close any child overlays (submenus) that may be open.
-            topmostContaining.closeChildren();
-            return;
-        }
-        const topmost = this.getTopmostDismissableOverlay('outsideClick');
-        if (!topmost)
-            return;
-        // For overlay trees (e.g. menus + submenus), outside-click should close the entire tree.
-        const root = topmost.getRoot();
-        if (root !== topmost && root.isDismissable('outsideClick')) {
-            root.close();
-            return;
-        }
-        topmost.close();
-    };
-    onDocumentKeyDown = (event) => {
-        if (event.key === 'Escape') {
-            const topmost = this.getTopmostDismissableOverlay('escapeKey');
-            if (!topmost)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            topmost.close();
-            return;
+class CoarOverlayRef {
+    appRef;
+    environmentInjector;
+    spec;
+    inputs;
+    stackIndex;
+    parent;
+    onClosed;
+    afterClosedSubject = new Subject();
+    afterClosed$ = this.afterClosedSubject.asObservable();
+    get isClosed() {
+        return this.closed;
+    }
+    host;
+    panel;
+    backdropElement = null;
+    destroyContent = null;
+    resizeObserver = null;
+    cleanupFns = [];
+    closed = false;
+    lastResult;
+    rafPending = false;
+    presented = false;
+    closeFinalized = false;
+    restoreFocusTarget;
+    children = new Set();
+    hoverCloseTimer = null;
+    contentInjector;
+    contentEnvironmentInjector;
+    shouldAnimateMenu;
+    constructor(appRef, environmentInjector, spec, inputs, stackIndex, parent, onClosed) {
+        this.appRef = appRef;
+        this.environmentInjector = environmentInjector;
+        this.spec = spec;
+        this.inputs = inputs;
+        this.stackIndex = stackIndex;
+        this.parent = parent;
+        this.onClosed = onClosed;
+        this.host = document.createElement('div');
+        this.host.className = 'coar-overlay-host';
+        this.panel = document.createElement('div');
+        this.panel.className = 'coar-overlay-panel';
+        this.host.appendChild(this.panel);
+        this.shouldAnimateMenu = this.spec.a11y.role === 'menu';
+        this.contentInjector = Injector.create({
+            providers: [
+                { provide: COAR_OVERLAY_REF, useValue: this },
+                { provide: COAR_MENU_PARENT, useValue: this },
+            ],
+            parent: this.environmentInjector,
+        });
+        this.contentEnvironmentInjector = createEnvironmentInjector([
+            { provide: COAR_OVERLAY_REF, useValue: this },
+            { provide: COAR_MENU_PARENT, useValue: this },
+        ], this.environmentInjector);
+        Object.assign(this.host.style, {
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            transform: 'translate3d(0px, 0px, 0px)',
+            zIndex: `calc(var(--coar-z-overlay, 1000) + ${this.stackIndex * 2})`,
+            opacity: '1',
+            pointerEvents: 'none',
+        });
+        if (this.shouldAnimateMenu) {
+            Object.assign(this.panel.style, {
+                opacity: '0',
+                transition: 'opacity var(--coar-duration-slower) var(--coar-ease-out)',
+                willChange: 'opacity',
+            });
         }
-        if (event.key === 'Tab') {
-            const topmost = this.getTopmostFocusTrappingOverlay();
-            if (!topmost)
-                return;
-            if (topmost.handleTabKey(event)) {
-                event.preventDefault();
-            }
+        this.restoreFocusTarget =
+            (typeof document !== 'undefined' ? document.activeElement : null) ?? null;
+        if (this.parent) {
+            this.parent.children.add(this);
         }
-    };
-    open(spec, inputs, options) {
-        const resolved = this.resolveSpec(spec);
-        return this.attach(resolved, inputs, options);
     }
-    openChild(parent, spec, inputs, options) {
-        return this.open(spec, inputs, { parent, closeSiblings: options?.closeSiblings });
+    getHoverTreeDismissConfig() {
+        return this.spec.dismiss.hoverTree;
     }
-    closeAll() {
-        for (const ref of Array.from(this.openOverlays)) {
-            ref.close();
-        }
+    getPanelElement() {
+        return this.panel;
     }
-    resolveSpec(spec) {
-        const resolvedSpec = this.applySpecResolvers(spec);
-        const content = resolvedSpec.content;
-        if (!content) {
-            throw new Error('OverlaySpec missing content');
-        }
-        return {
-            content,
-            anchor: resolvedSpec.anchor ?? COAR_OVERLAY_DEFAULTS.anchor,
-            position: resolvedSpec.position ?? COAR_OVERLAY_DEFAULTS.position,
-            size: resolvedSpec.size ?? { mode: 'content' },
-            backdrop: resolvedSpec.backdrop ?? COAR_OVERLAY_DEFAULTS.backdrop,
-            scroll: resolvedSpec.scroll ?? COAR_OVERLAY_DEFAULTS.scroll,
-            dismiss: resolvedSpec.dismiss ?? COAR_OVERLAY_DEFAULTS.dismiss,
-            focus: resolvedSpec.focus ?? COAR_OVERLAY_DEFAULTS.focus,
-            a11y: resolvedSpec.a11y ?? COAR_OVERLAY_DEFAULTS.a11y,
-            attachment: resolvedSpec.attachment ?? COAR_OVERLAY_DEFAULTS.attachment,
-        };
+    getRoot() {
+        return this.parent?.getRoot() ?? this;
     }
-    applySpecResolvers(spec) {
-        if (this.specResolvers.length === 0)
-            return spec;
-        let current = spec;
-        for (const resolver of this.specResolvers) {
-            const next = resolver(current);
-            current = (next ?? current);
+    closeChildren(exclude) {
+        for (const child of Array.from(this.children)) {
+            if (child !== exclude) {
+                child.closeChildren();
+                child.close();
+            }
         }
-        return current;
     }
-    attach(spec, inputs, options) {
-        const parent = this.getInternalRefOrNull(options?.parent);
-        // Close sibling overlays if requested (close all existing children of parent)
-        if (options?.closeSiblings && parent) {
-            parent.closeChildren();
+    open() {
+        const backdrop = this.spec.backdrop;
+        if (backdrop.kind === 'modal') {
+            const backdropEl = document.createElement('div');
+            backdropEl.className = 'coar-overlay-backdrop';
+            Object.assign(backdropEl.style, {
+                position: 'fixed',
+                top: '0px',
+                left: '0px',
+                right: '0px',
+                bottom: '0px',
+                background: 'color-mix(in srgb, var(--coar-color-black) 40%, transparent)',
+                zIndex: `calc(var(--coar-z-overlay-backdrop, 999) + ${this.stackIndex * 2})`,
+            });
+            document.body.appendChild(backdropEl);
+            this.backdropElement = backdropEl;
+            if (backdrop.closeOnBackdropClick !== false) {
+                const onClick = (e) => {
+                    if (e.target === backdropEl) {
+                        this.close();
+                    }
+                };
+                backdropEl.addEventListener('click', onClick);
+                this.cleanupFns.push(() => backdropEl.removeEventListener('click', onClick));
+            }
         }
-        const stackIndex = this.openOverlays.size;
-        const effectiveSpec = this.inheritDismissFromParent(spec, parent);
-        const ref = new CoarOverlayRef(this.appRef, this.environmentInjector, effectiveSpec, this.mergeInputs(spec.content, inputs), stackIndex, parent, () => {
-            this.openOverlays.delete(ref);
-            this.uninstallGlobalListenersIfIdle();
-        });
-        this.openOverlays.add(ref);
-        this.installGlobalListenersIfNeeded();
-        ref.open();
-        return ref;
-    }
-    inheritDismissFromParent(spec, parent) {
-        if (!parent)
-            return spec;
-        const parentHoverTree = parent.getHoverTreeDismissConfig();
-        if (!parentHoverTree?.enabled)
-            return spec;
-        const childHoverTree = spec.dismiss.hoverTree;
-        // Explicit disable in child wins.
-        if (childHoverTree?.enabled === false)
-            return spec;
-        let mergedHoverTree;
-        if (!childHoverTree) {
-            mergedHoverTree = { ...parentHoverTree };
-        }
-        else {
-            mergedHoverTree = {
-                enabled: true,
-                delayMs: childHoverTree.delayMs ?? parentHoverTree.delayMs,
-            };
+        const attachment = this.spec.attachment;
+        const attachmentParent = attachment.strategy === 'parent' ? attachment.container : document.body;
+        attachmentParent.appendChild(this.host);
+        this.installHoverTreeDismissIfEnabled();
+        this.applyA11y();
+        this.destroyContent = this.renderContent(this.spec.content, this.panel, this.inputs);
+        this.applySize();
+        if (this.spec.focus.trap) {
+            this.installFocusTrap();
         }
-        // No change.
-        if (mergedHoverTree === childHoverTree)
-            return spec;
-        return {
-            ...spec,
-            dismiss: {
-                ...spec.dismiss,
-                hoverTree: mergedHoverTree,
-            },
-        };
-    }
-    getInternalRefOrNull(ref) {
-        if (!ref)
-            return null;
-        if (ref instanceof CoarOverlayRef)
-            return ref;
-        return null;
+        this.installRepositionTriggers();
+        this.updatePosition();
     }
-    installGlobalListenersIfNeeded() {
-        if (this.globalListenersInstalled)
-            return;
-        if (typeof document === 'undefined')
+    installHoverTreeDismissIfEnabled() {
+        const hoverTree = this.spec.dismiss.hoverTree;
+        if (!hoverTree?.enabled)
             return;
-        document.addEventListener('pointerdown', this.onDocumentPointerDown, { capture: true });
-        document.addEventListener('keydown', this.onDocumentKeyDown, { capture: true });
-        this.globalListenersInstalled = true;
+        const delayMs = typeof hoverTree.delayMs === 'number' ? hoverTree.delayMs : 300;
+        const onEnter = () => {
+            this.cancelHoverCloseUpTree();
+        };
+        const onHostLeave = () => {
+            this.scheduleHoverCloseUpTree(delayMs);
+        };
+        const onAnchorLeave = () => {
+            this.scheduleHoverClose(delayMs);
+        };
+        this.host.addEventListener('pointerenter', onEnter);
+        this.host.addEventListener('pointerleave', onHostLeave);
+        this.cleanupFns.push(() => {
+            this.host.removeEventListener('pointerenter', onEnter);
+            this.host.removeEventListener('pointerleave', onHostLeave);
+            this.cancelHoverClose();
+        });
+        if (this.spec.anchor.kind === 'element') {
+            const el = this.spec.anchor.element;
+            el.addEventListener('pointerenter', onEnter);
+            el.addEventListener('pointerleave', onAnchorLeave);
+            this.cleanupFns.push(() => {
+                el.removeEventListener('pointerenter', onEnter);
+                el.removeEventListener('pointerleave', onAnchorLeave);
+            });
+        }
     }
-    uninstallGlobalListenersIfIdle() {
-        if (!this.globalListenersInstalled)
-            return;
-        if (this.openOverlays.size > 0)
+    cancelHoverClose() {
+        if (!this.hoverCloseTimer)
             return;
-        if (typeof document === 'undefined')
+        clearTimeout(this.hoverCloseTimer);
+        this.hoverCloseTimer = null;
+    }
+    cancelHoverCloseUpTree() {
+        this.cancelHoverClose();
+        this.parent?.cancelHoverCloseUpTree();
+    }
+    scheduleHoverClose(delayMs) {
+        const hoverTree = this.spec.dismiss.hoverTree;
+        if (!hoverTree?.enabled)
             return;
-        document.removeEventListener('pointerdown', this.onDocumentPointerDown, { capture: true });
-        document.removeEventListener('keydown', this.onDocumentKeyDown, { capture: true });
-        this.globalListenersInstalled = false;
+        this.cancelHoverClose();
+        this.hoverCloseTimer = setTimeout(() => {
+            this.hoverCloseTimer = null;
+            this.close();
+        }, delayMs);
     }
-    getOpenOverlaysInOrder() {
-        return Array.from(this.openOverlays);
+    scheduleHoverCloseUpTree(delayMs) {
+        this.scheduleHoverClose(delayMs);
+        this.parent?.scheduleHoverCloseUpTree(delayMs);
     }
-    getTopmostOverlayContainingTarget(target) {
-        const overlays = this.getOpenOverlaysInOrder();
-        for (let i = overlays.length - 1; i >= 0; i -= 1) {
-            const overlay = overlays[i];
-            if (overlay.containsEventTarget(target))
-                return overlay;
-        }
-        return null;
+    hasFocusTrap() {
+        return this.spec.focus.trap === true;
     }
-    getTopmostDismissableOverlay(kind) {
-        const overlays = this.getOpenOverlaysInOrder();
-        for (let i = overlays.length - 1; i >= 0; i -= 1) {
-            const overlay = overlays[i];
-            if (overlay.isDismissable(kind)) {
-                return overlay;
-            }
+    isDismissable(kind) {
+        if (kind === 'outsideClick') {
+            return this.spec.dismiss.outsideClick !== false;
         }
-        return null;
+        return this.spec.dismiss.escapeKey !== false;
     }
-    getTopmostFocusTrappingOverlay() {
-        const overlays = this.getOpenOverlaysInOrder();
-        for (let i = overlays.length - 1; i >= 0; i -= 1) {
-            const overlay = overlays[i];
-            if (overlay.hasFocusTrap()) {
-                return overlay;
-            }
+    containsEventTarget(target) {
+        if (!(target instanceof Node))
+            return false;
+        if (this.host.contains(target))
+            return true;
+        if (this.backdropElement?.contains(target))
+            return true;
+        if (this.spec.anchor.kind === 'element') {
+            if (this.spec.anchor.element.contains(target))
+                return true;
         }
-        return null;
+        return false;
     }
-    mergeInputs(content, inputs) {
-        if (!content.defaults)
-            return inputs;
-        if (inputs == null || typeof inputs !== 'object') {
-            return { ...content.defaults };
+    handleTabKey(event) {
+        if (!this.spec.focus.trap)
+            return false;
+        const focusables = this.getFocusableElements();
+        if (focusables.length === 0) {
+            this.focusElement(this.host);
+            return true;
         }
-        return {
-            ...content.defaults,
-            ...inputs,
-        };
-    }
-    renderContent(content, host, inputs) {
-        switch (content.kind) {
-            case 'text': {
-                const text = inputs?.text;
-                if (typeof text !== 'string') {
-                    throw new Error('Text overlay requires inputs: { text: string }');
-                }
-                host.textContent = text;
-                return () => {
-                    host.textContent = '';
-                };
-            }
-            case 'template': {
-                const template = content.template;
-                if (!template)
-                    throw new Error('Template overlay requires a template');
-                // For templates: automatically add $implicit so templates can use let-variable without property name
-                // This allows both: let-context (uses $implicit) and let-prop="prop" (uses specific property)
-                let templateContext = inputs;
-                if (inputs != null && typeof inputs === 'object' && !('$implicit' in inputs)) {
-                    templateContext = {
-                        ...inputs,
-                        $implicit: inputs,
-                    };
-                }
-                const viewRef = template.createEmbeddedView(templateContext);
-                this.appRef.attachView(viewRef);
-                viewRef.detectChanges();
-                for (const node of viewRef.rootNodes) {
-                    host.appendChild(node);
-                }
-                return () => {
-                    this.appRef.detachView(viewRef);
-                    viewRef.destroy();
-                };
-            }
-            case 'component': {
-                const component = content.component;
-                if (!component)
-                    throw new Error('Component overlay requires a component');
-                const componentRef = createComponent(component, {
-                    environmentInjector: this.environmentInjector,
-                    hostElement: host,
-                });
-                if (inputs && typeof inputs === 'object') {
-                    for (const [key, value] of Object.entries(inputs)) {
-                        componentRef.setInput(key, value);
-                    }
-                }
-                this.appRef.attachView(componentRef.hostView);
-                componentRef.changeDetectorRef.detectChanges();
-                return () => {
-                    this.appRef.detachView(componentRef.hostView);
-                    componentRef.destroy();
-                };
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        const isActiveInside = active instanceof Node && (this.host.contains(active) || active === this.host);
+        if (!isActiveInside) {
+            this.focusElement(event.shiftKey ? last : first);
+            return true;
+        }
+        if (event.shiftKey) {
+            if (active === first || active === this.host) {
+                this.focusElement(last);
+                return true;
             }
+            return false;
         }
+        if (active === last) {
+            this.focusElement(first);
+            return true;
+        }
+        return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class CoarOverlayRef {
-    appRef;
-    environmentInjector;
-    spec;
-    inputs;
-    stackIndex;
-    parent;
-    onClosed;
-    afterClosedSubject = new Subject();
-    afterClosed$ = this.afterClosedSubject.asObservable();
-    get isClosed() {
-        return this.closed;
-    }
-    host;
-    panel;
-    backdropElement = null;
-    destroyContent = null;
-    resizeObserver = null;
-    cleanupFns = [];
-    closed = false;
-    lastResult;
-    rafPending = false;
-    presented = false;
-    closeFinalized = false;
-    restoreFocusTarget;
-    children = new Set();
-    hoverCloseTimer = null;
-    contentInjector;
-    contentEnvironmentInjector;
-    shouldAnimateMenu;
-    constructor(appRef, environmentInjector, spec, inputs, stackIndex, parent, onClosed) {
-        this.appRef = appRef;
-        this.environmentInjector = environmentInjector;
-        this.spec = spec;
-        this.inputs = inputs;
-        this.stackIndex = stackIndex;
-        this.parent = parent;
-        this.onClosed = onClosed;
-        this.host = document.createElement('div');
-        this.host.className = 'coar-overlay-host';
-        this.panel = document.createElement('div');
-        this.panel.className = 'coar-overlay-panel';
-        this.host.appendChild(this.panel);
-        this.shouldAnimateMenu = this.spec.a11y.role === 'menu';
-        this.contentInjector = Injector.create({
-            providers: [
-                { provide: COAR_OVERLAY_REF, useValue: this },
-                { provide: COAR_MENU_PARENT, useValue: this },
-            ],
-            parent: this.environmentInjector,
-        });
-        this.contentEnvironmentInjector = createEnvironmentInjector([
-            { provide: COAR_OVERLAY_REF, useValue: this },
-            { provide: COAR_MENU_PARENT, useValue: this },
-        ], this.environmentInjector);
-        Object.assign(this.host.style, {
-            position: 'fixed',
-            top: '0px',
-            left: '0px',
-            transform: 'translate3d(0px, 0px, 0px)',
-            zIndex: `calc(var(--coar-z-overlay, 1000) + ${this.stackIndex * 2})`,
-            opacity: '1',
-            pointerEvents: 'none',
+    updatePosition() {
+        if (this.closed)
+            return;
+        if (this.rafPending)
+            return;
+        this.rafPending = true;
+        this.schedule(() => {
+            this.rafPending = false;
+            if (this.closed)
+                return;
+            const viewport = getViewportRect();
+            const anchorRect = getAnchorRect(this.spec.anchor, viewport);
+            const rect = this.host.getBoundingClientRect();
+            const overlaySize = {
+                width: rect.width,
+                height: rect.height,
+            };
+            const attachment = this.spec.attachment;
+            const boundaryRect = attachment.strategy === 'parent' ? getContainerRect(attachment.container) : undefined;
+            const coords = computeOverlayCoordinates(anchorRect, overlaySize, this.spec.position, viewport, boundaryRect);
+            this.host.style.transform = `translate3d(${Math.round(coords.left)}px, ${Math.round(coords.top)}px, 0px)`;
+            this.present();
         });
+    }
+    present() {
+        if (this.presented)
+            return;
+        this.presented = true;
         if (this.shouldAnimateMenu) {
-            Object.assign(this.panel.style, {
-                opacity: '0',
-                transition: 'opacity var(--coar-duration-slower) var(--coar-ease-out)',
-                willChange: 'opacity',
-            });
+            void this.panel.getBoundingClientRect();
         }
-        this.restoreFocusTarget =
-            (typeof document !== 'undefined' ? document.activeElement : null) ?? null;
-        if (this.parent) {
-            this.parent.children.add(this);
+        this.host.style.pointerEvents = 'auto';
+        if (this.shouldAnimateMenu) {
+            this.panel.style.opacity = '1';
         }
     }
-    getHoverTreeDismissConfig() {
-        return this.spec.dismiss.hoverTree;
-    }
-    getPanelElement() {
-        return this.panel;
-    }
-    getRoot() {
-        return this.parent?.getRoot() ?? this;
-    }
-    closeChildren(exclude) {
-        for (const child of Array.from(this.children)) {
-            if (child !== exclude) {
-                // Recursively close descendants first (depth-first)
-                child.closeChildren();
-                // Then close this child
-                child.close();
-            }
+    close(result) {
+        if (this.closed)
+            return;
+        this.closed = true;
+        this.lastResult = result;
+        this.cancelHoverClose();
+        this.closeChildren();
+        for (const cleanup of this.cleanupFns) {
+            cleanup();
         }
-    }
-    /**
-     * Close all sibling overlays (other children of the same parent).
-     * Used when opening a new child overlay with closeSiblings option.
-     */
-    closeSiblings() {
-        if (this.parent) {
-            for (const sibling of Array.from(this.parent.children)) {
-                if (sibling !== this) {
-                    sibling.close();
+        this.cleanupFns = [];
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.shouldAnimateMenu && this.presented) {
+            this.host.style.pointerEvents = 'none';
+            this.panel.style.opacity = '0';
+            const finalizeOnce = () => {
+                this.finalizeClose();
+            };
+            let fallbackTimer = null;
+            const onEnd = (e) => {
+                if (e.target === this.panel && e.propertyName === 'opacity') {
+                    this.host.removeEventListener('transitionend', onEnd);
+                    if (fallbackTimer) {
+                        clearTimeout(fallbackTimer);
+                        fallbackTimer = null;
+                    }
+                    finalizeOnce();
                 }
+            };
+            this.host.addEventListener('transitionend', onEnd);
+            const fallbackMs = this.getMaxTransitionTimeMs();
+            if (fallbackMs === 0) {
+                this.host.removeEventListener('transitionend', onEnd);
+                finalizeOnce();
             }
+            else {
+                fallbackTimer = setTimeout(() => {
+                    this.host.removeEventListener('transitionend', onEnd);
+                    finalizeOnce();
+                }, fallbackMs);
+            }
+            return;
         }
+        this.finalizeClose();
     }
-    open() {
-        const backdrop = this.spec.backdrop;
-        if (backdrop.kind === 'modal') {
-            const backdropEl = document.createElement('div');
-            backdropEl.className = 'coar-overlay-backdrop';
-            Object.assign(backdropEl.style, {
-                position: 'fixed',
-                top: '0px',
-                left: '0px',
-                right: '0px',
-                bottom: '0px',
-                background: 'color-mix(in srgb, var(--coar-color-black) 40%, transparent)',
-                zIndex: `calc(var(--coar-z-overlay-backdrop, 999) + ${this.stackIndex * 2})`,
-            });
-            document.body.appendChild(backdropEl);
-            this.backdropElement = backdropEl;
-            if (backdrop.closeOnBackdropClick !== false) {
-                const onClick = (e) => {
-                    if (e.target === backdropEl) {
-                        this.close();
+    finalizeClose() {
+        if (this.closeFinalized)
+            return;
+        this.closeFinalized = true;
+        this.destroyContent?.();
+        this.destroyContent = null;
+        this.host.remove();
+        this.backdropElement?.remove();
+        this.backdropElement = null;
+        if (this.spec.focus.restore !== false) {
+            const el = this.restoreFocusTarget;
+            if (el && typeof el.focus === 'function') {
+                try {
+                    el.focus({ preventScroll: true });
+                }
+                catch {
+                    try {
+                        el.focus();
                     }
-                };
-                backdropEl.addEventListener('click', onClick);
-                this.cleanupFns.push(() => backdropEl.removeEventListener('click', onClick));
+                    catch {
+                        // noop
+                    }
+                }
             }
         }
-        // Attach overlay to the appropriate parent based on attachment strategy
-        const attachment = this.spec.attachment;
-        const attachmentParent = attachment.strategy === 'parent' ? attachment.container : document.body;
-        attachmentParent.appendChild(this.host);
-        this.installHoverTreeDismissIfEnabled();
-        this.applyA11y();
-        this.destroyContent = this.renderContent(this.spec.content, this.panel, this.inputs);
-        this.applySize();
-        if (this.spec.focus.trap) {
-            this.installFocusTrap();
+        this.afterClosedSubject.next(this.lastResult);
+        this.afterClosedSubject.complete();
+        this.parent?.children.delete(this);
+        this.onClosed();
+    }
+    getMaxTransitionTimeMs() {
+        if (typeof getComputedStyle === 'undefined')
+            return 0;
+        const style = getComputedStyle(this.panel);
+        const durations = style.transitionDuration.split(',').map((v) => v.trim());
+        const delays = style.transitionDelay.split(',').map((v) => v.trim());
+        const entries = Math.max(durations.length, delays.length);
+        let maxMs = 0;
+        for (let i = 0; i < entries; i++) {
+            const duration = durations[i] ?? durations[durations.length - 1] ?? '0ms';
+            const delay = delays[i] ?? delays[delays.length - 1] ?? '0ms';
+            const ms = this.parseCssTimeToMs(duration) + this.parseCssTimeToMs(delay);
+            maxMs = Math.max(maxMs, ms);
         }
-        this.installRepositionTriggers();
-        this.updatePosition();
+        return maxMs;
     }
-    installHoverTreeDismissIfEnabled() {
-        const hoverTree = this.spec.dismiss.hoverTree;
-        if (!hoverTree?.enabled)
+    parseCssTimeToMs(value) {
+        const v = value.trim();
+        if (!v)
+            return 0;
+        if (v.endsWith('ms')) {
+            const n = Number(v.slice(0, -2));
+            return Number.isFinite(n) ? n : 0;
+        }
+        if (v.endsWith('s')) {
+            const n = Number(v.slice(0, -1));
+            return Number.isFinite(n) ? n * 1000 : 0;
+        }
+        const n = Number(v);
+        return Number.isFinite(n) ? n : 0;
+    }
+    installFocusTrap() {
+        this.host.tabIndex = -1;
+        this.schedule(() => {
+            if (this.closed)
+                return;
+            const focusables = this.getFocusableElements();
+            this.focusElement(focusables[0] ?? this.host);
+        });
+    }
+    applySize() {
+        const size = this.spec.size;
+        if (!size)
             return;
-        const delayMs = typeof hoverTree.delayMs === 'number' ? hoverTree.delayMs : 300;
-        const onEnter = () => {
-            this.cancelHoverCloseUpTree();
-        };
-        const onHostLeave = () => {
-            this.scheduleHoverCloseUpTree(delayMs);
+        const viewport = getViewportRect();
+        const resolveMin = (value, anchorSize) => {
+            if (value === 'anchor')
+                return anchorSize;
+            if (typeof value === 'number')
+                return value;
+            return null;
         };
-        // Important: an overlay's anchor element can be *inside* its parent overlay (submenu items).
-        // Leaving that anchor while still hovering the parent overlay should not schedule closing
-        // the parent/grandparent overlays; only this (leaf) overlay should be eligible to close.
-        const onAnchorLeave = () => {
-            this.scheduleHoverClose(delayMs);
+        const resolveMax = (value, viewportSize) => {
+            if (value === 'viewport')
+                return viewportSize;
+            if (typeof value === 'number')
+                return value;
+            return null;
         };
-        this.host.addEventListener('pointerenter', onEnter);
-        this.host.addEventListener('pointerleave', onHostLeave);
-        this.cleanupFns.push(() => {
-            this.host.removeEventListener('pointerenter', onEnter);
-            this.host.removeEventListener('pointerleave', onHostLeave);
-            this.cancelHoverClose();
-        });
-        if (this.spec.anchor.kind === 'element') {
-            const el = this.spec.anchor.element;
-            el.addEventListener('pointerenter', onEnter);
-            el.addEventListener('pointerleave', onAnchorLeave);
-            this.cleanupFns.push(() => {
-                el.removeEventListener('pointerenter', onEnter);
-                el.removeEventListener('pointerleave', onAnchorLeave);
-            });
+        const anchorRect = getAnchorRect(this.spec.anchor, viewport);
+        const minWidthPx = resolveMin(size.minWidth, anchorRect.width);
+        const minHeightPx = resolveMin(size.minHeight, anchorRect.height);
+        const maxWidthPx = resolveMax(size.maxWidth, viewport.width);
+        const maxHeightPx = resolveMax(size.maxHeight, viewport.height);
+        this.host.style.width = '';
+        this.host.style.height = '';
+        this.host.style.minWidth = '';
+        this.host.style.minHeight = '';
+        this.host.style.maxWidth = '';
+        this.host.style.maxHeight = '';
+        this.host.style.overflow = '';
+        if (minWidthPx != null && minWidthPx > 0)
+            this.host.style.minWidth = `${minWidthPx}px`;
+        if (minHeightPx != null && minHeightPx > 0)
+            this.host.style.minHeight = `${minHeightPx}px`;
+        if (size.mode === 'content') {
+            return;
+        }
+        if (size.mode === 'content-clamped') {
+            if (maxWidthPx != null)
+                this.host.style.maxWidth = `${maxWidthPx}px`;
+            if (maxHeightPx != null)
+                this.host.style.maxHeight = `${maxHeightPx}px`;
+            this.host.style.overflow = 'auto';
+            return;
         }
+        if (maxWidthPx != null)
+            this.host.style.width = `${maxWidthPx}px`;
+        if (maxHeightPx != null)
+            this.host.style.height = `${maxHeightPx}px`;
+        this.host.style.overflow = 'auto';
     }
-    cancelHoverClose() {
-        if (!this.hoverCloseTimer)
+    applyA11y() {
+        const a11y = this.spec.a11y;
+        if (!a11y)
             return;
-        clearTimeout(this.hoverCloseTimer);
-        this.hoverCloseTimer = null;
-    }
-    cancelHoverCloseUpTree() {
-        this.cancelHoverClose();
-        this.parent?.cancelHoverCloseUpTree();
+        if (a11y.role) {
+            this.host.setAttribute('role', a11y.role);
+        }
+        this.setAttrIfDefined('aria-label', a11y.label);
+        this.setAttrIfDefined('aria-labelledby', a11y.labelledBy);
+        this.setAttrIfDefined('aria-describedby', a11y.describedBy);
+        if (a11y.role === 'dialog' && this.spec.backdrop.kind === 'modal') {
+            this.host.setAttribute('aria-modal', 'true');
+        }
     }
-    scheduleHoverClose(delayMs) {
-        const hoverTree = this.spec.dismiss.hoverTree;
-        if (!hoverTree?.enabled)
+    setAttrIfDefined(name, value) {
+        if (typeof value === 'string' && value.length > 0) {
+            this.host.setAttribute(name, value);
             return;
-        this.cancelHoverClose();
-        this.hoverCloseTimer = setTimeout(() => {
-            this.hoverCloseTimer = null;
-            this.close();
-        }, delayMs);
-    }
-    scheduleHoverCloseUpTree(delayMs) {
-        this.scheduleHoverClose(delayMs);
-        this.parent?.scheduleHoverCloseUpTree(delayMs);
-    }
-    hasFocusTrap() {
-        return this.spec.focus.trap === true;
-    }
-    isDismissable(kind) {
-        if (kind === 'outsideClick') {
-            return this.spec.dismiss.outsideClick !== false;
         }
-        return this.spec.dismiss.escapeKey !== false;
+        this.host.removeAttribute(name);
     }
-    containsEventTarget(target) {
-        if (!(target instanceof Node))
-            return false;
-        if (this.host.contains(target))
-            return true;
-        if (this.backdropElement?.contains(target))
-            return true;
-        // Also check if click is on the anchor element (e.g., select trigger)
-        // to prevent closing when clicking the trigger that opened the overlay
-        if (this.spec.anchor.kind === 'element') {
-            if (this.spec.anchor.element.contains(target))
-                return true;
+    focusElement(el) {
+        try {
+            el.focus({ preventScroll: true });
+        }
+        catch {
+            try {
+                el.focus();
+            }
+            catch {
+                // noop
+            }
         }
-        return false;
     }
-    handleTabKey(event) {
-        if (!this.spec.focus.trap)
-            return false;
-        const focusables = this.getFocusableElements();
-        if (focusables.length === 0) {
-            this.focusElement(this.host);
+    getFocusableElements() {
+        const candidates = Array.from(this.host.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'));
+        return candidates.filter((el) => !this.isHidden(el));
+    }
+    isHidden(el) {
+        if (el.hasAttribute('hidden'))
             return true;
-        }
-        const first = focusables[0];
-        const last = focusables[focusables.length - 1];
-        const active = document.activeElement;
-        const isActiveInside = active instanceof Node && (this.host.contains(active) || active === this.host);
-        // If focus is outside, bring it inside.
-        if (!isActiveInside) {
-            this.focusElement(event.shiftKey ? last : first);
+        if (el.getAttribute('aria-hidden') === 'true')
             return true;
-        }
-        if (event.shiftKey) {
-            if (active === first || active === this.host) {
-                this.focusElement(last);
-                return true;
-            }
-            return false;
-        }
-        if (active === last) {
-            this.focusElement(first);
+        const style = el.style;
+        if (style.display === 'none' || style.visibility === 'hidden')
             return true;
-        }
         return false;
     }
-    updatePosition() {
-        if (this.closed)
-            return;
-        if (this.rafPending)
+    installRepositionTriggers() {
+        const strategy = this.spec.scroll.strategy;
+        if (strategy === 'noop')
             return;
-        this.rafPending = true;
-        this.schedule(() => {
-            this.rafPending = false;
-            if (this.closed)
-                return;
-            const viewport = getViewportRect();
-            const anchorRect = getAnchorRect(this.spec.anchor, viewport);
-            const rect = this.host.getBoundingClientRect();
-            const overlaySize = {
-                width: rect.width,
-                height: rect.height,
-            };
-            // For parent-attached overlays, use container boundaries instead of viewport
-            const attachment = this.spec.attachment;
-            const boundaryRect = attachment.strategy === 'parent' ? getContainerRect(attachment.container) : undefined;
-            const coords = computeOverlayCoordinates(anchorRect, overlaySize, this.spec.position, viewport, boundaryRect);
-            this.host.style.transform = `translate3d(${Math.round(coords.left)}px, ${Math.round(coords.top)}px, 0px)`;
-            this.present();
-        });
-    }
-    present() {
-        if (this.presented)
+        const scrollParents = this.spec.anchor.kind === 'element' ? getScrollParents(this.spec.anchor.element) : [window];
+        if (strategy === 'reposition') {
+            const onScroll = () => this.updatePosition();
+            const onResize = () => this.updatePosition();
+            for (const parent of scrollParents) {
+                if (parent === window) {
+                    window.addEventListener('scroll', onScroll, { passive: true });
+                    this.cleanupFns.push(() => window.removeEventListener('scroll', onScroll));
+                    continue;
+                }
+                parent.addEventListener('scroll', onScroll, { passive: true });
+                this.cleanupFns.push(() => parent.removeEventListener('scroll', onScroll));
+            }
+            window.addEventListener('resize', onResize, { passive: true });
+            this.cleanupFns.push(() => window.removeEventListener('resize', onResize));
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(() => this.updatePosition());
+                ro.observe(this.host);
+                this.resizeObserver = ro;
+            }
             return;
-        this.presented = true;
-        if (this.shouldAnimateMenu) {
-            // Ensure the initial opacity=0 is committed before we flip to 1,
-            // otherwise some browsers skip the transition on first paint.
-            void this.panel.getBoundingClientRect();
         }
-        this.host.style.pointerEvents = 'auto';
-        if (this.shouldAnimateMenu) {
-            this.panel.style.opacity = '1';
+        if (strategy === 'close') {
+            const onScroll = (e) => {
+                const target = e.target;
+                if (target instanceof Node && this.host.contains(target))
+                    return;
+                this.close();
+            };
+            if (typeof document !== 'undefined') {
+                document.addEventListener('scroll', onScroll, { passive: true, capture: true });
+                this.cleanupFns.push(() => document.removeEventListener('scroll', onScroll, { capture: true }));
+            }
+            window.addEventListener('scroll', onScroll, { passive: true });
+            this.cleanupFns.push(() => window.removeEventListener('scroll', onScroll));
+            for (const parent of scrollParents) {
+                if (parent === window)
+                    continue;
+                parent.addEventListener('scroll', onScroll, { passive: true });
+                this.cleanupFns.push(() => parent.removeEventListener('scroll', onScroll));
+            }
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(() => this.updatePosition());
+                ro.observe(this.host);
+                this.resizeObserver = ro;
+            }
         }
     }
-    close(result) {
-        if (this.closed)
+    schedule(fn) {
+        if (typeof requestAnimationFrame !== 'undefined') {
+            requestAnimationFrame(() => fn());
             return;
-        this.closed = true;
-        this.lastResult = result;
-        this.cancelHoverClose();
-        // Ensure overlay trees (menus/submenus) close consistently.
-        this.closeChildren();
-        for (const cleanup of this.cleanupFns) {
-            cleanup();
         }
-        this.cleanupFns = [];
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = null;
-        // Begin visual close (menu overlays only). We keep the host in the DOM
-        // briefly so opacity can transition to 0, then tear down.
-        if (this.shouldAnimateMenu && this.presented) {
-            this.host.style.pointerEvents = 'none';
-            this.panel.style.opacity = '0';
-            const finalizeOnce = () => {
-                this.finalizeClose();
-            };
-            let fallbackTimer = null;
-            const onEnd = (e) => {
-                if (e.target === this.panel && e.propertyName === 'opacity') {
-                    this.host.removeEventListener('transitionend', onEnd);
-                    if (fallbackTimer) {
-                        clearTimeout(fallbackTimer);
-                        fallbackTimer = null;
+        setTimeout(() => fn(), 0);
+    }
+    renderContent(content, host, inputs) {
+        switch (content.kind) {
+            case 'text': {
+                const text = inputs?.text;
+                if (typeof text !== 'string') {
+                    throw new Error('Text overlay requires inputs: { text: string }');
+                }
+                host.textContent = text;
+                return () => {
+                    host.textContent = '';
+                };
+            }
+            case 'template': {
+                const template = content.template;
+                if (!template)
+                    throw new Error('Template overlay requires a template');
+                let templateContext = inputs;
+                if (inputs != null && typeof inputs === 'object' && !('$implicit' in inputs)) {
+                    templateContext = {
+                        ...inputs,
+                        $implicit: inputs,
+                    };
+                }
+                const viewRef = template.createEmbeddedView(templateContext, this.contentInjector);
+                this.appRef.attachView(viewRef);
+                viewRef.detectChanges();
+                for (const node of viewRef.rootNodes) {
+                    host.appendChild(node);
+                }
+                return () => {
+                    this.appRef.detachView(viewRef);
+                    viewRef.destroy();
+                };
+            }
+            case 'component': {
+                const component = content.component;
+                if (!component)
+                    throw new Error('Component overlay requires a component');
+                const componentRef = createComponent(component, {
+                    environmentInjector: this.contentEnvironmentInjector,
+                    hostElement: host,
+                });
+                if (inputs && typeof inputs === 'object') {
+                    for (const [key, value] of Object.entries(inputs)) {
+                        componentRef.setInput(key, value);
                     }
-                    finalizeOnce();
                 }
-            };
-            this.host.addEventListener('transitionend', onEnd);
-            const fallbackMs = this.getMaxTransitionTimeMs();
-            if (fallbackMs === 0) {
-                this.host.removeEventListener('transitionend', onEnd);
-                finalizeOnce();
-            }
-            else {
-                fallbackTimer = setTimeout(() => {
-                    this.host.removeEventListener('transitionend', onEnd);
-                    finalizeOnce();
-                }, fallbackMs);
+                this.appRef.attachView(componentRef.hostView);
+                componentRef.changeDetectorRef.detectChanges();
+                return () => {
+                    this.appRef.detachView(componentRef.hostView);
+                    componentRef.destroy();
+                };
             }
-            return;
         }
-        this.finalizeClose();
     }
-    finalizeClose() {
-        if (this.closeFinalized)
+}
+
+class CoarOverlayService {
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    specResolvers = inject(COAR_OVERLAY_SPEC_RESOLVERS, { optional: true }) ??
+        [];
+    openOverlays = new Set();
+    globalListenersInstalled = false;
+    onDocumentPointerDown = (event) => {
+        const overlays = this.getOpenOverlaysInOrder();
+        if (overlays.length === 0)
             return;
-        this.closeFinalized = true;
-        this.destroyContent?.();
-        this.destroyContent = null;
-        this.host.remove();
-        this.backdropElement?.remove();
-        this.backdropElement = null;
-        if (this.spec.focus.restore !== false) {
-            const el = this.restoreFocusTarget;
-            if (el && typeof el.focus === 'function') {
-                try {
-                    el.focus({ preventScroll: true });
-                }
-                catch {
-                    try {
-                        el.focus();
-                    }
-                    catch {
-                        // noop
-                    }
-                }
+        const target = event.target;
+        const topmostContaining = this.getTopmostOverlayContainingTarget(target);
+        if (topmostContaining) {
+            // When interacting with an overlay, close any child overlays (submenus) that may be open.
+            topmostContaining.closeChildren();
+            return;
+        }
+        const topmost = this.getTopmostDismissableOverlay('outsideClick');
+        if (!topmost)
+            return;
+        // For overlay trees (e.g. menus + submenus), outside-click should close the entire tree.
+        const root = topmost.getRoot();
+        if (root !== topmost && root.isDismissable('outsideClick')) {
+            root.close();
+            return;
+        }
+        topmost.close();
+    };
+    onDocumentKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            const topmost = this.getTopmostDismissableOverlay('escapeKey');
+            if (!topmost)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            topmost.close();
+            return;
+        }
+        if (event.key === 'Tab') {
+            const topmost = this.getTopmostFocusTrappingOverlay();
+            if (!topmost)
+                return;
+            if (topmost.handleTabKey(event)) {
+                event.preventDefault();
             }
         }
-        this.afterClosedSubject.next(this.lastResult);
-        this.afterClosedSubject.complete();
-        this.parent?.children.delete(this);
-        this.onClosed();
+    };
+    openTemplate(template, settings, inputs) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'template', template },
+        });
+        return this.attach(resolved, inputs, undefined);
     }
-    getMaxTransitionTimeMs() {
-        if (typeof getComputedStyle === 'undefined')
-            return 0;
-        const style = getComputedStyle(this.panel);
-        const durations = style.transitionDuration.split(',').map((v) => v.trim());
-        const delays = style.transitionDelay.split(',').map((v) => v.trim());
-        const entries = Math.max(durations.length, delays.length);
-        let maxMs = 0;
-        for (let i = 0; i < entries; i++) {
-            const duration = durations[i] ?? durations[durations.length - 1] ?? '0ms';
-            const delay = delays[i] ?? delays[delays.length - 1] ?? '0ms';
-            const ms = this.parseCssTimeToMs(duration) + this.parseCssTimeToMs(delay);
-            maxMs = Math.max(maxMs, ms);
+    openComponent(component, settings, inputs) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'component', component },
+        });
+        return this.attach(resolved, inputs, undefined);
+    }
+    openText(settings, inputs) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'text' },
+        });
+        return this.attach(resolved, inputs, undefined);
+    }
+    openTemplateAsChild(parent, template, settings, inputs, options) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'template', template },
+        });
+        return this.attach(resolved, inputs, { parent, closeSiblings: options?.closeSiblings });
+    }
+    openComponentAsChild(parent, component, settings, inputs, options) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'component', component },
+        });
+        return this.attach(resolved, inputs, { parent, closeSiblings: options?.closeSiblings });
+    }
+    openTextAsChild(parent, settings, inputs, options) {
+        const resolved = this.resolveSpec({
+            ...settings,
+            content: { kind: 'text' },
+        });
+        return this.attach(resolved, inputs, { parent, closeSiblings: options?.closeSiblings });
+    }
+    closeAll() {
+        for (const ref of Array.from(this.openOverlays)) {
+            ref.close();
         }
-        return maxMs;
     }
-    parseCssTimeToMs(value) {
-        const v = value.trim();
-        if (!v)
-            return 0;
-        if (v.endsWith('ms')) {
-            const n = Number(v.slice(0, -2));
-            return Number.isFinite(n) ? n : 0;
+    resolveSpec(spec) {
+        const resolvedSpec = this.applySpecResolvers(spec);
+        const content = resolvedSpec.content;
+        if (!content) {
+            throw new Error('OverlaySpec missing content');
         }
-        if (v.endsWith('s')) {
-            const n = Number(v.slice(0, -1));
-            return Number.isFinite(n) ? n * 1000 : 0;
+        return {
+            content,
+            anchor: resolvedSpec.anchor ?? COAR_OVERLAY_DEFAULTS.anchor,
+            position: resolvedSpec.position ?? COAR_OVERLAY_DEFAULTS.position,
+            size: resolvedSpec.size ?? { mode: 'content' },
+            backdrop: resolvedSpec.backdrop ?? COAR_OVERLAY_DEFAULTS.backdrop,
+            scroll: resolvedSpec.scroll ?? COAR_OVERLAY_DEFAULTS.scroll,
+            dismiss: resolvedSpec.dismiss ?? COAR_OVERLAY_DEFAULTS.dismiss,
+            focus: resolvedSpec.focus ?? COAR_OVERLAY_DEFAULTS.focus,
+            a11y: resolvedSpec.a11y ?? COAR_OVERLAY_DEFAULTS.a11y,
+            attachment: resolvedSpec.attachment ?? COAR_OVERLAY_DEFAULTS.attachment,
+        };
+    }
+    applySpecResolvers(spec) {
+        if (this.specResolvers.length === 0)
+            return spec;
+        let current = spec;
+        for (const resolver of this.specResolvers) {
+            const next = resolver(current);
+            current = (next ?? current);
         }
-        const n = Number(v);
-        return Number.isFinite(n) ? n : 0;
+        return current;
     }
-    installFocusTrap() {
-        // Ensure the host can receive programmatic focus as a fallback.
-        this.host.tabIndex = -1;
-        // Move focus into the overlay on open (best-effort).
-        this.schedule(() => {
-            if (this.closed)
-                return;
-            const focusables = this.getFocusableElements();
-            this.focusElement(focusables[0] ?? this.host);
+    attach(spec, inputs, options) {
+        const parent = this.getInternalRefOrNull(options?.parent);
+        // Close sibling overlays if requested (close all existing children of parent)
+        if (options?.closeSiblings && parent) {
+            parent.closeChildren();
+        }
+        const stackIndex = this.openOverlays.size;
+        const effectiveSpec = this.inheritDismissFromParent(spec, parent);
+        const ref = new CoarOverlayRef(this.appRef, this.environmentInjector, effectiveSpec, this.mergeInputs(spec.content, inputs), stackIndex, parent, () => {
+            this.openOverlays.delete(ref);
+            this.uninstallGlobalListenersIfIdle();
         });
+        this.openOverlays.add(ref);
+        this.installGlobalListenersIfNeeded();
+        ref.open();
+        return ref;
     }
-    applySize() {
-        const size = this.spec.size;
-        if (!size)
-            return;
-        const viewport = getViewportRect();
-        const resolveMin = (value, anchorSize) => {
-            if (value === 'anchor')
-                return anchorSize;
-            if (typeof value === 'number')
-                return value;
-            return null;
+    inheritDismissFromParent(spec, parent) {
+        if (!parent)
+            return spec;
+        const parentHoverTree = parent.getHoverTreeDismissConfig();
+        if (!parentHoverTree?.enabled)
+            return spec;
+        const childHoverTree = spec.dismiss.hoverTree;
+        // Explicit disable in child wins.
+        if (childHoverTree?.enabled === false)
+            return spec;
+        let mergedHoverTree;
+        if (!childHoverTree) {
+            mergedHoverTree = { ...parentHoverTree };
+        }
+        else {
+            mergedHoverTree = {
+                enabled: true,
+                delayMs: childHoverTree.delayMs ?? parentHoverTree.delayMs,
+            };
+        }
+        // No change.
+        if (mergedHoverTree === childHoverTree)
+            return spec;
+        return {
+            ...spec,
+            dismiss: {
+                ...spec.dismiss,
+                hoverTree: mergedHoverTree,
+            },
         };
-        const resolveMax = (value, viewportSize) => {
-            if (value === 'viewport')
-                return viewportSize;
-            if (typeof value === 'number')
-                return value;
+    }
+    getInternalRefOrNull(ref) {
+        if (!ref)
             return null;
-        };
-        const anchorRect = getAnchorRect(this.spec.anchor, viewport);
-        const minWidthPx = resolveMin(size.minWidth, anchorRect.width);
-        const minHeightPx = resolveMin(size.minHeight, anchorRect.height);
-        const maxWidthPx = resolveMax(size.maxWidth, viewport.width);
-        const maxHeightPx = resolveMax(size.maxHeight, viewport.height);
-        // Reset in case an overlay host is re-used in the future.
-        this.host.style.width = '';
-        this.host.style.height = '';
-        this.host.style.minWidth = '';
-        this.host.style.minHeight = '';
-        this.host.style.maxWidth = '';
-        this.host.style.maxHeight = '';
-        this.host.style.overflow = '';
-        if (minWidthPx != null && minWidthPx > 0)
-            this.host.style.minWidth = `${minWidthPx}px`;
-        if (minHeightPx != null && minHeightPx > 0)
-            this.host.style.minHeight = `${minHeightPx}px`;
-        if (size.mode === 'content') {
+        if (ref instanceof CoarOverlayRef)
+            return ref;
+        return null;
+    }
+    installGlobalListenersIfNeeded() {
+        if (this.globalListenersInstalled)
             return;
-        }
-        if (size.mode === 'content-clamped') {
-            if (maxWidthPx != null)
-                this.host.style.maxWidth = `${maxWidthPx}px`;
-            if (maxHeightPx != null)
-                this.host.style.maxHeight = `${maxHeightPx}px`;
-            this.host.style.overflow = 'auto';
+        if (typeof document === 'undefined')
             return;
-        }
-        // mode: 'fixed'
-        if (maxWidthPx != null)
-            this.host.style.width = `${maxWidthPx}px`;
-        if (maxHeightPx != null)
-            this.host.style.height = `${maxHeightPx}px`;
-        this.host.style.overflow = 'auto';
+        document.addEventListener('pointerdown', this.onDocumentPointerDown, { capture: true });
+        document.addEventListener('keydown', this.onDocumentKeyDown, { capture: true });
+        this.globalListenersInstalled = true;
     }
-    applyA11y() {
-        const a11y = this.spec.a11y;
-        if (!a11y)
+    uninstallGlobalListenersIfIdle() {
+        if (!this.globalListenersInstalled)
             return;
-        if (a11y.role) {
-            this.host.setAttribute('role', a11y.role);
-        }
-        this.setAttrIfDefined('aria-label', a11y.label);
-        this.setAttrIfDefined('aria-labelledby', a11y.labelledBy);
-        this.setAttrIfDefined('aria-describedby', a11y.describedBy);
-        if (a11y.role === 'dialog' && this.spec.backdrop.kind === 'modal') {
-            this.host.setAttribute('aria-modal', 'true');
-        }
-    }
-    setAttrIfDefined(name, value) {
-        if (typeof value === 'string' && value.length > 0) {
-            this.host.setAttribute(name, value);
+        if (this.openOverlays.size > 0)
             return;
-        }
-        this.host.removeAttribute(name);
-    }
-    focusElement(el) {
-        try {
-            el.focus({ preventScroll: true });
-        }
-        catch {
-            try {
-                el.focus();
-            }
-            catch {
-                // noop
-            }
-        }
+        if (typeof document === 'undefined')
+            return;
+        document.removeEventListener('pointerdown', this.onDocumentPointerDown, { capture: true });
+        document.removeEventListener('keydown', this.onDocumentKeyDown, { capture: true });
+        this.globalListenersInstalled = false;
     }
-    getFocusableElements() {
-        const candidates = Array.from(this.host.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'));
-        return candidates.filter((el) => !this.isHidden(el));
+    getOpenOverlaysInOrder() {
+        return Array.from(this.openOverlays);
     }
-    isHidden(el) {
-        // Avoid using offsetParent as it behaves poorly in some environments (e.g. JSDOM).
-        if (el.hasAttribute('hidden'))
-            return true;
-        if (el.getAttribute('aria-hidden') === 'true')
-            return true;
-        const style = el.style;
-        if (style.display === 'none' || style.visibility === 'hidden')
-            return true;
-        return false;
+    getTopmostOverlayContainingTarget(target) {
+        const overlays = this.getOpenOverlaysInOrder();
+        for (let i = overlays.length - 1; i >= 0; i -= 1) {
+            const overlay = overlays[i];
+            if (overlay.containsEventTarget(target))
+                return overlay;
+        }
+        return null;
     }
-    installRepositionTriggers() {
-        const strategy = this.spec.scroll.strategy;
-        if (strategy === 'noop')
-            return;
-        const scrollParents = this.spec.anchor.kind === 'element' ? getScrollParents(this.spec.anchor.element) : [window];
-        if (strategy === 'reposition') {
-            const onScroll = () => this.updatePosition();
-            const onResize = () => this.updatePosition();
-            for (const parent of scrollParents) {
-                if (parent === window) {
-                    window.addEventListener('scroll', onScroll, { passive: true });
-                    this.cleanupFns.push(() => window.removeEventListener('scroll', onScroll));
-                    continue;
-                }
-                parent.addEventListener('scroll', onScroll, { passive: true });
-                this.cleanupFns.push(() => parent.removeEventListener('scroll', onScroll));
-            }
-            window.addEventListener('resize', onResize, { passive: true });
-            this.cleanupFns.push(() => window.removeEventListener('resize', onResize));
-            if (typeof ResizeObserver !== 'undefined') {
-                const ro = new ResizeObserver(() => this.updatePosition());
-                ro.observe(this.host);
-                this.resizeObserver = ro;
+    getTopmostDismissableOverlay(kind) {
+        const overlays = this.getOpenOverlaysInOrder();
+        for (let i = overlays.length - 1; i >= 0; i -= 1) {
+            const overlay = overlays[i];
+            if (overlay.isDismissable(kind)) {
+                return overlay;
             }
-            return;
         }
-        if (strategy === 'close') {
-            const onScroll = (e) => {
-                const target = e.target;
-                if (target instanceof Node && this.host.contains(target))
-                    return;
-                this.close();
-            };
-            if (typeof document !== 'undefined') {
-                document.addEventListener('scroll', onScroll, { passive: true, capture: true });
-                this.cleanupFns.push(() => document.removeEventListener('scroll', onScroll, { capture: true }));
-            }
-            // Fallback for environments where scroll is only observed on window.
-            window.addEventListener('scroll', onScroll, { passive: true });
-            this.cleanupFns.push(() => window.removeEventListener('scroll', onScroll));
-            // Also attach to explicit scroll parents for element anchors (helps non-standard event targets).
-            for (const parent of scrollParents) {
-                if (parent === window)
-                    continue;
-                parent.addEventListener('scroll', onScroll, { passive: true });
-                this.cleanupFns.push(() => parent.removeEventListener('scroll', onScroll));
-            }
-            // Still reposition on size changes while open.
-            if (typeof ResizeObserver !== 'undefined') {
-                const ro = new ResizeObserver(() => this.updatePosition());
-                ro.observe(this.host);
-                this.resizeObserver = ro;
+        return null;
+    }
+    getTopmostFocusTrappingOverlay() {
+        const overlays = this.getOpenOverlaysInOrder();
+        for (let i = overlays.length - 1; i >= 0; i -= 1) {
+            const overlay = overlays[i];
+            if (overlay.hasFocusTrap()) {
+                return overlay;
             }
         }
+        return null;
     }
-    schedule(fn) {
-        if (typeof requestAnimationFrame !== 'undefined') {
-            requestAnimationFrame(() => fn());
-            return;
+    mergeInputs(content, inputs) {
+        if (!content.defaults)
+            return inputs;
+        if (inputs == null || typeof inputs !== 'object') {
+            return { ...content.defaults };
         }
-        setTimeout(() => fn(), 0);
+        return {
+            ...content.defaults,
+            ...inputs,
+        };
     }
-    renderContent(content, host, inputs) {
-        switch (content.kind) {
-            case 'text': {
-                const text = inputs?.text;
-                if (typeof text !== 'string') {
-                    throw new Error('Text overlay requires inputs: { text: string }');
-                }
-                host.textContent = text;
-                return () => {
-                    host.textContent = '';
-                };
-            }
-            case 'template': {
-                const template = content.template;
-                if (!template)
-                    throw new Error('Template overlay requires a template');
-                const viewRef = template.createEmbeddedView(inputs, this.contentInjector);
-                this.appRef.attachView(viewRef);
-                viewRef.detectChanges();
-                for (const node of viewRef.rootNodes) {
-                    host.appendChild(node);
-                }
-                return () => {
-                    this.appRef.detachView(viewRef);
-                    viewRef.destroy();
-                };
-            }
-            case 'component': {
-                const component = content.component;
-                if (!component)
-                    throw new Error('Component overlay requires a component');
-                const componentRef = createComponent(component, {
-                    environmentInjector: this.contentEnvironmentInjector,
-                    hostElement: host,
-                });
-                if (inputs && typeof inputs === 'object') {
-                    for (const [key, value] of Object.entries(inputs)) {
-                        componentRef.setInput(key, value);
-                    }
-                }
-                this.appRef.attachView(componentRef.hostView);
-                componentRef.changeDetectorRef.detectChanges();
-                return () => {
-                    this.appRef.detachView(componentRef.hostView);
-                    componentRef.destroy();
-                };
-            }
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarOverlayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class CoarOverlayOpenBuilder {
+    service;
+    settings;
+    constructor(service, settings = {}) {
+        this.service = service;
+        this.settings = settings;
+    }
+    fork() {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings });
+    }
+    backdrop(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, backdrop: value });
+    }
+    anchor(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, anchor: value });
+    }
+    position(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, position: value });
+    }
+    size(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, size: value });
+    }
+    scroll(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, scroll: value });
+    }
+    dismiss(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, dismiss: value });
+    }
+    focus(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, focus: value });
+    }
+    a11y(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, a11y: value });
+    }
+    attachment(value) {
+        return new CoarOverlayOpenBuilder(this.service, { ...this.settings, attachment: value });
+    }
+    /**
+     * Applies baseline settings, without overriding fields already set on this builder.
+     * Useful for applying a preset after you've already configured part of the builder.
+     */
+    withPreset(value) {
+        const merged = { ...this.settings };
+        merged.anchor ??= value.anchor;
+        merged.position ??= value.position;
+        merged.size ??= value.size;
+        merged.backdrop ??= value.backdrop;
+        merged.scroll ??= value.scroll;
+        merged.dismiss ??= value.dismiss;
+        merged.focus ??= value.focus;
+        merged.a11y ??= value.a11y;
+        merged.attachment ??= value.attachment;
+        return new CoarOverlayOpenBuilder(this.service, merged);
+    }
+    fromTemplate(template) {
+        const settingsSnapshot = { ...this.settings };
+        return {
+            open: (inputs) => this.service.openTemplate(template, settingsSnapshot, inputs),
+            openAsChild: (parent, inputs, options) => this.service.openTemplateAsChild(parent, template, settingsSnapshot, inputs, options),
+        };
+    }
+    fromComponent(component) {
+        const settingsSnapshot = { ...this.settings };
+        return {
+            open: (inputs) => this.service.openComponent(component, settingsSnapshot, inputs),
+            openAsChild: (parent, inputs, options) => this.service.openComponentAsChild(parent, component, settingsSnapshot, inputs, options),
+        };
+    }
+    fromText() {
+        const settingsSnapshot = { ...this.settings };
+        return {
+            open: (inputs) => this.service.openText(settingsSnapshot, inputs),
+            openAsChild: (parent, inputs, options) => this.service.openTextAsChild(parent, settingsSnapshot, inputs, options),
+        };
+    }
+}
+function createOverlayBuilder(...initial) {
+    const service = inject(CoarOverlayService);
+    if (initial.length === 0) {
+        return new CoarOverlayOpenBuilder(service);
     }
+    const merged = Object.assign({}, ...initial);
+    return new CoarOverlayOpenBuilder(service, merged);
 }
 
-const coarTooltipPreset = (b) => {
-    b.backdrop('none');
-    b.scroll({ strategy: 'noop' });
-    b.dismiss({ outsideClick: false, escapeKey: false });
-    b.a11y({ role: 'tooltip' });
-    b.position({
+const coarTooltipPreset = {
+    backdrop: { kind: 'none' },
+    scroll: { strategy: 'noop' },
+    dismiss: { outsideClick: false, escapeKey: false },
+    a11y: { role: 'tooltip' },
+    position: {
         placement: ['top', 'bottom', 'left', 'right'],
         offset: 8,
         flip: true,
         shift: true,
-    });
-    b.attachment({ strategy: 'body' });
+    },
+    attachment: { strategy: 'body' },
 };
-const coarModalPreset = (b) => {
-    b.backdrop('modal');
-    b.anchor({ kind: 'virtual', placement: 'center' });
-    b.focus({ trap: true, restore: true });
-    b.size({ mode: 'content-clamped', maxWidth: 'viewport', maxHeight: 'viewport' });
-    b.position({ placement: 'center', offset: 0, flip: false, shift: true });
-    b.a11y({ role: 'dialog' });
-    b.attachment({ strategy: 'body' });
+const coarModalPreset = {
+    backdrop: { kind: 'modal', closeOnBackdropClick: true },
+    anchor: { kind: 'virtual', placement: 'center' },
+    focus: { trap: true, restore: true },
+    size: { mode: 'content-clamped', maxWidth: 'viewport', maxHeight: 'viewport' },
+    position: { placement: 'center', offset: 0, flip: false, shift: true },
+    a11y: { role: 'dialog' },
+    attachment: { strategy: 'body' },
 };
-const coarMenuPreset = (b) => {
-    b.backdrop('none');
-    b.scroll({ strategy: 'close' });
-    b.dismiss({ outsideClick: true, escapeKey: true });
-    b.focus({ trap: false, restore: true });
-    b.a11y({ role: 'menu' });
-    // Provide fallback placements so the overlay can choose a side that fits.
-    // Start/end variants help when the anchor is near the viewport edges.
-    b.position({
+const coarMenuPreset = {
+    backdrop: { kind: 'none' },
+    scroll: { strategy: 'close' },
+    dismiss: { outsideClick: true, escapeKey: true },
+    focus: { trap: false, restore: true },
+    a11y: { role: 'menu' },
+    position: {
         placement: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
         offset: 4,
         flip: true,
         shift: true,
-    });
+    },
 };
-/**
- * Menu preset for hover-driven menus (context menus, cascading flyouts).
- *
- * Enables hoverTree dismissal so a parent overlay stays open while the pointer
- * is inside any child overlay opened via openChild().
- */
-const coarHoverMenuPreset = (b) => {
-    coarMenuPreset(b);
-    b.dismiss({
+const coarHoverMenuPreset = {
+    ...coarMenuPreset,
+    dismiss: {
         outsideClick: true,
         escapeKey: true,
         hoverTree: { enabled: true, delayMs: 300 },
-    });
+    },
 };
 
+// Public API: one way to create & open overlays.
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { COAR_MENU_PARENT, COAR_OVERLAY_DEFAULTS, COAR_OVERLAY_REF, COAR_OVERLAY_SPEC_RESOLVERS, CoarOverlay, CoarOverlayService, ContentBuilder, Overlay, OverlayBuilder, CoarOverlayService as OverlayService, coarHoverMenuPreset, coarMenuPreset, coarModalPreset, coarTooltipPreset, computeOverlayCoordinates, getAnchorRect, getContainerRect, getScrollParents, getViewportRect, coarHoverMenuPreset as hoverMenuPreset, coarMenuPreset as menuPreset, coarModalPreset as modalPreset, rectFromDom, rectFromPoint, rectFromVirtual, coarTooltipPreset as tooltipPreset };
+export { COAR_MENU_PARENT, COAR_OVERLAY_DEFAULTS, COAR_OVERLAY_REF, COAR_OVERLAY_SPEC_RESOLVERS, CoarOverlayOpenBuilder, coarHoverMenuPreset, coarMenuPreset, coarModalPreset, coarTooltipPreset, createOverlayBuilder };
 //# sourceMappingURL=cocoar-ui-overlay.mjs.map