ropav 0.2.0 → 0.3.0

package/dist/composables/use-slider-state.js

@@ -0,0 +1,135 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { clamp, snapValueToStep } from "../utils/number.js";
+import { computed, shallowRef, toValue } from "vue";
+//#region src/composables/use-slider-state.ts
+var DEFAULT_MIN_VALUE = 0;
+var DEFAULT_MAX_VALUE = 100;
+var DEFAULT_STEP_VALUE = 1;
+var convertValue = (value) => {
+	if (value == null) return void 0;
+	return Array.isArray(value) ? value : [value];
+};
+/** Replace one entry, keeping the same array when the value has not moved. */
+var replaceIndex = (values, index, value) => {
+	if (values[index] === value) return values;
+	return [
+		...values.slice(0, index),
+		value,
+		...values.slice(index + 1)
+	];
+};
+/**
+* Values, dragging and focus for a slider with any number of thumbs.
+*
+* Ported from React Stately's `useSliderState`. Values are held as an array whatever the
+* caller passed, and handed back in the shape they came in — a caller who set a single number
+* gets a single number.
+*
+* Every thumb is penned in by its neighbours: thumb `n` can go no lower than thumb `n - 1`
+* and no higher than thumb `n + 1`, which is what keeps a range from turning inside out.
+*
+* @example
+* ```ts
+* const state = useSliderState({
+*   defaultValue: () => props.defaultValue,
+*   numberFormatter: formatter,
+*   onChange: (value) => emit("change", value),
+* });
+* ```
+*/
+var useSliderState = (options) => {
+	const minValue = computed(() => toValue(options.minValue) ?? DEFAULT_MIN_VALUE);
+	const maxValue = computed(() => toValue(options.maxValue) ?? DEFAULT_MAX_VALUE);
+	const step = computed(() => toValue(options.step) ?? DEFAULT_STEP_VALUE);
+	const orientation = computed(() => toValue(options.orientation) ?? "horizontal");
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)));
+	const pageSize = computed(() => {
+		const range = (maxValue.value - minValue.value) / 10;
+		return Math.max(snapValueToStep(range, 0, range + step.value, step.value), step.value);
+	});
+	/** Snap each value to the step and pen it in between the thumbs either side of it. */
+	const restrictValues = (values) => values?.map((value, index) => {
+		const min = index === 0 ? minValue.value : values[index - 1];
+		const max = index === values.length - 1 ? maxValue.value : values[index + 1];
+		return snapValueToStep(value, min, max, step.value);
+	});
+	const controlledValue = computed(() => restrictValues(convertValue(toValue(options.value))));
+	const defaultValue = computed(() => restrictValues(convertValue(toValue(options.defaultValue))) ?? [minValue.value]);
+	/**
+	* A caller who passed a single number gets a single number back, however many thumbs the
+	* state happens to hold.
+	*/
+	const toCallerShape = (values) => {
+		return typeof toValue(options.value) === "number" || typeof toValue(options.defaultValue) === "number" ? values[0] : values;
+	};
+	const { setState, state: values } = useControllableState({
+		defaultValue: defaultValue.value,
+		onValueChange: (next) => options.onChange?.(toCallerShape(next)),
+		value: () => controlledValue.value
+	});
+	/** What a form reset goes back to: the caller's default, or wherever the slider started. */
+	const initialValues = values.value;
+	const isDraggings = shallowRef(new Array(values.value.length).fill(false));
+	const focusedThumb = shallowRef(void 0);
+	const isEditables = new Array(values.value.length).fill(true);
+	const getValuePercent = (value) => (value - minValue.value) / (maxValue.value - minValue.value);
+	const getThumbMinValue = (index) => index === 0 ? minValue.value : values.value[index - 1];
+	const getThumbMaxValue = (index) => index === values.value.length - 1 ? maxValue.value : values.value[index + 1];
+	const isThumbEditable = (index) => isEditables[index] ?? true;
+	const setThumbEditable = (index, isEditable) => {
+		isEditables[index] = isEditable;
+	};
+	const setThumbValue = (index, value) => {
+		if (isDisabled.value || !isThumbEditable(index)) return;
+		setState(replaceIndex(values.value, index, snapValueToStep(value, getThumbMinValue(index), getThumbMaxValue(index), step.value)));
+	};
+	const setThumbDragging = (index, isDragging) => {
+		if (isDisabled.value || !isThumbEditable(index)) return;
+		const wasDragging = isDraggings.value[index];
+		isDraggings.value = replaceIndex(isDraggings.value, index, isDragging);
+		if (wasDragging && !isDraggings.value.some(Boolean)) options.onChangeEnd?.(toCallerShape(values.value));
+	};
+	const getRoundedValue = (value) => Math.round((value - minValue.value) / step.value) * step.value + minValue.value;
+	const getPercentValue = (percent) => {
+		const value = percent * (maxValue.value - minValue.value) + minValue.value;
+		return clamp(getRoundedValue(value), minValue.value, maxValue.value);
+	};
+	const getFormattedValue = (value = values.value) => {
+		const formatter = toValue(options.numberFormatter);
+		const parts = typeof value === "number" ? [value] : value;
+		if (parts.length === 0) return "";
+		if (parts.length === 1) return formatter.format(parts[0]);
+		if (parts.length === 2) return formatter.formatRange(parts[0], parts[1]);
+		return new Intl.ListFormat(formatter.resolvedOptions().locale, { type: "unit" }).format(parts.map((part) => formatter.format(part)));
+	};
+	return {
+		decrementThumb: (index, stepSize = 1) => setThumbValue(index, snapValueToStep(values.value[index] - Math.max(stepSize, step.value), minValue.value, maxValue.value, step.value)),
+		defaultValues: computed(() => toValue(options.defaultValue) !== void 0 ? defaultValue.value : initialValues),
+		focusedThumb: computed(() => focusedThumb.value),
+		getFormattedValue,
+		getPercentValue,
+		getThumbMaxValue,
+		getThumbMinValue,
+		getThumbPercent: (index) => getValuePercent(values.value[index]),
+		getThumbValue: (index) => values.value[index],
+		getThumbValueLabel: (index) => getFormattedValue(values.value[index]),
+		getValuePercent,
+		incrementThumb: (index, stepSize = 1) => setThumbValue(index, snapValueToStep(values.value[index] + Math.max(stepSize, step.value), minValue.value, maxValue.value, step.value)),
+		isDisabled,
+		isThumbDragging: (index) => Boolean(isDraggings.value[index]),
+		isThumbEditable,
+		orientation,
+		pageSize,
+		setFocusedThumb: (index) => {
+			focusedThumb.value = index;
+		},
+		setThumbDragging,
+		setThumbEditable,
+		setThumbPercent: (index, percent) => setThumbValue(index, getPercentValue(percent)),
+		setThumbValue,
+		step,
+		values: computed(() => values.value)
+	};
+};
+//#endregion
+export { useSliderState };

package/dist/composables/use-slider-thumb.d.ts

@@ -0,0 +1,79 @@
+import type { SliderOrientation, SliderState } from "./use-slider-state";
+import type { CSSProperties, ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+export interface UseSliderThumbOptions {
+    state: SliderState;
+    /** The track element, whose length the drag is measured against. */
+    trackEl: Ref<HTMLElement | null>;
+    /** The visually hidden range input this thumb stands for. */
+    inputEl: Ref<HTMLInputElement | null>;
+    /** Which thumb this is. @default 0 */
+    index?: MaybeRefOrGetter<number | undefined>;
+    /** Disables this thumb alone; the whole slider being disabled also counts. */
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Id of the input, which the output element points at. */
+    id: MaybeRefOrGetter<string>;
+    /** Ids that name the slider. */
+    labelledBy?: MaybeRefOrGetter<string | undefined>;
+    /** Ids that describe the slider. */
+    describedBy?: MaybeRefOrGetter<string | undefined>;
+    /** Name submitted with the form. */
+    name?: MaybeRefOrGetter<string | undefined>;
+    /** `id` of the form to submit with, for a slider rendered outside it. */
+    form?: MaybeRefOrGetter<string | undefined>;
+}
+export interface SliderThumbInputAttrs {
+    id: string;
+    type: "range";
+    tabindex: number | undefined;
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    name: string | undefined;
+    form: string | undefined;
+    disabled: boolean;
+    "aria-orientation": SliderOrientation;
+    "aria-valuetext": string;
+    "aria-labelledby": string | undefined;
+    "aria-describedby": string | undefined;
+}
+export interface UseSliderThumbReturn {
+    /** For the visually hidden range input. */
+    inputProps: ComputedRef<SliderThumbInputAttrs>;
+    /** Bind on the input: keyboard and pointer changes both end up here. */
+    inputHandlers: {
+        onBlur: () => void;
+        onChange: (event: Event) => void;
+        onFocus: () => void;
+    };
+    /**
+     * The thumb element is what the pointer actually drags. Attach with `@keydown` and
+     * `@pointerdown`, never through `v-bind`: a vapor render re-attaches every `on*` key that
+     * arrived that way, which drops the listener when the press itself is what re-rendered it.
+     */
+    thumbHandlers: {
+        onKeydown: (event: KeyboardEvent) => void;
+        onPointerdown: (event: PointerEvent) => void;
+    };
+    /** Position along the track, as inline styles. */
+    thumbStyle: ComputedRef<CSSProperties>;
+    isDragging: ComputedRef<boolean>;
+    isFocused: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+}
+/**
+ * One thumb of a slider: its position, its hidden input, and every way its value can move.
+ *
+ * Ported from React Aria's `useSliderThumb`. The thumb the user sees is a plain element, and
+ * the value lives in a visually hidden `input type="range"` behind it. The input is what
+ * assistive technology reads and what a form submits; the element is what the pointer drags.
+ *
+ * Keys are handled here rather than left to the input, so one thumb of a range cannot step
+ * past its neighbour and so `shift` can mean a page.
+ *
+ * @example
+ * ```ts
+ * const thumb = useSliderThumb({id: thumbId, index: () => props.index, inputEl, state, trackEl});
+ * ```
+ */
+export declare const useSliderThumb: (options: UseSliderThumbOptions) => UseSliderThumbReturn;

package/dist/composables/use-slider-thumb.js

@@ -0,0 +1,165 @@
+import { useFormReset } from "./use-form-reset.js";
+import { setFormValue } from "../utils/form-value.js";
+import { clamp } from "../utils/number.js";
+import { useMove } from "./use-move.js";
+import { computed, nextTick, onScopeDispose, toValue, watch, watchEffect } from "vue";
+//#region src/composables/use-slider-thumb.ts
+/**
+* One thumb of a slider: its position, its hidden input, and every way its value can move.
+*
+* Ported from React Aria's `useSliderThumb`. The thumb the user sees is a plain element, and
+* the value lives in a visually hidden `input type="range"` behind it. The input is what
+* assistive technology reads and what a form submits; the element is what the pointer drags.
+*
+* Keys are handled here rather than left to the input, so one thumb of a range cannot step
+* past its neighbour and so `shift` can mean a page.
+*
+* @example
+* ```ts
+* const thumb = useSliderThumb({id: thumbId, index: () => props.index, inputEl, state, trackEl});
+* ```
+*/
+var useSliderThumb = (options) => {
+	const { inputEl, state, trackEl } = options;
+	const index = computed(() => toValue(options.index) ?? 0);
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)) || state.isDisabled.value);
+	const isVertical = computed(() => state.orientation.value === "vertical");
+	const isFocused = computed(() => state.focusedThumb.value === index.value);
+	const isDragging = computed(() => state.isThumbDragging(index.value));
+	const focusInput = () => {
+		inputEl.value?.focus({ preventScroll: true });
+	};
+	watchEffect(() => state.setThumbEditable(index.value, !isDisabled.value));
+	watch(isFocused, (focused) => focused && focusInput(), { immediate: true });
+	/** Bracket a keyboard change in a drag, so the interaction reports an end of its own. */
+	const keyboardUpdate = (update) => {
+		state.setThumbDragging(index.value, true);
+		update();
+		state.setThumbDragging(index.value, false);
+	};
+	/** Where the thumb sits along the track while dragging, in pixels. */
+	let currentPosition = null;
+	const { handlers: moveHandlers } = useMove({
+		onMove: ({ deltaX, deltaY, pointerType, shiftKey }) => {
+			if (!trackEl.value) return;
+			const rect = trackEl.value.getBoundingClientRect();
+			const size = isVertical.value ? rect.height : rect.width;
+			if (currentPosition === null) currentPosition = state.getThumbPercent(index.value) * size;
+			if (pointerType === "keyboard") {
+				const stepSize = shiftKey ? state.pageSize.value : state.step.value;
+				if (deltaX < 0 || deltaY > 0) state.decrementThumb(index.value, stepSize);
+				else state.incrementThumb(index.value, stepSize);
+				return;
+			}
+			currentPosition += isVertical.value ? -deltaY : deltaX;
+			state.setThumbPercent(index.value, clamp(currentPosition / size, 0, 1));
+		},
+		onMoveEnd: () => state.setThumbDragging(index.value, false),
+		onMoveStart: () => {
+			currentPosition = null;
+			state.setThumbDragging(index.value, true);
+		}
+	});
+	let currentPointerId;
+	let detachRelease;
+	const onRelease = (event) => {
+		if (event.pointerId !== currentPointerId) return;
+		focusInput();
+		state.setThumbDragging(index.value, false);
+		detachRelease?.();
+	};
+	const onPointerdown = (event) => {
+		if (isDisabled.value) return;
+		if (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey) return;
+		focusInput();
+		currentPointerId = event.pointerId;
+		state.setThumbDragging(index.value, true);
+		moveHandlers.onPointerdown(event);
+		window.addEventListener("pointerup", onRelease, false);
+		window.addEventListener("pointercancel", onRelease, false);
+		detachRelease = () => {
+			window.removeEventListener("pointerup", onRelease, false);
+			window.removeEventListener("pointercancel", onRelease, false);
+			detachRelease = void 0;
+		};
+	};
+	const onKeydown = (event) => {
+		if (isDisabled.value) return;
+		switch (event.key) {
+			case "PageUp":
+				keyboardUpdate(() => state.incrementThumb(index.value, state.pageSize.value));
+				break;
+			case "PageDown":
+				keyboardUpdate(() => state.decrementThumb(index.value, state.pageSize.value));
+				break;
+			case "Home":
+				keyboardUpdate(() => state.setThumbValue(index.value, state.getThumbMinValue(index.value)));
+				break;
+			case "End":
+				keyboardUpdate(() => state.setThumbValue(index.value, state.getThumbMaxValue(index.value)));
+				break;
+			default:
+				moveHandlers.onKeydown(event);
+				return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	useFormReset(inputEl, () => state.defaultValues.value[index.value] ?? 0, (value) => {
+		state.setThumbValue(index.value, value);
+		nextTick(() => {
+			setFormValue(inputEl.value, String(state.getThumbValue(index.value)));
+		});
+	});
+	watch([inputEl, () => state.getThumbValue(index.value)], ([input, value]) => setFormValue(input, String(value)), {
+		flush: "post",
+		immediate: true
+	});
+	onScopeDispose(() => detachRelease?.(), true);
+	return {
+		inputHandlers: {
+			onBlur: () => state.setFocusedThumb(void 0),
+			onChange: (event) => {
+				const input = event.target;
+				state.setThumbValue(index.value, parseFloat(input.value));
+				input.value = String(state.getThumbValue(index.value));
+			},
+			onFocus: () => state.setFocusedThumb(index.value)
+		},
+		inputProps: computed(() => ({
+			"aria-describedby": toValue(options.describedBy),
+			"aria-labelledby": toValue(options.labelledBy),
+			"aria-orientation": state.orientation.value,
+			"aria-valuetext": state.getThumbValueLabel(index.value),
+			disabled: isDisabled.value,
+			form: toValue(options.form),
+			id: toValue(options.id),
+			max: state.getThumbMaxValue(index.value),
+			min: state.getThumbMinValue(index.value),
+			name: toValue(options.name),
+			step: state.step.value,
+			tabindex: isDisabled.value ? void 0 : 0,
+			type: "range",
+			value: state.getThumbValue(index.value)
+		})),
+		isDisabled,
+		isDragging,
+		isFocused,
+		thumbHandlers: {
+			onKeydown,
+			onPointerdown
+		},
+		thumbStyle: computed(() => {
+			const percent = state.getThumbPercent(index.value);
+			const offset = `${(isVertical.value ? 1 - percent : percent) * 100}%`;
+			return {
+				position: "absolute",
+				touchAction: "none",
+				transform: "translate(-50%, -50%)",
+				...isVertical.value ? { top: offset } : { left: offset }
+			};
+		})
+	};
+};
+//#endregion
+export { useSliderThumb };

package/dist/composables/use-slider.d.ts

@@ -0,0 +1,63 @@
+import type { SliderState } from "./use-slider-state";
+import type { CSSProperties, ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+export interface UseSliderOptions {
+    state: SliderState;
+    /** The track element. Its length is the distance a thumb can travel. */
+    trackEl: Ref<HTMLElement | null>;
+    /** The group's own id, and the stem every thumb id grows from. */
+    id: MaybeRefOrGetter<string>;
+    /** Id of the visible label, when one is rendered. */
+    labelId?: MaybeRefOrGetter<string | undefined>;
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
+    ariaDescribedby?: MaybeRefOrGetter<string | undefined>;
+}
+export interface SliderGroupAttrs {
+    role: "group";
+    id: string;
+    "aria-label": string | undefined;
+    "aria-labelledby": string | undefined;
+}
+export interface SliderOutputAttrs {
+    for: string;
+    "aria-live": "off";
+}
+export interface UseSliderReturn {
+    /** For the root element: the thumbs are inputs, and the group is what names them together. */
+    groupProps: ComputedRef<SliderGroupAttrs>;
+    /**
+     * The track accepts clicks and drags for the nearest thumb. Attach with `@pointerdown`, never
+     * through `v-bind`: a vapor render re-attaches every `on*` key that arrived that way, which
+     * drops the listener when the press itself is what re-rendered the element.
+     */
+    trackHandlers: {
+        onPointerdown: (event: PointerEvent) => void;
+    };
+    /** Inline styles the track needs whatever the stylesheet says. */
+    trackStyle: CSSProperties;
+    outputProps: ComputedRef<SliderOutputAttrs>;
+    getThumbId: (index: number) => string;
+    /** Id each thumb points `aria-labelledby` at. */
+    labelledBy: ComputedRef<string | undefined>;
+    /** Ids each thumb points `aria-describedby` at. */
+    describedBy: ComputedRef<string | undefined>;
+    /** Hand focus to the first thumb, for a click on the label. */
+    focusFirstThumb: () => void;
+}
+/**
+ * Labelling, the output element, and click-and-drag on the track.
+ *
+ * Ported from React Aria's `useSlider`. The track is not decoration: pressing anywhere on it
+ * moves the nearest thumb there and keeps dragging it, which is why the drag machinery lives
+ * on the track as well as on each thumb.
+ *
+ * Only the pointer path is ported, in step with `useMove`.
+ *
+ * @example
+ * ```ts
+ * const slider = useSlider({id: sliderId, state, trackEl});
+ * // <div v-bind="slider.groupProps.value">
+ * //   <div ref="track" @pointerdown="slider.trackHandlers.onPointerdown">
+ * ```
+ */
+export declare const useSlider: (options: UseSliderOptions) => UseSliderReturn;

package/dist/composables/use-slider.js

@@ -0,0 +1,140 @@
+import { setInteractionModality } from "./use-interaction-states.js";
+import { clamp } from "../utils/number.js";
+import { useMove } from "./use-move.js";
+import { computed, onScopeDispose, toValue } from "vue";
+//#region src/composables/use-slider.ts
+/**
+* Labelling, the output element, and click-and-drag on the track.
+*
+* Ported from React Aria's `useSlider`. The track is not decoration: pressing anywhere on it
+* moves the nearest thumb there and keeps dragging it, which is why the drag machinery lives
+* on the track as well as on each thumb.
+*
+* Only the pointer path is ported, in step with `useMove`.
+*
+* @example
+* ```ts
+* const slider = useSlider({id: sliderId, state, trackEl});
+* // <div v-bind="slider.groupProps.value">
+* //   <div ref="track" @pointerdown="slider.trackHandlers.onPointerdown">
+* ```
+*/
+var useSlider = (options) => {
+	const { state, trackEl } = options;
+	const isVertical = computed(() => state.orientation.value === "vertical");
+	const getThumbId = (index) => `${toValue(options.id)}-${index}`;
+	/**
+	* The thumbs are named by the visible label when there is one, and by the group itself
+	* otherwise — the group is the element carrying `aria-label` in that case.
+	*/
+	const labelledBy = computed(() => toValue(options.labelId) ?? toValue(options.id));
+	const describedBy = computed(() => toValue(options.ariaDescribedby));
+	const ariaLabelledby = computed(() => {
+		const ids = [toValue(options.labelId), toValue(options.ariaLabelledby)].filter(Boolean);
+		return ids.length > 0 ? ids.join(" ") : void 0;
+	});
+	/** Index of the thumb the current press on the track is dragging. */
+	let draggingIndex = null;
+	/** Where that thumb sits along the track, in pixels, as the drag goes on. */
+	let currentPosition = null;
+	let currentPointerId;
+	let detachRelease;
+	const trackSize = () => {
+		const rect = trackEl.value?.getBoundingClientRect();
+		if (!rect) return 0;
+		return isVertical.value ? rect.height : rect.width;
+	};
+	const { handlers: moveHandlers } = useMove({
+		onMove: ({ deltaX, deltaY }) => {
+			if (!trackEl.value || draggingIndex === null) return;
+			const size = trackSize();
+			if (currentPosition === null) currentPosition = state.getThumbPercent(draggingIndex) * size;
+			const delta = isVertical.value ? -deltaY : deltaX;
+			currentPosition += delta;
+			state.setThumbPercent(draggingIndex, clamp(currentPosition / size, 0, 1));
+		},
+		onMoveEnd: () => {
+			if (draggingIndex === null) return;
+			state.setThumbDragging(draggingIndex, false);
+			draggingIndex = null;
+		},
+		onMoveStart: () => {
+			currentPosition = null;
+		}
+	});
+	const onRelease = (event) => {
+		if (event.pointerId !== currentPointerId) return;
+		if (draggingIndex !== null) {
+			state.setThumbDragging(draggingIndex, false);
+			draggingIndex = null;
+		}
+		detachRelease?.();
+	};
+	/** The thumb closest to a value, preferring the lower one when two sit on top of each other. */
+	const closestThumb = (value) => {
+		const values = state.values.value;
+		const split = values.findIndex((thumbValue) => value - thumbValue < 0);
+		if (split === 0) return 0;
+		if (split === -1) return values.length - 1;
+		const below = values[split - 1];
+		const above = values[split];
+		return Math.abs(below - value) < Math.abs(above - value) ? split - 1 : split;
+	};
+	const onPointerdown = (event) => {
+		if (event.pointerType === "mouse" && (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey)) return;
+		if (!trackEl.value || state.isDisabled.value || state.values.value.some((_, index) => state.isThumbDragging(index))) return;
+		const rect = trackEl.value.getBoundingClientRect();
+		const size = isVertical.value ? rect.height : rect.width;
+		const offset = isVertical.value ? event.clientY - rect.top : event.clientX - rect.left;
+		const percent = isVertical.value ? 1 - offset / size : offset / size;
+		const value = state.getPercentValue(percent);
+		const index = closestThumb(value);
+		if (index < 0 || !state.isThumbEditable(index)) {
+			draggingIndex = null;
+			return;
+		}
+		event.preventDefault();
+		draggingIndex = index;
+		currentPointerId = event.pointerId;
+		state.setFocusedThumb(index);
+		state.setThumbDragging(index, true);
+		state.setThumbValue(index, value);
+		window.addEventListener("pointerup", onRelease, false);
+		window.addEventListener("pointercancel", onRelease, false);
+		detachRelease = () => {
+			window.removeEventListener("pointerup", onRelease, false);
+			window.removeEventListener("pointercancel", onRelease, false);
+			detachRelease = void 0;
+		};
+	};
+	onScopeDispose(() => detachRelease?.(), true);
+	return {
+		describedBy,
+		focusFirstThumb: () => {
+			document.getElementById(getThumbId(0))?.focus();
+			setInteractionModality("keyboard");
+		},
+		getThumbId,
+		groupProps: computed(() => ({
+			"aria-label": toValue(options.ariaLabel),
+			"aria-labelledby": ariaLabelledby.value,
+			id: toValue(options.id),
+			role: "group"
+		})),
+		labelledBy,
+		outputProps: computed(() => ({
+			"aria-live": "off",
+			for: state.values.value.map((_, index) => getThumbId(index)).join(" ")
+		})),
+		trackHandlers: { onPointerdown: (event) => {
+			onPointerdown(event);
+			moveHandlers.onPointerdown(event);
+		} },
+		trackStyle: {
+			position: "relative",
+			touchAction: "none"
+		}
+	};
+};
+//#endregion
+export { useSlider };

package/dist/composables/use-spin-button.d.ts

@@ -0,0 +1,52 @@
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseSpinButtonOptions {
+    value?: MaybeRefOrGetter<number | undefined>;
+    /** How the value should be read out, when the number alone would not do. */
+    textValue?: MaybeRefOrGetter<string | undefined>;
+    minValue?: MaybeRefOrGetter<number | undefined>;
+    maxValue?: MaybeRefOrGetter<number | undefined>;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    isReadOnly?: MaybeRefOrGetter<boolean | undefined>;
+    isRequired?: MaybeRefOrGetter<boolean | undefined>;
+    onIncrement?: () => void;
+    onIncrementPage?: () => void;
+    onDecrement?: () => void;
+    onDecrementPage?: () => void;
+    onDecrementToMin?: () => void;
+    onIncrementToMax?: () => void;
+}
+/** What a stepper button needs, whichever direction it goes in. */
+export interface SpinStepperHandlers {
+    /** A press has begun. `pointerType` decides whether it steps now or waits for the release. */
+    onPressStart: (pointerType: string) => void;
+    /** The pointer came up on the button, as opposed to sliding off it. */
+    onPressUp: (pointerType: string) => void;
+    onPressEnd: (pointerType: string) => void;
+}
+export interface UseSpinButtonReturn {
+    /** Spread on the control with `v-bind`. Never carries an `on*` key. */
+    attrs: ComputedRef<Record<string, unknown>>;
+    /** Wire on the control with `@keydown`. */
+    onKeydown: (event: KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    increment: SpinStepperHandlers;
+    decrement: SpinStepperHandlers;
+}
+/**
+ * Behaviour and accessibility for a control that steps through numbers, ported from React Aria's
+ * `packages/react-aria/src/spinbutton/useSpinButton.ts` (react-aria 3.51.0).
+ *
+ * Two things here are less obvious than they look. Holding a stepper button repeats, and the
+ * repeat re-arms itself one step at a time rather than running on an interval, so it stops the
+ * moment the value reaches the end of its range. And a touch does not step on the way down at
+ * all: a finger that slides off was scrolling, not pressing, so the step waits for a release
+ * that actually landed on the button.
+ *
+ * @example
+ * ```ts
+ * const spin = useSpinButton({value, minValue, maxValue, onIncrement, onDecrement});
+ * // <input v-bind="spin.attrs" @keydown="spin.onKeydown" @focus="spin.onFocus" …>
+ * ```
+ */
+export declare const useSpinButton: (options?: UseSpinButtonOptions) => UseSpinButtonReturn;