@jobber/components 8.14.1 → 8.16.0

package/dist/MenuSubmenuTrigger-cjs.js

@@ -1,10 +1,9 @@
 'use strict';
 
 var React = require('react');
-var DrawerRoot = require('./DrawerRoot-cjs.js');
+var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var useValueChanged = require('./useValueChanged-cjs.js');
-var useBaseUiId = require('./useBaseUiId-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');
@@ -31,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
-  } = DrawerRoot.useDialogRootContext();
-  const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.closePress, event.nativeEvent));
-    }
-  }
-  const {
-    getButtonProps,
-    buttonRef
-  } = useBaseUiId.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') {
@@ -108,134 +56,31 @@ function isClickLikeOpenEvent(openEventType, interactedInside) {
   return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
 }
 
-/**
- * Opens or closes the floating element when clicking the reference element.
- * @see https://floating-ui.com/docs/useClick
- */
-function useClick(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const dataRef = store.context.dataRef;
-  const {
-    enabled = true,
-    event: eventOption = 'click',
-    toggle = true,
-    ignoreMouse = false,
-    stickIfOpen = true,
-    touchOpenDelay = 0,
-    reason = useValueChanged.triggerPress
-  } = props;
-  const pointerTypeRef = React__namespace.useRef(undefined);
-  const frame = useValueChanged.useAnimationFrame();
-  const touchOpenTimeout = useValueChanged.useTimeout();
-  const reference = React__namespace.useMemo(() => ({
-    onPointerDown(event) {
-      pointerTypeRef.current = event.pointerType;
-    },
-    onMouseDown(event) {
-      const pointerType = pointerTypeRef.current;
-      const nativeEvent = event.nativeEvent;
-      const open = store.select('open');
-
-      // Ignore all buttons except for the "main" button.
-      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-      if (event.button !== 0 || eventOption === 'click' || useValueChanged.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
-        return;
-      }
-      const openEvent = dataRef.current.openEvent;
-      const openEventType = openEvent?.type;
-      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? openEventType === 'click' || openEventType === 'mousedown' : true));
-
-      // Animations sometimes won't run on a typeable element if using a rAF.
-      // Focus is always set on these elements. For touch, we may delay opening.
-      if (DrawerRoot.isTypeableElement(nativeEvent.target)) {
-        const details = useValueChanged.createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
-        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-          touchOpenTimeout.start(touchOpenDelay, () => {
-            store.setOpen(true, details);
-          });
-        } else {
-          store.setOpen(nextOpen, details);
-        }
-        return;
-      }
-
-      // Capture the currentTarget before the rAF.
-      // as React sets it to null after the event handler completes.
-      const eventCurrentTarget = event.currentTarget;
-
-      // Wait until focus is set on the element. This is an alternative to
-      // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
-      frame.request(() => {
-        const details = useValueChanged.createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
-        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-          touchOpenTimeout.start(touchOpenDelay, () => {
-            store.setOpen(true, details);
-          });
-        } else {
-          store.setOpen(nextOpen, details);
-        }
-      });
-    },
-    onClick(event) {
-      if (eventOption === 'mousedown-only') {
-        return;
-      }
-      const pointerType = pointerTypeRef.current;
-      if (eventOption === 'mousedown' && pointerType) {
-        pointerTypeRef.current = undefined;
-        return;
-      }
-      if (useValueChanged.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
-        return;
-      }
-      const open = store.select('open');
-      const openEvent = dataRef.current.openEvent;
-      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? useValueChanged.isClickLikeEvent(openEvent) : true));
-      const details = useValueChanged.createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
-      if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
-        touchOpenTimeout.start(touchOpenDelay, () => {
-          store.setOpen(true, details);
-        });
-      } else {
-        store.setOpen(nextOpen, details);
-      }
-    },
-    onKeyDown() {
-      pointerTypeRef.current = undefined;
-    }
-  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
-  return React__namespace.useMemo(() => enabled ? {
-    reference
-  } : useRenderElement.EMPTY_OBJECT, [enabled, reference]);
-}
-
 function useFloatingRootContext(options) {
   const {
     open = false,
     onOpenChange,
     elements = {}
   } = options;
-  const floatingId = useValueChanged.useId();
-  const nested = DrawerRoot.useFloatingParentNodeId() != null;
+  const floatingId = clamp.useId();
+  const nested = ScrollAreaViewport.useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== 'production') {
     const optionDomReference = elements.reference;
     if (optionDomReference && !floatingUi_utils_dom.isElement(optionDomReference)) {
       console.error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `context.setPositionReference()`', 'instead.');
     }
   }
-  const store = useRenderElement.useRefWithInit(() => new DrawerRoot.FloatingRootStore({
+  const store = useRenderElement.useRefWithInit(() => new ScrollAreaViewport.FloatingRootStore({
     open,
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
-    triggerElements: new DrawerRoot.PopupTriggerMap(),
+    triggerElements: new ScrollAreaViewport.PopupTriggerMap(),
     floatingId,
     nested,
     noEmit: false
   })).current;
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     const valuesToSync = {
       open,
       floatingId
@@ -275,8 +120,8 @@ function useFloating(options = {}) {
   };
   const [positionReference, setPositionReferenceRaw] = React__namespace.useState(null);
   const domReferenceRef = React__namespace.useRef(null);
-  const tree = DrawerRoot.useFloatingTree(externalTree);
-  useValueChanged.useIsoLayoutEffect(() => {
+  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
+  clamp.useIsoLayoutEffect(() => {
     if (rootContextElements.domReference) {
       domReferenceRef.current = rootContextElements.domReference;
     }
@@ -351,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) {
@@ -367,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`.
@@ -386,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');
@@ -400,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 === DrawerRoot.activeElement(useValueChanged.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === ScrollAreaViewport.activeElement(clamp.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -428,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;
@@ -455,33 +300,33 @@ function useFocus(context, props = {}) {
         blockFocusRef.current = false;
         blockedReferenceRef.current = null;
       }
-      const target = DrawerRoot.getTarget(event.nativeEvent);
+      const target = ScrollAreaViewport.getTarget(event.nativeEvent);
       if (floatingUi_utils_dom.isElement(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !DrawerRoot.isTypeableElement(target)) {
+          if (!keyboardModalityRef.current && !ScrollAreaViewport.isTypeableElement(target)) {
             return;
           }
-        } else if (!DrawerRoot.matchesFocusVisible(target)) {
+        } else if (!ScrollAreaViewport.matchesFocusVisible(target)) {
           return;
         }
       }
-      const movedFromOtherEnabledTrigger = DrawerRoot.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
+      const movedFromOtherEnabledTrigger = ScrollAreaViewport.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
       const {
         nativeEvent,
         currentTarget
       } = event;
       const delayValue = typeof delay === 'function' ? delay() : delay;
       if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
-        store.setOpen(true, 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) {
@@ -492,12 +337,12 @@ function useFocus(context, props = {}) {
 
       // Hit the non-modal focus management portal guard. Focus will be
       // moved into the floating element immediately after.
-      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(DrawerRoot.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(ScrollAreaViewport.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
         const domReference = store.select('domReferenceElement');
-        const activeEl = DrawerRoot.activeElement(domReference ? domReference.ownerDocument : document);
+        const activeEl = ScrollAreaViewport.activeElement(domReference ? domReference.ownerDocument : document);
 
         // Focus left the page, keep it open.
         if (!relatedTarget && activeEl === domReference) {
@@ -511,7 +356,7 @@ function useFocus(context, props = {}) {
         // as it will only point to the shadow host of the newly focused element
         // and not the element that actually has received focus if it is located
         // inside a shadow root.
-        if (DrawerRoot.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || DrawerRoot.contains(domReference, activeEl) || movedToFocusGuard) {
+        if (ScrollAreaViewport.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || ScrollAreaViewport.contains(domReference, activeEl) || movedToFocusGuard) {
           return;
         }
 
@@ -519,10 +364,10 @@ function useFocus(context, props = {}) {
         // the floating element. The focus handler of that trigger will
         // handle the open state.
         const nextFocusedElement = relatedTarget ?? activeEl;
-        if (DrawerRoot.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+        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]);
@@ -532,7 +377,7 @@ function useFocus(context, props = {}) {
   } : {}, [enabled, reference]);
 }
 
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${DrawerRoot.TYPEABLE_SELECTOR}`;
+const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${ScrollAreaViewport.TYPEABLE_SELECTOR}`;
 function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
 }
@@ -547,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() {
@@ -595,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;
 }
 
@@ -615,22 +460,22 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     closeDelay: closeDelayProp = 0
   } = parameters;
   const instance = useHoverInteractionSharedState(store);
-  const tree = DrawerRoot.useFloatingTree();
-  const parentId = DrawerRoot.useFloatingParentNodeId();
-  const isClickLikeOpenEvent$1 = useValueChanged.useStableCallback(() => {
+  const tree = ScrollAreaViewport.useFloatingTree();
+  const parentId = ScrollAreaViewport.useFloatingParentNodeId();
+  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 => {
-    return DrawerRoot.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  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) {
@@ -640,18 +485,18 @@ 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 target = DrawerRoot.getTarget(event);
+  const handleInteractInside = clamp.useStableCallback(event => {
+    const target = ScrollAreaViewport.getTarget(event);
     if (!isInteractiveElement(target)) {
       instance.interactedInside = false;
       return;
     }
     instance.interactedInside = target?.closest('[aria-haspopup]') != null;
   });
-  useValueChanged.useIsoLayoutEffect(() => {
+  clamp.useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
       instance.restTimeoutPending = false;
@@ -662,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 = '';
@@ -686,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;
@@ -698,7 +543,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && DrawerRoot.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (tree && parentId && ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
@@ -719,13 +564,13 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || DrawerRoot.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
         return;
       }
       // 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);
       });
     }
@@ -772,28 +617,28 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext
   } = props;
-  const tree = DrawerRoot.useFloatingTree(externalTree);
+  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 => {
-    return DrawerRoot.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  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.
     if (allTriggers.hasElement(currentTarget)) {
-      return !currentDomReference || !DrawerRoot.contains(currentDomReference, currentTarget);
+      return !currentDomReference || !ScrollAreaViewport.contains(currentDomReference, currentTarget);
     }
 
     // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
@@ -801,31 +646,31 @@ function useHoverReferenceInteraction(context, props = {}) {
       return false;
     }
     const targetElement = target;
-    return allTriggers.hasMatchingElement(trigger => DrawerRoot.contains(trigger, targetElement)) && (!currentDomReference || !DrawerRoot.contains(currentDomReference, targetElement));
+    return allTriggers.hasMatchingElement(trigger => ScrollAreaViewport.contains(trigger, targetElement)) && (!currentDomReference || !ScrollAreaViewport.contains(currentDomReference, targetElement));
   });
   const closeWithDelay = React__namespace.useCallback((event, runElseBranch = true) => {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
     if (closeDelay) {
       instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, 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);
   });
 
@@ -860,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;
       }
 
@@ -879,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) {
@@ -897,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?.();
@@ -927,7 +772,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         instance.handler(event);
         return;
       }
-      const shouldClose = instance.pointerType === 'touch' ? !DrawerRoot.contains(store.select('floatingElement'), event.relatedTarget) : true;
+      const shouldClose = instance.pointerType === 'touch' ? !ScrollAreaViewport.contains(store.select('floatingElement'), event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -965,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);
@@ -986,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') {
@@ -1016,23 +861,23 @@ function doSwitch(orientation, vertical, horizontal) {
   }
 }
 function isMainOrientationKey(key, orientation) {
-  const vertical = key === DrawerRoot.ARROW_UP || key === DrawerRoot.ARROW_DOWN;
-  const horizontal = key === DrawerRoot.ARROW_LEFT || key === DrawerRoot.ARROW_RIGHT;
+  const vertical = key === ScrollAreaViewport.ARROW_UP || key === ScrollAreaViewport.ARROW_DOWN;
+  const horizontal = key === ScrollAreaViewport.ARROW_LEFT || key === ScrollAreaViewport.ARROW_RIGHT;
   return doSwitch(orientation, vertical, horizontal);
 }
 function isMainOrientationToEndKey(key, orientation, rtl) {
-  const vertical = key === DrawerRoot.ARROW_DOWN;
-  const horizontal = rtl ? key === DrawerRoot.ARROW_LEFT : key === DrawerRoot.ARROW_RIGHT;
+  const vertical = key === ScrollAreaViewport.ARROW_DOWN;
+  const horizontal = rtl ? key === ScrollAreaViewport.ARROW_LEFT : key === ScrollAreaViewport.ARROW_RIGHT;
   return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === '';
 }
 function isCrossOrientationOpenKey(key, orientation, rtl) {
-  const vertical = rtl ? key === DrawerRoot.ARROW_LEFT : key === DrawerRoot.ARROW_RIGHT;
-  const horizontal = key === DrawerRoot.ARROW_DOWN;
+  const vertical = rtl ? key === ScrollAreaViewport.ARROW_LEFT : key === ScrollAreaViewport.ARROW_RIGHT;
+  const horizontal = key === ScrollAreaViewport.ARROW_DOWN;
   return doSwitch(orientation, vertical, horizontal);
 }
 function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
-  const vertical = rtl ? key === DrawerRoot.ARROW_RIGHT : key === DrawerRoot.ARROW_LEFT;
-  const horizontal = key === DrawerRoot.ARROW_UP;
+  const vertical = rtl ? key === ScrollAreaViewport.ARROW_RIGHT : key === ScrollAreaViewport.ARROW_LEFT;
+  const horizontal = key === ScrollAreaViewport.ARROW_UP;
   if (orientation === 'both' || orientation === 'horizontal' && cols && cols > 1) {
     return key === ESCAPE;
   }
@@ -1084,19 +929,19 @@ function useListNavigation(context, props) {
       console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
-  const floatingFocusElement = DrawerRoot.getFloatingFocusElement(floatingElement);
-  const floatingFocusElementRef = useValueChanged.useValueAsRef(floatingFocusElement);
-  const parentId = DrawerRoot.useFloatingParentNodeId();
-  const tree = DrawerRoot.useFloatingTree(externalTree);
-  useValueChanged.useIsoLayoutEffect(() => {
+  const floatingFocusElement = ScrollAreaViewport.getFloatingFocusElement(floatingElement);
+  const floatingFocusElementRef = clamp.useValueAsRef(floatingFocusElement);
+  const parentId = ScrollAreaViewport.useFloatingParentNodeId();
+  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
+  clamp.useIsoLayoutEffect(() => {
     dataRef.current.orientation = orientation;
   }, [dataRef, orientation]);
-  const typeableComboboxReference = DrawerRoot.isTypeableCombobox(domReferenceElement);
+  const typeableComboboxReference = ScrollAreaViewport.isTypeableCombobox(domReferenceElement);
   const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
   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);
@@ -1104,16 +949,16 @@ 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);
       } else {
-        DrawerRoot.enqueueFocus(item, {
+        ScrollAreaViewport.enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -1149,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;
     }
@@ -1172,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;
     }
@@ -1210,14 +1055,14 @@ function useListNavigation(context, props) {
             runs += 1;
           } else {
             // initially focus the first non-disabled item
-            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? DrawerRoot.getMinListIndex(listRef) : DrawerRoot.getMaxListIndex(listRef);
+            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? ScrollAreaViewport.getMinListIndex(listRef) : ScrollAreaViewport.getMaxListIndex(listRef);
             keyRef.current = null;
             onNavigate();
           }
         };
         waitForListPopulated();
       }
-    } else if (!DrawerRoot.isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!ScrollAreaViewport.isIndexOutOfListBounds(listRef, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -1226,26 +1071,26 @@ 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 = DrawerRoot.activeElement(useValueChanged.ownerDocument(floatingElement));
-    const treeContainsActiveEl = nodes.some(node => node.context && DrawerRoot.contains(node.context.elements.floating, activeEl));
+    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({
         preventScroll: true
       });
     }
   }, [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;
@@ -1293,15 +1138,15 @@ function useListNavigation(context, props) {
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        DrawerRoot.enqueueFocus(null, {
+        ScrollAreaViewport.enqueueFocus(null, {
           sync: true
         });
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
           const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = DrawerRoot.activeElement(useValueChanged.ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && DrawerRoot.contains(floatingFocusEl, activeEl)) {
+          const activeEl = ScrollAreaViewport.activeElement(clamp.ownerDocument(floatingFocusEl));
+          if (floatingFocusEl && ScrollAreaViewport.contains(floatingFocusEl, activeEl)) {
             floatingFocusEl.focus({
               preventScroll: true
             });
@@ -1314,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;
 
@@ -1336,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);
@@ -1349,16 +1194,16 @@ function useListNavigation(context, props) {
       return;
     }
     const currentIndex = indexRef.current;
-    const minIndex = DrawerRoot.getMinListIndex(listRef, disabledIndices);
-    const maxIndex = DrawerRoot.getMaxListIndex(listRef, disabledIndices);
+    const minIndex = ScrollAreaViewport.getMinListIndex(listRef, disabledIndices);
+    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);
       }
@@ -1374,11 +1219,11 @@ function useListNavigation(context, props) {
       }));
       // To calculate movements on the grid, we use hypothetical cell indices
       // as if every item was 1x1, then convert back to real indices.
-      const cellMap = DrawerRoot.createGridCellMap(sizes, cols);
-      const minGridIndex = cellMap.findIndex(index => index != null && !DrawerRoot.isListIndexDisabled(listRef, index, disabledIndices));
+      const cellMap = ScrollAreaViewport.createGridCellMap(sizes, cols);
+      const minGridIndex = cellMap.findIndex(index => index != null && !ScrollAreaViewport.isListIndexDisabled(listRef, index, disabledIndices));
       // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !DrawerRoot.isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[DrawerRoot.getGridNavigatedIndex({
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !ScrollAreaViewport.isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[ScrollAreaViewport.getGridNavigatedIndex({
         current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
       }, {
         event,
@@ -1388,15 +1233,15 @@ function useListNavigation(context, props) {
         cols,
         // treat undefined (empty grid spaces) as disabled indices so we
         // don't end up in them
-        disabledIndices: DrawerRoot.getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => DrawerRoot.isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
+        disabledIndices: ScrollAreaViewport.getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => ScrollAreaViewport.isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
-        prevIndex: DrawerRoot.getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
+        prevIndex: ScrollAreaViewport.getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
         // use a corner matching the edge closest to the direction
         // we're moving in so we don't end up in the same item. Prefer
         // top/left over bottom/right.
         // eslint-disable-next-line no-nested-ternary
-        event.key === DrawerRoot.ARROW_DOWN ? 'bl' : event.key === (rtl ? DrawerRoot.ARROW_LEFT : DrawerRoot.ARROW_RIGHT) ? 'tr' : 'tl'),
+        event.key === ScrollAreaViewport.ARROW_DOWN ? 'bl' : event.key === (rtl ? ScrollAreaViewport.ARROW_LEFT : ScrollAreaViewport.ARROW_RIGHT) ? 'tr' : 'tl'),
         stopEvent: true
       })];
       if (index != null) {
@@ -1408,10 +1253,10 @@ 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 && DrawerRoot.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
+      if (open && !virtual && ScrollAreaViewport.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
         indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
         onNavigate(event);
         return;
@@ -1427,13 +1272,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = DrawerRoot.findNonDisabledListIndex(listRef, {
+            indexRef.current = ScrollAreaViewport.findNonDisabledListIndex(listRef, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, DrawerRoot.findNonDisabledListIndex(listRef, {
+          indexRef.current = Math.min(maxIndex, ScrollAreaViewport.findNonDisabledListIndex(listRef, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -1448,20 +1293,20 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = DrawerRoot.findNonDisabledListIndex(listRef, {
+          indexRef.current = ScrollAreaViewport.findNonDisabledListIndex(listRef, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, DrawerRoot.findNonDisabledListIndex(listRef, {
+        indexRef.current = Math.max(minIndex, ScrollAreaViewport.findNonDisabledListIndex(listRef, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if (DrawerRoot.isIndexOutOfListBounds(listRef, indexRef.current)) {
+      if (ScrollAreaViewport.isIndexOutOfListBounds(listRef, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
@@ -1482,12 +1327,12 @@ function useListNavigation(context, props) {
           // If the event originated from within a nested element (e.g., a Dialog opened from
           // within the menu), don't close the menu. The nested element has its own focus
           // management and should handle the Tab key.
-          const target = DrawerRoot.getTarget(event.nativeEvent);
-          if (target && !DrawerRoot.contains(floatingFocusElementRef.current, target)) {
+          const target = ScrollAreaViewport.getTarget(event.nativeEvent);
+          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();
           }
@@ -1502,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;
       }
     }
@@ -1537,12 +1382,12 @@ function useListNavigation(context, props) {
         }
         if (nested) {
           if (isParentCrossOpenKey) {
-            useValueChanged.stopEvent(event);
+            clamp.stopEvent(event);
             if (currentOpen) {
-              indexRef.current = DrawerRoot.getMinListIndex(listRef, disabledIndicesRef.current);
+              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;
@@ -1551,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);
           }
@@ -1608,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;
     }
@@ -1622,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;
@@ -1639,10 +1484,10 @@ 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 || DrawerRoot.isElementVisible(element);
+      return !element || ScrollAreaViewport.isElementVisible(element);
     }
     function getMatchingIndex(list, string, startIndex = 0) {
       if (list.length === 0) {
@@ -1663,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] !== ' ') {
@@ -1679,7 +1524,7 @@ function useTypeahead(context, props) {
       return;
     }
     if (open && event.key !== ' ') {
-      useValueChanged.stopEvent(event);
+      clamp.stopEvent(event);
       setTypingChange(true);
     }
 
@@ -1720,12 +1565,12 @@ 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');
-    const withinReference = DrawerRoot.contains(currentDomReferenceElement, next);
-    const withinFloating = DrawerRoot.contains(currentFloatingElement, next);
+    const withinReference = ScrollAreaViewport.contains(currentDomReferenceElement, next);
+    const withinFloating = ScrollAreaViewport.contains(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
     if (withinReference || withinFloating) {
@@ -1797,7 +1642,7 @@ function safePolygon(options = {}) {
   const {
     blockPointerEvents = false
   } = options;
-  const timeout = new useValueChanged.Timeout();
+  const timeout = new clamp.Timeout();
   const fn = ({
     x,
     y,
@@ -1845,10 +1690,10 @@ function safePolygon(options = {}) {
         clientX,
         clientY
       } = event;
-      const target = DrawerRoot.getTarget(event);
+      const target = ScrollAreaViewport.getTarget(event);
       const isLeave = event.type === 'mouseleave';
-      const isOverFloatingEl = DrawerRoot.contains(floating, target);
-      const isOverReferenceEl = DrawerRoot.contains(domReference, target);
+      const isOverFloatingEl = ScrollAreaViewport.contains(floating, target);
+      const isOverReferenceEl = ScrollAreaViewport.contains(domReference, target);
       if (isOverFloatingEl) {
         hasLanded = true;
         if (!isLeave) {
@@ -1865,11 +1710,11 @@ function safePolygon(options = {}) {
 
       // Prevent overlapping floating element from being stuck in an open-close
       // loop: https://github.com/floating-ui/floating-ui/issues/1910
-      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && DrawerRoot.contains(floating, event.relatedTarget)) {
+      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && ScrollAreaViewport.contains(floating, event.relatedTarget)) {
         return undefined;
       }
       function hasOpenChildNode() {
-        return Boolean(tree && DrawerRoot.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
+        return Boolean(tree && ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
       }
       function closeIfNoOpenChild() {
         if (!hasOpenChildNode()) {
@@ -1995,1452 +1840,1460 @@ 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
-  } = DrawerRoot.useDialogRootContext();
-  const id = useBaseUiId.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";
+function getPseudoElementBounds(element) {
+  const elementRect = element.getBoundingClientRect();
 
-/**
- * A button that opens the dialog.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
- */
-const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    id: idProp,
-    payload,
-    handle,
-    ...elementProps
-  } = componentProps;
-  const dialogRootContext = DrawerRoot.useDialogRootContext(true);
-  const store = handle?.store ?? dialogRootContext?.store;
-  if (!store) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : useRenderElement.formatErrorMessage(79));
+  // 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;
   }
-  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
-  const floatingContext = store.useState('floatingRootContext');
-  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
-  const triggerElementRef = React__namespace.useRef(null);
-  const {
-    registerTrigger,
-    isMountedByThisTrigger
-  } = DrawerRoot.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
-    payload
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = useBaseUiId.useButton({
-    disabled,
-    native: nativeButton
-  });
-  const click = useClick(floatingContext, {
-    enabled: floatingContext != null
-  });
-  const localInteractionProps = DrawerRoot.useInteractions([click]);
-  const state = {
-    disabled,
-    open: isOpenedByThisTrigger
-  };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  return useRenderElement.useRenderElement('button', componentProps, {
-    state,
-    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
-      [DrawerRoot.CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
-    }, elementProps, getButtonProps],
-    stateAttributesMapping: DrawerRoot.triggerOpenStateMapping
-  });
-});
-if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
-
-/**
- * A heading that labels the drawer.
- * Renders an `<h2>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerTitle = DialogTitle;
 
-/**
- * A button that opens the drawer.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
- */
-const DrawerTrigger = DialogTrigger;
+  // 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;
 
-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;
-}
+  // Calculate max dimensions including pseudo-elements
+  const totalWidth = Math.max(elementRect.width, beforeWidth, afterWidth);
+  const totalHeight = Math.max(elementRect.height, beforeHeight, afterHeight);
 
-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;
+  // 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 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 CompositeListContext = /*#__PURE__*/React__namespace.createContext({
+  register: () => {},
+  unregister: () => {},
+  subscribeMapChange: () => {
+    return () => {};
+  },
+  elementsRef: {
+    current: []
+  },
+  nextIndexRef: {
+    current: 0
   }
-  return context;
+});
+if (process.env.NODE_ENV !== "production") CompositeListContext.displayName = "CompositeListContext";
+function useCompositeListContext() {
+  return React__namespace.useContext(CompositeListContext);
 }
 
+/* eslint-disable no-bitwise */
 /**
- * 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.
+ * Provides context for a list of items in a composite component.
+ * @internal
  */
-function useMenuItemCommonProps(params) {
-  const {
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef,
-    itemMetadata
-  } = params;
+function CompositeList(props) {
   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;
-      }
+    children,
+    elementsRef,
+    labelsRef,
+    onMapChange: onMapChangeProp
+  } = props;
+  const onMapChange = clamp.useStableCallback(onMapChangeProp);
+  const nextIndexRef = React__namespace.useRef(0);
+  const listeners = useRenderElement.useRefWithInit(createListeners).current;
 
-      // 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
+  // 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
       });
-    },
-    onClick(event) {
-      if (closeOnClick) {
-        menuEvents.emit('close', {
-          domEvent: event,
-          reason: useValueChanged.itemPress
+    });
+    return newMap;
+  }, [map, mapTick]);
+  clamp.useIsoLayoutEffect(() => {
+    if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
+      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);
+      }
+    });
+    sortedMap.forEach((_, node) => {
+      if (node.parentElement) {
+        mutationObserver.observe(node.parentElement, {
+          childList: true
         });
       }
-    },
-    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 && !useValueChanged.isMac && event.button === 2) {
-          return;
-        }
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [sortedMap]);
+  clamp.useIsoLayoutEffect(() => {
+    const shouldUpdateLengths = lastTickRef.current === mapTick;
+    if (shouldUpdateLengths) {
+      if (elementsRef.current.length !== sortedMap.size) {
+        elementsRef.current.length = sortedMap.size;
       }
-      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();
-        }
+      if (labelsRef && labelsRef.current.length !== sortedMap.size) {
+        labelsRef.current.length = sortedMap.size;
       }
+      nextIndexRef.current = sortedMap.size;
     }
-  }), [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
-  } = useBaseUiId.useButton({
-    disabled,
-    focusableWhenDisabled: true,
-    native: nativeButton,
-    composite: true
+    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);
+    };
   });
-  const commonProps = useMenuItemCommonProps({
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef,
-    itemMetadata
+  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
   });
-  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]);
 }
-
-const CompositeListContext = /*#__PURE__*/React__namespace.createContext({
-  register: () => {},
-  unregister: () => {},
-  subscribeMapChange: () => {
-    return () => {};
-  },
-  elementsRef: {
-    current: []
-  },
-  nextIndexRef: {
-    current: 0
+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 (process.env.NODE_ENV !== "production") CompositeListContext.displayName = "CompositeListContext";
-function useCompositeListContext() {
-  return React__namespace.useContext(CompositeListContext);
+  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+    return 1;
+  }
+  return 0;
 }
 
-let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
-  IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
-  IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
-  return IndexGuessBehavior;
-}({});
-
 /**
- * Used to register a list item and its index (DOM position) in the `CompositeList`.
+ * Fork of the original `arrow` middleware from Floating UI that allows
+ * configuring the offset parent.
  */
-function useCompositeListItem(params = {}) {
-  const {
-    label,
-    metadata,
-    textRef,
-    indexGuessBehavior,
-    index: externalIndex
-  } = params;
-  const {
-    register,
-    unregister,
-    subscribeMapChange,
-    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);
-      };
+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 {};
     }
-    return undefined;
-  }, [externalIndex, register, unregister, metadata]);
-  useValueChanged.useIsoLayoutEffect(() => {
-    if (externalIndex != null) {
-      return undefined;
+    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];
     }
-    return subscribeMapChange(map => {
-      const i = componentRef.current ? map.get(componentRef.current)?.index : null;
-      if (i != null) {
-        setIndex(i);
-      }
-    });
-  }, [externalIndex, subscribeMapChange, setIndex]);
-  return React__namespace.useMemo(() => ({
-    ref,
-    index
-  }), [index, ref]);
-}
+    const centerToReference = endDiff / 2 - startDiff / 2;
 
-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;
-}({});
+    // 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);
 
-const itemMapping = {
-  checked(value) {
-    if (value) {
-      return {
-        [MenuCheckboxItemDataAttributes.checked]: ''
-      };
-    }
+    // 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 {
-      [MenuCheckboxItemDataAttributes.unchecked]: ''
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
     };
-  },
-  ...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
-    }
-  });
-  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)
+ * 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 MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const id = useBaseUiId.useBaseUiId(idProp);
-  const {
-    setLabelId
-  } = useMenuGroupRootContext();
-  useValueChanged.useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
+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
+      }
     };
-  }, [setLabelId, id]);
-  return useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: {
-      id,
-      role: 'presentation',
-      ...elementProps
+  }
+};
+
+const DEFAULT_SIDES = {
+  sideX: 'left',
+  sideY: 'top'
+};
+const adaptiveOrigin = {
+  name: 'adaptiveOrigin',
+  async fn(state) {
+    const {
+      x: rawX,
+      y: rawY,
+      rects: {
+        floating: floatRect
+      },
+      elements: {
+        floating
+      },
+      platform,
+      strategy,
+      placement
+    } = state;
+    const win = floatingUi_utils_dom.getWindow(floating);
+    const styles = win.getComputedStyle(floating);
+    const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
+    if (!hasTransition) {
+      return {
+        x: rawX,
+        y: rawY,
+        data: DEFAULT_SIDES
+      };
     }
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
+    const offsetParent = await platform.getOffsetParent?.(floating);
+    let offsetDimensions = {
+      width: 0,
+      height: 0
+    };
 
-/**
- * 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 = useBaseUiId.useBaseUiId(idProp);
-  const {
-    store
-  } = useMenuRootContext();
-  const highlighted = store.useState('isActive', listItem.index);
-  const itemProps = store.useState('itemProps');
+    // For fixed strategy, prefer visualViewport if available
+    if (strategy === 'fixed' && win?.visualViewport) {
+      offsetDimensions = {
+        width: win.visualViewport.width,
+        height: win.visualViewport.height
+      };
+    } else if (offsetParent === win) {
+      const doc = clamp.ownerDocument(floating);
+      offsetDimensions = {
+        width: doc.documentElement.clientWidth,
+        height: doc.documentElement.clientHeight
+      };
+    } else if (await platform.isElement?.(offsetParent)) {
+      offsetDimensions = await platform.getDimensions(offsetParent);
+    }
+    const currentSide = index_esm.getSide(placement);
+    let x = rawX;
+    let y = rawY;
+    if (currentSide === 'left') {
+      x = offsetDimensions.width - (rawX + floatRect.width);
+    }
+    if (currentSide === 'top') {
+      y = offsetDimensions.height - (rawY + floatRect.height);
+    }
+    const sideX = currentSide === 'left' ? 'right' : DEFAULT_SIDES.sideX;
+    const sideY = currentSide === 'top' ? 'bottom' : DEFAULT_SIDES.sideY;
+    return {
+      x,
+      y,
+      data: {
+        sideX,
+        sideY
+      }
+    };
+  }
+};
+
+function getLogicalSide(sideParam, renderedSide, isRtl) {
+  const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
+  const logicalRight = isRtl ? 'inline-start' : 'inline-end';
+  const logicalLeft = isRtl ? 'inline-end' : 'inline-start';
+  return {
+    top: 'top',
+    right: isLogicalSideParam ? logicalRight : 'right',
+    bottom: 'bottom',
+    left: isLogicalSideParam ? logicalLeft : 'left'
+  }[renderedSide];
+}
+function getOffsetData(state, sideParam, isRtl) {
   const {
-    getItemProps,
-    itemRef
-  } = useMenuItem({
-    closeOnClick,
-    disabled,
-    highlighted,
-    id,
-    store,
-    nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
-    itemMetadata: REGULAR_ITEM
-  });
-  const state = {
-    disabled,
-    highlighted
+    rects,
+    placement
+  } = state;
+  const data = {
+    side: getLogicalSide(sideParam, index_esm.getSide(placement), isRtl),
+    align: index_esm.getAlignment(placement) || 'center',
+    anchor: {
+      width: rects.reference.width,
+      height: rects.reference.height
+    },
+    positioner: {
+      width: rects.floating.width,
+      height: rects.floating.height
+    }
   };
-  return useRenderElement.useRenderElement('div', componentProps, {
-    state,
-    props: [itemProps, elementProps, getItemProps],
-    ref: [itemRef, forwardedRef, listItem.ref]
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuItem.displayName = "MenuItem";
-
+  return data;
+}
 /**
- * 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 standardized anchor positioning behavior for floating elements. Wraps Floating UI's
+ * `useFloating` hook.
  */
-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 = useBaseUiId.useBaseUiId(idProp);
-  const {
-    store
-  } = useMenuRootContext();
-  const highlighted = store.useState('isActive', listItem.index);
-  const itemProps = store.useState('itemProps');
-  const typingRef = store.context.typingRef;
+function useAnchorPositioning(params) {
   const {
-    getButtonProps,
-    buttonRef
-  } = useBaseUiId.useButton({
-    native: false,
-    composite: true
-  });
-  const commonProps = useMenuItemCommonProps({
-    closeOnClick,
-    highlighted,
-    id,
+    // Public parameters
+    anchor,
+    positionMethod = 'absolute',
+    side: sideParam = 'bottom',
+    sideOffset = 0,
+    align = 'center',
+    alignOffset = 0,
+    collisionBoundary,
+    collisionPadding: collisionPaddingParam = 5,
+    sticky = false,
+    arrowPadding = 5,
+    disableAnchorTracking = false,
+    // Private parameters
+    keepMounted = false,
+    floatingRootContext,
+    mounted,
+    collisionAvoidance,
+    shiftCrossAxis = false,
     nodeId,
-    store,
-    typingRef,
-    itemRef: linkRef
-  });
-  function getItemProps(externalProps) {
-    return useRenderElement.mergeProps(commonProps, externalProps, getButtonProps);
+    adaptiveOrigin,
+    lazyFlip = false,
+    externalTree
+  } = params;
+  const [mountSide, setMountSide] = React__namespace.useState(null);
+  if (!mounted && mountSide !== null) {
+    setMountSide(null);
   }
-  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 collisionAvoidanceSide = collisionAvoidance.side || 'flip';
+  const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
+  const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
+  const anchorFn = typeof anchor === 'function' ? anchor : undefined;
+  const anchorFnCallback = clamp.useStableCallback(anchorFn);
+  const anchorDep = anchorFn ? anchorFnCallback : anchor;
+  const anchorValueRef = clamp.useValueAsRef(anchor);
+  const direction = ScrollAreaViewport.useDirection();
+  const isRtl = direction === 'rtl';
+  const side = mountSide || {
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+    'inline-end': isRtl ? 'left' : 'right',
+    'inline-start': isRtl ? 'right' : 'left'
+  }[sideParam];
+  const placement = align === 'center' ? side : `${side}-${align}`;
+  let collisionPadding = collisionPaddingParam;
 
-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));
+  // Create a bias to the preferred side.
+  // On iOS, when the mobile software keyboard opens, the input is exactly centered
+  // in the viewport, but this can cause it to flip to the top undesirably.
+  const bias = 1;
+  const biasTop = sideParam === 'bottom' ? bias : 0;
+  const biasBottom = sideParam === 'top' ? bias : 0;
+  const biasLeft = sideParam === 'right' ? bias : 0;
+  const biasRight = sideParam === 'left' ? bias : 0;
+  if (typeof collisionPadding === 'number') {
+    collisionPadding = {
+      top: collisionPadding + biasTop,
+      right: collisionPadding + biasRight,
+      bottom: collisionPadding + biasBottom,
+      left: collisionPadding + biasLeft
+    };
+  } else if (collisionPadding) {
+    collisionPadding = {
+      top: (collisionPadding.top || 0) + biasTop,
+      right: (collisionPadding.right || 0) + biasRight,
+      bottom: (collisionPadding.bottom || 0) + biasBottom,
+      left: (collisionPadding.left || 0) + biasLeft
+    };
   }
-  return context;
-}
-
-function getDisabledMountTransitionStyles(transitionStatus) {
-  return transitionStatus === 'starting' ? DrawerRoot.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
-}
+  const commonCollisionProps = {
+    boundary: collisionBoundary === 'clipping-ancestors' ? 'clippingAncestors' : collisionBoundary,
+    padding: collisionPadding
+  };
 
-const stateAttributesMapping = {
-  ...DrawerRoot.popupStateMapping,
-  ...useValueChanged.transitionStatusMapping
-};
+  // Using a ref assumes that the arrow element is always present in the DOM for the lifetime of the
+  // popup. If this assumption ends up being false, we can switch to state to manage the arrow's
+  // presence.
+  const arrowRef = React__namespace.useRef(null);
 
-/**
- * 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;
+  // Keep these reactive if they're not functions
+  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 => {
+    const data = getOffsetData(state, sideParam, isRtl);
+    const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
+    const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
+    return {
+      mainAxis: sideAxis,
+      crossAxis: alignAxis,
+      alignmentAxis: alignAxis
+    };
+  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
+  const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
+  const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
+  const flipMiddleware = collisionAvoidanceSide === 'none' ? null : floatingUi_reactDom.flip({
+    ...commonCollisionProps,
+    // Ensure the popup flips if it's been limited by its --available-height and it resizes.
+    // Since the size() padding is smaller than the flip() padding, flip() will take precedence.
+    padding: {
+      top: collisionPadding.top + bias,
+      right: collisionPadding.right + bias,
+      bottom: collisionPadding.bottom + bias,
+      left: collisionPadding.left + bias
+    },
+    mainAxis: !shiftCrossAxis && collisionAvoidanceSide === 'flip',
+    crossAxis: collisionAvoidanceAlign === 'flip' ? 'alignment' : false,
+    fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
+  });
+  const shiftMiddleware = shiftDisabled ? null : floatingUi_reactDom.shift(data => {
+    const html = clamp.ownerDocument(data.elements.floating).documentElement;
+    return {
+      ...commonCollisionProps,
+      // Use the Layout Viewport to avoid shifting around when pinch-zooming
+      // for context menus.
+      rootBoundary: shiftCrossAxis ? {
+        x: 0,
+        y: 0,
+        width: html.clientWidth,
+        height: html.clientHeight
+      } : undefined,
+      mainAxis: collisionAvoidanceAlign !== 'none',
+      crossAxis: crossAxisShiftEnabled,
+      limiter: sticky || shiftCrossAxis ? undefined : floatingUi_reactDom.limitShift(limitData => {
+        if (!arrowRef.current) {
+          return {};
+        }
+        const {
+          width,
+          height
+        } = arrowRef.current.getBoundingClientRect();
+        const sideAxis = index_esm.getSideAxis(index_esm.getSide(limitData.placement));
+        const arrowSize = sideAxis === 'y' ? width : height;
+        const offsetAmount = sideAxis === 'y' ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
+        return {
+          offset: arrowSize / 2 + offsetAmount / 2
+        };
+      })
+    };
+  }, [commonCollisionProps, sticky, shiftCrossAxis, collisionPadding, collisionAvoidanceAlign]);
+
+  // https://floating-ui.com/docs/flip#combining-with-shift
+  if (collisionAvoidanceSide === 'shift' || collisionAvoidanceAlign === 'shift' || align === 'center') {
+    middleware.push(shiftMiddleware, flipMiddleware);
+  } else {
+    middleware.push(flipMiddleware, shiftMiddleware);
+  }
+  middleware.push(floatingUi_reactDom.size({
+    ...commonCollisionProps,
+    apply({
+      elements: {
+        floating
+      },
+      availableWidth,
+      availableHeight,
+      rects
+    }) {
+      const floatingStyle = floating.style;
+      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
+      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
+
+      // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
+      const dpr = window.devicePixelRatio || 1;
+      const {
+        x,
+        y,
+        width,
+        height
+      } = rects.reference;
+      const anchorWidth = (Math.round((x + width) * dpr) - Math.round(x * dpr)) / dpr;
+      const anchorHeight = (Math.round((y + height) * dpr) - Math.round(y * dpr)) / dpr;
+      floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
+      floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
+    }
+  }), arrow(() => ({
+    // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
+    // we'll create a fake element.
+    element: arrowRef.current || document.createElement('div'),
+    padding: arrowPadding,
+    offsetParent: 'floating'
+  }), [arrowPadding]), {
+    name: 'transformOrigin',
+    fn(state) {
+      const {
+        elements,
+        middlewareData,
+        placement: renderedPlacement,
+        rects,
+        y
+      } = state;
+      const currentRenderedSide = index_esm.getSide(renderedPlacement);
+      const currentRenderedAxis = index_esm.getSideAxis(currentRenderedSide);
+      const arrowEl = arrowRef.current;
+      const arrowX = middlewareData.arrow?.x || 0;
+      const arrowY = middlewareData.arrow?.y || 0;
+      const arrowWidth = arrowEl?.clientWidth || 0;
+      const arrowHeight = arrowEl?.clientHeight || 0;
+      const transformX = arrowX + arrowWidth / 2;
+      const transformY = arrowY + arrowHeight / 2;
+      const shiftY = Math.abs(middlewareData.shift?.y || 0);
+      const halfAnchorHeight = rects.reference.height / 2;
+      const sideOffsetValue = typeof sideOffset === 'function' ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
+      const isOverlappingAnchor = shiftY > sideOffsetValue;
+      const adjacentTransformOrigin = {
+        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+        bottom: `${transformX}px ${-sideOffsetValue}px`,
+        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+        right: `${-sideOffsetValue}px ${transformY}px`
+      }[currentRenderedSide];
+      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+      elements.floating.style.setProperty('--transform-origin', crossAxisShiftEnabled && currentRenderedAxis === 'y' && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
+      return {};
+    }
+  }, hide, adaptiveOrigin);
+  clamp.useIsoLayoutEffect(() => {
+    // Ensure positioning doesn't run initially for `keepMounted` elements that
+    // aren't initially open.
+    if (!mounted && floatingRootContext) {
+      floatingRootContext.update({
+        referenceElement: null,
+        floatingElement: null,
+        domReferenceElement: null
+      });
+    }
+  }, [mounted, floatingRootContext]);
+  const autoUpdateOptions = React__namespace.useMemo(() => ({
+    elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
+    layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
+  }), [disableAnchorTracking]);
   const {
-    store
-  } = useMenuRootContext();
+    refs,
+    elements,
+    x,
+    y,
+    middlewareData,
+    update,
+    placement: renderedPlacement,
+    context,
+    isPositioned,
+    floatingStyles: originalFloatingStyles
+  } = useFloating({
+    rootContext: floatingRootContext,
+    placement,
+    middleware,
+    strategy: positionMethod,
+    whileElementsMounted: keepMounted ? undefined : (...args) => floatingUi_reactDom.autoUpdate(...args, autoUpdateOptions),
+    nodeId,
+    externalTree
+  });
   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);
-      }
+    sideX,
+    sideY
+  } = middlewareData.adaptiveOrigin || DEFAULT_SIDES;
+
+  // Default to `fixed` when not positioned to prevent `autoFocus` scroll jumps.
+  // This ensures the popup is inside the viewport initially before it gets positioned.
+  const resolvedPosition = isPositioned ? positionMethod : 'fixed';
+  const floatingStyles = React__namespace.useMemo(() => {
+    const base = adaptiveOrigin ? {
+      position: resolvedPosition,
+      [sideX]: x,
+      [sideY]: y
+    } : {
+      position: resolvedPosition,
+      ...originalFloatingStyles
+    };
+    if (!isPositioned) {
+      base.opacity = 0;
     }
-  });
+    return base;
+  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
+  const registeredPositionReferenceRef = React__namespace.useRef(null);
+  clamp.useIsoLayoutEffect(() => {
+    if (!mounted) {
+      return;
+    }
+    const anchorValue = anchorValueRef.current;
+    const resolvedAnchor = typeof anchorValue === 'function' ? anchorValue() : anchorValue;
+    const unwrappedElement = (isRef(resolvedAnchor) ? resolvedAnchor.current : resolvedAnchor) || null;
+    const finalAnchor = unwrappedElement || null;
+    if (finalAnchor !== registeredPositionReferenceRef.current) {
+      refs.setPositionReference(finalAnchor);
+      registeredPositionReferenceRef.current = finalAnchor;
+    }
+  }, [mounted, refs, anchorDep, anchorValueRef]);
   React__namespace.useEffect(() => {
-    function handleClose(event) {
-      store.setOpen(false, useValueChanged.createChangeEventDetails(event.reason, event.domEvent));
+    if (!mounted) {
+      return;
     }
-    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 && DrawerRoot.COMPOSITE_KEYS.has(event.key)) {
-          event.stopPropagation();
-        }
+    const anchorValue = anchorValueRef.current;
+
+    // Refs from parent components are set after useLayoutEffect runs and are available in useEffect.
+    // Therefore, if the anchor is a ref, we need to update the position reference in useEffect.
+    if (typeof anchorValue === 'function') {
+      return;
+    }
+    if (isRef(anchorValue) && anchorValue.current !== registeredPositionReferenceRef.current) {
+      refs.setPositionReference(anchorValue.current);
+      registeredPositionReferenceRef.current = anchorValue.current;
+    }
+  }, [mounted, refs, anchorDep, anchorValueRef]);
+  React__namespace.useEffect(() => {
+    if (keepMounted && mounted && elements.domReference && elements.floating) {
+      return floatingUi_reactDom.autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
+    }
+    return undefined;
+  }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
+  const renderedSide = index_esm.getSide(renderedPlacement);
+  const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
+  const renderedAlign = index_esm.getAlignment(renderedPlacement) || 'center';
+  const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
+
+  /**
+   * Locks the flip (makes it "sticky") so it doesn't prefer a given placement
+   * and flips back lazily, not eagerly. Ideal for filtered lists that change
+   * the size of the popup dynamically to avoid unwanted flipping when typing.
+   */
+  clamp.useIsoLayoutEffect(() => {
+    if (lazyFlip && mounted && isPositioned) {
+      setMountSide(renderedSide);
+    }
+  }, [lazyFlip, mounted, isPositioned, renderedSide]);
+  const arrowStyles = React__namespace.useMemo(() => ({
+    position: 'absolute',
+    top: middlewareData.arrow?.y,
+    left: middlewareData.arrow?.x
+  }), [middlewareData.arrow]);
+  const arrowUncentered = middlewareData.arrow?.centerOffset !== 0;
+  return React__namespace.useMemo(() => ({
+    positionerStyles: floatingStyles,
+    arrowStyles,
+    arrowRef,
+    arrowUncentered,
+    side: logicalRenderedSide,
+    align: renderedAlign,
+    physicalSide: renderedSide,
+    anchorHidden,
+    refs,
+    context,
+    isPositioned,
+    update
+  }), [floatingStyles, arrowStyles, arrowRef, arrowUncentered, logicalRenderedSide, renderedAlign, renderedSide, anchorHidden, refs, context, isPositioned, update]);
+}
+function isRef(param) {
+  return param != null && 'current' in param;
+}
+
+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;
+}({});
+
+/**
+ * Used to register a list item and its index (DOM position) in the `CompositeList`.
+ */
+function useCompositeListItem(params = {}) {
+  const {
+    label,
+    metadata,
+    textRef,
+    indexGuessBehavior,
+    index: externalIndex
+  } = params;
+  const {
+    register,
+    unregister,
+    subscribeMapChange,
+    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]);
+  clamp.useIsoLayoutEffect(() => {
+    if (externalIndex != null) {
+      return undefined;
+    }
+    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);
       }
-    }, 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(DrawerRoot.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;
+    });
+  }, [externalIndex, subscribeMapChange, setIndex]);
+  return React__namespace.useMemo(() => ({
+    ref,
+    index
+  }), [index, ref]);
 }
 
-const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(props, forwardedRef) {
+/**
+ * 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 {
-    keepMounted = false,
-    ...portalProps
-  } = props;
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
   const {
     store
-  } = useMenuRootContext();
-  const mounted = store.useState('mounted');
-  const shouldRender = mounted || keepMounted;
-  if (!shouldRender) {
-    return null;
+  } = ScrollAreaViewport.useDialogRootContext();
+  const open = store.useState('open');
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, clamp.createChangeEventDetails(clamp.closePress, event.nativeEvent));
+    }
   }
-  return /*#__PURE__*/jsxRuntime.jsx(MenuPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
+  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") MenuPortal.displayName = "MenuPortal";
-
-/**
- * @internal
- */
-const DirectionContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
-function useDirection() {
-  const context = React__namespace.useContext(DirectionContext);
-  return context?.direction ?? 'ltr';
-}
+if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
 
 /**
- * Fork of the original `arrow` middleware from Floating UI that allows
- * configuring the offset parent.
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
-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
-    };
-  }
-});
+const DrawerClose = DialogClose;
 
 /**
- * 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
+ * A heading that labels the dialog.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
-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 DEFAULT_SIDES = {
-  sideX: 'left',
-  sideY: 'top'
-};
-const adaptiveOrigin = {
-  name: 'adaptiveOrigin',
-  async fn(state) {
-    const {
-      x: rawX,
-      y: rawY,
-      rects: {
-        floating: floatRect
-      },
-      elements: {
-        floating
-      },
-      platform,
-      strategy,
-      placement
-    } = state;
-    const win = floatingUi_utils_dom.getWindow(floating);
-    const styles = win.getComputedStyle(floating);
-    const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
-    if (!hasTransition) {
-      return {
-        x: rawX,
-        y: rawY,
-        data: DEFAULT_SIDES
-      };
-    }
-    const offsetParent = await platform.getOffsetParent?.(floating);
-    let offsetDimensions = {
-      width: 0,
-      height: 0
-    };
+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";
 
-    // For fixed strategy, prefer visualViewport if available
-    if (strategy === 'fixed' && win?.visualViewport) {
-      offsetDimensions = {
-        width: win.visualViewport.width,
-        height: win.visualViewport.height
-      };
-    } else if (offsetParent === win) {
-      const doc = useValueChanged.ownerDocument(floating);
-      offsetDimensions = {
-        width: doc.documentElement.clientWidth,
-        height: doc.documentElement.clientHeight
-      };
-    } else if (await platform.isElement?.(offsetParent)) {
-      offsetDimensions = await platform.getDimensions(offsetParent);
-    }
-    const currentSide = index_esm.getSide(placement);
-    let x = rawX;
-    let y = rawY;
-    if (currentSide === 'left') {
-      x = offsetDimensions.width - (rawX + floatRect.width);
-    }
-    if (currentSide === 'top') {
-      y = offsetDimensions.height - (rawY + floatRect.height);
-    }
-    const sideX = currentSide === 'left' ? 'right' : DEFAULT_SIDES.sideX;
-    const sideY = currentSide === 'top' ? 'bottom' : DEFAULT_SIDES.sideY;
-    return {
-      x,
-      y,
-      data: {
-        sideX,
-        sideY
-      }
-    };
+/**
+ * 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 getLogicalSide(sideParam, renderedSide, isRtl) {
-  const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
-  const logicalRight = isRtl ? 'inline-start' : 'inline-end';
-  const logicalLeft = isRtl ? 'inline-end' : 'inline-start';
-  return {
-    top: 'top',
-    right: isLogicalSideParam ? logicalRight : 'right',
-    bottom: 'bottom',
-    left: isLogicalSideParam ? logicalLeft : 'left'
-  }[renderedSide];
+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;
 }
-function getOffsetData(state, sideParam, isRtl) {
-  const {
-    rects,
-    placement
-  } = state;
-  const data = {
-    side: getLogicalSide(sideParam, index_esm.getSide(placement), isRtl),
-    align: index_esm.getAlignment(placement) || 'center',
-    anchor: {
-      width: rects.reference.width,
-      height: rects.reference.height
-    },
-    positioner: {
-      width: rects.floating.width,
-      height: rects.floating.height
-    }
-  };
-  return data;
+
+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;
 }
+
 /**
- * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
- * `useFloating` hook.
+ * 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 useAnchorPositioning(params) {
+function useMenuItemCommonProps(params) {
   const {
-    // Public parameters
-    anchor,
-    positionMethod = 'absolute',
-    side: sideParam = 'bottom',
-    sideOffset = 0,
-    align = 'center',
-    alignOffset = 0,
-    collisionBoundary,
-    collisionPadding: collisionPaddingParam = 5,
-    sticky = false,
-    arrowPadding = 5,
-    disableAnchorTracking = false,
-    // Private parameters
-    keepMounted = false,
-    floatingRootContext,
-    mounted,
-    collisionAvoidance,
-    shiftCrossAxis = false,
+    closeOnClick,
+    highlighted,
+    id,
     nodeId,
-    adaptiveOrigin,
-    lazyFlip = false,
-    externalTree
+    store,
+    typingRef,
+    itemRef,
+    itemMetadata
   } = params;
-  const [mountSide, setMountSide] = React__namespace.useState(null);
-  if (!mounted && mountSide !== null) {
-    setMountSide(null);
-  }
-  const collisionAvoidanceSide = collisionAvoidance.side || 'flip';
-  const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
-  const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
-  const anchorFn = typeof anchor === 'function' ? anchor : undefined;
-  const anchorFnCallback = useValueChanged.useStableCallback(anchorFn);
-  const anchorDep = anchorFn ? anchorFnCallback : anchor;
-  const anchorValueRef = useValueChanged.useValueAsRef(anchor);
-  const direction = useDirection();
-  const isRtl = direction === 'rtl';
-  const side = mountSide || {
-    top: 'top',
-    right: 'right',
-    bottom: 'bottom',
-    left: 'left',
-    'inline-end': isRtl ? 'left' : 'right',
-    'inline-start': isRtl ? 'right' : 'left'
-  }[sideParam];
-  const placement = align === 'center' ? side : `${side}-${align}`;
-  let collisionPadding = collisionPaddingParam;
+  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;
+      }
 
-  // Create a bias to the preferred side.
-  // On iOS, when the mobile software keyboard opens, the input is exactly centered
-  // in the viewport, but this can cause it to flip to the top undesirably.
-  const bias = 1;
-  const biasTop = sideParam === 'bottom' ? bias : 0;
-  const biasBottom = sideParam === 'top' ? bias : 0;
-  const biasLeft = sideParam === 'right' ? bias : 0;
-  const biasRight = sideParam === 'left' ? bias : 0;
-  if (typeof collisionPadding === 'number') {
-    collisionPadding = {
-      top: collisionPadding + biasTop,
-      right: collisionPadding + biasRight,
-      bottom: collisionPadding + biasBottom,
-      left: collisionPadding + biasLeft
-    };
-  } else if (collisionPadding) {
-    collisionPadding = {
-      top: (collisionPadding.top || 0) + biasTop,
-      right: (collisionPadding.right || 0) + biasRight,
-      bottom: (collisionPadding.bottom || 0) + biasBottom,
-      left: (collisionPadding.left || 0) + biasLeft
-    };
-  }
-  const commonCollisionProps = {
-    boundary: collisionBoundary === 'clipping-ancestors' ? 'clippingAncestors' : collisionBoundary,
-    padding: collisionPadding
-  };
+      // 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]);
+}
 
-  // Using a ref assumes that the arrow element is always present in the DOM for the lifetime of the
-  // popup. If this assumption ends up being false, we can switch to state to manage the arrow's
-  // presence.
-  const arrowRef = React__namespace.useRef(null);
+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;
+}({});
 
-  // Keep these reactive if they're not functions
-  const sideOffsetRef = useValueChanged.useValueAsRef(sideOffset);
-  const alignOffsetRef = useValueChanged.useValueAsRef(alignOffset);
-  const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
-  const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [floatingUi_reactDom.offset(state => {
-    const data = getOffsetData(state, sideParam, isRtl);
-    const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
-    const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
-    return {
-      mainAxis: sideAxis,
-      crossAxis: alignAxis,
-      alignmentAxis: alignAxis
-    };
-  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
-  const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
-  const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
-  const flipMiddleware = collisionAvoidanceSide === 'none' ? null : floatingUi_reactDom.flip({
-    ...commonCollisionProps,
-    // Ensure the popup flips if it's been limited by its --available-height and it resizes.
-    // Since the size() padding is smaller than the flip() padding, flip() will take precedence.
-    padding: {
-      top: collisionPadding.top + bias,
-      right: collisionPadding.right + bias,
-      bottom: collisionPadding.bottom + bias,
-      left: collisionPadding.left + bias
-    },
-    mainAxis: !shiftCrossAxis && collisionAvoidanceSide === 'flip',
-    crossAxis: collisionAvoidanceAlign === 'flip' ? 'alignment' : false,
-    fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
-  });
-  const shiftMiddleware = shiftDisabled ? null : floatingUi_reactDom.shift(data => {
-    const html = useValueChanged.ownerDocument(data.elements.floating).documentElement;
+const itemMapping = {
+  checked(value) {
+    if (value) {
+      return {
+        [MenuCheckboxItemDataAttributes.checked]: ''
+      };
+    }
     return {
-      ...commonCollisionProps,
-      // Use the Layout Viewport to avoid shifting around when pinch-zooming
-      // for context menus.
-      rootBoundary: shiftCrossAxis ? {
-        x: 0,
-        y: 0,
-        width: html.clientWidth,
-        height: html.clientHeight
-      } : undefined,
-      mainAxis: collisionAvoidanceAlign !== 'none',
-      crossAxis: crossAxisShiftEnabled,
-      limiter: sticky || shiftCrossAxis ? undefined : floatingUi_reactDom.limitShift(limitData => {
-        if (!arrowRef.current) {
-          return {};
-        }
-        const {
-          width,
-          height
-        } = arrowRef.current.getBoundingClientRect();
-        const sideAxis = index_esm.getSideAxis(index_esm.getSide(limitData.placement));
-        const arrowSize = sideAxis === 'y' ? width : height;
-        const offsetAmount = sideAxis === 'y' ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
-        return {
-          offset: arrowSize / 2 + offsetAmount / 2
-        };
-      })
+      [MenuCheckboxItemDataAttributes.unchecked]: ''
     };
-  }, [commonCollisionProps, sticky, shiftCrossAxis, collisionPadding, collisionAvoidanceAlign]);
+  },
+  ...clamp.transitionStatusMapping
+};
 
-  // https://floating-ui.com/docs/flip#combining-with-shift
-  if (collisionAvoidanceSide === 'shift' || collisionAvoidanceAlign === 'shift' || align === 'center') {
-    middleware.push(shiftMiddleware, flipMiddleware);
-  } else {
-    middleware.push(flipMiddleware, shiftMiddleware);
+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));
   }
-  middleware.push(floatingUi_reactDom.size({
-    ...commonCollisionProps,
-    apply({
-      elements: {
-        floating
-      },
-      availableWidth,
-      availableHeight,
-      rects
-    }) {
-      const floatingStyle = floating.style;
-      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
-      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
+  return context;
+}
 
-      // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
-      const {
-        x,
-        y,
-        width,
-        height
-      } = rects.reference;
-      const anchorWidth = (Math.round((x + width) * dpr) - Math.round(x * dpr)) / dpr;
-      const anchorHeight = (Math.round((y + height) * dpr) - Math.round(y * dpr)) / dpr;
-      floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
-      floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
-    }
-  }), arrow(() => ({
-    // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
-    // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
-    padding: arrowPadding,
-    offsetParent: 'floating'
-  }), [arrowPadding]), {
-    name: 'transformOrigin',
-    fn(state) {
-      const {
-        elements,
-        middlewareData,
-        placement: renderedPlacement,
-        rects,
-        y
-      } = state;
-      const currentRenderedSide = index_esm.getSide(renderedPlacement);
-      const currentRenderedAxis = index_esm.getSideAxis(currentRenderedSide);
-      const arrowEl = arrowRef.current;
-      const arrowX = middlewareData.arrow?.x || 0;
-      const arrowY = middlewareData.arrow?.y || 0;
-      const arrowWidth = arrowEl?.clientWidth || 0;
-      const arrowHeight = arrowEl?.clientHeight || 0;
-      const transformX = arrowX + arrowWidth / 2;
-      const transformY = arrowY + arrowHeight / 2;
-      const shiftY = Math.abs(middlewareData.shift?.y || 0);
-      const halfAnchorHeight = rects.reference.height / 2;
-      const sideOffsetValue = typeof sideOffset === 'function' ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
-      const isOverlappingAnchor = shiftY > sideOffsetValue;
-      const adjacentTransformOrigin = {
-        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
-        bottom: `${transformX}px ${-sideOffsetValue}px`,
-        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
-        right: `${-sideOffsetValue}px ${transformY}px`
-      }[currentRenderedSide];
-      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
-      elements.floating.style.setProperty('--transform-origin', crossAxisShiftEnabled && currentRenderedAxis === 'y' && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
-      return {};
-    }
-  }, hide, adaptiveOrigin);
-  useValueChanged.useIsoLayoutEffect(() => {
-    // Ensure positioning doesn't run initially for `keepMounted` elements that
-    // aren't initially open.
-    if (!mounted && floatingRootContext) {
-      floatingRootContext.update({
-        referenceElement: null,
-        floatingElement: null,
-        domReferenceElement: null
-      });
-    }
-  }, [mounted, floatingRootContext]);
-  const autoUpdateOptions = React__namespace.useMemo(() => ({
-    elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
-    layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
-  }), [disableAnchorTracking]);
+const MenuGroup = /*#__PURE__*/React__namespace.forwardRef(function MenuGroup(componentProps, forwardedRef) {
   const {
-    refs,
-    elements,
-    x,
-    y,
-    middlewareData,
-    update,
-    placement: renderedPlacement,
-    context,
-    isPositioned,
-    floatingStyles: originalFloatingStyles
-  } = useFloating({
-    rootContext: floatingRootContext,
-    placement,
-    middleware,
-    strategy: positionMethod,
-    whileElementsMounted: keepMounted ? undefined : (...args) => floatingUi_reactDom.autoUpdate(...args, autoUpdateOptions),
-    nodeId,
-    externalTree
+    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
   });
-  const {
-    sideX,
-    sideY
-  } = middlewareData.adaptiveOrigin || DEFAULT_SIDES;
+});
+if (process.env.NODE_ENV !== "production") MenuGroup.displayName = "MenuGroup";
 
-  // Default to `fixed` when not positioned to prevent `autoFocus` scroll jumps.
-  // This ensures the popup is inside the viewport initially before it gets positioned.
-  const resolvedPosition = isPositioned ? positionMethod : 'fixed';
-  const floatingStyles = React__namespace.useMemo(() => {
-    const base = adaptiveOrigin ? {
-      position: resolvedPosition,
-      [sideX]: x,
-      [sideY]: y
-    } : {
-      position: resolvedPosition,
-      ...originalFloatingStyles
+/**
+ * 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 () => {
+      setLabelId(undefined);
     };
-    if (!isPositioned) {
-      base.opacity = 0;
-    }
-    return base;
-  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
-  const registeredPositionReferenceRef = React__namespace.useRef(null);
-  useValueChanged.useIsoLayoutEffect(() => {
-    if (!mounted) {
-      return;
-    }
-    const anchorValue = anchorValueRef.current;
-    const resolvedAnchor = typeof anchorValue === 'function' ? anchorValue() : anchorValue;
-    const unwrappedElement = (isRef(resolvedAnchor) ? resolvedAnchor.current : resolvedAnchor) || null;
-    const finalAnchor = unwrappedElement || null;
-    if (finalAnchor !== registeredPositionReferenceRef.current) {
-      refs.setPositionReference(finalAnchor);
-      registeredPositionReferenceRef.current = finalAnchor;
-    }
-  }, [mounted, refs, anchorDep, anchorValueRef]);
-  React__namespace.useEffect(() => {
-    if (!mounted) {
-      return;
+  }, [setLabelId, id]);
+  return useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: {
+      id,
+      role: 'presentation',
+      ...elementProps
     }
-    const anchorValue = anchorValueRef.current;
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
 
-    // Refs from parent components are set after useLayoutEffect runs and are available in useEffect.
-    // Therefore, if the anchor is a ref, we need to update the position reference in useEffect.
-    if (typeof anchorValue === 'function') {
-      return;
-    }
-    if (isRef(anchorValue) && anchorValue.current !== registeredPositionReferenceRef.current) {
-      refs.setPositionReference(anchorValue.current);
-      registeredPositionReferenceRef.current = anchorValue.current;
-    }
-  }, [mounted, refs, anchorDep, anchorValueRef]);
-  React__namespace.useEffect(() => {
-    if (keepMounted && mounted && elements.domReference && elements.floating) {
-      return floatingUi_reactDom.autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
-    }
-    return undefined;
-  }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
-  const renderedSide = index_esm.getSide(renderedPlacement);
-  const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
-  const renderedAlign = index_esm.getAlignment(renderedPlacement) || 'center';
-  const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
+/**
+ * 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";
 
-  /**
-   * Locks the flip (makes it "sticky") so it doesn't prefer a given placement
-   * 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(() => {
-    if (lazyFlip && mounted && isPositioned) {
-      setMountSide(renderedSide);
-    }
-  }, [lazyFlip, mounted, isPositioned, renderedSide]);
-  const arrowStyles = React__namespace.useMemo(() => ({
-    position: 'absolute',
-    top: middlewareData.arrow?.y,
-    left: middlewareData.arrow?.x
-  }), [middlewareData.arrow]);
-  const arrowUncentered = middlewareData.arrow?.centerOffset !== 0;
-  return React__namespace.useMemo(() => ({
-    positionerStyles: floatingStyles,
-    arrowStyles,
-    arrowRef,
-    arrowUncentered,
-    side: logicalRenderedSide,
-    align: renderedAlign,
-    physicalSide: renderedSide,
-    anchorHidden,
-    refs,
-    context,
-    isPositioned,
-    update
-  }), [floatingStyles, arrowStyles, arrowRef, arrowUncentered, logicalRenderedSide, renderedAlign, renderedSide, anchorHidden, refs, context, isPositioned, update]);
-}
-function isRef(param) {
-  return param != null && 'current' in param;
+/**
+ * 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;
 }
 
-/* eslint-disable no-bitwise */
+const stateAttributesMapping = {
+  ...ScrollAreaViewport.popupStateMapping,
+  ...clamp.transitionStatusMapping
+};
+
 /**
- * Provides context for a list of items in a composite component.
- * @internal
+ * A container for the menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-function CompositeList(props) {
+const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    finalFocus,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useMenuRootContext();
   const {
-    children,
-    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) {
-      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);
-      }
-    });
-    sortedMap.forEach((_, node) => {
-      if (node.parentElement) {
-        mutationObserver.observe(node.parentElement, {
-          childList: true
-        });
-      }
-    });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [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;
+    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,
@@ -3456,7 +3309,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
-    collisionAvoidance: collisionAvoidanceProp = DrawerRoot.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance: collisionAvoidanceProp = ScrollAreaViewport.DROPDOWN_COLLISION_AVOIDANCE,
     ...elementProps
   } = componentProps;
   const {
@@ -3480,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;
@@ -3499,7 +3352,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   if (parent.type === 'menu') {
     computedSide = computedSide ?? 'inline-end';
     computedAlign = computedAlign ?? 'start';
-    collisionAvoidance = componentProps.collisionAvoidance ?? DrawerRoot.POPUP_COLLISION_AVOIDANCE;
+    collisionAvoidance = componentProps.collisionAvoidance ?? ScrollAreaViewport.POPUP_COLLISION_AVOIDANCE;
   } else if (parent.type === 'menubar') {
     computedSide = computedSide ?? 'bottom';
     computedAlign = computedAlign ?? 'start';
@@ -3547,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));
         }
       }
     }
@@ -3564,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(() => {
@@ -3594,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.
@@ -3621,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) {
@@ -3657,11 +3510,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }), [positioner.side, positioner.align, positioner.arrowRef, positioner.arrowUncentered, positioner.arrowStyles, positioner.context.nodeId]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: DrawerRoot.popupStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
     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;
@@ -3672,11 +3525,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }
   return /*#__PURE__*/jsxRuntime.jsxs(MenuPositionerContext.Provider, {
     value: contextValue,
-    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.InternalBackdrop, {
+    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
-      inert: DrawerRoot.inertValue(!open),
+      inert: ScrollAreaViewport.inertValue(!open),
       cutout: backdropCutout
-    }), /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingNode, {
+    }), /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingNode, {
       id: floatingNodeId,
       children: /*#__PURE__*/jsxRuntime.jsx(CompositeList, {
         elementsRef: store.context.itemDomElements,
@@ -3714,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;
@@ -3777,7 +3630,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = clamp.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -3808,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);
@@ -3850,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() {
@@ -3891,35 +3744,35 @@ function useMenubarContext(optional) {
 }
 
 const selectors = {
-  ...DrawerRoot.popupStoreSelectors,
-  disabled: DrawerRoot.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: DrawerRoot.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  allowMouseEnter: DrawerRoot.createSelector(state => state.allowMouseEnter),
-  stickIfOpen: DrawerRoot.createSelector(state => state.stickIfOpen),
-  parent: DrawerRoot.createSelector(state => state.parent),
-  rootId: DrawerRoot.createSelector(state => {
+  ...ScrollAreaViewport.popupStoreSelectors,
+  disabled: ScrollAreaViewport.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
+  modal: ScrollAreaViewport.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  allowMouseEnter: ScrollAreaViewport.createSelector(state => state.allowMouseEnter),
+  stickIfOpen: ScrollAreaViewport.createSelector(state => state.stickIfOpen),
+  parent: ScrollAreaViewport.createSelector(state => state.parent),
+  rootId: ScrollAreaViewport.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('rootId');
     }
     return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
   }),
-  activeIndex: DrawerRoot.createSelector(state => state.activeIndex),
-  isActive: DrawerRoot.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: DrawerRoot.createSelector(state => state.hoverEnabled),
-  instantType: DrawerRoot.createSelector(state => state.instantType),
-  lastOpenChangeReason: DrawerRoot.createSelector(state => state.openChangeReason),
-  floatingTreeRoot: DrawerRoot.createSelector(state => {
+  activeIndex: ScrollAreaViewport.createSelector(state => state.activeIndex),
+  isActive: ScrollAreaViewport.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
+  hoverEnabled: ScrollAreaViewport.createSelector(state => state.hoverEnabled),
+  instantType: ScrollAreaViewport.createSelector(state => state.instantType),
+  lastOpenChangeReason: ScrollAreaViewport.createSelector(state => state.openChangeReason),
+  floatingTreeRoot: ScrollAreaViewport.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('floatingTreeRoot');
     }
     return state.floatingTreeRoot;
   }),
-  floatingNodeId: DrawerRoot.createSelector(state => state.floatingNodeId),
-  floatingParentNodeId: DrawerRoot.createSelector(state => state.floatingParentNodeId),
-  itemProps: DrawerRoot.createSelector(state => state.itemProps),
-  closeDelay: DrawerRoot.createSelector(state => state.closeDelay),
-  hasViewport: DrawerRoot.createSelector(state => state.hasViewport),
-  keyboardEventRelay: DrawerRoot.createSelector(state => {
+  floatingNodeId: ScrollAreaViewport.createSelector(state => state.floatingNodeId),
+  floatingParentNodeId: ScrollAreaViewport.createSelector(state => state.floatingParentNodeId),
+  itemProps: ScrollAreaViewport.createSelector(state => state.itemProps),
+  closeDelay: ScrollAreaViewport.createSelector(state => state.closeDelay),
+  hasViewport: ScrollAreaViewport.createSelector(state => state.hasViewport),
+  keyboardEventRelay: ScrollAreaViewport.createSelector(state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
     }
@@ -3929,7 +3782,7 @@ const selectors = {
     return undefined;
   })
 };
-class MenuStore extends DrawerRoot.ReactStore {
+class MenuStore extends ScrollAreaViewport.ReactStore {
   constructor(initialState) {
     super({
       ...createInitialState(),
@@ -3952,7 +3805,7 @@ class MenuStore extends DrawerRoot.ReactStore {
       triggerFocusTargetRef: /*#__PURE__*/React__namespace.createRef(),
       beforeContentFocusGuardRef: /*#__PURE__*/React__namespace.createRef(),
       onOpenChangeComplete: undefined,
-      triggerElements: new DrawerRoot.PopupTriggerMap()
+      triggerElements: new ScrollAreaViewport.PopupTriggerMap()
     }, selectors);
 
     // Set up propagation of state from parent menu if applicable.
@@ -4000,7 +3853,7 @@ class MenuStore extends DrawerRoot.ReactStore {
 }
 function createInitialState() {
   return {
-    ...DrawerRoot.createInitialPopupStoreState(),
+    ...ScrollAreaViewport.createInitialPopupStoreState(),
     disabled: false,
     modal: true,
     allowMouseEnter: false,
@@ -4013,7 +3866,7 @@ function createInitialState() {
     hoverEnabled: true,
     instantType: undefined,
     openChangeReason: null,
-    floatingTreeRoot: new DrawerRoot.FloatingTreeStore(),
+    floatingTreeRoot: new ScrollAreaViewport.FloatingTreeStore(),
     floatingNodeId: undefined,
     floatingParentNodeId: null,
     itemProps: useRenderElement.EMPTY_OBJECT,
@@ -4029,7 +3882,7 @@ function useMenuSubmenuRootContext() {
   return React__namespace.useContext(MenuSubmenuRootContext);
 }
 
-const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
+const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   const {
     children,
     open: openProp,
@@ -4087,7 +3940,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   });
 
   // Support initially open state when uncontrolled
-  DrawerRoot.useOnFirstRender(() => {
+  ScrollAreaViewport.useOnFirstRender(() => {
     if (openProp === undefined && store.state.open === false && defaultOpen === true) {
       store.update({
         open: true,
@@ -4099,9 +3952,9 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const floatingNodeIdFromContext = DrawerRoot.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeIdFromContext = DrawerRoot.useFloatingParentNodeId();
-  useValueChanged.useIsoLayoutEffect(() => {
+  const floatingNodeIdFromContext = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeIdFromContext = ScrollAreaViewport.useFloatingParentNodeId();
+  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.
@@ -4142,23 +3995,23 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
-    rootId: useValueChanged.useId()
+    rootId: clamp.useId()
   });
   const {
     openMethod,
     triggerProps: interactionTypeProps
-  } = DrawerRoot.useOpenInteractionType(open);
-  DrawerRoot.useImplicitActiveTrigger(store);
+  } = ScrollAreaViewport.useOpenInteractionType(open);
+  ScrollAreaViewport.useImplicitActiveTrigger(store);
   const {
     forceUnmount
-  } = DrawerRoot.useOpenStateTransitions(open, store, () => {
+  } = ScrollAreaViewport.useOpenStateTransitions(open, store, () => {
     store.update({
       allowMouseEnter: false,
       stickIfOpen: true
     });
   });
   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;
@@ -4179,15 +4032,15 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  DrawerRoot.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;
@@ -4233,7 +4086,7 @@ const MenuRoot = DrawerRoot.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;
@@ -4242,8 +4095,8 @@ const MenuRoot = DrawerRoot.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
@@ -4258,7 +4111,7 @@ const MenuRoot = DrawerRoot.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');
@@ -4267,14 +4120,14 @@ const MenuRoot = DrawerRoot.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,
@@ -4288,7 +4141,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   React__namespace.useImperativeHandle(ctx?.actionsRef, () => ({
     setOpen
   }), [setOpen]);
-  const floatingRootContext = DrawerRoot.useSyncedFloatingRootContext({
+  const floatingRootContext = ScrollAreaViewport.useSyncedFloatingRootContext({
     popupStore: store,
     onOpenChange: setOpen
   });
@@ -4303,7 +4156,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
   }, [floatingEvents, setOpen]);
-  const dismiss = DrawerRoot.useDismiss(floatingRootContext, {
+  const dismiss = ScrollAreaViewport.useDismiss(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
       escapeKey: closeParentOnEsc && parent.type === 'menu'
@@ -4316,10 +4169,10 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     },
     externalTree: nested ? floatingTreeRoot : undefined
   });
-  const role = DrawerRoot.useRole(floatingRootContext, {
+  const role = ScrollAreaViewport.useRole(floatingRootContext, {
     role: 'menu'
   });
-  const direction = useDirection();
+  const direction = ScrollAreaViewport.useDirection();
   const setActiveIndex = React__namespace.useCallback(index => {
     if (store.select('activeIndex') === index) {
       return;
@@ -4348,7 +4201,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     listRef: store.context.itemLabels,
     elementsRef: store.context.itemDomElements,
     activeIndex,
-    resetMs: DrawerRoot.TYPEAHEAD_RESET_MS,
+    resetMs: ScrollAreaViewport.TYPEAHEAD_RESET_MS,
     onMatch: index => {
       if (open && index !== activeIndex) {
         store.set('activeIndex', index);
@@ -4361,7 +4214,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     getFloatingProps,
     getItemProps,
     getTriggerProps
-  } = DrawerRoot.useInteractions([dismiss, role, listNavigation, typeahead]);
+  } = ScrollAreaViewport.useInteractions([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React__namespace.useMemo(() => {
     const mergedProps = useRenderElement.mergeProps(getReferenceProps(), {
       onMouseMove() {
@@ -4423,7 +4276,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   });
   if (parent.type === undefined || parent.type === 'context-menu') {
     // set up a FloatingTree to provide the context to nested menus
-    return /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingTree, {
+    return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingTree, {
       externalTree: floatingTreeRoot,
       children: content
     });
@@ -4451,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
-  } = useBaseUiId.useCompositeRootContext();
+  } = clamp.useCompositeRootContext();
   const {
     ref,
     index
@@ -4581,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
@@ -4606,7 +4424,7 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
+const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -4625,23 +4443,23 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   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 = useBaseUiId.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 = useBaseUiId.useCompositeRootContext(true);
-  const floatingTreeRootFromContext = DrawerRoot.useFloatingTree();
+  const compositeRootContext = clamp.useCompositeRootContext(true);
+  const floatingTreeRootFromContext = ScrollAreaViewport.useFloatingTree();
   const floatingTreeRoot = React__namespace.useMemo(() => {
-    return floatingTreeRootFromContext ?? new DrawerRoot.FloatingTreeStore();
+    return floatingTreeRootFromContext ?? new ScrollAreaViewport.FloatingTreeStore();
   }, [floatingTreeRootFromContext]);
-  const floatingNodeId = DrawerRoot.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeId = DrawerRoot.useFloatingParentNodeId();
+  const floatingNodeId = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeId = ScrollAreaViewport.useFloatingParentNodeId();
   const {
     registerTrigger,
     isMountedByThisTrigger
-  } = DrawerRoot.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+  } = ScrollAreaViewport.useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
     payload,
     closeDelay,
     parent,
@@ -4656,7 +4474,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   const {
     getButtonProps,
     buttonRef
-  } = useBaseUiId.useButton({
+  } = clamp.useButton({
     disabled,
     native: nativeButton
   });
@@ -4666,15 +4484,15 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     }
   }, [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;
     }
     allowMouseUpTriggerTimeout.clear();
     store.context.allowMouseUpTriggerRef.current = false;
     const mouseUpTarget = mouseEvent.target;
-    if (DrawerRoot.contains(triggerRef.current, mouseUpTarget) || DrawerRoot.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+    if (ScrollAreaViewport.contains(triggerRef.current, mouseUpTarget) || ScrollAreaViewport.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
       return;
     }
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
@@ -4686,12 +4504,12 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     }
     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
       });
@@ -4719,7 +4537,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   // `lastOpenChangeReason` doesn't need to be reactive here, as we need to run this
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
-  const click = useClick(floatingRootContext, {
+  const click = ScrollAreaViewport.useClick(floatingRootContext, {
     enabled: !disabled && parent.type !== 'context-menu',
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
@@ -4734,7 +4552,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = DrawerRoot.useInteractions([click, focus]);
+  const localInteractionProps = ScrollAreaViewport.useInteractions([click, focus]);
   const state = {
     disabled,
     open: isOpenedByThisTrigger
@@ -4753,7 +4571,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
       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
       });
@@ -4762,25 +4580,25 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     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 = DrawerRoot.getTabbableBeforeElement(preFocusGuardRef.current);
+    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 && DrawerRoot.isOutsideEvent(event, currentPositionerElement)) {
+    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 = DrawerRoot.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && DrawerRoot.contains(currentPositionerElement, nextTabbable)) {
+      let nextTabbable = ScrollAreaViewport.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && ScrollAreaViewport.contains(currentPositionerElement, nextTabbable)) {
         const prevTabbable = nextTabbable;
-        nextTabbable = DrawerRoot.getNextTabbable(nextTabbable);
+        nextTabbable = ScrollAreaViewport.getNextTabbable(nextTabbable);
         if (nextTabbable === prevTabbable) {
           break;
         }
@@ -4790,7 +4608,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   });
   const element = useRenderElement.useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
-    stateAttributesMapping: DrawerRoot.pressableTriggerOpenStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.pressableTriggerOpenStateMapping,
     state,
     ref,
     props
@@ -4803,7 +4621,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
       state: state,
       refs: ref,
       props: props,
-      stateAttributesMapping: DrawerRoot.pressableTriggerOpenStateMapping
+      stateAttributesMapping: ScrollAreaViewport.pressableTriggerOpenStateMapping
     });
   }
 
@@ -4812,12 +4630,12 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
 
   if (isOpenedByThisTrigger) {
     return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FocusGuard, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FocusGuard, {
         ref: preFocusGuardRef,
         onFocus: handlePreFocusGuardFocus
       }, `${thisTriggerId}-pre-focus-guard`), /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
         children: element
-      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FocusGuard, {
+      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FocusGuard, {
         ref: store.context.triggerFocusTargetRef,
         onFocus: handleFocusTargetFocus
       }, `${thisTriggerId}-post-focus-guard`)]
@@ -4832,14 +4650,14 @@ 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.
       setStickIfOpen(true);
-      stickIfOpenTimeout.start(DrawerRoot.PATIENT_CLICK_THRESHOLD, () => {
+      stickIfOpenTimeout.start(ScrollAreaViewport.PATIENT_CLICK_THRESHOLD, () => {
         setStickIfOpen(false);
       });
     } else if (!open) {
@@ -4901,11 +4719,11 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   const {
     store
   } = useMenuRootContext();
-  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
+  const thisTriggerId = clamp.useBaseUiId(idProp);
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const baseRegisterTrigger = DrawerRoot.useTriggerRegistration(thisTriggerId, store);
+  const baseRegisterTrigger = ScrollAreaViewport.useTriggerRegistration(thisTriggerId, store);
   const registerTrigger = React__namespace.useCallback(element => {
     const cleanup = baseRegisterTrigger(element);
     if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
@@ -4969,14 +4787,14 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     triggerElementRef,
     externalTree: floatingTreeRoot
   });
-  const click = useClick(floatingRootContext, {
+  const click = ScrollAreaViewport.useClick(floatingRootContext, {
     enabled: !disabled,
     event: 'mousedown',
     toggle: !openOnHover,
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = DrawerRoot.useInteractions([click]);
+  const localInteractionProps = ScrollAreaViewport.useInteractions([click]);
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -4986,7 +4804,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   };
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: DrawerRoot.triggerOpenStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.triggerOpenStateMapping,
     props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
@@ -5004,7 +4822,6 @@ if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "Men
 exports.CompositeList = CompositeList;
 exports.DrawerClose = DrawerClose;
 exports.DrawerTitle = DrawerTitle;
-exports.DrawerTrigger = DrawerTrigger;
 exports.IndexGuessBehavior = IndexGuessBehavior;
 exports.MenuGroup = MenuGroup;
 exports.MenuGroupLabel = MenuGroupLabel;
@@ -5026,10 +4843,8 @@ exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
 exports.getPseudoElementBounds = getPseudoElementBounds;
 exports.itemMapping = itemMapping;
 exports.useAnchorPositioning = useAnchorPositioning;
-exports.useClick = useClick;
 exports.useCompositeListItem = useCompositeListItem;
 exports.useContextMenuRootContext = useContextMenuRootContext;
-exports.useDirection = useDirection;
 exports.useFloatingRootContext = useFloatingRootContext;
 exports.useListNavigation = useListNavigation;
 exports.useMenuItem = useMenuItem;