@jobber/components 8.23.0 → 8.23.1

package/dist/MenuSubmenuTrigger-cjs.js

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
 var useButton = require('./useButton-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useCompositeListItem = require('./useCompositeListItem-cjs.js');
-var ToolbarRootContext = require('./ToolbarRootContext-cjs.js');
-var CSPContext = require('./CSPContext-cjs.js');
+var isElementDisabled = require('./isElementDisabled-cjs.js');
+var scrollEdges = require('./scrollEdges-cjs.js');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var ReactDOM = require('react-dom');
@@ -57,28 +57,31 @@ function getRestMs(value) {
 function isClickLikeOpenEvent(openEventType, interactedInside) {
   return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
 }
+function isHoverOpenEvent(openEventType) {
+  return openEventType?.includes('mouse') && openEventType !== 'mousedown';
+}
 
-const isMacSafari = useButton.isMac && useButton.isSafari;
+const isMacSafari = useButton.mac && useScrollLock.webkit;
 /**
  * Opens the floating element while the reference element has focus, like CSS
  * `:focus`.
  * @see https://floating-ui.com/docs/useFocus
  */
 function useFocus(context, props = {}) {
+  const {
+    enabled = true,
+    delay
+  } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const {
     events,
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    delay
-  } = props;
   const blockFocusRef = React__namespace.useRef(false);
   // Track which reference should be blocked from re-opening after Escape/press dismissal.
   const blockedReferenceRef = React__namespace.useRef(null);
-  const timeout = useButton.useTimeout();
   const keyboardModalityRef = React__namespace.useRef(true);
+  const timeout = useButton.useTimeout();
   React__namespace.useEffect(() => {
     const domReference = store.select('domReferenceElement');
     if (!enabled) {
@@ -101,18 +104,7 @@ function useFocus(context, props = {}) {
     function onPointerDown() {
       keyboardModalityRef.current = false;
     }
-    win.addEventListener('blur', onBlur);
-    if (isMacSafari) {
-      win.addEventListener('keydown', onKeyDown, true);
-      win.addEventListener('pointerdown', onPointerDown, true);
-    }
-    return () => {
-      win.removeEventListener('blur', onBlur);
-      if (isMacSafari) {
-        win.removeEventListener('keydown', onKeyDown, true);
-        win.removeEventListener('pointerdown', onPointerDown, true);
-      }
-    };
+    return useScrollLock.mergeCleanups(useButton.addEventListener(win, 'blur', onBlur), isMacSafari && useButton.addEventListener(win, 'keydown', onKeyDown, true), isMacSafari && useButton.addEventListener(win, 'pointerdown', onPointerDown, true));
   }, [store, enabled]);
   React__namespace.useEffect(() => {
     if (!enabled) {
@@ -132,101 +124,100 @@ function useFocus(context, props = {}) {
       events.off('openchange', onOpenChangeLocal);
     };
   }, [events, enabled, store]);
-  const reference = React__namespace.useMemo(() => ({
-    onMouseLeave() {
+  const reference = React__namespace.useMemo(() => {
+    function resetBlockedFocus() {
       blockFocusRef.current = false;
       blockedReferenceRef.current = null;
-    },
-    onFocus(event) {
-      const focusTarget = event.currentTarget;
-      if (blockFocusRef.current) {
-        if (blockedReferenceRef.current === focusTarget) {
-          return;
-        }
-        blockFocusRef.current = false;
-        blockedReferenceRef.current = null;
-      }
-      const target = useButton.getTarget(event.nativeEvent);
-      if (floatingUi_utils_dom.isElement(target)) {
-        // Safari fails to match `:focus-visible` if focus was initially
-        // outside the document.
-        if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !useButton.isTypeableElement(target)) {
+    }
+    return {
+      onMouseLeave() {
+        resetBlockedFocus();
+      },
+      onFocus(event) {
+        const focusTarget = event.currentTarget;
+        if (blockFocusRef.current) {
+          if (blockedReferenceRef.current === focusTarget) {
             return;
           }
-        } else if (!useButton.matchesFocusVisible(target)) {
-          return;
+          resetBlockedFocus();
         }
-      }
-      const movedFromOtherEnabledTrigger = useButton.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
-      const {
-        nativeEvent,
-        currentTarget
-      } = event;
-      const delayValue = typeof delay === 'function' ? delay() : delay;
-      if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
-        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent, currentTarget));
-        return;
-      }
-      timeout.start(delayValue, () => {
-        if (blockFocusRef.current) {
-          return;
+        const target = useButton.getTarget(event.nativeEvent);
+        if (floatingUi_utils_dom.isElement(target)) {
+          // Safari fails to match `:focus-visible` if focus was initially
+          // outside the document.
+          if (isMacSafari && !event.relatedTarget) {
+            if (!keyboardModalityRef.current && !useScrollLock.isTypeableElement(target)) {
+              return;
+            }
+          } else if (!useScrollLock.matchesFocusVisible(target)) {
+            return;
+          }
         }
-        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent, currentTarget));
-      });
-    },
-    onBlur(event) {
-      blockFocusRef.current = false;
-      blockedReferenceRef.current = null;
-      const relatedTarget = event.relatedTarget;
-      const nativeEvent = event.nativeEvent;
-
-      // Hit the non-modal focus management portal guard. Focus will be
-      // moved into the floating element immediately after.
-      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(InternalBackdrop.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
-
-      // Wait for the window blur listener to fire.
-      timeout.start(0, () => {
-        const domReference = store.select('domReferenceElement');
-        const activeEl = useButton.activeElement(domReference ? domReference.ownerDocument : document);
-
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === domReference) {
+        const movedFromOtherEnabledTrigger = useScrollLock.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
+        const {
+          nativeEvent,
+          currentTarget
+        } = event;
+        const delayValue = typeof delay === 'function' ? delay() : delay;
+        if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
+          store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent, currentTarget));
           return;
         }
+        timeout.start(delayValue, () => {
+          if (blockFocusRef.current) {
+            return;
+          }
+          store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent, currentTarget));
+        });
+      },
+      onBlur(event) {
+        resetBlockedFocus();
+        const relatedTarget = event.relatedTarget;
+        const nativeEvent = event.nativeEvent;
+
+        // Hit the non-modal focus management portal guard. Focus will be
+        // moved into the floating element immediately after.
+        const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(useScrollLock.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+
+        // Wait for the window blur listener to fire.
+        timeout.start(0, () => {
+          const domReference = store.select('domReferenceElement');
+          const activeEl = useButton.activeElement(useButton.ownerDocument(domReference));
+
+          // Focus left the page, keep it open.
+          if (!relatedTarget && activeEl === domReference) {
+            return;
+          }
 
-        // When focusing the reference element (e.g. regular click), then
-        // clicking into the floating element, prevent it from hiding.
-        // Note: it must be focusable, e.g. `tabindex="-1"`.
-        // We can not rely on relatedTarget to point to the correct element
-        // as it will only point to the shadow host of the newly focused element
-        // and not the element that actually has received focus if it is located
-        // inside a shadow root.
-        if (useButton.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || useButton.contains(domReference, activeEl) || movedToFocusGuard) {
-          return;
-        }
+          // When focusing the reference element (e.g. regular click), then
+          // clicking into the floating element, prevent it from hiding.
+          // Note: it must be focusable, e.g. `tabindex="-1"`.
+          // We can not rely on relatedTarget to point to the correct element
+          // as it will only point to the shadow host of the newly focused element
+          // and not the element that actually has received focus if it is located
+          // inside a shadow root.
+          if (useButton.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || useButton.contains(domReference, activeEl) || movedToFocusGuard) {
+            return;
+          }
 
-        // If the next focused element is one of the triggers, do not close
-        // the floating element. The focus handler of that trigger will
-        // handle the open state.
-        const nextFocusedElement = relatedTarget ?? activeEl;
-        if (useButton.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
-          return;
-        }
-        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent));
-      });
-    }
-  }), [dataRef, store, timeout, delay]);
+          // If the next focused element is one of the triggers, do not close
+          // the floating element. The focus handler of that trigger will
+          // handle the open state.
+          const nextFocusedElement = relatedTarget ?? activeEl;
+          if (useScrollLock.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+            return;
+          }
+          store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent));
+        });
+      }
+    };
+  }, [dataRef, delay, store, timeout]);
   return React__namespace.useMemo(() => enabled ? {
     reference,
     trigger: reference
   } : {}, [enabled, reference]);
 }
 
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${useButton.TYPEABLE_SELECTOR}`;
-function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
 class HoverInteraction {
   constructor() {
     this.pointerType = undefined;
@@ -253,13 +244,18 @@ class HoverInteraction {
     return this.dispose;
   };
 }
+const pointerEventsMutationOwnerByScopeElement = new WeakMap();
 function clearSafePolygonPointerEventsMutation(instance) {
   if (!instance.performedPointerEventsMutation) {
     return;
   }
-  instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
-  instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
-  instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+  const scopeElement = instance.pointerEventsScopeElement;
+  if (scopeElement && pointerEventsMutationOwnerByScopeElement.get(scopeElement) === instance) {
+    instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
+    instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
+    instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+    pointerEventsMutationOwnerByScopeElement.delete(scopeElement);
+  }
   instance.performedPointerEventsMutation = false;
   instance.pointerEventsScopeElement = null;
   instance.pointerEventsReferenceElement = null;
@@ -271,18 +267,23 @@ function applySafePolygonPointerEventsMutation(instance, options) {
     referenceElement,
     floatingElement
   } = options;
+  const existingOwner = pointerEventsMutationOwnerByScopeElement.get(scopeElement);
+  if (existingOwner && existingOwner !== instance) {
+    clearSafePolygonPointerEventsMutation(existingOwner);
+  }
   clearSafePolygonPointerEventsMutation(instance);
   instance.performedPointerEventsMutation = true;
   instance.pointerEventsScopeElement = scopeElement;
   instance.pointerEventsReferenceElement = referenceElement;
   instance.pointerEventsFloatingElement = floatingElement;
+  pointerEventsMutationOwnerByScopeElement.set(scopeElement, instance);
   scopeElement.style.pointerEvents = 'none';
   referenceElement.style.pointerEvents = 'auto';
   floatingElement.style.pointerEvents = 'auto';
 }
 function useHoverInteractionSharedState(store) {
-  const instance = useRenderElement.useRefWithInit(HoverInteraction.create).current;
   const data = store.context.dataRef.current;
+  const instance = useRenderElement.useRefWithInit(() => data.hoverInteractionState ?? HoverInteraction.create()).current;
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }
@@ -294,6 +295,11 @@ function useHoverInteractionSharedState(store) {
  * Provides hover interactions that should be attached to the floating element.
  */
 function useHoverFloatingInteraction(context, parameters = {}) {
+  const {
+    enabled = true,
+    closeDelay: closeDelayProp = 0,
+    nodeId: nodeIdProp
+  } = parameters;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floatingElement = store.useState('floatingElement');
@@ -301,47 +307,19 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   const {
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    closeDelay: closeDelayProp = 0
-  } = parameters;
+  const tree = useScrollLock.useFloatingTree();
+  const parentId = useScrollLock.useFloatingParentNodeId();
   const instance = useHoverInteractionSharedState(store);
-  const tree = InternalBackdrop.useFloatingTree();
-  const parentId = InternalBackdrop.useFloatingParentNodeId();
+  const childClosedTimeout = useButton.useTimeout();
   const isClickLikeOpenEvent$1 = useButton.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = useButton.useStableCallback(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
-  });
-  const isRelatedTargetInsideEnabledTrigger = useButton.useStableCallback(target => {
-    return useButton.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+    return isHoverOpenEvent(dataRef.current.openEvent?.type);
   });
-  const closeWithDelay = React__namespace.useCallback(event => {
-    const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
-    const close = () => {
-      store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    };
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, close);
-    } else {
-      instance.openChangeTimeout.clear();
-      close();
-    }
-  }, [closeDelayProp, store, instance, tree]);
   const clearPointerEvents = useButton.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = useButton.useStableCallback(event => {
-    const target = useButton.getTarget(event);
-    if (!isInteractiveElement(target)) {
-      instance.interactedInside = false;
-      return;
-    }
-    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
-  });
   useButton.useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
@@ -365,7 +343,13 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
       }
-      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? instance.pointerEventsScopeElement ?? parentFloating ?? ref.closest('[data-rootownerid]') ?? doc.body;
+
+      // A keep-mounted submenu can appear in the tree before it opens, so a
+      // cached scope or parent lookup may resolve to the submenu itself. That
+      // would not shield sibling items in the parent menu.
+      const cachedScopeElement = instance.pointerEventsScopeElement !== floatingEl ? instance.pointerEventsScopeElement : null;
+      const parentScopeElement = parentFloating !== floatingEl ? parentFloating : null;
+      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? cachedScopeElement ?? parentScopeElement ?? ref.closest('[data-rootownerid]') ?? doc.body;
       applySafePolygonPointerEventsMutation(instance, {
         scopeElement,
         referenceElement: ref,
@@ -377,11 +361,34 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = useButton.useTimeout();
   React__namespace.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
+    function hasParentChildren() {
+      return !!(tree && parentId && useScrollLock.getNodeChildren(tree.nodesRef.current, parentId).length > 0);
+    }
+    function closeWithDelay(event) {
+      const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
+      const close = () => {
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      };
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, close);
+      } else {
+        instance.openChangeTimeout.clear();
+        close();
+      }
+    }
+    function handleInteractInside(event) {
+      const target = useButton.getTarget(event);
+      if (!useScrollLock.isInteractiveElement(target)) {
+        instance.interactedInside = false;
+        return;
+      }
+      instance.interactedInside = target?.closest('[aria-haspopup]') != null;
+    }
     function onFloatingMouseEnter() {
       instance.openChangeTimeout.clear();
       childClosedTimeout.clear();
@@ -389,15 +396,21 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && InternalBackdrop.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (hasParentChildren() && tree) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
-      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      if (useScrollLock.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
         // If the mouse is leaving the reference element to another trigger, don't explicitly close the popup
         // as it will be moved.
         return;
       }
+      const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
+      const relatedTarget = event.relatedTarget;
+      const isMovingIntoDescendantFloating = tree && currentNodeId && floatingUi_utils_dom.isElement(relatedTarget) && useScrollLock.getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => useButton.contains(node.context?.elements.floating, relatedTarget));
+      if (isMovingIntoDescendantFloating) {
+        return;
+      }
 
       // If the safePolygon handler is active, let it handle the close logic.
       if (instance.handler) {
@@ -405,12 +418,12 @@ function useHoverFloatingInteraction(context, parameters = {}) {
         return;
       }
       clearPointerEvents();
-      if (!isClickLikeOpenEvent$1()) {
+      if (isHoverOpen() && !isClickLikeOpenEvent$1()) {
         closeWithDelay(event);
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || InternalBackdrop.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || hasParentChildren()) {
         return;
       }
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
@@ -421,20 +434,10 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       });
     }
     const floating = floatingElement;
-    if (floating) {
-      floating.addEventListener('mouseenter', onFloatingMouseEnter);
-      floating.addEventListener('mouseleave', onFloatingMouseLeave);
-      floating.addEventListener('pointerdown', handleInteractInside, true);
-    }
-    return () => {
-      if (floating) {
-        floating.removeEventListener('mouseenter', onFloatingMouseEnter);
-        floating.removeEventListener('mouseleave', onFloatingMouseLeave);
-        floating.removeEventListener('pointerdown', handleInteractInside, true);
-      }
+    return useScrollLock.mergeCleanups(floating && useButton.addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && useButton.addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && useButton.addEventListener(floating, 'pointerdown', handleInteractInside, true), () => {
       tree?.events.off('floating.closed', onNodeClosed);
-    };
-  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent$1, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
+    });
+  }, [enabled, floatingElement, store, dataRef, closeDelayProp, nodeIdProp, isHoverOpen, isClickLikeOpenEvent$1, clearPointerEvents, instance, tree, parentId, childClosedTimeout]);
 }
 
 const EMPTY_REF = {
@@ -446,11 +449,6 @@ const EMPTY_REF = {
  * elements.
  */
 function useHoverReferenceInteraction(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const {
-    dataRef,
-    events
-  } = store.context;
   const {
     enabled = true,
     delay = 0,
@@ -461,23 +459,29 @@ function useHoverReferenceInteraction(context, props = {}) {
     triggerElementRef = EMPTY_REF,
     externalTree,
     isActiveTrigger = true,
-    getHandleCloseContext
+    getHandleCloseContext,
+    isClosing,
+    shouldOpen: shouldOpenProp
   } = props;
-  const tree = InternalBackdrop.useFloatingTree(externalTree);
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const {
+    dataRef,
+    events
+  } = store.context;
+  const tree = useScrollLock.useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
+  const isHoverCloseActiveRef = React__namespace.useRef(false);
   const handleCloseRef = useButton.useValueAsRef(handleClose);
   const delayRef = useButton.useValueAsRef(delay);
   const restMsRef = useButton.useValueAsRef(restMs);
   const enabledRef = useButton.useValueAsRef(enabled);
-  if (isActiveTrigger) {
-    // eslint-disable-next-line no-underscore-dangle
-    instance.handleCloseOptions = handleCloseRef.current?.__options;
-  }
+  const shouldOpenRef = useButton.useValueAsRef(shouldOpenProp);
+  const isClosingRef = useButton.useValueAsRef(isClosing);
   const isClickLikeOpenEvent$1 = useButton.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = useButton.useStableCallback(target => {
-    return useButton.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  const checkShouldOpen = useButton.useStableCallback(() => {
+    return shouldOpenRef.current?.() !== false;
   });
   const isOverInactiveTrigger = useButton.useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
@@ -494,19 +498,6 @@ function useHoverReferenceInteraction(context, props = {}) {
     const targetElement = target;
     return allTriggers.hasMatchingElement(trigger => useButton.contains(trigger, targetElement)) && (!currentDomReference || !useButton.contains(currentDomReference, targetElement));
   });
-  const closeWithDelay = React__namespace.useCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
-        tree?.events.emit('floating.closed', event);
-      });
-    } else if (runElseBranch) {
-      instance.openChangeTimeout.clear();
-      store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    }
-  }, [delayRef, store, instance, tree]);
   const cleanupMouseMoveHandler = useButton.useStableCallback(() => {
     if (!instance.handler) {
       return;
@@ -515,10 +506,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
-  React__namespace.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
   const clearPointerEvents = useButton.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
+  if (isActiveTrigger) {
+    // eslint-disable-next-line no-underscore-dangle
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
+  }
+  React__namespace.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
@@ -528,11 +523,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
+        isHoverCloseActiveRef.current = details.reason === useButton.triggerHover;
         cleanupMouseMoveHandler();
         instance.openChangeTimeout.clear();
         instance.restTimeout.clear();
         instance.blockMouseMove = true;
         instance.restTimeoutPending = false;
+      } else {
+        isHoverCloseActiveRef.current = false;
       }
     }
     events.on('openchange', onOpenChangeLocal);
@@ -544,6 +542,19 @@ function useHoverReferenceInteraction(context, props = {}) {
     if (!enabled) {
       return undefined;
     }
+    function closeWithDelay(event, runElseBranch = true) {
+      const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, () => {
+          store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
+          tree?.events.emit('floating.closed', event);
+        });
+      } else if (runElseBranch) {
+        instance.openChangeTimeout.clear();
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      }
+    }
     const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
     if (!floatingUi_utils_dom.isElement(trigger)) {
       return undefined;
@@ -558,27 +569,57 @@ function useHoverReferenceInteraction(context, props = {}) {
       // Only rest delay is set; there's no fallback delay.
       // This will be handled by `onMouseMove`.
       const restMsValue = getRestMs(restMsRef.current);
-      if (restMsValue > 0 && !getDelay(delayRef.current, 'open')) {
-        return;
-      }
       const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
-      const triggerNode = event.currentTarget ?? null;
+      const eventTarget = useButton.getTarget(event);
+      const currentTarget = event.currentTarget ?? null;
       const currentDomReference = store.select('domReferenceElement');
-      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, event.target);
+      let triggerNode = currentTarget;
+
+      // Wrapper/delegated mode: resolve the actual trigger from the event target.
+      if (floatingUi_utils_dom.isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+        for (const triggerElement of store.context.triggerElements.elements()) {
+          if (useButton.contains(triggerElement, eventTarget)) {
+            triggerNode = triggerElement;
+            break;
+          }
+        }
+      }
+
+      // Wrapper/delegated mode fallback: if the wrapper contains the active trigger,
+      // treat this as re-entering that active trigger.
+      if (floatingUi_utils_dom.isElement(currentTarget) && floatingUi_utils_dom.isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && useButton.contains(currentTarget, currentDomReference)) {
+        triggerNode = currentDomReference;
+      }
+      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, eventTarget);
       const isOpen = store.select('open');
+      const isInClosingTransition = isClosingRef.current?.() ?? store.select('transitionStatus') === 'ending';
+      const isHoverCloseTransition = !isOpen && isInClosingTransition && isHoverCloseActiveRef.current;
+      const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && floatingUi_utils_dom.isElement(triggerNode) && floatingUi_utils_dom.isElement(currentDomReference) && useButton.contains(currentDomReference, triggerNode) && isHoverCloseTransition;
+      const isRestOnlyDelay = restMsValue > 0 && !openDelay;
+      const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
       const shouldOpen = !isOpen || isOverInactive;
 
-      // When moving between triggers while already open, open immediately without delay
-      if (isOverInactive && isOpen) {
-        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
-      } else if (openDelay) {
+      // Open immediately when moving between triggers while open, or during
+      // a hover-driven close transition (including same-trigger re-entry).
+      if (shouldOpenImmediately) {
+        if (checkShouldOpen()) {
+          store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
+        }
+        return;
+      }
+      if (isRestOnlyDelay) {
+        return;
+      }
+      if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
-          if (shouldOpen) {
+          if (shouldOpen && checkShouldOpen()) {
             store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
+        if (checkShouldOpen()) {
+          store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
+        }
       }
     }
     function onMouseLeave(event) {
@@ -592,8 +633,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
       const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
-      const ignoreRelatedTargetTrigger = isRelatedTargetInsideEnabledTrigger(event.relatedTarget);
-      if (ignoreRelatedTargetTrigger) {
+      if (useScrollLock.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
         return;
       }
       if (handleCloseRef.current && handleCloseContextBase) {
@@ -624,20 +664,12 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
     }
     if (move) {
-      trigger.addEventListener('mousemove', onMouseEnter, {
+      return useScrollLock.mergeCleanups(useButton.addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      });
+      }), useButton.addEventListener(trigger, 'mouseenter', onMouseEnter), useButton.addEventListener(trigger, 'mouseleave', onMouseLeave));
     }
-    trigger.addEventListener('mouseenter', onMouseEnter);
-    trigger.addEventListener('mouseleave', onMouseLeave);
-    return () => {
-      if (move) {
-        trigger.removeEventListener('mousemove', onMouseEnter);
-      }
-      trigger.removeEventListener('mouseenter', onMouseEnter);
-      trigger.removeEventListener('mouseleave', onMouseLeave);
-    };
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent$1, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext]);
+    return useScrollLock.mergeCleanups(useButton.addEventListener(trigger, 'mouseenter', onMouseEnter), useButton.addEventListener(trigger, 'mouseleave', onMouseLeave));
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent$1, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef, checkShouldOpen]);
   return React__namespace.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -659,6 +691,17 @@ function useHoverReferenceInteraction(context, props = {}) {
         if (mouseOnly && !useButton.isMouseLikePointerType(instance.pointerType)) {
           return;
         }
+        if (currentOpen && isOverInactive && instance.handleCloseOptions?.blockPointerEvents) {
+          const floatingElement = store.select('floatingElement');
+          if (floatingElement) {
+            const scopeElement = instance.handleCloseOptions?.getScope?.() ?? trigger.ownerDocument.body;
+            applySafePolygonPointerEventsMutation(instance, {
+              scopeElement,
+              referenceElement: trigger,
+              floatingElement
+            });
+          }
+        }
         const restMsValue = getRestMs(restMsRef.current);
         if (currentOpen && !isOverInactive || restMsValue === 0) {
           return;
@@ -676,7 +719,7 @@ function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactive) && checkShouldOpen()) {
             store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, nativeEvent, trigger));
           }
         }
@@ -692,7 +735,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         }
       }
     };
-  }, [enabled, instance, isClickLikeOpenEvent$1, isOverInactiveTrigger, mouseOnly, store, restMsRef]);
+  }, [enabled, instance, isClickLikeOpenEvent$1, isOverInactiveTrigger, mouseOnly, store, restMsRef, checkShouldOpen]);
 }
 
 /* eslint-disable no-nested-ternary */
@@ -810,7 +853,7 @@ function safePolygon(options = {}) {
         return undefined;
       }
       function hasOpenChildNode() {
-        return Boolean(tree && InternalBackdrop.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
+        return Boolean(tree && useScrollLock.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
       }
       function closeIfNoOpenChild() {
         if (!hasOpenChildNode()) {
@@ -931,6 +974,7 @@ function safePolygon(options = {}) {
 
   // eslint-disable-next-line no-underscore-dangle
   fn.__options = {
+    ...options,
     blockPointerEvents
   };
   return fn;
@@ -967,7 +1011,7 @@ function useContextMenuRootContext(optional = true) {
 }
 
 const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -979,8 +1023,9 @@ const stateAttributesMapping$1 = {
  */
 const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1031,12 +1076,13 @@ function useMenuItemCommonProps(params) {
   const {
     events: menuEvents
   } = store.useState('floatingTreeRoot');
+  const open = store.useState('open');
   const contextMenuContext = useContextMenuRootContext(true);
   const isContextMenu = contextMenuContext !== undefined;
   return React__namespace.useMemo(() => ({
     id,
     role: 'menuitem',
-    tabIndex: highlighted ? 0 : -1,
+    tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
       if (event.key === ' ' && typingRef?.current) {
         event.preventDefault();
@@ -1072,7 +1118,7 @@ function useMenuItemCommonProps(params) {
 
         // On non-macOS platforms, this mouseup belongs to the right-click gesture
         // that opened the context menu, so it must not activate an item.
-        if (isContextMenu && !useButton.isMac && event.button === 2) {
+        if (isContextMenu && !useButton.mac && event.button === 2) {
           return;
         }
       }
@@ -1084,7 +1130,7 @@ function useMenuItemCommonProps(params) {
         }
       }
     }
-  }), [closeOnClick, highlighted, id, menuEvents, nodeId, store, typingRef, itemRef, contextMenuContext, isContextMenu, itemMetadata]);
+  }), [closeOnClick, highlighted, id, menuEvents, nodeId, open, store, typingRef, itemRef, contextMenuContext, isContextMenu, itemMetadata]);
 }
 
 const REGULAR_ITEM = {
@@ -1093,7 +1139,7 @@ const REGULAR_ITEM = {
 function useMenuItem(params) {
   const {
     closeOnClick,
-    disabled = false,
+    disabled: disabledProp = false,
     highlighted,
     id,
     store,
@@ -1102,6 +1148,8 @@ function useMenuItem(params) {
     itemMetadata,
     nodeId
   } = params;
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || rootDisabled;
   const itemRef = React__namespace.useRef(null);
   const {
     getButtonProps,
@@ -1178,7 +1226,7 @@ if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuG
 function useMenuGroupRootContext() {
   const context = React__namespace.useContext(MenuGroupContext);
   if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuGroupRootContext is missing. Menu group parts must be used within <Menu.Group>.' : useRenderElement.formatErrorMessage(31));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuGroupContext is missing. Menu group parts must be used within <Menu.Group> or <Menu.RadioGroup>.' : useRenderElement.formatErrorMessage(31));
   }
   return context;
 }
@@ -1187,12 +1235,10 @@ const MenuGroup = /*#__PURE__*/React__namespace.forwardRef(function MenuGroup(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React__namespace.useState(undefined);
-  const context = React__namespace.useMemo(() => ({
-    setLabelId
-  }), [setLabelId]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: forwardedRef,
     props: {
@@ -1202,7 +1248,7 @@ const MenuGroup = /*#__PURE__*/React__namespace.forwardRef(function MenuGroup(co
     }
   });
   return /*#__PURE__*/jsxRuntime.jsx(MenuGroupContext.Provider, {
-    value: context,
+    value: setLabelId,
     children: element
   });
 });
@@ -1214,17 +1260,16 @@ if (process.env.NODE_ENV !== "production") MenuGroup.displayName = "MenuGroup";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
+const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
   const id = useButton.useBaseUiId(idProp);
-  const {
-    setLabelId
-  } = useMenuGroupRootContext();
+  const setLabelId = useMenuGroupRootContext();
   useButton.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
@@ -1257,6 +1302,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     nativeButton = false,
     disabled = false,
     closeOnClick = true,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
@@ -1279,7 +1325,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = {
@@ -1307,6 +1353,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
     id: idProp,
     label,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const linkRef = React__namespace.useRef(null);
@@ -1314,7 +1361,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const nodeId = menuPositionerContext?.nodeId;
+  const nodeId = menuPositionerContext?.context.nodeId;
   const id = useButton.useBaseUiId(idProp);
   const {
     store
@@ -1341,9 +1388,9 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   function getItemProps(externalProps) {
     return useRenderElement.mergeProps(commonProps, externalProps, getButtonProps);
   }
-  const state = React__namespace.useMemo(() => ({
+  const state = {
     highlighted
-  }), [highlighted]);
+  };
   return useRenderElement.useRenderElement('a', componentProps, {
     state,
     props: [itemProps, elementProps, getItemProps],
@@ -1353,7 +1400,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
 if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
 
 const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -1367,6 +1414,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;
@@ -1377,7 +1425,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     side,
     align
   } = useMenuPositionerContext();
-  const insideToolbar = ToolbarRootContext.useToolbarRootContext(true) != null;
+  const insideToolbar = isElementDisabled.useToolbarRootContext(true) != null;
   const open = store.useState('open');
   const transitionStatus = store.useState('transitionStatus');
   const popupProps = store.useState('popupProps');
@@ -1391,6 +1439,9 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const closeDelay = store.useState('closeDelay');
   const activeTriggerElement = store.useState('activeTriggerElement');
+  const hoverEnabled = store.useState('hoverEnabled');
+  const disabled = store.useState('disabled');
+  const openMethod = store.useState('openMethod');
   const isContextMenu = parent.type === 'context-menu';
   useButton.useOpenChangeComplete({
     open,
@@ -1410,12 +1461,13 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
       floatingTreeRoot.events.off('close', handleClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const hoverEnabled = store.useState('hoverEnabled');
-  const disabled = store.useState('disabled');
   useHoverFloatingInteraction(floatingContext, {
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
+  const setPopupElement = React__namespace.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     transitionStatus,
     side,
@@ -1424,16 +1476,13 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const setPopupElement = React__namespace.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping,
     props: [popupProps, {
       onKeyDown(event) {
-        if (insideToolbar && CSPContext.COMPOSITE_KEYS.has(event.key)) {
+        if (insideToolbar && scrollEdges.COMPOSITE_KEYS.has(event.key)) {
           event.stopPropagation();
         }
       }
@@ -1445,8 +1494,9 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useButton.outsidePress) {
     returnFocus = true;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
     context: floatingContext,
+    openInteractionType: openMethod,
     modal: isContextMenu,
     disabled: !mounted,
     returnFocus: finalFocus === undefined ? returnFocus : finalFocus,
@@ -1486,7 +1536,7 @@ const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(
   }
   return /*#__PURE__*/jsxRuntime.jsx(MenuPortalContext.Provider, {
     value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps
     })
@@ -1509,7 +1559,8 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
-    collisionAvoidance: collisionAvoidanceProp = InternalBackdrop.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance: collisionAvoidanceProp = useScrollLock.DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1523,6 +1574,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   const mounted = store.useState('mounted');
   const open = store.useState('open');
   const modal = store.useState('modal');
+  const openMethod = store.useState('openMethod');
   const triggerElement = store.useState('activeTriggerElement');
   const transitionStatus = store.useState('transitionStatus');
   const positionerElement = store.useState('positionerElement');
@@ -1552,9 +1604,9 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   if (parent.type === 'menu') {
     computedSide = computedSide ?? 'inline-end';
     computedAlign = computedAlign ?? 'start';
-    collisionAvoidance = componentProps.collisionAvoidance ?? InternalBackdrop.POPUP_COLLISION_AVOIDANCE;
+    collisionAvoidance = componentProps.collisionAvoidance ?? useScrollLock.POPUP_COLLISION_AVOIDANCE;
   } else if (parent.type === 'menubar') {
-    computedSide = computedSide ?? 'bottom';
+    computedSide = computedSide ?? (parent.context.orientation === 'vertical' ? 'inline-end' : 'bottom');
     computedAlign = computedAlign ?? 'start';
   }
   const contextMenu = parent.type === 'context-menu';
@@ -1579,20 +1631,6 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     externalTree: floatingTreeRoot,
     adaptiveOrigin: hasViewport ? useCompositeListItem.adaptiveOrigin : undefined
   });
-  const positionerProps = React__namespace.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioner.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioner.positionerStyles]);
   React__namespace.useEffect(() => {
     function onMenuOpenChange(details) {
       if (details.open) {
@@ -1700,19 +1738,16 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const contextValue = React__namespace.useMemo(() => ({
-    side: positioner.side,
-    align: positioner.align,
-    arrowRef: positioner.arrowRef,
-    arrowUncentered: positioner.arrowUncentered,
-    arrowStyles: positioner.arrowStyles,
-    nodeId: positioner.context.nodeId
-  }), [positioner.side, positioner.align, positioner.arrowRef, positioner.arrowUncentered, positioner.arrowStyles, positioner.context.nodeId]);
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    state,
-    stateAttributesMapping: InternalBackdrop.popupStateMapping,
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  const menubarModal = parent.type === 'menubar' && parent.context.modal;
+  const popupModal = modal && lastOpenChangeReason !== useButton.triggerHover;
+  useCompositeListItem.useAnchoredPopupScrollLock(open && (menubarModal || popupModal), openMethod === 'touch', positionerElement, triggerElement);
+  const element = useCompositeListItem.usePositioner(componentProps, state, {
+    styles: positioner.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open
   });
   const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== useButton.triggerHover || parent.type === 'menubar' && parent.context.modal);
 
@@ -1724,12 +1759,12 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     backdropCutout = triggerElement;
   }
   return /*#__PURE__*/jsxRuntime.jsxs(MenuPositionerContext.Provider, {
-    value: contextValue,
-    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
+    value: positioner,
+    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(useScrollLock.InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
-      inert: InternalBackdrop.inertValue(!open),
+      inert: useScrollLock.inertValue(!open),
       cutout: backdropCutout
-    }), /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingNode, {
+    }), /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingNode, {
       id: floatingNodeId,
       children: /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.CompositeList, {
         elementsRef: store.context.itemDomElements,
@@ -1765,16 +1800,18 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     defaultValue,
     onValueChange: onValueChangeProp,
     disabled = false,
+    style,
+    'aria-labelledby': ariaLabelledByProp,
     ...elementProps
   } = componentProps;
+  const [labelId, setLabelId] = React__namespace.useState(undefined);
   const [value, setValueUnwrapped] = useButton.useControlled({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = useButton.useStableCallback(onValueChangeProp);
   const setValue = useButton.useStableCallback((newValue, eventDetails) => {
-    onValueChange?.(newValue, eventDetails);
+    onValueChangeProp?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -1788,6 +1825,7 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     ref: forwardedRef,
     props: {
       role: 'group',
+      'aria-labelledby': ariaLabelledByProp ?? labelId,
       'aria-disabled': disabled || undefined,
       ...elementProps
     }
@@ -1797,9 +1835,12 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     setValue,
     disabled
   }), [value, setValue, disabled]);
-  return /*#__PURE__*/jsxRuntime.jsx(MenuRadioGroupContext.Provider, {
-    value: context,
-    children: element
+  return /*#__PURE__*/jsxRuntime.jsx(MenuGroupContext.Provider, {
+    value: setLabelId,
+    children: /*#__PURE__*/jsxRuntime.jsx(MenuRadioGroupContext.Provider, {
+      value: context,
+      children: element
+    })
   });
 }));
 if (process.env.NODE_ENV !== "production") MenuRadioGroup.displayName = "MenuRadioGroup";
@@ -1824,6 +1865,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     disabled: disabledProp = false,
     closeOnClick = false,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
@@ -1853,7 +1895,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = React__namespace.useMemo(() => ({
@@ -1861,13 +1903,12 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useButton.useStableCallback(event => {
-    const details = {
-      ...useButton.createChangeEventDetails(useButton.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = useButton.createChangeEventDetails(useButton.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     setSelectedValue(value, details);
-  });
+  }
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: itemMapping,
@@ -1895,6 +1936,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;
@@ -1945,34 +1987,36 @@ function useMenubarContext(optional) {
 
 const selectors = {
   ...ScrollAreaViewport.popupStoreSelectors,
-  disabled: InternalBackdrop.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: InternalBackdrop.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  allowMouseEnter: InternalBackdrop.createSelector(state => state.allowMouseEnter),
-  stickIfOpen: InternalBackdrop.createSelector(state => state.stickIfOpen),
-  parent: InternalBackdrop.createSelector(state => state.parent),
-  rootId: InternalBackdrop.createSelector(state => {
+  disabled: useScrollLock.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
+  modal: useScrollLock.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  openMethod: useScrollLock.createSelector(state => state.openMethod),
+  allowMouseEnter: useScrollLock.createSelector(state => state.allowMouseEnter),
+  highlightItemOnHover: useScrollLock.createSelector(state => state.highlightItemOnHover),
+  stickIfOpen: useScrollLock.createSelector(state => state.stickIfOpen),
+  parent: useScrollLock.createSelector(state => state.parent),
+  rootId: useScrollLock.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('rootId');
     }
     return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
   }),
-  activeIndex: InternalBackdrop.createSelector(state => state.activeIndex),
-  isActive: InternalBackdrop.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: InternalBackdrop.createSelector(state => state.hoverEnabled),
-  instantType: InternalBackdrop.createSelector(state => state.instantType),
-  lastOpenChangeReason: InternalBackdrop.createSelector(state => state.openChangeReason),
-  floatingTreeRoot: InternalBackdrop.createSelector(state => {
+  activeIndex: useScrollLock.createSelector(state => state.activeIndex),
+  isActive: useScrollLock.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
+  hoverEnabled: useScrollLock.createSelector(state => state.hoverEnabled),
+  instantType: useScrollLock.createSelector(state => state.instantType),
+  lastOpenChangeReason: useScrollLock.createSelector(state => state.openChangeReason),
+  floatingTreeRoot: useScrollLock.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('floatingTreeRoot');
     }
     return state.floatingTreeRoot;
   }),
-  floatingNodeId: InternalBackdrop.createSelector(state => state.floatingNodeId),
-  floatingParentNodeId: InternalBackdrop.createSelector(state => state.floatingParentNodeId),
-  itemProps: InternalBackdrop.createSelector(state => state.itemProps),
-  closeDelay: InternalBackdrop.createSelector(state => state.closeDelay),
-  hasViewport: InternalBackdrop.createSelector(state => state.hasViewport),
-  keyboardEventRelay: InternalBackdrop.createSelector(state => {
+  floatingNodeId: useScrollLock.createSelector(state => state.floatingNodeId),
+  floatingParentNodeId: useScrollLock.createSelector(state => state.floatingParentNodeId),
+  itemProps: useScrollLock.createSelector(state => state.itemProps),
+  closeDelay: useScrollLock.createSelector(state => state.closeDelay),
+  hasViewport: useScrollLock.createSelector(state => state.hasViewport),
+  keyboardEventRelay: useScrollLock.createSelector(state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
     }
@@ -1982,7 +2026,7 @@ const selectors = {
     return undefined;
   })
 };
-class MenuStore extends InternalBackdrop.ReactStore {
+class MenuStore extends useScrollLock.ReactStore {
   constructor(initialState) {
     super({
       ...createInitialState(),
@@ -2005,7 +2049,7 @@ class MenuStore extends InternalBackdrop.ReactStore {
       triggerFocusTargetRef: /*#__PURE__*/React__namespace.createRef(),
       beforeContentFocusGuardRef: /*#__PURE__*/React__namespace.createRef(),
       onOpenChangeComplete: undefined,
-      triggerElements: new InternalBackdrop.PopupTriggerMap()
+      triggerElements: new useScrollLock.PopupTriggerMap()
     }, selectors);
 
     // Set up propagation of state from parent menu if applicable.
@@ -2056,7 +2100,9 @@ function createInitialState() {
     ...ScrollAreaViewport.createInitialPopupStoreState(),
     disabled: false,
     modal: true,
+    openMethod: null,
     allowMouseEnter: false,
+    highlightItemOnHover: true,
     stickIfOpen: true,
     parent: {
       type: undefined
@@ -2066,7 +2112,7 @@ function createInitialState() {
     hoverEnabled: true,
     instantType: undefined,
     openChangeReason: null,
-    floatingTreeRoot: new InternalBackdrop.FloatingTreeStore(),
+    floatingTreeRoot: new useScrollLock.FloatingTreeStore(),
     floatingNodeId: undefined,
     floatingParentNodeId: null,
     itemProps: useRenderElement.EMPTY_OBJECT,
@@ -2082,7 +2128,7 @@ function useMenuSubmenuRootContext() {
   return React__namespace.useContext(MenuSubmenuRootContext);
 }
 
-const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
+const MenuRoot = useScrollLock.fastComponent(function MenuRoot(props) {
   const {
     children,
     open: openProp,
@@ -2138,46 +2184,19 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
     triggerIdProp,
     parent: parentFromContext
   });
-
-  // Support initially open state when uncontrolled
-  InternalBackdrop.useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
-      store.update({
-        open: true,
-        activeTriggerId: defaultTriggerIdProp
-      });
-    }
-  });
+  useScrollLock.useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerIdProp);
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const rootId = useButton.useId();
+  const floatingId = useButton.useId();
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const floatingNodeIdFromContext = InternalBackdrop.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeIdFromContext = InternalBackdrop.useFloatingParentNodeId();
-  useButton.useIsoLayoutEffect(() => {
-    if (contextMenuContext && !parentMenuRootContext) {
-      // This is a context menu root.
-      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
-      store.update({
-        parent: {
-          type: 'context-menu',
-          context: contextMenuContext
-        },
-        floatingNodeId: floatingNodeIdFromContext,
-        floatingParentNodeId: floatingParentNodeIdFromContext
-      });
-    } else if (parentMenuRootContext) {
-      store.update({
-        floatingNodeId: floatingNodeIdFromContext,
-        floatingParentNodeId: floatingParentNodeIdFromContext
-      });
-    }
-  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
+  const floatingNodeIdFromContext = useScrollLock.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeIdFromContext = useScrollLock.useFloatingParentNodeId();
   const open = store.useState('open');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
   const hoverEnabled = store.useState('hoverEnabled');
-  const modal = store.useState('modal');
   const disabled = store.useState('disabled');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const parent = store.useState('parent');
@@ -2185,33 +2204,55 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
   const payload = store.useState('payload');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const openEventRef = React__namespace.useRef(null);
+  const allowOutsidePressDismissalRef = React__namespace.useRef(parent.type !== 'context-menu');
+  const allowOutsidePressDismissalTimeout = useButton.useTimeout();
+  const allowTouchToCloseRef = React__namespace.useRef(true);
+  const allowTouchToCloseTimeout = useButton.useTimeout();
   const nested = floatingParentNodeId != null;
-  let floatingEvents;
   if (process.env.NODE_ENV !== 'production') {
     if (parent.type !== undefined && modalProp !== undefined) {
       console.warn('Base UI: The `modal` prop is not supported on nested menus. It will be ignored.');
     }
   }
+  const {
+    openMethod,
+    triggerProps: interactionTypeProps
+  } = useScrollLock.useOpenInteractionType(open);
   store.useSyncedValues({
     disabled: disabledProp,
+    highlightItemOnHover,
     modal: parent.type === undefined ? modalProp : undefined,
-    rootId: useButton.useId()
-  });
-  const {
     openMethod,
-    triggerProps: interactionTypeProps
-  } = InternalBackdrop.useOpenInteractionType(open);
-  ScrollAreaViewport.useImplicitActiveTrigger(store);
+    rootId
+  });
+  useScrollLock.useImplicitActiveTrigger(store);
   const {
     forceUnmount
-  } = ScrollAreaViewport.useOpenStateTransitions(open, store, () => {
+  } = useScrollLock.useOpenStateTransitions(open, store, () => {
     store.update({
       allowMouseEnter: false,
       stickIfOpen: true
     });
   });
-  const allowOutsidePressDismissalRef = React__namespace.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = useButton.useTimeout();
+  useButton.useIsoLayoutEffect(() => {
+    if (contextMenuContext && !parentMenuRootContext) {
+      // This is a context menu root.
+      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
+      store.update({
+        parent: {
+          type: 'context-menu',
+          context: contextMenuContext
+        },
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    } else if (parentMenuRootContext) {
+      store.update({
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    }
+  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
   React__namespace.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -2232,22 +2273,17 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  InternalBackdrop.useScrollLock(open && modal && lastOpenChangeReason !== useButton.triggerHover && openMethod !== 'touch', positionerElement);
   useButton.useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
-  const allowTouchToCloseRef = React__namespace.useRef(true);
-  const allowTouchToCloseTimeout = useButton.useTimeout();
   const setOpen = useButton.useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
     }
-    eventDetails.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
+    const shouldPreventUnmountOnClose = useScrollLock.attachPreventUnmountOnClose(eventDetails);
 
     // Do not immediately reset the activeTriggerId to allow
     // exit animations to play and focus to be returned correctly.
@@ -2258,31 +2294,12 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested
-    };
-    floatingEvents?.emit('openchange', details);
+    store.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const nativeEvent = eventDetails.event;
     if (nextOpen === false && nativeEvent?.type === 'click' && nativeEvent.pointerType === 'touch' && !allowTouchToCloseRef.current) {
       return;
     }
 
-    // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
-    // option upon close when tabbing out due to `keepMounted=true`:
-    // https://github.com/floating-ui/floating-ui/pull/3004/files#diff-962a7439cdeb09ea98d4b622a45d517bce07ad8c3f866e089bda05f4b0bbd875R194-R199
-    // This otherwise causes options to retain `tabindex=0` incorrectly when the popup is closed
-    // when tabbing outside.
-    if (!nextOpen && activeIndex !== null) {
-      const activeOption = store.context.itemDomElements.current[activeIndex];
-      // Wait for Floating UI's focus effect to have fired
-      queueMicrotask(() => {
-        activeOption?.setAttribute('tabindex', '-1');
-      });
-    }
-
     // Prevent the menu from closing on mobile devices that have a delayed click event.
     // In some cases the menu, when tapped, will fire the focus event first and then the click event.
     // Without this guard, the menu will close immediately after opening.
@@ -2302,14 +2319,7 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
       openChangeReason: reason
     };
     openEventRef.current = eventDetails.event ?? null;
-
-    // If a popup is closing, the `trigger` may be null.
-    // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-    const newTriggerId = eventDetails.trigger?.id ?? null;
-    if (newTriggerId || nextOpen) {
-      updatedState.activeTriggerId = newTriggerId;
-      updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-    }
+    useScrollLock.setPopupOpenState(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
     store.update(updatedState);
     if (parent.type === 'menubar' && (reason === useButton.triggerFocus || reason === useButton.focusOut || reason === useButton.triggerHover || reason === useButton.listNavigation || reason === useButton.siblingOpen)) {
       store.set('instantType', 'group');
@@ -2319,16 +2329,26 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
       store.set('instantType', undefined);
     }
   });
-  const createMenuEventDetails = React__namespace.useCallback(reason => {
-    const details = useButton.createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
+  const floatingRootContext = useScrollLock.useSyncedFloatingRootContext({
+    popupStore: store,
+    floatingId,
+    nested: floatingParentNodeIdFromContext != null,
+    onOpenChange: setOpen
+  });
+  const floatingEvents = floatingRootContext.context.events;
+  React__namespace.useEffect(() => {
+    const handleSetOpenEvent = ({
+      open: nextOpen,
+      eventDetails
+    }) => setOpen(nextOpen, eventDetails);
+    floatingEvents.on('setOpen', handleSetOpenEvent);
+    return () => {
+      floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
-    return details;
-  }, [store]);
+  }, [floatingEvents, setOpen]);
   const handleImperativeClose = React__namespace.useCallback(() => {
-    store.setOpen(false, createMenuEventDetails(useButton.imperativeAction));
-  }, [store, createMenuEventDetails]);
+    store.setOpen(false, useButton.createChangeEventDetails(useButton.imperativeAction));
+  }, [store]);
   React__namespace.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
@@ -2341,22 +2361,7 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
   React__namespace.useImperativeHandle(ctx?.actionsRef, () => ({
     setOpen
   }), [setOpen]);
-  const floatingRootContext = ScrollAreaViewport.useSyncedFloatingRootContext({
-    popupStore: store,
-    onOpenChange: setOpen
-  });
-  floatingEvents = floatingRootContext.context.events;
-  React__namespace.useEffect(() => {
-    const handleSetOpenEvent = ({
-      open: nextOpen,
-      eventDetails
-    }) => setOpen(nextOpen, eventDetails);
-    floatingEvents.on('setOpen', handleSetOpenEvent);
-    return () => {
-      floatingEvents?.off('setOpen', handleSetOpenEvent);
-    };
-  }, [floatingEvents, setOpen]);
-  const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
+  const dismiss = useScrollLock.useDismiss(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
       escapeKey: closeParentOnEsc && parent.type === 'menu'
@@ -2369,10 +2374,7 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
     },
     externalTree: nested ? floatingTreeRoot : undefined
   });
-  const role = ScrollAreaViewport.useRole(floatingRootContext, {
-    role: 'menu'
-  });
-  const direction = InternalBackdrop.useDirection();
+  const direction = useScrollLock.useDirection();
   const setActiveIndex = React__namespace.useCallback(index => {
     if (store.select('activeIndex') === index) {
       return;
@@ -2394,47 +2396,42 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
     externalTree: nested ? floatingTreeRoot : undefined,
     focusItemOnHover: highlightItemOnHover
   });
-  const onTypingChange = React__namespace.useCallback(nextTyping => {
+  const onTyping = React__namespace.useCallback(nextTyping => {
     store.context.typingRef.current = nextTyping;
   }, [store]);
   const typeahead = useCompositeListItem.useTypeahead(floatingRootContext, {
+    enabled: !disabled,
     listRef: store.context.itemLabels,
     elementsRef: store.context.itemDomElements,
     activeIndex,
-    resetMs: InternalBackdrop.TYPEAHEAD_RESET_MS,
+    resetMs: useScrollLock.TYPEAHEAD_RESET_MS,
     onMatch: index => {
       if (open && index !== activeIndex) {
         store.set('activeIndex', index);
       }
     },
-    onTypingChange
+    onTyping
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps,
-    getTriggerProps
-  } = InternalBackdrop.useInteractions([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React__namespace.useMemo(() => {
-    const mergedProps = useRenderElement.mergeProps(getReferenceProps(), {
+    const mergedProps = useRenderElement.mergeProps(typeahead.reference, listNavigation.reference, dismiss.reference, {
       onMouseMove() {
         store.set('allowMouseEnter', true);
       }
     }, interactionTypeProps);
-    delete mergedProps.role;
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = open;
     return mergedProps;
-  }, [getReferenceProps, store, interactionTypeProps]);
+  }, [store, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, open]);
   const inactiveTriggerProps = React__namespace.useMemo(() => {
-    const triggerProps = getTriggerProps();
-    if (!triggerProps) {
-      return triggerProps;
-    }
-    const mergedProps = useRenderElement.mergeProps(triggerProps, interactionTypeProps);
-    delete mergedProps.role;
-    delete mergedProps['aria-controls'];
+    const mergedProps = useRenderElement.mergeProps(listNavigation.trigger, dismiss.trigger, interactionTypeProps);
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = false;
     return mergedProps;
-  }, [getTriggerProps, interactionTypeProps]);
-  const popupProps = React__namespace.useMemo(() => getFloatingProps({
+  }, [listNavigation.trigger, dismiss.trigger, interactionTypeProps]);
+  const popupProps = React__namespace.useMemo(() => useRenderElement.mergeProps(useScrollLock.FOCUSABLE_POPUP_PROPS, {
+    id: floatingId,
+    role: 'menu',
+    'aria-labelledby': activeTriggerElement?.id,
     onMouseMove() {
       store.set('allowMouseEnter', true);
       if (parent.type === 'menu') {
@@ -2455,9 +2452,9 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
         relay(event);
       }
     }
-  }), [getFloatingProps, parent.type, store]);
-  const itemProps = React__namespace.useMemo(() => getItemProps(), [getItemProps]);
-  store.useSyncedValues({
+  }, typeahead.floating, listNavigation.floating, dismiss.floating), [activeTriggerElement, floatingId, parent.type, store, typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? useRenderElement.EMPTY_OBJECT;
+  useScrollLock.usePopupInteractionProps(store, {
     floatingRootContext,
     activeTriggerProps,
     inactiveTriggerProps,
@@ -2476,7 +2473,7 @@ const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
   });
   if (parent.type === undefined || parent.type === 'context-menu') {
     // set up a FloatingTree to provide the context to nested menus
-    return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingTree, {
+    return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingTree, {
       externalTree: floatingTreeRoot,
       children: content
     });
@@ -2487,7 +2484,7 @@ if (process.env.NODE_ENV !== "production") MenuRoot.displayName = "MenuRoot";
 
 /**
  * Groups all parts of a submenu.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -2517,7 +2514,7 @@ function useCompositeItem(params = {}) {
   const isHighlighted = highlightedIndex === index;
   const itemRef = React__namespace.useRef(null);
   const mergedRef = useRenderElement.useMergedRefs(ref, itemRef);
-  const compositeProps = React__namespace.useMemo(() => ({
+  const compositeProps = {
     tabIndex: isHighlighted ? 0 : -1,
     onFocus() {
       onHighlightedIndexChange(index);
@@ -2532,7 +2529,7 @@ function useCompositeItem(params = {}) {
         item.focus();
       }
     }
-  }), [isHighlighted, onHighlightedIndexChange, index, highlightItemOnHover]);
+  };
   return {
     compositeProps,
     compositeRef: mergedRef,
@@ -2547,6 +2544,7 @@ function CompositeItem(componentProps) {
   const {
     render,
     className,
+    style,
     state = useRenderElement.EMPTY_OBJECT,
     props = useRenderElement.EMPTY_ARRAY,
     refs = useRenderElement.EMPTY_ARRAY,
@@ -2579,6 +2577,53 @@ function findRootOwnerId(node) {
   return findRootOwnerId(floatingUi_utils_dom.getParentNode(node));
 }
 
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+function useTriggerFocusGuards(store, triggerElementRef) {
+  const preFocusGuardRef = React__namespace.useRef(null);
+  function handlePreFocusGuardFocus(event) {
+    ReactDOM__namespace.flushSync(() => {
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent, event.currentTarget));
+    });
+    const previousTabbable = useScrollLock.getTabbableBeforeElement(preFocusGuardRef.current);
+    previousTabbable?.focus();
+  }
+  function handleFocusTargetFocus(event) {
+    const positionerElement = store.select('positionerElement');
+    if (positionerElement && useScrollLock.isOutsideEvent(event, positionerElement)) {
+      store.context.beforeContentFocusGuardRef.current?.focus();
+    } else {
+      ReactDOM__namespace.flushSync(() => {
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent, event.currentTarget));
+      });
+      let nextTabbable = useScrollLock.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && useButton.contains(positionerElement, nextTabbable)) {
+        const prevTabbable = nextTabbable;
+        nextTabbable = useScrollLock.getNextTabbable(nextTabbable);
+        if (nextTabbable === prevTabbable) {
+          break;
+        }
+      }
+      nextTabbable?.focus();
+    }
+  }
+  return {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  };
+}
+
 /**
  * Returns `click` and `mousedown` handlers that fix the behavior of triggers of popups that are toggled by different events.
  * For example, a button that opens a popup on mousedown and closes it on click.
@@ -2624,10 +2669,11 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
+const MenuTrigger = useScrollLock.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     nativeButton = true,
     id: idProp,
@@ -2647,19 +2693,20 @@ const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(compo
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React__namespace.useRef(null);
   const parent = useMenuParent();
   const compositeRootContext = useButton.useCompositeRootContext(true);
-  const floatingTreeRootFromContext = InternalBackdrop.useFloatingTree();
+  const floatingTreeRootFromContext = useScrollLock.useFloatingTree();
   const floatingTreeRoot = React__namespace.useMemo(() => {
-    return floatingTreeRootFromContext ?? new InternalBackdrop.FloatingTreeStore();
+    return floatingTreeRootFromContext ?? new useScrollLock.FloatingTreeStore();
   }, [floatingTreeRootFromContext]);
-  const floatingNodeId = InternalBackdrop.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeId = InternalBackdrop.useFloatingParentNodeId();
+  const floatingNodeId = useScrollLock.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeId = useScrollLock.useFloatingParentNodeId();
   const {
     registerTrigger,
     isMountedByThisTrigger
-  } = ScrollAreaViewport.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+  } = useScrollLock.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
     payload,
     closeDelay,
     parent,
@@ -2730,14 +2777,15 @@ const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(compo
     },
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
 
   // Whether to ignore clicks to open the menu.
   // `lastOpenChangeReason` doesn't need to be reactive here, as we need to run this
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
-  const click = InternalBackdrop.useClick(floatingRootContext, {
+  const click = useScrollLock.useClick(floatingRootContext, {
     enabled: !disabled && parent.type !== 'context-menu',
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
@@ -2752,15 +2800,21 @@ const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(compo
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = InternalBackdrop.useInteractions([click, focus]);
+  const localInteractionProps = React__namespace.useMemo(() => useRenderElement.mergeProps(focus.reference, click.reference), [focus.reference, click.reference]);
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = useTriggerFocusGuards(store, triggerElementRef);
   const state = {
     disabled,
     open: isOpenedByThisTrigger
   };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const ref = [triggerRef, forwardedRef, buttonRef, registerTrigger, triggerElementRef];
-  const props = [localInteractionProps.getReferenceProps(), hoverProps ?? useRenderElement.EMPTY_OBJECT, rootTriggerProps, {
+  const props = [localInteractionProps, hoverProps ?? useRenderElement.EMPTY_OBJECT, rootTriggerProps, {
     'aria-haspopup': 'menu',
+    'aria-controls': popupId,
     id: thisTriggerId,
     onMouseDown: event => {
       if (store.select('open')) {
@@ -2779,36 +2833,9 @@ const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(compo
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const preFocusGuardRef = React__namespace.useRef(null);
-  const handlePreFocusGuardFocus = useButton.useStableCallback(event => {
-    ReactDOM__namespace.flushSync(() => {
-      store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = InternalBackdrop.getTabbableBeforeElement(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useButton.useStableCallback(event => {
-    const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && InternalBackdrop.isOutsideEvent(event, currentPositionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM__namespace.flushSync(() => {
-        store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = InternalBackdrop.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && useButton.contains(currentPositionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = InternalBackdrop.getNextTabbable(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
   const element = useRenderElement.useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
-    stateAttributesMapping: InternalBackdrop.pressableTriggerOpenStateMapping,
+    stateAttributesMapping: useScrollLock.pressableTriggerOpenStateMapping,
     state,
     ref,
     props
@@ -2818,10 +2845,11 @@ const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(compo
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: ref,
       props: props,
-      stateAttributesMapping: InternalBackdrop.pressableTriggerOpenStateMapping
+      stateAttributesMapping: useScrollLock.pressableTriggerOpenStateMapping
     });
   }
 
@@ -2830,12 +2858,12 @@ const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(compo
 
   if (isOpenedByThisTrigger) {
     return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FocusGuard, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(useScrollLock.FocusGuard, {
         ref: preFocusGuardRef,
         onFocus: handlePreFocusGuardFocus
       }, `${thisTriggerId}-pre-focus-guard`), /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
         children: element
-      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FocusGuard, {
+      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FocusGuard, {
         ref: store.context.triggerFocusTargetRef,
         onFocus: handleFocusTargetFocus
       }, `${thisTriggerId}-post-focus-guard`)]
@@ -2857,7 +2885,7 @@ function useStickIfOpen(open, openReason) {
       // Only allow "patient" clicks to close the menu if it's open.
       // If they clicked within 500ms of the menu opening, keep it open.
       setStickIfOpen(true);
-      stickIfOpenTimeout.start(InternalBackdrop.PATIENT_CLICK_THRESHOLD, () => {
+      stickIfOpenTimeout.start(useScrollLock.PATIENT_CLICK_THRESHOLD, () => {
         setStickIfOpen(false);
       });
     } else if (!open) {
@@ -2901,10 +2929,11 @@ function useMenuParent() {
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function SubmenuTriggerComponent(componentProps, forwardedRef) {
+const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function MenuSubmenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     label,
     id: idProp,
     nativeButton = false,
@@ -2914,7 +2943,9 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
-  const listItem = useCompositeListItem.useCompositeListItem();
+  const listItem = useCompositeListItem.useCompositeListItem({
+    label
+  });
   const menuPositionerContext = useMenuPositionerContext();
   const {
     store
@@ -2923,7 +2954,8 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const baseRegisterTrigger = ScrollAreaViewport.useTriggerRegistration(thisTriggerId, store);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
+  const baseRegisterTrigger = useScrollLock.useTriggerRegistration(thisTriggerId, store);
   const registerTrigger = React__namespace.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
     if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
@@ -2946,16 +2978,29 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   }
   store.useSyncedValue('closeDelay', closeDelay);
   const parentMenuStore = submenuRootContext.parentMenu;
+  const rootDisabled = store.useState('disabled');
+  const parentDisabled = parentMenuStore.useState('disabled');
+  const disabled = disabledProp || rootDisabled || parentDisabled;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useButton.useIsoLayoutEffect(() => {
+      const element = triggerElementRef.current;
+      if (element && isElementDisabled.isElementDisabled(element) && !disabled) {
+        const ownerStackMessage = useButton.SafeReact.captureOwnerStack?.() || '';
+        useRenderElement.warn(`A disabled element was detected on <Menu.SubmenuTrigger>. To properly disable the trigger, use the \`disabled\` prop on the component instead of setting it on the rendered element.${ownerStackMessage}`);
+      }
+    });
+  }
   const itemProps = parentMenuStore.useState('itemProps');
   const highlighted = parentMenuStore.useState('isActive', listItem.index);
   const itemMetadata = React__namespace.useMemo(() => ({
     type: 'submenu-trigger',
     setActive() {
-      parentMenuStore.set('activeIndex', listItem.index);
+      if (parentMenuStore.select('highlightItemOnHover')) {
+        parentMenuStore.set('activeIndex', listItem.index);
+      }
     }
   }), [parentMenuStore, listItem.index]);
-  const rootDisabled = store.useState('disabled');
-  const disabled = disabledProp || rootDisabled;
   const {
     getItemProps,
     itemRef
@@ -2968,10 +3013,9 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     typingRef: parentMenuStore.context.typingRef,
     nativeButton,
     itemMetadata,
-    nodeId: menuPositionerContext?.nodeId
+    nodeId: menuPositionerContext?.context.nodeId
   });
   const hoverEnabled = store.useState('hoverEnabled');
-  const allowMouseEnter = parentMenuStore.useState('allowMouseEnter');
   const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
     enabled: hoverEnabled && openOnHover && !disabled,
     handleClose: safePolygon({
@@ -2980,21 +3024,23 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     mouseOnly: true,
     move: true,
     restMs: delay,
-    delay: allowMouseEnter ? {
+    delay: {
       open: delay,
       close: closeDelay
-    } : 0,
+    },
+    shouldOpen: delay > 0 ? () => parentMenuStore.select('allowMouseEnter') : undefined,
     triggerElementRef,
-    externalTree: floatingTreeRoot
+    externalTree: floatingTreeRoot,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
-  const click = InternalBackdrop.useClick(floatingRootContext, {
+  const click = useScrollLock.useClick(floatingRootContext, {
     enabled: !disabled,
     event: 'mousedown',
     toggle: !openOnHover,
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = InternalBackdrop.useInteractions([click]);
+  const localInteractionProps = click.reference ?? useRenderElement.EMPTY_OBJECT;
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -3004,8 +3050,9 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   };
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping,
-    props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
+    stateAttributesMapping: useScrollLock.triggerOpenStateMapping,
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
+      'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
         if (highlighted) {