@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/color-picker/index.js

@@ -0,0 +1,1518 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { d as query, f as queryAll, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { a as getEventStep, h as isModifierKey, i as getEventPoint, l as isComposingEvent, m as isLeftClick, r as getEventKey } from "../../event-bTItRgiw.js";
+import { n as dispatchInputValueEvent, o as setElementValue, s as trackFormControl } from "../../form-B1DW_w_3.js";
+import { t as getInitialFocus } from "../../initial-focus-BrN5tT2X.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as getRelativePoint } from "../../point-C9A4dk1i.js";
+import { t as disableTextSelection } from "../../text-selection-DXvWvm6k.js";
+import { t as trackPointerMove } from "../../pointer-move-Tijb8Ptk.js";
+import { n as visuallyHiddenStyle } from "../../visually-hidden-yDJ517KZ.js";
+import { K as tryCatch, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { i as getColorAreaGradient, n as parseColor, t as normalizeColor } from "../../color-utils-lDDg9FEh.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { n as trackDismissableElement } from "../../dismissable-KM1jPtNQ.js";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/color-picker/anatomy.ts
+const anatomy = createAnatomy("color-picker", [
+	"root",
+	"label",
+	"control",
+	"trigger",
+	"positioner",
+	"content",
+	"area",
+	"areaThumb",
+	"valueText",
+	"areaBackground",
+	"channelSlider",
+	"channelSliderLabel",
+	"channelSliderTrack",
+	"channelSliderThumb",
+	"channelSliderValueText",
+	"channelInput",
+	"transparencyGrid",
+	"swatchGroup",
+	"swatchTrigger",
+	"swatchIndicator",
+	"swatch",
+	"eyeDropperTrigger",
+	"formatTrigger",
+	"formatSelect"
+]);
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/color-picker/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `color-picker:${ctx.id}:hidden-input`;
+const getControlId = (ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`;
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`;
+const getContentId = (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`;
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `color-picker:${ctx.id}:positioner`;
+const getFormatSelectId = (ctx) => ctx.ids?.formatSelect ?? `color-picker:${ctx.id}:format-select`;
+const getAreaId = (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`;
+const getAreaGradientId = (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`;
+const getAreaThumbId = (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`;
+const getChannelSliderTrackId = (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`;
+const getChannelSliderThumbId = (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getAreaThumbEl = (ctx) => ctx.getById(getAreaThumbId(ctx));
+const getChannelSliderThumbEl = (ctx, channel) => ctx.getById(getChannelSliderThumbId(ctx, channel));
+const getFormatSelectEl = (ctx) => ctx.getById(getFormatSelectId(ctx));
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+const getAreaEl = (ctx) => ctx.getById(getAreaId(ctx));
+const getAreaValueFromPoint = (ctx, point, dir) => {
+	const areaEl = getAreaEl(ctx);
+	if (!areaEl) return;
+	const { getPercentValue } = getRelativePoint(point, areaEl);
+	return {
+		x: getPercentValue({
+			dir,
+			orientation: "horizontal"
+		}),
+		y: getPercentValue({ orientation: "vertical" })
+	};
+};
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getChannelSliderTrackEl = (ctx, channel) => ctx.getById(getChannelSliderTrackId(ctx, channel));
+const getChannelSliderValueFromPoint = (ctx, point, channel, dir) => {
+	const trackEl = getChannelSliderTrackEl(ctx, channel);
+	if (!trackEl) return;
+	const { getPercentValue } = getRelativePoint(point, trackEl);
+	return {
+		x: getPercentValue({
+			dir,
+			orientation: "horizontal"
+		}),
+		y: getPercentValue({ orientation: "vertical" })
+	};
+};
+const getChannelInputEls = (ctx) => {
+	return [...queryAll(getContentEl(ctx), "input[data-channel]"), ...queryAll(getControlEl(ctx), "input[data-channel]")];
+};
+//#endregion
+//#region src/machines/color-picker/utils/get-channel-display-color.ts
+function getChannelDisplayColor(color, channel) {
+	switch (channel) {
+		case "hue": return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
+		case "lightness":
+		case "brightness":
+		case "saturation":
+		case "red":
+		case "green":
+		case "blue": return color.withChannelValue("alpha", 1);
+		case "alpha": return color;
+		default: throw new Error("Unknown color channel: " + channel);
+	}
+}
+//#endregion
+//#region src/machines/color-picker/utils/get-channel-input-value.ts
+function getChannelValue(color, channel) {
+	if (channel == null) return "";
+	if (channel === "hex") return color.toString("hex");
+	if (channel === "css") return color.toString("css");
+	if (channel in color) return color.getChannelValue(channel).toString();
+	const isHSL = color.getFormat() === "hsla";
+	switch (channel) {
+		case "hue": return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
+		case "saturation": return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
+		case "lightness": return color.toFormat("hsla").getChannelValue("lightness").toString();
+		case "brightness": return color.toFormat("hsba").getChannelValue("brightness").toString();
+		case "red":
+		case "green":
+		case "blue": return color.toFormat("rgba").getChannelValue(channel).toString();
+		default: return color.getChannelValue(channel).toString();
+	}
+}
+function getChannelRange(color, channel) {
+	switch (channel) {
+		case "hex":
+			const minColor = parseColor("#000000");
+			const maxColor = parseColor("#FFFFFF");
+			return {
+				minValue: minColor.toHexInt(),
+				maxValue: maxColor.toHexInt(),
+				pageSize: 10,
+				step: 1
+			};
+		case "css": return;
+		case "hue":
+		case "saturation":
+		case "lightness": return color.toFormat("hsla").getChannelRange(channel);
+		case "brightness": return color.toFormat("hsba").getChannelRange(channel);
+		case "red":
+		case "green":
+		case "blue": return color.toFormat("rgba").getChannelRange(channel);
+		default: return color.getChannelRange(channel);
+	}
+}
+//#endregion
+//#region src/machines/color-picker/utils/get-slider-background.ts
+function getSliderBackgroundDirection(orientation, dir) {
+	if (orientation === "vertical") return "top";
+	else if (dir === "ltr") return "right";
+	else return "left";
+}
+const getSliderBackground = (props) => {
+	const { channel, value, dir, orientation } = props;
+	const bgDirection = getSliderBackgroundDirection(orientation, dir);
+	const { minValue, maxValue } = value.getChannelRange(channel);
+	switch (channel) {
+		case "hue": return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+		case "lightness": return `linear-gradient(to ${bgDirection}, ${value.withChannelValue(channel, minValue).toString("css")}, ${value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css")}, ${value.withChannelValue(channel, maxValue).toString("css")})`;
+		case "saturation":
+		case "brightness":
+		case "red":
+		case "green":
+		case "blue":
+		case "alpha": return `linear-gradient(to ${bgDirection}, ${value.withChannelValue(channel, minValue).toString("css")}, ${value.withChannelValue(channel, maxValue).toString("css")})`;
+		default: throw new Error("Unknown color channel: " + channel);
+	}
+};
+//#endregion
+//#region src/machines/color-picker/connect.ts
+function connect(service, normalize) {
+	const { context, send, prop, computed, state, scope } = service;
+	const value = context.get("value");
+	const format = context.get("format");
+	const areaValue = computed("areaValue");
+	const valueAsString = computed("valueAsString");
+	const disabled = computed("disabled");
+	const readOnly = !!prop("readOnly");
+	const invalid = !!prop("invalid");
+	const required = !!prop("required");
+	const interactive = computed("interactive");
+	const dragging = state.hasTag("dragging");
+	const open = state.hasTag("open");
+	const focused = state.hasTag("focused");
+	const getAreaChannels = (props) => {
+		const channels = areaValue.getChannels();
+		return {
+			xChannel: props.xChannel ?? channels[1],
+			yChannel: props.yChannel ?? channels[2]
+		};
+	};
+	const currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	function getSwatchTriggerState(props) {
+		const color = normalizeColor(props.value).toFormat(context.get("format"));
+		return {
+			value: color,
+			valueAsString: color.toString("hex"),
+			checked: color.isEqual(value),
+			disabled: props.disabled || !interactive
+		};
+	}
+	return {
+		dragging,
+		open,
+		valueAsString,
+		value,
+		inline: !!prop("inline"),
+		setOpen(nextOpen) {
+			if (prop("inline")) return;
+			if (state.hasTag("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value: normalizeColor(value),
+				src: "set-color"
+			});
+		},
+		getChannelValue(channel) {
+			return getChannelValue(value, channel);
+		},
+		getChannelValueText(channel, locale) {
+			return value.formatChannelValue(channel, locale);
+		},
+		setChannelValue(channel, channelValue) {
+			const color = value.withChannelValue(channel, channelValue);
+			send({
+				type: "VALUE.SET",
+				value: color,
+				src: "set-channel"
+			});
+		},
+		format: context.get("format"),
+		setFormat(format) {
+			const formatValue = value.toFormat(format);
+			send({
+				type: "VALUE.SET",
+				value: formatValue,
+				src: "set-format"
+			});
+		},
+		alpha: value.getChannelValue("alpha"),
+		setAlpha(alphaValue) {
+			const color = value.withChannelValue("alpha", alphaValue);
+			send({
+				type: "VALUE.SET",
+				value: color,
+				src: "set-alpha"
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				style: { "--value": value.toString("css") }
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				id: getLabelId(scope),
+				htmlFor: getHiddenInputId(scope),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				"data-required": dataAttr(required),
+				"data-focus": dataAttr(focused),
+				onClick(event) {
+					event.preventDefault();
+					query(getControlEl(scope), "[data-channel=hex]")?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				id: getControlId(scope),
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				"data-state": open ? "open" : "closed",
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				id: getTriggerId(scope),
+				dir: prop("dir"),
+				disabled,
+				"aria-label": `select color. current color is ${valueAsString}`,
+				"aria-controls": getContentId(scope),
+				"aria-labelledby": getLabelId(scope),
+				"aria-haspopup": prop("inline") ? void 0 : "dialog",
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				"aria-expanded": open,
+				"data-state": open ? "open" : "closed",
+				"data-focus": dataAttr(focused),
+				type: "button",
+				onClick() {
+					if (!interactive) return;
+					send({ type: "TRIGGER.CLICK" });
+				},
+				onBlur() {
+					if (!interactive) return;
+					send({ type: "TRIGGER.BLUR" });
+				},
+				style: { position: "relative" }
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				id: getPositionerId(scope),
+				dir: prop("dir"),
+				style: popperStyles.floating
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				id: getContentId(scope),
+				dir: prop("dir"),
+				role: prop("inline") ? void 0 : "dialog",
+				tabIndex: -1,
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				"data-state": open ? "open" : "closed",
+				hidden: !open
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getAreaProps(props = {}) {
+			const { xChannel, yChannel } = getAreaChannels(props);
+			const { areaStyles } = getColorAreaGradient(areaValue, {
+				xChannel,
+				yChannel,
+				dir: prop("dir")
+			});
+			return normalize.element({
+				...parts.area.attrs,
+				id: getAreaId(scope),
+				role: "group",
+				"data-invalid": dataAttr(invalid),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					if (isModifierKey(event)) return;
+					const point = getEventPoint(event);
+					send({
+						type: "AREA.POINTER_DOWN",
+						point,
+						channel: {
+							xChannel,
+							yChannel
+						},
+						id: "area"
+					});
+					event.preventDefault();
+				},
+				style: {
+					position: "relative",
+					touchAction: "none",
+					forcedColorAdjust: "none",
+					...areaStyles
+				}
+			});
+		},
+		getAreaBackgroundProps(props = {}) {
+			const { xChannel, yChannel } = getAreaChannels(props);
+			const { areaGradientStyles } = getColorAreaGradient(areaValue, {
+				xChannel,
+				yChannel,
+				dir: prop("dir")
+			});
+			return normalize.element({
+				...parts.areaBackground.attrs,
+				id: getAreaGradientId(scope),
+				"data-invalid": dataAttr(invalid),
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				style: {
+					position: "relative",
+					touchAction: "none",
+					forcedColorAdjust: "none",
+					...areaGradientStyles
+				}
+			});
+		},
+		getAreaThumbProps(props = {}) {
+			const { xChannel, yChannel } = getAreaChannels(props);
+			const channel = {
+				xChannel,
+				yChannel
+			};
+			const xPercent = areaValue.getChannelValuePercent(xChannel);
+			const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+			const finalXPercent = prop("dir") === "rtl" ? 1 - xPercent : xPercent;
+			const xValue = areaValue.getChannelValue(xChannel);
+			const yValue = areaValue.getChannelValue(yChannel);
+			const color = areaValue.withChannelValue("alpha", 1).toString("css");
+			return normalize.element({
+				...parts.areaThumb.attrs,
+				id: getAreaThumbId(scope),
+				dir: prop("dir"),
+				tabIndex: disabled ? void 0 : 0,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				role: "slider",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": xValue,
+				"aria-label": `${xChannel} and ${yChannel}`,
+				"aria-roledescription": "2d slider",
+				"aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
+				style: {
+					position: "absolute",
+					left: `${finalXPercent * 100}%`,
+					top: `${yPercent * 100}%`,
+					transform: "translate(-50%, -50%)",
+					touchAction: "none",
+					forcedColorAdjust: "none",
+					"--color": color,
+					background: color
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({
+						type: "AREA.FOCUS",
+						id: "area",
+						channel
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const step = getEventStep(event);
+					const exec = {
+						ArrowUp() {
+							send({
+								type: "AREA.ARROW_UP",
+								channel,
+								step
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "AREA.ARROW_DOWN",
+								channel,
+								step
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "AREA.ARROW_LEFT",
+								channel,
+								step
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "AREA.ARROW_RIGHT",
+								channel,
+								step
+							});
+						},
+						PageUp() {
+							send({
+								type: "AREA.PAGE_UP",
+								channel,
+								step
+							});
+						},
+						PageDown() {
+							send({
+								type: "AREA.PAGE_DOWN",
+								channel,
+								step
+							});
+						},
+						Escape(event) {
+							event.stopPropagation();
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		},
+		getTransparencyGridProps(props = {}) {
+			const { size = "12px" } = props;
+			return normalize.element({
+				...parts.transparencyGrid.attrs,
+				style: {
+					"--size": size,
+					width: "100%",
+					height: "100%",
+					position: "absolute",
+					backgroundColor: "#fff",
+					backgroundImage: "conic-gradient(#eeeeee 0 25%, transparent 0 50%, #eeeeee 0 75%, transparent 0)",
+					backgroundSize: "var(--size) var(--size)",
+					inset: "0px",
+					zIndex: "auto",
+					pointerEvents: "none"
+				}
+			});
+		},
+		getChannelSliderProps(props) {
+			const { orientation = "horizontal", channel, format } = props;
+			return normalize.element({
+				...parts.channelSlider.attrs,
+				"data-channel": channel,
+				"data-orientation": orientation,
+				role: "presentation",
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!isLeftClick(event)) return;
+					if (isModifierKey(event)) return;
+					const point = getEventPoint(event);
+					send({
+						type: "CHANNEL_SLIDER.POINTER_DOWN",
+						channel,
+						format,
+						point,
+						id: channel,
+						orientation
+					});
+					event.preventDefault();
+				},
+				style: {
+					position: "relative",
+					touchAction: "none"
+				}
+			});
+		},
+		getChannelSliderTrackProps(props) {
+			const { orientation = "horizontal", channel, format } = props;
+			const normalizedValue = format ? value.toFormat(format) : areaValue;
+			return normalize.element({
+				...parts.channelSliderTrack.attrs,
+				id: getChannelSliderTrackId(scope, channel),
+				role: "group",
+				"data-channel": channel,
+				"data-orientation": orientation,
+				style: {
+					position: "relative",
+					forcedColorAdjust: "none",
+					backgroundImage: getSliderBackground({
+						orientation,
+						channel,
+						dir: prop("dir"),
+						value: normalizedValue
+					})
+				}
+			});
+		},
+		getChannelSliderLabelProps(props) {
+			const { channel } = props;
+			return normalize.element({
+				...parts.channelSliderLabel.attrs,
+				"data-channel": channel,
+				onClick(event) {
+					if (!interactive) return;
+					event.preventDefault();
+					const thumbId = getChannelSliderThumbId(scope, channel);
+					scope.getById(thumbId)?.focus({ preventScroll: true });
+				},
+				style: {
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getChannelSliderValueTextProps(props) {
+			return normalize.element({
+				...parts.channelSliderValueText.attrs,
+				"data-channel": props.channel
+			});
+		},
+		getChannelSliderThumbProps(props) {
+			const { orientation = "horizontal", channel, format } = props;
+			const normalizedValue = format ? value.toFormat(format) : areaValue;
+			const channelRange = normalizedValue.getChannelRange(channel);
+			const channelValue = normalizedValue.getChannelValue(channel);
+			const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
+			const isRtl = prop("dir") === "rtl";
+			const finalOffset = orientation === "horizontal" && isRtl ? 1 - offset : offset;
+			const placementStyles = orientation === "horizontal" ? {
+				left: `${finalOffset * 100}%`,
+				top: "50%"
+			} : {
+				top: `${offset * 100}%`,
+				left: "50%"
+			};
+			return normalize.element({
+				...parts.channelSliderThumb.attrs,
+				id: getChannelSliderThumbId(scope, channel),
+				role: "slider",
+				"aria-label": channel,
+				tabIndex: disabled ? void 0 : 0,
+				"data-channel": channel,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": orientation,
+				"aria-disabled": dataAttr(disabled),
+				"aria-orientation": orientation,
+				"aria-valuemax": channelRange.maxValue,
+				"aria-valuemin": channelRange.minValue,
+				"aria-valuenow": channelValue,
+				"aria-valuetext": `${channel} ${channelValue}`,
+				style: {
+					forcedColorAdjust: "none",
+					position: "absolute",
+					background: getChannelDisplayColor(areaValue, channel).toString("css"),
+					...placementStyles
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({
+						type: "CHANNEL_SLIDER.FOCUS",
+						channel
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const step = getEventStep(event) * channelRange.step;
+					const exec = {
+						ArrowUp() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_UP",
+								channel,
+								step
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_DOWN",
+								channel,
+								step
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_LEFT",
+								channel,
+								step
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "CHANNEL_SLIDER.ARROW_RIGHT",
+								channel,
+								step
+							});
+						},
+						PageUp() {
+							send({
+								type: "CHANNEL_SLIDER.PAGE_UP",
+								channel
+							});
+						},
+						PageDown() {
+							send({
+								type: "CHANNEL_SLIDER.PAGE_DOWN",
+								channel
+							});
+						},
+						Home() {
+							send({
+								type: "CHANNEL_SLIDER.HOME",
+								channel
+							});
+						},
+						End() {
+							send({
+								type: "CHANNEL_SLIDER.END",
+								channel
+							});
+						},
+						Escape(event) {
+							event.stopPropagation();
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		},
+		getChannelInputProps(props) {
+			const { channel } = props;
+			const isTextField = channel === "hex" || channel === "css";
+			const channelRange = getChannelRange(value, channel);
+			return normalize.input({
+				...parts.channelInput.attrs,
+				dir: prop("dir"),
+				type: isTextField ? "text" : "number",
+				"data-channel": channel,
+				"aria-label": channel,
+				spellCheck: false,
+				autoComplete: "off",
+				disabled,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				readOnly,
+				defaultValue: getChannelValue(value, channel),
+				min: channelRange?.minValue,
+				max: channelRange?.maxValue,
+				step: channelRange?.step,
+				onBeforeInput(event) {
+					if (isTextField || !interactive) return;
+					if (event.currentTarget.value.match(/[^0-9.]/g)) event.preventDefault();
+				},
+				onFocus(event) {
+					if (!interactive) return;
+					send({
+						type: "CHANNEL_INPUT.FOCUS",
+						channel
+					});
+					event.currentTarget.select();
+				},
+				onBlur(event) {
+					if (!interactive) return;
+					const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
+					send({
+						type: "CHANNEL_INPUT.BLUR",
+						channel,
+						value,
+						isTextField
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (isComposingEvent(event)) return;
+					if (event.key === "Enter") {
+						const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
+						send({
+							type: "CHANNEL_INPUT.CHANGE",
+							channel,
+							value,
+							isTextField
+						});
+						event.preventDefault();
+					}
+				},
+				style: {
+					appearance: "none",
+					WebkitAppearance: "none",
+					MozAppearance: "textfield"
+				}
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				type: "text",
+				disabled,
+				name: prop("name"),
+				tabIndex: -1,
+				readOnly,
+				required,
+				id: getHiddenInputId(scope),
+				style: visuallyHiddenStyle,
+				defaultValue: valueAsString
+			});
+		},
+		getEyeDropperTriggerProps() {
+			return normalize.button({
+				...parts.eyeDropperTrigger.attrs,
+				type: "button",
+				dir: prop("dir"),
+				disabled,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				"aria-label": "Pick a color from the screen",
+				onClick() {
+					if (!interactive) return;
+					send({ type: "EYEDROPPER.CLICK" });
+				}
+			});
+		},
+		getSwatchGroupProps() {
+			return normalize.element({
+				...parts.swatchGroup.attrs,
+				role: "group"
+			});
+		},
+		getSwatchTriggerState,
+		getSwatchTriggerProps(props) {
+			const swatchState = getSwatchTriggerState(props);
+			return normalize.button({
+				...parts.swatchTrigger.attrs,
+				disabled: swatchState.disabled,
+				dir: prop("dir"),
+				type: "button",
+				"aria-label": `select ${swatchState.valueAsString} as the color`,
+				"data-state": swatchState.checked ? "checked" : "unchecked",
+				"data-value": swatchState.valueAsString,
+				"data-disabled": dataAttr(swatchState.disabled),
+				onClick() {
+					if (swatchState.disabled) return;
+					send({
+						type: "SWATCH_TRIGGER.CLICK",
+						value: swatchState.value
+					});
+				},
+				style: {
+					"--color": swatchState.valueAsString,
+					position: "relative"
+				}
+			});
+		},
+		getSwatchIndicatorProps(props) {
+			const swatchState = getSwatchTriggerState(props);
+			return normalize.element({
+				...parts.swatchIndicator.attrs,
+				dir: prop("dir"),
+				hidden: !swatchState.checked
+			});
+		},
+		getSwatchProps(props) {
+			const { respectAlpha = true } = props;
+			const swatchState = getSwatchTriggerState(props);
+			const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
+			return normalize.element({
+				...parts.swatch.attrs,
+				dir: prop("dir"),
+				"data-state": swatchState.checked ? "checked" : "unchecked",
+				"data-value": swatchState.valueAsString,
+				style: {
+					"--color": color,
+					position: "relative",
+					background: color
+				}
+			});
+		},
+		getFormatTriggerProps() {
+			return normalize.button({
+				...parts.formatTrigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				"aria-label": `change color format to ${getNextFormat(format)}`,
+				onClick(event) {
+					if (event.currentTarget.disabled) return;
+					const nextFormat = getNextFormat(format);
+					send({
+						type: "FORMAT.SET",
+						format: nextFormat,
+						src: "format-trigger"
+					});
+				}
+			});
+		},
+		getFormatSelectProps() {
+			return normalize.select({
+				...parts.formatSelect.attrs,
+				"aria-label": "change color format",
+				dir: prop("dir"),
+				defaultValue: prop("format"),
+				disabled,
+				onChange(event) {
+					const format = assertFormat(event.currentTarget.value);
+					send({
+						type: "FORMAT.SET",
+						format,
+						src: "format-select"
+					});
+				}
+			});
+		}
+	};
+}
+const formats = [
+	"hsba",
+	"hsla",
+	"rgba"
+];
+const formatRegex = new RegExp(`^(${formats.join("|")})$`);
+function getNextFormat(format) {
+	const index = formats.indexOf(format);
+	return formats[index + 1] ?? formats[0];
+}
+function assertFormat(format) {
+	if (formatRegex.test(format)) return format;
+	throw new Error(`Unsupported color format: ${format}`);
+}
+//#endregion
+//#region src/machines/color-picker/parse.ts
+const parse = (colorString) => {
+	return parseColor(colorString);
+};
+//#endregion
+//#region src/machines/color-picker/utils/is-valid-hex.ts
+const HEX_REGEX = /^[0-9a-fA-F]{3,8}$/;
+function isValidHex(value) {
+	return HEX_REGEX.test(value);
+}
+function prefixHex(value) {
+	if (value.startsWith("#")) return value;
+	if (isValidHex(value)) return `#${value}`;
+	return value;
+}
+//#endregion
+//#region src/machines/color-picker/machine.ts
+const { and } = createGuards();
+const hashObject = (obj) => {
+	let hash = "";
+	for (const key in obj) hash += `${key}:${obj[key] ?? ""};`;
+	return hash;
+};
+const DEFAULT_COLOR = parse("#000000");
+const machine = createMachine({
+	props({ props }) {
+		const color = props.value ?? props.defaultValue ?? DEFAULT_COLOR;
+		return {
+			dir: "ltr",
+			defaultValue: DEFAULT_COLOR,
+			defaultFormat: color.getFormat(),
+			openAutoFocus: true,
+			...props,
+			positioning: {
+				placement: "bottom",
+				...props.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") || prop("inline") ? "open" : "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue").toFormat(prop("format") ?? prop("defaultFormat")),
+				value: prop("value")?.toFormat(prop("format") ?? prop("defaultFormat")),
+				isEqual(a, b) {
+					return b != null && a.isEqual(b);
+				},
+				hash(a) {
+					return hashObject(a.toJSON());
+				},
+				onChange(value) {
+					const format = getContext().get("format");
+					prop("onValueChange")?.({
+						value,
+						valueAsString: value.toString(format)
+					});
+				}
+			})),
+			format: bindable(() => ({
+				defaultValue: prop("defaultFormat"),
+				value: prop("format"),
+				onChange(format) {
+					prop("onFormatChange")?.({ format });
+				}
+			})),
+			activeId: bindable(() => ({ defaultValue: null })),
+			activeChannel: bindable(() => ({ defaultValue: null })),
+			activeOrientation: bindable(() => ({ defaultValue: null })),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			restoreFocus: bindable(() => ({ defaultValue: true })),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 }))
+		};
+	},
+	computed: {
+		rtl: ({ prop }) => prop("dir") === "rtl",
+		disabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+		interactive: ({ prop }) => !(prop("disabled") || prop("readOnly")),
+		valueAsString: ({ context }) => context.get("value").toString(context.get("format")),
+		areaValue: ({ context }) => {
+			const format = context.get("format").startsWith("hsl") ? "hsla" : "hsba";
+			return context.get("value").toFormat(format);
+		}
+	},
+	effects: ["trackFormControl"],
+	watch({ prop, context, action, track }) {
+		track([() => context.hash("value")], () => {
+			action(["syncInputElements", "dispatchChangeEvent"]);
+		});
+		track([() => context.get("format")], () => {
+			action(["syncFormatSelectElement", "syncValueWithFormat"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"FORMAT.SET": { actions: ["setFormat"] },
+		"CHANNEL_INPUT.CHANGE": { actions: ["setChannelColorFromInput"] },
+		"EYEDROPPER.CLICK": { actions: ["openEyeDropper"] },
+		"SWATCH_TRIGGER.CLICK": { actions: ["setValue"] }
+	},
+	states: {
+		idle: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": {
+					target: "open",
+					actions: ["setInitialFocus"]
+				},
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen", "setInitialFocus"]
+				}],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen", "setInitialFocus"]
+				}],
+				"CHANNEL_INPUT.FOCUS": {
+					target: "focused",
+					actions: ["setActiveChannel"]
+				}
+			}
+		},
+		focused: {
+			id: "color-picker-focused",
+			tags: ["closed", "focused"],
+			on: {
+				"CONTROLLED.OPEN": {
+					target: "open",
+					actions: ["setInitialFocus"]
+				},
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen", "setInitialFocus"]
+				}],
+				"TRIGGER.CLICK": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen", "setInitialFocus"]
+				}],
+				"CHANNEL_INPUT.FOCUS": { actions: ["setActiveChannel"] },
+				"CHANNEL_INPUT.BLUR": {
+					target: "idle",
+					actions: ["setChannelColorFromInput"]
+				},
+				"TRIGGER.BLUR": { target: "idle" }
+			}
+		},
+		open: {
+			tags: ["open"],
+			effects: ["trackPositioning", "trackDismissableElement"],
+			initial: "idle",
+			on: {
+				"CONTROLLED.CLOSE": [{
+					guard: "shouldRestoreFocus",
+					target: "focused",
+					actions: ["setReturnFocus"]
+				}, { target: "idle" }],
+				INTERACT_OUTSIDE: [
+					{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					},
+					{
+						guard: "shouldRestoreFocus",
+						target: "focused",
+						actions: ["invokeOnClose", "setReturnFocus"]
+					},
+					{
+						target: "idle",
+						actions: ["invokeOnClose"]
+					}
+				],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "idle",
+					actions: ["invokeOnClose"]
+				}]
+			},
+			states: {
+				idle: { on: {
+					"TRIGGER.CLICK": [{
+						guard: "isOpenControlled",
+						actions: ["invokeOnClose"]
+					}, {
+						target: "#color-picker-focused",
+						actions: ["invokeOnClose"]
+					}],
+					"AREA.POINTER_DOWN": {
+						target: "dragging",
+						actions: [
+							"setActiveChannel",
+							"setAreaColorFromPoint",
+							"focusAreaThumb"
+						]
+					},
+					"AREA.FOCUS": { actions: ["setActiveChannel"] },
+					"CHANNEL_SLIDER.POINTER_DOWN": {
+						target: "dragging",
+						actions: [
+							"setActiveChannel",
+							"setChannelColorFromPoint",
+							"focusChannelThumb"
+						]
+					},
+					"CHANNEL_SLIDER.FOCUS": { actions: ["setActiveChannel"] },
+					"AREA.ARROW_LEFT": { actions: ["decrementAreaXChannel"] },
+					"AREA.ARROW_RIGHT": { actions: ["incrementAreaXChannel"] },
+					"AREA.ARROW_UP": { actions: ["incrementAreaYChannel"] },
+					"AREA.ARROW_DOWN": { actions: ["decrementAreaYChannel"] },
+					"AREA.PAGE_UP": { actions: ["incrementAreaXChannel"] },
+					"AREA.PAGE_DOWN": { actions: ["decrementAreaXChannel"] },
+					"CHANNEL_SLIDER.ARROW_LEFT": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_RIGHT": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_UP": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.ARROW_DOWN": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.PAGE_UP": { actions: ["incrementChannel"] },
+					"CHANNEL_SLIDER.PAGE_DOWN": { actions: ["decrementChannel"] },
+					"CHANNEL_SLIDER.HOME": { actions: ["setChannelToMin"] },
+					"CHANNEL_SLIDER.END": { actions: ["setChannelToMax"] },
+					"CHANNEL_INPUT.BLUR": { actions: ["setChannelColorFromInput"] },
+					"SWATCH_TRIGGER.CLICK": [
+						{
+							guard: and("isOpenControlled", "closeOnSelect"),
+							actions: ["setValue", "invokeOnClose"]
+						},
+						{
+							guard: "closeOnSelect",
+							target: "focused",
+							actions: [
+								"setValue",
+								"invokeOnClose",
+								"setReturnFocus"
+							]
+						},
+						{ actions: ["setValue"] }
+					]
+				} },
+				dragging: {
+					tags: ["dragging"],
+					exit: ["clearActiveChannel"],
+					effects: ["trackPointerMove", "disableTextSelection"],
+					on: {
+						"AREA.POINTER_MOVE": { actions: ["setAreaColorFromPoint", "focusAreaThumb"] },
+						"AREA.POINTER_UP": {
+							target: "idle",
+							actions: ["invokeOnChangeEnd"]
+						},
+						"CHANNEL_SLIDER.POINTER_MOVE": { actions: ["setChannelColorFromPoint", "focusChannelThumb"] },
+						"CHANNEL_SLIDER.POINTER_UP": {
+							target: "idle",
+							actions: ["invokeOnChangeEnd"]
+						}
+					}
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),
+			isOpenControlled: ({ prop }) => prop("open") != null || !!prop("inline"),
+			shouldRestoreFocus: ({ context }) => !!context.get("restoreFocus")
+		},
+		effects: {
+			trackPositioning({ context, prop, scope }) {
+				if (prop("inline")) return;
+				if (!context.get("currentPlacement")) context.set("currentPlacement", prop("positioning")?.placement);
+				const anchorEl = getTriggerEl(scope);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				return getPlacement(anchorEl, getPositionerEl$1, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			trackDismissableElement({ context, scope, prop, send }) {
+				if (prop("inline")) return;
+				const getContentEl$1 = () => getContentEl(scope);
+				return trackDismissableElement(getContentEl$1, {
+					type: "popover",
+					exclude: getTriggerEl(scope),
+					defer: true,
+					onInteractOutside(event) {
+						prop("onInteractOutside")?.(event);
+						if (event.defaultPrevented) return;
+						context.set("restoreFocus", !(event.detail.focusable || event.detail.contextmenu));
+					},
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onFocusOutside: prop("onFocusOutside"),
+					onDismiss() {
+						send({ type: "INTERACT_OUTSIDE" });
+					}
+				});
+			},
+			trackFormControl({ context, scope, send }) {
+				return trackFormControl(getHiddenInputEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						send({
+							type: "VALUE.SET",
+							value: context.initial("value"),
+							src: "form.reset"
+						});
+					}
+				});
+			},
+			trackPointerMove({ context, scope, event, send }) {
+				return trackPointerMove(scope.getDoc(), {
+					onPointerMove({ point }) {
+						send({
+							type: context.get("activeId") === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE",
+							point,
+							format: event.format,
+							orientation: context.get("activeOrientation") ?? void 0
+						});
+					},
+					onPointerUp() {
+						send({ type: context.get("activeId") === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP" });
+					}
+				});
+			},
+			disableTextSelection({ scope }) {
+				return disableTextSelection({
+					doc: scope.getDoc(),
+					target: getContentEl(scope)
+				});
+			}
+		},
+		actions: {
+			openEyeDropper({ scope, context, prop }) {
+				const win = scope.getWin();
+				if (!("EyeDropper" in win)) return;
+				new win.EyeDropper().open().then(({ sRGBHex }) => {
+					const format = context.get("value").getFormat();
+					const color = parseColor(sRGBHex).toFormat(format);
+					context.set("value", color);
+					return color;
+				}).then((value) => {
+					prop("onValueChangeEnd")?.({
+						value,
+						valueAsString: value.toString(context.get("format"))
+					});
+				}).catch(() => void 0);
+			},
+			setActiveChannel({ context, event }) {
+				context.set("activeId", event.id);
+				if (event.channel) context.set("activeChannel", event.channel);
+				if (event.orientation) context.set("activeOrientation", event.orientation);
+			},
+			clearActiveChannel({ context }) {
+				context.set("activeChannel", null);
+				context.set("activeId", null);
+				context.set("activeOrientation", null);
+			},
+			setAreaColorFromPoint({ context, event, computed, scope, prop }) {
+				const v = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
+				const { xChannel, yChannel } = event.channel || context.get("activeChannel");
+				const percent = getAreaValueFromPoint(scope, event.point, prop("dir"));
+				if (!percent) return;
+				const xValue = v.getChannelPercentValue(xChannel, percent.x);
+				const yValue = v.getChannelPercentValue(yChannel, 1 - percent.y);
+				const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+				context.set("value", color);
+			},
+			setChannelColorFromPoint({ context, event, computed, scope, prop }) {
+				const channel = event.channel || context.get("activeId");
+				const normalizedValue = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
+				const percent = getChannelSliderValueFromPoint(scope, event.point, channel, prop("dir"));
+				if (!percent) return;
+				const channelPercent = (event.orientation || context.get("activeOrientation") || "horizontal") === "horizontal" ? percent.x : percent.y;
+				const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
+				const color = normalizedValue.withChannelValue(channel, value);
+				context.set("value", color);
+			},
+			setValue({ context, event }) {
+				const format = context.get("format");
+				context.set("value", event.value.toFormat(format));
+			},
+			setFormat({ context, event }) {
+				context.set("format", event.format);
+			},
+			dispatchChangeEvent({ scope, computed }) {
+				dispatchInputValueEvent(getHiddenInputEl(scope), { value: computed("valueAsString") });
+			},
+			syncInputElements({ context, scope }) {
+				syncChannelInputs(scope, context.get("value"));
+			},
+			invokeOnChangeEnd({ context, prop, computed }) {
+				prop("onValueChangeEnd")?.({
+					value: context.get("value"),
+					valueAsString: computed("valueAsString")
+				});
+			},
+			setChannelColorFromInput({ context, event, scope, prop }) {
+				const { channel, isTextField, value } = event;
+				const currentAlpha = context.get("value").getChannelValue("alpha");
+				let color;
+				if (channel === "alpha") {
+					let valueAsNumber = parseFloat(value);
+					valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber;
+					color = context.get("value").withChannelValue("alpha", valueAsNumber);
+				} else if (isTextField) color = tryCatch(() => {
+					return parse(channel === "hex" ? prefixHex(value) : value).withChannelValue("alpha", currentAlpha);
+				}, () => context.get("value"));
+				else {
+					const current = context.get("value").toFormat(context.get("format"));
+					const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
+					color = current.withChannelValue(channel, valueAsNumber);
+				}
+				syncChannelInputs(scope, context.get("value"), color);
+				context.set("value", color);
+				prop("onValueChangeEnd")?.({
+					value: color,
+					valueAsString: color.toString(context.get("format"))
+				});
+			},
+			incrementChannel({ context, event }) {
+				const color = context.get("value").incrementChannel(event.channel, event.step);
+				context.set("value", color);
+			},
+			decrementChannel({ context, event }) {
+				const color = context.get("value").decrementChannel(event.channel, event.step);
+				context.set("value", color);
+			},
+			incrementAreaXChannel({ context, event, computed }) {
+				const { xChannel } = event.channel;
+				const color = computed("areaValue").incrementChannel(xChannel, event.step);
+				context.set("value", color);
+			},
+			decrementAreaXChannel({ context, event, computed }) {
+				const { xChannel } = event.channel;
+				const color = computed("areaValue").decrementChannel(xChannel, event.step);
+				context.set("value", color);
+			},
+			incrementAreaYChannel({ context, event, computed }) {
+				const { yChannel } = event.channel;
+				const color = computed("areaValue").incrementChannel(yChannel, event.step);
+				context.set("value", color);
+			},
+			decrementAreaYChannel({ context, event, computed }) {
+				const { yChannel } = event.channel;
+				const color = computed("areaValue").decrementChannel(yChannel, event.step);
+				context.set("value", color);
+			},
+			setChannelToMax({ context, event }) {
+				const value = context.get("value");
+				const range = value.getChannelRange(event.channel);
+				const color = value.withChannelValue(event.channel, range.maxValue);
+				context.set("value", color);
+			},
+			setChannelToMin({ context, event }) {
+				const value = context.get("value");
+				const range = value.getChannelRange(event.channel);
+				const color = value.withChannelValue(event.channel, range.minValue);
+				context.set("value", color);
+			},
+			focusAreaThumb({ scope }) {
+				raf(() => {
+					getAreaThumbEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			focusChannelThumb({ event, scope }) {
+				raf(() => {
+					getChannelSliderThumbEl(scope, event.channel)?.focus({ preventScroll: true });
+				});
+			},
+			setInitialFocus({ prop, scope }) {
+				if (!prop("openAutoFocus")) return;
+				raf(() => {
+					getInitialFocus({
+						root: getContentEl(scope),
+						getInitialEl: prop("initialFocusEl")
+					})?.focus({ preventScroll: true });
+				});
+			},
+			setReturnFocus({ scope }) {
+				raf(() => {
+					getTriggerEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			syncFormatSelectElement({ context, scope }) {
+				syncFormatSelect(scope, context.get("format"));
+			},
+			syncValueWithFormat({ context }) {
+				const value = context.get("value");
+				const newValue = value.toFormat(context.get("format"));
+				if (newValue.isEqual(value)) return;
+				context.set("value", newValue);
+			},
+			invokeOnOpen({ prop, context }) {
+				if (prop("inline")) return;
+				prop("onOpenChange")?.({
+					open: true,
+					value: context.get("value")
+				});
+			},
+			invokeOnClose({ prop, context }) {
+				if (prop("inline")) return;
+				prop("onOpenChange")?.({
+					open: false,
+					value: context.get("value")
+				});
+			},
+			toggleVisibility({ prop, event, send }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+function syncChannelInputs(scope, currentValue, nextValue) {
+	const channelInputEls = getChannelInputEls(scope);
+	raf(() => {
+		channelInputEls.forEach((inputEl) => {
+			const channel = inputEl.dataset.channel;
+			setElementValue(inputEl, getChannelValue(nextValue || currentValue, channel));
+		});
+	});
+}
+function syncFormatSelect(scope, format) {
+	const selectEl = getFormatSelectEl(scope);
+	if (!selectEl) return;
+	raf(() => setElementValue(selectEl, format));
+}
+//#endregion
+//#region src/machines/color-picker/props.ts
+const props = createProps()([
+	"closeOnSelect",
+	"dir",
+	"disabled",
+	"format",
+	"defaultFormat",
+	"getRootNode",
+	"id",
+	"ids",
+	"initialFocusEl",
+	"inline",
+	"name",
+	"positioning",
+	"onFocusOutside",
+	"onFormatChange",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onValueChange",
+	"onValueChangeEnd",
+	"defaultOpen",
+	"open",
+	"positioning",
+	"required",
+	"readOnly",
+	"value",
+	"defaultValue",
+	"invalid",
+	"openAutoFocus"
+]);
+const splitProps = createSplitProps(props);
+const areaProps = createProps()(["xChannel", "yChannel"]);
+const splitAreaProps = createSplitProps(areaProps);
+const channelProps = createProps()(["channel", "orientation"]);
+const splitChannelProps = createSplitProps(channelProps);
+const swatchTriggerProps = createProps()(["value", "disabled"]);
+const splitSwatchTriggerProps = createSplitProps(swatchTriggerProps);
+const swatchProps = createProps()(["value", "respectAlpha"]);
+const splitSwatchProps = createSplitProps(swatchProps);
+const transparencyGridProps = createProps()(["size"]);
+const splitTransparencyGridProps = createSplitProps(transparencyGridProps);
+//#endregion
+export { anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };