@base-ui/react 1.6.0 → 1.7.0

package/scroll-area/utils/getOffset.mjs

@@ -3,12 +3,13 @@ export function getOffset(element, prop, axis) {
     return 0;
   }
   const styles = getComputedStyle(element);
-  const propAxis = axis === 'x' ? 'Inline' : 'Block';
+  const key = `${prop}${axis === 'x' ? 'Inline' : 'Block'}`;
+  const start = parseFloat(styles[`${key}Start`]);
 
   // Safari misreports `marginInlineEnd` in RTL.
   // We have to assume the start/end values are symmetrical, which is likely.
   if (axis === 'x' && prop === 'margin') {
-    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+    return start * 2;
   }
-  return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+  return start + parseFloat(styles[`${key}End`]);
 }

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -20,9 +20,11 @@ var _constants = require("../constants");
 var _clamp = require("../../internals/clamp");
 var _styles = require("../../utils/styles");
 var _stateAttributes = require("../root/stateAttributes");
-var _ScrollAreaViewportCssVars = require("./ScrollAreaViewportCssVars");
 var _scrollEdges = require("../../utils/scrollEdges");
 var _jsxRuntime = require("react/jsx-runtime");
+// CSS variable names inlined so `ScrollAreaViewportCssVars` tree-shakes out.
+const OVERFLOW_EDGE_VARS = ['--scroll-area-overflow-x-start', '--scroll-area-overflow-x-end', '--scroll-area-overflow-y-start', '--scroll-area-overflow-y-end'];
+
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 let scrollAreaOverflowVarsRegistered = false;
@@ -43,7 +45,7 @@ function removeCSSVariableInheritance() {
     return;
   }
   if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
-    [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXStart, _ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, _ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYStart, _ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYEnd].forEach(name => {
+    OVERFLOW_EDGE_VARS.forEach(name => {
       try {
         CSS.registerProperty({
           name,
@@ -87,12 +89,11 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     hiddenState,
     setHasMeasuredScrollbar,
     handleScroll,
+    touchModality,
     setHovering,
     setOverflowEdges,
-    overflowEdges,
     overflowEdgeThreshold,
-    scrollingX,
-    scrollingY
+    viewportState
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
   const direction = (0, _DirectionContext.useDirection)();
   const programmaticScrollRef = React.useRef(true);
@@ -137,18 +138,12 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     let scrollLeftFromStart = 0;
     let scrollLeftFromEnd = 0;
     if (!scrollbarXHidden) {
-      let rawScrollLeftFromStart = 0;
-      if (direction === 'rtl') {
-        rawScrollLeftFromStart = (0, _clamp.clamp)(-scrollLeft, 0, maxScrollLeft);
-      } else {
-        rawScrollLeftFromStart = (0, _clamp.clamp)(scrollLeft, 0, maxScrollLeft);
-      }
-      scrollLeftFromStart = (0, _scrollEdges.normalizeScrollOffset)(rawScrollLeftFromStart, maxScrollLeft);
+      // `normalizeScrollOffset` clamps internally.
+      scrollLeftFromStart = (0, _scrollEdges.normalizeScrollOffset)(direction === 'rtl' ? -scrollLeft : scrollLeft, maxScrollLeft);
       scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
     }
-    const rawScrollTopFromStart = !scrollbarYHidden ? (0, _clamp.clamp)(scrollTop, 0, maxScrollTop) : 0;
-    const scrollTopFromStart = !scrollbarYHidden ? (0, _scrollEdges.normalizeScrollOffset)(rawScrollTopFromStart, maxScrollTop) : 0;
-    const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+    const scrollTopFromStart = scrollbarYHidden ? 0 : (0, _scrollEdges.normalizeScrollOffset)(scrollTop, maxScrollTop);
+    const scrollTopFromEnd = scrollbarYHidden ? 0 : maxScrollTop - scrollTopFromStart;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
     let nextCornerWidth = 0;
@@ -173,76 +168,53 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
     const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
     const clampedNextWidth = Math.max(_constants.MIN_THUMB_SIZE, maxNextWidth * ratioX);
     const clampedNextHeight = Math.max(_constants.MIN_THUMB_SIZE, maxNextHeight * ratioY);
-    setThumbSize(prevSize => {
-      if (prevSize.height === clampedNextHeight && prevSize.width === clampedNextWidth) {
-        return prevSize;
-      }
-      return {
-        width: clampedNextWidth,
-        height: clampedNextHeight
-      };
-    });
+    setThumbSize(prevSize => pickState(prevSize, {
+      width: clampedNextWidth,
+      height: clampedNextHeight
+    }));
 
     // Handle Y (vertical) scroll
     if (scrollbarYEl && thumbYEl) {
       const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
-      const scrollRangeY = scrollableContentHeight - viewportHeight;
-      const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
-
-      // In Safari, don't allow it to go negative or too far as `scrollTop` considers the rubber
-      // band effect.
-      const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+      const thumbOffsetY = applyOverscrollThumb(thumbYEl, '--scroll-area-thumb-height', scrollTop, maxScrollTop, scrollableContentHeight, clampedNextHeight, maxThumbOffsetY);
       thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
     }
 
     // Handle X (horizontal) scroll
     if (scrollbarXEl && thumbXEl) {
       const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
-      const scrollRangeX = scrollableContentWidth - viewportWidth;
-      const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeft / scrollRangeX;
-
-      // In Safari, don't allow it to go negative or too far as `scrollLeft` considers the rubber
-      // band effect.
-      const thumbOffsetX = direction === 'rtl' ? (0, _clamp.clamp)(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : (0, _clamp.clamp)(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
-      thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
-    }
-    const overflowMetricsPx = [[_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart], [_ScrollAreaViewportCssVars.ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]];
-    for (const [cssVar, value] of overflowMetricsPx) {
-      viewportEl.style.setProperty(cssVar, `${value}px`);
+      // RTL scrolls from 0 down to `-maxScrollLeft`; measure from the inline start edge so the
+      // overscroll math is direction-agnostic, then flip the resulting offset back below.
+      const scrollFromStart = direction === 'rtl' ? -scrollLeft : scrollLeft;
+      const offsetX = applyOverscrollThumb(thumbXEl, '--scroll-area-thumb-width', scrollFromStart, maxScrollLeft, scrollableContentWidth, clampedNextWidth, maxThumbOffsetX);
+      thumbXEl.style.transform = `translate3d(${direction === 'rtl' ? -offsetX : offsetX}px,0,0)`;
     }
+    const overflowMetricsPx = [scrollLeftFromStart, scrollLeftFromEnd, scrollTopFromStart, scrollTopFromEnd];
+    OVERFLOW_EDGE_VARS.forEach((cssVar, index) => {
+      viewportEl.style.setProperty(cssVar, `${overflowMetricsPx[index]}px`);
+    });
     if (cornerEl) {
-      if (scrollbarXHidden || scrollbarYHidden) {
-        setCornerSize({
-          width: 0,
-          height: 0
-        });
-      } else if (!scrollbarXHidden && !scrollbarYHidden) {
-        setCornerSize({
-          width: nextCornerWidth,
-          height: nextCornerHeight
-        });
-      }
+      // Bail when the size is unchanged (like `setThumbSize` above); otherwise a
+      // fresh object literal on every scroll frame rebuilds the root context and
+      // re-renders every scroll-area part.
+      // `nextCornerWidth`/`nextCornerHeight` stay 0 when either scrollbar is hidden.
+      setCornerSize(prevSize => pickState(prevSize, {
+        width: nextCornerWidth,
+        height: nextCornerHeight
+      }));
     }
-    setHiddenState(prevState => mergeHiddenState(prevState, nextHiddenState));
+    setHiddenState(prevState => pickState(prevState, nextHiddenState));
     const nextOverflowEdges = {
       xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
       xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
       yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
       yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
     };
-    setOverflowEdges(prev => {
-      if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
-        return prev;
-      }
-      return nextOverflowEdges;
-    });
+    setOverflowEdges(prev => pickState(prev, nextOverflowEdges));
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!viewportRef.current) {
-      return;
-    }
     removeCSSVariableInheritance();
-  }, [viewportRef]);
+  }, []);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Wait for scrollbar and thumb refs after hidden-state toggles, refresh math on direction
     // flips, and re-evaluate overflow edges when the threshold changes.
@@ -285,6 +257,10 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       if (animations.length === 0) {
         return;
       }
+
+      // `allSettled` never rejects, but `computeThumbPosition` can still run against a
+      // torn-down tree once the animations resolve. Swallow instead of leaking an unhandled
+      // rejection; `void` alone would only silence the floating-promise lint.
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
@@ -312,7 +288,13 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
         return;
       }
       computeThumbPosition();
-      if (!programmaticScrollRef.current) {
+
+      // WebKit consumes a touch that catches an in-flight momentum scroll or
+      // rubber-band bounce without dispatching any DOM events for the whole
+      // gesture (not even `touchstart`), so scrolls cannot be attributed to
+      // the user through events. Treat every scroll in touch modality as
+      // user-driven instead.
+      if (touchModality || !programmaticScrollRef.current) {
         handleScroll({
           x: viewportRef.current.scrollLeft,
           y: viewportRef.current.scrollTop
@@ -330,21 +312,10 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       });
     },
     onWheel: handleUserInteraction,
-    onTouchMove: handleUserInteraction,
     onPointerMove: handleUserInteraction,
     onPointerEnter: handleUserInteraction,
     onKeyDown: handleUserInteraction
   };
-  const viewportState = React.useMemo(() => ({
-    scrolling: scrollingX || scrollingY,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
-  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,
@@ -369,9 +340,35 @@ function getHiddenState(viewport) {
     corner: y || x
   };
 }
-function mergeHiddenState(prevState, nextState) {
-  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
-    return prevState;
+
+/**
+ * Returns `prev` when `next` is shallow-equal to it so setState bails out and
+ * scroll-frame updates don't rebuild the root context.
+ */
+function pickState(prev, next) {
+  for (const key in next) {
+    if (prev[key] !== next[key]) {
+      return next;
+    }
   }
-  return nextState;
+  return prev;
+}
+
+/**
+ * Sizes the thumb and returns its axis offset. On overscroll (Safari rubber-band only) it shrinks
+ * against the pinned edge, damped by `content / (content + overscroll)` to match native feedback;
+ * the size flows through the thumb-size variable so the resting `var(...)` still applies.
+ */
+function applyOverscrollThumb(thumbEl, sizeVar, scrollFromStart, maxScroll, content, size, maxThumbOffset) {
+  const clamped = (0, _clamp.clamp)(scrollFromStart, 0, maxScroll);
+  const overscroll = scrollFromStart - clamped;
+  const nextSize = Math.max(_constants.MIN_THUMB_SIZE, size * content / (content + Math.abs(overscroll)));
+
+  // Passing an empty string removes the override, restoring the resting `var(...)` size.
+  thumbEl.style.setProperty(sizeVar, overscroll ? `${nextSize}px` : '');
+
+  // Slide proportionally; at the end edge push down by the shrink so the thumb stays pinned to
+  // it, while a start overscroll pins to offset 0.
+  const offset = maxScroll ? clamped / maxScroll * maxThumbOffset : 0;
+  return offset + (overscroll > 0 ? size - nextSize : 0);
 }

package/scroll-area/viewport/ScrollAreaViewport.mjs

@@ -14,12 +14,14 @@ import { MIN_THUMB_SIZE } from "../constants.mjs";
 import { clamp } from "../../internals/clamp.mjs";
 import { styleDisableScrollbar } from "../../utils/styles.mjs";
 import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.mjs";
-import { ScrollAreaViewportCssVars } from "./ScrollAreaViewportCssVars.mjs";
 import { normalizeScrollOffset } from "../../utils/scrollEdges.mjs";
 
+// CSS variable names inlined so `ScrollAreaViewportCssVars` tree-shakes out.
+import { jsx as _jsx } from "react/jsx-runtime";
+const OVERFLOW_EDGE_VARS = ['--scroll-area-overflow-x-start', '--scroll-area-overflow-x-end', '--scroll-area-overflow-y-start', '--scroll-area-overflow-y-end'];
+
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
-import { jsx as _jsx } from "react/jsx-runtime";
 let scrollAreaOverflowVarsRegistered = false;
 
 /**
@@ -38,7 +40,7 @@ function removeCSSVariableInheritance() {
     return;
   }
   if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
-    [ScrollAreaViewportCssVars.scrollAreaOverflowXStart, ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, ScrollAreaViewportCssVars.scrollAreaOverflowYStart, ScrollAreaViewportCssVars.scrollAreaOverflowYEnd].forEach(name => {
+    OVERFLOW_EDGE_VARS.forEach(name => {
       try {
         CSS.registerProperty({
           name,
@@ -82,12 +84,11 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     hiddenState,
     setHasMeasuredScrollbar,
     handleScroll,
+    touchModality,
     setHovering,
     setOverflowEdges,
-    overflowEdges,
     overflowEdgeThreshold,
-    scrollingX,
-    scrollingY
+    viewportState
   } = useScrollAreaRootContext();
   const direction = useDirection();
   const programmaticScrollRef = React.useRef(true);
@@ -132,18 +133,12 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     let scrollLeftFromStart = 0;
     let scrollLeftFromEnd = 0;
     if (!scrollbarXHidden) {
-      let rawScrollLeftFromStart = 0;
-      if (direction === 'rtl') {
-        rawScrollLeftFromStart = clamp(-scrollLeft, 0, maxScrollLeft);
-      } else {
-        rawScrollLeftFromStart = clamp(scrollLeft, 0, maxScrollLeft);
-      }
-      scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+      // `normalizeScrollOffset` clamps internally.
+      scrollLeftFromStart = normalizeScrollOffset(direction === 'rtl' ? -scrollLeft : scrollLeft, maxScrollLeft);
       scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
     }
-    const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
-    const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
-    const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+    const scrollTopFromStart = scrollbarYHidden ? 0 : normalizeScrollOffset(scrollTop, maxScrollTop);
+    const scrollTopFromEnd = scrollbarYHidden ? 0 : maxScrollTop - scrollTopFromStart;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
     let nextCornerWidth = 0;
@@ -168,76 +163,53 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
     const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
     const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
-    setThumbSize(prevSize => {
-      if (prevSize.height === clampedNextHeight && prevSize.width === clampedNextWidth) {
-        return prevSize;
-      }
-      return {
-        width: clampedNextWidth,
-        height: clampedNextHeight
-      };
-    });
+    setThumbSize(prevSize => pickState(prevSize, {
+      width: clampedNextWidth,
+      height: clampedNextHeight
+    }));
 
     // Handle Y (vertical) scroll
     if (scrollbarYEl && thumbYEl) {
       const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
-      const scrollRangeY = scrollableContentHeight - viewportHeight;
-      const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
-
-      // In Safari, don't allow it to go negative or too far as `scrollTop` considers the rubber
-      // band effect.
-      const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+      const thumbOffsetY = applyOverscrollThumb(thumbYEl, '--scroll-area-thumb-height', scrollTop, maxScrollTop, scrollableContentHeight, clampedNextHeight, maxThumbOffsetY);
       thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
     }
 
     // Handle X (horizontal) scroll
     if (scrollbarXEl && thumbXEl) {
       const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
-      const scrollRangeX = scrollableContentWidth - viewportWidth;
-      const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeft / scrollRangeX;
-
-      // In Safari, don't allow it to go negative or too far as `scrollLeft` considers the rubber
-      // band effect.
-      const thumbOffsetX = direction === 'rtl' ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
-      thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
-    }
-    const overflowMetricsPx = [[ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd], [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]];
-    for (const [cssVar, value] of overflowMetricsPx) {
-      viewportEl.style.setProperty(cssVar, `${value}px`);
+      // RTL scrolls from 0 down to `-maxScrollLeft`; measure from the inline start edge so the
+      // overscroll math is direction-agnostic, then flip the resulting offset back below.
+      const scrollFromStart = direction === 'rtl' ? -scrollLeft : scrollLeft;
+      const offsetX = applyOverscrollThumb(thumbXEl, '--scroll-area-thumb-width', scrollFromStart, maxScrollLeft, scrollableContentWidth, clampedNextWidth, maxThumbOffsetX);
+      thumbXEl.style.transform = `translate3d(${direction === 'rtl' ? -offsetX : offsetX}px,0,0)`;
     }
+    const overflowMetricsPx = [scrollLeftFromStart, scrollLeftFromEnd, scrollTopFromStart, scrollTopFromEnd];
+    OVERFLOW_EDGE_VARS.forEach((cssVar, index) => {
+      viewportEl.style.setProperty(cssVar, `${overflowMetricsPx[index]}px`);
+    });
     if (cornerEl) {
-      if (scrollbarXHidden || scrollbarYHidden) {
-        setCornerSize({
-          width: 0,
-          height: 0
-        });
-      } else if (!scrollbarXHidden && !scrollbarYHidden) {
-        setCornerSize({
-          width: nextCornerWidth,
-          height: nextCornerHeight
-        });
-      }
+      // Bail when the size is unchanged (like `setThumbSize` above); otherwise a
+      // fresh object literal on every scroll frame rebuilds the root context and
+      // re-renders every scroll-area part.
+      // `nextCornerWidth`/`nextCornerHeight` stay 0 when either scrollbar is hidden.
+      setCornerSize(prevSize => pickState(prevSize, {
+        width: nextCornerWidth,
+        height: nextCornerHeight
+      }));
     }
-    setHiddenState(prevState => mergeHiddenState(prevState, nextHiddenState));
+    setHiddenState(prevState => pickState(prevState, nextHiddenState));
     const nextOverflowEdges = {
       xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
       xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
       yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
       yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
     };
-    setOverflowEdges(prev => {
-      if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
-        return prev;
-      }
-      return nextOverflowEdges;
-    });
+    setOverflowEdges(prev => pickState(prev, nextOverflowEdges));
   });
   useIsoLayoutEffect(() => {
-    if (!viewportRef.current) {
-      return;
-    }
     removeCSSVariableInheritance();
-  }, [viewportRef]);
+  }, []);
   useIsoLayoutEffect(() => {
     // Wait for scrollbar and thumb refs after hidden-state toggles, refresh math on direction
     // flips, and re-evaluate overflow edges when the threshold changes.
@@ -280,6 +252,10 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       if (animations.length === 0) {
         return;
       }
+
+      // `allSettled` never rejects, but `computeThumbPosition` can still run against a
+      // torn-down tree once the animations resolve. Swallow instead of leaking an unhandled
+      // rejection; `void` alone would only silence the floating-promise lint.
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
@@ -307,7 +283,13 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
         return;
       }
       computeThumbPosition();
-      if (!programmaticScrollRef.current) {
+
+      // WebKit consumes a touch that catches an in-flight momentum scroll or
+      // rubber-band bounce without dispatching any DOM events for the whole
+      // gesture (not even `touchstart`), so scrolls cannot be attributed to
+      // the user through events. Treat every scroll in touch modality as
+      // user-driven instead.
+      if (touchModality || !programmaticScrollRef.current) {
         handleScroll({
           x: viewportRef.current.scrollLeft,
           y: viewportRef.current.scrollTop
@@ -325,21 +307,10 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       });
     },
     onWheel: handleUserInteraction,
-    onTouchMove: handleUserInteraction,
     onPointerMove: handleUserInteraction,
     onPointerEnter: handleUserInteraction,
     onKeyDown: handleUserInteraction
   };
-  const viewportState = React.useMemo(() => ({
-    scrolling: scrollingX || scrollingY,
-    hasOverflowX: !hiddenState.x,
-    hasOverflowY: !hiddenState.y,
-    overflowXStart: overflowEdges.xStart,
-    overflowXEnd: overflowEdges.xEnd,
-    overflowYStart: overflowEdges.yStart,
-    overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.corner
-  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,
@@ -364,9 +335,35 @@ function getHiddenState(viewport) {
     corner: y || x
   };
 }
-function mergeHiddenState(prevState, nextState) {
-  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
-    return prevState;
+
+/**
+ * Returns `prev` when `next` is shallow-equal to it so setState bails out and
+ * scroll-frame updates don't rebuild the root context.
+ */
+function pickState(prev, next) {
+  for (const key in next) {
+    if (prev[key] !== next[key]) {
+      return next;
+    }
   }
-  return nextState;
+  return prev;
+}
+
+/**
+ * Sizes the thumb and returns its axis offset. On overscroll (Safari rubber-band only) it shrinks
+ * against the pinned edge, damped by `content / (content + overscroll)` to match native feedback;
+ * the size flows through the thumb-size variable so the resting `var(...)` still applies.
+ */
+function applyOverscrollThumb(thumbEl, sizeVar, scrollFromStart, maxScroll, content, size, maxThumbOffset) {
+  const clamped = clamp(scrollFromStart, 0, maxScroll);
+  const overscroll = scrollFromStart - clamped;
+  const nextSize = Math.max(MIN_THUMB_SIZE, size * content / (content + Math.abs(overscroll)));
+
+  // Passing an empty string removes the override, restoring the resting `var(...)` size.
+  thumbEl.style.setProperty(sizeVar, overscroll ? `${nextSize}px` : '');
+
+  // Slide proportionally; at the end edge push down by the shrink so the thumb stays pinned to
+  // it, while a start overscroll pins to offset 0.
+  const offset = maxScroll ? clamped / maxScroll * maxThumbOffset : 0;
+  return offset + (overscroll > 0 ? size - nextSize : 0);
 }

package/select/arrow/SelectArrow.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
-import type { Align, Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Align, Side } from "../../internals/useAnchorPositioning.mjs";
 /**
  * Displays an element positioned against the select popup anchor.
  * Renders a `<div>` element.

package/select/arrow/SelectArrow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
-import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { Align, Side } from "../../internals/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the select popup anchor.
  * Renders a `<div>` element.

package/select/arrow/SelectArrow.js

@@ -11,14 +11,8 @@ var _store = require("@base-ui/utils/store");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _store2 = require("../store");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
 /**
  * Displays an element positioned against the select popup anchor.
  * Renders a `<div>` element.
@@ -57,7 +51,7 @@ const SelectArrow = exports.SelectArrow = /*#__PURE__*/React.forwardRef(function
       style: arrowStyles,
       'aria-hidden': true
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping
   });
   if (alignItemWithTriggerActive) {
     return null;

package/select/arrow/SelectArrow.mjs

@@ -4,14 +4,9 @@ import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.mjs";
 import { useSelectRootContext } from "../root/SelectRootContext.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { selectors } from "../store.mjs";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping
-};
 
 /**
  * Displays an element positioned against the select popup anchor.
@@ -51,7 +46,7 @@ export const SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(co
       style: arrowStyles,
       'aria-hidden': true
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: popupTransitionStateMapping
   });
   if (alignItemWithTriggerActive) {
     return null;

package/select/backdrop/SelectBackdropDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum SelectBackdropDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/backdrop/SelectBackdropDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum SelectBackdropDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/backdrop/SelectBackdropDataAttributes.js

@@ -15,7 +15,7 @@ let SelectBackdropDataAttributes = exports.SelectBackdropDataAttributes = functi
    */
   SelectBackdropDataAttributes[SelectBackdropDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   SelectBackdropDataAttributes[SelectBackdropDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/backdrop/SelectBackdropDataAttributes.mjs

@@ -9,7 +9,7 @@ export let SelectBackdropDataAttributes = function (SelectBackdropDataAttributes
    */
   SelectBackdropDataAttributes[SelectBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the select is animating in.
+   * Present when the select begins animating in.
    */
   SelectBackdropDataAttributes[SelectBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/group-label/SelectGroupLabel.js

@@ -31,6 +31,9 @@ const SelectGroupLabel = exports.SelectGroupLabel = /*#__PURE__*/React.forwardRe
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     setLabelId(id);
+    return () => {
+      setLabelId(currentId => currentId === id ? undefined : currentId);
+    };
   }, [id, setLabelId]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,

package/select/group-label/SelectGroupLabel.mjs

@@ -26,6 +26,9 @@ export const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGro
   const id = useBaseUiId(idProp);
   useIsoLayoutEffect(() => {
     setLabelId(id);
+    return () => {
+      setLabelId(currentId => currentId === id ? undefined : currentId);
+    };
   }, [id, setLabelId]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,