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

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

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, inject, DestroyRef, signal, model, input, output, computed, effect, untracked, Directive, ElementRef, numberAttribute, afterNextRender, NgModule } from '@angular/core';
+import { booleanAttribute, inject, DestroyRef, ElementRef, signal, model, input, output, computed, effect, untracked, Directive, isDevMode, numberAttribute, afterNextRender, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
-import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { createContext, useTransitionStatus, injectId, useScrollLock, useGraceArea } from '@radix-ng/primitives/core';
+import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import * as i2 from '@radix-ng/primitives/core';
+import { createContext, createFloatingRootContext, useTransitionStatus, injectId, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError, useGraceArea } from '@radix-ng/primitives/core';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import * as i2 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
-import * as i3 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 i3 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 transformModal = (value) => value === 'trap-focus' ? value : booleanAttribute(value);
 const context = () => contextFor(inject(RdxPopoverRoot));
@@ -23,6 +23,11 @@ class RdxPopoverRoot {
     constructor() {
         this.popper = inject(RdxPopper);
         this.destroyRef = inject(DestroyRef);
+        /** Shared per-popup floating context (ADR 0015 §1): `open`, trigger registry, reference / floating els. */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
         this.hasAppliedDefaultOpen = false;
         this.hasAppliedDefaultTriggerId = false;
         this.hoverDelay = 300;
@@ -66,45 +71,60 @@ class RdxPopoverRoot {
         this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
         this.payload = signal(undefined, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
         this.isPointerDownOnTrigger = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDownOnTrigger" }] : /* istanbul ignore next */ []));
+        /** Whether the current open was initiated by touch (ADR 0016 §3 — gates the anchored scroll lock). */
+        this.openedByTouch = signal(false, ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
         this.popupCloseCount = signal(0, ...(ngDevMode ? [{ debugName: "popupCloseCount" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
         this.onOpenChange = output();
         this.onOpenChangeComplete = output();
         this.registeredTriggers = new Map();
         this.viewportTriggerChange = new Set();
-        this.state = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.state = computed(() => (this.open() ? 'open' : 'closed'), { debugName: 'RdxPopoverRoot.state' });
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), {
+            debugName: 'RdxPopoverRoot.present'
+        });
         let previousOpen = 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);
+            }
+        }, { debugName: 'RdxPopoverRoot.clearPreventUnmountOnOpen' });
         effect(() => {
             const defaultOpen = this.defaultOpen();
             if (!this.hasAppliedDefaultOpen && defaultOpen) {
                 this.hasAppliedDefaultOpen = true;
                 this.open.set(defaultOpen);
             }
-        });
+        }, { debugName: 'RdxPopoverRoot.applyDefaultOpen' });
         effect(() => {
             const defaultTriggerId = this.defaultTriggerId();
             if (!this.hasAppliedDefaultTriggerId && defaultTriggerId !== null) {
                 this.hasAppliedDefaultTriggerId = true;
                 this.triggerId.set(defaultTriggerId);
             }
-        });
+        }, { debugName: 'RdxPopoverRoot.applyDefaultTriggerId' });
         effect(() => {
             const triggerId = this.triggerId();
             untracked(() => this.syncTriggerId(triggerId));
-        });
+        }, { debugName: 'RdxPopoverRoot.syncTriggerId' });
         effect(() => {
             const open = this.open();
             if (open !== previousOpen) {
                 previousOpen = open;
                 untracked(() => this.transition.start(open));
             }
-        });
+        }, { debugName: 'RdxPopoverRoot.startTransition' });
         effect((onCleanup) => {
             const handle = this.handle();
             if (handle) {
                 onCleanup(untracked(() => handle.registerRoot(contextFor(this))));
             }
+        }, { debugName: 'RdxPopoverRoot.registerHandle' });
+        effect(() => this.popper.anchorOverride.set(this.trigger()), {
+            debugName: 'RdxPopoverRoot.syncAnchorOverride'
         });
-        effect(() => this.popper.anchorOverride.set(this.trigger()));
         this.destroyRef.onDestroy(() => {
             this.clearHoverTimers();
             if (this.instantFrame !== undefined) {
@@ -114,10 +134,25 @@ class RdxPopoverRoot {
     }
     show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('popover.open-change'), fromHover = false) {
         this.clearHoverTimers();
-        this.isHoverActive.set(fromHover);
-        this.openChangeReason.set(reason);
         const previousTrigger = this.trigger();
         const changedTriggerWhileOpen = this.open() && previousTrigger !== trigger;
+        const changed = !this.open() || previousTrigger !== trigger;
+        if (!changed) {
+            this.isHoverActive.set(fromHover);
+            this.openChangeReason.set(reason);
+            if (triggerId !== undefined) {
+                this.triggerId.set(triggerId);
+            }
+            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;
+        }
+        this.isHoverActive.set(fromHover);
+        this.openChangeReason.set(reason);
         this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
         if (changedTriggerWhileOpen) {
             this.scheduleInstantReset();
@@ -132,22 +167,27 @@ class RdxPopoverRoot {
             this.triggerId.set(triggerId);
         }
         this.payload.set(payload);
-        const changed = !this.open() || previousTrigger !== trigger;
+        this.preventUnmountOnClose.set(false);
         this.open.set(true);
-        if (changed) {
-            this.emitOpenChange(true, reason, event);
-        }
+        this.floatingContext.events.emit('openchange', { open: true, reason, event: change.eventDetails.event });
     }
     close(reason = 'none', event = new Event('popover.open-change')) {
         this.clearHoverTimers();
-        this.isHoverActive.set(false);
         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.isHoverActive.set(false);
+        this.openedByTouch.set(false);
         this.instant.set(reason !== 'none' && reason !== 'trigger-hover');
         this.openChangeReason.set(reason);
+        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) {
         this.clearHoverTimers();
@@ -187,6 +227,8 @@ class RdxPopoverRoot {
     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 (new dismissal/focus inside-element checks).
+        this.floatingContext.triggers.add(trigger);
         if (this.triggerId() === id) {
             this.trigger.set(trigger);
             this.payload.set(payload());
@@ -200,6 +242,7 @@ class RdxPopoverRoot {
                 this.registeredTriggers.delete(id);
             }
             this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            this.floatingContext.triggers.delete(trigger);
             if (this.destroyRef.destroyed) {
                 return;
             }
@@ -245,14 +288,20 @@ class RdxPopoverRoot {
         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
-        });
+    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
+            }
+        };
     }
     clearHoverTimers() {
         this.clearOpenTimer();
@@ -282,14 +331,26 @@ class RdxPopoverRoot {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverRoot, isStandalone: true, selector: "[rdxPopoverRoot]", 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 }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideRdxPopoverRootContext(context)], exportAs: ["rdxPopoverRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverRoot, isStandalone: true, selector: "[rdxPopoverRoot]", 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 }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+            provideRdxPopoverRootContext(context),
+            // New floating foundation (ADR 0015/0017 migration). Inherit-or-create tree (nested sharing);
+            // the per-popup root context bridges open / triggers / reference.
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxPopoverRoot).floatingContext)
+        ], exportAs: ["rdxPopoverRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverRoot]',
                     exportAs: 'rdxPopoverRoot',
-                    providers: [provideRdxPopoverRootContext(context)],
+                    providers: [
+                        provideRdxPopoverRootContext(context),
+                        // New floating foundation (ADR 0015/0017 migration). Inherit-or-create tree (nested sharing);
+                        // the per-popup root context bridges open / triggers / reference.
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxPopoverRoot).floatingContext)
+                    ],
                     hostDirectives: [RdxPopper]
                 }]
         }], 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 }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
@@ -298,6 +359,7 @@ function contextFor(root) {
         contentId: root.contentId,
         descriptionId: root.descriptionId.asReadonly(),
         isOpen: root.open,
+        present: root.present,
         modal: root.modal,
         titleId: root.titleId.asReadonly(),
         trigger: root.trigger.asReadonly(),
@@ -308,6 +370,7 @@ function contextFor(root) {
         instant: root.instant.asReadonly(),
         openChangeReason: root.openChangeReason.asReadonly(),
         isPointerDownOnTrigger: root.isPointerDownOnTrigger.asReadonly(),
+        openedByTouch: root.openedByTouch.asReadonly(),
         close: (reason, event) => root.close(reason, event),
         cancelHoverClose: () => root.cancelHoverClose(),
         cancelHoverOpen: () => root.cancelHoverOpen(),
@@ -318,6 +381,7 @@ function contextFor(root) {
         setDescriptionId: (id) => root.descriptionId.set(id),
         setTitleId: (id) => root.titleId.set(id),
         setPointerDownOnTrigger: (pointerDown) => root.isPointerDownOnTrigger.set(pointerDown),
+        setOpenedByTouch: (value) => root.openedByTouch.set(value),
         setHoverDelays: (delay, closeDelay) => root.setHoverDelays(delay, closeDelay),
         registerPopupClose: () => {
             root.popupCloseCount.update((count) => count + 1);
@@ -365,6 +429,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverBackdrop {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
+        // Register the backdrop as owned DOM footprint for primitive-specific checks. The focus manager's
+        // marker keep-set stays narrow and does not keep sibling backdrop roots.
+        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: RdxPopoverBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverBackdrop, isStandalone: true, selector: "[rdxPopoverBackdrop]", host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, ngImport: i0 }); }
@@ -382,109 +454,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * A container for the popover contents.
+ *
+ * **ADR 0015/0017 Phase-4 migration** onto the new floating dismissal + focus engine (same pattern as
+ * Dialog; browser-verified via `popover.behavior` Playwright). Popover-specific:
+ * - **Hover-open disables the manager** (`enabled = isOpen && !isHoverActive`) — Base UI parity
+ *   (`disabled={!mounted || openReason === triggerHover}`); a hover-opened popover does not trap / mark.
+ *   (The legacy only suppressed auto-focus while still trapping — that Radix divergence is dropped.)
+ * - Trap = `'trap-focus' || (modal === true && hasPopupClose())`; scroll lock + real outside `inert`
+ *   isolation key off the full modal (`modal === true`).
+ * - No `disablePointerDismissal` — outside-press + focus-out always close.
+ *
+ * Note: a positioned popover does **not** auto-focus into the popup on open (pre-existing — the legacy
+ * behaved the same; verified). The trap holds focus once it is inside. Auto-focus-on-open + redirecting a
+ * Tab from the trigger into the popup needs the deferred portal-focus bridge / guards (ADR 0017 §6a).
  */
 class RdxPopoverPopup {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
-        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.wrapper = inject(RdxPopperContentWrapper, { optional: true });
         this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
         this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.dismissDetails = {
-            reason: 'none',
-            event: new Event('popover.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));
-        const unregisterTransitionElement = this.rootContext.registerTransitionElement(inject(ElementRef).nativeElement);
+        this.floatingContext.setFloatingElement(this.host);
+        // Background pointer/AT isolation for a full modal is the focus manager's `inert` pass (finding
+        // #4), not a global body lock; only the page scroll lock stays here. Activation policy (ADR 0016
+        // §2): lock only while a `modal === true` popover is OPEN and was **not** hover-opened, gated on
+        // `open` (not mounted) so it releases at close-start. For a **touch** open the anchored helper only
+        // locks when the popup is effectively viewport-width (a small popover stays swipe-to-dismissable on
+        // mobile, §3).
+        useAnchoredScrollLock(computed(() => this.rootContext.isOpen() && this.rootContext.modal() === true && !this.rootContext.isHoverActive()), {
+            touchOpen: () => this.rootContext.openedByTouch(),
+            element: () => this.host
+        });
+        const unregisterTransitionElement = this.rootContext.registerTransitionElement(this.host);
         inject(DestroyRef).onDestroy(unregisterTransitionElement);
-        this.dismissableLayer.pointerDownOutside.subscribe((event) => {
-            this.dismissDetails = { reason: 'outside-press', event };
-            if (this.rootContext.triggers().some((trigger) => trigger.contains(event.target))) {
+        // A hover-opened popover must not steal focus — suppress the composed focus scope's auto-focus.
+        this.focusScope.mountAutoFocus.subscribe((event) => {
+            if (this.rootContext.isHoverActive()) {
                 event.preventDefault();
             }
         });
-        this.dismissableLayer.focusOutside.subscribe((event) => {
-            this.dismissDetails = { reason: 'focus-out', event };
-            if (this.rootContext.isPointerDownOnTrigger()) {
-                event.preventDefault();
+        // Dismissal: Escape + outside-press always close (no pointer-dismissal opt-out). Focus-out is
+        // owned by the focus manager (below), so the capability's own focus-out is disabled.
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => true,
+            outsidePress: () => true,
+            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.focusScope.mountAutoFocus.subscribe((event) => {
-            if (this.rootContext.isHoverActive()) {
-                event.preventDefault();
+        // Focus-out close (ADR 0017 §3) — 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.dismissableLayer.dismiss.subscribe(() => {
-            this.rootContext.close(this.dismissDetails.reason, this.dismissDetails.event);
-            this.dismissDetails = { reason: 'none', event: new Event('popover.dismiss') };
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPopup, isStandalone: true, selector: "[rdxPopoverPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()" }, properties: { "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-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-align": "align()", "attr.data-side": "side()", "id": "rootContext.contentId" } }, providers: [
-            provideRdxDismissableLayerConfig(() => {
-                const rootContext = injectRdxPopoverRootContext();
-                return {
-                    disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
-                };
-            }),
-            provideRdxFocusScopeConfig(() => {
+            provideFloatingFocusManagerConfig(() => {
                 const rootContext = injectRdxPopoverRootContext();
                 return {
-                    trapped: computed(() => rootContext.modal() === 'trap-focus' ||
-                        (rootContext.modal() === true && rootContext.hasPopupClose()))
+                    modal: () => rootContext.modal() === 'trap-focus' ||
+                        (rootContext.modal() === true && rootContext.hasPopupClose()),
+                    // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
+                    inert: () => rootContext.modal() === true && rootContext.hasPopupClose(),
+                    // Active for the whole MOUNTED lifetime (Base UI `disabled={!mounted}`, not `open`) for
+                    // trap/return-focus — including an explicit `preventUnmountOnClose()` cycle after the
+                    // exit transition. Marker + isolation are additionally gated on `open` inside the
+                    // manager. Still suppressed while hover-opened.
+                    enabled: () => rootContext.present() && !rootContext.isHoverActive()
                 };
             })
-        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }, { directive: i3.RdxFocusScope }], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPopup]',
-                    hostDirectives: [RdxPopperContent, RdxDismissableLayer, RdxFocusScope],
+                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager],
                     providers: [
-                        provideRdxDismissableLayerConfig(() => {
-                            const rootContext = injectRdxPopoverRootContext();
-                            return {
-                                disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
-                            };
-                        }),
-                        provideRdxFocusScopeConfig(() => {
+                        provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxPopoverRootContext();
                             return {
-                                trapped: computed(() => rootContext.modal() === 'trap-focus' ||
-                                    (rootContext.modal() === true && rootContext.hasPopupClose()))
+                                modal: () => rootContext.modal() === 'trap-focus' ||
+                                    (rootContext.modal() === true && rootContext.hasPopupClose()),
+                                // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
+                                inert: () => rootContext.modal() === true && rootContext.hasPopupClose(),
+                                // Active for the whole MOUNTED lifetime (Base UI `disabled={!mounted}`, not `open`) for
+                                // trap/return-focus — including an explicit `preventUnmountOnClose()` cycle after the
+                                // exit transition. Marker + isolation are additionally gated on `open` inside the
+                                // manager. Still suppressed while hover-opened.
+                                enabled: () => rootContext.present() && !rootContext.isHoverActive()
                             };
                         })
                     ],
@@ -555,191 +644,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Moves the popover to a different part of the DOM.
+ * Structural directive that teleports the popover content into a container (default `document.body`)
+ * while the popover is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
+ *
+ * Apply it with the `*` microsyntax on the positioner — `<div *rdxPopoverPortal rdxPopoverPositioner>`
+ * — or as an explicit `<ng-template rdxPopoverPortal>`. For a custom container use the explicit form
+ * with `[container]`.
  */
 class RdxPopoverPortal {
-    constructor() {
-        this.rootContext = injectRdxPopoverRootContext();
-        /**
-         * 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: RdxPopoverPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverPortal, isStandalone: true, selector: "[rdxPopoverPortal]", 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\"" } }, hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortal, isStandalone: true, selector: "ng-template[rdxPopoverPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxPopoverRootContext().present }))], exportAs: ["rdxPopoverPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverPortal]',
-                    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"'
-                    }
+                    selector: 'ng-template[rdxPopoverPortal]',
+                    exportAs: 'rdxPopoverPortal',
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxPopoverRootContext().present }))]
                 }]
-        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
-
+        }] });
 /**
- * Mounts the portal while the popover is open and waits for CSS exit keyframes before unmounting.
+ * Dev-mode guard: `rdxPopoverPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxPopoverPortal>` markup would silently stop portaling — fail loudly
+ * instead.
  */
-class RdxPopoverPortalPresence {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortalPresence, isStandalone: true, selector: "ng-template[rdxPopoverPortalPresence]", providers: [
-            provideRdxPresenceContext(() => {
-                const context = injectRdxPopoverRootContext();
-                return { present: context.isOpen };
-            })
-        ], hostDirectives: [{ directive: i1$2.RdxPresenceDirective }], ngImport: i0 }); }
+class RdxPopoverPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            rdxDevError('popover/portal-on-element', '`rdxPopoverPortal` is now a structural directive. ' +
+                'Use `*rdxPopoverPortal` on the positioner element or `<ng-template rdxPopoverPortal>`. ' +
+                'rdxPopoverPortalPresence has been removed.', 'components/popover');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortalMisuseGuard, isStandalone: true, selector: "[rdxPopoverPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxPopoverPortalPresence]',
-                    hostDirectives: [RdxPresenceDirective],
-                    providers: [
-                        provideRdxPresenceContext(() => {
-                            const context = injectRdxPopoverRootContext();
-                            return { present: context.isOpen };
-                        })
-                    ]
+                    selector: '[rdxPopoverPortal]:not(ng-template)'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Positions the popover against its trigger.
+ *
+ * A "thin" positioner (ADR 0012): it inherits the popper positioning surface (inputs, `placed`
+ * output, unified vars + placement attrs) from {@link RdxPopperContentWrapper} and adds popover's own
+ * concerns — Base UI-aligned defaults via the config provider, the open/closed/instant state
+ * attributes, the deprecated `--radix-popover-*` aliases, and the grace-area hover bridge.
  */
-class RdxPopoverPositioner {
+class RdxPopoverPositioner extends RdxPopperContentWrapper {
     constructor() {
+        super();
         this.rootContext = injectRdxPopoverRootContext();
-        this.wrapper = inject(RdxPopperContentWrapper);
-        this.elementRef = inject(ElementRef);
+        this.legacyVars = legacyPopperVars('popover');
+        this.containerRef = inject(ElementRef);
         this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
-        this.containerEl = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(this.containerRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
         this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
-        /**
-         * An element to position the popup against. Defaults to the trigger.
-         */
-        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
-        /**
-         * The preferred side of the trigger to render against when open.
-         */
-        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        /**
-         * Distance between the trigger and the popup in pixels.
-         */
-        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * How to align the popup relative to the specified side.
-         */
-        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        /**
-         * An offset in pixels from the `start` or `end` alignment options.
-         */
-        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Minimum distance to maintain between the arrow and the edges of the popup.
-         */
-        this.arrowPadding = input(5, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Whether to override side and alignment preferences to prevent collisions.
-         */
-        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * The element used as the collision boundary.
-         */
-        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
-        /**
-         * Distance in pixels from the boundary edges where collision detection should occur.
-         */
-        this.collisionPadding = input(5, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
-        /**
-         * The sticky behavior on the alignment axis.
-         */
-        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to hide the popup when the trigger becomes fully occluded.
-         */
-        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * The CSS position strategy used by Floating UI.
-         */
-        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to update position on every animation frame.
-         */
-        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
-        /**
-         * Emits when the popup has been placed.
-         */
-        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
         effect(() => this.triggerEl.set(this.rootContext.trigger() ?? null));
         this.graceArea.onPointerExit(() => {
             this.rootContext.closeOnHover();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverPositioner, isStandalone: true, selector: "[rdxPopoverPositioner]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-anchor-hidden": "wrapper.anchorHidden() ? \"\" : undefined", "attr.data-align": "wrapper.placedAlign()", "attr.data-side": "wrapper.placedSide()", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style": "{\n            '--anchor-width': 'var(--radix-popper-anchor-width)',\n            '--anchor-height': 'var(--radix-popper-anchor-height)',\n            '--available-width': 'var(--radix-popper-available-width)',\n            '--available-height': 'var(--radix-popper-available-height)',\n            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',\n            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',\n            '--transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPositioner, isStandalone: true, selector: "[rdxPopoverPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style": "legacyVars" } }, providers: [
+            ...provideRdxPopperContentWrapper(RdxPopoverPositioner),
             provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
-        ], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["anchor", "anchor", "side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "positionStrategy", "positionStrategy", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+        ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPositioner]',
                     providers: [
+                        ...provideRdxPopperContentWrapper(RdxPopoverPositioner),
                         provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
                     ],
-                    hostDirectives: [
-                        {
-                            directive: RdxPopperContentWrapper,
-                            inputs: [
-                                'anchor',
-                                'side',
-                                'sideOffset',
-                                'align',
-                                'alignOffset',
-                                'arrowPadding',
-                                'avoidCollisions',
-                                'collisionBoundary',
-                                'collisionPadding',
-                                'sticky',
-                                'hideWhenDetached',
-                                'positionStrategy',
-                                'updatePositionStrategy'
-                            ]
-                        }
-                    ],
                     host: {
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-anchor-hidden]': 'wrapper.anchorHidden() ? "" : undefined',
-                        '[attr.data-align]': 'wrapper.placedAlign()',
-                        '[attr.data-side]': 'wrapper.placedSide()',
                         '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
-                        '[style]': `{
-            '--anchor-width': 'var(--radix-popper-anchor-width)',
-            '--anchor-height': 'var(--radix-popper-anchor-height)',
-            '--available-width': 'var(--radix-popper-available-width)',
-            '--available-height': 'var(--radix-popper-available-height)',
-            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',
-            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',
-            '--transform-origin': 'var(--radix-popper-transform-origin)',
-            '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
-            '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',
-            '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',
-            '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',
-            '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'
-        }`
+                        // `data-side`/`data-align`/`data-anchor-hidden` and the unified `--anchor-*`/`--available-*`/
+                        // `--transform-origin` vars come from the inherited wrapper (ADR 0012); only the deprecated
+                        // `--radix-popover-*` aliases remain, for one release of back-compat.
+                        '[style]': 'legacyVars'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * An accessible title for the popover.
@@ -771,6 +765,8 @@ class RdxPopoverTrigger {
     constructor() {
         this.parentRootContext = injectRdxPopoverRootContext(true);
         this.elementRef = inject(ElementRef);
+        /** Pointer type of the most recent `pointerdown`, used to detect a touch open (ADR 0016 §3). */
+        this.lastPointerType = '';
         /**
          * Associates this trigger with a detached popover root.
          */
@@ -818,6 +814,9 @@ class RdxPopoverTrigger {
         if (this.disabled()) {
             return;
         }
+        // Record whether this open is a touch tap (ADR 0016 §3). `detail === 0` is a keyboard-activated
+        // click (no preceding pointerdown), which must read non-touch regardless of the last pointer type.
+        this.rootContext()?.setOpenedByTouch(event.detail !== 0 && this.lastPointerType === 'touch');
         this.rootContext()?.setPointerDownOnTrigger(false);
         if (this.handle()) {
             this.handle().toggle(this.triggerId(), event);
@@ -840,14 +839,15 @@ class RdxPopoverTrigger {
         }
         this.rootContext()?.cancelHoverOpen();
     }
-    handlePointerDown() {
+    handlePointerDown(event) {
+        this.lastPointerType = event.pointerType;
         this.rootContext()?.setPointerDownOnTrigger(true);
     }
     handlePointerUp() {
         this.rootContext()?.setPointerDownOnTrigger(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTrigger, isStandalone: true, selector: "button[rdxPopoverTrigger]", 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 }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointerleave": "handlePointerLeave($event)", "pointerdown": "handlePointerDown()", "pointerup": "handlePointerUp()", "pointercancel": "handlePointerUp()" }, properties: { "attr.aria-controls": "rootContext()?.contentId", "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.data-pressed": "isPressed() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "id": "triggerId()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTrigger, isStandalone: true, selector: "button[rdxPopoverTrigger]", 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 }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointerleave": "handlePointerLeave($event)", "pointerdown": "handlePointerDown($event)", "pointerup": "handlePointerUp()", "pointercancel": "handlePointerUp()" }, properties: { "attr.aria-controls": "rootContext()?.contentId", "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.data-pressed": "isPressed() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "id": "triggerId()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTrigger, decorators: [{
             type: Directive,
@@ -867,7 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(click)': 'handleClick($event)',
                         '(pointerenter)': 'handlePointerEnter($event)',
                         '(pointerleave)': 'handlePointerLeave($event)',
-                        '(pointerdown)': 'handlePointerDown()',
+                        '(pointerdown)': 'handlePointerDown($event)',
                         '(pointerup)': 'handlePointerUp()',
                         '(pointercancel)': 'handlePointerUp()'
                     }
@@ -1070,8 +1070,8 @@ function createRdxPopoverHandle() {
 const popoverImports = [
     RdxPopoverRoot,
     RdxPopoverTrigger,
-    RdxPopoverPortalPresence,
     RdxPopoverPortal,
+    RdxPopoverPortalMisuseGuard,
     RdxPopoverBackdrop,
     RdxPopoverPositioner,
     RdxPopoverPopup,
@@ -1085,8 +1085,8 @@ class RdxPopoverModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverRoot,
             RdxPopoverTrigger,
-            RdxPopoverPortalPresence,
             RdxPopoverPortal,
+            RdxPopoverPortalMisuseGuard,
             RdxPopoverBackdrop,
             RdxPopoverPositioner,
             RdxPopoverPopup,
@@ -1096,8 +1096,8 @@ class RdxPopoverModule {
             RdxPopoverClose,
             RdxPopoverViewport], exports: [RdxPopoverRoot,
             RdxPopoverTrigger,
-            RdxPopoverPortalPresence,
             RdxPopoverPortal,
+            RdxPopoverPortalMisuseGuard,
             RdxPopoverBackdrop,
             RdxPopoverPositioner,
             RdxPopoverPopup,
@@ -1120,5 +1120,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalPresence, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
+export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalMisuseGuard, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
 //# sourceMappingURL=radix-ng-primitives-popover.mjs.map