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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, model, input, booleanAttribute, output, signal, computed, effect, untracked, Directive, ElementRef, DestroyRef, numberAttribute, afterNextRender, NgModule } 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 * 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';
@@ -10,8 +10,9 @@ import * as i3 from '@radix-ng/primitives/focus-scope';
 import { RdxFocusScope, provideRdxFocusScopeConfig } from '@radix-ng/primitives/focus-scope';
 import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortal } from '@radix-ng/primitives/portal';
+import { isPlatformBrowser } from '@angular/common';
 
-const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext');
+const [injectRdxMenuRootContext, provideRdxMenuRootContext] = createContext('RdxMenuRootContext', 'components/menu');
 function buildContext(instance) {
     return {
         isOpen: instance.open,
@@ -25,12 +26,14 @@ function buildContext(instance) {
         isSubmenu: instance.isSubmenu.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),
         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),
@@ -71,6 +74,7 @@ class RdxMenuRoot {
         /** Emits when the open/close CSS transition or animation finishes. */
         this.onOpenChangeComplete = output();
         this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.popupElement = signal(undefined, ...(ngDevMode ? [{ debugName: "popupElement" }] : /* istanbul ignore next */ []));
         this.transitionStatus = this.transition.status;
         /** Whether the popup grabs focus when it opens. Set false for menubar hover-switching. */
         this.autoFocus = signal('first', ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
@@ -131,6 +135,14 @@ class RdxMenuRoot {
             }
         };
     }
+    registerPopup(el) {
+        this.popupElement.set(el);
+        return () => {
+            if (this.popupElement() === el) {
+                this.popupElement.set(undefined);
+            }
+        };
+    }
     registerTransitionElement(element) {
         return this.transition.registerElement(element);
     }
@@ -242,7 +254,7 @@ function getCheckedState(checked) {
     return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
 }
 
-const [injectRdxMenuCheckboxItemContext, provideRdxMenuCheckboxItemContext] = createContext('RdxMenuCheckboxItemContext');
+const [injectRdxMenuCheckboxItemContext, provideRdxMenuCheckboxItemContext] = createContext('RdxMenuCheckboxItemContext', 'components/menu');
 const checkboxItemContextFactory = () => {
     const instance = inject(RdxMenuCheckboxItem);
     return {
@@ -637,8 +649,10 @@ class RdxMenuPopup {
          */
         this.closeAutoFocus = outputFromObservable(outputToObservable(this.focusScope.unmountAutoFocus));
         const unregister = this.rootContext.registerTransitionElement(this.elementRef.nativeElement);
+        const unregisterPopup = this.rootContext.registerPopup(this.elementRef.nativeElement);
         inject(DestroyRef).onDestroy(() => {
             unregister();
+            unregisterPopup();
             clearTimeout(this.searchTimer);
         });
         effect((onCleanup) => {
@@ -979,7 +993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
 
-const [injectRdxMenuRadioGroupContext, provideRdxMenuRadioGroupContext] = createContext('RdxMenuRadioGroupContext');
+const [injectRdxMenuRadioGroupContext, provideRdxMenuRadioGroupContext] = createContext('RdxMenuRadioGroupContext', 'components/menu');
 const radioGroupContextFactory = () => {
     const instance = inject(RdxMenuRadioGroup);
     return {
@@ -1020,7 +1034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }] } });
 
-const [injectRdxMenuRadioItemContext, provideRdxMenuRadioItemContext] = createContext('RdxMenuRadioItemContext');
+const [injectRdxMenuRadioItemContext, provideRdxMenuRadioItemContext] = createContext('RdxMenuRadioItemContext', 'components/menu');
 const radioItemContextFactory = () => {
     const instance = inject(RdxMenuRadioItem);
     return {
@@ -1174,6 +1188,336 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * Submenu "safe polygon" — a faithful port of Floating UI's `safePolygon` algorithm
+ * (https://floating-ui.com/docs/useHover#safepolygon), adapted to this library.
+ *
+ * While a submenu is open by hover, the parent submenu owns the decision to close itself: a
+ * document-level `mousemove` handler keeps it open as long as the cursor is heading toward the
+ * popup inside a safe quadrilateral (built from the cursor's exit point and the popup rect), and
+ * closes it once the cursor leaves that area. Combined with the pointer-events "tunnel" below
+ * (`applyPointerTunnel`), siblings cannot steal the open submenu during a diagonal traversal.
+ *
+ * Differences from the upstream implementation:
+ * - `elements.domReference` / `elements.floating` → `reference` / `floating` (plain elements).
+ * - `placement.split('-')[0]` → the `side` option (read live from the popup's `data-side`).
+ * - the Floating UI tree (`tree` / `nodeId`) → the `hasOpenChild` callback, backed by the
+ *   module-level open-submenu registry.
+ *
+ * This deliberately does NOT reuse the core `useGraceArea` composable (tooltip / navigation-menu /
+ * popover): that one is a simpler convex-hull grace area with no velocity gating, trough handling, or
+ * pointer-events tunnel — none of which it needs, but all of which the submenu does to match Base UI
+ * and to stop sibling triggers from stealing the open submenu mid-traversal.
+ */
+const CURSOR_SPEED_THRESHOLD = 0.1;
+const CURSOR_SPEED_THRESHOLD_SQUARED = CURSOR_SPEED_THRESHOLD * CURSOR_SPEED_THRESHOLD;
+const POLYGON_BUFFER = 0.5;
+/** Re-check delay when the cursor is inside the polygon but has not landed on the popup yet. */
+const REST_CHECK_MS = 40;
+function hasIntersectingEdge(pointX, pointY, xi, yi, xj, yj) {
+    return yi >= pointY !== yj >= pointY && pointX <= ((xj - xi) * (pointY - yi)) / (yj - yi) + xi;
+}
+function isPointInQuadrilateral(pointX, pointY, x1, y1, x2, y2, x3, y3, x4, y4) {
+    let inside = false;
+    if (hasIntersectingEdge(pointX, pointY, x1, y1, x2, y2))
+        inside = !inside;
+    if (hasIntersectingEdge(pointX, pointY, x2, y2, x3, y3))
+        inside = !inside;
+    if (hasIntersectingEdge(pointX, pointY, x3, y3, x4, y4))
+        inside = !inside;
+    if (hasIntersectingEdge(pointX, pointY, x4, y4, x1, y1))
+        inside = !inside;
+    return inside;
+}
+function isInsideRect(pointX, pointY, rect) {
+    return pointX >= rect.left && pointX <= rect.right && pointY >= rect.top && pointY <= rect.bottom;
+}
+function isInsideAxisAlignedRect(pointX, pointY, x1, y1, x2, y2) {
+    const minX = Math.min(x1, x2);
+    const maxX = Math.max(x1, x2);
+    const minY = Math.min(y1, y2);
+    const maxY = Math.max(y1, y2);
+    return pointX >= minX && pointX <= maxX && pointY >= minY && pointY <= maxY;
+}
+function getTarget(event) {
+    const path = event.composedPath?.();
+    return path?.[0] ?? event.target;
+}
+/**
+ * Builds the `mousemove` handler that decides whether the open submenu should stay open, plus a
+ * `dispose()` that clears its internal rest-check timer (so a pending close can't fire after the
+ * listener is removed).
+ */
+function createSafePolygonHandler(options) {
+    const { reference, floating, side: sideOf, x, y, onClose, cancelClose, hasOpenChild, onLanded } = options;
+    let hasLanded = false;
+    let lastX = null;
+    let lastY = null;
+    let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0;
+    let restTimer;
+    function isCursorMovingSlowly(nextX, nextY) {
+        const currentTime = typeof performance !== 'undefined' ? performance.now() : 0;
+        const elapsedTime = currentTime - lastCursorTime;
+        if (lastX === null || lastY === null || elapsedTime === 0) {
+            lastX = nextX;
+            lastY = nextY;
+            lastCursorTime = currentTime;
+            return false;
+        }
+        const deltaX = nextX - lastX;
+        const deltaY = nextY - lastY;
+        const distanceSquared = deltaX * deltaX + deltaY * deltaY;
+        const thresholdSquared = elapsedTime * elapsedTime * CURSOR_SPEED_THRESHOLD_SQUARED;
+        lastX = nextX;
+        lastY = nextY;
+        lastCursorTime = currentTime;
+        return distanceSquared < thresholdSquared;
+    }
+    function closeIfNoOpenChild() {
+        if (!hasOpenChild()) {
+            onClose();
+        }
+    }
+    function onMouseMove(event) {
+        cancelClose();
+        clearTimeout(restTimer);
+        const { clientX, clientY } = event;
+        const target = getTarget(event);
+        const isOverFloatingEl = !!target && floating.contains(target);
+        const isOverReferenceEl = !!target && reference.contains(target);
+        // This handler is bound only to document `mousemove` (never `mouseleave`), so Floating UI's
+        // leave-specific paths — the overlapping-element `relatedTarget` guard and the `!isLeave`
+        // guards — are omitted: they could never run here.
+        if (isOverFloatingEl) {
+            // "Landed" tracks reaching the popup only — not the trigger. Setting it on the trigger
+            // would close as soon as the cursor enters the gap (no leave event resets it).
+            if (!hasLanded) {
+                hasLanded = true;
+                onLanded?.();
+            }
+            return;
+        }
+        if (isOverReferenceEl) {
+            // Over the trigger — stay open; the polygon/trough logic resumes once in the gap.
+            return;
+        }
+        // If any nested child submenu is open, never close the parent.
+        if (hasOpenChild())
+            return;
+        // Read the placed side live — it may have been unresolved at open time, or flipped since.
+        const side = sideOf();
+        const refRect = reference.getBoundingClientRect();
+        const rect = floating.getBoundingClientRect();
+        const cursorLeaveFromRight = x > rect.right - rect.width / 2;
+        const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
+        const isFloatingWider = rect.width > refRect.width;
+        const isFloatingTaller = rect.height > refRect.height;
+        const left = (isFloatingWider ? refRect : rect).left;
+        const right = (isFloatingWider ? refRect : rect).right;
+        const top = (isFloatingTaller ? refRect : rect).top;
+        const bottom = (isFloatingTaller ? refRect : rect).bottom;
+        // Leaving from the opposite side: the buffer logic would otherwise keep it open — close.
+        if ((side === 'top' && y >= refRect.bottom - 1) ||
+            (side === 'bottom' && y <= refRect.top + 1) ||
+            (side === 'left' && x >= refRect.right - 1) ||
+            (side === 'right' && x <= refRect.left + 1)) {
+            closeIfNoOpenChild();
+            return;
+        }
+        // Stay open while the cursor is within the rectangular trough between the two elements.
+        let isInsideTroughRect = false;
+        switch (side) {
+            case 'top':
+                isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, left, refRect.top + 1, right, rect.bottom - 1);
+                break;
+            case 'bottom':
+                isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, left, rect.top + 1, right, refRect.bottom - 1);
+                break;
+            case 'left':
+                isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, rect.right - 1, bottom, refRect.left + 1, top);
+                break;
+            case 'right':
+                isInsideTroughRect = isInsideAxisAlignedRect(clientX, clientY, refRect.right - 1, bottom, rect.left + 1, top);
+                break;
+        }
+        if (isInsideTroughRect)
+            return;
+        if (hasLanded && !isInsideRect(clientX, clientY, refRect)) {
+            closeIfNoOpenChild();
+            return;
+        }
+        if (isCursorMovingSlowly(clientX, clientY)) {
+            closeIfNoOpenChild();
+            return;
+        }
+        let isInsidePolygon = false;
+        switch (side) {
+            case 'top': {
+                const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+                const cursorPointOneX = isFloatingWider
+                    ? x + cursorXOffset
+                    : cursorLeaveFromRight
+                        ? x + cursorXOffset
+                        : x - cursorXOffset;
+                const cursorPointTwoX = isFloatingWider
+                    ? x - cursorXOffset
+                    : cursorLeaveFromRight
+                        ? x + cursorXOffset
+                        : x - cursorXOffset;
+                const cursorPointY = y + POLYGON_BUFFER + 1;
+                const commonYLeft = cursorLeaveFromRight
+                    ? rect.bottom - POLYGON_BUFFER
+                    : isFloatingWider
+                        ? rect.bottom - POLYGON_BUFFER
+                        : rect.top;
+                const commonYRight = cursorLeaveFromRight
+                    ? isFloatingWider
+                        ? rect.bottom - POLYGON_BUFFER
+                        : rect.top
+                    : rect.bottom - POLYGON_BUFFER;
+                isInsidePolygon = isPointInQuadrilateral(clientX, clientY, cursorPointOneX, cursorPointY, cursorPointTwoX, cursorPointY, rect.left, commonYLeft, rect.right, commonYRight);
+                break;
+            }
+            case 'bottom': {
+                const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+                const cursorPointOneX = isFloatingWider
+                    ? x + cursorXOffset
+                    : cursorLeaveFromRight
+                        ? x + cursorXOffset
+                        : x - cursorXOffset;
+                const cursorPointTwoX = isFloatingWider
+                    ? x - cursorXOffset
+                    : cursorLeaveFromRight
+                        ? x + cursorXOffset
+                        : x - cursorXOffset;
+                const cursorPointY = y - POLYGON_BUFFER;
+                const commonYLeft = cursorLeaveFromRight
+                    ? rect.top + POLYGON_BUFFER
+                    : isFloatingWider
+                        ? rect.top + POLYGON_BUFFER
+                        : rect.bottom;
+                const commonYRight = cursorLeaveFromRight
+                    ? isFloatingWider
+                        ? rect.top + POLYGON_BUFFER
+                        : rect.bottom
+                    : rect.top + POLYGON_BUFFER;
+                isInsidePolygon = isPointInQuadrilateral(clientX, clientY, cursorPointOneX, cursorPointY, cursorPointTwoX, cursorPointY, rect.left, commonYLeft, rect.right, commonYRight);
+                break;
+            }
+            case 'left': {
+                const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+                const cursorPointOneY = isFloatingTaller
+                    ? y + cursorYOffset
+                    : cursorLeaveFromBottom
+                        ? y + cursorYOffset
+                        : y - cursorYOffset;
+                const cursorPointTwoY = isFloatingTaller
+                    ? y - cursorYOffset
+                    : cursorLeaveFromBottom
+                        ? y + cursorYOffset
+                        : y - cursorYOffset;
+                const cursorPointX = x + POLYGON_BUFFER + 1;
+                const commonXTop = cursorLeaveFromBottom
+                    ? rect.right - POLYGON_BUFFER
+                    : isFloatingTaller
+                        ? rect.right - POLYGON_BUFFER
+                        : rect.left;
+                const commonXBottom = cursorLeaveFromBottom
+                    ? isFloatingTaller
+                        ? rect.right - POLYGON_BUFFER
+                        : rect.left
+                    : rect.right - POLYGON_BUFFER;
+                isInsidePolygon = isPointInQuadrilateral(clientX, clientY, commonXTop, rect.top, commonXBottom, rect.bottom, cursorPointX, cursorPointOneY, cursorPointX, cursorPointTwoY);
+                break;
+            }
+            case 'right': {
+                const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
+                const cursorPointOneY = isFloatingTaller
+                    ? y + cursorYOffset
+                    : cursorLeaveFromBottom
+                        ? y + cursorYOffset
+                        : y - cursorYOffset;
+                const cursorPointTwoY = isFloatingTaller
+                    ? y - cursorYOffset
+                    : cursorLeaveFromBottom
+                        ? y + cursorYOffset
+                        : y - cursorYOffset;
+                const cursorPointX = x - POLYGON_BUFFER;
+                const commonXTop = cursorLeaveFromBottom
+                    ? rect.left + POLYGON_BUFFER
+                    : isFloatingTaller
+                        ? rect.left + POLYGON_BUFFER
+                        : rect.right;
+                const commonXBottom = cursorLeaveFromBottom
+                    ? isFloatingTaller
+                        ? rect.left + POLYGON_BUFFER
+                        : rect.right
+                    : rect.left + POLYGON_BUFFER;
+                isInsidePolygon = isPointInQuadrilateral(clientX, clientY, cursorPointX, cursorPointOneY, cursorPointX, cursorPointTwoY, commonXTop, rect.top, commonXBottom, rect.bottom);
+                break;
+            }
+        }
+        if (!isInsidePolygon) {
+            closeIfNoOpenChild();
+        }
+        else if (!hasLanded) {
+            // Inside the polygon but not landed: if the cursor halts here (no further moves),
+            // close shortly after so a stationary cursor in the gap doesn't keep it open.
+            restTimer = setTimeout(closeIfNoOpenChild, REST_CHECK_MS);
+        }
+    }
+    return { handler: onMouseMove, dispose: () => clearTimeout(restTimer) };
+}
+/**
+ * Pointer-events "tunnel" used while a submenu opened by hover is being traversed. Disables pointer
+ * events on `scope` (the parent popup or `document.body`) while keeping the `reference` and
+ * `floating` interactive, so sibling items cannot react until the cursor lands or the submenu
+ * closes. Returns a cleanup that restores the exact previous inline values.
+ */
+function applyPointerTunnel(scope, reference, floating) {
+    const saved = [
+        [scope, scope.style.pointerEvents],
+        [reference, reference.style.pointerEvents],
+        [floating, floating.style.pointerEvents]
+    ];
+    scope.style.pointerEvents = 'none';
+    reference.style.pointerEvents = 'auto';
+    floating.style.pointerEvents = 'auto';
+    let cleaned = false;
+    return () => {
+        if (cleaned)
+            return;
+        cleaned = true;
+        saved.forEach(([el, prev]) => (el.style.pointerEvents = prev));
+    };
+}
+/** Registry of submenus currently open, keyed by their trigger element. */
+const openSubmenus = new Map();
+/** Marks `trigger`'s submenu (with popup `popup`) as open. Returns a cleanup to unmark it. */
+function registerOpenSubmenu(trigger, popup) {
+    openSubmenus.set(trigger, popup);
+    return () => {
+        if (openSubmenus.get(trigger) === popup) {
+            openSubmenus.delete(trigger);
+        }
+    };
+}
+/**
+ * Whether any *other* open submenu is a descendant of `floating` (a nested child is open).
+ *
+ * Portal-safe: `RdxMenuPortal` only teleports a submenu's positioner/popup template, never the
+ * sub-trigger (which stays in its parent popup), and a portaled popup carries its descendant
+ * triggers with it — so `floating.contains(childTrigger)` holds whether or not portals are used.
+ */
+function hasOpenChildSubmenu(reference, floating) {
+    for (const trigger of openSubmenus.keys()) {
+        if (trigger !== reference && floating.contains(trigger)) {
+            return true;
+        }
+    }
+    return false;
+}
+
 const numberOrUndefined$1 = (value) => (value == null ? undefined : numberAttribute(value));
 const submenuRootsByTrigger = new WeakMap();
 /**
@@ -1190,7 +1534,12 @@ class RdxMenuSubTrigger {
         this.submenuRoot = inject(RdxMenuRoot);
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        /** Cursor position from the last pointer move over the trigger (safe-polygon apex). */
+        this.lastPointer = null;
+        /** Whether the current open was initiated by hover (vs keyboard / click). */
+        this.openedByHover = 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>`. */
@@ -1216,10 +1565,65 @@ class RdxMenuSubTrigger {
                 submenuRootsByTrigger.delete(el);
             });
         });
+        // While this submenu is open by hover, it owns the decision to close itself: a document
+        // `mousemove` handler keeps it open while the cursor traverses the safe polygon toward the
+        // popup, and a pointer-events tunnel stops siblings from stealing it mid-traversal.
+        effect((onCleanup) => {
+            const open = this.submenuContext.isOpen();
+            const popup = this.submenuContext.popupElement();
+            // Once closed, forget how this open started so the next (possibly keyboard / programmatic)
+            // open doesn't re-arm the hover tunnel from a stale flag.
+            if (!open) {
+                this.openedByHover = false;
+                this.lastPointer = null;
+                return;
+            }
+            if (!popup || !this.openedByHover || !this.lastPointer || !this.isBrowser) {
+                return;
+            }
+            const reference = this.elementRef.nativeElement;
+            const scope = reference.closest('[rdxMenuPopup]') ?? document.body;
+            const unregisterOpen = registerOpenSubmenu(reference, popup);
+            let removeTunnel = applyPointerTunnel(scope, reference, popup);
+            const { handler, dispose } = createSafePolygonHandler({
+                reference,
+                floating: popup,
+                // Live getter: `data-side` may be unresolved at open time and can flip on collision.
+                side: () => popup.getAttribute('data-side') ?? 'right',
+                x: this.lastPointer.x,
+                y: this.lastPointer.y,
+                onClose: () => this.scheduleClose(),
+                cancelClose: () => clearTimeout(this.closeTimer),
+                hasOpenChild: () => hasOpenChildSubmenu(reference, popup),
+                onLanded: () => {
+                    removeTunnel?.();
+                    removeTunnel = undefined;
+                }
+            });
+            document.addEventListener('mousemove', handler);
+            onCleanup(() => {
+                document.removeEventListener('mousemove', handler);
+                dispose();
+                removeTunnel?.();
+                unregisterOpen();
+                clearTimeout(this.closeTimer);
+            });
+        });
         this.destroyRef.onDestroy(() => {
             clearTimeout(this.openTimer);
+            clearTimeout(this.closeTimer);
         });
     }
+    scheduleClose() {
+        clearTimeout(this.closeTimer);
+        const delay = this.closeDelay() ?? 0;
+        if (delay <= 0) {
+            this.submenuContext.close();
+        }
+        else {
+            this.closeTimer = setTimeout(() => this.submenuContext.close(), delay);
+        }
+    }
     onFocus() {
         if (!this.disabled()) {
             this.clearSiblingHighlights();
@@ -1232,6 +1636,7 @@ class RdxMenuSubTrigger {
     onClick() {
         if (this.disabled())
             return;
+        this.openedByHover = false;
         this.clearSiblingHighlights();
         if (!this.submenuContext.isOpen()) {
             this.closeSiblingSubmenus();
@@ -1243,6 +1648,7 @@ class RdxMenuSubTrigger {
             return;
         event.preventDefault();
         event.stopPropagation();
+        this.openedByHover = false;
         this.clearSiblingHighlights();
         if (!this.submenuContext.isOpen()) {
             this.closeSiblingSubmenus();
@@ -1252,6 +1658,7 @@ class RdxMenuSubTrigger {
     onPointerMove(event) {
         if (event.pointerType !== 'mouse' || this.disabled() || !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 });
@@ -1260,6 +1667,7 @@ class RdxMenuSubTrigger {
             clearTimeout(this.openTimer);
             this.closeSiblingSubmenus();
             this.openTimer = setTimeout(() => {
+                this.openedByHover = true;
                 this.submenuContext.show(false);
             }, this.delay() ?? 100);
         }