@octanejs/aria 0.0.40 → 0.0.42

package/src/stately/color/types.tsx

@@ -0,0 +1,82 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/color/types.ts).
+/** A list of supported color formats. */
+export type ColorFormat = 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsb' | 'hsba';
+
+export type ColorSpace = 'rgb' | 'hsl' | 'hsb';
+
+/** A list of color channels. */
+export type ColorChannel =
+	'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha';
+
+export type ColorAxes = { xChannel: ColorChannel; yChannel: ColorChannel; zChannel: ColorChannel };
+
+export interface ColorChannelRange {
+	/** The minimum value of the color channel. */
+	minValue: number;
+	/** The maximum value of the color channel. */
+	maxValue: number;
+	/** The step value of the color channel, used when incrementing and decrementing. */
+	step: number;
+	/** The page step value of the color channel, used when incrementing and decrementing. */
+	pageSize: number;
+}
+
+/** Represents a color value. */
+export interface Color {
+	/** Converts the color to the given color format, and returns a new Color object. */
+	toFormat(format: ColorFormat): Color;
+	/** Converts the color to a string in the given format. */
+	toString(format?: ColorFormat | 'css'): string;
+	/** Returns a duplicate of the color value. */
+	clone(): Color;
+	/** Converts the color to hex, and returns an integer representation. */
+	toHexInt(): number;
+	/**
+	 * Returns the numeric value for a given channel.
+	 * Throws an error if the channel is unsupported in the current color format.
+	 */
+	getChannelValue(channel: ColorChannel): number;
+	/**
+	 * Sets the numeric value for a given channel, and returns a new Color object.
+	 * Throws an error if the channel is unsupported in the current color format.
+	 */
+	withChannelValue(channel: ColorChannel, value: number): Color;
+	/**
+	 * Returns the minimum, maximum, and step values for a given channel.
+	 */
+	getChannelRange(channel: ColorChannel): ColorChannelRange;
+	/**
+	 * Returns a localized color channel name for a given channel and locale,
+	 * for use in visual or accessibility labels.
+	 */
+	getChannelName(channel: ColorChannel, locale: string): string;
+	/**
+	 * Returns the number formatting options for the given channel.
+	 */
+	getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions;
+	/**
+	 * Formats the numeric value for a given channel for display according to the provided locale.
+	 */
+	formatChannelValue(channel: ColorChannel, locale: string): string;
+	/**
+	 * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color.
+	 */
+	getColorSpace(): ColorSpace;
+	/**
+	 * Returns the color space axes, xChannel, yChannel, zChannel.
+	 */
+	getColorSpaceAxes(xyChannels: { xChannel?: ColorChannel; yChannel?: ColorChannel }): ColorAxes;
+	/**
+	 * Returns an array of the color channels within the current color space space.
+	 */
+	getColorChannels(): [ColorChannel, ColorChannel, ColorChannel];
+	/**
+	 * Returns a localized name for the color, for use in visual or accessibility labels.
+	 */
+	getColorName(locale: string): string;
+	/**
+	 * Returns a localized name for the hue, for use in visual or accessibility labels.
+	 */
+	getHueName(locale: string): string;
+}

package/src/stately/color/useColor.tsx

@@ -0,0 +1,30 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/color/useColor.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Color } from './types';
+import { parseColor } from './Color';
+import { useMemo } from '../../compat/react';
+
+export function useColor(value: string | Color | undefined | null): Color | null | undefined {
+	return useMemo(() => {
+		if (typeof value === 'string') {
+			try {
+				return parseColor(value);
+			} catch {
+				return undefined;
+			}
+		}
+		return value;
+	}, [value]);
+}

package/src/stately/color/useColorAreaState.tsx

@@ -0,0 +1,255 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/color/useColorAreaState.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { clamp, snapValueToStep } from '../utils/number';
+
+import { Color, ColorChannel, ColorSpace } from './types';
+import { normalizeColor, parseColor } from './Color';
+import { useControlledState } from '../utils/useControlledState';
+import { useMemo, useRef, useState } from '../../compat/react';
+import { ValueBase } from '@react-types/shared';
+
+export interface ColorAreaProps extends Omit<ValueBase<string | Color>, 'onChange'> {
+	/**
+	 * The color space that the color area operates in. The `xChannel` and `yChannel` must be in this
+	 * color space. If not provided, this defaults to the color space of the `color` or `defaultColor`
+	 * value.
+	 */
+	colorSpace?: ColorSpace;
+	/** Color channel for the horizontal axis. */
+	xChannel?: ColorChannel;
+	/** Color channel for the vertical axis. */
+	yChannel?: ColorChannel;
+	/** Whether the ColorArea is disabled. */
+	isDisabled?: boolean;
+	/** Handler that is called when the value changes, as the user drags. */
+	onChange?: (value: Color) => void;
+	/** Handler that is called when the user stops dragging. */
+	onChangeEnd?: (value: Color) => void;
+}
+
+export interface ColorAreaState {
+	/** The current color value displayed by the color area. */
+	readonly value: Color;
+	/** The default value of the color area. */
+	readonly defaultValue: Color;
+	/** Sets the current color value. If a string is passed, it will be parsed to a Color. */
+	setValue(value: string | Color): void;
+
+	/** The current value of the horizontal axis channel displayed by the color area. */
+	xValue: number;
+	/**
+	 * Sets the value for the horizontal axis channel displayed by the color area, and triggers
+	 * `onChange`.
+	 */
+	setXValue(value: number): void;
+
+	/** The current value of the vertical axis channel displayed by the color area. */
+	yValue: number;
+	/**
+	 * Sets the value for the vertical axis channel displayed by the color area, and triggers
+	 * `onChange`.
+	 */
+	setYValue(value: number): void;
+
+	/**
+	 * Sets the x and y channels of the current color value based on a percentage of the width and
+	 * height of the color area, and triggers `onChange`.
+	 */
+	setColorFromPoint(x: number, y: number): void;
+	/**
+	 * Returns the coordinates of the thumb relative to the upper left corner of the color area as a
+	 * percentage.
+	 */
+	getThumbPosition(): { x: number; y: number };
+
+	/** Increments the value of the horizontal axis channel by the channel step or page amount. */
+	incrementX(stepSize?: number): void;
+	/** Decrements the value of the horizontal axis channel by the channel step or page amount. */
+	decrementX(stepSize?: number): void;
+
+	/** Increments the value of the vertical axis channel by the channel step or page amount. */
+	incrementY(stepSize?: number): void;
+	/** Decrements the value of the vertical axis channel by the channel step or page amount. */
+	decrementY(stepSize?: number): void;
+
+	/** Whether the color area is currently being dragged. */
+	readonly isDragging: boolean;
+	/** Sets whether the color area is being dragged. */
+	setDragging(value: boolean): void;
+
+	/** Returns the xChannel, yChannel and zChannel names based on the color value. */
+	channels: { xChannel: ColorChannel; yChannel: ColorChannel; zChannel: ColorChannel };
+	/** The step value of the xChannel, used when incrementing and decrementing. */
+	xChannelStep: number;
+	/** The step value of the yChannel, used when incrementing and decrementing. */
+	yChannelStep: number;
+	/** The page step value of the xChannel, used when incrementing and decrementing. */
+	xChannelPageStep: number;
+	/** The page step value of the yChannel, used when incrementing and decrementing. */
+	yChannelPageStep: number;
+
+	/** Returns the color that should be displayed in the color area thumb instead of `value`. */
+	getDisplayColor(): Color;
+}
+
+const DEFAULT_COLOR = parseColor('#ffffff');
+/**
+ * Provides state management for a color area component. Color area allows users to adjust two
+ * channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.
+ */
+export function useColorAreaState(props: ColorAreaProps): ColorAreaState {
+	let { value, defaultValue, colorSpace, xChannel, yChannel, onChange, onChangeEnd } = props;
+
+	if (!value && !defaultValue) {
+		defaultValue = DEFAULT_COLOR;
+	}
+	if (value) {
+		value = normalizeColor(value);
+	}
+	if (defaultValue) {
+		defaultValue = normalizeColor(defaultValue);
+	}
+
+	// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
+	let [colorValue, setColorState] = useControlledState<Color>(
+		value as Color,
+		defaultValue as Color,
+		onChange,
+	);
+	let [initialValue] = useState(colorValue);
+	let color = useMemo(
+		() => (colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue),
+		[colorValue, colorSpace],
+	);
+	let valueRef = useRef(color);
+	let setColor = (color: Color) => {
+		valueRef.current = color;
+		setColorState(color);
+	};
+
+	let channels = useMemo(
+		() => color.getColorSpaceAxes({ xChannel, yChannel }),
+		[color, xChannel, yChannel],
+	);
+
+	let xChannelRange = color.getChannelRange(channels.xChannel);
+	let yChannelRange = color.getChannelRange(channels.yChannel);
+	let {
+		minValue: minValueX,
+		maxValue: maxValueX,
+		step: stepX,
+		pageSize: pageSizeX,
+	} = xChannelRange;
+	let {
+		minValue: minValueY,
+		maxValue: maxValueY,
+		step: stepY,
+		pageSize: pageSizeY,
+	} = yChannelRange;
+
+	let [isDragging, setDragging] = useState(false);
+	let isDraggingRef = useRef(false);
+
+	let xValue = color.getChannelValue(channels.xChannel);
+	let yValue = color.getChannelValue(channels.yChannel);
+	let setXValue = (v: number) => {
+		if (v === xValue) {
+			return;
+		}
+		let newColor = color.withChannelValue(channels.xChannel, v);
+		setColor(newColor);
+	};
+	let setYValue = (v: number) => {
+		if (v === yValue) {
+			return;
+		}
+		let newColor = color.withChannelValue(channels.yChannel, v);
+		setColor(newColor);
+	};
+
+	return {
+		channels,
+		xChannelStep: stepX,
+		yChannelStep: stepY,
+		xChannelPageStep: pageSizeX,
+		yChannelPageStep: pageSizeY,
+		value: color,
+		defaultValue: value !== undefined ? initialValue : (defaultValue as Color),
+		setValue(value) {
+			setColor(normalizeColor(value));
+		},
+		xValue,
+		setXValue,
+		yValue,
+		setYValue,
+		setColorFromPoint(x: number, y: number) {
+			let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);
+			let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);
+			let newColor: Color | undefined;
+			if (newXValue !== xValue) {
+				// Round new value to multiple of step, clamp value between min and max
+				newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);
+				newColor = color.withChannelValue(channels.xChannel, newXValue);
+			}
+			if (newYValue !== yValue) {
+				// Round new value to multiple of step, clamp value between min and max
+				newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);
+				newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+			}
+			if (newColor) {
+				setColor(newColor);
+			}
+		},
+		getThumbPosition() {
+			let x = (xValue - minValueX) / (maxValueX - minValueX);
+			let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+			return { x, y };
+		},
+		incrementX(stepSize = 1) {
+			setXValue(
+				xValue + stepSize > maxValueX
+					? maxValueX
+					: snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX),
+			);
+		},
+		incrementY(stepSize = 1) {
+			setYValue(
+				yValue + stepSize > maxValueY
+					? maxValueY
+					: snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY),
+			);
+		},
+		decrementX(stepSize = 1) {
+			setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
+		},
+		decrementY(stepSize = 1) {
+			setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
+		},
+		setDragging(isDragging) {
+			let wasDragging = isDraggingRef.current;
+			isDraggingRef.current = isDragging;
+
+			if (onChangeEnd && !isDragging && wasDragging) {
+				onChangeEnd(valueRef.current);
+			}
+
+			setDragging(isDragging);
+		},
+		isDragging,
+		getDisplayColor() {
+			return color.withChannelValue('alpha', 1);
+		},
+	};
+}

package/src/stately/color/useColorChannelFieldState.tsx

@@ -0,0 +1,86 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/color/useColorChannelFieldState.ts).
+import { Color, ColorChannel, ColorSpace } from './types';
+import { ColorFieldProps } from './useColorFieldState';
+import { NumberFieldState, useNumberFieldState } from '../numberfield/useNumberFieldState';
+import { useColor } from './useColor';
+import { useControlledState } from '../utils/useControlledState';
+import { useMemo, useState } from '../../compat/react';
+
+export interface ColorChannelFieldProps extends ColorFieldProps {
+	colorSpace?: ColorSpace;
+	channel: ColorChannel;
+}
+
+export interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {
+	locale: string;
+}
+
+export interface ColorChannelFieldState extends NumberFieldState {
+	/** The current value of the field. */
+	colorValue: Color;
+	/** The default value of the field. */
+	defaultColorValue: Color | null;
+	/** Sets the color value of the field. */
+	setColorValue(value: Color | null): void;
+}
+
+/**
+ * Provides state management for a color channel field, allowing users to edit the
+ * value of an individual color channel.
+ */
+export function useColorChannelFieldState(
+	props: ColorChannelFieldStateOptions,
+): ColorChannelFieldState {
+	let { channel, colorSpace, locale } = props;
+	let initialValue = useColor(props.value);
+	let initialDefaultValue = useColor(props.defaultValue);
+	let [colorValue, setColor] = useControlledState(
+		initialValue,
+		initialDefaultValue ?? null,
+		props.onChange,
+	);
+	let color = useConvertColor(colorValue, colorSpace);
+	let [initialColorValue] = useState(colorValue);
+	let defaultColorValue = initialDefaultValue ?? initialColorValue;
+	let defaultColor = useConvertColor(defaultColorValue, colorSpace);
+	let value = color.getChannelValue(channel);
+	let range = color.getChannelRange(channel);
+	let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);
+	let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
+
+	let numberFieldState = useNumberFieldState({
+		locale,
+		value: colorValue === null ? NaN : value / multiplier,
+		defaultValue:
+			defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
+		onChange: (v) => {
+			if (!Number.isNaN(v)) {
+				setColor(color.withChannelValue(channel, v * multiplier));
+			} else {
+				setColor(null);
+			}
+		},
+		minValue: range.minValue / multiplier,
+		maxValue: range.maxValue / multiplier,
+		step: range.step / multiplier,
+		formatOptions,
+	});
+
+	return {
+		...numberFieldState,
+		colorValue: color,
+		defaultColorValue,
+		setColorValue: setColor,
+	};
+}
+
+function useConvertColor(colorValue: Color | null, colorSpace: ColorSpace | null | undefined) {
+	let black = useColor('#000')!;
+	return useMemo(() => {
+		let nonNullColorValue = colorValue || black;
+		return colorSpace && nonNullColorValue
+			? nonNullColorValue.toFormat(colorSpace)
+			: nonNullColorValue;
+	}, [black, colorValue, colorSpace]);
+}

package/src/stately/color/useColorFieldState.tsx

@@ -0,0 +1,220 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/color/useColorFieldState.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Color } from './types';
+import {
+	FocusableProps,
+	HelpTextProps,
+	InputBase,
+	LabelableProps,
+	TextInputBase,
+	Validation,
+	ValueBase,
+} from '@react-types/shared';
+import { FormValidationState, useFormValidationState } from '../form/useFormValidationState';
+import { parseColor } from './Color';
+import { useColor } from './useColor';
+import { useControlledState } from '../utils/useControlledState';
+import { useMemo, useState } from '../../compat/react';
+
+export interface ColorFieldProps
+	extends
+		Omit<ValueBase<string | Color | null>, 'onChange'>,
+		InputBase,
+		Validation<Color | null>,
+		FocusableProps,
+		TextInputBase,
+		LabelableProps,
+		HelpTextProps {
+	/** Handler that is called when the value changes. */
+	onChange?: (color: Color | null) => void;
+}
+
+export interface ColorFieldState extends FormValidationState {
+	/**
+	 * The current text value of the input. Updated as the user types,
+	 * and formatted according to `formatOptions` on blur.
+	 */
+	readonly inputValue: string;
+	/**
+	 * The currently parsed color value, or null if the field is empty.
+	 * Updated based on the `inputValue` as the user types.
+	 */
+	readonly colorValue: Color | null;
+	/** The default value of the color field. */
+	readonly defaultColorValue: Color | null;
+	/** Sets the color value of the field. */
+	setColorValue(value: Color | null): void;
+	/** Sets the current text value of the input. */
+	setInputValue(value: string): void;
+	/**
+	 * Updates the input value based on the currently parsed color value.
+	 * Typically this is called when the field is blurred.
+	 */
+	commit(): void;
+	/** Increments the current input value to the next step boundary, and fires `onChange`. */
+	increment(): void;
+	/** Decrements the current input value to the next step boundary, and fires `onChange`. */
+	decrement(): void;
+	/** Sets the current value to the maximum color value, and fires `onChange`. */
+	incrementToMax(): void;
+	/** Sets the current value to the minimum color value, and fires `onChange`. */
+	decrementToMin(): void;
+	/**
+	 * Validates a user input string. Values can be partially entered, and may be valid even if they
+	 * cannot currently be parsed to a color. Can be used to implement validation as a user types.
+	 */
+	validate(value: string): boolean;
+}
+
+const MIN_COLOR = parseColor('#000000');
+const MAX_COLOR = parseColor('#FFFFFF');
+const MIN_COLOR_INT = MIN_COLOR.toHexInt();
+const MAX_COLOR_INT = MAX_COLOR.toHexInt();
+
+/**
+ * Provides state management for a color field component. Color fields allow
+ * users to enter and adjust a hex color value.
+ */
+export function useColorFieldState(props: ColorFieldProps): ColorFieldState {
+	let { value, defaultValue, onChange } = props;
+	let { step } = MIN_COLOR.getChannelRange('red');
+
+	let initialDefaultValue = useColor(defaultValue);
+	let [colorValue, setColorValue] = useControlledState<Color | null>(
+		useColor(value),
+		initialDefaultValue!,
+		onChange,
+	);
+	let [initialValue] = useState(colorValue);
+	let [inputValue, setInputValue] = useState(() =>
+		(value || defaultValue) && colorValue ? colorValue.toString('hex') : '',
+	);
+
+	let validation = useFormValidationState({
+		...props,
+		value: colorValue,
+	});
+
+	let safelySetColorValue = (newColor: Color | null) => {
+		if (!colorValue || !newColor) {
+			setColorValue(newColor);
+			return;
+		}
+		if (newColor.toHexInt() !== colorValue.toHexInt()) {
+			setColorValue(newColor);
+			return;
+		}
+	};
+
+	let [prevValue, setPrevValue] = useState(colorValue);
+	if (prevValue !== colorValue) {
+		setInputValue(colorValue ? colorValue.toString('hex') : '');
+		setPrevValue(colorValue);
+	}
+
+	let parsedValue = useMemo(() => {
+		let color;
+		try {
+			color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+		} catch {
+			color = null;
+		}
+		return color;
+	}, [inputValue]);
+
+	let commit = () => {
+		// Set to empty state if input value is empty
+		if (!inputValue.length) {
+			safelySetColorValue(null);
+			if (value === undefined || colorValue === null) {
+				setInputValue('');
+			} else {
+				setInputValue(colorValue.toString('hex'));
+			}
+			return;
+		}
+
+		// if it failed to parse, then reset input to formatted version of current number
+		if (parsedValue == null) {
+			setInputValue(colorValue ? colorValue.toString('hex') : '');
+			return;
+		}
+
+		safelySetColorValue(parsedValue);
+		// in a controlled state, the numberValue won't change, so we won't go back to our old input without help
+		let newColorValue = '';
+		if (colorValue) {
+			newColorValue = colorValue.toString('hex');
+		}
+		setInputValue(newColorValue);
+		validation.commitValidation();
+	};
+
+	let increment = () => {
+		let newValue = addColorValue(parsedValue ?? colorValue ?? MIN_COLOR, step);
+		// if we've arrived at the same value that was previously in the state, the
+		// input value should be updated to match
+		// ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+		// you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+		if (newValue === colorValue) {
+			setInputValue(newValue.toString('hex'));
+		}
+		safelySetColorValue(newValue);
+		validation.commitValidation();
+	};
+	let decrement = () => {
+		let newValue = addColorValue(parsedValue ?? colorValue ?? MIN_COLOR, -step);
+		// if we've arrived at the same value that was previously in the state, the
+		// input value should be updated to match
+		// ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+		// you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+		if (newValue === colorValue) {
+			setInputValue(newValue.toString('hex'));
+		}
+		safelySetColorValue(newValue);
+		validation.commitValidation();
+	};
+	let incrementToMax = () => safelySetColorValue(MAX_COLOR);
+	let decrementToMin = () => safelySetColorValue(MIN_COLOR);
+
+	let validate = (value: string) => value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0];
+
+	return {
+		...validation,
+		validate,
+		colorValue,
+		defaultColorValue: initialDefaultValue ?? initialValue,
+		setColorValue,
+		inputValue,
+		setInputValue,
+		commit,
+		increment,
+		incrementToMax,
+		decrement,
+		decrementToMin,
+	};
+}
+
+function addColorValue(color: Color, step: number) {
+	let newColor = color ? color : MIN_COLOR;
+	let colorInt = newColor.toHexInt();
+
+	let clampInt = Math.min(Math.max(colorInt + step, MIN_COLOR_INT), MAX_COLOR_INT);
+	if (clampInt !== colorInt) {
+		let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;
+		newColor = parseColor(newColorString);
+	}
+	return newColor;
+}