@radix-ng/primitives 1.0.4 → 1.0.6

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

@@ -3,7 +3,7 @@ import { booleanAttribute, inject, DestroyRef, ElementRef, signal, model, input,
 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 { createContext, createFloatingRootContext, useTransitionStatus, injectId, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError, useGraceArea, getMaxTransitionDuration } 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';
@@ -34,16 +34,23 @@ class RdxPopoverRoot {
         this.hoverCloseDelay = 0;
         this.transition = useTransitionStatus((open) => {
             this.instant.set(false);
+            this.instantType.set(undefined);
             this.onOpenChangeComplete.emit(open);
         });
-        this.isHoverActive = signal(false, ...(ngDevMode ? [{ debugName: "isHoverActive" }] : /* istanbul ignore next */ []));
-        this.instant = signal(false, ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
-        this.openChangeReason = signal('none', ...(ngDevMode ? [{ debugName: "openChangeReason" }] : /* istanbul ignore next */ []));
+        this.isHoverActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHoverActive" }] : /* istanbul ignore next */ []));
+        this.instant = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
+        this.instantType = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "instantType" }] : /* istanbul ignore next */ []));
+        this.openChangeReason = signal('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openChangeReason" }] : /* istanbul ignore next */ []));
         this.transitionStatus = this.transition.status;
         /**
          * Whether the popover is currently open.
          */
-        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /**
          * Whether the popover is initially open.
          */
@@ -51,11 +58,13 @@ class RdxPopoverRoot {
         /**
          * ID of the trigger associated with a controlled popover.
          */
-        this.triggerId = model(null, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.triggerId = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
         /**
          * ID of the trigger associated with an initially open uncontrolled popover.
          */
-        this.defaultTriggerId = input(null, ...(ngDevMode ? [{ debugName: "defaultTriggerId" }] : /* istanbul ignore next */ []));
+        this.defaultTriggerId = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultTriggerId" }] : /* istanbul ignore next */ []));
         /**
          * Determines whether the popover blocks outside interaction or only traps focus.
          */
@@ -63,22 +72,36 @@ class RdxPopoverRoot {
         /**
          * Associates this root with detached trigger elements.
          */
-        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        this.handle = input(/* @ts-ignore */
+        ...(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 */ []));
-        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.beforeContentFocusGuard = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
+        this.descriptionId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+        this.titleId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        this.trigger = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.triggers = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
+        this.payload = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
+        this.isPointerDownOnTrigger = signal(false, /* @ts-ignore */
+        ...(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.openedByTouch = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
+        this.openInteractionType = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
+        this.closeInteractionType = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
+        this.popupCloseCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupCloseCount" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.pendingTriggerOpenInteractionType = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pendingTriggerOpenInteractionType" }] : /* istanbul ignore next */ []));
         this.onOpenChange = output();
         this.onOpenChangeComplete = output();
         this.registeredTriggers = new Map();
@@ -95,6 +118,12 @@ class RdxPopoverRoot {
                 this.preventUnmountOnClose.set(false);
             }
         }, { debugName: 'RdxPopoverRoot.clearPreventUnmountOnOpen' });
+        // `defaultOpen` / `defaultTriggerId` seed the controllable model exactly once. Unlike the
+        // house `if (defaultValue() !== undefined) value.set(...)` guard, these must NOT re-assert the
+        // default on every change: once seeded, the user is free to close the popover (or switch the
+        // active trigger) and a later read of the still-truthy default input must not snap it back. The
+        // one-shot `hasApplied…` latch encodes that "apply once, then hands off to the model" intent —
+        // do not "simplify" it into the re-asserting guard.
         effect(() => {
             const defaultOpen = this.defaultOpen();
             if (!this.hasAppliedDefaultOpen && defaultOpen) {
@@ -161,7 +190,9 @@ class RdxPopoverRoot {
         this.openedByTouch.set(interactionType === 'touch');
         this.isHoverActive.set(fromHover);
         this.openChangeReason.set(reason);
-        this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
+        const openInstant = changedTriggerWhileOpen || reason === 'trigger-focus';
+        this.instant.set(openInstant);
+        this.instantType.set(!openInstant ? undefined : changedTriggerWhileOpen ? 'trigger-change' : 'focus');
         if (changedTriggerWhileOpen) {
             this.scheduleInstantReset();
         }
@@ -194,7 +225,11 @@ class RdxPopoverRoot {
         this.closeInteractionType.set(getInteractionTypeFromEvent(event));
         this.isHoverActive.set(false);
         this.openedByTouch.set(false);
-        this.instant.set(reason !== 'none' && reason !== 'trigger-hover');
+        const closeInstant = reason !== 'none' && reason !== 'trigger-hover';
+        this.instant.set(closeInstant);
+        // Closing by pressing the trigger again is a `'click'`; every other instant close
+        // (escape, outside press, focus-out, close button, imperative) reads as a `'dismiss'`.
+        this.instantType.set(!closeInstant ? undefined : reason === 'trigger-press' ? 'click' : 'dismiss');
         this.openChangeReason.set(reason);
         this.preventUnmountOnClose.set(change.shouldPreventUnmountOnClose());
         this.open.set(false);
@@ -344,6 +379,7 @@ class RdxPopoverRoot {
             this.instantFrame = undefined;
             if (!this.destroyRef.destroyed && this.open()) {
                 this.instant.set(false);
+                this.instantType.set(undefined);
             }
         });
     }
@@ -352,8 +388,8 @@ class RdxPopoverRoot {
         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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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.
@@ -361,7 +397,7 @@ class RdxPopoverRoot {
             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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverRoot]',
@@ -390,6 +426,7 @@ function contextFor(root) {
         hasPopupClose: computed(() => root.popupCloseCount() > 0),
         isHoverActive: root.isHoverActive.asReadonly(),
         instant: root.instant.asReadonly(),
+        instantType: root.instantType.asReadonly(),
         openChangeReason: root.openChangeReason.asReadonly(),
         isPointerDownOnTrigger: root.isPointerDownOnTrigger.asReadonly(),
         openedByTouch: root.openedByTouch.asReadonly(),
@@ -428,14 +465,17 @@ class RdxPopoverArrow {
     constructor() {
         this.rootContext = injectRdxPopoverRootContext();
         this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
-        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverArrow, isStandalone: true, selector: "[rdxPopoverArrow]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxPopoverArrow, isStandalone: true, selector: "[rdxPopoverArrow]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverArrow]',
@@ -466,10 +506,10 @@ class RdxPopoverBackdrop {
             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: { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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.instantType()", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverBackdrop]',
@@ -477,11 +517,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         role: 'presentation',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
-                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[attr.data-instant]': 'rootContext.instantType()',
                         '[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',
+                        // Inline `user-select: none` is a deliberate exception to the headless "no inline styles"
+                        // rule (it carries no themeable state): it mirrors Base UI's backdrop, preventing the page
+                        // text behind the popup from being accidentally selected during a drag-dismiss. The
+                        // `-webkit-` prefix is applied imperatively below for older Safari.
                         '[style.user-select]': '"none"'
                     }
                 }]
@@ -512,8 +555,10 @@ class RdxPopoverPopup {
         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.align = computed(() => this.wrapper?.placedAlign(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         /** 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. */
@@ -569,8 +614,8 @@ class RdxPopoverPopup {
             }
         });
     }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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.instantType()", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-align": "align()", "attr.data-side": "side()", "id": "rootContext.contentId" } }, providers: [
             provideFloatingFocusManagerConfig(() => {
                 const rootContext = injectRdxPopoverRootContext();
                 return {
@@ -592,7 +637,7 @@ class RdxPopoverPopup {
             })
         ], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPopup]',
@@ -628,10 +673,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[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-instant]': 'rootContext.instantType()',
                         '[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',
@@ -651,10 +695,10 @@ class RdxPopoverClose {
             inject(DestroyRef).onDestroy(unregister);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverClose, isStandalone: true, selector: "button[rdxPopoverClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootContext.close(\"close-press\", $event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxPopoverClose, isStandalone: true, selector: "button[rdxPopoverClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootContext.close(\"close-press\", $event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverClose, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxPopoverClose]',
@@ -673,7 +717,8 @@ class RdxPopoverDescription {
         this.rootContext = injectRdxPopoverRootContext();
         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 */ []));
+        this.id = computed(() => this.idInput() ?? this.generatedId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const id = this.id();
             this.rootContext.setDescriptionId(id);
@@ -681,10 +726,10 @@ class RdxPopoverDescription {
         });
         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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverDescription]',
@@ -703,10 +748,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * with `[container]`.
  */
 class RdxPopoverPortal {
-    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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxPopoverPortal]',
@@ -728,10 +773,10 @@ class RdxPopoverPortalMisuseGuard {
                 '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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxPopoverPortalMisuseGuard, isStandalone: true, selector: "[rdxPopoverPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalMisuseGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPortal]:not(ng-template)'
@@ -752,21 +797,23 @@ class RdxPopoverPositioner extends RdxPopperContentWrapper {
         this.rootContext = injectRdxPopoverRootContext();
         this.legacyVars = legacyPopperVars('popover');
         this.containerRef = inject(ElementRef);
-        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
-        this.containerEl = signal(this.containerRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.triggerEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(this.containerRef.nativeElement, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
         this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
         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: "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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxPopoverPositioner, isStandalone: true, selector: "[rdxPopoverPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instantType()", "style": "legacyVars" } }, providers: [
             ...provideRdxPopperContentWrapper(RdxPopoverPositioner),
             provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPositioner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverPositioner]',
@@ -777,7 +824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[attr.data-instant]': 'rootContext.instantType()',
                         // `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.
@@ -794,7 +841,8 @@ class RdxPopoverTitle {
         this.rootContext = injectRdxPopoverRootContext();
         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 */ []));
+        this.id = computed(() => this.idInput() ?? this.generatedId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const id = this.id();
             this.rootContext.setTitleId(id);
@@ -802,10 +850,10 @@ class RdxPopoverTitle {
         });
         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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverTitle]',
@@ -825,15 +873,18 @@ class RdxPopoverTrigger {
         /**
          * Associates this trigger with a detached popover root.
          */
-        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        this.handle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         /**
          * Data associated with this trigger while it is active.
          */
-        this.payload = input(...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
+        this.payload = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
         /**
          * ID used to identify this trigger when opening a detached popover imperatively.
          */
-        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Whether the trigger should ignore user interaction.
          */
@@ -850,9 +901,12 @@ class RdxPopoverTrigger {
          * How long to wait before closing a hover-opened popover, in milliseconds.
          */
         this.closeDelay = input(0, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        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.triggerId = computed(() => this.id() ?? this.generatedId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.triggerInteraction = createRdxTriggerInteraction({
             trigger: () => this.elementRef.nativeElement,
             activeTrigger: () => this.rootContext()?.trigger(),
@@ -860,7 +914,8 @@ class RdxPopoverTrigger {
             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.isPressed = computed(() => this.triggerInteraction.isActive() && this.rootContext()?.openChangeReason() === 'trigger-press', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
         this.generatedId = injectId('rdx-popover-trigger-');
         effect(() => {
             if (!this.handle() && !this.parentRootContext) {
@@ -928,20 +983,19 @@ class RdxPopoverTrigger {
     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": "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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": "triggerInteraction.ariaControls()", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-haspopup": "\"dialog\"", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxPopoverTrigger]',
                     hostDirectives: [RdxPopperAnchor],
                     host: {
                         type: 'button',
-                        '[attr.aria-controls]': 'rootContext()?.contentId',
+                        '[attr.aria-controls]': 'triggerInteraction.ariaControls()',
                         '[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',
@@ -968,8 +1022,10 @@ class RdxPopoverViewport {
         this.rootContext = injectRdxPopoverRootContext();
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
-        this.activationDirection = signal(undefined, ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
-        this.transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+        this.activationDirection = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        this.transitioning = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
         const unregister = this.rootContext.registerViewport((previousTrigger, nextTrigger) => {
             this.startTransition(previousTrigger, nextTrigger);
         });
@@ -1020,8 +1076,7 @@ class RdxPopoverViewport {
         if (this.previous !== previous) {
             return;
         }
-        const style = getComputedStyle(previous);
-        const duration = Math.max(getMaxDuration(style.animationDuration, style.animationDelay), getMaxDuration(style.transitionDuration, style.transitionDelay));
+        const duration = getMaxTransitionDuration(previous);
         this.cleanupTimer = setTimeout(() => this.cleanupPrevious(), duration > 0 ? duration + 50 : 0);
     }
     cleanupPrevious() {
@@ -1033,15 +1088,16 @@ class RdxPopoverViewport {
         this.previous = undefined;
         this.transitioning.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverViewport, isStandalone: true, selector: "[rdxPopoverViewport]", host: { properties: { "attr.data-activation-direction": "activationDirection()", "attr.data-transitioning": "transitioning() ? \"\" : undefined" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxPopoverViewport, isStandalone: true, selector: "[rdxPopoverViewport]", host: { properties: { "attr.data-activation-direction": "activationDirection()", "attr.data-instant": "rootContext.instantType()", "attr.data-transitioning": "transitioning() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverViewport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverViewport, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPopoverViewport]',
                     host: {
                         '[attr.data-activation-direction]': 'activationDirection()',
+                        '[attr.data-instant]': 'rootContext.instantType()',
                         '[attr.data-transitioning]': 'transitioning() ? "" : undefined'
                     }
                 }]
@@ -1073,28 +1129,15 @@ function removeIds(element) {
 function getCenter(rect) {
     return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
 }
-function getMaxDuration(durations, delays) {
-    const durationValues = durations.split(',').map(parseDuration);
-    const delayValues = delays.split(',').map(parseDuration);
-    return durationValues.reduce((max, duration, index) => {
-        const delay = delayValues[index % delayValues.length] ?? 0;
-        return Math.max(max, duration + delay);
-    }, 0);
-}
-function parseDuration(value) {
-    const duration = Number.parseFloat(value);
-    if (Number.isNaN(duration)) {
-        return 0;
-    }
-    return value.trim().endsWith('ms') ? duration : duration * 1000;
-}
 
 class RdxPopoverHandle {
     constructor() {
-        this.rootContext = signal(undefined, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.rootContext = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
         this.triggers = new Map();
         this.rootTriggerCleanups = new Map();
-        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     }
     open(triggerId) {
         const trigger = this.triggers.get(triggerId);
@@ -1164,8 +1207,8 @@ const popoverImports = [
     RdxPopoverViewport
 ];
 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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverRoot,
             RdxPopoverTrigger,
             RdxPopoverPortal,
             RdxPopoverPortalMisuseGuard,
@@ -1188,9 +1231,9 @@ class RdxPopoverModule {
             RdxPopoverDescription,
             RdxPopoverClose,
             RdxPopoverViewport] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...popoverImports],