@base-ui/react 1.6.0 → 1.7.0

package/slider/thumb/SliderThumb.js

@@ -12,6 +12,7 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _owner = require("@base-ui/utils/owner");
+var _thumb = require("#prehydration/slider/thumb");
 var _clamp = require("../../internals/clamp");
 var _formatNumber = require("../../utils/formatNumber");
 var _mergeProps = require("../../merge-props");
@@ -22,8 +23,9 @@ var _valueToPercent = require("../../utils/valueToPercent");
 var _composite = require("../../internals/composite/composite");
 var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
-var _CSPContext = require("../../internals/csp-context/CSPContext");
+var _PrehydrationScript2 = require("../../internals/PrehydrationScript");
 var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _utils = require("../../floating-ui-react/utils");
 var _element = require("../../floating-ui-react/utils/element");
 var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _getMidpoint = require("../utils/getMidpoint");
@@ -31,24 +33,20 @@ var _getSliderValue = require("../utils/getSliderValue");
 var _roundValueToStep = require("../utils/roundValueToStep");
 var _SliderRootContext = require("../root/SliderRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
-var _SliderThumbDataAttributes = require("./SliderThumbDataAttributes");
-var _prehydrationScript = require("./prehydrationScript.min");
 var _jsxRuntime = require("react/jsx-runtime");
+var _PrehydrationScript;
 const ALL_KEYS = new Set([..._composite.COMPOSITE_KEYS, _composite.PAGE_UP, _composite.PAGE_DOWN]);
 function getDefaultAriaValueText(values, index, format, locale) {
   if (index < 0) {
     return undefined;
   }
   if (values.length === 2) {
-    if (index === 0) {
-      return `${(0, _formatNumber.formatNumber)(values[index], locale, format)} start range`;
-    }
-    return `${(0, _formatNumber.formatNumber)(values[index], locale, format)} end range`;
+    return `${(0, _formatNumber.formatNumber)(values[index], locale, format)} ${index === 0 ? 'start' : 'end'} range`;
   }
   return format ? (0, _formatNumber.formatNumber)(values[index], locale, format) : undefined;
 }
 function getNewValue(thumbValue, increment, direction, min, max) {
-  const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
+  const value = thumbValue + increment * direction;
   const roundedValue = Number(value.toFixed(Math.max((0, _roundValueToStep.getDecimalPrecision)(thumbValue), (0, _roundValueToStep.getDecimalPrecision)(increment), (0, _roundValueToStep.getDecimalPrecision)(min))));
   return (0, _clamp.clamp)(roundedValue, min, max);
 }
@@ -81,9 +79,6 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     style,
     ...elementProps
   } = componentProps;
-  const {
-    nonce
-  } = (0, _CSPContext.useCSPContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const {
     active: activeIndex,
@@ -91,7 +86,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     controlRef,
     disabled: contextDisabled,
     validation,
-    formatOptionsRef,
+    format,
     handleInputChange,
     inset,
     labelId,
@@ -103,7 +98,6 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     form,
     name,
     orientation,
-    pressedInputRef,
     pressedThumbCenterOffsetRef,
     pressedThumbIndexRef,
     renderBeforeHydration,
@@ -111,6 +105,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     setIndicatorPosition,
     state,
     step,
+    thumbRefs,
     values: sliderValues
   } = (0, _SliderRootContext.useSliderRootContext)();
   const direction = (0, _DirectionContext.useDirection)();
@@ -126,6 +121,22 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
   const thumbRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const restoringFocusVisibleRef = React.useRef(false);
+
+  // Attached to the `input` (not the thumb wrapper) so `event.currentTarget` is the
+  // input, matching `onKeyDown`. The synthetic blur/focus dispatched while restoring
+  // `:focus-visible` is internal and must not be forwarded to the user's handlers.
+  const handleFocusProp = (0, _useStableCallback.useStableCallback)(event => {
+    if (restoringFocusVisibleRef.current) {
+      return;
+    }
+    onFocusProp?.(event);
+  });
+  const handleBlurProp = (0, _useStableCallback.useStableCallback)(event => {
+    if (restoringFocusVisibleRef.current) {
+      return;
+    }
+    onBlurProp?.(event);
+  });
   const defaultInputId = (0, _useBaseUiId.useBaseUiId)();
   const labelableId = (0, _useLabelableId.useLabelableId)();
   const inputId = range ? defaultInputId : labelableId;
@@ -210,27 +221,23 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     zIndex = 1;
   }
   let thumbStyle;
-  if (inset) {
-    thumbStyle = {
-      ['--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
-    };
+  if (!inset && !Number.isFinite(thumbValuePercent)) {
+    thumbStyle = _visuallyHidden.visuallyHidden;
   } else {
-    thumbStyle = !Number.isFinite(thumbValuePercent) ? _visuallyHidden.visuallyHidden : {
+    thumbStyle = {
       position: 'absolute',
-      [startEdge]: `${thumbValuePercent}%`,
+      [startEdge]: inset ? 'var(--position)' : `${thumbValuePercent}%`,
       [crossOffsetProperty]: '50%',
       translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
-      zIndex
+      zIndex,
+      ...(inset && {
+        ['--position']: `${positionPercent ?? 0}%`,
+        visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined
+      })
     };
   }
   let cssWritingMode;
-  if (orientation === 'vertical') {
+  if (vertical) {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
   }
   const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
@@ -240,7 +247,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     'aria-describedby': ariaDescribedByProp,
     'aria-orientation': orientation,
     'aria-valuenow': thumbValue,
-    'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp((0, _formatNumber.formatNumber)(thumbValue, locale, formatOptionsRef.current ?? undefined), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? undefined, locale),
+    'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp((0, _formatNumber.formatNumber)(thumbValue, locale, format), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, format, locale),
     disabled,
     form,
     id: inputId,
@@ -264,10 +271,13 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
         event.stopPropagation();
         return;
       }
-      if (!thumbRef.current) {
+      setActive(-1);
+
+      // Keep field-level blur logic from running while focus moves to another thumb
+      // of the same slider, so validation doesn't commit mid-interaction.
+      if (thumbRefs.current.some(thumb => (0, _utils.contains)(thumb, event.relatedTarget))) {
         return;
       }
-      setActive(-1);
       setTouched(true);
       setFocused(false);
       if (validationMode === 'onBlur') {
@@ -285,41 +295,42 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
         event.stopPropagation();
       }
       let newValue = null;
+      let direction = 0;
+      let increment = event.shiftKey ? largeStep : step;
       const roundedValue = (0, _roundValueToStep.roundValueToStep)(thumbValue, step, min);
       switch (event.key) {
         case _composite.ARROW_UP:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
+          direction = 1;
           break;
         case _composite.ARROW_RIGHT:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
+          direction = rtl ? -1 : 1;
           break;
         case _composite.ARROW_DOWN:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
+          direction = -1;
           break;
         case _composite.ARROW_LEFT:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
+          direction = rtl ? 1 : -1;
           break;
         case _composite.PAGE_UP:
-          newValue = getNewValue(roundedValue, largeStep, 1, min, max);
+          increment = largeStep;
+          direction = 1;
           break;
         case _composite.PAGE_DOWN:
-          newValue = getNewValue(roundedValue, largeStep, -1, min, max);
+          increment = largeStep;
+          direction = -1;
           break;
         case _composite.END:
-          newValue = max;
-          if (range) {
-            newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
-          }
+          newValue = range && Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
           break;
         case _composite.HOME:
-          newValue = min;
-          if (range) {
-            newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
-          }
+          newValue = range && Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
           break;
         default:
           break;
       }
+      if (direction !== 0) {
+        newValue = getNewValue(roundedValue, increment, direction, min, max);
+      }
       if (newValue !== null) {
         const input = event.currentTarget;
         if (!(0, _element.matchesFocusVisible)(input)) {
@@ -344,10 +355,12 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
       height: '100%',
       writingMode: cssWritingMode
     },
-    tabIndex: tabIndexProp ?? undefined,
+    tabIndex: tabIndexProp,
     type: 'range',
     value: thumbValue ?? ''
   }, props => validation.getValidationProps(disabled, props), {
+    onFocus: handleFocusProp,
+    onBlur: handleBlurProp,
     onKeyDown: onKeyDownProp
   });
   const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRef, validation.inputRef, inputRefProp);
@@ -355,43 +368,25 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     state,
     ref: [forwardedRef, listItemRef, thumbRef],
     props: [{
-      [_SliderThumbDataAttributes.SliderThumbDataAttributes.index]: index,
+      ['data-index']: index,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [childrenProp, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           ref: mergedInputRef,
           ...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__*/(0, _jsxRuntime.jsx)("script", {
-          nonce: nonce
-          // eslint-disable-next-line react/no-danger
-          ,
-          dangerouslySetInnerHTML: {
-            __html: _prehydrationScript.script
-          },
-          suppressHydrationWarning: true
-        })]
+        }), inset && last && renderBeforeHydration && (_PrehydrationScript || (_PrehydrationScript = /*#__PURE__*/(0, _jsxRuntime.jsx)(_PrehydrationScript2.PrehydrationScript, {
+          script: _thumb.script
+        })))]
       }),
       id,
-      onBlur: onBlurProp,
-      onFocus: onFocusProp,
       onPointerDown(event) {
         // Keep disabled thumbs from writing transient pointer state.
         if (disabled) {
           return;
         }
         pressedThumbIndexRef.current = index;
-        if (thumbRef.current != null) {
-          const axis = orientation === 'horizontal' ? 'x' : 'y';
-          const midpoint = (0, _getMidpoint.getMidpoint)(thumbRef.current);
-          const offset = (orientation === 'horizontal' ? event.clientX : event.clientY) - midpoint[axis];
-          pressedThumbCenterOffsetRef.current = offset;
-        }
-        if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
-          pressedInputRef.current = inputRef.current;
-        }
+        const midpoint = (0, _getMidpoint.getMidpoint)(event.currentTarget, vertical);
+        pressedThumbCenterOffsetRef.current = (vertical ? event.clientY : event.clientX) - midpoint;
       },
       style: thumbStyle,
       suppressHydrationWarning: renderBeforeHydration || undefined

package/slider/thumb/SliderThumb.mjs

@@ -1,11 +1,13 @@
 'use client';
 
+var _PrehydrationScript;
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { ownerWindow } from '@base-ui/utils/owner';
+import { script as prehydrationScript } from '#prehydration/slider/thumb';
 import { clamp } from "../../internals/clamp.mjs";
 import { formatNumber } from "../../utils/formatNumber.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
@@ -16,8 +18,9 @@ import { valueToPercent } from "../../utils/valueToPercent.mjs";
 import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT, HOME, END, COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN } from "../../internals/composite/composite.mjs";
 import { useCompositeListItem } from "../../internals/composite/list/useCompositeListItem.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
-import { useCSPContext } from "../../internals/csp-context/CSPContext.mjs";
+import { PrehydrationScript } from "../../internals/PrehydrationScript.mjs";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
+import { contains } from "../../floating-ui-react/utils.mjs";
 import { matchesFocusVisible } from "../../floating-ui-react/utils/element.mjs";
 import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
 import { getMidpoint } from "../utils/getMidpoint.mjs";
@@ -25,8 +28,6 @@ import { getSliderValue } from "../utils/getSliderValue.mjs";
 import { getDecimalPrecision, roundValueToStep } from "../utils/roundValueToStep.mjs";
 import { useSliderRootContext } from "../root/SliderRootContext.mjs";
 import { sliderStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
-import { SliderThumbDataAttributes } from "./SliderThumbDataAttributes.mjs";
-import { script as prehydrationScript } from "./prehydrationScript.min.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ALL_KEYS = new Set([...COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN]);
 function getDefaultAriaValueText(values, index, format, locale) {
@@ -34,15 +35,12 @@ function getDefaultAriaValueText(values, index, format, locale) {
     return undefined;
   }
   if (values.length === 2) {
-    if (index === 0) {
-      return `${formatNumber(values[index], locale, format)} start range`;
-    }
-    return `${formatNumber(values[index], locale, format)} end range`;
+    return `${formatNumber(values[index], locale, format)} ${index === 0 ? 'start' : 'end'} range`;
   }
   return format ? formatNumber(values[index], locale, format) : undefined;
 }
 function getNewValue(thumbValue, increment, direction, min, max) {
-  const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
+  const value = thumbValue + increment * direction;
   const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
   return clamp(roundedValue, min, max);
 }
@@ -75,9 +73,6 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     style,
     ...elementProps
   } = componentProps;
-  const {
-    nonce
-  } = useCSPContext();
   const id = useBaseUiId(idProp);
   const {
     active: activeIndex,
@@ -85,7 +80,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     controlRef,
     disabled: contextDisabled,
     validation,
-    formatOptionsRef,
+    format,
     handleInputChange,
     inset,
     labelId,
@@ -97,7 +92,6 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     form,
     name,
     orientation,
-    pressedInputRef,
     pressedThumbCenterOffsetRef,
     pressedThumbIndexRef,
     renderBeforeHydration,
@@ -105,6 +99,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     setIndicatorPosition,
     state,
     step,
+    thumbRefs,
     values: sliderValues
   } = useSliderRootContext();
   const direction = useDirection();
@@ -120,6 +115,22 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
   const thumbRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const restoringFocusVisibleRef = React.useRef(false);
+
+  // Attached to the `input` (not the thumb wrapper) so `event.currentTarget` is the
+  // input, matching `onKeyDown`. The synthetic blur/focus dispatched while restoring
+  // `:focus-visible` is internal and must not be forwarded to the user's handlers.
+  const handleFocusProp = useStableCallback(event => {
+    if (restoringFocusVisibleRef.current) {
+      return;
+    }
+    onFocusProp?.(event);
+  });
+  const handleBlurProp = useStableCallback(event => {
+    if (restoringFocusVisibleRef.current) {
+      return;
+    }
+    onBlurProp?.(event);
+  });
   const defaultInputId = useBaseUiId();
   const labelableId = useLabelableId();
   const inputId = range ? defaultInputId : labelableId;
@@ -204,27 +215,23 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     zIndex = 1;
   }
   let thumbStyle;
-  if (inset) {
-    thumbStyle = {
-      ['--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
-    };
+  if (!inset && !Number.isFinite(thumbValuePercent)) {
+    thumbStyle = visuallyHidden;
   } else {
-    thumbStyle = !Number.isFinite(thumbValuePercent) ? visuallyHidden : {
+    thumbStyle = {
       position: 'absolute',
-      [startEdge]: `${thumbValuePercent}%`,
+      [startEdge]: inset ? 'var(--position)' : `${thumbValuePercent}%`,
       [crossOffsetProperty]: '50%',
       translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
-      zIndex
+      zIndex,
+      ...(inset && {
+        ['--position']: `${positionPercent ?? 0}%`,
+        visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined
+      })
     };
   }
   let cssWritingMode;
-  if (orientation === 'vertical') {
+  if (vertical) {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
   }
   const ariaLabel = typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
@@ -234,7 +241,7 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     'aria-describedby': ariaDescribedByProp,
     'aria-orientation': orientation,
     'aria-valuenow': thumbValue,
-    'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? undefined), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? undefined, locale),
+    'aria-valuetext': typeof getAriaValueTextProp === 'function' ? getAriaValueTextProp(formatNumber(thumbValue, locale, format), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, format, locale),
     disabled,
     form,
     id: inputId,
@@ -258,10 +265,13 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
         event.stopPropagation();
         return;
       }
-      if (!thumbRef.current) {
+      setActive(-1);
+
+      // Keep field-level blur logic from running while focus moves to another thumb
+      // of the same slider, so validation doesn't commit mid-interaction.
+      if (thumbRefs.current.some(thumb => contains(thumb, event.relatedTarget))) {
         return;
       }
-      setActive(-1);
       setTouched(true);
       setFocused(false);
       if (validationMode === 'onBlur') {
@@ -279,41 +289,42 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
         event.stopPropagation();
       }
       let newValue = null;
+      let direction = 0;
+      let increment = event.shiftKey ? largeStep : step;
       const roundedValue = roundValueToStep(thumbValue, step, min);
       switch (event.key) {
         case ARROW_UP:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
+          direction = 1;
           break;
         case ARROW_RIGHT:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
+          direction = rtl ? -1 : 1;
           break;
         case ARROW_DOWN:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
+          direction = -1;
           break;
         case ARROW_LEFT:
-          newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
+          direction = rtl ? 1 : -1;
           break;
         case PAGE_UP:
-          newValue = getNewValue(roundedValue, largeStep, 1, min, max);
+          increment = largeStep;
+          direction = 1;
           break;
         case PAGE_DOWN:
-          newValue = getNewValue(roundedValue, largeStep, -1, min, max);
+          increment = largeStep;
+          direction = -1;
           break;
         case END:
-          newValue = max;
-          if (range) {
-            newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
-          }
+          newValue = range && Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
           break;
         case HOME:
-          newValue = min;
-          if (range) {
-            newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
-          }
+          newValue = range && Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
           break;
         default:
           break;
       }
+      if (direction !== 0) {
+        newValue = getNewValue(roundedValue, increment, direction, min, max);
+      }
       if (newValue !== null) {
         const input = event.currentTarget;
         if (!matchesFocusVisible(input)) {
@@ -338,10 +349,12 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
       height: '100%',
       writingMode: cssWritingMode
     },
-    tabIndex: tabIndexProp ?? undefined,
+    tabIndex: tabIndexProp,
     type: 'range',
     value: thumbValue ?? ''
   }, props => validation.getValidationProps(disabled, props), {
+    onFocus: handleFocusProp,
+    onBlur: handleBlurProp,
     onKeyDown: onKeyDownProp
   });
   const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
@@ -349,43 +362,25 @@ export const SliderThumb = /*#__PURE__*/React.forwardRef(function SliderThumb(co
     state,
     ref: [forwardedRef, listItemRef, thumbRef],
     props: [{
-      [SliderThumbDataAttributes.index]: index,
+      ['data-index']: index,
       children: /*#__PURE__*/_jsxs(React.Fragment, {
         children: [childrenProp, /*#__PURE__*/_jsx("input", {
           ref: mergedInputRef,
           ...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", {
-          nonce: nonce
-          // eslint-disable-next-line react/no-danger
-          ,
-          dangerouslySetInnerHTML: {
-            __html: prehydrationScript
-          },
-          suppressHydrationWarning: true
-        })]
+        }), inset && last && renderBeforeHydration && (_PrehydrationScript || (_PrehydrationScript = /*#__PURE__*/_jsx(PrehydrationScript, {
+          script: prehydrationScript
+        })))]
       }),
       id,
-      onBlur: onBlurProp,
-      onFocus: onFocusProp,
       onPointerDown(event) {
         // Keep disabled thumbs from writing transient pointer state.
         if (disabled) {
           return;
         }
         pressedThumbIndexRef.current = index;
-        if (thumbRef.current != null) {
-          const axis = orientation === 'horizontal' ? 'x' : 'y';
-          const midpoint = getMidpoint(thumbRef.current);
-          const offset = (orientation === 'horizontal' ? event.clientX : event.clientY) - midpoint[axis];
-          pressedThumbCenterOffsetRef.current = offset;
-        }
-        if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
-          pressedInputRef.current = inputRef.current;
-        }
+        const midpoint = getMidpoint(event.currentTarget, vertical);
+        pressedThumbCenterOffsetRef.current = (vertical ? event.clientY : event.clientX) - midpoint;
       },
       style: thumbStyle,
       suppressHydrationWarning: renderBeforeHydration || undefined

package/slider/utils/getMidpoint.d.mts

@@ -1,2 +1 @@
-import type { Coords } from "../../floating-ui-react/types.mjs";
-export declare function getMidpoint(element: HTMLElement): Coords;
+export declare function getMidpoint(element: HTMLElement, vertical: boolean): number;

package/slider/utils/getMidpoint.d.ts

@@ -1,2 +1 @@
-import type { Coords } from "../../floating-ui-react/types.js";
-export declare function getMidpoint(element: HTMLElement): Coords;
+export declare function getMidpoint(element: HTMLElement, vertical: boolean): number;

package/slider/utils/getMidpoint.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMidpoint = getMidpoint;
-function getMidpoint(element) {
+function getMidpoint(element, vertical) {
   const rect = element.getBoundingClientRect();
-  return {
-    x: (rect.left + rect.right) / 2,
-    y: (rect.top + rect.bottom) / 2
-  };
+  return vertical ? (rect.top + rect.bottom) / 2 : (rect.left + rect.right) / 2;
 }

package/slider/utils/getMidpoint.mjs

@@ -1,7 +1,4 @@
-export function getMidpoint(element) {
+export function getMidpoint(element, vertical) {
   const rect = element.getBoundingClientRect();
-  return {
-    x: (rect.left + rect.right) / 2,
-    y: (rect.top + rect.bottom) / 2
-  };
+  return vertical ? (rect.top + rect.bottom) / 2 : (rect.left + rect.right) / 2;
 }

package/slider/utils/getPushedThumbValues.d.mts

@@ -1,25 +1,8 @@
-interface GetPushedThumbValuesParams {
-  values: readonly number[];
-  index: number;
-  nextValue: number;
-  min: number;
-  max: number;
-  step: number;
-  minStepsBetweenValues: number;
-  initialValues?: readonly number[] | undefined;
-}
 /**
  * Returns a new array of slider values where attempting to move the thumb at `index`
  * beyond its neighbours "pushes" them while respecting `minStepsBetweenValues`.
+ *
+ * Positional arguments are deliberate: property names of an options object don't
+ * minify, so passing them positionally keeps this internal helper smaller in the bundle.
  */
-export declare function getPushedThumbValues({
-  values,
-  index,
-  nextValue,
-  min,
-  max,
-  step,
-  minStepsBetweenValues,
-  initialValues
-}: GetPushedThumbValuesParams): number[];
-export {};
+export declare function getPushedThumbValues(values: readonly number[], index: number, nextValue: number, min: number, max: number, step: number, minStepsBetweenValues: number, initialValues?: readonly number[] | undefined): number[];