@base-ui/react 1.0.0-rc.2 → 1.1.0

package/esm/select/trigger/SelectTrigger.js

@@ -20,7 +20,10 @@ import { mergeProps } from "../../merge-props/index.js";
 import { useButton } from "../../use-button/index.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
+import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 const BOUNDARY_OFFSET = 2;
+const SELECTED_DELAY = 400;
+const UNSELECTED_DELAY = 200;
 const stateAttributesMapping = {
   ...pressableTriggerOpenStateMapping,
   ...fieldValidityMapping,
@@ -37,6 +40,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const {
     render,
     className,
+    id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
     ...elementProps
@@ -57,6 +61,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     selectionRef,
     validation,
     readOnly,
+    required,
     alignItemWithTriggerActiveRef,
     disabled: selectDisabled,
     keyboardActiveRef
@@ -67,11 +72,16 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const triggerProps = useStore(store, selectors.triggerProps);
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
-  const serializedValue = useStore(store, selectors.serializedValue);
+  const rootId = useStore(store, selectors.id);
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && open;
+  const hasNullItemLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const id = idProp ?? rootId;
+  useLabelableId({
+    id
+  });
   const positionerRef = useValueAsRef(positionerElement);
   const triggerRef = React.useRef(null);
-  const timeoutFocus = useTimeout();
-  const timeoutMouseDown = useTimeout();
   const {
     getButtonProps,
     buttonRef
@@ -83,22 +93,37 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     store.set('triggerElement', element);
   });
   const mergedRef = useMergedRefs(forwardedRef, triggerRef, buttonRef, setTriggerElement);
-  const timeout1 = useTimeout();
-  const timeout2 = useTimeout();
+  const timeoutFocus = useTimeout();
+  const timeoutMouseDown = useTimeout();
+  const selectedDelayTimeout = useTimeout();
+  const unselectedDelayTimeout = useTimeout();
   React.useEffect(() => {
     if (open) {
-      // mousedown -> move to unselected item -> mouseup should not select within 200ms.
-      timeout2.start(200, () => {
-        selectionRef.current.allowUnselectedMouseUp = true;
+      const hasSelectedItemInList = hasSelectedValue || hasNullItemLabel;
+      const shouldDelayUnselectedMouseUpLonger = !hasSelectedItemInList;
 
-        // mousedown -> mouseup on selected item should not select within 400ms.
-        timeout1.start(200, () => {
+      // When there is no selected item in the list (placeholder-only selects), a mousedown
+      // on the trigger followed by a quick mouseup over the first option can accidentally select
+      // within 200ms. Delay unselected mouseup to match the safer 400ms window.
+      if (shouldDelayUnselectedMouseUpLonger) {
+        selectedDelayTimeout.start(SELECTED_DELAY, () => {
+          selectionRef.current.allowUnselectedMouseUp = true;
           selectionRef.current.allowSelectedMouseUp = true;
         });
-      });
+      } else {
+        // mousedown -> move to unselected item -> mouseup should not select within 200ms.
+        unselectedDelayTimeout.start(UNSELECTED_DELAY, () => {
+          selectionRef.current.allowUnselectedMouseUp = true;
+
+          // mousedown -> mouseup on selected item should not select within 400ms.
+          selectedDelayTimeout.start(UNSELECTED_DELAY, () => {
+            selectionRef.current.allowSelectedMouseUp = true;
+          });
+        });
+      }
       return () => {
-        timeout1.clear();
-        timeout2.clear();
+        selectedDelayTimeout.clear();
+        unselectedDelayTimeout.clear();
       };
     }
     selectionRef.current = {
@@ -107,24 +132,27 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     };
     timeoutMouseDown.clear();
     return undefined;
-  }, [open, selectionRef, timeoutMouseDown, timeout1, timeout2]);
+  }, [open, hasSelectedValue, hasNullItemLabel, selectionRef, timeoutMouseDown, selectedDelayTimeout, unselectedDelayTimeout]);
   const ariaControlsId = React.useMemo(() => {
     return listElement?.id ?? getFloatingFocusElement(positionerElement)?.id;
   }, [listElement, positionerElement]);
   const props = mergeProps(triggerProps, {
+    id,
     role: 'combobox',
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
     'aria-controls': open ? ariaControlsId : undefined,
     'aria-labelledby': labelId,
     'aria-readonly': readOnly || undefined,
+    'aria-required': required || undefined,
     tabIndex: disabled ? -1 : 0,
     ref: mergedRef,
     onFocus(event) {
       setFocused(true);
+
       // The popup element shouldn't obscure the focused trigger.
       if (open && alignItemWithTriggerActiveRef.current) {
-        setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent));
+        setOpen(false, createChangeEventDetails(REASONS.none, event.nativeEvent));
       }
 
       // Saves a re-render on initial click: `forceMount === true` mounts
@@ -136,7 +164,11 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
         store.set('forceMount', true);
       });
     },
-    onBlur() {
+    onBlur(event) {
+      // If focus is moving into the popup, don't count it as a blur.
+      if (contains(positionerElement, event.relatedTarget)) {
+        return;
+      }
       setTouched(true);
       setFocused(false);
       if (validationMode === 'onBlur') {
@@ -189,8 +221,8 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     disabled,
     value,
     readOnly,
-    placeholder: !serializedValue
-  }), [fieldState, open, disabled, value, readOnly, serializedValue]);
+    placeholder: !hasSelectedValue
+  }), [fieldState, open, disabled, value, readOnly, hasSelectedValue]);
   return useRenderElement('button', componentProps, {
     ref: [forwardedRef, triggerRef],
     state,

package/esm/select/value/SelectValue.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectValueState {
   /**
    * The value of the currently selected item.
@@ -24,6 +24,11 @@ export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', Sele
    * ```
    */
   children?: React.ReactNode | ((value: any) => React.ReactNode);
+  /**
+   * The placeholder value to display when no value is selected.
+   * This is overridden by `children` if specified, or by a null item's label in `items`.
+   */
+  placeholder?: React.ReactNode;
 }
 export declare namespace SelectValue {
   type State = SelectValueState;

package/esm/select/value/SelectValue.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { resolveSelectedLabel, resolveMultipleLabels } from "../../utils/resolveValueLabel.js";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
 import { selectors } from "../store.js";
 const stateAttributesMapping = {
   value: () => null
@@ -21,6 +21,7 @@ export const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(co
     className,
     render,
     children: childrenProp,
+    placeholder,
     ...elementProps
   } = componentProps;
   const {
@@ -30,12 +31,25 @@ export const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(co
   const value = useStore(store, selectors.value);
   const items = useStore(store, selectors.items);
   const itemToStringLabel = useStore(store, selectors.itemToStringLabel);
-  const serializedValue = useStore(store, selectors.serializedValue);
+  const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
+  const hasNullLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const state = React.useMemo(() => ({
     value,
-    placeholder: !serializedValue
-  }), [value, serializedValue]);
-  const children = typeof childrenProp === 'function' ? childrenProp(value) : childrenProp ?? (Array.isArray(value) ? resolveMultipleLabels(value, itemToStringLabel) : resolveSelectedLabel(value, items, itemToStringLabel));
+    placeholder: !hasSelectedValue
+  }), [value, hasSelectedValue]);
+  let children = null;
+  if (typeof childrenProp === 'function') {
+    children = childrenProp(value);
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (Array.isArray(value)) {
+    children = resolveMultipleLabels(value, items, itemToStringLabel);
+  } else {
+    children = resolveSelectedLabel(value, items, itemToStringLabel);
+  }
   const element = useRenderElement('span', componentProps, {
     state,
     ref: [forwardedRef, valueRef],

package/esm/separator/Separator.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
  *
  * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
  */
-export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SeparatorProps extends BaseUIComponentProps<'div', Separator.State> {
   /**
    * The orientation of the separator.

package/esm/slider/control/SliderControl.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderControl: React.ForwardRefExoticComponent<SliderControlProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderControl: React.ForwardRefExoticComponent<Omit<SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderControlProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderControl {
   type State = SliderRoot.State;

package/esm/slider/control/SliderControl.js

@@ -267,7 +267,6 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     setDragging(false);
     pressedInputRef.current = null;
     pressedThumbCenterOffsetRef.current = null;
-    pressedThumbIndexRef.current = -1;
     const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
     const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
     if (finger != null) {
@@ -278,6 +277,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
     if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
       controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
     }
+    pressedThumbIndexRef.current = -1;
     touchIdRef.current = null;
     pressedValuesRef.current = null;
     // eslint-disable-next-line @typescript-eslint/no-use-before-define

package/esm/slider/control/SliderControlDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderControlDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/control/SliderControlDataAttributes.js

@@ -12,14 +12,6 @@ export let SliderControlDataAttributes = /*#__PURE__*/function (SliderControlDat
    * Present when the slider is disabled.
    */
   SliderControlDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderControlDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderControlDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/indicator/SliderIndicator.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderIndicator: React.ForwardRefExoticComponent<SliderIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderIndicator: React.ForwardRefExoticComponent<Omit<SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderIndicatorProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderIndicator {
   type Props = SliderIndicatorProps;

package/esm/slider/indicator/SliderIndicatorDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderIndicatorDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/indicator/SliderIndicatorDataAttributes.js

@@ -12,14 +12,6 @@ export let SliderIndicatorDataAttributes = /*#__PURE__*/function (SliderIndicato
    * Present when the slider is disabled.
    */
   SliderIndicatorDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderIndicatorDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderIndicatorDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/root/SliderRootDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderRootDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/root/SliderRootDataAttributes.js

@@ -12,14 +12,6 @@ export let SliderRootDataAttributes = /*#__PURE__*/function (SliderRootDataAttri
    * Present when the slider is disabled.
    */
   SliderRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderRootDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderRootDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/thumb/SliderThumb.d.ts

@@ -3,12 +3,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
 import type { SliderRoot } from "../root/SliderRoot.js";
 /**
- * The draggable part of the the slider at the tip of the indicator.
+ * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ThumbMetadata {
   inputId: LabelableContext['controlId'];
 }

package/esm/slider/thumb/SliderThumb.js

@@ -14,6 +14,7 @@ import { valueToPercent } from "../../utils/valueToPercent.js";
 import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS } 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 { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { getMidpoint } from "../utils/getMidpoint.js";
@@ -44,7 +45,7 @@ function getNewValue(thumbValue, step, direction, min, max) {
 }
 
 /**
- * The draggable part of the the slider at the tip of the indicator.
+ * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
@@ -69,6 +70,9 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     tabIndex: tabIndexProp,
     ...elementProps
   } = componentProps;
+  const {
+    nonce
+  } = useCSPContext();
   const id = useBaseUiId(idProp);
   const {
     active: activeIndex,
@@ -303,7 +307,9 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
         // this must be rendered with the last thumb to ensure all
         // preceding thumbs are already rendered in the DOM
         last && /*#__PURE__*/_jsx("script", {
+          nonce: nonce
           // eslint-disable-next-line react/no-danger
+          ,
           dangerouslySetInnerHTML: {
             __html: prehydrationScript
           },

package/esm/slider/thumb/SliderThumbDataAttributes.d.ts

@@ -16,14 +16,6 @@ export declare enum SliderThumbDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/thumb/SliderThumbDataAttributes.js

@@ -16,14 +16,6 @@ export let SliderThumbDataAttributes = /*#__PURE__*/function (SliderThumbDataAtt
    * Present when the slider is disabled.
    */
   SliderThumbDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderThumbDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderThumbDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

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

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLElement>>;
+export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderTrack {
   type Props = SliderTrackProps;

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

@@ -12,14 +12,6 @@ export declare enum SliderTrackDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/track/SliderTrackDataAttributes.js

@@ -12,14 +12,6 @@ export let SliderTrackDataAttributes = /*#__PURE__*/function (SliderTrackDataAtt
    * Present when the slider is disabled.
    */
   SliderTrackDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderTrackDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderTrackDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

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

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderValue: React.ForwardRefExoticComponent<SliderValueProps & React.RefAttributes<HTMLOutputElement>>;
+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);
 }

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

@@ -12,14 +12,6 @@ export declare enum SliderValueDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/esm/slider/value/SliderValueDataAttributes.js

@@ -12,14 +12,6 @@ export let SliderValueDataAttributes = /*#__PURE__*/function (SliderValueDataAtt
    * Present when the slider is disabled.
    */
   SliderValueDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderValueDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderValueDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

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

@@ -9,7 +9,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<SwitchRootProps & React.RefAttributes<HTMLElement>>;
+export declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface SwitchRootState extends FieldRoot.State {
   /**
    * Whether the switch is currently active.
@@ -73,6 +73,11 @@ export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUICompon
    * @default false
    */
   required?: boolean;
+  /**
+   * The value submitted with the form when the switch is on.
+   * By default, switch submits the "on" value, matching native checkbox behavior.
+   */
+  value?: string;
   /**
    * The value submitted with the form when the switch is off.
    * By default, unchecked switches do not submit any value, matching native checkbox behavior.

package/esm/switch/root/SwitchRoot.js

@@ -5,7 +5,8 @@ import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { mergeProps } from "../../merge-props/index.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
@@ -43,6 +44,7 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     disabled: disabledProp = false,
     render,
     uncheckedValue,
+    value,
     ...elementProps
   } = componentProps;
   const {
@@ -71,11 +73,12 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
   const handleInputRef = useMergedRefs(inputRef, externalInputRef, validation.inputRef);
   const switchRef = React.useRef(null);
   const id = useBaseUiId();
-  const inputId = useLabelableId({
+  const controlId = useLabelableId({
     id: idProp,
     implicit: false,
     controlRef: switchRef
   });
+  const hiddenInputId = nativeButton ? undefined : controlId;
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -113,10 +116,11 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     native: nativeButton
   });
   const rootProps = {
-    id,
+    id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
+    'aria-required': required || undefined,
     'aria-labelledby': labelId,
     onFocus() {
       if (!disabled) {
@@ -145,10 +149,10 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
   const inputProps = React.useMemo(() => mergeProps({
     checked,
     disabled,
-    id: inputId,
+    id: hiddenInputId,
     name,
     required,
-    style: visuallyHidden,
+    style: name ? visuallyHiddenInput : visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
@@ -169,7 +173,12 @@ export const SwitchRoot = /*#__PURE__*/React.forwardRef(function SwitchRoot(comp
     onFocus() {
       switchRef.current?.focus();
     }
-  }, validation.getInputValidationProps), [checked, disabled, handleInputRef, inputId, name, onCheckedChange, required, setCheckedState, validation]);
+  }, validation.getInputValidationProps,
+  // React <19 sets an empty value if `undefined` is passed explicitly
+  // 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]);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,

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

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
-export declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
+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 declare namespace SwitchThumb {

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

@@ -8,7 +8,7 @@ import type { TabsTab } from "../tab/TabsTab.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface TabsIndicatorState extends TabsRoot.State {
   activeTabPosition: TabsTab.Position | null;
   activeTabSize: TabsTab.Size | null;