@jobber/components 8.15.0 → 8.17.0

package/dist/MenuSubmenuTrigger-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var useValueChanged = require('./useValueChanged-cjs.js');
+var clamp = require('./clamp-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var index_esm = require('./index.esm-cjs.js');
@@ -30,59 +30,8 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
-/**
- * A button that closes the dialog.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClose(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.closePress, event.nativeEvent));
-    }
-  }
-  const {
-    getButtonProps,
-    buttonRef
-  } = useValueChanged.useButton({
-    disabled,
-    native: nativeButton
-  });
-  const state = {
-    disabled
-  };
-  return useRenderElement.useRenderElement('button', componentProps, {
-    state,
-    ref: [forwardedRef, buttonRef],
-    props: [{
-      onClick: handleClick
-    }, elementProps, getButtonProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
-
-/**
- * A button that closes the drawer.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerClose = DialogClose;
-
 function resolveValue(value, pointerType) {
-  if (pointerType != null && !useValueChanged.isMouseLikePointerType(pointerType)) {
+  if (pointerType != null && !clamp.isMouseLikePointerType(pointerType)) {
     return 0;
   }
   if (typeof value === 'function') {
@@ -113,7 +62,7 @@ function useFloatingRootContext(options) {
     onOpenChange,
     elements = {}
   } = options;
-  const floatingId = useValueChanged.useId();
+  const floatingId = clamp.useId();
   const nested = ScrollAreaViewport.useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== 'production') {
     const optionDomReference = elements.reference;
@@ -131,7 +80,7 @@ function useFloatingRootContext(options) {
     nested,
     noEmit: false
   })).current;
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     const valuesToSync = {
       open,
       floatingId
@@ -172,7 +121,7 @@ function useFloating(options = {}) {
   const [positionReference, setPositionReferenceRaw] = React__namespace.useState(null);
   const domReferenceRef = React__namespace.useRef(null);
   const tree = ScrollAreaViewport.useFloatingTree(externalTree);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (rootContextElements.domReference) {
       domReferenceRef.current = rootContextElements.domReference;
     }
@@ -247,7 +196,7 @@ function useFloating(options = {}) {
     nodeId,
     rootStore: rootContext
   }), [position, refs, elements, nodeId, rootContext, open, floatingId]);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     rootContext.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
@@ -263,7 +212,7 @@ function useFloating(options = {}) {
   }), [position, refs, elements, context, rootContext]);
 }
 
-const isMacSafari = useValueChanged.isMac && useValueChanged.isSafari;
+const isMacSafari = clamp.isMac && clamp.isSafari;
 /**
  * Opens the floating element while the reference element has focus, like CSS
  * `:focus`.
@@ -282,7 +231,7 @@ function useFocus(context, 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 = useValueChanged.useTimeout();
+  const timeout = clamp.useTimeout();
   const keyboardModalityRef = React__namespace.useRef(true);
   React__namespace.useEffect(() => {
     const domReference = store.select('domReferenceElement');
@@ -296,7 +245,7 @@ function useFocus(context, props = {}) {
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === ScrollAreaViewport.activeElement(useValueChanged.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === ScrollAreaViewport.activeElement(clamp.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -324,7 +273,7 @@ function useFocus(context, props = {}) {
       return undefined;
     }
     function onOpenChangeLocal(details) {
-      if (details.reason === useValueChanged.triggerPress || details.reason === useValueChanged.escapeKey) {
+      if (details.reason === clamp.triggerPress || details.reason === clamp.escapeKey) {
         const referenceElement = store.select('domReferenceElement');
         if (floatingUi_utils_dom.isElement(referenceElement)) {
           blockedReferenceRef.current = referenceElement;
@@ -370,14 +319,14 @@ function useFocus(context, props = {}) {
       } = event;
       const delayValue = typeof delay === 'function' ? delay() : delay;
       if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
-        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent, currentTarget));
+        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerFocus, nativeEvent, currentTarget));
         return;
       }
       timeout.start(delayValue, () => {
         if (blockFocusRef.current) {
           return;
         }
-        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent, currentTarget));
+        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerFocus, nativeEvent, currentTarget));
       });
     },
     onBlur(event) {
@@ -418,7 +367,7 @@ function useFocus(context, props = {}) {
         if (ScrollAreaViewport.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
-        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent));
+        store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerFocus, nativeEvent));
       });
     }
   }), [dataRef, store, timeout, delay]);
@@ -443,8 +392,8 @@ class HoverInteraction {
     this.pointerEventsReferenceElement = null;
     this.pointerEventsFloatingElement = null;
     this.restTimeoutPending = false;
-    this.openChangeTimeout = new useValueChanged.Timeout();
-    this.restTimeout = new useValueChanged.Timeout();
+    this.openChangeTimeout = new clamp.Timeout();
+    this.restTimeout = new clamp.Timeout();
     this.handleCloseOptions = undefined;
   }
   static create() {
@@ -491,7 +440,7 @@ function useHoverInteractionSharedState(store) {
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }
-  useValueChanged.useOnMount(data.hoverInteractionState.disposeEffect);
+  clamp.useOnMount(data.hoverInteractionState.disposeEffect);
   return data.hoverInteractionState;
 }
 
@@ -513,20 +462,20 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   const instance = useHoverInteractionSharedState(store);
   const tree = ScrollAreaViewport.useFloatingTree();
   const parentId = ScrollAreaViewport.useFloatingParentNodeId();
-  const isClickLikeOpenEvent$1 = useValueChanged.useStableCallback(() => {
+  const isClickLikeOpenEvent$1 = clamp.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isHoverOpen = useValueChanged.useStableCallback(() => {
+  const isHoverOpen = clamp.useStableCallback(() => {
     const type = dataRef.current.openEvent?.type;
     return type?.includes('mouse') && type !== 'mousedown';
   });
-  const isRelatedTargetInsideEnabledTrigger = useValueChanged.useStableCallback(target => {
+  const isRelatedTargetInsideEnabledTrigger = clamp.useStableCallback(target => {
     return ScrollAreaViewport.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
   const closeWithDelay = React__namespace.useCallback(event => {
     const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
     const close = () => {
-      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
+      store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     };
     if (closeDelay) {
@@ -536,10 +485,10 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       close();
     }
   }, [closeDelayProp, store, instance, tree]);
-  const clearPointerEvents = useValueChanged.useStableCallback(() => {
+  const clearPointerEvents = clamp.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = useValueChanged.useStableCallback(event => {
+  const handleInteractInside = clamp.useStableCallback(event => {
     const target = ScrollAreaViewport.getTarget(event);
     if (!isInteractiveElement(target)) {
       instance.interactedInside = false;
@@ -547,7 +496,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     instance.interactedInside = target?.closest('[aria-haspopup]') != null;
   });
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
       instance.restTimeoutPending = false;
@@ -558,14 +507,14 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   React__namespace.useEffect(() => {
     return clearPointerEvents;
   }, [clearPointerEvents]);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!enabled) {
       return undefined;
     }
     if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && floatingUi_utils_dom.isElement(domReferenceElement) && floatingElement) {
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
-      const doc = useValueChanged.ownerDocument(floatingElement);
+      const doc = clamp.ownerDocument(floatingElement);
       const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
@@ -582,7 +531,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = useValueChanged.useTimeout();
+  const childClosedTimeout = clamp.useTimeout();
   React__namespace.useEffect(() => {
     if (!enabled) {
       return undefined;
@@ -621,7 +570,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
       childClosedTimeout.start(0, () => {
         tree.events.off('floating.closed', onNodeClosed);
-        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
+        store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
         tree.events.emit('floating.closed', event);
       });
     }
@@ -670,21 +619,21 @@ function useHoverReferenceInteraction(context, props = {}) {
   } = props;
   const tree = ScrollAreaViewport.useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
-  const handleCloseRef = useValueChanged.useValueAsRef(handleClose);
-  const delayRef = useValueChanged.useValueAsRef(delay);
-  const restMsRef = useValueChanged.useValueAsRef(restMs);
-  const enabledRef = useValueChanged.useValueAsRef(enabled);
+  const handleCloseRef = clamp.useValueAsRef(handleClose);
+  const delayRef = clamp.useValueAsRef(delay);
+  const restMsRef = clamp.useValueAsRef(restMs);
+  const enabledRef = clamp.useValueAsRef(enabled);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
     instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
-  const isClickLikeOpenEvent$1 = useValueChanged.useStableCallback(() => {
+  const isClickLikeOpenEvent$1 = clamp.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = useValueChanged.useStableCallback(target => {
+  const isRelatedTargetInsideEnabledTrigger = clamp.useStableCallback(target => {
     return ScrollAreaViewport.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
-  const isOverInactiveTrigger = useValueChanged.useStableCallback((currentDomReference, currentTarget, target) => {
+  const isOverInactiveTrigger = clamp.useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
 
     // Fast path for normal usage where handlers are attached directly to triggers.
@@ -703,25 +652,25 @@ function useHoverReferenceInteraction(context, props = {}) {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
     if (closeDelay) {
       instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
+        store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
         tree?.events.emit('floating.closed', event);
       });
     } else if (runElseBranch) {
       instance.openChangeTimeout.clear();
-      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
+      store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     }
   }, [delayRef, store, instance, tree]);
-  const cleanupMouseMoveHandler = useValueChanged.useStableCallback(() => {
+  const cleanupMouseMoveHandler = clamp.useStableCallback(() => {
     if (!instance.handler) {
       return;
     }
-    const doc = useValueChanged.ownerDocument(store.select('domReferenceElement'));
+    const doc = clamp.ownerDocument(store.select('domReferenceElement'));
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
   React__namespace.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
-  const clearPointerEvents = useValueChanged.useStableCallback(() => {
+  const clearPointerEvents = clamp.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
 
@@ -756,7 +705,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     function onMouseEnter(event) {
       instance.openChangeTimeout.clear();
       instance.blockMouseMove = false;
-      if (mouseOnly && !useValueChanged.isMouseLikePointerType(instance.pointerType)) {
+      if (mouseOnly && !clamp.isMouseLikePointerType(instance.pointerType)) {
         return;
       }
 
@@ -775,15 +724,15 @@ function useHoverReferenceInteraction(context, props = {}) {
 
       // When moving between triggers while already open, open immediately without delay
       if (isOverInactive && isOpen) {
-        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event, triggerNode));
+        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, event, triggerNode));
       } else if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
-            store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event, triggerNode));
+            store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event, triggerNode));
+        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, event, triggerNode));
       }
     }
     function onMouseLeave(event) {
@@ -793,7 +742,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
       cleanupMouseMoveHandler();
       const domReferenceElement = store.select('domReferenceElement');
-      const doc = useValueChanged.ownerDocument(domReferenceElement);
+      const doc = clamp.ownerDocument(domReferenceElement);
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
       const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
@@ -861,7 +810,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         const currentDomReference = store.select('domReferenceElement');
         const currentOpen = store.select('open');
         const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
-        if (mouseOnly && !useValueChanged.isMouseLikePointerType(instance.pointerType)) {
+        if (mouseOnly && !clamp.isMouseLikePointerType(instance.pointerType)) {
           return;
         }
         const restMsValue = getRestMs(restMsRef.current);
@@ -882,7 +831,7 @@ function useHoverReferenceInteraction(context, props = {}) {
           }
           const latestOpen = store.select('open');
           if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
-            store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, nativeEvent, trigger));
+            store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, nativeEvent, trigger));
           }
         }
         if (instance.pointerType === 'touch') {
@@ -981,10 +930,10 @@ function useListNavigation(context, props) {
     }
   }
   const floatingFocusElement = ScrollAreaViewport.getFloatingFocusElement(floatingElement);
-  const floatingFocusElementRef = useValueChanged.useValueAsRef(floatingFocusElement);
+  const floatingFocusElementRef = clamp.useValueAsRef(floatingFocusElement);
   const parentId = ScrollAreaViewport.useFloatingParentNodeId();
   const tree = ScrollAreaViewport.useFloatingTree(externalTree);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     dataRef.current.orientation = orientation;
   }, [dataRef, orientation]);
   const typeableComboboxReference = ScrollAreaViewport.isTypeableCombobox(domReferenceElement);
@@ -992,7 +941,7 @@ function useListNavigation(context, props) {
   const indexRef = React__namespace.useRef(selectedIndex ?? -1);
   const keyRef = React__namespace.useRef(null);
   const isPointerModalityRef = React__namespace.useRef(true);
-  const onNavigate = useValueChanged.useStableCallback(event => {
+  const onNavigate = clamp.useStableCallback(event => {
     onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
   });
   const previousOnNavigateRef = React__namespace.useRef(onNavigate);
@@ -1000,11 +949,11 @@ function useListNavigation(context, props) {
   const previousOpenRef = React__namespace.useRef(open);
   const forceSyncFocusRef = React__namespace.useRef(false);
   const forceScrollIntoViewRef = React__namespace.useRef(false);
-  const disabledIndicesRef = useValueChanged.useValueAsRef(disabledIndices);
-  const latestOpenRef = useValueChanged.useValueAsRef(open);
-  const selectedIndexRef = useValueChanged.useValueAsRef(selectedIndex);
-  const resetOnPointerLeaveRef = useValueChanged.useValueAsRef(resetOnPointerLeave);
-  const focusItem = useValueChanged.useStableCallback(() => {
+  const disabledIndicesRef = clamp.useValueAsRef(disabledIndices);
+  const latestOpenRef = clamp.useValueAsRef(open);
+  const selectedIndexRef = clamp.useValueAsRef(selectedIndex);
+  const resetOnPointerLeaveRef = clamp.useValueAsRef(resetOnPointerLeave);
+  const focusItem = clamp.useStableCallback(() => {
     function runFocus(item) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
@@ -1045,7 +994,7 @@ function useListNavigation(context, props) {
 
   // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
   // element. Also, reset `activeIndex` upon closing the floating element.
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -1068,7 +1017,7 @@ function useListNavigation(context, props) {
 
   // Sync `activeIndex` to be the focused item while the floating element is
   // open.
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -1122,13 +1071,13 @@ function useListNavigation(context, props) {
 
   // Ensure the parent floating element has focus when a nested child closes
   // to allow arrow key navigation to work after the pointer leaves the child.
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!enabled || floatingElement || !tree || virtual || !previousMountedRef.current) {
       return;
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = ScrollAreaViewport.activeElement(useValueChanged.ownerDocument(floatingElement));
+    const activeEl = ScrollAreaViewport.activeElement(clamp.ownerDocument(floatingElement));
     const treeContainsActiveEl = nodes.some(node => node.context && ScrollAreaViewport.contains(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
@@ -1136,12 +1085,12 @@ function useListNavigation(context, props) {
       });
     }
   }, [enabled, floatingElement, tree, parentId, virtual]);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     previousOnNavigateRef.current = onNavigate;
     previousOpenRef.current = open;
     previousMountedRef.current = !!floatingElement;
   });
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!open) {
       keyRef.current = null;
       focusItemOnOpenRef.current = focusItemOnOpen;
@@ -1196,7 +1145,7 @@ function useListNavigation(context, props) {
         onNavigate(event);
         if (!virtual) {
           const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = ScrollAreaViewport.activeElement(useValueChanged.ownerDocument(floatingFocusEl));
+          const activeEl = ScrollAreaViewport.activeElement(clamp.ownerDocument(floatingFocusEl));
           if (floatingFocusEl && ScrollAreaViewport.contains(floatingFocusEl, activeEl)) {
             floatingFocusEl.focus({
               preventScroll: true
@@ -1210,7 +1159,7 @@ function useListNavigation(context, props) {
   const getParentOrientation = React__namespace.useCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
   }, [parentId, tree, parentOrientation]);
-  const commonOnKeyDown = useValueChanged.useStableCallback(event => {
+  const commonOnKeyDown = clamp.useStableCallback(event => {
     isPointerModalityRef.current = false;
     forceSyncFocusRef.current = true;
 
@@ -1232,9 +1181,9 @@ function useListNavigation(context, props) {
       // If the nested list's close key is also the parent navigation key,
       // let the parent navigate. Otherwise, stop propagating the event.
       if (!isMainOrientationKey(event.key, getParentOrientation())) {
-        useValueChanged.stopEvent(event);
+        clamp.stopEvent(event);
       }
-      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent));
+      store.setOpen(false, clamp.createChangeEventDetails(clamp.listNavigation, event.nativeEvent));
       if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
         if (virtual) {
           tree?.events.emit('virtualfocus', domReferenceElement);
@@ -1249,12 +1198,12 @@ function useListNavigation(context, props) {
     const maxIndex = ScrollAreaViewport.getMaxListIndex(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
-        useValueChanged.stopEvent(event);
+        clamp.stopEvent(event);
         indexRef.current = minIndex;
         onNavigate(event);
       }
       if (event.key === 'End') {
-        useValueChanged.stopEvent(event);
+        clamp.stopEvent(event);
         indexRef.current = maxIndex;
         onNavigate(event);
       }
@@ -1304,7 +1253,7 @@ function useListNavigation(context, props) {
       }
     }
     if (isMainOrientationKey(event.key, orientation)) {
-      useValueChanged.stopEvent(event);
+      clamp.stopEvent(event);
 
       // Reset the index if no item is focused.
       if (open && !virtual && ScrollAreaViewport.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
@@ -1382,8 +1331,8 @@ function useListNavigation(context, props) {
           if (target && !ScrollAreaViewport.contains(floatingFocusElementRef.current, target)) {
             return;
           }
-          useValueChanged.stopEvent(event);
-          store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent));
+          clamp.stopEvent(event);
+          store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent));
           if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
             domReferenceElement.focus();
           }
@@ -1398,14 +1347,14 @@ function useListNavigation(context, props) {
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React__namespace.useMemo(() => {
     function checkVirtualMouse(event) {
-      if (focusItemOnOpen === 'auto' && useValueChanged.isVirtualClick(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && clamp.isVirtualClick(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
       }
     }
     function checkVirtualPointer(event) {
       // `pointerdown` fires first, reset the state then perform the checks.
       focusItemOnOpenRef.current = focusItemOnOpen;
-      if (focusItemOnOpen === 'auto' && useValueChanged.isVirtualPointerEvent(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && clamp.isVirtualPointerEvent(event.nativeEvent)) {
         focusItemOnOpenRef.current = true;
       }
     }
@@ -1433,12 +1382,12 @@ function useListNavigation(context, props) {
         }
         if (nested) {
           if (isParentCrossOpenKey) {
-            useValueChanged.stopEvent(event);
+            clamp.stopEvent(event);
             if (currentOpen) {
               indexRef.current = ScrollAreaViewport.getMinListIndex(listRef, disabledIndicesRef.current);
               onNavigate(event);
             } else {
-              store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent, event.currentTarget));
+              store.setOpen(true, clamp.createChangeEventDetails(clamp.listNavigation, event.nativeEvent, event.currentTarget));
             }
           }
           return undefined;
@@ -1447,9 +1396,9 @@ function useListNavigation(context, props) {
           if (selectedIndexRef.current != null) {
             indexRef.current = selectedIndexRef.current;
           }
-          useValueChanged.stopEvent(event);
+          clamp.stopEvent(event);
           if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent, event.currentTarget));
+            store.setOpen(true, clamp.createChangeEventDetails(clamp.listNavigation, event.nativeEvent, event.currentTarget));
           } else {
             commonOnKeyDown(event);
           }
@@ -1504,11 +1453,11 @@ function useTypeahead(context, props) {
     resetMs = 750,
     selectedIndex = null
   } = props;
-  const timeout = useValueChanged.useTimeout();
+  const timeout = clamp.useTimeout();
   const stringRef = React__namespace.useRef('');
   const prevIndexRef = React__namespace.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React__namespace.useRef(null);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!open && selectedIndex !== null) {
       return;
     }
@@ -1518,13 +1467,13 @@ function useTypeahead(context, props) {
       stringRef.current = '';
     }
   }, [open, selectedIndex, timeout]);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
       prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
     }
   }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = useValueChanged.useStableCallback(value => {
+  const setTypingChange = clamp.useStableCallback(value => {
     if (value) {
       if (!dataRef.current.typing) {
         dataRef.current.typing = value;
@@ -1535,7 +1484,7 @@ function useTypeahead(context, props) {
       onTypingChange?.(value);
     }
   });
-  const onKeyDown = useValueChanged.useStableCallback(event => {
+  const onKeyDown = clamp.useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
       return !element || ScrollAreaViewport.isElementVisible(element);
@@ -1559,7 +1508,7 @@ function useTypeahead(context, props) {
     const listContent = listRef.current;
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
-      useValueChanged.stopEvent(event);
+      clamp.stopEvent(event);
       setTypingChange(true);
     }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
@@ -1575,7 +1524,7 @@ function useTypeahead(context, props) {
       return;
     }
     if (open && event.key !== ' ') {
-      useValueChanged.stopEvent(event);
+      clamp.stopEvent(event);
       setTypingChange(true);
     }
 
@@ -1616,7 +1565,7 @@ function useTypeahead(context, props) {
       setTypingChange(false);
     }
   });
-  const onBlur = useValueChanged.useStableCallback(event => {
+  const onBlur = clamp.useStableCallback(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
@@ -1693,7 +1642,7 @@ function safePolygon(options = {}) {
   const {
     blockPointerEvents = false
   } = options;
-  const timeout = new useValueChanged.Timeout();
+  const timeout = new clamp.Timeout();
   const fn = ({
     x,
     y,
@@ -1891,196 +1840,39 @@ function safePolygon(options = {}) {
   return fn;
 }
 
-/**
- * A heading that labels the dialog.
- * Renders an `<h2>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = ScrollAreaViewport.useDialogRootContext();
-  const id = useValueChanged.useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup('titleElementId', id);
-  return useRenderElement.useRenderElement('h2', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      id
-    }, elementProps]
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
-
-/**
- * A heading that labels the drawer.
- * Renders an `<h2>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerTitle = DialogTitle;
-
-const MenuPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
-function useMenuPositionerContext(optional) {
-  const context = React__namespace.useContext(MenuPositionerContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuPositionerContext is missing. MenuPositioner parts must be placed within <Menu.Positioner>.' : useRenderElement.formatErrorMessage(33));
-  }
-  return context;
-}
+function getPseudoElementBounds(element) {
+  const elementRect = element.getBoundingClientRect();
 
-const MenuRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuRootContext.displayName = "MenuRootContext";
-function useMenuRootContext(optional) {
-  const context = React__namespace.useContext(MenuRootContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.' : useRenderElement.formatErrorMessage(36));
+  // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
+  if (process.env.NODE_ENV !== 'production') {
+    return elementRect;
   }
-  return context;
-}
-
-const ContextMenuRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ContextMenuRootContext.displayName = "ContextMenuRootContext";
-function useContextMenuRootContext(optional = true) {
-  const context = React__namespace.useContext(ContextMenuRootContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ContextMenuRootContext is missing. ContextMenu parts must be placed within <ContextMenu.Root>.' : useRenderElement.formatErrorMessage(25));
+  const beforeStyles = window.getComputedStyle(element, '::before');
+  const afterStyles = window.getComputedStyle(element, '::after');
+  const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
+  if (!hasPseudoElements) {
+    return elementRect;
   }
-  return context;
-}
-
-/**
- * Returns common props shared by all menu item types.
- * This hook extracts the shared logic for id, role, tabIndex, onKeyDown,
- * onMouseMove, onClick, and onMouseUp handlers.
- */
-function useMenuItemCommonProps(params) {
-  const {
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef,
-    itemMetadata
-  } = params;
-  const {
-    events: menuEvents
-  } = store.useState('floatingTreeRoot');
-  const contextMenuContext = useContextMenuRootContext(true);
-  const isContextMenu = contextMenuContext !== undefined;
-  return React__namespace.useMemo(() => ({
-    id,
-    role: 'menuitem',
-    tabIndex: highlighted ? 0 : -1,
-    onKeyDown(event) {
-      if (event.key === ' ' && typingRef?.current) {
-        event.preventDefault();
-      }
-    },
-    onMouseMove(event) {
-      if (!nodeId) {
-        return;
-      }
 
-      // Inform the floating tree that a menu item within this menu was hovered/moved over
-      // so unrelated descendant submenus can be closed.
-      menuEvents.emit('itemhover', {
-        nodeId,
-        target: event.currentTarget
-      });
-    },
-    onClick(event) {
-      if (closeOnClick) {
-        menuEvents.emit('close', {
-          domEvent: event,
-          reason: useValueChanged.itemPress
-        });
-      }
-    },
-    onMouseUp(event) {
-      if (contextMenuContext) {
-        const initialCursorPoint = contextMenuContext.initialCursorPointRef.current;
-        contextMenuContext.initialCursorPointRef.current = null;
-        if (isContextMenu && initialCursorPoint && Math.abs(event.clientX - initialCursorPoint.x) <= 1 && Math.abs(event.clientY - initialCursorPoint.y) <= 1) {
-          return;
-        }
+  // Get dimensions of pseudo-elements
+  const beforeWidth = parseFloat(beforeStyles.width) || 0;
+  const beforeHeight = parseFloat(beforeStyles.height) || 0;
+  const afterWidth = parseFloat(afterStyles.width) || 0;
+  const afterHeight = parseFloat(afterStyles.height) || 0;
 
-        // 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 && !useValueChanged.isMac && event.button === 2) {
-          return;
-        }
-      }
-      if (itemRef.current && store.context.allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
-        // This fires whenever the user clicks on the trigger, moves the cursor, and releases it over the item.
-        // We trigger the click and override the `closeOnClick` preference to always close the menu.
-        if (!itemMetadata || itemMetadata.type === 'regular-item') {
-          itemRef.current.click();
-        }
-      }
-    }
-  }), [closeOnClick, highlighted, id, menuEvents, nodeId, store, typingRef, itemRef, contextMenuContext, isContextMenu, itemMetadata]);
-}
+  // Calculate max dimensions including pseudo-elements
+  const totalWidth = Math.max(elementRect.width, beforeWidth, afterWidth);
+  const totalHeight = Math.max(elementRect.height, beforeHeight, afterHeight);
 
-const REGULAR_ITEM = {
-  type: 'regular-item'
-};
-function useMenuItem(params) {
-  const {
-    closeOnClick,
-    disabled = false,
-    highlighted,
-    id,
-    store,
-    typingRef = store.context.typingRef,
-    nativeButton,
-    itemMetadata,
-    nodeId
-  } = params;
-  const itemRef = React__namespace.useRef(null);
-  const {
-    getButtonProps,
-    buttonRef
-  } = useValueChanged.useButton({
-    disabled,
-    focusableWhenDisabled: true,
-    native: nativeButton,
-    composite: true
-  });
-  const commonProps = useMenuItemCommonProps({
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef,
-    itemMetadata
-  });
-  const getItemProps = React__namespace.useCallback(externalProps => {
-    return useRenderElement.mergeProps(commonProps, {
-      onMouseEnter() {
-        if (itemMetadata.type !== 'submenu-trigger') {
-          return;
-        }
-        itemMetadata.setActive();
-      }
-    }, externalProps, getButtonProps);
-  }, [commonProps, getButtonProps, itemMetadata]);
-  const mergedRef = useRenderElement.useMergedRefs(itemRef, buttonRef);
-  return React__namespace.useMemo(() => ({
-    getItemProps,
-    itemRef: mergedRef
-  }), [getItemProps, mergedRef]);
+  // Calculate the differences to extend the bounds
+  const widthDiff = totalWidth - elementRect.width;
+  const heightDiff = totalHeight - elementRect.height;
+  return {
+    left: elementRect.left - widthDiff / 2,
+    right: elementRect.right + widthDiff / 2,
+    top: elementRect.top - heightDiff / 2,
+    bottom: elementRect.bottom + heightDiff / 2
+  };
 }
 
 const CompositeListContext = /*#__PURE__*/React__namespace.createContext({
@@ -2101,560 +1893,259 @@ function useCompositeListContext() {
   return React__namespace.useContext(CompositeListContext);
 }
 
-let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
-  IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
-  IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
-  return IndexGuessBehavior;
-}({});
-
+/* eslint-disable no-bitwise */
 /**
- * Used to register a list item and its index (DOM position) in the `CompositeList`.
+ * Provides context for a list of items in a composite component.
+ * @internal
  */
-function useCompositeListItem(params = {}) {
-  const {
-    label,
-    metadata,
-    textRef,
-    indexGuessBehavior,
-    index: externalIndex
-  } = params;
+function CompositeList(props) {
   const {
-    register,
-    unregister,
-    subscribeMapChange,
+    children,
     elementsRef,
     labelsRef,
-    nextIndexRef
-  } = useCompositeListContext();
-  const indexRef = React__namespace.useRef(-1);
-  const [index, setIndex] = React__namespace.useState(externalIndex ?? (indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
-    if (indexRef.current === -1) {
-      const newIndex = nextIndexRef.current;
-      nextIndexRef.current += 1;
-      indexRef.current = newIndex;
-    }
-    return indexRef.current;
-  } : -1));
-  const componentRef = React__namespace.useRef(null);
-  const ref = React__namespace.useCallback(node => {
-    componentRef.current = node;
-    if (index !== -1 && node !== null) {
-      elementsRef.current[index] = node;
-      if (labelsRef) {
-        const isLabelDefined = label !== undefined;
-        labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
-      }
-    }
-  }, [index, elementsRef, labelsRef, label, textRef]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    if (externalIndex != null) {
-      return undefined;
-    }
-    const node = componentRef.current;
-    if (node) {
-      register(node, metadata);
-      return () => {
-        unregister(node);
-      };
-    }
-    return undefined;
-  }, [externalIndex, register, unregister, metadata]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    if (externalIndex != null) {
+    onMapChange: onMapChangeProp
+  } = props;
+  const onMapChange = clamp.useStableCallback(onMapChangeProp);
+  const nextIndexRef = React__namespace.useRef(0);
+  const listeners = useRenderElement.useRefWithInit(createListeners).current;
+
+  // We use a stable `map` to avoid O(n^2) re-allocation costs for large lists.
+  // `mapTick` is our re-render trigger mechanism. We also need to update the
+  // elements and label refs, but there's a lot of async work going on and sometimes
+  // the effect that handles `onMapChange` gets called after those refs have been
+  // filled, and we don't want to lose those values by setting their lengths to `0`.
+  // We also need to have them at the proper length because floating-ui uses that
+  // information for list navigation.
+
+  const map = useRenderElement.useRefWithInit(createMap).current;
+  // `mapTick` uses a counter rather than objects for low precision-loss risk and better memory efficiency
+  const [mapTick, setMapTick] = React__namespace.useState(0);
+  const lastTickRef = React__namespace.useRef(mapTick);
+  const register = clamp.useStableCallback((node, metadata) => {
+    map.set(node, metadata ?? null);
+    lastTickRef.current += 1;
+    setMapTick(lastTickRef.current);
+  });
+  const unregister = clamp.useStableCallback(node => {
+    map.delete(node);
+    lastTickRef.current += 1;
+    setMapTick(lastTickRef.current);
+  });
+  const sortedMap = React__namespace.useMemo(() => {
+    const newMap = new Map();
+    // Filter out disconnected elements before sorting to avoid inconsistent
+    // compareDocumentPosition results when elements are detached from the DOM.
+    const sortedNodes = Array.from(map.keys()).filter(node => node.isConnected).sort(sortByDocumentPosition);
+    sortedNodes.forEach((node, index) => {
+      const metadata = map.get(node) ?? {};
+      newMap.set(node, {
+        ...metadata,
+        index
+      });
+    });
+    return newMap;
+  }, [map, mapTick]);
+  clamp.useIsoLayoutEffect(() => {
+    if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
       return undefined;
     }
-    return subscribeMapChange(map => {
-      const i = componentRef.current ? map.get(componentRef.current)?.index : null;
-      if (i != null) {
-        setIndex(i);
+    const mutationObserver = new MutationObserver(entries => {
+      const diff = new Set();
+      const updateDiff = node => diff.has(node) ? diff.delete(node) : diff.add(node);
+      entries.forEach(entry => {
+        entry.removedNodes.forEach(updateDiff);
+        entry.addedNodes.forEach(updateDiff);
+      });
+      if (diff.size === 0) {
+        lastTickRef.current += 1;
+        setMapTick(lastTickRef.current);
       }
     });
-  }, [externalIndex, subscribeMapChange, setIndex]);
-  return React__namespace.useMemo(() => ({
-    ref,
-    index
-  }), [index, ref]);
-}
-
-let MenuCheckboxItemDataAttributes = /*#__PURE__*/function (MenuCheckboxItemDataAttributes) {
-  /**
-   * Present when the menu checkbox item is checked.
-   */
-  MenuCheckboxItemDataAttributes["checked"] = "data-checked";
-  /**
-   * Present when the menu checkbox item is not checked.
-   */
-  MenuCheckboxItemDataAttributes["unchecked"] = "data-unchecked";
-  /**
-   * Present when the menu checkbox item is disabled.
-   */
-  MenuCheckboxItemDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the menu checkbox item is highlighted.
-   */
-  MenuCheckboxItemDataAttributes["highlighted"] = "data-highlighted";
-  return MenuCheckboxItemDataAttributes;
-}({});
-
-const itemMapping = {
-  checked(value) {
-    if (value) {
-      return {
-        [MenuCheckboxItemDataAttributes.checked]: ''
-      };
-    }
-    return {
-      [MenuCheckboxItemDataAttributes.unchecked]: ''
+    sortedMap.forEach((_, node) => {
+      if (node.parentElement) {
+        mutationObserver.observe(node.parentElement, {
+          childList: true
+        });
+      }
+    });
+    return () => {
+      mutationObserver.disconnect();
     };
-  },
-  ...useValueChanged.transitionStatusMapping
-};
-
-const MenuGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuGroupContext";
-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));
-  }
-  return context;
-}
-
-const MenuGroup = /*#__PURE__*/React__namespace.forwardRef(function MenuGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...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: {
-      role: 'group',
-      'aria-labelledby': labelId,
-      ...elementProps
+  }, [sortedMap]);
+  clamp.useIsoLayoutEffect(() => {
+    const shouldUpdateLengths = lastTickRef.current === mapTick;
+    if (shouldUpdateLengths) {
+      if (elementsRef.current.length !== sortedMap.size) {
+        elementsRef.current.length = sortedMap.size;
+      }
+      if (labelsRef && labelsRef.current.length !== sortedMap.size) {
+        labelsRef.current.length = sortedMap.size;
+      }
+      nextIndexRef.current = sortedMap.size;
     }
+    onMapChange(sortedMap);
+  }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
+  clamp.useIsoLayoutEffect(() => {
+    return () => {
+      elementsRef.current = [];
+    };
+  }, [elementsRef]);
+  clamp.useIsoLayoutEffect(() => {
+    return () => {
+      if (labelsRef) {
+        labelsRef.current = [];
+      }
+    };
+  }, [labelsRef]);
+  const subscribeMapChange = clamp.useStableCallback(fn => {
+    listeners.add(fn);
+    return () => {
+      listeners.delete(fn);
+    };
   });
-  return /*#__PURE__*/jsxRuntime.jsx(MenuGroupContext.Provider, {
-    value: context,
-    children: element
+  clamp.useIsoLayoutEffect(() => {
+    listeners.forEach(l => l(sortedMap));
+  }, [listeners, sortedMap]);
+  const contextValue = React__namespace.useMemo(() => ({
+    register,
+    unregister,
+    subscribeMapChange,
+    elementsRef,
+    labelsRef,
+    nextIndexRef
+  }), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
+  return /*#__PURE__*/jsxRuntime.jsx(CompositeListContext.Provider, {
+    value: contextValue,
+    children: children
   });
-});
-if (process.env.NODE_ENV !== "production") MenuGroup.displayName = "MenuGroup";
+}
+function createMap() {
+  return new Map();
+}
+function createListeners() {
+  return new Set();
+}
+function sortByDocumentPosition(a, b) {
+  const position = a.compareDocumentPosition(b);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+    return -1;
+  }
+  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+    return 1;
+  }
+  return 0;
+}
 
 /**
- * An accessible label that is automatically associated with its parent group.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ * Fork of the original `arrow` middleware from Floating UI that allows
+ * configuring the offset parent.
  */
-const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const id = useValueChanged.useBaseUiId(idProp);
-  const {
-    setLabelId
-  } = useMenuGroupRootContext();
-  useValueChanged.useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
+const baseArrow = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0,
+      offsetParent = 'real'
+    } = index_esm.evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = index_esm.getPaddingObject(padding);
+    const coords = {
+      x,
+      y
     };
-  }, [setLabelId, id]);
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: {
-      id,
-      role: 'presentation',
-      ...elementProps
+    const axis = index_esm.getAlignmentAxis(placement);
+    const length = index_esm.getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = offsetParent === 'real' ? await platform.getOffsetParent?.(element) : elements.floating;
+    let clientSize = elements.floating[clientProp] || rects.floating[length];
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await platform.isElement?.(arrowOffsetParent))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
     }
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
+    const centerToReference = endDiff / 2 - startDiff / 2;
 
-/**
- * An individual interactive item in the menu.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
-const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    label,
-    nativeButton = false,
-    disabled = false,
-    closeOnClick = true,
-    ...elementProps
-  } = componentProps;
-  const listItem = useCompositeListItem({
-    label
-  });
-  const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useValueChanged.useBaseUiId(idProp);
-  const {
-    store
-  } = useMenuRootContext();
-  const highlighted = store.useState('isActive', listItem.index);
-  const itemProps = store.useState('itemProps');
-  const {
-    getItemProps,
-    itemRef
-  } = useMenuItem({
-    closeOnClick,
-    disabled,
-    highlighted,
-    id,
-    store,
-    nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
-    itemMetadata: REGULAR_ITEM
-  });
-  const state = {
-    disabled,
-    highlighted
-  };
-  return useRenderElement.useRenderElement('div', componentProps, {
-    state,
-    props: [itemProps, elementProps, getItemProps],
-    ref: [itemRef, forwardedRef, listItem.ref]
-  });
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = Math.min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = Math.min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = index_esm.clamp(min, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && index_esm.getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    // eslint-disable-next-line no-nested-ternary
+    const alignmentOffset = shouldAddOffset ? center < min ? center - min : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
 });
-if (process.env.NODE_ENV !== "production") MenuItem.displayName = "MenuItem";
 
 /**
- * A link in the menu that can be used to navigate to a different page or section.
- * Renders an `<a>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
  */
-const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkItem(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    label,
-    closeOnClick = false,
-    ...elementProps
-  } = componentProps;
-  const linkRef = React__namespace.useRef(null);
-  const listItem = useCompositeListItem({
-    label
-  });
-  const menuPositionerContext = useMenuPositionerContext(true);
-  const nodeId = menuPositionerContext?.nodeId;
-  const id = useValueChanged.useBaseUiId(idProp);
-  const {
-    store
-  } = useMenuRootContext();
-  const highlighted = store.useState('isActive', listItem.index);
-  const itemProps = store.useState('itemProps');
-  const typingRef = store.context.typingRef;
-  const {
-    getButtonProps,
-    buttonRef
-  } = useValueChanged.useButton({
-    native: false,
-    composite: true
-  });
-  const commonProps = useMenuItemCommonProps({
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef: linkRef
-  });
-  function getItemProps(externalProps) {
-    return useRenderElement.mergeProps(commonProps, externalProps, getButtonProps);
-  }
-  const state = React__namespace.useMemo(() => ({
-    highlighted
-  }), [highlighted]);
-  return useRenderElement.useRenderElement('a', componentProps, {
-    state,
-    props: [itemProps, elementProps, getItemProps],
-    ref: [linkRef, buttonRef, forwardedRef, listItem.ref]
-  });
+const arrow = (options, deps) => ({
+  ...baseArrow(options),
+  options: [options, deps]
 });
-if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
 
-const ToolbarRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
-function useToolbarRootContext(optional) {
-  const context = React__namespace.useContext(ToolbarRootContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.' : useRenderElement.formatErrorMessage(69));
-  }
-  return context;
-}
-
-function getDisabledMountTransitionStyles(transitionStatus) {
-  return transitionStatus === 'starting' ? ScrollAreaViewport.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
-}
-
-const stateAttributesMapping = {
-  ...ScrollAreaViewport.popupStateMapping,
-  ...useValueChanged.transitionStatusMapping
-};
-
-/**
- * A container for the menu items.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
-const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    finalFocus,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useMenuRootContext();
-  const {
-    side,
-    align
-  } = useMenuPositionerContext();
-  const insideToolbar = useToolbarRootContext(true) != null;
-  const open = store.useState('open');
-  const transitionStatus = store.useState('transitionStatus');
-  const popupProps = store.useState('popupProps');
-  const mounted = store.useState('mounted');
-  const instantType = store.useState('instantType');
-  const triggerElement = store.useState('activeTriggerElement');
-  const parent = store.useState('parent');
-  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
-  const rootId = store.useState('rootId');
-  const floatingContext = store.useState('floatingRootContext');
-  const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const closeDelay = store.useState('closeDelay');
-  const activeTriggerElement = store.useState('activeTriggerElement');
-  const isContextMenu = parent.type === 'context-menu';
-  useValueChanged.useOpenChangeComplete({
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      if (open) {
-        store.context.onOpenChangeComplete?.(true);
-      }
-    }
-  });
-  React__namespace.useEffect(() => {
-    function handleClose(event) {
-      store.setOpen(false, useValueChanged.createChangeEventDetails(event.reason, event.domEvent));
-    }
-    floatingTreeRoot.events.on('close', handleClose);
-    return () => {
-      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 state = {
-    transitionStatus,
-    side,
-    align,
-    open,
-    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 && ScrollAreaViewport.COMPOSITE_KEYS.has(event.key)) {
-          event.stopPropagation();
-        }
-      }
-    }, getDisabledMountTransitionStyles(transitionStatus), elementProps, {
-      'data-rootownerid': rootId
-    }]
-  });
-  let returnFocus = parent.type === undefined || isContextMenu;
-  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useValueChanged.outsidePress) {
-    returnFocus = true;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingFocusManager, {
-    context: floatingContext,
-    modal: isContextMenu,
-    disabled: !mounted,
-    returnFocus: finalFocus === undefined ? returnFocus : finalFocus,
-    initialFocus: parent.type !== 'menu',
-    restoreFocus: true,
-    externalTree: parent.type !== 'menubar' ? floatingTreeRoot : undefined,
-    previousFocusableElement: activeTriggerElement,
-    nextFocusableElement: parent.type === undefined ? store.context.triggerFocusTargetRef : undefined,
-    beforeContentFocusGuardRef: parent.type === undefined ? store.context.beforeContentFocusGuardRef : undefined,
-    children: element
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuPopup.displayName = "MenuPopup";
-
-const MenuPortalContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuPortalContext.displayName = "MenuPortalContext";
-function useMenuPortalContext() {
-  const value = React__namespace.useContext(MenuPortalContext);
-  if (value === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Portal> is missing.' : useRenderElement.formatErrorMessage(32));
-  }
-  return value;
-}
-
-const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(props, forwardedRef) {
-  const {
-    keepMounted = false,
-    ...portalProps
-  } = props;
-  const {
-    store
-  } = useMenuRootContext();
-  const mounted = store.useState('mounted');
-  const shouldRender = mounted || keepMounted;
-  if (!shouldRender) {
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(MenuPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuPortal.displayName = "MenuPortal";
-
-/**
- * Fork of the original `arrow` middleware from Floating UI that allows
- * configuring the offset parent.
- */
-const baseArrow = options => ({
-  name: 'arrow',
-  options,
-  async fn(state) {
-    const {
-      x,
-      y,
-      placement,
-      rects,
-      platform,
-      elements,
-      middlewareData
-    } = state;
-    // Since `element` is required, we don't Partial<> the type.
-    const {
-      element,
-      padding = 0,
-      offsetParent = 'real'
-    } = index_esm.evaluate(options, state) || {};
-    if (element == null) {
-      return {};
-    }
-    const paddingObject = index_esm.getPaddingObject(padding);
-    const coords = {
-      x,
-      y
-    };
-    const axis = index_esm.getAlignmentAxis(placement);
-    const length = index_esm.getAxisLength(axis);
-    const arrowDimensions = await platform.getDimensions(element);
-    const isYAxis = axis === 'y';
-    const minProp = isYAxis ? 'top' : 'left';
-    const maxProp = isYAxis ? 'bottom' : 'right';
-    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
-    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
-    const startDiff = coords[axis] - rects.reference[axis];
-    const arrowOffsetParent = offsetParent === 'real' ? await platform.getOffsetParent?.(element) : elements.floating;
-    let clientSize = elements.floating[clientProp] || rects.floating[length];
-
-    // DOM platform can return `window` as the `offsetParent`.
-    if (!clientSize || !(await platform.isElement?.(arrowOffsetParent))) {
-      clientSize = elements.floating[clientProp] || rects.floating[length];
-    }
-    const centerToReference = endDiff / 2 - startDiff / 2;
-
-    // If the padding is large enough that it causes the arrow to no longer be
-    // centered, modify the padding so that it is centered.
-    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
-    const minPadding = Math.min(paddingObject[minProp], largestPossiblePadding);
-    const maxPadding = Math.min(paddingObject[maxProp], largestPossiblePadding);
-
-    // Make sure the arrow doesn't overflow the floating element if the center
-    // point is outside the floating element's bounds.
-    const min = minPadding;
-    const max = clientSize - arrowDimensions[length] - maxPadding;
-    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = index_esm.clamp(min, center, max);
-
-    // If the reference is small enough that the arrow's padding causes it to
-    // to point to nothing for an aligned placement, adjust the offset of the
-    // floating element itself. To ensure `shift()` continues to take action,
-    // a single reset is performed when this is true.
-    const shouldAddOffset = !middlewareData.arrow && index_esm.getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
-    // eslint-disable-next-line no-nested-ternary
-    const alignmentOffset = shouldAddOffset ? center < min ? center - min : center - max : 0;
-    return {
-      [axis]: coords[axis] + alignmentOffset,
-      data: {
-        [axis]: offset,
-        centerOffset: center - offset - alignmentOffset,
-        ...(shouldAddOffset && {
-          alignmentOffset
-        })
-      },
-      reset: shouldAddOffset
-    };
-  }
-});
-
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * This wraps the core `arrow` middleware to allow React refs as the element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = (options, deps) => ({
-  ...baseArrow(options),
-  options: [options, deps]
-});
-
-const hide = {
-  name: 'hide',
-  async fn(state) {
-    const {
-      width,
-      height,
-      x,
-      y
-    } = state.rects.reference;
-    const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
-    const nativeHideResult = await floatingUi_reactDom.hide().fn(state);
-    return {
-      data: {
-        referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden
-      }
-    };
+const hide = {
+  name: 'hide',
+  async fn(state) {
+    const {
+      width,
+      height,
+      x,
+      y
+    } = state.rects.reference;
+    const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
+    const nativeHideResult = await floatingUi_reactDom.hide().fn(state);
+    return {
+      data: {
+        referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden
+      }
+    };
   }
 };
 
@@ -2701,7 +2192,7 @@ const adaptiveOrigin = {
         height: win.visualViewport.height
       };
     } else if (offsetParent === win) {
-      const doc = useValueChanged.ownerDocument(floating);
+      const doc = clamp.ownerDocument(floating);
       offsetDimensions = {
         width: doc.documentElement.clientWidth,
         height: doc.documentElement.clientHeight
@@ -2798,9 +2289,9 @@ function useAnchorPositioning(params) {
   const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
   const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
   const anchorFn = typeof anchor === 'function' ? anchor : undefined;
-  const anchorFnCallback = useValueChanged.useStableCallback(anchorFn);
+  const anchorFnCallback = clamp.useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
-  const anchorValueRef = useValueChanged.useValueAsRef(anchor);
+  const anchorValueRef = clamp.useValueAsRef(anchor);
   const direction = ScrollAreaViewport.useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -2848,8 +2339,8 @@ function useAnchorPositioning(params) {
   const arrowRef = React__namespace.useRef(null);
 
   // Keep these reactive if they're not functions
-  const sideOffsetRef = useValueChanged.useValueAsRef(sideOffset);
-  const alignOffsetRef = useValueChanged.useValueAsRef(alignOffset);
+  const sideOffsetRef = clamp.useValueAsRef(sideOffset);
+  const alignOffsetRef = clamp.useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
   const middleware = [floatingUi_reactDom.offset(state => {
@@ -2879,7 +2370,7 @@ function useAnchorPositioning(params) {
     fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
   });
   const shiftMiddleware = shiftDisabled ? null : floatingUi_reactDom.shift(data => {
-    const html = useValueChanged.ownerDocument(data.elements.floating).documentElement;
+    const html = clamp.ownerDocument(data.elements.floating).documentElement;
     return {
       ...commonCollisionProps,
       // Use the Layout Viewport to avoid shifting around when pinch-zooming
@@ -2983,7 +2474,7 @@ function useAnchorPositioning(params) {
       return {};
     }
   }, hide, adaptiveOrigin);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     // Ensure positioning doesn't run initially for `keepMounted` elements that
     // aren't initially open.
     if (!mounted && floatingRootContext) {
@@ -3041,7 +2532,7 @@ function useAnchorPositioning(params) {
     return base;
   }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
   const registeredPositionReferenceRef = React__namespace.useRef(null);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!mounted) {
       return;
     }
@@ -3086,7 +2577,7 @@ function useAnchorPositioning(params) {
    * and flips back lazily, not eagerly. Ideal for filtered lists that change
    * the size of the popup dynamically to avoid unwanted flipping when typing.
    */
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);
     }
@@ -3116,149 +2607,693 @@ function isRef(param) {
   return param != null && 'current' in param;
 }
 
-/* eslint-disable no-bitwise */
+function getDisabledMountTransitionStyles(transitionStatus) {
+  return transitionStatus === 'starting' ? ScrollAreaViewport.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
+}
+
+let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
+  IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+  IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+  return IndexGuessBehavior;
+}({});
+
 /**
- * Provides context for a list of items in a composite component.
- * @internal
+ * Used to register a list item and its index (DOM position) in the `CompositeList`.
  */
-function CompositeList(props) {
+function useCompositeListItem(params = {}) {
   const {
-    children,
+    label,
+    metadata,
+    textRef,
+    indexGuessBehavior,
+    index: externalIndex
+  } = params;
+  const {
+    register,
+    unregister,
+    subscribeMapChange,
     elementsRef,
     labelsRef,
-    onMapChange: onMapChangeProp
-  } = props;
-  const onMapChange = useValueChanged.useStableCallback(onMapChangeProp);
-  const nextIndexRef = React__namespace.useRef(0);
-  const listeners = useRenderElement.useRefWithInit(createListeners).current;
-
-  // We use a stable `map` to avoid O(n^2) re-allocation costs for large lists.
-  // `mapTick` is our re-render trigger mechanism. We also need to update the
-  // elements and label refs, but there's a lot of async work going on and sometimes
-  // the effect that handles `onMapChange` gets called after those refs have been
-  // filled, and we don't want to lose those values by setting their lengths to `0`.
-  // We also need to have them at the proper length because floating-ui uses that
-  // information for list navigation.
-
-  const map = useRenderElement.useRefWithInit(createMap).current;
-  // `mapTick` uses a counter rather than objects for low precision-loss risk and better memory efficiency
-  const [mapTick, setMapTick] = React__namespace.useState(0);
-  const lastTickRef = React__namespace.useRef(mapTick);
-  const register = useValueChanged.useStableCallback((node, metadata) => {
-    map.set(node, metadata ?? null);
-    lastTickRef.current += 1;
-    setMapTick(lastTickRef.current);
-  });
-  const unregister = useValueChanged.useStableCallback(node => {
-    map.delete(node);
-    lastTickRef.current += 1;
-    setMapTick(lastTickRef.current);
-  });
-  const sortedMap = React__namespace.useMemo(() => {
-    const newMap = new Map();
-    // Filter out disconnected elements before sorting to avoid inconsistent
-    // compareDocumentPosition results when elements are detached from the DOM.
-    const sortedNodes = Array.from(map.keys()).filter(node => node.isConnected).sort(sortByDocumentPosition);
-    sortedNodes.forEach((node, index) => {
-      const metadata = map.get(node) ?? {};
-      newMap.set(node, {
-        ...metadata,
-        index
-      });
-    });
-    return newMap;
-  }, [map, mapTick]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
+    nextIndexRef
+  } = useCompositeListContext();
+  const indexRef = React__namespace.useRef(-1);
+  const [index, setIndex] = React__namespace.useState(externalIndex ?? (indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
+    if (indexRef.current === -1) {
+      const newIndex = nextIndexRef.current;
+      nextIndexRef.current += 1;
+      indexRef.current = newIndex;
+    }
+    return indexRef.current;
+  } : -1));
+  const componentRef = React__namespace.useRef(null);
+  const ref = React__namespace.useCallback(node => {
+    componentRef.current = node;
+    if (index !== -1 && node !== null) {
+      elementsRef.current[index] = node;
+      if (labelsRef) {
+        const isLabelDefined = label !== undefined;
+        labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
+      }
+    }
+  }, [index, elementsRef, labelsRef, label, textRef]);
+  clamp.useIsoLayoutEffect(() => {
+    if (externalIndex != null) {
       return undefined;
     }
-    const mutationObserver = new MutationObserver(entries => {
-      const diff = new Set();
-      const updateDiff = node => diff.has(node) ? diff.delete(node) : diff.add(node);
-      entries.forEach(entry => {
-        entry.removedNodes.forEach(updateDiff);
-        entry.addedNodes.forEach(updateDiff);
-      });
-      if (diff.size === 0) {
-        lastTickRef.current += 1;
-        setMapTick(lastTickRef.current);
+    const node = componentRef.current;
+    if (node) {
+      register(node, metadata);
+      return () => {
+        unregister(node);
+      };
+    }
+    return undefined;
+  }, [externalIndex, register, unregister, metadata]);
+  clamp.useIsoLayoutEffect(() => {
+    if (externalIndex != null) {
+      return undefined;
+    }
+    return subscribeMapChange(map => {
+      const i = componentRef.current ? map.get(componentRef.current)?.index : null;
+      if (i != null) {
+        setIndex(i);
       }
     });
-    sortedMap.forEach((_, node) => {
-      if (node.parentElement) {
-        mutationObserver.observe(node.parentElement, {
-          childList: true
+  }, [externalIndex, subscribeMapChange, setIndex]);
+  return React__namespace.useMemo(() => ({
+    ref,
+    index
+  }), [index, ref]);
+}
+
+/**
+ * A button that closes the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClose(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = ScrollAreaViewport.useDialogRootContext();
+  const open = store.useState('open');
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, clamp.createChangeEventDetails(clamp.closePress, event.nativeEvent));
+    }
+  }
+  const {
+    getButtonProps,
+    buttonRef
+  } = clamp.useButton({
+    disabled,
+    native: nativeButton
+  });
+  const state = {
+    disabled
+  };
+  return useRenderElement.useRenderElement('button', componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef],
+    props: [{
+      onClick: handleClick
+    }, elementProps, getButtonProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
+
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerClose = DialogClose;
+
+/**
+ * A heading that labels the dialog.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = ScrollAreaViewport.useDialogRootContext();
+  const id = clamp.useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('titleElementId', id);
+  return useRenderElement.useRenderElement('h2', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
+
+/**
+ * A heading that labels the drawer.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerTitle = DialogTitle;
+
+const MenuPositionerContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
+function useMenuPositionerContext(optional) {
+  const context = React__namespace.useContext(MenuPositionerContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuPositionerContext is missing. MenuPositioner parts must be placed within <Menu.Positioner>.' : useRenderElement.formatErrorMessage(33));
+  }
+  return context;
+}
+
+const MenuRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuRootContext.displayName = "MenuRootContext";
+function useMenuRootContext(optional) {
+  const context = React__namespace.useContext(MenuRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.' : useRenderElement.formatErrorMessage(36));
+  }
+  return context;
+}
+
+const ContextMenuRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ContextMenuRootContext.displayName = "ContextMenuRootContext";
+function useContextMenuRootContext(optional = true) {
+  const context = React__namespace.useContext(ContextMenuRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ContextMenuRootContext is missing. ContextMenu parts must be placed within <ContextMenu.Root>.' : useRenderElement.formatErrorMessage(25));
+  }
+  return context;
+}
+
+/**
+ * Returns common props shared by all menu item types.
+ * This hook extracts the shared logic for id, role, tabIndex, onKeyDown,
+ * onMouseMove, onClick, and onMouseUp handlers.
+ */
+function useMenuItemCommonProps(params) {
+  const {
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    itemRef,
+    itemMetadata
+  } = params;
+  const {
+    events: menuEvents
+  } = store.useState('floatingTreeRoot');
+  const contextMenuContext = useContextMenuRootContext(true);
+  const isContextMenu = contextMenuContext !== undefined;
+  return React__namespace.useMemo(() => ({
+    id,
+    role: 'menuitem',
+    tabIndex: highlighted ? 0 : -1,
+    onKeyDown(event) {
+      if (event.key === ' ' && typingRef?.current) {
+        event.preventDefault();
+      }
+    },
+    onMouseMove(event) {
+      if (!nodeId) {
+        return;
+      }
+
+      // Inform the floating tree that a menu item within this menu was hovered/moved over
+      // so unrelated descendant submenus can be closed.
+      menuEvents.emit('itemhover', {
+        nodeId,
+        target: event.currentTarget
+      });
+    },
+    onClick(event) {
+      if (closeOnClick) {
+        menuEvents.emit('close', {
+          domEvent: event,
+          reason: clamp.itemPress
         });
       }
-    });
+    },
+    onMouseUp(event) {
+      if (contextMenuContext) {
+        const initialCursorPoint = contextMenuContext.initialCursorPointRef.current;
+        contextMenuContext.initialCursorPointRef.current = null;
+        if (isContextMenu && initialCursorPoint && Math.abs(event.clientX - initialCursorPoint.x) <= 1 && Math.abs(event.clientY - initialCursorPoint.y) <= 1) {
+          return;
+        }
+
+        // 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 && !clamp.isMac && event.button === 2) {
+          return;
+        }
+      }
+      if (itemRef.current && store.context.allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
+        // This fires whenever the user clicks on the trigger, moves the cursor, and releases it over the item.
+        // We trigger the click and override the `closeOnClick` preference to always close the menu.
+        if (!itemMetadata || itemMetadata.type === 'regular-item') {
+          itemRef.current.click();
+        }
+      }
+    }
+  }), [closeOnClick, highlighted, id, menuEvents, nodeId, store, typingRef, itemRef, contextMenuContext, isContextMenu, itemMetadata]);
+}
+
+const REGULAR_ITEM = {
+  type: 'regular-item'
+};
+function useMenuItem(params) {
+  const {
+    closeOnClick,
+    disabled = false,
+    highlighted,
+    id,
+    store,
+    typingRef = store.context.typingRef,
+    nativeButton,
+    itemMetadata,
+    nodeId
+  } = params;
+  const itemRef = React__namespace.useRef(null);
+  const {
+    getButtonProps,
+    buttonRef
+  } = clamp.useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton,
+    composite: true
+  });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    itemRef,
+    itemMetadata
+  });
+  const getItemProps = React__namespace.useCallback(externalProps => {
+    return useRenderElement.mergeProps(commonProps, {
+      onMouseEnter() {
+        if (itemMetadata.type !== 'submenu-trigger') {
+          return;
+        }
+        itemMetadata.setActive();
+      }
+    }, externalProps, getButtonProps);
+  }, [commonProps, getButtonProps, itemMetadata]);
+  const mergedRef = useRenderElement.useMergedRefs(itemRef, buttonRef);
+  return React__namespace.useMemo(() => ({
+    getItemProps,
+    itemRef: mergedRef
+  }), [getItemProps, mergedRef]);
+}
+
+let MenuCheckboxItemDataAttributes = /*#__PURE__*/function (MenuCheckboxItemDataAttributes) {
+  /**
+   * Present when the menu checkbox item is checked.
+   */
+  MenuCheckboxItemDataAttributes["checked"] = "data-checked";
+  /**
+   * Present when the menu checkbox item is not checked.
+   */
+  MenuCheckboxItemDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the menu checkbox item is disabled.
+   */
+  MenuCheckboxItemDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the menu checkbox item is highlighted.
+   */
+  MenuCheckboxItemDataAttributes["highlighted"] = "data-highlighted";
+  return MenuCheckboxItemDataAttributes;
+}({});
+
+const itemMapping = {
+  checked(value) {
+    if (value) {
+      return {
+        [MenuCheckboxItemDataAttributes.checked]: ''
+      };
+    }
+    return {
+      [MenuCheckboxItemDataAttributes.unchecked]: ''
+    };
+  },
+  ...clamp.transitionStatusMapping
+};
+
+const MenuGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuGroupContext";
+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));
+  }
+  return context;
+}
+
+const MenuGroup = /*#__PURE__*/React__namespace.forwardRef(function MenuGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...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: {
+      role: 'group',
+      'aria-labelledby': labelId,
+      ...elementProps
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(MenuGroupContext.Provider, {
+    value: context,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuGroup.displayName = "MenuGroup";
+
+/**
+ * An accessible label that is automatically associated with its parent group.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const id = clamp.useBaseUiId(idProp);
+  const {
+    setLabelId
+  } = useMenuGroupRootContext();
+  clamp.useIsoLayoutEffect(() => {
+    setLabelId(id);
     return () => {
-      mutationObserver.disconnect();
+      setLabelId(undefined);
     };
-  }, [sortedMap]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    const shouldUpdateLengths = lastTickRef.current === mapTick;
-    if (shouldUpdateLengths) {
-      if (elementsRef.current.length !== sortedMap.size) {
-        elementsRef.current.length = sortedMap.size;
-      }
-      if (labelsRef && labelsRef.current.length !== sortedMap.size) {
-        labelsRef.current.length = sortedMap.size;
+  }, [setLabelId, id]);
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: {
+      id,
+      role: 'presentation',
+      ...elementProps
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
+
+/**
+ * An individual interactive item in the menu.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    nativeButton = false,
+    disabled = false,
+    closeOnClick = true,
+    ...elementProps
+  } = componentProps;
+  const listItem = useCompositeListItem({
+    label
+  });
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const id = clamp.useBaseUiId(idProp);
+  const {
+    store
+  } = useMenuRootContext();
+  const highlighted = store.useState('isActive', listItem.index);
+  const itemProps = store.useState('itemProps');
+  const {
+    getItemProps,
+    itemRef
+  } = useMenuItem({
+    closeOnClick,
+    disabled,
+    highlighted,
+    id,
+    store,
+    nativeButton,
+    nodeId: menuPositionerContext?.nodeId,
+    itemMetadata: REGULAR_ITEM
+  });
+  const state = {
+    disabled,
+    highlighted
+  };
+  return useRenderElement.useRenderElement('div', componentProps, {
+    state,
+    props: [itemProps, elementProps, getItemProps],
+    ref: [itemRef, forwardedRef, listItem.ref]
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuItem.displayName = "MenuItem";
+
+/**
+ * A link in the menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    closeOnClick = false,
+    ...elementProps
+  } = componentProps;
+  const linkRef = React__namespace.useRef(null);
+  const listItem = useCompositeListItem({
+    label
+  });
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const nodeId = menuPositionerContext?.nodeId;
+  const id = clamp.useBaseUiId(idProp);
+  const {
+    store
+  } = useMenuRootContext();
+  const highlighted = store.useState('isActive', listItem.index);
+  const itemProps = store.useState('itemProps');
+  const typingRef = store.context.typingRef;
+  const {
+    getButtonProps,
+    buttonRef
+  } = clamp.useButton({
+    native: false,
+    composite: true
+  });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    itemRef: linkRef
+  });
+  function getItemProps(externalProps) {
+    return useRenderElement.mergeProps(commonProps, externalProps, getButtonProps);
+  }
+  const state = React__namespace.useMemo(() => ({
+    highlighted
+  }), [highlighted]);
+  return useRenderElement.useRenderElement('a', componentProps, {
+    state,
+    props: [itemProps, elementProps, getItemProps],
+    ref: [linkRef, buttonRef, forwardedRef, listItem.ref]
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
+
+const ToolbarRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
+function useToolbarRootContext(optional) {
+  const context = React__namespace.useContext(ToolbarRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.' : useRenderElement.formatErrorMessage(69));
+  }
+  return context;
+}
+
+const stateAttributesMapping = {
+  ...ScrollAreaViewport.popupStateMapping,
+  ...clamp.transitionStatusMapping
+};
+
+/**
+ * A container for the menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    finalFocus,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useMenuRootContext();
+  const {
+    side,
+    align
+  } = useMenuPositionerContext();
+  const insideToolbar = useToolbarRootContext(true) != null;
+  const open = store.useState('open');
+  const transitionStatus = store.useState('transitionStatus');
+  const popupProps = store.useState('popupProps');
+  const mounted = store.useState('mounted');
+  const instantType = store.useState('instantType');
+  const triggerElement = store.useState('activeTriggerElement');
+  const parent = store.useState('parent');
+  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
+  const rootId = store.useState('rootId');
+  const floatingContext = store.useState('floatingRootContext');
+  const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const closeDelay = store.useState('closeDelay');
+  const activeTriggerElement = store.useState('activeTriggerElement');
+  const isContextMenu = parent.type === 'context-menu';
+  clamp.useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
       }
-      nextIndexRef.current = sortedMap.size;
     }
-    onMapChange(sortedMap);
-  }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    return () => {
-      elementsRef.current = [];
-    };
-  }, [elementsRef]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    return () => {
-      if (labelsRef) {
-        labelsRef.current = [];
-      }
-    };
-  }, [labelsRef]);
-  const subscribeMapChange = useValueChanged.useStableCallback(fn => {
-    listeners.add(fn);
+  });
+  React__namespace.useEffect(() => {
+    function handleClose(event) {
+      store.setOpen(false, clamp.createChangeEventDetails(event.reason, event.domEvent));
+    }
+    floatingTreeRoot.events.on('close', handleClose);
     return () => {
-      listeners.delete(fn);
+      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
   });
-  useValueChanged.useIsoLayoutEffect(() => {
-    listeners.forEach(l => l(sortedMap));
-  }, [listeners, sortedMap]);
-  const contextValue = React__namespace.useMemo(() => ({
-    register,
-    unregister,
-    subscribeMapChange,
-    elementsRef,
-    labelsRef,
-    nextIndexRef
-  }), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
-  return /*#__PURE__*/jsxRuntime.jsx(CompositeListContext.Provider, {
-    value: contextValue,
-    children: children
+  const state = {
+    transitionStatus,
+    side,
+    align,
+    open,
+    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 && ScrollAreaViewport.COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      }
+    }, getDisabledMountTransitionStyles(transitionStatus), elementProps, {
+      'data-rootownerid': rootId
+    }]
   });
-}
-function createMap() {
-  return new Map();
-}
-function createListeners() {
-  return new Set();
-}
-function sortByDocumentPosition(a, b) {
-  const position = a.compareDocumentPosition(b);
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-    return -1;
+  let returnFocus = parent.type === undefined || isContextMenu;
+  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== clamp.outsidePress) {
+    returnFocus = true;
   }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
+  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingFocusManager, {
+    context: floatingContext,
+    modal: isContextMenu,
+    disabled: !mounted,
+    returnFocus: finalFocus === undefined ? returnFocus : finalFocus,
+    initialFocus: parent.type !== 'menu',
+    restoreFocus: true,
+    externalTree: parent.type !== 'menubar' ? floatingTreeRoot : undefined,
+    previousFocusableElement: activeTriggerElement,
+    nextFocusableElement: parent.type === undefined ? store.context.triggerFocusTargetRef : undefined,
+    beforeContentFocusGuardRef: parent.type === undefined ? store.context.beforeContentFocusGuardRef : undefined,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuPopup.displayName = "MenuPopup";
+
+const MenuPortalContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuPortalContext.displayName = "MenuPortalContext";
+function useMenuPortalContext() {
+  const value = React__namespace.useContext(MenuPortalContext);
+  if (value === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Portal> is missing.' : useRenderElement.formatErrorMessage(32));
   }
-  return 0;
+  return value;
 }
 
+const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(props, forwardedRef) {
+  const {
+    keepMounted = false,
+    ...portalProps
+  } = props;
+  const {
+    store
+  } = useMenuRootContext();
+  const mounted = store.useState('mounted');
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(MenuPortalContext.Provider, {
+    value: keepMounted,
+    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuPortal.displayName = "MenuPortal";
+
 const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPositioner(componentProps, forwardedRef) {
   const {
     anchor: anchorProp,
@@ -3298,7 +3333,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const domReference = floatingRootContext.useState('domReferenceElement');
   const previousTriggerRef = React__namespace.useRef(null);
-  const runOnceAnimationsFinish = useValueChanged.useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = clamp.useAnimationsFinished(positionerElement, false, false);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -3365,7 +3400,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
           store.set('hoverEnabled', false);
         }
         if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select('floatingParentNodeId')) {
-          store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.siblingOpen));
+          store.setOpen(false, clamp.createChangeEventDetails(clamp.siblingOpen));
         }
       }
     }
@@ -3382,15 +3417,15 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
       if (details.open || details.nodeId !== store.select('floatingParentNodeId')) {
         return;
       }
-      const reason = details.reason ?? useValueChanged.siblingOpen;
-      store.setOpen(false, useValueChanged.createChangeEventDetails(reason));
+      const reason = details.reason ?? clamp.siblingOpen;
+      store.setOpen(false, clamp.createChangeEventDetails(reason));
     }
     floatingTreeRoot.events.on('menuopenchange', onParentClose);
     return () => {
       floatingTreeRoot.events.off('menuopenchange', onParentClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const closeTimeout = useValueChanged.useTimeout();
+  const closeTimeout = clamp.useTimeout();
 
   // Clear pending close timeout when the menu closes.
   React__namespace.useEffect(() => {
@@ -3412,11 +3447,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
         if (delay > 0) {
           if (!closeTimeout.isStarted()) {
             closeTimeout.start(delay, () => {
-              store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.siblingOpen));
+              store.setOpen(false, clamp.createChangeEventDetails(clamp.siblingOpen));
             });
           }
         } else {
-          store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.siblingOpen));
+          store.setOpen(false, clamp.createChangeEventDetails(clamp.siblingOpen));
         }
       } else {
         // User re-hovered the submenu trigger, cancel pending close.
@@ -3439,7 +3474,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
 
   // Keep positioner transition behavior aligned with Popover when switching detached triggers.
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     const currentTrigger = domReference;
     const previousTrigger = previousTriggerRef.current;
     if (currentTrigger) {
@@ -3479,7 +3514,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
     props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
-  const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== useValueChanged.triggerHover || parent.type === 'menubar' && parent.context.modal);
+  const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== clamp.triggerHover || parent.type === 'menubar' && parent.context.modal);
 
   // cuts a hole in the backdrop to allow pointer interaction with the menubar or dropdown menu trigger element
   let backdropCutout = null;
@@ -3532,13 +3567,13 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     disabled = false,
     ...elementProps
   } = componentProps;
-  const [value, setValueUnwrapped] = useValueChanged.useControlled({
+  const [value, setValueUnwrapped] = clamp.useControlled({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = useValueChanged.useStableCallback(onValueChangeProp);
-  const setValue = useValueChanged.useStableCallback((newValue, eventDetails) => {
+  const onValueChange = clamp.useStableCallback(onValueChangeProp);
+  const setValue = clamp.useStableCallback((newValue, eventDetails) => {
     onValueChange?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
@@ -3595,7 +3630,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useValueChanged.useBaseUiId(idProp);
+  const id = clamp.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -3626,9 +3661,9 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useValueChanged.useStableCallback(event => {
+  const handleClick = clamp.useStableCallback(event => {
     const details = {
-      ...useValueChanged.createChangeEventDetails(useValueChanged.itemPress, event.nativeEvent),
+      ...clamp.createChangeEventDetails(clamp.itemPress, event.nativeEvent),
       preventUnmountOnClose: () => {}
     };
     setSelectedValue(value, details);
@@ -3668,8 +3703,8 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   const {
     transitionStatus,
     setMounted
-  } = useValueChanged.useTransitionStatus(item.checked);
-  useValueChanged.useOpenChangeComplete({
+  } = clamp.useTransitionStatus(item.checked);
+  clamp.useOpenChangeComplete({
     open: item.checked,
     ref: indicatorRef,
     onComplete() {
@@ -3919,7 +3954,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
   const floatingParentNodeIdFromContext = ScrollAreaViewport.useFloatingParentNodeId();
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.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.
@@ -3960,7 +3995,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
-    rootId: useValueChanged.useId()
+    rootId: clamp.useId()
   });
   const {
     openMethod,
@@ -3976,7 +4011,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     });
   });
   const allowOutsidePressDismissalRef = React__namespace.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = useValueChanged.useTimeout();
+  const allowOutsidePressDismissalTimeout = clamp.useTimeout();
   React__namespace.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -3997,15 +4032,15 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  ScrollAreaViewport.useScrollLock(open && modal && lastOpenChangeReason !== useValueChanged.triggerHover && openMethod !== 'touch', positionerElement);
-  useValueChanged.useIsoLayoutEffect(() => {
+  ScrollAreaViewport.useScrollLock(open && modal && lastOpenChangeReason !== clamp.triggerHover && openMethod !== 'touch', positionerElement);
+  clamp.useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
   const allowTouchToCloseRef = React__namespace.useRef(true);
-  const allowTouchToCloseTimeout = useValueChanged.useTimeout();
-  const setOpen = useValueChanged.useStableCallback((nextOpen, eventDetails) => {
+  const allowTouchToCloseTimeout = clamp.useTimeout();
+  const setOpen = clamp.useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
@@ -4051,7 +4086,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     // 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.
-    if (nextOpen && reason === useValueChanged.triggerFocus) {
+    if (nextOpen && reason === clamp.triggerFocus) {
       allowTouchToCloseRef.current = false;
       allowTouchToCloseTimeout.start(300, () => {
         allowTouchToCloseRef.current = true;
@@ -4060,8 +4095,8 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       allowTouchToCloseRef.current = true;
       allowTouchToCloseTimeout.clear();
     }
-    const isKeyboardClick = (reason === useValueChanged.triggerPress || reason === useValueChanged.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
-    const isDismissClose = !nextOpen && (reason === useValueChanged.escapeKey || reason == null);
+    const isKeyboardClick = (reason === clamp.triggerPress || reason === clamp.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
+    const isDismissClose = !nextOpen && (reason === clamp.escapeKey || reason == null);
     const updatedState = {
       open: nextOpen,
       openChangeReason: reason
@@ -4076,7 +4111,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       updatedState.activeTriggerElement = eventDetails.trigger ?? null;
     }
     store.update(updatedState);
-    if (parent.type === 'menubar' && (reason === useValueChanged.triggerFocus || reason === useValueChanged.focusOut || reason === useValueChanged.triggerHover || reason === useValueChanged.listNavigation || reason === useValueChanged.siblingOpen)) {
+    if (parent.type === 'menubar' && (reason === clamp.triggerFocus || reason === clamp.focusOut || reason === clamp.triggerHover || reason === clamp.listNavigation || reason === clamp.siblingOpen)) {
       store.set('instantType', 'group');
     } else if (isKeyboardClick || isDismissClose) {
       store.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
@@ -4085,14 +4120,14 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     }
   });
   const createMenuEventDetails = React__namespace.useCallback(reason => {
-    const details = useValueChanged.createChangeEventDetails(reason);
+    const details = clamp.createChangeEventDetails(reason);
     details.preventUnmountOnClose = () => {
       store.set('preventUnmountingOnClose', true);
     };
     return details;
   }, [store]);
   const handleImperativeClose = React__namespace.useCallback(() => {
-    store.setOpen(false, createMenuEventDetails(useValueChanged.imperativeAction));
+    store.setOpen(false, createMenuEventDetails(clamp.imperativeAction));
   }, [store, createMenuEventDetails]);
   React__namespace.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
@@ -4269,47 +4304,12 @@ function MenuSubmenuRoot(props) {
   });
 }
 
-function getPseudoElementBounds(element) {
-  const elementRect = element.getBoundingClientRect();
-
-  // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
-  if (process.env.NODE_ENV !== 'production') {
-    return elementRect;
-  }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
-  const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
-  if (!hasPseudoElements) {
-    return elementRect;
-  }
-
-  // Get dimensions of pseudo-elements
-  const beforeWidth = parseFloat(beforeStyles.width) || 0;
-  const beforeHeight = parseFloat(beforeStyles.height) || 0;
-  const afterWidth = parseFloat(afterStyles.width) || 0;
-  const afterHeight = parseFloat(afterStyles.height) || 0;
-
-  // Calculate max dimensions including pseudo-elements
-  const totalWidth = Math.max(elementRect.width, beforeWidth, afterWidth);
-  const totalHeight = Math.max(elementRect.height, beforeHeight, afterHeight);
-
-  // Calculate the differences to extend the bounds
-  const widthDiff = totalWidth - elementRect.width;
-  const heightDiff = totalHeight - elementRect.height;
-  return {
-    left: elementRect.left - widthDiff / 2,
-    right: elementRect.right + widthDiff / 2,
-    top: elementRect.top - heightDiff / 2,
-    bottom: elementRect.bottom + heightDiff / 2
-  };
-}
-
 function useCompositeItem(params = {}) {
   const {
     highlightItemOnHover,
     highlightedIndex,
     onHighlightedIndexChange
-  } = useValueChanged.useCompositeRootContext();
+  } = clamp.useCompositeRootContext();
   const {
     ref,
     index
@@ -4399,7 +4399,7 @@ function useMixedToggleClickHandler(params) {
       onMouseDown: event => {
         if (mouseDownAction === 'open' && !open || mouseDownAction === 'close' && open) {
           ignoreClickRef.current = true;
-          useValueChanged.ownerDocument(event.currentTarget).addEventListener('click', () => {
+          clamp.ownerDocument(event.currentTarget).addEventListener('click', () => {
             ignoreClickRef.current = false;
           }, {
             once: true
@@ -4443,13 +4443,13 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : useRenderElement.formatErrorMessage(85));
   }
-  const thisTriggerId = useValueChanged.useBaseUiId(idProp);
+  const thisTriggerId = clamp.useBaseUiId(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const triggerElementRef = React__namespace.useRef(null);
   const parent = useMenuParent();
-  const compositeRootContext = useValueChanged.useCompositeRootContext(true);
+  const compositeRootContext = clamp.useCompositeRootContext(true);
   const floatingTreeRootFromContext = ScrollAreaViewport.useFloatingTree();
   const floatingTreeRoot = React__namespace.useMemo(() => {
     return floatingTreeRootFromContext ?? new ScrollAreaViewport.FloatingTreeStore();
@@ -4474,7 +4474,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
   const {
     getButtonProps,
     buttonRef
-  } = useValueChanged.useButton({
+  } = clamp.useButton({
     disabled,
     native: nativeButton
   });
@@ -4484,8 +4484,8 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
     }
   }, [store, isOpenedByThisTrigger, parent.type]);
   const triggerRef = React__namespace.useRef(null);
-  const allowMouseUpTriggerTimeout = useValueChanged.useTimeout();
-  const handleDocumentMouseUp = useValueChanged.useStableCallback(mouseEvent => {
+  const allowMouseUpTriggerTimeout = clamp.useTimeout();
+  const handleDocumentMouseUp = clamp.useStableCallback(mouseEvent => {
     if (!triggerRef.current) {
       return;
     }
@@ -4504,12 +4504,12 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
     }
     floatingTreeRoot.events.emit('close', {
       domEvent: mouseEvent,
-      reason: useValueChanged.cancelOpen
+      reason: clamp.cancelOpen
     });
   });
   React__namespace.useEffect(() => {
-    if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === useValueChanged.triggerHover) {
-      const doc = useValueChanged.ownerDocument(triggerRef.current);
+    if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === clamp.triggerHover) {
+      const doc = clamp.ownerDocument(triggerRef.current);
       doc.addEventListener('mouseup', handleDocumentMouseUp, {
         once: true
       });
@@ -4571,7 +4571,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
       allowMouseUpTriggerTimeout.start(200, () => {
         store.context.allowMouseUpTriggerRef.current = true;
       });
-      const doc = useValueChanged.ownerDocument(event.currentTarget);
+      const doc = clamp.ownerDocument(event.currentTarget);
       doc.addEventListener('mouseup', handleDocumentMouseUp, {
         once: true
       });
@@ -4580,20 +4580,20 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
   const preFocusGuardRef = React__namespace.useRef(null);
-  const handlePreFocusGuardFocus = useValueChanged.useStableCallback(event => {
+  const handlePreFocusGuardFocus = clamp.useStableCallback(event => {
     ReactDOM__namespace.flushSync(() => {
-      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent, event.currentTarget));
+      store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent, event.currentTarget));
     });
     const previousTabbable = ScrollAreaViewport.getTabbableBeforeElement(preFocusGuardRef.current);
     previousTabbable?.focus();
   });
-  const handleFocusTargetFocus = useValueChanged.useStableCallback(event => {
+  const handleFocusTargetFocus = clamp.useStableCallback(event => {
     const currentPositionerElement = store.select('positionerElement');
     if (currentPositionerElement && ScrollAreaViewport.isOutsideEvent(event, currentPositionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
     } else {
       ReactDOM__namespace.flushSync(() => {
-        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent, event.currentTarget));
+        store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent, event.currentTarget));
       });
       let nextTabbable = ScrollAreaViewport.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
       while (nextTabbable !== null && ScrollAreaViewport.contains(currentPositionerElement, nextTabbable)) {
@@ -4650,9 +4650,9 @@ if (process.env.NODE_ENV !== "production") MenuTrigger.displayName = "MenuTrigge
  * Determines whether to ignore clicks after a hover-open.
  */
 function useStickIfOpen(open, openReason) {
-  const stickIfOpenTimeout = useValueChanged.useTimeout();
+  const stickIfOpenTimeout = clamp.useTimeout();
   const [stickIfOpen, setStickIfOpen] = React__namespace.useState(false);
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (open && openReason === 'trigger-hover') {
       // Only allow "patient" clicks to close the menu if it's open.
       // If they clicked within 500ms of the menu opening, keep it open.
@@ -4719,7 +4719,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   const {
     store
   } = useMenuRootContext();
-  const thisTriggerId = useValueChanged.useBaseUiId(idProp);
+  const thisTriggerId = clamp.useBaseUiId(idProp);
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');