@jobber/components 8.23.0 → 8.23.1

package/dist/MenuSubmenuTrigger-es.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { a as useRefWithInit, f as formatErrorMessage, u as useRenderElement, m as mergeProps, b as useMergedRefs, E as EMPTY_OBJECT, c as EMPTY_ARRAY } from './useRenderElement-es.js';
-import { H as createAttribute, b as useFloatingTree, u as useFloatingParentNodeId, J as getNodeChildren, p as popupStateMapping, F as FloatingFocusManager, y as FloatingPortal, K as POPUP_COLLISION_AVOIDANCE, I as InternalBackdrop, A as inertValue, L as FloatingNode, B as DROPDOWN_COLLISION_AVOIDANCE, o as createSelector, R as ReactStore, P as PopupTriggerMap, M as FloatingTreeStore, N as fastComponent, w as useOnFirstRender, O as useFloatingNodeId, q as useOpenInteractionType, z as useScrollLock, t as useDismiss, n as useDirection, T as TYPEAHEAD_RESET_MS, v as useInteractions, Q as FloatingTree, U as fastComponentRef, s as useClick, V as getTabbableBeforeElement, W as isOutsideEvent, X as getTabbableAfterElement, Y as getNextTabbable, x as pressableTriggerOpenStateMapping, Z as FocusGuard, _ as PATIENT_CLICK_THRESHOLD, G as triggerOpenStateMapping } from './InternalBackdrop-es.js';
-import { a0 as isMouseLikePointerType, h as useTimeout, g as getTarget, a1 as isTypeableElement, a2 as matchesFocusVisible, a3 as isTargetInsideEnabledTrigger, d as createChangeEventDetails, a4 as triggerFocus, q as activeElement, r as contains, a5 as isMac, a6 as isSafari, o as ownerDocument, a7 as triggerPress, a8 as escapeKey, D as useOnMount, a9 as TYPEABLE_SELECTOR, T as Timeout, b as useStableCallback, a as useIsoLayoutEffect, aa as triggerHover, n as useValueAsRef, t as transitionStatusMapping, Z as itemPress, c as useButton, u as useBaseUiId, f as useOpenChangeComplete, U as outsidePress, ab as useAnimationsFinished, ac as siblingOpen, E as useControlled, k as useTransitionStatus, l as useId, y as focusOut, v as listNavigation, i as imperativeAction, ad as useCompositeRootContext, V as cancelOpen } from './useButton-es.js';
+import { a as useRefWithInit, f as formatErrorMessage, u as useRenderElement, m as mergeProps, c as useMergedRefs, E as EMPTY_OBJECT, b as EMPTY_ARRAY, w as warn } from './useRenderElement-es.js';
+import { X as mergeCleanups, Y as isTypeableElement, Z as matchesFocusVisible, _ as isTargetInsideEnabledTrigger, $ as createAttribute, J as webkit, d as useFloatingTree, u as useFloatingParentNodeId, a0 as isInteractiveElement, a1 as getNodeChildren, p as popupStateMapping, a as FloatingFocusManager, E as FloatingPortal, a2 as POPUP_COLLISION_AVOIDANCE, I as InternalBackdrop, G as inertValue, a3 as FloatingNode, H as DROPDOWN_COLLISION_AVOIDANCE, t as createSelector, R as ReactStore, P as PopupTriggerMap, a4 as FloatingTreeStore, a5 as fastComponent, a6 as useInitialOpenSync, a7 as useFloatingNodeId, v as useOpenInteractionType, L as useImplicitActiveTrigger, M as useOpenStateTransitions, a8 as attachPreventUnmountOnClose, O as setPopupOpenState, a9 as useSyncedFloatingRootContext, y as useDismiss, r as useDirection, aa as TYPEAHEAD_RESET_MS, F as FOCUSABLE_POPUP_PROPS, N as usePopupInteractionProps, ab as FloatingTree, ac as getTabbableBeforeElement, ad as isOutsideEvent, ae as getTabbableAfterElement, af as getNextTabbable, ag as fastComponentRef, T as useTriggerDataForwarding, x as useClick, B as pressableTriggerOpenStateMapping, ah as FocusGuard, ai as PATIENT_CLICK_THRESHOLD, aj as useTriggerRegistration, W as triggerOpenStateMapping } from './useScrollLock-es.js';
+import { Y as isMouseLikePointerType, h as useTimeout, B as addEventListener, g as getTarget, d as createChangeEventDetails, Z as triggerFocus, p as activeElement, o as ownerDocument, q as contains, _ as mac, $ as triggerPress, a0 as escapeKey, L as useOnMount, T as Timeout, b as useStableCallback, a as useIsoLayoutEffect, a1 as triggerHover, m as useValueAsRef, t as transitionStatusMapping, V as itemPress, c as useButton, u as useBaseUiId, f as useOpenChangeComplete, Q as outsidePress, a2 as useAnimationsFinished, a3 as siblingOpen, z as useControlled, k as useTransitionStatus, l as useId, v as focusOut, r as listNavigation, i as imperativeAction, a4 as useCompositeRootContext, R as cancelOpen, S as SafeReact } from './useButton-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { e as useCompositeListItem, d as getDisabledMountTransitionStyles, c as useAnchorPositioning, f as adaptiveOrigin, C as CompositeList, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds } from './useCompositeListItem-es.js';
-import { u as useToolbarRootContext } from './ToolbarRootContext-es.js';
-import { C as COMPOSITE_KEYS } from './CSPContext-es.js';
+import { h as useCompositeListItem, f as getDisabledMountTransitionStyles, d as useAnchorPositioning, i as adaptiveOrigin, c as useAnchoredPopupScrollLock, e as usePositioner, C as CompositeList, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds } from './useCompositeListItem-es.js';
+import { u as useToolbarRootContext, i as isElementDisabled } from './isElementDisabled-es.js';
+import { C as COMPOSITE_KEYS } from './scrollEdges-es.js';
 import { o as getWindow, b as isElement, a as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils.dom-es.js';
-import { p as popupStoreSelectors, l as createInitialPopupStoreState, m as useImplicitActiveTrigger, n as useOpenStateTransitions, o as useSyncedFloatingRootContext, q as useRole, r as useTriggerDataForwarding, s as useTriggerRegistration } from './ScrollAreaViewport-es.js';
+import { p as popupStoreSelectors, l as createInitialPopupStoreState } from './ScrollAreaViewport-es.js';
 import * as ReactDOM from 'react-dom';
 
 function resolveValue(value, pointerType) {
@@ -35,28 +35,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 = isMac && isSafari;
+const isMacSafari = mac && 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.useRef(false);
   // Track which reference should be blocked from re-opening after Escape/press dismissal.
   const blockedReferenceRef = React.useRef(null);
-  const timeout = useTimeout();
   const keyboardModalityRef = React.useRef(true);
+  const timeout = useTimeout();
   React.useEffect(() => {
     const domReference = store.select('domReferenceElement');
     if (!enabled) {
@@ -79,18 +82,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 mergeCleanups(addEventListener(win, 'blur', onBlur), isMacSafari && addEventListener(win, 'keydown', onKeyDown, true), isMacSafari && addEventListener(win, 'pointerdown', onPointerDown, true));
   }, [store, enabled]);
   React.useEffect(() => {
     if (!enabled) {
@@ -110,101 +102,100 @@ function useFocus(context, props = {}) {
       events.off('openchange', onOpenChangeLocal);
     };
   }, [events, enabled, store]);
-  const reference = React.useMemo(() => ({
-    onMouseLeave() {
+  const reference = React.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 = getTarget(event.nativeEvent);
-      if (isElement(target)) {
-        // Safari fails to match `:focus-visible` if focus was initially
-        // outside the document.
-        if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+    }
+    return {
+      onMouseLeave() {
+        resetBlockedFocus();
+      },
+      onFocus(event) {
+        const focusTarget = event.currentTarget;
+        if (blockFocusRef.current) {
+          if (blockedReferenceRef.current === focusTarget) {
             return;
           }
-        } else if (!matchesFocusVisible(target)) {
-          return;
+          resetBlockedFocus();
         }
-      }
-      const movedFromOtherEnabledTrigger = 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, createChangeEventDetails(triggerFocus, nativeEvent, currentTarget));
-        return;
-      }
-      timeout.start(delayValue, () => {
-        if (blockFocusRef.current) {
-          return;
+        const target = getTarget(event.nativeEvent);
+        if (isElement(target)) {
+          // Safari fails to match `:focus-visible` if focus was initially
+          // outside the document.
+          if (isMacSafari && !event.relatedTarget) {
+            if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+              return;
+            }
+          } else if (!matchesFocusVisible(target)) {
+            return;
+          }
         }
-        store.setOpen(true, createChangeEventDetails(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 = isElement(relatedTarget) && relatedTarget.hasAttribute(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 = activeElement(domReference ? domReference.ownerDocument : document);
-
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === domReference) {
+        const movedFromOtherEnabledTrigger = 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, createChangeEventDetails(triggerFocus, nativeEvent, currentTarget));
           return;
         }
+        timeout.start(delayValue, () => {
+          if (blockFocusRef.current) {
+            return;
+          }
+          store.setOpen(true, createChangeEventDetails(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 = isElement(relatedTarget) && relatedTarget.hasAttribute(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 = activeElement(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 (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || 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 (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || 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 (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
-          return;
-        }
-        store.setOpen(false, createChangeEventDetails(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 (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+            return;
+          }
+          store.setOpen(false, createChangeEventDetails(triggerFocus, nativeEvent));
+        });
+      }
+    };
+  }, [dataRef, delay, store, timeout]);
   return React.useMemo(() => enabled ? {
     reference,
     trigger: reference
   } : {}, [enabled, reference]);
 }
 
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`;
-function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
 class HoverInteraction {
   constructor() {
     this.pointerType = undefined;
@@ -231,13 +222,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;
@@ -249,18 +245,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 = useRefWithInit(HoverInteraction.create).current;
   const data = store.context.dataRef.current;
+  const instance = useRefWithInit(() => data.hoverInteractionState ?? HoverInteraction.create()).current;
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }
@@ -272,6 +273,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');
@@ -279,47 +285,19 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   const {
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    closeDelay: closeDelayProp = 0
-  } = parameters;
-  const instance = useHoverInteractionSharedState(store);
   const tree = useFloatingTree();
   const parentId = useFloatingParentNodeId();
+  const instance = useHoverInteractionSharedState(store);
+  const childClosedTimeout = useTimeout();
   const isClickLikeOpenEvent$1 = useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = useStableCallback(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
-  });
-  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
-    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+    return isHoverOpenEvent(dataRef.current.openEvent?.type);
   });
-  const closeWithDelay = React.useCallback(event => {
-    const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
-    const close = () => {
-      store.setOpen(false, createChangeEventDetails(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 = useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = useStableCallback(event => {
-    const target = getTarget(event);
-    if (!isInteractiveElement(target)) {
-      instance.interactedInside = false;
-      return;
-    }
-    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
-  });
   useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
@@ -343,7 +321,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,
@@ -355,11 +339,34 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = useTimeout();
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
+    function hasParentChildren() {
+      return !!(tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0);
+    }
+    function closeWithDelay(event) {
+      const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
+      const close = () => {
+        store.setOpen(false, createChangeEventDetails(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 = getTarget(event);
+      if (!isInteractiveElement(target)) {
+        instance.interactedInside = false;
+        return;
+      }
+      instance.interactedInside = target?.closest('[aria-haspopup]') != null;
+    }
     function onFloatingMouseEnter() {
       instance.openChangeTimeout.clear();
       childClosedTimeout.clear();
@@ -367,15 +374,21 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (hasParentChildren() && tree) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
-      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      if (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 && isElement(relatedTarget) && getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => contains(node.context?.elements.floating, relatedTarget));
+      if (isMovingIntoDescendantFloating) {
+        return;
+      }
 
       // If the safePolygon handler is active, let it handle the close logic.
       if (instance.handler) {
@@ -383,12 +396,12 @@ function useHoverFloatingInteraction(context, parameters = {}) {
         return;
       }
       clearPointerEvents();
-      if (!isClickLikeOpenEvent$1()) {
+      if (isHoverOpen() && !isClickLikeOpenEvent$1()) {
         closeWithDelay(event);
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || 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.
@@ -399,20 +412,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 mergeCleanups(floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && 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 = {
@@ -424,11 +427,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,
@@ -439,23 +437,29 @@ function useHoverReferenceInteraction(context, props = {}) {
     triggerElementRef = EMPTY_REF,
     externalTree,
     isActiveTrigger = true,
-    getHandleCloseContext
+    getHandleCloseContext,
+    isClosing,
+    shouldOpen: shouldOpenProp
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const {
+    dataRef,
+    events
+  } = store.context;
   const tree = useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
+  const isHoverCloseActiveRef = React.useRef(false);
   const handleCloseRef = useValueAsRef(handleClose);
   const delayRef = useValueAsRef(delay);
   const restMsRef = useValueAsRef(restMs);
   const enabledRef = useValueAsRef(enabled);
-  if (isActiveTrigger) {
-    // eslint-disable-next-line no-underscore-dangle
-    instance.handleCloseOptions = handleCloseRef.current?.__options;
-  }
+  const shouldOpenRef = useValueAsRef(shouldOpenProp);
+  const isClosingRef = useValueAsRef(isClosing);
   const isClickLikeOpenEvent$1 = useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
-    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  const checkShouldOpen = useStableCallback(() => {
+    return shouldOpenRef.current?.() !== false;
   });
   const isOverInactiveTrigger = useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
@@ -472,19 +476,6 @@ function useHoverReferenceInteraction(context, props = {}) {
     const targetElement = target;
     return allTriggers.hasMatchingElement(trigger => contains(trigger, targetElement)) && (!currentDomReference || !contains(currentDomReference, targetElement));
   });
-  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, createChangeEventDetails(triggerHover, event));
-        tree?.events.emit('floating.closed', event);
-      });
-    } else if (runElseBranch) {
-      instance.openChangeTimeout.clear();
-      store.setOpen(false, createChangeEventDetails(triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    }
-  }, [delayRef, store, instance, tree]);
   const cleanupMouseMoveHandler = useStableCallback(() => {
     if (!instance.handler) {
       return;
@@ -493,10 +484,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
-  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
   const clearPointerEvents = useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
+  if (isActiveTrigger) {
+    // eslint-disable-next-line no-underscore-dangle
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
+  }
+  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
@@ -506,11 +501,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
+        isHoverCloseActiveRef.current = details.reason === triggerHover;
         cleanupMouseMoveHandler();
         instance.openChangeTimeout.clear();
         instance.restTimeout.clear();
         instance.blockMouseMove = true;
         instance.restTimeoutPending = false;
+      } else {
+        isHoverCloseActiveRef.current = false;
       }
     }
     events.on('openchange', onOpenChangeLocal);
@@ -522,6 +520,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, createChangeEventDetails(triggerHover, event));
+          tree?.events.emit('floating.closed', event);
+        });
+      } else if (runElseBranch) {
+        instance.openChangeTimeout.clear();
+        store.setOpen(false, createChangeEventDetails(triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      }
+    }
     const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
     if (!isElement(trigger)) {
       return undefined;
@@ -536,27 +547,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 = 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 (isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+        for (const triggerElement of store.context.triggerElements.elements()) {
+          if (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 (isElement(currentTarget) && isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && 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 && isElement(triggerNode) && isElement(currentDomReference) && 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, createChangeEventDetails(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, createChangeEventDetails(triggerHover, event, triggerNode));
+        }
+        return;
+      }
+      if (isRestOnlyDelay) {
+        return;
+      }
+      if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
-          if (shouldOpen) {
+          if (shouldOpen && checkShouldOpen()) {
             store.setOpen(true, createChangeEventDetails(triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, createChangeEventDetails(triggerHover, event, triggerNode));
+        if (checkShouldOpen()) {
+          store.setOpen(true, createChangeEventDetails(triggerHover, event, triggerNode));
+        }
       }
     }
     function onMouseLeave(event) {
@@ -570,8 +611,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 (isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
         return;
       }
       if (handleCloseRef.current && handleCloseContextBase) {
@@ -602,20 +642,12 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
     }
     if (move) {
-      trigger.addEventListener('mousemove', onMouseEnter, {
+      return mergeCleanups(addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      });
+      }), addEventListener(trigger, 'mouseenter', onMouseEnter), 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 mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), 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.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -637,6 +669,17 @@ function useHoverReferenceInteraction(context, props = {}) {
         if (mouseOnly && !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;
@@ -654,7 +697,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, createChangeEventDetails(triggerHover, nativeEvent, trigger));
           }
         }
@@ -670,7 +713,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 */
@@ -909,6 +952,7 @@ function safePolygon(options = {}) {
 
   // eslint-disable-next-line no-underscore-dangle
   fn.__options = {
+    ...options,
     blockPointerEvents
   };
   return fn;
@@ -957,8 +1001,9 @@ const stateAttributesMapping$1 = {
  */
 const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1009,12 +1054,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.useMemo(() => ({
     id,
     role: 'menuitem',
-    tabIndex: highlighted ? 0 : -1,
+    tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
       if (event.key === ' ' && typingRef?.current) {
         event.preventDefault();
@@ -1050,7 +1096,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 && !isMac && event.button === 2) {
+        if (isContextMenu && !mac && event.button === 2) {
           return;
         }
       }
@@ -1062,7 +1108,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 = {
@@ -1071,7 +1117,7 @@ const REGULAR_ITEM = {
 function useMenuItem(params) {
   const {
     closeOnClick,
-    disabled = false,
+    disabled: disabledProp = false,
     highlighted,
     id,
     store,
@@ -1080,6 +1126,8 @@ function useMenuItem(params) {
     itemMetadata,
     nodeId
   } = params;
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || rootDisabled;
   const itemRef = React.useRef(null);
   const {
     getButtonProps,
@@ -1156,7 +1204,7 @@ if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuG
 function useMenuGroupRootContext() {
   const context = React.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>.' : 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>.' : formatErrorMessage(31));
   }
   return context;
 }
@@ -1165,12 +1213,10 @@ const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(componentProp
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState(undefined);
-  const context = React.useMemo(() => ({
-    setLabelId
-  }), [setLabelId]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     props: {
@@ -1180,7 +1226,7 @@ const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(componentProp
     }
   });
   return /*#__PURE__*/jsx(MenuGroupContext.Provider, {
-    value: context,
+    value: setLabelId,
     children: element
   });
 });
@@ -1192,17 +1238,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.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
+const MenuGroupLabel = /*#__PURE__*/React.forwardRef(function MenuGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
-  const {
-    setLabelId
-  } = useMenuGroupRootContext();
+  const setLabelId = useMenuGroupRootContext();
   useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
@@ -1235,6 +1280,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componentProps,
     nativeButton = false,
     disabled = false,
     closeOnClick = true,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
@@ -1257,7 +1303,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componentProps,
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = {
@@ -1285,6 +1331,7 @@ const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(compone
     id: idProp,
     label,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const linkRef = React.useRef(null);
@@ -1292,7 +1339,7 @@ const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(compone
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const nodeId = menuPositionerContext?.nodeId;
+  const nodeId = menuPositionerContext?.context.nodeId;
   const id = useBaseUiId(idProp);
   const {
     store
@@ -1319,9 +1366,9 @@ const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(compone
   function getItemProps(externalProps) {
     return mergeProps(commonProps, externalProps, getButtonProps);
   }
-  const state = React.useMemo(() => ({
+  const state = {
     highlighted
-  }), [highlighted]);
+  };
   return useRenderElement('a', componentProps, {
     state,
     props: [itemProps, elementProps, getItemProps],
@@ -1345,6 +1392,7 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;
@@ -1369,6 +1417,9 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
   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';
   useOpenChangeComplete({
     open,
@@ -1388,12 +1439,13 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
       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.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     transitionStatus,
     side,
@@ -1402,9 +1454,6 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
@@ -1425,6 +1474,7 @@ const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProp
   }
   return /*#__PURE__*/jsx(FloatingFocusManager, {
     context: floatingContext,
+    openInteractionType: openMethod,
     modal: isContextMenu,
     disabled: !mounted,
     returnFocus: finalFocus === undefined ? returnFocus : finalFocus,
@@ -1488,6 +1538,7 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance: collisionAvoidanceProp = DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1501,6 +1552,7 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
   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');
@@ -1532,7 +1584,7 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
     computedAlign = computedAlign ?? 'start';
     collisionAvoidance = componentProps.collisionAvoidance ?? 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';
@@ -1557,20 +1609,6 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
     externalTree: floatingTreeRoot,
     adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
-  const positionerProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioner.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioner.positionerStyles]);
   React.useEffect(() => {
     function onMenuOpenChange(details) {
       if (details.open) {
@@ -1678,19 +1716,16 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const contextValue = React.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('div', componentProps, {
-    state,
-    stateAttributesMapping: popupStateMapping,
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  const menubarModal = parent.type === 'menubar' && parent.context.modal;
+  const popupModal = modal && lastOpenChangeReason !== triggerHover;
+  useAnchoredPopupScrollLock(open && (menubarModal || popupModal), openMethod === 'touch', positionerElement, triggerElement);
+  const element = 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 !== triggerHover || parent.type === 'menubar' && parent.context.modal);
 
@@ -1702,7 +1737,7 @@ const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(com
     backdropCutout = triggerElement;
   }
   return /*#__PURE__*/jsxs(MenuPositionerContext.Provider, {
-    value: contextValue,
+    value: positioner,
     children: [shouldRenderBackdrop && /*#__PURE__*/jsx(InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
       inert: inertValue(!open),
@@ -1743,16 +1778,18 @@ const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     defaultValue,
     onValueChange: onValueChangeProp,
     disabled = false,
+    style,
+    'aria-labelledby': ariaLabelledByProp,
     ...elementProps
   } = componentProps;
+  const [labelId, setLabelId] = React.useState(undefined);
   const [value, setValueUnwrapped] = useControlled({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = useStableCallback(onValueChangeProp);
   const setValue = useStableCallback((newValue, eventDetails) => {
-    onValueChange?.(newValue, eventDetails);
+    onValueChangeProp?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -1766,6 +1803,7 @@ const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     ref: forwardedRef,
     props: {
       role: 'group',
+      'aria-labelledby': ariaLabelledByProp ?? labelId,
       'aria-disabled': disabled || undefined,
       ...elementProps
     }
@@ -1775,9 +1813,12 @@ const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     setValue,
     disabled
   }), [value, setValue, disabled]);
-  return /*#__PURE__*/jsx(MenuRadioGroupContext.Provider, {
-    value: context,
-    children: element
+  return /*#__PURE__*/jsx(MenuGroupContext.Provider, {
+    value: setLabelId,
+    children: /*#__PURE__*/jsx(MenuRadioGroupContext.Provider, {
+      value: context,
+      children: element
+    })
   });
 }));
 if (process.env.NODE_ENV !== "production") MenuRadioGroup.displayName = "MenuRadioGroup";
@@ -1802,6 +1843,7 @@ const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioItem(compo
     disabled: disabledProp = false,
     closeOnClick = false,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
@@ -1831,7 +1873,7 @@ const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioItem(compo
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = React.useMemo(() => ({
@@ -1839,13 +1881,12 @@ const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioItem(compo
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useStableCallback(event => {
-    const details = {
-      ...createChangeEventDetails(itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = createChangeEventDetails(itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     setSelectedValue(value, details);
-  });
+  }
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: itemMapping,
@@ -1873,6 +1914,7 @@ const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function MenuRadioI
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;
@@ -1925,7 +1967,9 @@ const selectors = {
   ...popupStoreSelectors,
   disabled: createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
   modal: createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  openMethod: createSelector(state => state.openMethod),
   allowMouseEnter: createSelector(state => state.allowMouseEnter),
+  highlightItemOnHover: createSelector(state => state.highlightItemOnHover),
   stickIfOpen: createSelector(state => state.stickIfOpen),
   parent: createSelector(state => state.parent),
   rootId: createSelector(state => {
@@ -2034,7 +2078,9 @@ function createInitialState() {
     ...createInitialPopupStoreState(),
     disabled: false,
     modal: true,
+    openMethod: null,
     allowMouseEnter: false,
+    highlightItemOnHover: true,
     stickIfOpen: true,
     parent: {
       type: undefined
@@ -2116,46 +2162,19 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
     triggerIdProp,
     parent: parentFromContext
   });
-
-  // Support initially open state when uncontrolled
-  useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
-      store.update({
-        open: true,
-        activeTriggerId: defaultTriggerIdProp
-      });
-    }
-  });
+  useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerIdProp);
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const rootId = useId();
+  const floatingId = useId();
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = useFloatingNodeId(floatingTreeRoot);
   const floatingParentNodeIdFromContext = useFloatingParentNodeId();
-  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 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');
@@ -2163,22 +2182,27 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
   const payload = store.useState('payload');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const openEventRef = React.useRef(null);
+  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
+  const allowOutsidePressDismissalTimeout = useTimeout();
+  const allowTouchToCloseRef = React.useRef(true);
+  const allowTouchToCloseTimeout = 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.');
     }
   }
-  store.useSyncedValues({
-    disabled: disabledProp,
-    modal: parent.type === undefined ? modalProp : undefined,
-    rootId: useId()
-  });
   const {
     openMethod,
     triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
+  store.useSyncedValues({
+    disabled: disabledProp,
+    highlightItemOnHover,
+    modal: parent.type === undefined ? modalProp : undefined,
+    openMethod,
+    rootId
+  });
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
@@ -2188,8 +2212,25 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
       stickIfOpen: true
     });
   });
-  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = useTimeout();
+  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.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -2210,22 +2251,17 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  useScrollLock(open && modal && lastOpenChangeReason !== triggerHover && openMethod !== 'touch', positionerElement);
   useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
-  const allowTouchToCloseRef = React.useRef(true);
-  const allowTouchToCloseTimeout = useTimeout();
   const setOpen = useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
     }
-    eventDetails.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
+    const shouldPreventUnmountOnClose = attachPreventUnmountOnClose(eventDetails);
 
     // Do not immediately reset the activeTriggerId to allow
     // exit animations to play and focus to be returned correctly.
@@ -2236,31 +2272,12 @@ const MenuRoot = 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.
@@ -2280,14 +2297,7 @@ const MenuRoot = 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;
-    }
+    setPopupOpenState(updatedState, nextOpen, eventDetails.trigger, shouldPreventUnmountOnClose());
     store.update(updatedState);
     if (parent.type === 'menubar' && (reason === triggerFocus || reason === focusOut || reason === triggerHover || reason === listNavigation || reason === siblingOpen)) {
       store.set('instantType', 'group');
@@ -2297,33 +2307,13 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
       store.set('instantType', undefined);
     }
   });
-  const createMenuEventDetails = React.useCallback(reason => {
-    const details = createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  }, [store]);
-  const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createMenuEventDetails(imperativeAction));
-  }, [store, createMenuEventDetails]);
-  React.useImperativeHandle(actionsRef, () => ({
-    unmount: forceUnmount,
-    close: handleImperativeClose
-  }), [forceUnmount, handleImperativeClose]);
-  let ctx;
-  if (parent.type === 'context-menu') {
-    ctx = parent.context;
-  }
-  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
-  React.useImperativeHandle(ctx?.actionsRef, () => ({
-    setOpen
-  }), [setOpen]);
   const floatingRootContext = useSyncedFloatingRootContext({
     popupStore: store,
+    floatingId,
+    nested: floatingParentNodeIdFromContext != null,
     onOpenChange: setOpen
   });
-  floatingEvents = floatingRootContext.context.events;
+  const floatingEvents = floatingRootContext.context.events;
   React.useEffect(() => {
     const handleSetOpenEvent = ({
       open: nextOpen,
@@ -2334,6 +2324,21 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
       floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
   }, [floatingEvents, setOpen]);
+  const handleImperativeClose = React.useCallback(() => {
+    store.setOpen(false, createChangeEventDetails(imperativeAction));
+  }, [store]);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  let ctx;
+  if (parent.type === 'context-menu') {
+    ctx = parent.context;
+  }
+  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
+  React.useImperativeHandle(ctx?.actionsRef, () => ({
+    setOpen
+  }), [setOpen]);
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
@@ -2347,9 +2352,6 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
     },
     externalTree: nested ? floatingTreeRoot : undefined
   });
-  const role = useRole(floatingRootContext, {
-    role: 'menu'
-  });
   const direction = useDirection();
   const setActiveIndex = React.useCallback(index => {
     if (store.select('activeIndex') === index) {
@@ -2372,10 +2374,11 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
     externalTree: nested ? floatingTreeRoot : undefined,
     focusItemOnHover: highlightItemOnHover
   });
-  const onTypingChange = React.useCallback(nextTyping => {
+  const onTyping = React.useCallback(nextTyping => {
     store.context.typingRef.current = nextTyping;
   }, [store]);
   const typeahead = useTypeahead(floatingRootContext, {
+    enabled: !disabled,
     listRef: store.context.itemLabels,
     elementsRef: store.context.itemDomElements,
     activeIndex,
@@ -2385,34 +2388,28 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
         store.set('activeIndex', index);
       }
     },
-    onTypingChange
+    onTyping
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps,
-    getTriggerProps
-  } = useInteractions([dismiss, role, listNavigation$1, typeahead]);
   const activeTriggerProps = React.useMemo(() => {
-    const mergedProps = mergeProps(getReferenceProps(), {
+    const mergedProps = mergeProps(typeahead.reference, listNavigation$1.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$1.reference, dismiss.reference, interactionTypeProps, open]);
   const inactiveTriggerProps = React.useMemo(() => {
-    const triggerProps = getTriggerProps();
-    if (!triggerProps) {
-      return triggerProps;
-    }
-    const mergedProps = mergeProps(triggerProps, interactionTypeProps);
-    delete mergedProps.role;
-    delete mergedProps['aria-controls'];
+    const mergedProps = mergeProps(listNavigation$1.trigger, dismiss.trigger, interactionTypeProps);
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = false;
     return mergedProps;
-  }, [getTriggerProps, interactionTypeProps]);
-  const popupProps = React.useMemo(() => getFloatingProps({
+  }, [listNavigation$1.trigger, dismiss.trigger, interactionTypeProps]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, {
+    id: floatingId,
+    role: 'menu',
+    'aria-labelledby': activeTriggerElement?.id,
     onMouseMove() {
       store.set('allowMouseEnter', true);
       if (parent.type === 'menu') {
@@ -2433,9 +2430,9 @@ const MenuRoot = fastComponent(function MenuRoot(props) {
         relay(event);
       }
     }
-  }), [getFloatingProps, parent.type, store]);
-  const itemProps = React.useMemo(() => getItemProps(), [getItemProps]);
-  store.useSyncedValues({
+  }, typeahead.floating, listNavigation$1.floating, dismiss.floating), [activeTriggerElement, floatingId, parent.type, store, typeahead.floating, listNavigation$1.floating, dismiss.floating]);
+  const itemProps = listNavigation$1.item ?? EMPTY_OBJECT;
+  usePopupInteractionProps(store, {
     floatingRootContext,
     activeTriggerProps,
     inactiveTriggerProps,
@@ -2465,7 +2462,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)
  */
@@ -2495,7 +2492,7 @@ function useCompositeItem(params = {}) {
   const isHighlighted = highlightedIndex === index;
   const itemRef = React.useRef(null);
   const mergedRef = useMergedRefs(ref, itemRef);
-  const compositeProps = React.useMemo(() => ({
+  const compositeProps = {
     tabIndex: isHighlighted ? 0 : -1,
     onFocus() {
       onHighlightedIndexChange(index);
@@ -2510,7 +2507,7 @@ function useCompositeItem(params = {}) {
         item.focus();
       }
     }
-  }), [isHighlighted, onHighlightedIndexChange, index, highlightItemOnHover]);
+  };
   return {
     compositeProps,
     compositeRef: mergedRef,
@@ -2525,6 +2522,7 @@ function CompositeItem(componentProps) {
   const {
     render,
     className,
+    style,
     state = EMPTY_OBJECT,
     props = EMPTY_ARRAY,
     refs = EMPTY_ARRAY,
@@ -2557,6 +2555,53 @@ function findRootOwnerId(node) {
   return findRootOwnerId(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.useRef(null);
+  function handlePreFocusGuardFocus(event) {
+    ReactDOM.flushSync(() => {
+      store.setOpen(false, createChangeEventDetails(focusOut, event.nativeEvent, event.currentTarget));
+    });
+    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
+    previousTabbable?.focus();
+  }
+  function handleFocusTargetFocus(event) {
+    const positionerElement = store.select('positionerElement');
+    if (positionerElement && isOutsideEvent(event, positionerElement)) {
+      store.context.beforeContentFocusGuardRef.current?.focus();
+    } else {
+      ReactDOM.flushSync(() => {
+        store.setOpen(false, createChangeEventDetails(focusOut, event.nativeEvent, event.currentTarget));
+      });
+      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && contains(positionerElement, nextTabbable)) {
+        const prevTabbable = nextTabbable;
+        nextTabbable = 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.
@@ -2606,6 +2651,7 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     nativeButton = true,
     id: idProp,
@@ -2625,6 +2671,7 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
   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.useRef(null);
   const parent = useMenuParent();
   const compositeRootContext = useCompositeRootContext(true);
@@ -2708,7 +2755,8 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
     },
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
 
   // Whether to ignore clicks to open the menu.
@@ -2730,15 +2778,21 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = useInteractions([click, focus]);
+  const localInteractionProps = React.useMemo(() => 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 ?? EMPTY_OBJECT, rootTriggerProps, {
+  const props = [localInteractionProps, hoverProps ?? EMPTY_OBJECT, rootTriggerProps, {
     'aria-haspopup': 'menu',
+    'aria-controls': popupId,
     id: thisTriggerId,
     onMouseDown: event => {
       if (store.select('open')) {
@@ -2757,33 +2811,6 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = useStableCallback(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, createChangeEventDetails(focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useStableCallback(event => {
-    const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && isOutsideEvent(event, currentPositionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, createChangeEventDetails(focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && contains(currentPositionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = getNextTabbable(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
   const element = useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: pressableTriggerOpenStateMapping,
@@ -2796,6 +2823,7 @@ const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwar
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: ref,
       props: props,
@@ -2879,10 +2907,11 @@ function useMenuParent() {
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTriggerComponent(componentProps, forwardedRef) {
+const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function MenuSubmenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     label,
     id: idProp,
     nativeButton = false,
@@ -2892,7 +2921,9 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
-  const listItem = useCompositeListItem();
+  const listItem = useCompositeListItem({
+    label
+  });
   const menuPositionerContext = useMenuPositionerContext();
   const {
     store
@@ -2901,6 +2932,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const baseRegisterTrigger = useTriggerRegistration(thisTriggerId, store);
   const registerTrigger = React.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
@@ -2924,16 +2956,29 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
   }
   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
+    useIsoLayoutEffect(() => {
+      const element = triggerElementRef.current;
+      if (element && isElementDisabled(element) && !disabled) {
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+        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.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
@@ -2946,10 +2991,9 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
     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({
@@ -2958,12 +3002,14 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
     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 = useClick(floatingRootContext, {
     enabled: !disabled,
@@ -2972,7 +3018,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = useInteractions([click]);
+  const localInteractionProps = click.reference ?? EMPTY_OBJECT;
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -2983,7 +3029,8 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: triggerOpenStateMapping,
-    props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
+    props: [localInteractionProps, hoverProps, rootTriggerProps, itemProps, {
+      'aria-controls': popupId,
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
         if (highlighted) {