@base-ui/react 1.3.0 → 1.4.1

package/esm/progress/root/ProgressRoot.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { formatNumberValue } from "../../utils/formatNumber.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { ProgressRootContext } from "./ProgressRootContext.js";
 import { progressStateAttributesMapping } from "./stateAttributesMapping.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,6 +32,7 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/esm/progress/root/ProgressRootDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressRootDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/root/ProgressRootDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressRootDataAttributes = /*#__PURE__*/function (ProgressRootDataA
    */
   ProgressRootDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressRootDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/esm/progress/root/stateAttributesMapping.d.ts

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

package/esm/progress/track/ProgressTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ProgressRootState } from "../root/ProgressRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Contains the progress bar indicator.
  * Renders a `<div>` element.

package/esm/progress/track/ProgressTrack.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
 /**
@@ -14,6 +14,7 @@ export const ProgressTrack = /*#__PURE__*/React.forwardRef(function ProgressTrac
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/progress/track/ProgressTrackDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressTrackDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/track/ProgressTrackDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressTrackDataAttributes = /*#__PURE__*/function (ProgressTrackDat
    */
   ProgressTrackDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressTrackDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/esm/progress/value/ProgressValue.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ProgressRootState } from "../root/ProgressRoot.js";
 /**
  * A text label displaying the current value.

package/esm/progress/value/ProgressValue.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
 /**
@@ -15,6 +15,7 @@ export const ProgressValue = /*#__PURE__*/React.forwardRef(function ProgressValu
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/progress/value/ProgressValueDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressValueDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/value/ProgressValueDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressValueDataAttributes = /*#__PURE__*/function (ProgressValueDat
    */
   ProgressValueDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressValueDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/esm/radio/indicator/RadioIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Indicates whether the radio button is selected.
  * Renders a `<span>` element.

package/esm/radio/indicator/RadioIndicator.js

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useRadioRootContext } from "../root/RadioRootContext.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 
 /**
  * Indicates whether the radio button is selected.
@@ -17,6 +17,7 @@ export const RadioIndicator = /*#__PURE__*/React.forwardRef(function RadioIndica
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/esm/radio/indicator/RadioIndicatorDataAttributes.d.ts

@@ -28,11 +28,11 @@ export declare enum RadioIndicatorDataAttributes {
    */
   endingStyle = "data-ending-style",
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/radio/indicator/RadioIndicatorDataAttributes.js

@@ -1,4 +1,4 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes) {
   /**
    * Present when the radio is checked.
@@ -29,11 +29,11 @@ export let RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes
    */
   RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   RadioIndicatorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   RadioIndicatorDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/radio/root/RadioRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * Represents the radio button itself.

package/esm/radio/root/RadioRoot.js

@@ -5,23 +5,23 @@ import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { EMPTY_OBJECT } from "../../utils/constants.js";
-import { NOOP } from "../../utils/noop.js";
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { NOOP } from "../../internals/noop.js";
 import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
-import { ACTIVE_COMPOSITE_ITEM } from "../../composite/constants.js";
-import { CompositeItem } from "../../composite/item/CompositeItem.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/constants.js";
+import { CompositeItem } from "../../internals/composite/item/CompositeItem.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
 import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../internals/labelable-provider/useAriaLabelledBy.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
 import { useRadioGroupContext } from "../../radio-group/RadioGroupContext.js";
-import { serializeValue } from "../../utils/serializeValue.js";
+import { serializeValue } from "../../internals/serializeValue.js";
 import { RadioRootContext } from "./RadioRootContext.js";
 
 /**
@@ -43,6 +43,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     inputRef: inputRefProp,
     nativeButton = false,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const groupContext = useRadioGroupContext();
@@ -50,6 +51,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     disabled: disabledGroup,
     readOnly: readOnlyGroup,
     required: requiredGroup,
+    form: formGroup,
     checkedValue,
     touched = false,
     validation,
@@ -75,6 +77,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
   const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
   const readOnly = readOnlyGroup || readOnlyProp;
   const required = requiredGroup || requiredProp;
+  const form = formGroup;
   const checked = groupContext ? checkedValue === value : value === '';
   const serializedValue = React.useMemo(() => serializeValue(value), [value]);
   const radioRef = React.useRef(null);
@@ -156,6 +159,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
   const inputProps = {
     type: 'radio',
     ref: mergedInputRef,
+    form,
     id: hiddenInputId,
     name,
     tabIndex: -1,
@@ -213,12 +217,14 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
       tag: "span",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: refs,
       props: props,
       stateAttributesMapping: stateAttributesMapping
     }) : element, /*#__PURE__*/_jsx("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/esm/radio/root/RadioRootDataAttributes.d.ts

@@ -20,11 +20,11 @@ export declare enum RadioRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/radio/root/RadioRootDataAttributes.js

@@ -20,11 +20,11 @@ export let RadioRootDataAttributes = /*#__PURE__*/function (RadioRootDataAttribu
    */
   RadioRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   RadioRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   RadioRootDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/radio/utils/stateAttributesMapping.d.ts

@@ -1,4 +1,4 @@
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export declare const stateAttributesMapping: {
   valid(value: boolean | null): Record<string, string> | null;
   transitionStatus(value: TransitionStatus): Record<string, string> | null;

package/esm/radio/utils/stateAttributesMapping.js

@@ -1,5 +1,5 @@
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
 import { RadioRootDataAttributes } from "../root/RadioRootDataAttributes.js";
 export const stateAttributesMapping = {
   checked(value) {

package/esm/radio-group/RadioGroup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../utils/types.js";
+import type { BaseUIComponentProps } from "../internals/types.js";
 import type { FieldRootState } from "../field/root/FieldRoot.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
 /**
  * Provides a shared state to a series of radio buttons.
  * Renders a `<div>` element.
@@ -42,6 +42,11 @@ export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the radio inputs.
+   * Useful when the radio group is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The controlled value of the radio item that should be currently selected.
    *

package/esm/radio-group/RadioGroup.js

@@ -3,17 +3,17 @@
 import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { useBaseUiId } from "../internals/useBaseUiId.js";
 import { contains } from "../floating-ui-react/utils.js";
-import { SHIFT } from "../composite/composite.js";
-import { CompositeRoot } from "../composite/root/CompositeRoot.js";
-import { useField } from "../field/useField.js";
-import { useFieldRootContext } from "../field/root/FieldRootContext.js";
-import { fieldValidityMapping } from "../field/utils/constants.js";
+import { SHIFT } from "../internals/composite/composite.js";
+import { CompositeRoot } from "../internals/composite/root/CompositeRoot.js";
+import { useFieldRootContext } from "../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../internals/field-register-control/useRegisterFieldControl.js";
+import { fieldValidityMapping } from "../internals/field-constants/constants.js";
 import { useFieldsetRootContext } from "../fieldset/root/FieldsetRootContext.js";
-import { useFormContext } from "../form/FormContext.js";
-import { useLabelableContext } from "../labelable-provider/LabelableContext.js";
-import { useValueChanged } from "../utils/useValueChanged.js";
+import { useFormContext } from "../internals/form-context/FormContext.js";
+import { useLabelableContext } from "../internals/labelable-provider/LabelableContext.js";
+import { useValueChanged } from "../internals/useValueChanged.js";
 import { RadioGroupContext } from "./RadioGroupContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MODIFIER_KEYS = [SHIFT];
@@ -34,9 +34,11 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     onValueChange: onValueChangeProp,
     value: externalValue,
     defaultValue,
+    form,
     name: nameProp,
     inputRef: inputRefProp,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -119,13 +121,11 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     }
     return undefined;
   });
-  useField({
+  const getFieldValue = useStableCallback(() => checkedValue ?? null);
+  useRegisterFieldControl(controlRef, {
     id,
-    commit: validation.commit,
     value: checkedValue,
-    controlRef,
-    name,
-    getValue: () => checkedValue ?? null
+    getValue: getFieldValue
   });
   useValueChanged(checkedValue, () => {
     clearErrors(name);
@@ -153,6 +153,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     ...fieldState,
     checkedValue,
     disabled,
+    form,
     validation,
     name,
     onValueChange,
@@ -163,7 +164,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, form, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,
@@ -195,6 +196,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       props: [defaultProps, validation.getValidationProps, elementProps],
       refs: [forwardedRef],

package/esm/radio-group/RadioGroupContext.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import type { BaseUIEventReasons } from "../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import type { BaseUIEventReasons } from "../internals/reasons.js";
 export interface RadioGroupContext<Value> {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
   required: boolean | undefined;
+  form: string | undefined;
   name: string | undefined;
   checkedValue: Value | undefined;
   setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A container for the content of the scroll area.

package/esm/scroll-area/content/ScrollAreaContent.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useScrollAreaViewportContext } from "../viewport/ScrollAreaViewportContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
 import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.js";
 /**
@@ -16,6 +16,7 @@ export const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAr
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const contentWrapperRef = React.useRef(null);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
  * Renders a `<div>` element.

package/esm/scroll-area/corner/ScrollAreaCorner.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
@@ -14,6 +14,7 @@ export const ScrollAreaCorner = /*#__PURE__*/React.forwardRef(function ScrollAre
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 declare const DEFAULT_COORDS: {
   x: number;
   y: number;

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -4,13 +4,13 @@ import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ScrollAreaRootContext } from "./ScrollAreaRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { ScrollAreaRootCssVars } from "./ScrollAreaRootCssVars.js";
 import { SCROLL_TIMEOUT } from "../constants.js";
 import { getOffset } from "../utils/getOffset.js";
 import { ScrollAreaScrollbarDataAttributes } from "../scrollbar/ScrollAreaScrollbarDataAttributes.js";
 import { styleDisableScrollbar } from "../../utils/styles.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { scrollAreaStateAttributesMapping } from "./stateAttributes.js";
 import { contains } from "../../floating-ui-react/utils.js";
 import { useCSPContext } from "../../csp-provider/CSPContext.js";
@@ -45,6 +45,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     render,
     className,
     overflowEdgeThreshold: overflowEdgeThresholdProp,
+    style,
     ...elementProps
   } = componentProps;
   const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A vertical or horizontal scrollbar for the scroll area.
@@ -29,7 +29,7 @@ export interface ScrollAreaScrollbarProps extends BaseUIComponentProps<'div', Sc
    */
   orientation?: 'vertical' | 'horizontal' | undefined;
   /**
-   * Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.
+   * Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
    * @default false
    */
   keepMounted?: boolean | undefined;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -1,13 +1,15 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { contains, getTarget } from "../../floating-ui-react/utils.js";
 import { useScrollAreaRootContext } from "../root/ScrollAreaRootContext.js";
 import { ScrollAreaScrollbarContext } from "./ScrollAreaScrollbarContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getOffset } from "../utils/getOffset.js";
 import { ScrollAreaRootCssVars } from "../root/ScrollAreaRootCssVars.js";
 import { ScrollAreaScrollbarCssVars } from "./ScrollAreaScrollbarCssVars.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { scrollAreaStateAttributesMapping } from "../root/stateAttributes.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -22,6 +24,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
     className,
     orientation = 'vertical',
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -89,12 +92,9 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
         viewportEl.scrollLeft += event.deltaX;
       }
     }
-    scrollbarEl.addEventListener('wheel', handleWheel, {
+    return addEventListener(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-    return () => {
-      scrollbarEl.removeEventListener('wheel', handleWheel);
-    };
   }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
   const props = {
     ...(rootId && {
@@ -104,9 +104,12 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
       if (event.button !== 0) {
         return;
       }
+      const target = getTarget(event.nativeEvent);
+      const thumb = orientation === 'vertical' ? thumbYRef.current : thumbXRef.current;
 
-      // Ignore clicks on thumb
-      if (event.currentTarget !== event.target) {
+      // Ignore clicks on thumb, including cases where React retargets the
+      // synthetic event to the track host across a shadow boundary.
+      if (thumb && contains(thumb, target)) {
         return;
       }
       if (!viewportRef.current) {