@base-ui/react 1.3.0 → 1.4.0

package/select/root/SelectRoot.js

@@ -11,6 +11,7 @@ var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
+var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -19,6 +20,7 @@ var _store = require("@base-ui/utils/store");
 var _floatingUiReact = require("../../floating-ui-react");
 var _SelectRootContext = require("./SelectRootContext");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _store2 = require("../store");
@@ -26,17 +28,17 @@ var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _FormContext = require("../../form/FormContext");
-var _useField = require("../../field/useField");
 var _resolveValueLabel = require("../../utils/resolveValueLabel");
 var _constants = require("../../utils/constants");
 var _itemEquality = require("../../utils/itemEquality");
 var _useValueChanged = require("../../utils/useValueChanged");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
+var _scrollEdges = require("../../utils/scrollEdges");
 var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the select.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
@@ -50,6 +52,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    form,
     autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
@@ -152,6 +155,8 @@ function SelectRoot(props) {
   const selectedIndex = (0, _store.useStore)(store, _store2.selectors.selectedIndex);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  const previousOpenMethod = (0, _usePreviousValue.usePreviousValue)(openMethod);
+  const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
     if (multiple && Array.isArray(value) && value.length === 0) {
       return '';
@@ -165,13 +170,11 @@ function SelectRoot(props) {
     return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = (0, _useValueAsRef.useValueAsRef)(store.state.triggerElement);
-  (0, _useField.useField)({
+  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     id: generatedId,
-    commit: validation.commit,
     value,
-    controlRef,
-    name,
-    getValue: () => fieldStringValue
+    getValue: getFieldValue
   });
   const initialValueRef = React.useRef(value);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -241,7 +244,10 @@ function SelectRoot(props) {
   });
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
     setMounted(false);
-    store.set('activeIndex', null);
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
@@ -269,10 +275,10 @@ function SelectRoot(props) {
     if (!scroller) {
       return;
     }
-    const viewportTop = scroller.scrollTop;
-    const viewportBottom = scroller.scrollTop + scroller.clientHeight;
-    const shouldShowUp = viewportTop > 1;
-    const shouldShowDown = viewportBottom < scroller.scrollHeight - 1;
+    const maxScrollTop = (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
+    const scrollTop = (0, _scrollEdges.normalizeScrollOffset)(scroller.scrollTop, maxScrollTop);
+    const shouldShowUp = scrollTop > 0;
+    const shouldShowDown = scrollTop < maxScrollTop;
     if (store.state.scrollUpArrowVisible !== shouldShowUp) {
       store.set('scrollUpArrowVisible', shouldShowUp);
     }
@@ -308,9 +314,7 @@ function SelectRoot(props) {
       }
       store.set('activeIndex', nextActiveIndex);
     },
-    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
-    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
-    focusItemOnHover: false
+    focusItemOnHover: highlightItemOnHover
   });
   const typeahead = (0, _floatingUiReact.useTypeahead)(floatingContext, {
     enabled: !readOnly && !disabled && (open || !multiple),
@@ -359,9 +363,9 @@ function SelectRoot(props) {
       itemToStringLabel,
       itemToStringValue,
       isItemEqualToValue,
-      openMethod
+      openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, openMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -404,11 +408,12 @@ function SelectRoot(props) {
       const currentSerializedValue = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "hidden",
+        form: form,
         name: name,
         value: currentSerializedValue
       }, currentSerializedValue);
     });
-  }, [multiple, value, name, itemToStringValue]);
+  }, [multiple, value, form, name, itemToStringValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectRootContext.SelectRootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectRootContext.SelectFloatingContext.Provider, {
@@ -419,7 +424,6 @@ function SelectRoot(props) {
             // Move focus to the trigger element when the hidden input is focused.
             store.state.triggerElement?.focus({
               // Supported in Chrome from 144 (January 2026)
-              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
               focusVisible: true
             });
           },
@@ -429,7 +433,7 @@ function SelectRoot(props) {
             if (event.nativeEvent.defaultPrevented) {
               return;
             }
-            const nextValue = event.target.value;
+            const nextValue = event.currentTarget.value;
             const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
             function handleChange() {
               if (multiple) {
@@ -439,8 +443,15 @@ function SelectRoot(props) {
 
               // Handle single selection: match against registered values using serialization
               const matchingValue = valuesRef.current.find(v => {
-                const candidate = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
-                if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                // Try matching by value first (e.g., "US" for country code)
+                const candidateValue = (0, _resolveValueLabel.stringifyAsValue)(v, itemToStringValue);
+                if (candidateValue.toLowerCase() === nextValue.toLowerCase()) {
+                  return true;
+                }
+                // Also try matching by label for browser autofill compatibility
+                // (browsers autofill with displayed text like "United States", not the underlying value)
+                const candidateLabel = (0, _resolveValueLabel.stringifyAsLabel)(v, itemToStringLabel);
+                if (candidateLabel.toLowerCase() === nextValue.toLowerCase()) {
                   return true;
                 }
                 return false;
@@ -458,6 +469,7 @@ function SelectRoot(props) {
           }
         }),
         id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
         name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
@@ -467,7 +479,8 @@ function SelectRoot(props) {
         ref: ref,
         style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
         tabIndex: -1,
-        "aria-hidden": true
+        "aria-hidden": true,
+        suppressHydrationWarning: true
       }), hiddenInputs]
     })
   });

package/select/scroll-arrow/SelectScrollArrow.js

@@ -15,6 +15,7 @@ var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _scrollEdges = require("../../utils/scrollEdges");
 var _store2 = require("../store");
 /**
  * @internal
@@ -23,10 +24,12 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     direction,
     keepMounted = false,
     ...elementProps
   } = componentProps;
+  const isUp = direction === 'up';
   const {
     store,
     popupRef,
@@ -39,14 +42,14 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
     scrollDownArrowRef,
     scrollUpArrowRef
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
-  const visibleSelector = direction === 'up' ? _store2.selectors.scrollUpArrowVisible : _store2.selectors.scrollDownArrowVisible;
+  const visibleSelector = isUp ? _store2.selectors.scrollUpArrowVisible : _store2.selectors.scrollDownArrowVisible;
   const stateVisible = (0, _store.useStore)(store, visibleSelector);
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
   const timeout = (0, _useTimeout.useTimeout)();
-  const scrollArrowRef = direction === 'up' ? scrollUpArrowRef : scrollDownArrowRef;
+  const scrollArrowRef = isUp ? scrollUpArrowRef : scrollDownArrowRef;
   const {
     transitionStatus,
     setMounted
@@ -80,7 +83,7 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   };
   const defaultProps = {
     'aria-hidden': true,
-    children: direction === 'up' ? '▲' : '▼',
+    children: isUp ? '▲' : '▼',
     style: {
       position: 'absolute'
     },
@@ -96,72 +99,25 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
         }
         store.set('activeIndex', null);
         handleScrollArrowVisibility();
-        const isScrolledToTop = scroller.scrollTop === 0;
-        const isScrolledToBottom = Math.round(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
-        const list = listRef.current;
+        const maxScrollTop = (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
+        const scrollTop = (0, _scrollEdges.normalizeScrollOffset)(scroller.scrollTop, maxScrollTop);
+        const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
+        const items = listRef.current;
+        if (scrollTop !== scroller.scrollTop) {
+          scroller.scrollTop = scrollTop;
+        }
 
         // Fallback when there are no items registered yet.
-        if (list.length === 0) {
-          if (direction === 'up') {
-            store.set('scrollUpArrowVisible', !isScrolledToTop);
-          } else {
-            store.set('scrollDownArrowVisible', !isScrolledToBottom);
-          }
+        if (items.length === 0) {
+          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
         }
-        if (direction === 'up' && isScrolledToTop || direction === 'down' && isScrolledToBottom) {
+        if (isScrolledToEdge) {
           timeout.clear();
           return;
         }
-        if ((store.state.listElement || popupRef.current) && listRef.current && listRef.current.length > 0) {
-          const items = listRef.current;
+        if (items.length > 0) {
           const scrollArrowHeight = scrollArrowRef.current?.offsetHeight || 0;
-          if (direction === 'up') {
-            let firstVisibleIndex = 0;
-            const scrollTop = scroller.scrollTop + scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemTop = item.offsetTop;
-                if (itemTop >= scrollTop) {
-                  firstVisibleIndex = i;
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.max(0, firstVisibleIndex - 1);
-            if (targetIndex < firstVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = Math.max(0, targetItem.offsetTop - scrollArrowHeight);
-              }
-            } else {
-              // Already at the first item; ensure we reach the absolute top to account for group labels.
-              scroller.scrollTop = 0;
-            }
-          } else {
-            let lastVisibleIndex = items.length - 1;
-            const scrollBottom = scroller.scrollTop + scroller.clientHeight - scrollArrowHeight;
-            for (let i = 0; i < items.length; i += 1) {
-              const item = items[i];
-              if (item) {
-                const itemBottom = item.offsetTop + item.offsetHeight;
-                if (itemBottom > scrollBottom) {
-                  lastVisibleIndex = Math.max(0, i - 1);
-                  break;
-                }
-              }
-            }
-            const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
-            if (targetIndex > lastVisibleIndex) {
-              const targetItem = items[targetIndex];
-              if (targetItem) {
-                scroller.scrollTop = targetItem.offsetTop + targetItem.offsetHeight - scroller.clientHeight + scrollArrowHeight;
-              }
-            } else {
-              // Already at the last item; ensure we reach the true bottom.
-              scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight;
-            }
-          }
+          scroller.scrollTop = getTargetScrollTop(items, isUp, scrollTop, scroller.clientHeight, scrollArrowHeight, maxScrollTop);
         }
         timeout.start(40, scrollNextItem);
       }
@@ -182,4 +138,32 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   }
   return element;
 });
-if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+if (process.env.NODE_ENV !== "production") SelectScrollArrow.displayName = "SelectScrollArrow";
+function getTargetScrollTop(items, isUp, scrollTop, clientHeight, scrollArrowHeight, maxScrollTop) {
+  if (isUp) {
+    let firstVisibleIndex = 0;
+    const visibleTop = scrollTop + scrollArrowHeight - _scrollEdges.SCROLL_EDGE_TOLERANCE_PX;
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      if (item && item.offsetTop >= visibleTop) {
+        firstVisibleIndex = i;
+        break;
+      }
+    }
+    const targetIndex = Math.max(0, firstVisibleIndex - 1);
+    const targetItem = items[targetIndex];
+    return targetIndex < firstVisibleIndex && targetItem ? (0, _scrollEdges.normalizeScrollOffset)(targetItem.offsetTop - scrollArrowHeight, maxScrollTop) : 0;
+  }
+  let lastVisibleIndex = items.length - 1;
+  const visibleBottom = scrollTop + clientHeight - scrollArrowHeight + _scrollEdges.SCROLL_EDGE_TOLERANCE_PX;
+  for (let i = 0; i < items.length; i += 1) {
+    const item = items[i];
+    if (item && item.offsetTop + item.offsetHeight > visibleBottom) {
+      lastVisibleIndex = Math.max(0, i - 1);
+      break;
+    }
+  }
+  const targetIndex = Math.min(items.length - 1, lastVisibleIndex + 1);
+  const targetItem = items[targetIndex];
+  return targetIndex > lastVisibleIndex && targetItem ? (0, _scrollEdges.normalizeScrollOffset)(targetItem.offsetTop + targetItem.offsetHeight - clientHeight + scrollArrowHeight, maxScrollTop) : maxScrollTop;
+}

package/select/trigger/SelectTrigger.js

@@ -50,6 +50,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/select/value/SelectValue.js

@@ -28,6 +28,7 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
     render,
     children: childrenProp,
     placeholder,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/separator/Separator.js

@@ -19,6 +19,7 @@ const Separator = exports.Separator = /*#__PURE__*/React.forwardRef(function Sep
     className,
     render,
     orientation = 'horizontal',
+    style,
     ...elementProps
   } = componentProps;
   const state = {

package/separator/SeparatorDataAttributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum SeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = "data-orientation",
+}

package/separator/SeparatorDataAttributes.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SeparatorDataAttributes = void 0;
+let SeparatorDataAttributes = exports.SeparatorDataAttributes = /*#__PURE__*/function (SeparatorDataAttributes) {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  SeparatorDataAttributes["orientation"] = "data-orientation";
+  return SeparatorDataAttributes;
+}({});

package/slider/control/SliderControl.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SliderControl = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -76,6 +77,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
   const {
     render: renderProp,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -234,8 +236,15 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     }
   });
   const focusThumb = (0, _useStableCallback.useStableCallback)(thumbIndex => {
-    thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]')?.focus({
-      preventScroll: true
+    const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
+    if (!input) {
+      return;
+    }
+    input.focus({
+      preventScroll: true,
+      // Prevent pointer-driven focus rings in browsers that support this option.
+      // Supported in Chrome from 144+.
+      focusVisible: false
     });
   });
   const handleTouchMove = (0, _useStableCallback.useStableCallback)(nativeEvent => {
@@ -334,11 +343,11 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     if (!control) {
       return () => stopListening();
     }
-    control.addEventListener('touchstart', handleTouchStart, {
+    const unsubscribeTouchStart = (0, _addEventListener.addEventListener)(control, 'touchstart', handleTouchStart, {
       passive: true
     });
     return () => {
-      control.removeEventListener('touchstart', handleTouchStart);
+      unsubscribeTouchStart();
       focusFrame.cancel();
       stopListening();
     };
@@ -355,7 +364,8 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       ['data-base-ui-slider-control']: renderBeforeHydration ? '' : undefined,
       onPointerDown(event) {
         const control = controlRef.current;
-        if (!control || disabled || event.defaultPrevented || !(0, _dom.isElement)(event.target) ||
+        const target = (0, _utils.getTarget)(event.nativeEvent);
+        if (!control || disabled || event.defaultPrevented || !(0, _dom.isElement)(target) ||
         // Only handle left clicks
         event.button !== 0) {
           return;
@@ -398,8 +408,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
         doc.addEventListener('pointerup', handleTouchEnd, {
           once: true
         });
-      },
-      tabIndex: -1
+      }
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.sliderStateAttributesMapping
   });

package/slider/indicator/SliderIndicator.js

@@ -7,18 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SliderIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useOnMount = require("@base-ui/utils/useOnMount");
 var _valueToPercent = require("../../utils/valueToPercent");
+var _useIsHydrating = require("../../utils/useIsHydrating");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
-function getInsetStyles(vertical, range, start, end, renderBeforeHydration, mounted) {
+function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
   const visibility = start === undefined || range && end === undefined ? 'hidden' : undefined;
   const startEdge = vertical ? 'bottom' : 'insetInlineStart';
   const mainSide = vertical ? 'height' : 'width';
   const crossSide = vertical ? 'width' : 'height';
   const styles = {
-    visibility: renderBeforeHydration && !mounted ? 'hidden' : visibility,
+    visibility: renderBeforeHydration && hydrating ? 'hidden' : visibility,
     position: vertical ? 'absolute' : 'relative',
     [crossSide]: 'inherit'
   };
@@ -62,6 +62,7 @@ const SliderIndicator = exports.SliderIndicator = /*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const {
@@ -74,11 +75,10 @@ const SliderIndicator = exports.SliderIndicator = /*#__PURE__*/React.forwardRef(
     state,
     values
   } = (0, _SliderRootContext.useSliderRootContext)();
-  const [isMounted, setIsMounted] = React.useState(false);
-  (0, _useOnMount.useOnMount)(() => setIsMounted(true));
+  const isHydrating = (0, _useIsHydrating.useIsHydrating)();
   const vertical = orientation === 'vertical';
   const range = values.length > 1;
-  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isMounted) : getCenteredStyles(vertical, range, (0, _valueToPercent.valueToPercent)(values[0], min, max), (0, _valueToPercent.valueToPercent)(values[values.length - 1], min, max));
+  const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, (0, _valueToPercent.valueToPercent)(values[0], min, max), (0, _valueToPercent.valueToPercent)(values[values.length - 1], min, max));
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/slider/label/SliderLabel.js

@@ -23,6 +23,7 @@ const SliderLabel = exports.SliderLabel = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/slider/root/SliderRoot.d.ts

@@ -57,7 +57,7 @@ export interface SliderRootState extends FieldRootState {
 }
 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.
+   * The uncontrolled value of the slider when it's initially rendered.
    *
    * To render a controlled slider, use the `value` prop instead.
    */
@@ -97,6 +97,11 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the slider inputs.
+   * Useful when the slider is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The component orientation.
    * @default 'horizontal'

package/slider/root/SliderRoot.js

@@ -21,8 +21,8 @@ var _clamp = require("../../utils/clamp");
 var _areArraysEqual = require("../../utils/areArraysEqual");
 var _utils = require("../../floating-ui-react/utils");
 var _CompositeList = require("../../composite/list/CompositeList");
-var _useField = require("../../field/useField");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
@@ -66,6 +66,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     max = 100,
     min = 0,
     minStepsBetweenValues = 0,
+    form,
     name: nameProp,
     onValueChange: onValueChangeProp,
     onValueCommitted: onValueCommittedProp,
@@ -74,6 +75,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     thumbCollisionBehavior = 'push',
     thumbAlignment = 'center',
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
@@ -139,13 +141,9 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
       setLastUsedThumbIndex(value);
     }
   });
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     id,
-    commit: validation.commit,
-    value: valueUnwrapped,
-    controlRef,
-    name,
-    getValue: () => valueUnwrapped
+    value: valueUnwrapped
   });
   (0, _useValueChanged.useValueChanged)(valueUnwrapped, () => {
     clearErrors(name);
@@ -225,7 +223,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
   }
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(sliderRef.current));
-    if (disabled && activeEl && sliderRef.current?.contains(activeEl)) {
+    if (disabled && (0, _utils.contains)(sliderRef.current, activeEl)) {
       // This is necessary because Firefox and Safari will keep focus
       // on a disabled element:
       // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
@@ -263,6 +261,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     lastUsedThumbIndex,
     lastChangedValueRef,
     lastChangeReasonRef,
+    form,
     locale,
     max,
     min,
@@ -287,7 +286,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     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]);
+  }), [active, controlRef, ariaLabelledby, defaultLabelId, disabled, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangedValueRef, lastChangeReasonRef, form, 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

@@ -48,6 +48,7 @@ export interface SliderRootContext {
    * The minimum steps between values in a range slider.
    */
   minStepsBetweenValues: number;
+  form: string | undefined;
   name: string | undefined;
   /**
    * Function to be called when drag ends and the pointer is released.