ropav 0.2.0 → 0.3.0

package/dist/composables/use-color-field-state.js

@@ -0,0 +1,159 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { useFormValidationState } from "./use-form-validation-state.js";
+import { parseColor } from "../utils/color.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-color-field-state.ts
+var MIN_COLOR = parseColor("#000000");
+var MAX_COLOR = parseColor("#FFFFFF");
+var MIN_COLOR_INT = MIN_COLOR.toHexInt();
+var MAX_COLOR_INT = MAX_COLOR.toHexInt();
+/**
+* A colour that may arrive as a string, forgiving one that will not parse.
+*
+* The Vue counterpart of react-stately's `useColor`: swallowing the error is what lets a caller
+* hand over half-written text without the field throwing at them. Exported for the channel
+* branch, which needs the same leniency.
+*/
+var parseColorValue = (value) => {
+	if (typeof value !== "string") return value;
+	try {
+		return parseColor(value);
+	} catch {
+		return;
+	}
+};
+/**
+* Step a colour by treating its hex as one integer.
+*
+* A hex field steps as a whole number rather than per channel, so `#0000FF` incremented once is
+* `#000100` — deliberate, and the reason the value is clamped as an int rather than per channel.
+* Ported from react-stately's `addColorValue`.
+*/
+var addColorValue = (color, step) => {
+	const from = color ?? MIN_COLOR;
+	const colorInt = from.toHexInt();
+	const clamped = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);
+	if (clamped === colorInt) return from;
+	return parseColor(`#${clamped.toString(16).padStart(6, "0").toUpperCase()}`);
+};
+/**
+* State for a hex colour field, ported from React Stately's
+* `packages/react-stately/src/color/useColorFieldState.ts` (react-stately 3.49.0).
+*
+* Like a number field it holds two values at once — the text being typed, which may not be a
+* colour yet, and the colour it parses to — and only brings them back together on commit. That
+* is what lets someone type `#ff` on the way to `#ffcc00` without the field fighting them.
+*
+* The upstream original synchronises the text from inside the render body, which Vue has no
+* counterpart for; here it is a synchronous watcher, and it has to stay synchronous — stepping
+* the value and then reading the input back has to see the new text.
+*
+* @example
+* ```ts
+* const state = useColorFieldState({value: () => props.value, onChange: (c) => emit("change", c)});
+* ```
+*/
+var useColorFieldState = (options = {}) => {
+	const { step } = MIN_COLOR.getChannelRange("red");
+	const controlledValue = computed(() => parseColorValue(toValue(options.value)));
+	const defaultValue = computed(() => parseColorValue(toValue(options.defaultValue)));
+	const { setState: setColorValue, state: colorValue } = useControllableState({
+		defaultValue: defaultValue.value ?? null,
+		onValueChange: (value) => options.onChange?.(value),
+		value: () => controlledValue.value
+	});
+	/** Captured once: a form reset goes back to where the field started, not to where it is now. */
+	const initialValue = colorValue.value;
+	const hasInitialValue = toValue(options.value) != null || toValue(options.defaultValue) != null;
+	const inputValue = shallowRef(hasInitialValue && colorValue.value ? colorValue.value.toString("hex") : "");
+	const validation = useFormValidationState({
+		isInvalid: () => toValue(options.isInvalid),
+		name: () => toValue(options.name),
+		validate: () => toValue(options.validate),
+		validationBehavior: () => toValue(options.validationBehavior),
+		value: () => colorValue.value
+	});
+	/**
+	* Rewrite the text whenever the colour changes underneath it.
+	*
+	* Synchronous on purpose, matching the number field: stepping the value and then reading the
+	* input back has to see the new text, and a post-flush watcher would leave the old text there
+	* for a tick.
+	*/
+	watch(colorValue, (next) => {
+		inputValue.value = next ? next.toString("hex") : "";
+	}, { flush: "sync" });
+	/**
+	* Set the colour, but only when it really is a different colour.
+	*
+	* The comparison is on the hex integer rather than the object: every `Color` method returns a
+	* new instance, so identity would report a change on every keystroke that reparsed the same
+	* text and fire `onChange` for nothing.
+	*/
+	const safelySetColorValue = (next) => {
+		if (!colorValue.value || !next) {
+			setColorValue(next);
+			return;
+		}
+		if (next.toHexInt() !== colorValue.value.toHexInt()) setColorValue(next);
+	};
+	const parsedValue = computed(() => {
+		const text = inputValue.value;
+		try {
+			return parseColor(text.startsWith("#") ? text : `#${text}`);
+		} catch {
+			return null;
+		}
+	});
+	const setInputValue = (next) => {
+		inputValue.value = next;
+	};
+	/**
+	* Write the colour the field holds back out as text, in full.
+	*
+	* Read *after* whatever set the colour, on purpose. Upstream reads a render-scoped value that
+	* is still the old one, writes that, and lets the next render's sync correct it — so the end
+	* state is "whatever the field ended up holding" either way: the new colour when the change
+	* was accepted, the old one when a controlled owner declined it. This is that end state,
+	* without the intermediate write.
+	*/
+	const rewrite = () => {
+		inputValue.value = colorValue.value ? colorValue.value.toString("hex") : "";
+	};
+	const commit = () => {
+		if (!inputValue.value.length) {
+			safelySetColorValue(null);
+			rewrite();
+			return;
+		}
+		if (parsedValue.value === null) {
+			rewrite();
+			return;
+		}
+		safelySetColorValue(parsedValue.value);
+		rewrite();
+		validation.commitValidation();
+	};
+	const step1 = (by) => {
+		const next = addColorValue(parsedValue.value, by);
+		if (next === colorValue.value) inputValue.value = next.toString("hex");
+		safelySetColorValue(next);
+		validation.commitValidation();
+	};
+	return {
+		...validation,
+		colorValue: computed(() => colorValue.value),
+		commit,
+		decrement: () => step1(-step),
+		decrementToMin: () => safelySetColorValue(MIN_COLOR),
+		defaultColorValue: computed(() => defaultValue.value ?? initialValue),
+		increment: () => step1(step),
+		incrementToMax: () => safelySetColorValue(MAX_COLOR),
+		inputValue: computed(() => inputValue.value),
+		setColorValue,
+		setInputValue,
+		validate: (value) => value === "" || Boolean(/^#?[0-9a-f]{0,6}$/i.exec(value)?.[0])
+	};
+};
+//#endregion
+export { parseColorValue, useColorFieldState };

package/dist/composables/use-color-field.d.ts

@@ -0,0 +1,52 @@
+import type { ColorFieldState, UseColorFieldStateOptions } from "./use-color-field-state";
+import type { FieldIdsContext } from "./use-field-ids";
+import type { TextFieldHandlers } from "./use-text-field";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseColorFieldOptions extends UseColorFieldStateOptions {
+    id?: MaybeRefOrGetter<string | undefined>;
+    form?: MaybeRefOrGetter<string | undefined>;
+    autoFocus?: MaybeRefOrGetter<boolean | undefined>;
+    placeholder?: MaybeRefOrGetter<string | undefined>;
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
+    ariaDescribedby?: MaybeRefOrGetter<string | undefined>;
+    /** Whether the wheel over a focused field is ignored. */
+    isWheelDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeydown?: (event: KeyboardEvent) => void;
+    onKeyup?: (event: KeyboardEvent) => void;
+}
+export interface UseColorFieldReturn {
+    state: ColorFieldState;
+    /** Pass to `provideFieldIdsContext`. */
+    fieldIds: FieldIdsContext;
+    /** Attributes for the input. Spread with `v-bind`. Never carries an `on*` key. */
+    attrs: ComputedRef<Record<string, unknown>>;
+    handlers: TextFieldHandlers;
+    /** The input reports its element, which the wheel, reset and validation wiring hang off. */
+    registerElement: (element: HTMLInputElement | null) => void;
+    element: ComputedRef<HTMLInputElement | null>;
+    isDisabled: ComputedRef<boolean>;
+    isInvalid: ComputedRef<boolean>;
+    isReadOnly: ComputedRef<boolean>;
+    isRequired: ComputedRef<boolean>;
+    /** Put the input's text back to what the state holds. */
+    reassert: () => void;
+}
+/**
+ * Behaviour and accessibility for a hex colour field, ported from React Aria's
+ * `packages/react-aria/src/color/useColorField.ts` (react-aria 3.51.0).
+ *
+ * Built on {@link useTextField} — the control is a plain text input holding `#RRGGBB` — with the
+ * spin button layered on for its *keyboard* only. Upstream merges the whole spin button bag in
+ * and then nulls out `role` and every `aria-value*` key; the same thing is done here by taking
+ * the keyboard and the two state attributes and leaving the rest, because a hex field that
+ * announced itself as a spin button would have a screen reader read out the integer `4753399`
+ * instead of the colour.
+ *
+ * @example
+ * ```ts
+ * const field = useColorField({value: () => props.value, onChange: (c) => emit("change", c)});
+ * ```
+ */
+export declare const useColorField: (options?: UseColorFieldOptions) => UseColorFieldReturn;

package/dist/composables/use-color-field.js

@@ -0,0 +1,156 @@
+import { useFormReset } from "./use-form-reset.js";
+import { setFormValue } from "../utils/form-value.js";
+import { useColorFieldState } from "./use-color-field-state.js";
+import { useFormattedTextField } from "./use-formatted-text-field.js";
+import { useScrollWheel } from "./use-scroll-wheel.js";
+import { useSpinButton } from "./use-spin-button.js";
+import { useTextField } from "./use-text-field.js";
+import { computed, nextTick, shallowRef, toValue, watch } from "vue";
+//#region src/composables/use-color-field.ts
+/**
+* Behaviour and accessibility for a hex colour field, ported from React Aria's
+* `packages/react-aria/src/color/useColorField.ts` (react-aria 3.51.0).
+*
+* Built on {@link useTextField} — the control is a plain text input holding `#RRGGBB` — with the
+* spin button layered on for its *keyboard* only. Upstream merges the whole spin button bag in
+* and then nulls out `role` and every `aria-value*` key; the same thing is done here by taking
+* the keyboard and the two state attributes and leaving the rest, because a hex field that
+* announced itself as a spin button would have a screen reader read out the integer `4753399`
+* instead of the colour.
+*
+* @example
+* ```ts
+* const field = useColorField({value: () => props.value, onChange: (c) => emit("change", c)});
+* ```
+*/
+var useColorField = (options = {}) => {
+	const state = useColorFieldState(options);
+	const isDisabled = computed(() => Boolean(toValue(options.isDisabled)));
+	const isReadOnly = computed(() => Boolean(toValue(options.isReadOnly)));
+	const field = useTextField({
+		ariaDescribedby: () => toValue(options.ariaDescribedby),
+		ariaLabel: () => toValue(options.ariaLabel),
+		ariaLabelledby: () => toValue(options.ariaLabelledby),
+		autoComplete: "off",
+		autoCorrect: "off",
+		autoFocus: () => toValue(options.autoFocus),
+		form: () => toValue(options.form),
+		id: () => toValue(options.id),
+		isDisabled,
+		isReadOnly,
+		isRequired: () => toValue(options.isRequired),
+		name: () => toValue(options.name),
+		onChange: (value) => {
+			if (state.validate(value)) state.setInputValue(value);
+		},
+		onFocusChange: options.onFocusChange,
+		onKeydown: options.onKeydown,
+		onKeyup: options.onKeyup,
+		placeholder: () => toValue(options.placeholder),
+		role: "textbox",
+		skipFormReset: true,
+		spellCheck: "false",
+		validationState: state,
+		value: () => state.inputValue.value
+	});
+	const element = computed(() => field.element.value instanceof HTMLInputElement ? field.element.value : null);
+	const spin = useSpinButton({
+		isDisabled,
+		isReadOnly,
+		isRequired: () => toValue(options.isRequired),
+		maxValue: 16777215,
+		minValue: 0,
+		onDecrement: state.decrement,
+		onDecrementToMin: state.decrementToMin,
+		onIncrement: state.increment,
+		onIncrementToMax: state.incrementToMax,
+		textValue: () => state.colorValue.value ? state.colorValue.value.toString("hex") : void 0,
+		value: () => state.colorValue.value ? state.colorValue.value.toHexInt() : void 0
+	});
+	/**
+	* Put the control's text back to what the state holds, attribute included.
+	*
+	* Vapor skips writing `value` when the bound value has not changed, and by then the browser has
+	* already moved the text — committing normalises the text without necessarily changing the
+	* colour, so the write has to be made outright. The attribute goes with it, which is what makes
+	* a form reset put the field back rather than blank it. See {@link setFormValue}.
+	*/
+	const reassert = () => {
+		setFormValue(element.value, state.inputValue.value);
+	};
+	watch([element, state.inputValue], reassert, {
+		flush: "post",
+		immediate: true
+	});
+	useFormattedTextField(() => element.value, {
+		setInputValue: state.setInputValue,
+		validate: state.validate
+	});
+	useFormReset(field.element, () => state.defaultColorValue.value, (value) => {
+		state.setColorValue(value);
+		nextTick(reassert);
+	});
+	/**
+	* Whether the input has focus, which gates the wheel.
+	*
+	* Upstream reaches for `useFocusWithin` here, but the input is the only focusable thing a
+	* colour field has — there is nothing for focus to be *within* — so its own focus and blur
+	* answer the question.
+	*/
+	const isFocused = shallowRef(false);
+	/**
+	* The wheel steps the value, but only while focus is inside and only for a mostly-vertical
+	* gesture: a trackpad reports both axes at once, and a sideways scroll past the field is not
+	* someone asking to change the colour.
+	*/
+	useScrollWheel(() => element.value, {
+		isDisabled: () => Boolean(toValue(options.isWheelDisabled)) || isDisabled.value || isReadOnly.value || !isFocused.value,
+		onScroll: ({ deltaX, deltaY }) => {
+			if (Math.abs(deltaY) <= Math.abs(deltaX)) return;
+			if (deltaY > 0) state.increment();
+			else if (deltaY < 0) state.decrement();
+		}
+	});
+	return {
+		attrs: computed(() => {
+			const all = {
+				...field.attrs.value,
+				"aria-disabled": isDisabled.value || void 0,
+				"aria-readonly": isReadOnly.value || void 0
+			};
+			for (const key of Object.keys(all)) if (all[key] === void 0) delete all[key];
+			return all;
+		}),
+		element,
+		fieldIds: field.fieldIds,
+		handlers: {
+			onBlur: (event) => {
+				isFocused.value = false;
+				spin.onBlur();
+				state.commit();
+				reassert();
+				field.handlers.onBlur(event);
+			},
+			onFocus: (event) => {
+				isFocused.value = true;
+				spin.onFocus();
+				field.handlers.onFocus(event);
+			},
+			onInput: field.handlers.onInput,
+			onKeydown: (event) => {
+				spin.onKeydown(event);
+				field.handlers.onKeydown(event);
+			},
+			onKeyup: field.handlers.onKeyup
+		},
+		isDisabled,
+		isInvalid: field.isInvalid,
+		isReadOnly,
+		isRequired: field.isRequired,
+		reassert,
+		registerElement: field.registerElement,
+		state
+	};
+};
+//#endregion
+export { useColorField };

package/dist/composables/use-color-picker-state.d.ts

@@ -0,0 +1,29 @@
+import type { Color } from "../utils/color-types";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseColorPickerStateOptions {
+    /** Current colour. A string is parsed. */
+    value?: MaybeRefOrGetter<Color | string | undefined>;
+    /** Colour used while the picker is uncontrolled. @default "#000000" */
+    defaultValue?: MaybeRefOrGetter<Color | string | undefined>;
+    /** Called whenever the colour changes. */
+    onChange?: (value: Color) => void;
+}
+export interface ColorPickerState {
+    /** The colour the picker holds. */
+    color: ComputedRef<Color>;
+    /** Replace the colour. `null` is ignored, as upstream has it. */
+    setColor: (color: Color | null) => void;
+}
+/**
+ * One colour, shared by everything that edits or shows it.
+ *
+ * Ported from React Stately's `packages/react-stately/src/color/useColorPickerState.ts`
+ * (react-stately 3.49.0). Small enough to be almost nothing but a controllable value, and that is
+ * the point: a swatch picker, a colour area and a set of sliders can all be pointed at the same
+ * state and stay in step without any of them knowing about the others.
+ *
+ * `setColor` swallowing `null` is upstream's behaviour, not a guard added here. It matters for a
+ * swatch picker: the selection layer can report "nothing matched" while a colour that is not in
+ * the palette is held, and dropping that back to black would silently discard it.
+ */
+export declare const useColorPickerState: (options?: UseColorPickerStateOptions) => ColorPickerState;

package/dist/composables/use-color-picker-state.js

@@ -0,0 +1,36 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { parseColor } from "../utils/color.js";
+import { parseColorValue } from "./use-color-field-state.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-color-picker-state.ts
+/** Where a picker starts when nothing says otherwise. */
+var DEFAULT_COLOR = parseColor("#000000");
+/**
+* One colour, shared by everything that edits or shows it.
+*
+* Ported from React Stately's `packages/react-stately/src/color/useColorPickerState.ts`
+* (react-stately 3.49.0). Small enough to be almost nothing but a controllable value, and that is
+* the point: a swatch picker, a colour area and a set of sliders can all be pointed at the same
+* state and stay in step without any of them knowing about the others.
+*
+* `setColor` swallowing `null` is upstream's behaviour, not a guard added here. It matters for a
+* swatch picker: the selection layer can report "nothing matched" while a colour that is not in
+* the palette is held, and dropping that back to black would silently discard it.
+*/
+var useColorPickerState = (options = {}) => {
+	const controlledValue = computed(() => parseColorValue(toValue(options.value)) ?? void 0);
+	const defaultValue = computed(() => parseColorValue(toValue(options.defaultValue) || "#000000") ?? DEFAULT_COLOR);
+	const { setState, state } = useControllableState({
+		defaultValue: defaultValue.value,
+		onValueChange: (value) => options.onChange?.(value),
+		value: () => controlledValue.value
+	});
+	return {
+		color: computed(() => state.value),
+		setColor: (color) => {
+			if (color != null) setState(color);
+		}
+	};
+};
+//#endregion
+export { useColorPickerState };

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

@@ -0,0 +1,64 @@
+import type { Color, ColorChannel, ColorSpace } from "../utils/color-types";
+import type { SliderOrientation, SliderState } from "./use-slider-state";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface UseColorSliderStateOptions {
+    /** The channel the slider drives. */
+    channel: MaybeRefOrGetter<ColorChannel>;
+    /**
+     * The space the slider works in; `channel` has to belong to it. Defaults to the space the
+     * value itself is in.
+     */
+    colorSpace?: MaybeRefOrGetter<ColorSpace | undefined>;
+    /** Current colour. A string is parsed. */
+    value?: MaybeRefOrGetter<Color | string | undefined>;
+    /** Colour used while the slider is uncontrolled. */
+    defaultValue?: MaybeRefOrGetter<Color | string | undefined>;
+    /** @default "horizontal" */
+    orientation?: MaybeRefOrGetter<SliderOrientation | undefined>;
+    isDisabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Called on every change, while dragging included. */
+    onChange?: (value: Color) => void;
+    /** Called once the interaction that changed the colour is over. */
+    onChangeEnd?: (value: Color) => void;
+}
+export interface ColorSliderState extends SliderState {
+    /** The colour the slider currently holds, in the slider's own colour space. */
+    value: ComputedRef<Color>;
+    /** Replace the whole colour. A string is parsed. */
+    setValue: (value: Color | string) => void;
+    /**
+     * The colour to *paint*, which is not always the colour held: a hue slider shows a fully
+     * saturated hue whatever the value's own saturation is, and every channel but alpha paints
+     * itself opaque so a translucent value does not wash the track out.
+     */
+    getDisplayColor: () => Color;
+    isDragging: ComputedRef<boolean>;
+}
+/**
+ * One channel of a colour, as a slider.
+ *
+ * Ported from React Stately's `packages/react-stately/src/color/useColorSliderState.ts`
+ * (react-stately 3.49.0). Built on {@link useSliderState}: the colour is the state, and the
+ * single thumb is a *controlled* view of one channel of it — every move is turned straight back
+ * into `withChannelValue`, so the colour is the only thing that is ever stored.
+ *
+ * Two things the underlying slider gets wrong for a colour and this puts back:
+ *
+ * - `pageSize`. `useSliderState` derives it as a tenth of the range, which would page hue by 36°
+ *   and red by 25. A colour channel carries its own: 15 for hue, 17 for r/g/b. Paging is meant to
+ *   land on recognisable colours, not on round numbers.
+ * - the value labels, which have to read as a colour (`"200°"`, `"50%"`) rather than as the bare
+ *   number a `NumberFormatter` would give.
+ *
+ * Unlike upstream the locale is not an option — react-stately cannot reach one, this package can.
+ *
+ * @example
+ * ```ts
+ * const state = useColorSliderState({
+ *   channel: () => props.channel,
+ *   defaultValue: () => props.defaultValue,
+ *   onChange: (value) => emit("change", value),
+ * });
+ * ```
+ */
+export declare const useColorSliderState: (options: UseColorSliderStateOptions) => ColorSliderState;

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

@@ -0,0 +1,104 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { useLocale } from "./use-locale.js";
+import { normalizeColor, parseColor } from "../utils/color.js";
+import { useNumberFormatter } from "./use-number-formatter.js";
+import { useSliderState } from "./use-slider-state.js";
+import { computed, toValue } from "vue";
+//#region src/composables/use-color-slider-state.ts
+/**
+* One channel of a colour, as a slider.
+*
+* Ported from React Stately's `packages/react-stately/src/color/useColorSliderState.ts`
+* (react-stately 3.49.0). Built on {@link useSliderState}: the colour is the state, and the
+* single thumb is a *controlled* view of one channel of it — every move is turned straight back
+* into `withChannelValue`, so the colour is the only thing that is ever stored.
+*
+* Two things the underlying slider gets wrong for a colour and this puts back:
+*
+* - `pageSize`. `useSliderState` derives it as a tenth of the range, which would page hue by 36°
+*   and red by 25. A colour channel carries its own: 15 for hue, 17 for r/g/b. Paging is meant to
+*   land on recognisable colours, not on round numbers.
+* - the value labels, which have to read as a colour (`"200°"`, `"50%"`) rather than as the bare
+*   number a `NumberFormatter` would give.
+*
+* Unlike upstream the locale is not an option — react-stately cannot reach one, this package can.
+*
+* @example
+* ```ts
+* const state = useColorSliderState({
+*   channel: () => props.channel,
+*   defaultValue: () => props.defaultValue,
+*   onChange: (value) => emit("change", value),
+* });
+* ```
+*/
+var useColorSliderState = (options) => {
+	if (toValue(options.value) == null && toValue(options.defaultValue) == null) throw new Error("useColorSliderState requires a value or defaultValue");
+	const locale = useLocale();
+	const channel = computed(() => toValue(options.channel));
+	const controlledValue = computed(() => {
+		const value = toValue(options.value);
+		return value ? normalizeColor(value) : void 0;
+	});
+	const defaultValue = computed(() => {
+		const value = toValue(options.defaultValue);
+		return value ? normalizeColor(value) : void 0;
+	});
+	const { setState: setColor, state: colorValue } = useControllableState({
+		defaultValue: defaultValue.value ?? controlledValue.value,
+		onValueChange: (value) => options.onChange?.(value),
+		value: () => controlledValue.value
+	});
+	const toSpace = (value) => {
+		const space = toValue(options.colorSpace);
+		return space ? value.toFormat(space) : value;
+	};
+	const color = computed(() => toSpace(colorValue.value));
+	/** Where a form reset goes back to: the caller's default, or wherever the slider started. */
+	const initialValue = colorValue.value;
+	const defaultColor = computed(() => toSpace(defaultValue.value ?? initialValue));
+	const range = computed(() => color.value.getChannelRange(channel.value));
+	const numberFormatter = useNumberFormatter();
+	const toScalar = (value) => typeof value === "number" ? value : value[0];
+	const sliderState = useSliderState({
+		defaultValue: () => defaultColor.value.getChannelValue(channel.value),
+		isDisabled: () => toValue(options.isDisabled),
+		maxValue: () => range.value.maxValue,
+		minValue: () => range.value.minValue,
+		numberFormatter,
+		onChange: (value) => {
+			setColor(color.value.withChannelValue(channel.value, toScalar(value)));
+		},
+		onChangeEnd: (value) => {
+			options.onChangeEnd?.(color.value.withChannelValue(channel.value, toScalar(value)));
+		},
+		orientation: () => toValue(options.orientation),
+		step: () => range.value.step,
+		value: () => color.value.getChannelValue(channel.value)
+	});
+	const formatChannelValue = () => color.value.formatChannelValue(channel.value, locale.value.locale);
+	return {
+		...sliderState,
+		getDisplayColor: () => {
+			switch (channel.value) {
+				case "hue": return parseColor(`hsl(${color.value.getChannelValue("hue")}, 100%, 50%)`);
+				case "lightness":
+				case "brightness":
+				case "saturation":
+				case "red":
+				case "green":
+				case "blue": return color.value.withChannelValue("alpha", 1);
+				case "alpha": return color.value;
+				default: throw new Error("Unknown color channel: " + channel.value);
+			}
+		},
+		getFormattedValue: formatChannelValue,
+		getThumbValueLabel: formatChannelValue,
+		isDragging: computed(() => sliderState.isThumbDragging(0)),
+		pageSize: computed(() => range.value.pageSize),
+		setValue: (value) => setColor(normalizeColor(value)),
+		value: color
+	};
+};
+//#endregion
+export { useColorSliderState };