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

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

@@ -4,10 +4,10 @@ import * as i1 from '@radix-ng/primitives/popper';
 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 * as i3 from '@radix-ng/primitives/floating-focus-manager';
+import { getInteractionTypeFromEvent, RdxFloatingFocusManager, provideFloatingFocusManagerConfig, createRdxTriggerInteraction, useTriggerFocusGuards } from '@radix-ng/primitives/floating-focus-manager';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 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 { RdxPortalPresence } from '@radix-ng/primitives/portal';
@@ -65,6 +65,7 @@ class RdxPopoverRoot {
          */
         this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         this.contentId = injectId('rdx-popover-content-');
+        this.beforeContentFocusGuard = signal(null, ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
         this.descriptionId = signal(undefined, ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
         this.titleId = signal(undefined, ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
         this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
@@ -73,8 +74,11 @@ class RdxPopoverRoot {
         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.openInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
+        this.closeInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
         this.popupCloseCount = signal(0, ...(ngDevMode ? [{ debugName: "popupCloseCount" }] : /* istanbul ignore next */ []));
         this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.pendingTriggerOpenInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "pendingTriggerOpenInteractionType" }] : /* istanbul ignore next */ []));
         this.onOpenChange = output();
         this.onOpenChangeComplete = output();
         this.registeredTriggers = new Map();
@@ -132,7 +136,7 @@ class RdxPopoverRoot {
             }
         });
     }
-    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('popover.open-change'), fromHover = false) {
+    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event, fromHover = false) {
         this.clearHoverTimers();
         const previousTrigger = this.trigger();
         const changedTriggerWhileOpen = this.open() && previousTrigger !== trigger;
@@ -146,11 +150,15 @@ class RdxPopoverRoot {
             this.payload.set(payload);
             return;
         }
-        const change = this.createOpenChangeEvent(true, reason, event, trigger, triggerId ?? this.triggerId());
+        const resolvedEvent = event ?? new Event('popover.open-change');
+        const change = this.createOpenChangeEvent(true, reason, resolvedEvent, trigger, triggerId ?? this.triggerId());
         this.onOpenChange.emit(change.payload);
         if (change.eventDetails.isCanceled()) {
             return;
         }
+        const interactionType = this.consumeOpenInteractionType(event);
+        this.openInteractionType.set(interactionType);
+        this.openedByTouch.set(interactionType === 'touch');
         this.isHoverActive.set(fromHover);
         this.openChangeReason.set(reason);
         this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
@@ -171,16 +179,19 @@ class RdxPopoverRoot {
         this.open.set(true);
         this.floatingContext.events.emit('openchange', { open: true, reason, event: change.eventDetails.event });
     }
-    close(reason = 'none', event = new Event('popover.open-change')) {
+    close(reason = 'none', event) {
         this.clearHoverTimers();
         if (!this.open()) {
             return;
         }
-        const change = this.createOpenChangeEvent(false, reason, event, this.trigger(), this.triggerId());
+        const resolvedEvent = event ?? new Event('popover.open-change');
+        const change = this.createOpenChangeEvent(false, reason, resolvedEvent, this.trigger(), this.triggerId());
         this.onOpenChange.emit(change.payload);
         if (change.eventDetails.isCanceled()) {
             return;
         }
+        this.pendingTriggerOpenInteractionType.set(null);
+        this.closeInteractionType.set(getInteractionTypeFromEvent(event));
         this.isHoverActive.set(false);
         this.openedByTouch.set(false);
         this.instant.set(reason !== 'none' && reason !== 'trigger-hover');
@@ -224,6 +235,9 @@ class RdxPopoverRoot {
         this.hoverDelay = delay;
         this.hoverCloseDelay = closeDelay;
     }
+    setTriggerOpenInteractionType(type) {
+        this.pendingTriggerOpenInteractionType.set(type);
+    }
     registerTrigger(id, trigger, payload) {
         this.registeredTriggers.set(id, { element: trigger, payload });
         this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
@@ -263,6 +277,9 @@ class RdxPopoverRoot {
         this.viewportTriggerChange.add(onTriggerChange);
         return () => this.viewportTriggerChange.delete(onTriggerChange);
     }
+    setBeforeContentFocusGuard(element) {
+        this.beforeContentFocusGuard.set(element);
+    }
     registerTransitionElement(element) {
         return this.transition.registerElement(element);
     }
@@ -330,6 +347,11 @@ class RdxPopoverRoot {
             }
         });
     }
+    consumeOpenInteractionType(event) {
+        const pending = this.pendingTriggerOpenInteractionType();
+        this.pendingTriggerOpenInteractionType.set(null);
+        return pending ?? getInteractionTypeFromEvent(event);
+    }
     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),
@@ -371,6 +393,8 @@ function contextFor(root) {
         openChangeReason: root.openChangeReason.asReadonly(),
         isPointerDownOnTrigger: root.isPointerDownOnTrigger.asReadonly(),
         openedByTouch: root.openedByTouch.asReadonly(),
+        openInteractionType: root.openInteractionType.asReadonly(),
+        closeInteractionType: root.closeInteractionType.asReadonly(),
         close: (reason, event) => root.close(reason, event),
         cancelHoverClose: () => root.cancelHoverClose(),
         cancelHoverOpen: () => root.cancelHoverOpen(),
@@ -382,6 +406,7 @@ function contextFor(root) {
         setTitleId: (id) => root.titleId.set(id),
         setPointerDownOnTrigger: (pointerDown) => root.isPointerDownOnTrigger.set(pointerDown),
         setOpenedByTouch: (value) => root.openedByTouch.set(value),
+        setTriggerOpenInteractionType: (type) => root.setTriggerOpenInteractionType(type),
         setHoverDelays: (delay, closeDelay) => root.setHoverDelays(delay, closeDelay),
         registerPopupClose: () => {
             root.popupCloseCount.update((count) => count + 1);
@@ -389,7 +414,9 @@ function contextFor(root) {
         },
         registerTransitionElement: (element) => root.registerTransitionElement(element),
         transitionStatus: root.transitionStatus,
+        beforeContentFocusGuard: root.beforeContentFocusGuard.asReadonly(),
         registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange),
+        setBeforeContentFocusGuard: (element) => root.setBeforeContentFocusGuard(element),
         toggle: (triggerId, trigger, payload, event) => root.toggle(triggerId, trigger, payload, event)
     };
 }
@@ -429,29 +456,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverBackdrop {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
+        const host = inject(ElementRef).nativeElement;
+        host.style.setProperty('-webkit-user-select', 'none');
         // 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverBackdrop, isStandalone: true, selector: "[rdxPopoverBackdrop]", host: { attributes: { "role": "presentation" }, 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\"", "style.pointer-events": "rootContext.openChangeReason() === \"trigger-hover\" ? \"none\" : null", "style.user-select": "\"none\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverBackdrop]',
                     host: {
+                        role: 'presentation',
                         '[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-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[style.pointer-events]': 'rootContext.openChangeReason() === "trigger-hover" ? "none" : null',
+                        '[style.user-select]': '"none"'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -469,8 +500,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * - 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).
+ * behaved the same; verified). The trap holds focus once it is inside; portal tab-order handoff is owned
+ * by `RdxFloatingFocusManager` and anchored to the active trigger below.
  */
 class RdxPopoverPopup {
     constructor() {
@@ -547,20 +578,29 @@ class RdxPopoverPopup {
                         (rootContext.modal() === true && rootContext.hasPopupClose()),
                     // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
                     inert: () => rootContext.modal() === true && rootContext.hasPopupClose(),
+                    restoreFocus: () => 'popup',
+                    previousFocusableElement: () => rootContext.trigger() ?? null,
+                    beforeContentFocusGuardRef: () => (element) => rootContext.setBeforeContentFocusGuard(element),
                     // 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()
+                    enabled: () => rootContext.present() && !rootContext.isHoverActive(),
+                    openInteractionType: () => rootContext.openInteractionType(),
+                    closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
-        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }], ngImport: i0 }); }
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager, inputs: ["initialFocus", "initialFocus", "returnFocus", "finalFocus"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPopup]',
-                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager],
+                    hostDirectives: [
+                        RdxPopperContent,
+                        RdxFloatingNodeRegistration,
+                        { directive: RdxFloatingFocusManager, inputs: ['initialFocus', 'returnFocus: finalFocus'] }
+                    ],
                     providers: [
                         provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxPopoverRootContext();
@@ -569,11 +609,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                     (rootContext.modal() === true && rootContext.hasPopupClose()),
                                 // Full modal blocks outside pointer interaction; `trap-focus` only traps focus.
                                 inert: () => rootContext.modal() === true && rootContext.hasPopupClose(),
+                                restoreFocus: () => 'popup',
+                                previousFocusableElement: () => rootContext.trigger() ?? null,
+                                beforeContentFocusGuardRef: () => (element) => rootContext.setBeforeContentFocusGuard(element),
                                 // 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()
+                                enabled: () => rootContext.present() && !rootContext.isHoverActive(),
+                                openInteractionType: () => rootContext.openInteractionType(),
+                                closeInteractionType: () => rootContext.closeInteractionType()
                             };
                         })
                     ],
@@ -626,22 +671,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverDescription {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
-        this.id = injectId('rdx-popover-description-');
-        this.rootContext.setDescriptionId(this.id);
+        this.generatedId = injectId('rdx-popover-description-');
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        this.id = computed(() => this.idInput() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const id = this.id();
+            this.rootContext.setDescriptionId(id);
+            onCleanup(() => this.rootContext.setDescriptionId(undefined));
+        });
         inject(DestroyRef).onDestroy(() => this.rootContext.setDescriptionId(undefined));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverDescription, isStandalone: true, selector: "[rdxPopoverDescription]", host: { properties: { "id": "id" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverDescription, isStandalone: true, selector: "[rdxPopoverDescription]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverDescription]',
                     host: {
-                        '[id]': 'id'
+                        '[id]': 'id()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Structural directive that teleports the popover content into a container (default `document.body`)
@@ -741,22 +792,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxPopoverTitle {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
-        this.id = injectId('rdx-popover-title-');
-        this.rootContext.setTitleId(this.id);
+        this.generatedId = injectId('rdx-popover-title-');
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        this.id = computed(() => this.idInput() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const id = this.id();
+            this.rootContext.setTitleId(id);
+            onCleanup(() => this.rootContext.setTitleId(undefined));
+        });
         inject(DestroyRef).onDestroy(() => this.rootContext.setTitleId(undefined));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverTitle, isStandalone: true, selector: "[rdxPopoverTitle]", host: { properties: { "id": "id" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTitle, isStandalone: true, selector: "[rdxPopoverTitle]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverTitle]',
                     host: {
-                        '[id]': 'id'
+                        '[id]': 'id()'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * A button that opens the popover.
@@ -765,8 +822,6 @@ 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.
          */
@@ -798,8 +853,20 @@ class RdxPopoverTrigger {
         this.triggerId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
         this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
         this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.isPressed = computed(() => this.isOpen() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
+        this.triggerInteraction = createRdxTriggerInteraction({
+            trigger: () => this.elementRef.nativeElement,
+            activeTrigger: () => this.rootContext()?.trigger(),
+            open: () => this.rootContext()?.isOpen() ?? false,
+            disabled: () => this.disabled(),
+            contentId: () => this.rootContext()?.contentId
+        });
+        this.isPressed = computed(() => this.triggerInteraction.isActive() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
         this.generatedId = injectId('rdx-popover-trigger-');
+        effect(() => {
+            if (!this.handle() && !this.parentRootContext) {
+                rdxDevError('popover/trigger-missing-root', '`rdxPopoverTrigger` must be used inside `rdxPopoverRoot` or receive a `handle` connected to a root.', 'components/popover');
+            }
+        });
         effect((onCleanup) => {
             const handle = this.handle();
             if (handle) {
@@ -809,6 +876,19 @@ class RdxPopoverTrigger {
                 onCleanup(untracked(() => this.parentRootContext.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
             }
         });
+        useTriggerFocusGuards({
+            trigger: () => this.elementRef.nativeElement,
+            close: (event) => this.rootContext()?.close('focus-out', event),
+            beforeContentFocusGuard: () => this.rootContext()?.beforeContentFocusGuard(),
+            contentId: () => this.rootContext()?.contentId,
+            enabled: () => this.triggerInteraction.isActive(),
+            popupElement: () => {
+                const contentId = this.rootContext()?.contentId;
+                return contentId
+                    ? this.elementRef.nativeElement.ownerDocument.getElementById(contentId)
+                    : null;
+            }
+        });
     }
     handleClick(event) {
         if (this.disabled()) {
@@ -816,7 +896,9 @@ class RdxPopoverTrigger {
         }
         // 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');
+        const interactionType = this.triggerInteraction.clickInteractionType(event);
+        this.rootContext()?.setOpenedByTouch(interactionType === 'touch');
+        this.rootContext()?.setTriggerOpenInteractionType(interactionType);
         this.rootContext()?.setPointerDownOnTrigger(false);
         if (this.handle()) {
             this.handle().toggle(this.triggerId(), event);
@@ -840,14 +922,14 @@ class RdxPopoverTrigger {
         this.rootContext()?.cancelHoverOpen();
     }
     handlePointerDown(event) {
-        this.lastPointerType = event.pointerType;
+        this.triggerInteraction.recordPointerDown(event);
         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($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 }); }
+    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": "triggerInteraction.ariaExpanded()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "triggerInteraction.dataState()", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-pressed": "isPressed() ? \"\" : undefined", "attr.disabled": "triggerInteraction.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,
@@ -857,12 +939,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         type: 'button',
                         '[attr.aria-controls]': 'rootContext()?.contentId',
-                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-expanded]': 'triggerInteraction.ariaExpanded()',
                         '[attr.aria-haspopup]': '"dialog"',
-                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
-                        '[attr.data-popup-open]': 'isOpen() ? "" : undefined',
+                        '[attr.data-state]': 'triggerInteraction.dataState()',
+                        '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
                         '[attr.data-pressed]': 'isPressed() ? "" : undefined',
-                        '[attr.disabled]': 'disabled() ? "" : undefined',
+                        '[attr.disabled]': 'triggerInteraction.disabled() ? "" : undefined',
                         '[id]': 'triggerId()',
                         '(click)': 'handleClick($event)',
                         '(pointerenter)': 'handlePointerEnter($event)',