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

package/fesm2022/radix-ng-primitives-navigation-menu.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, computed, Directive, input, signal, TemplateRef, booleanAttribute, effect, untracked, ElementRef, output, DestroyRef, isDevMode, numberAttribute, model, ViewContainerRef, Renderer2, NgModule } from '@angular/core';
+import { inject, computed, Directive, input, signal, TemplateRef, booleanAttribute, effect, untracked, ElementRef, output, DestroyRef, isDevMode, model, numberAttribute, ViewContainerRef, Renderer2, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
-import { RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopper } from '@radix-ng/primitives/popper';
-import { createContext, ENTER, SPACE, ARROW_DOWN, ARROW_UP, HOME, END, useGraceArea, useTransitionStatus, injectDocument, ARROW_LEFT, ARROW_RIGHT, getMaxTransitionDuration } from '@radix-ng/primitives/core';
+import { RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopper } from '@radix-ng/primitives/popper';
+import * as i2 from '@radix-ng/primitives/core';
+import { createContext, ENTER, SPACE, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, ARROW_DOWN, ARROW_UP, HOME, END, rdxDevError, useGraceArea, createFloatingRootContext, useTransitionStatus, provideFloatingTree, provideFloatingRootContext, RdxFloatingNodeRegistration, createCancelableChangeEventDetails, injectDocument, ARROW_LEFT, ARROW_RIGHT, getMaxTransitionDuration } from '@radix-ng/primitives/core';
 import * as i1$1 from '@radix-ng/primitives/roving-focus';
 import { RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective } from '@radix-ng/primitives/roving-focus';
-import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import * as i2 from '@radix-ng/primitives/dismissable-layer';
-import { RdxDismissableLayer, RdxDismissableLayersContextToken } from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import * as i1$2 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
 
 const [injectNavigationMenuRootContext, provideNavigationMenuRootContext] = createContext('RdxNavigationMenuRootContext', 'components/navigation-menu');
 
@@ -317,7 +317,7 @@ class RdxNavigationMenuList {
         if (event.pointerType === 'touch') {
             return;
         }
-        this.rootContext.closeOnHover();
+        this.rootContext.closeOnHover(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuList, isStandalone: true, selector: "[rdxNavigationMenuList]", host: { attributes: { "role": "menubar" }, listeners: { "pointerleave": "onPointerLeave($event)" }, properties: { "attr.data-orientation": "rootContext.orientation()" } }, hostDirectives: [{ directive: i1$1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
@@ -341,9 +341,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxNavigationMenuPopup {
     constructor() {
         this.rootContext = injectNavigationMenuRootContext();
-        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
-        this.layersContext = inject(RdxDismissableLayersContextToken);
         this.elementRef = inject(ElementRef);
         this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
@@ -352,59 +352,46 @@ class RdxNavigationMenuPopup {
             const value = this.rootContext.value() ?? this.rootContext.previousValue();
             return value ? this.rootContext.triggerId(value) : undefined;
         }, ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
-        this.dismissReason = 'none';
-        this.dismissEvent = new Event('navigation-menu.dismiss');
         /**
          * Event handler called when the escape key is down. Can be prevented.
          */
-        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        this.escapeKeyDown = output();
         /**
          * Event handler called when a pointerdown event happens outside the popup. Can be prevented.
          */
-        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.pointerDownOutside = output();
         /**
          * Event handler called when focus moves outside the popup. Can be prevented.
          */
-        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
+        this.focusOutside = output();
         const destroyRef = inject(DestroyRef);
         const unregisterTransitionElement = this.rootContext.registerTransitionElement(this.elementRef.nativeElement);
         destroyRef.onDestroy(unregisterTransitionElement);
-        // Register the triggers as dismissable-layer branches so a pointer-down or (async) focus move
-        // onto a trigger counts as "inside" — otherwise focusing a sibling trigger to switch items,
-        // or returning focus to the trigger, would dismiss the menu. See dismissable-layer gotcha.
-        effect(() => {
-            const triggers = this.rootContext.triggers();
-            untracked(() => this.layersContext.branches.update((branches) => {
-                const next = new Set(branches);
-                triggers.forEach((trigger) => next.add(trigger));
-                return [...next];
-            }));
-        });
-        destroyRef.onDestroy(() => {
-            const triggers = this.rootContext.triggers();
-            this.layersContext.branches.update((branches) => branches.filter((el) => !triggers.includes(el)));
-        });
-        this.dismissableLayer.escapeKeyDown.subscribe((event) => {
-            this.dismissReason = 'escape-key';
-            this.dismissEvent = event;
-        });
-        this.dismissableLayer.pointerDownOutside.subscribe((event) => {
-            this.dismissReason = 'outside-press';
-            this.dismissEvent = event;
-        });
-        this.dismissableLayer.focusOutside.subscribe((event) => {
-            this.dismissReason = 'focus-out';
-            this.dismissEvent = event;
-        });
-        this.dismissableLayer.dismiss.subscribe(() => {
-            const reason = this.dismissReason;
-            const event = this.dismissEvent;
-            this.dismissReason = 'none';
-            this.dismissEvent = new Event('navigation-menu.dismiss');
-            this.rootContext.close(reason, event);
-            // Return focus to the trigger after an Escape dismissal.
-            if (reason === 'escape-key') {
-                this.rootContext.trigger()?.focus();
+        // The popup is this layer's floating element (the inside surface for containment checks). The
+        // triggers are registered as "inside" on the shared root context (in `registerTrigger`), so a
+        // press / focus on a sibling trigger to switch items — or back on the active trigger — never
+        // counts as an outside dismissal. This replaces the legacy dismissable-layer `branches` registry.
+        this.floatingContext.setFloatingElement(this.elementRef.nativeElement);
+        // Dismissal (ADR 0015): Escape, an outside press, or focus moving outside closes the menu.
+        // Navigation Menu registers its FloatingNode on the root, matching Base UI's
+        // NavigationMenuRoot → FloatingNode wiring. This lets nested roots participate in parent/child
+        // ownership even though each root has one shared popup.
+        // It does not trap focus, so it closes on focus-out like a non-modal menu.
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            escapeKey: () => true,
+            outsidePress: () => true,
+            outsidePressEvent: () => 'intentional',
+            focusOutside: () => true,
+            onEscapeKeyDown: (event) => this.escapeKeyDown.emit(event),
+            onPointerDownOutside: (event) => this.pointerDownOutside.emit(event),
+            onFocusOutside: (event) => this.focusOutside.emit(event),
+            onDismiss: (reason, event) => {
+                const navReason = reason === 'escape-key' ? 'escape-key' : reason === 'focus-outside' ? 'focus-out' : 'outside-press';
+                this.rootContext.close(navReason, event);
+                // Return focus to the trigger after an Escape dismissal.
+                if (reason === 'escape-key') {
+                    this.rootContext.trigger()?.focus();
+                }
             }
         });
     }
@@ -412,12 +399,12 @@ class RdxNavigationMenuPopup {
         if (event.pointerType === 'touch') {
             return;
         }
-        this.rootContext.closeOnHover();
+        this.rootContext.closeOnHover(event);
     }
     /**
      * Keyboard navigation inside the open panel: Down/Up move between the panel's focusable items in
      * DOM order, Home/End jump to the first/last, and Up from the first item returns focus to the
-     * trigger. (Tab keeps working natively; Escape is handled by the dismissable layer.)
+     * trigger. (Tab keeps working natively; Escape is handled by the dismissal capability.)
      */
     onKeydown(event) {
         if (event.key !== ARROW_DOWN && event.key !== ARROW_UP && event.key !== HOME && event.key !== END) {
@@ -457,13 +444,13 @@ class RdxNavigationMenuPopup {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPopup, isStandalone: true, selector: "[rdxNavigationMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside" }, host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-labelledby": "labelledBy()", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-side": "side()", "attr.data-align": "align()" } }, hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPopup, isStandalone: true, selector: "[rdxNavigationMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside" }, host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-labelledby": "labelledBy()", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-side": "side()", "attr.data-align": "align()" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuPopup]',
-                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
+                    hostDirectives: [RdxPopperContent],
                     host: {
                         role: 'menu',
                         tabindex: '-1',
@@ -495,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class RdxNavigationMenuPortal {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectNavigationMenuRootContext().isOpen }))], exportAs: ["rdxNavigationMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectNavigationMenuRootContext().present }))], exportAs: ["rdxNavigationMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortal, decorators: [{
             type: Directive,
@@ -503,7 +490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'ng-template[rdxNavigationMenuPortal]',
                     exportAs: 'rdxNavigationMenuPortal',
                     hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
-                    providers: [provideRdxPresenceContext(() => ({ present: injectNavigationMenuRootContext().isOpen }))]
+                    providers: [provideRdxPresenceContext(() => ({ present: injectNavigationMenuRootContext().present }))]
                 }]
         }] });
 /**
@@ -514,10 +501,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxNavigationMenuPortalMisuseGuard {
     constructor() {
         if (isDevMode()) {
-            throw new Error('[rdxNavigationMenuPortal] is now a structural directive. ' +
+            rdxDevError('navigation-menu/portal-on-element', '`rdxNavigationMenuPortal` is now a structural directive. ' +
                 'Use `*rdxNavigationMenuPortal` on the positioner element or ' +
-                '`<ng-template rdxNavigationMenuPortal>`. rdxNavigationMenuPortalPresence has been removed. ' +
-                'See https://radix-ng.com/components/navigation-menu.md');
+                '`<ng-template rdxNavigationMenuPortal>`. rdxNavigationMenuPortalPresence has been removed.', 'components/navigation-menu');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -532,123 +518,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 /**
  * Positions the shared popup against the active trigger.
+ *
+ * A "thin" positioner (ADR 0012): it inherits the popper positioning surface (inputs, `placed`
+ * output, unified vars + placement attrs) from {@link RdxPopperContentWrapper} and adds the
+ * navigation-menu defaults, the open/closed/instant state attributes, and the grace-area hover
+ * bridge. It exposes no legacy `--radix-*` aliases.
  */
-class RdxNavigationMenuPositioner {
+class RdxNavigationMenuPositioner extends RdxPopperContentWrapper {
     constructor() {
+        super();
         this.rootContext = injectNavigationMenuRootContext();
-        this.wrapper = inject(RdxPopperContentWrapper);
-        this.elementRef = inject(ElementRef);
+        this.containerRef = inject(ElementRef);
         this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
-        this.containerEl = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(this.containerRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
         this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
-        /**
-         * An element to position the popup against. Defaults to the active trigger.
-         */
-        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
-        /**
-         * The preferred side of the trigger to render against when open.
-         */
-        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        /**
-         * Distance between the trigger and the popup in pixels.
-         */
-        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * How to align the popup relative to the specified side.
-         */
-        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        /**
-         * An offset in pixels from the `start` or `end` alignment options.
-         */
-        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Minimum distance to maintain between the arrow and the edges of the popup.
-         */
-        this.arrowPadding = input(5, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /**
-         * Whether to override side and alignment preferences to prevent collisions.
-         */
-        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * The element used as the collision boundary.
-         */
-        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
-        /**
-         * Distance in pixels from the boundary edges where collision detection should occur.
-         */
-        this.collisionPadding = input(5, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
-        /**
-         * The sticky behavior on the alignment axis.
-         */
-        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to hide the popup when the trigger becomes fully occluded.
-         */
-        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * The CSS position strategy used by Floating UI.
-         */
-        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to update position on every animation frame.
-         */
-        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
         effect(() => this.triggerEl.set(this.rootContext.trigger() ?? null));
         // Keep the menu open while the pointer travels from the trigger to the popup; close once it
         // leaves the grace area between them.
         this.graceArea.onPointerExit(() => this.rootContext.closeOnHover());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuPositioner, isStandalone: true, selector: "[rdxNavigationMenuPositioner]", 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 } }, 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        }" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPositioner, isStandalone: true, selector: "[rdxNavigationMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined" } }, providers: [
+            ...provideRdxPopperContentWrapper(RdxNavigationMenuPositioner),
             provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
-        ], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["anchor", "anchor", "side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "positionStrategy", "positionStrategy", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+        ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuPositioner]',
                     providers: [
+                        ...provideRdxPopperContentWrapper(RdxNavigationMenuPositioner),
                         provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
                     ],
-                    hostDirectives: [
-                        {
-                            directive: RdxPopperContentWrapper,
-                            inputs: [
-                                'anchor',
-                                'side',
-                                'sideOffset',
-                                'align',
-                                'alignOffset',
-                                'arrowPadding',
-                                'avoidCollisions',
-                                'collisionBoundary',
-                                'collisionPadding',
-                                'sticky',
-                                'hideWhenDetached',
-                                'positionStrategy',
-                                'updatePositionStrategy'
-                            ]
-                        }
-                    ],
                     host: {
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-anchor-hidden]': 'wrapper.anchorHidden() ? "" : undefined',
-                        '[attr.data-align]': 'wrapper.placedAlign()',
-                        '[attr.data-side]': 'wrapper.placedSide()',
-                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
-                        '[style]': `{
-            '--anchor-width': 'var(--radix-popper-anchor-width)',
-            '--anchor-height': 'var(--radix-popper-anchor-height)',
-            '--available-width': 'var(--radix-popper-available-width)',
-            '--available-height': 'var(--radix-popper-available-height)',
-            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',
-            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',
-            '--transform-origin': 'var(--radix-popper-transform-origin)'
-        }`
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined'
                     }
                 }]
-        }], 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 }] }] } });
+        }], ctorParameters: () => [] });
 
 const context = () => contextFor(inject(RdxNavigationMenuRoot));
 /**
@@ -663,6 +572,12 @@ class RdxNavigationMenuRoot {
         this.popper = inject(RdxPopper);
         this.destroyRef = inject(DestroyRef);
         this.parentRoot = inject(RdxNavigationMenuRoot, { optional: true, skipSelf: true });
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
+        /** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.isOpen()
+        });
         /** Whether this root is nested inside another navigation menu's content. */
         this.nested = !!this.parentRoot;
         this.baseId = `rdx-nav-menu-${generateId()}`;
@@ -681,7 +596,8 @@ class RdxNavigationMenuRoot {
         /**
          * The reading direction of the navigation menu.
          */
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+        this.dir = injectDirection(this.dirInput);
         /**
          * Whether keyboard navigation loops from the last item back to the first and vice versa.
          */
@@ -715,6 +631,8 @@ class RdxNavigationMenuRoot {
         this.transitionStatus = this.transition.status;
         this.previousValue = signal(null, ...(ngDevMode ? [{ debugName: "previousValue" }] : /* istanbul ignore next */ []));
         this.isOpen = computed(() => this.value() !== null, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.isOpen() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
         this.contents = signal(new Map(), ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
@@ -741,6 +659,9 @@ class RdxNavigationMenuRoot {
         });
         // Anchor the shared popper to the active trigger.
         effect(() => this.popper.anchorOverride.set(this.trigger()));
+        // Keep the dismissal reference in sync with the active trigger (the anchor) so a press / focus on
+        // it counts as "inside" (ADR 0015). The full trigger registry is maintained in `registerTrigger`.
+        effect(() => this.floatingContext.setReferenceElement(this.trigger() ?? null));
         this.destroyRef.onDestroy(() => {
             this.clearHoverTimers();
             if (this.instantFrame !== undefined) {
@@ -762,6 +683,11 @@ class RdxNavigationMenuRoot {
         const previousTrigger = this.trigger();
         const nextTrigger = value ? this.registeredTriggers.get(value) : undefined;
         const changedTriggerWhileOpen = previous !== null && value !== null && previousTrigger !== nextTrigger;
+        const change = this.createOpenChangeEvent(value, reason, event, nextTrigger ?? previousTrigger);
+        this.onOpenChange.emit(change.payload);
+        if (change.eventDetails.isCanceled()) {
+            return;
+        }
         this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
         if (changedTriggerWhileOpen) {
             this.scheduleInstantReset();
@@ -773,9 +699,9 @@ class RdxNavigationMenuRoot {
             this.trigger.set(nextTrigger);
         }
         this.previousValue.set(previous);
+        this.preventUnmountOnClose.set(value === null ? change.shouldPreventUnmountOnClose() : false);
         this.value.set(value);
         this.onValueChange.emit(value);
-        this.onOpenChange.emit({ value, open: value !== null, reason, event });
     }
     open(value, trigger, reason = 'none', event) {
         this.clearHoverTimers();
@@ -812,7 +738,11 @@ class RdxNavigationMenuRoot {
         }
         this.openTimer = setTimeout(() => this.open(value, trigger, 'trigger-hover', event), this.delay());
     }
-    closeOnHover() {
+    closeOnHover(event) {
+        if (event && this.isInsideOpenChild(event.relatedTarget)) {
+            this.cancelHoverClose();
+            return;
+        }
         this.clearOpenTimer();
         this.clearCloseTimer();
         this.closeTimer = setTimeout(() => this.close('list-leave', new Event('navigation-menu.hover-close')), this.closeDelay());
@@ -826,6 +756,9 @@ class RdxNavigationMenuRoot {
     registerTrigger(value, trigger) {
         this.registeredTriggers.set(value, trigger);
         this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        // Mark every trigger as "inside" the floating layer (ADR 0015): a press / focus on a sibling
+        // trigger (to switch items) or back on the active trigger must not count as an outside dismissal.
+        this.floatingContext.triggers.add(trigger);
         if (this.value() === value) {
             this.trigger.set(trigger);
         }
@@ -834,6 +767,7 @@ class RdxNavigationMenuRoot {
                 this.registeredTriggers.delete(value);
             }
             this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            this.floatingContext.triggers.delete(trigger);
             if (this.destroyRef.destroyed || this.value() !== value) {
                 return;
             }
@@ -872,6 +806,9 @@ class RdxNavigationMenuRoot {
         this.viewportTriggerChange.add(onTriggerChange);
         return () => this.viewportTriggerChange.delete(onTriggerChange);
     }
+    createOpenChangeEvent(value, reason, event, trigger) {
+        return createNavigationMenuOpenChangeEvent(value, reason, event, trigger);
+    }
     scheduleInstantReset() {
         if (this.instantFrame !== undefined) {
             cancelAnimationFrame(this.instantFrame);
@@ -899,16 +836,48 @@ class RdxNavigationMenuRoot {
             this.closeTimer = undefined;
         }
     }
+    isInsideOpenChild(target) {
+        if (!(target instanceof Node)) {
+            return false;
+        }
+        const node = this.registration?.node();
+        if (!node) {
+            return false;
+        }
+        return node.tree.children(node, { onlyOpen: true }).some((child) => {
+            const context = child.context;
+            const floating = context?.floatingElement;
+            return !!floating && floating.contains(target);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuRoot, isStandalone: true, selector: "[rdxNavigationMenuRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", 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 } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, host: { attributes: { "role": "navigation", "aria-label": "Main" }, properties: { "attr.data-orientation": "orientation()", "attr.dir": "dir()" } }, providers: [provideNavigationMenuRootContext(context)], exportAs: ["rdxNavigationMenuRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuRoot, isStandalone: true, selector: "[rdxNavigationMenuRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", 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 } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, host: { attributes: { "role": "navigation", "aria-label": "Main" }, properties: { "attr.data-orientation": "orientation()", "attr.dir": "dir()" } }, providers: [
+            provideNavigationMenuRootContext(context),
+            // Base UI wraps every NavigationMenu.Root in a FloatingNode and only creates FloatingTree at the
+            // top boundary. `provideFloatingTree()` is inherit-or-create, so nested navigation menus join the
+            // parent's tree while the top-level menu starts the coordination store.
+            provideFloatingTree(),
+            // New floating foundation (ADR 0015/0017) — dismissal reads this shared root context, while the
+            // root-level node above gives nested navigation menus real parent/child ownership.
+            provideFloatingRootContext(() => inject(RdxNavigationMenuRoot).floatingContext)
+        ], exportAs: ["rdxNavigationMenuRoot"], hostDirectives: [{ directive: i1.RdxPopper }, { directive: i2.RdxFloatingNodeRegistration }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuRoot]',
                     exportAs: 'rdxNavigationMenuRoot',
-                    providers: [provideNavigationMenuRootContext(context)],
-                    hostDirectives: [RdxPopper],
+                    providers: [
+                        provideNavigationMenuRootContext(context),
+                        // Base UI wraps every NavigationMenu.Root in a FloatingNode and only creates FloatingTree at the
+                        // top boundary. `provideFloatingTree()` is inherit-or-create, so nested navigation menus join the
+                        // parent's tree while the top-level menu starts the coordination store.
+                        provideFloatingTree(),
+                        // New floating foundation (ADR 0015/0017) — dismissal reads this shared root context, while the
+                        // root-level node above gives nested navigation menus real parent/child ownership.
+                        provideFloatingRootContext(() => inject(RdxNavigationMenuRoot).floatingContext)
+                    ],
+                    hostDirectives: [RdxPopper, RdxFloatingNodeRegistration],
                     host: {
                         role: 'navigation',
                         'aria-label': 'Main',
@@ -916,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.dir]': 'dir()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 function contextFor(root) {
     return {
         nested: root.nested,
@@ -927,6 +896,7 @@ function contextFor(root) {
         value: root.value,
         previousValue: root.previousValue.asReadonly(),
         isOpen: root.isOpen,
+        present: root.present,
         instant: root.instant.asReadonly(),
         transitionStatus: root.transitionStatus,
         trigger: root.trigger.asReadonly(),
@@ -939,7 +909,7 @@ function contextFor(root) {
         close: (reason, event) => root.close(reason, event),
         toggle: (value, trigger, event) => root.toggle(value, trigger, event),
         openOnHover: (value, trigger, event) => root.openOnHover(value, trigger, event),
-        closeOnHover: () => root.closeOnHover(),
+        closeOnHover: (event) => root.closeOnHover(event),
         cancelHoverOpen: () => root.cancelHoverOpen(),
         cancelHoverClose: () => root.cancelHoverClose(),
         registerTrigger: (value, trigger) => root.registerTrigger(value, trigger),
@@ -948,6 +918,21 @@ function contextFor(root) {
         registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange)
     };
 }
+function createNavigationMenuOpenChangeEvent(value, reason, event, trigger) {
+    const change = createCancelableChangeEventDetails(reason, event, trigger);
+    return {
+        payload: {
+            value,
+            open: value !== null,
+            reason,
+            event: change.eventDetails.event,
+            trigger,
+            eventDetails: change.eventDetails
+        },
+        eventDetails: change.eventDetails,
+        shouldPreventUnmountOnClose: change.shouldPreventUnmountOnClose
+    };
+}
 
 /**
  * A button that opens its item's content in the shared popup.