@radix-ng/primitives 1.0.0-beta.2 → 1.0.0-beta.4

package/fesm2022/radix-ng-primitives-portal.mjs

@@ -1,6 +1,27 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, PLATFORM_ID, DestroyRef, input, linkedSignal, computed, effect, Directive } from '@angular/core';
+import { ElementRef, inject, PLATFORM_ID, DestroyRef, input, linkedSignal, computed, effect, Directive, ViewContainerRef, TemplateRef, signal, Injector } from '@angular/core';
+import { PresenceMachine, RDX_PRESENCE_CONTEXT } from '@radix-ng/primitives/presence';
+
+/**
+ * Resolve a {@link RdxPortalContainer} to a concrete element. Returns `null` when nothing usable is
+ * provided (a missing container, a selector matching nothing, or a non-element value), so callers can
+ * fall back to `document.body`. Shared by `RdxPortal` and `RdxPortalPresence`.
+ */
+function resolvePortalContainer(container, document) {
+    if (!container) {
+        return null;
+    }
+    if (typeof container === 'string') {
+        return document?.querySelector(container) ?? null;
+    }
+    if (container instanceof ElementRef) {
+        return container.nativeElement ?? null;
+    }
+    // Anything that isn't a real element (e.g. a TemplateRef passed by mistake) falls back to the
+    // default container so the content still leaves the flow instead of staying in place.
+    return container instanceof HTMLElement ? container : null;
+}
 
 class RdxPortal {
     constructor() {
@@ -16,7 +37,7 @@ class RdxPortal {
         this._computedContainer = linkedSignal(this.container, ...(ngDevMode ? [{ debugName: "_computedContainer" }] : /* istanbul ignore next */ []));
         this.computedContainer = this._computedContainer.asReadonly();
         this.elementContainer = computed(() => {
-            const provided = this.resolveContainer(this.computedContainer());
+            const provided = resolvePortalContainer(this.computedContainer(), this.document);
             const body = this.document?.body ?? null;
             return provided ?? body;
         }, ...(ngDevMode ? [{ debugName: "elementContainer" }] : /* istanbul ignore next */ []));
@@ -42,20 +63,6 @@ class RdxPortal {
     setContainer(container) {
         this._computedContainer.set(container);
     }
-    resolveContainer(container) {
-        if (!container) {
-            return null;
-        }
-        if (typeof container === 'string') {
-            return this.document?.querySelector(container) ?? null;
-        }
-        if (container instanceof ElementRef) {
-            return container.nativeElement ?? null;
-        }
-        // Anything that isn't a real element (e.g. a TemplateRef passed by mistake) falls back to
-        // the default container so the element still leaves the flow instead of staying in place.
-        return container instanceof HTMLElement ? container : null;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPortal, isStandalone: true, selector: "[rdxPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["rdxPortal"], ngImport: i0 }); }
 }
@@ -67,9 +74,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
 
+/**
+ * Structural directive merging what `RdxPortal` + `RdxPresenceDirective` did as a pair: it mounts its
+ * template while `present()` (from {@link RDX_PRESENCE_CONTEXT}) is `true`, **relocates every root
+ * node into a portal container** (default `document.body`), and on close runs the presence exit state
+ * machine — keeping the content mounted until every running CSS exit `@keyframes` on any root node
+ * finishes.
+ *
+ * Unlike `RdxPortal`, it adds **no wrapper element**: the template's root nodes become direct children
+ * of the container. Use the `*` microsyntax for the common single-root case
+ * (`<div *rdxXxxPortal rdxXxxPositioner>`) or the explicit `<ng-template rdxXxxPortal>` form for a
+ * custom container or multiple root nodes (e.g. a dialog backdrop + popup).
+ *
+ * SSR: on the server the view renders in place and is never relocated; after hydration the relocation
+ * effect moves the nodes into the container (same browser-guarded split `RdxPortal` uses).
+ */
+class RdxPortalPresence {
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.templateRef = inject((TemplateRef));
+        this.document = inject(DOCUMENT, { optional: true });
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        /**
+         * Container to portal the content into. Can be an `ElementRef`, a native element, or a CSS
+         * selector. Defaults to `document.body` (or when a selector matches nothing).
+         */
+        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
+        this._computedContainer = linkedSignal(this.container, ...(ngDevMode ? [{ debugName: "_computedContainer" }] : /* istanbul ignore next */ []));
+        this.elementContainer = computed(() => {
+            const provided = resolvePortalContainer(this._computedContainer(), this.document);
+            return provided ?? this.document?.body ?? null;
+        }, ...(ngDevMode ? [{ debugName: "elementContainer" }] : /* istanbul ignore next */ []));
+        /** The live view's root nodes, exposed as a signal so the relocation effect re-runs on (re)mount. */
+        this.mountedNodes = signal([], ...(ngDevMode ? [{ debugName: "mountedNodes" }] : /* istanbul ignore next */ []));
+        this.viewRef = null;
+        const machine = new PresenceMachine({
+            present: inject(RDX_PRESENCE_CONTEXT).present,
+            isBrowser: this.isBrowser,
+            injector: inject(Injector),
+            mountView: () => this.mountView(),
+            destroyView: () => this.destroyView()
+        });
+        // Relocate reactively: re-runs whenever the resolved container changes or the view is
+        // (re)mounted. On the server we never relocate — the nodes render in place.
+        effect(() => {
+            const container = this.elementContainer();
+            const nodes = this.mountedNodes();
+            if (!this.isBrowser || !container) {
+                return;
+            }
+            for (const node of nodes) {
+                container.appendChild(node);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => machine.dispose());
+    }
+    /** Imperatively override the portal container (parity with `RdxPortal.setContainer`). */
+    setContainer(container) {
+        this._computedContainer.set(container);
+    }
+    mountView() {
+        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
+        const rootNodes = this.viewRef.rootNodes;
+        this.mountedNodes.set(rootNodes);
+        // Watch every element root for exit animations (dialog returns backdrop + popup).
+        return rootNodes.filter((node) => node instanceof HTMLElement);
+    }
+    destroyView() {
+        // Destroying the view removes the nodes from wherever they currently live (the container) —
+        // no anchor-comment juggling, unlike `RdxPortal` which restores its host element.
+        this.viewRef?.destroy();
+        this.viewRef = null;
+        this.mountedNodes.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPortalPresence, isStandalone: true, inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPortal };
+export { RdxPortal, RdxPortalPresence, resolvePortalContainer };
 //# sourceMappingURL=radix-ng-primitives-portal.mjs.map

package/fesm2022/radix-ng-primitives-portal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-portal.mjs","sources":["../../../packages/primitives/portal/src/portal.ts","../../../packages/primitives/portal/radix-ng-primitives-portal.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n    computed,\n    DestroyRef,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    linkedSignal,\n    PLATFORM_ID\n} from '@angular/core';\n\n/**\n * A target container for the portal. Accepts an `ElementRef`, a native element, or a CSS selector\n * resolved against the document.\n */\nexport type RdxPortalContainer = ElementRef<HTMLElement> | HTMLElement | string;\n\n@Directive({\n    selector: '[rdxPortal]',\n    exportAs: 'rdxPortal'\n})\nexport class RdxPortal {\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly document = inject(DOCUMENT, { optional: true });\n    private readonly destroyRef = inject(DestroyRef);\n\n    /**\n     * Specify a container to portal the content into. Can be an `ElementRef`, a native element, or a\n     * CSS selector. Defaults to `document.body` when not set (or when a selector matches nothing).\n     */\n    readonly container = input<RdxPortalContainer>();\n\n    private readonly _computedContainer = linkedSignal(this.container);\n    readonly computedContainer = this._computedContainer.asReadonly();\n\n    private readonly elementContainer = computed<HTMLElement | null>(() => {\n        const provided = this.resolveContainer(this.computedContainer());\n        const body = this.document?.body ?? null;\n        return provided ?? body;\n    });\n\n    constructor() {\n        const isBrowser = isPlatformBrowser(this.platformId);\n        if (!isBrowser || !this.document) {\n            return;\n        }\n\n        const element = this.elementRef.nativeElement;\n        // Anchor the original DOM position with a comment node, so the element can be restored\n        // exactly where it was when the directive is destroyed.\n        const anchor = this.document.createComment('rdx-portal');\n        element.parentNode?.insertBefore(anchor, element);\n\n        // Move reactively: the effect runs after inputs are bound (so `container` is respected on\n        // first render) and re-runs whenever the target container changes. `appendChild` relocates\n        // the element, it does not clone it.\n        effect(() => {\n            this.elementContainer()?.appendChild(element);\n        });\n\n        this.destroyRef.onDestroy(() => {\n            anchor.parentNode?.replaceChild(element, anchor);\n        });\n    }\n\n    setContainer(container: RdxPortalContainer) {\n        this._computedContainer.set(container);\n    }\n\n    private resolveContainer(container: RdxPortalContainer | undefined): HTMLElement | null {\n        if (!container) {\n            return null;\n        }\n        if (typeof container === 'string') {\n            return this.document?.querySelector<HTMLElement>(container) ?? null;\n        }\n        if (container instanceof ElementRef) {\n            return container.nativeElement ?? null;\n        }\n        // Anything that isn't a real element (e.g. a TemplateRef passed by mistake) falls back to\n        // the default container so the element still leaves the flow instead of staying in place.\n        return container instanceof HTMLElement ? container : null;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radix-ng-primitives-portal.mjs","sources":["../../../packages/primitives/portal/src/resolve-container.ts","../../../packages/primitives/portal/src/portal.ts","../../../packages/primitives/portal/src/portal-presence.ts","../../../packages/primitives/portal/radix-ng-primitives-portal.ts"],"sourcesContent":["import { ElementRef } from '@angular/core';\n\n/**\n * A target container for a portal. Accepts an `ElementRef`, a native element, or a CSS selector\n * resolved against the document.\n */\nexport type RdxPortalContainer = ElementRef<HTMLElement> | HTMLElement | string;\n\n/**\n * Resolve a {@link RdxPortalContainer} to a concrete element. Returns `null` when nothing usable is\n * provided (a missing container, a selector matching nothing, or a non-element value), so callers can\n * fall back to `document.body`. Shared by `RdxPortal` and `RdxPortalPresence`.\n */\nexport function resolvePortalContainer(\n    container: RdxPortalContainer | undefined,\n    document: Document | null\n): HTMLElement | null {\n    if (!container) {\n        return null;\n    }\n    if (typeof container === 'string') {\n        return document?.querySelector<HTMLElement>(container) ?? null;\n    }\n    if (container instanceof ElementRef) {\n        return container.nativeElement ?? null;\n    }\n    // Anything that isn't a real element (e.g. a TemplateRef passed by mistake) falls back to the\n    // default container so the content still leaves the flow instead of staying in place.\n    return container instanceof HTMLElement ? container : null;\n}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n    computed,\n    DestroyRef,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    linkedSignal,\n    PLATFORM_ID\n} from '@angular/core';\nimport { RdxPortalContainer, resolvePortalContainer } from './resolve-container';\n\n@Directive({\n    selector: '[rdxPortal]',\n    exportAs: 'rdxPortal'\n})\nexport class RdxPortal {\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly platformId = inject(PLATFORM_ID);\n    private readonly document = inject(DOCUMENT, { optional: true });\n    private readonly destroyRef = inject(DestroyRef);\n\n    /**\n     * Specify a container to portal the content into. Can be an `ElementRef`, a native element, or a\n     * CSS selector. Defaults to `document.body` when not set (or when a selector matches nothing).\n     */\n    readonly container = input<RdxPortalContainer>();\n\n    private readonly _computedContainer = linkedSignal(this.container);\n    readonly computedContainer = this._computedContainer.asReadonly();\n\n    private readonly elementContainer = computed<HTMLElement | null>(() => {\n        const provided = resolvePortalContainer(this.computedContainer(), this.document);\n        const body = this.document?.body ?? null;\n        return provided ?? body;\n    });\n\n    constructor() {\n        const isBrowser = isPlatformBrowser(this.platformId);\n        if (!isBrowser || !this.document) {\n            return;\n        }\n\n        const element = this.elementRef.nativeElement;\n        // Anchor the original DOM position with a comment node, so the element can be restored\n        // exactly where it was when the directive is destroyed.\n        const anchor = this.document.createComment('rdx-portal');\n        element.parentNode?.insertBefore(anchor, element);\n\n        // Move reactively: the effect runs after inputs are bound (so `container` is respected on\n        // first render) and re-runs whenever the target container changes. `appendChild` relocates\n        // the element, it does not clone it.\n        effect(() => {\n            this.elementContainer()?.appendChild(element);\n        });\n\n        this.destroyRef.onDestroy(() => {\n            anchor.parentNode?.replaceChild(element, anchor);\n        });\n    }\n\n    setContainer(container: RdxPortalContainer) {\n        this._computedContainer.set(container);\n    }\n}\n","import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n    computed,\n    DestroyRef,\n    Directive,\n    effect,\n    EmbeddedViewRef,\n    inject,\n    Injector,\n    input,\n    linkedSignal,\n    PLATFORM_ID,\n    signal,\n    TemplateRef,\n    ViewContainerRef\n} from '@angular/core';\nimport { PresenceMachine, RDX_PRESENCE_CONTEXT } from '@radix-ng/primitives/presence';\nimport { RdxPortalContainer, resolvePortalContainer } from './resolve-container';\n\n/**\n * Structural directive merging what `RdxPortal` + `RdxPresenceDirective` did as a pair: it mounts its\n * template while `present()` (from {@link RDX_PRESENCE_CONTEXT}) is `true`, **relocates every root\n * node into a portal container** (default `document.body`), and on close runs the presence exit state\n * machine — keeping the content mounted until every running CSS exit `@keyframes` on any root node\n * finishes.\n *\n * Unlike `RdxPortal`, it adds **no wrapper element**: the template's root nodes become direct children\n * of the container. Use the `*` microsyntax for the common single-root case\n * (`<div *rdxXxxPortal rdxXxxPositioner>`) or the explicit `<ng-template rdxXxxPortal>` form for a\n * custom container or multiple root nodes (e.g. a dialog backdrop + popup).\n *\n * SSR: on the server the view renders in place and is never relocated; after hydration the relocation\n * effect moves the nodes into the container (same browser-guarded split `RdxPortal` uses).\n */\n@Directive({\n    standalone: true\n})\nexport class RdxPortalPresence {\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly templateRef = inject(TemplateRef<void>);\n    private readonly document = inject(DOCUMENT, { optional: true });\n    private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n    /**\n     * Container to portal the content into. Can be an `ElementRef`, a native element, or a CSS\n     * selector. Defaults to `document.body` (or when a selector matches nothing).\n     */\n    readonly container = input<RdxPortalContainer>();\n\n    private readonly _computedContainer = linkedSignal(this.container);\n\n    private readonly elementContainer = computed<HTMLElement | null>(() => {\n        const provided = resolvePortalContainer(this._computedContainer(), this.document);\n        return provided ?? this.document?.body ?? null;\n    });\n\n    /** The live view's root nodes, exposed as a signal so the relocation effect re-runs on (re)mount. */\n    private readonly mountedNodes = signal<Node[]>([]);\n    private viewRef: EmbeddedViewRef<void> | null = null;\n\n    constructor() {\n        const machine = new PresenceMachine({\n            present: inject(RDX_PRESENCE_CONTEXT).present,\n            isBrowser: this.isBrowser,\n            injector: inject(Injector),\n            mountView: () => this.mountView(),\n            destroyView: () => this.destroyView()\n        });\n\n        // Relocate reactively: re-runs whenever the resolved container changes or the view is\n        // (re)mounted. On the server we never relocate — the nodes render in place.\n        effect(() => {\n            const container = this.elementContainer();\n            const nodes = this.mountedNodes();\n            if (!this.isBrowser || !container) {\n                return;\n            }\n            for (const node of nodes) {\n                container.appendChild(node);\n            }\n        });\n\n        inject(DestroyRef).onDestroy(() => machine.dispose());\n    }\n\n    /** Imperatively override the portal container (parity with `RdxPortal.setContainer`). */\n    setContainer(container: RdxPortalContainer): void {\n        this._computedContainer.set(container);\n    }\n\n    private mountView(): HTMLElement[] {\n        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);\n        const rootNodes = this.viewRef.rootNodes as Node[];\n        this.mountedNodes.set(rootNodes);\n        // Watch every element root for exit animations (dialog returns backdrop + popup).\n        return rootNodes.filter((node): node is HTMLElement => node instanceof HTMLElement);\n    }\n\n    private destroyView(): void {\n        // Destroying the view removes the nodes from wherever they currently live (the container) —\n        // no anchor-comment juggling, unlike `RdxPortal` which restores its host element.\n        this.viewRef?.destroy();\n        this.viewRef = null;\n        this.mountedNodes.set([]);\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/radix-ng-primitives-presence.mjs

@@ -1,19 +1,8 @@
-import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ViewContainerRef, TemplateRef, Injector, PLATFORM_ID, effect, afterNextRender, DestroyRef, Directive } from '@angular/core';
+import { effect, afterNextRender, InjectionToken, inject, ViewContainerRef, TemplateRef, Injector, PLATFORM_ID, DestroyRef, Directive } from '@angular/core';
+import { getMaxTransitionDuration } from '@radix-ng/primitives/core';
+import { isPlatformBrowser } from '@angular/common';
 
-const RDX_PRESENCE_CONTEXT = new InjectionToken('RdxPresenceContext');
-/**
- * Factory provider helper.
- * In your parent component/directive you can write:
- *
- *   providers: [
- *     provideRdxPresenceContext(() => ({ present: myBooleanSignal }))
- *   ]
- */
-function provideRdxPresenceContext(contextFactory) {
-    return { provide: RDX_PRESENCE_CONTEXT, useFactory: contextFactory };
-}
 /**
  * State machine mirroring `@radix-ui/react-presence`.
  *
@@ -28,31 +17,59 @@ const MACHINE = {
     unmounted: { MOUNT: 'mounted' }
 };
 /**
- * Headless structural directive that conditionally renders its template based on a reactive
- * `present` signal supplied through {@link RDX_PRESENCE_CONTEXT}.
+ * Grace period (ms) added to the longest declared exit duration before the safety-net timer
+ * force-completes the exit. Only matters when a `finished` promise never settles (the engine
+ * under-reports `getAnimations`, the animation is replaced without a cancel, reduced motion, …).
+ * Mirrors `TRANSITION_FALLBACK_BUFFER` in `use-transition-status.ts`.
+ */
+const EXIT_FALLBACK_BUFFER = 50;
+/**
+ * Reusable presence state machine extracted from `RdxPresenceDirective`. It keeps content mounted
+ * while a CSS exit animation runs anywhere inside the template — a `@keyframes` **or** a
+ * `transition` (`data-ending-style`), on a watched root **or any of its descendants** — and unmounts
+ * only once every exit animation started by the close has finished. With no exit animation it
+ * unmounts immediately. For a single watched node and a root-level keyframe this reduces exactly to
+ * the original `RdxPresenceDirective` behavior.
  *
- * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation
- * (`@keyframes` applied for the closed state) is running, and unmounts it only once that
- * animation finishes. If the content has no exit animation, it unmounts immediately.
+ * Detection (ADR 0011) uses the Web Animations API: when `present()` flips `false` we snapshot a
+ * close timestamp, and after the next render collect `node.getAnimations({ subtree: true })`, keeping
+ * only animations that are running/pending and were *started by* the close (`startTime` null or
+ * `>= closeTimestamp`). The view stays mounted until all of their `finished` promises settle, bounded
+ * by a duration-based safety net. The legacy root-level computed-`animationName` check and the
+ * `animationstart`/`animationend` listeners are kept as an additional acceptor — they drive the
+ * zoneless jsdom suites (where `getAnimations` is absent) and cost nothing in a real browser.
  */
-class RdxPresenceDirective {
-    constructor() {
-        this.context = inject(RDX_PRESENCE_CONTEXT);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.templateRef = inject((TemplateRef));
-        this.injector = inject(Injector);
-        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-        this.viewRef = null;
-        this.node = null;
+class PresenceMachine {
+    constructor(host) {
+        this.host = host;
+        /** Root nodes currently watched for exit animations (set on mount). */
+        this.nodes = [];
+        /** Last-seen computed `animationName` per node, used to detect a *fresh* root exit animation. */
+        this.prevAnimationNames = new WeakMap();
+        /** Root nodes whose exit animation the event path is still waiting on (jsdom / root-keyframe). */
+        this.pendingExits = new Set();
         this.removeListeners = null;
-        this.prevAnimationName = 'none';
-        this.prevPresent = this.context.present();
+        /**
+         * Timeline time captured the moment `present` flipped `false`, on the same clock as
+         * `Animation.startTime`. Animations started at or after it are the exit animations.
+         */
+        this.closeTimestamp = 0;
+        /**
+         * Monotonic counter bumped on every mount/unmount transition. A suspended exit captures it and
+         * its `finished`/safety-net resolution is ignored if it changed in the meantime (re-open or a
+         * second close), so a stale promise can never tear down a freshly-reopened view.
+         */
+        this.exitVersion = 0;
+        /** True while a WAAPI `finished`-promise wait owns completion; gates the event path off. */
+        this.waapiPending = false;
+        this.safetyTimer = null;
+        this.prevPresent = host.present();
         this.state = this.prevPresent ? 'mounted' : 'unmounted';
         if (this.prevPresent) {
-            this.mountView();
+            this.mount();
         }
         effect(() => {
-            const present = this.context.present();
+            const present = host.present();
             if (present === this.prevPresent) {
                 return;
             }
@@ -61,34 +78,122 @@ class RdxPresenceDirective {
                 // Mount synchronously so the enter animation can start on this frame.
                 this.send('MOUNT');
             }
-            else if (this.isBrowser) {
+            else if (host.isBrowser) {
+                // Snapshot the close time *now* (before the render that applies the closed-state
+                // styles) so the freshness filter can tell exit animations from pre-existing ones.
+                this.closeTimestamp = this.now();
                 // Defer the unmount decision until the next render, so the consumer's
-                // `data-state` (and therefore the exit `@keyframes`) is applied to the DOM
-                // before we read the computed animation name.
-                afterNextRender(() => this.evaluateExit(), { injector: this.injector });
+                // `data-state` / `data-ending-style` (and therefore the exit styles) are applied
+                // to the DOM before we read the running animations.
+                afterNextRender(() => this.evaluateExit(), { injector: host.injector });
             }
             else {
                 this.send('UNMOUNT');
             }
-        });
-        inject(DestroyRef).onDestroy(() => this.destroyView());
+        }, { injector: host.injector, debugName: 'PresenceMachine.present' });
+    }
+    /** Tear the machine down — destroys the view. Call from the host's `DestroyRef`. */
+    dispose() {
+        this.unmount();
     }
     /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
     evaluateExit() {
         // Re-opened before this callback ran — keep the content mounted.
-        if (this.state !== 'mounted' || this.context.present()) {
+        if (this.state !== 'mounted' || this.host.present()) {
             return;
         }
-        const styles = this.getComputedStyles();
-        const currentAnimationName = styles?.animationName || 'none';
-        if (currentAnimationName === 'none' || styles?.display === 'none') {
-            // No exit animation (or the element is hidden) — unmount right away.
+        this.pendingExits.clear();
+        // Legacy acceptor: a watched root whose closed state starts a *different* `@keyframes`.
+        // This is what the zoneless jsdom suite drives (via synthetic `animationstart`/`animationend`)
+        // and what catches root keyframes in engines that do not expose `getAnimations`.
+        for (const node of this.nodes) {
+            const styles = getComputedStyle(node);
+            const currentAnimationName = styles.animationName || 'none';
+            const prevAnimationName = this.prevAnimationNames.get(node) ?? 'none';
+            const isAnimating = currentAnimationName !== 'none' &&
+                styles.display !== 'none' &&
+                prevAnimationName !== currentAnimationName;
+            if (isAnimating) {
+                this.pendingExits.add(node);
+            }
+        }
+        // WAAPI acceptor (ADR 0011): subtree-aware, transitions *or* keyframes, on any element in the
+        // template. This is what makes popup-level exits work without a positioner decoy keyframe.
+        const exitAnimations = this.collectExitAnimations();
+        if (this.pendingExits.size === 0 && exitAnimations.length === 0) {
+            // Nothing runs a fresh exit animation — unmount right away.
             this.send('UNMOUNT');
+            return;
+        }
+        this.send('ANIMATION_OUT');
+        if (exitAnimations.length > 0) {
+            // WAAPI sees the whole subtree, so it supersedes the root-event path for this close:
+            // wait for every fresh exit animation, version-guarded against re-open.
+            this.waapiPending = true;
+            const version = this.exitVersion;
+            void Promise.all(exitAnimations.map((animation) => animation.finished.catch(() => undefined))).then(() => this.finishExit(version));
+            this.armSafetyNet(version, exitAnimations);
+        }
+        // else: no WAAPI animations (jsdom, or an engine without `getAnimations`) → the root-event
+        // path drains `pendingExits` through `onEnd`, exactly as before this ADR.
+    }
+    /**
+     * Running/pending animations across the watched subtrees that were *started by* the close.
+     * Pre-existing animations (an infinite spinner, a settled enter) have an earlier `startTime`
+     * and must not delay the unmount.
+     */
+    collectExitAnimations() {
+        if (!this.host.isBrowser) {
+            return [];
         }
-        else {
-            // Only suspend the unmount if the closed state actually starts a *different* animation.
-            const isAnimating = this.prevAnimationName !== currentAnimationName;
-            this.send(isAnimating ? 'ANIMATION_OUT' : 'UNMOUNT');
+        const result = [];
+        for (const node of this.nodes) {
+            if (typeof node.getAnimations !== 'function') {
+                continue;
+            }
+            for (const animation of node.getAnimations({ subtree: true })) {
+                const fresh = animation.startTime === null || Number(animation.startTime) >= this.closeTimestamp;
+                // `animation.pending` is the WAAPI "created but not yet started this frame" flag — a
+                // freshly triggered exit. `playState` itself never reports `'pending'`.
+                if ((animation.playState === 'running' || animation.pending) && fresh) {
+                    result.push(animation);
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Force-completes the exit shortly after the longest declared duration, in case a `finished`
+     * promise never settles. Measures the animated targets (falling back to the roots).
+     */
+    armSafetyNet(version, exitAnimations) {
+        const targets = new Set(this.nodes);
+        for (const animation of exitAnimations) {
+            const target = animation.effect?.target;
+            if (target instanceof HTMLElement) {
+                targets.add(target);
+            }
+        }
+        let maxDuration = 0;
+        for (const element of targets) {
+            maxDuration = Math.max(maxDuration, getMaxTransitionDuration(element));
+        }
+        this.clearSafetyNet();
+        this.safetyTimer = setTimeout(() => this.finishExit(version), maxDuration + EXIT_FALLBACK_BUFFER);
+    }
+    /** Settle a WAAPI/safety-net exit wait, ignoring it if a newer mount/unmount superseded it. */
+    finishExit(version) {
+        if (version !== this.exitVersion) {
+            return;
+        }
+        this.waapiPending = false;
+        this.clearSafetyNet();
+        this.send('ANIMATION_END');
+    }
+    clearSafetyNet() {
+        if (this.safetyTimer !== null) {
+            clearTimeout(this.safetyTimer);
+            this.safetyTimer = null;
         }
     }
     send(event) {
@@ -98,60 +203,138 @@ class RdxPresenceDirective {
         }
         this.state = next;
         if (next === 'mounted') {
-            if (this.viewRef) {
-                // Re-opened while an exit animation was running — refresh the tracked animation.
-                this.prevAnimationName = this.getAnimationName();
+            // Bump the version so any in-flight exit wait from a prior close is ignored.
+            this.exitVersion++;
+            this.waapiPending = false;
+            this.clearSafetyNet();
+            if (this.nodes.length > 0) {
+                // Re-opened while an exit animation was running — refresh the tracked animations and
+                // drop any pending exits so a late `animationend` cannot tear down the live view.
+                this.pendingExits.clear();
+                for (const node of this.nodes) {
+                    this.prevAnimationNames.set(node, this.getAnimationName(node));
+                }
             }
             else {
-                this.mountView();
+                this.mount();
             }
         }
         else if (next === 'unmounted') {
-            this.destroyView();
+            this.exitVersion++;
+            this.unmount();
         }
         // `unmountSuspended` keeps the existing view mounted until ANIMATION_END.
     }
-    mountView() {
-        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
-        this.node = this.viewRef.rootNodes.find((n) => n instanceof HTMLElement) ?? null;
-        if (this.node && this.isBrowser) {
-            this.prevAnimationName = this.getAnimationName();
-            this.addAnimationListeners(this.node);
+    mount() {
+        this.nodes = this.host.mountView();
+        if (this.host.isBrowser && this.nodes.length > 0) {
+            for (const node of this.nodes) {
+                this.prevAnimationNames.set(node, this.getAnimationName(node));
+            }
+            this.addAnimationListeners();
         }
     }
-    destroyView() {
+    unmount() {
         this.removeListeners?.();
         this.removeListeners = null;
-        this.viewRef?.destroy();
-        this.viewRef = null;
-        this.node = null;
+        this.clearSafetyNet();
+        this.waapiPending = false;
+        this.host.destroyView();
+        this.nodes = [];
+        this.pendingExits.clear();
     }
-    addAnimationListeners(node) {
+    addAnimationListeners() {
         const onStart = (event) => {
-            if (event.target === node) {
-                this.prevAnimationName = this.getAnimationName();
+            const node = event.target;
+            if (this.nodes.includes(node)) {
+                this.prevAnimationNames.set(node, this.getAnimationName(node));
             }
         };
         const onEnd = (event) => {
-            const isCurrentAnimation = this.getAnimationName().includes(event.animationName);
-            if (event.target === node && isCurrentAnimation) {
-                this.send('ANIMATION_END');
+            const node = event.target;
+            if (!this.nodes.includes(node)) {
+                return;
+            }
+            // Ignore the end of an animation other than the one we are currently waiting on.
+            if (!this.getAnimationName(node).includes(event.animationName)) {
+                return;
+            }
+            this.pendingExits.delete(node);
+            // While a WAAPI wait owns completion it is authoritative (it sees the full subtree); the
+            // event path only drives the unmount when no WAAPI animations were detected.
+            if (!this.waapiPending && this.pendingExits.size === 0) {
+                this.finishExit(this.exitVersion);
             }
         };
-        node.addEventListener('animationstart', onStart);
-        node.addEventListener('animationcancel', onEnd);
-        node.addEventListener('animationend', onEnd);
+        for (const node of this.nodes) {
+            node.addEventListener('animationstart', onStart);
+            node.addEventListener('animationcancel', onEnd);
+            node.addEventListener('animationend', onEnd);
+        }
         this.removeListeners = () => {
-            node.removeEventListener('animationstart', onStart);
-            node.removeEventListener('animationcancel', onEnd);
-            node.removeEventListener('animationend', onEnd);
+            for (const node of this.nodes) {
+                node.removeEventListener('animationstart', onStart);
+                node.removeEventListener('animationcancel', onEnd);
+                node.removeEventListener('animationend', onEnd);
+            }
         };
     }
-    getComputedStyles() {
-        return this.node && this.isBrowser ? getComputedStyle(this.node) : null;
+    getAnimationName(node) {
+        return (this.host.isBrowser ? getComputedStyle(node).animationName : '') || 'none';
+    }
+    /** Current timeline time on the same clock as `Animation.startTime` (ms), or 0 if unavailable. */
+    now() {
+        const time = typeof document !== 'undefined' ? document.timeline?.currentTime : null;
+        return typeof time === 'number' ? time : Number(time ?? 0);
     }
-    getAnimationName() {
-        return this.getComputedStyles()?.animationName || 'none';
+}
+
+const RDX_PRESENCE_CONTEXT = new InjectionToken('RdxPresenceContext');
+/**
+ * Factory provider helper.
+ * In your parent component/directive you can write:
+ *
+ *   providers: [
+ *     provideRdxPresenceContext(() => ({ present: myBooleanSignal }))
+ *   ]
+ */
+function provideRdxPresenceContext(contextFactory) {
+    return { provide: RDX_PRESENCE_CONTEXT, useFactory: contextFactory };
+}
+/**
+ * Headless structural directive that conditionally renders its template based on a reactive
+ * `present` signal supplied through {@link RDX_PRESENCE_CONTEXT}.
+ *
+ * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation
+ * (`@keyframes` applied for the closed state) is running, and unmounts it only once that
+ * animation finishes. If the content has no exit animation, it unmounts immediately.
+ *
+ * The mount/unmount-with-exit logic lives in the shared {@link PresenceMachine}; this directive just
+ * creates the embedded view in place (`RdxPortalPresence` reuses the same machine and additionally
+ * relocates the view into a portal container).
+ */
+class RdxPresenceDirective {
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.templateRef = inject((TemplateRef));
+        this.viewRef = null;
+        const machine = new PresenceMachine({
+            present: inject(RDX_PRESENCE_CONTEXT).present,
+            isBrowser: isPlatformBrowser(inject(PLATFORM_ID)),
+            injector: inject(Injector),
+            mountView: () => this.mountView(),
+            destroyView: () => this.destroyView()
+        });
+        inject(DestroyRef).onDestroy(() => machine.dispose());
+    }
+    mountView() {
+        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
+        const node = this.viewRef.rootNodes.find((n) => n instanceof HTMLElement);
+        return node ? [node] : [];
+    }
+    destroyView() {
+        this.viewRef?.destroy();
+        this.viewRef = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPresenceDirective, isStandalone: true, ngImport: i0 }); }
@@ -167,5 +350,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
+export { PresenceMachine, RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
 //# sourceMappingURL=radix-ng-primitives-presence.mjs.map