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

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

@@ -1,43 +1,57 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive, ElementRef, DestroyRef, numberAttribute, PLATFORM_ID, afterNextRender, NgModule } from '@angular/core';
+import { inject, ElementRef, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive, DestroyRef, isDevMode, Injector, afterNextRender, numberAttribute, PLATFORM_ID, 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 { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import * as i2 from '@radix-ng/primitives/core';
+import { createContext, createFloatingRootContext, useTransitionStatus, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, injectId, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useAnchoredScrollLock, RdxFloatingNodeRegistration, rdxDevError, setupInternalBackdrop, getMaxTransitionDuration } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
+import * as i3 from '@radix-ng/primitives/floating-focus-manager';
+import { getInteractionTypeFromEvent, RdxFloatingFocusManager, provideFloatingFocusManagerConfig } from '@radix-ng/primitives/floating-focus-manager';
 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 { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
+import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
 import * as i1$1 from '@radix-ng/primitives/portal';
-import { RdxPortal } from '@radix-ng/primitives/portal';
+import { RdxPortalPresence } from '@radix-ng/primitives/portal';
+import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 import { isPlatformBrowser } from '@angular/common';
 
 const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext', 'components/menu');
 function buildContext(instance) {
     return {
         isOpen: instance.open,
-        disabled: instance.disabled,
-        modal: instance.modal,
+        present: instance.present,
+        disabled: instance.effectiveDisabled,
+        modal: instance.effectiveModal,
         loopFocus: instance.loopFocus,
         highlightItemOnHover: instance.highlightItemOnHover,
         orientation: instance.orientation,
+        dir: instance.dir,
         closeParentOnEsc: instance.closeParentOnEsc,
         autoFocus: instance.autoFocus.asReadonly(),
         isSubmenu: instance.isSubmenu.asReadonly(),
+        parentType: instance.parentType,
+        lastOpenChangeReason: instance.lastOpenChangeReason.asReadonly(),
+        allowMouseUpTrigger: instance.allowMouseUpTrigger,
+        openedByTouch: instance.openedByTouch.asReadonly(),
+        openInteractionType: instance.openInteractionType.asReadonly(),
+        closeInteractionType: instance.closeInteractionType.asReadonly(),
         hasTriggerInteractionHandler: instance.hasTriggerInteractionHandler.asReadonly(),
         trigger: instance.trigger.asReadonly(),
         popupElement: instance.popupElement.asReadonly(),
         transitionStatus: instance.transitionStatus,
-        close: () => instance.close(),
-        toggle: () => instance.toggle(),
-        show: (autoFocus) => instance.show(autoFocus),
-        showWithoutAutoFocus: () => instance.show(false),
+        close: (reason, event) => instance.close(reason, event),
+        closeEntireMenu: (reason, event) => instance.closeEntireMenu(reason, event),
+        toggle: (reason, event) => instance.toggle(reason, event),
+        show: (autoFocus, reason, event) => instance.show(autoFocus, reason, event),
+        showWithoutAutoFocus: (reason, event) => instance.show(false, reason, event),
         registerTrigger: (el) => instance.registerTrigger(el),
         registerPopup: (el) => instance.registerPopup(el),
         registerTransitionElement: (el) => instance.registerTransitionElement(el),
         registerPopupArrowNavigationHandler: (handler) => instance.registerPopupArrowNavigationHandler(handler),
         registerTriggerInteractionHandler: (handler) => instance.registerTriggerInteractionHandler(handler),
         markAsSubmenu: () => instance.markAsSubmenu(),
+        markAsContextMenu: () => instance.markAsContextMenu(),
+        setAllowMouseUpTrigger: (value) => instance.setAllowMouseUpTrigger(value),
         closeParent: () => instance.closeParent(),
         handlePopupArrowNavigation: (offset) => instance.handlePopupArrowNavigation(offset),
         handleTriggerInteraction: (interaction) => instance.handleTriggerInteraction(interaction)
@@ -50,6 +64,17 @@ const contextFactory = () => buildContext(inject(RdxMenuRoot));
 class RdxMenuRoot {
     constructor() {
         this.popper = inject(RdxPopper);
+        this.parentRoot = inject(RdxMenuRoot, { optional: true, skipSelf: true });
+        this.providedDirection = injectDirection();
+        /**
+         * The shared per-popup floating context (ADR 0015 §1) — `open` mirrors this menu's open state, the
+         * trigger registry is bridged from {@link registerTrigger}, and the reference / floating elements are
+         * set by the trigger / popup. The new dismissal engine reads this once the popup migrates.
+         */
+        this.floatingContext = createFloatingRootContext({
+            ownerDocument: inject(ElementRef).nativeElement.ownerDocument,
+            open: () => this.open()
+        });
         /** Shared open/close transition state machine (completes on the real animationend). */
         this.transition = useTransitionStatus((open) => this.onOpenChangeComplete.emit(open));
         this.hasAppliedDefaultOpen = false;
@@ -59,14 +84,19 @@ class RdxMenuRoot {
         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 the menu should block outside interactions and page scrolling.
+         * Nested menus are always non-modal.
+         */
+        this.modal = input(true, { ...(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 */ []));
+        /** Text direction for submenu arrow-key behavior. Inherited by nested submenu roots. */
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
         /** 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. */
@@ -79,8 +109,42 @@ class RdxMenuRoot {
         /** 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 */ []));
+        /** Set by `RdxContextMenuRoot` (it composes this root) — distinguishes a context menu from a dropdown. */
+        this.isContextMenu = signal(false, ...(ngDevMode ? [{ debugName: "isContextMenu" }] : /* istanbul ignore next */ []));
         this.hasTriggerInteractionHandler = signal(false, ...(ngDevMode ? [{ debugName: "hasTriggerInteractionHandler" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
+        /**
+         * What kind of parent this menu has (Base UI `MenuParent.type`). A submenu wins over everything (its
+         * parent is a menu); otherwise a context-menu marker, then a menubar (detected by the trigger
+         * interaction handler the menubar registers), else a standalone dropdown.
+         */
+        this.parentType = computed(() => {
+            if (this.isSubmenu()) {
+                return 'menu';
+            }
+            if (this.isContextMenu()) {
+                return 'context-menu';
+            }
+            if (this.hasTriggerInteractionHandler()) {
+                return 'menubar';
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
+        /** The reason for the most recent open-change (Base UI open-change `reason`), for the per-kind policy. */
+        this.lastOpenChangeReason = signal('none', ...(ngDevMode ? [{ debugName: "lastOpenChangeReason" }] : /* istanbul ignore next */ []));
+        this.localAllowMouseUpTrigger = signal(false, ...(ngDevMode ? [{ debugName: "localAllowMouseUpTrigger" }] : /* istanbul ignore next */ []));
+        this.allowMouseUpTrigger = computed(() => this.parentRoot?.allowMouseUpTrigger() ?? this.localAllowMouseUpTrigger(), ...(ngDevMode ? [{ debugName: "allowMouseUpTrigger" }] : /* istanbul ignore next */ []));
+        /** Whether the current open was initiated by **touch** (ADR 0016 §3 — gates the anchored scroll lock). */
+        this.openedByTouch = signal(false, ...(ngDevMode ? [{ debugName: "openedByTouch" }] : /* istanbul ignore next */ []));
+        this.openInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "openInteractionType" }] : /* istanbul ignore next */ []));
+        this.closeInteractionType = signal(null, ...(ngDevMode ? [{ debugName: "closeInteractionType" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.parentRoot?.effectiveDisabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.dir = computed(() => {
+            return this.dirInput() ?? this.parentRoot?.dir() ?? this.providedDirection();
+        }, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.effectiveModal = computed(() => this.modal() && !this.isSubmenu(), ...(ngDevMode ? [{ debugName: "effectiveModal" }] : /* istanbul ignore next */ []));
         this.state = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         effect(() => {
             const defaultOpen = this.defaultOpen();
             if (!this.hasAppliedDefaultOpen && defaultOpen) {
@@ -89,6 +153,14 @@ class RdxMenuRoot {
             }
         });
         effect(() => this.popper.anchorOverride.set(this.trigger()));
+        // Keep the dismissal reference (the active trigger) in sync so an outside-press / focus on the
+        // trigger counts as "inside" and never dismisses (ADR 0015).
+        effect(() => this.floatingContext.setReferenceElement(this.trigger() ?? null));
+        effect(() => {
+            if (this.open() && this.preventUnmountOnClose()) {
+                this.preventUnmountOnClose.set(false);
+            }
+        });
         let previousOpen = this.open();
         effect(() => {
             const open = this.open();
@@ -98,37 +170,79 @@ class RdxMenuRoot {
             }
         });
     }
-    show(autoFocus = 'first') {
-        if (this.disabled()) {
+    show(autoFocus = 'first', reason = 'none', event) {
+        if (this.effectiveDisabled()) {
             return;
         }
         this.autoFocus.set(autoFocus === true ? 'first' : autoFocus);
         if (!this.open()) {
+            const change = this.createOpenChangeEvent(true, reason, event);
+            this.onOpenChange.emit(change.payload);
+            if (change.eventDetails.isCanceled()) {
+                return;
+            }
+            this.lastOpenChangeReason.set(reason);
+            // Record whether this open came from touch (ADR 0016 §3). Hover / mouse / keyboard all resolve
+            // to false (no `'touch'` pointer type), so only a genuine touch open gates the anchored lock.
+            this.openedByTouch.set(event?.pointerType === 'touch');
+            this.openInteractionType.set(getInteractionTypeFromEvent(event));
+            this.preventUnmountOnClose.set(false);
             this.open.set(true);
-            this.onOpenChange.emit(true);
+            // Publish reason + native event on the per-popup floating channel (Base UI open-change) so the
+            // dismissal / future focus policy can read why the menu opened (e.g. hover vs press).
+            this.floatingContext.events.emit('openchange', { open: true, reason, event: change.eventDetails.event });
         }
     }
-    close() {
+    close(reason = 'none', event) {
         if (this.open()) {
+            const change = this.createOpenChangeEvent(false, reason, event);
+            this.onOpenChange.emit(change.payload);
+            if (change.eventDetails.isCanceled()) {
+                return;
+            }
+            this.setAllowMouseUpTrigger(false);
+            this.lastOpenChangeReason.set(reason);
+            this.closeInteractionType.set(getInteractionTypeFromEvent(event));
+            this.preventUnmountOnClose.set(change.shouldPreventUnmountOnClose());
             this.open.set(false);
-            this.onOpenChange.emit(false);
+            this.floatingContext.events.emit('openchange', { open: false, reason, event: change.eventDetails.event });
         }
     }
-    toggle() {
-        if (this.disabled()) {
+    toggle(reason = 'trigger-press', event) {
+        if (this.effectiveDisabled()) {
             return;
         }
         if (this.open()) {
-            this.close();
+            this.close(reason, event);
         }
         else {
-            this.show();
+            this.show('first', reason, event);
         }
     }
+    markAsContextMenu() {
+        this.isContextMenu.set(true);
+    }
+    setAllowMouseUpTrigger(value) {
+        if (this.parentRoot) {
+            this.parentRoot.setAllowMouseUpTrigger(value);
+            return;
+        }
+        this.localAllowMouseUpTrigger.set(value);
+    }
+    /**
+     * Close this menu **and every ancestor menu** in the chain. Selecting an item dismisses the whole
+     * menu, not just the innermost submenu (a submenu's `close()` would leave its parents open).
+     */
+    closeEntireMenu(reason = 'none', event) {
+        this.close(reason, event);
+        this.parentRoot?.closeEntireMenu(reason, event);
+    }
     registerTrigger(el) {
         this.registeredTrigger = el;
         this.trigger.set(el);
+        this.floatingContext.triggers.add(el);
         return () => {
+            this.floatingContext.triggers.delete(el);
             if (this.registeredTrigger === el) {
                 this.registeredTrigger = undefined;
                 this.trigger.set(undefined);
@@ -176,18 +290,44 @@ class RdxMenuRoot {
     closeParent() {
         this.trigger()?.dispatchEvent(new CustomEvent('rdx-menu-close-parent', { bubbles: true }));
     }
+    createOpenChangeEvent(open, reason, event) {
+        const change = createCancelableChangeEventDetails(reason, event ?? new Event('menu.open-change'), this.trigger());
+        return {
+            eventDetails: change.eventDetails,
+            shouldPreventUnmountOnClose: change.shouldPreventUnmountOnClose,
+            payload: {
+                open,
+                trigger: change.eventDetails.trigger,
+                reason: change.eventDetails.reason,
+                event: change.eventDetails.event,
+                eventDetails: change.eventDetails
+            }
+        };
+    }
     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 }); }
+    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 }, dirInput: { classPropertyName: "dirInput", publicName: "dir", 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),
+            // New floating foundation (ADR 0015/0017). Inherit-or-create the tree so a submenu shares its
+            // parent menu's tree; the per-popup root context bridges open / triggers / reference.
+            provideFloatingTree(),
+            provideFloatingRootContext(() => inject(RdxMenuRoot).floatingContext)
+        ], 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: '[rdxMenuRoot],[rdxMenuSubmenuRoot]',
                     exportAs: 'rdxMenuRoot',
-                    providers: [provideRdxMenuRootContext(contextFactory)],
+                    providers: [
+                        provideRdxMenuRootContext(contextFactory),
+                        // New floating foundation (ADR 0015/0017). Inherit-or-create the tree so a submenu shares its
+                        // parent menu's tree; the per-popup root context bridges open / triggers / reference.
+                        provideFloatingTree(),
+                        provideFloatingRootContext(() => inject(RdxMenuRoot).floatingContext)
+                    ],
                     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"] }] } });
+        }], 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 }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", 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"] }] } });
 
 /**
  * An optional visual arrow connecting the popup to its trigger.
@@ -280,12 +420,13 @@ class RdxMenuCheckboxItem {
         /** Emits when the checked state changes. */
         this.onCheckedChange = output();
         this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         // Expose helpers for host bindings
         this.isIndeterminate = isIndeterminate;
         this.getCheckedState = getCheckedState;
     }
     onFocus() {
-        if (!this.disabled()) {
+        if (!this.effectiveDisabled()) {
             this.isFocused.set(true);
         }
     }
@@ -293,13 +434,13 @@ class RdxMenuCheckboxItem {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
             return;
         }
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
-        if (document.activeElement !== this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
     }
@@ -307,24 +448,31 @@ class RdxMenuCheckboxItem {
         if (event.pointerType !== 'mouse') {
             return;
         }
-        if (document.activeElement === this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
     onItemClick() {
-        if (this.disabled())
+        if (this.effectiveDisabled())
             return;
         this.toggleChecked();
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
+    }
+    onMouseUp(event) {
+        if (this.effectiveDisabled() || event.button !== 0 || !this.rootContext?.allowMouseUpTrigger()) {
+            return;
+        }
+        this.rootContext.setAllowMouseUpTrigger(false);
+        this.elementRef.nativeElement.click();
     }
     onActivate(event) {
-        if (this.disabled())
+        if (this.effectiveDisabled())
             return;
         event.preventDefault();
         this.toggleChecked();
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
     }
     toggleChecked() {
         const next = isIndeterminate(this.checked()) ? true : !this.checked();
@@ -332,7 +480,7 @@ class RdxMenuCheckboxItem {
         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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuCheckboxItem, isStandalone: true, selector: "[rdxMenuCheckboxItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuCheckboxItemContext(checkboxItemContextFactory)], exportAs: ["rdxMenuCheckboxItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuCheckboxItem, decorators: [{
             type: Directive,
@@ -345,14 +493,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         tabindex: '-1',
                         '[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-disabled]': 'effectiveDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
                         '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
+                        '(mouseup)': 'onMouseUp($event)',
                         '(click)': 'onItemClick()',
                         '(keydown.enter)': 'onActivate($event)',
                         '(keydown.space)': 'onActivate($event)'
@@ -389,20 +538,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
 
+const [injectRdxMenuGroupContext, provideRdxMenuGroupContext] = createContext('RdxMenuGroupContext', 'components/menu');
+
+const groupContextFactory$1 = () => {
+    const instance = inject(RdxMenuGroup);
+    return { labelId: instance.labelId };
+};
 /**
  * Groups related menu items together.
  */
 class RdxMenuGroup {
+    constructor() {
+        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuGroup, isStandalone: true, selector: "[rdxMenuGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()" } }, providers: [provideRdxMenuGroupContext(groupContextFactory$1)], 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',
+                    providers: [provideRdxMenuGroupContext(groupContextFactory$1)],
                     host: {
-                        role: 'group'
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId()'
                     }
                 }]
         }] });
@@ -411,16 +571,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * A label for a menu group.
  */
 class RdxMenuGroupLabel {
+    constructor() {
+        this.groupContext = injectRdxMenuGroupContext();
+        this.id = injectId('rdx-menu-group-label-');
+        this.groupContext.labelId.set(this.id);
+        inject(DestroyRef).onDestroy(() => {
+            if (this.groupContext.labelId() === this.id) {
+                this.groupContext.labelId.set(undefined);
+            }
+        });
+    }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuGroupLabel, isStandalone: true, selector: "[rdxMenuGroupLabel]", host: { properties: { "attr.id": "id" } }, 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'
+                    exportAs: 'rdxMenuGroupLabel',
+                    host: {
+                        '[attr.id]': 'id'
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * An individual menu item.
@@ -439,9 +612,10 @@ class RdxMenuItem {
         /** Emits when the item is selected. */
         this.onSelect = output();
         this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     }
     onFocus() {
-        if (!this.disabled()) {
+        if (!this.effectiveDisabled()) {
             this.isFocused.set(true);
         }
     }
@@ -449,13 +623,13 @@ class RdxMenuItem {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
             return;
         }
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
-        if (document.activeElement !== this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
     }
@@ -465,27 +639,34 @@ class RdxMenuItem {
         }
         // Clear highlight when the pointer leaves: move focus back to the popup. A subsequent
         // pointermove on a sibling item re-focuses it, so moving between items still works.
-        if (document.activeElement === this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
     onItemClick() {
-        if (this.disabled())
+        if (this.effectiveDisabled())
             return;
         this.onSelect.emit();
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
+    }
+    onMouseUp(event) {
+        if (this.effectiveDisabled() || event.button !== 0 || !this.rootContext?.allowMouseUpTrigger()) {
+            return;
+        }
+        this.rootContext.setAllowMouseUpTrigger(false);
+        this.elementRef.nativeElement.click();
     }
     onActivate(event) {
-        if (this.disabled())
+        if (this.effectiveDisabled())
             return;
         event.preventDefault();
         this.onSelect.emit();
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuItem, isStandalone: true, selector: "[rdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuItem, decorators: [{
             type: Directive,
@@ -495,14 +676,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         role: 'menuitem',
                         tabindex: '-1',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
                         '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
+                        '(mouseup)': 'onMouseUp($event)',
                         '(click)': 'onItemClick()',
                         '(keydown.enter)': 'onActivate($event)',
                         '(keydown.space)': 'onActivate($event)'
@@ -527,9 +709,10 @@ class RdxMenuLinkItem {
         /** Emits when the item is selected. */
         this.onSelect = output();
         this.highlighted = computed(() => this.isFocused(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.effectiveDisabled = computed(() => this.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
     }
     onFocus() {
-        if (!this.disabled()) {
+        if (!this.effectiveDisabled()) {
             this.isFocused.set(true);
         }
     }
@@ -537,13 +720,13 @@ class RdxMenuLinkItem {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
             return;
         }
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
-        if (document.activeElement !== this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
     }
@@ -551,30 +734,37 @@ class RdxMenuLinkItem {
         if (event.pointerType !== 'mouse') {
             return;
         }
-        if (document.activeElement === this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
     onItemClick(event) {
-        if (this.disabled()) {
+        if (this.effectiveDisabled()) {
             event.preventDefault();
             return;
         }
         this.onSelect.emit();
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
+    }
+    onMouseUp(event) {
+        if (this.effectiveDisabled() || event.button !== 0 || !this.rootContext?.allowMouseUpTrigger()) {
+            return;
+        }
+        this.rootContext.setAllowMouseUpTrigger(false);
+        this.elementRef.nativeElement.click();
     }
     onActivate(event) {
-        if (this.disabled()) {
+        if (this.effectiveDisabled()) {
             event.preventDefault();
             return;
         }
         this.onSelect.emit();
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuLinkItem, isStandalone: true, selector: "a[rdxMenuLinkItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick($event)", "keydown.enter": "onActivate($event)" }, properties: { "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuLinkItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuLinkItem, decorators: [{
             type: Directive,
@@ -584,62 +774,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         role: 'menuitem',
                         tabindex: '-1',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
                         '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
+                        '(mouseup)': 'onMouseUp($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"] }] } });
 
-/** Selector for focusable menu items within the popup. */
-const ITEM_SELECTOR = [
+/** Selector for focusable menu items within a popup. */
+const RDX_MENU_ITEM_SELECTOR = [
     '[rdxMenuItem]:not([data-disabled])',
     '[rdxMenuCheckboxItem]:not([data-disabled])',
     '[rdxMenuRadioItem]:not([data-disabled])',
     '[rdxMenuLinkItem]:not([data-disabled])',
     '[rdxMenuSubTrigger]:not([data-disabled])'
 ].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);
+function getFocusableMenuItems(popup) {
+    return Array.from(popup.querySelectorAll(RDX_MENU_ITEM_SELECTOR)).filter((item) => item.closest('[rdxMenuPopup]') === popup);
 }
+
 /**
  * A container for the menu contents.
  */
 class RdxMenuPopup {
     constructor() {
         this.rootContext = injectRdxMenuRootContext();
-        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.floatingContext = inject(RDX_FLOATING_ROOT_CONTEXT);
+        this.registration = inject(RDX_FLOATING_REGISTRATION, { optional: true });
+        this.focusManager = inject(RdxFloatingFocusManager);
         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));
+        this.escapeKeyDown = output();
         /**
          * Event handler called when a pointerdown event happens outside of the popup. Can be prevented.
          */
-        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.pointerDownOutside = output();
         /**
          * Event handler called when focus moves outside of the popup. Can be prevented.
          */
-        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
+        this.focusOutside = output();
         /**
          * Event handler called when an interaction happens outside of the popup. Can be prevented.
          */
-        this.interactOutside = outputFromObservable(outputToObservable(this.dismissableLayer.interactOutside));
+        this.interactOutside = output();
         /**
          * Event handler called before focus moves into the popup. Can be prevented.
          */
@@ -648,6 +840,27 @@ class RdxMenuPopup {
          * Event handler called before focus returns after the popup is removed. Can be prevented.
          */
         this.closeAutoFocus = outputFromObservable(outputToObservable(this.focusScope.unmountAutoFocus));
+        // Page scroll lock (Base UI `MenuPositioner`): only while **open** and **modal**, and a hover-open
+        // dropdown / context menu does NOT lock (a menubar menu always does when modal). A submenu never
+        // locks — its `modal` is already effectively false. For a **touch** open the anchored helper only
+        // locks when the popup is effectively viewport-width (ADR 0016 §3), so a small menu stays
+        // swipe-to-dismissable on mobile.
+        useAnchoredScrollLock(computed(() => {
+            if (!this.rootContext.isOpen() || !this.rootContext.modal()) {
+                return false;
+            }
+            if (this.rootContext.parentType() === 'menubar') {
+                return true;
+            }
+            return this.rootContext.lastOpenChangeReason() !== 'trigger-hover';
+        }), {
+            touchOpen: () => this.rootContext.openedByTouch(),
+            element: () => this.elementRef.nativeElement
+        });
+        // The popup is this layer's floating element (the inside-surface for containment checks). A
+        // submenu is a child node in the shared tree, so the capability's logical containment treats an
+        // open submenu as "inside" its parent automatically — replacing the legacy `branches` registry.
+        this.floatingContext.setFloatingElement(this.elementRef.nativeElement);
         const unregister = this.rootContext.registerTransitionElement(this.elementRef.nativeElement);
         const unregisterPopup = this.rootContext.registerPopup(this.elementRef.nativeElement);
         inject(DestroyRef).onDestroy(() => {
@@ -655,34 +868,52 @@ class RdxMenuPopup {
             unregisterPopup();
             clearTimeout(this.searchTimer);
         });
-        effect((onCleanup) => {
-            if (!this.rootContext.isSubmenu()) {
+        // Base UI moves focus into a keyboard-opened submenu via its list-navigation layer, not via the
+        // focus manager (`initialFocus={false}` for submenus). In Angular, the popup itself is the first
+        // point where the submenu DOM definitely exists, so complete the keyboard handoff here.
+        effect(() => {
+            if (!this.rootContext.isOpen() ||
+                this.rootContext.parentType() !== 'menu' ||
+                this.rootContext.openInteractionType() !== 'keyboard') {
                 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.scheduleSubmenuKeyboardFocus();
         });
-        this.dismissableLayer.dismiss.subscribe(() => {
-            this.rootContext.close();
+        // Dismissal (ADR 0015): Escape, an outside press, or focus moving outside closes the menu.
+        // Escape is owned by the capability (a document-level listener — it works regardless of where
+        // focus currently sits, matching Base UI `useDismiss`). Deepest-first: a non-bubbling layer
+        // yields to an open child, so Escape closes only the innermost menu — unless `closeParentOnEsc`
+        // makes it bubble up the whole chain.
+        new RdxDismiss(this.floatingContext, () => this.registration?.node() ?? null, {
+            // A disabled menu does not dismiss (Base UI `useDismiss({ enabled: !disabled })`): if an open
+            // menu becomes disabled it stays put rather than closing on Escape / outside-press / focus-out.
+            enabled: () => !this.rootContext.disabled(),
+            escapeKey: () => true,
+            escapeKeyBubbles: () => this.rootContext.closeParentOnEsc(),
+            outsidePress: () => true,
+            focusOutside: () => false,
+            onEscapeKeyDown: (event) => this.escapeKeyDown.emit(event),
+            onPointerDownOutside: (event) => {
+                this.pointerDownOutside.emit(event);
+                this.interactOutside.emit(event);
+            },
+            onDismiss: (reason, event) => {
+                // Forward the dismissal reason + native event into the menu's open-change channel.
+                const menuReason = reason === 'escape-key' ? 'escape-key' : 'outside-press';
+                this.rootContext.close(menuReason, event);
+                // Escape should restore focus synchronously to the trigger / submenu trigger so the
+                // menu chain remains keyboard-stable even before the scope's queued unmount return-focus.
+                if (reason === 'escape-key') {
+                    this.rootContext.trigger()?.focus({ preventScroll: true });
+                }
+            }
         });
-        // 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(() => {
-            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 });
-                });
+        // Focus-out close is owned by the floating focus manager, matching Base UI's MenuPopup.
+        this.focusManager.focusOut.subscribe((event) => {
+            this.focusOutside.emit(event);
+            this.interactOutside.emit(event);
+            if (!event.defaultPrevented) {
+                this.rootContext.close('focus-out', event);
             }
         });
     }
@@ -695,8 +926,8 @@ class RdxMenuPopup {
     }
     handleKeydown(event) {
         const el = this.elementRef.nativeElement;
-        const items = getFocusableItems(el);
-        const current = document.activeElement;
+        const items = getFocusableMenuItems(el);
+        const current = el.ownerDocument.activeElement;
         const currentIndex = items.indexOf(current);
         switch (event.key) {
             case 'ArrowDown': {
@@ -744,6 +975,13 @@ class RdxMenuPopup {
                     }
                     break;
                 }
+                if (this.rootContext.dir() === 'rtl') {
+                    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();
@@ -752,22 +990,23 @@ class RdxMenuPopup {
                 break;
             }
             case 'ArrowRight': {
-                if (this.rootContext.handlePopupArrowNavigation(1)) {
+                const trigger = this.rootContext.trigger();
+                if (trigger?.hasAttribute('rdxMenuSubTrigger') && this.rootContext.dir() === 'rtl') {
                     event.preventDefault();
                     event.stopPropagation();
+                    this.rootContext.close();
+                    trigger.focus({ preventScroll: true });
+                    break;
                 }
-                break;
-            }
-            case 'Escape': {
-                event.preventDefault();
-                event.stopPropagation();
-                this.rootContext.close();
-                if (this.rootContext.isSubmenu() && this.rootContext.closeParentOnEsc()) {
-                    this.rootContext.closeParent();
+                if (this.rootContext.handlePopupArrowNavigation(1)) {
+                    event.preventDefault();
+                    event.stopPropagation();
                 }
-                this.rootContext.trigger()?.focus({ preventScroll: true });
                 break;
             }
+            // Escape is owned by the dismissal capability (a document-level listener that works
+            // regardless of focus position); it closes the menu, restores focus to the trigger, and
+            // cascades up the chain when `closeParentOnEsc` is set.
             case 'Tab': {
                 // Close on tab to allow natural tab navigation
                 this.rootContext.close();
@@ -797,35 +1036,130 @@ class RdxMenuPopup {
             }
         }
     }
+    scheduleSubmenuKeyboardFocus(attempt = 0) {
+        const view = this.elementRef.nativeElement.ownerDocument.defaultView ?? globalThis;
+        view.requestAnimationFrame(() => this.applySubmenuKeyboardFocus(attempt));
+    }
+    applySubmenuKeyboardFocus(attempt) {
+        const maxAttempts = 10;
+        const popup = this.elementRef.nativeElement;
+        if (!this.rootContext.isOpen() || this.rootContext.parentType() !== 'menu') {
+            return;
+        }
+        const activeElement = popup.ownerDocument.activeElement;
+        if (activeElement && popup.contains(activeElement)) {
+            return;
+        }
+        const items = getFocusableMenuItems(popup);
+        if (items.length === 0) {
+            if (attempt < maxAttempts) {
+                this.scheduleSubmenuKeyboardFocus(attempt + 1);
+            }
+            return;
+        }
+        items[0]?.focus({ preventScroll: true });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPopup, isStandalone: true, selector: "[rdxMenuPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", openAutoFocus: "openAutoFocus", closeAutoFocus: "closeAutoFocus" }, host: { attributes: { "role": "menu", "tabindex": "-1" }, listeners: { "keydown": "handleKeydown($event)", "rdx-menu-close-parent": "handleCloseParent($event)" }, properties: { "attr.aria-orientation": "rootContext.orientation()", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-align": "align()", "attr.data-side": "side()" } }, providers: [
-            provideRdxDismissableLayerConfig(() => {
+            provideFloatingFocusManagerConfig(() => {
                 const rootContext = injectRdxMenuRootContext();
+                const popup = inject(ElementRef).nativeElement;
                 return {
-                    disableOutsidePointerEvents: computed(() => rootContext.modal())
+                    // Only a (modal) **context menu** traps focus — Base UI's `FloatingFocusManager modal` is
+                    // true for `context-menu` alone. Other menus stay non-modal and close on focus-out.
+                    modal: () => rootContext.parentType() === 'context-menu',
+                    // The manager follows mounted/open lifecycle, not menu disabled state. Dismissal remains
+                    // disabled separately below; focus/marker policy should not disappear if a menu becomes
+                    // disabled while open, or if `preventUnmountOnClose()` keeps it mounted after close.
+                    enabled: () => rootContext.present(),
+                    // Base UI's submenu policy: a submenu mount does not steal focus from its trigger.
+                    // Root menus still choose first / last item vs popup container from the menu's own
+                    // open policy (`autoFocus`), but the decision now lives in the focus manager instead
+                    // of a separate popup effect.
+                    initialFocus: () => {
+                        if (!rootContext.isOpen() || rootContext.parentType() === 'menu') {
+                            return false;
+                        }
+                        const autoFocus = rootContext.autoFocus();
+                        if (autoFocus === false) {
+                            return false;
+                        }
+                        if (autoFocus === 'popup') {
+                            return popup;
+                        }
+                        return () => {
+                            const items = getFocusableMenuItems(popup);
+                            return autoFocus === 'last' ? (items.at(-1) ?? popup) : (items[0] ?? popup);
+                        };
+                    },
+                    returnFocus: () => {
+                        const parentType = rootContext.parentType();
+                        if (rootContext.trigger() || parentType === undefined || parentType === 'context-menu') {
+                            return true;
+                        }
+                        if (parentType === 'menubar' && rootContext.lastOpenChangeReason() !== 'outside-press') {
+                            return true;
+                        }
+                        return false;
+                    },
+                    openInteractionType: () => rootContext.openInteractionType(),
+                    closeInteractionType: () => rootContext.closeInteractionType()
                 };
-            }),
-            provideRdxFocusScopeConfig(() => ({
-                trapped: signal(false)
-            }))
-        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }, { directive: i3.RdxFocusScope }], ngImport: i0 }); }
+            })
+        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }], 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],
+                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager],
                     providers: [
-                        provideRdxDismissableLayerConfig(() => {
+                        provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxMenuRootContext();
+                            const popup = inject(ElementRef).nativeElement;
                             return {
-                                disableOutsidePointerEvents: computed(() => rootContext.modal())
+                                // Only a (modal) **context menu** traps focus — Base UI's `FloatingFocusManager modal` is
+                                // true for `context-menu` alone. Other menus stay non-modal and close on focus-out.
+                                modal: () => rootContext.parentType() === 'context-menu',
+                                // The manager follows mounted/open lifecycle, not menu disabled state. Dismissal remains
+                                // disabled separately below; focus/marker policy should not disappear if a menu becomes
+                                // disabled while open, or if `preventUnmountOnClose()` keeps it mounted after close.
+                                enabled: () => rootContext.present(),
+                                // Base UI's submenu policy: a submenu mount does not steal focus from its trigger.
+                                // Root menus still choose first / last item vs popup container from the menu's own
+                                // open policy (`autoFocus`), but the decision now lives in the focus manager instead
+                                // of a separate popup effect.
+                                initialFocus: () => {
+                                    if (!rootContext.isOpen() || rootContext.parentType() === 'menu') {
+                                        return false;
+                                    }
+                                    const autoFocus = rootContext.autoFocus();
+                                    if (autoFocus === false) {
+                                        return false;
+                                    }
+                                    if (autoFocus === 'popup') {
+                                        return popup;
+                                    }
+                                    return () => {
+                                        const items = getFocusableMenuItems(popup);
+                                        return autoFocus === 'last' ? (items.at(-1) ?? popup) : (items[0] ?? popup);
+                                    };
+                                },
+                                returnFocus: () => {
+                                    const parentType = rootContext.parentType();
+                                    if (rootContext.trigger() || parentType === undefined || parentType === 'context-menu') {
+                                        return true;
+                                    }
+                                    if (parentType === 'menubar' && rootContext.lastOpenChangeReason() !== 'outside-press') {
+                                        return true;
+                                    }
+                                    return false;
+                                },
+                                openInteractionType: () => rootContext.openInteractionType(),
+                                closeInteractionType: () => rootContext.closeInteractionType()
                             };
-                        }),
-                        provideRdxFocusScopeConfig(() => ({
-                            trapped: signal(false)
-                        }))
+                        })
                     ],
                     host: {
                         role: 'menu',
@@ -845,101 +1179,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], 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).
+ * Structural directive that teleports the menu popup into a container (default `document.body`) while
+ * the menu is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
+ *
+ * This replaces the consumer-owned `@if (root.open())` mount: it adds both teleporting *and*
+ * exit-animation support. Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxMenuPortal rdxMenuPositioner>` — or as an explicit `<ng-template rdxMenuPortal>`. For a
+ * custom container, or a backdrop alongside the positioner (multi-root), use the explicit form.
  */
 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortal, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxMenuPortal]',
+                    selector: 'ng-template[rdxMenuPortal]',
                     exportAs: 'rdxMenuPortal',
-                    hostDirectives: [
-                        {
-                            directive: RdxPortal,
-                            inputs: ['container']
-                        }
-                    ]
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))]
                 }]
-        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+        }] });
+/**
+ * Dev-mode guard: `rdxMenuPortal` is a structural directive. The old `<div rdxMenuPortal>` markup
+ * would silently stop portaling — fail loudly instead.
+ */
+class RdxMenuPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            rdxDevError('menu/portal-on-element', '`rdxMenuPortal` is a structural directive. ' +
+                'Use `*rdxMenuPortal` on the positioner element or `<ng-template rdxMenuPortal>`.', 'components/menu');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPortalMisuseGuard, isStandalone: true, selector: "[rdxMenuPortal]:not(ng-template)", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPortalMisuseGuard, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxMenuPortal]:not(ng-template)'
+                }]
+        }], ctorParameters: () => [] });
+
+/** Marker attribute on the menu's internal backdrop element. */
+const MENU_INTERNAL_BACKDROP_ATTR = 'data-rdx-menu-internal-backdrop';
+/** The element that stays interactive through the backdrop (Base UI `backdropCutout`). */
+function cutoutElement(rootContext) {
+    const type = rootContext.parentType();
+    const trigger = rootContext.trigger() ?? null;
+    if (type === 'menubar') {
+        // Keep the whole menubar interactive so hover/click switching between its menus still works.
+        return trigger?.closest('[rdxMenubarRoot]') ?? trigger;
+    }
+    if (type === 'context-menu') {
+        return null; // right-click anywhere — no cutout
+    }
+    return trigger; // standalone dropdown — keep its trigger clickable (toggle-close)
+}
+/**
+ * The menu's modal **internal backdrop** (finding #1) — a thin wrapper over the shared
+ * {@link setupInternalBackdrop}. Rendered for a modal Menu / Context Menu / Menubar menu (Base UI
+ * `MenuPositioner.tsx`): never for a submenu, and not for a hover-opened dropdown / context menu.
+ */
+function setupMenuInternalBackdrop(positioner, rootContext, injector) {
+    setupInternalBackdrop(positioner, injector, {
+        marker: MENU_INTERNAL_BACKDROP_ATTR,
+        isOpen: () => rootContext.isOpen(),
+        cutout: () => cutoutElement(rootContext),
+        shouldRender: () => {
+            const type = rootContext.parentType();
+            if (type === 'menu' || !rootContext.modal()) {
+                return false; // submenus and non-modal menus get no backdrop
+            }
+            if (type === 'menubar') {
+                return true; // a modal menubar menu always gets one (even on hover-switch)
+            }
+            // standalone / context menu: suppressed for a hover-open (Base UI excludes `triggerHover`).
+            return rootContext.lastOpenChangeReason() !== 'trigger-hover';
+        }
+    });
+}
 
 /**
  * Positions the menu against its trigger.
+ *
+ * A "thin" positioner (ADR 0012): it inherits the popper positioning surface (inputs, `placed`
+ * output, unified vars + placement attrs) from {@link RdxPopperContentWrapper} and adds the menu
+ * defaults, the open/closed state attributes, and the deprecated `--radix-menu-*` aliases.
  */
-class RdxMenuPositioner {
+class RdxMenuPositioner extends RdxPopperContentWrapper {
     constructor() {
+        super();
         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));
+        this.legacyVars = legacyPopperVars('menu');
+        const injector = inject(Injector);
+        const host = inject(ElementRef).nativeElement;
+        // After the structural portal has relocated this positioner into the portal container, set up the
+        // modal internal backdrop (finding #1) as a sibling before it.
+        afterNextRender(() => setupMenuInternalBackdrop(host, this.rootContext, injector));
     }
     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: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxMenuPositioner, isStandalone: true, selector: "[rdxMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "style": "legacyVars" } }, providers: [
+            ...provideRdxPopperContentWrapper(RdxMenuPositioner),
             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 }); }
+        ], exportAs: ["rdxMenuPositioner"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuPositioner, decorators: [{
             type: Directive,
@@ -947,92 +1290,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[rdxMenuPositioner]',
                     exportAs: 'rdxMenuPositioner',
                     providers: [
+                        ...provideRdxPopperContentWrapper(RdxMenuPositioner),
                         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)'
-        }`
+                        // `data-side`/`data-align`/`data-anchor-hidden` and the unified vars come from the inherited
+                        // wrapper (ADR 0012); only the deprecated `--radix-menu-*` aliases remain, for back-compat.
+                        '[style]': 'legacyVars'
                     }
                 }]
-        }], 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"] }] } });
+        }], ctorParameters: () => [] });
 
 const [injectRdxMenuRadioGroupContext, provideRdxMenuRadioGroupContext] = createContext('RdxMenuRadioGroupContext', 'components/menu');
 const radioGroupContextFactory = () => {
     const instance = inject(RdxMenuRadioGroup);
     return {
         value: instance.value,
+        disabled: instance.disabled,
         selectValue: (v) => instance.selectValue(v)
     };
 };
+const groupContextFactory = () => {
+    const instance = inject(RdxMenuRadioGroup);
+    return { labelId: instance.labelId };
+};
 /**
  * Groups radio items in a menu.
  */
 class RdxMenuRadioGroup {
     constructor() {
+        this.hasAppliedDefaultValue = false;
         /**
          * The currently selected value.
          */
         this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** The initially selected value for uncontrolled usage. */
+        this.defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** Whether all radio items in the group are disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Emits when the selected value changes.
          */
         this.onValueChange = output();
+        this.labelId = signal(undefined, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const defaultValue = this.defaultValue();
+            if (!this.hasAppliedDefaultValue && defaultValue !== undefined) {
+                this.hasAppliedDefaultValue = true;
+                this.value.set(defaultValue);
+            }
+        });
     }
     selectValue(newValue) {
+        if (this.disabled()) {
+            return;
+        }
         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 }); }
+    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 }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId()", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, providers: [
+            provideRdxMenuRadioGroupContext(radioGroupContextFactory),
+            provideRdxMenuGroupContext(groupContextFactory)
+        ], 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)],
+                    providers: [
+                        provideRdxMenuRadioGroupContext(radioGroupContextFactory),
+                        provideRdxMenuGroupContext(groupContextFactory)
+                    ],
                     host: {
-                        role: 'group'
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined'
                     }
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
 const [injectRdxMenuRadioItemContext, provideRdxMenuRadioItemContext] = createContext('RdxMenuRadioItemContext', 'components/menu');
 const radioItemContextFactory = () => {
@@ -1062,10 +1401,11 @@ class RdxMenuRadioItem {
         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.effectiveDisabled = computed(() => this.disabled() || this.radioGroupContext.disabled() || (this.rootContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.getCheckedState = getCheckedState;
     }
     onFocus() {
-        if (!this.disabled()) {
+        if (!this.effectiveDisabled()) {
             this.isFocused.set(true);
         }
     }
@@ -1073,13 +1413,13 @@ class RdxMenuRadioItem {
         this.isFocused.set(false);
     }
     onPointerMove(event) {
-        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.disabled()) {
+        if (event.defaultPrevented || event.pointerType !== 'mouse' || this.effectiveDisabled()) {
             return;
         }
         if (this.rootContext && !this.rootContext.highlightItemOnHover()) {
             return;
         }
-        if (document.activeElement !== this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement !== this.elementRef.nativeElement) {
             this.elementRef.nativeElement.focus({ preventScroll: true });
         }
     }
@@ -1087,18 +1427,25 @@ class RdxMenuRadioItem {
         if (event.pointerType !== 'mouse') {
             return;
         }
-        if (document.activeElement === this.elementRef.nativeElement) {
+        if (this.elementRef.nativeElement.ownerDocument.activeElement === this.elementRef.nativeElement) {
             this.elementRef.nativeElement.closest('[rdxMenuPopup]')?.focus({ preventScroll: true });
         }
     }
     onItemClick() {
-        if (this.disabled()) {
+        if (this.effectiveDisabled()) {
             return;
         }
         this.selectItem();
     }
+    onMouseUp(event) {
+        if (this.effectiveDisabled() || event.button !== 0 || !this.rootContext?.allowMouseUpTrigger()) {
+            return;
+        }
+        this.rootContext.setAllowMouseUpTrigger(false);
+        this.elementRef.nativeElement.click();
+    }
     onActivate(event) {
-        if (this.disabled()) {
+        if (this.effectiveDisabled()) {
             return;
         }
         event.preventDefault();
@@ -1109,10 +1456,10 @@ class RdxMenuRadioItem {
         this.radioGroupContext.selectValue(v);
         this.onSelect.emit(v);
         if (this.closeOnClick())
-            this.rootContext?.close();
+            this.rootContext?.closeEntireMenu();
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuRadioItem, isStandalone: true, selector: "[rdxMenuRadioItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitemradio", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave($event)", "mouseup": "onMouseUp($event)", "click": "onItemClick()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, providers: [provideRdxMenuRadioItemContext(radioItemContextFactory)], exportAs: ["rdxMenuRadioItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuRadioItem, decorators: [{
             type: Directive,
@@ -1125,14 +1472,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         tabindex: '-1',
                         '[attr.aria-checked]': 'checked()',
                         '[attr.data-state]': 'getCheckedState(checked())',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
-                        '[attr.aria-disabled]': 'disabled() ? true : undefined',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? true : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
                         '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave($event)',
+                        '(mouseup)': 'onMouseUp($event)',
                         '(click)': 'onItemClick()',
                         '(keydown.enter)': 'onActivate($event)',
                         '(keydown.space)': 'onActivate($event)'
@@ -1540,6 +1888,7 @@ class RdxMenuSubTrigger {
         this.lastPointer = null;
         /** Whether the current open was initiated by hover (vs keyboard / click). */
         this.openedByHover = false;
+        this.ignoreNextKeyboardClick = false;
         /** 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>`. */
@@ -1554,6 +1903,7 @@ class RdxMenuSubTrigger {
         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.effectiveDisabled = computed(() => this.disabled() || this.submenuContext.disabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.nativeButtonState = computed(() => this.nativeButton() || this.elementRef.nativeElement.tagName === 'BUTTON', ...(ngDevMode ? [{ debugName: "nativeButtonState" }] : /* istanbul ignore next */ []));
         this.submenuContext.markAsSubmenu();
         effect((onCleanup) => {
@@ -1582,7 +1932,8 @@ class RdxMenuSubTrigger {
                 return;
             }
             const reference = this.elementRef.nativeElement;
-            const scope = reference.closest('[rdxMenuPopup]') ?? document.body;
+            const ownerDocument = reference.ownerDocument;
+            const scope = reference.closest('[rdxMenuPopup]') ?? ownerDocument.body;
             const unregisterOpen = registerOpenSubmenu(reference, popup);
             let removeTunnel = applyPointerTunnel(scope, reference, popup);
             const { handler, dispose } = createSafePolygonHandler({
@@ -1600,9 +1951,9 @@ class RdxMenuSubTrigger {
                     removeTunnel = undefined;
                 }
             });
-            document.addEventListener('mousemove', handler);
+            ownerDocument.addEventListener('mousemove', handler);
             onCleanup(() => {
-                document.removeEventListener('mousemove', handler);
+                ownerDocument.removeEventListener('mousemove', handler);
                 dispose();
                 removeTunnel?.();
                 unregisterOpen();
@@ -1625,7 +1976,7 @@ class RdxMenuSubTrigger {
         }
     }
     onFocus() {
-        if (!this.disabled()) {
+        if (!this.effectiveDisabled()) {
             this.clearSiblingHighlights();
             this.isFocused.set(true);
         }
@@ -1633,18 +1984,71 @@ class RdxMenuSubTrigger {
     onBlur() {
         this.isFocused.set(false);
     }
-    onClick() {
-        if (this.disabled())
+    onClick(event) {
+        if (this.effectiveDisabled())
+            return;
+        if (this.ignoreNextKeyboardClick && event.detail === 0) {
+            this.ignoreNextKeyboardClick = false;
+            return;
+        }
+        const wasOpen = this.submenuContext.isOpen();
+        // When the submenu opens on hover (default), hover owns its open/close, so a real **mouse** click
+        // is ignored — otherwise it would toggle a just-hover-opened submenu shut (a visible flicker).
+        // Base UI: `ignoreMouse: openOnHover`. A keyboard-activated click (`detail === 0`) still opens.
+        const isMouseClick = event.detail > 0;
+        if (this.openOnHover() && isMouseClick) {
+            return;
+        }
+        this.openedByHover = false;
+        this.clearSiblingHighlights();
+        if (this.submenuContext.isOpen()) {
+            // Toggle (close) only for a click-driven submenu (Base UI `toggle: !openOnHover`).
+            if (!this.openOnHover()) {
+                this.submenuContext.close();
+            }
+            return;
+        }
+        this.closeSiblingSubmenus();
+        this.submenuContext.show('first', 'none', event);
+        if (event.detail === 0 && !wasOpen && this.submenuContext.isOpen()) {
+            this.focusFirstSubmenuItem();
+        }
+    }
+    onEnter(event) {
+        if (this.effectiveDisabled())
             return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.ignoreNextKeyboardClick = true;
         this.openedByHover = false;
         this.clearSiblingHighlights();
         if (!this.submenuContext.isOpen()) {
             this.closeSiblingSubmenus();
+            this.submenuContext.show('first', 'none', event);
         }
-        this.submenuContext.toggle();
+        this.focusFirstSubmenuItem();
     }
     onArrowRight(event) {
-        if (this.disabled())
+        if (this.submenuContext.dir() === 'rtl') {
+            return;
+        }
+        if (this.effectiveDisabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.openedByHover = false;
+        this.clearSiblingHighlights();
+        if (!this.submenuContext.isOpen()) {
+            this.closeSiblingSubmenus();
+            this.submenuContext.show('first', 'none', event);
+            this.focusFirstSubmenuItem();
+        }
+    }
+    onArrowLeft(event) {
+        if (this.submenuContext.dir() !== 'rtl') {
+            return;
+        }
+        if (this.effectiveDisabled())
             return;
         event.preventDefault();
         event.stopPropagation();
@@ -1652,23 +2056,25 @@ class RdxMenuSubTrigger {
         this.clearSiblingHighlights();
         if (!this.submenuContext.isOpen()) {
             this.closeSiblingSubmenus();
-            this.submenuContext.show();
+            this.submenuContext.show('first', 'none', event);
+            this.focusFirstSubmenuItem();
         }
     }
     onPointerMove(event) {
-        if (event.pointerType !== 'mouse' || this.disabled() || !this.openOnHover())
+        if (event.pointerType !== 'mouse' || this.effectiveDisabled() || !this.openOnHover())
             return;
         this.lastPointer = { x: event.clientX, y: event.clientY };
         this.clearSiblingHighlights();
-        if (this.submenuContext.highlightItemOnHover() && document.activeElement !== this.elementRef.nativeElement) {
-            this.elementRef.nativeElement.focus({ preventScroll: true });
+        const el = this.elementRef.nativeElement;
+        if (this.submenuContext.highlightItemOnHover() && el.ownerDocument.activeElement !== el) {
+            el.focus({ preventScroll: true });
         }
         if (!this.submenuContext.isOpen()) {
             clearTimeout(this.openTimer);
             this.closeSiblingSubmenus();
             this.openTimer = setTimeout(() => {
                 this.openedByHover = true;
-                this.submenuContext.show(false);
+                this.submenuContext.show(false, 'trigger-hover');
             }, this.delay() ?? 100);
         }
     }
@@ -1703,31 +2109,66 @@ class RdxMenuSubTrigger {
             trigger.dispatchEvent(new CustomEvent('rdx-menu-subtrigger-clear-highlight'));
         });
     }
+    focusFirstSubmenuItem(attempt = 0) {
+        const maxAttempts = 10;
+        const ownerDocument = this.elementRef.nativeElement.ownerDocument;
+        const run = () => {
+            if (!this.submenuContext.isOpen()) {
+                return;
+            }
+            const popup = this.submenuContext.popupElement();
+            if (!popup) {
+                if (attempt < maxAttempts) {
+                    this.focusFirstSubmenuItem(attempt + 1);
+                }
+                return;
+            }
+            const items = getFocusableMenuItems(popup);
+            if (items.length === 0) {
+                if (attempt < maxAttempts) {
+                    this.focusFirstSubmenuItem(attempt + 1);
+                }
+                return;
+            }
+            const firstItem = items[0];
+            if (ownerDocument.activeElement !== firstItem) {
+                firstItem?.focus({ preventScroll: true });
+            }
+        };
+        if (this.isBrowser) {
+            requestAnimationFrame(run);
+        }
+        else {
+            setTimeout(run);
+        }
+    }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.disabled": "nativeButtonState() && effectiveDisabled() ? \"\" : undefined", "attr.data-state": "submenuContext.isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuSubTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuSubTrigger]',
                     exportAs: 'rdxMenuSubTrigger',
-                    hostDirectives: [RdxPopperAnchor, RdxDismissableLayerBranch],
+                    hostDirectives: [RdxPopperAnchor],
                     host: {
                         '[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.aria-disabled]': 'effectiveDisabled() ? true : undefined',
+                        '[attr.disabled]': 'nativeButtonState() && effectiveDisabled() ? "" : undefined',
                         '[attr.data-state]': 'submenuContext.isOpen() ? "open" : "closed"',
                         '[attr.data-popup-open]': 'submenuContext.isOpen() ? "" : undefined',
                         '[attr.data-highlighted]': 'highlighted() ? "" : undefined',
-                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : undefined',
                         '[attr.data-label]': 'label() ?? undefined',
                         '(focus)': 'onFocus()',
                         '(blur)': 'onBlur()',
-                        '(click)': 'onClick()',
+                        '(click)': 'onClick($event)',
+                        '(keydown.enter)': 'onEnter($event)',
+                        '(keydown.arrowleft)': 'onArrowLeft($event)',
                         '(keydown.arrowright)': 'onArrowRight($event)',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave()',
@@ -1745,7 +2186,23 @@ class RdxMenuTrigger {
         this.rootContext = injectRdxMenuRootContext();
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
-        this.dismissableLayersContext = inject(RdxDismissableLayersContextToken);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.lastPointer = null;
+        this.openedByHover = false;
+        this.ignoreNextClick = null;
+        this.handleDocumentMouseUp = (event) => {
+            this.allowMouseUpTriggerTimer = undefined;
+            this.rootContext.setAllowMouseUpTrigger(false);
+            const trigger = this.elementRef.nativeElement;
+            const target = event.target;
+            const popup = this.rootContext.popupElement();
+            if (target && (trigger.contains(target) || popup?.contains(target))) {
+                return;
+            }
+            if (this.rootContext.isOpen()) {
+                this.rootContext.close('cancel-open', event);
+            }
+        };
         /** 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. */
@@ -1753,7 +2210,7 @@ class RdxMenuTrigger {
         /** 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 });
+        this.delay = input(100, { ...(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 */ []));
@@ -1763,33 +2220,97 @@ class RdxMenuTrigger {
             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()) {
+            const open = this.rootContext.isOpen();
+            const popup = this.rootContext.popupElement();
+            if (!open) {
+                this.openedByHover = false;
+                this.lastPointer = null;
                 return;
             }
-            const el = this.elementRef.nativeElement;
-            this.dismissableLayersContext.branches.update((branches) => [...branches, el]);
+            if (!popup || !this.openedByHover || !this.lastPointer || !this.isBrowser) {
+                return;
+            }
+            const trigger = this.elementRef.nativeElement;
+            const ownerDocument = trigger.ownerDocument;
+            let removeTunnel = applyPointerTunnel(ownerDocument.body, trigger, popup);
+            const { handler, dispose } = createSafePolygonHandler({
+                reference: trigger,
+                floating: popup,
+                side: () => popup.getAttribute('data-side') ?? 'bottom',
+                x: this.lastPointer.x,
+                y: this.lastPointer.y,
+                onClose: () => this.scheduleClose(),
+                cancelClose: () => this.clearCloseTimer(),
+                hasOpenChild: () => hasOpenChildSubmenu(trigger, popup),
+                onLanded: () => {
+                    removeTunnel?.();
+                    removeTunnel = undefined;
+                }
+            });
+            ownerDocument.addEventListener('mousemove', handler);
             onCleanup(() => {
-                this.dismissableLayersContext.branches.update((branches) => branches.filter((b) => b !== el));
+                ownerDocument.removeEventListener('mousemove', handler);
+                dispose();
+                removeTunnel?.();
+                this.clearCloseTimer();
             });
         });
+        // (A press/focus on the trigger no longer needs a dismissable-layer branch to avoid
+        // self-dismissal: the trigger is registered in the menu's floating context, so the dismissal
+        // capability already treats it as "inside" — ADR 0015 trigger registry replaces the branch.)
         this.destroyRef.onDestroy(() => {
             this.clearOpenTimer();
             this.clearCloseTimer();
+            this.clearMouseUpGuard();
         });
     }
-    handleClick() {
+    handleMouseDown(event) {
+        if (this.isDisabled() || event.button !== 0) {
+            return;
+        }
+        if (this.rootContext.hasTriggerInteractionHandler()) {
+            return;
+        }
+        if (this.openOnHover() &&
+            this.rootContext.isOpen() &&
+            this.rootContext.lastOpenChangeReason() === 'trigger-hover') {
+            return;
+        }
+        const wasOpen = this.rootContext.isOpen();
+        this.clearMouseUpGuard();
+        this.ignoreNextClick = 'mouse';
+        this.openedByHover = false;
+        this.rootContext.toggle('trigger-press', event);
+        if (!wasOpen && this.rootContext.isOpen()) {
+            this.armMouseUpGuard(event.currentTarget);
+        }
+    }
+    handleClick(event) {
         if (this.isDisabled()) {
             return;
         }
+        const wasOpen = this.rootContext.isOpen();
         if (this.rootContext.handleTriggerInteraction({ type: 'click' })) {
+            if (event.detail === 0 && !wasOpen && this.rootContext.isOpen()) {
+                this.restoreKeyboardPopupFocus();
+            }
+            return;
+        }
+        if (this.ignoreNextClick &&
+            ((this.ignoreNextClick === 'mouse' && event.detail > 0) ||
+                (this.ignoreNextClick === 'keyboard' && event.detail === 0))) {
+            if (this.ignoreNextClick === 'keyboard') {
+                this.restoreKeyboardPopupFocus();
+            }
+            this.ignoreNextClick = null;
             return;
         }
-        this.rootContext.toggle();
+        this.openedByHover = false;
+        this.rootContext.toggle('trigger-press', event);
+        if (event.detail === 0 && !wasOpen && this.rootContext.isOpen()) {
+            this.restoreKeyboardPopupFocus();
+        }
     }
     handleArrowDown(event) {
         if (this.rootContext.handleTriggerInteraction({ type: 'arrowdown', event })) {
@@ -1825,11 +2346,27 @@ class RdxMenuTrigger {
         this.rootContext.handleTriggerInteraction({ type: 'escape', event });
     }
     handleKeyboardToggle(event) {
-        if (this.nativeButtonState()) {
+        const wasOpen = this.rootContext.isOpen();
+        const interactionType = event instanceof KeyboardEvent && event.key === ' ' ? 'space' : 'enter';
+        if (this.nativeButtonState() && !this.rootContext.hasTriggerInteractionHandler()) {
+            return;
+        }
+        if (this.rootContext.handleTriggerInteraction({ type: interactionType, event })) {
+            event.preventDefault();
+            this.ignoreNextClick = this.nativeButtonState() ? 'keyboard' : null;
+            this.openedByHover = false;
+            if (!wasOpen && this.rootContext.isOpen()) {
+                this.restoreKeyboardPopupFocus();
+            }
             return;
         }
         event.preventDefault();
-        this.handleClick();
+        this.ignoreNextClick = this.nativeButtonState() ? 'keyboard' : null;
+        this.openedByHover = false;
+        this.rootContext.toggle('trigger-press', event);
+        if (!wasOpen && this.rootContext.isOpen()) {
+            this.restoreKeyboardPopupFocus();
+        }
     }
     handlePointerEnter(event) {
         if (this.rootContext.handleTriggerInteraction({ type: 'pointerenter', event })) {
@@ -1840,14 +2377,17 @@ class RdxMenuTrigger {
         }
         this.clearCloseTimer();
         this.clearOpenTimer();
-        const delay = this.delay() ?? 0;
+        this.lastPointer = { x: event.clientX, y: event.clientY };
+        const delay = this.delay() ?? 100;
         if (delay <= 0) {
-            this.rootContext.show();
+            this.openedByHover = true;
+            this.rootContext.show('first', 'trigger-hover');
             return;
         }
         this.openTimer = setTimeout(() => {
             this.openTimer = undefined;
-            this.rootContext.show();
+            this.openedByHover = true;
+            this.rootContext.show('first', 'trigger-hover');
         }, delay);
     }
     handlePointerLeave(event) {
@@ -1855,12 +2395,19 @@ class RdxMenuTrigger {
             return;
         }
         this.clearOpenTimer();
+        this.lastPointer = { x: event.clientX, y: event.clientY };
+        if (!this.rootContext.isOpen() || !this.openedByHover) {
+            this.scheduleClose();
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType !== 'touch' && this.openOnHover()) {
+            this.lastPointer = { x: event.clientX, y: event.clientY };
+        }
+    }
+    scheduleClose() {
         this.clearCloseTimer();
         const closeDelay = this.closeDelay() ?? 0;
-        if (closeDelay <= 0) {
-            this.rootContext.close();
-            return;
-        }
         this.closeTimer = setTimeout(() => {
             this.closeTimer = undefined;
             this.rootContext.close();
@@ -1874,8 +2421,50 @@ class RdxMenuTrigger {
         clearTimeout(this.closeTimer);
         this.closeTimer = undefined;
     }
+    armMouseUpGuard(trigger) {
+        this.rootContext.setAllowMouseUpTrigger(false);
+        this.allowMouseUpTriggerTimer = setTimeout(() => {
+            this.allowMouseUpTriggerTimer = undefined;
+            this.rootContext.setAllowMouseUpTrigger(true);
+        }, 200);
+        trigger.ownerDocument.addEventListener('mouseup', this.handleDocumentMouseUp, { once: true });
+    }
+    clearMouseUpGuard() {
+        clearTimeout(this.allowMouseUpTriggerTimer);
+        this.allowMouseUpTriggerTimer = undefined;
+        this.rootContext.setAllowMouseUpTrigger(false);
+        this.elementRef.nativeElement.ownerDocument.removeEventListener('mouseup', this.handleDocumentMouseUp);
+    }
+    restoreKeyboardPopupFocus(attempt = 0) {
+        const maxAttempts = 3;
+        const ownerDocument = this.elementRef.nativeElement.ownerDocument;
+        const run = () => {
+            if (!this.rootContext.isOpen()) {
+                return;
+            }
+            const popup = this.rootContext.popupElement();
+            const activeElement = ownerDocument.activeElement;
+            if (!popup || getFocusableMenuItems(popup).length === 0) {
+                if (attempt < maxAttempts) {
+                    this.restoreKeyboardPopupFocus(attempt + 1);
+                }
+                return;
+            }
+            if (activeElement && popup.contains(activeElement)) {
+                return;
+            }
+            const firstItem = getFocusableMenuItems(popup)[0];
+            (firstItem ?? popup).focus({ preventScroll: true });
+        };
+        if (this.isBrowser) {
+            requestAnimationFrame(run);
+        }
+        else {
+            setTimeout(run);
+        }
+    }
     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 }); }
+    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: { "mousedown": "handleMouseDown($event)", "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave($event)", "keydown.arrowdown": "handleArrowDown($event)", "keydown.arrowup": "handleArrowUp($event)", "keydown.arrowleft": "handleArrowLeft($event)", "keydown.arrowright": "handleArrowRight($event)", "keydown.home": "handleHome($event)", "keydown.end": "handleEnd($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleKeyboardToggle($event)", "keydown.space": "handleKeyboardToggle($event)" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.role": "rootContext.hasTriggerInteractionHandler() ? \"menuitem\" : nativeButtonState() ? undefined : \"button\"", "attr.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", "style.pointer-events": "rootContext.isOpen() && rootContext.modal() ? \"auto\" : undefined" } }, exportAs: ["rdxMenuTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxMenuTrigger, decorators: [{
             type: Directive,
@@ -1894,8 +2483,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
                         '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
                         '[attr.data-popup-open]': 'rootContext.isOpen() ? "" : undefined',
-                        '(click)': 'handleClick()',
+                        '[style.pointer-events]': 'rootContext.isOpen() && rootContext.modal() ? "auto" : undefined',
+                        '(mousedown)': 'handleMouseDown($event)',
+                        '(click)': 'handleClick($event)',
                         '(pointerenter)': 'handlePointerEnter($event)',
+                        '(pointermove)': 'handlePointerMove($event)',
                         '(pointerleave)': 'handlePointerLeave($event)',
                         '(keydown.arrowdown)': 'handleArrowDown($event)',
                         '(keydown.arrowup)': 'handleArrowUp($event)',
@@ -1991,6 +2583,7 @@ const menuImports = [
     RdxMenuTrigger,
     RdxMenuSubTrigger,
     RdxMenuPortal,
+    RdxMenuPortalMisuseGuard,
     RdxMenuPositioner,
     RdxMenuPopup,
     RdxMenuViewport,
@@ -2013,6 +2606,7 @@ class RdxMenuModule {
             RdxMenuTrigger,
             RdxMenuSubTrigger,
             RdxMenuPortal,
+            RdxMenuPortalMisuseGuard,
             RdxMenuPositioner,
             RdxMenuPopup,
             RdxMenuViewport,
@@ -2031,6 +2625,7 @@ class RdxMenuModule {
             RdxMenuTrigger,
             RdxMenuSubTrigger,
             RdxMenuPortal,
+            RdxMenuPortalMisuseGuard,
             RdxMenuPositioner,
             RdxMenuPopup,
             RdxMenuViewport,
@@ -2060,5 +2655,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { RdxMenuArrow, RdxMenuBackdrop, RdxMenuCheckboxItem, RdxMenuCheckboxItemIndicator, RdxMenuGroup, RdxMenuGroupLabel, RdxMenuItem, RdxMenuLinkItem, RdxMenuModule, RdxMenuPopup, RdxMenuPortal, RdxMenuPortalMisuseGuard, RdxMenuPositioner, RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuRadioItemIndicator, RdxMenuRoot, RdxMenuSeparator, RdxMenuSubTrigger, RdxMenuTrigger, RdxMenuViewport, getCheckedState, injectRdxMenuCheckboxItemContext, injectRdxMenuGroupContext, injectRdxMenuRadioGroupContext, injectRdxMenuRadioItemContext, injectRdxMenuRootContext, isIndeterminate, provideRdxMenuCheckboxItemContext, provideRdxMenuGroupContext, provideRdxMenuRadioGroupContext, provideRdxMenuRadioItemContext, provideRdxMenuRootContext };
 //# sourceMappingURL=radix-ng-primitives-menu.mjs.map