@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/slider/index.js

@@ -0,0 +1,1094 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, f as queryAll, r as resizeObserverBorderBox, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { h as isModifierKey, i as getEventPoint, m as isLeftClick, o as getEventStepValue, r as getEventKey } from "../../event-bTItRgiw.js";
+import { n as dispatchInputValueEvent, o as setElementValue, s as trackFormControl } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as trackPointerMove } from "../../pointer-move-Tijb8Ptk.js";
+import { f as last, o as first } from "../../array-C4KbHsha.js";
+import { t as isEqual } from "../../equal-DtrP8DPh.js";
+import { E as isValueWithinRange, F as toPx, L as callAll, M as setValueAtIndex, N as snapValueToStep, _ as getPreviousStepValue, c as clampPercent, g as getPercentValue, h as getNextStepValue, l as clampValue, n as createSplitProps, o as pick, v as getValuePercent, x as getValueTransformer, y as getValueRanges } from "../../utils-Cht5XaHf.js";
+import { p as memo, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/slider/anatomy.ts
+const anatomy = createAnatomy("slider").parts("root", "label", "thumb", "valueText", "track", "range", "control", "markerGroup", "marker", "draggingIndicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/slider/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
+const getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
+const getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
+const getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
+const getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
+const getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
+const getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
+const getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+const getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
+const getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
+const getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getThumbInset = (thumbSize, thumbAlignment, orientation) => {
+	return thumbAlignment === "contain" ? (orientation === "vertical" ? thumbSize?.height ?? 0 : thumbSize?.width ?? 0) / 2 : 0;
+};
+const getPointValue = (params, point) => {
+	const { context, prop, scope, refs } = params;
+	const controlEl = getControlEl(scope);
+	if (!controlEl) return;
+	const offset = refs.get("thumbDragOffset");
+	return getPercentValue(getRelativePointWithInset({
+		x: point.x - (offset?.x ?? 0),
+		y: point.y - (offset?.y ?? 0)
+	}, controlEl, getThumbInset(context.get("thumbSize"), prop("thumbAlignment"), prop("orientation"))).getPercentValue({
+		orientation: prop("orientation"),
+		dir: prop("dir"),
+		inverted: { y: true }
+	}), prop("min"), prop("max"), prop("step"));
+};
+function getRelativePointWithInset(point, element, inset) {
+	const { left, top, width, height } = element.getBoundingClientRect();
+	const effectiveWidth = width - inset * 2;
+	const effectiveHeight = height - inset * 2;
+	const effectiveLeft = left + inset;
+	const effectiveTop = top + inset;
+	const offset = {
+		x: point.x - effectiveLeft,
+		y: point.y - effectiveTop
+	};
+	const percent = {
+		x: effectiveWidth > 0 ? clampPercent(offset.x / effectiveWidth) : 0,
+		y: effectiveHeight > 0 ? clampPercent(offset.y / effectiveHeight) : 0
+	};
+	function getPercentValue(options = {}) {
+		const { dir = "ltr", orientation = "horizontal", inverted } = options;
+		const invertX = typeof inverted === "object" ? inverted.x : inverted;
+		const invertY = typeof inverted === "object" ? inverted.y : inverted;
+		if (orientation === "horizontal") return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+		return invertY ? 1 - percent.y : percent.y;
+	}
+	return {
+		offset,
+		percent,
+		getPercentValue
+	};
+}
+const dispatchChangeEvent = (ctx, value) => {
+	value.forEach((value, index) => {
+		const inputEl = getHiddenInputEl(ctx, index);
+		if (!inputEl) return;
+		dispatchInputValueEvent(inputEl, { value });
+	});
+};
+const getOffsetRect = (el) => ({
+	left: el?.offsetLeft ?? 0,
+	top: el?.offsetTop ?? 0,
+	width: el?.offsetWidth ?? 0,
+	height: el?.offsetHeight ?? 0
+});
+//#endregion
+//#region src/machines/slider/style.ts
+function getBounds(value) {
+	return [value[0], value[value.length - 1]];
+}
+function getRangeOffsets(params) {
+	const { prop, computed } = params;
+	const valuePercent = computed("valuePercent");
+	const [firstPercent, lastPercent] = getBounds(valuePercent);
+	if (valuePercent.length === 1) {
+		if (prop("origin") === "center") {
+			const isNegative = valuePercent[0] < 50;
+			return {
+				start: isNegative ? `${valuePercent[0]}%` : "50%",
+				end: isNegative ? "50%" : `${100 - valuePercent[0]}%`
+			};
+		}
+		if (prop("origin") === "end") return {
+			start: `${lastPercent}%`,
+			end: "0%"
+		};
+		return {
+			start: "0%",
+			end: `${100 - lastPercent}%`
+		};
+	}
+	return {
+		start: `${firstPercent}%`,
+		end: `${100 - lastPercent}%`
+	};
+}
+function getRangeStyle(params) {
+	const { computed } = params;
+	const isVertical = computed("isVertical");
+	const isRtl = computed("isRtl");
+	if (isVertical) return {
+		position: "absolute",
+		bottom: "var(--slider-range-start)",
+		top: "var(--slider-range-end)"
+	};
+	return {
+		position: "absolute",
+		[isRtl ? "right" : "left"]: "var(--slider-range-start)",
+		[isRtl ? "left" : "right"]: "var(--slider-range-end)"
+	};
+}
+function getVerticalThumbOffset(params, value) {
+	const { context, prop } = params;
+	const { height = 0 } = context.get("thumbSize") ?? {};
+	const getValue = getValueTransformer([prop("min"), prop("max")], [-height / 2, height / 2]);
+	return parseFloat(getValue(value).toFixed(2));
+}
+function getHorizontalThumbOffset(params, value) {
+	const { computed, context, prop } = params;
+	const { width = 0 } = context.get("thumbSize") ?? {};
+	if (computed("isRtl")) {
+		const getValue = getValueTransformer([prop("max"), prop("min")], [-width / 2, width / 2]);
+		return -1 * parseFloat(getValue(value).toFixed(2));
+	}
+	const getValue = getValueTransformer([prop("min"), prop("max")], [-width / 2, width / 2]);
+	return parseFloat(getValue(value).toFixed(2));
+}
+function getOffset(params, percent, value) {
+	const { computed, prop } = params;
+	if (prop("thumbAlignment") === "center") return `${percent}%`;
+	return `calc(${percent}% - ${computed("isVertical") ? getVerticalThumbOffset(params, value) : getHorizontalThumbOffset(params, value)}px)`;
+}
+function getThumbOffset(params, value) {
+	const { prop } = params;
+	return getOffset(params, getValuePercent(value, prop("min"), prop("max")) * 100, value);
+}
+function getVisibility(params) {
+	const { computed, prop } = params;
+	let visibility = "visible";
+	if (prop("thumbAlignment") === "contain" && !computed("hasMeasuredThumbSize")) visibility = "hidden";
+	return visibility;
+}
+function getThumbStyle(params, index) {
+	const { computed, context } = params;
+	const placementProp = computed("isVertical") ? "bottom" : "insetInlineStart";
+	const focusedIndex = context.get("focusedIndex");
+	return {
+		visibility: getVisibility(params),
+		position: "absolute",
+		transform: "var(--slider-thumb-transform)",
+		[placementProp]: `var(--slider-thumb-offset-${index})`,
+		zIndex: focusedIndex === index ? 1 : void 0
+	};
+}
+function getControlStyle() {
+	return {
+		touchAction: "none",
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		position: "relative"
+	};
+}
+function getRootStyle(params) {
+	const { context, computed } = params;
+	const isVertical = computed("isVertical");
+	const isRtl = computed("isRtl");
+	const range = getRangeOffsets(params);
+	const thumbSize = context.get("thumbSize");
+	return {
+		...context.get("value").reduce((styles, value, index) => {
+			const offset = getThumbOffset(params, value);
+			return {
+				...styles,
+				[`--slider-thumb-offset-${index}`]: offset
+			};
+		}, {}),
+		"--slider-thumb-width": toPx(thumbSize?.width),
+		"--slider-thumb-height": toPx(thumbSize?.height),
+		"--slider-thumb-transform": isVertical ? "translateY(50%)" : isRtl ? "translateX(50%)" : "translateX(-50%)",
+		"--slider-range-start": range.start,
+		"--slider-range-end": range.end
+	};
+}
+function getMarkerStyle(params, value) {
+	const { computed } = params;
+	const isHorizontal = computed("isHorizontal");
+	const isRtl = computed("isRtl");
+	return {
+		visibility: getVisibility(params),
+		position: "absolute",
+		pointerEvents: "none",
+		[isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset(params, value),
+		translate: "var(--translate-x) var(--translate-y)",
+		"--translate-x": isHorizontal ? isRtl ? "50%" : "-50%" : "0%",
+		"--translate-y": !isHorizontal ? "50%" : "0%"
+	};
+}
+function getMarkerGroupStyle() {
+	return {
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		pointerEvents: "none",
+		position: "relative"
+	};
+}
+//#endregion
+//#region src/machines/slider/utils.ts
+function getThumbBounds(ctx) {
+	const { index, values, min, max, gap } = ctx;
+	const prevThumb = values[index - 1];
+	const nextThumb = values[index + 1];
+	return {
+		min: prevThumb != null ? prevThumb + gap : min,
+		max: nextThumb != null ? nextThumb - gap : max
+	};
+}
+function round(value) {
+	return Math.round(value * 1e10) / 1e10;
+}
+function handleNone(ctx) {
+	const { index, value, values } = ctx;
+	const bounds = getThumbBounds(ctx);
+	const nextValues = values.slice();
+	nextValues[index] = round(clampValue(value, bounds.min, bounds.max));
+	return {
+		values: nextValues,
+		index,
+		swapped: false
+	};
+}
+function handlePush(ctx) {
+	const { index, value, values, min, max, gap } = ctx;
+	const nextValues = values.slice();
+	nextValues[index] = round(clampValue(value, min + index * gap, max - (values.length - 1 - index) * gap));
+	for (let i = index + 1; i < values.length; i++) {
+		const minAllowed = nextValues[i - 1] + gap;
+		if (nextValues[i] < minAllowed) nextValues[i] = round(minAllowed);
+	}
+	for (let i = index - 1; i >= 0; i--) {
+		const maxAllowed = nextValues[i + 1] - gap;
+		if (nextValues[i] > maxAllowed) nextValues[i] = round(maxAllowed);
+	}
+	return {
+		values: nextValues,
+		index,
+		swapped: false
+	};
+}
+function handleSwap(ctx, startValue) {
+	const { index, value, values, gap } = ctx;
+	const prevThumb = values[index - 1];
+	const nextThumb = values[index + 1];
+	const crossingNext = nextThumb != null && value >= nextThumb && value > startValue;
+	const crossingPrev = prevThumb != null && value <= prevThumb && value < startValue;
+	if (!crossingNext && !crossingPrev) return handleNone(ctx);
+	const swapIndex = crossingNext ? index + 1 : index - 1;
+	const nextValues = values.slice();
+	const bounds = getThumbBounds({
+		...ctx,
+		index: swapIndex
+	});
+	nextValues[swapIndex] = round(clampValue(value, bounds.min, bounds.max));
+	nextValues[index] = values[swapIndex];
+	if (crossingNext && nextValues[index] > nextValues[swapIndex] - gap) nextValues[index] = round(nextValues[swapIndex] - gap);
+	else if (crossingPrev && nextValues[index] < nextValues[swapIndex] + gap) nextValues[index] = round(nextValues[swapIndex] + gap);
+	return {
+		values: nextValues,
+		index: swapIndex,
+		swapped: true
+	};
+}
+function resolveThumbCollision(behavior, index, value, values, min, max, step, minStepsBetweenThumbs, startValue) {
+	if (values.length === 1) return {
+		values: [round(clampValue(value, min, max))],
+		index: 0,
+		swapped: false
+	};
+	const ctx = {
+		behavior,
+		index,
+		value,
+		values,
+		min,
+		max,
+		gap: step * minStepsBetweenThumbs
+	};
+	switch (behavior) {
+		case "push": return handlePush(ctx);
+		case "swap": return handleSwap(ctx, startValue ?? values[index]);
+		default: return handleNone(ctx);
+	}
+}
+function normalizeValues(params, nextValues) {
+	return nextValues.map((value, index) => {
+		return constrainValue(params, value, index);
+	});
+}
+function getRangeAtIndex(params, index) {
+	const { context, prop } = params;
+	const step = prop("step") * prop("minStepsBetweenThumbs");
+	return getValueRanges(context.get("value"), prop("min"), prop("max"), step)[index];
+}
+function constrainValue(params, value, index) {
+	const { prop } = params;
+	const range = getRangeAtIndex(params, index);
+	return clampValue(snapValueToStep(value, prop("min"), prop("max"), prop("step")), range.min, range.max);
+}
+function decrement(params, index, step) {
+	const { context, prop } = params;
+	const idx = index ?? context.get("focusedIndex");
+	const range = getRangeAtIndex(params, idx);
+	const nextValues = getPreviousStepValue(idx, {
+		...range,
+		step: step ?? prop("step"),
+		values: context.get("value")
+	});
+	nextValues[idx] = clampValue(nextValues[idx], range.min, range.max);
+	return nextValues;
+}
+function increment(params, index, step) {
+	const { context, prop } = params;
+	const idx = index ?? context.get("focusedIndex");
+	const range = getRangeAtIndex(params, idx);
+	const nextValues = getNextStepValue(idx, {
+		...range,
+		step: step ?? prop("step"),
+		values: context.get("value")
+	});
+	nextValues[idx] = clampValue(nextValues[idx], range.min, range.max);
+	return nextValues;
+}
+function getClosestIndex(params, pointValue) {
+	const { context } = params;
+	const values = context.get("value");
+	let closestIndex = 0;
+	let minDistance = Math.abs(values[0] - pointValue);
+	for (let i = 1; i < values.length; i++) {
+		const distance = Math.abs(values[i] - pointValue);
+		if (distance <= minDistance) {
+			closestIndex = i;
+			minDistance = distance;
+		}
+	}
+	return selectMovableThumb(params, closestIndex);
+}
+function selectMovableThumb(params, index) {
+	const { context, prop } = params;
+	const values = context.get("value");
+	const max = prop("max");
+	if (values[index] === max) {
+		let movableIndex = index;
+		while (movableIndex > 0 && values[movableIndex - 1] === max) movableIndex -= 1;
+		return movableIndex;
+	}
+	return index;
+}
+//#endregion
+//#region src/machines/slider/connect.ts
+function connect(service, normalize) {
+	const { state, send, context, prop, computed, scope } = service;
+	const ariaLabel = prop("aria-label");
+	const ariaLabelledBy = prop("aria-labelledby");
+	const sliderValue = context.get("value");
+	const focusedIndex = context.get("focusedIndex");
+	const focused = state.matches("focus");
+	const dragging = state.matches("dragging");
+	const disabled = computed("isDisabled");
+	const invalid = prop("invalid");
+	const interactive = computed("isInteractive");
+	const isHorizontal = prop("orientation") === "horizontal";
+	const isVertical = prop("orientation") === "vertical";
+	function getValuePercentFn(value) {
+		return getValuePercent(value, prop("min"), prop("max"));
+	}
+	function getPercentValueFn(percent) {
+		return getPercentValue(percent, prop("min"), prop("max"), prop("step"));
+	}
+	return {
+		value: sliderValue,
+		dragging,
+		focused,
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		getThumbValue(index) {
+			return sliderValue[index];
+		},
+		setThumbValue(index, value) {
+			send({
+				type: "SET_VALUE",
+				index,
+				value
+			});
+		},
+		getValuePercent: getValuePercentFn,
+		getPercentValue: getPercentValueFn,
+		getThumbPercent(index) {
+			return getValuePercentFn(sliderValue[index]);
+		},
+		setThumbPercent(index, percent) {
+			const value = getPercentValueFn(percent);
+			send({
+				type: "SET_VALUE",
+				index,
+				value
+			});
+		},
+		getThumbMin(index) {
+			return getRangeAtIndex(service, index).min;
+		},
+		getThumbMax(index) {
+			return getRangeAtIndex(service, index).max;
+		},
+		increment(index) {
+			send({
+				type: "INCREMENT",
+				index
+			});
+		},
+		decrement(index) {
+			send({
+				type: "DECREMENT",
+				index
+			});
+		},
+		focus() {
+			if (!interactive) return;
+			send({
+				type: "FOCUS",
+				index: 0
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-invalid": dataAttr(invalid),
+				"data-dragging": dataAttr(dragging),
+				"data-focus": dataAttr(focused),
+				id: getLabelId(scope),
+				htmlFor: getHiddenInputId(scope, 0),
+				onClick(event) {
+					if (!interactive) return;
+					event.preventDefault();
+					getFirstThumbEl(scope)?.focus();
+				},
+				style: {
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-dragging": dataAttr(dragging),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused),
+				id: getRootId(scope),
+				dir: prop("dir"),
+				style: getRootStyle(service)
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused),
+				id: getValueTextId(scope)
+			});
+		},
+		getTrackProps() {
+			return normalize.element({
+				...parts.track.attrs,
+				dir: prop("dir"),
+				id: getTrackId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-dragging": dataAttr(dragging),
+				"data-orientation": prop("orientation"),
+				"data-focus": dataAttr(focused),
+				style: { position: "relative" }
+			});
+		},
+		getThumbProps(props) {
+			const { index = 0, name } = props;
+			const value = sliderValue[index];
+			const range = getRangeAtIndex(service, index);
+			const valueText = prop("getAriaValueText")?.({
+				value,
+				index
+			});
+			const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
+			const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
+			return normalize.element({
+				...parts.thumb.attrs,
+				dir: prop("dir"),
+				"data-index": index,
+				"data-name": name,
+				id: getThumbId(scope, index),
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-focus": dataAttr(focused && focusedIndex === index),
+				"data-dragging": dataAttr(dragging && focusedIndex === index),
+				draggable: false,
+				"aria-disabled": ariaAttr(disabled),
+				"aria-label": _ariaLabel,
+				"aria-labelledby": _ariaLabelledBy ?? getLabelId(scope),
+				"aria-orientation": prop("orientation"),
+				"aria-valuemax": range.max,
+				"aria-valuemin": range.min,
+				"aria-valuenow": sliderValue[index],
+				"aria-valuetext": valueText,
+				role: "slider",
+				tabIndex: disabled ? void 0 : 0,
+				style: getThumbStyle(service, index),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					const rect = event.currentTarget.getBoundingClientRect();
+					const midpoint = {
+						x: rect.left + rect.width / 2,
+						y: rect.top + rect.height / 2
+					};
+					const offset = {
+						x: event.clientX - midpoint.x,
+						y: event.clientY - midpoint.y
+					};
+					send({
+						type: "THUMB_POINTER_DOWN",
+						index,
+						offset
+					});
+					event.stopPropagation();
+				},
+				onBlur() {
+					if (!interactive) return;
+					send({ type: "BLUR" });
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({
+						type: "FOCUS",
+						index
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const step = getEventStepValue(event, {
+						step: prop("step"),
+						largeStep: prop("largeStep")
+					});
+					const exec = {
+						ArrowUp() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_INC",
+								step,
+								src: "ArrowUp"
+							});
+						},
+						ArrowDown() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_DEC",
+								step,
+								src: "ArrowDown"
+							});
+						},
+						ArrowLeft() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_DEC",
+								step,
+								src: "ArrowLeft"
+							});
+						},
+						ArrowRight() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_INC",
+								step,
+								src: "ArrowRight"
+							});
+						},
+						PageUp() {
+							send({
+								type: "ARROW_INC",
+								step,
+								src: "PageUp"
+							});
+						},
+						PageDown() {
+							send({
+								type: "ARROW_DEC",
+								step,
+								src: "PageDown"
+							});
+						},
+						Home() {
+							send({ type: "HOME" });
+						},
+						End() {
+							send({ type: "END" });
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: prop("orientation")
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+						event.stopPropagation();
+					}
+				}
+			});
+		},
+		getHiddenInputProps(props) {
+			const { index = 0, name } = props;
+			return normalize.input({
+				name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
+				form: prop("form"),
+				type: "text",
+				hidden: true,
+				defaultValue: sliderValue[index],
+				id: getHiddenInputId(scope, index)
+			});
+		},
+		getRangeProps() {
+			return normalize.element({
+				id: getRangeId(scope),
+				...parts.range.attrs,
+				dir: prop("dir"),
+				"data-dragging": dataAttr(dragging),
+				"data-focus": dataAttr(focused),
+				"data-invalid": dataAttr(invalid),
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				style: getRangeStyle(service)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"data-dragging": dataAttr(dragging),
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused),
+				style: getControlStyle(),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					if (isModifierKey(event)) return;
+					const point = getEventPoint(event);
+					send({
+						type: "POINTER_DOWN",
+						point
+					});
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			});
+		},
+		getMarkerGroupProps() {
+			return normalize.element({
+				...parts.markerGroup.attrs,
+				role: "presentation",
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-orientation": prop("orientation"),
+				style: getMarkerGroupStyle()
+			});
+		},
+		getMarkerProps(props) {
+			const style = getMarkerStyle(service, props.value);
+			let markerState;
+			if (props.value < first(sliderValue)) markerState = "under-value";
+			else if (props.value > last(sliderValue)) markerState = "over-value";
+			else markerState = "at-value";
+			return normalize.element({
+				...parts.marker.attrs,
+				id: getMarkerId(scope, props.value),
+				role: "presentation",
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-value": props.value,
+				"data-disabled": dataAttr(disabled),
+				"data-state": markerState,
+				style
+			});
+		},
+		getDraggingIndicatorProps(props) {
+			const { index = 0 } = props;
+			const isDragging = index === focusedIndex && dragging;
+			return normalize.element({
+				...parts.draggingIndicator.attrs,
+				role: "presentation",
+				dir: prop("dir"),
+				hidden: !isDragging,
+				"data-orientation": prop("orientation"),
+				"data-state": isDragging ? "open" : "closed",
+				style: getThumbStyle(service, index)
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/slider/machine.ts
+const isEqualSize = (a, b) => {
+	return a?.width === b?.width && a?.height === b?.height;
+};
+const normalize = (value, min, max, step, minStepsBetweenThumbs) => {
+	return getValueRanges(value, min, max, minStepsBetweenThumbs * step).map((range) => {
+		const rangeValue = clampValue(snapValueToStep(range.value, range.min, range.max, step), range.min, range.max);
+		if (!isValueWithinRange(rangeValue, min, max)) throw new Error("[wirekyt/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid");
+		return rangeValue;
+	});
+};
+const machine = createMachine({
+	props({ props }) {
+		const min = props.min ?? 0;
+		const max = props.max ?? 100;
+		const step = props.step ?? 1;
+		const defaultValue = props.defaultValue ?? [min];
+		const minStepsBetweenThumbs = props.minStepsBetweenThumbs ?? 0;
+		return {
+			dir: "ltr",
+			thumbAlignment: "contain",
+			origin: "start",
+			orientation: "horizontal",
+			thumbCollisionBehavior: "none",
+			minStepsBetweenThumbs,
+			...props,
+			largeStep: props.largeStep ?? 10 * step,
+			defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
+			value: props.value ? normalize(props.value, min, max, step, minStepsBetweenThumbs) : void 0,
+			max,
+			step,
+			min
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			thumbSize: bindable(() => ({ defaultValue: prop("thumbSize") || null })),
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual,
+				hash(a) {
+					return a.join(",");
+				},
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedIndex: bindable(() => ({
+				defaultValue: -1,
+				onChange(value) {
+					const ctx = getContext();
+					prop("onFocusChange")?.({
+						focusedIndex: value,
+						value: ctx.get("value")
+					});
+				}
+			})),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	refs() {
+		return {
+			thumbDragOffset: null,
+			thumbDragStartValue: null
+		};
+	},
+	computed: {
+		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+		isVertical: ({ prop }) => prop("orientation") === "vertical",
+		isRtl: ({ prop }) => prop("orientation") === "horizontal" && prop("dir") === "rtl",
+		isDisabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+		isInteractive: ({ prop, computed }) => !(prop("readOnly") || computed("isDisabled")),
+		hasMeasuredThumbSize: ({ context }) => context.get("thumbSize") != null,
+		valuePercent: memo(({ context, prop }) => [
+			context.get("value"),
+			prop("min"),
+			prop("max")
+		], ([value, min, max]) => value.map((value) => 100 * getValuePercent(value, min, max)))
+	},
+	watch({ track, action, context, computed, send }) {
+		track([() => context.hash("value")], () => {
+			action(["syncInputElements", "dispatchChangeEvent"]);
+		});
+		track([() => computed("isDisabled")], () => {
+			if (computed("isDisabled")) send({ type: "POINTER_CANCEL" });
+		});
+	},
+	effects: ["trackFormControlState", "trackThumbSize"],
+	on: {
+		SET_VALUE: [{
+			guard: "hasIndex",
+			actions: ["setValueAtIndex", "invokeOnChangeEnd"]
+		}, { actions: ["setValue", "invokeOnChangeEnd"] }],
+		INCREMENT: { actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"] },
+		DECREMENT: { actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"] }
+	},
+	states: {
+		idle: { on: {
+			POINTER_DOWN: {
+				target: "dragging",
+				actions: [
+					"setClosestThumbIndex",
+					"setThumbDragStartValue",
+					"setPointerValue",
+					"focusActiveThumb"
+				]
+			},
+			FOCUS: {
+				target: "focus",
+				actions: ["setFocusedIndex"]
+			},
+			THUMB_POINTER_DOWN: {
+				target: "dragging",
+				actions: [
+					"setFocusedIndex",
+					"setThumbDragOffset",
+					"setThumbDragStartValue",
+					"focusActiveThumb"
+				]
+			}
+		} },
+		focus: {
+			entry: ["focusActiveThumb"],
+			on: {
+				POINTER_DOWN: {
+					target: "dragging",
+					actions: [
+						"setClosestThumbIndex",
+						"setThumbDragStartValue",
+						"setPointerValue",
+						"focusActiveThumb"
+					]
+				},
+				THUMB_POINTER_DOWN: {
+					target: "dragging",
+					actions: [
+						"setFocusedIndex",
+						"setThumbDragOffset",
+						"setThumbDragStartValue",
+						"focusActiveThumb"
+					]
+				},
+				ARROW_DEC: { actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"] },
+				ARROW_INC: { actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"] },
+				HOME: { actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"] },
+				END: { actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"] },
+				BLUR: {
+					target: "idle",
+					actions: ["clearFocusedIndex"]
+				}
+			}
+		},
+		dragging: {
+			entry: ["focusActiveThumb"],
+			effects: ["trackPointerMove"],
+			on: {
+				POINTER_UP: {
+					target: "focus",
+					actions: [
+						"invokeOnChangeEnd",
+						"clearThumbDragOffset",
+						"clearThumbDragStartValue"
+					]
+				},
+				POINTER_MOVE: { actions: ["setPointerValue"] },
+				POINTER_CANCEL: {
+					target: "idle",
+					actions: [
+						"clearFocusedIndex",
+						"clearThumbDragOffset",
+						"clearThumbDragStartValue"
+					]
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: { hasIndex: ({ event }) => event.index != null },
+		effects: {
+			trackFormControlState({ context, scope }) {
+				return trackFormControl(getRootEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("value", context.initial("value"));
+					}
+				});
+			},
+			trackPointerMove({ scope, send }) {
+				return trackPointerMove(scope.getDoc(), {
+					onPointerMove(info) {
+						send({
+							type: "POINTER_MOVE",
+							point: info.point
+						});
+					},
+					onPointerUp() {
+						send({ type: "POINTER_UP" });
+					}
+				});
+			},
+			trackThumbSize({ context, scope, prop }) {
+				if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
+				const exec = (el) => {
+					const size = pick(getOffsetRect(el), ["width", "height"]);
+					if (isEqualSize(context.get("thumbSize"), size)) return;
+					context.set("thumbSize", size);
+				};
+				const thumbEls = getThumbEls(scope);
+				thumbEls.forEach(exec);
+				return callAll(...thumbEls.map((el) => resizeObserverBorderBox.observe(el, () => exec(el))));
+			}
+		},
+		actions: {
+			dispatchChangeEvent({ context, scope }) {
+				dispatchChangeEvent(scope, context.get("value"));
+			},
+			syncInputElements({ context, scope }) {
+				context.get("value").forEach((value, index) => {
+					setElementValue(getHiddenInputEl(scope, index), value.toString());
+				});
+			},
+			invokeOnChangeEnd({ prop, context }) {
+				queueMicrotask(() => {
+					prop("onValueChangeEnd")?.({ value: context.get("value") });
+				});
+			},
+			setClosestThumbIndex(params) {
+				const { context, event } = params;
+				const pointValue = getPointValue(params, event.point);
+				if (pointValue == null) return;
+				const focusedIndex = getClosestIndex(params, pointValue);
+				context.set("focusedIndex", focusedIndex);
+			},
+			setFocusedIndex(params) {
+				const { context, event } = params;
+				const movableIndex = selectMovableThumb(params, event.index);
+				context.set("focusedIndex", movableIndex);
+			},
+			clearFocusedIndex({ context }) {
+				context.set("focusedIndex", -1);
+			},
+			setThumbDragOffset(params) {
+				const { refs, event } = params;
+				refs.set("thumbDragOffset", event.offset ?? null);
+			},
+			clearThumbDragOffset({ refs }) {
+				refs.set("thumbDragOffset", null);
+			},
+			setThumbDragStartValue({ refs, context }) {
+				refs.set("thumbDragStartValue", context.get("value").slice());
+			},
+			clearThumbDragStartValue({ refs }) {
+				refs.set("thumbDragStartValue", null);
+			},
+			setPointerValue(params) {
+				queueMicrotask(() => {
+					const { context, event, prop, refs } = params;
+					const pointValue = getPointValue(params, event.point);
+					if (pointValue == null) return;
+					const focusedIndex = context.get("focusedIndex");
+					const startValues = refs.get("thumbDragStartValue");
+					const result = resolveThumbCollision(prop("thumbCollisionBehavior"), focusedIndex, pointValue, context.get("value"), prop("min"), prop("max"), prop("step"), prop("minStepsBetweenThumbs"), startValues?.[focusedIndex]);
+					if (result.swapped) context.set("focusedIndex", result.index);
+					context.set("value", result.values);
+				});
+			},
+			focusActiveThumb({ scope, context }) {
+				raf(() => {
+					getThumbEl(scope, context.get("focusedIndex"))?.focus({ preventScroll: true });
+				});
+			},
+			decrementThumbAtIndex(params) {
+				const { context, event } = params;
+				const value = decrement(params, event.index, event.step);
+				context.set("value", value);
+			},
+			incrementThumbAtIndex(params) {
+				const { context, event } = params;
+				const value = increment(params, event.index, event.step);
+				context.set("value", value);
+			},
+			setFocusedThumbToMin(params) {
+				const { context } = params;
+				const index = context.get("focusedIndex");
+				const { min } = getRangeAtIndex(params, index);
+				context.set("value", (prev) => setValueAtIndex(prev, index, min));
+			},
+			setFocusedThumbToMax(params) {
+				const { context } = params;
+				const index = context.get("focusedIndex");
+				const { max } = getRangeAtIndex(params, index);
+				context.set("value", (prev) => setValueAtIndex(prev, index, max));
+			},
+			setValueAtIndex(params) {
+				const { context, event } = params;
+				const value = constrainValue(params, event.value, event.index);
+				context.set("value", (prev) => setValueAtIndex(prev, event.index, value));
+			},
+			setValue(params) {
+				const { context, event } = params;
+				const value = normalizeValues(params, event.value);
+				context.set("value", value);
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/slider/props.ts
+const props = createProps()([
+	"aria-label",
+	"aria-labelledby",
+	"dir",
+	"disabled",
+	"form",
+	"getAriaValueText",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"largeStep",
+	"max",
+	"min",
+	"minStepsBetweenThumbs",
+	"name",
+	"onFocusChange",
+	"onValueChange",
+	"onValueChangeEnd",
+	"orientation",
+	"origin",
+	"readOnly",
+	"step",
+	"thumbAlignment",
+	"thumbCollisionBehavior",
+	"thumbSize",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+const thumbProps = createProps()(["index", "name"]);
+const splitThumbProps = createSplitProps(thumbProps);
+const markerProps = createProps()(["value"]);
+const splitMarkerProps = createSplitProps(markerProps);
+//#endregion
+export { anatomy, connect, machine, markerProps, props, splitMarkerProps, splitProps, splitThumbProps, thumbProps };