@radix-ng/primitives 1.0.9 → 1.1.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, 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, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, legacyPopperVars, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, DROPDOWN_COLLISION_AVOIDANCE, 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';
@@ -109,6 +109,7 @@ function buildContext(instance) {
         hasTriggerInteractionHandler: instance.hasTriggerInteractionHandler.asReadonly(),
         trigger: instance.trigger.asReadonly(),
         popupElement: instance.popupElement.asReadonly(),
+        popupPhysicalSide: instance.popupPhysicalSide,
         beforeContentFocusGuard: instance.beforeContentFocusGuard.asReadonly(),
         transitionStatus: instance.transitionStatus,
         close: (reason, event) => instance.close(reason, event),
@@ -118,7 +119,7 @@ function buildContext(instance) {
         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),
+        registerPopup: (el, physicalSide) => instance.registerPopup(el, physicalSide),
         setBeforeContentFocusGuard: (element) => instance.setBeforeContentFocusGuard(element),
         registerTransitionElement: (el) => instance.registerTransitionElement(el),
         registerPopupArrowNavigationHandler: (handler) => instance.registerPopupArrowNavigationHandler(handler),
@@ -185,6 +186,11 @@ class RdxMenuRoot {
         ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
         this.popupElement = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupElement" }] : /* istanbul ignore next */ []));
+        this.popupPhysicalSideSource = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupPhysicalSideSource" }] : /* istanbul ignore next */ []));
+        /** Physical placed side read through the popup's own signal (undefined until the popup is placed). */
+        this.popupPhysicalSide = computed(() => this.popupPhysicalSideSource()?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupPhysicalSide" }] : /* istanbul ignore next */ []));
         this.beforeContentFocusGuard = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "beforeContentFocusGuard" }] : /* istanbul ignore next */ []));
         this.transitionStatus = this.transition.status;
@@ -388,11 +394,13 @@ class RdxMenuRoot {
             }
         };
     }
-    registerPopup(el) {
+    registerPopup(el, physicalSide) {
         this.popupElement.set(el);
+        this.popupPhysicalSideSource.set(physicalSide);
         return () => {
             if (this.popupElement() === el) {
                 this.popupElement.set(undefined);
+                this.popupPhysicalSideSource.set(undefined);
             }
         };
     }
@@ -1122,7 +1130,9 @@ class RdxMenuPopup {
         // 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);
+        // Register the wrapper's PHYSICAL side (not the popup's logical `data-side` echo) so safe-polygon
+        // geometry stays correct when opened with a logical `side="inline-start"` / `inline-end`.
+        const unregisterPopup = this.rootContext.registerPopup(this.elementRef.nativeElement, this.wrapper?.physicalPlacedSide);
         inject(DestroyRef).onDestroy(() => {
             unregister();
             unregisterPopup();
@@ -1176,6 +1186,43 @@ class RdxMenuPopup {
                 this.rootContext.close('focus-out', event);
             }
         });
+        // keepMounted return-focus: the composed focus scope returns focus in its *unmount* cleanup,
+        // which never runs while a `keepMounted` popup stays in the DOM (so Escape/close would strand
+        // focus on the now-hidden popup — a keyboard trap). Mirror it on close: when the menu settles
+        // closed but the popup is still mounted, apply the focus manager's resolved return target
+        // (honoring `finalFocus`), falling back to the trigger. The `isConnected` guard scopes this to
+        // the keep-mounted case — a normally-unmounting popup is gone by the deferred frame, its scope
+        // having already returned focus.
+        const settledClosed = computed(() => !this.rootContext.isOpen() && this.rootContext.transitionStatus() !== 'ending', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "settledClosed" }] : /* istanbul ignore next */ []));
+        let wasSettledClosed = settledClosed();
+        effect(() => {
+            const closed = settledClosed();
+            const justSettled = closed && !wasSettledClosed;
+            wasSettledClosed = closed;
+            if (!justSettled) {
+                return;
+            }
+            const popup = this.elementRef.nativeElement;
+            const view = popup.ownerDocument.defaultView ?? globalThis;
+            view.requestAnimationFrame(() => {
+                if (!popup.isConnected) {
+                    return;
+                }
+                // Return focus only if it was inside the popup, or the browser dumped it to <body>
+                // because the positioner became `hidden`. If the user moved focus to another real
+                // element, leave it.
+                const active = popup.ownerDocument.activeElement;
+                if (active !== popup.ownerDocument.body && !popup.contains(active)) {
+                    return;
+                }
+                const target = this.focusManager.resolveReturnTarget();
+                if (target === false) {
+                    return; // finalFocus={false} suppresses return
+                }
+                (target ?? this.rootContext.trigger())?.focus({ preventScroll: true });
+            });
+        });
     }
     handleCloseParent(event) {
         event.stopPropagation();
@@ -1387,14 +1434,21 @@ class RdxMenuPopup {
                     closeInteractionType: () => rootContext.closeInteractionType()
                 };
             })
-        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager }, { directive: i1$1.RdxCompositeList }], ngImport: i0 }); }
+        ], exportAs: ["rdxMenuPopup"], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxFloatingNodeRegistration }, { directive: i3.RdxFloatingFocusManager, inputs: ["returnFocus", "finalFocus"] }, { directive: i1$1.RdxCompositeList }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPopup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxMenuPopup]',
                     exportAs: 'rdxMenuPopup',
-                    hostDirectives: [RdxPopperContent, RdxFloatingNodeRegistration, RdxFloatingFocusManager, RdxCompositeList],
+                    hostDirectives: [
+                        RdxPopperContent,
+                        RdxFloatingNodeRegistration,
+                        // `finalFocus` maps to the focus manager's `returnFocus`, overriding the trigger-return policy
+                        // below when set (Base UI `Menu.Popup finalFocus`); same wiring as Popover/Select.
+                        { directive: RdxFloatingFocusManager, inputs: ['returnFocus: finalFocus'] },
+                        RdxCompositeList
+                    ],
                     providers: [
                         provideFloatingFocusManagerConfig(() => {
                             const rootContext = injectRdxMenuRootContext();
@@ -1469,18 +1523,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * 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.
+ * custom container, a backdrop alongside the positioner (multi-root), or `[keepMounted]`, use the
+ * explicit form.
+ *
+ * Set `[keepMounted]="true"` to keep the popup mounted while the menu is closed (the positioner's
+ * `data-closed` state hides it) — inherited from {@link RdxPortalPresence}.
  */
 class RdxMenuPortal {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPortal, isStandalone: true, selector: "ng-template[rdxMenuPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))], exportAs: ["rdxMenuPortal"], hostDirectives: [{ directive: i1$2.RdxPortalPresence, inputs: ["container", "container", "keepMounted", "keepMounted"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPortal, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[rdxMenuPortal]',
                     exportAs: 'rdxMenuPortal',
-                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
+                    hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container', 'keepMounted'] }],
                     providers: [provideRdxPresenceContext(() => ({ present: injectRdxMenuRootContext().present }))]
                 }]
         }] });
@@ -1531,6 +1589,16 @@ function setupMenuInternalBackdrop(positioner, rootContext, injector) {
         isOpen: () => rootContext.isOpen(),
         cutout: () => cutoutElement(rootContext),
         shouldRender: () => {
+            // The backdrop must exist only while the menu is present (open or running its exit
+            // animation), never while idle-closed. This matters for a `keepMounted` menu: its
+            // positioner stays in the DOM while closed, so without this gate the shared backdrop
+            // helper — which creates the element on `shouldRender()` alone — would build it at page
+            // load and capture a stale cutout rect (the trigger's off-screen position), then never
+            // refresh it. On open the stale backdrop would cover the trigger, and the trigger
+            // `mouseup` would land on the backdrop and immediately close the menu (`cancel-open`).
+            if (!rootContext.present()) {
+                return false;
+            }
             const type = rootContext.parentType();
             if (type === 'menu' || !rootContext.modal()) {
                 return false; // submenus and non-modal menus get no backdrop
@@ -1556,6 +1624,17 @@ class RdxMenuPositioner extends RdxPopperContentWrapper {
         super();
         this.rootContext = injectRdxMenuRootContext();
         this.legacyVars = legacyPopperVars('menu');
+        /**
+         * Whether the popup is shown: open, or still running its closing transition. Drives both the native
+         * `hidden` (finding: a closed keep-mounted popup must hide itself) and — via `positioningActive` —
+         * whether the inherited wrapper keeps tracking the anchor, so a closed keep-mounted positioner stops
+         * its `autoUpdate` `requestAnimationFrame` loop (finding: endless rAF while closed).
+         */
+        this.visible = computed(() => this.rootContext.isOpen() || this.rootContext.transitionStatus() === 'ending', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        // Gate the inherited positioning on visibility (see `visible`) — pauses `autoUpdate` while the
+        // menu is closed but kept mounted.
+        this.positioningActive = this.visible;
         const injector = inject(Injector);
         const host = inject(ElementRef).nativeElement;
         // After the structural portal has relocated this positioner into the portal container, set up the
@@ -1563,9 +1642,16 @@ class RdxMenuPositioner extends RdxPopperContentWrapper {
         afterNextRender(() => setupMenuInternalBackdrop(host, this.rootContext, injector));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPositioner, isStandalone: true, selector: "[rdxMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "style": "legacyVars" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: RdxMenuPositioner, isStandalone: true, selector: "[rdxMenuPositioner]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "hidden": "!visible()", "style": "legacyVars" } }, providers: [
             ...provideRdxPopperContentWrapper(RdxMenuPositioner),
-            provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+            // Base UI applies the DROPDOWN preset to a root menu (and POPUP to submenus, which we don't
+            // differentiate yet — logical-side submenu placement is a separate epic).
+            provideRdxPopperContentConfig({
+                arrowPadding: 5,
+                collisionPadding: 5,
+                collisionAvoidance: DROPDOWN_COLLISION_AVOIDANCE,
+                updatePositionStrategy: 'always'
+            })
         ], exportAs: ["rdxMenuPositioner"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuPositioner, decorators: [{
@@ -1575,11 +1661,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     exportAs: 'rdxMenuPositioner',
                     providers: [
                         ...provideRdxPopperContentWrapper(RdxMenuPositioner),
-                        provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+                        // Base UI applies the DROPDOWN preset to a root menu (and POPUP to submenus, which we don't
+                        // differentiate yet — logical-side submenu placement is a separate epic).
+                        provideRdxPopperContentConfig({
+                            arrowPadding: 5,
+                            collisionPadding: 5,
+                            collisionAvoidance: DROPDOWN_COLLISION_AVOIDANCE,
+                            updatePositionStrategy: 'always'
+                        })
                     ],
                     host: {
                         '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
                         '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        // Base UI puts a native `hidden` on a closed positioner (`hidden: !mounted`). It matters for a
+                        // `keepMounted` menu: while closed-and-settled the popup stays in the DOM but must be removed from
+                        // layout / a11y / tab order. Gated on `visible` (not `present`/`isOpen`) so an exit animation
+                        // still plays — the popup only hides once the closing transition ends.
+                        '[hidden]': '!visible()',
                         // `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'
@@ -2288,8 +2386,9 @@ class RdxMenuSubTrigger {
             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',
+                // Physical side from context (live: unresolved at open, flips on collision). NOT the popup's
+                // `data-side`, which is the logical `inline-*` echo the geometry can't interpret.
+                side: () => this.submenuContext.popupPhysicalSide() ?? 'right',
                 x: this.lastPointer.x,
                 y: this.lastPointer.y,
                 onClose: () => this.scheduleClose(),
@@ -2434,6 +2533,20 @@ class RdxMenuSubTrigger {
     onPointerLeave() {
         clearTimeout(this.openTimer);
     }
+    /**
+     * Backup cancellation for a `pointerleave` that Chrome can drop during a fast pointer sweep across
+     * adjacent triggers, which would otherwise leave the delayed hover-open armed and open a stale
+     * submenu for a trigger the pointer has already left (stranding the parent at `pointer-events: none`).
+     * `pointerout` bubbles, so it also fires while crossing between the trigger's own descendants — those
+     * (where `relatedTarget` is still inside the trigger) must not cancel the pending open. Base UI parity
+     * (`guardStaleOpen`); safe on this single, hover-driven trigger.
+     */
+    onPointerOut(event) {
+        if (this.elementRef.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        clearTimeout(this.openTimer);
+    }
     clearHighlight() {
         this.isFocused.set(false);
         this.clearParentActiveIndex();
@@ -2509,7 +2622,7 @@ class RdxMenuSubTrigger {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.tabindex": "parentMenuRoot?.open() && highlighted() ? 0 : -1", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxMenuSubTrigger, isStandalone: true, selector: "[rdxMenuSubTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nativeButton: { classPropertyName: "nativeButton", publicName: "nativeButton", isSignal: true, isRequired: false, transformFunction: null }, openOnHover: { classPropertyName: "openOnHover", publicName: "openOnHover", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "click": "onClick($event)", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)", "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "pointerout": "onPointerOut($event)", "rdx-menu-subtrigger-clear-highlight": "clearHighlight()" }, properties: { "attr.type": "nativeButtonState() ? \"button\" : undefined", "attr.tabindex": "parentMenuRoot?.open() && highlighted() ? 0 : -1", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "submenuContext.isOpen()", "attr.aria-disabled": "effectiveDisabled() ? true : undefined", "attr.data-popup-open": "submenuContext.isOpen() ? \"\" : undefined", "attr.data-highlighted": "highlighted() ? \"\" : undefined", "attr.data-disabled": "effectiveDisabled() ? \"\" : undefined", "attr.data-label": "label() ?? undefined" } }, exportAs: ["rdxMenuSubTrigger"], hostDirectives: [{ directive: i1.RdxPopperAnchor }, { directive: i1$1.RdxCompositeListItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxMenuSubTrigger, decorators: [{
             type: Directive,
@@ -2537,6 +2650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '(keydown.arrowright)': 'onArrowRight($event)',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave()',
+                        '(pointerout)': 'onPointerOut($event)',
                         '(rdx-menu-subtrigger-clear-highlight)': 'clearHighlight()'
                     }
                 }]
@@ -2614,7 +2728,8 @@ class RdxMenuTrigger {
             const { handler, dispose } = createSafePolygonHandler({
                 reference: trigger,
                 floating: popup,
-                side: () => popup.getAttribute('data-side') ?? 'bottom',
+                // Physical side from context — the popup's `data-side` may be a logical `inline-*` echo.
+                side: () => this.rootContext.popupPhysicalSide() ?? 'bottom',
                 x: this.lastPointer.x,
                 y: this.lastPointer.y,
                 onClose: () => this.scheduleClose(),