@base-ui/react 1.1.0 → 1.3.0

package/slider/root/SliderRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, Orientation } from "../../utils/types.js";
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
  * Groups all parts of the slider.
@@ -11,10 +11,10 @@ import { REASONS } from "../../utils/reasons.js";
  */
 export declare const SliderRoot: {
   <Value extends number | readonly number[]>(props: SliderRoot.Props<Value> & {
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement> | undefined;
   }): React.JSX.Element;
 };
-export interface SliderRootState extends FieldRoot.State {
+export interface SliderRootState extends FieldRootState {
   /**
    * The index of the active thumb.
    */
@@ -27,7 +27,13 @@ export interface SliderRootState extends FieldRoot.State {
    * Whether the thumb is currently being dragged.
    */
   dragging: boolean;
+  /**
+   * The maximum value.
+   */
   max: number;
+  /**
+   * The minimum value.
+   */
   min: number;
   /**
    * The minimum steps between values in a range slider.
@@ -49,65 +55,65 @@ export interface SliderRootState extends FieldRoot.State {
    */
   values: readonly number[];
 }
-export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', SliderRoot.State> {
+export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends BaseUIComponentProps<'div', SliderRootState> {
   /**
    * The uncontrolled value of the slider when it’s initially rendered.
    *
    * To render a controlled slider, use the `value` prop instead.
    */
-  defaultValue?: Value;
+  defaultValue?: Value | undefined;
   /**
    * Whether the slider should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Options to format the input value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum allowed value of the slider.
    * Should not be equal to max.
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The minimum steps between values in a range slider.
    * @default 0
    */
-  minStepsBetweenValues?: number;
+  minStepsBetweenValues?: number | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The component orientation.
    * @default 'horizontal'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.
    * We recommend (max - min) to be evenly divisible by the step.
    * @default 1
    */
-  step?: number;
+  step?: number | undefined;
   /**
    * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
    * @default 10
    */
-  largeStep?: number;
+  largeStep?: number | undefined;
   /**
    * How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`:
    * - `center`: The center of the thumb is aligned with the control edge
@@ -115,7 +121,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return
    * @default 'center'
    */
-  thumbAlignment?: 'center' | 'edge' | 'edge-client-only';
+  thumbAlignment?: 'center' | 'edge' | 'edge-client-only' | undefined;
   /**
    * Controls how thumbs behave when they collide during pointer interactions.
    *
@@ -125,12 +131,12 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    *
    * @default 'push'
    */
-  thumbCollisionBehavior?: 'push' | 'swap' | 'none';
+  thumbCollisionBehavior?: 'push' | 'swap' | 'none' | undefined;
   /**
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
-  value?: Value;
+  value?: Value | undefined;
   /**
    * Callback function that is fired when the slider's value changed.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -143,7 +149,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `'keyboard'` for keyboard input
    * - `'none'` when the change is triggered without a specific interaction
    */
-  onValueChange?: (value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback function that is fired when the `pointerup` is triggered.
    * **Warning**: This is a generic event not a change event.
@@ -156,7 +162,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `'input-change'` when the hidden range input emits a change event (for example, via form integration)
    * - `'none'` when the commit occurs without a specific interaction
    */
-  onValueCommitted?: (value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void;
+  onValueCommitted?: ((value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void) | undefined;
 }
 export interface SliderRootChangeEventCustomProperties {
   /**

package/slider/root/SliderRoot.js

@@ -25,6 +25,7 @@ var _useField = require("../../field/useField");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _asc = require("../utils/asc");
 var _getSliderValue = require("../utils/getSliderValue");
 var _validateMinimumDistance = require("../utils/validateMinimumDistance");
@@ -76,6 +77,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
+  const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(id);
   const onValueChange = (0, _useStableCallback.useStableCallback)(onValueChangeProp);
   const onValueCommitted = (0, _useStableCallback.useStableCallback)(onValueCommittedProp);
   const {
@@ -92,9 +94,10 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
-  const ariaLabelledby = ariaLabelledByProp ?? labelId;
+  const [labelId, setLabelId] = React.useState();
+  const ariaLabelledby = ariaLabelledByProp ?? (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, labelId);
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
 
@@ -185,8 +188,9 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     // This allows seamless integration with the most popular form libraries.
     // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
     // Clone the event to not override `target` of the original event.
-    // @ts-expect-error The nativeEvent is function, not object
-    const clonedEvent = new event.constructor(event.type, event);
+    const nativeEvent = changeDetails.event;
+    const EventConstructor = nativeEvent.constructor ?? Event;
+    const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
     Object.defineProperty(clonedEvent, 'target', {
       writable: true,
       value: {
@@ -254,6 +258,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     indicatorPosition,
     inset: thumbAlignment !== 'center',
     labelId: ariaLabelledby,
+    rootLabelId: defaultLabelId,
     largeStep,
     lastUsedThumbIndex,
     lastChangedValueRef,
@@ -274,6 +279,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     setActive,
     setDragging,
     setIndicatorPosition,
+    setLabelId,
     setValue,
     state,
     step,
@@ -281,7 +287,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     thumbMap,
     thumbRefs,
     values
-  }), [active, controlRef, ariaLabelledby, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
+  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],

package/slider/root/SliderRootContext.d.ts

@@ -3,7 +3,7 @@ import type { Orientation } from "../../utils/types.js";
 import type { CompositeMetadata } from "../../composite/list/CompositeList.js";
 import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
 import type { ThumbMetadata } from "../thumb/SliderThumb.js";
-import type { SliderRoot } from "./SliderRoot.js";
+import type { SliderRoot, SliderRootState } from "./SliderRoot.js";
 export interface SliderRootContext {
   /**
    * The index of the active thumb.
@@ -21,7 +21,8 @@ export interface SliderRootContext {
   handleInputChange: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
   indicatorPosition: (number | undefined)[];
   inset: boolean;
-  labelId?: string;
+  labelId?: string | undefined;
+  rootLabelId?: string | undefined;
   /**
    * The large step value of the slider when incrementing or decrementing while the shift key is held,
    * or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
@@ -34,7 +35,7 @@ export interface SliderRootContext {
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum allowed value of the slider.
    */
@@ -66,11 +67,12 @@ export interface SliderRootContext {
   setActive: (index: number) => void;
   setDragging: React.Dispatch<React.SetStateAction<boolean>>;
   setIndicatorPosition: React.Dispatch<React.SetStateAction<(number | undefined)[]>>;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
   /**
    * Callback fired when dragging and invokes onValueChange.
    */
   setValue: (newValue: number | number[], details?: SliderRoot.ChangeEventDetails) => void;
-  state: SliderRoot.State;
+  state: SliderRootState;
   /**
    * The step increment of the slider when incrementing or decrementing. It will snap
    * to multiples of this value. Decimal values are supported.

package/slider/root/stateAttributesMapping.d.ts

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

package/slider/root/stateAttributesMapping.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sliderStateAttributesMapping = void 0;
+var _constants = require("../../field/utils/constants");
 const sliderStateAttributesMapping = exports.sliderStateAttributesMapping = {
   activeThumbIndex: () => null,
   max: () => null,
   min: () => null,
   minStepsBetweenValues: () => null,
   step: () => null,
-  values: () => null
+  values: () => null,
+  ..._constants.fieldValidityMapping
 };

package/slider/thumb/SliderThumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
-import type { SliderRoot } from "../root/SliderRoot.js";
+import type { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
@@ -12,22 +12,22 @@ export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThu
 export interface ThumbMetadata {
   inputId: LabelableContext['controlId'];
 }
-export interface SliderThumbState extends SliderRoot.State {}
-export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumb.State>, 'onBlur' | 'onFocus'> {
+export interface SliderThumbState extends SliderRootState {}
+export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', SliderThumbState>, 'onBlur' | 'onFocus'> {
   /**
    * Whether the thumb should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
    */
-  getAriaLabel?: ((index: number) => string) | null;
+  getAriaLabel?: ((index: number) => string) | null | undefined;
   /**
    * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
    * This is important for screen reader users.
    */
-  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null;
+  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null | undefined;
   /**
    * The index of the thumb which corresponds to the index of its value in the
    * `value` or `defaultValue` array.
@@ -45,19 +45,19 @@ export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', Slide
   /**
    * A ref to access the nested input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * A blur handler forwarded to the `input`.
    */
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
   /**
    * A focus handler forwarded to the `input`.
    */
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
   /**
    * Optional tab index attribute forwarded to the `input`.
    */
-  tabIndex?: number;
+  tabIndex?: number | undefined;
 }
 export declare namespace SliderThumb {
   type State = SliderThumbState;

package/slider/thumb/SliderThumb.js

@@ -209,9 +209,10 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
   }
+  const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
   const inputProps = (0, _mergeProps.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,

package/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/slider/utils/getPushedThumbValues.d.ts

@@ -6,7 +6,7 @@ interface GetPushedThumbValuesParams {
   max: number;
   step: number;
   minStepsBetweenValues: number;
-  initialValues?: readonly number[];
+  initialValues?: readonly number[] | undefined;
 }
 /**
  * Returns a new array of slider values where attempting to move the thumb at `index`

package/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;
-  initialValues?: readonly number[] | null;
+  currentValues?: readonly number[] | null | undefined;
+  initialValues?: readonly number[] | null | undefined;
   pressedIndex: number;
   nextValue: number;
   min: number;

package/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);
+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/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,61 +28,61 @@ 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.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the switch is currently active.
    *
    * To render an uncontrolled switch, use the `defaultChecked` prop instead.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Whether the switch is initially active.
    *
    * To render a controlled switch, use the `checked` prop instead.
    * @default false
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A ref to access the hidden `<input>` element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Event handler called when the switch is activated or deactivated.
    */
-  onCheckedChange?: (checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void;
+  onCheckedChange?: ((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the user should be unable to activate or deactivate the switch.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must activate the switch before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * The value submitted with the form when the switch is on.
    * By default, switch submits the "on" value, matching native checkbox behavior.
    */
-  value?: string;
+  value?: string | undefined;
   /**
    * The value submitted with the form when the switch is off.
    * By default, unchecked switches do not submit any value, matching native checkbox behavior.
    */
-  uncheckedValue?: string;
+  uncheckedValue?: string | undefined;
 }
 export type SwitchRootChangeEventReason = typeof REASONS.none;
 export type SwitchRootChangeEventDetails = BaseUIChangeEventDetails<SwitchRoot.ChangeEventReason>;

package/switch/root/SwitchRoot.js

@@ -23,6 +23,7 @@ var _useField = require("../../field/useField");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -39,6 +40,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     checked: checkedProp,
     className,
     defaultChecked,
+    'aria-labelledby': ariaLabelledByProp,
     id: idProp,
     inputRef: externalInputRef,
     name: nameProp,
@@ -120,13 +122,14 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     disabled,
     native: nativeButton
   });
+  const ariaLabelledBy = (0, _useAriaLabelledBy.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);
@@ -148,7 +151,13 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
         return;
       }
       event.preventDefault();
-      inputRef?.current?.click();
+      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey
+      }));
     }
   };
   const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)({

package/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/switch/root/SwitchRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/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/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/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,18 +9,27 @@ 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.
    * @default false
    */
-  renderBeforeHydration?: boolean;
+  renderBeforeHydration?: boolean | undefined;
 }
 export declare namespace TabsIndicator {
   type State = TabsIndicatorState;