@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

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

@@ -1,48 +1,236 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, input, booleanAttribute, computed, signal, effect, numberAttribute, untracked, SimpleChange, NgModule } from '@angular/core';
-import * as i1 from '@angular/cdk/menu';
-import { CdkMenu, CdkMenuGroup, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
-import { outputFromObservable } from '@angular/core/rxjs-interop';
+import { inject, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive, ElementRef, DestroyRef, numberAttribute, afterNextRender, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import { createContext, useTransitionStatus, getMaxTransitionDuration } from '@radix-ng/primitives/core';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i2 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayer, RdxDismissableLayersContextToken, provideRdxDismissableLayerConfig, RdxDismissableLayerBranch } from '@radix-ng/primitives/dismissable-layer';
+import * as i3 from '@radix-ng/primitives/focus-scope';
+import { RdxFocusScope, provideRdxFocusScopeConfig } from '@radix-ng/primitives/focus-scope';
+import * as i1$1 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
 
-class RdxMenuContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuContentDirective, isStandalone: true, selector: "[RdxMenuContent]", host: { attributes: { "role": "menu" }, properties: { "attr.aria-orientation": "\"vertical\"" } }, hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0 }); }
+const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext');
+function buildContext(instance) {
+    return {
+        isOpen: instance.open,
+        disabled: instance.disabled,
+        modal: instance.modal,
+        loopFocus: instance.loopFocus,
+        highlightItemOnHover: instance.highlightItemOnHover,
+        orientation: instance.orientation,
+        closeParentOnEsc: instance.closeParentOnEsc,
+        autoFocus: instance.autoFocus.asReadonly(),
+        isSubmenu: instance.isSubmenu.asReadonly(),
+        hasTriggerInteractionHandler: instance.hasTriggerInteractionHandler.asReadonly(),
+        trigger: instance.trigger.asReadonly(),
+        transitionStatus: instance.transitionStatus,
+        close: () => instance.close(),
+        toggle: () => instance.toggle(),
+        show: (autoFocus) => instance.show(autoFocus),
+        showWithoutAutoFocus: () => instance.show(false),
+        registerTrigger: (el) => instance.registerTrigger(el),
+        registerTransitionElement: (el) => instance.registerTransitionElement(el),
+        registerPopupArrowNavigationHandler: (handler) => instance.registerPopupArrowNavigationHandler(handler),
+        registerTriggerInteractionHandler: (handler) => instance.registerTriggerInteractionHandler(handler),
+        markAsSubmenu: () => instance.markAsSubmenu(),
+        closeParent: () => instance.closeParent(),
+        handlePopupArrowNavigation: (offset) => instance.handlePopupArrowNavigation(offset),
+        handleTriggerInteraction: (interaction) => instance.handleTriggerInteraction(interaction)
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuContentDirective, decorators: [{
+const contextFactory = () => buildContext(inject(RdxMenuRoot));
+/**
+ * Groups all parts of a menu.
+ */
+class RdxMenuRoot {
+    constructor() {
+        this.popper = inject(RdxPopper);
+        /** Shared open/close transition state machine (completes on the real animationend). */
+        this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
+        this.hasAppliedDefaultOpen = false;
+        /** Whether the menu is currently open. */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Whether the menu is initially open. */
+        this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether interactions with the menu are disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the menu should block outside interactions. */
+        this.modal = input(false, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether keyboard navigation wraps at list boundaries. */
+        this.loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether moving the pointer over items should highlight them. */
+        this.highlightItemOnHover = input(true, { ...(ngDevMode ? { debugName: "highlightItemOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The menu orientation. */
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** Whether pressing Escape inside a submenu closes the whole menu chain. */
+        this.closeParentOnEsc = input(false, { ...(ngDevMode ? { debugName: "closeParentOnEsc" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Emits when the open state changes. */
+        this.onOpenChange = output();
+        /** Emits when the open/close CSS transition or animation finishes. */
+        this.onOpenChangeComplete = output();
+        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.transitionStatus = this.transition.status;
+        /** 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 */ []));
+        this.hasTriggerInteractionHandler = signal(false, ...(ngDevMode ? [{ debugName: "hasTriggerInteractionHandler" }] : /* istanbul ignore next */ []));
+        this.state = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const defaultOpen = this.defaultOpen();
+            if (!this.hasAppliedDefaultOpen && defaultOpen) {
+                this.hasAppliedDefaultOpen = true;
+                this.open.set(defaultOpen);
+            }
+        });
+        effect(() => this.popper.anchorOverride.set(this.trigger()));
+        let previousOpen = this.open();
+        effect(() => {
+            const open = this.open();
+            if (open !== previousOpen) {
+                previousOpen = open;
+                untracked(() => this.transition.start(open));
+            }
+        });
+    }
+    show(autoFocus = 'first') {
+        if (this.disabled()) {
+            return;
+        }
+        this.autoFocus.set(autoFocus === true ? 'first' : autoFocus);
+        if (!this.open()) {
+            this.open.set(true);
+            this.onOpenChange.emit(true);
+        }
+    }
+    close() {
+        if (this.open()) {
+            this.open.set(false);
+            this.onOpenChange.emit(false);
+        }
+    }
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.show();
+        }
+    }
+    registerTrigger(el) {
+        this.registeredTrigger = el;
+        this.trigger.set(el);
+        return () => {
+            if (this.registeredTrigger === el) {
+                this.registeredTrigger = undefined;
+                this.trigger.set(undefined);
+            }
+        };
+    }
+    registerTransitionElement(element) {
+        return this.transition.registerElement(element);
+    }
+    registerPopupArrowNavigationHandler(handler) {
+        this.popupArrowNavigationHandler = handler;
+        return () => {
+            if (this.popupArrowNavigationHandler === handler) {
+                this.popupArrowNavigationHandler = undefined;
+            }
+        };
+    }
+    handlePopupArrowNavigation(offset) {
+        return this.popupArrowNavigationHandler?.(offset) ?? false;
+    }
+    registerTriggerInteractionHandler(handler) {
+        this.triggerInteractionHandler = handler;
+        this.hasTriggerInteractionHandler.set(true);
+        return () => {
+            if (this.triggerInteractionHandler === handler) {
+                this.triggerInteractionHandler = undefined;
+                this.hasTriggerInteractionHandler.set(false);
+            }
+        };
+    }
+    handleTriggerInteraction(interaction) {
+        return this.triggerInteractionHandler?.(interaction) ?? false;
+    }
+    markAsSubmenu() {
+        this.isSubmenu.set(true);
+    }
+    closeParent() {
+        this.trigger()?.dispatchEvent(new CustomEvent('rdx-menu-close-parent', { bubbles: true }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRoot, isStandalone: true, selector: "[rdxMenuRoot],[rdxMenuSubmenuRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, closeParentOnEsc: { classPropertyName: "closeParentOnEsc", publicName: "closeParentOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideRdxMenuRootContext(contextFactory)], exportAs: ["rdxMenuRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRoot, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuContent]',
-                    hostDirectives: [CdkMenu],
-                    host: {
-                        role: 'menu',
-                        '[attr.aria-orientation]': '"vertical"'
-                    }
+                    selector: '[rdxMenuRoot],[rdxMenuSubmenuRoot]',
+                    exportAs: 'rdxMenuRoot',
+                    providers: [provideRdxMenuRootContext(contextFactory)],
+                    hostDirectives: [RdxPopper]
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], closeParentOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeParentOnEsc", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
 
-class RdxMenuDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuDirective, isStandalone: true, selector: "[RdxMenuRoot],[RdxMenuSub]", hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0 }); }
+/**
+ * An optional visual arrow connecting the popup to its trigger.
+ * Place it inside `rdxMenuPopup`. Positioning is handled by the shared Popper Arrow primitive.
+ */
+class RdxMenuArrow {
+    constructor() {
+        this.rootContext = injectRdxMenuRootContext();
+        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: RdxMenuArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuArrow, isStandalone: true, selector: "[rdxMenuArrow]", 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" } }, exportAs: ["rdxMenuArrow"], hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuArrow, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuRoot],[RdxMenuSub]',
-                    hostDirectives: [CdkMenu]
+                    selector: '[rdxMenuArrow]',
+                    exportAs: 'rdxMenuArrow',
+                    hostDirectives: [RdxPopperArrow],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-uncentered]': 'uncentered() ? "" : undefined'
+                    }
                 }]
         }] });
 
-class RdxMenuGroupDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuGroupDirective, isStandalone: true, selector: "[RdxMenuGroup]", host: { attributes: { "role": "group" } }, hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 }); }
+/**
+ * An optional overlay rendered behind the menu popup.
+ * Style it with `position: fixed; inset: 0` and use `data-open` / `data-closed`
+ * for CSS animations.
+ */
+class RdxMenuBackdrop {
+    constructor() {
+        this.rootContext = injectRdxMenuRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuBackdrop, isStandalone: true, selector: "[rdxMenuBackdrop]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "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" } }, exportAs: ["rdxMenuBackdrop"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuBackdrop, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuGroup]',
-                    hostDirectives: [CdkMenuGroup],
+                    selector: '[rdxMenuBackdrop]',
+                    exportAs: 'rdxMenuBackdrop',
                     host: {
-                        role: 'group'
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': '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'
                     }
                 }]
         }] });
@@ -54,26 +242,35 @@ function getCheckedState(checked) {
     return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
 }
 
-class RdxMenuItemCheckboxDirective {
+const [injectRdxMenuCheckboxItemContext, provideRdxMenuCheckboxItemContext] = createContext('RdxMenuCheckboxItemContext');
+const checkboxItemContextFactory = () => {
+    const instance = inject(RdxMenuCheckboxItem);
+    return {
+        checked: instance.checked
+    };
+};
+/**
+ * A menu item that can be checked or unchecked.
+ */
+class RdxMenuCheckboxItem {
     constructor() {
-        this.cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-        this.onCheckedChange = outputFromObservable(this.cdkMenuItemCheckbox.triggered);
-        this.disabledState = computed(() => this.disabled, ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
-        this.highlightedState = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlightedState" }] : []));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+        this.rootContext = injectRdxMenuRootContext(true);
+        this.elementRef = inject(ElementRef);
+        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        /** Whether this item is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether toggling closes the menu. Defaults to false — checkbox items stay open. */
+        this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Explicit typeahead label. When set, overrides textContent for character search. */
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** The checked state of the item. */
+        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 */ []));
+        // Expose helpers for host bindings
         this.isIndeterminate = isIndeterminate;
         this.getCheckedState = getCheckedState;
-        effect(() => {
-            if (isIndeterminate(this.checked())) {
-                this.cdkMenuItemCheckbox.checked = true;
-            }
-            else {
-                this.cdkMenuItemCheckbox.checked = !this.checked();
-            }
-            this.cdkMenuItemCheckbox.disabled = this.disabled();
-        });
     }
     onFocus() {
         if (!this.disabled()) {
@@ -84,54 +281,152 @@ class RdxMenuItemCheckboxDirective {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented)
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
             return;
-        if (!(event.pointerType === 'mouse'))
+        }
+        if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
-        if (!this.disabled()) {
-            const item = event.currentTarget;
-            item?.focus({ preventScroll: true });
         }
+        if (document.activeElement !== this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.focus({ preventScroll: true });
+        }
+    }
+    onPointerLeave(event) {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+        if (document.activeElement === this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
+        }
+    }
+    onItemClick() {
+        if (this.disabled())
+            return;
+        this.toggleChecked();
+        if (this.closeOnClick())
+            this.rootContext?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxMenuItemCheckboxDirective, isStandalone: true, selector: "[RdxMenuItemCheckbox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-highlighted": "highlightedState() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox, outputs: ["cdkMenuItemTriggered", "menuItemTriggered"] }], ngImport: i0 }); }
+    onActivate(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.toggleChecked();
+        if (this.closeOnClick())
+            this.rootContext?.close();
+    }
+    toggleChecked() {
+        const next = isIndeterminate(this.checked()) ? true : !this.checked();
+        this.checked.set(next);
+        this.onCheckedChange.emit(next);
+    }
+    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)", "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": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)], exportAs: ["rdxMenuCheckboxItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemCheckboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuItemCheckbox]',
-                    hostDirectives: [
-                        {
-                            directive: CdkMenuItemCheckbox,
-                            outputs: ['cdkMenuItemTriggered: menuItemTriggered']
-                        }
-                    ],
+                    selector: '[rdxMenuCheckboxItem]',
+                    exportAs: 'rdxMenuCheckboxItem',
+                    providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)],
                     host: {
                         role: 'menuitemcheckbox',
+                        tabindex: '-1',
                         '[attr.aria-checked]': 'isIndeterminate(checked()) ? "mixed" : checked()',
                         '[attr.data-state]': 'getCheckedState(checked())',
-                        '[attr.data-highlighted]': "highlightedState() ? '' : undefined",
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
+                        '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
-                        '(pointermove)': 'onPointerMove($event)'
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(click)': 'onItemClick()',
+                        '(keydown.enter)': 'onActivate($event)',
+                        '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], 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"] }] } });
 
-class RdxMenuItemRadioDirective {
+/**
+ * Renders when the parent checkbox item is checked or indeterminate.
+ * Set `keepMounted` to keep the element in the DOM when unchecked (enables CSS animations).
+ */
+class RdxMenuCheckboxItemIndicator {
     constructor() {
-        this.cdkMenuItemRadio = inject(CdkMenuItemRadio, { host: true });
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.onValueChange = outputFromObservable(this.cdkMenuItemRadio.triggered);
-        this.disabledState = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
-        this.highlightedState = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlightedState" }] : []));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
-        this.getCheckedState = getCheckedState;
-        effect(() => {
-            this.cdkMenuItemRadio.checked = this.checked();
-            this.cdkMenuItemRadio.disabled = this.disabled();
-        });
+        this.itemContext = injectRdxMenuCheckboxItemContext();
+        /** Keep the indicator in the DOM when unchecked so CSS exit animations can play. */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.dataState = computed(() => getCheckedState(this.itemContext.checked()), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        this.isVisible = computed(() => isIndeterminate(this.itemContext.checked()) || this.itemContext.checked() === true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuCheckboxItemIndicator, isStandalone: true, selector: "[rdxMenuCheckboxItemIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "dataState()", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null" } }, exportAs: ["rdxMenuCheckboxItemIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuCheckboxItemIndicator]',
+                    exportAs: 'rdxMenuCheckboxItemIndicator',
+                    host: {
+                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-starting-style]': 'isVisible() ? "" : undefined',
+                        '[attr.data-ending-style]': '!isVisible() ? "" : undefined',
+                        '[style.display]': '!keepMounted() && !isVisible() ? "none" : null'
+                    }
+                }]
+        }], propDecorators: { keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
+
+/**
+ * Groups related menu items together.
+ */
+class RdxMenuGroup {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuGroup, isStandalone: true, selector: "[rdxMenuGroup]", host: { attributes: { "role": "group" } }, exportAs: ["rdxMenuGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuGroup]',
+                    exportAs: 'rdxMenuGroup',
+                    host: {
+                        role: 'group'
+                    }
+                }]
+        }] });
+
+/**
+ * A label for a menu group.
+ */
+class RdxMenuGroupLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuGroupLabel, isStandalone: true, selector: "[rdxMenuGroupLabel]", exportAs: ["rdxMenuGroupLabel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuGroupLabel]',
+                    exportAs: 'rdxMenuGroupLabel'
+                }]
+        }] });
+
+/**
+ * An individual menu item.
+ */
+class RdxMenuItem {
+    constructor() {
+        this.rootContext = injectRdxMenuRootContext(true);
+        this.elementRef = inject(ElementRef);
+        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        /** Whether this item is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether selecting this item closes the menu. */
+        this.closeOnClick = input(true, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Explicit typeahead label. When set, overrides textContent for character search. */
+        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 */ []));
     }
     onFocus() {
         if (!this.disabled()) {
@@ -142,83 +437,619 @@ class RdxMenuItemRadioDirective {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented)
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
             return;
-        if (!(event.pointerType === 'mouse'))
+        }
+        if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
-        if (!this.disabled()) {
-            const item = event.currentTarget;
-            item?.focus({ preventScroll: true });
         }
+        if (document.activeElement !== this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.focus({ preventScroll: true });
+        }
+    }
+    onPointerLeave(event) {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+        // 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 (document.activeElement === this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
+        }
+    }
+    onItemClick() {
+        if (this.disabled())
+            return;
+        this.onSelect.emit();
+        if (this.closeOnClick())
+            this.rootContext?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxMenuItemRadioDirective, isStandalone: true, selector: "[RdxMenuItemRadio]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, host: { attributes: { "role": "menuitemradio" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-highlighted": "highlightedState() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuItemRadio, outputs: ["cdkMenuItemTriggered", "menuItemTriggered"] }], ngImport: i0 }); }
+    onActivate(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.onSelect.emit();
+        if (this.closeOnClick())
+            this.rootContext?.close();
+    }
+    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)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemRadioDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuItemRadio]',
-                    hostDirectives: [
-                        {
-                            directive: CdkMenuItemRadio,
-                            outputs: ['cdkMenuItemTriggered: menuItemTriggered']
-                        }
-                    ],
+                    selector: '[rdxMenuItem]',
+                    exportAs: 'rdxMenuItem',
                     host: {
-                        role: 'menuitemradio',
-                        '[attr.aria-checked]': 'checked()',
-                        '[attr.data-state]': 'getCheckedState(checked())',
-                        '[attr.data-highlighted]': "highlightedState() ? '' : undefined",
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
+                        '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
-                        '(pointermove)': 'onPointerMove($event)'
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(click)': 'onItemClick()',
+                        '(keydown.enter)': 'onActivate($event)',
+                        '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], 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"] }] } });
 
-class RdxMenuItemIndicatorDirective {
+/**
+ * A menu item that renders as a link.
+ */
+class RdxMenuLinkItem {
     constructor() {
-        this.menuItemRadio = inject(RdxMenuItemRadioDirective, { host: true, optional: true });
-        this.menuCheckboxItem = inject(RdxMenuItemCheckboxDirective, { host: true, optional: true });
-        this.getCheckedState = getCheckedState;
+        this.rootContext = injectRdxMenuRootContext(true);
+        this.elementRef = inject(ElementRef);
+        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        /** Whether this item is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether selecting this item closes the menu. Defaults to false — links navigate by default. */
+        this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Explicit typeahead label. When set, overrides textContent for character search. */
+        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 */ []));
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    onPointerMove(event) {
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
+            return;
+        }
+        if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
+            return;
+        }
+        if (document.activeElement !== this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.focus({ preventScroll: true });
+        }
     }
-    get isChecked() {
-        if (this.menuItemRadio) {
-            return this.menuItemRadio.checked();
+    onPointerLeave(event) {
+        if (event.pointerType !== 'mouse') {
+            return;
         }
-        if (this.menuCheckboxItem) {
-            return isIndeterminate(this.menuCheckboxItem.checked()) || this.menuCheckboxItem.checked() === true;
+        if (document.activeElement === this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
-        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuItemIndicatorDirective, isStandalone: true, selector: "[RdxMenuItemIndicator]", host: { properties: { "attr.data-state": "getCheckedState(isChecked)", "style.display": "isChecked ? \"\" : \"none\"" } }, ngImport: i0 }); }
+    onItemClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        this.onSelect.emit();
+        if (this.closeOnClick())
+            this.rootContext?.close();
+    }
+    onActivate(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        this.onSelect.emit();
+        if (this.closeOnClick())
+            this.rootContext?.close();
+    }
+    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)", "click": "onItemClick($event)", "keydown.enter": "onActivate($event)" }, properties: { "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuLinkItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuLinkItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuItemIndicator]',
+                    selector: 'a[rdxMenuLinkItem]',
+                    exportAs: 'rdxMenuLinkItem',
                     host: {
-                        '[attr.data-state]': 'getCheckedState(isChecked)',
-                        '[style.display]': 'isChecked ? "" : "none"'
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
+                        '[attr.data-label]': 'label() ?? undefined',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(click)': 'onItemClick($event)',
+                        '(keydown.enter)': '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"] }] } });
 
-class RdxMenuItemDirective {
+/** Selector for focusable menu items within the popup. */
+const ITEM_SELECTOR = [
+    '[rdxMenuItem]:not([data-disabled])',
+    '[rdxMenuCheckboxItem]:not([data-disabled])',
+    '[rdxMenuRadioItem]:not([data-disabled])',
+    '[rdxMenuLinkItem]:not([data-disabled])',
+    '[rdxMenuSubTrigger]:not([data-disabled])'
+].join(',');
+function getFocusableItems(popup) {
+    // Exclude items that belong to a nested child popup (submenu).
+    return Array.from(popup.querySelectorAll(ITEM_SELECTOR)).filter((item) => item.closest('[rdxMenuPopup]') === popup);
+}
+/**
+ * A container for the menu contents.
+ */
+class RdxMenuPopup {
     constructor() {
-        this.cdkMenuItem = inject(CdkMenuItem, { host: true });
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.onSelect = outputFromObservable(this.cdkMenuItem.triggered);
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
-        this.disabledState = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
-        this.isOpenState = signal(false, ...(ngDevMode ? [{ debugName: "isOpenState" }] : []));
-        this.highlightedState = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlightedState" }] : []));
+        this.rootContext = injectRdxMenuRootContext();
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.focusScope = inject(RdxFocusScope);
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.elementRef = inject(ElementRef);
+        this.dismissableLayersContext = inject(RdxDismissableLayersContextToken);
+        this.search = '';
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * Event handler called when the escape key is pressed. Can be prevented.
+         */
+        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        /**
+         * Event handler called when a pointerdown event happens outside of the popup. Can be prevented.
+         */
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        /**
+         * Event handler called when focus moves outside of the popup. Can be prevented.
+         */
+        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
+        /**
+         * Event handler called when an interaction happens outside of the popup. Can be prevented.
+         */
+        this.interactOutside = outputFromObservable(outputToObservable(this.dismissableLayer.interactOutside));
+        /**
+         * Event handler called before focus moves into the popup. Can be prevented.
+         */
+        this.openAutoFocus = outputFromObservable(outputToObservable(this.focusScope.mountAutoFocus));
+        /**
+         * Event handler called before focus returns after the popup is removed. Can be prevented.
+         */
+        this.closeAutoFocus = outputFromObservable(outputToObservable(this.focusScope.unmountAutoFocus));
+        const unregister = this.rootContext.registerTransitionElement(this.elementRef.nativeElement);
+        inject(DestroyRef).onDestroy(() => {
+            unregister();
+            clearTimeout(this.searchTimer);
+        });
+        effect((onCleanup) => {
+            if (!this.rootContext.isSubmenu()) {
+                return;
+            }
+            const element = this.elementRef.nativeElement;
+            this.dismissableLayersContext.branches.update((branches) => [...branches, element]);
+            onCleanup(() => {
+                this.dismissableLayersContext.branches.update((branches) => branches.filter((branch) => branch !== element));
+            });
+        });
+        this.dismissableLayer.dismiss.subscribe(() => {
+            this.rootContext.close();
+        });
+        // Move focus into the popup when the menu opens — unless the opener suppressed it
+        // (e.g. menubar hover-switching, where focus stays on the trigger).
         effect(() => {
-            this.cdkMenuItem.disabled = this.disabled();
-            this.isOpenState.set(this.cdkMenuItem.isMenuOpen());
+            const autoFocus = this.rootContext.autoFocus();
+            if (this.rootContext.isOpen() && autoFocus) {
+                requestAnimationFrame(() => {
+                    // `'popup'` focuses the container without highlighting an item (pointer opening).
+                    if (autoFocus === 'popup') {
+                        this.elementRef.nativeElement.focus({ preventScroll: true });
+                        return;
+                    }
+                    const items = getFocusableItems(this.elementRef.nativeElement);
+                    const item = autoFocus === 'last' ? items[items.length - 1] : items[0];
+                    item?.focus({ preventScroll: true });
+                });
+            }
         });
     }
+    handleCloseParent(event) {
+        event.stopPropagation();
+        this.rootContext.close();
+        if (this.rootContext.isSubmenu() && this.rootContext.closeParentOnEsc()) {
+            this.rootContext.closeParent();
+        }
+    }
+    handleKeydown(event) {
+        const el = this.elementRef.nativeElement;
+        const items = getFocusableItems(el);
+        const current = document.activeElement;
+        const currentIndex = items.indexOf(current);
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                const atEnd = currentIndex >= items.length - 1;
+                const next = atEnd
+                    ? this.rootContext.loopFocus()
+                        ? items[0]
+                        : items[items.length - 1]
+                    : items[currentIndex + 1];
+                next?.focus({ preventScroll: true });
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const atStart = currentIndex <= 0;
+                const prev = atStart
+                    ? this.rootContext.loopFocus()
+                        ? items[items.length - 1]
+                        : items[0]
+                    : items[currentIndex - 1];
+                prev?.focus({ preventScroll: true });
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                event.stopPropagation();
+                items[0]?.focus({ preventScroll: true });
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                event.stopPropagation();
+                items[items.length - 1]?.focus({ preventScroll: true });
+                break;
+            }
+            case 'ArrowLeft': {
+                const trigger = this.rootContext.trigger();
+                if (!trigger?.hasAttribute('rdxMenuSubTrigger')) {
+                    if (this.rootContext.handlePopupArrowNavigation(-1)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                }
+                // Close this popup and return focus to the trigger (used by submenus).
+                event.preventDefault();
+                event.stopPropagation();
+                this.rootContext.close();
+                trigger.focus({ preventScroll: true });
+                break;
+            }
+            case 'ArrowRight': {
+                if (this.rootContext.handlePopupArrowNavigation(1)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                event.stopPropagation();
+                this.rootContext.close();
+                if (this.rootContext.isSubmenu() && this.rootContext.closeParentOnEsc()) {
+                    this.rootContext.closeParent();
+                }
+                this.rootContext.trigger()?.focus({ preventScroll: true });
+                break;
+            }
+            case 'Tab': {
+                // Close on tab to allow natural tab navigation
+                this.rootContext.close();
+                break;
+            }
+            default: {
+                // Typeahead
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    const char = event.key.toLowerCase();
+                    this.search += char;
+                    clearTimeout(this.searchTimer);
+                    this.searchTimer = setTimeout(() => {
+                        this.search = '';
+                        this.searchTimer = undefined;
+                    }, 1000);
+                    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 });
+                }
+                break;
+            }
+        }
+    }
+    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: [
+            provideRdxDismissableLayerConfig(() => {
+                const rootContext = injectRdxMenuRootContext();
+                return {
+                    disableOutsidePointerEvents: computed(() => rootContext.modal())
+                };
+            }),
+            provideRdxFocusScopeConfig(() => ({
+                trapped: signal(false)
+            }))
+        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }, { directive: i3.RdxFocusScope }], 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, RdxDismissableLayer, RdxFocusScope],
+                    providers: [
+                        provideRdxDismissableLayerConfig(() => {
+                            const rootContext = injectRdxMenuRootContext();
+                            return {
+                                disableOutsidePointerEvents: computed(() => rootContext.modal())
+                            };
+                        }),
+                        provideRdxFocusScopeConfig(() => ({
+                            trapped: signal(false)
+                        }))
+                    ],
+                    host: {
+                        role: 'menu',
+                        tabindex: '-1',
+                        '[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()',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(rdx-menu-close-parent)': 'handleCloseParent($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], openAutoFocus: [{ type: i0.Output, args: ["openAutoFocus"] }], closeAutoFocus: [{ type: i0.Output, args: ["closeAutoFocus"] }] } });
+
+/**
+ * Moves the menu to a different part of the DOM.
+ * Applied on ng-template — no host bindings (ng-template is not a real DOM node).
+ */
+class RdxMenuPortal {
+    constructor() {
+        /**
+         * Optional container to portal the content into. Defaults to `document.body`.
+         */
+        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuPortal, isStandalone: true, selector: "[rdxMenuPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuPortal]',
+                    exportAs: 'rdxMenuPortal',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ]
+                }]
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
+/**
+ * Positions the menu against its trigger.
+ */
+class RdxMenuPositioner {
+    constructor() {
+        this.rootContext = injectRdxMenuRootContext();
+        this.wrapper = inject(RdxPopperContentWrapper);
+        /**
+         * An element to position the popup against. Defaults to the trigger.
+         */
+        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
+        /**
+         * The preferred side of the trigger to render against when open.
+         */
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * Distance between the trigger and the popup in pixels.
+         */
+        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * How to align the popup relative to the specified side.
+         */
+        this.align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /**
+         * An offset in pixels from the `start` or `end` alignment options.
+         */
+        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Minimum distance to maintain between the arrow and the edges of the popup.
+         */
+        this.arrowPadding = input(5, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Whether to override side and alignment preferences to prevent collisions.
+         */
+        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The element used as the collision boundary.
+         */
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
+        /**
+         * Distance in pixels from the boundary edges where collision detection should occur.
+         */
+        this.collisionPadding = input(5, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+        /**
+         * The sticky behavior on the alignment axis.
+         */
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the popup when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The CSS position strategy used by Floating UI.
+         */
+        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to update position on every animation frame.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the popup has been placed.
+         */
+        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuPositioner, isStandalone: true, selector: "[rdxMenuPositioner]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-anchor-hidden": "wrapper.anchorHidden() ? \"\" : undefined", "attr.data-align": "wrapper.placedAlign()", "attr.data-side": "wrapper.placedSide()", "style": "{\n            '--anchor-width': 'var(--radix-popper-anchor-width)',\n            '--anchor-height': 'var(--radix-popper-anchor-height)',\n            '--available-width': 'var(--radix-popper-available-width)',\n            '--available-height': 'var(--radix-popper-available-height)',\n            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',\n            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',\n            '--transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-menu-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-menu-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-menu-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-menu-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, providers: [
+            provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+        ], exportAs: ["rdxMenuPositioner"], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["anchor", "anchor", "side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "positionStrategy", "positionStrategy", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuPositioner]',
+                    exportAs: 'rdxMenuPositioner',
+                    providers: [
+                        provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'anchor',
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'positionStrategy',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-anchor-hidden]': 'wrapper.anchorHidden() ? "" : undefined',
+                        '[attr.data-align]': 'wrapper.placedAlign()',
+                        '[attr.data-side]': 'wrapper.placedSide()',
+                        '[style]': `{
+            '--anchor-width': 'var(--radix-popper-anchor-width)',
+            '--anchor-height': 'var(--radix-popper-anchor-height)',
+            '--available-width': 'var(--radix-popper-available-width)',
+            '--available-height': 'var(--radix-popper-available-height)',
+            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',
+            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',
+            '--transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-menu-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-menu-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-menu-trigger-height': 'var(--radix-popper-anchor-height)'
+        }`
+                    }
+                }]
+        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
+
+const [injectRdxMenuRadioGroupContext, provideRdxMenuRadioGroupContext] = createContext('RdxMenuRadioGroupContext');
+const radioGroupContextFactory = () => {
+    const instance = inject(RdxMenuRadioGroup);
+    return {
+        value: instance.value,
+        selectValue: (v) => instance.selectValue(v)
+    };
+};
+/**
+ * Groups radio items in a menu.
+ */
+class RdxMenuRadioGroup {
+    constructor() {
+        /**
+         * The currently selected value.
+         */
+        this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the selected value changes.
+         */
+        this.onValueChange = output();
+    }
+    selectValue(newValue) {
+        this.value.set(newValue);
+        this.onValueChange.emit(newValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioGroup, isStandalone: true, selector: "[rdxMenuRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" } }, providers: [provideRdxMenuRadioGroupContext(radioGroupContextFactory)], exportAs: ["rdxMenuRadioGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuRadioGroup]',
+                    exportAs: 'rdxMenuRadioGroup',
+                    providers: [provideRdxMenuRadioGroupContext(radioGroupContextFactory)],
+                    host: {
+                        role: 'group'
+                    }
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
+
+const [injectRdxMenuRadioItemContext, provideRdxMenuRadioItemContext] = createContext('RdxMenuRadioItemContext');
+const radioItemContextFactory = () => {
+    const instance = inject(RdxMenuRadioItem);
+    return {
+        checked: instance.checked
+    };
+};
+/**
+ * A radio item within a menu radio group.
+ */
+class RdxMenuRadioItem {
+    constructor() {
+        this.rootContext = injectRdxMenuRootContext(true);
+        this.radioGroupContext = injectRdxMenuRadioGroupContext();
+        this.elementRef = inject(ElementRef);
+        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        /** The value of this radio item. */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Whether this item is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether selecting closes the menu. Defaults to false — radio items stay open. */
+        this.closeOnClick = input(false, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Explicit typeahead label. When set, overrides textContent for character search. */
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** 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.getCheckedState = getCheckedState;
+    }
     onFocus() {
         if (!this.disabled()) {
             this.isFocused.set(true);
@@ -228,288 +1059,588 @@ class RdxMenuItemDirective {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented)
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
             return;
-        if (!(event.pointerType === 'mouse'))
+        }
+        if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
-        if (!this.disabled()) {
-            const item = event.currentTarget;
-            item?.focus({ preventScroll: true });
+        }
+        if (document.activeElement !== this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.focus({ preventScroll: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxMenuItemDirective, isStandalone: true, selector: "[RdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.data-orientation": "'horizontal'", "attr.data-state": "isOpenState()", "attr.aria-disabled": "disabledState() ? '' : undefined", "attr.data-disabled": "disabledState() ? '' : undefined", "attr.data-highlighted": "highlightedState() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "menuItemTriggered"] }], ngImport: i0 }); }
+    onPointerLeave(event) {
+        if (event.pointerType !== 'mouse') {
+            return;
+        }
+        if (document.activeElement === this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
+        }
+    }
+    onItemClick() {
+        if (this.disabled()) {
+            return;
+        }
+        this.selectItem();
+    }
+    onActivate(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.selectItem();
+    }
+    selectItem() {
+        const v = this.value();
+        this.radioGroupContext.selectValue(v);
+        this.onSelect.emit(v);
+        if (this.closeOnClick())
+            this.rootContext?.close();
+    }
+    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)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)], exportAs: ["rdxMenuRadioItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItem, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuItem]',
-                    hostDirectives: [
-                        {
-                            directive: CdkMenuItem,
-                            outputs: ['cdkMenuItemTriggered: menuItemTriggered']
-                        }
-                    ],
+                    selector: '[rdxMenuRadioItem]',
+                    exportAs: 'rdxMenuRadioItem',
+                    providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)],
                     host: {
-                        role: 'menuitem',
+                        role: 'menuitemradio',
                         tabindex: '-1',
-                        '[attr.data-orientation]': "'horizontal'",
-                        '[attr.data-state]': 'isOpenState()',
-                        '[attr.aria-disabled]': "disabledState() ? '' : undefined",
-                        '[attr.data-disabled]': "disabledState() ? '' : undefined",
-                        '[attr.data-highlighted]': "highlightedState() ? '' : undefined",
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'getCheckedState(checked())',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
+                        '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
-                        '(pointermove)': 'onPointerMove($event)'
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(click)': 'onItemClick()',
+                        '(keydown.enter)': 'onActivate($event)',
+                        '(keydown.space)': 'onActivate($event)'
                     }
                 }]
-        }], 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"] }] } });
 
-class RdxMenuLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuLabelDirective, isStandalone: true, selector: "[RdxMenuLabel]", ngImport: i0 }); }
+/**
+ * Renders when the parent radio item is selected.
+ * Set `keepMounted` to keep the element in the DOM when unselected (enables CSS animations).
+ */
+class RdxMenuRadioItemIndicator {
+    constructor() {
+        this.itemContext = injectRdxMenuRadioItemContext();
+        /** Keep the indicator in the DOM when unselected so CSS exit animations can play. */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.dataState = computed(() => getCheckedState(this.itemContext.checked()), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        this.isVisible = computed(() => this.itemContext.checked() === true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioItemIndicator, isStandalone: true, selector: "[rdxMenuRadioItemIndicator]", inputs: { keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "dataState()", "attr.data-starting-style": "isVisible() ? \"\" : undefined", "attr.data-ending-style": "!isVisible() ? \"\" : undefined", "style.display": "!keepMounted() && !isVisible() ? \"none\" : null" } }, exportAs: ["rdxMenuRadioItemIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItemIndicator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuLabel]'
+                    selector: '[rdxMenuRadioItemIndicator]',
+                    exportAs: 'rdxMenuRadioItemIndicator',
+                    host: {
+                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-starting-style]': 'isVisible() ? "" : undefined',
+                        '[attr.data-ending-style]': '!isVisible() ? "" : undefined',
+                        '[style.display]': '!keepMounted() && !isVisible() ? "none" : null'
+                    }
                 }]
-        }] });
+        }], propDecorators: { keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
 
-class RdxMenuRadioGroupDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuRadioGroupDirective, isStandalone: true, selector: "[RdxMenuRadioGroup]", hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 }); }
+/**
+ * A visual separator between groups of menu items.
+ */
+class RdxMenuSeparator {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuSeparator, isStandalone: true, selector: "[rdxMenuSeparator]", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "\"horizontal\"" } }, exportAs: ["rdxMenuSeparator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuRadioGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSeparator, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuRadioGroup]',
-                    hostDirectives: [CdkMenuGroup]
+                    selector: '[rdxMenuSeparator]',
+                    exportAs: 'rdxMenuSeparator',
+                    host: {
+                        role: 'separator',
+                        '[attr.aria-orientation]': '"horizontal"'
+                    }
                 }]
         }] });
 
-class RdxMenuSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxMenuSeparatorDirective, isStandalone: true, selector: "[RdxMenuSeparator]", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "'horizontal'" } }, ngImport: i0 }); }
+const numberOrUndefined$1 = (value) => (value == null ? undefined : numberAttribute(value));
+const submenuRootsByTrigger = new WeakMap();
+/**
+ * An item inside a parent menu that opens a nested submenu.
+ *
+ * Place this inside `ng-container rdxMenuRoot` that wraps both the trigger
+ * and the submenu positioner. The inner root provides the submenu context;
+ * the outer popup discovers this element via `[rdxMenuSubTrigger]` in its
+ * ITEM_SELECTOR and includes it in keyboard navigation.
+ */
+class RdxMenuSubTrigger {
+    constructor() {
+        this.submenuContext = injectRdxMenuRootContext();
+        this.submenuRoot = inject(RdxMenuRoot);
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        /** Whether this trigger (and therefore the submenu) is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether this trigger should be treated as a native button. Auto-detected for `<button>`. */
+        this.nativeButton = input(false, { ...(ngDevMode ? { debugName: "nativeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether hovering the trigger opens the submenu. */
+        this.openOnHover = input(true, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Delay before hover opens the submenu, in milliseconds. */
+        this.delay = input(100, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined$1 });
+        /** Delay before a pending hover close runs, in milliseconds. */
+        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 */ []));
+        this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
+        this.submenuContext.markAsSubmenu();
+        effect((onCleanup) => {
+            const el = this.elementRef.nativeElement;
+            const unregister = this.submenuContext.registerTrigger(el);
+            submenuRootsByTrigger.set(el, this.submenuRoot);
+            onCleanup(() => {
+                unregister();
+                submenuRootsByTrigger.delete(el);
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            clearTimeout(this.openTimer);
+        });
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.clearSiblingHighlights();
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        this.clearSiblingHighlights();
+        if (!this.submenuContext.isOpen()) {
+            this.closeSiblingSubmenus();
+        }
+        this.submenuContext.toggle();
+    }
+    onArrowRight(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.clearSiblingHighlights();
+        if (!this.submenuContext.isOpen()) {
+            this.closeSiblingSubmenus();
+            this.submenuContext.show();
+        }
+    }
+    onPointerMove(event) {
+        if (event.pointerType !== 'mouse' || this.disabled() || !this.openOnHover())
+            return;
+        this.clearSiblingHighlights();
+        if (this.submenuContext.highlightItemOnHover() && document.activeElement !== this.elementRef.nativeElement) {
+            this.elementRef.nativeElement.focus({ preventScroll: true });
+        }
+        if (!this.submenuContext.isOpen()) {
+            clearTimeout(this.openTimer);
+            this.closeSiblingSubmenus();
+            this.openTimer = setTimeout(() => {
+                this.submenuContext.show(false);
+            }, this.delay() ?? 100);
+        }
+    }
+    onPointerLeave() {
+        clearTimeout(this.openTimer);
+    }
+    clearHighlight() {
+        this.isFocused.set(false);
+    }
+    closeSiblingSubmenus() {
+        const currentTrigger = this.elementRef.nativeElement;
+        const parentPopup = currentTrigger.closest('[rdxMenuPopup]');
+        if (!parentPopup)
+            return;
+        parentPopup.querySelectorAll('[rdxMenuSubTrigger]').forEach((trigger) => {
+            if (trigger === currentTrigger || trigger.closest('[rdxMenuPopup]') !== parentPopup) {
+                return;
+            }
+            submenuRootsByTrigger.get(trigger)?.close();
+            trigger.dispatchEvent(new CustomEvent('rdx-menu-subtrigger-clear-highlight'));
+        });
+    }
+    clearSiblingHighlights() {
+        const currentTrigger = this.elementRef.nativeElement;
+        const parentPopup = currentTrigger.closest('[rdxMenuPopup]');
+        if (!parentPopup)
+            return;
+        parentPopup.querySelectorAll('[rdxMenuSubTrigger]').forEach((trigger) => {
+            if (trigger === currentTrigger || trigger.closest('[rdxMenuPopup]') !== parentPopup) {
+                return;
+            }
+            trigger.dispatchEvent(new CustomEvent('rdx-menu-subtrigger-clear-highlight'));
+        });
+    }
+    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()", "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": "disabled() ? true : undefined", "attr.disabled": "nativeButtonState() && disabled() ? \"\" : undefined", "attr.data-state": "submenuContext.isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i2.RdxDismissableLayerBranch }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSubTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuSeparator]',
+                    selector: '[rdxMenuSubTrigger]',
+                    exportAs: 'rdxMenuSubTrigger',
+                    hostDirectives: [RdxPopperAnchor, RdxDismissableLayerBranch],
                     host: {
-                        role: 'separator',
-                        '[attr.aria-orientation]': "'horizontal'"
+                        '[attr.type]': 'nativeButtonState() ? "button" : undefined',
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'submenuContext.isOpen()',
+                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.disabled]': 'nativeButtonState() && disabled() ? "" : undefined',
+                        '[attr.data-state]': 'submenuContext.isOpen() ? "open" : "closed"',
+                        '[attr.data-popup-open]': 'submenuContext.isOpen() ? "" : undefined',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-label]': 'label() ?? undefined',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(click)': 'onClick()',
+                        '(keydown.arrowright)': 'onArrowRight($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave()',
+                        '(rdx-menu-subtrigger-clear-highlight)': 'clearHighlight()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeButton", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
-class RdxMenuTriggerDirective {
-    computePositions() {
-        if (this.align() || this.sideOffset() || this.alignOffset() || this.side()) {
-            this.enablePositions = true;
-        }
-        const side = this.side() || 'bottom';
-        const align = this.align() || 'center';
-        const sideOffset = this.sideOffset() || 0;
-        const alignOffset = this.alignOffset() || 0;
-        let originX = 'center';
-        let originY = 'center';
-        let overlayX = 'center';
-        let overlayY = 'center';
-        let offsetX = 0;
-        let offsetY = 0;
-        switch (side) {
-            case 'top':
-                originY = 'top';
-                overlayY = 'bottom';
-                offsetY = -sideOffset;
-                break;
-            case 'bottom':
-                originY = 'bottom';
-                overlayY = 'top';
-                offsetY = sideOffset;
-                break;
-            case 'left':
-                originX = 'start';
-                overlayX = 'end';
-                offsetX = -sideOffset;
-                break;
-            case 'right':
-                originX = 'end';
-                overlayX = 'start';
-                offsetX = sideOffset;
-                break;
+const numberOrUndefined = (value) => (value == null ? undefined : numberAttribute(value));
+/**
+ * A button that opens the menu.
+ */
+class RdxMenuTrigger {
+    constructor() {
+        this.rootContext = injectRdxMenuRootContext();
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.dismissableLayersContext = inject(RdxDismissableLayersContextToken);
+        /** Whether this trigger should be treated as a native button. Auto-detected for `<button>`. */
+        this.nativeButton = input(false, { ...(ngDevMode ? { debugName: "nativeButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether this trigger is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether hovering the trigger opens the menu. */
+        this.openOnHover = input(false, { ...(ngDevMode ? { debugName: "openOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Delay before hover opens the menu, in milliseconds. */
+        this.delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        /** Delay before hover leave closes the menu, in milliseconds. */
+        this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const el = this.elementRef.nativeElement;
+            const unregister = this.rootContext.registerTrigger(el);
+            onCleanup(unregister);
+        });
+        // When a coordinator (e.g. the menubar) drives this trigger, hover-switching focuses the
+        // trigger and opens the popup without pulling focus inside it. Register the trigger as a
+        // dismissable-layer branch so that focus/pointer interactions on it are treated as "inside"
+        // and do not dismiss the just-opened popup.
+        effect((onCleanup) => {
+            if (!this.rootContext.hasTriggerInteractionHandler()) {
+                return;
+            }
+            const el = this.elementRef.nativeElement;
+            this.dismissableLayersContext.branches.update((branches) => [...branches, el]);
+            onCleanup(() => {
+                this.dismissableLayersContext.branches.update((branches) => branches.filter((b) => b !== el));
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.clearOpenTimer();
+            this.clearCloseTimer();
+        });
+    }
+    handleClick() {
+        if (this.isDisabled()) {
+            return;
         }
-        switch (align) {
-            case 'start':
-                if (side === 'top' || side === 'bottom') {
-                    originX = 'start';
-                    overlayX = 'start';
-                    offsetX = alignOffset;
-                }
-                else {
-                    originY = 'top';
-                    overlayY = 'top';
-                    offsetY = alignOffset;
-                }
-                break;
-            case 'end':
-                if (side === 'top' || side === 'bottom') {
-                    originX = 'end';
-                    overlayX = 'end';
-                    offsetX = -alignOffset;
-                }
-                else {
-                    originY = 'bottom';
-                    overlayY = 'bottom';
-                    offsetY = -alignOffset;
-                }
-                break;
-            case 'center':
-            default:
-                if (side === 'top' || side === 'bottom') {
-                    originX = 'center';
-                    overlayX = 'center';
-                }
-                else {
-                    originY = 'center';
-                    overlayY = 'center';
-                }
-                break;
+        if (this.rootContext.handleTriggerInteraction({ type: 'click' })) {
+            return;
         }
-        return {
-            originX,
-            originY,
-            overlayX,
-            overlayY,
-            offsetX,
-            offsetY
-        };
+        this.rootContext.toggle();
     }
-    constructor() {
-        this.cdkTrigger = inject(CdkMenuTrigger, { host: true });
-        this.menuTriggerFor = input.required(...(ngDevMode ? [{ debugName: "menuTriggerFor" }] : []));
-        /**
-         * @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
-         */
-        this.side = input(...(ngDevMode ? [undefined, { debugName: "side" }] : []));
-        this.align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : []));
-        /**
-         * @description The distance in pixels from the trigger.
-         */
-        this.sideOffset = input(NaN, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        /**
-         * @description An offset in pixels from the "start" or "end" alignment options.
-         */
-        this.alignOffset = input(NaN, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
-                transform: booleanAttribute
-            }]));
-        this.enablePositions = false;
-        // TODO
-        this.positions = computed(() => this.computePositions(), ...(ngDevMode ? [{ debugName: "positions" }] : []));
-        this.onMenuPositionEffect();
-    }
-    /** @ignore */
-    onPointerDown($event) {
-        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
-        // but not when the control key is pressed (avoiding MacOS right click)
-        if (!this.disabled() && $event.button === 0 && !$event.ctrlKey) {
-            /* empty */
-            if (!this.cdkTrigger.isOpen()) {
-                // prevent trigger focusing when opening
-                // this allows the content to be given focus without competition
-                $event.preventDefault();
-            }
+    handleArrowDown(event) {
+        if (this.rootContext.handleTriggerInteraction({ type: 'arrowdown', event })) {
+            return;
+        }
+        event.preventDefault();
+        if (!this.isDisabled() && !this.rootContext.isOpen()) {
+            this.rootContext.show('first');
         }
     }
-    onMenuPositionEffect() {
-        effect(() => {
-            const positions = this.positions();
-            untracked(() => {
-                if (this.enablePositions) {
-                    this.setMenuPositions([positions]);
+    handleArrowUp(event) {
+        if (this.rootContext.handleTriggerInteraction({ type: 'arrowup', event })) {
+            return;
+        }
+        event.preventDefault();
+        if (!this.isDisabled() && !this.rootContext.isOpen()) {
+            this.rootContext.show('last');
+        }
+    }
+    handleArrowLeft(event) {
+        this.rootContext.handleTriggerInteraction({ type: 'arrowleft', event });
+    }
+    handleArrowRight(event) {
+        this.rootContext.handleTriggerInteraction({ type: 'arrowright', event });
+    }
+    handleHome(event) {
+        this.rootContext.handleTriggerInteraction({ type: 'home', event });
+    }
+    handleEnd(event) {
+        this.rootContext.handleTriggerInteraction({ type: 'end', event });
+    }
+    handleEscape(event) {
+        this.rootContext.handleTriggerInteraction({ type: 'escape', event });
+    }
+    handleKeyboardToggle(event) {
+        if (this.nativeButtonState()) {
+            return;
+        }
+        event.preventDefault();
+        this.handleClick();
+    }
+    handlePointerEnter(event) {
+        if (this.rootContext.handleTriggerInteraction({ type: 'pointerenter', event })) {
+            return;
+        }
+        if (event.pointerType === 'touch' || !this.openOnHover() || this.isDisabled()) {
+            return;
+        }
+        this.clearCloseTimer();
+        this.clearOpenTimer();
+        const delay = this.delay() ?? 0;
+        if (delay <= 0) {
+            this.rootContext.show();
+            return;
+        }
+        this.openTimer = setTimeout(() => {
+            this.openTimer = undefined;
+            this.rootContext.show();
+        }, delay);
+    }
+    handlePointerLeave(event) {
+        if (event.pointerType === 'touch' || !this.openOnHover()) {
+            return;
+        }
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+        const closeDelay = this.closeDelay() ?? 0;
+        if (closeDelay <= 0) {
+            this.rootContext.close();
+            return;
+        }
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = undefined;
+            this.rootContext.close();
+        }, closeDelay);
+    }
+    clearOpenTimer() {
+        clearTimeout(this.openTimer);
+        this.openTimer = undefined;
+    }
+    clearCloseTimer() {
+        clearTimeout(this.closeTimer);
+        this.closeTimer = undefined;
+    }
+    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: { "click": "handleClick()", "pointerenter": "handlePointerEnter($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.tabindex": "rootContext.hasTriggerInteractionHandler() ? \"-1\" : undefined", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "rootContext.isOpen()", "attr.aria-disabled": "isDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && isDisabled() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-popup-open": "rootContext.isOpen() ? \"\" : 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],
+                    host: {
+                        '[attr.type]': 'nativeButtonState() ? "button" : undefined',
+                        '[attr.role]': 'rootContext.hasTriggerInteractionHandler() ? "menuitem" : nativeButtonState() ? undefined : "button"',
+                        '[attr.tabindex]': 'rootContext.hasTriggerInteractionHandler() ? "-1" : undefined',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'rootContext.isOpen()',
+                        '[attr.aria-disabled]': 'isDisabled() ? true : undefined',
+                        '[attr.disabled]': 'nativeButtonState() && isDisabled() ? "" : undefined',
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-popup-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '(click)': 'handleClick()',
+                        '(pointerenter)': 'handlePointerEnter($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)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { nativeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnHover", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+
+/**
+ * A viewport that smoothly animates the popup size when its content changes
+ * (e.g. switching menubar menus of different sizes, or expanding a section).
+ *
+ * It measures its content with a `ResizeObserver` and exposes the current size
+ * as `--popup-width` / `--popup-height` CSS variables on the host. Drive the
+ * animation from the consumer side, for example:
+ *
+ * ```css
+ * [rdxMenuPopup] {
+ *     width: var(--popup-width);
+ *     height: var(--popup-height);
+ *     transition: width 200ms, height 200ms;
+ * }
+ * ```
+ *
+ * `data-transitioning` is present while a size change is in flight.
+ */
+class RdxMenuViewport {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.width = signal(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.height = signal(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        this.transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            const el = this.elementRef.nativeElement;
+            // Seed the initial size without marking a transition.
+            this.width.set(el.offsetWidth);
+            this.height.set(el.offsetHeight);
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            this.observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (!entry) {
+                    return;
+                }
+                const nextWidth = Math.round(entry.contentRect.width);
+                const nextHeight = Math.round(entry.contentRect.height);
+                if (nextWidth === this.width() && nextHeight === this.height()) {
+                    return;
                 }
+                this.width.set(nextWidth);
+                this.height.set(nextHeight);
+                this.markTransitioning();
             });
+            this.observer.observe(el);
         });
-    }
-    setMenuPositions(positions) {
-        const prevMenuPosition = this.cdkTrigger.menuPosition;
-        this.cdkTrigger.menuPosition = positions;
-        this.fireNgOnChanges('menuPosition', this.cdkTrigger.menuPosition, prevMenuPosition);
-    }
-    fireNgOnChanges(input, currentValue, previousValue, firstChange = false) {
-        this.cdkTrigger.ngOnChanges({
-            [input]: new SimpleChange(previousValue, currentValue, firstChange)
+        this.destroyRef.onDestroy(() => {
+            this.observer?.disconnect();
+            clearTimeout(this.transitionTimer);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxMenuTriggerDirective, isStandalone: true, selector: "[RdxMenuTrigger]", inputs: { menuTriggerFor: { classPropertyName: "menuTriggerFor", publicName: "menuTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.aria-haspopup": "'menu'", "attr.aria-expanded": "cdkTrigger.isOpen()", "attr.data-state": "cdkTrigger.isOpen() ? 'open': 'closed'", "attr.data-disabled": "disabled() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor", "cdkMenuPosition", "menuPosition"] }], ngImport: i0 }); }
+    markTransitioning() {
+        this.transitioning.set(true);
+        clearTimeout(this.transitionTimer);
+        const duration = getMaxTransitionDuration(this.elementRef.nativeElement);
+        this.transitionTimer = setTimeout(() => this.transitioning.set(false), duration > 0 ? duration + 50 : 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuViewport, isStandalone: true, selector: "[rdxMenuViewport]", host: { properties: { "attr.data-transitioning": "transitioning() ? \"\" : undefined", "style.--popup-width.px": "width()", "style.--popup-height.px": "height()" } }, exportAs: ["rdxMenuViewport"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuViewport, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[RdxMenuTrigger]',
-                    hostDirectives: [
-                        {
-                            directive: CdkMenuTrigger,
-                            inputs: ['cdkMenuTriggerFor: menuTriggerFor', 'cdkMenuPosition: menuPosition']
-                        }
-                    ],
+                    selector: '[rdxMenuViewport]',
+                    exportAs: 'rdxMenuViewport',
                     host: {
-                        role: 'menuitem',
-                        '[attr.aria-haspopup]': "'menu'",
-                        '[attr.aria-expanded]': 'cdkTrigger.isOpen()',
-                        '[attr.data-state]': "cdkTrigger.isOpen() ? 'open': 'closed'",
-                        '[attr.data-disabled]': "disabled() ? '' : undefined",
-                        '(pointerdown)': 'onPointerDown($event)'
+                        '[attr.data-transitioning]': 'transitioning() ? "" : undefined',
+                        '[style.--popup-width.px]': 'width()',
+                        '[style.--popup-height.px]': 'height()'
                     }
                 }]
         }], ctorParameters: () => [] });
 
 const menuImports = [
-    RdxMenuDirective,
-    RdxMenuItemCheckboxDirective,
-    RdxMenuItemRadioDirective,
-    RdxMenuItemIndicatorDirective,
-    RdxMenuTriggerDirective,
-    RdxMenuGroupDirective,
-    RdxMenuRadioGroupDirective,
-    RdxMenuItemDirective,
-    RdxMenuSeparatorDirective,
-    RdxMenuContentDirective,
-    RdxMenuLabelDirective
+    RdxMenuRoot,
+    RdxMenuTrigger,
+    RdxMenuSubTrigger,
+    RdxMenuPortal,
+    RdxMenuPositioner,
+    RdxMenuPopup,
+    RdxMenuViewport,
+    RdxMenuBackdrop,
+    RdxMenuArrow,
+    RdxMenuItem,
+    RdxMenuLinkItem,
+    RdxMenuGroup,
+    RdxMenuGroupLabel,
+    RdxMenuSeparator,
+    RdxMenuCheckboxItem,
+    RdxMenuCheckboxItemIndicator,
+    RdxMenuRadioGroup,
+    RdxMenuRadioItem,
+    RdxMenuRadioItemIndicator
 ];
 class RdxMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuModule, imports: [RdxMenuDirective,
-            RdxMenuItemCheckboxDirective,
-            RdxMenuItemRadioDirective,
-            RdxMenuItemIndicatorDirective,
-            RdxMenuTriggerDirective,
-            RdxMenuGroupDirective,
-            RdxMenuRadioGroupDirective,
-            RdxMenuItemDirective,
-            RdxMenuSeparatorDirective,
-            RdxMenuContentDirective,
-            RdxMenuLabelDirective], exports: [RdxMenuDirective,
-            RdxMenuItemCheckboxDirective,
-            RdxMenuItemRadioDirective,
-            RdxMenuItemIndicatorDirective,
-            RdxMenuTriggerDirective,
-            RdxMenuGroupDirective,
-            RdxMenuRadioGroupDirective,
-            RdxMenuItemDirective,
-            RdxMenuSeparatorDirective,
-            RdxMenuContentDirective,
-            RdxMenuLabelDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule, imports: [RdxMenuRoot,
+            RdxMenuTrigger,
+            RdxMenuSubTrigger,
+            RdxMenuPortal,
+            RdxMenuPositioner,
+            RdxMenuPopup,
+            RdxMenuViewport,
+            RdxMenuBackdrop,
+            RdxMenuArrow,
+            RdxMenuItem,
+            RdxMenuLinkItem,
+            RdxMenuGroup,
+            RdxMenuGroupLabel,
+            RdxMenuSeparator,
+            RdxMenuCheckboxItem,
+            RdxMenuCheckboxItemIndicator,
+            RdxMenuRadioGroup,
+            RdxMenuRadioItem,
+            RdxMenuRadioItemIndicator], exports: [RdxMenuRoot,
+            RdxMenuTrigger,
+            RdxMenuSubTrigger,
+            RdxMenuPortal,
+            RdxMenuPositioner,
+            RdxMenuPopup,
+            RdxMenuViewport,
+            RdxMenuBackdrop,
+            RdxMenuArrow,
+            RdxMenuItem,
+            RdxMenuLinkItem,
+            RdxMenuGroup,
+            RdxMenuGroupLabel,
+            RdxMenuSeparator,
+            RdxMenuCheckboxItem,
+            RdxMenuCheckboxItemIndicator,
+            RdxMenuRadioGroup,
+            RdxMenuRadioItem,
+            RdxMenuRadioItemIndicator] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...menuImports],
@@ -521,5 +1652,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RdxMenuContentDirective, RdxMenuDirective, RdxMenuGroupDirective, RdxMenuItemCheckboxDirective, RdxMenuItemDirective, RdxMenuItemIndicatorDirective, RdxMenuItemRadioDirective, RdxMenuLabelDirective, RdxMenuModule, RdxMenuRadioGroupDirective, RdxMenuSeparatorDirective, RdxMenuTriggerDirective };
+export { RdxMenuArrow, RdxMenuBackdrop, RdxMenuCheckboxItem, RdxMenuCheckboxItemIndicator, RdxMenuGroup, RdxMenuGroupLabel, RdxMenuItem, RdxMenuLinkItem, RdxMenuModule, RdxMenuPopup, RdxMenuPortal, RdxMenuPositioner, RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuRadioItemIndicator, RdxMenuRoot, RdxMenuSeparator, RdxMenuSubTrigger, RdxMenuTrigger, RdxMenuViewport, getCheckedState, injectRdxMenuCheckboxItemContext, injectRdxMenuRadioGroupContext, injectRdxMenuRadioItemContext, injectRdxMenuRootContext, isIndeterminate, provideRdxMenuCheckboxItemContext, provideRdxMenuRadioGroupContext, provideRdxMenuRadioItemContext, provideRdxMenuRootContext };
 //# sourceMappingURL=radix-ng-primitives-menu.mjs.map