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

package/fesm2022/radix-ng-primitives-preview-card.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, signal, model, input, booleanAttribute, output, computed, effect, untracked, Directive, ElementRef, isDevMode, numberAttribute, afterNextRender, NgModule } from '@angular/core';
+import { inject, DestroyRef, ElementRef, signal, model, input, booleanAttribute, 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, 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 { 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, RdxFloatingNodeRegistration, rdxDevError, useGraceArea, rdxCheckTriggerElement } from '@radix-ng/primitives/core';
+import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
@@ -19,6 +18,15 @@ class RdxPreviewCardRoot {
     constructor() {
         this.popper = inject(RdxPopper);
         this.destroyRef = inject(DestroyRef);
+        /**
+         * Per-popup floating root context (ADR 0015) — the shared store the popup's dismissal capability
+         * reads (`open`, `triggers`, the reference/floating elements). The tree node is registered by the
+         * popup; this context exists independently so dismissal can read `open()`.
+         */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
         /** Shared open/close transition state machine (completes on the real animationend). */
         this.transition = useTransitionStatus((open) => {
             this.instant.set(false);
@@ -57,11 +65,13 @@ class RdxPreviewCardRoot {
         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 */ []));
+        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.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         let previousOpen = this.open();
         effect(() => {
             const defaultOpen = this.defaultOpen();
@@ -95,6 +105,14 @@ class RdxPreviewCardRoot {
             }
         });
         effect(() => this.popper.anchorOverride.set(this.trigger()));
+        // Sync the dismissal reference (the active trigger) so an outside-press on the trigger counts
+        // as "inside" and never dismisses (ADR 0015).
+        effect(() => this.floatingContext.setReferenceElement(this.trigger() ?? null));
+        effect(() => {
+            if (this.open() && this.preventUnmountOnClose()) {
+                this.preventUnmountOnClose.set(false);
+            }
+        });
         this.destroyRef.onDestroy(() => {
             this.clearHoverTimers();
             if (this.instantFrame !== undefined) {
@@ -104,10 +122,25 @@ class RdxPreviewCardRoot {
     }
     show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('preview-card.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();
@@ -122,22 +155,26 @@ class RdxPreviewCardRoot {
             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('preview-card.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.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();
@@ -177,6 +214,7 @@ class RdxPreviewCardRoot {
     registerTrigger(id, trigger, payload) {
         this.registeredTriggers.set(id, { element: trigger, payload });
         this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        this.floatingContext.triggers.add(trigger);
         if (this.triggerId() === id) {
             this.trigger.set(trigger);
             this.payload.set(payload());
@@ -190,6 +228,7 @@ class RdxPreviewCardRoot {
                 this.registeredTriggers.delete(id);
             }
             this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            this.floatingContext.triggers.delete(trigger);
             if (this.destroyRef.destroyed) {
                 return;
             }
@@ -235,14 +274,20 @@ class RdxPreviewCardRoot {
         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();
@@ -272,14 +317,22 @@ class RdxPreviewCardRoot {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardRoot, isStandalone: true, selector: "[rdxPreviewCardRoot]", 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 }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideRdxPreviewCardRootContext(context)], exportAs: ["rdxPreviewCardRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardRoot, isStandalone: true, selector: "[rdxPreviewCardRoot]", 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 }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [
+            provideRdxPreviewCardRootContext(context),
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxPreviewCardRoot).floatingContext)
+        ], exportAs: ["rdxPreviewCardRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPreviewCardRoot]',
                     exportAs: 'rdxPreviewCardRoot',
-                    providers: [provideRdxPreviewCardRootContext(context)],
+                    providers: [
+                        provideRdxPreviewCardRootContext(context),
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxPreviewCardRoot).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 }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
@@ -287,6 +340,7 @@ function contextFor(root) {
     return {
         contentId: root.contentId,
         isOpen: root.open.asReadonly(),
+        present: root.present,
         trigger: root.trigger.asReadonly(),
         triggers: root.triggers.asReadonly(),
         payload: root.payload.asReadonly(),
@@ -366,79 +420,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 /**
  * A container for the preview-card contents.
+ *
+ * **ADR 0015 migration** onto the new floating dismissal engine (dismissal-only — a preview-card has
+ * no focus manager, ADR 0017 §1). Escape, an outside press, and a focus-out all close it (the legacy's
+ * trigger-press preventDefault is now automatic: the trigger is the registered reference, so a press on
+ * it is "inside" and never fires `pointerDownOutside`). A focus-out while a pointer is held on the
+ * trigger is still vetoed.
  */
 class RdxPreviewCardPopup {
     constructor() {
         this.rootContext = injectRdxPreviewCardRootContext();
-        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.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('preview-card.dismiss')
-        };
         /**
          * Event handler called when the escape key is down. Can be prevented.
          */
-        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        this.escapeKeyDown = output();
         /**
          * Event handler called when a pointerdown event happens outside of the popup. Can be prevented.
          */
-        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.pointerDownOutside = output();
         /**
          * Event handler called when focus moves outside of the popup. Can be prevented.
          */
-        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
+        this.focusOutside = output();
         /**
          * Event handler called when an interaction happens outside of the popup. Can be prevented.
          */
-        this.interactOutside = outputFromObservable(outputToObservable(this.dismissableLayer.interactOutside));
-        const unregisterTransitionElement = this.rootContext.registerTransitionElement(inject(ElementRef).nativeElement);
-        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))) {
-                event.preventDefault();
-            }
-        });
-        this.dismissableLayer.focusOutside.subscribe((event) => {
-            this.dismissDetails = { reason: 'none', event };
-            if (this.rootContext.isPointerDownOnTrigger()) {
-                event.preventDefault();
+        this.interactOutside = output();
+        this.floatingContext.setFloatingElement(this.host);
+        const unregisterTransitionElement = this.rootContext.registerTransitionElement(this.host);
+        inject(DestroyRef).onDestroy(unregisterTransitionElement);
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => true,
+            outsidePress: () => true,
+            focusOutside: () => true,
+            onEscapeKeyDown: (event) => this.escapeKeyDown.emit(event),
+            onPointerDownOutside: (event) => {
+                this.pointerDownOutside.emit(event);
+                this.interactOutside.emit(event);
+            },
+            onFocusOutside: (event) => {
+                // A focus-out triggered by a pointer press still in flight on the trigger must not close
+                // the card (the toggle handles it) — veto it like the legacy did.
+                if (this.rootContext.isPointerDownOnTrigger()) {
+                    event.preventDefault();
+                }
+                this.focusOutside.emit(event);
+                this.interactOutside.emit(event);
+            },
+            onDismiss: (reason, event) => {
+                const mapped = reason === 'escape-key' ? 'escape-key' : reason === 'outside-press' ? 'outside-press' : 'none';
+                this.rootContext.close(mapped, event);
             }
         });
-        this.dismissableLayer.escapeKeyDown.subscribe((event) => {
-            this.dismissDetails = { reason: 'escape-key', event };
-        });
-        this.dismissableLayer.dismiss.subscribe(() => {
-            this.rootContext.close(this.dismissDetails.reason, this.dismissDetails.event);
-            this.dismissDetails = { reason: 'none', event: new Event('preview-card.dismiss') };
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPopup, isStandalone: true, selector: "[rdxPreviewCardPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside" }, host: { listeners: { "pointerenter": "rootContext.cancelHoverClose()" }, 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\"", "attr.data-align": "align()", "attr.data-side": "side()", "id": "rootContext.contentId" } }, providers: [
-            provideRdxDismissableLayerConfig(() => {
-                return {
-                    disableOutsidePointerEvents: signal(false)
-                };
-            })
-        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPopup, isStandalone: true, selector: "[rdxPreviewCardPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside" }, host: { listeners: { "pointerenter": "rootContext.cancelHoverClose()" }, 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\"", "attr.data-align": "align()", "attr.data-side": "side()", "id": "rootContext.contentId" } }, hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPreviewCardPopup]',
-                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
-                    providers: [
-                        provideRdxDismissableLayerConfig(() => {
-                            return {
-                                disableOutsidePointerEvents: signal(false)
-                            };
-                        })
-                    ],
+                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration],
                     host: {
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
@@ -465,7 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class RdxPreviewCardPortal {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPortal, isStandalone: true, selector: "ng-template[rdxPreviewCardPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxPreviewCardRootContext().isOpen }))], exportAs: ["rdxPreviewCardPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPortal, isStandalone: true, selector: "ng-template[rdxPreviewCardPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxPreviewCardRootContext().present }))], exportAs: ["rdxPreviewCardPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortal, decorators: [{
             type: Directive,
@@ -473,7 +521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'ng-template[rdxPreviewCardPortal]',
                     exportAs: 'rdxPreviewCardPortal',
                     hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
-                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxPreviewCardRootContext().isOpen }))]
+                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxPreviewCardRootContext().present }))]
                 }]
         }] });
 /**
@@ -484,9 +532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPreviewCardPortalMisuseGuard {
     constructor() {
         if (isDevMode()) {
-            throw new Error('[rdxPreviewCardPortal] is now a structural directive. ' +
+            rdxDevError('preview-card/portal-on-element', '`rdxPreviewCardPortal` is now a structural directive. ' +
                 'Use `*rdxPreviewCardPortal` on the positioner element or `<ng-template rdxPreviewCardPortal>`. ' +
-                'rdxPreviewCardPortalPresence has been removed. See https://radix-ng.com/components/preview-card.md');
+                'rdxPreviewCardPortalPresence has been removed.', 'components/preview-card');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -501,132 +549,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 /**
  * Positions the preview-card 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 preview-card's
+ * own concerns — Base UI-aligned defaults via the config provider, the open/closed/instant state
+ * attributes, the deprecated `--radix-preview-card-*` aliases, and the grace-area hover bridge.
  */
-class RdxPreviewCardPositioner {
+class RdxPreviewCardPositioner extends RdxPopperContentWrapper {
     constructor() {
+        super();
         this.rootContext = injectRdxPreviewCardRootContext();
-        this.wrapper = inject(RdxPopperContentWrapper);
-        this.elementRef = inject(ElementRef);
+        this.legacyVars = legacyPopperVars('preview-card');
+        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: RdxPreviewCardPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardPositioner, isStandalone: true, selector: "[rdxPreviewCardPositioner]", 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-preview-card-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-preview-card-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-preview-card-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-preview-card-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-preview-card-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPositioner, isStandalone: true, selector: "[rdxPreviewCardPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style": "legacyVars" } }, providers: [
+            ...provideRdxPopperContentWrapper(RdxPreviewCardPositioner),
             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: RdxPreviewCardPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPreviewCardPositioner]',
                     providers: [
+                        ...provideRdxPopperContentWrapper(RdxPreviewCardPositioner),
                         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-preview-card-content-transform-origin': 'var(--radix-popper-transform-origin)',
-            '--radix-preview-card-content-available-width': 'var(--radix-popper-available-width)',
-            '--radix-preview-card-content-available-height': 'var(--radix-popper-available-height)',
-            '--radix-preview-card-trigger-width': 'var(--radix-popper-anchor-width)',
-            '--radix-preview-card-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-preview-card-*` 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: () => [] });
 
 /**
  * A link or element that opens the preview card.
@@ -664,6 +631,7 @@ class RdxPreviewCardTrigger {
         this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.isPressed = computed(() => this.isOpen() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
         this.generatedId = injectId('rdx-preview-card-trigger-');
+        rdxCheckTriggerElement('rdxPreviewCardTrigger', 'preview-card/trigger-element', 'components/preview-card');
         effect((onCleanup) => {
             const handle = this.handle();
             if (handle) {