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

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

@@ -1,1133 +1,1118 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, numberAttribute, booleanAttribute, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal, contentChild, ViewContainerRef, afterNextRender, assertInInjectionContext, forwardRef, ContentChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/cdk/overlay';
-import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { RdxPositionSide, RdxPositionAlign, RDX_POSITIONING_DEFAULTS, getContentPosition, getAllPossibleConnectedPositions, injectDocument, injectWindow, getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions, RdxFocusInitialDirective } from '@radix-ng/primitives/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { filter, tap } from 'rxjs';
-import * as i1$1 from '@angular/cdk/a11y';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { booleanAttribute, inject, DestroyRef, signal, model, input, output, computed, effect, untracked, Directive, ElementRef, numberAttribute, afterNextRender, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import { createContext, useTransitionStatus, injectId, useScrollLock, useGraceArea } from '@radix-ng/primitives/core';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i2 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import * as i3 from '@radix-ng/primitives/focus-scope';
+import { RdxFocusScope, provideRdxFocusScopeConfig } from '@radix-ng/primitives/focus-scope';
+import * as i1$1 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$2 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
 
-const RdxPopoverAnchorToken = new InjectionToken('RdxPopoverAnchorToken');
-
-const RdxPopoverArrowToken = new InjectionToken('RdxPopoverArrowToken');
-
-const RdxPopoverCloseToken = new InjectionToken('RdxPopoverCloseToken');
-
-const RdxPopoverContentAttributesToken = new InjectionToken('RdxPopoverContentAttributesToken');
-
-var RdxPopoverState;
-(function (RdxPopoverState) {
-    RdxPopoverState["OPEN"] = "open";
-    RdxPopoverState["CLOSED"] = "closed";
-})(RdxPopoverState || (RdxPopoverState = {}));
-var RdxPopoverAttachDetachEvent;
-(function (RdxPopoverAttachDetachEvent) {
-    RdxPopoverAttachDetachEvent["ATTACH"] = "attach";
-    RdxPopoverAttachDetachEvent["DETACH"] = "detach";
-})(RdxPopoverAttachDetachEvent || (RdxPopoverAttachDetachEvent = {}));
-var RdxPopoverAnimationStatus;
-(function (RdxPopoverAnimationStatus) {
-    RdxPopoverAnimationStatus["OPEN_STARTED"] = "open_started";
-    RdxPopoverAnimationStatus["OPEN_ENDED"] = "open_ended";
-    RdxPopoverAnimationStatus["CLOSED_STARTED"] = "closed_started";
-    RdxPopoverAnimationStatus["CLOSED_ENDED"] = "closed_ended";
-})(RdxPopoverAnimationStatus || (RdxPopoverAnimationStatus = {}));
-
-class RdxPopoverContentDirective {
+const transformModal = (value) => value === 'trap-focus' ? value : booleanAttribute(value);
+const context = () => contextFor(inject(RdxPopoverRoot));
+const [injectRdxPopoverRootContext, provideRdxPopoverRootContext] = createContext('RdxPopoverRootContext');
+/**
+ * Groups all parts of the popover.
+ */
+class RdxPopoverRoot {
     constructor() {
-        /** @ignore */
-        this.popoverRoot = injectPopoverRoot();
-        /** @ignore */
-        this.templateRef = inject(TemplateRef);
-        /** @ignore */
-        this.overlay = inject(Overlay);
-        /** @ignore */
+        this.popper = inject(RdxPopper);
         this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.connectedOverlay = inject(CdkConnectedOverlay);
-        /** @ignore */
-        this.name = computed(() => `rdx-popover-trigger-${this.popoverRoot.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /**
-         * @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
-         * @default top
-         */
-        this.side = input(RdxPositionSide.Top, ...(ngDevMode ? [{ debugName: "side" }] : []));
-        /**
-         * @description The distance in pixels from the trigger.
-         * @default undefined
-         */
-        this.sideOffset = input(NaN, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        /**
-         * @description The preferred alignment against the trigger. May change when collisions occur.
-         * @default center
-         */
-        this.align = input(RdxPositionAlign.Center, ...(ngDevMode ? [{ debugName: "align" }] : []));
+        this.hasAppliedDefaultOpen = false;
+        this.hasAppliedDefaultTriggerId = false;
+        this.hoverDelay = 300;
+        this.hoverCloseDelay = 0;
+        this.transition = useTransitionStatus((open) => {
+            this.instant.set(false);
+            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.transitionStatus = this.transition.status;
         /**
-         * @description An offset in pixels from the "start" or "end" alignment options.
-         * @default undefined
+         * Whether the popover is currently open.
          */
-        this.alignOffset = input(NaN, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /**
-         * @description Whether to add some alternate positions of the content.
-         * @default false
+         * Whether the popover is initially open.
          */
-        this.alternatePositionsDisabled = input(false, ...(ngDevMode ? [{ debugName: "alternatePositionsDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @description Whether to prevent `onOverlayEscapeKeyDown` handler from calling. */
-        this.onOverlayEscapeKeyDownDisabled = input(false, ...(ngDevMode ? [{ debugName: "onOverlayEscapeKeyDownDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @description Whether to prevent `onOverlayOutsideClick` handler from calling. */
-        this.onOverlayOutsideClickDisabled = input(false, ...(ngDevMode ? [{ debugName: "onOverlayOutsideClickDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Event handler called when the escape key is down.
-         * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
+         * ID of the trigger associated with a controlled popover.
          */
-        this.onOverlayEscapeKeyDown = output();
+        this.triggerId = model(null, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
         /**
-         * @description Event handler called when a pointer event occurs outside the bounds of the component.
-         * It can be prevented by setting `onOverlayOutsideClickDisabled` input to `true`.
+         * ID of the trigger associated with an initially open uncontrolled popover.
          */
-        this.onOverlayOutsideClick = output();
+        this.defaultTriggerId = input(null, ...(ngDevMode ? [{ debugName: "defaultTriggerId" }] : /* istanbul ignore next */ []));
         /**
-         * @description Event handler called after the overlay is open
+         * Determines whether the popover blocks outside interaction or only traps focus.
          */
-        this.onOpen = output();
+        this.modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: transformModal });
         /**
-         * @description Event handler called after the overlay is closed
+         * Associates this root with detached trigger elements.
          */
-        this.onClosed = output();
-        /** @ingore */
-        this.positions = computed(() => this.computePositions(), ...(ngDevMode ? [{ debugName: "positions" }] : []));
-        this.onOriginChangeEffect();
-        this.onPositionChangeEffect();
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        this.contentId = injectId('rdx-popover-content-');
+        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.popupCloseCount = signal(0, ...(ngDevMode ? [{ debugName: "popupCloseCount" }] : /* 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 */ []));
+        let previousOpen = this.open();
+        effect(() => {
+            const defaultOpen = this.defaultOpen();
+            if (!this.hasAppliedDefaultOpen && defaultOpen) {
+                this.hasAppliedDefaultOpen = true;
+                this.open.set(defaultOpen);
+            }
+        });
+        effect(() => {
+            const defaultTriggerId = this.defaultTriggerId();
+            if (!this.hasAppliedDefaultTriggerId && defaultTriggerId !== null) {
+                this.hasAppliedDefaultTriggerId = true;
+                this.triggerId.set(defaultTriggerId);
+            }
+        });
+        effect(() => {
+            const triggerId = this.triggerId();
+            untracked(() => this.syncTriggerId(triggerId));
+        });
+        effect(() => {
+            const open = this.open();
+            if (open !== previousOpen) {
+                previousOpen = open;
+                untracked(() => this.transition.start(open));
+            }
+        });
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerRoot(contextFor(this))));
+            }
+        });
+        effect(() => this.popper.anchorOverride.set(this.trigger()));
+        this.destroyRef.onDestroy(() => {
+            this.clearHoverTimers();
+            if (this.instantFrame !== undefined) {
+                cancelAnimationFrame(this.instantFrame);
+            }
+        });
     }
-    /** @ignore */
-    ngOnInit() {
-        this.setScrollStrategy();
-        this.setHasBackdrop();
-        this.setDisableClose();
-        this.onAttach();
-        this.onDetach();
-        this.connectKeydownEscape();
-        this.connectOutsideClick();
+    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('popover.open-change'), fromHover = false) {
+        this.clearHoverTimers();
+        this.isHoverActive.set(fromHover);
+        this.openChangeReason.set(reason);
+        const previousTrigger = this.trigger();
+        const changedTriggerWhileOpen = this.open() && previousTrigger !== trigger;
+        this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
+        if (changedTriggerWhileOpen) {
+            this.scheduleInstantReset();
+        }
+        if (trigger) {
+            if (previousTrigger && previousTrigger !== trigger) {
+                this.viewportTriggerChange.forEach((notify) => notify(previousTrigger, trigger));
+            }
+            this.trigger.set(trigger);
+        }
+        if (triggerId !== undefined) {
+            this.triggerId.set(triggerId);
+        }
+        this.payload.set(payload);
+        const changed = !this.open() || previousTrigger !== trigger;
+        this.open.set(true);
+        if (changed) {
+            this.emitOpenChange(true, reason, event);
+        }
     }
-    /** @ignore */
-    open() {
-        if (this.connectedOverlay.open) {
+    close(reason = 'none', event = new Event('popover.open-change')) {
+        this.clearHoverTimers();
+        this.isHoverActive.set(false);
+        if (!this.open()) {
             return;
         }
-        const prevOpen = this.connectedOverlay.open;
-        this.connectedOverlay.open = true;
-        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
-    }
-    /** @ignore */
-    close() {
-        if (!this.connectedOverlay.open) {
+        this.instant.set(reason !== 'none' && reason !== 'trigger-hover');
+        this.openChangeReason.set(reason);
+        this.open.set(false);
+        this.emitOpenChange(false, reason, event);
+    }
+    toggle(triggerId, trigger, payload, event) {
+        this.clearHoverTimers();
+        if (this.open() && this.trigger() === trigger) {
+            this.close('trigger-press', event);
             return;
         }
-        const prevOpen = this.connectedOverlay.open;
-        this.connectedOverlay.open = false;
-        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
-    }
-    /** @ignore */
-    positionChange() {
-        return this.connectedOverlay.positionChange.asObservable();
-    }
-    /** @ignore */
-    connectKeydownEscape() {
-        this.connectedOverlay.overlayKeydown
-            .asObservable()
-            .pipe(filter(() => !this.onOverlayEscapeKeyDownDisabled() &&
-            !this.popoverRoot.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.popoverRoot, 'cdkOverlayEscapeKeyDown')), filter((event) => event.key === 'Escape'), tap((event) => {
-            this.onOverlayEscapeKeyDown.emit(event);
-        }), filter(() => !this.popoverRoot.firstDefaultOpen()), tap(() => {
-            this.popoverRoot.handleClose();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    connectOutsideClick() {
-        this.connectedOverlay.overlayOutsideClick
-            .asObservable()
-            .pipe(filter(() => !this.onOverlayOutsideClickDisabled() &&
-            !this.popoverRoot.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.popoverRoot, 'cdkOverlayOutsideClick')), 
-        /**
-         * Handle the situation when an anchor is added and the anchor becomes the origin of the overlay
-         * hence  the trigger will be considered the outside element
-         */
-        filter((event) => {
-            return (!this.popoverRoot.popoverAnchorDirective() ||
-                !this.popoverRoot
-                    .popoverTriggerDirective()
-                    .elementRef.nativeElement.contains(event.target));
-        }), tap((event) => {
-            this.onOverlayOutsideClick.emit(event);
-        }), filter(() => !this.popoverRoot.firstDefaultOpen()), tap(() => {
-            this.popoverRoot.handleClose();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+        this.show(trigger, payload, triggerId, 'trigger-press', event);
     }
-    /** @ignore */
-    onAttach() {
-        this.connectedOverlay.attach
-            .asObservable()
-            .pipe(tap(() => {
-            /**
-             * `this.onOpen.emit();` is being delegated to the root directive due to the opening animation
-             */
-            this.popoverRoot.attachDetachEvent.set(RdxPopoverAttachDetachEvent.ATTACH);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    onDetach() {
-        this.connectedOverlay.detach
-            .asObservable()
-            .pipe(tap(() => {
-            /**
-             * `this.onClosed.emit();` is being delegated to the root directive due to the closing animation
-             */
-            this.popoverRoot.attachDetachEvent.set(RdxPopoverAttachDetachEvent.DETACH);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+    openOnHover(trigger, payload, triggerId, event) {
+        this.clearHoverTimers();
+        this.isHoverActive.set(true);
+        if (this.open()) {
+            this.show(trigger, payload, triggerId, 'trigger-hover', event, true);
+            return;
+        }
+        this.openTimer = setTimeout(() => this.show(trigger, payload, triggerId, 'trigger-hover', event, true), this.hoverDelay);
     }
-    /** @ignore */
-    setScrollStrategy() {
-        const prevScrollStrategy = this.connectedOverlay.scrollStrategy;
-        this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();
-        this.fireOverlayNgOnChanges('scrollStrategy', this.connectedOverlay.scrollStrategy, prevScrollStrategy);
+    closeOnHover() {
+        if (!this.isHoverActive()) {
+            return;
+        }
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+        this.closeTimer = setTimeout(() => this.close('trigger-hover', new Event('popover.hover-close')), this.hoverCloseDelay);
+    }
+    cancelHoverClose() {
+        this.clearCloseTimer();
+    }
+    cancelHoverOpen() {
+        this.clearOpenTimer();
+    }
+    setHoverDelays(delay, closeDelay) {
+        this.hoverDelay = delay;
+        this.hoverCloseDelay = closeDelay;
+    }
+    registerTrigger(id, trigger, payload) {
+        this.registeredTriggers.set(id, { element: trigger, payload });
+        this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        if (this.triggerId() === id) {
+            this.trigger.set(trigger);
+            this.payload.set(payload());
+        }
+        else if (!this.trigger() && this.triggerId() === null) {
+            this.trigger.set(trigger);
+            this.payload.set(payload());
+        }
+        return () => {
+            if (this.registeredTriggers.get(id)?.element === trigger) {
+                this.registeredTriggers.delete(id);
+            }
+            this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            if (this.destroyRef.destroyed) {
+                return;
+            }
+            if (this.trigger() === trigger) {
+                const next = this.registeredTriggers.entries().next().value;
+                if (this.triggerId() !== null) {
+                    this.triggerId.set(next?.[0] ?? null);
+                }
+                this.trigger.set(next?.[1].element);
+                this.payload.set(next?.[1].payload());
+                if (!next && !this.destroyRef.destroyed) {
+                    this.close();
+                }
+            }
+        };
     }
-    /** @ignore */
-    setHasBackdrop() {
-        const prevHasBackdrop = this.connectedOverlay.hasBackdrop;
-        this.connectedOverlay.hasBackdrop = false;
-        this.fireOverlayNgOnChanges('hasBackdrop', this.connectedOverlay.hasBackdrop, prevHasBackdrop);
+    registerViewport(onTriggerChange) {
+        this.viewportTriggerChange.add(onTriggerChange);
+        return () => this.viewportTriggerChange.delete(onTriggerChange);
     }
-    /** @ignore */
-    setDisableClose() {
-        const prevDisableClose = this.connectedOverlay.disableClose;
-        this.connectedOverlay.disableClose = true;
-        this.fireOverlayNgOnChanges('disableClose', this.connectedOverlay.disableClose, prevDisableClose);
+    registerTransitionElement(element) {
+        return this.transition.registerElement(element);
     }
-    /** @ignore */
-    setOrigin(origin) {
-        const prevOrigin = this.connectedOverlay.origin;
-        this.connectedOverlay.origin = origin;
-        this.fireOverlayNgOnChanges('origin', this.connectedOverlay.origin, prevOrigin);
+    syncTriggerId(triggerId) {
+        if (triggerId === null) {
+            this.trigger.set(undefined);
+            this.payload.set(undefined);
+            return;
+        }
+        const trigger = this.registeredTriggers.get(triggerId);
+        if (!trigger) {
+            this.trigger.set(undefined);
+            this.payload.set(undefined);
+            return;
+        }
+        if (trigger.element === this.trigger()) {
+            return;
+        }
+        const previousTrigger = this.trigger();
+        if (previousTrigger && this.open()) {
+            this.viewportTriggerChange.forEach((notify) => notify(previousTrigger, trigger.element));
+        }
+        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
+        });
     }
-    /** @ignore */
-    setPositions(positions) {
-        const prevPositions = this.connectedOverlay.positions;
-        this.connectedOverlay.positions = positions;
-        this.fireOverlayNgOnChanges('positions', this.connectedOverlay.positions, prevPositions);
-        this.connectedOverlay.overlayRef?.updatePosition();
+    clearHoverTimers() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
     }
-    /** @ignore */
-    computePositions() {
-        const arrowHeight = this.popoverRoot.popoverArrowDirective()?.height() ?? 0;
-        const offsets = {
-            sideOffset: arrowHeight + (isNaN(this.sideOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.side : this.sideOffset()),
-            alignOffset: isNaN(this.alignOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.align : this.alignOffset()
-        };
-        const basePosition = getContentPosition({
-            side: this.side(),
-            align: this.align(),
-            sideOffset: offsets.sideOffset,
-            alignOffset: offsets.alignOffset
-        });
-        const positions = [basePosition];
-        if (!this.alternatePositionsDisabled()) {
-            /**
-             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)
-             */
-            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
-            allPossibleConnectedPositions.forEach((_, key) => {
-                const sideAndAlignArray = key.split('|');
-                if (sideAndAlignArray[0] !== this.side() ||
-                    sideAndAlignArray[1] !== this.align()) {
-                    positions.push(getContentPosition({
-                        side: sideAndAlignArray[0],
-                        align: sideAndAlignArray[1],
-                        sideOffset: offsets.sideOffset,
-                        alignOffset: offsets.alignOffset
-                    }));
-                }
-            });
+    clearOpenTimer() {
+        if (this.openTimer !== undefined) {
+            clearTimeout(this.openTimer);
+            this.openTimer = undefined;
         }
-        return positions;
-    }
-    onOriginChangeEffect() {
-        effect(() => {
-            const origin = (this.popoverRoot.popoverAnchorDirective() ?? this.popoverRoot.popoverTriggerDirective())
-                .overlayOrigin;
-            untracked(() => {
-                this.setOrigin(origin);
-            });
-        });
     }
-    /** @ignore */
-    onPositionChangeEffect() {
-        effect(() => {
-            const positions = this.positions();
-            this.alternatePositionsDisabled();
-            untracked(() => {
-                this.setPositions(positions);
-            });
-        });
+    clearCloseTimer() {
+        if (this.closeTimer !== undefined) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
     }
-    /** @ignore */
-    fireOverlayNgOnChanges(input, currentValue, previousValue, firstChange = false) {
-        this.connectedOverlay.ngOnChanges({
-            [input]: new SimpleChange(previousValue, currentValue, firstChange)
+    scheduleInstantReset() {
+        if (this.instantFrame !== undefined) {
+            cancelAnimationFrame(this.instantFrame);
+        }
+        this.instantFrame = requestAnimationFrame(() => {
+            this.instantFrame = undefined;
+            if (!this.destroyRef.destroyed && this.open()) {
+                this.instant.set(false);
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxPopoverContentDirective, isStandalone: true, selector: "[rdxPopoverContent]", inputs: { 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 }, alternatePositionsDisabled: { classPropertyName: "alternatePositionsDisabled", publicName: "alternatePositionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayEscapeKeyDownDisabled: { classPropertyName: "onOverlayEscapeKeyDownDisabled", publicName: "onOverlayEscapeKeyDownDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayOutsideClickDisabled: { classPropertyName: "onOverlayOutsideClickDisabled", publicName: "onOverlayOutsideClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOverlayEscapeKeyDown: "onOverlayEscapeKeyDown", onOverlayOutsideClick: "onOverlayOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverRoot, isStandalone: true, selector: "[rdxPopoverRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, triggerId: { classPropertyName: "triggerId", publicName: "triggerId", isSignal: true, isRequired: false, transformFunction: null }, defaultTriggerId: { classPropertyName: "defaultTriggerId", publicName: "defaultTriggerId", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideRdxPopoverRootContext(context)], exportAs: ["rdxPopoverRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverRoot, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverContent]',
-                    hostDirectives: [CdkConnectedOverlay]
+                    selector: '[rdxPopoverRoot]',
+                    exportAs: 'rdxPopoverRoot',
+                    providers: [provideRdxPopoverRootContext(context)],
+                    hostDirectives: [RdxPopper]
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], triggerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerId", required: false }] }, { type: i0.Output, args: ["triggerIdChange"] }], defaultTriggerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTriggerId", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+function contextFor(root) {
+    return {
+        contentId: root.contentId,
+        descriptionId: root.descriptionId.asReadonly(),
+        isOpen: root.open,
+        modal: root.modal,
+        titleId: root.titleId.asReadonly(),
+        trigger: root.trigger.asReadonly(),
+        triggers: root.triggers.asReadonly(),
+        payload: root.payload.asReadonly(),
+        hasPopupClose: computed(() => root.popupCloseCount() > 0),
+        isHoverActive: root.isHoverActive.asReadonly(),
+        instant: root.instant.asReadonly(),
+        openChangeReason: root.openChangeReason.asReadonly(),
+        isPointerDownOnTrigger: root.isPointerDownOnTrigger.asReadonly(),
+        close: (reason, event) => root.close(reason, event),
+        cancelHoverClose: () => root.cancelHoverClose(),
+        cancelHoverOpen: () => root.cancelHoverOpen(),
+        closeOnHover: () => root.closeOnHover(),
+        open: (trigger, payload, triggerId, reason, event) => root.show(trigger, payload, triggerId, reason, event),
+        openOnHover: (trigger, payload, triggerId, event) => root.openOnHover(trigger, payload, triggerId, event),
+        registerTrigger: (id, trigger, payload) => root.registerTrigger(id, trigger, payload),
+        setDescriptionId: (id) => root.descriptionId.set(id),
+        setTitleId: (id) => root.titleId.set(id),
+        setPointerDownOnTrigger: (pointerDown) => root.isPointerDownOnTrigger.set(pointerDown),
+        setHoverDelays: (delay, closeDelay) => root.setHoverDelays(delay, closeDelay),
+        registerPopupClose: () => {
+            root.popupCloseCount.update((count) => count + 1);
+            return () => root.popupCloseCount.update((count) => count - 1);
+        },
+        registerTransitionElement: (element) => root.registerTransitionElement(element),
+        transitionStatus: root.transitionStatus,
+        registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange),
+        toggle: (triggerId, trigger, payload, event) => root.toggle(triggerId, trigger, payload, event)
+    };
+}
 
-class RdxPopoverTriggerDirective {
+/**
+ * An optional arrow element rendered alongside the popover.
+ */
+class RdxPopoverArrow {
     constructor() {
-        /** @ignore */
-        this.popoverRoot = injectPopoverRoot();
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.overlayOrigin = inject(CdkOverlayOrigin);
-        /** @ignore */
-        this.name = computed(() => `rdx-popover-trigger-${this.popoverRoot.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    }
-    /** @ignore */
-    click() {
-        this.popoverRoot.handleToggle();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopoverTriggerDirective, isStandalone: true, selector: "[rdxPopoverTrigger]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "popoverRoot.isOpen()", "attr.aria-controls": "popoverRoot.popoverContentDirective().name()", "attr.data-state": "popoverRoot.state()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
+        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 */ []));
+    }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverArrow, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverTrigger]',
-                    hostDirectives: [CdkOverlayOrigin],
+                    selector: '[rdxPopoverArrow]',
+                    hostDirectives: [RdxPopperArrow],
                     host: {
-                        type: 'button',
-                        '[attr.id]': 'name()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '[attr.aria-expanded]': 'popoverRoot.isOpen()',
-                        '[attr.aria-controls]': 'popoverRoot.popoverContentDirective().name()',
-                        '[attr.data-state]': 'popoverRoot.state()',
-                        '(click)': 'click()'
+                        '[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'
                     }
                 }]
         }] });
 
-const RdxCdkEventServiceWindowKey = Symbol('__RdxCdkEventService__');
-
-function eventTypeAsPrimitiveConfigKey(eventType) {
-    return `prevent${eventType[0].toUpperCase()}${eventType.slice(1)}`;
-}
-class RdxCdkEventService {
-    #clickDomRootEventCallbacks;
+/**
+ * An optional backdrop rendered behind the popup.
+ */
+class RdxPopoverBackdrop {
     constructor() {
-        this.document = injectDocument();
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.renderer2 = inject(Renderer2);
-        this.window = injectWindow();
-        this.onDestroyCallbacks = new Set([() => deleteRdxCdkEventServiceWindowKey(this.window)]);
-        this.#clickDomRootEventCallbacks = new Set();
-        this.#listenToClickDomRootEvent();
-        this.#registerOnDestroyCallbacks();
-    }
-    registerPrimitive(primitiveInstance) {
-        if (!this.primitiveConfigs) {
-            this.primitiveConfigs = new Map();
-        }
-        if (!this.primitiveConfigs.has(primitiveInstance)) {
-            this.primitiveConfigs.set(primitiveInstance, {});
-        }
-    }
-    deregisterPrimitive(primitiveInstance) {
-        if (this.primitiveConfigs?.has(primitiveInstance)) {
-            this.primitiveConfigs.delete(primitiveInstance);
-        }
-    }
-    preventPrimitiveFromCdkEvent(primitiveInstance, eventType) {
-        this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
-    }
-    allowPrimitiveForCdkEvent(primitiveInstance, eventType) {
-        this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
-    }
-    preventPrimitiveFromCdkMultiEvents(primitiveInstance, eventTypes) {
-        eventTypes.forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
-        });
-    }
-    allowPrimitiveForCdkMultiEvents(primitiveInstance, eventTypes) {
-        eventTypes.forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
-        });
-    }
-    setPreventPrimitiveFromCdkMixEvents(primitiveInstance, eventTypes) {
-        Object.keys(eventTypes).forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, eventTypes[eventTypeAsPrimitiveConfigKey(eventType)]);
-        });
-    }
-    primitivePreventedFromCdkEvent(primitiveInstance, eventType) {
-        return this.primitiveConfigs?.get(primitiveInstance)?.[eventTypeAsPrimitiveConfigKey(eventType)];
-    }
-    addClickDomRootEventCallback(callback) {
-        this.#clickDomRootEventCallbacks.add(callback);
+        this.rootContext = injectRdxPopoverRootContext();
     }
-    removeClickDomRootEventCallback(callback) {
-        return this.#clickDomRootEventCallbacks.delete(callback);
-    }
-    #setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, value) {
-        if (!this.primitiveConfigs?.has(primitiveInstance)) {
-            isDevMode() &&
-                console.error('[RdxCdkEventService.preventPrimitiveFromCdkEvent] RDX Primitive instance has not been registered!', primitiveInstance);
-            return;
-        }
-        switch (eventType) {
-            case 'cdkOverlayOutsideClick':
-                this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayOutsideClick = value;
-                break;
-            case 'cdkOverlayEscapeKeyDown':
-                this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayEscapeKeyDown = value;
-                break;
-        }
-    }
-    #registerOnDestroyCallbacks() {
-        this.destroyRef.onDestroy(() => {
-            this.onDestroyCallbacks.forEach((onDestroyCallback) => onDestroyCallback());
-            this.onDestroyCallbacks.clear();
-        });
-    }
-    #listenToClickDomRootEvent() {
-        const target = this.document;
-        const eventName = 'click';
-        const options = { capture: true };
-        const callback = (event) => {
-            this.#clickDomRootEventCallbacks.forEach((clickDomRootEventCallback) => clickDomRootEventCallback(event));
-        };
-        const major = parseInt(VERSION.major);
-        const minor = parseInt(VERSION.minor);
-        let destroyClickDomRootEventListener;
-        /**
-         * @see src/cdk/platform/features/backwards-compatibility.ts in @angular/cdk
-         */
-        if (major > 19 || (major === 19 && minor > 0) || (major === 0 && minor === 0)) {
-            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
-                const destroyClickDomRootEventListenerInternal = this.renderer2.listen(target, eventName, callback, options);
-                return () => {
-                    destroyClickDomRootEventListenerInternal();
-                    this.#clickDomRootEventCallbacks.clear();
-                };
-            });
-        }
-        else {
-            /**
-             * This part can get removed when v19.1 or higher is on the board
-             */
-            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
-                target.addEventListener(eventName, callback, options);
-                return () => {
-                    this.ngZone.runOutsideAngular(() => target.removeEventListener(eventName, callback, options));
-                    this.#clickDomRootEventCallbacks.clear();
-                };
-            });
-        }
-        this.onDestroyCallbacks.add(destroyClickDomRootEventListener);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
-const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
-const deleteRdxCdkEventServiceWindowKey = (window) => {
-    delete window[RdxCdkEventServiceWindowKey];
-};
-const getProvider = (throwWhenExists = true) => ({
-    provide: RdxCdkEventServiceToken,
-    useFactory: () => {
-        isDevMode() && console.log('providing RdxCdkEventService...');
-        const window = injectWindow();
-        if (window[RdxCdkEventServiceWindowKey]) {
-            if (throwWhenExists) {
-                throw Error(existsErrorMessage);
-            }
-            else {
-                isDevMode() && console.warn(existsErrorMessage);
-            }
-        }
-        window[RdxCdkEventServiceWindowKey] ??= new RdxCdkEventService();
-        return window[RdxCdkEventServiceWindowKey];
-    }
-});
-const provideRdxCdkEventServiceInRoot = () => makeEnvironmentProviders([getProvider()]);
-const provideRdxCdkEventService = () => getProvider(false);
-const injectRdxCdkEventService = () => inject(RdxCdkEventServiceToken, { optional: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverBackdrop]',
+                    host: {
+                        '[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"'
+                    }
+                }]
+        }] });
 
-let nextId = 0;
-class RdxPopoverRootDirective {
+/**
+ * A container for the popover contents.
+ */
+class RdxPopoverPopup {
     constructor() {
-        /** @ignore */
-        this.uniqueId = signal(++nextId, ...(ngDevMode ? [{ debugName: "uniqueId" }] : []));
-        /** @ignore */
-        this.name = computed(() => `rdx-popover-root-${this.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /**
-         * @description The anchor directive that comes form outside the popover root
-         * @default undefined
-         */
-        this.anchor = input(void 0, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+        this.rootContext = injectRdxPopoverRootContext();
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.focusScope = inject(RdxFocusScope);
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.dismissDetails = {
+            reason: 'none',
+            event: new Event('popover.dismiss')
+        };
         /**
-         * @description The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
-         * @default false
+         * Event handler called when the escape key is down. Can be prevented.
          */
-        this.defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
         /**
-         * @description The controlled state of the popover. `open` input take precedence of `defaultOpen` input.
-         * @default undefined
+         * Event handler called when a pointerdown event happens outside of the popup. Can be prevented.
          */
-        this.open = input(void 0, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
         /**
-         * @description Whether to control the state of the popover from external. Use in conjunction with `open` input.
-         * @default undefined
+         * Event handler called when focus moves outside of the popup. Can be prevented.
          */
-        this.externalControl = input(void 0, ...(ngDevMode ? [{ debugName: "externalControl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
         /**
-         * @description Whether to take into account CSS opening/closing animations.
-         * @default false
+         * Event handler called when an interaction happens outside of the popup. Can be prevented.
          */
-        this.cssAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.interactOutside = outputFromObservable(outputToObservable(this.dismissableLayer.interactOutside));
         /**
-         * @description Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
-         * @default false
+         * Event handler called before focus moves into the popup. Can be prevented.
          */
-        this.cssOpeningAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssOpeningAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.openAutoFocus = outputFromObservable(outputToObservable(this.focusScope.mountAutoFocus));
         /**
-         * @description Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'
-         * @default false
+         * Event handler called before focus returns after the popup is removed. Can be prevented.
          */
-        this.cssClosingAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssClosingAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @ignore */
-        this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : []));
-        /** @ignore */
-        this.popoverContentDirective = contentChild.required(RdxPopoverContentDirective);
-        /** @ignore */
-        this.popoverTriggerDirective = contentChild.required(RdxPopoverTriggerDirective);
-        /** @ignore */
-        this.popoverArrowDirective = contentChild(RdxPopoverArrowToken, ...(ngDevMode ? [{ debugName: "popoverArrowDirective" }] : []));
-        /** @ignore */
-        this.popoverCloseDirective = contentChild(RdxPopoverCloseToken, ...(ngDevMode ? [{ debugName: "popoverCloseDirective" }] : []));
-        /** @ignore */
-        this.popoverContentAttributesComponent = contentChild(RdxPopoverContentAttributesToken, ...(ngDevMode ? [{ debugName: "popoverContentAttributesComponent" }] : []));
-        /** @ignore */
-        this.internalPopoverAnchorDirective = contentChild(RdxPopoverAnchorToken, ...(ngDevMode ? [{ debugName: "internalPopoverAnchorDirective" }] : []));
-        /** @ignore */
-        this.viewContainerRef = inject(ViewContainerRef);
-        /** @ignore */
-        this.rdxCdkEventService = injectRdxCdkEventService();
-        /** @ignore */
-        this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.state = signal(RdxPopoverState.CLOSED, ...(ngDevMode ? [{ debugName: "state" }] : []));
-        /** @ignore */
-        this.attachDetachEvent = signal(RdxPopoverAttachDetachEvent.DETACH, ...(ngDevMode ? [{ debugName: "attachDetachEvent" }] : []));
-        /** @ignore */
-        this.isFirstDefaultOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFirstDefaultOpen" }] : []));
-        /** @ignore */
-        this.popoverAnchorDirective = computed(() => this.internalPopoverAnchorDirective() ?? this.anchor(), ...(ngDevMode ? [{ debugName: "popoverAnchorDirective" }] : []));
-        /** @ignore */
-        this.onAnchorChangeEffect = () => {
-            effect(() => {
-                const anchor = this.anchor();
-                untracked(() => {
-                    if (anchor) {
-                        anchor.setPopoverRoot(this);
-                    }
-                });
-            });
-        };
-        this.rdxCdkEventService?.registerPrimitive(this);
-        this.destroyRef.onDestroy(() => this.rdxCdkEventService?.deregisterPrimitive(this));
-        this.onStateChangeEffect();
-        this.onCssAnimationStatusChangeChangeEffect();
-        this.onOpenChangeEffect();
-        this.onIsFirstDefaultOpenChangeEffect();
-        this.onAnchorChangeEffect();
-        this.emitOpenOrClosedEventEffect();
-        afterNextRender({
-            write: () => {
-                if (this.defaultOpen() && !this.open()) {
-                    this.isFirstDefaultOpen.set(true);
-                }
+        this.closeAutoFocus = outputFromObservable(outputToObservable(this.focusScope.unmountAutoFocus));
+        useScrollLock(computed(() => this.rootContext.modal() === true));
+        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();
             }
         });
-    }
-    /** @ignore */
-    getAnimationParamsSnapshot() {
-        return {
-            cssAnimation: this.cssAnimation(),
-            cssOpeningAnimation: this.cssOpeningAnimation(),
-            cssClosingAnimation: this.cssClosingAnimation(),
-            cssAnimationStatus: this.cssAnimationStatus(),
-            attachDetachEvent: this.attachDetachEvent(),
-            state: this.state(),
-            canEmitOnOpenOrOnClosed: this.canEmitOnOpenOrOnClosed()
-        };
-    }
-    /** @ignore */
-    controlledExternally() {
-        return this.externalControl;
-    }
-    /** @ignore */
-    firstDefaultOpen() {
-        return this.isFirstDefaultOpen();
-    }
-    /** @ignore */
-    handleOpen() {
-        if (this.externalControl()) {
-            return;
-        }
-        this.setState(RdxPopoverState.OPEN);
-    }
-    /** @ignore */
-    handleClose() {
-        if (this.isFirstDefaultOpen()) {
-            this.isFirstDefaultOpen.set(false);
-        }
-        if (this.externalControl()) {
-            return;
-        }
-        this.setState(RdxPopoverState.CLOSED);
-    }
-    /** @ignore */
-    handleToggle() {
-        if (this.externalControl()) {
-            return;
-        }
-        this.isOpen() ? this.handleClose() : this.handleOpen();
-    }
-    /** @ignore */
-    isOpen(state) {
-        return (state ?? this.state()) === RdxPopoverState.OPEN;
-    }
-    /** @ignore */
-    setState(state = RdxPopoverState.CLOSED) {
-        if (state === this.state()) {
-            return;
-        }
-        this.state.set(state);
-    }
-    /** @ignore */
-    openContent() {
-        this.popoverContentDirective().open();
-        if (!this.cssAnimation() || !this.cssOpeningAnimation()) {
-            this.cssAnimationStatus.set(null);
-        }
-    }
-    /** @ignore */
-    closeContent() {
-        this.popoverContentDirective().close();
-        if (!this.cssAnimation() || !this.cssClosingAnimation()) {
-            this.cssAnimationStatus.set(null);
-        }
-    }
-    /** @ignore */
-    emitOnOpen() {
-        this.popoverContentDirective().onOpen.emit();
-    }
-    /** @ignore */
-    emitOnClosed() {
-        this.popoverContentDirective().onClosed.emit();
-    }
-    /** @ignore */
-    ifOpenOrCloseWithoutAnimations(state) {
-        return (!this.popoverContentAttributesComponent() ||
-            !this.cssAnimation() ||
-            (this.cssAnimation() && !this.cssClosingAnimation() && state === RdxPopoverState.CLOSED) ||
-            (this.cssAnimation() && !this.cssOpeningAnimation() && state === RdxPopoverState.OPEN) ||
-            // !this.cssAnimationStatus() ||
-            (this.cssOpeningAnimation() &&
-                state === RdxPopoverState.OPEN &&
-                [RdxPopoverAnimationStatus.OPEN_STARTED].includes(this.cssAnimationStatus())) ||
-            (this.cssClosingAnimation() &&
-                state === RdxPopoverState.CLOSED &&
-                [RdxPopoverAnimationStatus.CLOSED_STARTED].includes(this.cssAnimationStatus())));
-    }
-    /** @ignore */
-    ifOpenOrCloseWithAnimations(cssAnimationStatus) {
-        return (this.popoverContentAttributesComponent() &&
-            this.cssAnimation() &&
-            cssAnimationStatus &&
-            ((this.cssOpeningAnimation() &&
-                this.state() === RdxPopoverState.OPEN &&
-                [RdxPopoverAnimationStatus.OPEN_ENDED].includes(cssAnimationStatus)) ||
-                (this.cssClosingAnimation() &&
-                    this.state() === RdxPopoverState.CLOSED &&
-                    [RdxPopoverAnimationStatus.CLOSED_ENDED].includes(cssAnimationStatus))));
-    }
-    /** @ignore */
-    openOrClose(state) {
-        const isOpen = this.isOpen(state);
-        isOpen ? this.openContent() : this.closeContent();
-    }
-    /** @ignore */
-    emitOnOpenOrOnClosed(state) {
-        this.isOpen(state)
-            ? this.attachDetachEvent() === RdxPopoverAttachDetachEvent.ATTACH && this.emitOnOpen()
-            : this.attachDetachEvent() === RdxPopoverAttachDetachEvent.DETACH && this.emitOnClosed();
-    }
-    /** @ignore */
-    canEmitOnOpenOrOnClosed() {
-        return (!this.cssAnimation() ||
-            (!this.cssOpeningAnimation() && this.state() === RdxPopoverState.OPEN) ||
-            (this.cssOpeningAnimation() &&
-                this.state() === RdxPopoverState.OPEN &&
-                this.cssAnimationStatus() === RdxPopoverAnimationStatus.OPEN_ENDED) ||
-            (!this.cssClosingAnimation() && this.state() === RdxPopoverState.CLOSED) ||
-            (this.cssClosingAnimation() &&
-                this.state() === RdxPopoverState.CLOSED &&
-                this.cssAnimationStatus() === RdxPopoverAnimationStatus.CLOSED_ENDED));
-    }
-    /** @ignore */
-    onStateChangeEffect() {
-        let isFirst = true;
-        effect(() => {
-            const state = this.state();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                if (!this.ifOpenOrCloseWithoutAnimations(state)) {
-                    return;
-                }
-                this.openOrClose(state);
-            });
-        }, {});
-    }
-    /** @ignore */
-    onCssAnimationStatusChangeChangeEffect() {
-        let isFirst = true;
-        effect(() => {
-            const cssAnimationStatus = this.cssAnimationStatus();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                if (!this.ifOpenOrCloseWithAnimations(cssAnimationStatus)) {
-                    return;
-                }
-                this.openOrClose(this.state());
-            });
+        this.dismissableLayer.focusOutside.subscribe((event) => {
+            this.dismissDetails = { reason: 'focus-out', event };
+            if (this.rootContext.isPointerDownOnTrigger()) {
+                event.preventDefault();
+            }
         });
-    }
-    /** @ignore */
-    emitOpenOrClosedEventEffect() {
-        let isFirst = true;
-        effect(() => {
-            this.attachDetachEvent();
-            this.cssAnimationStatus();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                const canEmitOpenClose = untracked(() => this.canEmitOnOpenOrOnClosed());
-                if (!canEmitOpenClose) {
-                    return;
-                }
-                this.emitOnOpenOrOnClosed(this.state());
-            });
+        this.dismissableLayer.escapeKeyDown.subscribe((event) => {
+            this.dismissDetails = { reason: 'escape-key', event };
         });
-    }
-    /** @ignore */
-    onOpenChangeEffect() {
-        effect(() => {
-            const open = this.open();
-            untracked(() => {
-                this.setState(open ? RdxPopoverState.OPEN : RdxPopoverState.CLOSED);
-            });
+        this.focusScope.mountAutoFocus.subscribe((event) => {
+            if (this.rootContext.isHoverActive()) {
+                event.preventDefault();
+            }
+        });
+        this.dismissableLayer.dismiss.subscribe(() => {
+            this.rootContext.close(this.dismissDetails.reason, this.dismissDetails.event);
+            this.dismissDetails = { reason: 'none', event: new Event('popover.dismiss') };
         });
     }
-    /** @ignore */
-    onIsFirstDefaultOpenChangeEffect() {
-        const effectRef = effect(() => {
-            const defaultOpen = this.defaultOpen();
-            untracked(() => {
-                if (!defaultOpen || this.open()) {
-                    effectRef.destroy();
-                    return;
-                }
-                this.handleOpen();
-            });
-        }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPopup, isStandalone: true, selector: "[rdxPopoverPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()" }, properties: { "attr.aria-describedby": "rootContext.descriptionId()", "attr.aria-labelledby": "rootContext.titleId()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-align": "align()", "attr.data-side": "side()", "id": "rootContext.contentId" } }, providers: [
+            provideRdxDismissableLayerConfig(() => {
+                const rootContext = injectRdxPopoverRootContext();
+                return {
+                    disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
+                };
+            }),
+            provideRdxFocusScopeConfig(() => {
+                const rootContext = injectRdxPopoverRootContext();
+                return {
+                    trapped: computed(() => rootContext.modal() === 'trap-focus' ||
+                        (rootContext.modal() === true && rootContext.hasPopupClose()))
+                };
+            })
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }, { directive: i3.RdxFocusScope }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPopup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverPopup]',
+                    hostDirectives: [RdxPopperContent, RdxDismissableLayer, RdxFocusScope],
+                    providers: [
+                        provideRdxDismissableLayerConfig(() => {
+                            const rootContext = injectRdxPopoverRootContext();
+                            return {
+                                disableOutsidePointerEvents: computed(() => rootContext.modal() === true)
+                            };
+                        }),
+                        provideRdxFocusScopeConfig(() => {
+                            const rootContext = injectRdxPopoverRootContext();
+                            return {
+                                trapped: computed(() => rootContext.modal() === 'trap-focus' ||
+                                    (rootContext.modal() === true && rootContext.hasPopupClose()))
+                            };
+                        })
+                    ],
+                    host: {
+                        role: 'dialog',
+                        '[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',
+                        '(pointerenter)': 'rootContext.cancelHoverClose()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], openAutoFocus: [{ type: i0.Output, args: ["openAutoFocus"] }], closeAutoFocus: [{ type: i0.Output, args: ["closeAutoFocus"] }] } });
+
+/**
+ * A button that closes the popover.
+ */
+class RdxPopoverClose {
+    constructor() {
+        this.rootContext = injectRdxPopoverRootContext();
+        if (inject(RdxPopoverPopup, { optional: true })) {
+            const unregister = this.rootContext.registerPopupClose();
+            inject(DestroyRef).onDestroy(unregister);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxPopoverRootDirective, isStandalone: true, selector: "[rdxPopoverRoot]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, externalControl: { classPropertyName: "externalControl", publicName: "externalControl", isSignal: true, isRequired: false, transformFunction: null }, cssAnimation: { classPropertyName: "cssAnimation", publicName: "cssAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssOpeningAnimation: { classPropertyName: "cssOpeningAnimation", publicName: "cssOpeningAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssClosingAnimation: { classPropertyName: "cssClosingAnimation", publicName: "cssClosingAnimation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "popoverContentDirective", first: true, predicate: RdxPopoverContentDirective, descendants: true, isSignal: true }, { propertyName: "popoverTriggerDirective", first: true, predicate: RdxPopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverArrowDirective", first: true, predicate: RdxPopoverArrowToken, descendants: true, isSignal: true }, { propertyName: "popoverCloseDirective", first: true, predicate: RdxPopoverCloseToken, descendants: true, isSignal: true }, { propertyName: "popoverContentAttributesComponent", first: true, predicate: RdxPopoverContentAttributesToken, descendants: true, isSignal: true }, { propertyName: "internalPopoverAnchorDirective", first: true, predicate: RdxPopoverAnchorToken, descendants: true, isSignal: true }], exportAs: ["rdxPopoverRoot"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverClose, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverRoot]',
-                    exportAs: 'rdxPopoverRoot'
+                    selector: 'button[rdxPopoverClose]',
+                    host: {
+                        type: 'button',
+                        '(click)': 'rootContext.close("close-press", $event)'
+                    }
                 }]
         }], ctorParameters: () => [] });
 
-function injectPopoverRoot(optional = false) {
-    isDevMode() && assertInInjectionContext(injectPopoverRoot);
-    return inject(RdxPopoverRootDirective, { optional });
+/**
+ * An accessible description for the popover.
+ */
+class RdxPopoverDescription {
+    constructor() {
+        this.rootContext = injectRdxPopoverRootContext();
+        this.id = injectId('rdx-popover-description-');
+        this.rootContext.setDescriptionId(this.id);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setDescriptionId(undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: 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 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverDescription]',
+                    host: {
+                        '[id]': 'id'
+                    }
+                }]
+        }], ctorParameters: () => [] });
 
-class RdxPopoverAnchorDirective {
+/**
+ * Moves the popover to a different part of the DOM.
+ */
+class RdxPopoverPortal {
     constructor() {
+        this.rootContext = injectRdxPopoverRootContext();
         /**
-         * @ignore
-         * If outside the root then null, otherwise the root directive - with optional `true` passed in as the first param.
-         * If outside the root and non-null value that means the html structure is wrong - popover inside popover.
-         * */
-        this.popoverRoot = injectPopoverRoot(true);
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.overlayOrigin = inject(CdkOverlayOrigin);
-        /** @ignore */
-        this.document = injectDocument();
-        /** @ignore */
-        this.name = computed(() => `rdx-popover-external-anchor-${this.popoverRoot?.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    }
-    /** @ignore */
-    click() {
-        this.emitOutsideClick();
-    }
-    /** @ignore */
-    setPopoverRoot(popoverRoot) {
-        this.popoverRoot = popoverRoot;
-    }
-    emitOutsideClick() {
-        if (!this.popoverRoot?.isOpen() ||
-            this.popoverRoot?.popoverContentDirective().onOverlayOutsideClickDisabled()) {
-            return;
-        }
-        const clickEvent = new MouseEvent('click', {
-            view: this.document.defaultView,
-            bubbles: true,
-            cancelable: true,
-            relatedTarget: this.elementRef.nativeElement
-        });
-        this.popoverRoot?.popoverTriggerDirective().elementRef.nativeElement.dispatchEvent(clickEvent);
+         * Optional container to portal the content into. Defaults to `document.body`.
+         */
+        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopoverAnchorDirective, isStandalone: true, selector: "[rdxPopoverAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
-            {
-                provide: RdxPopoverAnchorToken,
-                useExisting: forwardRef(() => RdxPopoverAnchorDirective)
-            }
-        ], exportAs: ["rdxPopoverAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverPortal, isStandalone: true, selector: "[rdxPopoverPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverAnchor]',
-                    exportAs: 'rdxPopoverAnchor',
-                    hostDirectives: [CdkOverlayOrigin],
-                    host: {
-                        type: 'button',
-                        '[attr.id]': 'name()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '(click)': 'click()'
-                    },
-                    providers: [
+                    selector: '[rdxPopoverPortal]',
+                    hostDirectives: [
                         {
-                            provide: RdxPopoverAnchorToken,
-                            useExisting: forwardRef(() => RdxPopoverAnchorDirective)
+                            directive: RdxPortal,
+                            inputs: ['container']
                         }
+                    ],
+                    host: {
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
+                    }
+                }]
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
+/**
+ * Mounts the portal while the popover is open and waits for CSS exit keyframes before unmounting.
+ */
+class RdxPopoverPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPopoverPortalPresence, isStandalone: true, selector: "ng-template[rdxPopoverPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectRdxPopoverRootContext();
+                return { present: context.isOpen };
+            })
+        ], hostDirectives: [{ directive: i1$2.RdxPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxPopoverPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectRdxPopoverRootContext();
+                            return { present: context.isOpen };
+                        })
                     ]
                 }]
         }] });
 
-class RdxPopoverArrowDirective {
+/**
+ * Positions the popover against its trigger.
+ */
+class RdxPopoverPositioner {
     constructor() {
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        /** @ignore */
-        this.popoverRoot = injectPopoverRoot();
-        /** @ignore */
+        this.rootContext = injectRdxPopoverRootContext();
+        this.wrapper = inject(RdxPopperContentWrapper);
         this.elementRef = 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.graceArea = useGraceArea(this.triggerEl, this.containerEl);
         /**
-         * @description The width of the arrow in pixels.
-         * @default 10
+         * An element to position the popup against. Defaults to the trigger.
          */
-        this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, ...(ngDevMode ? [{ debugName: "width", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
         /**
-         * @description The height of the arrow in pixels.
-         * @default 5
+         * The preferred side of the trigger to render against when open.
          */
-        this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, ...(ngDevMode ? [{ debugName: "height", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        /** @ignore */
-        this.arrowSvgElement = computed(() => {
-            const width = this.width();
-            const height = this.height();
-            const svgElement = this.renderer.createElement('svg', 'svg');
-            this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');
-            this.renderer.setAttribute(svgElement, 'width', String(width));
-            this.renderer.setAttribute(svgElement, 'height', String(height));
-            const polygonElement = this.renderer.createElement('polygon', 'svg');
-            this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');
-            this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');
-            this.renderer.appendChild(svgElement, polygonElement);
-            return svgElement;
-        }, ...(ngDevMode ? [{ debugName: "arrowSvgElement" }] : []));
-        /** @ignore */
-        this.currentArrowSvgElement = signal(void 0, ...(ngDevMode ? [{ debugName: "currentArrowSvgElement" }] : []));
-        /** @ignore */
-        this.position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());
-        afterNextRender({
-            write: () => {
-                if (this.elementRef.nativeElement.parentElement) {
-                    this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
-                }
-                this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');
-                this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');
-                this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');
-            }
-        });
-        this.onArrowSvgElementChangeEffect();
-        this.onContentPositionAndArrowDimensionsChangeEffect();
-    }
-    /** @ignore */
-    setAnchorOrTriggerRect() {
-        this.anchorOrTriggerRect = (this.popoverRoot.popoverAnchorDirective() ?? this.popoverRoot.popoverTriggerDirective()).elementRef.nativeElement.getBoundingClientRect();
-    }
-    /** @ignore */
-    setPosition(position, arrowDimensions) {
-        this.setAnchorOrTriggerRect();
-        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: arrowDimensions.width, height: arrowDimensions.height }, { width: this.anchorOrTriggerRect.width, height: this.anchorOrTriggerRect.height });
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', '');
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'right', '');
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transformOrigin', posParams.transformOrigin);
-    }
-    /** @ignore */
-    onArrowSvgElementChangeEffect() {
-        effect(() => {
-            const arrowElement = this.arrowSvgElement();
-            untracked(() => {
-                const currentArrowSvgElement = this.currentArrowSvgElement();
-                if (currentArrowSvgElement) {
-                    this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);
-                }
-                this.currentArrowSvgElement.set(arrowElement);
-                this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);
-                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);
-                this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());
-            });
-        });
-    }
-    /** @ignore */
-    onContentPositionAndArrowDimensionsChangeEffect() {
-        effect(() => {
-            const position = this.position();
-            const arrowDimensions = { width: this.width(), height: this.height() };
-            untracked(() => {
-                if (!position) {
-                    return;
-                }
-                this.setPosition(position, arrowDimensions);
-            });
+        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: "20.3.3", ngImport: i0, type: RdxPopoverArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxPopoverArrowDirective, isStandalone: true, selector: "[rdxPopoverArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: RdxPopoverArrowToken,
-                useExisting: forwardRef(() => RdxPopoverArrowDirective)
-            }
-        ], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverPositioner, isStandalone: true, selector: "[rdxPopoverPositioner]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-anchor-hidden": "wrapper.anchorHidden() ? \"\" : undefined", "attr.data-align": "wrapper.placedAlign()", "attr.data-side": "wrapper.placedSide()", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style": "{\n            '--anchor-width': 'var(--radix-popper-anchor-width)',\n            '--anchor-height': 'var(--radix-popper-anchor-height)',\n            '--available-width': 'var(--radix-popper-available-width)',\n            '--available-height': 'var(--radix-popper-available-height)',\n            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',\n            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',\n            '--transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, providers: [
+            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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverArrowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverPositioner, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverArrow]',
+                    selector: '[rdxPopoverPositioner]',
                     providers: [
+                        provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+                    ],
+                    hostDirectives: [
                         {
-                            provide: RdxPopoverArrowToken,
-                            useExisting: forwardRef(() => RdxPopoverArrowDirective)
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'anchor',
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'positionStrategy',
+                                'updatePositionStrategy'
+                            ]
                         }
-                    ]
+                    ],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-anchor-hidden]': 'wrapper.anchorHidden() ? "" : undefined',
+                        '[attr.data-align]': 'wrapper.placedAlign()',
+                        '[attr.data-side]': 'wrapper.placedSide()',
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[style]': `{
+            '--anchor-width': 'var(--radix-popper-anchor-width)',
+            '--anchor-height': 'var(--radix-popper-anchor-height)',
+            '--available-width': 'var(--radix-popper-available-width)',
+            '--available-height': 'var(--radix-popper-available-height)',
+            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',
+            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',
+            '--transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'
+        }`
+                    }
+                }]
+        }], 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"] }] } });
+
+/**
+ * An accessible title for the popover.
+ */
+class RdxPopoverTitle {
+    constructor() {
+        this.rootContext = injectRdxPopoverRootContext();
+        this.id = injectId('rdx-popover-title-');
+        this.rootContext.setTitleId(this.id);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setTitleId(undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopoverTitle]',
+                    host: {
+                        '[id]': 'id'
+                    }
                 }]
         }], ctorParameters: () => [] });
 
-class RdxPopoverCloseDirective {
+/**
+ * A button that opens the popover.
+ */
+class RdxPopoverTrigger {
     constructor() {
-        /** @ignore */
-        this.popoverRoot = injectPopoverRoot();
-        /** @ignore */
+        this.parentRootContext = injectRdxPopoverRootContext(true);
         this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        this.onIsControlledExternallyEffect();
-    }
-    /** @ignore */
-    onIsControlledExternallyEffect() {
-        effect(() => {
-            const isControlledExternally = this.popoverRoot.controlledExternally()();
-            untracked(() => {
-                this.renderer.setStyle(this.elementRef.nativeElement, 'display', isControlledExternally ? 'none' : null);
-            });
+        /**
+         * Associates this trigger with a detached popover root.
+         */
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        /**
+         * Data associated with this trigger while it is active.
+         */
+        this.payload = input(...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
+        /**
+         * ID used to identify this trigger when opening a detached popover imperatively.
+         */
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the trigger should ignore user interaction.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the popover should also open when this trigger is hovered.
+         */
+        this.openOnHover = input(false, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * How long to wait before opening the popover on hover, in milliseconds.
+         */
+        this.delay = input(300, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * 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.isPressed = computed(() => this.isOpen() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
+        this.generatedId = injectId('rdx-popover-trigger-');
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
+            else if (this.parentRootContext) {
+                onCleanup(untracked(() => this.parentRootContext.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopoverCloseDirective, isStandalone: true, selector: "[rdxPopoverClose]", host: { attributes: { "type": "button" }, listeners: { "click": "popoverRoot.handleClose()" } }, providers: [
-            {
-                provide: RdxPopoverCloseToken,
-                useExisting: forwardRef(() => RdxPopoverCloseDirective)
-            }
-        ], ngImport: i0 }); }
+    handleClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.rootContext()?.setPointerDownOnTrigger(false);
+        if (this.handle()) {
+            this.handle().toggle(this.triggerId(), event);
+        }
+        else {
+            this.parentRootContext?.toggle(this.triggerId(), this.elementRef.nativeElement, this.payload(), event);
+        }
+    }
+    handlePointerEnter(event) {
+        const rootContext = this.rootContext();
+        if (event.pointerType === 'touch' || !rootContext || this.disabled() || !this.openOnHover()) {
+            return;
+        }
+        rootContext.setHoverDelays(this.delay(), this.closeDelay());
+        rootContext.openOnHover(this.elementRef.nativeElement, this.payload(), this.triggerId(), event);
+    }
+    handlePointerLeave(event) {
+        if (event.pointerType === 'touch' || !this.openOnHover()) {
+            return;
+        }
+        this.rootContext()?.cancelHoverOpen();
+    }
+    handlePointerDown() {
+        this.rootContext()?.setPointerDownOnTrigger(true);
+    }
+    handlePointerUp() {
+        this.rootContext()?.setPointerDownOnTrigger(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPopoverTrigger, isStandalone: true, selector: "button[rdxPopoverTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointerleave": "handlePointerLeave($event)", "pointerdown": "handlePointerDown()", "pointerup": "handlePointerUp()", "pointercancel": "handlePointerUp()" }, properties: { "attr.aria-controls": "rootContext()?.contentId", "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.data-pressed": "isPressed() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "id": "triggerId()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxPopoverClose]',
+                    selector: 'button[rdxPopoverTrigger]',
+                    hostDirectives: [RdxPopperAnchor],
                     host: {
                         type: 'button',
-                        '(click)': 'popoverRoot.handleClose()'
-                    },
-                    providers: [
-                        {
-                            provide: RdxPopoverCloseToken,
-                            useExisting: forwardRef(() => RdxPopoverCloseDirective)
-                        }
-                    ]
+                        '[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()',
+                        '(click)': 'handleClick($event)',
+                        '(pointerenter)': 'handlePointerEnter($event)',
+                        '(pointerleave)': 'handlePointerLeave($event)',
+                        '(pointerdown)': 'handlePointerDown()',
+                        '(pointerup)': 'handlePointerUp()',
+                        '(pointercancel)': 'handlePointerUp()'
+                    }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
 
-class RdxPopoverContentAttributesComponent {
+/**
+ * A viewport for animating content changes when a popover moves between triggers.
+ *
+ * Render one direct child inside the viewport. It is marked with `data-current`;
+ * when the active trigger changes, a DOM snapshot is retained as `data-previous`
+ * until its CSS animation or transition completes.
+ */
+class RdxPopoverViewport {
     constructor() {
-        /** @ignore */
-        this.focusTrapDirective = inject(CdkTrapFocus, { self: true });
-        /** @ignore */
-        this.popoverRoot = injectPopoverRoot();
-        /** @ignore */
-        this.name = computed(() => `rdx-popover-content-attributes-${this.popoverRoot.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /** @ignore */
-        this.disableAnimation = computed(() => !this.canAnimate(), ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
-        afterNextRender({
-            write: () => {
-                if (this.focusInitialDirective) {
-                    return this.focusInitialDirective.focus();
-                }
-                this.focusTrapDirective.focusTrap.focusFirstTabbableElement();
-            }
+        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 */ []));
+        const unregister = this.rootContext.registerViewport((previousTrigger, nextTrigger) => {
+            this.startTransition(previousTrigger, nextTrigger);
+        });
+        afterNextRender(() => {
+            this.markCurrent();
+            this.observer = new MutationObserver(() => this.markCurrent());
+            this.observer.observe(this.elementRef.nativeElement, { childList: true });
+        });
+        this.destroyRef.onDestroy(() => {
+            unregister();
+            this.observer?.disconnect();
+            this.cleanupPrevious();
         });
     }
-    /** @ignore */
-    onAnimationStart(_) {
-        this.popoverRoot.cssAnimationStatus.set(this.popoverRoot.state() === RdxPopoverState.OPEN
-            ? RdxPopoverAnimationStatus.OPEN_STARTED
-            : RdxPopoverAnimationStatus.CLOSED_STARTED);
+    startTransition(previousTrigger, nextTrigger) {
+        const current = this.current();
+        if (!current) {
+            return;
+        }
+        this.cleanupPrevious();
+        this.activationDirection.set(getActivationDirection(previousTrigger, nextTrigger));
+        const previous = current.cloneNode(true);
+        const popup = this.elementRef.nativeElement.closest('[rdxPopoverPopup]');
+        const popupRect = popup?.getBoundingClientRect();
+        previous.removeAttribute('data-current');
+        previous.setAttribute('data-previous', '');
+        previous.setAttribute('aria-hidden', 'true');
+        previous.setAttribute('inert', '');
+        removeIds(previous);
+        if (popupRect) {
+            previous.style.setProperty('--popup-width', `${popupRect.width}px`);
+            previous.style.setProperty('--popup-height', `${popupRect.height}px`);
+        }
+        previous.addEventListener('animationend', () => this.cleanupPrevious(), { once: true });
+        previous.addEventListener('transitionend', () => this.cleanupPrevious(), { once: true });
+        this.previous = previous;
+        this.elementRef.nativeElement.insertBefore(previous, current);
+        this.transitioning.set(true);
+        queueMicrotask(() => this.scheduleCleanup(previous));
     }
-    /** @ignore */
-    onAnimationEnd(_) {
-        this.popoverRoot.cssAnimationStatus.set(this.popoverRoot.state() === RdxPopoverState.OPEN
-            ? RdxPopoverAnimationStatus.OPEN_ENDED
-            : RdxPopoverAnimationStatus.CLOSED_ENDED);
+    markCurrent() {
+        this.current()?.setAttribute('data-current', '');
     }
-    /** @ignore */
-    canAnimate() {
-        return (this.popoverRoot.cssAnimation() &&
-            ((this.popoverRoot.cssOpeningAnimation() && this.popoverRoot.state() === RdxPopoverState.OPEN) ||
-                (this.popoverRoot.cssClosingAnimation() && this.popoverRoot.state() === RdxPopoverState.CLOSED)));
+    current() {
+        return Array.from(this.elementRef.nativeElement.children).find((child) => child instanceof HTMLElement && !child.hasAttribute('data-previous'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopoverContentAttributesComponent, isStandalone: true, selector: "[rdxPopoverContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)" }, properties: { "attr.role": "\"dialog\"", "attr.id": "name()", "attr.data-state": "popoverRoot.state()", "attr.data-side": "popoverRoot.popoverContentDirective().side()", "attr.data-align": "popoverRoot.popoverContentDirective().align()", "style": "disableAnimation() ? {animation: \"none !important\"} : null" } }, providers: [
-            {
-                provide: RdxPopoverContentAttributesToken,
-                useExisting: forwardRef(() => RdxPopoverContentAttributesComponent)
-            }
-        ], queries: [{ propertyName: "focusInitialDirective", first: true, predicate: RdxFocusInitialDirective, descendants: true }], hostDirectives: [{ directive: i1$1.CdkTrapFocus }], ngImport: i0, template: `
-        <ng-content />
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    scheduleCleanup(previous) {
+        if (this.previous !== previous) {
+            return;
+        }
+        const style = getComputedStyle(previous);
+        const duration = Math.max(getMaxDuration(style.animationDuration, style.animationDelay), getMaxDuration(style.transitionDuration, style.transitionDelay));
+        this.cleanupTimer = setTimeout(() => this.cleanupPrevious(), duration > 0 ? duration + 50 : 0);
+    }
+    cleanupPrevious() {
+        if (this.cleanupTimer !== undefined) {
+            clearTimeout(this.cleanupTimer);
+            this.cleanupTimer = undefined;
+        }
+        this.previous?.remove();
+        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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverContentAttributesComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverViewport, decorators: [{
+            type: Directive,
             args: [{
-                    selector: '[rdxPopoverContentAttributes]',
-                    template: `
-        <ng-content />
-    `,
+                    selector: '[rdxPopoverViewport]',
                     host: {
-                        '[attr.role]': '"dialog"',
-                        '[attr.id]': 'name()',
-                        '[attr.data-state]': 'popoverRoot.state()',
-                        '[attr.data-side]': 'popoverRoot.popoverContentDirective().side()',
-                        '[attr.data-align]': 'popoverRoot.popoverContentDirective().align()',
-                        '[style]': 'disableAnimation() ? {animation: "none !important"} : null',
-                        '(animationstart)': 'onAnimationStart($event)',
-                        '(animationend)': 'onAnimationEnd($event)'
-                    },
-                    hostDirectives: [CdkTrapFocus],
-                    providers: [
-                        {
-                            provide: RdxPopoverContentAttributesToken,
-                            useExisting: forwardRef(() => RdxPopoverContentAttributesComponent)
-                        }
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                        '[attr.data-activation-direction]': 'activationDirection()',
+                        '[attr.data-transitioning]': 'transitioning() ? "" : undefined'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { focusInitialDirective: [{
-                type: ContentChild,
-                args: [RdxFocusInitialDirective, { descendants: true }]
-            }] } });
+        }], ctorParameters: () => [] });
+function getActivationDirection(previous, next) {
+    const previousRect = previous.getBoundingClientRect();
+    const nextRect = next.getBoundingClientRect();
+    const previousCenter = getCenter(previousRect);
+    const nextCenter = getCenter(nextRect);
+    const directions = [];
+    if (nextCenter.x < previousCenter.x) {
+        directions.push('left');
+    }
+    else if (nextCenter.x > previousCenter.x) {
+        directions.push('right');
+    }
+    if (nextCenter.y < previousCenter.y) {
+        directions.push('up');
+    }
+    else if (nextCenter.y > previousCenter.y) {
+        directions.push('down');
+    }
+    return directions.join(' ') || undefined;
+}
+function removeIds(element) {
+    element.removeAttribute('id');
+    element.querySelectorAll('[id]').forEach((child) => child.removeAttribute('id'));
+}
+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.triggers = new Map();
+        this.rootTriggerCleanups = new Map();
+        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    }
+    open(triggerId) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No popover trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.open(trigger.element, trigger.payload(), triggerId, 'imperative-action', new Event('popover.open'));
+    }
+    close() {
+        this.rootContext()?.close('imperative-action', new Event('popover.close'));
+    }
+    toggle(triggerId, event = new Event('popover.toggle')) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No popover trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.toggle(triggerId, trigger.element, trigger.payload(), event);
+    }
+    registerRoot(rootContext) {
+        this.rootContext.set(rootContext);
+        this.triggers.forEach((trigger, id) => {
+            this.rootTriggerCleanups.set(id, rootContext.registerTrigger(id, trigger.element, trigger.payload));
+        });
+        return () => {
+            if (this.rootContext() === rootContext) {
+                this.rootTriggerCleanups.forEach((cleanup) => cleanup());
+                this.rootTriggerCleanups.clear();
+                this.rootContext.set(undefined);
+            }
+        };
+    }
+    registerTrigger(id, trigger, payload) {
+        this.rootTriggerCleanups.get(id)?.();
+        this.triggers.set(id, { element: trigger, payload });
+        const unregisterFromRoot = this.rootContext()?.registerTrigger(id, trigger, payload);
+        if (unregisterFromRoot) {
+            this.rootTriggerCleanups.set(id, unregisterFromRoot);
+        }
+        return () => {
+            this.rootTriggerCleanups.get(id)?.();
+            this.rootTriggerCleanups.delete(id);
+            if (this.triggers.get(id)?.element === trigger) {
+                this.triggers.delete(id);
+            }
+        };
+    }
+    context() {
+        return this.rootContext();
+    }
+}
+function createRdxPopoverHandle() {
+    return new RdxPopoverHandle();
+}
 
-const _imports = [
-    RdxPopoverArrowDirective,
-    RdxPopoverCloseDirective,
-    RdxPopoverContentDirective,
-    RdxPopoverTriggerDirective,
-    RdxPopoverRootDirective,
-    RdxPopoverAnchorDirective,
-    RdxPopoverContentAttributesComponent
+const popoverImports = [
+    RdxPopoverRoot,
+    RdxPopoverTrigger,
+    RdxPopoverPortalPresence,
+    RdxPopoverPortal,
+    RdxPopoverBackdrop,
+    RdxPopoverPositioner,
+    RdxPopoverPopup,
+    RdxPopoverArrow,
+    RdxPopoverTitle,
+    RdxPopoverDescription,
+    RdxPopoverClose,
+    RdxPopoverViewport
 ];
 class RdxPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverArrowDirective,
-            RdxPopoverCloseDirective,
-            RdxPopoverContentDirective,
-            RdxPopoverTriggerDirective,
-            RdxPopoverRootDirective,
-            RdxPopoverAnchorDirective,
-            RdxPopoverContentAttributesComponent], exports: [RdxPopoverArrowDirective,
-            RdxPopoverCloseDirective,
-            RdxPopoverContentDirective,
-            RdxPopoverTriggerDirective,
-            RdxPopoverRootDirective,
-            RdxPopoverAnchorDirective,
-            RdxPopoverContentAttributesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, imports: [RdxPopoverRoot,
+            RdxPopoverTrigger,
+            RdxPopoverPortalPresence,
+            RdxPopoverPortal,
+            RdxPopoverBackdrop,
+            RdxPopoverPositioner,
+            RdxPopoverPopup,
+            RdxPopoverArrow,
+            RdxPopoverTitle,
+            RdxPopoverDescription,
+            RdxPopoverClose,
+            RdxPopoverViewport], exports: [RdxPopoverRoot,
+            RdxPopoverTrigger,
+            RdxPopoverPortalPresence,
+            RdxPopoverPortal,
+            RdxPopoverBackdrop,
+            RdxPopoverPositioner,
+            RdxPopoverPopup,
+            RdxPopoverArrow,
+            RdxPopoverTitle,
+            RdxPopoverDescription,
+            RdxPopoverClose,
+            RdxPopoverViewport] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPopoverModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
+                    imports: [...popoverImports],
+                    exports: [...popoverImports]
                 }]
         }] });
 
@@ -1135,5 +1120,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopoverAnchorDirective, RdxPopoverArrowDirective, RdxPopoverCloseDirective, RdxPopoverContentAttributesComponent, RdxPopoverContentDirective, RdxPopoverModule, RdxPopoverRootDirective, RdxPopoverTriggerDirective };
+export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalPresence, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
 //# sourceMappingURL=radix-ng-primitives-popover.mjs.map