@radix-ng/primitives 0.51.0 → 1.0.0-beta.1

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

@@ -1,248 +1,105 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, InjectionToken, inject, ElementRef, input, contentChild, signal, Directive, NgZone, TemplateRef, booleanAttribute, Renderer2, computed, effect, untracked, runInInjectionContext, contentChildren, forwardRef, numberAttribute, output, ViewContainerRef, DestroyRef, NgModule } from '@angular/core';
-import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
-import { injectDocument, ESCAPE, ENTER, SPACE, TAB, injectWindow, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '@radix-ng/primitives/core';
-import * as i1 from '@radix-ng/primitives/roving-focus';
-import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
-import { FocusKeyManager } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, map, debounce, timer, tap } from 'rxjs';
-import { usePresence } from '@radix-ng/primitives/presence';
+import { inject, computed, Directive, input, signal, TemplateRef, booleanAttribute, effect, untracked, ElementRef, output, DestroyRef, numberAttribute, model, 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 * 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 * as i1$2 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$3 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
 
-class RdxNavigationMenuFocusProxyComponent {
-    constructor() {
-        this.triggerElement = null;
-        this.contentElement = null;
-        this.proxyFocus = new EventEmitter();
-    }
-    onFocus(event) {
-        const focusEvent = event;
-        const prevFocusedElement = focusEvent.relatedTarget;
-        const wasTriggerFocused = prevFocusedElement === this.triggerElement;
-        const wasFocusFromContent = this.contentElement ? this.contentElement.contains(prevFocusedElement) : false;
-        if (wasTriggerFocused || !wasFocusFromContent) {
-            this.proxyFocus.emit(wasTriggerFocused ? 'start' : 'end');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuFocusProxyComponent, isStandalone: true, selector: "rdx-navigation-menu-focus-proxy", inputs: { triggerElement: "triggerElement", contentElement: "contentElement" }, outputs: { proxyFocus: "proxyFocus" }, ngImport: i0, template: `
-        <span
-            [attr.tabindex]="0"
-            [attr.aria-hidden]="true"
-            (focus)="onFocus($event)"
-            rdxVisuallyHidden
-            feature="focusable"
-        ></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: RdxVisuallyHiddenDirective, selector: "[rdxVisuallyHidden]", inputs: ["feature"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuFocusProxyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'rdx-navigation-menu-focus-proxy',
-                    template: `
-        <span
-            [attr.tabindex]="0"
-            [attr.aria-hidden]="true"
-            (focus)="onFocus($event)"
-            rdxVisuallyHidden
-            feature="focusable"
-        ></span>
-    `,
-                    imports: [RdxVisuallyHiddenDirective]
-                }]
-        }], propDecorators: { triggerElement: [{
-                type: Input
-            }], contentElement: [{
-                type: Input
-            }], proxyFocus: [{
-                type: Output
-            }] } });
-class RdxNavigationMenuAriaOwnsComponent {
+const [injectNavigationMenuRootContext, provideNavigationMenuRootContext] = createContext('RdxNavigationMenuRootContext');
+
+/**
+ * An optional arrow element pointing toward the active trigger.
+ */
+class RdxNavigationMenuArrow {
     constructor() {
-        this.contentId = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuAriaOwnsComponent, isStandalone: true, selector: "rdx-navigation-menu-aria-owns", inputs: { contentId: "contentId" }, ngImport: i0, template: `
-        <span [attr.aria-owns]="contentId" rdxVisuallyHidden feature="fully-hidden"></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: RdxVisuallyHiddenDirective, selector: "[rdxVisuallyHidden]", inputs: ["feature"] }] }); }
+        this.rootContext = injectNavigationMenuRootContext();
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuArrow, isStandalone: true, selector: "[rdxNavigationMenuArrow]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuAriaOwnsComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuArrow, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'rdx-navigation-menu-aria-owns',
-                    template: `
-        <span [attr.aria-owns]="contentId" rdxVisuallyHidden feature="fully-hidden"></span>
-    `,
-                    imports: [RdxVisuallyHiddenDirective]
+                    selector: '[rdxNavigationMenuArrow]',
+                    hostDirectives: [RdxPopperArrow],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-uncentered]': 'uncentered() ? "" : undefined'
+                    }
                 }]
-        }], propDecorators: { contentId: [{
-                type: Input
-            }] } });
-
-const RDX_NAVIGATION_MENU_TOKEN = new InjectionToken('RdxNavigationMenuToken');
-function injectNavigationMenu() {
-    return inject(RDX_NAVIGATION_MENU_TOKEN);
-}
-function isRootNavigationMenu(context) {
-    return context.isRootMenu;
-}
-function provideNavigationMenuContext(provider) {
-    return {
-        provide: RDX_NAVIGATION_MENU_TOKEN,
-        useExisting: provider
-    };
-}
+        }] });
 
-var RdxNavigationMenuAnimationStatus;
-(function (RdxNavigationMenuAnimationStatus) {
-    RdxNavigationMenuAnimationStatus["OPEN_STARTED"] = "open_started";
-    RdxNavigationMenuAnimationStatus["OPEN_ENDED"] = "open_ended";
-    RdxNavigationMenuAnimationStatus["CLOSED_STARTED"] = "closed_started";
-    RdxNavigationMenuAnimationStatus["CLOSED_ENDED"] = "closed_ended";
-})(RdxNavigationMenuAnimationStatus || (RdxNavigationMenuAnimationStatus = {}));
 /**
- * A stub class solely used to query a single type of focusable element in the navigation menu.
+ * An optional backdrop rendered behind the popup.
  */
-class RdxNavigationMenuFocusableOption {
-    focus() {
-        throw new Error('Method not implemented.');
+class RdxNavigationMenuBackdrop {
+    constructor() {
+        this.rootContext = injectNavigationMenuRootContext();
     }
+    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 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuBackdrop]',
+                    host: {
+                        '[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"'
+                    }
+                }]
+        }] });
 
-const ROOT_CONTENT_DISMISS$1 = 'navigationMenu.rootContentDismiss';
 /**
- * Generate a unique ID
+ * Generate a short unique id segment.
  */
 function generateId() {
     return Math.random().toString(36).substring(2, 11);
 }
 /**
- * Get the open state for data-state attribute
- */
-function getOpenStateLabel(open) {
-    return open ? 'open' : 'closed';
-}
-/**
- * Create a trigger ID from base ID and value
- */
-function makeTriggerId(baseId, value) {
-    return `${baseId}-trigger-${value}`;
-}
-/**
- * Create a content ID from base ID and value
- */
-function makeContentId(baseId, value) {
-    return `${baseId}-content-${value}`;
-}
-/**
- * Get the motion attribute for animations
- */
-function getMotionAttribute(currentValue, previousValue, itemValue, itemValues, dir) {
-    // reverse values in RTL
-    const values = dir === 'rtl' ? [...itemValues].reverse() : itemValues;
-    const currentIndex = currentValue !== null ? values.indexOf(currentValue) : -1;
-    const prevIndex = previousValue !== null ? values.indexOf(previousValue) : -1;
-    const isSelected = itemValue === currentValue;
-    const wasSelected = itemValue === previousValue && previousValue !== null;
-    // Preserve motion attribute for items not directly involved in the transition
-    // (This matches React's behaviour, using a ref/signal might be needed
-    // in the component using this function to fully replicate React's prevMotionAttributeRef)
-    // For now, returning null if not involved, as per the original code's intent here.
-    if (!isSelected && !wasSelected) {
-        return null;
-    }
-    // handle transitions between items
-    if (currentIndex !== -1 && prevIndex !== -1) {
-        // if moving to this item (isSelected)
-        if (isSelected) {
-            return currentIndex > prevIndex ? 'from-end' : 'from-start';
-        }
-        // if moving away from this item (wasSelected)
-        if (wasSelected) {
-            return currentIndex > prevIndex ? 'to-start' : 'to-end';
-        }
-    }
-    // handle initial open (prevIndex is -1, currentIndex is valid)
-    if (isSelected && prevIndex === -1) {
-        return null;
-    }
-    // handle closing entirely (currentIndex is -1, prevIndex is valid)
-    if (wasSelected && currentIndex === -1) {
-        return null;
-    }
-    // fallback if none of the above conditions met (should ideally not happen with clear states)
-    return null;
-}
-/**
- * Focus the first element in a list of candidates
- * @param candidates Array of elements that can receive focus
- * @param preventScroll Whether to prevent scrolling when focusing
- * @param activateKeyboardNav Whether to dispatch a dummy keydown event to activate keyboard navigation handlers
- * @returns Whether focus was successfully moved
- */
-function focusFirst(candidates, preventScroll = false, activateKeyboardNav = true) {
-    const prevFocusedElement = document.activeElement;
-    // sort candidates by tabindex to ensure proper order
-    const sortedCandidates = [...candidates].sort((a, b) => {
-        const aIndex = a.tabIndex || 0;
-        const bIndex = b.tabIndex || 0;
-        return aIndex - bIndex;
-    });
-    const success = sortedCandidates.some((candidate) => {
-        // if focus is already where we want it, do nothing
-        if (candidate === prevFocusedElement)
-            return true;
-        try {
-            candidate.focus({ preventScroll });
-            return document.activeElement !== prevFocusedElement;
-        }
-        catch (e) {
-            console.error('Error focusing element:', e);
-            return false;
-        }
-    });
-    // if focus was moved successfully and we want to activate keyboard navigation,
-    // dispatch a dummy keypress to ensure keyboard handlers are activated
-    if (success && activateKeyboardNav && document.activeElement !== prevFocusedElement) {
-        try {
-            // dispatch a no-op keydown event to activate any keyboard handlers
-            document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {
-                bubbles: true,
-                cancelable: true,
-                key: 'Tab',
-                code: 'Tab'
-            }));
-        }
-        catch (e) {
-            console.error('Error dispatching keyboard event:', e);
-        }
-    }
-    return success;
-}
-/**
- * Get all tabbable candidates in a container
+ * Collect the tabbable elements inside a container, in DOM order, skipping hidden ones.
  */
 function getTabbableCandidates(container) {
-    if (!container || !container.querySelectorAll)
+    if (!container || !container.querySelectorAll) {
         return [];
+    }
     const TABBABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), ' +
         'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), ' +
         '[contenteditable="true"]:not([tabindex="-1"])';
-    // use querySelector for better browser support
     const elements = Array.from(container.querySelectorAll(TABBABLE_SELECTOR));
-    // filter out elements that are hidden, have display:none, etc.
     return elements.filter((element) => {
-        if (element.tabIndex < 0)
+        if (element.tabIndex < 0) {
             return false;
-        if (element.hasAttribute('disabled'))
+        }
+        if (element.hasAttribute('disabled')) {
             return false;
-        if (element.hasAttribute('aria-hidden') && element.getAttribute('aria-hidden') === 'true')
+        }
+        if (element.getAttribute('aria-hidden') === 'true') {
             return false;
-        // Check if element or any parent is hidden
+        }
         let current = element;
         while (current) {
             const style = window.getComputedStyle(current);
-            if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+            if (style.display === 'none' || style.visibility === 'hidden') {
                 return false;
             }
             current = current.parentElement;
@@ -251,1547 +108,1189 @@ function getTabbableCandidates(container) {
     });
 }
 /**
- * Remove elements from tab order and return a function to restore them
+ * Focus the first focusable candidate, returning whether focus moved.
  */
-function removeFromTabOrder(candidates) {
-    const originalValues = new Map();
-    candidates.forEach((candidate) => {
-        // Store original tabindex
-        originalValues.set(candidate, candidate.getAttribute('tabindex'));
-        // Set to -1 to remove from tab order
-        candidate.setAttribute('tabindex', '-1');
+function focusFirst(candidates, preventScroll = false) {
+    const previouslyFocused = document.activeElement;
+    return candidates.some((candidate) => {
+        if (candidate === previouslyFocused) {
+            return true;
+        }
+        candidate.focus({ preventScroll });
+        return document.activeElement !== previouslyFocused;
     });
-    // Return restore function
-    return () => {
-        candidates.forEach((candidate) => {
-            const originalValue = originalValues.get(candidate);
-            if (originalValue == null) {
-                candidate.removeAttribute('tabindex');
-            }
-            else {
-                candidate.setAttribute('tabindex', originalValue);
-            }
-        });
-    };
 }
 /**
- * Wrap array around itself at given start index
+ * Derive a slide direction (e.g. `"left"`, `"right up"`) from the relative position of two triggers.
+ * Used by the viewport to animate content as the active item changes.
+ */
+function getActivationDirection(previous, next) {
+    const previousCenter = getCenter(previous.getBoundingClientRect());
+    const nextCenter = getCenter(next.getBoundingClientRect());
+    const directions = [];
+    if (nextCenter.x < previousCenter.x) {
+        directions.push('left');
+    }
+    else if (nextCenter.x > previousCenter.x) {
+        directions.push('right');
+    }
+    if (nextCenter.y < previousCenter.y) {
+        directions.push('up');
+    }
+    else if (nextCenter.y > previousCenter.y) {
+        directions.push('down');
+    }
+    return directions.join(' ') || undefined;
+}
+/**
+ * Remove `id` from an element and all its descendants (used when cloning content for an exit
+ * animation, to avoid duplicate ids in the document).
  */
-function wrapArray(array, startIndex) {
-    return array.map((_, index) => array[(startIndex + index) % array.length]);
+function removeIds(element) {
+    element.removeAttribute('id');
+    element.querySelectorAll('[id]').forEach((child) => child.removeAttribute('id'));
+}
+function getCenter(rect) {
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
 }
 
-class RdxNavigationMenuItemDirective {
+/**
+ * A single navigation menu item. Holds a trigger + content pair, or a standalone link.
+ */
+class RdxNavigationMenuItem {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.context = injectNavigationMenu();
-        this.value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.rootContext = injectNavigationMenuRootContext();
         /**
-         * @ignore
+         * A unique value that identifies the item. Falls back to a generated id.
          */
-        this.triggerOrLink = contentChild(RdxNavigationMenuFocusableOption, ...(ngDevMode ? [{ debugName: "triggerOrLink" }] : /* istanbul ignore next */ []));
+        this.value = input('', { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: (value) => value || `item-${generateId()}` });
+        /** The trigger element, set by the trigger directive. */
         this.triggerRef = signal(null, ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
-        this.contentRef = signal(null, ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
-        this.focusProxyRef = signal(null, ...(ngDevMode ? [{ debugName: "focusProxyRef" }] : /* istanbul ignore next */ []));
-        this.wasEscapeCloseRef = signal(false, ...(ngDevMode ? [{ debugName: "wasEscapeCloseRef" }] : /* istanbul ignore next */ []));
-        this._restoreContentTabOrderRef = signal(null, ...(ngDevMode ? [{ debugName: "_restoreContentTabOrderRef" }] : /* istanbul ignore next */ []));
-    }
-    get restoreContentTabOrderRef() {
-        return this._restoreContentTabOrderRef;
-    }
-    /**
-     * Handle keyboard entry into content from trigger
-     */
-    onEntryKeyDown() {
-        // Check if we're using a viewport in a root menu
-        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
-            const viewport = this.context.viewport();
-            if (viewport) {
-                // find tabbable elements in the viewport
-                const candidates = getTabbableCandidates(viewport);
-                if (candidates.length) {
-                    this.ensureTabOrder();
-                    // focus the first element
-                    focusFirst(candidates);
-                    return;
-                }
-            }
-        }
-        // fallback to content if no viewport or no tabbable elements in viewport
-        if (this.contentRef()) {
-            // restore tab order if needed
-            const restoreFn = this._restoreContentTabOrderRef();
-            if (restoreFn)
-                restoreFn();
-            // find and focus first tabbable element
-            const candidates = getTabbableCandidates(this.contentRef());
-            if (candidates.length) {
-                focusFirst(candidates);
-            }
-        }
-    }
-    focus() {
-        this.triggerOrLink()?.focus();
-    }
-    /**
-     * Ensure elements are in the tab order by restoring any previously removed tabindex values
-     */
-    ensureTabOrder() {
-        const restoreFn = this._restoreContentTabOrderRef();
-        if (restoreFn) {
-            restoreFn();
-            this._restoreContentTabOrderRef.set(null);
-        }
-    }
-    /**
-     * Handle focus coming from the focus proxy element
-     * @param side Which side the focus is coming from (start = from trigger, end = from after content)
-     */
-    onFocusProxyEnter(side = 'start') {
-        // check for viewport first
-        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
-            const viewport = this.context.viewport();
-            if (viewport) {
-                const candidates = getTabbableCandidates(viewport);
-                if (candidates.length) {
-                    this.ensureTabOrder();
-                    // focus first or last element depending on direction
-                    focusFirst(side === 'start' ? candidates : [...candidates].reverse());
-                    return;
-                }
-            }
-        }
-        // fallback to content
-        if (this.contentRef()) {
-            // restore tab order if needed
-            const restoreFn = this._restoreContentTabOrderRef();
-            if (restoreFn)
-                restoreFn();
-            // find and focus appropriate element based on direction
-            const candidates = getTabbableCandidates(this.contentRef());
-            if (candidates.length) {
-                // Focus first or last element depending on which direction we're coming from
-                focusFirst(side === 'start' ? candidates : [...candidates].reverse());
-            }
-        }
-    }
-    /**
-     * Handle focus moving outside of the content
-     * Remove elements from tab order when not focused
-     */
-    onContentFocusOutside() {
-        // get all tabbable elements from both viewport and content
-        let allCandidates = [];
-        // check viewport first
-        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
-            const viewport = this.context.viewport();
-            if (viewport) {
-                allCandidates = getTabbableCandidates(viewport);
-            }
-        }
-        // ... also check direct content
-        if (this.contentRef()) {
-            const contentCandidates = getTabbableCandidates(this.contentRef());
-            allCandidates = [...allCandidates, ...contentCandidates];
-        }
-        // remove from tab order and store restore function
-        if (allCandidates.length) {
-            this._restoreContentTabOrderRef.set(removeFromTabOrder(allCandidates));
-        }
-    }
-    /**
-     * Handle content being closed from root menu
-     */
-    onRootContentClose() {
-        this.onContentFocusOutside();
+        /** Whether this item is the currently open one. */
+        this.isOpen = computed(() => this.rootContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.triggerId = computed(() => this.rootContext.triggerId(this.value()), ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.contentId = computed(() => this.rootContext.contentId(this.value()), ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxNavigationMenuItemDirective, isStandalone: true, selector: "[rdxNavigationMenuItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.value": "value()" } }, queries: [{ propertyName: "triggerOrLink", first: true, predicate: RdxNavigationMenuFocusableOption, descendants: true, isSignal: true }], exportAs: ["rdxNavigationMenuItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuItem, isStandalone: true, selector: "[rdxNavigationMenuItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["rdxNavigationMenuItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuItem]',
-                    host: {
-                        '[attr.value]': 'value()'
-                    },
                     exportAs: 'rdxNavigationMenuItem'
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], triggerOrLink: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxNavigationMenuFocusableOption), { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
-class RdxNavigationMenuContentDirective {
+/**
+ * The content shown when its item is open. Used as a structural directive; its template is rendered
+ * into the shared {@link RdxNavigationMenuViewport}.
+ *
+ * ```html
+ * <ng-container *rdxNavigationMenuContent>…</ng-container>
+ * ```
+ */
+class RdxNavigationMenuContent {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.ngZone = inject(NgZone);
-        this.template = inject(TemplateRef);
-        this.document = injectDocument();
-        this.item = inject(RdxNavigationMenuItemDirective);
-        this.context = injectNavigationMenu();
+        this.rootContext = injectNavigationMenuRootContext();
+        this.item = inject(RdxNavigationMenuItem);
+        this.templateRef = inject(TemplateRef);
+        /**
+         * Required by the structural directive syntax; the value is unused.
+         */
+        this.rdxNavigationMenuContent = input(false, { ...(ngDevMode ? { debugName: "rdxNavigationMenuContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Used to keep the content rendered and available in the DOM, even when closed.
-         * Useful for animations or SEO.
-         * @default false
+         * Keep the content mounted in the viewport even when its item is closed.
          */
         this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** @ignore */
-        this.contentId = makeContentId(this.context.baseId, this.item.value());
-        /** @ignore */
-        this.triggerId = makeTriggerId(this.context.baseId, this.item.value());
-        this.escapeHandler = null;
-    }
-    set rdxNavigationMenuContent(value) {
-        // structural directive requires this input even if unused
-    }
-    /** @ignore */
-    ngOnInit() {
-        this.item.contentRef.set(this.elementRef.nativeElement);
-        // register template with viewport in root menu via context
-        if (isRootNavigationMenu(this.context) && this.context.onViewportContentChange) {
-            this.context.onViewportContentChange(this.item.value(), {
-                ref: this.elementRef,
-                templateRef: this.template,
-                forceMount: this.forceMount(),
-                value: this.item.value(),
-                getMotionAttribute: this.getMotionAttribute.bind(this),
-                additionalAttrs: {
-                    id: this.contentId,
-                    'aria-labelledby': this.triggerId,
-                    role: 'menu'
-                }
-            });
-        }
-        // add Escape key handler
-        this.escapeHandler = (event) => {
-            if (event.key === ESCAPE && this.context.value() === this.item.value()) {
-                // mark that this close was triggered by Escape
-                this.item.wasEscapeCloseRef.set(true);
-                // close the content
-                if (this.context.onItemDismiss) {
-                    this.context.onItemDismiss();
-                }
-                // refocus the trigger
-                setTimeout(() => {
-                    const trigger = this.item.triggerRef();
-                    if (trigger)
-                        trigger.focus();
-                }, 0);
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.ngZone.runOutsideAngular(() => {
-            if (this.escapeHandler) {
-                this.document.addEventListener('keydown', this.escapeHandler);
-            }
+        effect((onCleanup) => {
+            const value = this.item.value();
+            // Register untracked so reading/writing the root's `contents` map inside registerContent
+            // doesn't make this effect re-run when other items register.
+            const unregister = untracked(() => this.rootContext.registerContent({
+                value,
+                contentId: this.rootContext.contentId(value),
+                triggerId: this.rootContext.triggerId(value),
+                templateRef: this.templateRef,
+                forceMount: this.forceMount
+            }));
+            onCleanup(unregister);
         });
     }
-    /** @ignore */
-    ngOnDestroy() {
-        // unregister from viewport
-        if (isRootNavigationMenu(this.context) && this.context.onViewportContentRemove) {
-            this.context.onViewportContentRemove(this.item.value());
-        }
-        // remove escape key handler
-        if (this.escapeHandler) {
-            this.document.removeEventListener('keydown', this.escapeHandler);
-            this.escapeHandler = null;
-        }
-    }
-    /** @ignore - Compute motion attribute for animations */
-    getMotionAttribute() {
-        if (!isRootNavigationMenu(this.context))
-            return null;
-        const itemValues = Array.from(this.context.viewportContent?.() ?? new Map()).map(([value]) => value);
-        return getMotionAttribute(this.context.value(), this.context.previousValue(), this.item.value(), itemValues, this.context.dir);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuContentDirective, isStandalone: true, selector: "[rdxNavigationMenuContent]", inputs: { rdxNavigationMenuContent: { classPropertyName: "rdxNavigationMenuContent", publicName: "rdxNavigationMenuContent", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuContent, isStandalone: true, selector: "[rdxNavigationMenuContent]", inputs: { rdxNavigationMenuContent: { classPropertyName: "rdxNavigationMenuContent", publicName: "rdxNavigationMenuContent", isSignal: true, isRequired: false, transformFunction: null }, forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuContent]'
                 }]
-        }], propDecorators: { rdxNavigationMenuContent: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { rdxNavigationMenuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "rdxNavigationMenuContent", required: false }] }], forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
 
-class RdxNavigationMenuIndicatorDirective {
+/**
+ * A visual indicator (e.g. a caret) rendered inside a trigger. Exposes the open state so the icon
+ * can rotate when its item opens.
+ */
+class RdxNavigationMenuIcon {
     constructor() {
-        this.context = injectNavigationMenu();
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        /**
-         * Used to keep the indicator rendered and available in the DOM, even when hidden.
-         * Useful for animations.
-         * @default false
-         */
-        this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** @ignore */
-        this._position = signal(null, ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this._activeTrigger = signal(null, ...(ngDevMode ? [{ debugName: "_activeTrigger" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this._resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.isVisible = computed(() => Boolean(this.context.value() || this.forceMount()), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
-        // set up effect for tracking active trigger and position
-        effect(() => {
-            // this effect runs when the current value changes
-            const value = this.context.value();
-            untracked(() => {
-                if (value && isRootNavigationMenu(this.context)) {
-                    this.findAndSetActiveTrigger();
-                }
-            });
-        });
-        // initialize observers for position tracking
-        runInInjectionContext(this.context, () => {
-            if (isRootNavigationMenu(this.context) && this.context.indicatorTrack) {
-                const track = this.context.indicatorTrack();
-                if (track) {
-                    // observe size changes on the track
-                    this._resizeObserver.observe(track);
-                }
-                // initial position update if menu is open
-                if (this.context.value()) {
-                    setTimeout(() => this.findAndSetActiveTrigger(), 0);
-                }
-            }
-        });
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this._resizeObserver.disconnect();
-    }
-    /** @ignore */
-    findAndSetActiveTrigger() {
-        if (!isRootNavigationMenu(this.context) || !this.context.indicatorTrack)
-            return;
-        const track = this.context.indicatorTrack();
-        if (!track)
-            return;
-        // find all triggers within the track
-        const triggers = Array.from(track.querySelectorAll('[rdxNavigationMenuTrigger]'));
-        // find the active trigger based on the current menu value
-        const activeTrigger = triggers.find((trigger) => {
-            const item = trigger.closest('[rdxNavigationMenuItem]');
-            if (!item)
-                return false;
-            const value = item.getAttribute('value');
-            return value === this.context.value();
-        });
-        if (activeTrigger && activeTrigger !== this._activeTrigger()) {
-            this._activeTrigger.set(activeTrigger);
-            this.updatePosition();
-        }
-    }
-    /** @ignore */
-    updatePosition() {
-        const trigger = this._activeTrigger();
-        if (!trigger)
-            return;
-        const isHorizontal = this.context.orientation === 'horizontal';
-        // calculate new position
-        const newPosition = {
-            size: isHorizontal ? trigger.offsetWidth : trigger.offsetHeight,
-            offset: isHorizontal ? trigger.offsetLeft : trigger.offsetTop
-        };
-        // only update if position has changed
-        if (JSON.stringify(newPosition) !== JSON.stringify(this._position())) {
-            this._position.set(newPosition);
-            // apply position styles
-            const styles = isHorizontal
-                ? {
-                    position: 'absolute',
-                    left: '0',
-                    width: `${newPosition.size}px`,
-                    transform: `translateX(${newPosition.offset}px)`
-                }
-                : {
-                    position: 'absolute',
-                    top: '0',
-                    height: `${newPosition.size}px`,
-                    transform: `translateY(${newPosition.offset}px)`
-                };
-            Object.entries(styles).forEach(([key, value]) => {
-                this.renderer.setStyle(this.elementRef.nativeElement, key, value);
-            });
-        }
+        this.item = inject(RdxNavigationMenuItem);
+        this.open = computed(() => this.item.isOpen(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuIndicatorDirective, isStandalone: true, selector: "[rdxNavigationMenuIndicator]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "isVisible() ? \"visible\" : \"hidden\"", "attr.data-orientation": "context.orientation", "style.display": "isVisible() ? null : \"none\"" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuIcon, isStandalone: true, selector: "[rdxNavigationMenuIcon]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "open() ? \"open\" : \"closed\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIcon, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxNavigationMenuIndicator]',
+                    selector: '[rdxNavigationMenuIcon]',
                     host: {
-                        '[attr.data-state]': 'isVisible() ? "visible" : "hidden"',
-                        '[attr.data-orientation]': 'context.orientation',
-                        '[style.display]': 'isVisible() ? null : "none"',
-                        'aria-hidden': 'true'
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'open() ? "open" : "closed"'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
+        }] });
 
-const LINK_SELECT = 'navigationMenu.linkSelect';
-const ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
-class RdxNavigationMenuLinkDirective extends RdxNavigationMenuFocusableOption {
+/**
+ * A navigation link. Closes the menu on selection unless prevented.
+ *
+ * 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.
+ */
+class RdxNavigationMenuLink {
     constructor() {
-        super(...arguments);
-        this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
-        this.uniqueId = generateId();
-        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.onSelect = input(...(ngDevMode ? [undefined, { debugName: "onSelect" }] : /* istanbul ignore next */ []));
+        this.rootContext = injectNavigationMenuRootContext();
         this.elementRef = inject(ElementRef);
-    }
-    ngOnInit() {
-        this.rovingFocusItem.setTabStopId(this.elementRef.nativeElement.id || `link-${this.uniqueId}`);
-    }
-    focus() {
-        this.elementRef.nativeElement.focus();
+        /**
+         * Whether the link represents the current page.
+         */
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether selecting the link should close the menu.
+         */
+        this.closeOnClick = input(true, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Emits when the link is selected. Call `preventDefault()` to keep the menu open.
+         */
+        this.onSelect = output();
     }
     onClick(event) {
-        const mouseEvent = event;
-        const target = event.target;
-        // dispatch link select event
-        const linkSelectEvent = new CustomEvent(LINK_SELECT, {
-            bubbles: true,
-            cancelable: true
-        });
-        // add one-time listener for onSelect handler
-        const onSelect = this.onSelect();
-        if (onSelect) {
-            target.addEventListener(LINK_SELECT, onSelect, { once: true });
-        }
-        // dispatch event
-        target.dispatchEvent(linkSelectEvent);
-        // if not prevented and not meta key, dismiss content
-        if (!linkSelectEvent.defaultPrevented && !mouseEvent.metaKey) {
-            const dismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
-                bubbles: true,
-                cancelable: true
-            });
-            target.dispatchEvent(dismissEvent);
+        this.onSelect.emit(event);
+        if (this.closeOnClick() && !event.defaultPrevented) {
+            this.rootContext.close('link-select', event);
         }
     }
     onKeydown(event) {
-        const keyEvent = event;
-        // activate link on Enter or Space
-        if (keyEvent.key === ENTER || keyEvent.key === SPACE) {
-            // prevent default behavior like scrolling (Space) or form submission (Enter) BEFORE simulating the click.
+        if (event.key === ENTER || event.key === SPACE) {
             event.preventDefault();
-            // simulate a click event on the link element itself
-            const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
-            this.elementRef.nativeElement.dispatchEvent(clickEvent);
-            return;
+            this.elementRef.nativeElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuLinkDirective, isStandalone: true, selector: "[rdxNavigationMenuLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, onSelect: { classPropertyName: "onSelect", publicName: "onSelect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-active": "active() ? \"\" : undefined", "attr.aria-current": "active() ? \"page\" : undefined" } }, providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuLinkDirective }], usesInheritance: true, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuLink]',
-                    hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ['focusable'] }],
                     host: {
                         '[attr.data-active]': 'active() ? "" : undefined',
                         '[attr.aria-current]': 'active() ? "page" : undefined',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeydown($event)'
-                    },
-                    providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuLinkDirective }]
+                    }
                 }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], onSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSelect", required: false }] }] } });
+        }], 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"] }] } });
 
-class RdxNavigationMenuListDirective {
+/**
+ * Contains the navigation menu items. Renders as a menubar with roving keyboard focus.
+ */
+class RdxNavigationMenuList {
     constructor() {
-        this.context = injectNavigationMenu();
-        this.elementRef = inject((ElementRef));
-        this.renderer = inject(Renderer2);
+        this.rootContext = injectNavigationMenuRootContext();
         this.rovingFocusGroup = inject(RdxRovingFocusGroupDirective, { self: true });
-        /**
-         * @private
-         * @ignore
-         */
-        this.items = contentChildren(forwardRef(() => RdxNavigationMenuItemDirective), { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
-    }
-    /**
-     * @ignore
-     */
-    ngAfterContentInit() {
-        const items = this.items();
-        this.keyManager = new FocusKeyManager(items);
-        if (this.context.orientation === 'horizontal') {
-            this.keyManager.withHorizontalOrientation(this.context.dir || 'ltr');
-        }
-        else {
-            this.keyManager.withVerticalOrientation();
-        }
-    }
-    /**
-     * @ignore
-     */
-    ngAfterViewInit() {
-        this.rovingFocusGroup.setOrientation(this.context.orientation);
-        this.rovingFocusGroup.setDir(this.context.dir);
-        // looping typically only applies to the root menu bar
-        if (isRootNavigationMenu(this.context)) {
-            this.rovingFocusGroup.setLoop(this.context.loop ?? false);
-        }
-        else {
-            this.rovingFocusGroup.setLoop(false);
-        }
-        if (isRootNavigationMenu(this.context) && this.context.onIndicatorTrackChange) {
-            const listElement = this.elementRef.nativeElement;
-            const parent = listElement.parentNode;
-            // ensure parent exists and list hasn't already been wrapped
-            if (parent && !listElement.parentElement?.hasAttribute('data-radix-navigation-menu-list-wrapper')) {
-                // create a wrapper div with relative positioning
-                const wrapper = this.renderer.createElement('div');
-                this.renderer.setAttribute(wrapper, 'data-radix-navigation-menu-list-wrapper', ''); // Add marker
-                this.renderer.setStyle(wrapper, 'position', 'relative');
-                // insert the wrapper before the list element in the parent
-                this.renderer.insertBefore(parent, wrapper, listElement);
-                // move the list element inside the new wrapper
-                this.renderer.appendChild(wrapper, listElement);
-                // register the wrapper element as the track for the indicator positioning
-                this.context.onIndicatorTrackChange(wrapper);
-            }
-            else if (listElement.parentElement?.hasAttribute('data-radix-navigation-menu-list-wrapper')) {
-                // if wrapper somehow already exists, ensure context has the correct reference
-                this.context.onIndicatorTrackChange(listElement.parentElement);
-            }
-        }
+        effect(() => {
+            this.rovingFocusGroup.setOrientation(this.rootContext.orientation());
+            this.rovingFocusGroup.setDir(this.rootContext.dir());
+            this.rovingFocusGroup.setLoop(this.rootContext.loop());
+        });
     }
-    /**
-     * @ignore
-     */
-    onKeydown(event) {
-        const keyEvent = event;
-        if (!this.keyManager.activeItem) {
-            this.keyManager.setFirstItemActive();
-        }
-        if (keyEvent.key === TAB && keyEvent.shiftKey) {
-            if (this.keyManager.activeItemIndex === 0)
-                return;
-            this.keyManager.setPreviousItemActive();
-            event.preventDefault();
-        }
-        else if (keyEvent.key === TAB) {
-            const items = this.items();
-            if (this.keyManager.activeItemIndex === items.length - 1) {
-                return;
-            }
-            this.keyManager.setNextItemActive();
-            event.preventDefault();
-        }
-        else {
-            this.keyManager.onKeydown(keyEvent);
+    onPointerLeave(event) {
+        if (event.pointerType === 'touch') {
+            return;
         }
+        this.rootContext.closeOnHover();
     }
-    /**
-     * @ignore
-     */
-    setActiveItem(item) {
-        this.keyManager.setActiveItem(item);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: RdxNavigationMenuListDirective, isStandalone: true, selector: "[rdxNavigationMenuList]", host: { attributes: { "role": "menubar" }, listeners: { "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => RdxNavigationMenuItemDirective), descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuList]',
                     hostDirectives: [RdxRovingFocusGroupDirective],
                     host: {
                         role: 'menubar',
-                        '(keydown)': 'onKeydown($event)'
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '(pointerleave)': 'onPointerLeave($event)'
                     }
                 }]
-        }], propDecorators: { items: [{ type: i0.ContentChildren, args: [forwardRef(() => RdxNavigationMenuItemDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [] });
 
-// define action types for clearer intent
-var RdxNavigationMenuAction;
-(function (RdxNavigationMenuAction) {
-    RdxNavigationMenuAction["OPEN"] = "open";
-    RdxNavigationMenuAction["CLOSE"] = "close";
-})(RdxNavigationMenuAction || (RdxNavigationMenuAction = {}));
-class RdxNavigationMenuDirective {
-    // State
-    #value;
-    #previousValue;
-    #indicatorTrack;
-    #viewport;
-    #viewportContent;
-    #rootNavigationMenu;
-    #userDismissedByClick;
-    #isOpenDelayed;
-    // pointer tracking
-    #isPointerOverContent;
-    #isPointerOverTrigger;
+/**
+ * The shared container for the active item's content.
+ */
+class RdxNavigationMenuPopup {
     constructor() {
+        this.rootContext = injectNavigationMenuRootContext();
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.layersContext = inject(RdxDismissableLayersContextToken);
         this.elementRef = inject(ElementRef);
-        this.document = injectDocument();
-        this.window = injectWindow();
-        // State
-        this.#value = signal('', ...(ngDevMode ? [{ debugName: "#value" }] : /* istanbul ignore next */ []));
-        this.#previousValue = signal('', ...(ngDevMode ? [{ debugName: "#previousValue" }] : /* istanbul ignore next */ []));
-        this.baseId = `rdx-nav-menu-${generateId()}`;
-        this.#indicatorTrack = signal(null, ...(ngDevMode ? [{ debugName: "#indicatorTrack" }] : /* istanbul ignore next */ []));
-        this.#viewport = signal(null, ...(ngDevMode ? [{ debugName: "#viewport" }] : /* istanbul ignore next */ []));
-        this.#viewportContent = signal(new Map(), ...(ngDevMode ? [{ debugName: "#viewportContent" }] : /* istanbul ignore next */ []));
-        this.#rootNavigationMenu = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "#rootNavigationMenu" }] : /* istanbul ignore next */ []));
-        this.#userDismissedByClick = signal(false, ...(ngDevMode ? [{ debugName: "#userDismissedByClick" }] : /* istanbul ignore next */ []));
-        this.userDismissedByClick = () => this.#userDismissedByClick();
-        this.resetUserDismissed = () => this.#userDismissedByClick.set(false);
-        // delay timers
-        this.openTimerRef = 0;
-        this.closeTimerRef = 0;
-        this.skipDelayTimerRef = 0;
-        this.recentlyActivatedTimerRef = 0;
-        this.recentlyActivatedItem = signal(null, ...(ngDevMode ? [{ debugName: "recentlyActivatedItem" }] : /* istanbul ignore next */ []));
-        this.#isOpenDelayed = signal(true, ...(ngDevMode ? [{ debugName: "#isOpenDelayed" }] : /* istanbul ignore next */ []));
-        // pointer tracking
-        this.#isPointerOverContent = signal(false, ...(ngDevMode ? [{ debugName: "#isPointerOverContent" }] : /* istanbul ignore next */ []));
-        this.#isPointerOverTrigger = signal(false, ...(ngDevMode ? [{ debugName: "#isPointerOverTrigger" }] : /* istanbul ignore next */ []));
-        this.documentMouseLeaveHandler = null;
-        this.actionSubject$ = new Subject();
-        this.orientation = 'horizontal';
-        this.dir = 'ltr';
-        this.clickIgnoreDuration = 250;
-        this.delayDuration = 200;
-        this.skipDelayDuration = 300;
-        this.loop = false;
-        this.cssAnimation = false;
-        this.cssOpeningAnimation = false;
-        this.cssClosingAnimation = false;
-        this.isRootMenu = true;
-        this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : /* istanbul ignore next */ []));
-        // exposed state as functions for the token
-        this.value = () => this.#value();
-        this.previousValue = () => this.#previousValue();
-        this.rootNavigationMenu = () => this.#rootNavigationMenu();
-        this.indicatorTrack = () => this.#indicatorTrack();
-        this.viewport = () => this.#viewport();
-        this.viewportContent = () => this.#viewportContent();
-        // exposed pointer state
-        this.setTriggerPointerState = (isOver) => this.#isPointerOverTrigger.set(isOver);
-        this.setContentPointerState = (isOver) => this.#isPointerOverContent.set(isOver);
-        this.isPointerInSystem = () => this.#isPointerOverContent() || this.#isPointerOverTrigger();
-        // exposed  animation state
-        this.getCssAnimation = () => this.cssAnimation;
-        this.getCssOpeningAnimation = () => this.cssOpeningAnimation;
-        this.getCssClosingAnimation = () => this.cssClosingAnimation;
+        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(() => {
+            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));
+        /**
+         * Event handler called when a pointerdown event happens outside the popup. Can be prevented.
+         */
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        /**
+         * Event handler called when focus moves outside the popup. Can be prevented.
+         */
+        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
+        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 value = this.#value();
-            if (value) {
-                this.window.clearTimeout(this.skipDelayTimerRef);
-                if (this.skipDelayDuration > 0) {
-                    this.#isOpenDelayed.set(false);
-                }
-            }
-            else {
-                // menu is closed, start skip delay timer
-                this.window.clearTimeout(this.skipDelayTimerRef);
-                this.skipDelayTimerRef = this.window.setTimeout(() => {
-                    this.#isOpenDelayed.set(true);
-                }, this.skipDelayDuration);
-            }
+            const triggers = this.rootContext.triggers();
+            untracked(() => this.layersContext.branches.update((branches) => {
+                const next = new Set(branches);
+                triggers.forEach((trigger) => next.add(trigger));
+                return [...next];
+            }));
         });
-        this.actionSubject$
-            .pipe(map((config) => {
-            // different delays for open vs close (better ux)
-            const duration = config.action === RdxNavigationMenuAction.OPEN ? this.delayDuration : 150;
-            return { ...config, duration };
-        }), debounce((config) => timer(config.duration)), tap((config) => {
-            switch (config.action) {
-                case RdxNavigationMenuAction.OPEN:
-                    if (config.itemValue) {
-                        this.setValue(config.itemValue);
-                    }
-                    break;
-                case RdxNavigationMenuAction.CLOSE:
-                    // only close if not hovering over any part of the system
-                    if (!this.isPointerInSystem()) {
-                        this.setValue('');
-                    }
-                    break;
+        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();
             }
-        }), takeUntilDestroyed())
-            .subscribe();
-        // set up document mouseleave handler to close menu when mouse leaves window
-        this.documentMouseLeaveHandler = () => this.handleClose();
-        this.document.addEventListener('mouseleave', this.documentMouseLeaveHandler);
+        });
     }
-    ngOnDestroy() {
-        this.window.clearTimeout(this.openTimerRef);
-        this.window.clearTimeout(this.closeTimerRef);
-        this.window.clearTimeout(this.skipDelayTimerRef);
-        this.window.clearTimeout(this.recentlyActivatedTimerRef);
-        // clean up document event listener
-        if (this.documentMouseLeaveHandler) {
-            document.removeEventListener('mouseleave', this.documentMouseLeaveHandler);
+    onPointerLeave(event) {
+        if (event.pointerType === 'touch') {
+            return;
         }
+        this.rootContext.closeOnHover();
     }
-    onIndicatorTrackChange(track) {
-        this.#indicatorTrack.set(track);
-    }
-    onViewportChange(viewport) {
-        this.#viewport.set(viewport);
-    }
-    onTriggerEnter(itemValue) {
-        // skip opening if user explicitly dismissed this menu
-        if (this.#userDismissedByClick() && itemValue === this.#previousValue()) {
+    /**
+     * 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.)
+     */
+    onKeydown(event) {
+        if (event.key !== ARROW_DOWN && event.key !== ARROW_UP && event.key !== HOME && event.key !== END) {
             return;
         }
-        this.window.clearTimeout(this.openTimerRef);
-        this.window.clearTimeout(this.closeTimerRef);
-        if (this.#isOpenDelayed()) {
-            this.handleDelayedOpen(itemValue);
+        // 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.
+        const nestedRoot = event.target.closest('[rdxNavigationMenuRoot]');
+        if (nestedRoot && this.elementRef.nativeElement.contains(nestedRoot)) {
+            return;
         }
-        else {
-            this.handleOpen(itemValue);
+        const candidates = getTabbableCandidates(this.elementRef.nativeElement);
+        if (candidates.length === 0) {
+            return;
         }
-    }
-    onTriggerLeave() {
-        this.window.clearTimeout(this.openTimerRef);
-        this.startCloseTimer();
-    }
-    onContentEnter() {
-        this.window.clearTimeout(this.closeTimerRef);
-    }
-    onContentLeave() {
-        this.startCloseTimer();
-    }
-    handleClose() {
-        this.actionSubject$.next({ action: RdxNavigationMenuAction.CLOSE });
-    }
-    onItemSelect(itemValue) {
-        const wasOpen = this.#value() === itemValue;
-        // if this item just opened and the click would close it,
-        // ignore the click during the brief protection window
-        if (this.recentlyActivatedItem() === itemValue && wasOpen) {
+        event.preventDefault();
+        const currentIndex = candidates.indexOf(document.activeElement);
+        if (event.key === HOME) {
+            focusFirst([candidates[0]]);
             return;
         }
-        const newValue = wasOpen ? '' : itemValue;
-        // if user is closing an open menu, mark as user-dismissed
-        if (wasOpen) {
-            this.#userDismissedByClick.set(true);
-        }
-        else {
-            this.#userDismissedByClick.set(false);
-        }
-        this.setValue(newValue);
-    }
-    onItemDismiss() {
-        this.setValue('');
-    }
-    onViewportContentChange(contentValue, contentData) {
-        const newMap = new Map(this.#viewportContent());
-        newMap.set(contentValue, contentData);
-        this.#viewportContent.set(newMap);
-    }
-    onViewportContentRemove(contentValue) {
-        const newMap = new Map(this.#viewportContent());
-        if (newMap.has(contentValue)) {
-            newMap.delete(contentValue);
-            this.#viewportContent.set(newMap);
+        if (event.key === END) {
+            focusFirst([candidates[candidates.length - 1]]);
+            return;
         }
-    }
-    setValue(value) {
-        const previousValue = this.#value();
-        if (value && value !== previousValue) {
-            this.window.clearTimeout(this.recentlyActivatedTimerRef);
-            this.recentlyActivatedItem.set(value);
-            this.recentlyActivatedTimerRef = this.window.setTimeout(() => {
-                this.recentlyActivatedItem.set(null);
-            }, this.clickIgnoreDuration);
+        if (event.key === ARROW_DOWN) {
+            const next = currentIndex < candidates.length - 1 ? currentIndex + 1 : 0;
+            focusFirst([candidates[next]]);
+            return;
         }
-        // store previous value before changing
-        this.#previousValue.set(previousValue);
-        this.#value.set(value);
-    }
-    startCloseTimer() {
-        this.window.clearTimeout(this.closeTimerRef);
-        this.closeTimerRef = this.window.setTimeout(() => {
-            // only close if not hovering over any part of the system
-            if (!this.isPointerInSystem()) {
-                this.setValue('');
-            }
-        }, 150);
-    }
-    handleOpen(itemValue) {
-        this.window.clearTimeout(this.closeTimerRef);
-        this.setValue(itemValue);
-    }
-    handleDelayedOpen(itemValue) {
-        const isOpenItem = this.#value() === itemValue;
-        if (isOpenItem) {
-            // if the item is already open, clear close timer
-            this.window.clearTimeout(this.closeTimerRef);
+        // ArrowUp: from the first item, return focus to the trigger; otherwise move to the previous.
+        if (currentIndex <= 0) {
+            this.rootContext.trigger()?.focus();
         }
         else {
-            // otherwise, start the open timer
-            this.openTimerRef = this.window.setTimeout(() => {
-                this.window.clearTimeout(this.closeTimerRef);
-                this.setValue(itemValue);
-            }, this.delayDuration);
+            focusFirst([candidates[currentIndex - 1]]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: RdxNavigationMenuDirective, isStandalone: true, selector: "[rdxNavigationMenu]", inputs: { orientation: "orientation", dir: "dir", clickIgnoreDuration: ["clickIgnoreDuration", "clickIgnoreDuration", numberAttribute], delayDuration: ["delayDuration", "delayDuration", numberAttribute], skipDelayDuration: ["skipDelayDuration", "skipDelayDuration", numberAttribute], loop: ["loop", "loop", booleanAttribute], cssAnimation: ["cssAnimation", "cssAnimation", booleanAttribute], cssOpeningAnimation: ["cssOpeningAnimation", "cssOpeningAnimation", booleanAttribute], cssClosingAnimation: ["cssClosingAnimation", "cssClosingAnimation", booleanAttribute] }, host: { attributes: { "aria-label": "Main", "role": "navigation" }, properties: { "attr.data-orientation": "orientation", "attr.dir": "dir" } }, providers: [provideNavigationMenuContext(RdxNavigationMenuDirective)], exportAs: ["rdxNavigationMenu"], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPopup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxNavigationMenu]',
-                    providers: [provideNavigationMenuContext(RdxNavigationMenuDirective)],
+                    selector: '[rdxNavigationMenuPopup]',
+                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
                     host: {
-                        '[attr.data-orientation]': 'orientation',
-                        '[attr.dir]': 'dir',
-                        'aria-label': 'Main',
-                        role: 'navigation'
-                    },
-                    exportAs: 'rdxNavigationMenu'
+                        role: 'menu',
+                        tabindex: '-1',
+                        '[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()',
+                        '(pointerenter)': 'rootContext.cancelHoverClose()',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(keydown)': 'onKeydown($event)'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{
-                type: Input
-            }], dir: [{
-                type: Input
-            }], clickIgnoreDuration: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], delayDuration: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], skipDelayDuration: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], loop: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], cssAnimation: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], cssOpeningAnimation: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], cssClosingAnimation: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }] } });
 
-class RdxNavigationMenuSubDirective {
+/**
+ * Moves the navigation menu popup to a different part of the DOM (by default `document.body`).
+ */
+class RdxNavigationMenuPortal {
     constructor() {
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-        this.valueChange = output();
-        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.previousValue = signal('', ...(ngDevMode ? [{ debugName: "previousValue" }] : /* istanbul ignore next */ []));
-        this.baseId = `rdx-nav-menu-sub-${generateId()}`;
-        this.isRootMenu = false;
-        this.parent = inject(RdxNavigationMenuDirective, { optional: true });
-    }
-    set defaultValue(val) {
-        if (val)
-            this.value.set(val);
-    }
-    get dir() {
-        if (!this.parent) {
-            return 'ltr';
-        }
-        return this.parent.dir || 'ltr';
-    }
-    get rootNavigationMenu() {
-        return this.parent?.rootNavigationMenu() || null;
-    }
-    onTriggerEnter(itemValue) {
-        this.setValue(itemValue);
-    }
-    onItemSelect(itemValue) {
-        this.setValue(itemValue);
-    }
-    onItemDismiss() {
-        this.setValue('');
-    }
-    setValue(value) {
-        this.previousValue.set(this.value());
-        this.value.set(value);
-        this.valueChange.emit(value);
+        this.rootContext = injectNavigationMenuRootContext();
+        /**
+         * Optional container to portal the popup into. Defaults to `document.body`.
+         */
+        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuSubDirective, isStandalone: true, selector: "[rdxNavigationMenuSub]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-orientation": "orientation()" } }, providers: [provideNavigationMenuContext(RdxNavigationMenuSubDirective)], ngImport: i0 }); }
+    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: "17.1.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "[rdxNavigationMenuPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", 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\"" } }, hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuSubDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxNavigationMenuSub]',
-                    providers: [provideNavigationMenuContext(RdxNavigationMenuSubDirective)],
+                    selector: '[rdxNavigationMenuPortal]',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ],
                     host: {
-                        '[attr.data-orientation]': 'orientation()'
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
                     }
                 }]
-        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], defaultValue: [{
-                type: Input
-            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
+/**
+ * Mounts the popup while the menu is open and waits for CSS exit keyframes before unmounting.
+ *
+ * ```html
+ * <ng-template rdxNavigationMenuPortalPresence>…</ng-template>
+ * ```
+ */
+class RdxNavigationMenuPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortalPresence, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectNavigationMenuRootContext();
+                return { present: context.isOpen };
+            })
+        ], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxNavigationMenuPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectNavigationMenuRootContext();
+                            return { present: context.isOpen };
+                        })
+                    ]
+                }]
+        }] });
 
-class RdxNavigationMenuTriggerDirective extends RdxNavigationMenuFocusableOption {
+/**
+ * Positions the shared popup against the active trigger.
+ */
+class RdxNavigationMenuPositioner {
     constructor() {
-        super();
-        this.context = injectNavigationMenu();
-        this.item = inject(RdxNavigationMenuItemDirective);
-        this.list = inject(RdxNavigationMenuListDirective);
-        this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
+        this.rootContext = injectNavigationMenuRootContext();
+        this.wrapper = inject(RdxPopperContentWrapper);
         this.elementRef = inject(ElementRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.openOnHover = input(true, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.triggerId = makeTriggerId(this.context.baseId, this.item.value());
-        this.contentId = makeContentId(this.context.baseId, this.item.value());
-        this.open = computed(() => {
-            return this.item.value() === this.context.value();
-        }, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.focusProxyRef = null;
-        this.ariaOwnsRef = null;
-        this.hasPointerMoveOpened = false;
-        this.wasClickClose = false;
+        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
+        /**
+         * 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: [
+            provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+        ], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["anchor", "anchor", "side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "positionStrategy", "positionStrategy", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxNavigationMenuPositioner]',
+                    providers: [
+                        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)'
+        }`
+                    }
+                }]
+        }], 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 }] }] } });
+
+const context = () => contextFor(inject(RdxNavigationMenuRoot));
+/**
+ * Groups all parts of the navigation menu.
+ *
+ * Holds the shared open state: `value` identifies the currently open item, and the menu is open
+ * whenever `value` is non-null. A single popup (Portal → Positioner → Popup → Viewport) is shared
+ * between every item and anchored to the active trigger.
+ */
+class RdxNavigationMenuRoot {
+    constructor() {
+        this.popper = inject(RdxPopper);
+        this.destroyRef = inject(DestroyRef);
+        this.parentRoot = inject(RdxNavigationMenuRoot, { optional: true, skipSelf: true });
+        /** Whether this root is nested inside another navigation menu's content. */
+        this.nested = !!this.parentRoot;
+        this.baseId = `rdx-nav-menu-${generateId()}`;
+        /**
+         * The value of the navigation menu item that should be currently open.
+         */
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * The uncontrolled value of the item that should be initially open.
+         */
+        this.defaultValue = input(null, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /**
+         * The orientation of the navigation menu.
+         */
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /**
+         * The reading direction of the navigation menu.
+         */
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.delay = input(50, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * How long to wait before closing the menu after the pointer leaves, in milliseconds.
+         */
+        this.closeDelay = input(50, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Emits when the open item changes.
+         */
+        this.onValueChange = output();
+        /**
+         * Emits whenever the menu opens or closes.
+         */
+        this.onOpenChange = output();
+        /**
+         * Emits after any enter/exit transition completes.
+         */
+        this.onOpenChangeComplete = output();
+        this.hasAppliedDefaultValue = false;
+        this.transition = useTransitionStatus((open) => {
+            this.instant.set(false);
+            this.onOpenChangeComplete.emit(open);
+        });
+        this.instant = signal(false, ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
+        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.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 */ []));
+        this.activeContent = computed(() => {
+            const value = this.value() ?? this.previousValue();
+            return value ? this.contents().get(value) : undefined;
+        }, ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
+        this.registeredTriggers = new Map();
+        this.viewportTriggerChange = new Set();
+        let previousOpen = this.isOpen();
         effect(() => {
-            this.rovingFocusItem.setFocusable(!this.disabled());
+            const defaultValue = this.defaultValue();
+            if (!this.hasAppliedDefaultValue && defaultValue !== null) {
+                this.hasAppliedDefaultValue = true;
+                this.value.set(defaultValue);
+            }
         });
         effect(() => {
-            const isOpen = this.open();
-            untracked(() => {
-                // handle focus proxy and aria-owns when open state changes
-                if (isOpen) {
-                    this.createAccessibilityComponents();
+            const open = this.isOpen();
+            if (open !== previousOpen) {
+                previousOpen = open;
+                untracked(() => this.transition.start(open));
+            }
+        });
+        // Anchor the shared popper to the active trigger.
+        effect(() => this.popper.anchorOverride.set(this.trigger()));
+        this.destroyRef.onDestroy(() => {
+            this.clearHoverTimers();
+            if (this.instantFrame !== undefined) {
+                cancelAnimationFrame(this.instantFrame);
+            }
+        });
+    }
+    contentId(value) {
+        return `${this.baseId}-content-${value}`;
+    }
+    triggerId(value) {
+        return `${this.baseId}-trigger-${value}`;
+    }
+    setValue(value, reason = 'none', event = new Event('navigation-menu.value-change')) {
+        const previous = this.value();
+        if (previous === value) {
+            return;
+        }
+        const previousTrigger = this.trigger();
+        const nextTrigger = value ? this.registeredTriggers.get(value) : undefined;
+        const changedTriggerWhileOpen = previous !== null && value !== null && previousTrigger !== nextTrigger;
+        this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
+        if (changedTriggerWhileOpen) {
+            this.scheduleInstantReset();
+            if (previousTrigger && nextTrigger) {
+                this.viewportTriggerChange.forEach((notify) => notify(previousTrigger, nextTrigger));
+            }
+        }
+        if (nextTrigger) {
+            this.trigger.set(nextTrigger);
+        }
+        this.previousValue.set(previous);
+        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();
+        // Register the anchor in case this value hasn't been seen yet, but DON'T set `this.trigger`
+        // here: setValue must still read the *previous* trigger to detect a trigger switch and drive
+        // the viewport morph. It sets `this.trigger` from the registry after that comparison.
+        if (!this.registeredTriggers.has(value)) {
+            this.registeredTriggers.set(value, trigger);
+        }
+        this.setValue(value, reason, event);
+    }
+    close(reason = 'none', event) {
+        this.clearHoverTimers();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.instant.set(reason !== 'none' && reason !== 'trigger-hover' && reason !== 'list-leave');
+        this.setValue(null, reason, event);
+    }
+    toggle(value, trigger, event) {
+        this.clearHoverTimers();
+        if (this.value() === value) {
+            this.close('trigger-press', event);
+            return;
+        }
+        this.open(value, trigger, 'trigger-press', event);
+    }
+    openOnHover(value, trigger, event) {
+        this.clearHoverTimers();
+        // Switching between already-open items happens instantly.
+        if (this.isOpen()) {
+            this.open(value, trigger, 'trigger-hover', event);
+            return;
+        }
+        this.openTimer = setTimeout(() => this.open(value, trigger, 'trigger-hover', event), this.delay());
+    }
+    closeOnHover() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+        this.closeTimer = setTimeout(() => this.close('list-leave', new Event('navigation-menu.hover-close')), this.closeDelay());
+    }
+    cancelHoverOpen() {
+        this.clearOpenTimer();
+    }
+    cancelHoverClose() {
+        this.clearCloseTimer();
+    }
+    registerTrigger(value, trigger) {
+        this.registeredTriggers.set(value, trigger);
+        this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        if (this.value() === value) {
+            this.trigger.set(trigger);
+        }
+        return () => {
+            if (this.registeredTriggers.get(value) === trigger) {
+                this.registeredTriggers.delete(value);
+            }
+            this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            if (this.destroyRef.destroyed || this.value() !== value) {
+                return;
+            }
+            // Defer the close: when an item's `value` changes, the trigger's registration effect
+            // unregisters the old value and synchronously re-registers the same element under the new
+            // value. Closing immediately would collapse the menu mid-rename, so only close if the
+            // element is truly gone (not re-registered under any value) on the next microtask.
+            queueMicrotask(() => {
+                if (this.destroyRef.destroyed || this.value() !== value) {
+                    return;
                 }
-                else {
-                    this.removeAccessibilityComponents();
-                    if (!this.item.wasEscapeCloseRef()) {
-                        this.item.onRootContentClose();
-                    }
-                    this.hasPointerMoveOpened = false;
+                const stillRegistered = [...this.registeredTriggers.values()].includes(trigger);
+                if (!stillRegistered) {
+                    this.close();
                 }
             });
-        });
+        };
     }
-    ngOnInit() {
-        this.item.triggerRef.set(this.elementRef.nativeElement);
-        // configure the static part of the roving focus item directive instance
-        this.rovingFocusItem.setTabStopId(this.item.value());
+    registerContent(entry) {
+        this.contents.update((contents) => new Map(contents).set(entry.value, entry));
+        return () => {
+            this.contents.update((contents) => {
+                if (contents.get(entry.value) !== entry) {
+                    return contents;
+                }
+                const next = new Map(contents);
+                next.delete(entry.value);
+                return next;
+            });
+        };
     }
-    ngOnDestroy() {
-        this.removeAccessibilityComponents();
+    registerTransitionElement(element) {
+        return this.transition.registerElement(element);
     }
-    focus() {
-        this.elementRef.nativeElement.focus();
+    registerViewport(onTriggerChange) {
+        this.viewportTriggerChange.add(onTriggerChange);
+        return () => this.viewportTriggerChange.delete(onTriggerChange);
     }
-    createAccessibilityComponents() {
-        if (this.focusProxyRef || this.ariaOwnsRef) {
-            return;
+    scheduleInstantReset() {
+        if (this.instantFrame !== undefined) {
+            cancelAnimationFrame(this.instantFrame);
         }
-        // create focus proxy component
-        this.focusProxyRef = this.viewContainerRef.createComponent(RdxNavigationMenuFocusProxyComponent);
-        this.focusProxyRef.instance.triggerElement = this.elementRef.nativeElement;
-        this.focusProxyRef.instance.contentElement = this.item.contentRef();
-        this.focusProxyRef.instance.proxyFocus.subscribe((direction) => {
-            this.item.onFocusProxyEnter(direction);
+        this.instantFrame = requestAnimationFrame(() => {
+            this.instantFrame = undefined;
+            if (!this.destroyRef.destroyed && this.isOpen()) {
+                this.instant.set(false);
+            }
         });
-        // store reference in item directive
-        this.item.focusProxyRef.set(this.focusProxyRef.location.nativeElement);
-        // only add aria-owns component if using viewport
-        if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
-            this.ariaOwnsRef = this.viewContainerRef.createComponent(RdxNavigationMenuAriaOwnsComponent);
-            this.ariaOwnsRef.instance.contentId = this.contentId;
-        }
     }
-    removeAccessibilityComponents() {
-        if (this.focusProxyRef) {
-            this.focusProxyRef.destroy();
-            this.focusProxyRef = null;
-            this.item.focusProxyRef.set(null);
+    clearHoverTimers() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+    }
+    clearOpenTimer() {
+        if (this.openTimer !== undefined) {
+            clearTimeout(this.openTimer);
+            this.openTimer = undefined;
         }
-        if (this.ariaOwnsRef) {
-            this.ariaOwnsRef.destroy();
-            this.ariaOwnsRef = null;
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== undefined) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
         }
     }
-    onPointerEnter() {
-        // ignore if disabled or not the root menu
-        if (this.disabled() || !isRootNavigationMenu(this.context))
+    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 }); }
+}
+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],
+                    host: {
+                        role: 'navigation',
+                        'aria-label': 'Main',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[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"] }] } });
+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,
+        instant: root.instant.asReadonly(),
+        transitionStatus: root.transitionStatus,
+        trigger: root.trigger.asReadonly(),
+        triggers: root.triggers.asReadonly(),
+        activeContent: root.activeContent,
+        contentId: (value) => root.contentId(value),
+        triggerId: (value) => root.triggerId(value),
+        setValue: (value, reason, event) => root.setValue(value, reason, event),
+        open: (value, trigger, reason, event) => root.open(value, trigger, reason, event),
+        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(),
+        cancelHoverOpen: () => root.cancelHoverOpen(),
+        cancelHoverClose: () => root.cancelHoverClose(),
+        registerTrigger: (value, trigger) => root.registerTrigger(value, trigger),
+        registerContent: (entry) => root.registerContent(entry),
+        registerTransitionElement: (element) => root.registerTransitionElement(element),
+        registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange)
+    };
+}
+
+/**
+ * A button that opens its item's content in the shared popup.
+ */
+class RdxNavigationMenuTrigger {
+    constructor() {
+        this.item = inject(RdxNavigationMenuItem);
+        this.rootContext = injectNavigationMenuRootContext();
+        this.rovingFocusItem = inject(RdxRovingFocusItemDirective, { self: true });
+        this.elementRef = inject(ElementRef);
+        this.document = injectDocument();
+        /**
+         * Whether the trigger should ignore user interaction.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the content should also open when the trigger is hovered.
+         */
+        this.openOnHover = input(true, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        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;
+            // Register untracked: registerTrigger reads root state internally, and we must not make
+            // this effect re-run (and tear down the registration) when the open value changes.
+            onCleanup(untracked(() => this.rootContext.registerTrigger(value, element)));
+        });
+    }
+    onClick(event) {
+        if (this.disabled()) {
             return;
-        this.wasClickClose = false; // Reset click close flag on enter
-        this.item.wasEscapeCloseRef.set(false); // Reset escape flag
-        this.context.setTriggerPointerState?.(true); // Update context state
-        // if the menu isn't already open for this item, trigger the enter logic
-        if (!this.open()) {
-            if (this.openOnHover() || this.context.value() !== '') {
-                this.context.onTriggerEnter?.(this.item.value());
-            }
         }
+        this.rootContext.toggle(this.item.value(), this.elementRef.nativeElement, event);
     }
-    onPointerMove(event) {
-        const pointerEvent = event;
-        // ignore if not a mouse event, disabled, closed by click/escape, or already opened by this move
-        if (pointerEvent.pointerType !== 'mouse' ||
-            this.disabled() ||
-            this.wasClickClose ||
-            this.item.wasEscapeCloseRef() ||
-            this.hasPointerMoveOpened ||
-            !isRootNavigationMenu(this.context)) {
+    onPointerEnter(event) {
+        if (this.disabled() || event.pointerType === 'touch' || !this.openOnHover()) {
             return;
         }
-        this.hasPointerMoveOpened = true;
+        this.rootContext.cancelHoverClose();
+        this.rootContext.openOnHover(this.item.value(), this.elementRef.nativeElement, event);
     }
     onPointerLeave(event) {
-        const pointerEvent = event;
-        // ignore if not a mouse event or disabled
-        if (pointerEvent.pointerType !== 'mouse' || this.disabled() || !isRootNavigationMenu(this.context)) {
+        if (event.pointerType === 'touch' || !this.openOnHover()) {
             return;
         }
-        this.context.setTriggerPointerState?.(false); // Update context state
-        this.context.onTriggerLeave?.(); // Trigger leave logic (handles delays)
-        this.hasPointerMoveOpened = false; // Reset flag
-        // reset user dismissal flag if pointer leaves the whole system (trigger + content)
-        if (this.context.resetUserDismissed) {
-            // relay slightly to allow pointer movement to content area without resetting dismissal state
-            setTimeout(() => {
-                if (!this.context.isPointerInSystem?.()) {
-                    this.context.resetUserDismissed?.();
-                }
-            }, 50); // small delay for tolerance
-        }
+        this.rootContext.cancelHoverOpen();
     }
-    onClick() {
-        if (this.disabled())
+    /**
+     * 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;
-        // manually set the `KeyManager` active item to this trigger
-        this.list.setActiveItem(this.item);
-        if (this.context.onItemSelect) {
-            this.context.onItemSelect(this.item.value());
-            // track if this click action resulted in closing the menu
-            this.wasClickClose = !this.open();
-            // reset escape flag if menu was opened by click
-            if (this.open()) {
-                this.item.wasEscapeCloseRef.set(false);
-            }
         }
+        this.rootContext.open(this.item.value(), this.elementRef.nativeElement, 'trigger-focus');
     }
     onKeydown(event) {
-        const keyEvent = event;
-        if (this.disabled())
-            return;
-        if (keyEvent.key === ENTER || keyEvent.key === SPACE) {
-            event.preventDefault(); // prevent default button behavior
-            this.onClick();
-            // if menu was opened by this keypress, move focus into the content
-            if (this.open()) {
-                // defer focus slightly to ensure content is ready
-                setTimeout(() => this.item.onEntryKeyDown(), 0);
-            }
+        if (this.disabled()) {
             return;
         }
-        const isHorizontal = this.context.orientation === 'horizontal';
-        const isRTL = this.context.dir === 'rtl';
-        // handle `ArrowDown` specifically for viewport navigation
-        if (keyEvent.key === ARROW_DOWN || keyEvent.key === TAB) {
-            if (keyEvent.key === ARROW_DOWN) {
-                event.preventDefault();
-            }
-            // if the menu is open, focus into the content
+        const entryKey = this.entryKey();
+        if (event.key === ENTER || event.key === SPACE) {
+            event.preventDefault();
+            this.rootContext.toggle(this.item.value(), this.elementRef.nativeElement, event);
             if (this.open()) {
-                if (keyEvent.key === TAB) {
-                    // needed to ensure that the `keyManager` on the list directive does not activate
-                    // any focus updates, shifting focus to the subsequent focusable list item
-                    event.stopImmediatePropagation();
-                }
-                // direct focus handling for viewport case
-                if (isRootNavigationMenu(this.context) && this.context.viewport && this.context.viewport()) {
-                    // get the viewport element
-                    const viewport = this.context.viewport();
-                    if (viewport) {
-                        // find all tabbable elements in the viewport
-                        const tabbables = getTabbableCandidates(viewport);
-                        if (tabbables.length > 0) {
-                            // focus the first tabbable element directly
-                            setTimeout(() => {
-                                tabbables[0].focus();
-                            }, 0);
-                            return;
-                        }
-                    }
-                }
-                // fallback to the standard entry key down approach
-                setTimeout(() => this.item.onEntryKeyDown(), 0);
-                return;
+                this.focusContent();
             }
-            // if not open but in horizontal orientation, emulate right key navigation
-            if (isHorizontal) {
-                const nextEvent = new KeyboardEvent('keydown', {
-                    key: isRTL ? ARROW_LEFT : ARROW_RIGHT,
-                    bubbles: true
-                });
-                this.elementRef.nativeElement.dispatchEvent(nextEvent);
-                return;
-            }
-        }
-        // handle ArrowUp in horizontal orientation
-        if (isHorizontal && keyEvent.key === ARROW_UP) {
-            event.preventDefault();
-            // emulate a left key press to move to the previous item
-            const nextEvent = new KeyboardEvent('keydown', {
-                key: isRTL ? ARROW_RIGHT : ARROW_LEFT,
-                bubbles: true
-            });
-            this.elementRef.nativeElement.dispatchEvent(nextEvent);
             return;
         }
-        // handle vertical navigation and entry into content
-        const verticalEntryKey = isRTL ? ARROW_LEFT : ARROW_RIGHT;
-        const entryKey = isHorizontal ? ARROW_DOWN : verticalEntryKey;
-        if (this.item.contentRef() && keyEvent.key === entryKey && keyEvent.key !== ARROW_DOWN) {
-            // Skip if it's ArrowDown as we already handled it above
+        if (event.key === entryKey) {
             event.preventDefault();
             if (!this.open()) {
-                // if closed, open the menu first
-                this.context.onItemSelect?.(this.item.value());
-                // defer focus movement into content until after state update and render
-                setTimeout(() => this.item.onEntryKeyDown(), 0);
+                this.rootContext.open(this.item.value(), this.elementRef.nativeElement, 'trigger-press', event);
             }
-            else {
-                // if already open, just move focus into the content
-                this.item.onEntryKeyDown();
+            this.focusContent();
+        }
+    }
+    /** The key that moves focus from the trigger into the open content, based on orientation/dir. */
+    entryKey() {
+        if (this.rootContext.orientation() === 'horizontal') {
+            return ARROW_DOWN;
+        }
+        return this.rootContext.dir() === 'rtl' ? ARROW_LEFT : ARROW_RIGHT;
+    }
+    focusContent() {
+        // Content is rendered into the shared popup, which mounts through Presence + Portal and is
+        // then positioned asynchronously by floating-ui. Until it is positioned the popper keeps it
+        // `visibility: hidden`, so its tabbables aren't focusable yet. Poll across animation frames
+        // until focus actually lands inside the panel (don't give up just because the element exists).
+        const contentId = this.item.contentId();
+        let attempts = 0;
+        const tryFocus = () => {
+            const content = this.document.getElementById(contentId);
+            const candidates = content ? getTabbableCandidates(content) : [];
+            if (candidates.length && focusFirst(candidates)) {
+                return;
             }
-            return;
-        }
+            if (attempts++ < 15) {
+                requestAnimationFrame(tryFocus);
+            }
+            else if (content) {
+                // Fallback: no tabbable content — focus the panel container itself.
+                content.focus();
+            }
+        };
+        requestAnimationFrame(tryFocus);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuTriggerDirective, isStandalone: true, selector: "[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: { "pointerenter": "onPointerEnter()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "id": "triggerId", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-orientation": "context.orientation", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined", "attr.aria-expanded": "open()", "attr.aria-controls": "contentId", "attr.aria-haspopup": "\"menu\"" } }, providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuTriggerDirective }], usesInheritance: true, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective }], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxNavigationMenuTrigger]',
+                    selector: 'button[rdxNavigationMenuTrigger]',
                     hostDirectives: [RdxRovingFocusItemDirective],
                     host: {
-                        '[id]': 'triggerId',
+                        type: 'button',
+                        '[id]': 'item.triggerId()',
+                        '[attr.aria-controls]': 'item.contentId()',
+                        '[attr.aria-expanded]': 'open()',
+                        '[attr.aria-haspopup]': '"menu"',
                         '[attr.data-state]': 'open() ? "open" : "closed"',
-                        '[attr.data-orientation]': 'context.orientation',
+                        '[attr.data-popup-open]': 'open() ? "" : undefined',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
                         '[attr.disabled]': 'disabled() ? "" : undefined',
-                        '[attr.aria-expanded]': 'open()',
-                        '[attr.aria-controls]': 'contentId',
-                        '[attr.aria-haspopup]': '"menu"',
-                        '(pointerenter)': 'onPointerEnter()',
-                        '(pointermove)': 'onPointerMove($event)',
+                        '(click)': 'onClick($event)',
+                        '(pointerenter)': 'onPointerEnter($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
-                        '(click)': 'onClick()',
                         '(keydown)': 'onKeydown($event)',
-                        type: 'button'
-                    },
-                    providers: [{ provide: RdxNavigationMenuFocusableOption, useExisting: RdxNavigationMenuTriggerDirective }]
+                        '(focus)': 'onFocus()'
+                    }
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }] } });
 
-class RdxNavigationMenuViewportDirective {
+/**
+ * Clips and animates the active item's content. A single viewport is shared between all items; when
+ * the active item changes the outgoing content is retained as `data-previous` until its CSS
+ * animation/transition completes, and the new content is marked `data-current`.
+ */
+class RdxNavigationMenuViewport {
     constructor() {
-        this.context = injectNavigationMenu();
-        this.document = injectDocument();
-        this.window = injectWindow();
+        this.rootContext = injectNavigationMenuRootContext();
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
-        this.zone = inject(NgZone);
-        this.destroyRef = inject(DestroyRef);
         /**
-         * Used to keep the viewport rendered and available in the DOM, even when closed.
-         * Useful for animations.
-         * @default false
+         * Keep the viewport mounted even when the menu is closed.
          */
         this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this._contentNodes = signal(new Map(), ...(ngDevMode ? [{ debugName: "_contentNodes" }] : /* istanbul ignore next */ []));
-        this._activeContentNode = signal(null, ...(ngDevMode ? [{ debugName: "_activeContentNode" }] : /* istanbul ignore next */ []));
-        this._leavingContentNode = signal(null, ...(ngDevMode ? [{ debugName: "_leavingContentNode" }] : /* istanbul ignore next */ []));
-        this._viewportSize = signal(null, ...(ngDevMode ? [{ debugName: "_viewportSize" }] : /* istanbul ignore next */ []));
-        this.activeContentValue = computed(() => {
-            if (!isRootNavigationMenu(this.context))
-                return null;
-            return this.context.value() || this.context.previousValue();
-        }, ...(ngDevMode ? [{ debugName: "activeContentValue" }] : /* istanbul ignore next */ []));
-        this.isOpen = computed(() => {
-            if (!isRootNavigationMenu(this.context))
-                return false;
-            return Boolean(this.context.value() || this.forceMount());
-        }, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.dataState = computed(() => getOpenStateLabel(this.isOpen()), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
-        this.viewportSize = computed(() => this._viewportSize(), ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
-        this._resizeObserver = new ResizeObserver(() => this.updateSize());
-        this.setupViewportEffect();
-    }
-    ngOnInit() {
-        if (isRootNavigationMenu(this.context) && this.context.onViewportChange) {
-            this.context.onViewportChange(this.elementRef.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        this._resizeObserver.disconnect();
-        // clean up any remaining nodes/views/subscriptions
-        this._contentNodes().forEach((node) => this.cleanupAfterLeave(node));
-        if (isRootNavigationMenu(this.context) && this.context.onViewportChange) {
-            this.context.onViewportChange(null);
-        }
-    }
-    onKeydown(event) {
-        const keyEvent = event;
-        if (!this.isOpen())
-            return;
-        const tabbableElements = getTabbableCandidates(this.elementRef.nativeElement);
-        if (!tabbableElements.length)
-            return;
-        const activeElement = this.document.activeElement;
-        const currentIndex = tabbableElements.findIndex((el) => el === activeElement);
-        if (keyEvent.key === ARROW_DOWN) {
-            event.preventDefault();
-            const nextIndex = currentIndex >= 0 && currentIndex < tabbableElements.length - 1 ? currentIndex + 1 : 0;
-            tabbableElements[nextIndex]?.focus();
-        }
-        else if (keyEvent.key === ARROW_UP) {
-            event.preventDefault();
-            const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabbableElements.length - 1;
-            tabbableElements[prevIndex]?.focus();
-        }
-    }
-    onPointerEnter() {
-        if (isRootNavigationMenu(this.context) && this.context.onContentEnter) {
-            this.context.onContentEnter();
-        }
-        if (isRootNavigationMenu(this.context) && this.context.setContentPointerState) {
-            this.context.setContentPointerState(true);
-        }
-    }
-    onPointerLeave() {
-        if (isRootNavigationMenu(this.context) && this.context.onContentLeave) {
-            this.context.onContentLeave();
-        }
-        if (isRootNavigationMenu(this.context) && this.context.setContentPointerState) {
-            this.context.setContentPointerState(false);
-        }
-    }
-    setupViewportEffect() {
+        this.activationDirection = signal(undefined, ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        this.transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+        this.size = signal(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.current = null;
+        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 */ []));
+        const unregister = this.rootContext.registerViewport((previous, next) => {
+            this.pendingDirection = getActivationDirection(previous, next);
+        });
         effect(() => {
-            const currentActiveValue = this.context.value();
-            const previousActiveValue = this.context.previousValue();
-            const forceMount = this.forceMount();
-            untracked(() => {
-                // ensure context is root before proceeding
-                if (!isRootNavigationMenu(this.context) || !this.context.viewportContent) {
-                    return;
-                }
-                const allContentData = this.context.viewportContent();
-                const currentNodesMap = this._contentNodes();
-                let enteringNode = null;
-                let leavingNode = this._leavingContentNode(); // get potentially already leaving node
-                // 1. Identify Entering Node
-                if (currentActiveValue && allContentData.has(currentActiveValue)) {
-                    enteringNode = this.getOrCreateContentNode(currentActiveValue);
-                }
-                // 2. Identify Leaving Node
-                const nodeThatWasActive = previousActiveValue ? currentNodesMap.get(previousActiveValue) : null;
-                // if there was a previously active node, it's different from the entering one,
-                // and it's not already leaving, mark it for removal.
-                if (nodeThatWasActive && nodeThatWasActive !== enteringNode && nodeThatWasActive !== leavingNode) {
-                    // if another node was already leaving, force complete its transition
-                    if (leavingNode) {
-                        this.forceCompleteLeaveTransition(leavingNode);
-                    }
-                    leavingNode = nodeThatWasActive;
-                    this._leavingContentNode.set(leavingNode);
-                }
-                // 3. Handle Entering Node
-                if (enteringNode) {
-                    // cancel any pending leave transition for this node if it was leaving
-                    if (enteringNode === leavingNode) {
-                        this.cancelLeaveTransition(enteringNode);
-                        leavingNode = null;
-                        this._leavingContentNode.set(null);
-                    }
-                    // ensure it's in the DOM and set state to open
-                    this.addNodeToDOM(enteringNode);
-                    this.setNodeState(enteringNode, 'open'); // Triggers enter animation via data-state
-                    this._activeContentNode.set(enteringNode);
-                    this.updateSize(); // Update size based on the entering node
-                }
-                else {
-                    // no node entering, clear active node state
-                    this._activeContentNode.set(null);
-                }
-                // 4. Handle Leaving Node
-                if (leavingNode) {
-                    if (forceMount) {
-                        // if forceMount, just mark as closed, don't trigger removal animation
-                        this.setNodeState(leavingNode, 'closed');
-                        this._leavingContentNode.set(null); // No longer considered "leaving"
-                    }
-                    else {
-                        // start the leave transition (usePresence handles DOM removal)
-                        this.startLeaveTransition(leavingNode);
-                    }
-                }
-            });
+            const entry = this.activeContent();
+            untracked(() => this.render(entry));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            unregister();
+            this.resizeObserver?.disconnect();
+            this.clearCleanupTimer();
+            this.removePrevious();
+            this.current?.view.destroy();
         });
     }
-    // gets or creates the ContentNode (wrapper + view)
-    getOrCreateContentNode(contentValue) {
-        const existingNode = this._contentNodes().get(contentValue);
-        if (existingNode && !existingNode.embeddedView.destroyed) {
-            return existingNode;
-        }
-        // create if doesn't exist or view was destroyed
-        if (!isRootNavigationMenu(this.context) || !this.context.viewportContent)
-            return null;
-        const allContentData = this.context.viewportContent();
-        const contentData = allContentData.get(contentValue);
-        const templateRef = contentData?.templateRef;
-        if (!templateRef) {
-            console.error(`No templateRef found for content value: ${contentValue}`);
-            return null;
-        }
-        try {
-            const embeddedView = this.viewContainerRef.createEmbeddedView(templateRef);
-            const container = this.renderer.createElement('div');
-            this.renderer.setAttribute(container, 'class', 'NavigationMenuContentWrapper');
-            this.renderer.setAttribute(container, 'data-content-value', contentValue);
-            embeddedView.rootNodes.forEach((node) => this.renderer.appendChild(container, node));
-            const newNode = {
-                embeddedView,
-                element: container,
-                contentValue,
-                state: 'closed'
-            };
-            const newMap = new Map(this._contentNodes());
-            newMap.set(contentValue, newNode);
-            this._contentNodes.set(newMap);
-            return newNode;
-        }
-        catch (error) {
-            console.error(`Error creating content node for ${contentValue}:`, error);
-            return null;
-        }
-    }
-    // adds node element to viewport DOM if not already present
-    addNodeToDOM(node) {
-        if (!this.elementRef.nativeElement.contains(node.element)) {
-            this.renderer.appendChild(this.elementRef.nativeElement, node.element);
-            // observe size only when added to DOM
-            this._resizeObserver.observe(node.element);
-        }
-    }
-    // removes node element from viewport DOM
-    removeNodeFromDOM(node) {
-        if (this.elementRef.nativeElement.contains(node.element)) {
-            this._resizeObserver.unobserve(node.element); // stop observing before removal
-            this.renderer.removeChild(this.elementRef.nativeElement, node.element);
-        }
-    }
-    // updates the data-state and motion attributes
-    setNodeState(node, state) {
-        if (node.state === state)
-            return; // avoid redundant updates
-        node.state = state;
-        this.renderer.setAttribute(node.element, 'data-state', state);
-        // apply motion attribute based on context
-        if (isRootNavigationMenu(this.context) && this.context.viewportContent) {
-            const contentData = this.context.viewportContent().get(node.contentValue);
-            if (contentData?.getMotionAttribute) {
-                // get motion based on current state transition
-                const motionAttr = contentData.getMotionAttribute();
-                if (motionAttr) {
-                    this.renderer.setAttribute(node.element, 'data-motion', motionAttr);
-                }
-                else {
-                    this.renderer.removeAttribute(node.element, 'data-motion');
-                }
-            }
-            else {
-                this.renderer.removeAttribute(node.element, 'data-motion');
-            }
-        }
-        // apply A11y attributes (might only be needed on open?)
-        if (state === 'open') {
-            this.applyA11yAttributes(node);
-        }
-    }
-    // apply A11y attributes to the first child element
-    applyA11yAttributes(node) {
-        if (!isRootNavigationMenu(this.context) || !this.context.viewportContent)
+    render(entry) {
+        if (!entry) {
             return;
-        const contentData = this.context.viewportContent().get(node.contentValue);
-        if (contentData?.additionalAttrs && node.embeddedView.rootNodes.length > 0) {
-            const firstRootNode = node.embeddedView.rootNodes[0];
-            if (firstRootNode) {
-                Object.entries(contentData.additionalAttrs).forEach(([attr, value]) => {
-                    this.renderer.setAttribute(firstRootNode, attr, value);
-                });
-            }
         }
-    }
-    startLeaveTransition(node) {
-        // ensure node exists and isn't already leaving with an active subscription
-        if (!node || node.transitionSubscription) {
-            node.transitionSubscription?.unsubscribe();
+        if (this.current?.value === entry.value) {
             return;
         }
-        const startFn = () => {
-            this.setNodeState(node, 'closed');
-            return () => this.cleanupAfterLeave(node);
-        };
-        const options = {
-            animation: true, // assuming CSS animations/transitions handle the exit
-            state: 'continue' // start the leave process
-        };
-        node.transitionSubscription = usePresence(this.zone, node.element, startFn, options)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            complete: () => {
-                this.cleanupAfterLeave(node);
-            }
-        });
-    }
-    /**
-     * Cleanup function called after leave animation finishes
-     * @param node The node that is leaving
-     */
-    cleanupAfterLeave(node) {
-        // check if this node is still marked as the one leaving
-        if (this._leavingContentNode() === node) {
-            this.removeNodeFromDOM(node);
-            if (!this.forceMount() && node.embeddedView && !node.embeddedView.destroyed) {
-                node.embeddedView.destroy();
-                // Remove from cache if destroyed
-                const newMap = new Map(this._contentNodes());
-                newMap.delete(node.contentValue);
-                this._contentNodes.set(newMap);
-            }
-            node.transitionSubscription = null;
-            this._leavingContentNode.set(null);
-            if (!this._activeContentNode() && !this.forceMount()) {
-                this._viewportSize.set(null);
-            }
+        // 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();
+        }
+        const view = this.viewContainerRef.createEmbeddedView(entry.templateRef);
+        view.detectChanges();
+        const element = this.renderer.createElement('div');
+        this.renderer.setAttribute(element, 'data-current', '');
+        this.renderer.setAttribute(element, 'id', entry.contentId);
+        this.renderer.setAttribute(element, 'aria-labelledby', entry.triggerId);
+        // Make the panel a valid focus target for keyboard entry when it has no tabbable content.
+        this.renderer.setAttribute(element, 'tabindex', '-1');
+        view.rootNodes.forEach((node) => this.renderer.appendChild(element, node));
+        this.renderer.appendChild(this.elementRef.nativeElement, element);
+        // Measure the content's own root element, not the wrapper: the wrapper is `display: block`
+        // 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();
+    }
+    startLeave(element) {
+        this.removePrevious();
+        const previous = element.cloneNode(true);
+        previous.removeAttribute('data-current');
+        previous.setAttribute('data-previous', '');
+        previous.setAttribute('aria-hidden', 'true');
+        previous.setAttribute('inert', '');
+        removeIds(previous);
+        this.activationDirection.set(this.pendingDirection);
+        this.pendingDirection = undefined;
+        this.previousElement = previous;
+        this.transitioning.set(true);
+        this.renderer.appendChild(this.elementRef.nativeElement, previous);
+        const onEnd = () => this.removePrevious();
+        previous.addEventListener('animationend', onEnd, { once: true });
+        previous.addEventListener('transitionend', onEnd, { once: true });
+        const duration = getMaxTransitionDuration(previous);
+        this.cleanupTimer = setTimeout(onEnd, duration > 0 ? duration + 50 : 0);
+    }
+    removePrevious() {
+        this.clearCleanupTimer();
+        this.previousElement?.remove();
+        this.previousElement = null;
+        this.transitioning.set(false);
+    }
+    clearCleanupTimer() {
+        if (this.cleanupTimer !== undefined) {
+            clearTimeout(this.cleanupTimer);
+            this.cleanupTimer = undefined;
+        }
+    }
+    measure() {
+        const target = this.current?.measureTarget;
+        if (!target || !target.isConnected) {
+            return;
         }
-        else {
-            // if this node is NOT the one currently marked as leaving, it means
-            // a new transition started before this one finished. Just clean up DOM/Sub.
-            this.removeNodeFromDOM(node);
-            node.transitionSubscription?.unsubscribe();
-            node.transitionSubscription = null;
+        const width = Math.ceil(target.offsetWidth);
+        const height = Math.ceil(target.offsetHeight);
+        if (width === 0 && height === 0) {
+            return;
         }
-    }
-    /**
-     * Cancels an ongoing leave transition (e.g., if user hovers back)
-     * @param node The node that is leaving
-     */
-    cancelLeaveTransition(node) {
-        node.transitionSubscription?.unsubscribe();
-        node.transitionSubscription = null;
-    }
-    /**
-     * Force completes a leave transition (e.g., if another leave starts)
-     * @param node The node that is leaving
-     */
-    forceCompleteLeaveTransition(node) {
-        if (node && node.transitionSubscription) {
-            node.transitionSubscription.unsubscribe();
-            // perform cleanup immediately
-            this.cleanupAfterLeave(node);
+        const size = this.size();
+        if (!size || size.width !== width || size.height !== height) {
+            this.size.set({ width, height });
         }
     }
-    updateSize() {
-        const activeNode = this._activeContentNode()?.element; // measure the currently active node
-        if (!activeNode || !activeNode.isConnected)
-            return;
-        const firstChild = activeNode.firstChild;
-        if (!firstChild)
-            return;
-        this.window.requestAnimationFrame(() => {
-            // keep rAF here for measurement stability
-            activeNode.getBoundingClientRect(); // force layout
-            const width = Math.ceil(firstChild.offsetWidth);
-            const height = Math.ceil(firstChild.offsetHeight);
-            if (width !== 0 || height !== 0) {
-                const currentSize = this._viewportSize();
-                if (!currentSize || currentSize.width !== width || currentSize.height !== height) {
-                    this._viewportSize.set({ width, height });
-                }
-            }
-            else if (this._viewportSize() !== null) {
-                this._viewportSize.set(null);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuViewportDirective, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.data-state": "dataState()", "attr.data-orientation": "context.orientation", "style.--radix-navigation-menu-viewport-width.px": "viewportSize()?.width", "style.--radix-navigation-menu-viewport-height.px": "viewportSize()?.height" } }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewportDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewport, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuViewport]',
                     host: {
-                        '[attr.data-state]': 'dataState()',
-                        '[attr.data-orientation]': 'context.orientation',
-                        '[style.--radix-navigation-menu-viewport-width.px]': 'viewportSize()?.width',
-                        '[style.--radix-navigation-menu-viewport-height.px]': 'viewportSize()?.height',
-                        '(keydown)': 'onKeydown($event)',
-                        '(pointerenter)': 'onPointerEnter()',
-                        '(pointerleave)': 'onPointerLeave()'
+                        '[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'
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }] } });
 
-const _imports = [
-    RdxNavigationMenuDirective,
-    RdxNavigationMenuSubDirective,
-    RdxNavigationMenuListDirective,
-    RdxNavigationMenuItemDirective,
-    RdxNavigationMenuTriggerDirective,
-    RdxNavigationMenuLinkDirective,
-    RdxNavigationMenuIndicatorDirective,
-    RdxNavigationMenuContentDirective,
-    RdxNavigationMenuViewportDirective,
-    RdxNavigationMenuFocusProxyComponent,
-    RdxNavigationMenuAriaOwnsComponent
+const navigationMenuImports = [
+    RdxNavigationMenuRoot,
+    RdxNavigationMenuList,
+    RdxNavigationMenuItem,
+    RdxNavigationMenuTrigger,
+    RdxNavigationMenuIcon,
+    RdxNavigationMenuContent,
+    RdxNavigationMenuLink,
+    RdxNavigationMenuPortal,
+    RdxNavigationMenuPortalPresence,
+    RdxNavigationMenuBackdrop,
+    RdxNavigationMenuPositioner,
+    RdxNavigationMenuPopup,
+    RdxNavigationMenuArrow,
+    RdxNavigationMenuViewport
 ];
 class RdxNavigationMenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, imports: [RdxNavigationMenuDirective,
-            RdxNavigationMenuSubDirective,
-            RdxNavigationMenuListDirective,
-            RdxNavigationMenuItemDirective,
-            RdxNavigationMenuTriggerDirective,
-            RdxNavigationMenuLinkDirective,
-            RdxNavigationMenuIndicatorDirective,
-            RdxNavigationMenuContentDirective,
-            RdxNavigationMenuViewportDirective,
-            RdxNavigationMenuFocusProxyComponent,
-            RdxNavigationMenuAriaOwnsComponent], exports: [RdxNavigationMenuDirective,
-            RdxNavigationMenuSubDirective,
-            RdxNavigationMenuListDirective,
-            RdxNavigationMenuItemDirective,
-            RdxNavigationMenuTriggerDirective,
-            RdxNavigationMenuLinkDirective,
-            RdxNavigationMenuIndicatorDirective,
-            RdxNavigationMenuContentDirective,
-            RdxNavigationMenuViewportDirective,
-            RdxNavigationMenuFocusProxyComponent,
-            RdxNavigationMenuAriaOwnsComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, imports: [RdxNavigationMenuRoot,
+            RdxNavigationMenuList,
+            RdxNavigationMenuItem,
+            RdxNavigationMenuTrigger,
+            RdxNavigationMenuIcon,
+            RdxNavigationMenuContent,
+            RdxNavigationMenuLink,
+            RdxNavigationMenuPortal,
+            RdxNavigationMenuPortalPresence,
+            RdxNavigationMenuBackdrop,
+            RdxNavigationMenuPositioner,
+            RdxNavigationMenuPopup,
+            RdxNavigationMenuArrow,
+            RdxNavigationMenuViewport], exports: [RdxNavigationMenuRoot,
+            RdxNavigationMenuList,
+            RdxNavigationMenuItem,
+            RdxNavigationMenuTrigger,
+            RdxNavigationMenuIcon,
+            RdxNavigationMenuContent,
+            RdxNavigationMenuLink,
+            RdxNavigationMenuPortal,
+            RdxNavigationMenuPortalPresence,
+            RdxNavigationMenuBackdrop,
+            RdxNavigationMenuPositioner,
+            RdxNavigationMenuPopup,
+            RdxNavigationMenuArrow,
+            RdxNavigationMenuViewport] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
+                    imports: [...navigationMenuImports],
+                    exports: [...navigationMenuImports]
                 }]
         }] });
 
@@ -1799,5 +1298,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RDX_NAVIGATION_MENU_TOKEN, RdxNavigationMenuAction, RdxNavigationMenuAnimationStatus, RdxNavigationMenuAriaOwnsComponent, RdxNavigationMenuContentDirective, RdxNavigationMenuDirective, RdxNavigationMenuFocusProxyComponent, RdxNavigationMenuFocusableOption, RdxNavigationMenuIndicatorDirective, RdxNavigationMenuItemDirective, RdxNavigationMenuLinkDirective, RdxNavigationMenuListDirective, RdxNavigationMenuModule, RdxNavigationMenuSubDirective, RdxNavigationMenuTriggerDirective, RdxNavigationMenuViewportDirective, injectNavigationMenu, isRootNavigationMenu, provideNavigationMenuContext };
+export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalPresence, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
 //# sourceMappingURL=radix-ng-primitives-navigation-menu.mjs.map