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

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

@@ -1,11 +1,11 @@
 import * as i0 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 { inject, computed, Directive, ElementRef, input, signal, TemplateRef, booleanAttribute, effect, untracked, output, DestroyRef, isDevMode, model, numberAttribute, ViewContainerRef, Renderer2, NgModule } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/popper';
 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 { createContext, ENTER, SPACE, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ARROW_DOWN, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, TAB, HOME, END, rdxDevError, useGraceArea, createFloatingRootContext, useTransitionStatus, provideFloatingTree, provideFloatingRootContext, RdxFloatingNodeRegistration, createCancelableChangeEventDetails, injectDocument, getMaxTransitionDuration } from '@radix-ng/primitives/core';
+import * as i1$1 from '@radix-ng/primitives/composite';
+import { RdxCompositeItem, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import * as i1$2 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
@@ -49,24 +49,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxNavigationMenuBackdrop {
     constructor() {
         this.rootContext = injectNavigationMenuRootContext();
+        const host = inject(ElementRef).nativeElement;
+        host.style.setProperty('-webkit-user-select', 'none');
+        host.style.webkitUserSelect = 'none';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuBackdrop, isStandalone: true, selector: "[rdxNavigationMenuBackdrop]", host: { properties: { "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\"" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuBackdrop, isStandalone: true, selector: "[rdxNavigationMenuBackdrop]", host: { attributes: { "role": "presentation" }, properties: { "attr.hidden": "rootContext.present() ? undefined : \"\"", "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\"", "style.user-select": "\"none\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuBackdrop]',
                     host: {
+                        role: 'presentation',
+                        '[attr.hidden]': 'rootContext.present() ? undefined : ""',
                         '[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-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[style.user-select]': '"none"'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generate a short unique id segment.
@@ -250,10 +256,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }] });
 
 /**
- * A navigation link. Closes the menu on selection unless prevented.
+ * A navigation link. Can close the menu on selection when `closeOnClick` is enabled.
  *
- * Used both as a top-level menubar item and inside content. It is a plain tabbable anchor (not part
- * of the menubar's arrow-key roving), matching Base UI.
+ * Used both as a top-level navigation item and inside content. Top-level links join the list's
+ * composite collection, matching Base UI's CompositeItem-backed NavigationMenu.Link.
  */
 class RdxNavigationMenuLink {
     constructor() {
@@ -266,7 +272,7 @@ class RdxNavigationMenuLink {
         /**
          * Whether selecting the link should close the menu.
          */
-        this.closeOnClick = input(true, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Emits when the link is selected. Call `preventDefault()` to keep the menu open.
          */
@@ -285,12 +291,13 @@ class RdxNavigationMenuLink {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuLink, isStandalone: true, selector: "[rdxNavigationMenuLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-active": "active() ? \"\" : undefined", "attr.aria-current": "active() ? \"page\" : undefined" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuLink, isStandalone: true, selector: "[rdxNavigationMenuLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-active": "active() ? \"\" : undefined", "attr.aria-current": "active() ? \"page\" : undefined" } }, hostDirectives: [{ directive: i1$1.RdxCompositeItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuLink]',
+                    hostDirectives: [RdxCompositeItem],
                     host: {
                         '[attr.data-active]': 'active() ? "" : undefined',
                         '[attr.aria-current]': 'active() ? "page" : undefined',
@@ -301,18 +308,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
 
 /**
- * Contains the navigation menu items. Renders as a menubar with roving keyboard focus.
+ * Contains the navigation menu items and coordinates composite keyboard focus between triggers.
  */
 class RdxNavigationMenuList {
     constructor() {
         this.rootContext = injectNavigationMenuRootContext();
-        this.rovingFocusGroup = inject(RdxRovingFocusGroupDirective, { self: true });
+        this.compositeRoot = inject(RdxCompositeRoot, { self: true });
+        const unregisterList = this.rootContext.registerList(inject(ElementRef).nativeElement);
+        inject(DestroyRef).onDestroy(unregisterList);
         effect(() => {
-            this.rovingFocusGroup.setOrientation(this.rootContext.orientation());
-            this.rovingFocusGroup.setDir(this.rootContext.dir());
-            this.rovingFocusGroup.setLoop(this.rootContext.loop());
+            this.compositeRoot.setOrientation(this.rootContext.orientation());
+            this.compositeRoot.setDir(this.rootContext.dir());
+            this.compositeRoot.setLoopFocus(false);
         });
     }
+    onKeydown(event) {
+        if (this.rootContext.nested) {
+            return;
+        }
+        const horizontal = this.rootContext.orientation() === 'horizontal';
+        const shouldStop = horizontal
+            ? event.key === ARROW_LEFT || event.key === ARROW_RIGHT
+            : event.key === ARROW_UP || event.key === ARROW_DOWN;
+        if (shouldStop) {
+            event.stopPropagation();
+        }
+    }
     onPointerLeave(event) {
         if (event.pointerType === 'touch') {
             return;
@@ -320,16 +341,16 @@ class RdxNavigationMenuList {
         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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuList, isStandalone: true, selector: "[rdxNavigationMenuList]", host: { listeners: { "keydown": "onKeydown($event)", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.data-orientation": "rootContext.orientation()" } }, hostDirectives: [{ directive: i1$1.RdxCompositeRoot }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuList]',
-                    hostDirectives: [RdxRovingFocusGroupDirective],
+                    hostDirectives: [RdxCompositeRoot],
                     host: {
-                        role: 'menubar',
                         '[attr.data-orientation]': 'rootContext.orientation()',
+                        '(keydown)': 'onKeydown($event)',
                         '(pointerleave)': 'onPointerLeave($event)'
                     }
                 }]
@@ -347,11 +368,10 @@ class RdxNavigationMenuPopup {
         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 */ []));
-        /** Names the menu after the active trigger so the `role="menu"` element has an accessible name. */
-        this.labelledBy = computed(() => {
+        this.id = computed(() => {
             const value = this.rootContext.value() ?? this.rootContext.previousValue();
-            return value ? this.rootContext.triggerId(value) : undefined;
-        }, ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+            return value ? `${this.rootContext.baseId}-popup-${value}` : `${this.rootContext.baseId}-popup`;
+        }, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Event handler called when the escape key is down. Can be prevented.
          */
@@ -366,7 +386,9 @@ class RdxNavigationMenuPopup {
         this.focusOutside = output();
         const destroyRef = inject(DestroyRef);
         const unregisterTransitionElement = this.rootContext.registerTransitionElement(this.elementRef.nativeElement);
+        const unregisterPopup = this.rootContext.registerPopup(this.elementRef.nativeElement);
         destroyRef.onDestroy(unregisterTransitionElement);
+        destroyRef.onDestroy(unregisterPopup);
         // 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
@@ -402,16 +424,23 @@ class RdxNavigationMenuPopup {
         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 dismissal capability.)
+     * Keyboard navigation inside the open panel mirrors Base UI's CompositeRoot-backed content:
+     * arrow keys move between panel focusables in DOM order, Home/End jump to the first/last, Up from
+     * the first item returns focus to the trigger, and Tab exits the portalled panel through the
+     * logical top-level navigation order. Escape is handled by the dismissal capability.
      */
     onKeydown(event) {
-        if (event.key !== ARROW_DOWN && event.key !== ARROW_UP && event.key !== HOME && event.key !== END) {
+        if (event.key !== ARROW_DOWN &&
+            event.key !== ARROW_UP &&
+            event.key !== ARROW_LEFT &&
+            event.key !== ARROW_RIGHT &&
+            event.key !== TAB &&
+            event.key !== HOME &&
+            event.key !== END) {
             return;
         }
         // If the key originates from a nested navigation menu rendered inside this popup, let that
-        // menu's own roving group / popup handle it — otherwise both react and focus jumps/skips.
+        // menu's own composite list / popup handle it — otherwise both react and focus jumps/skips.
         const nestedRoot = event.target.closest('[rdxNavigationMenuRoot]');
         if (nestedRoot && this.elementRef.nativeElement.contains(nestedRoot)) {
             return;
@@ -420,8 +449,12 @@ class RdxNavigationMenuPopup {
         if (candidates.length === 0) {
             return;
         }
-        event.preventDefault();
         const currentIndex = candidates.indexOf(document.activeElement);
+        if (event.key === TAB) {
+            this.handleTabKey(event, candidates, currentIndex);
+            return;
+        }
+        event.preventDefault();
         if (event.key === HOME) {
             focusFirst([candidates[0]]);
             return;
@@ -435,6 +468,18 @@ class RdxNavigationMenuPopup {
             focusFirst([candidates[next]]);
             return;
         }
+        if (event.key === ARROW_RIGHT || event.key === ARROW_LEFT) {
+            const moveNext = this.rootContext.dir() === 'rtl' ? event.key === ARROW_LEFT : event.key === ARROW_RIGHT;
+            const next = moveNext
+                ? currentIndex < candidates.length - 1
+                    ? currentIndex + 1
+                    : 0
+                : currentIndex > 0
+                    ? currentIndex - 1
+                    : candidates.length - 1;
+            focusFirst([candidates[next]]);
+            return;
+        }
         // ArrowUp: from the first item, return focus to the trigger; otherwise move to the previous.
         if (currentIndex <= 0) {
             this.rootContext.trigger()?.focus();
@@ -443,8 +488,50 @@ class RdxNavigationMenuPopup {
             focusFirst([candidates[currentIndex - 1]]);
         }
     }
+    handleTabKey(event, candidates, currentIndex) {
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        const isFirst = currentIndex <= 0;
+        const isLast = currentIndex === candidates.length - 1;
+        if (event.shiftKey) {
+            if (!isFirst) {
+                return;
+            }
+            event.preventDefault();
+            this.rootContext.trigger()?.focus();
+            return;
+        }
+        if (!isLast) {
+            return;
+        }
+        const nextItem = this.getNextTopLevelItem();
+        if (!nextItem) {
+            return;
+        }
+        event.preventDefault();
+        nextItem.focus();
+    }
+    getNextTopLevelItem() {
+        const activeTrigger = this.rootContext.trigger();
+        if (!activeTrigger) {
+            return undefined;
+        }
+        const items = this.getTopLevelItems();
+        const currentIndex = items.indexOf(activeTrigger);
+        return currentIndex === -1 ? undefined : items[currentIndex + 1];
+    }
+    getTopLevelItems() {
+        const list = this.rootContext.list();
+        if (!list) {
+            return this.rootContext.triggers();
+        }
+        return Array.from(list.querySelectorAll('[rdxNavigationMenuTrigger], [rdxNavigationMenuLink]'))
+            .filter((item) => !item.hasAttribute('disabled'))
+            .filter((item) => item.getAttribute('aria-hidden') !== 'true');
+    }
     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 }], 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: { "tabindex": "-1" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "id": "id()", "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()", "style.--popup-width.px": "rootContext.size()?.width", "style.--popup-height.px": "rootContext.size()?.height" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPopup, decorators: [{
             type: Directive,
@@ -452,9 +539,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxNavigationMenuPopup]',
                     hostDirectives: [RdxPopperContent],
                     host: {
-                        role: 'menu',
                         tabindex: '-1',
-                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[id]': 'id()',
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
@@ -463,6 +549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[attr.data-side]': 'side()',
                         '[attr.data-align]': 'align()',
+                        '[style.--popup-width.px]': 'rootContext.size()?.width',
+                        '[style.--popup-height.px]': 'rootContext.size()?.height',
                         '(pointerenter)': 'rootContext.cancelHoverClose()',
                         '(pointerleave)': 'onPointerLeave($event)',
                         '(keydown)': 'onKeydown($event)'
@@ -473,7 +561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 /**
  * Structural directive that teleports the navigation menu popup into a container (default
  * `document.body`) while the menu is open, and keeps it mounted until any CSS exit `@keyframes`
- * finishes.
+ * finishes. Set `[keepMounted]="true"` to keep the portal mounted while closed.
  *
  * Apply it with the `*` microsyntax on the positioner —
  * `<div *rdxNavigationMenuPortal rdxNavigationMenuPositioner>` — or as an explicit
@@ -481,8 +569,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * `[container]`.
  */
 class RdxNavigationMenuPortal {
+    constructor() {
+        this.rootContext = injectNavigationMenuRootContext();
+        /**
+         * Keep the portal mounted while the menu is closed.
+         */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.present = computed(() => this.rootContext.present() || this.keepMounted(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+    }
     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().present }))], exportAs: ["rdxNavigationMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortal]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxPresenceContext(() => ({ present: inject(RdxNavigationMenuPortal).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,
@@ -490,9 +586,9 @@ 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().present }))]
+                    providers: [provideRdxPresenceContext(() => ({ present: inject(RdxNavigationMenuPortal).present }))]
                 }]
-        }] });
+        }], propDecorators: { keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
 /**
  * Dev-mode guard: `rdxNavigationMenuPortal` used to be an attribute directive on a `<div>`. It is now
  * structural, so the old `<div rdxNavigationMenuPortal>` markup would silently stop portaling — fail
@@ -532,13 +628,28 @@ class RdxNavigationMenuPositioner extends RdxPopperContentWrapper {
         this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
         this.containerEl = signal(this.containerRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
         this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
+        const destroyRef = inject(DestroyRef);
         effect(() => this.triggerEl.set(this.rootContext.trigger() ?? null));
+        effect((onCleanup) => {
+            const list = this.rootContext.list();
+            const inTransit = this.graceArea.isPointerInTransit();
+            if (!list || !inTransit) {
+                return;
+            }
+            const previous = list.style.pointerEvents;
+            list.style.pointerEvents = 'none';
+            onCleanup(() => {
+                if (!destroyRef.destroyed) {
+                    list.style.pointerEvents = previous;
+                }
+            });
+        });
         // 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: "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: [
+    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", "style.--positioner-width.px": "rootContext.size()?.width", "style.--positioner-height.px": "rootContext.size()?.height" } }, providers: [
             ...provideRdxPopperContentWrapper(RdxNavigationMenuPositioner),
             provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
         ], usesInheritance: true, ngImport: i0 }); }
@@ -554,7 +665,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
-                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined'
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[style.--positioner-width.px]': 'rootContext.size()?.width',
+                        '[style.--positioner-height.px]': 'rootContext.size()?.height'
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -598,10 +711,6 @@ class RdxNavigationMenuRoot {
          */
         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.
-         */
-        this.loop = input(false, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * How long to wait before opening the menu on hover, in milliseconds.
          */
@@ -635,7 +744,10 @@ class RdxNavigationMenuRoot {
         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.list = signal(undefined, ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
         this.contents = signal(new Map(), ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
+        this.popup = signal(undefined, ...(ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []));
+        this.size = signal(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.activeContent = computed(() => {
             const value = this.value() ?? this.previousValue();
             return value ? this.contents().get(value) : undefined;
@@ -688,7 +800,7 @@ class RdxNavigationMenuRoot {
         if (change.eventDetails.isCanceled()) {
             return;
         }
-        this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
+        this.instant.set(changedTriggerWhileOpen);
         if (changedTriggerWhileOpen) {
             this.scheduleInstantReset();
             if (previousTrigger && nextTrigger) {
@@ -702,6 +814,9 @@ class RdxNavigationMenuRoot {
         this.preventUnmountOnClose.set(value === null ? change.shouldPreventUnmountOnClose() : false);
         this.value.set(value);
         this.onValueChange.emit(value);
+        if (this.nested && value === null && reason === 'link-select') {
+            this.parentRoot?.close(reason, event);
+        }
     }
     open(value, trigger, reason = 'none', event) {
         this.clearHoverTimers();
@@ -786,6 +901,14 @@ class RdxNavigationMenuRoot {
             });
         };
     }
+    registerList(list) {
+        this.list.set(list);
+        return () => {
+            if (this.list() === list) {
+                this.list.set(undefined);
+            }
+        };
+    }
     registerContent(entry) {
         this.contents.update((contents) => new Map(contents).set(entry.value, entry));
         return () => {
@@ -799,6 +922,17 @@ class RdxNavigationMenuRoot {
             });
         };
     }
+    registerPopup(element) {
+        this.popup.set(element);
+        return () => {
+            if (this.popup() === element) {
+                this.popup.set(undefined);
+            }
+        };
+    }
+    setSize(size) {
+        this.size.set(size);
+    }
     registerTransitionElement(element) {
         return this.transition.registerElement(element);
     }
@@ -851,7 +985,7 @@ class RdxNavigationMenuRoot {
         });
     }
     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 }, 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: [
+    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 }, 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: { properties: { "attr.data-orientation": "orientation()", "attr.data-nested": "nested ? \"\" : undefined", "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
@@ -879,20 +1013,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     hostDirectives: [RdxPopper, RdxFloatingNodeRegistration],
                     host: {
-                        role: 'navigation',
-                        'aria-label': 'Main',
                         '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-nested]': 'nested ? "" : undefined',
                         '[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 }] }], 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"] }] } });
+        }], 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 }] }], 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,
         baseId: root.baseId,
         orientation: root.orientation,
         dir: root.dir,
-        loop: root.loop,
         value: root.value,
         previousValue: root.previousValue.asReadonly(),
         isOpen: root.isOpen,
@@ -901,7 +1033,11 @@ function contextFor(root) {
         transitionStatus: root.transitionStatus,
         trigger: root.trigger.asReadonly(),
         triggers: root.triggers.asReadonly(),
+        list: root.list.asReadonly(),
+        contents: root.contents.asReadonly(),
         activeContent: root.activeContent,
+        popup: root.popup.asReadonly(),
+        size: root.size.asReadonly(),
         contentId: (value) => root.contentId(value),
         triggerId: (value) => root.triggerId(value),
         setValue: (value, reason, event) => root.setValue(value, reason, event),
@@ -912,8 +1048,11 @@ function contextFor(root) {
         closeOnHover: (event) => root.closeOnHover(event),
         cancelHoverOpen: () => root.cancelHoverOpen(),
         cancelHoverClose: () => root.cancelHoverClose(),
+        setSize: (size) => root.setSize(size),
         registerTrigger: (value, trigger) => root.registerTrigger(value, trigger),
+        registerList: (list) => root.registerList(list),
         registerContent: (entry) => root.registerContent(entry),
+        registerPopup: (element) => root.registerPopup(element),
         registerTransitionElement: (element) => root.registerTransitionElement(element),
         registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange)
     };
@@ -941,7 +1080,6 @@ class RdxNavigationMenuTrigger {
     constructor() {
         this.item = inject(RdxNavigationMenuItem);
         this.rootContext = injectNavigationMenuRootContext();
-        this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
         this.elementRef = inject(ElementRef);
         this.document = injectDocument();
         /**
@@ -955,9 +1093,6 @@ class RdxNavigationMenuTrigger {
         this.open = computed(() => this.item.isOpen(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         // Host element is available in the constructor; the trigger ref does not depend on inputs.
         this.item.triggerRef.set(this.elementRef.nativeElement);
-        effect(() => this.rovingFocusItem.setFocusable(!this.disabled()));
-        // `value` is an input on the item, so read it in an effect (kept in sync if it ever changes).
-        effect(() => this.rovingFocusItem.setTabStopId(this.item.value()));
         effect((onCleanup) => {
             const value = this.item.value();
             const element = this.elementRef.nativeElement;
@@ -985,17 +1120,6 @@ class RdxNavigationMenuTrigger {
         }
         this.rootContext.cancelHoverOpen();
     }
-    /**
-     * Open-follows-focus: while the menu is already open, moving keyboard focus (arrow keys via
-     * roving) to another trigger switches the shared popup to that item — matching Base UI, so the
-     * open menu visibly responds to arrow-key navigation. Focus never *opens* a closed menu.
-     */
-    onFocus() {
-        if (this.disabled() || !this.rootContext.isOpen() || this.open()) {
-            return;
-        }
-        this.rootContext.open(this.item.value(), this.elementRef.nativeElement, 'trigger-focus');
-    }
     onKeydown(event) {
         if (this.disabled()) {
             return;
@@ -1009,10 +1133,13 @@ class RdxNavigationMenuTrigger {
             }
             return;
         }
+        if (this.rootContext.nested) {
+            return;
+        }
         if (event.key === entryKey) {
             event.preventDefault();
             if (!this.open()) {
-                this.rootContext.open(this.item.value(), this.elementRef.nativeElement, 'trigger-press', event);
+                this.rootContext.open(this.item.value(), this.elementRef.nativeElement, 'list-navigation', event);
             }
             this.focusContent();
         }
@@ -1048,19 +1175,18 @@ class RdxNavigationMenuTrigger {
         requestAnimationFrame(tryFocus);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuTrigger, isStandalone: true, selector: "button[rdxNavigationMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)", "focus": "onFocus()" }, properties: { "id": "item.triggerId()", "attr.aria-controls": "item.contentId()", "attr.aria-expanded": "open()", "attr.aria-haspopup": "\"menu\"", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-popup-open": "open() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1$1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuTrigger, isStandalone: true, selector: "button[rdxNavigationMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "id": "item.triggerId()", "attr.aria-controls": "open() ? rootContext.popup()?.id : undefined", "attr.aria-expanded": "open()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-popup-open": "open() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1$1.RdxCompositeItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxNavigationMenuTrigger]',
-                    hostDirectives: [RdxRovingFocusItemDirective],
+                    hostDirectives: [RdxCompositeItem],
                     host: {
                         type: 'button',
                         '[id]': 'item.triggerId()',
-                        '[attr.aria-controls]': 'item.contentId()',
+                        '[attr.aria-controls]': 'open() ? rootContext.popup()?.id : undefined',
                         '[attr.aria-expanded]': 'open()',
-                        '[attr.aria-haspopup]': '"menu"',
                         '[attr.data-state]': 'open() ? "open" : "closed"',
                         '[attr.data-popup-open]': 'open() ? "" : undefined',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
@@ -1068,8 +1194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(click)': 'onClick($event)',
                         '(pointerenter)': 'onPointerEnter($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
-                        '(keydown)': 'onKeydown($event)',
-                        '(focus)': 'onFocus()'
+                        '(keydown)': 'onKeydown($event)'
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }] } });
@@ -1093,37 +1218,66 @@ class RdxNavigationMenuViewport {
         this.transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
         this.size = signal(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.current = null;
+        this.rendered = new Map();
         this.previousElement = null;
         this.resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => this.measure()) : null;
-        this.activeContent = computed(() => this.rootContext.activeContent(), ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
+        this.activeContent = computed(() => this.rootContext.isOpen() || this.rootContext.transitionStatus() === 'ending'
+            ? this.rootContext.activeContent()
+            : undefined, ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
+        this.contents = computed(() => this.rootContext.contents(), ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
         const unregister = this.rootContext.registerViewport((previous, next) => {
             this.pendingDirection = getActivationDirection(previous, next);
         });
         effect(() => {
             const entry = this.activeContent();
-            untracked(() => this.render(entry));
+            const contents = this.contents();
+            untracked(() => this.sync(contents, entry));
         });
         inject(DestroyRef).onDestroy(() => {
             unregister();
             this.resizeObserver?.disconnect();
             this.clearCleanupTimer();
             this.removePrevious();
-            this.current?.view.destroy();
+            this.rendered.forEach((content) => content.view.destroy());
+            this.rendered.clear();
+            this.current = null;
         });
     }
+    sync(contents, activeEntry) {
+        for (const content of [...this.rendered.values()]) {
+            if (content.value === activeEntry?.value) {
+                continue;
+            }
+            const latestEntry = contents.get(content.value);
+            if (!latestEntry || !latestEntry.forceMount()) {
+                if (content !== this.current) {
+                    this.destroyRendered(content);
+                }
+            }
+        }
+        for (const entry of contents.values()) {
+            if (entry.value !== activeEntry?.value && entry.forceMount() && !this.rendered.has(entry.value)) {
+                this.markInactive(this.createRendered(entry));
+            }
+        }
+        this.render(activeEntry);
+    }
     render(entry) {
         if (!entry) {
+            this.deactivateCurrent();
             return;
         }
         if (this.current?.value === entry.value) {
             return;
         }
-        // Snapshot the outgoing content so it can animate out as `data-previous`.
-        if (this.current) {
-            this.resizeObserver?.unobserve(this.current.measureTarget);
-            this.startLeave(this.current.element);
-            this.current.view.destroy();
-        }
+        this.deactivateCurrent();
+        const next = this.rendered.get(entry.value) ?? this.createRendered(entry);
+        this.markCurrent(next);
+        this.current = next;
+        this.resizeObserver?.observe(next.measureTarget);
+        this.measure();
+    }
+    createRendered(entry) {
         const view = this.viewContainerRef.createEmbeddedView(entry.templateRef);
         view.detectChanges();
         const element = this.renderer.createElement('div');
@@ -1138,9 +1292,48 @@ class RdxNavigationMenuViewport {
         // and stretches to the viewport, so measuring it would feed the viewport its own width back
         // and the popup would balloon to fill the page. The content root sizes to its content.
         const measureTarget = element.firstElementChild ?? element;
-        this.current = { value: entry.value, view, element, measureTarget };
-        this.resizeObserver?.observe(measureTarget);
-        this.measure();
+        const rendered = { value: entry.value, entry, view, element, measureTarget };
+        this.rendered.set(entry.value, rendered);
+        return rendered;
+    }
+    deactivateCurrent() {
+        const current = this.current;
+        if (!current) {
+            return;
+        }
+        this.resizeObserver?.unobserve(current.measureTarget);
+        if (current.entry.forceMount()) {
+            this.markInactive(current);
+        }
+        else {
+            this.startLeave(current.element);
+            current.view.destroy();
+            this.rendered.delete(current.value);
+        }
+        this.current = null;
+    }
+    markCurrent(content) {
+        content.element.hidden = false;
+        content.element.removeAttribute('aria-hidden');
+        content.element.removeAttribute('inert');
+        content.element.setAttribute('data-current', '');
+        content.element.removeAttribute('data-previous');
+    }
+    markInactive(content) {
+        this.resizeObserver?.unobserve(content.measureTarget);
+        content.element.hidden = true;
+        content.element.setAttribute('aria-hidden', 'true');
+        content.element.setAttribute('inert', '');
+        content.element.removeAttribute('data-current');
+        content.element.removeAttribute('data-previous');
+    }
+    destroyRendered(content) {
+        this.resizeObserver?.unobserve(content.measureTarget);
+        content.view.destroy();
+        this.rendered.delete(content.value);
+        if (this.current === content) {
+            this.current = null;
+        }
     }
     startLeave(element) {
         this.removePrevious();
@@ -1185,11 +1378,13 @@ class RdxNavigationMenuViewport {
         }
         const size = this.size();
         if (!size || size.width !== width || size.height !== height) {
-            this.size.set({ width, height });
+            const nextSize = { width, height };
+            this.size.set(nextSize);
+            this.rootContext.setSize(nextSize);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuViewport, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "activationDirection()", "attr.data-transitioning": "transitioning() ? \"\" : undefined", "style.--popup-width.px": "size()?.width", "style.--popup-height.px": "size()?.height" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuViewport, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "activationDirection()", "attr.data-transitioning": "transitioning() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewport, decorators: [{
             type: Directive,
@@ -1201,9 +1396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[attr.data-orientation]': 'rootContext.orientation()',
                         '[attr.data-activation-direction]': 'activationDirection()',
-                        '[attr.data-transitioning]': 'transitioning() ? "" : undefined',
-                        '[style.--popup-width.px]': 'size()?.width',
-                        '[style.--popup-height.px]': 'size()?.height'
+                        '[attr.data-transitioning]': 'transitioning() ? "" : undefined'
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });