@jobber/components 8.23.0 → 8.23.1

package/dist/unstyledPrimitives/index.mjs

@@ -1,26 +1,26 @@
 import * as React from 'react';
-import { b as useStableCallback, as as pointer, a as useIsoLayoutEffect, o as ownerDocument, r as contains, g as getTarget, h as useTimeout, u as useBaseUiId, d as createChangeEventDetails, at as swipe, W as useAnimationFrame, aq as TransitionStatusDataAttributes, E as useControlled, Z as itemPress, k as useTransitionStatus, f as useOpenChangeComplete, ab as useAnimationsFinished, af as isFirefox, au as scrub, N as createGenericEventDetails, X as isWebKit, t as transitionStatusMapping } from '../useButton-es.js';
-import { A as useCoreFilter, B as AriaCombobox, D as useComboboxInputValueContext, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, d as ComboboxInputGroup, p as ComboboxItem, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, e as ComboboxTrigger, z as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, b as ComboboxValue, y as useComboboxFilter } from '../ComboboxChipRemove-es.js';
-import { i as stringifyAsLabel, k as getDefaultLabelId } from '../resolveAriaLabelledBy-es.js';
+import { A as useCoreFilter, B as AriaCombobox, D as useComboboxInputValueContext, e as ComboboxTrigger, d as ComboboxInputGroup, p as ComboboxItem, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, z as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, b as ComboboxValue, y as useComboboxFilter } from '../ComboboxChipRemove-es.js';
+import { a as stringifyAsLabel, l as getDefaultLabelId } from '../resolveAriaLabelledBy-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { af as pointer, a as useIsoLayoutEffect, b as useStableCallback, o as ownerDocument, q as contains, g as getTarget, h as useTimeout, u as useBaseUiId, d as createChangeEventDetails, ag as swipe, n as useAnimationFrame, B as addEventListener, p as activeElement, ad as TransitionStatusDataAttributes, z as useControlled, V as itemPress, k as useTransitionStatus, f as useOpenChangeComplete, a2 as useAnimationsFinished, ah as scrub, J as createGenericEventDetails, t as transitionStatusMapping } from '../useButton-es.js';
 import { S as Separator } from '../Separator-es.js';
 import { a as DialogBackdrop, d as DialogDescription, f as DialogHandle, c as DialogPopup, b as DialogViewport, e as createDialogHandle, D as DrawerDescription } from '../DrawerDescription-es.js';
 import { c as DialogClose, b as DialogTitle, a as DrawerClose, D as DrawerTitle } from '../DrawerTitle-es.js';
-import { i as DialogPortal, g as DialogRoot, h as DialogTrigger, t as useDrawerProviderContext, v as DrawerBackdropCssVars, w as DrawerPopupCssVars, x as DrawerProviderContext, u as useDialogRootContext, y as useDrawerRootContext, s as useTriggerRegistration, z as DrawerPopupDataAttributes, A as useDrawerSnapPoints, B as DrawerViewportContext, C as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, E as useScrollAreaRootContext, F as getOffset, G as ScrollAreaRootCssVars, H as scrollAreaStateAttributesMapping, I as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
+import { i as DialogPortal, g as DialogRoot, h as DialogTrigger, m as useDrawerProviderContext, n as DrawerBackdropCssVars, o as DrawerPopupCssVars, q as DrawerProviderContext, u as useDialogRootContext, r as useDrawerRootContext, s as DrawerPopupDataAttributes, t as useDrawerSnapPoints, v as getSnapPointSwipeMovement, w as DrawerViewportContext, x as DRAWER_CONTENT_ATTRIBUTE, c as DrawerBackdrop, f as DrawerContent, d as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, y as useScrollAreaRootContext, z as getOffset, A as ScrollAreaRootCssVars, B as scrollAreaStateAttributesMapping, C as useScrollAreaViewportContext, S as ScrollAreaRoot, e as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
 import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
-import { a as isHTMLElement, f as getComputedStyle, b as isElement, o as getWindow } from '../floating-ui.utils.dom-es.js';
+import { a as isHTMLElement, d as isLastTraversableNode, e as getParentNode, f as getComputedStyle, o as getWindow, b as isElement } from '../floating-ui.utils.dom-es.js';
 import { c as clamp } from '../clamp-es.js';
-import { C as CommonPopupDataAttributes, $ as BASE_UI_SWIPE_IGNORE_SELECTOR, p as popupStateMapping, n as useDirection, A as inertValue, r as useStore, G as triggerOpenStateMapping } from '../InternalBackdrop-es.js';
+import { C as CommonPopupDataAttributes, aj as useTriggerRegistration, am as BASE_UI_SWIPE_IGNORE_SELECTOR, a0 as isInteractiveElement, p as popupStateMapping, r as useDirection, G as inertValue, X as mergeCleanups, al as gecko, J as webkit, w as useStore, W as triggerOpenStateMapping } from '../useScrollLock-es.js';
 import * as ReactDOM from 'react-dom';
 import { u as useMenuRootContext, o as useMenuPositionerContext, p as useMenuItem, R as REGULAR_ITEM, q as itemMapping, r as MenuStore, h as MenuBackdrop, l as MenuGroup, n as MenuGroupLabel, b as MenuItem, a as MenuLinkItem, j as MenuPopup, g as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, c as MenuRadioItem, d as MenuRadioItemIndicator, f as MenuRoot, m as MenuSubmenuRoot, e as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
-import { e as useCompositeListItem } from '../useCompositeListItem-es.js';
-import { y as round } from '../index.esm-es.js';
-import { u as useNumberFieldRootContext, D as DEFAULT_STEP, s as stateAttributesMapping$6, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
-import { u as useSelectRootContext, s as selectors, l as useSelectPositionerContext, j as SelectGroup, k as SelectGroupLabel, g as SelectItem, i as SelectItemIndicator, h as SelectItemText, f as SelectList, e as SelectPopup, a as SelectPortal, d as SelectPositioner, S as SelectRoot, b as SelectTrigger, c as SelectValue } from '../SelectGroupLabel-es.js';
+import { h as useCompositeListItem } from '../useCompositeListItem-es.js';
+import { u as usePreviousValue, l as useSelectRootContext, s as selectors, m as useSelectPositionerContext, j as SelectGroup, k as SelectGroupLabel, g as SelectItem, i as SelectItemIndicator, h as SelectItemText, f as SelectList, e as SelectPopup, a as SelectPortal, d as SelectPositioner, S as SelectRoot, b as SelectTrigger, c as SelectValue } from '../SelectGroupLabel-es.js';
+import { v as round } from '../floating-ui.utils-es.js';
+import { u as useNumberFieldRootContext, s as stateAttributesMapping$6, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import { b as useFieldRootContext, f as fieldValidityMapping } from '../useLabelableId-es.js';
 import { u as useLabel } from '../useLabel-es.js';
-import '../CSPContext-es.js';
-import '../ToolbarRootContext-es.js';
+import { g as getMaxScrollOffset, n as normalizeScrollOffset, S as SCROLL_EDGE_TOLERANCE_PX } from '../scrollEdges-es.js';
+import '../isElementDisabled-es.js';
 import '../floating-ui.react-dom-es.js';
 
 function AutocompleteRoot(props) {
@@ -56,13 +56,6 @@ function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const handleValueChange = useStableCallback((nextValue, eventDetails) => {
-    setInlineInputValue('');
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onValueChange?.(nextValue, eventDetails);
-  });
   const collator = useCoreFilter();
   const baseFilter = React.useMemo(() => {
     if (other.filter !== undefined) {
@@ -84,7 +77,14 @@ function AutocompleteRoot(props) {
       return baseFilter(item, resolvedQuery, toString);
     };
   }, [baseFilter, mode, resolvedQuery, staticItems]);
-  const handleItemHighlighted = useStableCallback((highlightedValue, eventDetails) => {
+  function handleValueChange(nextValue, eventDetails) {
+    setInlineInputValue('');
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue, eventDetails);
+  }
+  function handleItemHighlighted(highlightedValue, eventDetails) {
     props.onItemHighlighted?.(highlightedValue, eventDetails);
     if (eventDetails.reason === pointer) {
       return;
@@ -98,7 +98,7 @@ function AutocompleteRoot(props) {
     } else {
       setInlineInputValue('');
     }
-  });
+  }
   return /*#__PURE__*/jsx(AriaCombobox, {
     ...other,
     itemToStringLabel: itemToStringValue,
@@ -132,6 +132,30 @@ function AutocompleteValue(props) {
   });
 }
 
+/**
+ * A button that opens the popup.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteTrigger = ComboboxTrigger;
+
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteInputGroup = ComboboxInputGroup;
+
+/**
+ * An individual item in the list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteItem = ComboboxItem;
+
 var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
@@ -143,8 +167,8 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   GroupLabel: ComboboxGroupLabel,
   Icon: ComboboxIcon,
   Input: ComboboxInput,
-  InputGroup: ComboboxInputGroup,
-  Item: ComboboxItem,
+  InputGroup: AutocompleteInputGroup,
+  Item: AutocompleteItem,
   List: ComboboxList,
   Popup: ComboboxPopup,
   Portal: ComboboxPortal,
@@ -153,7 +177,7 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   Row: ComboboxRow,
   Separator: Separator,
   Status: ComboboxStatus,
-  Trigger: ComboboxTrigger,
+  Trigger: AutocompleteTrigger,
   Value: AutocompleteValue,
   useFilter: useCoreFilter,
   useFilteredItems: useFilteredItems
@@ -198,6 +222,7 @@ const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(compone
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext();
@@ -272,6 +297,7 @@ const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerInde
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = useDrawerProviderContext();
@@ -371,36 +397,49 @@ function createVisualStateStore() {
   };
 }
 
-function isScrollable(element, axis) {
+function isScrollable(element, axis,
+// When true, a container that overflows only once extra space is added (e.g. drawer
+// keyboard scroll slack) still counts, as long as it has layout size on the axis.
+allowOverflowIntent = false) {
   const style = getComputedStyle(element);
   if (axis === 'vertical') {
     const overflowY = style.overflowY;
-    return (overflowY === 'auto' || overflowY === 'scroll') && element.scrollHeight > element.clientHeight;
+    if (overflowY !== 'auto' && overflowY !== 'scroll') {
+      return false;
+    }
+    return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
   }
   const overflowX = style.overflowX;
-  return (overflowX === 'auto' || overflowX === 'scroll') && element.scrollWidth > element.clientWidth;
+  if (overflowX !== 'auto' && overflowX !== 'scroll') {
+    return false;
+  }
+  return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
 }
 function hasScrollableAncestor(target, root, axes) {
+  // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
+  // still walks up to scrollable ancestors in the light DOM.
   let node = target;
-  while (node && node !== root) {
+  while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
     for (const axis of axes) {
       if (isScrollable(node, axis)) {
         return true;
       }
     }
-    node = node.parentElement;
+    node = getParentNode(node);
   }
   return false;
 }
-function findScrollableTouchTarget(target, root, axis = 'vertical') {
+function findScrollableTouchTarget(target, root, axis = 'vertical', allowOverflowIntent = false) {
+  // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
+  // still reaches a scrollable ancestor in the light DOM.
   let node = isHTMLElement(target) ? target : null;
-  while (node && node !== root) {
-    if (isScrollable(node, axis)) {
+  while (isHTMLElement(node) && node !== root && !isLastTraversableNode(node)) {
+    if (isScrollable(node, axis, allowOverflowIntent)) {
       return node;
     }
-    node = node.parentElement;
+    node = getParentNode(node);
   }
-  return isScrollable(root, axis) ? root : null;
+  return isScrollable(root, axis, allowOverflowIntent) ? root : null;
 }
 
 function getElementAtPoint(doc, x, y) {
@@ -429,7 +468,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = getWindow(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -458,6 +497,9 @@ function getElementTransform(element) {
 function getValidTimeStamp(timeStamp) {
   return Number.isFinite(timeStamp) && timeStamp > 0 ? timeStamp : null;
 }
+function getDragTransform(dragOffset, scale) {
+  return `translate3d(${dragOffset.x}px,${dragOffset.y}px,0) scale(${scale})`;
+}
 function hasPrimaryMouseButton(buttons) {
   return buttons % 2 === 1;
 }
@@ -487,6 +529,7 @@ function useSwipeDismiss(options) {
     swipeThreshold: swipeThresholdProp,
     onDismiss,
     onProgress,
+    onCancel,
     onSwipeStart,
     onRelease,
     onSwipingChange,
@@ -513,18 +556,7 @@ function useSwipeDismiss(options) {
   }, [hasHorizontal, hasVertical]);
   const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
   const [isSwiping, setIsSwiping] = React.useState(false);
-  const [isRealSwipe, setIsRealSwipe] = React.useState(false);
   const [dragDismissed, setDragDismissed] = React.useState(false);
-  const [dragOffset, setDragOffset] = React.useState({
-    x: 0,
-    y: 0
-  });
-  const [initialTransform, setInitialTransform] = React.useState({
-    x: 0,
-    y: 0,
-    scale: 1
-  });
-  const [lockedDirection, setLockedDirection] = React.useState(null);
   const dragStartPosRef = React.useRef({
     x: 0,
     y: 0
@@ -546,6 +578,7 @@ function useSwipeDismiss(options) {
     x: 0,
     y: 0
   });
+  const lockedDirectionRef = React.useRef(null);
   const isFirstPointerMoveRef = React.useRef(false);
   const pendingSwipeRef = React.useRef(false);
   const pendingSwipeStartPosRef = React.useRef(null);
@@ -565,6 +598,7 @@ function useSwipeDismiss(options) {
   });
   const lastProgressDetailsRef = React.useRef(null);
   const isSwipingRef = React.useRef(false);
+  const dragStyleSnapshotRef = React.useRef(null);
   const setSwiping = useStableCallback(nextSwiping => {
     if (isSwipingRef.current === nextSwiping) {
       return;
@@ -610,6 +644,35 @@ function useSwipeDismiss(options) {
     }
     onProgress?.(nextProgress, details);
   });
+  const syncDragStyles = useStableCallback(swiping => {
+    const element = elementRef.current;
+    if (!trackDrag || !element) {
+      if (!swiping) {
+        dragStyleSnapshotRef.current = null;
+      }
+      return;
+    }
+    const style = element.style;
+    const dragStyleSnapshot = dragStyleSnapshotRef.current;
+    if (swiping) {
+      if (!dragStyleSnapshot) {
+        dragStyleSnapshotRef.current = [style.transition, style.transform];
+      }
+      style.transition = 'none';
+    } else if (dragStyleSnapshot) {
+      [style.transition, style.transform] = dragStyleSnapshot;
+      dragStyleSnapshotRef.current = null;
+    }
+    const dragOffset = dragOffsetRef.current;
+    const initialTransform = initialTransformRef.current;
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+    if (swiping) {
+      style.transform = getDragTransform(dragOffset, initialTransform.scale);
+    }
+    style.setProperty(movementCssVars.x, `${deltaX}px`);
+    style.setProperty(movementCssVars.y, `${deltaY}px`);
+  });
   function recordDragSample(offset, timeStamp) {
     if (timeStamp === null) {
       return;
@@ -631,18 +694,7 @@ function useSwipeDismiss(options) {
   const reset = React.useCallback(() => {
     setCurrentSwipeDirection(undefined);
     setSwiping(false);
-    setIsRealSwipe(false);
     setDragDismissed(false);
-    setDragOffset({
-      x: 0,
-      y: 0
-    });
-    setInitialTransform({
-      x: 0,
-      y: 0,
-      scale: 1
-    });
-    setLockedDirection(null);
     updateSwipeProgress(0);
     swipeThresholdRef.current = swipeThresholdDefault;
     dragStartPosRef.current = {
@@ -665,6 +717,7 @@ function useSwipeDismiss(options) {
       x: 0,
       y: 0
     };
+    lockedDirectionRef.current = null;
     isFirstPointerMoveRef.current = false;
     lastMovePosRef.current = null;
     pendingSwipeRef.current = false;
@@ -682,7 +735,8 @@ function useSwipeDismiss(options) {
       y: 0
     };
     lastProgressDetailsRef.current = null;
-  }, [setSwiping, swipeThresholdDefault, updateSwipeProgress]);
+    syncDragStyles(false);
+  }, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
   React.useEffect(() => {
     if (typeof swipeThresholdProp !== 'function') {
       swipeThresholdRef.current = swipeThresholdDefault;
@@ -764,11 +818,6 @@ function useSwipeDismiss(options) {
         x: transform.x,
         y: transform.y
       };
-      setInitialTransform(transform);
-      setDragOffset({
-        x: transform.x,
-        y: transform.y
-      });
       recordDragSample({
         x: transform.x,
         y: transform.y
@@ -779,10 +828,10 @@ function useSwipeDismiss(options) {
     }
     onSwipeStart?.(event.nativeEvent);
     setSwiping(true);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
+    lockedDirectionRef.current = null;
     isFirstPointerMoveRef.current = true;
     updateSwipeProgress(0);
+    syncDragStyles(true);
     return true;
   }
   function resetPendingSwipeState() {
@@ -800,19 +849,15 @@ function useSwipeDismiss(options) {
       return;
     }
     setSwiping(false);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
-    const resolvedInitialTransform = trackDrag ? initialTransform : initialTransformRef.current;
+    lockedDirectionRef.current = null;
+    const resolvedInitialTransform = initialTransformRef.current;
     dragOffsetRef.current = {
       x: resolvedInitialTransform.x,
       y: resolvedInitialTransform.y
     };
-    setDragOffset({
-      x: resolvedInitialTransform.x,
-      y: resolvedInitialTransform.y
-    });
     setCurrentSwipeDirection(undefined);
     sawPrimaryButtonsOnMoveRef.current = false;
+    syncDragStyles(false);
     const element = elementRef.current;
     if (element) {
       safelyChangePointerCapture(element, event.pointerId, 'releasePointerCapture');
@@ -822,6 +867,7 @@ function useSwipeDismiss(options) {
       deltaY: 0,
       direction: undefined
     });
+    onCancel?.(event.nativeEvent);
   }
   function applyDirectionalDamping(deltaX, deltaY) {
     const exponent = value => value >= 0 ? value ** 0.5 : -(Math.abs(value) ** 0.5);
@@ -942,17 +988,12 @@ function useSwipeDismiss(options) {
     const deltaY = clientY - dragStartPosRef.current.y;
     const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
     const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
-    if (!isRealSwipe) {
+    let lockedDirection = lockedDirectionRef.current;
+    if (lockedDirection === null && hasHorizontal && hasVertical) {
       const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       if (movementDistance >= MIN_DRAG_THRESHOLD) {
-        setIsRealSwipe(true);
-        if (lockedDirection === null) {
-          if (hasHorizontal && hasVertical) {
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
-          }
-        }
+        lockedDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'horizontal' : 'vertical';
+        lockedDirectionRef.current = lockedDirection;
       }
     }
     let candidate;
@@ -1017,12 +1058,7 @@ function useSwipeDismiss(options) {
       x: newOffsetX,
       y: newOffsetY
     };
-    if (trackDrag) {
-      setDragOffset({
-        x: newOffsetX,
-        y: newOffsetY
-      });
-    }
+    syncDragStyles(true);
     recordDragSample({
       x: newOffsetX,
       y: newOffsetY
@@ -1064,91 +1100,6 @@ function useSwipeDismiss(options) {
       direction: swipeDirectionDetails
     });
   }
-  const handleMove = useStableCallback(event => {
-    const currentPos = getPrimaryPointerPosition(event);
-    if (!currentPos) {
-      return;
-    }
-    if (!('touches' in event)) {
-      const hasPrimaryButton = hasPrimaryMouseButton(event.buttons);
-      if (hasPrimaryButton) {
-        sawPrimaryButtonsOnMoveRef.current = true;
-      }
-
-      // Cancel the swipe if a non-primary button takes over the interaction.
-      // This handles cases where a right-click interrupts dragging.
-      const lostPrimaryButtonDuringSwipe = event.buttons === 0 && sawPrimaryButtonsOnMoveRef.current;
-      if (event.buttons !== 0 && !hasPrimaryButton || lostPrimaryButtonDuringSwipe) {
-        cancelSwipeInteraction(event);
-        return;
-      }
-    }
-    if (!isSwiping && pendingSwipeRef.current) {
-      if (!isTouchLikeEvent(event) && (event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
-        resetPendingSwipeState();
-        return;
-      }
-      const allowedToStart = canStart ? canStart(currentPos, {
-        nativeEvent: event.nativeEvent,
-        direction: primaryDirection
-      }) : true;
-      if (allowedToStart) {
-        const pendingStartPos = pendingSwipeStartPosRef.current;
-        let ignoreScrollableOnStart = false;
-        if (isTouchLikeEvent(event)) {
-          const element = elementRef.current;
-          if (pendingStartPos && element) {
-            const target = getTargetAtPoint(currentPos, event.nativeEvent);
-            const doc = ownerDocument(element);
-            const body = doc.body;
-            const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
-            if (scrollTarget && (contains(element, scrollTarget) || contains(scrollTarget, element))) {
-              const deltaX = currentPos.x - pendingStartPos.x;
-              const deltaY = currentPos.y - pendingStartPos.y;
-              const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
-              if (canSwipeFromEdge === false) {
-                return;
-              }
-              if (canSwipeFromEdge === true) {
-                ignoreScrollableOnStart = true;
-              }
-            }
-          }
-        }
-        const started = startSwipeAtPosition(event, currentPos, {
-          ignoreScrollableTarget: ignoreScrollableOnStart,
-          ignoreScrollableAncestors: ignoreScrollableOnStart
-        });
-        if (started) {
-          if (pendingStartPos && ignoreScrollableOnStart) {
-            // Preserve displacement between touchstart and the move that activates swipe from
-            // a scroll-edge so quick flicks can dismiss.
-            clearPendingSwipeStartState();
-            dragStartPosRef.current = pendingStartPos;
-            swipeCancelBaselineRef.current = pendingStartPos;
-            lastMovePosRef.current = pendingStartPos;
-            isFirstPointerMoveRef.current = false;
-          } else {
-            // Start from the current in-bounds position without dropping follow-up move
-            // displacement; this avoids jumps when entering from outside the element while
-            // keeping swipe tracking responsive on the next move.
-            clearPendingSwipeStartState();
-            swipeFromScrollableRef.current = false;
-          }
-        }
-      }
-    }
-    const previousPos = lastMovePosRef.current;
-    const movement = previousPos === null ? {
-      x: 0,
-      y: 0
-    } : {
-      x: currentPos.x - previousPos.x,
-      y: currentPos.y - previousPos.y
-    };
-    lastMovePosRef.current = currentPos;
-    handleMoveCore(event, currentPos, movement);
-  });
   const handleEnd = useStableCallback(event => {
     if (!enabled) {
       return;
@@ -1160,7 +1111,7 @@ function useSwipeDismiss(options) {
     const progressDetails = {
       deltaX: releaseDeltaX,
       deltaY: releaseDeltaY,
-      direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current
+      direction: intendedSwipeDirectionRef.current
     };
     if (!isSwipingRef.current) {
       resetPendingSwipeState();
@@ -1168,8 +1119,7 @@ function useSwipeDismiss(options) {
       return;
     }
     setSwiping(false);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
+    lockedDirectionRef.current = null;
     resetPendingSwipeState();
     sawPrimaryButtonsOnMoveRef.current = false;
     const element = elementRef.current;
@@ -1210,7 +1160,7 @@ function useSwipeDismiss(options) {
     }
     const releaseDecision = onRelease?.({
       event: event.nativeEvent,
-      direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current,
+      direction: intendedSwipeDirectionRef.current,
       deltaX,
       deltaY,
       velocityX,
@@ -1224,11 +1174,8 @@ function useSwipeDismiss(options) {
         x: resolvedInitialTransform.x,
         y: resolvedInitialTransform.y
       };
-      setDragOffset({
-        x: resolvedInitialTransform.x,
-        y: resolvedInitialTransform.y
-      });
       setCurrentSwipeDirection(undefined);
+      syncDragStyles(false);
       updateSwipeProgress(0, progressDetails);
       return;
     }
@@ -1236,7 +1183,7 @@ function useSwipeDismiss(options) {
     let dismissDirection;
     if (hasReleaseDecision) {
       shouldClose = releaseDecision;
-      dismissDirection = currentSwipeDirection ?? intendedSwipeDirectionRef.current ?? primaryDirection;
+      dismissDirection = intendedSwipeDirectionRef.current ?? primaryDirection;
     } else {
       for (const direction of directions) {
         switch (direction) {
@@ -1273,6 +1220,7 @@ function useSwipeDismiss(options) {
     if (shouldClose && dismissDirection) {
       setCurrentSwipeDirection(dismissDirection);
       setDragDismissed(true);
+      syncDragStyles(false);
       onDismiss?.(event.nativeEvent, {
         direction: dismissDirection
       });
@@ -1281,34 +1229,150 @@ function useSwipeDismiss(options) {
         x: resolvedInitialTransform.x,
         y: resolvedInitialTransform.y
       };
-      setDragOffset({
-        x: resolvedInitialTransform.x,
-        y: resolvedInitialTransform.y
-      });
       setCurrentSwipeDirection(undefined);
+      syncDragStyles(false);
       updateSwipeProgress(0, progressDetails);
     }
   });
+  const handleMove = useStableCallback(event => {
+    const currentPos = getPrimaryPointerPosition(event);
+    if (!currentPos) {
+      return;
+    }
+    let endAfterMove = false;
+    if (!('touches' in event)) {
+      const hasPrimaryButton = hasPrimaryMouseButton(event.buttons);
+      if (hasPrimaryButton) {
+        sawPrimaryButtonsOnMoveRef.current = true;
+      }
+
+      // Cancel the swipe if a non-primary button takes over the interaction.
+      // This handles cases where a right-click interrupts dragging.
+      if (event.buttons !== 0 && !hasPrimaryButton) {
+        cancelSwipeInteraction(event);
+        return;
+      }
+
+      // A `buttons: 0` pointermove means the primary button was already released, so the gesture is
+      // over even if no pointerup reached us. On fast trackpad flicks this trailing move is
+      // dispatched just before pointerup; treat it as the release (mirroring touchend) instead of
+      // cancelling and snapping the element back.
+      if (event.buttons === 0 && sawPrimaryButtonsOnMoveRef.current) {
+        if (!isSwipingRef.current) {
+          // The gesture never activated — discard it.
+          handleEnd(event);
+          return;
+        }
+        // This release move can itself carry the threshold-crossing displacement (and the peak
+        // release velocity), so let it flow through `handleMoveCore` below to update the drag
+        // offset / velocity sample, then commit the release afterwards.
+        endAfterMove = true;
+      }
+    }
+    if (!isSwiping && pendingSwipeRef.current) {
+      if (!isTouchLikeEvent(event) && (event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
+        resetPendingSwipeState();
+        return;
+      }
+      const allowedToStart = canStart ? canStart(currentPos, {
+        nativeEvent: event.nativeEvent,
+        direction: primaryDirection
+      }) : true;
+      if (allowedToStart) {
+        const pendingStartPos = pendingSwipeStartPosRef.current;
+        let ignoreScrollableOnStart = false;
+        if (isTouchLikeEvent(event)) {
+          const element = elementRef.current;
+          if (pendingStartPos && element) {
+            const target = getTargetAtPoint(currentPos, event.nativeEvent);
+            const doc = ownerDocument(element);
+            const body = doc.body;
+            const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
+            if (scrollTarget && (contains(element, scrollTarget) || contains(scrollTarget, element))) {
+              const deltaX = currentPos.x - pendingStartPos.x;
+              const deltaY = currentPos.y - pendingStartPos.y;
+              const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
+              if (canSwipeFromEdge === false) {
+                return;
+              }
+              if (canSwipeFromEdge === true) {
+                ignoreScrollableOnStart = true;
+              }
+            }
+          }
+        }
+        const started = startSwipeAtPosition(event, currentPos, {
+          ignoreScrollableTarget: ignoreScrollableOnStart,
+          ignoreScrollableAncestors: ignoreScrollableOnStart
+        });
+        if (started) {
+          if (pendingStartPos && ignoreScrollableOnStart) {
+            // Preserve displacement between touchstart and the move that activates swipe from
+            // a scroll-edge so quick flicks can dismiss.
+            clearPendingSwipeStartState();
+            dragStartPosRef.current = pendingStartPos;
+            swipeCancelBaselineRef.current = pendingStartPos;
+            lastMovePosRef.current = pendingStartPos;
+            isFirstPointerMoveRef.current = false;
+          } else {
+            // Start from the current in-bounds position without dropping follow-up move
+            // displacement; this avoids jumps when entering from outside the element while
+            // keeping swipe tracking responsive on the next move.
+            clearPendingSwipeStartState();
+            swipeFromScrollableRef.current = false;
+          }
+        }
+      }
+    }
+    const previousPos = lastMovePosRef.current;
+    const movement = previousPos === null ? {
+      x: 0,
+      y: 0
+    } : {
+      x: currentPos.x - previousPos.x,
+      y: currentPos.y - previousPos.y
+    };
+    lastMovePosRef.current = currentPos;
+    handleMoveCore(event, currentPos, movement);
+
+    // `endAfterMove` is only set in the non-touch branch above; the `'touches'` guard re-narrows the
+    // event type for `handleEnd` after the shared move handling has run.
+    if (endAfterMove && !('touches' in event)) {
+      handleEnd(event);
+    }
+  });
+
+  // Feeds a native touchmove into the swipe pipeline. Used by consumers that claim the gesture
+  // in a capture-phase listener and stop it from reaching React's delegated touch handlers.
+  const moveNative = useStableCallback((nativeEvent, currentTarget) => {
+    handleMove({
+      touches: nativeEvent.touches,
+      currentTarget,
+      nativeEvent,
+      defaultPrevented: nativeEvent.defaultPrevented,
+      timeStamp: nativeEvent.timeStamp
+    });
+  });
   const getDragStyles = React.useCallback(() => {
-    const resolvedDragOffset = trackDrag ? dragOffset : dragOffsetRef.current;
-    const resolvedInitialTransform = trackDrag ? initialTransform : initialTransformRef.current;
-    if (!isSwiping && resolvedDragOffset.x === resolvedInitialTransform.x && resolvedDragOffset.y === resolvedInitialTransform.y && !dragDismissed) {
+    const dragOffset = dragOffsetRef.current;
+    const initialTransform = initialTransformRef.current;
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+    if (!isSwiping && deltaX === 0 && deltaY === 0 && !dragDismissed) {
       return {
         [movementCssVars.x]: '0px',
         [movementCssVars.y]: '0px'
       };
     }
-    const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
-    const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
     return {
       transition: isSwiping ? 'none' : undefined,
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
-      transform: isSwiping ? `translateX(${resolvedDragOffset.x}px) translateY(${resolvedDragOffset.y}px) scale(${resolvedInitialTransform.scale})` : undefined,
+      transform: isSwiping ? getDragTransform(dragOffset, initialTransform.scale) : undefined,
       [movementCssVars.x]: `${deltaX}px`,
       [movementCssVars.y]: `${deltaY}px`
     };
-  }, [dragDismissed, dragOffset, initialTransform, isSwiping, movementCssVars, trackDrag]);
+  }, [dragDismissed, isSwiping, movementCssVars]);
   const getPointerProps = React.useCallback(() => {
     if (!enabled) {
       return {};
@@ -1337,6 +1401,7 @@ function useSwipeDismiss(options) {
     dragDismissed,
     getPointerProps,
     getTouchProps,
+    moveNative,
     getDragStyles,
     reset
   };
@@ -1417,8 +1482,9 @@ function resolveTouchAction(direction) {
  */
 const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     disabled = false,
     swipeDirection: swipeDirectionProp,
     ...elementProps
@@ -1446,13 +1512,13 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   const swipeAreaId = useBaseUiId(componentProps.id);
   const registerTrigger = useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
-  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
-  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
-  const enabled = !disabled && (!open || swipeActive);
   const resetDragDelta = useStableCallback(() => {
     dragDeltaRef.current.x = 0;
     dragDeltaRef.current.y = 0;
   });
+  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
+  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
+  const enabled = !disabled && (!open || swipeActive);
   function disableDismissForSwipe() {
     releaseDismissTimeout.clear();
     store.context.outsidePressEnabledRef.current = false;
@@ -1592,6 +1658,18 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
     }
     store.setOpen(false, createChangeEventDetails(swipe, event, swipeAreaRef.current ?? undefined));
   }
+  function resetSwipeInteractionState() {
+    swipeStartEventRef.current = null;
+    openedBySwipeRef.current = false;
+    closedOffsetRef.current = null;
+    setSwipeActive(false);
+  }
+  function finishSwipeInteraction() {
+    resetSwipeInteractionState();
+    enableDismissAfterRelease();
+    resetDragDelta();
+    clearSwipeStyles();
+  }
   const swipe$1 = useSwipeDismiss({
     enabled,
     directions: [resolvedSwipeDirection],
@@ -1650,15 +1728,10 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       } else if (openedBySwipeRef.current) {
         closeDrawer(event);
       }
-      swipeStartEventRef.current = null;
-      openedBySwipeRef.current = false;
-      setSwipeActive(false);
-      closedOffsetRef.current = null;
-      enableDismissAfterRelease();
-      resetDragDelta();
-      clearSwipeStyles();
+      finishSwipeInteraction();
       return false;
-    }
+    },
+    onCancel: finishSwipeInteraction
   });
   const swipePointerProps = swipe$1.getPointerProps();
   const swipeTouchProps = swipe$1.getTouchProps();
@@ -1668,10 +1741,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
-      setSwipeActive(false);
-      openedBySwipeRef.current = false;
-      swipeStartEventRef.current = null;
-      closedOffsetRef.current = null;
+      resetSwipeInteractionState();
     }
   }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
   React.useEffect(() => {
@@ -1701,6 +1771,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
           return;
         }
         swipePointerProps.onPointerDown?.(event);
+
         // Prevent native text selection/drag gestures from competing with swipe-open dragging.
         if (event.cancelable) {
           event.preventDefault();
@@ -1731,6 +1802,12 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
 });
 if (process.env.NODE_ENV !== "production") DrawerSwipeArea.displayName = "DrawerSwipeArea";
 
+const DrawerVirtualKeyboardContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerVirtualKeyboardContext.displayName = "DrawerVirtualKeyboardContext";
+function useDrawerVirtualKeyboardContext() {
+  return React.useContext(DrawerVirtualKeyboardContext);
+}
+
 const MIN_SWIPE_THRESHOLD = 10;
 const FAST_SWIPE_VELOCITY = 0.5;
 const SNAP_VELOCITY_THRESHOLD = 0.5;
@@ -1751,14 +1828,17 @@ const DRAWER_CONTENT_SELECTOR = `[${DRAWER_CONTENT_ATTRIBUTE}]`;
  */
 const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(props, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     children,
     ...elementProps
   } = props;
   const {
     store
   } = useDialogRootContext();
+  const popupRef = store.context.popupRef;
+  const backdropRef = store.context.backdropRef;
   const {
     swipeDirection,
     notifyParentSwipingChange,
@@ -1767,17 +1847,6 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     snapToSequentialPoints
   } = useDrawerRootContext();
   const providerContext = useDrawerProviderContext();
-  const visualStateStore = providerContext?.visualStateStore;
-  const open = store.useState('open');
-  const mounted = store.useState('mounted');
-  const nested = store.useState('nested');
-  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
-  const viewportElement = store.useState('viewportElement');
-  const popupElementState = store.useState('popupElement');
-  const nestedDrawerOpen = nestedOpenDialogCount > 0;
-  const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
-  const isVerticalScrollAxis = scrollAxis === 'vertical';
-  const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
   const {
     snapPoints,
     resolvedSnapPoints,
@@ -1786,15 +1855,28 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     setActiveSnapPoint,
     popupHeight
   } = useDrawerSnapPoints();
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const nested = store.useState('nested');
+  const nestedOpenDrawerCount = store.useState('nestedOpenDrawerCount');
+  const viewportElement = store.useState('viewportElement');
+  const popupElementState = store.useState('popupElement');
+  const visualStateStore = providerContext?.visualStateStore;
+  const nestedDrawerOpen = nestedOpenDrawerCount > 0;
+  const scrollAxis = swipeDirection === 'left' || swipeDirection === 'right' ? 'horizontal' : 'vertical';
+  const isVerticalScrollAxis = scrollAxis === 'vertical';
+  const crossScrollAxis = isVerticalScrollAxis ? 'horizontal' : 'vertical';
   const [swipeRelease, setSwipeRelease] = React.useState(null);
   const pendingSwipeCloseSnapPointRef = React.useRef(undefined);
   const resetSwipeRef = React.useRef(null);
   const controlledDismissFrame = useAnimationFrame();
+  const swipingRef = React.useRef(false);
   const nestedSwipeActiveRef = React.useRef(false);
   const lastPointerTypeRef = React.useRef('');
   const ignoreNextTouchStartFromPenRef = React.useRef(false);
   const ignoreTouchSwipeRef = React.useRef(false);
   const touchScrollStateRef = React.useRef(null);
+  const virtualKeyboard = useDrawerVirtualKeyboardContext();
   const snapPointRange = React.useMemo(() => {
     if (!snapPoints || snapPoints.length < 2) {
       return null;
@@ -1838,13 +1920,20 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     return [swipeDirection];
   }, [snapPoints, swipeDirection]);
   const setSwipeDismissed = useStableCallback(dismissed => {
-    setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
+    setSwipeDismissedElements(popupRef.current, backdropRef.current, dismissed);
   });
   const clearSwipeRelease = useStableCallback(() => {
     setSwipeDismissed(false);
-    store.context.popupRef.current?.removeAttribute(TransitionStatusDataAttributes.endingStyle);
+    popupRef.current?.removeAttribute(TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = useStableCallback(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
@@ -1852,15 +1941,18 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
   }) => {
     const isActive = open && !nested && shouldTrackProgress;
     const swipeProgress = isActive ? resolvedProgress : 0;
+    const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
     if (notifyParent && notifyParentSwipeProgressChange) {
-      const nestedSwipeProgress = open && shouldTrackProgress ? resolvedProgress : 0;
       notifyParentSwipeProgressChange(nestedSwipeProgress);
+      if (nestedSwipeProgress <= 0) {
+        finishNestedSwipe();
+      }
     }
     visualStateStore?.set({
       swipeProgress,
       frontmostHeight: swipeProgress > 0 ? frontmostHeight : 0
     });
-    const backdropElement = store.context.backdropRef.current;
+    const backdropElement = backdropRef.current;
     if (!backdropElement) {
       return;
     }
@@ -1955,7 +2047,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       if ('touches' in event || 'pointerType' in event && event.pointerType === 'touch') {
         return;
       }
-      const popupElement = store.context.popupRef.current;
+      const popupElement = popupRef.current;
       if (!popupElement) {
         return;
       }
@@ -1972,10 +2064,10 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
       selection.removeAllRanges();
     },
     onSwipingChange(swiping) {
+      swipingRef.current = swiping;
       setBackdropSwipingAttribute(store.context.backdropRef.current, swiping);
-      if (!swiping) {
-        nestedSwipeActiveRef.current = false;
-        notifyParentSwipingChange?.(false);
+      if (!swiping && !notifyParentSwipeProgressChange) {
+        finishNestedSwipe();
       }
     },
     swipeThreshold({
@@ -2006,9 +2098,16 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     },
     onProgress(progress, details) {
       updateNestedSwipeActive(details);
+      const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0);
+      if (swipingRef.current && swipeDirection === 'down' && hasSnapPoints && details && Number.isFinite(details.deltaY)) {
+        const popupElement = store.context.popupRef.current;
+        if (popupElement) {
+          popupElement.style.removeProperty('transform');
+          popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementY, `${getSnapPointSwipeMovement(activeSnapPointOffset ?? 0, details.deltaY)}px`);
+        }
+      }
       const currentDirection = details?.direction ?? swipe$1.swipeDirection;
       const isDismissSwipe = currentDirection === undefined || currentDirection === swipeDirection;
-      const hasSnapPoints = Boolean(snapPoints && snapPoints.length > 0);
       const isVerticalSwipe = swipeDirection === 'down' || swipeDirection === 'up';
       const shouldTrackProgress = hasSnapPoints && isVerticalSwipe || !hasSnapPoints || swipeDirection === 'left' || swipeDirection === 'right' || isDismissSwipe;
       let resolvedProgress = progress;
@@ -2057,7 +2156,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(TransitionStatusDataAttributes.endingStyle, '');
@@ -2264,7 +2363,10 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
   });
   const swipePointerProps = swipe$1.getPointerProps();
   const swipeTouchProps = swipe$1.getTouchProps();
-  const resetSwipe = swipe$1.reset;
+  const {
+    moveNative: moveSwipeNative,
+    reset: resetSwipe
+  } = swipe$1;
   resetSwipeRef.current = resetSwipe;
   React.useEffect(() => {
     const rootElement = viewportElement ?? popupElementState;
@@ -2275,6 +2377,11 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     const doc = ownerDocument(resolvedRootElement);
     const win = getWindow(doc);
     function handleNativeTouchMove(event) {
+      // The virtual keyboard provider observes the move to tell a tap apart from a drag.
+      // It must run even when the swipe gesture below claims the event with
+      // `stopPropagation()`, which would otherwise prevent React's delegated handlers
+      // (and the provider) from ever seeing the move.
+      virtualKeyboard?.onTouchMove(event);
       if (ignoreTouchSwipeRef.current) {
         return;
       }
@@ -2311,6 +2418,10 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         if (event.cancelable) {
           event.preventDefault();
         }
+        // Claim the gesture before React's delegated touch handlers see it; dispatching the
+        // move through React re-rasterizes the popup content on every frame.
+        event.stopPropagation();
+        moveSwipeNative(event, resolvedRootElement);
         updateTouchScrollPosition(touchState, touch);
         return;
       }
@@ -2321,6 +2432,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         if (event.cancelable) {
           event.preventDefault();
         }
+        event.stopPropagation();
         updateTouchScrollPosition(touchState, touch);
         return;
       }
@@ -2340,18 +2452,17 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
           event.preventDefault();
         }
       }
+      if (touchState.allowSwipe === true) {
+        event.stopPropagation();
+        moveSwipeNative(event, resolvedRootElement);
+      }
       updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return addEventListener(doc, 'touchmove', handleNativeTouchMove, {
       passive: false,
       capture: true
     });
-    return () => {
-      doc.removeEventListener('touchmove', handleNativeTouchMove, {
-        capture: true
-      });
-    };
-  }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, viewportElement]);
+  }, [mounted, nestedDrawerOpen, open, popupElementState, isVerticalScrollAxis, scrollAxis, swipeDirection, moveSwipeNative, viewportElement, virtualKeyboard]);
   React.useEffect(() => {
     if (!snapPointRange || swipe$1.swiping) {
       return;
@@ -2381,23 +2492,30 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
     }
   }, [clearSwipeRelease, open, resetSwipe]);
   React.useEffect(() => {
+    const backdropElement = backdropRef.current;
     return () => {
       visualStateStore?.set({
         swipeProgress: 0,
         frontmostHeight: 0
       });
-      setBackdropSwipingAttribute(store.context.backdropRef.current, false);
-      notifyParentSwipingChange?.(false);
+      setBackdropSwipingAttribute(backdropElement, false);
+      // `data-swiping` is set on whichever backdrop is current when a swipe starts, which can
+      // differ from the captured element if the backdrop mounted late or changed identity.
+      // Reading the live ref here is intentional so the current backdrop is cleared too.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const currentBackdrop = backdropRef.current;
+      if (currentBackdrop !== backdropElement) {
+        setBackdropSwipingAttribute(currentBackdrop, false);
+      }
+      finishNestedSwipe();
     };
-  }, [notifyParentSwipingChange, store, visualStateStore]);
+  }, [backdropRef, finishNestedSwipe, visualStateStore]);
   const swipeProviderValue = React.useMemo(() => ({
     swiping: swipe$1.swiping,
     getDragStyles: swipe$1.getDragStyles,
     swipeStrength: swipeRelease ?? null,
-    setSwipeDismissed(dismissed) {
-      setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
-    }
-  }), [store, swipe$1.getDragStyles, swipe$1.swiping, swipeRelease]);
+    setSwipeDismissed
+  }), [setSwipeDismissed, swipe$1.getDragStyles, swipe$1.swiping, swipeRelease]);
   function resetTouchTrackingState() {
     ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
@@ -2407,6 +2525,7 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
   return /*#__PURE__*/jsx(DialogViewport, {
     ref: forwardedRef,
     className: className,
+    style: style,
     render: render,
     ...mergeProps(elementProps, {
       onPointerDown(event) {
@@ -2473,16 +2592,23 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         }
         const doc = ownerDocument(event.currentTarget);
         const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
+        const rootElement = viewportElement ?? popupElementState;
+        const eventTarget = getTarget(event.nativeEvent);
+        const target = isElement(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !contains(rootElement, target)) {
+          ignoreTouchSwipeRef.current = true;
+          touchScrollStateRef.current = null;
+          return;
+        }
+        virtualKeyboard?.onTouchStart(event);
         ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
         if (ignoreTouchSwipeRef.current) {
           touchScrollStateRef.current = null;
           return;
         }
-        const rootElement = viewportElement ?? popupElementState;
-        const target = isElement(event.target) ? event.target : null;
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && contains(rootElement, target)) {
+        if (rootElement && target) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -2503,27 +2629,13 @@ const DrawerViewport = /*#__PURE__*/React.forwardRef(function DrawerViewport(pro
         };
         swipeTouchProps.onTouchStart?.(event);
       },
-      onTouchMove(event) {
-        if (ignoreTouchSwipeRef.current) {
-          return;
-        }
-        if (isReactTouchEventOnRangeInput(event)) {
-          return;
-        }
-        const touchState = touchScrollStateRef.current;
-        if (touchState?.preserveNativeCrossAxisScroll) {
-          return;
-        }
-        if (touchState?.allowSwipe === false || touchState?.scrollTarget != null && !touchState.allowSwipe) {
-          return;
-        }
-        swipeTouchProps.onTouchMove?.(event);
-      },
       onTouchEnd(event) {
+        virtualKeyboard?.onTouchEnd(event);
         resetTouchTrackingState();
         swipeTouchProps.onTouchEnd?.(event);
       },
       onTouchCancel(event) {
+        virtualKeyboard?.onTouchCancel();
         resetTouchTrackingState();
         swipeTouchProps.onTouchCancel?.(event);
       },
@@ -2582,114 +2694,582 @@ function hasExpandedSelectionWithinTarget(selection, target) {
   return selection.containsNode(target, true) || contains(target, anchorElement) || contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
-  const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && contains(rootElement, activeElement));
-  if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
+  const activeEl = activeElement(doc);
+  const activeElementWithinRoot = Boolean(activeEl && contains(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
     const {
       selectionStart,
       selectionEnd
-    } = activeElement;
+    } = activeEl;
     if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
       return true;
     }
-  }
-  const selection = doc.getSelection?.();
-  if (!selection || selection.isCollapsed) {
-    return false;
-  }
-  return hasExpandedSelectionWithinTarget(selection, rootElement);
-}
-function isEventOnRangeInput(event, win) {
-  const composedPath = event.composedPath();
-  if (composedPath) {
-    return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
-  }
-  return isRangeInput(event.target, win);
-}
-function isReactTouchEventOnRangeInput(event) {
-  return isEventOnRangeInput(event.nativeEvent, getWindow(event.currentTarget));
-}
-function updateTouchScrollPosition(touchState, touch) {
-  touchState.lastX = touch.clientX;
-  touchState.lastY = touch.clientY;
+  }
+  const selection = doc.getSelection?.();
+  if (!selection || selection.isCollapsed) {
+    return false;
+  }
+  return hasExpandedSelectionWithinTarget(selection, rootElement);
+}
+function isEventOnRangeInput(event, win) {
+  const composedPath = event.composedPath();
+  if (composedPath) {
+    return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
+  }
+  return isRangeInput(getTarget(event), win);
+}
+function isReactTouchEventOnRangeInput(event) {
+  return isEventOnRangeInput(event.nativeEvent, getWindow(event.currentTarget));
+}
+function updateTouchScrollPosition(touchState, touch) {
+  touchState.lastX = touch.clientX;
+  touchState.lastY = touch.clientY;
+}
+function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
+  if (touchState.preserveNativeCrossAxisScroll) {
+    return true;
+  }
+  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
+    return false;
+  }
+  const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
+  const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
+  const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
+  const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
+  if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) {
+    return false;
+  }
+  touchState.preserveNativeCrossAxisScroll = true;
+  return true;
+}
+function hasScrollableContentOnAxis(scrollTarget, axis) {
+  return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
+}
+function getScrollMetrics(scrollTarget, axis) {
+  if (axis === 'vertical') {
+    const max = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
+    return {
+      offset: scrollTarget.scrollTop,
+      max
+    };
+  }
+  const max = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
+  return {
+    offset: scrollTarget.scrollLeft,
+    max
+  };
+}
+function isAtSwipeStartEdge(scrollTarget, axis, direction) {
+  const {
+    offset,
+    max
+  } = getScrollMetrics(scrollTarget, axis);
+  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
+  if (dismissFromStartEdge === null) {
+    return false;
+  }
+  return dismissFromStartEdge ? offset <= 0 : offset >= max;
+}
+function canSwipeFromScrollEdgeOnMove(scrollTarget, axis, direction, delta) {
+  const {
+    offset,
+    max
+  } = getScrollMetrics(scrollTarget, axis);
+  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
+  if (dismissFromStartEdge === null) {
+    return false;
+  }
+  const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
+  if (!movingTowardDismiss) {
+    return false;
+  }
+  return dismissFromStartEdge ? offset <= 0 : offset >= max;
+}
+function shouldDismissFromStartEdge(direction, axis) {
+  if (axis === 'vertical') {
+    if (direction === 'down') {
+      return true;
+    }
+    if (direction === 'up') {
+      return false;
+    }
+    return null;
+  }
+  if (direction === 'right') {
+    return true;
+  }
+  if (direction === 'left') {
+    return false;
+  }
+  return null;
+}
+
+let DrawerViewportCssVars = /*#__PURE__*/function (DrawerViewportCssVars) {
+  /**
+   * The software keyboard inset, measured from the bottom edge of the layout viewport.
+   * Present only when the drawer is wrapped in `Drawer.VirtualKeyboardProvider`.
+   * @type {CSS length}
+   */
+  DrawerViewportCssVars["keyboardInset"] = "--drawer-keyboard-inset";
+  return DrawerViewportCssVars;
+}({});
+
+const KEYBOARD_RESIZE_THRESHOLD = 60;
+const KEYBOARD_VISIBILITY_MARGIN = 16;
+// Extra breathing room (px) added below the focused field, on top of its measured
+// keyboard overlap, so the field can be scrolled clear of the keyboard instead of
+// ending up flush against it. Only applied when there is actual overlap.
+const KEYBOARD_SCROLL_SLACK = 48;
+const INPUT_TAP_MOVE_THRESHOLD = 10;
+const INPUT_TAP_HIT_SLOP = 16;
+const KEYBOARD_INPUT_TYPES = new Set(['email', 'number', 'password', 'search', 'tel', 'text', 'url']);
+
+// Snapshot of a scroll container's relevant styles taken before keyboard slack is
+// applied. The string fields are the exact inline values to restore on cleanup;
+// the parsed numbers are the computed baselines that slack is added on top of.
+
+// Returned by the point-based resolver when the lift point lands on another
+// interactive/label element. It signals that the tap was intentionally rejected, so the
+// caller must NOT fall back to the touchstart target (`touchend.target` stays at the
+// touchstart node on mobile) — doing so would steal a tap meant for that element.
+const KEYBOARD_TAP_BLOCKED = Symbol('KeyboardTapBlocked');
+
+/**
+ * Provides keyboard-aware focus and scroll handling for bottom-sheet drawers with form fields.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+function DrawerVirtualKeyboardProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  const mounted = store.useState('mounted');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const viewportElement = store.useState('viewportElement');
+
+  // The provider requires a `<Drawer.Viewport>` to act as the measurement and containment
+  // root and to host the keyboard inset variable; `<Drawer.Popup>` already warns when the
+  // viewport is missing, so there is no need to fall back to the popup element here.
+  const rootElement = viewportElement;
+  const nestedDrawerOpen = nestedOpenDialogCount > 0;
+  const pendingKeyboardFocusMovedRef = React.useRef(false);
+  const keyboardTouchStartRef = React.useRef(null);
+  const focusedKeyboardTargetRef = React.useRef(null);
+  const keyboardScrollAdjustmentRef = React.useRef(null);
+  const keyboardFocusFrame = useAnimationFrame();
+  const restoreKeyboardScrollAdjustment = useStableCallback(() => {
+    const adjustment = keyboardScrollAdjustmentRef.current;
+    if (!adjustment) {
+      return;
+    }
+    adjustment.element.style.overflowAnchor = adjustment.overflowAnchor;
+    adjustment.element.style.paddingBottom = adjustment.paddingBottom;
+    adjustment.element.style.scrollPaddingBottom = adjustment.scrollPaddingBottom;
+    keyboardScrollAdjustmentRef.current = null;
+  });
+  const setKeyboardScrollSlack = useStableCallback((element, slack) => {
+    const roundedSlack = Math.max(0, Math.ceil(slack));
+    let adjustment = keyboardScrollAdjustmentRef.current;
+    if (adjustment && !adjustment.element.isConnected) {
+      restoreKeyboardScrollAdjustment();
+      adjustment = null;
+    }
+    if (roundedSlack === 0) {
+      restoreKeyboardScrollAdjustment();
+      return;
+    }
+    if (adjustment && adjustment.element !== element) {
+      restoreKeyboardScrollAdjustment();
+      adjustment = null;
+    }
+    if (!adjustment) {
+      const styles = getComputedStyle(element);
+      adjustment = {
+        element,
+        overflowAnchor: element.style.overflowAnchor,
+        paddingBottom: element.style.paddingBottom,
+        scrollPaddingBottom: element.style.scrollPaddingBottom,
+        computedPaddingBottom: Number.parseFloat(styles.paddingBottom) || 0,
+        computedScrollPaddingBottom: Number.parseFloat(styles.scrollPaddingBottom) || 0
+      };
+      keyboardScrollAdjustmentRef.current = adjustment;
+    }
+    element.style.overflowAnchor = 'none';
+    element.style.paddingBottom = `${adjustment.computedPaddingBottom + roundedSlack}px`;
+    element.style.scrollPaddingBottom = `${adjustment.computedScrollPaddingBottom + KEYBOARD_VISIBILITY_MARGIN}px`;
+  });
+  const animateKeyboardScroll = useStableCallback((element, scrollTop) => {
+    const win = getWindow(element);
+    const behavior = win.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ? 'auto' : 'smooth';
+    element.scrollTo({
+      top: scrollTop,
+      behavior
+    });
+  });
+  const resetTouchTrackingState = useStableCallback(() => {
+    pendingKeyboardFocusMovedRef.current = false;
+    keyboardTouchStartRef.current = null;
+  });
+  React.useEffect(() => {
+    if (!mounted || !open) {
+      focusedKeyboardTargetRef.current = null;
+      restoreKeyboardScrollAdjustment();
+      keyboardFocusFrame.cancel();
+      return undefined;
+    }
+    if (!rootElement) {
+      restoreKeyboardScrollAdjustment();
+      return undefined;
+    }
+    const doc = ownerDocument(rootElement);
+    const win = getWindow(rootElement);
+    const visualViewport = win.visualViewport;
+    const setDrawerKeyboardInset = inset => {
+      rootElement.style.setProperty(DrawerViewportCssVars.keyboardInset, `${Math.max(0, Math.ceil(inset))}px`);
+    };
+    const resetDrawerKeyboardInset = () => {
+      setDrawerKeyboardInset(0);
+    };
+    const clearFocusedKeyboardTarget = () => {
+      focusedKeyboardTargetRef.current = null;
+      resetDrawerKeyboardInset();
+      restoreKeyboardScrollAdjustment();
+      keyboardFocusFrame.cancel();
+    };
+    const alignFocusedKeyboardTarget = () => {
+      const target = focusedKeyboardTargetRef.current;
+      // If the focused field is removed from the DOM without firing `focusout` (e.g. it is
+      // conditionally rendered away), any applied scroll slack is restored here on the next
+      // focus/viewport event or when the drawer closes. This self-corrects rather than
+      // tracking each field's lifecycle.
+      if (nestedDrawerOpen || !target || !contains(rootElement, target)) {
+        resetDrawerKeyboardInset();
+        restoreKeyboardScrollAdjustment();
+        return;
+      }
+      const keyboardViewport = getKeyboardVisualViewport(win);
+      if (!keyboardViewport) {
+        resetDrawerKeyboardInset();
+        restoreKeyboardScrollAdjustment();
+        return;
+      }
+      setDrawerKeyboardInset(getDrawerKeyboardInset(win, keyboardViewport));
+      const scrollTarget = findKeyboardScrollTarget(target, rootElement);
+      if (!scrollTarget) {
+        restoreKeyboardScrollAdjustment();
+        return;
+      }
+      if (!scrollTarget.isConnected || !contains(rootElement, scrollTarget)) {
+        resetDrawerKeyboardInset();
+        restoreKeyboardScrollAdjustment();
+        return;
+      }
+      const scrollTargetRect = scrollTarget.getBoundingClientRect();
+      const clippedBottom = Math.min(scrollTargetRect.bottom, keyboardViewport.bottom);
+      const overlap = Math.max(0, scrollTargetRect.bottom - keyboardViewport.bottom);
+      setKeyboardScrollSlack(scrollTarget, overlap > 0 ? overlap + KEYBOARD_SCROLL_SLACK : 0);
+      const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
+      if (maxScrollTop <= 0) {
+        return;
+      }
+      const clippedTop = Math.max(scrollTargetRect.top, keyboardViewport.top);
+      const visibleTop = clippedTop + KEYBOARD_VISIBILITY_MARGIN;
+      const visibleBottom = clippedBottom - KEYBOARD_VISIBILITY_MARGIN;
+      if (visibleBottom <= visibleTop) {
+        return;
+      }
+      const targetRect = target.getBoundingClientRect();
+      const targetCenter = (targetRect.top + targetRect.bottom) / 2;
+      const visibleCenter = (visibleTop + visibleBottom) / 2;
+      const nextScrollTop = scrollTarget.scrollTop + targetCenter - visibleCenter;
+      animateKeyboardScroll(scrollTarget, clamp(nextScrollTop, 0, maxScrollTop));
+    };
+    const scheduleKeyboardFocusAlignment = () => {
+      keyboardFocusFrame.request(alignFocusedKeyboardTarget);
+    };
+    const captureFocusedKeyboardTarget = eventTarget => {
+      if (nestedDrawerOpen) {
+        return false;
+      }
+
+      // Resolve through the same path as taps so contentEditable hosts (and labelled
+      // controls) are normalized identically for the focus and touch paths.
+      const target = resolveKeyboardInputTarget(eventTarget);
+      if (!target || !contains(rootElement, target)) {
+        return false;
+      }
+      focusedKeyboardTargetRef.current = target;
+      return true;
+    };
+    const handleFocusIn = event => {
+      if (captureFocusedKeyboardTarget(getTarget(event))) {
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+    const handleFocusOut = event => {
+      if (captureFocusedKeyboardTarget(event.relatedTarget)) {
+        scheduleKeyboardFocusAlignment();
+        return;
+      }
+      clearFocusedKeyboardTarget();
+    };
+    const handleViewportUpdate = () => {
+      if (focusedKeyboardTargetRef.current || captureFocusedKeyboardTarget(activeElement(doc))) {
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+    const cleanupListeners = [];
+    if (visualViewport) {
+      cleanupListeners.push(addEventListener(visualViewport, 'resize', handleViewportUpdate), addEventListener(visualViewport, 'scroll', handleViewportUpdate));
+    }
+    cleanupListeners.push(addEventListener(doc, 'focusin', handleFocusIn, true), addEventListener(doc, 'focusout', handleFocusOut, true));
+    if (captureFocusedKeyboardTarget(activeElement(doc))) {
+      scheduleKeyboardFocusAlignment();
+    }
+    return () => {
+      cleanupListeners.forEach(cleanup => cleanup());
+      clearFocusedKeyboardTarget();
+      rootElement.style.removeProperty(DrawerViewportCssVars.keyboardInset);
+    };
+  }, [animateKeyboardScroll, keyboardFocusFrame, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
+  const onTouchStart = useStableCallback(event => {
+    if (!open || !mounted || nestedDrawerOpen) {
+      resetTouchTrackingState();
+      return;
+    }
+    const touch = event.touches[0];
+    if (!touch) {
+      return;
+    }
+    pendingKeyboardFocusMovedRef.current = false;
+    keyboardTouchStartRef.current = {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+  });
+  const onTouchMove = useStableCallback(event => {
+    const touch = event.touches[0];
+    const touchStart = keyboardTouchStartRef.current;
+    if (!touch || !touchStart || pendingKeyboardFocusMovedRef.current) {
+      return;
+    }
+
+    // Treat the gesture as a scroll/swipe (not a tap-to-focus) once the finger
+    // moves past the threshold, so we don't open the keyboard on a drag.
+    if (Math.abs(touch.clientX - touchStart.x) > INPUT_TAP_MOVE_THRESHOLD || Math.abs(touch.clientY - touchStart.y) > INPUT_TAP_MOVE_THRESHOLD) {
+      pendingKeyboardFocusMovedRef.current = true;
+    }
+  });
+  const onTouchEnd = useStableCallback(event => {
+    if (!open || !mounted || nestedDrawerOpen || !rootElement || !keyboardTouchStartRef.current || pendingKeyboardFocusMovedRef.current) {
+      resetTouchTrackingState();
+      return;
+    }
+    const touch = event.changedTouches[0] ?? event.touches[0];
+    const doc = ownerDocument(event.currentTarget);
+    const nativeEventTarget = getTarget(event.nativeEvent);
+    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(doc, touch.clientX, touch.clientY) : null;
+
+    // The lift point landed on another interactive/label element; let its native tap
+    // through instead of stealing it for the touchstart input.
+    if (pointTarget === KEYBOARD_TAP_BLOCKED) {
+      resetTouchTrackingState();
+      return;
+    }
+    const keyboardTarget = touch && (pointTarget ?? resolveKeyboardTouchTarget(nativeEventTarget));
+    if (keyboardTarget && (!contains(rootElement, keyboardTarget.focusTarget) || !contains(rootElement, keyboardTarget.clickTarget))) {
+      resetTouchTrackingState();
+      return;
+    }
+    if (keyboardTarget) {
+      const {
+        clickTarget: keyboardClickTarget,
+        focusTarget: keyboardFocusTarget
+      } = keyboardTarget;
+      const win = getWindow(keyboardFocusTarget);
+
+      // While pinch-zoomed, keyboard alignment is suspended; let native behavior
+      // handle focus and caret placement instead of blurring and re-focusing.
+      if (win.visualViewport && win.visualViewport.scale !== 1) {
+        resetTouchTrackingState();
+        return;
+      }
+
+      // Already focused with the keyboard up: let the native tap through so it can
+      // reposition the caret, rather than blurring and re-focusing the same input.
+      if (activeElement(ownerDocument(keyboardFocusTarget)) === keyboardFocusTarget && isKeyboardVisualViewportOpen(win)) {
+        resetTouchTrackingState();
+        return;
+      }
+
+      // iOS only opens the software keyboard when focus happens synchronously
+      // inside the touch gesture.
+      event.preventDefault();
+      focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      // Preventing the touchend default also suppresses the compatibility mouse
+      // events, including `click`; redispatch an untrusted replacement on the
+      // original tap target so click handlers still run with the tap coordinates.
+      dispatchKeyboardClick(keyboardClickTarget, touch);
+      resetTouchTrackingState();
+      return;
+    }
+    resetTouchTrackingState();
+  });
+  const contextValue = React.useMemo(() => ({
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onTouchCancel: resetTouchTrackingState
+  }), [onTouchEnd, onTouchMove, onTouchStart, resetTouchTrackingState]);
+  return /*#__PURE__*/jsx(DrawerVirtualKeyboardContext.Provider, {
+    value: contextValue,
+    children: children
+  });
 }
-function preserveNativeCrossAxisScrollOnMove(touchState, touch, isVerticalScrollAxis) {
-  if (touchState.preserveNativeCrossAxisScroll) {
+function isKeyboardInputElement(element) {
+  if (element.isContentEditable) {
     return true;
   }
-  if (touchState.allowSwipe === true || !touchState.hasCrossAxisScrollableContent) {
-    return false;
-  }
-  const drawerAxisGestureDelta = isVerticalScrollAxis ? touch.clientY - touchState.startY : touch.clientX - touchState.startX;
-  const crossAxisGestureDelta = isVerticalScrollAxis ? touch.clientX - touchState.startX : touch.clientY - touchState.startY;
-  const absDrawerAxisGestureDelta = Math.abs(drawerAxisGestureDelta);
-  const absCrossAxisGestureDelta = Math.abs(crossAxisGestureDelta);
-  if (absCrossAxisGestureDelta < 6 || absCrossAxisGestureDelta <= absDrawerAxisGestureDelta + 2) {
-    return false;
+  const win = getWindow(element);
+  if (element instanceof win.HTMLTextAreaElement || element instanceof win.HTMLInputElement && KEYBOARD_INPUT_TYPES.has(element.type)) {
+    // Disabled controls can't focus or open the keyboard, so tap-to-focus must skip them —
+    // otherwise the dispatched click fires handlers a native tap on a disabled control never would.
+    return !element.matches(':disabled');
   }
-  touchState.preserveNativeCrossAxisScroll = true;
-  return true;
+  return false;
 }
-function hasScrollableContentOnAxis(scrollTarget, axis) {
-  return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
+function resolveKeyboardInputTarget(target) {
+  if (!isHTMLElement(target)) {
+    return null;
+  }
+  if (isKeyboardInputElement(target)) {
+    return target.isContentEditable ? getContentEditableHost(target) : target;
+  }
+  const label = target.closest('label');
+  const control = label?.control ?? null;
+  return isHTMLElement(control) && isKeyboardInputElement(control) ? control : null;
 }
-function getScrollMetrics(scrollTarget, axis) {
-  if (axis === 'vertical') {
-    const max = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
-    return {
-      offset: scrollTarget.scrollTop,
-      max
-    };
+function resolveKeyboardTouchTarget(target) {
+  const focusTarget = resolveKeyboardInputTarget(target);
+  if (!focusTarget) {
+    return null;
   }
-  const max = Math.max(0, scrollTarget.scrollWidth - scrollTarget.clientWidth);
   return {
-    offset: scrollTarget.scrollLeft,
-    max
+    focusTarget,
+    clickTarget: isHTMLElement(target) ? target : focusTarget
   };
 }
-function isAtSwipeStartEdge(scrollTarget, axis, direction) {
-  const {
-    offset,
-    max
-  } = getScrollMetrics(scrollTarget, axis);
-  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
-  if (dismissFromStartEdge === null) {
-    return false;
+
+// Inherited-editable descendants (no `contenteditable` attribute of their own) are not
+// focusable, so focusing them is a no-op; resolve taps on them to the editing host.
+function getContentEditableHost(element) {
+  let host = element;
+  while (host.parentElement?.isContentEditable) {
+    host = host.parentElement;
   }
-  return dismissFromStartEdge ? offset <= 0 : offset >= max;
+  return host;
 }
-function canSwipeFromScrollEdgeOnMove(scrollTarget, axis, direction, delta) {
-  const {
-    offset,
-    max
-  } = getScrollMetrics(scrollTarget, axis);
-  const dismissFromStartEdge = shouldDismissFromStartEdge(direction, axis);
-  if (dismissFromStartEdge === null) {
-    return false;
+function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
+  const exactTarget = getElementAtPoint(doc, clientX, clientY);
+  const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
+  if (exactKeyboardTarget) {
+    return {
+      focusTarget: exactKeyboardTarget,
+      clickTarget: isHTMLElement(exactTarget) ? exactTarget : exactKeyboardTarget
+    };
   }
-  const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
-  if (!movingTowardDismiss) {
-    return false;
+
+  // Probing nearby points compensates for iOS retargeting taps while the page reacts
+  // to the keyboard, but it must not steal a tap that lands on another interactive
+  // element — that would suppress its click and focus a neighboring field instead.
+  // `closest('label')` covers labels of non-keyboard controls (e.g. checkboxes).
+  // Returning the blocked sentinel (rather than `null`) stops the caller from falling
+  // back to the touchstart target, which would re-steal the very tap rejected here.
+  if (isInteractiveElement(exactTarget) || exactTarget?.closest('label') != null) {
+    return KEYBOARD_TAP_BLOCKED;
   }
-  return dismissFromStartEdge ? offset <= 0 : offset >= max;
-}
-function shouldDismissFromStartEdge(direction, axis) {
-  if (axis === 'vertical') {
-    if (direction === 'down') {
-      return true;
+  for (const [offsetX, offsetY] of [[0, INPUT_TAP_HIT_SLOP], [0, -INPUT_TAP_HIT_SLOP], [INPUT_TAP_HIT_SLOP, 0], [-INPUT_TAP_HIT_SLOP, 0]]) {
+    const keyboardTarget = resolveKeyboardInputTarget(getElementAtPoint(doc, clientX + offsetX, clientY + offsetY));
+    if (keyboardTarget) {
+      return {
+        focusTarget: keyboardTarget,
+        clickTarget: keyboardTarget
+      };
     }
-    if (direction === 'up') {
-      return false;
+  }
+  return null;
+}
+function dispatchKeyboardClick(target, touch) {
+  const win = getWindow(target);
+  const ClickEvent = win.PointerEvent ?? win.MouseEvent;
+  target.dispatchEvent(new ClickEvent('click', {
+    bubbles: true,
+    cancelable: true,
+    clientX: touch.clientX,
+    clientY: touch.clientY,
+    detail: 1,
+    view: win
+  }));
+}
+function focusKeyboardInputWithoutPageScroll(target) {
+  const wasFocused = activeElement(ownerDocument(target)) === target;
+  const previousOpacity = target.style.opacity;
+  const previousTransform = target.style.transform;
+  const previousTransition = target.style.transition;
+
+  // iOS Safari can still scroll the page for transformed sheets even with preventScroll.
+  // Move the input off-screen only for the synchronous focus call.
+  target.style.transition = 'none';
+  target.style.opacity = '0';
+  target.style.transform = 'translateY(-2000px)';
+  try {
+    if (wasFocused) {
+      target.blur();
     }
-    return null;
+    target.focus({
+      preventScroll: true
+    });
+  } finally {
+    target.style.opacity = previousOpacity;
+    target.style.transform = previousTransform;
+    target.style.transition = previousTransition;
   }
-  if (direction === 'right') {
-    return true;
+}
+function findKeyboardScrollTarget(target, root) {
+  // Start at the parent: scrolling the focused field's own content (an overflowing
+  // textarea is scrollable itself) can never move its box out from under the keyboard.
+  // `getParentNode` crosses shadow boundaries so an input inside a shadow root still reaches
+  // the drawer body scroller. Prefer an already-scrollable ancestor, then fall back to one
+  // that only becomes scrollable once keyboard slack is added (overflow intent without
+  // current overflow).
+  const scrollStart = getParentNode(target);
+  return findScrollableTouchTarget(scrollStart, root, 'vertical') ?? findScrollableTouchTarget(scrollStart, root, 'vertical', true);
+}
+function getKeyboardVisualViewport(win) {
+  const visualViewport = win.visualViewport;
+  if (!visualViewport || visualViewport.scale !== 1) {
+    return null;
   }
-  if (direction === 'left') {
-    return false;
+  const reducedHeight = win.innerHeight - visualViewport.height;
+  // Treat small viewport changes as browser chrome movement, not the software keyboard.
+  if (reducedHeight <= KEYBOARD_RESIZE_THRESHOLD) {
+    return null;
   }
-  return null;
+  const top = Math.max(0, visualViewport.offsetTop);
+  return {
+    top,
+    bottom: Math.min(win.innerHeight, top + visualViewport.height)
+  };
+}
+function getDrawerKeyboardInset(win, keyboardViewport) {
+  return Math.max(0, win.innerHeight - keyboardViewport.bottom);
+}
+function isKeyboardVisualViewportOpen(win) {
+  return !win.visualViewport || getKeyboardVisualViewport(win) != null;
 }
 
 var index_parts$5 = /*#__PURE__*/Object.freeze({
@@ -2709,6 +3289,7 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   Title: DrawerTitle,
   Trigger: DrawerTrigger,
   Viewport: DrawerViewport,
+  VirtualKeyboardProvider: DrawerVirtualKeyboardProvider,
   createHandle: createDialogHandle
 });
 
@@ -2720,8 +3301,9 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
  */
 const MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -2782,6 +3364,7 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
     checked: checkedProp,
     defaultChecked,
     onCheckedChange,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
@@ -2810,7 +3393,7 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: REGULAR_ITEM
   });
   const state = React.useMemo(() => ({
@@ -2818,17 +3401,16 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useStableCallback(event => {
-    const details = {
-      ...createChangeEventDetails(itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = createChangeEventDetails(itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     onCheckedChange?.(!checked, details);
     if (details.isCanceled) {
       return;
     }
     setChecked(currentlyChecked => !currentlyChecked);
-  });
+  }
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: itemMapping,
@@ -2856,6 +3438,7 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function MenuChe
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;
@@ -2894,25 +3477,6 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function MenuChe
 });
 if (process.env.NODE_ENV !== "production") MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
 
-/**
- * Returns a previous value of its argument.
- * @param value Current value.
- * @returns Previous value, or null if there is no previous value.
- */
-function usePreviousValue(value) {
-  const [state, setState] = React.useState({
-    current: value,
-    previous: null
-  });
-  if (value !== state.current) {
-    setState({
-      current: value,
-      previous: state.current
-    });
-  }
-  return state.previous;
-}
-
 function getCssDimensions(element) {
   const css = getComputedStyle(element);
   // In testing environments, the `width` and `height` properties are empty
@@ -2933,8 +3497,6 @@ function getCssDimensions(element) {
   };
 }
 
-const DEFAULT_ENABLED = () => true;
-
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */
@@ -2944,7 +3506,6 @@ function usePopupAutoResize(parameters) {
     positionerElement,
     content,
     mounted,
-    enabled = DEFAULT_ENABLED,
     onMeasureLayout: onMeasureLayoutParam,
     onMeasureLayoutComplete: onMeasureLayoutCompleteParam,
     side,
@@ -2953,7 +3514,6 @@ function usePopupAutoResize(parameters) {
   const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true, false);
   const animationFrame = useAnimationFrame();
   const committedDimensionsRef = React.useRef(null);
-  const liveDimensionsRef = React.useRef(null);
   const isInitialRenderRef = React.useRef(true);
   const restoreAnchoringStylesRef = React.useRef(NOOP);
   const onMeasureLayout = useStableCallback(onMeasureLayoutParam);
@@ -2977,27 +3537,16 @@ function usePopupAutoResize(parameters) {
   }, [side, direction]);
   useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
-    if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
+    if (!mounted) {
       restoreAnchoringStylesRef.current = NOOP;
       isInitialRenderRef.current = true;
       committedDimensionsRef.current = null;
-      liveDimensionsRef.current = null;
       return undefined;
     }
     if (!popupElement || !positionerElement) {
       return undefined;
     }
     restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
-    const observer = new ResizeObserver(entries => {
-      const entry = entries[0];
-      if (entry) {
-        liveDimensionsRef.current = {
-          width: Math.ceil(entry.borderBoxSize[0].inlineSize),
-          height: Math.ceil(entry.borderBoxSize[0].blockSize)
-        };
-      }
-    });
-    observer.observe(popupElement);
 
     // Measure the rendered size to enable transitions:
     setPopupCssSize(popupElement, 'auto');
@@ -3029,32 +3578,18 @@ function usePopupAutoResize(parameters) {
       onMeasureLayoutComplete?.(null, dimensions);
       isInitialRenderRef.current = false;
       return () => {
-        observer.disconnect();
         restoreAnchoringStylesRef.current();
         restoreAnchoringStylesRef.current = NOOP;
       };
     }
 
     // Subsequent renders while open (when `content` changes).
-    setPopupCssSize(popupElement, 'auto');
     setPositionerCssSize(positionerElement, 'max-content');
-    const previousDimensions = committedDimensionsRef.current ?? liveDimensionsRef.current;
+    const previousDimensions = committedDimensionsRef.current;
     const newDimensions = getCssDimensions(popupElement);
 
-    // Commit immediately so future content changes have a stable previous size, even if
-    // ResizeObserver runs after this point.
+    // Commit immediately so future content changes have a stable previous size.
     committedDimensionsRef.current = newDimensions;
-    if (!previousDimensions) {
-      setPositionerCssSize(positionerElement, newDimensions);
-      restoreMeasurementOverridesIncludingScale();
-      onMeasureLayoutComplete?.(null, newDimensions);
-      return () => {
-        observer.disconnect();
-        animationFrame.cancel();
-        restoreAnchoringStylesRef.current();
-        restoreAnchoringStylesRef.current = NOOP;
-      };
-    }
     setPopupCssSize(popupElement, previousDimensions);
     restoreMeasurementOverridesIncludingScale();
     onMeasureLayoutComplete?.(previousDimensions, newDimensions);
@@ -3068,13 +3603,12 @@ function usePopupAutoResize(parameters) {
       }, abortController.signal);
     });
     return () => {
-      observer.disconnect();
       abortController.abort();
       animationFrame.cancel();
       restoreAnchoringStylesRef.current();
       restoreAnchoringStylesRef.current = NOOP;
     };
-  }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, enabled, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
+  }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
 function overrideElementStyle(element, property, value) {
   const originalValue = element.style.getPropertyValue(property);
@@ -3157,6 +3691,11 @@ function usePopupViewport(parameters) {
     }
   });
   const lastHandledTriggerRef = React.useRef(null);
+  useIsoLayoutEffect(() => {
+    if (!open || !mounted) {
+      lastHandledTriggerRef.current = null;
+    }
+  }, [open, mounted]);
   useIsoLayoutEffect(() => {
     // When a trigger changes, set the captured children HTML to state,
     // so we can render both new and old content.
@@ -3195,7 +3734,7 @@ function usePopupViewport(parameters) {
     if (!source) {
       return;
     }
-    const wrapper = document.createElement('div');
+    const wrapper = ownerDocument(source).createElement('div');
     for (const child of Array.from(source.childNodes)) {
       wrapper.appendChild(child.cloneNode(true));
     }
@@ -3367,8 +3906,8 @@ const stateAttributesMapping$2 = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
@@ -3377,6 +3916,7 @@ const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(compone
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -3447,7 +3987,7 @@ class MenuHandle {
    * Indicates whether the menu is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 
@@ -3520,6 +4060,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
     className,
     orientation = 'vertical',
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3535,6 +4076,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
     thumbXRef,
     handlePointerDown,
     handlePointerUp,
+    handleScroll,
     rootId,
     thumbSize,
     hasMeasuredScrollbar
@@ -3556,7 +4098,12 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
   };
   const direction = useDirection();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
   React.useEffect(() => {
+    if (!shouldRender) {
+      return undefined;
+    }
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
@@ -3566,34 +4113,34 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
       if (!viewportEl || !scrollbarEl || event.ctrlKey) {
         return;
       }
-      event.preventDefault();
-      if (orientation === 'vertical') {
-        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
-          return;
-        }
-      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+      const horizontal = orientation === 'horizontal';
+      const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
+      const delta = horizontal ? event.deltaX : event.deltaY;
+      if (delta === 0) {
         return;
       }
-      if (orientation === 'vertical') {
-        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
-          return;
-        }
-      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
+      const maxScroll = horizontal ? viewportEl.scrollWidth - viewportEl.clientWidth : viewportEl.scrollHeight - viewportEl.clientHeight;
+      // RTL horizontal scrolling uses a negative `scrollLeft` range, from 0 to `-maxScroll`.
+      const minScroll = horizontal && direction === 'rtl' ? -maxScroll : 0;
+      const maxScrollValue = horizontal && direction === 'rtl' ? 0 : maxScroll;
+      const scrollValue = viewportEl[scrollProperty];
+
+      // At an edge (or with no overflow), let the wheel event chain to the
+      // parent/page instead of swallowing it via `preventDefault`.
+      if (scrollValue <= minScroll && delta < 0 || scrollValue >= maxScrollValue && delta > 0) {
         return;
       }
-      if (orientation === 'vertical') {
-        viewportEl.scrollTop += event.deltaY;
-      } else {
-        viewportEl.scrollLeft += event.deltaX;
-      }
+      event.preventDefault();
+      viewportEl[scrollProperty] = Math.min(maxScrollValue, Math.max(minScroll, scrollValue + delta));
+      handleScroll({
+        x: viewportEl.scrollLeft,
+        y: viewportEl.scrollTop
+      });
     }
-    scrollbarEl.addEventListener('wheel', handleWheel, {
+    return addEventListener(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-    return () => {
-      scrollbarEl.removeEventListener('wheel', handleWheel);
-    };
-  }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
+  }, [direction, handleScroll, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
   const props = {
     ...(rootId && {
       'data-id': `${rootId}-scrollbar`
@@ -3602,9 +4149,12 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
       if (event.button !== 0) {
         return;
       }
+      const target = getTarget(event.nativeEvent);
+      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
 
-      // Ignore clicks on thumb
-      if (event.currentTarget !== event.target) {
+      // Ignore clicks on thumb, including cases where React retargets the
+      // synthetic event to the track host across a shadow boundary.
+      if (thumb && contains(thumb, target)) {
         return;
       }
       if (!viewportRef.current) {
@@ -3649,9 +4199,16 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
         }
         viewportRef.current.scrollLeft = newScrollLeft;
       }
+      handleScroll({
+        x: viewportRef.current.scrollLeft,
+        y: viewportRef.current.scrollTop
+      });
       handlePointerDown(event);
     },
     onPointerUp: handlePointerUp,
+    // Mirror `onPointerUp` so a browser-cancelled gesture on the track (no thumb
+    // child captures the pointer) still clears the drag state.
+    onPointerCancel: handlePointerUp,
     style: {
       position: 'absolute',
       touchAction: 'none',
@@ -3681,8 +4238,6 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
   const contextValue = React.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
-  const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;
   }
@@ -3703,34 +4258,42 @@ const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAreaConte
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
-  const contentWrapperRef = React.useRef(null);
   const {
     computeThumbPosition
   } = useScrollAreaViewportContext();
   const {
+    hasMeasuredScrollbar,
     viewportState
   } = useScrollAreaRootContext();
+  const contentWrapperRef = React.useRef(null);
+  const computeOnInitialResizeRef = React.useRef(hasMeasuredScrollbar);
   useIsoLayoutEffect(() => {
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
-      // ResizeObserver fires once upon observing, so we skip the initial call
-      // to avoid double-calculating the thumb position on mount.
+    const resizeObserver = new ResizeObserver(() => {
       if (!hasInitialized) {
         hasInitialized = true;
-        return;
+
+        // ResizeObserver fires once upon observing. Skip that initial call to avoid
+        // double-calculating the thumb position on mount, unless the content mounted
+        // after the viewport's initial measurement (in which case this fire is what
+        // brings the overflow state in sync).
+        if (!computeOnInitialResizeRef.current) {
+          return;
+        }
       }
       computeThumbPosition();
     });
     if (contentWrapperRef.current) {
-      ro.observe(contentWrapperRef.current);
+      resizeObserver.observe(contentWrapperRef.current);
     }
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
     };
   }, [computeThumbPosition]);
   const element = useRenderElement('div', componentProps, {
@@ -3758,6 +4321,7 @@ const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollAreaThumb(c
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3768,29 +4332,34 @@ const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollAreaThumb(c
     handlePointerUp,
     setScrollingX,
     setScrollingY,
+    scrollingX,
+    scrollingY,
     hasMeasuredScrollbar
   } = useScrollAreaRootContext();
   const {
     orientation
   } = useScrollAreaScrollbarContext();
   const state = {
+    scrolling: orientation === 'horizontal' ? scrollingX : scrollingY,
     orientation
   };
+  function endDrag(event) {
+    if (orientation === 'vertical') {
+      setScrollingY(false);
+    }
+    if (orientation === 'horizontal') {
+      setScrollingX(false);
+    }
+    handlePointerUp(event);
+  }
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
     state,
     props: [{
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
-      onPointerUp(event) {
-        if (orientation === 'vertical') {
-          setScrollingY(false);
-        }
-        if (orientation === 'horizontal') {
-          setScrollingX(false);
-        }
-        handlePointerUp(event);
-      },
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
       style: {
         visibility: hasMeasuredScrollbar ? undefined : 'hidden',
         ...(orientation === 'vertical' && {
@@ -3816,6 +4385,7 @@ const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAreaCorner
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3894,32 +4464,32 @@ function useNumberFieldScrubAreaContext() {
   return context;
 }
 
-// Calculates the viewport rect for the virtual cursor.
+// Calculates the bounds the virtual cursor wraps within, as absolute edge coordinates.
 function getViewportRect(teleportDistance, scrubAreaEl) {
   const win = getWindow(scrubAreaEl);
-  const rect = scrubAreaEl.getBoundingClientRect();
-  if (rect && teleportDistance != null) {
+  if (teleportDistance != null) {
+    const rect = scrubAreaEl.getBoundingClientRect();
     return {
-      x: rect.left - teleportDistance / 2,
-      y: rect.top - teleportDistance / 2,
-      width: rect.right + teleportDistance / 2,
-      height: rect.bottom + teleportDistance / 2
+      left: rect.left - teleportDistance / 2,
+      top: rect.top - teleportDistance / 2,
+      right: rect.right + teleportDistance / 2,
+      bottom: rect.bottom + teleportDistance / 2
     };
   }
   const vV = win.visualViewport;
   if (vV) {
     return {
-      x: vV.offsetLeft,
-      y: vV.offsetTop,
-      width: vV.offsetLeft + vV.width,
-      height: vV.offsetTop + vV.height
+      left: vV.offsetLeft,
+      top: vV.offsetTop,
+      right: vV.offsetLeft + vV.width,
+      bottom: vV.offsetTop + vV.height
     };
   }
   return {
-    x: 0,
-    y: 0,
-    width: win.document.documentElement.clientWidth,
-    height: win.document.documentElement.clientHeight
+    left: 0,
+    top: 0,
+    right: win.document.documentElement.clientWidth,
+    bottom: win.document.documentElement.clientHeight
   };
 }
 
@@ -3936,12 +4506,21 @@ function subscribeToVisualViewportResize(element, visualScaleRef) {
     }
   }
   handleVisualResize();
-  vV.addEventListener('resize', handleVisualResize);
-  return () => {
-    vV.removeEventListener('resize', handleVisualResize);
-  };
+  return addEventListener(vV, 'resize', handleVisualResize);
 }
 
+const SCRUB_AREA_STYLE = {
+  touchAction: 'none',
+  WebkitUserSelect: 'none',
+  userSelect: 'none'
+};
+
+/**
+ * An interactive area where the user can click and drag to change the field value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
 const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldScrubArea(componentProps, forwardedRef) {
   const {
     render,
@@ -3949,6 +4528,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     direction = 'horizontal',
     pixelSensitivity = 2,
     teleportDistance,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3958,6 +4538,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     readOnly,
     inputRef,
     incrementValue,
+    allowInputSyncRef,
     getStepAmount,
     onValueCommitted,
     lastChangedValueRef,
@@ -4005,15 +4586,15 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     };
     const cursorWidth = virtualCursor.offsetWidth;
     const cursorHeight = virtualCursor.offsetHeight;
-    if (newCoords.x + cursorWidth / 2 < rect.x) {
-      newCoords.x = rect.width - cursorWidth / 2;
-    } else if (newCoords.x + cursorWidth / 2 > rect.width) {
-      newCoords.x = rect.x - cursorWidth / 2;
+    if (newCoords.x + cursorWidth / 2 < rect.left) {
+      newCoords.x = rect.right - cursorWidth / 2;
+    } else if (newCoords.x + cursorWidth / 2 > rect.right) {
+      newCoords.x = rect.left - cursorWidth / 2;
     }
-    if (newCoords.y + cursorHeight / 2 < rect.y) {
-      newCoords.y = rect.height - cursorHeight / 2;
-    } else if (newCoords.y + cursorHeight / 2 > rect.height) {
-      newCoords.y = rect.y - cursorHeight / 2;
+    if (newCoords.y + cursorHeight / 2 < rect.top) {
+      newCoords.y = rect.bottom - cursorHeight / 2;
+    } else if (newCoords.y + cursorHeight / 2 > rect.bottom) {
+      newCoords.y = rect.top - cursorHeight / 2;
     }
     virtualCursorCoords.current = newCoords;
     updateCursorTransform(newCoords.x, newCoords.y);
@@ -4056,8 +4637,10 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
 
           // Manually dispatch a click event if no movement happened, since
           // preventDefault on pointerdown prevents the browser click event.
-          if (!didMoveRef.current && pointerDownTargetRef.current != null) {
-            pointerDownTargetRef.current.dispatchEvent(new MouseEvent('click', {
+          const pointerDownTarget = pointerDownTargetRef.current;
+          const input = inputRef.current;
+          if (!didMoveRef.current && pointerDownTarget != null && input) {
+            pointerDownTarget.dispatchEvent(new (getWindow(input).MouseEvent)('click', {
               bubbles: true,
               cancelable: true
             }));
@@ -4066,7 +4649,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
           pointerDownTargetRef.current = null;
         }
       }
-      if (isFirefox) {
+      if (gecko) {
         // Firefox needs a small delay here when soft-clicking as the pointer
         // lock will not release otherwise.
         exitPointerLockTimeout.start(20, handler);
@@ -4091,9 +4674,10 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
         cumulativeDelta = 0;
         didMoveRef.current = true;
         const dValue = direction === 'vertical' ? -movementY : movementX;
-        const stepAmount = getStepAmount(event) ?? DEFAULT_STEP;
+        const stepAmount = getStepAmount(event);
         const rawAmount = dValue * stepAmount;
         if (rawAmount !== 0) {
+          allowInputSyncRef.current = true;
           incrementValue(Math.abs(rawAmount), {
             direction: rawAmount >= 0 ? 1 : -1,
             event,
@@ -4103,14 +4687,26 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
       }
     }
     const win = getWindow(inputRef.current);
-    win.addEventListener('pointerup', handleScrubPointerUp, true);
-    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    const unsubscribe = mergeCleanups(addEventListener(win, 'pointerup', handleScrubPointerUp, true), addEventListener(win, 'pointermove', handleScrubPointerMove, true));
     return () => {
       exitPointerLockTimeout.clear();
-      win.removeEventListener('pointerup', handleScrubPointerUp, true);
-      win.removeEventListener('pointermove', handleScrubPointerMove, true);
+      unsubscribe();
     };
-  }, [disabled, readOnly, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
+  }, [disabled, readOnly, allowInputSyncRef, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
+
+  // If the scrub area unmounts mid-scrub, release pointer lock and clear the root's scrubbing
+  // state so it doesn't stay locked or stuck. (No commit: there's no pointer release here.)
+  React.useEffect(() => () => {
+    if (isScrubbingRef.current) {
+      isScrubbingRef.current = false;
+      setRootScrubbing(false);
+      try {
+        ownerDocument(scrubAreaRef.current).exitPointerLock();
+      } catch {
+        // Ignore errors.
+      }
+    }
+  }, [setRootScrubbing]);
 
   // Prevent scrolling using touch input when scrubbing.
   React.useEffect(function registerScrubberTouchPreventListener() {
@@ -4123,18 +4719,11 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
         event.preventDefault();
       }
     }
-    element.addEventListener('touchstart', handleTouchStart);
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-    };
+    return addEventListener(element, 'touchstart', handleTouchStart);
   }, [disabled, readOnly]);
   const defaultProps = {
     role: 'presentation',
-    style: {
-      touchAction: 'none',
-      WebkitUserSelect: 'none',
-      userSelect: 'none'
-    },
+    style: SCRUB_AREA_STYLE,
     async onPointerDown(event) {
       const isMainButton = !event.button || event.button === 0;
       if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
@@ -4148,11 +4737,11 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
       }
       isScrubbingRef.current = true;
       didMoveRef.current = false;
-      pointerDownTargetRef.current = event.target;
+      pointerDownTargetRef.current = getTarget(event.nativeEvent);
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.
-      if (!isTouch && !isWebKit) {
+      if (!isTouch && !webkit) {
         try {
           // Avoid non-deterministic errors in testing environments. This error sometimes
           // appears:
@@ -4162,10 +4751,11 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
         } catch (error) {
           setIsPointerLockDenied(true);
         } finally {
+          // `onScrubbingChange` already wraps its state updates in `flushSync`, so re-emit the
+          // scrubbing state directly (no extra nested `flushSync`) to reflect the resolved
+          // pointer-lock result on the cursor.
           if (isScrubbingRef.current) {
-            ReactDOM.flushSync(() => {
-              onScrubbingChange(true, event.nativeEvent);
-            });
+            onScrubbingChange(true, event.nativeEvent);
           }
         }
       }
@@ -4181,12 +4771,8 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     isScrubbing,
     isTouchInput,
     isPointerLockDenied,
-    scrubAreaCursorRef,
-    scrubAreaRef,
-    direction,
-    pixelSensitivity,
-    teleportDistance
-  }), [isScrubbing, isTouchInput, isPointerLockDenied, direction, pixelSensitivity, teleportDistance]);
+    scrubAreaCursorRef
+  }), [isScrubbing, isTouchInput, isPointerLockDenied]);
   return /*#__PURE__*/jsx(NumberFieldScrubAreaContext.Provider, {
     value: contextValue,
     children: element
@@ -4194,6 +4780,13 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
 });
 if (process.env.NODE_ENV !== "production") NumberFieldScrubArea.displayName = "NumberFieldScrubArea";
 
+const CURSOR_STYLE = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none'
+};
+
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -4207,6 +4800,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function Number
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -4219,19 +4813,14 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function Number
     scrubAreaCursorRef
   } = useNumberFieldScrubAreaContext();
   const [domElement, setDomElement] = React.useState(null);
-  const shouldRender = isScrubbing && !isWebKit && !isTouchInput && !isPointerLockDenied;
+  const shouldRender = isScrubbing && !webkit && !isTouchInput && !isPointerLockDenied;
   const element = useRenderElement('span', componentProps, {
     enabled: shouldRender,
     ref: [forwardedRef, scrubAreaCursorRef, setDomElement],
     state,
     props: [{
       role: 'presentation',
-      style: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        pointerEvents: 'none'
-      }
+      style: CURSOR_STYLE
     }, elementProps],
     stateAttributesMapping: stateAttributesMapping$6
   });
@@ -4260,6 +4849,7 @@ const SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(component
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
@@ -4296,8 +4886,9 @@ if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabe
  */
 const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -4326,15 +4917,16 @@ const stateAttributesMapping$1 = {
 };
 
 /**
- * An overlay displayed beneath the menu popup.
+ * An overlay displayed beneath the select popup.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
 const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -4377,8 +4969,9 @@ const stateAttributesMapping = {
  */
 const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -4392,7 +4985,7 @@ const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(component
     arrowUncentered,
     alignItemWithTriggerActive
   } = useSelectPositionerContext();
-  const open = useStore(store, selectors.open, true);
+  const open = useStore(store, selectors.open);
   const state = {
     open,
     side,
@@ -4422,10 +5015,12 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
   const {
     render,
     className,
+    style,
     direction,
     keepMounted = false,
     ...elementProps
   } = componentProps;
+  const isUp = direction === 'up';
   const {
     store,
     popupRef,
@@ -4438,15 +5033,16 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
     scrollDownArrowRef,
     scrollUpArrowRef
   } = useSelectPositionerContext();
-  const visibleSelector = direction === 'up' ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
+  const visibleSelector = isUp ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
   const stateVisible = useStore(store, visibleSelector);
   const openMethod = useStore(store, selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
   const timeout = useTimeout();
-  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = useTransitionStatus(visible);
@@ -4479,7 +5075,7 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
   };
   const defaultProps = {
     'aria-hidden': true,
-    children: direction === 'up' ? '▲' : '▼',
+    children: isUp ? '▲' : '▼',
     style: {
       position: 'absolute'
     },
@@ -4495,72 +5091,25 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
         }
         store.set('activeIndex', null);
         handleScrollArrowVisibility();
-        const isScrolledToTop = scroller.scrollTop === 0;
-        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
-        const list = listRef.current;
+        const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+        const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+        const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
+        const items = listRef.current;
+        if (scrollTop !== scroller.scrollTop) {
+          scroller.scrollTop = scrollTop;
+        }
 
         // Fallback when there are no items registered yet.
-        if (list.length === 0) {
-          if (direction === 'up') {
-            store.set('scrollUpArrowVisible', !isScrolledToTop);
-          } else {
-            store.set('scrollDownArrowVisible', !isScrolledToBottom);
-          }
+        if (items.length === 0) {
+          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
         }
-        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+        if (isScrolledToEdge) {
           timeout.clear();
           return;
         }
-        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
-          const items = listRef.current;
+        if (items.length > 0) {
           const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
-          if (direction === 'up') {
-            let firstVisibleIndex = 0;
-            const scrollTop = scroller.scrollTop + scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemTop = item.offsetTop;
-                if (itemTop >= scrollTop) {
-                  firstVisibleIndex = i;
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.max(0, firstVisibleIndex - 1);
-            if (targetIndex < firstVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
-              }
-            } else {
-              // Already at the first item; ensure we reach the absolute top to account for group labels.
-              scroller.scrollTop = 0;
-            }
-          } else {
-            let lastVisibleIndex = items.length - 1;
-            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemBottom = item.offsetTop + item.offsetHeight;
-                if (itemBottom > scrollBottom) {
-                  lastVisibleIndex = Math.max(0, i - 1);
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
-            if (targetIndex > lastVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
-              }
-            } else {
-              // Already at the last item; ensure we reach the true bottom.
-              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-            }
-          }
+          scroller.scrollTop = getTargetScrollTop(items, isUp, scrollTop, scroller.clientHeight, scrollArrowHeight, maxScrollTop);
         }
         timeout.start(40, scrollNextItem);
       }
@@ -4573,15 +5122,44 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, scrollArrowRef],
     state,
-    props: [defaultProps, elementProps]
+    props: [defaultProps, elementProps],
+    stateAttributesMapping: transitionStatusMapping
   });
-  const shouldRender = visible || keepMounted;
+  const shouldRender = mounted || keepMounted;
   if (!shouldRender) {
     return null;
   }
   return element;
 });
 if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+function getTargetScrollTop(items, isUp, scrollTop, clientHeight, scrollArrowHeight, maxScrollTop) {
+  if (isUp) {
+    let firstVisibleIndex = 0;
+    const visibleTop = scrollTop + scrollArrowHeight - SCROLL_EDGE_TOLERANCE_PX;
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      if (item && item.offsetTop >= visibleTop) {
+        firstVisibleIndex = i;
+        break;
+      }
+    }
+    const targetIndex = Math.max(0, firstVisibleIndex - 1);
+    const targetItem = items[targetIndex];
+    return targetIndex < firstVisibleIndex && targetItem ? normalizeScrollOffset(targetItem.offsetTop - scrollArrowHeight, maxScrollTop) : 0;
+  }
+  let lastVisibleIndex = items.length - 1;
+  const visibleBottom = scrollTop + clientHeight - scrollArrowHeight + SCROLL_EDGE_TOLERANCE_PX;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item && item.offsetTop + item.offsetHeight > visibleBottom) {
+      lastVisibleIndex = Math.max(0, i - 1);
+      break;
+    }
+  }
+  const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+  const targetItem = items[targetIndex];
+  return targetIndex > lastVisibleIndex && targetItem ? normalizeScrollOffset(targetItem.offsetTop + targetItem.offsetHeight - clientHeight + scrollArrowHeight, maxScrollTop) : maxScrollTop;
+}
 
 /**
  * An element that scrolls the select popup down when hovered. Does not render when using touch input.