@jobber/components 9.5.3 → 9.6.0

package/dist/unstyledPrimitives/index.mjs

@@ -1,22 +1,21 @@
 import * as React from 'react';
-import { A as useCoreFilter, B as AriaCombobox, D as useComboboxInputValueContext, e as ComboboxTrigger, d as ComboboxInputGroup, p as ComboboxItem, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, z as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, b as ComboboxValue, y as useComboboxFilter } from '../ComboboxChipRemove-es.js';
-import { m as stringifyAsLabel, z as useCompositeListItem, b as useFieldRootContext, f as fieldValidityMapping, J as getDefaultLabelId } from '../useCompositeListItem-es.js';
+import { B as useCoreFilter, D as AriaCombobox, E as useComboboxInputValueContext, e as ComboboxTrigger, d as ComboboxInputGroup, p as ComboboxItem, L as ListboxSeparator, l as ComboboxArrow, i as ComboboxBackdrop, x as ComboboxClear, v as ComboboxCollection, w as ComboboxEmpty, n as ComboboxGroup, o as ComboboxGroupLabel, m as ComboboxIcon, c as ComboboxInput, f as ComboboxList, k as ComboboxPopup, h as ComboboxPortal, j as ComboboxPositioner, u as ComboboxRow, g as ComboboxStatus, A as useFilteredItems, s as ComboboxChip, t as ComboboxChipRemove, r as ComboboxChips, q as ComboboxItemIndicator, a as ComboboxLabel, C as ComboboxRoot, y as ComboboxSeparator, b as ComboboxValue, z as useComboboxFilter } from '../ComboboxSeparator-es.js';
+import { n as stringifyAsLabel, A as useCompositeListItem, M as DEFAULT_SIDES, b as useFieldRootContext, f as fieldValidityMapping, K as getDefaultLabelId } from '../useCompositeListItem-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { bn as pointer, a as useIsoLayoutEffect, b as useStableCallback, C as CommonPopupDataAttributes, k as useTimeout, u as useBaseUiId, b7 as useTriggerRegistration, d as createChangeEventDetails, bh as swipe, a5 as useAnimationFrame, o as ownerDocument, s as addEventListener, D as activeElement, _ as contains, g as getTarget, aG as isInteractiveElement, p as popupStateMapping, n as useControlled, a9 as itemPress, m as useTransitionStatus, f as useOpenChangeComplete, aJ as useAnimationsFinished, a4 as useDirection, a2 as inertValue, ax as mergeCleanups, bk as gecko, bo as scrub, a6 as webkit, E as createGenericEventDetails, P as useStore, b8 as triggerOpenStateMapping, t as transitionStatusMapping } from '../useScrollLock-es.js';
-import { S as Separator } from '../Separator-es.js';
-import { a as DialogBackdrop, c as DialogDescription, e as DialogHandle, b as DialogPopup, d as createDialogHandle, D as DrawerDescription } from '../DrawerDescription-es.js';
+import { bX as pointer, c as useIsoLayoutEffect, d as useStableCallback, bf as CommonPopupDataAttributes, u as useBaseUiId, bS as useTriggerRegistration, o as ownerDocument, h as createChangeEventDetails, bj as swipe, ac as isVirtualClick, a8 as useAnimationFrame, q as useTimeout, I as getWindow, y as addEventListener, D as activeElement, g as getComputedStyle, a0 as contains, e as getTarget, i as isHTMLElement, bv as isInteractiveElement, b as getParentNode, a6 as popupStateMapping, v as useControlled, ad as itemPress, s as useTransitionStatus, l as useOpenChangeComplete, aw as round, bz as useAnimationsFinished, af as getSide, a7 as useDirection, a4 as inertValue, bm as mergeCleanups, bY as gecko, b$ as scrub, a9 as webkit, G as createGenericEventDetails, U as useStore, be as triggerOpenStateMapping, t as transitionStatusMapping, p as popupTransitionStateMapping } from '../useScrollLock-es.js';
+import { b as DialogBackdrop, d as DialogDescription, f as DialogHandle, c as DialogPopup, a as DialogRoot, e as createDialogHandle, D as DrawerDescription, B as BasePopupHandle } from '../DrawerDescription-es.js';
 import { c as DialogClose, b as DialogTitle, a as DrawerClose, D as DrawerTitle } from '../DrawerTitle-es.js';
-import { j as DialogPortal, h as DialogRoot, i as DialogTrigger, k as DialogViewport, o as useDrawerProviderContext, q as DrawerBackdropCssVars, r as DrawerPopupCssVars, s as DrawerProviderContext, u as useDialogRootContext, t as useDrawerRootContext, v as useSwipeDismiss, w as getDisplacement, x as DrawerPopupDataAttributes, y as getElementTransform, z as DrawerVirtualKeyboardContext, A as getElementAtPoint, B as findScrollableTouchTarget, c as DrawerBackdrop, g as DrawerContent, e as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, d as DrawerViewport, C as useScrollAreaRootContext, E as getOffset, F as ScrollAreaRootCssVars, G as scrollAreaStateAttributesMapping, H as useScrollAreaViewportContext, S as ScrollAreaRoot, f as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
-import { u as useRenderElement, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
-import { K as getWindow, h as getComputedStyle, i as isHTMLElement, e as getParentNode, G as round } from '../floating-ui.utils-es.js';
+import { i as DialogPortal, h as DialogTrigger, j as DialogViewport, r as useDrawerProviderContext, s as DrawerBackdropCssVars, t as DrawerPopupCssVars, v as DrawerProviderContext, u as useDialogRootContext, w as useDrawerRootContext, x as useSwipeDismiss, y as getDisplacement, z as DrawerPopupDataAttributes, A as getElementTransform, B as DrawerVirtualKeyboardContext, C as getElementAtPoint, c as DrawerBackdrop, g as DrawerContent, e as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, d as DrawerViewport, E as useScrollAreaRootContext, F as getOffset, G as scrollAreaStateAttributesMapping, H as useScrollAreaViewportContext, S as ScrollAreaRoot, f as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
+import { u as useRenderElement, N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
 import { c as clamp, g as getMaxScrollOffset, n as normalizeScrollOffset, S as SCROLL_EDGE_TOLERANCE_PX } from '../scrollEdges-es.js';
-import { u as useMenuRootContext, o as useMenuPositionerContext, p as useMenuItem, R as REGULAR_ITEM, q as itemMapping, r as MenuStore, h as MenuBackdrop, l as MenuGroup, n as MenuGroupLabel, b as MenuItem, a as MenuLinkItem, j as MenuPopup, g as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, c as MenuRadioItem, d as MenuRadioItemIndicator, f as MenuRoot, m as MenuSubmenuRoot, e as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
+import { f as findScrollableTouchTarget } from '../scrollable-es.js';
+import { u as useMenuRootContext, o as useMenuPositionerContext, p as useMenuItem, R as REGULAR_ITEM, q as itemMapping, r as createNullMenuStore, h as MenuBackdrop, l as MenuGroup, n as MenuGroupLabel, b as MenuItem, a as MenuLinkItem, j as MenuPopup, g as MenuPortal, i as MenuPositioner, k as MenuRadioGroup, c as MenuRadioItem, d as MenuRadioItemIndicator, f as MenuRoot, m as MenuSubmenuRoot, e as MenuSubmenuTrigger, M as MenuTrigger } from '../MenuSubmenuTrigger-es.js';
 import * as ReactDOM from 'react-dom';
 import { m as usePreviousValue, n as useSelectRootContext, s as selectors, o as useSelectPositionerContext, j as SelectGroup, k as SelectGroupLabel, g as SelectItem, i as SelectItemIndicator, h as SelectItemText, f as SelectList, e as SelectPopup, a as SelectPortal, d as SelectPositioner, S as SelectRoot, b as SelectTrigger, c as SelectValue } from '../SelectGroupLabel-es.js';
-import { u as useNumberFieldRootContext, s as stateAttributesMapping$6, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
+import { S as Separator } from '../Separator-es.js';
+import { u as useNumberFieldRootContext, s as stateAttributesMapping$4, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import { u as useLabel } from '../useLabel-es.js';
 import '../stringifyLocale-es.js';
-import '../floating-ui.react-dom-es.js';
 
 function AutocompleteRoot(props) {
   const {
@@ -51,7 +50,9 @@ function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const collator = useCoreFilter();
+  const collator = useCoreFilter({
+    locale: other.locale
+  });
   const baseFilter = React.useMemo(() => {
     if (other.filter !== undefined) {
       return other.filter;
@@ -84,15 +85,7 @@ function AutocompleteRoot(props) {
     if (eventDetails.reason === pointer) {
       return;
     }
-    if (enableInline) {
-      if (highlightedValue == null) {
-        setInlineInputValue('');
-      } else {
-        setInlineInputValue(stringifyAsLabel(highlightedValue, itemToStringValue));
-      }
-    } else {
-      setInlineInputValue('');
-    }
+    setInlineInputValue(enableInline && highlightedValue != null ? stringifyAsLabel(highlightedValue, itemToStringValue) : '');
   }
   return /*#__PURE__*/jsx(AriaCombobox, {
     ...other,
@@ -151,6 +144,14 @@ const AutocompleteInputGroup = ComboboxInputGroup;
  */
 const AutocompleteItem = ComboboxItem;
 
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete)
+ */
+const AutocompleteSeparator = ListboxSeparator;
+
 var index_parts$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
@@ -170,7 +171,7 @@ var index_parts$7 = /*#__PURE__*/Object.freeze({
   Positioner: ComboboxPositioner,
   Root: AutocompleteRoot,
   Row: ComboboxRow,
-  Separator: Separator,
+  Separator: AutocompleteSeparator,
   Status: ComboboxStatus,
   Trigger: AutocompleteTrigger,
   Value: AutocompleteValue,
@@ -193,7 +194,7 @@ var index_parts$6 = /*#__PURE__*/Object.freeze({
   createHandle: createDialogHandle
 });
 
-const stateAttributesMapping$5 = {
+const stateAttributesMapping$3 = {
   active(value) {
     if (value) {
       return {
@@ -264,12 +265,12 @@ const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(compone
         [DrawerBackdropCssVars.swipeProgress]: '0'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$5
+    stateAttributesMapping: stateAttributesMapping$3
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";
 
-const stateAttributesMapping$4 = {
+const stateAttributesMapping$2 = {
   active(value) {
     if (value) {
       return {
@@ -304,7 +305,7 @@ const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerInde
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$4
+    stateAttributesMapping: stateAttributesMapping$2
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";
@@ -313,37 +314,26 @@ function DrawerProvider(props) {
   const {
     children
   } = props;
-  const [openById, setOpenById] = React.useState(() => new Map());
+  const [openDrawers, setOpenDrawers] = React.useState(() => new Set());
   const [visualStateStore] = React.useState(createVisualStateStore);
-  const setDrawerOpen = useStableCallback((drawerId, open) => {
-    setOpenById(prev => {
-      const prevOpen = prev.get(drawerId);
-      if (prevOpen === open) {
+  const setDrawerOpen = useStableCallback((drawer, open) => {
+    setOpenDrawers(prev => {
+      if (prev.has(drawer) === open) {
         return prev;
       }
-      const next = new Map(prev);
-      next.set(drawerId, open);
-      return next;
-    });
-  });
-  const removeDrawer = useStableCallback(drawerId => {
-    setOpenById(prev => {
-      if (!prev.has(drawerId)) {
-        return prev;
+      const next = new Set(prev);
+      if (open) {
+        next.add(drawer);
+      } else {
+        next.delete(drawer);
       }
-      const next = new Map(prev);
-      next.delete(drawerId);
       return next;
     });
   });
-  const active = React.useMemo(() => {
-    for (const open of openById.values()) {
-      if (open) {
-        return true;
-      }
-    }
-    return false;
-  }, [openById]);
+  const removeDrawer = useStableCallback(drawer => {
+    setDrawerOpen(drawer, false);
+  });
+  const active = openDrawers.size > 0;
   const contextValue = React.useMemo(() => ({
     setDrawerOpen,
     removeDrawer,
@@ -433,7 +423,7 @@ const SWIPE_AREA_SWIPING_HOOK = {
 const SWIPE_AREA_DISABLED_HOOK = {
   [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
-const stateAttributesMapping$3 = {
+const stateAttributesMapping$1 = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
@@ -441,9 +431,9 @@ const stateAttributesMapping$3 = {
     return value ? SWIPE_AREA_SWIPING_HOOK : null;
   },
   swipeDirection(value) {
-    return value ? {
+    return {
       [DrawerSwipeAreaDataAttributes.swipeDirection]: value
-    } : null;
+    };
   },
   disabled(value) {
     return value ? SWIPE_AREA_DISABLED_HOOK : null;
@@ -474,16 +464,14 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
     swipeDirection: swipeDirectionProp,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const {
     swipeDirection,
-    frontmostHeight
+    frontmostHeight,
+    swipeAreaActiveRef
   } = useDrawerRootContext();
   const providerContext = useDrawerProviderContext();
   const [swipeActive, setSwipeActive] = React.useState(false);
-  const releaseDismissTimeout = useTimeout();
   const swipeAreaRef = React.useRef(null);
   const swipeStartEventRef = React.useRef(null);
   const openedBySwipeRef = React.useRef(false);
@@ -493,7 +481,10 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   });
   const closedOffsetRef = React.useRef(null);
   const appliedSwipeStylesRef = React.useRef(false);
+  const swipePopupElementRef = React.useRef(null);
+  const swipeBackdropElementRef = React.useRef(null);
   const popupTransitionRef = React.useRef(null);
+  const releaseGuardCleanupRef = React.useRef(NOOP);
   const swipeAreaId = useBaseUiId(componentProps.id);
   const registerTrigger = useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
@@ -505,21 +496,40 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
   const enabled = !disabled && (!open || swipeActive);
   function disableDismissForSwipe() {
-    releaseDismissTimeout.clear();
+    releaseGuardCleanupRef.current();
     store.context.outsidePressEnabledRef.current = false;
   }
-  function enableDismissAfterRelease() {
-    // Safari can dispatch outside-press for the same swipe-open gesture
-    // after release, so defer re-enabling dismissal to the next macrotask.
-    releaseDismissTimeout.start(0, () => {
+  const enableDismissAfterRelease = useStableCallback(() => {
+    releaseGuardCleanupRef.current();
+    const doc = ownerDocument(swipeAreaRef.current);
+    function restore(event) {
+      // The gesture's trailing release click is the one physical click with no `pointerdown` of
+      // its own. Ignore it and keep waiting, so it cannot dismiss the drawer it just opened,
+      // while a click-only activation (keyboard or assistive tech) still re-enables in time.
+      if (event?.type === 'click' && event.detail !== 0 && !isVirtualClick(event)) {
+        return;
+      }
+      releaseGuardCleanupRef.current = NOOP;
+      doc.removeEventListener('pointerdown', restore, true);
+      doc.removeEventListener('click', restore, true);
       store.context.outsidePressEnabledRef.current = true;
-    });
-  }
-  function resolvePopupSize() {
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return null;
     }
+
+    // The pointerup that ends a swipe-open gesture synthesizes a `click`. When the drag released
+    // outside the popup (e.g. it was dragged past the popup's size), that click would be treated as
+    // an outside press and immediately dismiss the drawer that was just opened. Keep outside-press
+    // dismissal disabled until the next interaction that isn't that release click: a deliberate
+    // outside press starts with a `pointerdown`, and a click-only activation (keyboard or
+    // assistive tech) is distinguishable from a physical release. This is deterministic, unlike
+    // re-enabling on a timer that can race the synthesized click and dismiss at random.
+    //
+    // `restore` runs in document capture, ahead of floating-ui's own outside-press check (which
+    // happens on the event target, after capture), so the triggering press still dismisses.
+    releaseGuardCleanupRef.current = restore;
+    doc.addEventListener('pointerdown', restore, true);
+    doc.addEventListener('click', restore, true);
+  });
+  function getPopupSize(popupElement) {
     const isHorizontal = dismissDirection === 'left' || dismissDirection === 'right';
     const size = isHorizontal ? popupElement.offsetWidth : popupElement.offsetHeight;
     if (size <= 0) {
@@ -527,15 +537,15 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
     }
     return size;
   }
-  function resolveClosedOffset() {
-    const offset = resolvePopupSize();
+  function resolvePopupSize() {
+    const popupElement = store.context.popupRef.current;
+    return popupElement ? getPopupSize(popupElement) : null;
+  }
+  function resolveClosedOffset(popupElement) {
+    const offset = getPopupSize(popupElement);
     if (offset == null) {
       return null;
     }
-    const popupElement = store.context.popupRef.current;
-    if (!popupElement) {
-      return offset;
-    }
     const isHorizontal = dismissDirection === 'left' || dismissDirection === 'right';
     const transform = getElementTransform(popupElement);
     const transformOffset = isHorizontal ? transform.x : transform.y;
@@ -552,9 +562,6 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
     return popupSize * DEFAULT_SWIPE_OPEN_RATIO;
   }
   function applySwipeMovement() {
-    if (!swipeActive) {
-      return;
-    }
     const popupElement = store.context.popupRef.current;
     if (!popupElement) {
       return;
@@ -563,10 +570,10 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       return;
     }
     if (closedOffsetRef.current == null) {
-      closedOffsetRef.current = resolveClosedOffset();
+      closedOffsetRef.current = resolveClosedOffset(popupElement);
     }
     const closedOffset = closedOffsetRef.current;
-    if (!closedOffset || !Number.isFinite(closedOffset) || closedOffset <= 0) {
+    if (closedOffset === null) {
       return;
     }
     const {
@@ -587,6 +594,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
     popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementX, `${movementX}px`);
     popupElement.style.setProperty(DrawerPopupCssVars.swipeMovementY, `${movementY}px`);
     popupElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
+    swipePopupElementRef.current = popupElement;
     if (popupTransitionRef.current === null) {
       popupTransitionRef.current = popupElement.style.transition;
     }
@@ -594,6 +602,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
     const backdropElement = store.context.backdropRef.current;
     if (backdropElement) {
       backdropElement.setAttribute(DrawerPopupDataAttributes.swiping, '');
+      swipeBackdropElementRef.current = backdropElement;
       backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, `${backdropProgress}`);
       if (openProgress > 0 && frontmostHeight > 0) {
         backdropElement.style.setProperty(DrawerPopupCssVars.height, `${frontmostHeight}px`);
@@ -606,10 +615,11 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       frontmostHeight: openProgress > 0 ? frontmostHeight : 0
     });
     appliedSwipeStylesRef.current = true;
+    swipeAreaActiveRef.current = true;
   }
   const clearSwipeStyles = useStableCallback(() => {
-    const popupElement = store.context.popupRef.current;
-    if (popupElement && appliedSwipeStylesRef.current) {
+    const popupElement = swipePopupElementRef.current;
+    if (popupElement) {
       popupElement.style.removeProperty(DrawerPopupCssVars.swipeMovementX);
       popupElement.style.removeProperty(DrawerPopupCssVars.swipeMovementY);
       popupElement.removeAttribute(DrawerPopupDataAttributes.swiping);
@@ -618,7 +628,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       popupElement.style.transition = popupTransitionRef.current;
       popupTransitionRef.current = null;
     }
-    const backdropElement = store.context.backdropRef.current;
+    const backdropElement = swipeBackdropElementRef.current;
     if (backdropElement) {
       backdropElement.removeAttribute(DrawerPopupDataAttributes.swiping);
       backdropElement.style.setProperty(DrawerBackdropCssVars.swipeProgress, '0');
@@ -629,19 +639,16 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       frontmostHeight: 0
     });
     appliedSwipeStylesRef.current = false;
+    swipePopupElementRef.current = null;
+    swipeBackdropElementRef.current = null;
+    swipeAreaActiveRef.current = false;
   });
   function openDrawer(event) {
-    if (store.select('open')) {
-      return;
-    }
     openedBySwipeRef.current = true;
-    store.setOpen(true, createChangeEventDetails(swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(true, createChangeEventDetails(swipe, event, swipeAreaRef.current));
   }
   function closeDrawer(event) {
-    if (!store.select('open')) {
-      return;
-    }
-    store.setOpen(false, createChangeEventDetails(swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(false, createChangeEventDetails(swipe, event, swipeAreaRef.current));
   }
   function resetSwipeInteractionState() {
     swipeStartEventRef.current = null;
@@ -684,10 +691,10 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
         return;
       }
       const displacement = getDisplacement(resolvedSwipeDirection, details.deltaX, details.deltaY);
-      if (displacement < MIN_SWIPE_START_DISTANCE && !openedBySwipeRef.current) {
+      if (!openedBySwipeRef.current && displacement < MIN_SWIPE_START_DISTANCE) {
         return;
       }
-      if (!openedBySwipeRef.current) {
+      if (!openedBySwipeRef.current && !store.select('open')) {
         openDrawer(swipeStartEventRef.current);
       }
       applySwipeMovement();
@@ -703,14 +710,14 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
       const displacement = getDisplacement(resolvedSwipeDirection, deltaX, deltaY);
       const releaseVelocity = getDisplacement(resolvedSwipeDirection, releaseVelocityX, releaseVelocityY);
       const threshold = resolveSwipeOpenThreshold();
-      const hasEnoughDistance = threshold != null && displacement >= threshold;
+      const hasEnoughDistance = displacement >= threshold;
       const hasEnoughVelocity = releaseVelocity >= VELOCITY_THRESHOLD;
-      const shouldOpen = threshold != null && direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
+      const shouldOpen = direction === resolvedSwipeDirection && (hasEnoughDistance || hasEnoughVelocity) && !disabled;
       if (shouldOpen) {
         if (!store.select('open')) {
           openDrawer(event);
         }
-      } else if (openedBySwipeRef.current) {
+      } else if (openedBySwipeRef.current && store.select('open')) {
         closeDrawer(event);
       }
       finishSwipeInteraction();
@@ -721,16 +728,29 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   const swipePointerProps = swipe$1.getPointerProps();
   const swipeTouchProps = swipe$1.getTouchProps();
   const resetSwipe = swipe$1.reset;
-  React.useEffect(() => {
+
+  // The commit that opens the drawer re-renders the popup, resetting `--swipe-movement-*` to `0px`
+  // (the viewport isn't swiping). Re-assert after the DOM mutation but before paint. No deps: must
+  // run on every commit the swipe area participates in.
+  useIsoLayoutEffect(() => {
+    if (swipeActive && appliedSwipeStylesRef.current) {
+      applySwipeMovement();
+    }
+  });
+  useIsoLayoutEffect(() => {
     if (!enabled) {
+      if (swipeActive) {
+        enableDismissAfterRelease();
+      }
       resetSwipe();
       resetDragDelta();
       clearSwipeStyles();
       resetSwipeInteractionState();
     }
-  }, [clearSwipeStyles, enabled, resetDragDelta, resetSwipe]);
+  }, [clearSwipeStyles, enableDismissAfterRelease, enabled, resetDragDelta, resetSwipe, swipeActive]);
   React.useEffect(() => {
     return () => {
+      releaseGuardCleanupRef.current();
       store.context.outsidePressEnabledRef.current = true;
     };
   }, [store]);
@@ -743,7 +763,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   return useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$3,
+    stateAttributesMapping: stateAttributesMapping$1,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -803,6 +823,15 @@ const KEYBOARD_VISIBILITY_MARGIN = 16;
 // 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;
+// Cadence of the settle-watching realign passes after focus moves with the keyboard open:
+// long enough for a smooth scroll to show progress between passes, short enough to recover
+// quickly from a scroll canceled by WebKit's reveal; the pass count covers CSS transitions
+// reacting to the focus change (e.g. a 260ms footer resize) with room to spare.
+const KEYBOARD_REALIGN_INTERVAL = 150;
+const KEYBOARD_REALIGN_MAX_PASSES = 4;
+// Frames the alignment waits for the scroll destination to stop moving (layout reacting to
+// the focus change, e.g. a footer resizing over a CSS transition) before scrolling anyway.
+const KEYBOARD_SETTLE_FRAME_LIMIT = 60;
 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']);
@@ -826,11 +855,10 @@ function DrawerVirtualKeyboardProvider(props) {
   const {
     children
   } = props;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
+  const modal = store.useState('modal');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const viewportElement = store.useState('viewportElement');
 
@@ -843,7 +871,9 @@ function DrawerVirtualKeyboardProvider(props) {
   const keyboardTouchStartRef = React.useRef(null);
   const focusedKeyboardTargetRef = React.useRef(null);
   const keyboardScrollAdjustmentRef = React.useRef(null);
+  const programmaticKeyboardFocusRef = React.useRef(false);
   const keyboardFocusFrame = useAnimationFrame();
+  const keyboardRealignTimeout = useTimeout();
   const restoreKeyboardScrollAdjustment = useStableCallback(() => {
     const adjustment = keyboardScrollAdjustmentRef.current;
     if (!adjustment) {
@@ -911,46 +941,100 @@ function DrawerVirtualKeyboardProvider(props) {
     const doc = ownerDocument(rootElement);
     const win = getWindow(rootElement);
     const visualViewport = win.visualViewport;
+
+    // Alignment scroll bookkeeping: destination stability, whether a scroll was issued,
+    // and the last observed progress so delayed passes can distinguish moving from stalled.
+    let keyboardScrollElement = null;
+    let keyboardScrollDestination = 0;
+    let keyboardScrollChecks = 0;
+    let keyboardScrollObserved = -1;
     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();
+      keyboardScrollElement = null;
+      setDrawerKeyboardInset(0);
       restoreKeyboardScrollAdjustment();
       keyboardFocusFrame.cancel();
+      keyboardRealignTimeout.clear();
+    };
+
+    // WebKit's native reveal scroll can move the page even while the scroll lock hides
+    // overflow (e.g. when the software keyboard's previous/next field arrows move focus).
+    // While the drawer is modal, any window scroll during keyboard interaction is spurious,
+    // so pin the page to the position it had when the drawer opened.
+    const baseScrollX = win.scrollX;
+    const baseScrollY = win.scrollY;
+    const restoreWindowScroll = () => {
+      if (modal !== true || nestedDrawerOpen || !focusedKeyboardTargetRef.current || getKeyboardVisualViewport(win) == null) {
+        return false;
+      }
+      if (win.scrollX !== baseScrollX || win.scrollY !== baseScrollY) {
+        // Force an instant jump: the two-argument form defaults `behavior` to `auto`, which
+        // obeys the page's `scroll-behavior`, so a global `scroll-behavior: smooth` would
+        // animate the restore. The measurements that follow assume the page is already back
+        // at rest, and a smooth restore also re-emits `scroll`, re-entering this handler.
+        win.scrollTo({
+          left: baseScrollX,
+          top: baseScrollY,
+          behavior: 'instant'
+        });
+        return true;
+      }
+      return false;
+    };
+
+    // Focus moved by the drawer itself goes through `focusKeyboardInputWithoutPageScroll`,
+    // but native focus changes (the iOS keyboard's previous/next field arrows) commit
+    // WebKit's reveal scroll before `focusin` reaches us — cancelling it afterwards
+    // visibly jitters the sheet. `focusout` on the outgoing field fires before focus
+    // lands, so override the incoming field's geometry there and restore it in `focusin`.
+    let restorePreemptedFocus = null;
+    const consumePreemptedFocus = () => {
+      restorePreemptedFocus?.();
+      restorePreemptedFocus = null;
+    };
+    const preemptFocusReveal = (target, keyboardViewport) => {
+      consumePreemptedFocus();
+
+      // Native focus carries no preventScroll, so a fake off-screen rect would make WebKit
+      // scroll the drawer's own scroll containers thousands of pixels chasing it. Presenting
+      // the field as already centered in the visible band above the keyboard instead makes
+      // both the in-page reveal and the viewport pan no-ops.
+      const rect = target.getBoundingClientRect();
+      restorePreemptedFocus = overrideGeometryDuringFocus(target, (keyboardViewport.top + keyboardViewport.bottom - rect.top - rect.bottom) / 2);
     };
     const alignFocusedKeyboardTarget = () => {
+      // If focus never lands on a preempted target, the focusout-scheduled alignment still
+      // restores it on the next frame before paint.
+      consumePreemptedFocus();
       const target = focusedKeyboardTargetRef.current;
       // If the focused field is removed from the DOM without firing `focusout` (e.g. it is
       // conditionally rendered away), any applied scroll slack is restored here on the next
       // focus/viewport event or when the drawer closes. This self-corrects rather than
       // tracking each field's lifecycle.
       if (nestedDrawerOpen || !target || !contains(rootElement, target)) {
-        resetDrawerKeyboardInset();
+        setDrawerKeyboardInset(0);
         restoreKeyboardScrollAdjustment();
         return;
       }
+
+      // Undo any reveal scroll WebKit applied to the locked page before measuring, so the
+      // keyboard inset and alignment are computed against the resting viewport.
+      restoreWindowScroll();
       const keyboardViewport = getKeyboardVisualViewport(win);
       if (!keyboardViewport) {
-        resetDrawerKeyboardInset();
+        setDrawerKeyboardInset(0);
         restoreKeyboardScrollAdjustment();
         return;
       }
-      setDrawerKeyboardInset(getDrawerKeyboardInset(win, keyboardViewport));
+      setDrawerKeyboardInset(Math.max(0, win.innerHeight - keyboardViewport.bottom));
       const scrollTarget = findKeyboardScrollTarget(target, rootElement);
       if (!scrollTarget) {
         restoreKeyboardScrollAdjustment();
         return;
       }
-      if (!scrollTarget.isConnected || !contains(rootElement, scrollTarget)) {
-        resetDrawerKeyboardInset();
-        restoreKeyboardScrollAdjustment();
-        return;
-      }
       const scrollTargetRect = scrollTarget.getBoundingClientRect();
       const clippedBottom = Math.min(scrollTargetRect.bottom, keyboardViewport.bottom);
       const overlap = Math.max(0, scrollTargetRect.bottom - keyboardViewport.bottom);
@@ -966,14 +1050,70 @@ function DrawerVirtualKeyboardProvider(props) {
         return;
       }
       const targetRect = target.getBoundingClientRect();
-      const targetCenter = (targetRect.top + targetRect.bottom) / 2;
-      const visibleCenter = (visibleTop + visibleBottom) / 2;
-      const nextScrollTop = scrollTarget.scrollTop + targetCenter - visibleCenter;
-      animateKeyboardScroll(scrollTarget, clamp(nextScrollTop, 0, maxScrollTop));
+      const nextScrollTop = scrollTarget.scrollTop + (targetRect.top + targetRect.bottom - visibleTop - visibleBottom) / 2;
+      const destination = Math.round(clamp(nextScrollTop, 0, maxScrollTop));
+      const settled = keyboardScrollElement === scrollTarget && Math.abs(keyboardScrollDestination - destination) <= 1;
+      if (!settled) {
+        // Commit the scroll only once the destination holds across two consecutive checks.
+        // Layout may still be reacting to the focus change (e.g. a footer sized by
+        // `:focus-within` resizing over a transition), and scrolling toward a
+        // mid-transition destination overshoots, then visibly pulls back once corrected.
+        // The destination is scroll-position-invariant, so an in-flight scroll of the
+        // container itself never defers the commit.
+        const checks = keyboardScrollElement === scrollTarget ? keyboardScrollChecks + 1 : 1;
+        keyboardScrollElement = scrollTarget;
+        keyboardScrollDestination = destination;
+        keyboardScrollChecks = checks;
+        keyboardScrollObserved = -1;
+        // Re-check next frame; give up and scroll anyway if layout never settles.
+        if (checks <= KEYBOARD_SETTLE_FRAME_LIMIT) {
+          keyboardFocusFrame.request(alignFocusedKeyboardTarget);
+          return;
+        }
+      } else if (keyboardScrollObserved >= 0) {
+        // A scroll toward this destination is already out. Leave it alone while it has
+        // arrived or is still progressing — re-issuing restarts the smooth-scroll easing
+        // curve, a visible stutter on every realign pass — and re-issue only when it
+        // stalled short (WebKit cancels in-flight smooth scrolls when its native reveal
+        // for the focus resolves).
+        const current = scrollTarget.scrollTop;
+        if (Math.abs(current - destination) <= 1) {
+          return;
+        }
+        if (current !== keyboardScrollObserved) {
+          keyboardScrollObserved = current;
+          return;
+        }
+      }
+      keyboardScrollElement = scrollTarget;
+      keyboardScrollDestination = destination;
+      keyboardScrollChecks = 0;
+      keyboardScrollObserved = scrollTarget.scrollTop;
+      animateKeyboardScroll(scrollTarget, destination);
     };
     const scheduleKeyboardFocusAlignment = () => {
       keyboardFocusFrame.request(alignFocusedKeyboardTarget);
     };
+
+    // When focus moves with the keyboard already up, no viewport resize events follow to
+    // re-run alignment, and the single frame-scheduled pass is unreliable: WebKit resolves
+    // the reveal for the focus asynchronously (a UI-process round trip) and cancels any
+    // in-flight scroll the pass started when it lands, and layout reacting to the focus
+    // change (e.g. a footer sized by `:focus-within` and the keyboard inset) settles only
+    // after its transition, so the pass measures stale geometry. Re-align on an interval
+    // until both settle; the alignment's scroll bookkeeping observes before re-issuing,
+    // so passes that find the scroll on course are inert.
+    const scheduleDelayedKeyboardRealign = () => {
+      let remainingPasses = KEYBOARD_REALIGN_MAX_PASSES;
+      const realign = () => {
+        alignFocusedKeyboardTarget();
+        remainingPasses -= 1;
+        if (remainingPasses > 0) {
+          keyboardRealignTimeout.start(KEYBOARD_REALIGN_INTERVAL, realign);
+        }
+      };
+      keyboardRealignTimeout.start(KEYBOARD_REALIGN_INTERVAL, realign);
+    };
     const captureFocusedKeyboardTarget = eventTarget => {
       if (nestedDrawerOpen) {
         return false;
@@ -985,16 +1125,56 @@ function DrawerVirtualKeyboardProvider(props) {
       if (!target || !contains(rootElement, target)) {
         return false;
       }
+
+      // A new field starts a fresh alignment; the scroll bookkeeping must not carry
+      // over from the previous field's scroll.
+      if (focusedKeyboardTargetRef.current !== target) {
+        keyboardScrollElement = null;
+      }
       focusedKeyboardTargetRef.current = target;
       return true;
     };
     const handleFocusIn = event => {
-      if (captureFocusedKeyboardTarget(getTarget(event))) {
-        scheduleKeyboardFocusAlignment();
+      // The programmatic transition is over once focus lands, which happens before
+      // `.focus()` returns. Any later `focusout` is the consumer's own — an `onFocus`
+      // handler that blurs or moves focus — and must be reconciled rather than
+      // suppressed, so stop suppressing here instead of waiting for `.focus()` to return.
+      programmaticKeyboardFocusRef.current = false;
+      consumePreemptedFocus();
+      if (!captureFocusedKeyboardTarget(getTarget(event))) {
+        // Focus landed outside any drawer keyboard input. The `focusout` on the previous
+        // field normally clears the tracked target, but the tap path suppresses that
+        // `focusout` via `programmaticKeyboardFocusRef`, so a consumer `onFocus` handler that
+        // redirects focus out of the drawer would otherwise leave a stale target holding its
+        // inset, slack, and pending realign. Reconcile against the real focus here.
+        // A handler that ends focus entirely emits no `focusin` to reconcile from; that case
+        // is covered by clearing the suppression flag above so its `focusout` is handled.
+        clearFocusedKeyboardTarget();
+        return;
+      }
+
+      // Covers every way focus can land with the keyboard already up: native moves (the
+      // keyboard's previous/next arrows) and the tap path (which suppresses `focusout`
+      // handling via the programmatic flag).
+      if (getKeyboardVisualViewport(win) != null) {
+        scheduleDelayedKeyboardRealign();
       }
+      scheduleKeyboardFocusAlignment();
     };
     const handleFocusOut = event => {
+      // The blur inside `focusKeyboardInputWithoutPageScroll` is followed synchronously by
+      // a re-focus; clearing state here would drop the keyboard inset for a frame.
+      if (programmaticKeyboardFocusRef.current) {
+        return;
+      }
       if (captureFocusedKeyboardTarget(event.relatedTarget)) {
+        const target = focusedKeyboardTargetRef.current;
+        const keyboardViewport = getKeyboardVisualViewport(win);
+        // The delayed realign passes are scheduled by the `focusin` that follows once
+        // focus lands on the captured target.
+        if (target && keyboardViewport) {
+          preemptFocusReveal(target, keyboardViewport);
+        }
         scheduleKeyboardFocusAlignment();
         return;
       }
@@ -1009,25 +1189,36 @@ function DrawerVirtualKeyboardProvider(props) {
     if (visualViewport) {
       cleanupListeners.push(addEventListener(visualViewport, 'resize', handleViewportUpdate), addEventListener(visualViewport, 'scroll', handleViewportUpdate));
     }
-    cleanupListeners.push(addEventListener(doc, 'focusin', handleFocusIn, true), addEventListener(doc, 'focusout', handleFocusOut, true));
+    const handleWindowScroll = () => {
+      if (restoreWindowScroll()) {
+        // Recompute the keyboard inset once the page is back at rest; measurements taken
+        // mid-reveal (a non-zero visual viewport offset) inflate it and push the popup up.
+        scheduleKeyboardFocusAlignment();
+      }
+    };
+
+    // Once the user puts a finger down they own the scroll position. Stop both the frame settle
+    // loop, which can center after changing layout settles, and the delayed passes, which can't
+    // distinguish a user scroll from a reveal scroll WebKit canceled. A later focus or viewport
+    // change reschedules alignment if it's still needed.
+    const cancelKeyboardRealignOnPointerDown = () => {
+      keyboardFocusFrame.cancel();
+      keyboardRealignTimeout.clear();
+      keyboardScrollElement = null;
+    };
+    cleanupListeners.push(addEventListener(doc, 'focusin', handleFocusIn, true), addEventListener(doc, 'focusout', handleFocusOut, true), addEventListener(win, 'scroll', handleWindowScroll), addEventListener(doc, 'pointerdown', cancelKeyboardRealignOnPointerDown, true));
     if (captureFocusedKeyboardTarget(activeElement(doc))) {
       scheduleKeyboardFocusAlignment();
     }
     return () => {
       cleanupListeners.forEach(cleanup => cleanup());
+      consumePreemptedFocus();
       clearFocusedKeyboardTarget();
       rootElement.style.removeProperty(DrawerViewportCssVars.keyboardInset);
     };
-  }, [animateKeyboardScroll, keyboardFocusFrame, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
+  }, [animateKeyboardScroll, keyboardFocusFrame, keyboardRealignTimeout, modal, mounted, nestedDrawerOpen, open, restoreKeyboardScrollAdjustment, rootElement, setKeyboardScrollSlack]);
   const onTouchStart = useStableCallback(event => {
-    if (!open || !mounted || nestedDrawerOpen) {
-      resetTouchTrackingState();
-      return;
-    }
     const touch = event.touches[0];
-    if (!touch) {
-      return;
-    }
     pendingKeyboardFocusMovedRef.current = false;
     keyboardTouchStartRef.current = {
       x: touch.clientX,
@@ -1053,9 +1244,9 @@ function DrawerVirtualKeyboardProvider(props) {
       return;
     }
     const touch = event.changedTouches[0] ?? event.touches[0];
-    const doc = ownerDocument(event.currentTarget);
+    const root = rootElement.getRootNode();
     const nativeEventTarget = getTarget(event.nativeEvent);
-    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(doc, touch.clientX, touch.clientY) : null;
+    const pointTarget = touch ? resolveKeyboardTouchTargetFromPoint(root, 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.
@@ -1084,15 +1275,24 @@ function DrawerVirtualKeyboardProvider(props) {
 
       // Already focused with the keyboard up: let the native tap through so it can
       // reposition the caret, rather than blurring and re-focusing the same input.
-      if (activeElement(ownerDocument(keyboardFocusTarget)) === keyboardFocusTarget && isKeyboardVisualViewportOpen(win)) {
+      if (activeElement(ownerDocument(keyboardFocusTarget)) === keyboardFocusTarget && (!win.visualViewport || getKeyboardVisualViewport(win) != null)) {
         resetTouchTrackingState();
         return;
       }
 
       // iOS only opens the software keyboard when focus happens synchronously
-      // inside the touch gesture.
+      // inside the touch gesture. The flag suppresses the `focusout` cleanup the
+      // intermediate blur would otherwise trigger, so the keyboard inset isn't
+      // dropped for a frame between the blur and the re-focus. It is cleared by the
+      // `focusin` that lands, so only that blur is suppressed; the `finally` is the
+      // backstop for a target that never takes focus.
       event.preventDefault();
-      focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      programmaticKeyboardFocusRef.current = true;
+      try {
+        focusKeyboardInputWithoutPageScroll(keyboardFocusTarget);
+      } finally {
+        programmaticKeyboardFocusRef.current = false;
+      }
       // 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.
@@ -1137,13 +1337,16 @@ function resolveKeyboardInputTarget(target) {
   return isHTMLElement(control) && isKeyboardInputElement(control) ? control : null;
 }
 function resolveKeyboardTouchTarget(target) {
+  if (!isHTMLElement(target)) {
+    return null;
+  }
   const focusTarget = resolveKeyboardInputTarget(target);
   if (!focusTarget) {
     return null;
   }
   return {
     focusTarget,
-    clickTarget: isHTMLElement(target) ? target : focusTarget
+    clickTarget: target
   };
 }
 
@@ -1156,14 +1359,16 @@ function getContentEditableHost(element) {
   }
   return host;
 }
-function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
-  const exactTarget = getElementAtPoint(doc, clientX, clientY);
-  const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
-  if (exactKeyboardTarget) {
-    return {
-      focusTarget: exactKeyboardTarget,
-      clickTarget: isHTMLElement(exactTarget) ? exactTarget : exactKeyboardTarget
-    };
+function resolveKeyboardTouchTargetFromPoint(root, clientX, clientY) {
+  const exactTarget = getElementAtPoint(root, clientX, clientY);
+  if (isHTMLElement(exactTarget)) {
+    const exactKeyboardTarget = resolveKeyboardInputTarget(exactTarget);
+    if (exactKeyboardTarget) {
+      return {
+        focusTarget: exactKeyboardTarget,
+        clickTarget: exactTarget
+      };
+    }
   }
 
   // Probing nearby points compensates for iOS retargeting taps while the page reacts
@@ -1176,7 +1381,7 @@ function resolveKeyboardTouchTargetFromPoint(doc, clientX, clientY) {
     return KEYBOARD_TAP_BLOCKED;
   }
   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));
+    const keyboardTarget = resolveKeyboardInputTarget(getElementAtPoint(root, clientX + offsetX, clientY + offsetY));
     if (keyboardTarget) {
       return {
         focusTarget: keyboardTarget,
@@ -1200,15 +1405,10 @@ function dispatchKeyboardClick(target, touch) {
 }
 function focusKeyboardInputWithoutPageScroll(target) {
   const wasFocused = activeElement(ownerDocument(target)) === target;
-  const previousOpacity = target.style.opacity;
-  const previousTransform = target.style.transform;
-  const previousTransition = target.style.transition;
-
   // iOS Safari can still scroll the page for transformed sheets even with preventScroll.
-  // Move the input off-screen only for the synchronous focus call.
-  target.style.transition = 'none';
-  target.style.opacity = '0';
-  target.style.transform = 'translateY(-2000px)';
+  // Move the input off-screen only for the synchronous focus call; `preventScroll`
+  // suppresses the in-page ancestor scrolling that would otherwise chase the fake rect.
+  const restoreStyles = overrideGeometryDuringFocus(target, -2000);
   try {
     if (wasFocused) {
       target.blur();
@@ -1217,10 +1417,25 @@ function focusKeyboardInputWithoutPageScroll(target) {
       preventScroll: true
     });
   } finally {
+    restoreStyles();
+  }
+}
+
+// Overrides the painted geometry WebKit samples when an element gains focus. The rect is
+// hidden (opacity) rather than detached so layout is unaffected; the caller must restore
+// synchronously before the next paint.
+function overrideGeometryDuringFocus(target, translateY) {
+  const previousOpacity = target.style.opacity;
+  const previousTransform = target.style.transform;
+  const previousTransition = target.style.transition;
+  target.style.transition = 'none';
+  target.style.opacity = '0';
+  target.style.transform = `translateY(${translateY}px)`;
+  return () => {
     target.style.opacity = previousOpacity;
     target.style.transform = previousTransform;
     target.style.transition = previousTransition;
-  }
+  };
 }
 function findKeyboardScrollTarget(target, root) {
   // Start at the parent: scrolling the focused field's own content (an overflowing
@@ -1248,11 +1463,22 @@ function getKeyboardVisualViewport(win) {
     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;
+
+/**
+ * Controls a Drawer imperatively and associates detached `Drawer.Trigger` components with a
+ * `Drawer.Root`. Create one with `Drawer.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+class DrawerHandle extends DialogHandle {}
+
+/**
+ * Creates a new handle to connect a Drawer.Root with detached Drawer.Trigger components.
+ */
+function createDrawerHandle() {
+  return new DrawerHandle();
 }
 
 var index_parts$5 = /*#__PURE__*/Object.freeze({
@@ -1261,7 +1487,7 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   Close: DrawerClose,
   Content: DrawerContent,
   Description: DrawerDescription,
-  Handle: DialogHandle,
+  Handle: DrawerHandle,
   Indent: DrawerIndent,
   IndentBackground: DrawerIndentBackground,
   Popup: DrawerPopup,
@@ -1273,7 +1499,7 @@ var index_parts$5 = /*#__PURE__*/Object.freeze({
   Trigger: DrawerTrigger,
   Viewport: DrawerViewport,
   VirtualKeyboardProvider: DrawerVirtualKeyboardProvider,
-  createHandle: createDialogHandle
+  createHandle: createDrawerHandle
 });
 
 /**
@@ -1342,7 +1568,7 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
     id: idProp,
     label,
     nativeButton = false,
-    disabled = false,
+    disabled: disabledProp = false,
     closeOnClick = false,
     checked: checkedProp,
     defaultChecked,
@@ -1351,6 +1577,7 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
     ...elementProps
   } = componentProps;
   const listItem = useCompositeListItem({
+    guess: true,
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
@@ -1358,6 +1585,8 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
   const {
     store
   } = useMenuRootContext();
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp || rootDisabled;
   const highlighted = store.useState('isActive', listItem.index);
   const itemProps = store.useState('itemProps');
   const [checked, setChecked] = useControlled({
@@ -1386,7 +1615,7 @@ const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem
   }), [disabled, highlighted, checked]);
   function handleClick(event) {
     const details = createChangeEventDetails(itemPress, event.nativeEvent, undefined, {
-      preventUnmountOnClose() {}
+      preventUnmountOnClose: NOOP
     });
     onCheckedChange?.(!checked, details);
     if (details.isCanceled) {
@@ -1429,6 +1658,7 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function MenuChe
   const indicatorRef = React.useRef(null);
   const {
     transitionStatus,
+    mounted,
     setMounted
   } = useTransitionStatus(item.checked);
   useOpenChangeComplete({
@@ -1454,7 +1684,7 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function MenuChe
       'aria-hidden': true,
       ...elementProps
     },
-    enabled: keepMounted || item.checked
+    enabled: keepMounted || mounted
   });
   return element;
 });
@@ -1494,30 +1724,14 @@ function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true, false);
+  const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true);
   const animationFrame = useAnimationFrame();
   const committedDimensionsRef = React.useRef(null);
   const isInitialRenderRef = React.useRef(true);
   const restoreAnchoringStylesRef = React.useRef(NOOP);
   const onMeasureLayout = useStableCallback(onMeasureLayoutParam);
   const onMeasureLayoutComplete = useStableCallback(onMeasureLayoutCompleteParam);
-  const anchoringStyles = React.useMemo(() => {
-    // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
-    let isOriginSide = side === 'top';
-    let isPhysicalLeft = side === 'left';
-    if (direction === 'rtl') {
-      isOriginSide = isOriginSide || side === 'inline-end';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-end';
-    } else {
-      isOriginSide = isOriginSide || side === 'inline-start';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-start';
-    }
-    return isOriginSide ? {
-      position: 'absolute',
-      [side === 'top' ? 'bottom' : 'top']: '0',
-      [isPhysicalLeft ? 'right' : 'left']: '0'
-    } : EMPTY_OBJECT;
-  }, [side, direction]);
+  const anchoringStyles = React.useMemo(() => getPopupAnchoringStyles(side, direction), [side, direction]);
   useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
     if (!mounted) {
@@ -1593,6 +1807,19 @@ function usePopupAutoResize(parameters) {
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
+function getPopupAnchoringStyles(side, direction) {
+  // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
+  const isPhysicalTop = side === 'top';
+  const isPhysicalLeft = side === 'left' || side === (direction === 'rtl' ? 'inline-end' : 'inline-start');
+  if (!isPhysicalTop && !isPhysicalLeft) {
+    return EMPTY_OBJECT;
+  }
+  return {
+    position: 'absolute',
+    [isPhysicalTop ? 'bottom' : 'top']: '0',
+    [isPhysicalLeft ? 'right' : 'left']: '0'
+  };
+}
 function overrideElementStyle(element, property, value) {
   const originalValue = element.style.getPropertyValue(property);
   element.style.setProperty(property, value);
@@ -1622,6 +1849,80 @@ function setPositionerCssSize(positionerElement, size) {
   positionerElement.style.setProperty('--positioner-height', height);
 }
 
+const adaptiveOrigin = {
+  name: 'adaptiveOrigin',
+  async fn(state) {
+    const {
+      x: rawX,
+      y: rawY,
+      rects: {
+        floating: floatRect
+      },
+      elements: {
+        floating
+      },
+      platform,
+      strategy,
+      placement
+    } = state;
+    const win = getWindow(floating);
+    const styles = win.getComputedStyle(floating);
+    const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
+    if (!hasTransition) {
+      return {
+        x: rawX,
+        y: rawY,
+        data: DEFAULT_SIDES
+      };
+    }
+    const offsetParent = await platform.getOffsetParent?.(floating);
+    let offsetDimensions = {
+      width: 0,
+      height: 0
+    };
+
+    // For fixed strategy, prefer visualViewport if available
+    if (strategy === 'fixed' && win?.visualViewport) {
+      offsetDimensions = {
+        width: win.visualViewport.width,
+        height: win.visualViewport.height
+      };
+    } else if (offsetParent === win) {
+      const doc = ownerDocument(floating);
+      offsetDimensions = {
+        width: doc.documentElement.clientWidth,
+        height: doc.documentElement.clientHeight
+      };
+    } else if (await platform.isElement?.(offsetParent)) {
+      offsetDimensions = await platform.getDimensions(offsetParent);
+    }
+    const currentSide = getSide(placement);
+    let x = rawX;
+    let y = rawY;
+    if (currentSide === 'left') {
+      x = offsetDimensions.width - (rawX + floatRect.width);
+    }
+    if (currentSide === 'top') {
+      y = offsetDimensions.height - (rawY + floatRect.height);
+    }
+    const sideX = currentSide === 'left' ? 'right' : DEFAULT_SIDES.sideX;
+    const sideY = currentSide === 'top' ? 'bottom' : DEFAULT_SIDES.sideY;
+    return {
+      x,
+      y,
+      data: {
+        sideX,
+        sideY
+      }
+    };
+  }
+};
+
+const popupViewportStateMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': value
+  } : null
+};
 /**
  * Builds morphing viewport containers for popups that animate between trigger-based content.
  * Handles previous-content snapshots, auto-resize, and state attributes for transitions.
@@ -1630,7 +1931,6 @@ function usePopupViewport(parameters) {
   const {
     store,
     side,
-    cssVars,
     children
   } = parameters;
   const direction = useDirection();
@@ -1650,14 +1950,15 @@ function usePopupViewport(parameters) {
   const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
   const currentContainerRef = React.useRef(null);
   const previousContainerRef = React.useRef(null);
-  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true, false);
+  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true);
   const cleanupFrame = useAnimationFrame();
+  const cleanupControllerRef = React.useRef(null);
   const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
   useIsoLayoutEffect(() => {
-    store.set('hasViewport', true);
+    store.set('adaptiveOrigin', adaptiveOrigin);
     return () => {
-      store.set('hasViewport', false);
+      store.set('adaptiveOrigin', undefined);
     };
   }, [store]);
   const handleMeasureLayout = useStableCallback(() => {
@@ -1673,6 +1974,16 @@ function usePopupViewport(parameters) {
       setPreviousContentDimensions(previousDimensions);
     }
   });
+  const armViewportCleanup = useStableCallback(() => {
+    cleanupControllerRef.current?.abort();
+    const controller = new AbortController();
+    cleanupControllerRef.current = controller;
+    onAnimationsFinished(() => {
+      setPreviousContentNode(null);
+      setPreviousContentDimensions(null);
+      capturedNodeRef.current = null;
+    }, controller.signal);
+  });
   const lastHandledTriggerRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     if (!open || !mounted) {
@@ -1690,19 +2001,33 @@ function usePopupViewport(parameters) {
       // so we can pass it to the style hook for animation purposes.
       const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
       setNewTriggerOffset(offset);
-      cleanupFrame.request(() => {
-        ReactDOM.flushSync(() => {
-          setShowStartingStyleAttribute(false);
-        });
-        onAnimationsFinished(() => {
-          setPreviousContentNode(null);
-          setPreviousContentDimensions(null);
-          capturedNodeRef.current = null;
-        });
-      });
       lastHandledTriggerRef.current = activeTrigger;
     }
-  }, [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame]);
+  }, [activeTrigger, previousActiveTrigger]);
+
+  // Arm cleanup after a trigger change, and re-arm it if the current container remounts
+  // mid-transition when a lagging payload bumps `currentContentKey`. The remount discards
+  // the running entry animation (and with transition-style CSS the replacement mounts at
+  // final styles with no animation at all), so re-run the starting-style choreography —
+  // otherwise the watcher either strands or fires before the previous container's exit
+  // animation finishes.
+  useIsoLayoutEffect(() => {
+    if (previousContentNode == null) {
+      return;
+    }
+
+    // Abort the stale watcher synchronously. The remount cancels the old container's
+    // animations, and the resulting promise rejection would otherwise run the cleanup
+    // in a microtask before the re-armed watcher below is in place.
+    cleanupControllerRef.current?.abort();
+    setShowStartingStyleAttribute(true);
+    cleanupFrame.request(() => {
+      ReactDOM.flushSync(() => {
+        setShowStartingStyleAttribute(false);
+      });
+      armViewportCleanup();
+    });
+  }, [currentContentKey, previousContentNode, armViewportCleanup, cleanupFrame]);
 
   // Capture a clone of the current content DOM subtree when not transitioning.
   // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
@@ -1739,8 +2064,8 @@ function usePopupViewport(parameters) {
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
-            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
-            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+            '--popup-width': `${previousContentDimensions.width}px`,
+            '--popup-height': `${previousContentDimensions.height}px`
           } : null),
           position: 'absolute'
         },
@@ -1865,28 +2190,6 @@ function usePopupContentKey(activeTriggerId, payload) {
   return `${activeTriggerId ?? 'current'}-${contentKey}`;
 }
 
-let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
-  /**
-   * The width of the parent popup.
-   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
-   * It can be used to freeze the dimensions of the popup when animating between different content.
-   */
-  MenuViewportCssVars["popupWidth"] = "--popup-width";
-  /**
-   * The height of the parent popup.
-   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
-   * It can be used to freeze the dimensions of the popup when animating between different content.
-   */
-  MenuViewportCssVars["popupHeight"] = "--popup-height";
-  return MenuViewportCssVars;
-}({});
-
-const stateAttributesMapping$2 = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
-
 /**
  * A viewport for displaying content transitions.
  * This component is only required if one popup can be opened by multiple triggers, its content
@@ -1916,7 +2219,6 @@ const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(compone
   } = usePopupViewport({
     store,
     side,
-    cssVars: MenuViewportCssVars,
     children
   });
   const state = {
@@ -1930,47 +2232,50 @@ const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(compone
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping: stateAttributesMapping$2
+    stateAttributesMapping: popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";
 
-class MenuHandle {
-  /**
-   * Internal store holding the menu's state.
-   * @internal
-   */
-
+/**
+ * Controls a Menu imperatively and associates detached `Menu.Trigger` components with a `Menu.Root`.
+ * Create one with `Menu.createHandle()` and pass it to the `handle` prop of the root and of any
+ * triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
+ */
+class MenuHandle extends BasePopupHandle {
   constructor() {
-    this.store = new MenuStore();
+    super(createNullMenuStore(), 'Menu');
   }
 
   /**
    * Opens the menu and associates it with the trigger with the given id.
-   * The trigger must be a Menu.Trigger component with this handle passed as a prop.
    *
-   * @param triggerId ID of the trigger to associate with the menu.
+   * This method should only be called in an event handler or an effect (not during rendering).
+   *
+   * @param triggerId ID of the trigger to associate with the menu. The trigger must be a matching
+   * `Menu.Trigger` with this handle passed as a prop.
    */
   open(triggerId) {
-    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
-    if (triggerId && !triggerElement) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `Base UI: MenuHandle.open: No trigger found with id "${triggerId}".` : formatErrorMessage(83, triggerId));
-    }
-    this.store.setOpen(true, createChangeEventDetails('imperative-action', undefined, triggerElement));
+    this.openByTrigger(triggerId);
   }
 
   /**
    * Closes the menu.
+   *
+   * This method should only be called in an event handler or an effect (not during rendering).
    */
   close() {
-    this.store.setOpen(false, createChangeEventDetails('imperative-action', undefined, undefined));
+    this.closePopup();
   }
 
   /**
-   * Indicates whether the menu is currently open.
+   * Whether the menu is currently open. Returns `false` while no root is attached to the handle.
    */
   get isOpen() {
-    return this.store.select('open');
+    return this.attachedStore?.select('open') ?? false;
   }
 }
 
@@ -2017,20 +2322,6 @@ function useScrollAreaScrollbarContext() {
   return context;
 }
 
-let ScrollAreaScrollbarCssVars = /*#__PURE__*/function (ScrollAreaScrollbarCssVars) {
-  /**
-   * The scroll area thumb's height.
-   * @type {number}
-   */
-  ScrollAreaScrollbarCssVars["scrollAreaThumbHeight"] = "--scroll-area-thumb-height";
-  /**
-   * The scroll area thumb's width.
-   * @type {number}
-   */
-  ScrollAreaScrollbarCssVars["scrollAreaThumbWidth"] = "--scroll-area-thumb-width";
-  return ScrollAreaScrollbarCssVars;
-}({});
-
 /**
  * A vertical or horizontal scrollbar for the scroll area.
  * Renders a `<div>` element.
@@ -2051,7 +2342,6 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
     scrollingX,
     scrollingY,
     hiddenState,
-    overflowEdges,
     scrollbarYRef,
     scrollbarXRef,
     viewportRef,
@@ -2060,43 +2350,37 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
     handlePointerDown,
     handlePointerUp,
     handleScroll,
+    disableViewportSnap,
     rootId,
     thumbSize,
-    hasMeasuredScrollbar
+    hasMeasuredScrollbar,
+    viewportState
   } = useScrollAreaRootContext();
+  const vertical = orientation === 'vertical';
   const state = {
+    ...viewportState,
     hovering,
-    scrolling: {
-      horizontal: scrollingX,
-      vertical: scrollingY
-    }[orientation],
-    orientation,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
+    scrolling: vertical ? scrollingY : scrollingX,
+    orientation
   };
   const direction = useDirection();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const isHidden = vertical ? hiddenState.y : hiddenState.x;
   const shouldRender = keepMounted || !isHidden;
   React.useEffect(() => {
     if (!shouldRender) {
       return undefined;
     }
     const viewportEl = viewportRef.current;
-    const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
+    const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
       return undefined;
     }
     function handleWheel(event) {
-      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+      if (!viewportEl || event.ctrlKey) {
         return;
       }
-      const horizontal = orientation === 'horizontal';
+      const horizontal = !vertical;
       const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
       const delta = horizontal ? event.deltaX : event.deltaY;
       if (delta === 0) {
@@ -2123,7 +2407,7 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
     return addEventListener(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-  }, [direction, handleScroll, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
+  }, [direction, handleScroll, vertical, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
   const props = {
     ...(rootId && {
       'data-id': `${rootId}-scrollbar`
@@ -2133,58 +2417,55 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
         return;
       }
       const target = getTarget(event.nativeEvent);
-      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
+      const thumbEl = vertical ? thumbYRef.current : thumbXRef.current;
 
       // Ignore clicks on thumb, including cases where React retargets the
       // synthetic event to the track host across a shadow boundary.
-      if (thumb && contains(thumb, target)) {
+      if (thumbEl && contains(thumbEl, target)) {
         return;
       }
-      if (!viewportRef.current) {
+      const viewportEl = viewportRef.current;
+      if (!viewportEl) {
         return;
       }
-
-      // Handle Y-axis (vertical) scroll
-      if (thumbYRef.current && scrollbarYRef.current && orientation === 'vertical') {
-        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
-        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
-        const thumbHeight = thumbYRef.current.offsetHeight;
-        const trackRectY = scrollbarYRef.current.getBoundingClientRect();
-        const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
-        const scrollableContentHeight = viewportRef.current.scrollHeight;
-        const viewportHeight = viewportRef.current.clientHeight;
-        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
-        const scrollRatioY = clickY / maxThumbOffsetY;
-        const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
-        viewportRef.current.scrollTop = newScrollTop;
-      }
-      if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') {
-        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
-        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
-        const thumbWidth = thumbXRef.current.offsetWidth;
-        const trackRectX = scrollbarXRef.current.getBoundingClientRect();
-        const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
-        const scrollableContentWidth = viewportRef.current.scrollWidth;
-        const viewportWidth = viewportRef.current.clientWidth;
-        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
-        const scrollRatioX = clickX / maxThumbOffsetX;
-        let newScrollLeft;
-        if (direction === 'rtl') {
-          // In RTL, invert the scroll direction
-          newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
-
-          // Adjust for browsers that use negative scrollLeft in RTL
-          if (viewportRef.current.scrollLeft <= 0) {
-            newScrollLeft = -newScrollLeft;
-          }
-        } else {
-          newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
-        }
-        viewportRef.current.scrollLeft = newScrollLeft;
+      const scrollbarEl = vertical ? scrollbarYRef.current : scrollbarXRef.current;
+      if (!thumbEl || !scrollbarEl) {
+        return;
+      }
+      const axis = vertical ? 'y' : 'x';
+      const thumbOffset = getOffset(thumbEl, 'margin', axis);
+      const scrollbarOffset = getOffset(scrollbarEl, 'padding', axis);
+      const thumbSizePx = vertical ? thumbEl.offsetHeight : thumbEl.offsetWidth;
+      const trackRect = scrollbarEl.getBoundingClientRect();
+      const clickPosition = vertical ? event.clientY - trackRect.top - thumbSizePx / 2 - scrollbarOffset + thumbOffset / 2 : event.clientX - trackRect.left - thumbSizePx / 2 - scrollbarOffset + thumbOffset / 2;
+      const scrollableSize = vertical ? viewportEl.scrollHeight : viewportEl.scrollWidth;
+      const viewportSize = vertical ? viewportEl.clientHeight : viewportEl.clientWidth;
+      const trackSize = vertical ? scrollbarEl.offsetHeight : scrollbarEl.offsetWidth;
+      const maxThumbOffset = trackSize - thumbSizePx - scrollbarOffset - thumbOffset;
+      // A short or heavily padded track can drive `maxThumbOffset` to zero or
+      // negative once the thumb hits its `MIN_THUMB_SIZE` floor. Dividing by it
+      // would yield a non-finite (`Infinity`/`NaN`) or inverted scroll position.
+      if (maxThumbOffset <= 0) {
+        return;
+      }
+      const scrollRatio = clickPosition / maxThumbOffset;
+      const maxScrollDistance = scrollableSize - viewportSize;
+
+      // Disable snapping before the jump-to-click assignment, or the
+      // assigned position quantizes to the nearest snap point and the thumb
+      // stays offset from the pointer for the whole drag. `handlePointerDown`
+      // below re-runs this as a guarded no-op for the thumb-drag path.
+      disableViewportSnap();
+      if (vertical) {
+        viewportEl.scrollTop = scrollRatio * maxScrollDistance;
+      } else if (direction === 'rtl') {
+        viewportEl.scrollLeft = -(1 - scrollRatio) * maxScrollDistance;
+      } else {
+        viewportEl.scrollLeft = scrollRatio * maxScrollDistance;
       }
       handleScroll({
-        x: viewportRef.current.scrollLeft,
-        y: viewportRef.current.scrollTop
+        x: viewportEl.scrollLeft,
+        y: viewportEl.scrollTop
       });
       handlePointerDown(event);
     },
@@ -2198,34 +2479,30 @@ const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function ScrollAreaScr
       WebkitUserSelect: 'none',
       userSelect: 'none',
       visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
-      ...(orientation === 'vertical' && {
+      ...(vertical ? {
         top: 0,
-        bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        bottom: 'var(--scroll-area-corner-height)',
         insetInlineEnd: 0,
-        [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
-      }),
-      ...(orientation === 'horizontal' && {
+        ['--scroll-area-thumb-height']: `${thumbSize.height}px`
+      } : {
         insetInlineStart: 0,
-        insetInlineEnd: `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        insetInlineEnd: 'var(--scroll-area-corner-width)',
         bottom: 0,
-        [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+        ['--scroll-area-thumb-width']: `${thumbSize.width}px`
       })
     }
   };
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, orientation === 'vertical' ? scrollbarYRef : scrollbarXRef],
+    ref: [forwardedRef, vertical ? scrollbarYRef : scrollbarXRef],
     state,
     props: [props, elementProps],
     stateAttributesMapping: scrollAreaStateAttributesMapping
   });
-  const contextValue = React.useMemo(() => ({
-    orientation
-  }), [orientation]);
   if (!shouldRender) {
     return null;
   }
   return /*#__PURE__*/jsx(ScrollAreaScrollbarContext.Provider, {
-    value: contextValue,
+    value: orientation,
     children: element
   });
 });
@@ -2313,43 +2590,30 @@ const ScrollAreaThumb = /*#__PURE__*/React.forwardRef(function ScrollAreaThumb(c
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
-    setScrollingX,
-    setScrollingY,
     scrollingX,
     scrollingY,
     hasMeasuredScrollbar
   } = useScrollAreaRootContext();
-  const {
-    orientation
-  } = useScrollAreaScrollbarContext();
+  const orientation = useScrollAreaScrollbarContext();
+  const vertical = orientation === 'vertical';
   const state = {
-    scrolling: orientation === 'horizontal' ? scrollingX : scrollingY,
+    scrolling: vertical ? scrollingY : scrollingX,
     orientation
   };
-  function endDrag(event) {
-    if (orientation === 'vertical') {
-      setScrollingY(false);
-    }
-    if (orientation === 'horizontal') {
-      setScrollingX(false);
-    }
-    handlePointerUp(event);
-  }
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
+    ref: [forwardedRef, vertical ? thumbYRef : thumbXRef],
     state,
     props: [{
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
       style: {
         visibility: hasMeasuredScrollbar ? undefined : 'hidden',
-        ...(orientation === 'vertical' && {
-          height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
-        }),
-        ...(orientation === 'horizontal' && {
-          width: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+        ...(vertical ? {
+          height: 'var(--scroll-area-thumb-height)'
+        } : {
+          width: 'var(--scroll-area-thumb-width)'
         })
       }
     }, elementProps]
@@ -2429,7 +2693,7 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   Positioner: ComboboxPositioner,
   Root: ComboboxRoot,
   Row: ComboboxRow,
-  Separator: Separator,
+  Separator: ComboboxSeparator,
   Status: ComboboxStatus,
   Trigger: ComboboxTrigger,
   Value: ComboboxValue,
@@ -2476,22 +2740,6 @@ function getViewportRect(teleportDistance, scrubAreaEl) {
   };
 }
 
-// This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
-// scale with the content on pinch-zoom.
-function subscribeToVisualViewportResize(element, visualScaleRef) {
-  const vV = getWindow(element).visualViewport;
-  if (!vV) {
-    return () => {};
-  }
-  function handleVisualResize() {
-    if (vV) {
-      visualScaleRef.current = vV.scale;
-    }
-  }
-  handleVisualResize();
-  return addEventListener(vV, 'resize', handleVisualResize);
-}
-
 const SCRUB_AREA_STYLE = {
   touchAction: 'none',
   WebkitUserSelect: 'none',
@@ -2517,8 +2765,6 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
   const {
     state,
     setIsScrubbing: setRootScrubbing,
-    disabled,
-    readOnly,
     inputRef,
     incrementValue,
     allowInputSyncRef,
@@ -2527,6 +2773,10 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     lastChangedValueRef,
     valueRef
   } = useNumberFieldRootContext();
+  const {
+    disabled,
+    readOnly
+  } = state;
   const scrubAreaRef = React.useRef(null);
   const isScrubbingRef = React.useRef(false);
   const didMoveRef = React.useRef(false);
@@ -2536,21 +2786,15 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     x: 0,
     y: 0
   });
-  const visualScaleRef = React.useRef(1);
   const exitPointerLockTimeout = useTimeout();
   const [isTouchInput, setIsTouchInput] = React.useState(false);
   const [isPointerLockDenied, setIsPointerLockDenied] = React.useState(false);
   const [isScrubbing, setIsScrubbing] = React.useState(false);
-  React.useEffect(() => {
-    if (!isScrubbing || !scrubAreaCursorRef.current) {
-      return undefined;
-    }
-    return subscribeToVisualViewportResize(scrubAreaCursorRef.current, visualScaleRef);
-  }, [isScrubbing]);
-  function updateCursorTransform(x, y) {
-    if (scrubAreaCursorRef.current) {
-      scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
-    }
+  function updateCursorTransform(virtualCursor, x, y) {
+    // Invert the visual viewport scale so the cursor matches the OS cursor, which doesn't
+    // scale with the content on pinch-zoom.
+    const scale = getWindow(virtualCursor).visualViewport?.scale ?? 1;
+    virtualCursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / scale})`;
   }
   const onScrub = useStableCallback(({
     movementX,
@@ -2563,24 +2807,23 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     }
     const rect = getViewportRect(teleportDistance, scrubAreaEl);
     const coords = virtualCursorCoords.current;
+
+    // Wrap the cursor to the opposite edge when its center crosses a viewport bound.
+    const wrap = (coord, halfSize, low, high) => {
+      if (coord + halfSize < low) {
+        return high - halfSize;
+      }
+      if (coord + halfSize > high) {
+        return low - halfSize;
+      }
+      return coord;
+    };
     const newCoords = {
-      x: Math.round(coords.x + movementX),
-      y: Math.round(coords.y + movementY)
+      x: wrap(Math.round(coords.x + movementX), virtualCursor.offsetWidth / 2, rect.left, rect.right),
+      y: wrap(Math.round(coords.y + movementY), virtualCursor.offsetHeight / 2, rect.top, rect.bottom)
     };
-    const cursorWidth = virtualCursor.offsetWidth;
-    const cursorHeight = virtualCursor.offsetHeight;
-    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.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);
+    updateCursorTransform(virtualCursor, newCoords.x, newCoords.y);
   });
   const onScrubbingChange = useStableCallback((scrubbingValue, {
     clientX,
@@ -2599,7 +2842,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
       y: clientY - virtualCursor.offsetHeight / 2
     };
     virtualCursorCoords.current = initialCoords;
-    updateCursorTransform(initialCoords.x, initialCoords.y);
+    updateCursorTransform(virtualCursor, initialCoords.x, initialCoords.y);
   });
   React.useEffect(function registerGlobalScrubbingEventListeners() {
     // Only listen while actively scrubbing; avoids unrelated pointerup events committing.
@@ -2641,6 +2884,9 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
       }
     }
     function handleScrubPointerMove(event) {
+      // The effects below can tear down and re-run without unmounting (`<Activity>`), which
+      // clears the ref while `isScrubbing` stays `true` and re-attaches this listener. The ref
+      // is the source of truth for whether a pointer is actually down.
       if (!isScrubbingRef.current) {
         return;
       }
@@ -2708,8 +2954,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     role: 'presentation',
     style: SCRUB_AREA_STYLE,
     async onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+      if (event.defaultPrevented || readOnly || event.button || disabled) {
         return;
       }
       const isTouch = event.pointerType === 'touch';
@@ -2748,7 +2993,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     ref: [forwardedRef, scrubAreaRef],
     state,
     props: [defaultProps, elementProps],
-    stateAttributesMapping: stateAttributesMapping$6
+    stateAttributesMapping: stateAttributesMapping$4
   });
   const contextValue = React.useMemo(() => ({
     isScrubbing,
@@ -2805,7 +3050,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function Number
       role: 'presentation',
       style: CURSOR_STYLE
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$6
+    stateAttributesMapping: stateAttributesMapping$4
   });
   return element && /*#__PURE__*/ReactDOM.createPortal(element, ownerDocument(domElement).body);
 });
@@ -2849,7 +3094,8 @@ const SelectLabel = /*#__PURE__*/React.forwardRef(function SelectLabel(component
     id: defaultLabelId,
     fallbackControlId: triggerElement?.id ?? rootId,
     setLabelId(nextLabelId) {
-      store.set('labelId', nextLabelId);
+      const resolvedLabelId = typeof nextLabelId === 'function' ? nextLabelId(store.state.labelId) : nextLabelId;
+      store.set('labelId', resolvedLabelId);
     }
   });
   return useRenderElement('div', componentProps, {
@@ -2894,7 +3140,7 @@ const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(componentPr
 });
 if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
 
-const stateAttributesMapping$1 = {
+const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
 };
@@ -2933,17 +3179,12 @@ const SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackdrop(com
         WebkitUserSelect: 'none'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping
   });
   return element;
 });
 if (process.env.NODE_ENV !== "production") SelectBackdrop.displayName = "SelectBackdrop";
 
-const stateAttributesMapping = {
-  ...popupStateMapping,
-  ...transitionStatusMapping
-};
-
 /**
  * Displays an element positioned against the select popup anchor.
  * Renders a `<div>` element.
@@ -2982,7 +3223,7 @@ const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(component
       style: arrowStyles,
       'aria-hidden': true
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: popupTransitionStateMapping
   });
   if (alignItemWithTriggerActive) {
     return null;
@@ -3000,7 +3241,7 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
     className,
     style,
     direction,
-    keepMounted = false,
+    keepMounted,
     ...elementProps
   } = componentProps;
   const isUp = direction === 'up';
@@ -3031,12 +3272,10 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
   } = useTransitionStatus(visible);
   useIsoLayoutEffect(() => {
     scrollArrowsMountedCountRef.current += 1;
-    if (!store.state.hasScrollArrows) {
-      store.set('hasScrollArrows', true);
-    }
+    store.set('hasScrollArrows', true);
     return () => {
       scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
-      if (scrollArrowsMountedCountRef.current === 0 && store.state.hasScrollArrows) {
+      if (scrollArrowsMountedCountRef.current === 0) {
         store.set('hasScrollArrows', false);
       }
     };
@@ -3073,7 +3312,7 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
           return;
         }
         store.set('activeIndex', null);
-        handleScrollArrowVisibility();
+        handleScrollArrowVisibility(scroller);
         const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
         const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
         const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
@@ -3081,11 +3320,6 @@ const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectScrollArr
         if (scrollTop !== scroller.scrollTop) {
           scroller.scrollTop = scrollTop;
         }
-
-        // Fallback when there are no items registered yet.
-        if (items.length === 0) {
-          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
-        }
         if (isScrolledToEdge) {
           timeout.clear();
           return;
@@ -3174,6 +3408,14 @@ const SelectScrollUpArrow = /*#__PURE__*/React.forwardRef(function SelectScrollU
 });
 if (process.env.NODE_ENV !== "production") SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
 
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
+ */
+const SelectSeparator = ListboxSeparator;
+
 var index_parts = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: SelectArrow,
@@ -3192,7 +3434,7 @@ var index_parts = /*#__PURE__*/Object.freeze({
   Root: SelectRoot,
   ScrollDownArrow: SelectScrollDownArrow,
   ScrollUpArrow: SelectScrollUpArrow,
-  Separator: Separator,
+  Separator: SelectSeparator,
   Trigger: SelectTrigger,
   Value: SelectValue
 });