@base-ui/react 1.2.0 → 1.3.0

package/progress/root/ProgressRoot.d.ts

@@ -9,9 +9,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 export declare const ProgressRoot: React.ForwardRefExoticComponent<Omit<ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
 export interface ProgressRootState {
+  /**
+   * The current status.
+   */
   status: ProgressStatus;
 }
-export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRoot.State> {
+export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRootState> {
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */

package/progress/root/ProgressRoot.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ProgressRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _formatNumber = require("../../utils/formatNumber");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _ProgressRootContext = require("./ProgressRootContext");
@@ -36,6 +37,7 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
     value,
     render,
     className,
+    children,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
@@ -54,7 +56,14 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
     'aria-valuemin': min,
     'aria-valuenow': value ?? undefined,
     'aria-valuetext': getAriaValueText(formattedValue, value),
-    role: 'progressbar'
+    role: 'progressbar',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        role: "presentation",
+        style: _visuallyHidden.visuallyHidden,
+        children: "x"
+      })]
+    })
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,

package/progress/root/ProgressRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ProgressRoot, ProgressStatus } from "./ProgressRoot.js";
+import type { ProgressStatus, ProgressRootState } from "./ProgressRoot.js";
 export type ProgressRootContext = {
   /**
    * Formatted value of the component.
@@ -18,7 +18,7 @@ export type ProgressRootContext = {
    */
   value: number | null;
   setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  state: ProgressRoot.State;
+  state: ProgressRootState;
   status: ProgressStatus;
 };
 /**

package/progress/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { ProgressRoot } from "./ProgressRoot.js";
-export declare const progressStateAttributesMapping: StateAttributesMapping<ProgressRoot.State>;
+import type { ProgressRootState } from "./ProgressRoot.js";
+export declare const progressStateAttributesMapping: StateAttributesMapping<ProgressRootState>;

package/progress/track/ProgressTrack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ProgressRoot } from "../root/ProgressRoot.js";
+import type { ProgressRootState } from "../root/ProgressRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Contains the progress bar indicator.
@@ -8,7 +8,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
 export declare const ProgressTrack: React.ForwardRefExoticComponent<Omit<ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ProgressTrackProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
+export interface ProgressTrackState extends ProgressRootState {}
+export interface ProgressTrackProps extends BaseUIComponentProps<'div', ProgressTrackState> {}
 export declare namespace ProgressTrack {
+  type State = ProgressTrackState;
   type Props = ProgressTrackProps;
 }

package/progress/value/ProgressValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ProgressRoot } from "../root/ProgressRoot.js";
+import type { ProgressRootState } from "../root/ProgressRoot.js";
 /**
  * A text label displaying the current value.
  * Renders a `<span>` element.
@@ -8,9 +8,11 @@ import type { ProgressRoot } from "../root/ProgressRoot.js";
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
 export declare const ProgressValue: React.ForwardRefExoticComponent<Omit<ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ProgressValueProps extends Omit<BaseUIComponentProps<'span', ProgressRoot.State>, 'children'> {
-  children?: (null | ((formattedValue: string | null, value: number | null) => React.ReactNode)) | undefined;
+export interface ProgressValueState extends ProgressRootState {}
+export interface ProgressValueProps extends Omit<BaseUIComponentProps<'span', ProgressValueState>, 'children'> {
+  children?: null | ((formattedValue: string | null, value: number | null) => React.ReactNode) | undefined;
 }
 export declare namespace ProgressValue {
+  type State = ProgressValueState;
   type Props = ProgressValueProps;
 }

package/radio/indicator/RadioIndicator.d.ts

@@ -8,7 +8,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
  */
 export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicator.State> {
+export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicatorState> {
   /**
    * Whether to keep the HTML element in the DOM when the radio button is inactive.
    * @default false
@@ -20,6 +20,9 @@ export interface RadioIndicatorState {
    * Whether the radio button is currently selected.
    */
   checked: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace RadioIndicator {

package/radio/indicator/RadioIndicatorDataAttributes.d.ts

@@ -19,6 +19,14 @@ export declare enum RadioIndicatorDataAttributes {
    * Present when the radio is required.
    */
   required = "data-required",
+  /**
+   * Present when the radio indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the radio indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
   /**
    * Present when the radio is in valid state (when wrapped in Field.Root).
    */

package/radio/indicator/RadioIndicatorDataAttributes.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadioIndicatorDataAttributes = void 0;
-let RadioIndicatorDataAttributes = exports.RadioIndicatorDataAttributes = /*#__PURE__*/function (RadioIndicatorDataAttributes) {
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let RadioIndicatorDataAttributes = exports.RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes) {
   /**
    * Present when the radio is checked.
    */
@@ -25,6 +26,14 @@ let RadioIndicatorDataAttributes = exports.RadioIndicatorDataAttributes = /*#__P
    * Present when the radio is required.
    */
   RadioIndicatorDataAttributes["required"] = "data-required";
+  /**
+   * Present when the radio indicator is animating in.
+   */
+  RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the radio indicator is animating out.
+   */
+  RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the radio is in valid state (when wrapped in Field.Root).
    */

package/radio/root/RadioRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * Represents the radio button itself.
  * Renders a `<span>` element and a hidden `<input>` beside.
@@ -10,7 +10,7 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
 export declare const RadioRoot: {
   <Value>(props: RadioRoot.Props<Value>): React.JSX.Element;
 };
-export interface RadioRootState extends FieldRoot.State {
+export interface RadioRootState extends FieldRootState {
   /**
    * Whether the radio button is currently selected.
    */
@@ -28,7 +28,7 @@ export interface RadioRootState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRoot.State>, 'value'> {
+export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRootState>, 'value'> {
   /**
    * The unique identifying value of the radio in a group.
    */

package/radio/root/RadioRoot.js

@@ -24,6 +24,7 @@ var _CompositeItem = require("../../composite/item/CompositeItem");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _FieldItemContext = require("../../field/item/FieldItemContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _RadioGroupContext = require("../../radio-group/RadioGroupContext");
 var _serializeValue = require("../../utils/serializeValue");
@@ -42,6 +43,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     disabled: disabledProp = false,
     readOnly: readOnlyProp = false,
     required: requiredProp = false,
+    'aria-labelledby': ariaLabelledByProp,
     value,
     inputRef: inputRefProp,
     nativeButton = false,
@@ -114,12 +116,13 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     controlRef: radioRef
   });
   const hiddenInputId = nativeButton ? undefined : inputId;
+  const ariaLabelledBy = (0, _useAriaLabelledBy.useAriaLabelledBy)(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
   const rootProps = {
     role: 'radio',
     'aria-checked': checked,
     'aria-required': required || undefined,
     'aria-readonly': readOnly || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     [_constants2.ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
     id: nativeButton ? inputId : id,
     onKeyDown(event) {

package/radio-group/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../utils/types.js";
-import type { FieldRoot } from "../field/root/FieldRoot.js";
+import type { FieldRootState } from "../field/root/FieldRoot.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../utils/reasons.js";
 /**
@@ -12,7 +12,7 @@ import { REASONS } from "../utils/reasons.js";
 export declare const RadioGroup: {
   <Value>(props: RadioGroup.Props<Value>): React.JSX.Element;
 };
-export interface RadioGroupState extends FieldRoot.State {
+export interface RadioGroupState extends FieldRootState {
   /**
    * Whether the user should be unable to select a different radio button in the group.
    */
@@ -22,7 +22,7 @@ export interface RadioGroupState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroup.State>, 'value'> {
+export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroupState>, 'value'> {
   /**
    * Whether the component should ignore user interaction.
    * @default false

package/scroll-area/content/ScrollAreaContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A container for the content of the scroll area.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaContentState extends ScrollAreaRoot.State {}
-export interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContent.State> {}
+export interface ScrollAreaContentState extends ScrollAreaRootState {}
+export interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContentState> {}
 export declare namespace ScrollAreaContent {
   type State = ScrollAreaContentState;
   type Props = ScrollAreaContentProps;

package/scroll-area/corner/ScrollAreaCorner.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaCornerState {}
-export interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCorner.State> {}
+export interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCornerState> {}
 export declare namespace ScrollAreaCorner {
   type State = ScrollAreaCornerState;
   type Props = ScrollAreaCornerProps;

package/scroll-area/root/ScrollAreaRoot.d.ts

@@ -31,35 +31,51 @@ export type Coords = typeof DEFAULT_COORDS;
  */
 export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaRootState {
-  /** Whether the scroll area is being scrolled. */
+  /**
+   * Whether the scroll area is being scrolled.
+   */
   scrolling: boolean;
-  /** Whether horizontal overflow is present. */
+  /**
+   * Whether horizontal overflow is present.
+   */
   hasOverflowX: boolean;
-  /** Whether vertical overflow is present. */
+  /**
+   * Whether vertical overflow is present.
+   */
   hasOverflowY: boolean;
-  /** Whether there is overflow on the inline start side for the horizontal axis. */
+  /**
+   * Whether there is overflow on the inline start side for the horizontal axis.
+   */
   overflowXStart: boolean;
-  /** Whether there is overflow on the inline end side for the horizontal axis. */
+  /**
+   * Whether there is overflow on the inline end side for the horizontal axis.
+   */
   overflowXEnd: boolean;
-  /** Whether there is overflow on the block start side. */
+  /**
+   * Whether there is overflow on the block start side.
+   */
   overflowYStart: boolean;
-  /** Whether there is overflow on the block end side. */
+  /**
+   * Whether there is overflow on the block end side.
+   */
   overflowYEnd: boolean;
-  /** Whether the scrollbar corner is hidden. */
+  /**
+   * Whether the scrollbar corner is hidden.
+   */
   cornerHidden: boolean;
 }
-export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollAreaRoot.State> {
+export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollAreaRootState> {
   /**
    * The threshold in pixels that must be passed before the overflow edge attributes are applied.
    * Accepts a single number for all edges or an object to configure them individually.
    * @default 0
    */
-  overflowEdgeThreshold?: (number | Partial<{
+  overflowEdgeThreshold?: number | Partial<{
     xStart: number;
     xEnd: number;
     yStart: number;
     yEnd: number;
-  }>) | undefined;
+  }> | undefined;
 }
 export declare namespace ScrollAreaRoot {
   type State = ScrollAreaRootState;

package/scroll-area/root/ScrollAreaRoot.js

@@ -36,9 +36,9 @@ const DEFAULT_OVERFLOW_EDGES = {
   yEnd: false
 };
 const DEFAULT_HIDDEN_STATE = {
-  x: false,
-  y: false,
-  corner: false
+  x: true,
+  y: true,
+  corner: true
 };
 /**
  * Groups all parts of the scroll area.
@@ -65,6 +65,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
   const [scrollingX, setScrollingX] = React.useState(false);
   const [scrollingY, setScrollingY] = React.useState(false);
   const [touchModality, setTouchModality] = React.useState(false);
+  const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
   const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
   const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
@@ -216,6 +217,8 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     setCornerSize,
     thumbSize,
     setThumbSize,
+    hasMeasuredScrollbar,
+    setHasMeasuredScrollbar,
     touchModality,
     cornerRef,
     scrollingX,
@@ -237,7 +240,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     setOverflowEdges,
     viewportState: state,
     overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollAreaRootContext.ScrollAreaRootContext.Provider, {
     value: contextValue,
     children: [!disableStyleElements && _styles.styleDisableScrollbar.getElement(nonce), element]

package/scroll-area/root/ScrollAreaRootContext.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type { Coords, HiddenState, OverflowEdges, ScrollAreaRoot, Size } from "./ScrollAreaRoot.js";
+import type { Coords, HiddenState, OverflowEdges, Size, ScrollAreaRootState } from "./ScrollAreaRoot.js";
 export interface ScrollAreaRootContext {
   cornerSize: Size;
   setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
   thumbSize: Size;
   setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
+  hasMeasuredScrollbar: boolean;
+  setHasMeasuredScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,7 +30,7 @@ export interface ScrollAreaRootContext {
   setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
   overflowEdges: OverflowEdges;
   setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
-  viewportState: ScrollAreaRoot.State;
+  viewportState: ScrollAreaRootState;
   overflowEdgeThreshold: {
     xStart: number;
     xEnd: number;

package/scroll-area/root/stateAttributes.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { ScrollAreaRoot } from "./ScrollAreaRoot.js";
-export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRoot.State>;
+import type { ScrollAreaRootState } from "./ScrollAreaRoot.js";
+export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState>;

package/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A vertical or horizontal scrollbar for the scroll area.
  * Renders a `<div>` element.
@@ -8,20 +8,26 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaScrollbarState extends ScrollAreaRoot.State {
-  /** Whether the scroll area is being hovered. */
+export interface ScrollAreaScrollbarState extends ScrollAreaRootState {
+  /**
+   * Whether the scroll area is being hovered.
+   */
   hovering: boolean;
-  /** Whether the scroll area is being scrolled. */
+  /**
+   * Whether the scroll area is being scrolled.
+   */
   scrolling: boolean;
-  /** The orientation of the scrollbar. */
+  /**
+   * The orientation of the scrollbar.
+   */
   orientation: 'vertical' | 'horizontal';
 }
-export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbar.State> {
+export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', ScrollAreaScrollbarState> {
   /**
    * Whether the scrollbar controls vertical or horizontal scroll.
    * @default 'vertical'
    */
-  orientation?: ('vertical' | 'horizontal') | undefined;
+  orientation?: 'vertical' | 'horizontal' | undefined;
   /**
    * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
    * @default false

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -44,7 +44,8 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     handlePointerDown,
     handlePointerUp,
     rootId,
-    thumbSize
+    thumbSize,
+    hasMeasuredScrollbar
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
   const state = {
     hovering,
@@ -62,6 +63,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
     cornerHidden: hiddenState.corner
   };
   const direction = (0, _DirectionContext.useDirection)();
+  const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
   React.useEffect(() => {
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
@@ -163,6 +165,7 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
       touchAction: 'none',
       WebkitUserSelect: 'none',
       userSelect: 'none',
+      visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
       ...(orientation === 'vertical' && {
         top: 0,
         bottom: `var(${_ScrollAreaRootCssVars.ScrollAreaRootCssVars.scrollAreaCornerHeight})`,

package/scroll-area/thumb/ScrollAreaThumb.d.ts

@@ -8,9 +8,12 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaThumbState {
-  orientation?: ('horizontal' | 'vertical') | undefined;
+  /**
+   * The component orientation.
+   */
+  orientation?: 'horizontal' | 'vertical' | undefined;
 }
-export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumb.State> {}
+export interface ScrollAreaThumbProps extends BaseUIComponentProps<'div', ScrollAreaThumbState> {}
 export declare namespace ScrollAreaThumb {
   type State = ScrollAreaThumbState;
   type Props = ScrollAreaThumbProps;

package/scroll-area/thumb/ScrollAreaThumb.js

@@ -30,7 +30,8 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
     handlePointerMove,
     handlePointerUp,
     setScrollingX,
-    setScrollingY
+    setScrollingY,
+    hasMeasuredScrollbar
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
   const {
     orientation
@@ -54,6 +55,7 @@ const ScrollAreaThumb = exports.ScrollAreaThumb = /*#__PURE__*/React.forwardRef(
         handlePointerUp(event);
       },
       style: {
+        visibility: hasMeasuredScrollbar ? undefined : 'hidden',
         ...(orientation === 'vertical' && {
           height: `var(${_ScrollAreaScrollbarCssVars.ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
         }),

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * The actual scrollable container of the scroll area.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewport.State> {}
-export interface ScrollAreaViewportState extends ScrollAreaRoot.State {}
+export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewportState> {}
+export interface ScrollAreaViewportState extends ScrollAreaRootState {}
 export declare namespace ScrollAreaViewport {
   type Props = ScrollAreaViewportProps;
   type State = ScrollAreaViewportState;