@radix-ng/primitives 1.0.1 → 1.0.2

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

@@ -7,33 +7,83 @@ import { createContext, createFloatingRootContext, useTransitionStatus, createCa
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import * as i3 from '@radix-ng/primitives/floating-focus-manager';
 import { getInteractionTypeFromEvent, RdxFloatingFocusManager, provideFloatingFocusManagerConfig, createRdxTriggerInteraction, useTriggerFocusGuards } from '@radix-ng/primitives/floating-focus-manager';
+import * as i1$1 from '@radix-ng/primitives/composite';
+import { isElementVisible, RdxCompositeListItem, RdxCompositeList } from '@radix-ng/primitives/composite';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
-import * as i1$1 from '@radix-ng/primitives/portal';
+import * as i1$2 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 import { isPlatformBrowser } from '@angular/common';
-import * as i2$1 from '@radix-ng/primitives/composite';
-import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 
-/** Selector for focusable menu items within a popup. */
+/** Selector for menu items within a popup. Disabled items stay focusable to match Base UI. */
 const RDX_MENU_ITEM_SELECTOR = [
-    '[rdxMenuItem]:not([data-disabled])',
-    '[rdxMenuCheckboxItem]:not([data-disabled])',
-    '[rdxMenuRadioItem]:not([data-disabled])',
-    '[rdxMenuLinkItem]:not([data-disabled])',
-    '[rdxMenuSubTrigger]:not([data-disabled])'
+    '[rdxMenuItem]',
+    '[rdxMenuCheckboxItem]',
+    '[rdxMenuRadioItem]',
+    '[rdxMenuLinkItem]',
+    '[rdxMenuSubTrigger]'
 ].join(',');
 function getFocusableMenuItems(popup) {
     return Array.from(popup.querySelectorAll(RDX_MENU_ITEM_SELECTOR)).filter((item) => item.closest('[rdxMenuPopup]') === popup);
 }
+function getCompositeMenuItems(list) {
+    const map = list.itemMap();
+    return list
+        .items()
+        .map(({ element }) => {
+        const metadata = map.get(element);
+        if (!metadata || !isElementVisible(element)) {
+            return null;
+        }
+        return {
+            element,
+            index: metadata.index,
+            label: getMenuItemLabel(element, metadata),
+            metadata
+        };
+    })
+        .filter((item) => item !== null);
+}
+function getDomMenuItems(popup) {
+    return getFocusableMenuItems(popup).map((element, index) => ({
+        element,
+        index,
+        label: getMenuItemLabel(element),
+        metadata: {
+            index,
+            type: getMenuItemType(element),
+            disabled: element.hasAttribute('data-disabled'),
+            label: element.dataset['label']
+        }
+    }));
+}
+function getMenuItemLabel(element, metadata) {
+    return (metadata?.label ?? element.dataset['label'] ?? element.textContent?.trim() ?? '').toLowerCase();
+}
+function getMenuItemType(element) {
+    if (element.hasAttribute('rdxMenuCheckboxItem')) {
+        return 'checkbox-item';
+    }
+    if (element.hasAttribute('rdxMenuRadioItem')) {
+        return 'radio-item';
+    }
+    if (element.hasAttribute('rdxMenuLinkItem')) {
+        return 'link-item';
+    }
+    if (element.hasAttribute('rdxMenuSubTrigger')) {
+        return 'submenu-trigger';
+    }
+    return 'regular-item';
+}
 
 const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext', 'components/menu');
 function buildContext(instance) {
     return {
         isOpen: instance.open,
         present: instance.present,
+        activeIndex: instance.activeIndex.asReadonly(),
         disabled: instance.effectiveDisabled,
         modal: instance.effectiveModal,
         loopFocus: instance.loopFocus,
@@ -55,6 +105,7 @@ function buildContext(instance) {
         beforeContentFocusGuard: instance.beforeContentFocusGuard.asReadonly(),
         transitionStatus: instance.transitionStatus,
         close: (reason, event) => instance.close(reason, event),
+        setActiveIndex: (index) => instance.setActiveIndex(index),
         closeEntireMenu: (reason, event) => instance.closeEntireMenu(reason, event),
         toggle: (reason, event) => instance.toggle(reason, event),
         show: (autoFocus, reason, event) => instance.show(autoFocus, reason, event),
@@ -123,6 +174,7 @@ class RdxMenuRoot {
         this.popupElement = signal(undefined, ...(ngDevMode ? [{ debugName: "popupElement" }] : /* istanbul ignore next */ []));
         this.beforeContentFocusGuard = signal(null, ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
         this.transitionStatus = this.transition.status;
+        this.activeIndex = signal(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
         /** Whether the popup grabs focus when it opens. Set false for menubar hover-switching. */
         this.autoFocus = signal('first', ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
         this.isSubmenu = signal(false, ...(ngDevMode ? [{ debugName: "isSubmenu" }] : /* istanbul ignore next */ []));
@@ -178,6 +230,11 @@ class RdxMenuRoot {
                 this.preventUnmountOnClose.set(false);
             }
         });
+        effect(() => {
+            if (!this.open()) {
+                this.activeIndex.set(null);
+            }
+        });
         let previousOpen = this.open();
         effect(() => {
             const open = this.open();
@@ -244,6 +301,14 @@ class RdxMenuRoot {
     markAsContextMenu() {
         this.isContextMenu.set(true);
     }
+    setActiveIndex(index) {
+        if (this.effectiveDisabled() && index !== null) {
+            return;
+        }
+        if (this.activeIndex() !== index) {
+            this.activeIndex.set(index);
+        }
+    }
     setAllowMouseUpTrigger(value) {
         if (this.parentRoot) {
             this.parentRoot.setAllowMouseUpTrigger(value);
@@ -338,6 +403,7 @@ class RdxMenuRoot {
             return;
         }
         if (autoFocus === 'popup') {
+            this.setActiveIndex(null);
             popup.focus({ preventScroll: true });
             return;
         }
@@ -448,6 +514,7 @@ const checkboxItemContextFactory = () => {
 class RdxMenuCheckboxItem {
     constructor() {
         this.rootContext = injectRdxMenuRootContext(true);
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
         this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
@@ -460,19 +527,28 @@ class RdxMenuCheckboxItem {
         this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
         /** Emits when the checked state changes. */
         this.onCheckedChange = output();
-        this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         // Expose helpers for host bindings
         this.isIndeterminate = isIndeterminate;
         this.getCheckedState = getCheckedState;
+        effect(() => {
+            this.listItem.setMetadata({
+                type: 'checkbox-item',
+                disabled: this.effectiveDisabled(),
+                label: this.label()
+            });
+        });
     }
     onFocus() {
-        if (!this.effectiveDisabled()) {
+        if (!this.rootContext?.disabled()) {
             this.isFocused.set(true);
         }
+        this.setActiveIndex();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.clearActiveIndex();
     }
     onPointerMove(event) {
         if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
@@ -481,6 +557,7 @@ class RdxMenuCheckboxItem {
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
+        this.setActiveIndex();
         if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
@@ -490,6 +567,8 @@ class RdxMenuCheckboxItem {
             return;
         }
         if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
+            this.isFocused.set(false);
+            this.clearActiveIndex();
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
@@ -520,8 +599,22 @@ class RdxMenuCheckboxItem {
         this.checked.set(next);
         this.onCheckedChange.emit(next);
     }
+    setActiveIndex() {
+        if (!this.rootContext || this.rootContext.disabled()) {
+            return;
+        }
+        const index = this.listItem.index();
+        if (index !== -1) {
+            this.rootContext.setActiveIndex(index);
+        }
+    }
+    clearActiveIndex() {
+        if (this.rootContext?.activeIndex() === this.listItem.index()) {
+            this.rootContext.setActiveIndex(null);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuCheckboxItem, isStandalone: true, selector: "[rdxMenuCheckboxItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)], exportAs: ["rdxMenuCheckboxItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuCheckboxItem, isStandalone: true, selector: "[rdxMenuCheckboxItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)], exportAs: ["rdxMenuCheckboxItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItem, decorators: [{
             type: Directive,
@@ -529,9 +622,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxMenuCheckboxItem]',
                     exportAs: 'rdxMenuCheckboxItem',
                     providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)],
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         role: 'menuitemcheckbox',
-                        tabindex: '-1',
+                        '[attr.tabindex]': 'rootContext?.isOpen() && highlighted() ? 0 : -1',
                         '[attr.aria-checked]': 'isIndeterminate(checked()) ? "mixed" : checked()',
                         '[attr.data-state]': 'getCheckedState(checked())',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
@@ -548,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], onCheckedChange: [{ type: i0.Output, args: ["onCheckedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], onCheckedChange: [{ type: i0.Output, args: ["onCheckedChange"] }] } });
 
 /**
  * Renders when the parent checkbox item is checked or indeterminate.
@@ -642,6 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxMenuItem {
     constructor() {
         this.rootContext = injectRdxMenuRootContext(true);
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
         this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
@@ -652,16 +747,25 @@ class RdxMenuItem {
         this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Emits when the item is selected. */
         this.onSelect = output();
-        this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.listItem.setMetadata({
+                type: 'regular-item',
+                disabled: this.effectiveDisabled(),
+                label: this.label()
+            });
+        });
     }
     onFocus() {
-        if (!this.effectiveDisabled()) {
+        if (!this.rootContext?.disabled()) {
             this.isFocused.set(true);
         }
+        this.setActiveIndex();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.clearActiveIndex();
     }
     onPointerMove(event) {
         if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
@@ -670,6 +774,7 @@ class RdxMenuItem {
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
+        this.setActiveIndex();
         if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
@@ -681,6 +786,8 @@ class RdxMenuItem {
         // Clear highlight when the pointer leaves: move focus back to the popup. A subsequent
         // pointermove on a sibling item re-focuses it, so moving between items still works.
         if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
+            this.isFocused.set(false);
+            this.clearActiveIndex();
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
@@ -706,17 +813,32 @@ class RdxMenuItem {
         if (this.closeOnClick())
             this.rootContext?.closeEntireMenu();
     }
+    setActiveIndex() {
+        if (!this.rootContext || this.rootContext.disabled()) {
+            return;
+        }
+        const index = this.listItem.index();
+        if (index !== -1) {
+            this.rootContext.setActiveIndex(index);
+        }
+    }
+    clearActiveIndex() {
+        if (this.rootContext?.activeIndex() === this.listItem.index()) {
+            this.rootContext.setActiveIndex(null);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuItem, isStandalone: true, selector: "[rdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuItem, isStandalone: true, selector: "[rdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuItem]',
                     exportAs: 'rdxMenuItem',
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         role: 'menuitem',
-                        tabindex: '-1',
+                        '[attr.tabindex]': 'rootContext?.isOpen() && highlighted() ? 0 : -1',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
@@ -731,7 +853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
 
 /**
  * A menu item that renders as a link.
@@ -739,6 +861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RdxMenuLinkItem {
     constructor() {
         this.rootContext = injectRdxMenuRootContext(true);
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
         this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** Whether this item is disabled. */
@@ -749,16 +872,25 @@ class RdxMenuLinkItem {
         this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /** Emits when the item is selected. */
         this.onSelect = output();
-        this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.listItem.setMetadata({
+                type: 'link-item',
+                disabled: this.effectiveDisabled(),
+                label: this.label()
+            });
+        });
     }
     onFocus() {
-        if (!this.effectiveDisabled()) {
+        if (!this.rootContext?.disabled()) {
             this.isFocused.set(true);
         }
+        this.setActiveIndex();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.clearActiveIndex();
     }
     onPointerMove(event) {
         if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
@@ -767,6 +899,7 @@ class RdxMenuLinkItem {
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
+        this.setActiveIndex();
         if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
@@ -776,6 +909,8 @@ class RdxMenuLinkItem {
             return;
         }
         if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
+            this.isFocused.set(false);
+            this.clearActiveIndex();
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
@@ -796,25 +931,38 @@ class RdxMenuLinkItem {
         this.elementRef.nativeElement.click();
     }
     onActivate(event) {
+        event.preventDefault();
         if (this.effectiveDisabled()) {
-            event.preventDefault();
             return;
         }
-        this.onSelect.emit();
-        if (this.closeOnClick())
-            this.rootContext?.closeEntireMenu();
+        this.elementRef.nativeElement.click();
+    }
+    setActiveIndex() {
+        if (!this.rootContext || this.rootContext.disabled()) {
+            return;
+        }
+        const index = this.listItem.index();
+        if (index !== -1) {
+            this.rootContext.setActiveIndex(index);
+        }
+    }
+    clearActiveIndex() {
+        if (this.rootContext?.activeIndex() === this.listItem.index()) {
+            this.rootContext.setActiveIndex(null);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuLinkItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuLinkItem, isStandalone: true, selector: "a[rdxMenuLinkItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick($event)", "keydown.enter": "onActivate($event)" }, properties: { "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuLinkItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuLinkItem, isStandalone: true, selector: "a[rdxMenuLinkItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick($event)", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuLinkItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuLinkItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[rdxMenuLinkItem]',
                     exportAs: 'rdxMenuLinkItem',
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         role: 'menuitem',
-                        tabindex: '-1',
+                        '[attr.tabindex]': 'rootContext?.isOpen() && highlighted() ? 0 : -1',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
@@ -825,10 +973,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(pointerleave)': 'onPointerLeave($event)',
                         '(mouseup)': 'onMouseUp($event)',
                         '(click)': 'onItemClick($event)',
-                        '(keydown.enter)': 'onActivate($event)'
+                        '(keydown.enter)': 'onActivate($event)',
+                        '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
 
 /**
  * A container for the menu contents.
@@ -840,6 +989,7 @@ class RdxMenuPopup {
         this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
         this.focusManager = inject(RdxFloatingFocusManager);
         this.focusScope = inject(RdxFocusScope);
+        this.compositeList = inject(RdxCompositeList, { self: true });
         this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
         this.elementRef = inject(ElementRef);
         this.search = '';
@@ -954,10 +1104,11 @@ class RdxMenuPopup {
         }
     }
     handleKeydown(event) {
-        const el = this.elementRef.nativeElement;
-        const items = getFocusableMenuItems(el);
-        const current = el.ownerDocument.activeElement;
-        const currentIndex = items.indexOf(current);
+        if (this.rootContext.disabled()) {
+            return;
+        }
+        const items = this.menuItems();
+        const currentIndex = this.currentItemIndex(items);
         switch (event.key) {
             case 'ArrowDown': {
                 event.preventDefault();
@@ -968,7 +1119,7 @@ class RdxMenuPopup {
                         ? items[0]
                         : items[items.length - 1]
                     : items[currentIndex + 1];
-                next?.focus({ preventScroll: true });
+                this.focusMenuItem(next);
                 break;
             }
             case 'ArrowUp': {
@@ -980,19 +1131,19 @@ class RdxMenuPopup {
                         ? items[items.length - 1]
                         : items[0]
                     : items[currentIndex - 1];
-                prev?.focus({ preventScroll: true });
+                this.focusMenuItem(prev);
                 break;
             }
             case 'Home': {
                 event.preventDefault();
                 event.stopPropagation();
-                items[0]?.focus({ preventScroll: true });
+                this.focusMenuItem(items[0]);
                 break;
             }
             case 'End': {
                 event.preventDefault();
                 event.stopPropagation();
-                items[items.length - 1]?.focus({ preventScroll: true });
+                this.focusMenuItem(items[items.length - 1]);
                 break;
             }
             case 'ArrowLeft': {
@@ -1055,11 +1206,8 @@ class RdxMenuPopup {
                     const query = this.search.length > 1 && [...this.search].every((c) => c === char) ? char : this.search;
                     const startIndex = currentIndex >= 0 ? currentIndex + 1 : 0;
                     const rotated = [...items.slice(startIndex), ...items.slice(0, startIndex)];
-                    const match = rotated.find((item) => {
-                        const text = (item.dataset['label'] ?? item.textContent?.trim() ?? '').toLowerCase();
-                        return text.startsWith(query);
-                    });
-                    match?.focus({ preventScroll: true });
+                    const match = rotated.find((item) => item.label.startsWith(query));
+                    this.focusMenuItem(match);
                 }
                 break;
             }
@@ -1079,14 +1227,34 @@ class RdxMenuPopup {
         if (activeElement && popup.contains(activeElement)) {
             return;
         }
-        const items = getFocusableMenuItems(popup);
+        const items = this.menuItems();
         if (items.length === 0) {
             if (attempt < maxAttempts) {
                 this.scheduleSubmenuKeyboardFocus(attempt + 1);
             }
             return;
         }
-        items[0]?.focus({ preventScroll: true });
+        this.focusMenuItem(items[0]);
+    }
+    menuItems() {
+        const compositeItems = getCompositeMenuItems(this.compositeList);
+        return compositeItems.length > 0 ? compositeItems : getDomMenuItems(this.elementRef.nativeElement);
+    }
+    currentItemIndex(items) {
+        const current = this.elementRef.nativeElement.ownerDocument.activeElement;
+        const focusedIndex = items.findIndex((item) => item.element === current);
+        if (focusedIndex !== -1) {
+            return focusedIndex;
+        }
+        const activeIndex = this.rootContext.activeIndex();
+        return items.findIndex((item) => item.index === activeIndex);
+    }
+    focusMenuItem(item) {
+        if (!item) {
+            return;
+        }
+        this.rootContext.setActiveIndex(item.index);
+        item.element.focus({ preventScroll: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPopup, isStandalone: true, selector: "[rdxMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "keydown": "handleKeydown($event)", "rdx-menu-close-parent": "handleCloseParent($event)" }, properties: { "attr.aria-orientation": "rootContext.orientation()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-align": "align()", "attr.data-side": "side()" } }, providers: [
@@ -1138,14 +1306,14 @@ class RdxMenuPopup {
                     closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
-        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }], ngImport: i0 }); }
+        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }, { directive: i1$1.RdxCompositeList }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuPopup]',
                     exportAs: 'rdxMenuPopup',
-                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager],
+                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager, RdxCompositeList],
                     providers: [
                         provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxMenuRootContext();
@@ -1224,7 +1392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class RdxMenuPortal {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, decorators: [{
             type: Directive,
@@ -1422,6 +1590,7 @@ class RdxMenuRadioItem {
     constructor() {
         this.rootContext = injectRdxMenuRootContext(true);
         this.radioGroupContext = injectRdxMenuRadioGroupContext();
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
         this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
         /** The value of this radio item. */
@@ -1435,17 +1604,26 @@ class RdxMenuRadioItem {
         /** Emits when this item is selected. */
         this.onSelect = output();
         this.checked = computed(() => this.radioGroupContext.value() === this.value(), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.activeIndex() === this.listItem.index() || this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled() || this.radioGroupContext.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.getCheckedState = getCheckedState;
+        effect(() => {
+            this.listItem.setMetadata({
+                type: 'radio-item',
+                disabled: this.effectiveDisabled(),
+                label: this.label()
+            });
+        });
     }
     onFocus() {
-        if (!this.effectiveDisabled()) {
+        if (!this.rootContext?.disabled()) {
             this.isFocused.set(true);
         }
+        this.setActiveIndex();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.clearActiveIndex();
     }
     onPointerMove(event) {
         if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
@@ -1454,6 +1632,7 @@ class RdxMenuRadioItem {
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
+        this.setActiveIndex();
         if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
@@ -1463,6 +1642,8 @@ class RdxMenuRadioItem {
             return;
         }
         if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
+            this.isFocused.set(false);
+            this.clearActiveIndex();
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
@@ -1493,8 +1674,22 @@ class RdxMenuRadioItem {
         if (this.closeOnClick())
             this.rootContext?.closeEntireMenu();
     }
+    setActiveIndex() {
+        if (!this.rootContext || this.rootContext.disabled()) {
+            return;
+        }
+        const index = this.listItem.index();
+        if (index !== -1) {
+            this.rootContext.setActiveIndex(index);
+        }
+    }
+    clearActiveIndex() {
+        if (this.rootContext?.activeIndex() === this.listItem.index()) {
+            this.rootContext.setActiveIndex(null);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioItem, isStandalone: true, selector: "[rdxMenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitemradio", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)], exportAs: ["rdxMenuRadioItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioItem, isStandalone: true, selector: "[rdxMenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitemradio" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.tabindex": "rootContext?.isOpen() && highlighted() ? 0 : -1", "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)], exportAs: ["rdxMenuRadioItem"], hostDirectives: [{ directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItem, decorators: [{
             type: Directive,
@@ -1502,9 +1697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxMenuRadioItem]',
                     exportAs: 'rdxMenuRadioItem',
                     providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)],
+                    hostDirectives: [RdxCompositeListItem],
                     host: {
                         role: 'menuitemradio',
-                        tabindex: '-1',
+                        '[attr.tabindex]': 'rootContext?.isOpen() && highlighted() ? 0 : -1',
                         '[attr.aria-checked]': 'checked()',
                         '[attr.data-state]': 'getCheckedState(checked())',
                         '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
@@ -1521,7 +1717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
 
 /**
  * Renders when the parent radio item is selected.
@@ -1915,6 +2111,8 @@ class RdxMenuSubTrigger {
     constructor() {
         this.submenuContext = injectRdxMenuRootContext();
         this.submenuRoot = inject(RdxMenuRoot);
+        this.parentMenuRoot = this.submenuRoot.parentRoot;
+        this.listItem = inject(RdxCompositeListItem, { self: true });
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
@@ -1936,8 +2134,10 @@ class RdxMenuSubTrigger {
         this.closeDelay = input(0, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined$1 });
         /** Explicit typeahead label. When set, overrides textContent for character search. */
         this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /** Highlighted when focused OR while the submenu is open. */
-        this.highlighted = computed(() => this.isFocused() || this.submenuContext.isOpen(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        /** Highlighted when active in the parent menu or while the submenu is open. */
+        this.highlighted = computed(() => this.parentMenuRoot?.activeIndex() === this.listItem.index() ||
+            this.isFocused() ||
+            this.submenuContext.isOpen(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled() || this.submenuContext.disabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
         this.submenuContext.markAsSubmenu();
@@ -1950,6 +2150,13 @@ class RdxMenuSubTrigger {
                 submenuRootsByTrigger.delete(el);
             });
         });
+        effect(() => {
+            this.listItem.setMetadata({
+                type: 'submenu-trigger',
+                disabled: this.effectiveDisabled(),
+                label: this.label()
+            });
+        });
         // While this submenu is open by hover, it owns the decision to close itself: a document
         // `mousemove` handler keeps it open while the cursor traverses the safe polygon toward the
         // popup, and a pointer-events tunnel stops siblings from stealing it mid-traversal.
@@ -2011,13 +2218,16 @@ class RdxMenuSubTrigger {
         }
     }
     onFocus() {
-        if (!this.effectiveDisabled()) {
-            this.clearSiblingHighlights();
-            this.isFocused.set(true);
+        if (this.submenuContext.disabled()) {
+            return;
         }
+        this.clearSiblingHighlights();
+        this.isFocused.set(true);
+        this.setParentActiveIndex();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.clearParentActiveIndex();
     }
     onClick(event) {
         if (this.effectiveDisabled())
@@ -2100,6 +2310,7 @@ class RdxMenuSubTrigger {
             return;
         this.lastPointer = { x: event.clientX, y: event.clientY };
         this.clearSiblingHighlights();
+        this.setParentActiveIndex();
         const el = this.elementRef.nativeElement;
         if (this.submenuContext.highlightItemOnHover() && el.ownerDocument.activeElement !== el) {
             el.focus({ preventScroll: true });
@@ -2118,6 +2329,7 @@ class RdxMenuSubTrigger {
     }
     clearHighlight() {
         this.isFocused.set(false);
+        this.clearParentActiveIndex();
     }
     closeSiblingSubmenus() {
         const currentTrigger = this.elementRef.nativeElement;
@@ -2177,23 +2389,34 @@ class RdxMenuSubTrigger {
             setTimeout(run);
         }
     }
+    setParentActiveIndex() {
+        const index = this.listItem.index();
+        if (index === -1 || !this.parentMenuRoot || this.parentMenuRoot.effectiveDisabled()) {
+            return;
+        }
+        this.parentMenuRoot.setActiveIndex(index);
+    }
+    clearParentActiveIndex() {
+        if (this.parentMenuRoot?.activeIndex() === this.listItem.index()) {
+            this.parentMenuRoot.setActiveIndex(null);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && effectiveDisabled() ? \"\" : undefined", "attr.data-state": "submenuContext.isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.tabindex": "parentMenuRoot?.open() && highlighted() ? 0 : -1", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-state": "submenuContext.isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSubTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuSubTrigger]',
                     exportAs: 'rdxMenuSubTrigger',
-                    hostDirectives: [RdxPopperAnchor],
+                    hostDirectives: [RdxPopperAnchor, RdxCompositeListItem],
                     host: {
                         '[attr.type]': 'nativeButtonState() ? "button" : undefined',
                         role: 'menuitem',
-                        tabindex: '-1',
+                        '[attr.tabindex]': 'parentMenuRoot?.open() && highlighted() ? 0 : -1',
                         '[attr.aria-haspopup]': '"menu"',
                         '[attr.aria-expanded]': 'submenuContext.isOpen()',
                         '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
-                        '[attr.disabled]': 'nativeButtonState() && effectiveDisabled() ? "" : undefined',
                         '[attr.data-state]': 'submenuContext.isOpen() ? "open" : "closed"',
                         '[attr.data-popup-open]': 'submenuContext.isOpen() ? "" : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
@@ -2203,6 +2426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(blur)': 'onBlur()',
                         '(click)': 'onClick($event)',
                         '(keydown.enter)': 'onEnter($event)',
+                        '(keydown.space)': 'onEnter($event)',
                         '(keydown.arrowleft)': 'onArrowLeft($event)',
                         '(keydown.arrowright)': 'onArrowRight($event)',
                         '(pointermove)': 'onPointerMove($event)',
@@ -2226,6 +2450,7 @@ class RdxMenuTrigger {
         this.openedByHover = false;
         this.ignoreNextClick = null;
         this.handleDocumentMouseUp = (event) => {
+            clearTimeout(this.allowMouseUpTriggerTimer);
             this.allowMouseUpTriggerTimer = undefined;
             this.rootContext.setAllowMouseUpTrigger(false);
             const trigger = this.elementRef.nativeElement;
@@ -2515,14 +2740,14 @@ class RdxMenuTrigger {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuTrigger, isStandalone: true, selector: "[rdxMenuTrigger]", inputs: { nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-state": "triggerInteraction.dataState()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i2$1.RdxCompositeItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuTrigger, isStandalone: true, selector: "[rdxMenuTrigger]", inputs: { nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "triggerInteraction.ariaExpanded()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-state": "triggerInteraction.dataState()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuTrigger]',
                     exportAs: 'rdxMenuTrigger',
-                    hostDirectives: [RdxPopperAnchor, RdxCompositeItem],
+                    hostDirectives: [RdxPopperAnchor],
                     host: {
                         '[attr.type]': 'nativeButtonState() ? "button" : undefined',
                         '[attr.role]': 'rootContext.hasTriggerInteractionHandler() ? "menuitem" : nativeButtonState() ? undefined : "button"',