solid-baseui 0.1.0-alpha.0

package/dist/lib/server/slider/index.js

@@ -0,0 +1,1333 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { A as trackPress, b as keyboard, c as drag, h as inputChange, w as none } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { fieldStateAttributesMapping } from "../internals/field-constants.js";
+import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { n as useFormContext } from "../FormContext-pvESt85v.js";
+import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
+import { mergeStyles } from "../internals/mergeStyles.js";
+import { Dynamic, escape, isServer, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, onSettled, sharedConfig, untrack, useContext } from "solid-js";
+//#region src/slider/stateAttributesMapping.ts
+var omitStateAttribute = () => null;
+var sliderStateAttributesMapping = {
+	activeThumbIndex: omitStateAttribute,
+	max: omitStateAttribute,
+	min: omitStateAttribute,
+	minStepsBetweenValues: omitStateAttribute,
+	step: omitStateAttribute,
+	values: omitStateAttribute,
+	...fieldStateAttributesMapping
+};
+//#endregion
+//#region src/slider/utils/dom.ts
+function getMidpoint(element, vertical) {
+	const rect = element.getBoundingClientRect();
+	return vertical ? (rect.top + rect.bottom) / 2 : (rect.left + rect.right) / 2;
+}
+function getEventElement(event) {
+	const target = event.composedPath()[0] ?? event.target;
+	if (!target || typeof target.nodeType !== "number") return null;
+	const node = target;
+	return node.nodeType === 1 ? node : node.parentElement;
+}
+function contains(container, target) {
+	if (!container || !target || typeof target.nodeType !== "number") return false;
+	let node = target;
+	while (node) {
+		if (container.contains(node)) return true;
+		const root = node.getRootNode();
+		node = root.nodeType === 11 && "host" in root ? root.host : null;
+	}
+	return false;
+}
+//#endregion
+//#region src/slider/utils/math.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function areValuesEqual(first, second) {
+	if (first === second) return true;
+	if (!Array.isArray(first) || !Array.isArray(second) || first.length !== second.length) return false;
+	return first.every((value, index) => value === second[index]);
+}
+function valueToPercent(value, min, max) {
+	return (value - min) * 100 / (max - min);
+}
+function formatNumber(value, locale, options) {
+	return new Intl.NumberFormat(locale, options).format(value);
+}
+//#endregion
+//#region src/slider/utils/getSliderValue.ts
+function getSliderValue(valueInput, index, min, max, range, values) {
+	const clamped = clamp(valueInput, min, max);
+	if (!range) return clamped;
+	const output = values.slice();
+	output[index] = clamp(clamped, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity);
+	return output.sort((first, second) => first - second);
+}
+//#endregion
+//#region src/slider/utils/validateMinimumDistance.ts
+function validateMinimumDistance(values, step, minStepsBetweenValues) {
+	if (!Array.isArray(values)) return true;
+	const minimumDistance = step * minStepsBetweenValues;
+	for (let index = 0; index < values.length - 1; index += 1) if (!(Math.abs(values[index] - values[index + 1]) >= minimumDistance)) return false;
+	return true;
+}
+//#endregion
+//#region src/slider/root/SliderRootContext.ts
+var MISSING_CONTEXT = Symbol("SliderRootContext");
+var SliderRootContext = createContext(MISSING_CONTEXT);
+function useSliderRootContext() {
+	const context = useContext(SliderRootContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>.");
+	return context;
+}
+//#endregion
+//#region src/slider/root/SliderRoot.tsx
+/** Groups all parts of the slider. */
+function SliderRoot(props) {
+	const field = useFieldRootContext(true);
+	const form = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const fieldControlSource = Symbol("Slider");
+	const labelControlSource = Symbol("SliderControl");
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const generatedInputId = `base-ui-${createUniqueId()}`;
+	const inheritedControlId = untrack(labelable.controlId);
+	const singleInputId = typeof inheritedControlId === "string" ? inheritedControlId : generatedInputId;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const initialValue = untrack(() => internalProps.defaultValue ?? internalProps.min ?? 0);
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(() => initialValue);
+	const [rootElement, setRootElement] = createSignal();
+	const [controlElement, setControlElement] = createSignal();
+	const [active, setActiveState] = createSignal(-1);
+	const [lastUsedThumbIndex, setLastUsedThumbIndex] = createSignal(-1);
+	const [dragging, setDragging] = createSignal(false);
+	const [localLabelId, setLocalLabelId] = createSignal();
+	const [indicatorPosition, setIndicatorPositionState] = createSignal([void 0, void 0]);
+	const [thumbVersion, setThumbVersion] = createSignal(0, { ownedWrite: true });
+	const registrations = [];
+	let registrationOrder = 0;
+	const interaction = {
+		pressedThumbCenterOffset: null,
+		pressedThumbIndex: -1,
+		pressedValues: null,
+		lastChangeReason: none
+	};
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "class", "defaultValue", "disabled", "format", "form", "id", "largeStep", "locale", "max", "min", "minStepsBetweenValues", "name", "onValueChange", "onValueCommitted", "orientation", "ref", "step", "style", "thumbAlignment", "thumbCollisionBehavior", "value");
+	const id = createMemo(() => internalProps.id ?? generatedId);
+	const min = createMemo(() => internalProps.min ?? 0);
+	const max = createMemo(() => internalProps.max ?? 100);
+	const step = createMemo(() => internalProps.step ?? 1);
+	const largeStep = createMemo(() => internalProps.largeStep ?? 10);
+	const minStepsBetweenValues = createMemo(() => internalProps.minStepsBetweenValues ?? 0);
+	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
+	const thumbAlignment = createMemo(() => internalProps.thumbAlignment ?? "center");
+	const thumbCollisionBehavior = createMemo(() => internalProps.thumbCollisionBehavior ?? "push");
+	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
+	const name = createMemo(() => field.name() ?? internalProps.name);
+	const rawValue = createMemo(() => controlled ? internalProps.value : uncontrolledValue());
+	const values = createMemo(() => {
+		const current = rawValue();
+		if (!Array.isArray(current)) return [clamp(current, min(), max())];
+		return current.map((value) => clamp(value, min(), max())).sort((a, b) => a - b);
+	});
+	const range = createMemo(() => Array.isArray(rawValue()));
+	const fieldValue = createMemo(() => range() ? values() : values()[0]);
+	const rootLabelId = createMemo(() => `${id()}-label`);
+	const resolvedLabelId = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? localLabelId());
+	const state = createMemo(() => ({
+		...field.state(),
+		activeThumbIndex: active(),
+		disabled: disabled(),
+		dragging: dragging(),
+		max: max(),
+		min: min(),
+		minStepsBetweenValues: minStepsBetweenValues(),
+		orientation: orientation(),
+		step: step(),
+		values: values()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
+	const orderedThumbs = createMemo(() => {
+		thumbVersion();
+		return registrations.slice().sort(compareThumbRegistrations);
+	});
+	let previousFieldValue = cloneValue(untrack(fieldValue));
+	const fieldRegistration = {
+		id: generatedId,
+		name: internalProps.name,
+		value: fieldValue,
+		getControl: () => orderedThumbs().find((thumb) => !thumb.input()?.disabled)?.input() ?? controlElement() ?? rootElement() ?? null
+	};
+	function setActive(index) {
+		setActiveState(index);
+		if (index !== -1) setLastUsedThumbIndex(index);
+	}
+	function registerThumb(registration) {
+		registration.order = registrationOrder;
+		registrationOrder += 1;
+		registrations.push(registration);
+		setThumbVersion((version) => version + 1);
+		return () => {
+			const index = registrations.indexOf(registration);
+			if (index !== -1) {
+				registrations.splice(index, 1);
+				setThumbVersion((version) => version + 1);
+			}
+		};
+	}
+	function setIndicatorPosition(index, value) {
+		setIndicatorPositionState((current) => {
+			if (current[index] === value) return current;
+			return index === 0 ? [value, current[1]] : [current[0], value];
+		});
+	}
+	function setValue(newValue, details) {
+		if (Number.isNaN(newValue) || areValuesEqual(newValue, untrack(rawValue))) return false;
+		const nativeEvent = details.event;
+		const clonedEvent = cloneEvent(nativeEvent);
+		Object.defineProperty(clonedEvent, "target", {
+			configurable: true,
+			writable: true,
+			value: {
+				value: newValue,
+				name: untrack(name)
+			}
+		});
+		details.event = clonedEvent;
+		internalProps.onValueChange?.(newValue, details);
+		if (controlled) flush();
+		if (details.isCanceled) return false;
+		interaction.lastChangeReason = details.reason;
+		if (!controlled) setUncontrolledValue(() => newValue);
+		return true;
+	}
+	function onValueCommitted(newValue, details) {
+		internalProps.onValueCommitted?.(newValue, details);
+	}
+	function handleInputChange(valueInput, index, event) {
+		const currentValues = untrack(values);
+		const newValue = getSliderValue(valueInput, index, untrack(min), untrack(max), untrack(range), currentValues);
+		if (!validateMinimumDistance(newValue, untrack(step), untrack(minStepsBetweenValues))) {
+			queueMicrotask(syncInputs);
+			return;
+		}
+		const reason = "key" in event ? keyboard : inputChange;
+		const applied = setValue(newValue, createChangeEventDetails(reason, event, void 0, { activeThumbIndex: index }));
+		field.setTouched(true);
+		if (applied) onValueCommitted(newValue, createGenericEventDetails(reason, event));
+		queueMicrotask(syncInputs);
+	}
+	function syncInputs() {
+		const currentValues = untrack(values);
+		for (const thumb of untrack(orderedThumbs)) {
+			const input = thumb.input();
+			const value = currentValues[thumb.index()];
+			if (input && value !== void 0 && input.valueAsNumber !== value) input.value = String(value);
+		}
+	}
+	const context = {
+		active,
+		controlElement,
+		disabled,
+		dragging,
+		fieldControlSource,
+		format: () => internalProps.format,
+		form: () => internalProps.form,
+		handleInputChange,
+		indicatorPosition,
+		inset: () => thumbAlignment() !== "center",
+		interaction,
+		labelId: resolvedLabelId,
+		largeStep,
+		lastUsedThumbIndex,
+		locale: () => internalProps.locale,
+		max,
+		min,
+		minStepsBetweenValues,
+		name,
+		onValueCommitted,
+		orientation,
+		orderedThumbs,
+		range,
+		registerThumb,
+		renderBeforeHydration: () => thumbAlignment() === "edge",
+		rootId: id,
+		rootLabelId,
+		setActive,
+		setControlElement,
+		setDragging,
+		setIndicatorPosition,
+		setLocalLabelId,
+		setValue,
+		singleInputId,
+		state,
+		step,
+		syncInputs,
+		thumbCollisionBehavior,
+		values
+	};
+	createEffect(() => ({
+		disabled: disabled(),
+		element: rootElement(),
+		id: id(),
+		name: internalProps.name
+	}), (current) => {
+		fieldRegistration.id = current.id;
+		fieldRegistration.name = current.name;
+		field.registerFieldControl(fieldControlSource, current.disabled || !current.element ? void 0 : fieldRegistration);
+	});
+	createEffect(fieldValue, (currentValue) => {
+		if (areValuesEqual(currentValue, previousFieldValue)) return;
+		previousFieldValue = cloneValue(currentValue);
+		untrack(() => {
+			form.clearError(name());
+			field.validation.change(currentValue);
+			field.setDirty(!areValuesEqual(currentValue, field.validityData().initialValue));
+		});
+	});
+	createEffect(() => ({
+		disabled: disabled(),
+		element: rootElement()
+	}), (current) => {
+		if (!current.disabled || !current.element) return;
+		const activeElement = getDeepActiveElement$1(current.element.ownerDocument);
+		if (activeElement && contains(current.element, activeElement)) activeElement.blur();
+		setActive(-1);
+		setDragging(false);
+	});
+	createEffect(() => ({
+		range: range(),
+		inputId: orderedThumbs()[0]?.input()?.id
+	}), (current) => {
+		labelable.registerControlId(labelControlSource, !current.range ? current.inputId : void 0);
+	});
+	createEffect(rootElement, (element) => {
+		const Observer = element?.ownerDocument.defaultView?.MutationObserver;
+		if (!element || !Observer) return;
+		const observer = new Observer(() => setThumbVersion((version) => version + 1));
+		observer.observe(element, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	});
+	createEffect(() => ({
+		max: max(),
+		min: min()
+	}), (bounds) => {});
+	onCleanup(() => {
+		field.registerFieldControl(fieldControlSource, void 0);
+		labelable.registerControlId(labelControlSource, void 0);
+	});
+	return SliderRootContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => setRootElement(element)), internalProps.ref],
+				get id() {
+					return id();
+				},
+				role: "group",
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				get ["aria-labelledby"]() {
+					return resolvedLabelId();
+				},
+				get ["aria-describedby"]() {
+					return ariaDescribedBy();
+				},
+				get ["aria-invalid"]() {
+					return state().valid === false && !disabled() ? "true" : void 0;
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+function compareThumbRegistrations(first, second) {
+	const firstElement = first.element();
+	const secondElement = second.element();
+	if (firstElement && secondElement && firstElement !== secondElement) {
+		const position = firstElement.compareDocumentPosition(secondElement);
+		if (position & 4) return -1;
+		if (position & 2) return 1;
+	}
+	return first.order - second.order;
+}
+function getDeepActiveElement$1(document) {
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+function cloneValue(value) {
+	return Array.isArray(value) ? value.slice() : value;
+}
+function cloneEvent(event) {
+	const EventConstructor = event.constructor;
+	try {
+		return new EventConstructor(event.type, event);
+	} catch {
+		return new Event(event.type, {
+			bubbles: event.bubbles,
+			cancelable: event.cancelable,
+			composed: event.composed
+		});
+	}
+}
+//#endregion
+//#region src/slider/label/SliderLabel.tsx
+/** An accessible label automatically associated with the slider thumbs. */
+function SliderLabel(props) {
+	const context = useSliderRootContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "id", "onClick", "onPointerDown", "ref", "style");
+	const state = createMemo(() => context.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	function focusControl(event) {
+		const target = event.composedPath()[0];
+		if (target instanceof Element && target.closest("button,input,select,textarea")) return;
+		if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+		const label = event.currentTarget;
+		const controlId = labelable.controlId();
+		const registeredControl = controlId ? label.ownerDocument.getElementById(controlId) : null;
+		if (registeredControl instanceof HTMLElement) {
+			registeredControl.focus({ focusVisible: true });
+			return;
+		}
+		const inputs = context.controlElement()?.querySelectorAll("input[type=\"range\"]");
+		if (inputs?.length === 1) inputs[0]?.focus({ focusVisible: true });
+	}
+	function preventPointerFocus(event) {
+		event.preventDefault();
+	}
+	const onClick = composeEventHandlers(() => internalProps.onClick, () => focusControl);
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => preventPointerFocus);
+	createEffect(context.rootLabelId, (id) => {
+		context.setLocalLabelId(id);
+		const unregister = labelable.registerLabelId(id);
+		return () => {
+			unregister();
+			if (untrack(context.labelId) === id) context.setLocalLabelId(void 0);
+		};
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		get id() {
+			return context.rootLabelId();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onPointerDown
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/slider/value/SliderValue.tsx
+/** Displays the formatted slider value. */
+function SliderValue(props) {
+	const context = useSliderRootContext();
+	const internalProps = props;
+	const others = omit(props, "aria-live", "as", "children", "class", "ref", "style");
+	const state = createMemo(() => context.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	const formattedValues = createMemo(() => context.values().map((value) => formatNumber(value, context.locale(), context.format())));
+	const content = createMemo(() => typeof internalProps.children === "function" ? internalProps.children(formattedValues(), context.values()) : formattedValues().join(" – "));
+	const outputFor = createMemo(() => context.orderedThumbs().map((thumb) => thumb.inputId()).join(" ").trim() || void 0);
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "output";
+		},
+		ref: [internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get ["aria-live"]() {
+			return internalProps["aria-live"] ?? "off";
+		},
+		get ["for"]() {
+			return outputFor();
+		}
+	}, stateAttributes, others, { get children() {
+		return content();
+	} }));
+}
+//#endregion
+//#region src/slider/utils/getPushedThumbValues.ts
+function getPushedThumbValues(values, index, nextValue, min, max, step, minStepsBetweenValues, initialValues) {
+	const nextValues = values.slice();
+	const minimumDistance = step * minStepsBetweenValues;
+	const lastIndex = nextValues.length - 1;
+	const baseline = initialValues ?? values;
+	nextValues[index] = clamp(nextValue, min + index * minimumDistance, max - (lastIndex - index) * minimumDistance);
+	for (let current = index + 1; current <= lastIndex; current += 1) {
+		const minimum = nextValues[current - 1] + minimumDistance;
+		const maximum = max - (lastIndex - current) * minimumDistance;
+		let candidate = Math.max(nextValues[current], minimum);
+		if (baseline[current] < candidate) candidate = Math.max(baseline[current], minimum);
+		nextValues[current] = clamp(candidate, minimum, maximum);
+	}
+	for (let current = index - 1; current >= 0; current -= 1) {
+		const maximum = nextValues[current + 1] - minimumDistance;
+		const minimum = min + current * minimumDistance;
+		let candidate = Math.min(nextValues[current], maximum);
+		if (baseline[current] > candidate) candidate = Math.min(baseline[current], maximum);
+		nextValues[current] = clamp(candidate, minimum, maximum);
+	}
+	return nextValues.map((value) => Number(value.toFixed(12)));
+}
+//#endregion
+//#region src/slider/utils/resolveThumbCollision.ts
+function resolveThumbCollision(behavior, values, currentValues, initialValues, pressedIndex, nextValue, min, max, step, minStepsBetweenValues) {
+	const activeValues = currentValues ?? values;
+	const baselineValues = initialValues ?? values;
+	if (activeValues.length <= 1) return {
+		value: nextValue,
+		thumbIndex: 0,
+		didSwap: false
+	};
+	const minimumDistance = step * minStepsBetweenValues;
+	if (behavior === "push") return {
+		value: getPushedThumbValues(activeValues, pressedIndex, nextValue, min, max, step, minStepsBetweenValues),
+		thumbIndex: pressedIndex,
+		didSwap: false
+	};
+	const candidateValues = activeValues.slice();
+	const previousNeighbor = candidateValues[pressedIndex - 1];
+	const nextNeighbor = candidateValues[pressedIndex + 1];
+	const lowerBound = previousNeighbor == null ? min : previousNeighbor + minimumDistance;
+	const upperBound = nextNeighbor == null ? max : nextNeighbor - minimumDistance;
+	const pressedValueAfterClamp = Number(clamp(nextValue, lowerBound, upperBound).toFixed(12));
+	candidateValues[pressedIndex] = pressedValueAfterClamp;
+	if (behavior !== "swap") return {
+		value: candidateValues,
+		thumbIndex: pressedIndex,
+		didSwap: false
+	};
+	const pressedValue = activeValues[pressedIndex];
+	const epsilon = 1e-7;
+	const swapForward = nextValue > pressedValue && nextNeighbor != null && nextValue >= nextNeighbor - epsilon;
+	const swapBackward = nextValue < pressedValue && previousNeighbor != null && nextValue <= previousNeighbor + epsilon;
+	if (!swapForward && !swapBackward) return {
+		value: candidateValues,
+		thumbIndex: pressedIndex,
+		didSwap: false
+	};
+	const targetIndex = swapForward ? pressedIndex + 1 : pressedIndex - 1;
+	const initialValuesForPush = candidateValues.map((_, index) => {
+		if (index === pressedIndex) return pressedValueAfterClamp;
+		return baselineValues[index] ?? activeValues[index];
+	});
+	const adjustedValues = getPushedThumbValues(candidateValues, targetIndex, swapForward ? Math.max(nextValue, candidateValues[targetIndex]) : Math.min(nextValue, candidateValues[targetIndex]), min, max, step, minStepsBetweenValues, initialValuesForPush);
+	const neighborIndex = swapForward ? targetIndex - 1 : targetIndex + 1;
+	const previousValue = adjustedValues[neighborIndex - 1];
+	const followingValue = adjustedValues[neighborIndex + 1];
+	const neighborMinimum = Math.max(previousValue == null ? min : previousValue + minimumDistance, min + neighborIndex * minimumDistance);
+	const neighborMaximum = Math.min(followingValue == null ? max : followingValue - minimumDistance, max - (adjustedValues.length - 1 - neighborIndex) * minimumDistance);
+	adjustedValues[neighborIndex] = Number(clamp(pressedValueAfterClamp, neighborMinimum, neighborMaximum).toFixed(12));
+	return {
+		value: adjustedValues,
+		thumbIndex: targetIndex,
+		didSwap: true
+	};
+}
+//#endregion
+//#region src/slider/utils/roundValueToStep.ts
+function getDecimalPrecision(value) {
+	if (value === 0) return 0;
+	if (Math.abs(value) < 1) {
+		const parts = value.toExponential().split("e-");
+		return ((parts[0]?.split(".")[1])?.length ?? 0) + Number.parseInt(parts[1] ?? "0", 10);
+	}
+	return value.toString().split(".")[1]?.length ?? 0;
+}
+function roundValueToStep(value, step, min) {
+	const nearest = Math.round((value - min) / step) * step + min;
+	return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
+}
+//#endregion
+//#region src/slider/control/SliderControl.tsx
+var INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
+/** The clickable, interactive area of the slider. */
+function SliderControl(props) {
+	const context = useSliderRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "as", "class", "onPointerDown", "onTouchStart", "ref", "style");
+	const state = createMemo(() => context.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	let touchId = null;
+	let moveCount = 0;
+	let insetThumbOffset = 0;
+	let interactionValue = null;
+	let latestValues = null;
+	let pointerId = null;
+	let listeningDocument = null;
+	let focusFrame;
+	function getThumbInput(index) {
+		return context.orderedThumbs()[index]?.input();
+	}
+	function updatePressedThumb(index) {
+		context.interaction.pressedThumbIndex = index;
+		if (!context.orderedThumbs()[index]?.element()) context.interaction.pressedThumbCenterOffset = null;
+	}
+	function resetPressedThumb() {
+		context.interaction.pressedThumbIndex = -1;
+		context.interaction.pressedThumbCenterOffset = null;
+	}
+	function isDisabledThumbTarget(target) {
+		return context.orderedThumbs().some((thumb) => contains(thumb.element(), target) && thumb.input()?.disabled === true);
+	}
+	function startPressing(coords) {
+		const values = context.values();
+		const range = values.length > 1;
+		context.interaction.pressedValues = range ? values.slice() : null;
+		interactionValue = null;
+		latestValues = values;
+		const pressedIndex = context.interaction.pressedThumbIndex;
+		let closestIndex = pressedIndex;
+		if (pressedIndex >= 0 && pressedIndex < values.length) {
+			if (values[pressedIndex] === context.max()) while (closestIndex > 0 && values[closestIndex - 1] === context.max()) closestIndex -= 1;
+		} else {
+			closestIndex = -1;
+			let minimumDistance;
+			const axis = context.orientation() === "vertical" ? "y" : "x";
+			for (let index = 0; index < context.orderedThumbs().length; index += 1) {
+				const thumb = context.orderedThumbs()[index];
+				const thumbElement = thumb?.element();
+				if (!thumbElement || thumb.input()?.disabled) continue;
+				const distance = Math.abs(coords[axis] - getMidpoint(thumbElement, context.orientation() === "vertical"));
+				if (minimumDistance === void 0 || distance <= minimumDistance) {
+					minimumDistance = distance;
+					closestIndex = index;
+				}
+			}
+		}
+		if (closestIndex >= 0 && closestIndex !== pressedIndex) updatePressedThumb(closestIndex);
+		if (context.inset()) {
+			const rect = context.orderedThumbs()[closestIndex]?.element()?.getBoundingClientRect();
+			insetThumbOffset = rect ? (context.orientation() === "vertical" ? rect.height : rect.width) / 2 : 0;
+		} else insetThumbOffset = 0;
+	}
+	function getFingerState(coords) {
+		const control = element();
+		const values = context.values();
+		const thumbIndex = context.interaction.pressedThumbIndex;
+		if (!control || thumbIndex < 0 || thumbIndex >= values.length) {
+			if (thumbIndex >= values.length) interactionValue = null;
+			return null;
+		}
+		const vertical = context.orientation() === "vertical";
+		const rect = control.getBoundingClientRect();
+		const offsets = getControlOffset(control.ownerDocument.defaultView?.getComputedStyle(control) ?? null, vertical);
+		const controlSize = (vertical ? rect.height : rect.width) - offsets.start - offsets.end - insetThumbOffset * 2;
+		const centerOffset = context.interaction.pressedThumbCenterOffset ?? 0;
+		const fingerX = coords.x - centerOffset;
+		const fingerY = coords.y - centerOffset;
+		const valueRescaled = clamp(((vertical ? rect.bottom - fingerY - offsets.end : (direction() === "rtl" ? rect.right - fingerX : fingerX - rect.left) - offsets.start) - insetThumbOffset) / controlSize, 0, 1);
+		const nextValue = clamp(roundValueToStep((context.max() - context.min()) * valueRescaled + context.min(), context.step(), context.min()), context.min(), context.max());
+		if (values.length <= 1) return {
+			value: nextValue,
+			thumbIndex,
+			didSwap: false
+		};
+		return resolveThumbCollision(context.thumbCollisionBehavior(), values, latestValues, context.interaction.pressedValues, thumbIndex, nextValue, context.min(), context.max(), context.step(), context.minStepsBetweenValues());
+	}
+	function focusThumb(index, focusVisible = false) {
+		getThumbInput(index)?.focus({
+			preventScroll: true,
+			focusVisible
+		});
+	}
+	function applyPointerValue(finger, reason, event) {
+		const applied = context.setValue(finger.value, createChangeEventDetails(reason, event, void 0, { activeThumbIndex: finger.thumbIndex }));
+		if (applied) {
+			interactionValue = finger.value;
+			latestValues = Array.isArray(finger.value) ? finger.value : [finger.value];
+			if (finger.didSwap) {
+				updatePressedThumb(finger.thumbIndex);
+				focusThumb(finger.thumbIndex);
+			}
+		}
+		return applied;
+	}
+	function handleMove(event) {
+		const coords = getFingerCoordinates(event, touchId);
+		if (!coords) return;
+		moveCount += 1;
+		if (event.type === "pointermove" && event.buttons === 0) {
+			endInteraction(event);
+			return;
+		}
+		const finger = getFingerState(coords);
+		if (!finger || !validateMinimumDistance(finger.value, context.step(), context.minStepsBetweenValues())) return;
+		if (!context.dragging() && moveCount > INTENTIONAL_DRAG_COUNT_THRESHOLD) context.setDragging(true);
+		applyPointerValue(finger, drag, event);
+	}
+	function endInteraction(event) {
+		if ("changedTouches" in event && touchId != null && !hasTouch(event, touchId)) return;
+		context.setActive(-1);
+		context.setDragging(false);
+		context.interaction.pressedThumbCenterOffset = null;
+		const values = context.values();
+		if (Array.isArray(interactionValue) && interactionValue.length !== values.length) interactionValue = null;
+		if (interactionValue != null) context.onValueCommitted(interactionValue, createGenericEventDetails(context.interaction.lastChangeReason, event));
+		const control = element();
+		if ("pointerId" in event && control) try {
+			if (control.hasPointerCapture(event.pointerId)) control.releasePointerCapture(event.pointerId);
+		} catch {}
+		resetPressedThumb();
+		touchId = null;
+		pointerId = null;
+		stopListening();
+	}
+	function handleTouchStart(event) {
+		if (context.disabled()) return;
+		if (isDisabledThumbTarget(getEventElement(event))) {
+			resetPressedThumb();
+			return;
+		}
+		const touch = event.changedTouches[0];
+		if (!touch) return;
+		touchId = touch.identifier;
+		const coords = {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+		startPressing(coords);
+		const finger = getFingerState(coords);
+		if (!finger) return;
+		focusThumb(finger.thumbIndex);
+		applyPointerValue(finger, trackPress, event);
+		moveCount = 0;
+		startListening(element()?.ownerDocument, "touch");
+	}
+	function handlePointerDown(event) {
+		const control = element();
+		const target = getEventElement(event);
+		if (!control || context.disabled() || event.defaultPrevented || !target || event.button !== 0) return;
+		if (isDisabledThumbTarget(target)) {
+			resetPressedThumb();
+			return;
+		}
+		const coords = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		startPressing(coords);
+		const finger = getFingerState(coords);
+		if (!finger) return;
+		const activeElement = getDeepActiveElement(control.ownerDocument);
+		if (contains(context.orderedThumbs()[finger.thumbIndex]?.element(), activeElement)) event.preventDefault();
+		else {
+			const ownerWindow = control.ownerDocument.defaultView;
+			if (focusFrame !== void 0) ownerWindow?.cancelAnimationFrame(focusFrame);
+			focusFrame = ownerWindow?.requestAnimationFrame(() => focusThumb(finger.thumbIndex));
+		}
+		context.setDragging(true);
+		if (context.interaction.pressedThumbCenterOffset == null) applyPointerValue(finger, trackPress, event);
+		if (event.pointerId) {
+			pointerId = event.pointerId;
+			try {
+				control.setPointerCapture(event.pointerId);
+			} catch {}
+		}
+		moveCount = 0;
+		startListening(control.ownerDocument, "pointer");
+	}
+	function startListening(document, type) {
+		removeListeners();
+		if (!document) return;
+		listeningDocument = document;
+		if (type === "touch") {
+			document.addEventListener("touchmove", handleMove, { passive: true });
+			document.addEventListener("touchend", endInteraction, { passive: true });
+			document.addEventListener("touchcancel", endInteraction, { passive: true });
+		} else {
+			document.addEventListener("pointermove", handleMove, { passive: true });
+			document.addEventListener("pointerup", endInteraction);
+			document.addEventListener("pointercancel", endInteraction);
+		}
+	}
+	function stopListening() {
+		removeListeners();
+		context.interaction.pressedValues = null;
+		interactionValue = null;
+		latestValues = null;
+	}
+	function removeListeners() {
+		const document = listeningDocument;
+		if (document) {
+			document.removeEventListener("pointermove", handleMove);
+			document.removeEventListener("pointerup", endInteraction);
+			document.removeEventListener("pointercancel", endInteraction);
+			document.removeEventListener("touchmove", handleMove);
+			document.removeEventListener("touchend", endInteraction);
+			document.removeEventListener("touchcancel", endInteraction);
+		}
+		listeningDocument = null;
+	}
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => handleTouchStart);
+	createEffect(element, (control) => {
+		context.setControlElement(control);
+		if (!control) return;
+		const listener = (event) => onTouchStart.call(control, event);
+		control.addEventListener("touchstart", listener, { passive: true });
+		return () => {
+			control.removeEventListener("touchstart", listener);
+			if (context.controlElement() === control) context.setControlElement(void 0);
+		};
+	});
+	createEffect(context.disabled, (disabled) => {
+		if (disabled) {
+			context.setDragging(false);
+			resetPressedThumb();
+			stopListening();
+		}
+	});
+	onCleanup(() => {
+		const ownerWindow = element()?.ownerDocument.defaultView;
+		if (focusFrame !== void 0) ownerWindow?.cancelAnimationFrame(focusFrame);
+		if (pointerId != null) try {
+			if (element()?.hasPointerCapture(pointerId)) element()?.releasePointerCapture(pointerId);
+		} catch {}
+		stopListening();
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((control) => setElement(control)), internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get ["data-base-ui-slider-control"]() {
+			return context.renderBeforeHydration() ? "" : void 0;
+		},
+		onPointerDown
+	}, stateAttributes, others));
+}
+function getControlOffset(styles, vertical) {
+	const parse = (value) => {
+		const result = value == null ? 0 : Number.parseFloat(value);
+		return Number.isNaN(result) ? 0 : result;
+	};
+	if (!styles) return {
+		start: 0,
+		end: 0
+	};
+	return vertical ? {
+		start: parse(styles.borderTopWidth) + parse(styles.paddingTop),
+		end: parse(styles.borderBottomWidth) + parse(styles.paddingBottom)
+	} : {
+		start: parse(styles.borderInlineStartWidth) + parse(styles.paddingInlineStart),
+		end: parse(styles.borderInlineEndWidth) + parse(styles.paddingInlineEnd)
+	};
+}
+function getFingerCoordinates(event, touchId) {
+	if (touchId != null && "changedTouches" in event) {
+		for (const touch of event.changedTouches) if (touch.identifier === touchId) return {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+		return null;
+	}
+	return {
+		x: event.clientX,
+		y: event.clientY
+	};
+}
+function hasTouch(event, touchId) {
+	for (const touch of event.changedTouches) if (touch.identifier === touchId) return true;
+	return false;
+}
+function getDeepActiveElement(document) {
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+//#endregion
+//#region src/slider/track/SliderTrack.tsx
+/** Represents the full range of the slider. */
+function SliderTrack(props) {
+	const context = useSliderRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "ref", "style");
+	const state = createMemo(() => context.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeStyles({ position: "relative" }, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/slider/thumb/prehydrationScript.ts
+var sliderPrehydrationScript = `(function(){const t=document.currentScript&&document.currentScript.parentElement;if(!t)return;const c=t.closest('[data-base-ui-slider-control]');if(!c)return;const i=c.querySelector('[data-base-ui-slider-indicator]'),r=c.getBoundingClientRect(),v=c.getAttribute('data-orientation')==='vertical',s=v?'height':'width',n=c.querySelectorAll('input[type="range"]'),g=n.length>1,l=n.length-1;let a=null;for(let e=0;e<n.length;e++){const o=n[e],d=parseFloat(o.getAttribute('value')||'');if(Number.isNaN(d))return;const p=o.parentElement;if(!p)return;const m=parseFloat(o.getAttribute('max')||'100'),u=parseFloat(o.getAttribute('min')||'0'),h=p.getBoundingClientRect(),f=r[s]-h[s],x=h[s]/2+f*((d-u)*100/(m-u))/100,y=x/r[s]*100;p.style.setProperty('--position',y+'%');if(Number.isFinite(y)){p.style.removeProperty('visibility');if(i){if(e===0){a=y;i.style.setProperty('--start-position',y+'%');if(!g)i.style.removeProperty('visibility')}else if(e===l){i.style.setProperty('--end-position',y+'%');i.style.setProperty('--relative-size',y-(a||0)+'%');i.style.removeProperty('visibility')}}}}})();`;
+//#endregion
+//#region src/slider/thumb/SliderThumbDataAttributes.ts
+var SliderThumbDataAttributes = /* @__PURE__ */ function(SliderThumbDataAttributes) {
+	SliderThumbDataAttributes["index"] = "data-index";
+	SliderThumbDataAttributes["dragging"] = "data-dragging";
+	SliderThumbDataAttributes["orientation"] = "data-orientation";
+	SliderThumbDataAttributes["disabled"] = "data-disabled";
+	SliderThumbDataAttributes["valid"] = "data-valid";
+	SliderThumbDataAttributes["invalid"] = "data-invalid";
+	SliderThumbDataAttributes["touched"] = "data-touched";
+	SliderThumbDataAttributes["dirty"] = "data-dirty";
+	SliderThumbDataAttributes["focused"] = "data-focused";
+	return SliderThumbDataAttributes;
+}({});
+//#endregion
+//#region src/slider/thumb/SliderThumb.tsx
+var _tmpl$ = [
+	"<input",
+	" type=\"range\"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	" style=\"",
+	"\"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	">"
+];
+var HANDLED_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home",
+	"PageDown",
+	"PageUp"
+]);
+var PROPAGATION_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home"
+]);
+var VISUALLY_HIDDEN_STYLE = {
+	position: "fixed",
+	width: "1px",
+	height: "1px",
+	padding: "0",
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	"white-space": "nowrap",
+	border: "0"
+};
+/** The draggable thumb and its nested native range input. */
+function SliderThumb(props) {
+	var _v$, _g$2, _g$, _v$8;
+	const context = useSliderRootContext();
+	const field = useFieldRootContext(true);
+	const labelable = useLabelableContext();
+	const direction = useDirection();
+	const csp = useCSPContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const generatedInputId = `base-ui-${createUniqueId()}`;
+	const token = Symbol("SliderThumb");
+	const [element, setElement] = createSignal();
+	const [input, setInput] = createSignal();
+	const [positionPercent, setPositionPercent] = createSignal();
+	const [hydrating, setHydrating] = createSignal(isServer || sharedConfig.hydrating);
+	const trustedPrehydrationScript = { innerHTML: sliderPrehydrationScript };
+	let restoringFocusVisible = false;
+	let indexAccessor = () => -1;
+	const inputId = createMemo(() => context.range() ? generatedInputId : context.singleInputId);
+	const registration = {
+		token,
+		order: 0,
+		element,
+		input,
+		inputId,
+		index: () => indexAccessor()
+	};
+	const unregisterThumb = context.registerThumb(registration);
+	const automaticIndex = createMemo(() => context.orderedThumbs().indexOf(registration));
+	const index = createMemo(() => !context.range() ? 0 : internalProps.index ?? automaticIndex());
+	indexAccessor = index;
+	const others = omit(allProps, "aria-describedby", "aria-label", "aria-labelledby", "aria-valuetext", "as", "children", "class", "disabled", "getAriaLabel", "getAriaValueText", "id", "index", "inputRef", "onBlur", "onFocus", "onKeyDown", "onPointerDown", "ref", "style", "tabIndex");
+	const thumbValue = createMemo(() => context.values()[index()]);
+	const thumbValuePercent = createMemo(() => valueToPercent(thumbValue(), context.min(), context.max()));
+	const range = context.range;
+	const vertical = createMemo(() => context.orientation() === "vertical");
+	const disabled = createMemo(() => context.disabled() || (internalProps.disabled ?? false));
+	const last = createMemo(() => index() === context.values().length - 1);
+	const state = createMemo(() => context.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const internalStyle = createMemo(() => {
+		const percent = thumbValuePercent();
+		if (!context.inset() && !Number.isFinite(percent)) return VISUALLY_HIDDEN_STYLE;
+		const safeLastUsed = context.lastUsedThumbIndex() >= 0 && context.lastUsedThumbIndex() < context.values().length ? context.lastUsedThumbIndex() : -1;
+		let zIndex;
+		if (range()) {
+			if (context.active() === index()) zIndex = 2;
+			else if (safeLastUsed === index()) zIndex = 1;
+		} else if (context.active() === index()) zIndex = 1;
+		return {
+			position: "absolute",
+			[vertical() ? "bottom" : "inset-inline-start"]: context.inset() ? "var(--position)" : `${percent}%`,
+			[vertical() ? "left" : "top"]: "50%",
+			translate: `${(vertical() || direction() !== "rtl" ? -1 : 1) * 50}% ${(vertical() ? 1 : -1) * 50}%`,
+			"z-index": zIndex,
+			...context.inset() ? {
+				"--position": `${positionPercent() ?? 0}%`,
+				visibility: context.renderBeforeHydration() && hydrating() || positionPercent() === void 0 ? "hidden" : void 0
+			} : {}
+		};
+	});
+	const styleValue = createMemo(() => mergeStyles(internalStyle(), resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	const indexAttribute = createMemo(() => ({ [SliderThumbDataAttributes.index]: String(index()) }));
+	const formattedValue = createMemo(() => formatNumber(thumbValue(), context.locale(), context.format()));
+	const ariaLabel = createMemo(() => typeof internalProps.getAriaLabel === "function" ? internalProps.getAriaLabel(index()) : internalProps["aria-label"]);
+	const ariaValueText = createMemo(() => {
+		const value = thumbValue();
+		if (value === void 0 || index() < 0) return;
+		if (typeof internalProps.getAriaValueText === "function") return internalProps.getAriaValueText(formattedValue(), value, index());
+		if (internalProps["aria-valuetext"] !== void 0) return internalProps["aria-valuetext"];
+		if (context.values().length === 2) return `${formattedValue()} ${index() === 0 ? "start" : "end"} range`;
+		return context.format() ? formattedValue() : void 0;
+	});
+	const inputStyle = createMemo(() => ({
+		...VISUALLY_HIDDEN_STYLE,
+		width: "100%",
+		height: "100%",
+		"writing-mode": vertical() ? direction() === "rtl" ? "vertical-rl" : "vertical-lr" : void 0
+	}));
+	function measureInset() {
+		if (!context.inset()) return;
+		const control = context.controlElement();
+		const thumb = element();
+		if (!control || !thumb) return;
+		const thumbRect = thumb.getBoundingClientRect();
+		const controlRect = control.getBoundingClientRect();
+		const side = vertical() ? "height" : "width";
+		const travel = controlRect[side] - thumbRect[side];
+		const nextPosition = (thumbRect[side] / 2 + travel * thumbValuePercent() / 100) / controlRect[side] * 100;
+		const position = Number.isFinite(nextPosition) ? nextPosition : void 0;
+		setPositionPercent(position);
+		if (index() === 0) context.setIndicatorPosition(0, position);
+		else if (last()) context.setIndicatorPosition(1, position);
+	}
+	function handleFocus(event) {
+		const wasRestoring = restoringFocusVisible;
+		restoringFocusVisible = false;
+		context.setActive(index());
+		field.setFocused(true);
+		if (wasRestoring) {
+			event.stopPropagation();
+			return;
+		}
+	}
+	function handleBlur(event) {
+		if (restoringFocusVisible) {
+			event.stopPropagation();
+			return;
+		}
+		context.setActive(-1);
+		if (context.orderedThumbs().some((thumb) => contains(thumb.element(), event.relatedTarget))) return;
+		field.setTouched(true);
+		field.setFocused(false);
+		if (field.validationMode() === "onBlur") {
+			const value = thumbValue();
+			if (value !== void 0) field.validation.commit(getSliderValue(value, index(), context.min(), context.max(), range(), context.values()));
+		}
+	}
+	function handleKeyDown(event) {
+		if (disabled() || event.defaultPrevented || !HANDLED_KEYS.has(event.key)) return;
+		if (PROPAGATION_KEYS.has(event.key)) event.stopPropagation();
+		const current = thumbValue();
+		if (current === void 0) return;
+		let nextValue = null;
+		let movement = 0;
+		let increment = event.shiftKey ? context.largeStep() : context.step();
+		const rounded = roundValueToStep(current, context.step(), context.min());
+		switch (event.key) {
+			case "ArrowUp":
+				movement = 1;
+				break;
+			case "ArrowRight":
+				movement = direction() === "rtl" ? -1 : 1;
+				break;
+			case "ArrowDown":
+				movement = -1;
+				break;
+			case "ArrowLeft":
+				movement = direction() === "rtl" ? 1 : -1;
+				break;
+			case "PageUp":
+				increment = context.largeStep();
+				movement = 1;
+				break;
+			case "PageDown":
+				increment = context.largeStep();
+				movement = -1;
+				break;
+			case "End":
+				nextValue = range() && Number.isFinite(context.values()[index() + 1]) ? context.values()[index() + 1] - context.step() * context.minStepsBetweenValues() : context.max();
+				break;
+			case "Home": nextValue = range() && Number.isFinite(context.values()[index() - 1]) ? context.values()[index() - 1] + context.step() * context.minStepsBetweenValues() : context.min();
+		}
+		if (movement !== 0) nextValue = getNewValue(rounded, increment, movement, context.min(), context.max());
+		if (nextValue === null) return;
+		const currentInput = input();
+		if (currentInput && !matchesFocusVisible(currentInput)) {
+			restoringFocusVisible = true;
+			currentInput.blur();
+			currentInput.focus({
+				preventScroll: true,
+				focusVisible: true
+			});
+		}
+		context.handleInputChange(nextValue, index(), event);
+		event.preventDefault();
+	}
+	function handlePointerDown(event) {
+		if (disabled()) return;
+		context.interaction.pressedThumbIndex = index();
+		context.interaction.pressedThumbCenterOffset = (vertical() ? event.clientY : event.clientX) - getMidpoint(event.currentTarget, vertical());
+	}
+	composeEventHandlers(() => restoringFocusVisible ? void 0 : internalProps.onFocus, () => handleFocus);
+	composeEventHandlers(() => restoringFocusVisible ? void 0 : internalProps.onBlur, () => handleBlur);
+	composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	createEffect(() => ({
+		control: context.controlElement(),
+		inset: context.inset(),
+		percent: thumbValuePercent(),
+		thumb: element()
+	}), (current) => {
+		if (!current.inset || !current.control || !current.thumb) return;
+		queueMicrotask(() => untrack(measureInset));
+		untrack(measureInset);
+		const ResizeObserverConstructor = current.control.ownerDocument.defaultView?.ResizeObserver;
+		if (!ResizeObserverConstructor) return;
+		const observer = new ResizeObserverConstructor(measureInset);
+		observer.observe(current.control);
+		observer.observe(current.thumb);
+		return () => observer.disconnect();
+	});
+	createEffect(input, (currentInput) => {
+		if (!currentInput) return;
+		return field.validation.registerInput(context.fieldControlSource, currentInput, () => currentInput);
+	});
+	onSettled(() => {
+		setHydrating(false);
+	});
+	onCleanup(unregisterThumb);
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((thumb) => {
+			setElement(thumb);
+			const prehydratedPosition = Number.parseFloat(thumb.style.getPropertyValue("--position"));
+			if (Number.isFinite(prehydratedPosition)) setPositionPercent(prehydratedPosition);
+		}), internalProps.ref],
+		get id() {
+			return internalProps.id ?? generatedId;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onPointerDown
+	}, indexAttribute, stateAttributes, others, { get children() {
+		return [
+			memo(() => {
+				return escape(internalProps.children);
+			}),
+			(_v$ = ssrHydrationKey(), internalProps.inputRef, _g$2 = ssrGroup(() => {
+				return [
+					ssrAttribute("id", escape(inputId(), true)),
+					ssrAttribute("name", escape(context.name(), true)),
+					ssrAttribute("form", escape(context.form(), true)),
+					ssrAttribute("min", escape(context.min(), true)),
+					ssrAttribute("max", escape(context.max(), true)),
+					ssrAttribute("step", escape(context.step(), true))
+				];
+			}, 6), _g$ = ssrGroup(() => {
+				return [
+					ssrAttribute("disabled", escape(disabled(), true)),
+					ssrAttribute("tabindex", escape(internalProps.tabIndex, true)),
+					ssrStyle(inputStyle()),
+					ssrAttribute("aria-label", escape(ariaLabel(), true)),
+					ssrAttribute("aria-labelledby", escape(internalProps["aria-labelledby"] ?? (ariaLabel() == null ? context.labelId() : void 0), true)),
+					ssrAttribute("aria-describedby", escape(labelable.getAriaDescribedBy(internalProps["aria-describedby"]), true)),
+					ssrAttribute("aria-orientation", escape(context.orientation(), true)),
+					ssrAttribute("aria-valuenow", escape(thumbValue(), true)),
+					ssrAttribute("aria-valuetext", escape(ariaValueText(), true)),
+					ssrAttribute("aria-invalid", state().valid === false && !disabled() ? "true" : escape(void 0, true))
+				];
+			}, 10), _v$8 = () => {
+				return ssrAttribute("value", escape(thumbValue() ?? "", true));
+			}, ssr(_tmpl$, _v$, _g$2, _g$2, _g$2, _g$2, _g$2, _g$2, _v$8, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$)),
+			memo(() => {
+				return escape(memo(() => {
+					return !!(context.inset() && last() && context.renderBeforeHydration() && hydrating());
+				})() ? ssrElement("script", () => {
+					return mergeProps({ get nonce() {
+						return csp.nonce();
+					} }, trustedPrehydrationScript);
+				}, void 0, true) : context.inset() && last() && context.renderBeforeHydration() && hydrating());
+			})
+		];
+	} }));
+}
+function getNewValue(value, increment, direction, min, max) {
+	const next = value + increment * direction;
+	return clamp(Number(next.toFixed(Math.max(getDecimalPrecision(value), getDecimalPrecision(increment), getDecimalPrecision(min)))), min, max);
+}
+function matchesFocusVisible(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/slider/indicator/SliderIndicator.tsx
+/** Visualizes the selected portion of the slider track. */
+function SliderIndicator(props) {
+	const context = useSliderRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const [hydrating, setHydrating] = createSignal(isServer || sharedConfig.hydrating);
+	const others = omit(allProps, "as", "class", "ref", "style");
+	const state = createMemo(() => context.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const indicatorStyle = createMemo(() => {
+		const values = context.values();
+		const vertical = context.orientation() === "vertical";
+		const range = values.length > 1;
+		const positions = context.indicatorPosition();
+		const start = context.inset() ? positions[0] : valueToPercent(values[0], context.min(), context.max());
+		const end = context.inset() ? positions[1] : valueToPercent(values[values.length - 1], context.min(), context.max());
+		let startValue = `${start ?? 0}%`;
+		let sizeValue = `${(end ?? 0) - (start ?? 0)}%`;
+		const style = {
+			visibility: context.inset() && context.renderBeforeHydration() && hydrating() || context.inset() && (start === void 0 || range && end === void 0) ? "hidden" : void 0,
+			position: vertical ? "absolute" : "relative",
+			[vertical ? "width" : "height"]: "inherit"
+		};
+		if (context.inset()) {
+			style["--start-position"] = startValue;
+			startValue = "var(--start-position)";
+			if (range) {
+				style["--relative-size"] = sizeValue;
+				sizeValue = "var(--relative-size)";
+			}
+		}
+		style[vertical ? "bottom" : "inset-inline-start"] = range ? startValue : 0;
+		style[vertical ? "height" : "width"] = range ? sizeValue : startValue;
+		return style;
+	});
+	const styleValue = createMemo(() => mergeStyles(indicatorStyle(), resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), sliderStateAttributesMapping));
+	onSettled(() => {
+		setHydrating(false);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((indicator) => {
+			const start = Number.parseFloat(indicator.style.getPropertyValue("--start-position"));
+			const relative = Number.parseFloat(indicator.style.getPropertyValue("--relative-size"));
+			if (Number.isFinite(start)) context.setIndicatorPosition(0, start);
+			if (Number.isFinite(start) && Number.isFinite(relative)) context.setIndicatorPosition(1, start + relative);
+		}), internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get ["data-base-ui-slider-indicator"]() {
+			return context.renderBeforeHydration() ? "" : void 0;
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/slider/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Control: () => SliderControl,
+	Indicator: () => SliderIndicator,
+	Label: () => SliderLabel,
+	Root: () => SliderRoot,
+	Thumb: () => SliderThumb,
+	Track: () => SliderTrack,
+	Value: () => SliderValue
+});
+//#endregion
+export { index_parts_exports as Slider };