@base-ui/react 1.2.0 → 1.4.0

package/esm/slider/thumb/SliderThumb.js

@@ -3,30 +3,30 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useOnMount } from '@base-ui/utils/useOnMount';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { clamp } from "../../utils/clamp.js";
 import { formatNumber } from "../../utils/formatNumber.js";
 import { mergeProps } from "../../merge-props/index.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useIsHydrating } from "../../utils/useIsHydrating.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { valueToPercent } from "../../utils/valueToPercent.js";
-import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS } from "../../composite/composite.js";
+import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN } from "../../composite/composite.js";
 import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
 import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { useCSPContext } from "../../csp-provider/CSPContext.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { matchesFocusVisible } from "../../floating-ui-react/utils/element.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { getMidpoint } from "../utils/getMidpoint.js";
 import { getSliderValue } from "../utils/getSliderValue.js";
-import { roundValueToStep } from "../utils/roundValueToStep.js";
+import { getDecimalPrecision, roundValueToStep } from "../utils/roundValueToStep.js";
 import { useSliderRootContext } from "../root/SliderRootContext.js";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { SliderThumbDataAttributes } from "./SliderThumbDataAttributes.js";
 import { script as prehydrationScript } from "./prehydrationScript.min.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PAGE_UP = 'PageUp';
-const PAGE_DOWN = 'PageDown';
 const ALL_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END, PAGE_UP, PAGE_DOWN]);
 function getDefaultAriaValueText(values, index, format, locale) {
   if (index < 0) {
@@ -40,8 +40,10 @@ function getDefaultAriaValueText(values, index, format, locale) {
   }
   return format ? formatNumber(values[index], locale, format) : undefined;
 }
-function getNewValue(thumbValue, step, direction, min, max) {
-  return direction === 1 ? Math.min(thumbValue + step, max) : Math.max(thumbValue - step, min);
+function getNewValue(thumbValue, increment, direction, min, max) {
+  const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
+  const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
+  return clamp(roundedValue, min, max);
 }
 
 /**
@@ -68,6 +70,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     onFocus: onFocusProp,
     onKeyDown: onKeyDownProp,
     tabIndex: tabIndexProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -89,6 +92,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     max,
     min,
     minStepsBetweenValues,
+    form,
     name,
     orientation,
     pressedInputRef,
@@ -113,6 +117,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
   } = useFieldRootContext();
   const thumbRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const restoringFocusVisibleRef = React.useRef(false);
   const defaultInputId = useBaseUiId();
   const labelableId = useLabelableId();
   const inputId = range ? defaultInputId : labelableId;
@@ -129,9 +134,8 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
   const last = index === sliderValues.length - 1;
   const thumbValue = sliderValues[index];
   const thumbValuePercent = valueToPercent(thumbValue, min, max);
-  const [isMounted, setIsMounted] = React.useState(false);
   const [positionPercent, setPositionPercent] = React.useState();
-  useOnMount(() => setIsMounted(true));
+  const isHydrating = useIsHydrating();
   const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
   const getInsetPosition = useStableCallback(() => {
     const control = controlRef.current;
@@ -147,11 +151,12 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     // px distance from the starting edge (inline-start or bottom) to the thumb center
     const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
     const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
-    setPositionPercent(nextPositionPercent);
+    const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : undefined;
+    setPositionPercent(nextInsetPosition);
     if (index === 0) {
-      setIndicatorPosition(prevPosition => [nextPositionPercent, prevPosition[1]]);
+      setIndicatorPosition(prevPosition => [nextInsetPosition, prevPosition[1]]);
     } else if (last) {
-      setIndicatorPosition(prevPosition => [prevPosition[0], nextPositionPercent]);
+      setIndicatorPosition(prevPosition => [prevPosition[0], nextInsetPosition]);
     }
   });
   useIsoLayoutEffect(() => {
@@ -164,6 +169,22 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       getInsetPosition();
     }
   }, [getInsetPosition, inset, thumbValuePercent]);
+  useIsoLayoutEffect(() => {
+    if (!inset || typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const control = controlRef.current;
+    const thumb = thumbRef.current;
+    if (!control || !thumb) {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(getInsetPosition);
+    resizeObserver.observe(control);
+    resizeObserver.observe(thumb);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [controlRef, getInsetPosition, inset]);
   const getThumbStyle = React.useCallback(() => {
     const startEdge = vertical ? 'bottom' : 'insetInlineStart';
     const crossOffsetProperty = vertical ? 'left' : 'top';
@@ -190,39 +211,50 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       };
     }
     return {
-      ['--position']: `${positionPercent}%`,
-      visibility: renderBeforeHydration && !isMounted || positionPercent === undefined ? 'hidden' : undefined,
+      ['--position']: `${positionPercent ?? 0}%`,
+      visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined,
       position: 'absolute',
       [startEdge]: 'var(--position)',
       [crossOffsetProperty]: '50%',
       translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
       zIndex
     };
-  }, [activeIndex, index, inset, isMounted, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
+  }, [activeIndex, index, inset, isHydrating, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
   let cssWritingMode;
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
   }
+  const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
   const inputProps = mergeProps({
-    'aria-label': typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp,
-    'aria-labelledby': ariaLabelledByProp ?? labelId,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledByProp ?? (ariaLabel == null ? labelId : undefined),
     'aria-describedby': ariaDescribedByProp,
     'aria-orientation': orientation,
     'aria-valuenow': thumbValue,
     'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? undefined), thumbValue, index) : getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? undefined, locale),
     disabled,
+    form,
     id: inputId,
     max,
     min,
     name,
     onChange(event) {
-      handleInputChange(event.target.valueAsNumber, index, event);
+      handleInputChange(event.currentTarget.valueAsNumber, index, event);
     },
-    onFocus() {
+    onFocus(event) {
+      const isRestoringFocusVisible = restoringFocusVisibleRef.current;
+      restoringFocusVisibleRef.current = false;
       setActive(index);
       setFocused(true);
+      if (isRestoringFocusVisible) {
+        event.stopPropagation();
+      }
     },
-    onBlur() {
+    onBlur(event) {
+      if (restoringFocusVisibleRef.current) {
+        event.stopPropagation();
+        return;
+      }
       if (!thumbRef.current) {
         return;
       }
@@ -277,6 +309,17 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
           break;
       }
       if (newValue !== null) {
+        const input = event.currentTarget;
+        if (!matchesFocusVisible(input)) {
+          restoringFocusVisibleRef.current = true;
+          input.blur();
+          input.focus({
+            preventScroll: true,
+            // Show `:focus-visible` after keyboard interaction, even if the
+            // thumb was previously focused by a pointer.
+            focusVisible: true
+          });
+        }
         handleInputChange(newValue, index, event);
         event.preventDefault();
       }
@@ -302,8 +345,9 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       children: /*#__PURE__*/_jsxs(React.Fragment, {
         children: [childrenProp, /*#__PURE__*/_jsx("input", {
           ref: mergedInputRef,
-          ...inputProps
-        }), inset && !isMounted && renderBeforeHydration &&
+          ...inputProps,
+          suppressHydrationWarning: true
+        }), inset && isHydrating && renderBeforeHydration &&
         // this must be rendered with the last thumb to ensure all
         // preceding thumbs are already rendered in the DOM
         last && /*#__PURE__*/_jsx("script", {
@@ -332,8 +376,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
         }
       },
       style: getThumbStyle(),
-      suppressHydrationWarning: renderBeforeHydration || undefined,
-      tabIndex: -1
+      suppressHydrationWarning: renderBeforeHydration || undefined
     }, elementProps],
     stateAttributesMapping: sliderStateAttributesMapping
   });

package/esm/slider/track/SliderTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Contains the slider indicator and represents the entire range of the slider.
  * Renders a `<div>` element.
@@ -8,7 +8,9 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
+export interface SliderTrackState extends SliderRootState {}
+export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderTrackState> {}
 export declare namespace SliderTrack {
+  type State = SliderTrackState;
   type Props = SliderTrackProps;
 }

package/esm/slider/track/SliderTrack.js

@@ -15,6 +15,7 @@ export const SliderTrack = /*#__PURE__*/React.forwardRef(function SliderTrack(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/slider/utils/resolveThumbCollision.d.ts

@@ -2,8 +2,8 @@ import { SliderRootContext } from "../root/SliderRootContext.js";
 export interface ResolveThumbCollisionParams {
   behavior: SliderRootContext['thumbCollisionBehavior'];
   values: readonly number[];
-  currentValues?: (readonly number[] | null) | undefined;
-  initialValues?: (readonly number[] | null) | undefined;
+  currentValues?: readonly number[] | null | undefined;
+  initialValues?: readonly number[] | null | undefined;
   pressedIndex: number;
   nextValue: number;
   min: number;

package/esm/slider/utils/roundValueToStep.d.ts

@@ -1 +1,2 @@
+export declare function getDecimalPrecision(num: number): number;
 export declare function roundValueToStep(value: number, step: number, min: number): number;

package/esm/slider/utils/roundValueToStep.js

@@ -1,4 +1,8 @@
-function getDecimalPrecision(num) {
+export function getDecimalPrecision(num) {
+  if (num === 0) {
+    return 0;
+  }
+
   // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
   // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
   if (Math.abs(num) < 1) {
@@ -11,5 +15,5 @@ function getDecimalPrecision(num) {
 }
 export function roundValueToStep(value, step, min) {
   const nearest = Math.round((value - min) / step) * step + min;
-  return Number(nearest.toFixed(getDecimalPrecision(step)));
+  return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
 }

package/esm/slider/value/SliderValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * Displays the current value of the slider as text.
  * Renders an `<output>` element.
@@ -8,9 +8,11 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
 export declare const SliderValue: React.ForwardRefExoticComponent<Omit<SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>>;
-export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderRoot.State>, 'children'> {
-  children?: (null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode)) | undefined;
+export interface SliderValueState extends SliderRootState {}
+export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderValueState>, 'children'> {
+  children?: null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode) | undefined;
 }
 export declare namespace SliderValue {
+  type State = SliderValueState;
   type Props = SliderValueProps;
 }

package/esm/slider/value/SliderValue.js

@@ -17,6 +17,7 @@ export const SliderValue = /*#__PURE__*/React.forwardRef(function SliderValue(co
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/switch/root/SwitchRoot.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";
 import { REASONS } from "../../utils/reasons.js";
 import type { BaseUIChangeEventDetails } from "../../types/index.js";
 /**
@@ -10,7 +10,7 @@ import type { BaseUIChangeEventDetails } from "../../types/index.js";
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
 export declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface SwitchRootState extends FieldRoot.State {
+export interface SwitchRootState extends FieldRootState {
   /**
    * Whether the switch is currently active.
    */
@@ -28,7 +28,7 @@ export interface SwitchRootState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', SwitchRoot.State>, 'onChange'> {
+export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', SwitchRootState>, 'onChange'> {
   /**
    * The id of the switch element.
    */
@@ -59,6 +59,11 @@ export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUICompon
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the switch is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Event handler called when the switch is activated or deactivated.
    */

package/esm/switch/root/SwitchRoot.js

@@ -13,10 +13,11 @@ import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useButton } from "../../use-button/index.js";
 import { SwitchRootContext } from "./SwitchRootContext.js";
 import { stateAttributesMapping } from "../stateAttributesMapping.js";
-import { useField } from "../../field/useField.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
@@ -34,6 +35,8 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     checked: checkedProp,
     className,
     defaultChecked,
+    'aria-labelledby': ariaLabelledByProp,
+    form,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -45,6 +48,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     render,
     uncheckedValue,
     value,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -85,13 +89,9 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     name: 'Switch',
     state: 'checked'
   });
-  useField({
+  useRegisterFieldControl(switchRef, {
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef: switchRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   useIsoLayoutEffect(() => {
     if (inputRef.current) {
@@ -115,13 +115,14 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     disabled,
     native: nativeButton
   });
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
   const rootProps = {
     id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     onFocus() {
       if (!disabled) {
         setFocused(true);
@@ -155,6 +156,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
   const inputProps = React.useMemo(() => mergeProps({
     checked,
     disabled,
+    form,
     id: hiddenInputId,
     name,
     required,
@@ -168,7 +170,11 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const eventDetails = createChangeEventDetails(REASONS.none, event.nativeEvent);
       onCheckedChange?.(nextChecked, eventDetails);
       if (eventDetails.isCanceled) {
@@ -184,7 +190,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
   // To avoid this, we only set the value if it's defined
   value !== undefined ? {
     value
-  } : EMPTY_OBJECT), [checked, disabled, handleInputRef, hiddenInputId, name, onCheckedChange, required, setCheckedState, validation, value]);
+  } : EMPTY_OBJECT), [checked, disabled, form, handleInputRef, hiddenInputId, name, onCheckedChange, readOnly, required, setCheckedState, validation, value]);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,
@@ -202,10 +208,12 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     value: state,
     children: [element, !checked && name && uncheckedValue !== undefined && /*#__PURE__*/_jsx("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/_jsx("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/esm/switch/root/SwitchRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SwitchRoot } from "./SwitchRoot.js";
-export type SwitchRootContext = SwitchRoot.State;
-export declare const SwitchRootContext: React.Context<import("./SwitchRoot.js").SwitchRootState | undefined>;
-export declare function useSwitchRootContext(): import("./SwitchRoot.js").SwitchRootState;
+import type { SwitchRootState } from "./SwitchRoot.js";
+export type SwitchRootContext = SwitchRootState;
+export declare const SwitchRootContext: React.Context<SwitchRootState | undefined>;
+export declare function useSwitchRootContext(): SwitchRootState;

package/esm/switch/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import type { SwitchRoot } from "./root/SwitchRoot.js";
+import type { SwitchRootState } from "./root/SwitchRoot.js";
 import type { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
-export declare const stateAttributesMapping: StateAttributesMapping<SwitchRoot.State>;
+export declare const stateAttributesMapping: StateAttributesMapping<SwitchRootState>;

package/esm/switch/thumb/SwitchThumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SwitchRoot } from "../root/SwitchRoot.js";
+import type { SwitchRootState } from "../root/SwitchRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
 export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumb.State> {}
-export interface SwitchThumbState extends SwitchRoot.State {}
+export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumbState> {}
+export interface SwitchThumbState extends SwitchRootState {}
 export declare namespace SwitchThumb {
   type Props = SwitchThumbProps;
   type State = SwitchThumbState;

package/esm/switch/thumb/SwitchThumb.js

@@ -16,6 +16,7 @@ export const SwitchThumb = /*#__PURE__*/React.forwardRef(function SwitchThumb(co
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/tabs/indicator/TabsIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRoot, TabsRootState } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
 /**
  * A visual indicator that can be styled to match the position of the currently active tab.
@@ -9,15 +9,24 @@ import type { TabsTab } from "../tab/TabsTab.js";
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface TabsIndicatorState extends TabsRoot.State {
+export interface TabsIndicatorState extends TabsRootState {
+  /**
+   * The active tab position.
+   */
   activeTabPosition: TabsTab.Position | null;
+  /**
+   * The active tab size.
+   */
   activeTabSize: TabsTab.Size | null;
+  /**
+   * The component orientation.
+   */
   orientation: TabsRoot.Orientation;
 }
-export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicator.State> {
+export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicatorState> {
   /**
    * Whether to render itself before React hydrates.
-   * This minimizes the time that the indicator isn’t visible after server-side rendering.
+   * This minimizes the time that the indicator isn't visible after server-side rendering.
    * @default false
    */
   renderBeforeHydration?: boolean | undefined;

package/esm/tabs/indicator/TabsIndicator.js

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useForcedRerendering } from '@base-ui/utils/useForcedRerendering';
-import { useOnMount } from '@base-ui/utils/useOnMount';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { getCssDimensions } from "../../utils/getCssDimensions.js";
+import { useIsHydrating } from "../../utils/useIsHydrating.js";
 import { useTabsRootContext } from "../root/TabsRootContext.js";
 import { tabsStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { useTabsListContext } from "../list/TabsListContext.js";
@@ -29,6 +29,7 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     className,
     render,
     renderBeforeHydration = false,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const {
@@ -41,24 +42,14 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     value
   } = useTabsRootContext();
   const {
-    tabsListElement
+    tabsListElement,
+    registerIndicatorUpdateListener
   } = useTabsListContext();
-  const [isMounted, setIsMounted] = React.useState(false);
-  const {
-    value: activeTabValue
-  } = useTabsRootContext();
-  useOnMount(() => setIsMounted(true));
+  const isHydrating = useIsHydrating();
   const rerender = useForcedRerendering();
   React.useEffect(() => {
-    if (value != null && tabsListElement != null && typeof ResizeObserver !== 'undefined') {
-      const resizeObserver = new ResizeObserver(rerender);
-      resizeObserver.observe(tabsListElement);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return undefined;
-  }, [value, tabsListElement, rerender]);
+    return registerIndicatorUpdateListener(rerender);
+  }, [registerIndicatorUpdateListener, rerender]);
   let left = 0;
   let right = 0;
   let top = 0;
@@ -140,11 +131,11 @@ export const TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator
     }],
     stateAttributesMapping
   });
-  if (activeTabValue == null) {
+  if (value == null) {
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [element, !isMounted && renderBeforeHydration && /*#__PURE__*/_jsx("script", {
+    children: [element, isHydrating && renderBeforeHydration && /*#__PURE__*/_jsx("script", {
       nonce: nonce
       // eslint-disable-next-line react/no-danger
       ,

package/esm/tabs/indicator/TabsIndicatorCssVars.d.ts

@@ -25,7 +25,7 @@ export declare enum TabsIndicatorCssVars {
    */
   activeTabWidth = "--active-tab-width",
   /**
-   * Indicates the width of the tab if it is active.
+   * Indicates the height of the tab if it is active.
    * @type {number}
    */
   activeTabHeight = "--active-tab-height",

package/esm/tabs/indicator/TabsIndicatorCssVars.js

@@ -25,7 +25,7 @@ export let TabsIndicatorCssVars = /*#__PURE__*/function (TabsIndicatorCssVars) {
    */
   TabsIndicatorCssVars["activeTabWidth"] = "--active-tab-width";
   /**
-   * Indicates the width of the tab if it is active.
+   * Indicates the height of the tab if it is active.
    * @type {number}
    */
   TabsIndicatorCssVars["activeTabHeight"] = "--active-tab-height";

package/esm/tabs/list/TabsList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsRootState } from "../root/TabsRoot.js";
 /**
  * Groups the individual tab buttons.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { TabsRoot } from "../root/TabsRoot.js";
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface TabsListState extends TabsRoot.State {}
-export interface TabsListProps extends BaseUIComponentProps<'div', TabsList.State> {
+export interface TabsListState extends TabsRootState {}
+export interface TabsListProps extends BaseUIComponentProps<'div', TabsListState> {
   /**
    * Whether to automatically change the active tab on arrow key focus.
    * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.