@radix-ng/primitives 1.0.4 → 1.0.6

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

@@ -3,7 +3,7 @@ import { inject, computed, Directive, ElementRef, input, signal, TemplateRef, bo
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopper } from '@radix-ng/primitives/popper';
 import * as i2 from '@radix-ng/primitives/core';
-import { createContext, ENTER, SPACE, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ARROW_DOWN, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, TAB, HOME, END, rdxDevError, useGraceArea, createFloatingRootContext, useTransitionStatus, provideFloatingTree, provideFloatingRootContext, RdxFloatingNodeRegistration, createCancelableChangeEventDetails, injectDocument, getMaxTransitionDuration } from '@radix-ng/primitives/core';
+import { createContext, injectId, ENTER, SPACE, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ARROW_DOWN, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, TAB, HOME, END, rdxDevError, useGraceArea, createFloatingRootContext, useTransitionStatus, provideFloatingTree, provideFloatingRootContext, RdxFloatingNodeRegistration, createCancelableChangeEventDetails, injectDocument, getMaxTransitionDuration } from '@radix-ng/primitives/core';
 import * as i1$1 from '@radix-ng/primitives/composite';
 import { RdxCompositeItem, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
@@ -21,14 +21,17 @@ class RdxNavigationMenuArrow {
     constructor() {
         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 }); }
+        this.side = computed(() => this.wrapper?.placedSide(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: RdxNavigationMenuArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuArrow]',
@@ -53,10 +56,10 @@ class RdxNavigationMenuBackdrop {
         host.style.setProperty('-webkit-user-select', 'none');
         host.style.webkitUserSelect = 'none';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuBackdrop, isStandalone: true, selector: "[rdxNavigationMenuBackdrop]", host: { attributes: { "role": "presentation" }, properties: { "attr.hidden": "rootContext.present() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "style.user-select": "\"none\"" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNavigationMenuBackdrop, isStandalone: true, selector: "[rdxNavigationMenuBackdrop]", host: { attributes: { "role": "presentation" }, properties: { "attr.hidden": "rootContext.present() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style.user-select": "\"none\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuBackdrop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuBackdrop]',
@@ -68,124 +71,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
                         '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[style.user-select]': '"none"'
                     }
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Generate a short unique id segment.
- */
-function generateId() {
-    return Math.random().toString(36).substring(2, 11);
-}
-/**
- * Collect the tabbable elements inside a container, in DOM order, skipping hidden ones.
- */
-function getTabbableCandidates(container) {
-    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"])';
-    const elements = Array.from(container.querySelectorAll(TABBABLE_SELECTOR));
-    return elements.filter((element) => {
-        if (element.tabIndex < 0) {
-            return false;
-        }
-        if (element.hasAttribute('disabled')) {
-            return false;
-        }
-        if (element.getAttribute('aria-hidden') === 'true') {
-            return false;
-        }
-        let current = element;
-        while (current) {
-            const style = window.getComputedStyle(current);
-            if (style.display === 'none' || style.visibility === 'hidden') {
-                return false;
-            }
-            current = current.parentElement;
-        }
-        return true;
-    });
-}
-/**
- * Focus the first focusable candidate, returning whether focus moved.
- */
-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;
-    });
-}
-/**
- * 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 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 };
-}
-
 /**
  * A single navigation menu item. Holds a trigger + content pair, or a standalone link.
  */
 class RdxNavigationMenuItem {
     constructor() {
         this.rootContext = injectNavigationMenuRootContext();
-        /**
-         * A unique value that identifies the item. Falls back to a generated id.
-         */
-        this.value = input('', { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: (value) => value || `item-${generateId()}` });
+        /** A unique value that identifies the item. Falls back to a stable generated id. */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.generatedValue = injectId('rdx-nav-menu-item-');
+        this.value = computed(() => this.valueInput() || this.generatedValue, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** The trigger element, set by the trigger directive. */
-        this.triggerRef = signal(null, ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+        this.triggerRef = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
         /** 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: 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 }); }
+        this.isOpen = computed(() => this.rootContext.value() === this.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.triggerId = computed(() => this.rootContext.triggerId(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.contentId = computed(() => this.rootContext.contentId(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNavigationMenuItem, isStandalone: true, selector: "[rdxNavigationMenuItem]", inputs: { valueInput: { classPropertyName: "valueInput", 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: RdxNavigationMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuItem]',
                     exportAs: 'rdxNavigationMenuItem'
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+        }], propDecorators: { valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /**
  * The content shown when its item is open. Used as a structural directive; its template is rendered
@@ -222,10 +144,10 @@ class RdxNavigationMenuContent {
             onCleanup(unregister);
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: RdxNavigationMenuContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuContent]'
@@ -239,18 +161,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxNavigationMenuIcon {
     constructor() {
         this.item = inject(RdxNavigationMenuItem);
-        this.open = computed(() => this.item.isOpen(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.open = computed(() => this.item.isOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNavigationMenuIcon, isStandalone: true, selector: "[rdxNavigationMenuIcon]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-popup-open": "open() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuIcon]',
                     host: {
                         'aria-hidden': 'true',
-                        '[attr.data-state]': 'open() ? "open" : "closed"'
+                        '[attr.data-popup-open]': 'open() ? "" : undefined'
                     }
                 }]
         }] });
@@ -281,7 +204,7 @@ class RdxNavigationMenuLink {
     onClick(event) {
         this.onSelect.emit(event);
         if (this.closeOnClick() && !event.defaultPrevented) {
-            this.rootContext.close('link-select', event);
+            this.rootContext.close('link-press', event);
         }
     }
     onKeydown(event) {
@@ -290,10 +213,10 @@ class RdxNavigationMenuLink {
             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: 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" } }, hostDirectives: [{ directive: i1$1.RdxCompositeItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNavigationMenuLink, isStandalone: true, selector: "[rdxNavigationMenuLink]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-active": "active() ? \"\" : undefined", "attr.aria-current": "active() ? \"page\" : undefined" } }, hostDirectives: [{ directive: i1$1.RdxCompositeItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuLink]',
@@ -340,10 +263,10 @@ class RdxNavigationMenuList {
         }
         this.rootContext.closeOnHover(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuList, isStandalone: true, selector: "[rdxNavigationMenuList]", host: { listeners: { "keydown": "onKeydown($event)", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.data-orientation": "rootContext.orientation()" } }, hostDirectives: [{ directive: i1$1.RdxCompositeRoot }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNavigationMenuList, isStandalone: true, selector: "[rdxNavigationMenuList]", host: { listeners: { "keydown": "onKeydown($event)", "pointerleave": "onPointerLeave($event)" }, properties: { "attr.data-orientation": "rootContext.orientation()" } }, hostDirectives: [{ directive: i1$1.RdxCompositeRoot }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuList]',
@@ -356,6 +279,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Collect the tabbable elements inside a container, in DOM order, skipping hidden ones.
+ */
+function getTabbableCandidates(container) {
+    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"])';
+    const elements = Array.from(container.querySelectorAll(TABBABLE_SELECTOR));
+    return elements.filter((element) => {
+        if (element.tabIndex < 0) {
+            return false;
+        }
+        if (element.hasAttribute('disabled')) {
+            return false;
+        }
+        if (element.getAttribute('aria-hidden') === 'true') {
+            return false;
+        }
+        let current = element;
+        while (current) {
+            const style = window.getComputedStyle(current);
+            if (style.display === 'none' || style.visibility === 'hidden') {
+                return false;
+            }
+            current = current.parentElement;
+        }
+        return true;
+    });
+}
+/**
+ * Focus the first focusable candidate, returning whether focus moved.
+ */
+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;
+    });
+}
+/**
+ * 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 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 };
+}
+
 /**
  * The shared container for the active item's content.
  */
@@ -366,12 +368,15 @@ class RdxNavigationMenuPopup {
         this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
         this.elementRef = inject(ElementRef);
-        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
         this.id = computed(() => {
             const value = this.rootContext.value() ?? this.rootContext.previousValue();
             return value ? `${this.rootContext.baseId}-popup-${value}` : `${this.rootContext.baseId}-popup`;
-        }, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Event handler called when the escape key is down. Can be prevented.
          */
@@ -530,10 +535,10 @@ class RdxNavigationMenuPopup {
             .filter((item) => !item.hasAttribute('disabled'))
             .filter((item) => item.getAttribute('aria-hidden') !== 'true');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPopup, isStandalone: true, selector: "[rdxNavigationMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside" }, host: { attributes: { "tabindex": "-1" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "id": "id()", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-side": "side()", "attr.data-align": "align()", "style.--popup-width.px": "rootContext.size()?.width", "style.--popup-height.px": "rootContext.size()?.height" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNavigationMenuPopup, isStandalone: true, selector: "[rdxNavigationMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside" }, host: { attributes: { "tabindex": "-1" }, listeners: { "pointerenter": "rootContext.cancelHoverClose()", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "id": "id()", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-side": "side()", "attr.data-align": "align()", "style.--popup-width.px": "rootContext.size()?.width", "style.--popup-height.px": "rootContext.size()?.height" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPopup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuPopup]',
@@ -546,7 +551,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
                         '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
                         '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
-                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[attr.data-side]': 'side()',
                         '[attr.data-align]': 'align()',
                         '[style.--popup-width.px]': 'rootContext.size()?.width',
@@ -575,12 +579,13 @@ class RdxNavigationMenuPortal {
          * Keep the portal mounted while the menu is closed.
          */
         this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.present = computed(() => this.rootContext.present() || this.keepMounted(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.rootContext.present() || this.keepMounted(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuPortal, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortal]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxPresenceContext(() => ({ present: inject(RdxNavigationMenuPortal).present }))], exportAs: ["rdxNavigationMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNavigationMenuPortal, isStandalone: true, selector: "ng-template[rdxNavigationMenuPortal]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxPresenceContext(() => ({ present: inject(RdxNavigationMenuPortal).present }))], exportAs: ["rdxNavigationMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxNavigationMenuPortal]',
@@ -602,10 +607,10 @@ class RdxNavigationMenuPortalMisuseGuard {
                 '`<ng-template rdxNavigationMenuPortal>`. rdxNavigationMenuPortalPresence has been removed.', 'components/navigation-menu');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPortalMisuseGuard, isStandalone: true, selector: "[rdxNavigationMenuPortal]:not(ng-template)", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNavigationMenuPortalMisuseGuard, isStandalone: true, selector: "[rdxNavigationMenuPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuPortal]:not(ng-template)'
@@ -625,8 +630,10 @@ class RdxNavigationMenuPositioner extends RdxPopperContentWrapper {
         super();
         this.rootContext = injectNavigationMenuRootContext();
         this.containerRef = inject(ElementRef);
-        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
-        this.containerEl = signal(this.containerRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.triggerEl = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(this.containerRef.nativeElement, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
         this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
         const destroyRef = inject(DestroyRef);
         effect(() => this.triggerEl.set(this.rootContext.trigger() ?? null));
@@ -648,13 +655,13 @@ class RdxNavigationMenuPositioner extends RdxPopperContentWrapper {
         // leaves the grace area between them.
         this.graceArea.onPointerExit(() => this.rootContext.closeOnHover());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxNavigationMenuPositioner, isStandalone: true, selector: "[rdxNavigationMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style.--positioner-width.px": "rootContext.size()?.width", "style.--positioner-height.px": "rootContext.size()?.height" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxNavigationMenuPositioner, isStandalone: true, selector: "[rdxNavigationMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style.--positioner-width.px": "rootContext.size()?.width", "style.--positioner-height.px": "rootContext.size()?.height" } }, providers: [
             ...provideRdxPopperContentWrapper(RdxNavigationMenuPositioner),
             provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuPositioner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuPositioner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuPositioner]',
@@ -693,19 +700,22 @@ class RdxNavigationMenuRoot {
         });
         /** Whether this root is nested inside another navigation menu's content. */
         this.nested = !!this.parentRoot;
-        this.baseId = `rdx-nav-menu-${generateId()}`;
+        this.baseId = injectId('rdx-nav-menu-');
         /**
          * The value of the navigation menu item that should be currently open.
          */
-        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = model(null, /* @ts-ignore */
+        ...(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 */ []));
+        this.defaultValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
         /**
          * The orientation of the navigation menu.
          */
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.orientation = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * The reading direction of the navigation menu.
          */
@@ -736,22 +746,34 @@ class RdxNavigationMenuRoot {
             this.instant.set(false);
             this.onOpenChangeComplete.emit(open);
         });
-        this.instant = signal(false, ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
+        this.instant = signal(false, /* @ts-ignore */
+        ...(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.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
-        this.present = computed(() => this.isOpen() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
-        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
-        this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
-        this.list = signal(undefined, ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
-        this.contents = signal(new Map(), ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
-        this.popup = signal(undefined, ...(ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []));
-        this.size = signal(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.previousValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousValue" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.value() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.isOpen() || this.preventUnmountOnClose(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
+        this.trigger = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.triggers = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
+        this.list = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        this.contents = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
+        this.popup = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []));
+        this.size = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* 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 */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
         this.registeredTriggers = new Map();
         this.viewportTriggerChange = new Set();
         let previousOpen = this.isOpen();
@@ -814,7 +836,7 @@ class RdxNavigationMenuRoot {
         this.preventUnmountOnClose.set(value === null ? change.shouldPreventUnmountOnClose() : false);
         this.value.set(value);
         this.onValueChange.emit(value);
-        if (this.nested && value === null && reason === 'link-select') {
+        if (this.nested && value === null && reason === 'link-press') {
             this.parentRoot?.close(reason, event);
         }
     }
@@ -984,8 +1006,8 @@ class RdxNavigationMenuRoot {
             return !!floating && floating.contains(target);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuRoot, isStandalone: true, selector: "[rdxNavigationMenuRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-nested": "nested ? \"\" : undefined", "attr.dir": "dir()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxNavigationMenuRoot, isStandalone: true, selector: "[rdxNavigationMenuRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-nested": "nested ? \"\" : undefined", "attr.dir": "dir()" } }, providers: [
             provideNavigationMenuRootContext(context),
             // Base UI wraps every NavigationMenu.Root in a FloatingNode and only creates FloatingTree at the
             // top boundary. `provideFloatingTree()` is inherit-or-create, so nested navigation menus join the
@@ -996,7 +1018,7 @@ class RdxNavigationMenuRoot {
             provideFloatingRootContext(() => inject(RdxNavigationMenuRoot).floatingContext)
         ], exportAs: ["rdxNavigationMenuRoot"], hostDirectives: [{ directive: i1.RdxPopper }, { directive: i2.RdxFloatingNodeRegistration }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuRoot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuRoot]',
@@ -1090,7 +1112,11 @@ class RdxNavigationMenuTrigger {
          * 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 */ []));
+        /** Whether the trigger is currently pressed (pointer down), for Base UI's `data-pressed`. */
+        this.pressed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+        this.open = computed(() => this.item.isOpen(), /* @ts-ignore */
+        ...(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((onCleanup) => {
@@ -1115,6 +1141,7 @@ class RdxNavigationMenuTrigger {
         this.rootContext.openOnHover(this.item.value(), this.elementRef.nativeElement, event);
     }
     onPointerLeave(event) {
+        this.pressed.set(false);
         if (event.pointerType === 'touch' || !this.openOnHover()) {
             return;
         }
@@ -1174,10 +1201,10 @@ class RdxNavigationMenuTrigger {
         };
         requestAnimationFrame(tryFocus);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuTrigger, isStandalone: true, selector: "button[rdxNavigationMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "id": "item.triggerId()", "attr.aria-controls": "open() ? rootContext.popup()?.id : undefined", "attr.aria-expanded": "open()", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-popup-open": "open() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.disabled": "disabled() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1$1.RdxCompositeItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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)", "pointerdown": "pressed.set(true)", "pointerup": "pressed.set(false)", "pointercancel": "pressed.set(false)", "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "keydown": "onKeydown($event)" }, properties: { "id": "item.triggerId()", "attr.aria-controls": "open() ? rootContext.popup()?.id : undefined", "attr.aria-expanded": "open()", "attr.data-popup-open": "open() ? \"\" : undefined", "attr.data-pressed": "pressed() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? \"true\" : undefined" } }, hostDirectives: [{ directive: i1$1.RdxCompositeItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxNavigationMenuTrigger]',
@@ -1187,11 +1214,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[id]': 'item.triggerId()',
                         '[attr.aria-controls]': 'open() ? rootContext.popup()?.id : undefined',
                         '[attr.aria-expanded]': 'open()',
-                        '[attr.data-state]': 'open() ? "open" : "closed"',
                         '[attr.data-popup-open]': 'open() ? "" : undefined',
+                        '[attr.data-pressed]': 'pressed() ? "" : undefined',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.disabled]': 'disabled() ? "" : undefined',
+                        // Base UI keeps a disabled nav-menu trigger focusable (`focusableWhenDisabled`): it uses
+                        // `aria-disabled` (not the native `disabled` attribute) so the trigger stays in the tab order,
+                        // while the click / keydown handlers below already no-op when disabled.
+                        '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
                         '(click)': 'onClick($event)',
+                        '(pointerdown)': 'pressed.set(true)',
+                        '(pointerup)': 'pressed.set(false)',
+                        '(pointercancel)': 'pressed.set(false)',
                         '(pointerenter)': 'onPointerEnter($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
                         '(keydown)': 'onKeydown($event)'
@@ -1214,17 +1247,22 @@ class RdxNavigationMenuViewport {
          * Keep the viewport mounted even when the menu is closed.
          */
         this.forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        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.activationDirection = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        this.transitioning = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+        this.size = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.current = null;
         this.rendered = new Map();
         this.previousElement = null;
         this.resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => this.measure()) : null;
         this.activeContent = computed(() => this.rootContext.isOpen() || this.rootContext.transitionStatus() === 'ending'
             ? this.rootContext.activeContent()
-            : undefined, ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
-        this.contents = computed(() => this.rootContext.contents(), ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
+            : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
+        this.contents = computed(() => this.rootContext.contents(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
         const unregister = this.rootContext.registerViewport((previous, next) => {
             this.pendingDirection = getActivationDirection(previous, next);
         });
@@ -1383,17 +1421,16 @@ class RdxNavigationMenuViewport {
             this.rootContext.setSize(nextSize);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxNavigationMenuViewport, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-orientation": "rootContext.orientation()", "attr.data-activation-direction": "activationDirection()", "attr.data-transitioning": "transitioning() ? \"\" : undefined" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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-orientation": "rootContext.orientation()", "attr.data-activation-direction": "activationDirection()", "attr.data-transitioning": "transitioning() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuViewport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuViewport, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuViewport]',
                     host: {
                         '[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'
@@ -1418,8 +1455,8 @@ const navigationMenuImports = [
     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: [RdxNavigationMenuRoot,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuModule, imports: [RdxNavigationMenuRoot,
             RdxNavigationMenuList,
             RdxNavigationMenuItem,
             RdxNavigationMenuTrigger,
@@ -1446,9 +1483,9 @@ class RdxNavigationMenuModule {
             RdxNavigationMenuPopup,
             RdxNavigationMenuArrow,
             RdxNavigationMenuViewport] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxNavigationMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxNavigationMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...navigationMenuImports],