@base-ui/react 1.6.0 → 1.8.0

package/scroll-area/viewport/ScrollAreaViewport.mjs

@@ -5,21 +5,23 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { platform } from '@base-ui/utils/platform';
 import { useTimeout } from '@base-ui/utils/useTimeout';
+import { clamp } from '@base-ui/utils/clamp';
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.mjs";
 import { ScrollAreaViewportContext } from "./ScrollAreaViewportContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
 import { getOffset } from "../utils/getOffset.mjs";
 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";
+import * as ScrollAreaViewportCssVars from "./ScrollAreaViewportCssVars.mjs";
+import * as ScrollAreaScrollbarCssVars from "../scrollbar/ScrollAreaScrollbarCssVars.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const OVERFLOW_EDGE_VARS = [ScrollAreaViewportCssVars.scrollAreaOverflowXStart, ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, ScrollAreaViewportCssVars.scrollAreaOverflowYStart, ScrollAreaViewportCssVars.scrollAreaOverflowYEnd];
 
 // 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, ScrollAreaScrollbarCssVars.scrollAreaThumbHeight, 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, ScrollAreaScrollbarCssVars.scrollAreaThumbWidth, 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/scroll-area/viewport/ScrollAreaViewportCssVars.d.mts

@@ -1,22 +1,20 @@
-export declare enum ScrollAreaViewportCssVars {
-  /**
-   * The distance from the horizontal start edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowXStart = "--scroll-area-overflow-x-start",
-  /**
-   * The distance from the horizontal end edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowXEnd = "--scroll-area-overflow-x-end",
-  /**
-   * The distance from the vertical start edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowYStart = "--scroll-area-overflow-y-start",
-  /**
-   * The distance from the vertical end edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowYEnd = "--scroll-area-overflow-y-end",
-}
+/**
+ * The distance from the horizontal start edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowXStart = "--scroll-area-overflow-x-start";
+/**
+ * The distance from the horizontal end edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowXEnd = "--scroll-area-overflow-x-end";
+/**
+ * The distance from the vertical start edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowYStart = "--scroll-area-overflow-y-start";
+/**
+ * The distance from the vertical end edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowYEnd = "--scroll-area-overflow-y-end";

package/scroll-area/viewport/ScrollAreaViewportCssVars.d.ts

@@ -1,22 +1,20 @@
-export declare enum ScrollAreaViewportCssVars {
-  /**
-   * The distance from the horizontal start edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowXStart = "--scroll-area-overflow-x-start",
-  /**
-   * The distance from the horizontal end edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowXEnd = "--scroll-area-overflow-x-end",
-  /**
-   * The distance from the vertical start edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowYStart = "--scroll-area-overflow-y-start",
-  /**
-   * The distance from the vertical end edge in pixels.
-   * @type {number}
-   */
-  scrollAreaOverflowYEnd = "--scroll-area-overflow-y-end",
-}
+/**
+ * The distance from the horizontal start edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowXStart = "--scroll-area-overflow-x-start";
+/**
+ * The distance from the horizontal end edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowXEnd = "--scroll-area-overflow-x-end";
+/**
+ * The distance from the vertical start edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowYStart = "--scroll-area-overflow-y-start";
+/**
+ * The distance from the vertical end edge in pixels.
+ * @type {number}
+ */
+export declare const scrollAreaOverflowYEnd = "--scroll-area-overflow-y-end";

package/scroll-area/viewport/ScrollAreaViewportCssVars.js

@@ -3,27 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScrollAreaViewportCssVars = void 0;
-let ScrollAreaViewportCssVars = exports.ScrollAreaViewportCssVars = /*#__PURE__*/function (ScrollAreaViewportCssVars) {
-  /**
-   * The distance from the horizontal start edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowXStart"] = "--scroll-area-overflow-x-start";
-  /**
-   * The distance from the horizontal end edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowXEnd"] = "--scroll-area-overflow-x-end";
-  /**
-   * The distance from the vertical start edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowYStart"] = "--scroll-area-overflow-y-start";
-  /**
-   * The distance from the vertical end edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowYEnd"] = "--scroll-area-overflow-y-end";
-  return ScrollAreaViewportCssVars;
-}({});
+exports.scrollAreaOverflowYStart = exports.scrollAreaOverflowYEnd = exports.scrollAreaOverflowXStart = exports.scrollAreaOverflowXEnd = void 0;
+/**
+ * The distance from the horizontal start edge in pixels.
+ * @type {number}
+ */
+const scrollAreaOverflowXStart = exports.scrollAreaOverflowXStart = '--scroll-area-overflow-x-start';
+/**
+ * The distance from the horizontal end edge in pixels.
+ * @type {number}
+ */
+const scrollAreaOverflowXEnd = exports.scrollAreaOverflowXEnd = '--scroll-area-overflow-x-end';
+/**
+ * The distance from the vertical start edge in pixels.
+ * @type {number}
+ */
+const scrollAreaOverflowYStart = exports.scrollAreaOverflowYStart = '--scroll-area-overflow-y-start';
+/**
+ * The distance from the vertical end edge in pixels.
+ * @type {number}
+ */
+const scrollAreaOverflowYEnd = exports.scrollAreaOverflowYEnd = '--scroll-area-overflow-y-end';

package/scroll-area/viewport/ScrollAreaViewportCssVars.mjs

@@ -1,23 +1,20 @@
-export let ScrollAreaViewportCssVars = /*#__PURE__*/function (ScrollAreaViewportCssVars) {
-  /**
-   * The distance from the horizontal start edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowXStart"] = "--scroll-area-overflow-x-start";
-  /**
-   * The distance from the horizontal end edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowXEnd"] = "--scroll-area-overflow-x-end";
-  /**
-   * The distance from the vertical start edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowYStart"] = "--scroll-area-overflow-y-start";
-  /**
-   * The distance from the vertical end edge in pixels.
-   * @type {number}
-   */
-  ScrollAreaViewportCssVars["scrollAreaOverflowYEnd"] = "--scroll-area-overflow-y-end";
-  return ScrollAreaViewportCssVars;
-}({});
+/**
+ * The distance from the horizontal start edge in pixels.
+ * @type {number}
+ */
+export const scrollAreaOverflowXStart = '--scroll-area-overflow-x-start';
+/**
+ * The distance from the horizontal end edge in pixels.
+ * @type {number}
+ */
+export const scrollAreaOverflowXEnd = '--scroll-area-overflow-x-end';
+/**
+ * The distance from the vertical start edge in pixels.
+ * @type {number}
+ */
+export const scrollAreaOverflowYStart = '--scroll-area-overflow-y-start';
+/**
+ * The distance from the vertical end edge in pixels.
+ * @type {number}
+ */
+export const scrollAreaOverflowYEnd = '--scroll-area-overflow-y-end';

package/scroll-area/viewport/ScrollAreaViewportDataAttributes.d.mts

@@ -1,30 +1,28 @@
-export declare enum ScrollAreaViewportDataAttributes {
-  /**
-   * Present when the user scrolls inside the scroll area.
-   */
-  scrolling = "data-scrolling",
-  /**
-   * Present when the scroll area content is wider than the viewport.
-   */
-  hasOverflowX = "data-has-overflow-x",
-  /**
-   * Present when the scroll area content is taller than the viewport.
-   */
-  hasOverflowY = "data-has-overflow-y",
-  /**
-   * Present when there is overflow on the horizontal start side.
-   */
-  overflowXStart = "data-overflow-x-start",
-  /**
-   * Present when there is overflow on the horizontal end side.
-   */
-  overflowXEnd = "data-overflow-x-end",
-  /**
-   * Present when there is overflow on the vertical start side.
-   */
-  overflowYStart = "data-overflow-y-start",
-  /**
-   * Present when there is overflow on the vertical end side.
-   */
-  overflowYEnd = "data-overflow-y-end",
-}
+/**
+ * Present when the user scrolls inside the scroll area.
+ */
+export declare const scrolling = "data-scrolling";
+/**
+ * Present when the scroll area content is wider than the viewport.
+ */
+export declare const hasOverflowX = "data-has-overflow-x";
+/**
+ * Present when the scroll area content is taller than the viewport.
+ */
+export declare const hasOverflowY = "data-has-overflow-y";
+/**
+ * Present when there is overflow on the horizontal start side.
+ */
+export declare const overflowXStart = "data-overflow-x-start";
+/**
+ * Present when there is overflow on the horizontal end side.
+ */
+export declare const overflowXEnd = "data-overflow-x-end";
+/**
+ * Present when there is overflow on the vertical start side.
+ */
+export declare const overflowYStart = "data-overflow-y-start";
+/**
+ * Present when there is overflow on the vertical end side.
+ */
+export declare const overflowYEnd = "data-overflow-y-end";

package/scroll-area/viewport/ScrollAreaViewportDataAttributes.d.ts

@@ -1,30 +1,28 @@
-export declare enum ScrollAreaViewportDataAttributes {
-  /**
-   * Present when the user scrolls inside the scroll area.
-   */
-  scrolling = "data-scrolling",
-  /**
-   * Present when the scroll area content is wider than the viewport.
-   */
-  hasOverflowX = "data-has-overflow-x",
-  /**
-   * Present when the scroll area content is taller than the viewport.
-   */
-  hasOverflowY = "data-has-overflow-y",
-  /**
-   * Present when there is overflow on the horizontal start side.
-   */
-  overflowXStart = "data-overflow-x-start",
-  /**
-   * Present when there is overflow on the horizontal end side.
-   */
-  overflowXEnd = "data-overflow-x-end",
-  /**
-   * Present when there is overflow on the vertical start side.
-   */
-  overflowYStart = "data-overflow-y-start",
-  /**
-   * Present when there is overflow on the vertical end side.
-   */
-  overflowYEnd = "data-overflow-y-end",
-}
+/**
+ * Present when the user scrolls inside the scroll area.
+ */
+export declare const scrolling = "data-scrolling";
+/**
+ * Present when the scroll area content is wider than the viewport.
+ */
+export declare const hasOverflowX = "data-has-overflow-x";
+/**
+ * Present when the scroll area content is taller than the viewport.
+ */
+export declare const hasOverflowY = "data-has-overflow-y";
+/**
+ * Present when there is overflow on the horizontal start side.
+ */
+export declare const overflowXStart = "data-overflow-x-start";
+/**
+ * Present when there is overflow on the horizontal end side.
+ */
+export declare const overflowXEnd = "data-overflow-x-end";
+/**
+ * Present when there is overflow on the vertical start side.
+ */
+export declare const overflowYStart = "data-overflow-y-start";
+/**
+ * Present when there is overflow on the vertical end side.
+ */
+export declare const overflowYEnd = "data-overflow-y-end";

package/scroll-area/viewport/ScrollAreaViewportDataAttributes.js

@@ -3,35 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScrollAreaViewportDataAttributes = void 0;
-let ScrollAreaViewportDataAttributes = exports.ScrollAreaViewportDataAttributes = /*#__PURE__*/function (ScrollAreaViewportDataAttributes) {
-  /**
-   * Present when the user scrolls inside the scroll area.
-   */
-  ScrollAreaViewportDataAttributes["scrolling"] = "data-scrolling";
-  /**
-   * Present when the scroll area content is wider than the viewport.
-   */
-  ScrollAreaViewportDataAttributes["hasOverflowX"] = "data-has-overflow-x";
-  /**
-   * Present when the scroll area content is taller than the viewport.
-   */
-  ScrollAreaViewportDataAttributes["hasOverflowY"] = "data-has-overflow-y";
-  /**
-   * Present when there is overflow on the horizontal start side.
-   */
-  ScrollAreaViewportDataAttributes["overflowXStart"] = "data-overflow-x-start";
-  /**
-   * Present when there is overflow on the horizontal end side.
-   */
-  ScrollAreaViewportDataAttributes["overflowXEnd"] = "data-overflow-x-end";
-  /**
-   * Present when there is overflow on the vertical start side.
-   */
-  ScrollAreaViewportDataAttributes["overflowYStart"] = "data-overflow-y-start";
-  /**
-   * Present when there is overflow on the vertical end side.
-   */
-  ScrollAreaViewportDataAttributes["overflowYEnd"] = "data-overflow-y-end";
-  return ScrollAreaViewportDataAttributes;
-}({});
+exports.scrolling = exports.overflowYStart = exports.overflowYEnd = exports.overflowXStart = exports.overflowXEnd = exports.hasOverflowY = exports.hasOverflowX = void 0;
+/**
+ * Present when the user scrolls inside the scroll area.
+ */
+const scrolling = exports.scrolling = 'data-scrolling';
+/**
+ * Present when the scroll area content is wider than the viewport.
+ */
+const hasOverflowX = exports.hasOverflowX = 'data-has-overflow-x';
+/**
+ * Present when the scroll area content is taller than the viewport.
+ */
+const hasOverflowY = exports.hasOverflowY = 'data-has-overflow-y';
+/**
+ * Present when there is overflow on the horizontal start side.
+ */
+const overflowXStart = exports.overflowXStart = 'data-overflow-x-start';
+/**
+ * Present when there is overflow on the horizontal end side.
+ */
+const overflowXEnd = exports.overflowXEnd = 'data-overflow-x-end';
+/**
+ * Present when there is overflow on the vertical start side.
+ */
+const overflowYStart = exports.overflowYStart = 'data-overflow-y-start';
+/**
+ * Present when there is overflow on the vertical end side.
+ */
+const overflowYEnd = exports.overflowYEnd = 'data-overflow-y-end';