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

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, booleanAttribute, inject, DestroyRef, model, input, output, signal, computed, effect, untracked, Directive, ElementRef, NgModule } from '@angular/core';
-import { createContext, useTransitionStatus, injectId, useScrollLock } from '@radix-ng/primitives/core';
+import { InjectionToken, booleanAttribute, inject, DestroyRef, model, input, output, signal, computed, ElementRef, effect, untracked, Directive, Injector, afterNextRender, isDevMode, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/core';
+import { createContext, useTransitionStatus, injectId, createFloatingRootContext, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useScrollLock, setupInternalBackdrop, RdxFloatingNodeRegistration, rdxDevError } from '@radix-ng/primitives/core';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import * as i1 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
-import * as i2 from '@radix-ng/primitives/focus-scope';
-import { RdxFocusScope, provideRdxFocusScopeConfig } from '@radix-ng/primitives/focus-scope';
+import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
+import * as i2 from '@radix-ng/primitives/floating-focus-manager';
+import { RdxFloatingFocusManager, provideFloatingFocusManagerConfig } from '@radix-ng/primitives/floating-focus-manager';
+import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
 import * as i1$1 from '@radix-ng/primitives/portal';
-import { RdxPortal } from '@radix-ng/primitives/portal';
-import * as i1$2 from '@radix-ng/primitives/presence';
-import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+import { RdxPortalPresence } from '@radix-ng/primitives/portal';
+import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 
 const DEFAULT_VARIANT = {
     role: 'dialog',
@@ -86,6 +86,8 @@ class RdxDialogRoot {
         this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
         this.payload = signal(undefined, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
         this.nestedOpenCount = signal(0, ...(ngDevMode ? [{ debugName: "nestedOpenCount" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         /** Whether this dialog is rendered inside another dialog. Fixed at construction. */
         this.nested = !!this.parentRoot;
         this.nestedDialogOpen = computed(() => this.nestedOpenCount() > 0, ...(ngDevMode ? [{ debugName: "nestedDialogOpen" }] : /* istanbul ignore next */ []));
@@ -95,6 +97,22 @@ class RdxDialogRoot {
         this.effectiveModal = computed(() => (this.variant.forceModal ? true : this.modal()), ...(ngDevMode ? [{ debugName: "effectiveModal" }] : /* istanbul ignore next */ []));
         /** Effective dismissal flag: disabled when the input asks, or when the variant forces it (alerts). */
         this.effectiveDisablePointerDismissal = computed(() => this.disablePointerDismissal() || this.variant.forcePointerDismissalDisabled, ...(ngDevMode ? [{ debugName: "effectiveDisablePointerDismissal" }] : /* istanbul ignore next */ []));
+        /**
+         * The shared per-popup floating context (ADR 0015 §1) — `open` mirrors the dialog's open state, the
+         * trigger registry is bridged from {@link registerTrigger}, and the reference / floating elements are
+         * set by the trigger / popup. The new dismissal + focus engines read this once the popup migrates.
+         */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
+        // Keep the floating context's reference element in sync with the active trigger.
+        effect(() => this.floatingContext.setReferenceElement(this.trigger() ?? null));
+        effect(() => {
+            if (this.open() && this.preventUnmountOnClose()) {
+                this.preventUnmountOnClose.set(false);
+            }
+        });
         let previousOpen = this.open();
         effect(() => {
             const defaultOpen = this.defaultOpen();
@@ -136,29 +154,51 @@ class RdxDialogRoot {
         });
     }
     show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('dialog.open-change')) {
+        const shouldAdoptPayload = trigger !== undefined || payload !== undefined;
+        if (this.open()) {
+            if (trigger) {
+                this.trigger.set(trigger);
+            }
+            if (triggerId !== undefined) {
+                this.triggerId.set(triggerId);
+            }
+            // Only adopt the payload when a trigger context is actually provided, so a bare
+            // imperative re-show on an already-open dialog doesn't clobber the live payload.
+            if (shouldAdoptPayload) {
+                this.payload.set(payload);
+            }
+            return;
+        }
+        const change = this.createOpenChangeEvent(true, reason, event, trigger, triggerId ?? this.triggerId());
+        this.onOpenChange.emit(change.payload);
+        if (change.eventDetails.isCanceled()) {
+            return;
+        }
         if (trigger) {
             this.trigger.set(trigger);
         }
         if (triggerId !== undefined) {
             this.triggerId.set(triggerId);
         }
-        // Only adopt the payload when a trigger context is actually provided, so a bare
-        // imperative re-show on an already-open dialog doesn't clobber the live payload.
-        if (trigger !== undefined || payload !== undefined) {
+        if (shouldAdoptPayload) {
             this.payload.set(payload);
         }
-        if (this.open()) {
-            return;
-        }
+        this.preventUnmountOnClose.set(false);
         this.open.set(true);
-        this.emitOpenChange(true, reason, event);
+        this.floatingContext.events.emit('openchange', { open: true, reason, event: change.eventDetails.event });
     }
     close(reason = 'none', event = new Event('dialog.open-change')) {
         if (!this.open()) {
             return;
         }
+        const change = this.createOpenChangeEvent(false, reason, event, this.trigger(), this.triggerId());
+        this.onOpenChange.emit(change.payload);
+        if (change.eventDetails.isCanceled()) {
+            return;
+        }
+        this.preventUnmountOnClose.set(change.shouldPreventUnmountOnClose());
         this.open.set(false);
-        this.emitOpenChange(false, reason, event);
+        this.floatingContext.events.emit('openchange', { open: false, reason, event: change.eventDetails.event });
     }
     toggle(triggerId, trigger, payload, event = new Event('dialog.open-change')) {
         if (this.open() && this.trigger() === trigger) {
@@ -170,6 +210,9 @@ class RdxDialogRoot {
     registerTrigger(id, trigger, payload) {
         this.registeredTriggers.set(id, { element: trigger, payload });
         this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        // Bridge into the floating context's trigger registry — the new dismissal/focus engines read it
+        // for inside-element checks (a press/focus on the trigger counts as inside, ADR 0015 §2).
+        this.floatingContext.triggers.add(trigger);
         if (this.triggerId() === id || (!this.trigger() && this.triggerId() === null)) {
             this.trigger.set(trigger);
             this.payload.set(payload());
@@ -179,6 +222,7 @@ class RdxDialogRoot {
                 this.registeredTriggers.delete(id);
             }
             this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            this.floatingContext.triggers.delete(trigger);
             if (!this.destroyRef.destroyed && this.trigger() === trigger) {
                 const next = this.registeredTriggers.entries().next().value;
                 if (this.triggerId() !== null) {
@@ -209,14 +253,20 @@ class RdxDialogRoot {
             this.payload.set(trigger.payload());
         }
     }
-    emitOpenChange(open, reason, event) {
-        this.onOpenChange.emit({
-            open,
-            triggerId: this.triggerId(),
-            trigger: this.trigger(),
-            reason,
-            event
-        });
+    createOpenChangeEvent(open, reason, event, trigger, triggerId) {
+        const change = createCancelableChangeEventDetails(reason, event, trigger);
+        return {
+            eventDetails: change.eventDetails,
+            shouldPreventUnmountOnClose: change.shouldPreventUnmountOnClose,
+            payload: {
+                open,
+                triggerId,
+                trigger: change.eventDetails.trigger,
+                reason: change.eventDetails.reason,
+                event: change.eventDetails.event,
+                eventDetails: change.eventDetails
+            }
+        };
     }
     emitOpenChangeComplete(open) {
         if (!this.destroyRef.destroyed) {
@@ -224,14 +274,26 @@ class RdxDialogRoot {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDialogRoot, isStandalone: true, selector: "[rdxDialogRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, triggerId: { classPropertyName: "triggerId", publicName: "triggerId", isSignal: true, isRequired: false, transformFunction: null }, defaultTriggerId: { classPropertyName: "defaultTriggerId", publicName: "defaultTriggerId", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, disablePointerDismissal: { classPropertyName: "disablePointerDismissal", publicName: "disablePointerDismissal", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideRdxDialogRootContext(context)], exportAs: ["rdxDialogRoot"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDialogRoot, isStandalone: true, selector: "[rdxDialogRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, triggerId: { classPropertyName: "triggerId", publicName: "triggerId", isSignal: true, isRequired: false, transformFunction: null }, defaultTriggerId: { classPropertyName: "defaultTriggerId", publicName: "defaultTriggerId", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, disablePointerDismissal: { classPropertyName: "disablePointerDismissal", publicName: "disablePointerDismissal", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+            provideRdxDialogRootContext(context),
+            // New floating foundation (ADR 0015/0017 migration). Inherit-or-create tree so a nested dialog
+            // shares its parent's tree; the per-popup root context bridges open / triggers / reference.
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxDialogRoot).floatingContext)
+        ], exportAs: ["rdxDialogRoot"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDialogRoot]',
                     exportAs: 'rdxDialogRoot',
-                    providers: [provideRdxDialogRootContext(context)]
+                    providers: [
+                        provideRdxDialogRootContext(context),
+                        // New floating foundation (ADR 0015/0017 migration). Inherit-or-create tree so a nested dialog
+                        // shares its parent's tree; the per-popup root context bridges open / triggers / reference.
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxDialogRoot).floatingContext)
+                    ]
                 }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], triggerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerId", required: false }] }, { type: i0.Output, args: ["triggerIdChange"] }], defaultTriggerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTriggerId", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], disablePointerDismissal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePointerDismissal", required: false }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 function contextFor(root) {
@@ -240,6 +302,7 @@ function contextFor(root) {
         titleId: root.titleId.asReadonly(),
         descriptionId: root.descriptionId.asReadonly(),
         isOpen: root.open,
+        present: root.present,
         modal: root.effectiveModal,
         disablePointerDismissal: root.effectiveDisablePointerDismissal,
         role: root.role,
@@ -261,13 +324,27 @@ function contextFor(root) {
 
 /**
  * An overlay displayed beneath the dialog popup.
+ *
+ * Decorative-only, so it carries `role="presentation"` (Base UI `DialogBackdrop`). By default a **nested**
+ * dialog renders no backdrop — the parent's already dims the page; stacking a second one double-darkens
+ * and intercepts the parent's outside-press. Set `forceRender` to opt back in.
  */
 class RdxDialogBackdrop {
     constructor() {
         this.rootContext = injectRdxDialogRootContext();
+        /** Render the backdrop even for a nested dialog (off by default, matching Base UI). */
+        this.forceRender = input(false, { ...(ngDevMode ? { debugName: "forceRender" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        // The backdrop is a second portal root (a body sibling of the popup). It is registered as owned DOM
+        // footprint for primitive-specific checks, but it is not a marker/aria keep-set member.
+        const floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT, { optional: true });
+        if (floatingContext) {
+            const host = inject(ElementRef).nativeElement;
+            floatingContext.addFloatingElement(host);
+            inject(DestroyRef).onDestroy(() => floatingContext.removeFloatingElement(host));
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogBackdrop, isStandalone: true, selector: "[rdxDialogBackdrop]", host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-nested": "rootContext.nested ? \"\" : undefined", "attr.data-nested-dialog-open": "rootContext.nestedDialogOpen() ? \"\" : undefined" } }, exportAs: ["rdxDialogBackdrop"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDialogBackdrop, isStandalone: true, selector: "[rdxDialogBackdrop]", inputs: { forceRender: { classPropertyName: "forceRender", publicName: "forceRender", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "hidden": "rootContext.nested && !forceRender()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-nested": "rootContext.nested ? \"\" : undefined", "attr.data-nested-dialog-open": "rootContext.nestedDialogOpen() ? \"\" : undefined" } }, exportAs: ["rdxDialogBackdrop"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogBackdrop, decorators: [{
             type: Directive,
@@ -275,6 +352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxDialogBackdrop]',
                     exportAs: 'rdxDialogBackdrop',
                     host: {
+                        role: 'presentation',
+                        '[hidden]': 'rootContext.nested && !forceRender()',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
@@ -284,7 +363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-nested-dialog-open]': 'rootContext.nestedDialogOpen() ? "" : undefined'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { forceRender: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceRender", required: false }] }] } });
 
 /**
  * A button that closes the dialog.
@@ -332,111 +411,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/** Composite navigation keys a Dialog popup keeps to itself, so they never reach an enclosing Menu / Composite. */
+const COMPOSITE_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
+const DIALOG_INTERNAL_BACKDROP_ATTR = 'data-rdx-dialog-internal-backdrop';
 /**
  * A container for the dialog contents.
+ *
+ * **ADR 0015/0017 Phase-4 migration — Dialog is the PILOT cutover onto the new floating dismissal +
+ * focus engine. Browser-verified** by `apps/visual-regression/tests/dialog.behavior.spec.ts` (trap,
+ * initial / return focus, Escape / outside-press / focus-out dismissal, nested-Escape deepest-first,
+ * backdrop-not-marked).
+ *
+ * **Mapping (legacy → new):**
+ * - `RdxDismissableLayer` (legacy) → `RdxFloatingNodeRegistration` (registers the tree node) +
+ *   `RdxDismiss` (Escape / outside-press; reads the root context + node).
+ * - `RdxFocusScope` (direct) → `RdxFloatingFocusManager` (composes the reworked focus scope; trap +
+ *   markOthers + close-on-focus-out), driven by `provideFloatingFocusManagerConfig`.
+ * - `disableOutsidePointerEvents` → the focus manager's `inert` pass marks outside elements
+ *   non-interactive for a modal (finding #4), scoped to siblings of the popup's ancestor chain instead
+ *   of a global `body { pointer-events: none }` lock — so the popup needs no `pointer-events: auto`.
+ * - focus-out close moved from the dismissal capability (`focusOutside: () => false`) to the manager
+ *   (`manager.focusOut`), per ADR 0017 §3.
+ * - `isEventOnTrigger` preventDefault → removed: the trigger is in `context.triggers`, so the engine
+ *   treats a press/focus on it as **inside** (no close-then-reopen).
+ *
+ * **Parity notes:**
+ * - **Lifecycle split (resolved 2026-06-16):** `enabled` is `open || transitionStatus === 'ending'`, so
+ *   the trap / return-focus machinery survives the exit animation, while the manager's marker + isolation
+ *   passes additionally key off `open` and release at close-start (Base UI `markOthers` gating).
+ * - **`trap-focus` split:** the manager traps focus for `modal === true` and `'trap-focus'`, but applies
+ *   real `inert` isolation only for `modal === true`, matching Base UI's public contract that
+ *   `modal="trap-focus"` leaves outside pointer interaction enabled.
+ * - **`returnFocus` orchestration (resolved 2026-06-16):** the manager now owns the return-focus *target*
+ *   via the focus scope's `returnFocus` config seam (the scope owns the *timing* — its queued post-unmount
+ *   frame). Dialog leaves it at the default (`returnFocus: true` → return to the element focused before
+ *   open), so behavior is unchanged; a consumer can now also pass `false` / an element / a callback.
  */
 class RdxDialogPopup {
     constructor() {
         this.rootContext = injectRdxDialogRootContext();
-        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.host = inject(ElementRef).nativeElement;
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
+        this.focusManager = inject(RdxFloatingFocusManager);
         this.focusScope = inject(RdxFocusScope);
-        this.dismissDetails = {
-            reason: 'none',
-            event: new Event('dialog.dismiss')
-        };
-        /**
-         * Event handler called when the escape key is down. Can be prevented.
-         */
-        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
-        /**
-         * Event handler called when a pointerdown event happens outside of the popup. Can be prevented.
-         */
-        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
-        /**
-         * Event handler called when focus moves outside of the popup. Can be prevented.
-         */
-        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
-        /**
-         * Event handler called when an interaction happens outside of the popup. Can be prevented.
-         */
-        this.interactOutside = outputFromObservable(outputToObservable(this.dismissableLayer.interactOutside));
-        /**
-         * Event handler called before focus moves into the popup. Can be prevented.
-         */
+        /** Event handler called when the escape key is down. Can be prevented. */
+        this.escapeKeyDown = output();
+        /** Event handler called when a pointerdown event happens outside of the popup. Can be prevented. */
+        this.pointerDownOutside = output();
+        /** Event handler called when focus moves outside of the popup. Can be prevented. */
+        this.focusOutside = output();
+        /** Event handler called when an interaction (pointer / focus) happens outside of the popup. */
+        this.interactOutside = output();
+        /** Event handler called before focus moves into the popup. Can be prevented. */
         this.openAutoFocus = outputFromObservable(outputToObservable(this.focusScope.mountAutoFocus));
-        /**
-         * Event handler called before focus returns after the popup is removed. Can be prevented.
-         */
+        /** Event handler called before focus returns after the popup is removed. Can be prevented. */
         this.closeAutoFocus = outputFromObservable(outputToObservable(this.focusScope.unmountAutoFocus));
-        useScrollLock(computed(() => this.rootContext.modal() === true && this.rootContext.isOpen()));
-        const unregisterTransitionElement = this.rootContext.registerTransitionElement(inject(ElementRef).nativeElement);
-        inject(DestroyRef).onDestroy(unregisterTransitionElement);
-        this.dismissableLayer.pointerDownOutside.subscribe((event) => {
-            this.dismissDetails = { reason: 'outside-press', event };
-            // A pointerdown on the trigger is an "outside" press relative to the portaled popup.
-            // Let the trigger's own click toggle the dialog instead of dismissing here (which would
-            // close and then immediately reopen).
-            if (this.isEventOnTrigger(event)) {
-                event.preventDefault();
-            }
+        // The popup element is this layer's floating element (inside-surface for containment checks).
+        this.floatingContext.setFloatingElement(this.host);
+        // Scroll lock follows Base UI (`open && modal === true`): released at close-start so the page is
+        // scrollable again as the exit animation plays. Background pointer/AT isolation is no longer a
+        // global body lock — the focus manager applies real `inert` to outside elements (finding #4).
+        useScrollLock(computed(() => this.rootContext.modal() === true && this.rootContext.isOpen()), {
+            referenceElement: () => this.host
         });
-        this.dismissableLayer.focusOutside.subscribe((event) => {
-            this.dismissDetails = { reason: 'focus-out', event };
-            if (this.isEventOnTrigger(event)) {
-                event.preventDefault();
+        const unregisterTransitionElement = this.rootContext.registerTransitionElement(this.host);
+        inject(DestroyRef).onDestroy(unregisterTransitionElement);
+        // Base UI always renders an internal backdrop for a fully modal dialog. It is invisible and exists
+        // even when consumers also render `rdxDialogBackdrop`: outside pointer events land on this owned
+        // target instead of being swallowed by inert page content.
+        const injector = inject(Injector);
+        afterNextRender(() => setupInternalBackdrop(this.host, injector, {
+            marker: DIALOG_INTERNAL_BACKDROP_ATTR,
+            isOpen: () => this.rootContext.isOpen(),
+            shouldRender: () => this.rootContext.modal() === true,
+            cutout: () => this.host.closest('[rdxDialogViewport]'),
+            passThrough: () => this.host.closest('[rdxDialogViewport]') !== null
+        }));
+        // Dismissal (Base UI Dialog outside-press policy): Escape always closes; an outside press closes
+        // only the **topmost** dialog (a parent with an open nested dialog never self-closes) and only when
+        // pointer dismissal is enabled. A fully modal dialog uses the internal backdrop and intentional
+        // outside-press timing (click, not pointerdown). Focus-out is owned by the focus manager (below).
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => true,
+            outsidePress: () => this.isTopmost() && !this.rootContext.disablePointerDismissal(),
+            outsidePressEvent: () => (this.rootContext.modal() === true ? 'intentional' : 'sloppy'),
+            focusOutside: () => false,
+            onEscapeKeyDown: (event) => this.escapeKeyDown.emit(event),
+            onPointerDownOutside: (event) => {
+                this.pointerDownOutside.emit(event);
+                this.interactOutside.emit(event);
+            },
+            onDismiss: (reason, event) => {
+                this.rootContext.close(reason === 'escape-key' ? 'escape-key' : 'outside-press', event);
             }
         });
-        this.dismissableLayer.escapeKeyDown.subscribe((event) => {
-            this.dismissDetails = { reason: 'escape-key', event };
-        });
-        this.dismissableLayer.dismiss.subscribe(() => {
-            const { reason, event } = this.dismissDetails;
-            this.dismissDetails = { reason: 'none', event: new Event('dialog.dismiss') };
-            // When pointer dismissal is disabled, keep the dialog open on outside interactions.
-            // Escape always closes (standard a11y behavior).
-            if ((reason === 'outside-press' || reason === 'focus-out') && this.rootContext.disablePointerDismissal()) {
-                return;
+        // Focus-out close (ADR 0017 §3) — the manager emits when focus leaves a non-modal dialog to an
+        // unrelated node; re-expose as `focusOutside` (preventable) and close unless vetoed.
+        this.focusManager.focusOut.subscribe((event) => {
+            this.focusOutside.emit(event);
+            this.interactOutside.emit(event);
+            if (!event.defaultPrevented) {
+                this.rootContext.close('focus-out', event);
             }
-            this.rootContext.close(reason, event);
         });
     }
-    isEventOnTrigger(event) {
-        const target = event.target;
-        return !!target && this.rootContext.triggers().some((trigger) => trigger.contains(target));
+    /** This dialog is the topmost (deepest open) one — it has no open nested dialog above it. */
+    isTopmost() {
+        return this.rootContext.isOpen() && !this.rootContext.nestedDialogOpen();
+    }
+    /**
+     * Composite navigation keys (arrows / Home / End) are kept inside the dialog (Base UI `DialogPopup`):
+     * a dialog opened from inside a Menu / Menubar / Composite must not let an arrow press bubble out and
+     * move the outer collection's active item.
+     */
+    onKeyDown(event) {
+        if (COMPOSITE_KEYS.has(event.key)) {
+            event.stopPropagation();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogPopup, isStandalone: true, selector: "[rdxDialogPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { properties: { "attr.role": "rootContext.role", "attr.aria-modal": "rootContext.modal() === true ? \"true\" : undefined", "attr.aria-describedby": "rootContext.descriptionId()", "attr.aria-labelledby": "rootContext.titleId()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-nested": "rootContext.nested ? \"\" : undefined", "attr.data-nested-dialog-open": "rootContext.nestedDialogOpen() ? \"\" : undefined", "id": "rootContext.contentId" } }, providers: [
-            provideRdxDismissableLayerConfig(() => {
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogPopup, isStandalone: true, selector: "[rdxDialogPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.role": "rootContext.role", "attr.aria-modal": "rootContext.modal() === true ? \"true\" : undefined", "attr.aria-describedby": "rootContext.descriptionId()", "attr.aria-labelledby": "rootContext.titleId()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-nested": "rootContext.nested ? \"\" : undefined", "attr.data-nested-dialog-open": "rootContext.nestedDialogOpen() ? \"\" : undefined", "id": "rootContext.contentId" } }, providers: [
+            provideFloatingFocusManagerConfig(() => {
                 const rootContext = injectRdxDialogRootContext();
                 return {
-                    disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
-                };
-            }),
-            provideRdxFocusScopeConfig(() => {
-                const rootContext = injectRdxDialogRootContext();
-                return {
-                    trapped: computed(() => rootContext.modal() === 'trap-focus' || rootContext.modal() === true)
+                    // Trap for a modal or trap-focus dialog (Base UI `modal={modal !== false}`).
+                    modal: () => rootContext.modal() === true || rootContext.modal() === 'trap-focus',
+                    // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
+                    inert: () => rootContext.modal() === true,
+                    // Active for the whole MOUNTED lifetime — including an explicit
+                    // `preventUnmountOnClose()` cycle after the exit transition — matching Base UI's
+                    // `FloatingFocusManager disabled={!mounted}` (NOT `open`) for trap/return-focus.
+                    // Marker + isolation are additionally gated on `open` inside the manager.
+                    enabled: () => rootContext.present(),
+                    closeOnFocusOut: () => !rootContext.disablePointerDismissal()
                 };
             })
-        ], exportAs: ["rdxDialogPopup"], hostDirectives: [{ directive: i1.RdxDismissableLayer }, { directive: i2.RdxFocusScope }], ngImport: i0 }); }
+        ], exportAs: ["rdxDialogPopup"], hostDirectives: [{ directive: i1.RdxFloatingNodeRegistration }, { directive: i2.RdxFloatingFocusManager }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDialogPopup]',
                     exportAs: 'rdxDialogPopup',
-                    hostDirectives: [RdxDismissableLayer, RdxFocusScope],
+                    hostDirectives: [RdxFloatingNodeRegistration, RdxFloatingFocusManager],
                     providers: [
-                        provideRdxDismissableLayerConfig(() => {
-                            const rootContext = injectRdxDialogRootContext();
-                            return {
-                                disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
-                            };
-                        }),
-                        provideRdxFocusScopeConfig(() => {
+                        provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxDialogRootContext();
                             return {
-                                trapped: computed(() => rootContext.modal() === 'trap-focus' || rootContext.modal() === true)
+                                // Trap for a modal or trap-focus dialog (Base UI `modal={modal !== false}`).
+                                modal: () => rootContext.modal() === true || rootContext.modal() === 'trap-focus',
+                                // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
+                                inert: () => rootContext.modal() === true,
+                                // Active for the whole MOUNTED lifetime — including an explicit
+                                // `preventUnmountOnClose()` cycle after the exit transition — matching Base UI's
+                                // `FloatingFocusManager disabled={!mounted}` (NOT `open`) for trap/return-focus.
+                                // Marker + isolation are additionally gated on `open` inside the manager.
+                                enabled: () => rootContext.present(),
+                                closeOnFocusOut: () => !rootContext.disablePointerDismissal()
                             };
                         })
                     ],
@@ -452,69 +584,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[attr.data-nested]': 'rootContext.nested ? "" : undefined',
                         '[attr.data-nested-dialog-open]': 'rootContext.nestedDialogOpen() ? "" : undefined',
-                        '[id]': 'rootContext.contentId'
+                        '[id]': 'rootContext.contentId',
+                        '(keydown)': 'onKeyDown($event)'
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], openAutoFocus: [{ type: i0.Output, args: ["openAutoFocus"] }], closeAutoFocus: [{ type: i0.Output, args: ["closeAutoFocus"] }] } });
 
 /**
- * Moves the dialog to a different part of the DOM.
+ * Structural directive that teleports the dialog content (backdrop + popup) into a container (default
+ * `document.body`) while the dialog is open, and keeps it mounted until the CSS exit `@keyframes` on
+ * every root element finish.
+ *
+ * Dialog has two root nodes (backdrop + popup), so use the explicit `<ng-template rdxDialogPortal>`
+ * form. Pass `[container]` to portal into a different element.
  */
 class RdxDialogPortal {
     constructor() {
-        this.rootContext = injectRdxDialogRootContext();
         /**
-         * Optional container to portal the content into. Defaults to `document.body`.
+         * Optional container to portal the content into. Defaults to `document.body`. Declared here (and
+         * forwarded to the composed {@link RdxPortalPresence}) so that the drawer and alert-dialog portals
+         * can re-expose it through their own `hostDirectives`.
          */
         this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDialogPortal, isStandalone: true, selector: "[rdxDialogPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["rdxDialogPortal"], hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDialogPortal, isStandalone: true, selector: "ng-template[rdxDialogPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxPresenceContext(() => ({ present: injectRdxDialogRootContext().present }))], exportAs: ["rdxDialogPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxDialogPortal]',
+                    selector: 'ng-template[rdxDialogPortal]',
                     exportAs: 'rdxDialogPortal',
-                    hostDirectives: [
-                        {
-                            directive: RdxPortal,
-                            inputs: ['container']
-                        }
-                    ],
-                    host: {
-                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
-                    }
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxDialogRootContext().present }))]
                 }]
         }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
-
 /**
- * Mounts the portal while the dialog is open and waits for CSS exit keyframes before unmounting.
+ * Dev-mode guard: `rdxDialogPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxDialogPortal>` markup would silently stop portaling — fail loudly
+ * instead.
  */
-class RdxDialogPortalPresence {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogPortalPresence, isStandalone: true, selector: "ng-template[rdxDialogPortalPresence]", providers: [
-            provideRdxPresenceContext(() => {
-                const context = injectRdxDialogRootContext();
-                return { present: context.isOpen };
-            })
-        ], hostDirectives: [{ directive: i1$2.RdxPresenceDirective }], ngImport: i0 }); }
+class RdxDialogPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            rdxDevError('dialog/portal-on-element', '`rdxDialogPortal` is now a structural directive. ' +
+                'Use `<ng-template rdxDialogPortal>` around the backdrop and popup. ' +
+                'rdxDialogPortalPresence has been removed.', 'components/dialog');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogPortalMisuseGuard, isStandalone: true, selector: "[rdxDialogPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortalPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxDialogPortalPresence]',
-                    hostDirectives: [RdxPresenceDirective],
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const context = injectRdxDialogRootContext();
-                            return { present: context.isOpen };
-                        })
-                    ]
+                    selector: '[rdxDialogPortal]:not(ng-template)'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * An accessible title for the dialog.
@@ -709,8 +835,8 @@ function createRdxDialogHandle() {
 const dialogImports = [
     RdxDialogRoot,
     RdxDialogTrigger,
-    RdxDialogPortalPresence,
     RdxDialogPortal,
+    RdxDialogPortalMisuseGuard,
     RdxDialogBackdrop,
     RdxDialogViewport,
     RdxDialogPopup,
@@ -722,8 +848,8 @@ class RdxDialogModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogModule, imports: [RdxDialogRoot,
             RdxDialogTrigger,
-            RdxDialogPortalPresence,
             RdxDialogPortal,
+            RdxDialogPortalMisuseGuard,
             RdxDialogBackdrop,
             RdxDialogViewport,
             RdxDialogPopup,
@@ -731,8 +857,8 @@ class RdxDialogModule {
             RdxDialogDescription,
             RdxDialogClose], exports: [RdxDialogRoot,
             RdxDialogTrigger,
-            RdxDialogPortalPresence,
             RdxDialogPortal,
+            RdxDialogPortalMisuseGuard,
             RdxDialogBackdrop,
             RdxDialogViewport,
             RdxDialogPopup,
@@ -753,5 +879,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RDX_DIALOG_VARIANT, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, RdxDialogHandle, RdxDialogModule, RdxDialogPopup, RdxDialogPortal, RdxDialogPortalPresence, RdxDialogRoot, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, createRdxDialogHandle, dialogImports, injectRdxDialogRootContext, provideRdxDialogRootContext, provideRdxDialogVariant };
+export { RDX_DIALOG_VARIANT, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, RdxDialogHandle, RdxDialogModule, RdxDialogPopup, RdxDialogPortal, RdxDialogPortalMisuseGuard, RdxDialogRoot, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, createRdxDialogHandle, dialogImports, injectRdxDialogRootContext, provideRdxDialogRootContext, provideRdxDialogVariant };
 //# sourceMappingURL=radix-ng-primitives-dialog.mjs.map