@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

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

@@ -1,423 +1,751 @@
 import * as i0 from '@angular/core';
-import { signal, computed, inject, Directive, DestroyRef, Injector, RendererFactory2, runInInjectionContext, effect, Renderer2, Injectable, makeEnvironmentProviders, importProvidersFrom, input, Input, NgModule } from '@angular/core';
-import { map, filter, isObservable, of, take, merge, switchMap, takeUntil } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Dialog, DialogModule, DIALOG_DATA } from '@angular/cdk/dialog';
+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 { 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 * 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';
 
-const DISMISSED_VALUE = {};
-function isDismissed(v) {
-    return v === DISMISSED_VALUE;
+const DEFAULT_VARIANT = {
+    role: 'dialog',
+    forceModal: false,
+    forcePointerDismissalDisabled: false
+};
+const RDX_DIALOG_VARIANT = new InjectionToken('RdxDialogVariant', {
+    factory: () => DEFAULT_VARIANT
+});
+function provideRdxDialogVariant(variant) {
+    return { provide: RDX_DIALOG_VARIANT, useValue: { ...DEFAULT_VARIANT, ...variant } };
 }
+
+const transformModal = (value) => value === 'trap-focus' ? value : booleanAttribute(value);
+const context = () => contextFor(inject(RdxDialogRoot));
+const [injectRdxDialogRootContext, provideRdxDialogRootContext] = createContext('RdxDialogRootContext');
 /**
- * Represents a reference to an open dialog.
- * Provides methods and observables to interact with and monitor the dialog's state.
- * @template C - The type of the dialog's content component
+ * Groups all parts of the dialog.
  */
-class RdxDialogRef {
-    /**
-     * @param cdkRef - Reference to the underlying CDK dialog
-     * @param config - Configuration options for the dialog
-     */
-    constructor(cdkRef, config) {
-        this.cdkRef = cdkRef;
-        this.config = config;
-        // state tracking
-        this._openSignal = signal(true, ...(ngDevMode ? [{ debugName: "_openSignal" }] : []));
-        this.state = computed(() => (this._openSignal() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "state" }] : []));
-        this.closed$ = this.cdkRef.closed.pipe(map((res) => (isDismissed(res) ? undefined : res)));
-        this.dismissed$ = this.cdkRef.closed.pipe(filter((res) => res === DISMISSED_VALUE), map(() => undefined));
-        this.result$ = this.cdkRef.closed.pipe(filter((res) => !isDismissed(res)));
+class RdxDialogRoot {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.parentRoot = inject(RdxDialogRoot, { optional: true, skipSelf: true });
+        this.variant = inject(RDX_DIALOG_VARIANT);
+        this.hasAppliedDefaultOpen = false;
+        this.hasAppliedDefaultTriggerId = false;
+        this.registeredTriggers = new Map();
+        this.transition = useTransitionStatus((open) => this.emitOpenChangeComplete(open));
+        this.transitionStatus = this.transition.status;
+        this.registerTransitionElement = this.transition.registerElement;
+        /**
+         * Whether the dialog is currently open.
+         */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the dialog is initially open.
+         */
+        this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * ID of the trigger associated with a controlled dialog.
+         */
+        this.triggerId = model(null, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        /**
+         * ID of the trigger associated with an initially open uncontrolled dialog.
+         */
+        this.defaultTriggerId = input(null, ...(ngDevMode ? [{ debugName: "defaultTriggerId" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines if the dialog enters a modal state when open.
+         * - `true`: focus is trapped, page scroll is locked, outside pointer events are disabled.
+         * - `false`: interaction with the rest of the document is allowed.
+         * - `'trap-focus'`: focus is trapped, but scroll is not locked and outside pointer events remain enabled.
+         */
+        this.modal = input(true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: transformModal });
+        /**
+         * Determines whether the dialog should close on outside clicks.
+         */
+        this.disablePointerDismissal = input(false, { ...(ngDevMode ? { debugName: "disablePointerDismissal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Associates this root with detached trigger elements rendered outside of it.
+         */
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        /**
+         * Event handler called when the dialog is opened or closed.
+         */
+        this.onOpenChange = output();
+        /**
+         * Event handler called after any animations complete when the dialog is opened or closed.
+         */
+        this.onOpenChangeComplete = output();
+        this.contentId = injectId('rdx-dialog-content-');
+        this.titleId = signal(undefined, ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        this.descriptionId = signal(undefined, ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        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 */ []));
+        /** 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 */ []));
+        /** ARIA role, fixed at construction by the dialog variant (`alertdialog` for alert dialogs). */
+        this.role = this.variant.role;
+        /** Effective modality: the variant can pin it to `true` regardless of the `modal` input. */
+        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 */ []));
+        let previousOpen = this.open();
+        effect(() => {
+            const defaultOpen = this.defaultOpen();
+            if (!this.hasAppliedDefaultOpen && defaultOpen) {
+                this.hasAppliedDefaultOpen = true;
+                this.open.set(defaultOpen);
+            }
+        });
+        effect(() => {
+            const defaultTriggerId = this.defaultTriggerId();
+            if (!this.hasAppliedDefaultTriggerId && defaultTriggerId !== null) {
+                this.hasAppliedDefaultTriggerId = true;
+                this.triggerId.set(defaultTriggerId);
+            }
+        });
+        effect(() => {
+            const triggerId = this.triggerId();
+            untracked(() => this.syncTriggerId(triggerId));
+        });
+        effect(() => {
+            const open = this.open();
+            if (open !== previousOpen) {
+                previousOpen = open;
+                untracked(() => this.transition.start(open));
+            }
+        });
+        // Report nested open state to the parent dialog so it can apply data-nested-dialog-open.
+        effect((onCleanup) => {
+            const open = this.open();
+            if (open && this.parentRoot) {
+                onCleanup(untracked(() => this.parentRoot.openNestedChild()));
+            }
+        });
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerRoot(contextFor(this))));
+            }
+        });
+    }
+    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('dialog.open-change')) {
+        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) {
+            this.payload.set(payload);
+        }
+        if (this.open()) {
+            return;
+        }
+        this.open.set(true);
+        this.emitOpenChange(true, reason, event);
     }
-    get instance() {
-        return this.cdkRef.componentInstance;
+    close(reason = 'none', event = new Event('dialog.open-change')) {
+        if (!this.open()) {
+            return;
+        }
+        this.open.set(false);
+        this.emitOpenChange(false, reason, event);
     }
-    /**
-     * Attempts to dismiss the dialog
-     * Checks the canClose condition before dismissing
-     */
-    dismiss() {
-        if (!this.instance || this.config.isAlert) {
+    toggle(triggerId, trigger, payload, event = new Event('dialog.open-change')) {
+        if (this.open() && this.trigger() === trigger) {
+            this.close('trigger-press', event);
             return;
         }
-        const canClose = this.config.canClose?.(this.instance) ?? true;
-        const canClose$ = isObservable(canClose) ? canClose : of(canClose);
-        canClose$.pipe(take(1)).subscribe((close) => {
-            if (close) {
-                this.cdkRef.close(DISMISSED_VALUE);
+        this.show(trigger, payload, triggerId, 'trigger-press', event);
+    }
+    registerTrigger(id, trigger, payload) {
+        this.registeredTriggers.set(id, { element: trigger, payload });
+        this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        if (this.triggerId() === id || (!this.trigger() && this.triggerId() === null)) {
+            this.trigger.set(trigger);
+            this.payload.set(payload());
+        }
+        return () => {
+            if (this.registeredTriggers.get(id)?.element === trigger) {
+                this.registeredTriggers.delete(id);
             }
-        });
+            this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            if (!this.destroyRef.destroyed && this.trigger() === trigger) {
+                const next = this.registeredTriggers.entries().next().value;
+                if (this.triggerId() !== null) {
+                    this.triggerId.set(next?.[0] ?? null);
+                }
+                this.trigger.set(next?.[1].element);
+                this.payload.set(next?.[1].payload());
+                // Intentionally do NOT close when the last trigger unregisters (unlike popover):
+                // a controlled / imperatively-opened dialog must survive its trigger unmounting.
+            }
+        };
+    }
+    /** Increments the nested-open counter and returns a release callback that decrements it. */
+    openNestedChild() {
+        this.nestedOpenCount.update((count) => count + 1);
+        return () => this.nestedOpenCount.update((count) => count - 1);
     }
-    close(result) {
-        // check if dialog is already in closing state to prevent double-closing
-        if (this.state() === 'closed') {
+    syncTriggerId(triggerId) {
+        if (triggerId === null) {
+            // Controlled triggerId cleared: drop the active trigger so stale state doesn't linger.
+            this.trigger.set(undefined);
+            this.payload.set(undefined);
             return;
         }
-        this._openSignal.set(false);
-        if (this._previousTimeout) {
-            clearTimeout(this._previousTimeout);
+        const trigger = this.registeredTriggers.get(triggerId);
+        if (trigger && trigger.element !== this.trigger()) {
+            this.trigger.set(trigger.element);
+            this.payload.set(trigger.payload());
+        }
+    }
+    emitOpenChange(open, reason, event) {
+        this.onOpenChange.emit({
+            open,
+            triggerId: this.triggerId(),
+            trigger: this.trigger(),
+            reason,
+            event
+        });
+    }
+    emitOpenChangeComplete(open) {
+        if (!this.destroyRef.destroyed) {
+            this.onOpenChangeComplete.emit(open);
         }
-        const closeDelay = this.config.closeDelay ?? 100; // Default to 100ms if not specified
-        // Actual closing happens after delay
-        this._previousTimeout = setTimeout(() => {
-            this.cdkRef.close(result ?? DISMISSED_VALUE);
-        }, closeDelay);
     }
+    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 }); }
+}
+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)]
+                }]
+        }], 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) {
+    return {
+        contentId: root.contentId,
+        titleId: root.titleId.asReadonly(),
+        descriptionId: root.descriptionId.asReadonly(),
+        isOpen: root.open,
+        modal: root.effectiveModal,
+        disablePointerDismissal: root.effectiveDisablePointerDismissal,
+        role: root.role,
+        transitionStatus: root.transitionStatus,
+        trigger: root.trigger.asReadonly(),
+        triggers: root.triggers.asReadonly(),
+        payload: root.payload.asReadonly(),
+        nested: root.nested,
+        nestedDialogOpen: root.nestedDialogOpen,
+        setTitleId: (id) => root.titleId.set(id),
+        setDescriptionId: (id) => root.descriptionId.set(id),
+        registerTransitionElement: (element) => root.registerTransitionElement(element),
+        registerTrigger: (id, trigger, payload) => root.registerTrigger(id, trigger, payload),
+        open: (trigger, payload, triggerId, reason, event) => root.show(trigger, payload, triggerId, reason, event),
+        close: (reason, event) => root.close(reason, event),
+        toggle: (triggerId, trigger, payload, event) => root.toggle(triggerId, trigger, payload, event)
+    };
 }
 
-class RdxDialogCloseDirective {
+/**
+ * An overlay displayed beneath the dialog popup.
+ */
+class RdxDialogBackdrop {
     constructor() {
-        this.ref = inject(RdxDialogRef);
+        this.rootContext = injectRdxDialogRootContext();
     }
-    onClick() {
-        this.ref.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDialogCloseDirective, isStandalone: true, selector: "[rdxDialogClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogBackdrop, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxDialogClose]',
-                    standalone: true,
+                    selector: '[rdxDialogBackdrop]',
+                    exportAs: 'rdxDialogBackdrop',
                     host: {
-                        '(click)': 'onClick()'
+                        '[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'
                     }
                 }]
         }] });
 
-const ɵdialogData = Symbol.for('rdxDialogData');
-const ɵdialogResult = Symbol.for('rdxDialogResult');
-function getState(open) {
-    return open ? 'open' : 'closed';
-}
-
-class RdxDialogContentDirective {
+/**
+ * A button that closes the dialog.
+ */
+class RdxDialogClose {
     constructor() {
-        this.dialogRef = inject(RdxDialogRef);
-        this.destroyRef = inject(DestroyRef);
-        this.isOpen = signal(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.state = computed(() => getState(this.isOpen()), ...(ngDevMode ? [{ debugName: "state" }] : []));
-        this.dialogRef.closed$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.isOpen.set(false);
-        });
-    }
-    /**
-     * Closes the dialog with a specified result.
-     *
-     * @param result The result to be passed back when closing the dialog
-     */
-    close(result) {
-        this.dialogRef.close(result);
-    }
-    /**
-     * Dismisses the dialog without a result.
-     */
-    dismiss() {
-        this.dialogRef.dismiss();
+        this.rootContext = injectRdxDialogRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDialogContentDirective, isStandalone: true, selector: "[rdxDialogContent]", host: { attributes: { "role": "dialog" }, properties: { "attr.aria-describedby": "\"true\"", "attr.aria-labelledby": "\"true\"", "attr.data-state": "state()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogClose, isStandalone: true, selector: "button[rdxDialogClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootContext.close(\"close-press\", $event)" } }, exportAs: ["rdxDialogClose"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogClose, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxDialogContent]',
-                    standalone: true,
+                    selector: 'button[rdxDialogClose]',
+                    exportAs: 'rdxDialogClose',
                     host: {
-                        role: 'dialog',
-                        '[attr.aria-describedby]': '"true"',
-                        '[attr.aria-labelledby]': '"true"',
-                        '[attr.data-state]': 'state()'
+                        type: 'button',
+                        '(click)': 'rootContext.close("close-press", $event)'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class RdxDialogDescriptionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDialogDescriptionDirective, isStandalone: true, selector: "[rdxDialogDescription]", ngImport: i0 }); }
+/**
+ * An accessible description for the dialog.
+ */
+class RdxDialogDescription {
+    constructor() {
+        this.rootContext = injectRdxDialogRootContext();
+        this.id = injectId('rdx-dialog-description-');
+        this.rootContext.setDescriptionId(this.id);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setDescriptionId(undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogDescription, isStandalone: true, selector: "[rdxDialogDescription]", host: { properties: { "id": "id" } }, exportAs: ["rdxDialogDescription"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDialogDescription]',
-                    standalone: true
+                    exportAs: 'rdxDialogDescription',
+                    host: {
+                        '[id]': 'id'
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class RdxDialogDismissDirective {
+/**
+ * A container for the dialog contents.
+ */
+class RdxDialogPopup {
     constructor() {
-        this.ref = inject(RdxDialogRef);
+        this.rootContext = injectRdxDialogRootContext();
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        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.
+         */
+        this.openAutoFocus = outputFromObservable(outputToObservable(this.focusScope.mountAutoFocus));
+        /**
+         * 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();
+            }
+        });
+        this.dismissableLayer.focusOutside.subscribe((event) => {
+            this.dismissDetails = { reason: 'focus-out', event };
+            if (this.isEventOnTrigger(event)) {
+                event.preventDefault();
+            }
+        });
+        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;
+            }
+            this.rootContext.close(reason, event);
+        });
     }
-    onClick() {
-        this.ref.dismiss();
+    isEventOnTrigger(event) {
+        const target = event.target;
+        return !!target && this.rootContext.triggers().some((trigger) => trigger.contains(target));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogDismissDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDialogDismissDirective, isStandalone: true, selector: "button[rdxDialogDismiss]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    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(() => {
+                const rootContext = injectRdxDialogRootContext();
+                return {
+                    disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
+                };
+            }),
+            provideRdxFocusScopeConfig(() => {
+                const rootContext = injectRdxDialogRootContext();
+                return {
+                    trapped: computed(() => rootContext.modal() === 'trap-focus' || rootContext.modal() === true)
+                };
+            })
+        ], exportAs: ["rdxDialogPopup"], hostDirectives: [{ directive: i1.RdxDismissableLayer }, { directive: i2.RdxFocusScope }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogDismissDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPopup, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[rdxDialogDismiss]',
-                    standalone: true,
+                    selector: '[rdxDialogPopup]',
+                    exportAs: 'rdxDialogPopup',
+                    hostDirectives: [RdxDismissableLayer, RdxFocusScope],
+                    providers: [
+                        provideRdxDismissableLayerConfig(() => {
+                            const rootContext = injectRdxDialogRootContext();
+                            return {
+                                disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
+                            };
+                        }),
+                        provideRdxFocusScopeConfig(() => {
+                            const rootContext = injectRdxDialogRootContext();
+                            return {
+                                trapped: computed(() => rootContext.modal() === 'trap-focus' || rootContext.modal() === true)
+                            };
+                        })
+                    ],
                     host: {
-                        type: 'button',
-                        '(click)': 'onClick()'
+                        '[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'
                     }
                 }]
-        }] });
+        }], 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"] }] } });
 
-class RdxDialogTitleDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDialogTitleDirective, isStandalone: true, selector: "[rdxDialogTitle]", ngImport: i0 }); }
+/**
+ * Moves the dialog to a different part of the DOM.
+ */
+class RdxDialogPortal {
+    constructor() {
+        this.rootContext = injectRdxDialogRootContext();
+        /**
+         * Optional container to portal the content into. Defaults to `document.body`.
+         */
+        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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxDialogTitle]',
-                    standalone: true
+                    selector: '[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"'
+                    }
                 }]
-        }] });
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
 
 /**
- * Modality control: When `isModal` is set to `true`, the dialog will:
- *
- * - Have a backdrop that blocks interaction with the rest of the page
- * - Disable closing by clicking outside or pressing Escape
- * - Set `aria-modal="true"` for screen readers
- * - Automatically focus the first tabbable element in the dialog
- * - Restore focus to the element that opened the dialog when it's closed
- *
- *
- * When `isModal` is `false`, the dialog will:
- *
- * - Not have a backdrop, allowing interaction with the rest of the page
- * - Allow closing by clicking outside or pressing Escape
- * - Not set `aria-modal` attribute
- * - Not automatically manage focus
+ * Mounts the portal while the dialog is open and waits for CSS exit keyframes before unmounting.
  */
-class RdxDialogService {
-    #cdkDialog = inject(Dialog);
-    #injector = inject(Injector);
-    #rendererFactory = inject(RendererFactory2);
-    #renderer = this.#rendererFactory.createRenderer(null, null);
-    open(config) {
-        let dialogRef;
-        let modeClasses = [];
-        switch (config.mode) {
-            case 'sheet':
-                modeClasses = ['mod-sheet', 'mod-right'];
-                break;
-            case 'sheet-right':
-                modeClasses = ['mod-sheet', 'mod-right'];
-                break;
-            case 'sheet-bottom':
-                modeClasses = ['mod-sheet', 'mod-bottom'];
-                break;
-            case 'sheet-left':
-                modeClasses = ['mod-sheet', 'mod-left'];
-                break;
-            case 'sheet-top':
-                modeClasses = ['mod-sheet', 'mod-top'];
-                break;
-        }
-        // Create a new configuration with default closeDelay if not provided
-        const extendedConfig = {
-            ...config,
-            closeDelay: config.closeDelay ?? 0
-        };
-        const cdkRef = this.#cdkDialog.open(config.content, {
-            ariaModal: config.modal ?? true,
-            hasBackdrop: config.modal ?? true,
-            data: 'data' in config ? config.data : null,
-            restoreFocus: true,
-            role: config.isAlert ? 'alertdialog' : 'dialog',
-            disableClose: true,
-            closeOnDestroy: true,
-            injector: this.#injector,
-            backdropClass: config.backdropClass ? config.backdropClass : 'cdk-overlay-dark-backdrop',
-            panelClass: ['dialog', ...modeClasses, ...(config.panelClasses || [])],
-            autoFocus: config.autoFocus === 'first-input' ? 'dialog' : (config.autoFocus ?? 'first-tabbable'),
-            ariaLabel: config.ariaLabel,
-            templateContext: () => ({ dialogRef: dialogRef }),
-            providers: (ref) => {
-                // Create dialog ref with state tracking
-                dialogRef = new RdxDialogRef(ref, extendedConfig);
-                // Get overlay and backdrop references
-                const overlay = ref.overlayRef.overlayElement;
-                const backdrop = ref.overlayRef.backdropElement;
-                // Set up effect to track and update state attributes
-                runInInjectionContext(this.#injector, () => {
-                    effect(() => {
-                        const currentState = dialogRef.state();
-                        if (overlay) {
-                            this.#renderer.setAttribute(overlay, 'data-state', currentState);
-                        }
-                        if (backdrop) {
-                            this.#renderer.setAttribute(backdrop, 'data-state', currentState);
-                        }
-                        // For sheet dialogs, add data-side attribute
-                        if (config.mode?.startsWith('sheet-')) {
-                            const side = config.mode.substring(6);
-                            if (overlay) {
-                                this.#renderer.setAttribute(overlay, 'data-side', side);
-                            }
-                            if (backdrop) {
-                                this.#renderer.setAttribute(backdrop, 'data-side', side);
-                            }
-                        }
-                    });
-                });
-                return [
-                    {
-                        provide: RdxDialogRef,
-                        useValue: dialogRef
-                    }
-                ];
-            },
-            // @FIXME
-            ...(config.cdkConfigOverride || {})
-        });
-        if (cdkRef.componentRef) {
-            cdkRef.componentRef.injector
-                .get(Renderer2)
-                .setStyle(cdkRef.componentRef.location.nativeElement, 'display', 'contents');
-        }
-        if (!config.isAlert) {
-            merge(cdkRef.backdropClick, cdkRef.keydownEvents.pipe(filter((e) => e.key === 'Escape' && !e.defaultPrevented)))
-                .pipe(filter(() => config.canCloseWithBackdrop ?? true), switchMap(() => {
-                const canClose = (cdkRef.componentInstance && config.canClose?.(cdkRef.componentInstance)) ?? true;
-                const canClose$ = isObservable(canClose) ? canClose : of(canClose);
-                return canClose$.pipe(take(1));
-            }), takeUntil(dialogRef.closed$))
-                .subscribe((canClose) => {
-                if (canClose) {
-                    // rather than `cdkRef.close()`, closing the `dialogRef` directly
-                    // ensures that the `state` is represented correctly
-                    dialogRef.close(undefined);
-                }
-            });
-        }
-        return dialogRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogService }); }
+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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxDialogPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectRdxDialogRootContext();
+                            return { present: context.isOpen };
+                        })
+                    ]
+                }]
         }] });
 
 /**
- * Configures the RdxDialog module by providing necessary dependencies.
- *
- * This function sets up the environment providers required for the RdxDialog to function,
- * specifically importing the Angular CDK's DialogModule.
- *
- * @returns {EnvironmentProviders} An EnvironmentProviders instance containing the DialogModule.
- */
-function provideRdxDialogConfig() {
-    return makeEnvironmentProviders([importProvidersFrom(DialogModule)]);
-}
-/**
- * Provides the RdxDialogService for dependency injection.
- *
- * This function is used to make the RdxDialogService available for injection
- * in components, directives, or other services that require dialog functionality.
- *
- * @returns {Provider} A provider for the RdxDialogService.
+ * An accessible title for the dialog.
  */
-function provideRdxDialog() {
-    return RdxDialogService;
+class RdxDialogTitle {
+    constructor() {
+        this.rootContext = injectRdxDialogRootContext();
+        this.id = injectId('rdx-dialog-title-');
+        this.rootContext.setTitleId(this.id);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setTitleId(undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogTitle, isStandalone: true, selector: "[rdxDialogTitle]", host: { properties: { "id": "id" } }, exportAs: ["rdxDialogTitle"], ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDialogTitle]',
+                    exportAs: 'rdxDialogTitle',
+                    host: {
+                        '[id]': 'id'
+                    }
+                }]
+        }], ctorParameters: () => [] });
 
-let nextId = 0;
 /**
- * @group Components
+ * A button that opens the dialog.
  */
-class RdxDialogTriggerDirective {
+class RdxDialogTrigger {
     constructor() {
-        this.dialogService = inject(RdxDialogService);
+        this.parentRootContext = injectRdxDialogRootContext(true);
+        this.elementRef = inject(ElementRef);
         /**
-         * @group Props
+         * Associates this trigger with a detached dialog root.
          */
-        this.id = input(`rdx-dialog-trigger-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-        this.dialogId = computed(() => `rdx-dialog-${this.id()}`, ...(ngDevMode ? [{ debugName: "dialogId" }] : []));
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.state = computed(() => getState(this.isOpen()), ...(ngDevMode ? [{ debugName: "state" }] : []));
-        this.currentDialogRef = null;
-    }
-    onClick() {
-        this.currentDialogRef = this.dialogService.open({
-            ...this.dialogConfig,
-            content: this.dialog
-        });
-        this.isOpen.set(true);
-        this.currentDialogRef.closed$.subscribe(() => {
-            this.isOpen.set(false);
-            this.currentDialogRef = null;
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        /**
+         * Data associated with this trigger while it is active.
+         */
+        this.payload = input(...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
+        /**
+         * ID used to identify this trigger when opening a detached or controlled dialog.
+         */
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the trigger should ignore user interaction.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.generatedId = injectId('rdx-dialog-trigger-');
+        this.triggerId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
+            else if (this.parentRootContext) {
+                onCleanup(untracked(() => this.parentRootContext.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxDialogTriggerDirective, isStandalone: true, selector: "[rdxDialogTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dialog: { classPropertyName: "dialog", publicName: "rdxDialogTrigger", isSignal: false, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "rdxDialogConfig", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.id": "id()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "dialogId()", "attr.data-state": "state()" } }, providers: [provideRdxDialog()], ngImport: i0 }); }
+    handleClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.handle()) {
+            this.handle().toggle(this.triggerId(), event);
+        }
+        else {
+            this.parentRootContext?.toggle(this.triggerId(), this.elementRef.nativeElement, this.payload(), event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDialogTrigger, isStandalone: true, selector: "button[rdxDialogTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-controls": "rootContext()?.contentId", "attr.aria-expanded": "isOpen()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "id": "triggerId()" } }, exportAs: ["rdxDialogTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxDialogTrigger]',
-                    standalone: true,
-                    providers: [provideRdxDialog()],
+                    selector: 'button[rdxDialogTrigger]',
+                    exportAs: 'rdxDialogTrigger',
                     host: {
                         type: 'button',
-                        '[attr.id]': 'id()',
                         '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-controls]': 'rootContext()?.contentId',
                         '[attr.aria-expanded]': 'isOpen()',
-                        '[attr.aria-controls]': 'dialogId()',
-                        '[attr.data-state]': 'state()',
-                        '(click)': 'onClick()'
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-popup-open]': 'isOpen() ? "" : undefined',
+                        '[attr.disabled]': 'disabled() ? "" : undefined',
+                        '[id]': 'triggerId()',
+                        '(click)': 'handleClick($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * A positioning container for the dialog popup that can be made scrollable.
+ *
+ * Place it inside the portal, around the popup, to scroll the popup when it is taller than the
+ * viewport (outside scroll). Pointer events pass through while the dialog is closed.
+ */
+class RdxDialogViewport {
+    constructor() {
+        this.rootContext = injectRdxDialogRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDialogViewport, isStandalone: true, selector: "[rdxDialogViewport]", host: { attributes: { "role": "presentation" }, properties: { "style.pointer-events": "rootContext.isOpen() ? null : \"none\"", "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: ["rdxDialogViewport"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDialogViewport]',
+                    exportAs: 'rdxDialogViewport',
+                    host: {
+                        role: 'presentation',
+                        '[style.pointer-events]': 'rootContext.isOpen() ? null : "none"',
+                        '[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'
                     }
                 }]
-        }], propDecorators: { dialog: [{
-                type: Input,
-                args: [{ required: true, alias: 'rdxDialogTrigger' }]
-            }], dialogConfig: [{
-                type: Input,
-                args: [{ alias: 'rdxDialogConfig' }]
-            }] } });
+        }] });
 
-function injectDialogData() {
-    return inject(DIALOG_DATA);
+/**
+ * Connects a dialog root with trigger elements rendered elsewhere in the DOM, and exposes
+ * imperative `open`/`close`/`toggle` methods.
+ */
+class RdxDialogHandle {
+    constructor() {
+        this.rootContext = signal(undefined, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.triggers = new Map();
+        this.rootTriggerCleanups = new Map();
+        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    }
+    open(triggerId) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No dialog trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.open(trigger.element, trigger.payload(), triggerId, 'imperative-action', new Event('dialog.open'));
+    }
+    close() {
+        this.rootContext()?.close('imperative-action', new Event('dialog.close'));
+    }
+    toggle(triggerId, event = new Event('dialog.toggle')) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No dialog trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.toggle(triggerId, trigger.element, trigger.payload(), event);
+    }
+    registerRoot(rootContext) {
+        this.rootContext.set(rootContext);
+        this.triggers.forEach((trigger, id) => {
+            this.rootTriggerCleanups.set(id, rootContext.registerTrigger(id, trigger.element, trigger.payload));
+        });
+        return () => {
+            if (this.rootContext() === rootContext) {
+                this.rootTriggerCleanups.forEach((cleanup) => cleanup());
+                this.rootTriggerCleanups.clear();
+                this.rootContext.set(undefined);
+            }
+        };
+    }
+    registerTrigger(id, trigger, payload) {
+        this.rootTriggerCleanups.get(id)?.();
+        this.triggers.set(id, { element: trigger, payload });
+        const unregisterFromRoot = this.rootContext()?.registerTrigger(id, trigger, payload);
+        if (unregisterFromRoot) {
+            this.rootTriggerCleanups.set(id, unregisterFromRoot);
+        }
+        return () => {
+            this.rootTriggerCleanups.get(id)?.();
+            this.rootTriggerCleanups.delete(id);
+            if (this.triggers.get(id)?.element === trigger) {
+                this.triggers.delete(id);
+            }
+        };
+    }
+    context() {
+        return this.rootContext();
+    }
 }
-function injectDialogRef() {
-    return inject(RdxDialogRef);
+function createRdxDialogHandle() {
+    return new RdxDialogHandle();
 }
 
-const _imports = [
-    RdxDialogTriggerDirective,
-    RdxDialogContentDirective,
-    RdxDialogTitleDirective,
-    RdxDialogCloseDirective,
-    RdxDialogDescriptionDirective,
-    RdxDialogDismissDirective
+const dialogImports = [
+    RdxDialogRoot,
+    RdxDialogTrigger,
+    RdxDialogPortalPresence,
+    RdxDialogPortal,
+    RdxDialogBackdrop,
+    RdxDialogViewport,
+    RdxDialogPopup,
+    RdxDialogTitle,
+    RdxDialogDescription,
+    RdxDialogClose
 ];
 class RdxDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogModule, imports: [RdxDialogTriggerDirective,
-            RdxDialogContentDirective,
-            RdxDialogTitleDirective,
-            RdxDialogCloseDirective,
-            RdxDialogDescriptionDirective,
-            RdxDialogDismissDirective], exports: [RdxDialogTriggerDirective,
-            RdxDialogContentDirective,
-            RdxDialogTitleDirective,
-            RdxDialogCloseDirective,
-            RdxDialogDescriptionDirective,
-            RdxDialogDismissDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: 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,
+            RdxDialogBackdrop,
+            RdxDialogViewport,
+            RdxDialogPopup,
+            RdxDialogTitle,
+            RdxDialogDescription,
+            RdxDialogClose], exports: [RdxDialogRoot,
+            RdxDialogTrigger,
+            RdxDialogPortalPresence,
+            RdxDialogPortal,
+            RdxDialogBackdrop,
+            RdxDialogViewport,
+            RdxDialogPopup,
+            RdxDialogTitle,
+            RdxDialogDescription,
+            RdxDialogClose] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
+                    imports: [...dialogImports],
+                    exports: [...dialogImports]
                 }]
         }] });
 
@@ -425,5 +753,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DISMISSED_VALUE, RdxDialogCloseDirective, RdxDialogContentDirective, RdxDialogDescriptionDirective, RdxDialogDismissDirective, RdxDialogModule, RdxDialogRef, RdxDialogService, RdxDialogTitleDirective, RdxDialogTriggerDirective, getState, injectDialogData, injectDialogRef, provideRdxDialog, provideRdxDialogConfig };
+export { RDX_DIALOG_VARIANT, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, RdxDialogHandle, RdxDialogModule, RdxDialogPopup, RdxDialogPortal, RdxDialogPortalPresence, RdxDialogRoot, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, createRdxDialogHandle, dialogImports, injectRdxDialogRootContext, provideRdxDialogRootContext, provideRdxDialogVariant };
 //# sourceMappingURL=radix-ng-primitives-dialog.mjs.map