@jobber/components 8.23.0 → 8.23.1

package/dist/unstyledPrimitives/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var React = require('react');
-var useButton = require('../useButton-cjs.js');
 var ComboboxChipRemove = require('../ComboboxChipRemove-cjs.js');
 var resolveAriaLabelledBy = require('../resolveAriaLabelledBy-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
+var useButton = require('../useButton-cjs.js');
 var Separator = require('../Separator-cjs.js');
 var DrawerDescription = require('../DrawerDescription-cjs.js');
 var DrawerTitle = require('../DrawerTitle-cjs.js');
@@ -12,17 +12,17 @@ var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
 var useRenderElement = require('../useRenderElement-cjs.js');
 var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
 var clamp = require('../clamp-cjs.js');
-var InternalBackdrop = require('../InternalBackdrop-cjs.js');
+var useScrollLock = require('../useScrollLock-cjs.js');
 var ReactDOM = require('react-dom');
 var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var useCompositeListItem = require('../useCompositeListItem-cjs.js');
-var index_esm = require('../index.esm-cjs.js');
-var NumberFieldInput = require('../NumberFieldInput-cjs.js');
 var SelectGroupLabel = require('../SelectGroupLabel-cjs.js');
+var floatingUi_utils = require('../floating-ui.utils-cjs.js');
+var NumberFieldInput = require('../NumberFieldInput-cjs.js');
 var useLabelableId = require('../useLabelableId-cjs.js');
 var useLabel = require('../useLabel-cjs.js');
-require('../CSPContext-cjs.js');
-require('../ToolbarRootContext-cjs.js');
+var scrollEdges = require('../scrollEdges-cjs.js');
+require('../isElementDisabled-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -78,13 +78,6 @@ function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const handleValueChange = useButton.useStableCallback((nextValue, eventDetails) => {
-    setInlineInputValue('');
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onValueChange?.(nextValue, eventDetails);
-  });
   const collator = ComboboxChipRemove.useCoreFilter();
   const baseFilter = React__namespace.useMemo(() => {
     if (other.filter !== undefined) {
@@ -106,7 +99,14 @@ function AutocompleteRoot(props) {
       return baseFilter(item, resolvedQuery, toString);
     };
   }, [baseFilter, mode, resolvedQuery, staticItems]);
-  const handleItemHighlighted = useButton.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 === useButton.pointer) {
       return;
@@ -120,7 +120,7 @@ function AutocompleteRoot(props) {
     } else {
       setInlineInputValue('');
     }
-  });
+  }
   return /*#__PURE__*/jsxRuntime.jsx(ComboboxChipRemove.AriaCombobox, {
     ...other,
     itemToStringLabel: itemToStringValue,
@@ -154,6 +154,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 = ComboboxChipRemove.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 = ComboboxChipRemove.ComboboxInputGroup;
+
+/**
+ * An individual item in the list.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteItem = ComboboxChipRemove.ComboboxItem;
+
 var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxChipRemove.ComboboxArrow,
@@ -165,8 +189,8 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   GroupLabel: ComboboxChipRemove.ComboboxGroupLabel,
   Icon: ComboboxChipRemove.ComboboxIcon,
   Input: ComboboxChipRemove.ComboboxInput,
-  InputGroup: ComboboxChipRemove.ComboboxInputGroup,
-  Item: ComboboxChipRemove.ComboboxItem,
+  InputGroup: AutocompleteInputGroup,
+  Item: AutocompleteItem,
   List: ComboboxChipRemove.ComboboxList,
   Popup: ComboboxChipRemove.ComboboxPopup,
   Portal: ComboboxChipRemove.ComboboxPortal,
@@ -175,7 +199,7 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   Row: ComboboxChipRemove.ComboboxRow,
   Separator: Separator.Separator,
   Status: ComboboxChipRemove.ComboboxStatus,
-  Trigger: ComboboxChipRemove.ComboboxTrigger,
+  Trigger: AutocompleteTrigger,
   Value: AutocompleteValue,
   useFilter: ComboboxChipRemove.useCoreFilter,
   useFilteredItems: ComboboxChipRemove.useFilteredItems
@@ -220,6 +244,7 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = ScrollAreaViewport.useDrawerProviderContext();
@@ -294,6 +319,7 @@ const DrawerIndentBackground = /*#__PURE__*/React__namespace.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = ScrollAreaViewport.useDrawerProviderContext();
@@ -393,36 +419,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 = floatingUi_utils_dom.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 (floatingUi_utils_dom.isHTMLElement(node) && node !== root && !floatingUi_utils_dom.isLastTraversableNode(node)) {
     for (const axis of axes) {
       if (isScrollable(node, axis)) {
         return true;
       }
     }
-    node = node.parentElement;
+    node = floatingUi_utils_dom.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 = floatingUi_utils_dom.isHTMLElement(target) ? target : null;
-  while (node && node !== root) {
-    if (isScrollable(node, axis)) {
+  while (floatingUi_utils_dom.isHTMLElement(node) && node !== root && !floatingUi_utils_dom.isLastTraversableNode(node)) {
+    if (isScrollable(node, axis, allowOverflowIntent)) {
       return node;
     }
-    node = node.parentElement;
+    node = floatingUi_utils_dom.getParentNode(node);
   }
-  return isScrollable(root, axis) ? root : null;
+  return isScrollable(root, axis, allowOverflowIntent) ? root : null;
 }
 
 function getElementAtPoint(doc, x, y) {
@@ -451,7 +490,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = floatingUi_utils_dom.getWindow(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -480,6 +519,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;
 }
@@ -509,6 +551,7 @@ function useSwipeDismiss(options) {
     swipeThreshold: swipeThresholdProp,
     onDismiss,
     onProgress,
+    onCancel,
     onSwipeStart,
     onRelease,
     onSwipingChange,
@@ -535,18 +578,7 @@ function useSwipeDismiss(options) {
   }, [hasHorizontal, hasVertical]);
   const [currentSwipeDirection, setCurrentSwipeDirection] = React__namespace.useState(undefined);
   const [isSwiping, setIsSwiping] = React__namespace.useState(false);
-  const [isRealSwipe, setIsRealSwipe] = React__namespace.useState(false);
   const [dragDismissed, setDragDismissed] = React__namespace.useState(false);
-  const [dragOffset, setDragOffset] = React__namespace.useState({
-    x: 0,
-    y: 0
-  });
-  const [initialTransform, setInitialTransform] = React__namespace.useState({
-    x: 0,
-    y: 0,
-    scale: 1
-  });
-  const [lockedDirection, setLockedDirection] = React__namespace.useState(null);
   const dragStartPosRef = React__namespace.useRef({
     x: 0,
     y: 0
@@ -568,6 +600,7 @@ function useSwipeDismiss(options) {
     x: 0,
     y: 0
   });
+  const lockedDirectionRef = React__namespace.useRef(null);
   const isFirstPointerMoveRef = React__namespace.useRef(false);
   const pendingSwipeRef = React__namespace.useRef(false);
   const pendingSwipeStartPosRef = React__namespace.useRef(null);
@@ -587,6 +620,7 @@ function useSwipeDismiss(options) {
   });
   const lastProgressDetailsRef = React__namespace.useRef(null);
   const isSwipingRef = React__namespace.useRef(false);
+  const dragStyleSnapshotRef = React__namespace.useRef(null);
   const setSwiping = useButton.useStableCallback(nextSwiping => {
     if (isSwipingRef.current === nextSwiping) {
       return;
@@ -632,6 +666,35 @@ function useSwipeDismiss(options) {
     }
     onProgress?.(nextProgress, details);
   });
+  const syncDragStyles = useButton.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;
@@ -653,18 +716,7 @@ function useSwipeDismiss(options) {
   const reset = React__namespace.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 = {
@@ -687,6 +739,7 @@ function useSwipeDismiss(options) {
       x: 0,
       y: 0
     };
+    lockedDirectionRef.current = null;
     isFirstPointerMoveRef.current = false;
     lastMovePosRef.current = null;
     pendingSwipeRef.current = false;
@@ -704,7 +757,8 @@ function useSwipeDismiss(options) {
       y: 0
     };
     lastProgressDetailsRef.current = null;
-  }, [setSwiping, swipeThresholdDefault, updateSwipeProgress]);
+    syncDragStyles(false);
+  }, [setSwiping, swipeThresholdDefault, syncDragStyles, updateSwipeProgress]);
   React__namespace.useEffect(() => {
     if (typeof swipeThresholdProp !== 'function') {
       swipeThresholdRef.current = swipeThresholdDefault;
@@ -786,11 +840,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
@@ -801,10 +850,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() {
@@ -822,19 +871,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');
@@ -844,6 +889,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);
@@ -964,17 +1010,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;
@@ -1039,12 +1080,7 @@ function useSwipeDismiss(options) {
       x: newOffsetX,
       y: newOffsetY
     };
-    if (trackDrag) {
-      setDragOffset({
-        x: newOffsetX,
-        y: newOffsetY
-      });
-    }
+    syncDragStyles(true);
     recordDragSample({
       x: newOffsetX,
       y: newOffsetY
@@ -1086,91 +1122,6 @@ function useSwipeDismiss(options) {
       direction: swipeDirectionDetails
     });
   }
-  const handleMove = useButton.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 = useButton.ownerDocument(element);
-            const body = doc.body;
-            const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
-            if (scrollTarget && (useButton.contains(element, scrollTarget) || useButton.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 = useButton.useStableCallback(event => {
     if (!enabled) {
       return;
@@ -1182,7 +1133,7 @@ function useSwipeDismiss(options) {
     const progressDetails = {
       deltaX: releaseDeltaX,
       deltaY: releaseDeltaY,
-      direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current
+      direction: intendedSwipeDirectionRef.current
     };
     if (!isSwipingRef.current) {
       resetPendingSwipeState();
@@ -1190,8 +1141,7 @@ function useSwipeDismiss(options) {
       return;
     }
     setSwiping(false);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
+    lockedDirectionRef.current = null;
     resetPendingSwipeState();
     sawPrimaryButtonsOnMoveRef.current = false;
     const element = elementRef.current;
@@ -1232,7 +1182,7 @@ function useSwipeDismiss(options) {
     }
     const releaseDecision = onRelease?.({
       event: event.nativeEvent,
-      direction: currentSwipeDirection ?? intendedSwipeDirectionRef.current,
+      direction: intendedSwipeDirectionRef.current,
       deltaX,
       deltaY,
       velocityX,
@@ -1246,11 +1196,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;
     }
@@ -1258,7 +1205,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) {
@@ -1295,6 +1242,7 @@ function useSwipeDismiss(options) {
     if (shouldClose && dismissDirection) {
       setCurrentSwipeDirection(dismissDirection);
       setDragDismissed(true);
+      syncDragStyles(false);
       onDismiss?.(event.nativeEvent, {
         direction: dismissDirection
       });
@@ -1303,34 +1251,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 = useButton.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 = useButton.ownerDocument(element);
+            const body = doc.body;
+            const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
+            if (scrollTarget && (useButton.contains(element, scrollTarget) || useButton.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 = useButton.useStableCallback((nativeEvent, currentTarget) => {
+    handleMove({
+      touches: nativeEvent.touches,
+      currentTarget,
+      nativeEvent,
+      defaultPrevented: nativeEvent.defaultPrevented,
+      timeStamp: nativeEvent.timeStamp
+    });
+  });
   const getDragStyles = React__namespace.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__namespace.useCallback(() => {
     if (!enabled) {
       return {};
@@ -1359,6 +1423,7 @@ function useSwipeDismiss(options) {
     dragDismissed,
     getPointerProps,
     getTouchProps,
+    moveNative,
     getDragStyles,
     reset
   };
@@ -1368,11 +1433,11 @@ let DrawerSwipeAreaDataAttributes = function (DrawerSwipeAreaDataAttributes) {
   /**
    * Present when the drawer is open.
    */
-  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = useScrollLock.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the drawer is closed.
    */
-  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = useScrollLock.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the swipe area is disabled.
    */
@@ -1439,8 +1504,9 @@ function resolveTouchAction(direction) {
  */
 const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function DrawerSwipeArea(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     disabled = false,
     swipeDirection: swipeDirectionProp,
     ...elementProps
@@ -1466,15 +1532,15 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   const appliedSwipeStylesRef = React__namespace.useRef(false);
   const popupTransitionRef = React__namespace.useRef(null);
   const swipeAreaId = useButton.useBaseUiId(componentProps.id);
-  const registerTrigger = ScrollAreaViewport.useTriggerRegistration(swipeAreaId, store);
+  const registerTrigger = useScrollLock.useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
-  const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
-  const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
-  const enabled = !disabled && (!open || swipeActive);
   const resetDragDelta = useButton.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;
@@ -1614,6 +1680,18 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
     }
     store.setOpen(false, useButton.createChangeEventDetails(useButton.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 = useSwipeDismiss({
     enabled,
     directions: [resolvedSwipeDirection],
@@ -1672,15 +1750,10 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
       } 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.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
@@ -1690,10 +1763,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
-      setSwipeActive(false);
-      openedBySwipeRef.current = false;
-      swipeStartEventRef.current = null;
-      closedOffsetRef.current = null;
+      resetSwipeInteractionState();
     }
   }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
   React__namespace.useEffect(() => {
@@ -1723,6 +1793,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
           return;
         }
         swipePointerProps.onPointerDown?.(event);
+
         // Prevent native text selection/drag gestures from competing with swipe-open dragging.
         if (event.cancelable) {
           event.preventDefault();
@@ -1753,6 +1824,12 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
 });
 if (process.env.NODE_ENV !== "production") DrawerSwipeArea.displayName = "DrawerSwipeArea";
 
+const DrawerVirtualKeyboardContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DrawerVirtualKeyboardContext.displayName = "DrawerVirtualKeyboardContext";
+function useDrawerVirtualKeyboardContext() {
+  return React__namespace.useContext(DrawerVirtualKeyboardContext);
+}
+
 const MIN_SWIPE_THRESHOLD = 10;
 const FAST_SWIPE_VELOCITY = 0.5;
 const SNAP_VELOCITY_THRESHOLD = 0.5;
@@ -1773,14 +1850,17 @@ const DRAWER_CONTENT_SELECTOR = `[${ScrollAreaViewport.DRAWER_CONTENT_ATTRIBUTE}
  */
 const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerViewport(props, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     children,
     ...elementProps
   } = props;
   const {
     store
   } = ScrollAreaViewport.useDialogRootContext();
+  const popupRef = store.context.popupRef;
+  const backdropRef = store.context.backdropRef;
   const {
     swipeDirection,
     notifyParentSwipingChange,
@@ -1789,17 +1869,6 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     snapToSequentialPoints
   } = ScrollAreaViewport.useDrawerRootContext();
   const providerContext = ScrollAreaViewport.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,
@@ -1808,15 +1877,28 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     setActiveSnapPoint,
     popupHeight
   } = ScrollAreaViewport.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__namespace.useState(null);
   const pendingSwipeCloseSnapPointRef = React__namespace.useRef(undefined);
   const resetSwipeRef = React__namespace.useRef(null);
   const controlledDismissFrame = useButton.useAnimationFrame();
+  const swipingRef = React__namespace.useRef(false);
   const nestedSwipeActiveRef = React__namespace.useRef(false);
   const lastPointerTypeRef = React__namespace.useRef('');
   const ignoreNextTouchStartFromPenRef = React__namespace.useRef(false);
   const ignoreTouchSwipeRef = React__namespace.useRef(false);
   const touchScrollStateRef = React__namespace.useRef(null);
+  const virtualKeyboard = useDrawerVirtualKeyboardContext();
   const snapPointRange = React__namespace.useMemo(() => {
     if (!snapPoints || snapPoints.length < 2) {
       return null;
@@ -1860,13 +1942,20 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     return [swipeDirection];
   }, [snapPoints, swipeDirection]);
   const setSwipeDismissed = useButton.useStableCallback(dismissed => {
-    setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
+    setSwipeDismissedElements(popupRef.current, backdropRef.current, dismissed);
   });
   const clearSwipeRelease = useButton.useStableCallback(() => {
     setSwipeDismissed(false);
-    store.context.popupRef.current?.removeAttribute(useButton.TransitionStatusDataAttributes.endingStyle);
+    popupRef.current?.removeAttribute(useButton.TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
+  const finishNestedSwipe = useButton.useStableCallback(() => {
+    if (!nestedSwipeActiveRef.current) {
+      return;
+    }
+    nestedSwipeActiveRef.current = false;
+    notifyParentSwipingChange?.(false);
+  });
   const applySwipeProgress = useButton.useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
@@ -1874,15 +1963,18 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
   }) => {
     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;
     }
@@ -1977,7 +2069,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       if ('touches' in event || 'pointerType' in event && event.pointerType === 'touch') {
         return;
       }
-      const popupElement = store.context.popupRef.current;
+      const popupElement = popupRef.current;
       if (!popupElement) {
         return;
       }
@@ -1994,10 +2086,10 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       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({
@@ -2028,9 +2120,16 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     },
     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(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementY, `${ScrollAreaViewport.getSnapPointSwipeMovement(activeSnapPointOffset ?? 0, details.deltaY)}px`);
+        }
+      }
       const currentDirection = details?.direction ?? swipe.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;
@@ -2079,7 +2178,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         if (!popupElement) {
           return;
         }
-        notifyParentSwipingChange?.(false);
+        finishNestedSwipe();
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
         popupElement.setAttribute(useButton.TransitionStatusDataAttributes.endingStyle, '');
@@ -2286,7 +2385,10 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
   });
   const swipePointerProps = swipe.getPointerProps();
   const swipeTouchProps = swipe.getTouchProps();
-  const resetSwipe = swipe.reset;
+  const {
+    moveNative: moveSwipeNative,
+    reset: resetSwipe
+  } = swipe;
   resetSwipeRef.current = resetSwipe;
   React__namespace.useEffect(() => {
     const rootElement = viewportElement ?? popupElementState;
@@ -2297,6 +2399,11 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     const doc = useButton.ownerDocument(resolvedRootElement);
     const win = floatingUi_utils_dom.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;
       }
@@ -2333,6 +2440,10 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         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;
       }
@@ -2343,6 +2454,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         if (event.cancelable) {
           event.preventDefault();
         }
+        event.stopPropagation();
         updateTouchScrollPosition(touchState, touch);
         return;
       }
@@ -2362,18 +2474,17 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
           event.preventDefault();
         }
       }
+      if (touchState.allowSwipe === true) {
+        event.stopPropagation();
+        moveSwipeNative(event, resolvedRootElement);
+      }
       updateTouchScrollPosition(touchState, touch);
     }
-    doc.addEventListener('touchmove', handleNativeTouchMove, {
+    return useButton.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__namespace.useEffect(() => {
     if (!snapPointRange || swipe.swiping) {
       return;
@@ -2403,23 +2514,30 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     }
   }, [clearSwipeRelease, open, resetSwipe]);
   React__namespace.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__namespace.useMemo(() => ({
     swiping: swipe.swiping,
     getDragStyles: swipe.getDragStyles,
     swipeStrength: swipeRelease ?? null,
-    setSwipeDismissed(dismissed) {
-      setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
-    }
-  }), [store, swipe.getDragStyles, swipe.swiping, swipeRelease]);
+    setSwipeDismissed
+  }), [setSwipeDismissed, swipe.getDragStyles, swipe.swiping, swipeRelease]);
   function resetTouchTrackingState() {
     ignoreTouchSwipeRef.current = false;
     touchScrollStateRef.current = null;
@@ -2429,6 +2547,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
   return /*#__PURE__*/jsxRuntime.jsx(DrawerDescription.DialogViewport, {
     ref: forwardedRef,
     className: className,
+    style: style,
     render: render,
     ...useRenderElement.mergeProps(elementProps, {
       onPointerDown(event) {
@@ -2495,16 +2614,23 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         }
         const doc = useButton.ownerDocument(event.currentTarget);
         const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
+        const rootElement = viewportElement ?? popupElementState;
+        const eventTarget = useButton.getTarget(event.nativeEvent);
+        const target = floatingUi_utils_dom.isElement(eventTarget) ? eventTarget : null;
+        if (rootElement && target && !useButton.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 = floatingUi_utils_dom.isElement(event.target) ? event.target : null;
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && useButton.contains(rootElement, target)) {
+        if (rootElement && target) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -2525,27 +2651,13 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         };
         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);
       },
@@ -2569,149 +2681,617 @@ function setSwipeDismissedElements(popupElement, backdropElement, dismissed) {
   popupElement?.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swipeDismiss);
   backdropElement?.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swipeDismiss);
 }
-function setBackdropSwipingAttribute(backdropElement, swiping) {
-  if (!backdropElement) {
-    return;
-  }
-  if (swiping) {
-    backdropElement.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping, '');
-    return;
+function setBackdropSwipingAttribute(backdropElement, swiping) {
+  if (!backdropElement) {
+    return;
+  }
+  if (swiping) {
+    backdropElement.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping, '');
+    return;
+  }
+  backdropElement.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping);
+}
+function isSwipeIgnoredTarget(target) {
+  return Boolean(target?.closest(useScrollLock.BASE_UI_SWIPE_IGNORE_SELECTOR));
+}
+function isDrawerContentTarget(target) {
+  return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
+}
+function getBaseSwipeThreshold(element, direction) {
+  const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
+  return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
+}
+function isRangeInput(target, win) {
+  return target instanceof win.HTMLInputElement && target.type === 'range';
+}
+function isTextSelectionControl(target) {
+  if (!floatingUi_utils_dom.isElement(target)) {
+    return false;
+  }
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+}
+function hasExpandedSelectionWithinTarget(selection, target) {
+  const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+  const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+  return selection.containsNode(target, true) || useButton.contains(target, anchorElement) || useButton.contains(target, focusElement);
+}
+function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
+  const activeEl = useButton.activeElement(doc);
+  const activeElementWithinRoot = Boolean(activeEl && useButton.contains(rootElement, activeEl));
+  if (activeElementWithinRoot && isTextSelectionControl(activeEl)) {
+    const {
+      selectionStart,
+      selectionEnd
+    } = 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(useButton.getTarget(event), win);
+}
+function isReactTouchEventOnRangeInput(event) {
+  return isEventOnRangeInput(event.nativeEvent, floatingUi_utils_dom.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
+  } = ScrollAreaViewport.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__namespace.useRef(false);
+  const keyboardTouchStartRef = React__namespace.useRef(null);
+  const focusedKeyboardTargetRef = React__namespace.useRef(null);
+  const keyboardScrollAdjustmentRef = React__namespace.useRef(null);
+  const keyboardFocusFrame = useButton.useAnimationFrame();
+  const restoreKeyboardScrollAdjustment = useButton.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 = useButton.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 = floatingUi_utils_dom.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 = useButton.useStableCallback((element, scrollTop) => {
+    const win = floatingUi_utils_dom.getWindow(element);
+    const behavior = win.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ? 'auto' : 'smooth';
+    element.scrollTo({
+      top: scrollTop,
+      behavior
+    });
+  });
+  const resetTouchTrackingState = useButton.useStableCallback(() => {
+    pendingKeyboardFocusMovedRef.current = false;
+    keyboardTouchStartRef.current = null;
+  });
+  React__namespace.useEffect(() => {
+    if (!mounted || !open) {
+      focusedKeyboardTargetRef.current = null;
+      restoreKeyboardScrollAdjustment();
+      keyboardFocusFrame.cancel();
+      return undefined;
+    }
+    if (!rootElement) {
+      restoreKeyboardScrollAdjustment();
+      return undefined;
+    }
+    const doc = useButton.ownerDocument(rootElement);
+    const win = floatingUi_utils_dom.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 || !useButton.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 || !useButton.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.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 || !useButton.contains(rootElement, target)) {
+        return false;
+      }
+      focusedKeyboardTargetRef.current = target;
+      return true;
+    };
+    const handleFocusIn = event => {
+      if (captureFocusedKeyboardTarget(useButton.getTarget(event))) {
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+    const handleFocusOut = event => {
+      if (captureFocusedKeyboardTarget(event.relatedTarget)) {
+        scheduleKeyboardFocusAlignment();
+        return;
+      }
+      clearFocusedKeyboardTarget();
+    };
+    const handleViewportUpdate = () => {
+      if (focusedKeyboardTargetRef.current || captureFocusedKeyboardTarget(useButton.activeElement(doc))) {
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+    const cleanupListeners = [];
+    if (visualViewport) {
+      cleanupListeners.push(useButton.addEventListener(visualViewport, 'resize', handleViewportUpdate), useButton.addEventListener(visualViewport, 'scroll', handleViewportUpdate));
+    }
+    cleanupListeners.push(useButton.addEventListener(doc, 'focusin', handleFocusIn, true), useButton.addEventListener(doc, 'focusout', handleFocusOut, true));
+    if (captureFocusedKeyboardTarget(useButton.activeElement(doc))) {
+      scheduleKeyboardFocusAlignment();
+    }
+    return () => {
+      cleanupListeners.forEach(cleanup => cleanup());
+      clearFocusedKeyboardTarget();
+      rootElement.style.removeProperty(DrawerViewportCssVars.keyboardInset);
+    };
+  }, [animateKeyboardScroll, keyboardFocusFrame, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
+  const onTouchStart = useButton.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 = useButton.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 = useButton.useStableCallback(event => {
+    if (!open || !mounted || nestedDrawerOpen || !rootElement || !keyboardTouchStartRef.current || pendingKeyboardFocusMovedRef.current) {
+      resetTouchTrackingState();
+      return;
+    }
+    const touch = event.changedTouches[0] ?? event.touches[0];
+    const doc = useButton.ownerDocument(event.currentTarget);
+    const nativeEventTarget = useButton.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 && (!useButton.contains(rootElement, keyboardTarget.focusTarget) || !useButton.contains(rootElement, keyboardTarget.clickTarget))) {
+      resetTouchTrackingState();
+      return;
+    }
+    if (keyboardTarget) {
+      const {
+        clickTarget: keyboardClickTarget,
+        focusTarget: keyboardFocusTarget
+      } = keyboardTarget;
+      const win = floatingUi_utils_dom.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 (useButton.activeElement(useButton.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__namespace.useMemo(() => ({
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onTouchCancel: resetTouchTrackingState
+  }), [onTouchEnd, onTouchMove, onTouchStart, resetTouchTrackingState]);
+  return /*#__PURE__*/jsxRuntime.jsx(DrawerVirtualKeyboardContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+function isKeyboardInputElement(element) {
+  if (element.isContentEditable) {
+    return true;
   }
-  backdropElement.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping);
-}
-function isSwipeIgnoredTarget(target) {
-  return Boolean(target?.closest(InternalBackdrop.BASE_UI_SWIPE_IGNORE_SELECTOR));
-}
-function isDrawerContentTarget(target) {
-  return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
-}
-function getBaseSwipeThreshold(element, direction) {
-  const size = direction === 'left' || direction === 'right' ? element.offsetWidth : element.offsetHeight;
-  return Math.max(size * 0.5, MIN_SWIPE_THRESHOLD);
-}
-function isRangeInput(target, win) {
-  return target instanceof win.HTMLInputElement && target.type === 'range';
-}
-function isTextSelectionControl(target) {
-  if (!floatingUi_utils_dom.isElement(target)) {
-    return false;
+  const win = floatingUi_utils_dom.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');
   }
-  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
-}
-function hasExpandedSelectionWithinTarget(selection, target) {
-  const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
-  const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-  return selection.containsNode(target, true) || useButton.contains(target, anchorElement) || useButton.contains(target, focusElement);
+  return false;
 }
-function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
-  const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && useButton.contains(rootElement, activeElement));
-  if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
-    const {
-      selectionStart,
-      selectionEnd
-    } = activeElement;
-    if (selectionStart != null && selectionEnd != null && selectionStart < selectionEnd) {
-      return true;
-    }
+function resolveKeyboardInputTarget(target) {
+  if (!floatingUi_utils_dom.isHTMLElement(target)) {
+    return null;
   }
-  const selection = doc.getSelection?.();
-  if (!selection || selection.isCollapsed) {
-    return false;
+  if (isKeyboardInputElement(target)) {
+    return target.isContentEditable ? getContentEditableHost(target) : target;
   }
-  return hasExpandedSelectionWithinTarget(selection, rootElement);
+  const label = target.closest('label');
+  const control = label?.control ?? null;
+  return floatingUi_utils_dom.isHTMLElement(control) && isKeyboardInputElement(control) ? control : null;
 }
-function isEventOnRangeInput(event, win) {
-  const composedPath = event.composedPath();
-  if (composedPath) {
-    return composedPath.some(pathTarget => isRangeInput(pathTarget, win));
+function resolveKeyboardTouchTarget(target) {
+  const focusTarget = resolveKeyboardInputTarget(target);
+  if (!focusTarget) {
+    return null;
   }
-  return isRangeInput(event.target, win);
-}
-function isReactTouchEventOnRangeInput(event) {
-  return isEventOnRangeInput(event.nativeEvent, floatingUi_utils_dom.getWindow(event.currentTarget));
-}
-function updateTouchScrollPosition(touchState, touch) {
-  touchState.lastX = touch.clientX;
-  touchState.lastY = touch.clientY;
+  return {
+    focusTarget,
+    clickTarget: floatingUi_utils_dom.isHTMLElement(target) ? target : focusTarget
+  };
 }
-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;
+
+// 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;
   }
-  touchState.preserveNativeCrossAxisScroll = true;
-  return true;
-}
-function hasScrollableContentOnAxis(scrollTarget, axis) {
-  return axis === 'vertical' ? scrollTarget.scrollHeight > scrollTarget.clientHeight : scrollTarget.scrollWidth > scrollTarget.clientWidth;
+  return host;
 }
-function getScrollMetrics(scrollTarget, axis) {
-  if (axis === 'vertical') {
-    const max = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight);
+function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
+  const exactTarget = getElementAtPoint(doc, clientX, clientY);
+  const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
+  if (exactKeyboardTarget) {
     return {
-      offset: scrollTarget.scrollTop,
-      max
+      focusTarget: exactKeyboardTarget,
+      clickTarget: floatingUi_utils_dom.isHTMLElement(exactTarget) ? exactTarget : exactKeyboardTarget
     };
   }
-  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;
+
+  // 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 (useScrollLock.isInteractiveElement(exactTarget) || exactTarget?.closest('label') != null) {
+    return KEYBOARD_TAP_BLOCKED;
   }
-  const movingTowardDismiss = dismissFromStartEdge ? delta > 0 : delta < 0;
-  if (!movingTowardDismiss) {
-    return false;
+  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
+      };
+    }
   }
-  return dismissFromStartEdge ? offset <= 0 : offset >= max;
+  return null;
 }
-function shouldDismissFromStartEdge(direction, axis) {
-  if (axis === 'vertical') {
-    if (direction === 'down') {
-      return true;
-    }
-    if (direction === 'up') {
-      return false;
+function dispatchKeyboardClick(target, touch) {
+  const win = floatingUi_utils_dom.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 = useButton.activeElement(useButton.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 = floatingUi_utils_dom.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({
@@ -2731,6 +3311,7 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   Title: DrawerTitle.DrawerTitle,
   Trigger: ScrollAreaViewport.DrawerTrigger,
   Viewport: DrawerViewport,
+  VirtualKeyboardProvider: DrawerVirtualKeyboardProvider,
   createHandle: DrawerDescription.createDialogHandle
 });
 
@@ -2742,8 +3323,9 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
  */
 const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -2765,7 +3347,7 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
   };
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: InternalBackdrop.popupStateMapping,
+    stateAttributesMapping: useScrollLock.popupStateMapping,
     state,
     props: {
       style: arrowStyles,
@@ -2804,6 +3386,7 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     checked: checkedProp,
     defaultChecked,
     onCheckedChange,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem.useCompositeListItem({
@@ -2832,7 +3415,7 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     id,
     store,
     nativeButton,
-    nodeId: menuPositionerContext?.nodeId,
+    nodeId: menuPositionerContext?.context.nodeId,
     itemMetadata: MenuSubmenuTrigger.REGULAR_ITEM
   });
   const state = React__namespace.useMemo(() => ({
@@ -2840,17 +3423,16 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useButton.useStableCallback(event => {
-    const details = {
-      ...useButton.createChangeEventDetails(useButton.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = useButton.createChangeEventDetails(useButton.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     onCheckedChange?.(!checked, details);
     if (details.isCanceled) {
       return;
     }
     setChecked(currentlyChecked => !currentlyChecked);
-  });
+  }
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: MenuSubmenuTrigger.itemMapping,
@@ -2878,6 +3460,7 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(funct
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;
@@ -2916,25 +3499,6 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(funct
 });
 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__namespace.useState({
-    current: value,
-    previous: null
-  });
-  if (value !== state.current) {
-    setState({
-      current: value,
-      previous: state.current
-    });
-  }
-  return state.previous;
-}
-
 function getCssDimensions(element) {
   const css = floatingUi_utils_dom.getComputedStyle(element);
   // In testing environments, the `width` and `height` properties are empty
@@ -2944,7 +3508,7 @@ function getCssDimensions(element) {
   const hasOffset = floatingUi_utils_dom.isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
-  const shouldFallback = index_esm.round(width) !== offsetWidth || index_esm.round(height) !== offsetHeight;
+  const shouldFallback = floatingUi_utils.round(width) !== offsetWidth || floatingUi_utils.round(height) !== offsetHeight;
   if (shouldFallback) {
     width = offsetWidth;
     height = offsetHeight;
@@ -2955,8 +3519,6 @@ function getCssDimensions(element) {
   };
 }
 
-const DEFAULT_ENABLED = () => true;
-
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */
@@ -2966,7 +3528,6 @@ function usePopupAutoResize(parameters) {
     positionerElement,
     content,
     mounted,
-    enabled = DEFAULT_ENABLED,
     onMeasureLayout: onMeasureLayoutParam,
     onMeasureLayoutComplete: onMeasureLayoutCompleteParam,
     side,
@@ -2975,7 +3536,6 @@ function usePopupAutoResize(parameters) {
   const runOnceAnimationsFinish = useButton.useAnimationsFinished(popupElement, true, false);
   const animationFrame = useButton.useAnimationFrame();
   const committedDimensionsRef = React__namespace.useRef(null);
-  const liveDimensionsRef = React__namespace.useRef(null);
   const isInitialRenderRef = React__namespace.useRef(true);
   const restoreAnchoringStylesRef = React__namespace.useRef(useRenderElement.NOOP);
   const onMeasureLayout = useButton.useStableCallback(onMeasureLayoutParam);
@@ -2999,27 +3559,16 @@ function usePopupAutoResize(parameters) {
   }, [side, direction]);
   useButton.useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
-    if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
+    if (!mounted) {
       restoreAnchoringStylesRef.current = useRenderElement.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');
@@ -3051,32 +3600,18 @@ function usePopupAutoResize(parameters) {
       onMeasureLayoutComplete?.(null, dimensions);
       isInitialRenderRef.current = false;
       return () => {
-        observer.disconnect();
         restoreAnchoringStylesRef.current();
         restoreAnchoringStylesRef.current = useRenderElement.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 = useRenderElement.NOOP;
-      };
-    }
     setPopupCssSize(popupElement, previousDimensions);
     restoreMeasurementOverridesIncludingScale();
     onMeasureLayoutComplete?.(previousDimensions, newDimensions);
@@ -3090,13 +3625,12 @@ function usePopupAutoResize(parameters) {
       }, abortController.signal);
     });
     return () => {
-      observer.disconnect();
       abortController.abort();
       animationFrame.cancel();
       restoreAnchoringStylesRef.current();
       restoreAnchoringStylesRef.current = useRenderElement.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);
@@ -3138,7 +3672,7 @@ function usePopupViewport(parameters) {
     cssVars,
     children
   } = parameters;
-  const direction = InternalBackdrop.useDirection();
+  const direction = useScrollLock.useDirection();
   const activeTrigger = store.useState('activeTriggerElement');
   const activeTriggerId = store.useState('activeTriggerId');
   const open = store.useState('open');
@@ -3146,7 +3680,7 @@ function usePopupViewport(parameters) {
   const mounted = store.useState('mounted');
   const popupElement = store.useState('popupElement');
   const positionerElement = store.useState('positionerElement');
-  const previousActiveTrigger = usePreviousValue(open ? activeTrigger : null);
+  const previousActiveTrigger = SelectGroupLabel.usePreviousValue(open ? activeTrigger : null);
   // Remount current content on trigger changes (and once more when payload lags) to avoid DOM reuse flashes.
   // The key bumps immediately on trigger switches, then again if the payload arrives on a later render.
   const currentContentKey = usePopupContentKey(activeTriggerId, payload);
@@ -3179,6 +3713,11 @@ function usePopupViewport(parameters) {
     }
   });
   const lastHandledTriggerRef = React__namespace.useRef(null);
+  useButton.useIsoLayoutEffect(() => {
+    if (!open || !mounted) {
+      lastHandledTriggerRef.current = null;
+    }
+  }, [open, mounted]);
   useButton.useIsoLayoutEffect(() => {
     // When a trigger changes, set the captured children HTML to state,
     // so we can render both new and old content.
@@ -3217,7 +3756,7 @@ function usePopupViewport(parameters) {
     if (!source) {
       return;
     }
-    const wrapper = document.createElement('div');
+    const wrapper = useButton.ownerDocument(source).createElement('div');
     for (const child of Array.from(source.childNodes)) {
       wrapper.appendChild(child.cloneNode(true));
     }
@@ -3235,7 +3774,7 @@ function usePopupViewport(parameters) {
     childrenToRender = /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         "data-previous": true,
-        inert: InternalBackdrop.inertValue(true),
+        inert: useScrollLock.inertValue(true),
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
@@ -3389,8 +3928,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)
@@ -3399,6 +3938,7 @@ const MenuViewport = /*#__PURE__*/React__namespace.forwardRef(function MenuViewp
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -3469,7 +4009,7 @@ class MenuHandle {
    * Indicates whether the menu is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 
@@ -3542,6 +4082,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
     className,
     orientation = 'vertical',
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3557,6 +4098,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
     thumbXRef,
     handlePointerDown,
     handlePointerUp,
+    handleScroll,
     rootId,
     thumbSize,
     hasMeasuredScrollbar
@@ -3576,9 +4118,14 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
   };
-  const direction = InternalBackdrop.useDirection();
+  const direction = useScrollLock.useDirection();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
   React__namespace.useEffect(() => {
+    if (!shouldRender) {
+      return undefined;
+    }
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
@@ -3588,34 +4135,34 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
       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 useButton.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`
@@ -3624,9 +4171,12 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
       if (event.button !== 0) {
         return;
       }
+      const target = useButton.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 && useButton.contains(thumb, target)) {
         return;
       }
       if (!viewportRef.current) {
@@ -3671,9 +4221,16 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
         }
         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',
@@ -3703,8 +4260,6 @@ const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function Sc
   const contextValue = React__namespace.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
-  const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;
   }
@@ -3725,34 +4280,42 @@ const ScrollAreaContent = /*#__PURE__*/React__namespace.forwardRef(function Scro
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
-  const contentWrapperRef = React__namespace.useRef(null);
   const {
     computeThumbPosition
   } = ScrollAreaViewport.useScrollAreaViewportContext();
   const {
+    hasMeasuredScrollbar,
     viewportState
   } = ScrollAreaViewport.useScrollAreaRootContext();
+  const contentWrapperRef = React__namespace.useRef(null);
+  const computeOnInitialResizeRef = React__namespace.useRef(hasMeasuredScrollbar);
   useButton.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.useRenderElement('div', componentProps, {
@@ -3780,6 +4343,7 @@ const ScrollAreaThumb = /*#__PURE__*/React__namespace.forwardRef(function Scroll
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3790,29 +4354,34 @@ const ScrollAreaThumb = /*#__PURE__*/React__namespace.forwardRef(function Scroll
     handlePointerUp,
     setScrollingX,
     setScrollingY,
+    scrollingX,
+    scrollingY,
     hasMeasuredScrollbar
   } = ScrollAreaViewport.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.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' && {
@@ -3838,6 +4407,7 @@ const ScrollAreaCorner = /*#__PURE__*/React__namespace.forwardRef(function Scrol
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3916,32 +4486,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 = floatingUi_utils_dom.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
   };
 }
 
@@ -3958,12 +4528,21 @@ function subscribeToVisualViewportResize(element, visualScaleRef) {
     }
   }
   handleVisualResize();
-  vV.addEventListener('resize', handleVisualResize);
-  return () => {
-    vV.removeEventListener('resize', handleVisualResize);
-  };
+  return useButton.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__namespace.forwardRef(function NumberFieldScrubArea(componentProps, forwardedRef) {
   const {
     render,
@@ -3971,6 +4550,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     direction = 'horizontal',
     pixelSensitivity = 2,
     teleportDistance,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -3980,6 +4560,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     readOnly,
     inputRef,
     incrementValue,
+    allowInputSyncRef,
     getStepAmount,
     onValueCommitted,
     lastChangedValueRef,
@@ -4027,15 +4608,15 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     };
     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);
@@ -4078,8 +4659,10 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
 
           // 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 (floatingUi_utils_dom.getWindow(input).MouseEvent)('click', {
               bubbles: true,
               cancelable: true
             }));
@@ -4088,7 +4671,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
           pointerDownTargetRef.current = null;
         }
       }
-      if (useButton.isFirefox) {
+      if (useScrollLock.gecko) {
         // Firefox needs a small delay here when soft-clicking as the pointer
         // lock will not release otherwise.
         exitPointerLockTimeout.start(20, handler);
@@ -4113,9 +4696,10 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
         cumulativeDelta = 0;
         didMoveRef.current = true;
         const dValue = direction === 'vertical' ? -movementY : movementX;
-        const stepAmount = getStepAmount(event) ?? NumberFieldInput.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,
@@ -4125,14 +4709,26 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
       }
     }
     const win = floatingUi_utils_dom.getWindow(inputRef.current);
-    win.addEventListener('pointerup', handleScrubPointerUp, true);
-    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    const unsubscribe = useScrollLock.mergeCleanups(useButton.addEventListener(win, 'pointerup', handleScrubPointerUp, true), useButton.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__namespace.useEffect(() => () => {
+    if (isScrubbingRef.current) {
+      isScrubbingRef.current = false;
+      setRootScrubbing(false);
+      try {
+        useButton.ownerDocument(scrubAreaRef.current).exitPointerLock();
+      } catch {
+        // Ignore errors.
+      }
+    }
+  }, [setRootScrubbing]);
 
   // Prevent scrolling using touch input when scrubbing.
   React__namespace.useEffect(function registerScrubberTouchPreventListener() {
@@ -4145,18 +4741,11 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
         event.preventDefault();
       }
     }
-    element.addEventListener('touchstart', handleTouchStart);
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-    };
+    return useButton.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) {
@@ -4170,11 +4759,11 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
       }
       isScrubbingRef.current = true;
       didMoveRef.current = false;
-      pointerDownTargetRef.current = event.target;
+      pointerDownTargetRef.current = useButton.getTarget(event.nativeEvent);
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.
-      if (!isTouch && !useButton.isWebKit) {
+      if (!isTouch && !useScrollLock.webkit) {
         try {
           // Avoid non-deterministic errors in testing environments. This error sometimes
           // appears:
@@ -4184,10 +4773,11 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
         } 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__namespace.flushSync(() => {
-              onScrubbingChange(true, event.nativeEvent);
-            });
+            onScrubbingChange(true, event.nativeEvent);
           }
         }
       }
@@ -4203,12 +4793,8 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     isScrubbing,
     isTouchInput,
     isPointerLockDenied,
-    scrubAreaCursorRef,
-    scrubAreaRef,
-    direction,
-    pixelSensitivity,
-    teleportDistance
-  }), [isScrubbing, isTouchInput, isPointerLockDenied, direction, pixelSensitivity, teleportDistance]);
+    scrubAreaCursorRef
+  }), [isScrubbing, isTouchInput, isPointerLockDenied]);
   return /*#__PURE__*/jsxRuntime.jsx(NumberFieldScrubAreaContext.Provider, {
     value: contextValue,
     children: element
@@ -4216,6 +4802,13 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
 });
 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.
@@ -4229,6 +4822,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -4241,19 +4835,14 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
     scrubAreaCursorRef
   } = useNumberFieldScrubAreaContext();
   const [domElement, setDomElement] = React__namespace.useState(null);
-  const shouldRender = isScrubbing && !useButton.isWebKit && !isTouchInput && !isPointerLockDenied;
+  const shouldRender = isScrubbing && !useScrollLock.webkit && !isTouchInput && !isPointerLockDenied;
   const element = useRenderElement.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: NumberFieldInput.stateAttributesMapping
   });
@@ -4282,6 +4871,7 @@ const SelectLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectLabe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
@@ -4291,8 +4881,8 @@ const SelectLabel = /*#__PURE__*/React__namespace.forwardRef(function SelectLabe
   const {
     store
   } = SelectGroupLabel.useSelectRootContext();
-  const triggerElement = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.triggerElement);
-  const rootId = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.id);
+  const triggerElement = useScrollLock.useStore(store, SelectGroupLabel.selectors.triggerElement);
+  const rootId = useScrollLock.useStore(store, SelectGroupLabel.selectors.id);
   const defaultLabelId = resolveAriaLabelledBy.getDefaultLabelId(rootId);
   const labelProps = useLabel.useLabel({
     id: defaultLabelId,
@@ -4318,14 +4908,15 @@ if (process.env.NODE_ENV !== "production") SelectLabel.displayName = "SelectLabe
  */
 const SelectIcon = /*#__PURE__*/React__namespace.forwardRef(function SelectIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
     store
   } = SelectGroupLabel.useSelectRootContext();
-  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open);
+  const open = useScrollLock.useStore(store, SelectGroupLabel.selectors.open);
   const state = {
     open
   };
@@ -4336,35 +4927,36 @@ const SelectIcon = /*#__PURE__*/React__namespace.forwardRef(function SelectIcon(
       'aria-hidden': true,
       children: '▼'
     }, elementProps],
-    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping
+    stateAttributesMapping: useScrollLock.triggerOpenStateMapping
   });
   return element;
 });
 if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
 
 const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
 /**
- * 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__namespace.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
     store
   } = SelectGroupLabel.useSelectRootContext();
-  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open);
-  const mounted = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.mounted);
-  const transitionStatus = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.transitionStatus);
+  const open = useScrollLock.useStore(store, SelectGroupLabel.selectors.open);
+  const mounted = useScrollLock.useStore(store, SelectGroupLabel.selectors.mounted);
+  const transitionStatus = useScrollLock.useStore(store, SelectGroupLabel.selectors.transitionStatus);
   const state = {
     open,
     transitionStatus
@@ -4387,7 +4979,7 @@ const SelectBackdrop = /*#__PURE__*/React__namespace.forwardRef(function SelectB
 if (process.env.NODE_ENV !== "production") SelectBackdrop.displayName = "SelectBackdrop";
 
 const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -4399,8 +4991,9 @@ const stateAttributesMapping = {
  */
 const SelectArrow = /*#__PURE__*/React__namespace.forwardRef(function SelectArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -4414,7 +5007,7 @@ const SelectArrow = /*#__PURE__*/React__namespace.forwardRef(function SelectArro
     arrowUncentered,
     alignItemWithTriggerActive
   } = SelectGroupLabel.useSelectPositionerContext();
-  const open = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.open, true);
+  const open = useScrollLock.useStore(store, SelectGroupLabel.selectors.open);
   const state = {
     open,
     side,
@@ -4444,10 +5037,12 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
   const {
     render,
     className,
+    style,
     direction,
     keepMounted = false,
     ...elementProps
   } = componentProps;
+  const isUp = direction === 'up';
   const {
     store,
     popupRef,
@@ -4460,15 +5055,16 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
     scrollDownArrowRef,
     scrollUpArrowRef
   } = SelectGroupLabel.useSelectPositionerContext();
-  const visibleSelector = direction === 'up' ? SelectGroupLabel.selectors.scrollUpArrowVisible : SelectGroupLabel.selectors.scrollDownArrowVisible;
-  const stateVisible = InternalBackdrop.useStore(store, visibleSelector);
-  const openMethod = InternalBackdrop.useStore(store, SelectGroupLabel.selectors.openMethod);
+  const visibleSelector = isUp ? SelectGroupLabel.selectors.scrollUpArrowVisible : SelectGroupLabel.selectors.scrollDownArrowVisible;
+  const stateVisible = useScrollLock.useStore(store, visibleSelector);
+  const openMethod = useScrollLock.useStore(store, SelectGroupLabel.selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
   const timeout = useButton.useTimeout();
-  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = useButton.useTransitionStatus(visible);
@@ -4501,7 +5097,7 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
   };
   const defaultProps = {
     'aria-hidden': true,
-    children: direction === 'up' ? '▲' : '▼',
+    children: isUp ? '▲' : '▼',
     style: {
       position: 'absolute'
     },
@@ -4517,72 +5113,25 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
         }
         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 = scrollEdges.getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+        const scrollTop = scrollEdges.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);
       }
@@ -4595,15 +5144,44 @@ const SelectScrollArrow = /*#__PURE__*/React__namespace.forwardRef(function Sele
   const element = useRenderElement.useRenderElement('div', componentProps, {
     ref: [forwardedRef, scrollArrowRef],
     state,
-    props: [defaultProps, elementProps]
+    props: [defaultProps, elementProps],
+    stateAttributesMapping: useButton.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 - scrollEdges.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 ? scrollEdges.normalizeScrollOffset(targetItem.offsetTop - scrollArrowHeight, maxScrollTop) : 0;
+  }
+  let lastVisibleIndex = items.length - 1;
+  const visibleBottom = scrollTop + clientHeight - scrollArrowHeight + scrollEdges.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 ? scrollEdges.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.