@jobber/components 8.14.1 → 8.16.0

package/dist/MenuSubmenuTrigger-es.js

@@ -1,65 +1,13 @@
 import * as React from 'react';
-import { u as useDialogRootContext, i as isTypeableElement, e as useFloatingParentNodeId, F as FloatingRootStore, P as PopupTriggerMap, f as useFloatingTree, g as getTarget, m as matchesFocusVisible, h as isTargetInsideEnabledTrigger, j as createAttribute, k as activeElement, l as contains, T as TYPEABLE_SELECTOR, n as getNodeChildren, o as getFloatingFocusElement, p as isTypeableCombobox, q as isIndexOutOfListBounds, r as getMinListIndex, s as getMaxListIndex, t as createGridCellMap, v as isListIndexDisabled, w as getGridNavigatedIndex, x as getGridCellIndices, y as getGridCellIndexOfCorner, A as ARROW_DOWN, z as ARROW_LEFT, B as ARROW_RIGHT, C as findNonDisabledListIndex, E as enqueueFocus, G as ARROW_UP, H as isElementVisible, I as useTriggerDataForwarding, J as useInteractions, K as CLICK_TRIGGER_IDENTIFIER, L as triggerOpenStateMapping, M as DISABLED_TRANSITIONS_STYLE, N as popupStateMapping, O as COMPOSITE_KEYS, Q as FloatingFocusManager, R as FloatingPortal, S as POPUP_COLLISION_AVOIDANCE, U as InternalBackdrop, V as inertValue, W as FloatingNode, X as DROPDOWN_COLLISION_AVOIDANCE, Y as popupStoreSelectors, Z as createSelector, _ as ReactStore, $ as createInitialPopupStoreState, a0 as FloatingTreeStore, a1 as fastComponent, a2 as useOnFirstRender, a3 as useFloatingNodeId, a4 as useOpenInteractionType, a5 as useImplicitActiveTrigger, a6 as useOpenStateTransitions, a7 as useScrollLock, a8 as useSyncedFloatingRootContext, a9 as useDismiss, aa as useRole, ab as TYPEAHEAD_RESET_MS, ac as FloatingTree, ad as fastComponentRef, ae as getTabbableBeforeElement, af as isOutsideEvent, ag as getTabbableAfterElement, ah as getNextTabbable, ai as pressableTriggerOpenStateMapping, aj as FocusGuard, ak as PATIENT_CLICK_THRESHOLD, al as useTriggerRegistration } from './DrawerRoot-es.js';
-import { u as useRenderElement, E as EMPTY_OBJECT, b as useRefWithInit, f as formatErrorMessage, m as mergeProps, c as useMergedRefs, d as EMPTY_ARRAY } from './useRenderElement-es.js';
-import { k as createChangeEventDetails, B as closePress, C as isMouseLikePointerType, D as useAnimationFrame, c as useTimeout, E as isClickLikeEvent, F as triggerPress, b as useId, u as useIsoLayoutEffect, G as triggerFocus, H as isMac, I as isSafari, s as ownerDocument, J as escapeKey, f as useOnMount, T as Timeout, a as useStableCallback, K as triggerHover, i as useValueAsRef, z as stopEvent, L as listNavigation, M as focusOut, N as isVirtualClick, O as isVirtualPointerEvent, P as itemPress, t as transitionStatusMapping, e as useOpenChangeComplete, Q as outsidePress, R as useAnimationsFinished, U as siblingOpen, h as useControlled, d as useTransitionStatus, V as imperativeAction, W as cancelOpen } from './useValueChanged-es.js';
-import { a as useButton, u as useBaseUiId, b as useCompositeRootContext } from './useBaseUiId-es.js';
+import { u as useFloatingParentNodeId, F as FloatingRootStore, P as PopupTriggerMap, g as useFloatingTree, h as getTarget, i as isTypeableElement, m as matchesFocusVisible, j as isTargetInsideEnabledTrigger, k as createAttribute, l as activeElement, n as contains, T as TYPEABLE_SELECTOR, o as getNodeChildren, p as getFloatingFocusElement, q as isTypeableCombobox, r as isIndexOutOfListBounds, s as getMinListIndex, t as getMaxListIndex, v as createGridCellMap, w as isListIndexDisabled, x as getGridNavigatedIndex, y as getGridCellIndices, z as getGridCellIndexOfCorner, A as ARROW_DOWN, B as ARROW_LEFT, C as ARROW_RIGHT, E as findNonDisabledListIndex, G as enqueueFocus, H as ARROW_UP, I as isElementVisible, J as useDirection, K as DISABLED_TRANSITIONS_STYLE, L as useDialogRootContext, M as popupStateMapping, N as COMPOSITE_KEYS, O as FloatingFocusManager, Q as FloatingPortal, R as POPUP_COLLISION_AVOIDANCE, U as InternalBackdrop, V as inertValue, W as FloatingNode, X as DROPDOWN_COLLISION_AVOIDANCE, Y as popupStoreSelectors, Z as createSelector, _ as ReactStore, $ as createInitialPopupStoreState, a0 as FloatingTreeStore, a1 as fastComponent, a2 as useOnFirstRender, a3 as useFloatingNodeId, a4 as useOpenInteractionType, a5 as useImplicitActiveTrigger, a6 as useOpenStateTransitions, a7 as useScrollLock, a8 as useSyncedFloatingRootContext, a9 as useDismiss, aa as useRole, ab as TYPEAHEAD_RESET_MS, ac as useInteractions, ad as FloatingTree, ae as fastComponentRef, af as useTriggerDataForwarding, ag as useClick, ah as getTabbableBeforeElement, ai as isOutsideEvent, aj as getTabbableAfterElement, ak as getNextTabbable, al as pressableTriggerOpenStateMapping, am as FocusGuard, an as PATIENT_CLICK_THRESHOLD, ao as useTriggerRegistration, ap as triggerOpenStateMapping } from './ScrollAreaViewport-es.js';
+import { a as useRefWithInit, E as EMPTY_OBJECT, u as useRenderElement, f as formatErrorMessage, m as mergeProps, b as useMergedRefs, d as EMPTY_ARRAY } from './useRenderElement-es.js';
+import { C as isMouseLikePointerType, D as useId, d as useIsoLayoutEffect, b as useTimeout, k as createChangeEventDetails, E as triggerFocus, F as isMac, G as isSafari, s as ownerDocument, H as triggerPress, I as escapeKey, f as useOnMount, T as Timeout, a as useStableCallback, J as triggerHover, i as useValueAsRef, A as stopEvent, K as listNavigation, L as focusOut, M as isVirtualClick, N as isVirtualPointerEvent, y as useButton, O as closePress, u as useBaseUiId, P as itemPress, t as transitionStatusMapping, e as useOpenChangeComplete, Q as outsidePress, R as useAnimationsFinished, S as siblingOpen, h as useControlled, c as useTransitionStatus, U as imperativeAction, V as useCompositeRootContext, W as cancelOpen } from './clamp-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { b as isElement, k as getWindow, a as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils.dom-es.js';
 import { e as evaluate, h as getPaddingObject, b as getAlignmentAxis, d as getAlignment, q as getAxisLength, n as clamp, c as getSide, g as getSideAxis } from './index.esm-es.js';
 import { u as useFloating$1, h as hide$1, f as flip, d as size, b as autoUpdate, o as offset, s as shift, l as limitShift } from './floating-ui.react-dom-es.js';
 import * as ReactDOM from 'react-dom';
 
-/**
- * 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.forwardRef(function DialogClose(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
-    }
-  }
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    native: nativeButton
-  });
-  const state = {
-    disabled
-  };
-  return 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 && !isMouseLikePointerType(pointerType)) {
     return 0;
@@ -86,109 +34,6 @@ 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 = triggerPress
-  } = props;
-  const pointerTypeRef = React.useRef(undefined);
-  const frame = useAnimationFrame();
-  const touchOpenTimeout = useTimeout();
-  const reference = React.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' || 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 (isTypeableElement(nativeEvent.target)) {
-        const details = 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 = 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 (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 ? isClickLikeEvent(openEvent) : true));
-      const details = 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.useMemo(() => enabled ? {
-    reference
-  } : EMPTY_OBJECT, [enabled, reference]);
-}
-
 function useFloatingRootContext(options) {
   const {
     open = false,
@@ -1973,1452 +1818,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.forwardRef(function DialogTitle(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
-  const id = useBaseUiId(idProp);
-  store.useSyncedValueWithCleanup('titleElementId', id);
-  return 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.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled = false,
-    nativeButton = true,
-    id: idProp,
-    payload,
-    handle,
-    ...elementProps
-  } = componentProps;
-  const dialogRootContext = 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.' : 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(idProp);
-  const floatingContext = store.useState('floatingRootContext');
-  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
-  const triggerElementRef = React.useRef(null);
-  const {
-    registerTrigger,
-    isMountedByThisTrigger
-  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
-    payload
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    native: nativeButton
-  });
-  const click = useClick(floatingContext, {
-    enabled: floatingContext != null
-  });
-  const localInteractionProps = useInteractions([click]);
-  const state = {
-    disabled,
-    open: isOpenedByThisTrigger
-  };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  return useRenderElement('button', componentProps, {
-    state,
-    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
-      [CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
-    }, elementProps, getButtonProps],
-    stateAttributesMapping: 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.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
-function useMenuPositionerContext(optional) {
-  const context = React.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>.' : 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.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuRootContext.displayName = "MenuRootContext";
-function useMenuRootContext(optional) {
-  const context = React.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>.' : 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.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ContextMenuRootContext.displayName = "ContextMenuRootContext";
-function useContextMenuRootContext(optional = true) {
-  const context = React.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>.' : formatErrorMessage(25));
+const CompositeListContext = /*#__PURE__*/React.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.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) {
+function CompositeList(props) {
   const {
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef,
-    itemMetadata
-  } = params;
-  const {
-    events: menuEvents
-  } = store.useState('floatingTreeRoot');
-  const contextMenuContext = useContextMenuRootContext(true);
-  const isContextMenu = contextMenuContext !== undefined;
-  return React.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 = useStableCallback(onMapChangeProp);
+  const nextIndexRef = React.useRef(0);
+  const listeners = 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 = useRefWithInit(createMap).current;
+  // `mapTick` uses a counter rather than objects for low precision-loss risk and better memory efficiency
+  const [mapTick, setMapTick] = React.useState(0);
+  const lastTickRef = React.useRef(mapTick);
+  const register = useStableCallback((node, metadata) => {
+    map.set(node, metadata ?? null);
+    lastTickRef.current += 1;
+    setMapTick(lastTickRef.current);
+  });
+  const unregister = useStableCallback(node => {
+    map.delete(node);
+    lastTickRef.current += 1;
+    setMapTick(lastTickRef.current);
+  });
+  const sortedMap = React.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: itemPress
+    });
+    return newMap;
+  }, [map, mapTick]);
+  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 && !isMac && event.button === 2) {
-          return;
-        }
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [sortedMap]);
+  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.useRef(null);
-  const {
-    getButtonProps,
-    buttonRef
-  } = useButton({
-    disabled,
-    focusableWhenDisabled: true,
-    native: nativeButton,
-    composite: true
+    onMapChange(sortedMap);
+  }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
+  useIsoLayoutEffect(() => {
+    return () => {
+      elementsRef.current = [];
+    };
+  }, [elementsRef]);
+  useIsoLayoutEffect(() => {
+    return () => {
+      if (labelsRef) {
+        labelsRef.current = [];
+      }
+    };
+  }, [labelsRef]);
+  const subscribeMapChange = useStableCallback(fn => {
+    listeners.add(fn);
+    return () => {
+      listeners.delete(fn);
+    };
   });
-  const commonProps = useMenuItemCommonProps({
-    closeOnClick,
-    highlighted,
-    id,
-    nodeId,
-    store,
-    typingRef,
-    itemRef,
-    itemMetadata
+  useIsoLayoutEffect(() => {
+    listeners.forEach(l => l(sortedMap));
+  }, [listeners, sortedMap]);
+  const contextValue = React.useMemo(() => ({
+    register,
+    unregister,
+    subscribeMapChange,
+    elementsRef,
+    labelsRef,
+    nextIndexRef
+  }), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
+  return /*#__PURE__*/jsx(CompositeListContext.Provider, {
+    value: contextValue,
+    children: children
   });
-  const getItemProps = React.useCallback(externalProps => {
-    return mergeProps(commonProps, {
-      onMouseEnter() {
-        if (itemMetadata.type !== 'submenu-trigger') {
-          return;
-        }
-        itemMetadata.setActive();
-      }
-    }, externalProps, getButtonProps);
-  }, [commonProps, getButtonProps, itemMetadata]);
-  const mergedRef = useMergedRefs(itemRef, buttonRef);
-  return React.useMemo(() => ({
-    getItemProps,
-    itemRef: mergedRef
-  }), [getItemProps, mergedRef]);
 }
-
-const CompositeListContext = /*#__PURE__*/React.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.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.useRef(-1);
-  const [index, setIndex] = React.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.useRef(null);
-  const ref = React.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]);
-  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'
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
     }
-    return undefined;
-  }, [externalIndex, register, unregister, metadata]);
-  useIsoLayoutEffect(() => {
-    if (externalIndex != null) {
-      return undefined;
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = 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.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 = 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 && 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
     };
-  },
-  ...transitionStatusMapping
-};
-
-const MenuGroupContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuGroupContext";
-function useMenuGroupRootContext() {
-  const context = React.useContext(MenuGroupContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuGroupRootContext is missing. Menu group parts must be used within <Menu.Group>.' : formatErrorMessage(31));
   }
-  return context;
-}
-
-const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const [labelId, setLabelId] = React.useState(undefined);
-  const context = React.useMemo(() => ({
-    setLabelId
-  }), [setLabelId]);
-  const element = useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: {
-      role: 'group',
-      'aria-labelledby': labelId,
-      ...elementProps
-    }
-  });
-  return /*#__PURE__*/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.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    id: idProp,
-    ...elementProps
-  } = componentProps;
-  const id = useBaseUiId(idProp);
-  const {
-    setLabelId
-  } = useMenuGroupRootContext();
-  useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => {
-      setLabelId(undefined);
-    };
-  }, [setLabelId, id]);
-  return useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    props: {
-      id,
-      role: 'presentation',
-      ...elementProps
-    }
-  });
+const arrow = (options, deps) => ({
+  ...baseArrow(options),
+  options: [options, deps]
 });
-if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
 
-/**
- * An individual interactive item in the menu.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
- */
-const MenuItem = /*#__PURE__*/React.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(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('div', componentProps, {
-    state,
-    props: [itemProps, elementProps, getItemProps],
-    ref: [itemRef, forwardedRef, listItem.ref]
-  });
-});
-if (process.env.NODE_ENV !== "production") MenuItem.displayName = "MenuItem";
+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 hide$1().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 = 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
+    };
+
+    // 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 = ownerDocument(floating);
+      offsetDimensions = {
+        width: doc.documentElement.clientWidth,
+        height: doc.documentElement.clientHeight
+      };
+    } else if (await platform.isElement?.(offsetParent)) {
+      offsetDimensions = await platform.getDimensions(offsetParent);
+    }
+    const currentSide = 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 {
+    rects,
+    placement
+  } = state;
+  const data = {
+    side: getLogicalSide(sideParam, getSide(placement), isRtl),
+    align: getAlignment(placement) || 'center',
+    anchor: {
+      width: rects.reference.width,
+      height: rects.reference.height
+    },
+    positioner: {
+      width: rects.floating.width,
+      height: rects.floating.height
+    }
+  };
+  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.forwardRef(function MenuLinkItem(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    id: idProp,
-    label,
-    closeOnClick = false,
-    ...elementProps
-  } = componentProps;
-  const linkRef = React.useRef(null);
-  const listItem = useCompositeListItem({
-    label
-  });
-  const menuPositionerContext = useMenuPositionerContext(true);
-  const nodeId = menuPositionerContext?.nodeId;
-  const id = 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
-  } = 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
+    adaptiveOrigin,
+    lazyFlip = false,
+    externalTree
+  } = params;
+  const [mountSide, setMountSide] = React.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 = useStableCallback(anchorFn);
+  const anchorDep = anchorFn ? anchorFnCallback : anchor;
+  const anchorValueRef = 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;
+
+  // 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
+  };
+
+  // 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.useRef(null);
+
+  // Keep these reactive if they're not functions
+  const sideOffsetRef = useValueAsRef(sideOffset);
+  const alignOffsetRef = useValueAsRef(alignOffset);
+  const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
+  const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
+  const middleware = [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 : 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
   });
-  function getItemProps(externalProps) {
-    return mergeProps(commonProps, externalProps, getButtonProps);
+  const shiftMiddleware = shiftDisabled ? null : shift(data => {
+    const html = 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 : limitShift(limitData => {
+        if (!arrowRef.current) {
+          return {};
+        }
+        const {
+          width,
+          height
+        } = arrowRef.current.getBoundingClientRect();
+        const sideAxis = getSideAxis(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);
   }
-  const state = React.useMemo(() => ({
-    highlighted
-  }), [highlighted]);
-  return useRenderElement('a', componentProps, {
-    state,
-    props: [itemProps, elementProps, getItemProps],
-    ref: [linkRef, buttonRef, forwardedRef, listItem.ref]
+  middleware.push(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 = getSide(renderedPlacement);
+      const currentRenderedAxis = 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);
+  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.useMemo(() => ({
+    elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
+    layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
+  }), [disableAnchorTracking]);
+  const {
+    refs,
+    elements,
+    x,
+    y,
+    middlewareData,
+    update,
+    placement: renderedPlacement,
+    context,
+    isPositioned,
+    floatingStyles: originalFloatingStyles
+  } = useFloating({
+    rootContext: floatingRootContext,
+    placement,
+    middleware,
+    strategy: positionMethod,
+    whileElementsMounted: keepMounted ? undefined : (...args) => autoUpdate(...args, autoUpdateOptions),
+    nodeId,
+    externalTree
   });
-});
-if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";
+  const {
+    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.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.useRef(null);
+  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.useEffect(() => {
+    if (!mounted) {
+      return;
+    }
+    const anchorValue = anchorValueRef.current;
 
-const ToolbarRootContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
-function useToolbarRootContext(optional) {
-  const context = React.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>.' : formatErrorMessage(69));
-  }
-  return context;
+    // 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.useEffect(() => {
+    if (keepMounted && mounted && elements.domReference && elements.floating) {
+      return autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
+    }
+    return undefined;
+  }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
+  const renderedSide = getSide(renderedPlacement);
+  const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
+  const renderedAlign = 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.
+   */
+  useIsoLayoutEffect(() => {
+    if (lazyFlip && mounted && isPositioned) {
+      setMountSide(renderedSide);
+    }
+  }, [lazyFlip, mounted, isPositioned, renderedSide]);
+  const arrowStyles = React.useMemo(() => ({
+    position: 'absolute',
+    top: middlewareData.arrow?.y,
+    left: middlewareData.arrow?.x
+  }), [middlewareData.arrow]);
+  const arrowUncentered = middlewareData.arrow?.centerOffset !== 0;
+  return React.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' ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT;
 }
 
-const stateAttributesMapping = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
+let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
+  IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+  IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+  return IndexGuessBehavior;
+}({});
 
 /**
- * A container for the menu items.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ * Used to register a list item and its index (DOM position) in the `CompositeList`.
  */
-const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    finalFocus,
-    ...elementProps
-  } = componentProps;
+function useCompositeListItem(params = {}) {
   const {
-    store
-  } = useMenuRootContext();
+    label,
+    metadata,
+    textRef,
+    indexGuessBehavior,
+    index: externalIndex
+  } = params;
   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';
-  useOpenChangeComplete({
-    open,
-    ref: store.context.popupRef,
-    onComplete() {
-      if (open) {
-        store.context.onOpenChangeComplete?.(true);
+    register,
+    unregister,
+    subscribeMapChange,
+    elementsRef,
+    labelsRef,
+    nextIndexRef
+  } = useCompositeListContext();
+  const indexRef = React.useRef(-1);
+  const [index, setIndex] = React.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.useRef(null);
+  const ref = React.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;
       }
     }
-  });
-  React.useEffect(() => {
-    function handleClose(event) {
-      store.setOpen(false, createChangeEventDetails(event.reason, event.domEvent));
+  }, [index, elementsRef, labelsRef, label, textRef]);
+  useIsoLayoutEffect(() => {
+    if (externalIndex != null) {
+      return undefined;
     }
-    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.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, store.context.popupRef, setPopupElement],
-    stateAttributesMapping,
-    props: [popupProps, {
-      onKeyDown(event) {
-        if (insideToolbar && COMPOSITE_KEYS.has(event.key)) {
-          event.stopPropagation();
-        }
+    const node = componentRef.current;
+    if (node) {
+      register(node, metadata);
+      return () => {
+        unregister(node);
+      };
+    }
+    return undefined;
+  }, [externalIndex, register, unregister, metadata]);
+  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 !== outsidePress) {
-    returnFocus = true;
-  }
-  return /*#__PURE__*/jsx(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.createContext(undefined);
-if (process.env.NODE_ENV !== "production") MenuPortalContext.displayName = "MenuPortalContext";
-function useMenuPortalContext() {
-  const value = React.useContext(MenuPortalContext);
-  if (value === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Portal> is missing.' : formatErrorMessage(32));
-  }
-  return value;
+    });
+  }, [externalIndex, subscribeMapChange, setIndex]);
+  return React.useMemo(() => ({
+    ref,
+    index
+  }), [index, ref]);
 }
 
-const MenuPortal = /*#__PURE__*/React.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.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;
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
+    }
   }
-  return /*#__PURE__*/jsx(MenuPortalContext.Provider, {
-    value: keepMounted,
-    children: /*#__PURE__*/jsx(FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const state = {
+    disabled
+  };
+  return 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.createContext(undefined);
-if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
-function useDirection() {
-  const context = React.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'
-    } = evaluate(options, state) || {};
-    if (element == null) {
-      return {};
-    }
-    const paddingObject = getPaddingObject(padding);
-    const coords = {
-      x,
-      y
-    };
-    const axis = getAlignmentAxis(placement);
-    const length = 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 = 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 && 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 hide$1().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 = 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
-    };
-
-    // 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 = ownerDocument(floating);
-      offsetDimensions = {
-        width: doc.documentElement.clientWidth,
-        height: doc.documentElement.clientHeight
-      };
-    } else if (await platform.isElement?.(offsetParent)) {
-      offsetDimensions = await platform.getDimensions(offsetParent);
-    }
-    const currentSide = 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
-      }
-    };
+const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const id = useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('titleElementId', id);
+  return useRenderElement('h2', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogTitle.displayName = "DialogTitle";
+
+/**
+ * A heading that labels the drawer.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerTitle = DialogTitle;
+
+const MenuPositionerContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
+function useMenuPositionerContext(optional) {
+  const context = React.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>.' : 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.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuRootContext.displayName = "MenuRootContext";
+function useMenuRootContext(optional) {
+  const context = React.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>.' : formatErrorMessage(36));
+  }
+  return context;
 }
-function getOffsetData(state, sideParam, isRtl) {
-  const {
-    rects,
-    placement
-  } = state;
-  const data = {
-    side: getLogicalSide(sideParam, getSide(placement), isRtl),
-    align: 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.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ContextMenuRootContext.displayName = "ContextMenuRootContext";
+function useContextMenuRootContext(optional = true) {
+  const context = React.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>.' : 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.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 = useStableCallback(anchorFn);
-  const anchorDep = anchorFn ? anchorFnCallback : anchor;
-  const anchorValueRef = 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;
-
-  // 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
-  };
-
-  // 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.useRef(null);
-
-  // Keep these reactive if they're not functions
-  const sideOffsetRef = useValueAsRef(sideOffset);
-  const alignOffsetRef = useValueAsRef(alignOffset);
-  const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
-  const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [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 : 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
+  const {
+    events: menuEvents
+  } = store.useState('floatingTreeRoot');
+  const contextMenuContext = useContextMenuRootContext(true);
+  const isContextMenu = contextMenuContext !== undefined;
+  return React.useMemo(() => ({
+    id,
+    role: 'menuitem',
+    tabIndex: highlighted ? 0 : -1,
+    onKeyDown(event) {
+      if (event.key === ' ' && typingRef?.current) {
+        event.preventDefault();
+      }
     },
-    mainAxis: !shiftCrossAxis && collisionAvoidanceSide === 'flip',
-    crossAxis: collisionAvoidanceAlign === 'flip' ? 'alignment' : false,
-    fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
-  });
-  const shiftMiddleware = shiftDisabled ? null : shift(data => {
-    const html = 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 : limitShift(limitData => {
-        if (!arrowRef.current) {
-          return {};
-        }
-        const {
-          width,
-          height
-        } = arrowRef.current.getBoundingClientRect();
-        const sideAxis = getSideAxis(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(size({
-    ...commonCollisionProps,
-    apply({
-      elements: {
-        floating
-      },
-      availableWidth,
-      availableHeight,
-      rects
-    }) {
-      const floatingStyle = floating.style;
-      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
-      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
+    onMouseMove(event) {
+      if (!nodeId) {
+        return;
+      }
 
-      // 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 = getSide(renderedPlacement);
-      const currentRenderedAxis = 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);
-  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
+      // 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: 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 && !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();
+        }
+      }
     }
-  }, [mounted, floatingRootContext]);
-  const autoUpdateOptions = React.useMemo(() => ({
-    elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
-    layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
-  }), [disableAnchorTracking]);
+  }), [closeOnClick, highlighted, id, menuEvents, nodeId, store, typingRef, itemRef, contextMenuContext, isContextMenu, itemMetadata]);
+}
+
+const REGULAR_ITEM = {
+  type: 'regular-item'
+};
+function useMenuItem(params) {
   const {
-    refs,
-    elements,
-    x,
-    y,
-    middlewareData,
-    update,
-    placement: renderedPlacement,
-    context,
-    isPositioned,
-    floatingStyles: originalFloatingStyles
-  } = useFloating({
-    rootContext: floatingRootContext,
-    placement,
-    middleware,
-    strategy: positionMethod,
-    whileElementsMounted: keepMounted ? undefined : (...args) => autoUpdate(...args, autoUpdateOptions),
+    closeOnClick,
+    disabled = false,
+    highlighted,
+    id,
+    store,
+    typingRef = store.context.typingRef,
+    nativeButton,
+    itemMetadata,
+    nodeId
+  } = params;
+  const itemRef = React.useRef(null);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton,
+    composite: true
+  });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
     nodeId,
-    externalTree
+    store,
+    typingRef,
+    itemRef,
+    itemMetadata
   });
-  const {
-    sideX,
-    sideY
-  } = middlewareData.adaptiveOrigin || DEFAULT_SIDES;
+  const getItemProps = React.useCallback(externalProps => {
+    return mergeProps(commonProps, {
+      onMouseEnter() {
+        if (itemMetadata.type !== 'submenu-trigger') {
+          return;
+        }
+        itemMetadata.setActive();
+      }
+    }, externalProps, getButtonProps);
+  }, [commonProps, getButtonProps, itemMetadata]);
+  const mergedRef = useMergedRefs(itemRef, buttonRef);
+  return React.useMemo(() => ({
+    getItemProps,
+    itemRef: mergedRef
+  }), [getItemProps, mergedRef]);
+}
 
-  // 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.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.useRef(null);
-  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.useEffect(() => {
-    if (!mounted) {
-      return;
-    }
-    const anchorValue = anchorValueRef.current;
+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;
+}({});
 
-    // 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;
+const itemMapping = {
+  checked(value) {
+    if (value) {
+      return {
+        [MenuCheckboxItemDataAttributes.checked]: ''
+      };
     }
-  }, [mounted, refs, anchorDep, anchorValueRef]);
-  React.useEffect(() => {
-    if (keepMounted && mounted && elements.domReference && elements.floating) {
-      return autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
+    return {
+      [MenuCheckboxItemDataAttributes.unchecked]: ''
+    };
+  },
+  ...transitionStatusMapping
+};
+
+const MenuGroupContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuGroupContext";
+function useMenuGroupRootContext() {
+  const context = React.useContext(MenuGroupContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuGroupRootContext is missing. Menu group parts must be used within <Menu.Group>.' : formatErrorMessage(31));
+  }
+  return context;
+}
+
+const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const [labelId, setLabelId] = React.useState(undefined);
+  const context = React.useMemo(() => ({
+    setLabelId
+  }), [setLabelId]);
+  const element = useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: {
+      role: 'group',
+      'aria-labelledby': labelId,
+      ...elementProps
     }
-    return undefined;
-  }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
-  const renderedSide = getSide(renderedPlacement);
-  const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
-  const renderedAlign = getAlignment(renderedPlacement) || 'center';
-  const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
+  });
+  return /*#__PURE__*/jsx(MenuGroupContext.Provider, {
+    value: context,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuGroup.displayName = "MenuGroup";
 
-  /**
-   * 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.
-   */
+/**
+ * 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.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const id = useBaseUiId(idProp);
+  const {
+    setLabelId
+  } = useMenuGroupRootContext();
   useIsoLayoutEffect(() => {
-    if (lazyFlip && mounted && isPositioned) {
-      setMountSide(renderedSide);
+    setLabelId(id);
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [setLabelId, id]);
+  return useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    props: {
+      id,
+      role: 'presentation',
+      ...elementProps
     }
-  }, [lazyFlip, mounted, isPositioned, renderedSide]);
-  const arrowStyles = React.useMemo(() => ({
-    position: 'absolute',
-    top: middlewareData.arrow?.y,
-    left: middlewareData.arrow?.x
-  }), [middlewareData.arrow]);
-  const arrowUncentered = middlewareData.arrow?.centerOffset !== 0;
-  return React.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;
-}
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
 
-/* eslint-disable no-bitwise */
 /**
- * Provides context for a list of items in a composite component.
- * @internal
+ * An individual interactive item in the menu.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-function CompositeList(props) {
+const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componentProps, forwardedRef) {
   const {
-    children,
-    elementsRef,
-    labelsRef,
-    onMapChange: onMapChangeProp
-  } = props;
-  const onMapChange = useStableCallback(onMapChangeProp);
-  const nextIndexRef = React.useRef(0);
-  const listeners = 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 = useRefWithInit(createMap).current;
-  // `mapTick` uses a counter rather than objects for low precision-loss risk and better memory efficiency
-  const [mapTick, setMapTick] = React.useState(0);
-  const lastTickRef = React.useRef(mapTick);
-  const register = useStableCallback((node, metadata) => {
-    map.set(node, metadata ?? null);
-    lastTickRef.current += 1;
-    setMapTick(lastTickRef.current);
+    render,
+    className,
+    id: idProp,
+    label,
+    nativeButton = false,
+    disabled = false,
+    closeOnClick = true,
+    ...elementProps
+  } = componentProps;
+  const listItem = useCompositeListItem({
+    label
   });
-  const unregister = useStableCallback(node => {
-    map.delete(node);
-    lastTickRef.current += 1;
-    setMapTick(lastTickRef.current);
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const id = 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 sortedMap = React.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]);
-  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]);
-  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;
+  const state = {
+    disabled,
+    highlighted
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    props: [itemProps, elementProps, getItemProps],
+    ref: [itemRef, forwardedRef, listItem.ref]
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuItem.displayName = "MenuItem";
+
+/**
+ * A link in the menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    closeOnClick = false,
+    ...elementProps
+  } = componentProps;
+  const linkRef = React.useRef(null);
+  const listItem = useCompositeListItem({
+    label
+  });
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const nodeId = menuPositionerContext?.nodeId;
+  const id = 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
+  } = useButton({
+    native: false,
+    composite: true
+  });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    itemRef: linkRef
+  });
+  function getItemProps(externalProps) {
+    return mergeProps(commonProps, externalProps, getButtonProps);
+  }
+  const state = React.useMemo(() => ({
+    highlighted
+  }), [highlighted]);
+  return 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.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
+function useToolbarRootContext(optional) {
+  const context = React.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>.' : formatErrorMessage(69));
+  }
+  return context;
+}
+
+const stateAttributesMapping = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * A container for the menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    finalFocus,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useMenuRootContext();
+  const {
+    side,
+    align
+  } = useMenuPositionerContext();
+  const insideToolbar = useToolbarRootContext(true) != null;
+  const open = store.useState('open');
+  const transitionStatus = store.useState('transitionStatus');
+  const popupProps = store.useState('popupProps');
+  const mounted = store.useState('mounted');
+  const instantType = store.useState('instantType');
+  const triggerElement = store.useState('activeTriggerElement');
+  const parent = store.useState('parent');
+  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
+  const rootId = store.useState('rootId');
+  const floatingContext = store.useState('floatingRootContext');
+  const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const closeDelay = store.useState('closeDelay');
+  const activeTriggerElement = store.useState('activeTriggerElement');
+  const isContextMenu = parent.type === 'context-menu';
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
       }
-      nextIndexRef.current = sortedMap.size;
     }
-    onMapChange(sortedMap);
-  }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
-  useIsoLayoutEffect(() => {
-    return () => {
-      elementsRef.current = [];
-    };
-  }, [elementsRef]);
-  useIsoLayoutEffect(() => {
-    return () => {
-      if (labelsRef) {
-        labelsRef.current = [];
-      }
-    };
-  }, [labelsRef]);
-  const subscribeMapChange = useStableCallback(fn => {
-    listeners.add(fn);
+  });
+  React.useEffect(() => {
+    function handleClose(event) {
+      store.setOpen(false, 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
   });
-  useIsoLayoutEffect(() => {
-    listeners.forEach(l => l(sortedMap));
-  }, [listeners, sortedMap]);
-  const contextValue = React.useMemo(() => ({
-    register,
-    unregister,
-    subscribeMapChange,
-    elementsRef,
-    labelsRef,
-    nextIndexRef
-  }), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
-  return /*#__PURE__*/jsx(CompositeListContext.Provider, {
-    value: contextValue,
-    children: children
+  const state = {
+    transitionStatus,
+    side,
+    align,
+    open,
+    nested: parent.type === 'menu',
+    instant: instantType
+  };
+  const setPopupElement = React.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
+    stateAttributesMapping,
+    props: [popupProps, {
+      onKeyDown(event) {
+        if (insideToolbar && 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 !== outsidePress) {
+    returnFocus = true;
   }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
+  return /*#__PURE__*/jsx(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.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuPortalContext.displayName = "MenuPortalContext";
+function useMenuPortalContext() {
+  const value = React.useContext(MenuPortalContext);
+  if (value === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Portal> is missing.' : formatErrorMessage(32));
   }
-  return 0;
+  return value;
 }
 
+const MenuPortal = /*#__PURE__*/React.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__*/jsx(MenuPortalContext.Provider, {
+    value: keepMounted,
+    children: /*#__PURE__*/jsx(FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuPortal.displayName = "MenuPortal";
+
 const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositioner(componentProps, forwardedRef) {
   const {
     anchor: anchorProp,
@@ -4429,41 +4282,6 @@ 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,
@@ -4979,4 +4797,4 @@ const MenuSubmenuTrigger = /*#__PURE__*/React.forwardRef(function SubmenuTrigger
 });
 if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
 
-export { useTypeahead as A, getPseudoElementBounds as B, CompositeList as C, DrawerTrigger as D, useAnchorPositioning as E, getDisabledMountTransitionStyles as F, IndexGuessBehavior as I, MenuTrigger as M, REGULAR_ITEM as R, DrawerTitle as a, DrawerClose as b, MenuLinkItem as c, MenuItem as d, MenuRadioItem as e, MenuRadioItemIndicator as f, MenuSubmenuTrigger as g, MenuRoot as h, MenuPortal as i, MenuPositioner as j, MenuPopup as k, MenuRadioGroup as l, MenuGroup as m, MenuSubmenuRoot as n, MenuGroupLabel as o, useMenuPositionerContext as p, useContextMenuRootContext as q, useCompositeListItem as r, useMenuItem as s, itemMapping as t, useMenuRootContext as u, useDirection as v, MenuStore as w, useFloatingRootContext as x, useClick as y, useListNavigation as z };
+export { MenuStore as A, CompositeList as C, DrawerTitle as D, IndexGuessBehavior as I, MenuTrigger as M, REGULAR_ITEM as R, DrawerClose as a, MenuLinkItem as b, MenuItem as c, MenuRadioItem as d, MenuRadioItemIndicator as e, MenuSubmenuTrigger as f, MenuRoot as g, MenuPortal as h, MenuPositioner as i, MenuPopup as j, MenuRadioGroup as k, MenuGroup as l, MenuSubmenuRoot as m, MenuGroupLabel as n, useListNavigation as o, useTypeahead as p, getPseudoElementBounds as q, useAnchorPositioning as r, getDisabledMountTransitionStyles as s, useCompositeListItem as t, useFloatingRootContext as u, useMenuRootContext as v, useMenuPositionerContext as w, useContextMenuRootContext as x, useMenuItem as y, itemMapping as z };