@vizejs/ui 0.426.3 → 0.427.0

package/dist/color-picker-Czg3QR-G.mjs

@@ -0,0 +1,1856 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { t as createCollectionRegistry } from "./collection-Cncgrq4U.mjs";
+import { n as useCompositeNavigation } from "./composite-navigation-D6WKS_BY.mjs";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, renderSlot, shallowRef, unref, useTemplateRef, watch } from "vue";
+//#region src/families/form/color-picker/color-picker-color.ts
+/** Fully transparent-free black used when no parseable color is supplied. */
+const DEFAULT_COLOR = Object.freeze({
+	hue: 0,
+	saturation: 0,
+	brightness: 0,
+	alpha: 1
+});
+const COLOR_FORMATS = new Set([
+	"hex",
+	"hex8",
+	"hsb",
+	"hsl",
+	"rgb"
+]);
+const CHANNEL_RANGES = Object.freeze({
+	hue: Object.freeze({
+		min: 0,
+		max: 360,
+		step: 1,
+		pageStep: 15
+	}),
+	saturation: Object.freeze({
+		min: 0,
+		max: 100,
+		step: 1,
+		pageStep: 10
+	}),
+	brightness: Object.freeze({
+		min: 0,
+		max: 100,
+		step: 1,
+		pageStep: 10
+	}),
+	lightness: Object.freeze({
+		min: 0,
+		max: 100,
+		step: 1,
+		pageStep: 10
+	}),
+	red: Object.freeze({
+		min: 0,
+		max: 255,
+		step: 1,
+		pageStep: 16
+	}),
+	green: Object.freeze({
+		min: 0,
+		max: 255,
+		step: 1,
+		pageStep: 16
+	}),
+	blue: Object.freeze({
+		min: 0,
+		max: 255,
+		step: 1,
+		pageStep: 16
+	}),
+	alpha: Object.freeze({
+		min: 0,
+		max: 1,
+		step: .01,
+		pageStep: .1
+	})
+});
+const CHANNEL_LABELS = Object.freeze({
+	hue: "Hue",
+	saturation: "Saturation",
+	brightness: "Brightness",
+	lightness: "Lightness",
+	red: "Red",
+	green: "Green",
+	blue: "Blue",
+	alpha: "Alpha"
+});
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+const HEX = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+const FUNCTION = /^([a-z]+)\(\s*([^()]*?)\s*\)$/i;
+const ANGLE = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(deg|grad|rad|turn)?$/i;
+function clamp(value, min, max) {
+	if (Number.isNaN(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+function wrapHue(value) {
+	if (!Number.isFinite(value)) return 0;
+	const wrapped = value % 360;
+	return wrapped < 0 ? wrapped + 360 : wrapped === 0 ? 0 : wrapped;
+}
+function round(value, digits = 0) {
+	const factor = 10 ** digits;
+	const rounded = Math.round(value * factor) / factor;
+	return Object.is(rounded, -0) ? 0 : rounded;
+}
+/** Whether an unknown value names a supported {@link ColorFormat}. */
+function isColorFormat(value) {
+	return typeof value === "string" && COLOR_FORMATS.has(value);
+}
+/** Whether an unknown value is a structurally valid {@link ColorValue}. */
+function isColorValue(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const hue = Reflect.get(value, "hue");
+	const saturation = Reflect.get(value, "saturation");
+	const brightness = Reflect.get(value, "brightness");
+	const alpha = Reflect.get(value, "alpha");
+	return typeof hue === "number" && typeof saturation === "number" && typeof brightness === "number" && typeof alpha === "number" && [
+		hue,
+		saturation,
+		brightness,
+		alpha
+	].every(Number.isFinite);
+}
+/**
+* Create a frozen, normalized color. Hue wraps into `[0, 360)`, percentages
+* clamp to `[0, 100]`, and alpha clamps to `[0, 1]`. Non-finite inputs fall
+* back to the channel minimum (alpha falls back to `1`).
+*/
+function createColor(input) {
+	const alpha = input.alpha ?? 1;
+	return Object.freeze({
+		hue: wrapHue(input.hue),
+		saturation: clamp(Number.isFinite(input.saturation) ? input.saturation : 0, 0, 100),
+		brightness: clamp(Number.isFinite(input.brightness) ? input.brightness : 0, 0, 100),
+		alpha: clamp(Number.isFinite(alpha) ? alpha : 1, 0, 1)
+	});
+}
+/** Convert a color to unrounded sRGB channels. */
+function toRgba(color) {
+	const saturation = color.saturation / 100;
+	const brightness = color.brightness / 100;
+	const channel = (offset) => {
+		const k = (offset + color.hue / 60) % 6;
+		return brightness - brightness * saturation * Math.max(0, Math.min(k, 4 - k, 1));
+	};
+	return Object.freeze({
+		red: channel(5) * 255,
+		green: channel(3) * 255,
+		blue: channel(1) * 255,
+		alpha: color.alpha
+	});
+}
+/**
+* Create a color from sRGB channels. Achromatic results keep `fallback`'s hue
+* (and black keeps its saturation) so editing never snaps hue back to red.
+*/
+function fromRgba(input, fallback = DEFAULT_COLOR) {
+	const red = clamp(input.red, 0, 255) / 255;
+	const green = clamp(input.green, 0, 255) / 255;
+	const blue = clamp(input.blue, 0, 255) / 255;
+	const max = Math.max(red, green, blue);
+	const delta = max - Math.min(red, green, blue);
+	let hue = fallback.hue;
+	if (delta > 0) if (max === red) hue = 60 * ((green - blue) / delta % 6);
+	else if (max === green) hue = 60 * ((blue - red) / delta + 2);
+	else hue = 60 * ((red - green) / delta + 4);
+	const saturation = max === 0 ? fallback.saturation : delta / max * 100;
+	return createColor({
+		hue,
+		saturation,
+		brightness: max * 100,
+		alpha: input.alpha
+	});
+}
+/** Convert a color to unrounded HSL channels. */
+function toHsla(color) {
+	const saturation = color.saturation / 100;
+	const brightness = color.brightness / 100;
+	const lightness = brightness * (1 - saturation / 2);
+	const divisor = Math.min(lightness, 1 - lightness);
+	return Object.freeze({
+		hue: color.hue,
+		saturation: divisor === 0 ? 0 : (brightness - lightness) / divisor * 100,
+		lightness: lightness * 100,
+		alpha: color.alpha
+	});
+}
+/**
+* Create a color from HSL channels. Black keeps `fallback`'s HSB saturation so
+* a lightness drag through `0%` does not discard the chosen saturation.
+*/
+function fromHsla(input, fallback = DEFAULT_COLOR) {
+	const saturation = clamp(input.saturation, 0, 100) / 100;
+	const lightness = clamp(input.lightness, 0, 100) / 100;
+	const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+	return createColor({
+		hue: input.hue,
+		saturation: brightness === 0 ? fallback.saturation : 2 * (1 - lightness / brightness) * 100,
+		brightness: brightness * 100,
+		alpha: input.alpha
+	});
+}
+function parseNumber(token) {
+	return NUMBER.test(token) ? Number(token) : null;
+}
+function parsePercentOrNumber(token, percentScale) {
+	if (token.endsWith("%")) {
+		const value = parseNumber(token.slice(0, -1));
+		return value === null ? null : value / 100 * percentScale;
+	}
+	return parseNumber(token);
+}
+function parseAlpha(token) {
+	if (token === void 0) return 1;
+	const value = parsePercentOrNumber(token, 1);
+	return value === null ? null : clamp(value, 0, 1);
+}
+function parseHue(token) {
+	const match = ANGLE.exec(token);
+	if (match === null) return null;
+	const value = Number(match[1]);
+	switch ((match[2] ?? "deg").toLowerCase()) {
+		case "grad": return value * 360 / 400;
+		case "rad": return value * 180 / Math.PI;
+		case "turn": return value * 360;
+		default: return value;
+	}
+}
+/** Split function arguments into three channel tokens and an optional alpha token. */
+function splitArguments(body) {
+	if (body.includes(",")) {
+		const parts = body.split(",").map((part) => part.trim());
+		if (parts.some((part) => part.length === 0 || /\s/.test(part))) return null;
+		if (parts.length === 3) return [
+			parts[0] ?? "",
+			parts[1] ?? "",
+			parts[2] ?? "",
+			void 0
+		];
+		if (parts.length === 4) return [
+			parts[0] ?? "",
+			parts[1] ?? "",
+			parts[2] ?? "",
+			parts[3]
+		];
+		return null;
+	}
+	const slash = body.split("/");
+	if (slash.length > 2) return null;
+	const channels = (slash[0] ?? "").trim().split(/\s+/);
+	if (channels.length !== 3) return null;
+	const alpha = slash[1]?.trim();
+	if (alpha !== void 0 && (alpha.length === 0 || /\s/.test(alpha))) return null;
+	return [
+		channels[0] ?? "",
+		channels[1] ?? "",
+		channels[2] ?? "",
+		alpha
+	];
+}
+function parseHex(digits) {
+	const expanded = digits.length <= 4 ? digits.replaceAll(/[\da-f]/gi, "$&$&").toLowerCase() : digits.toLowerCase();
+	const read = (index) => Number.parseInt(expanded.slice(index, index + 2), 16);
+	return fromRgba({
+		red: read(0),
+		green: read(2),
+		blue: read(4),
+		alpha: expanded.length === 8 ? read(6) / 255 : 1
+	});
+}
+/**
+* Parse a CSS color string into a {@link ColorValue}.
+*
+* Supports `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`/`rgba()` and
+* `hsl()`/`hsla()` in both legacy comma and modern space/slash syntax
+* (numbers or percentages, hue units `deg`/`grad`/`rad`/`turn`), the non-CSS
+* `hsb()`/`hsba()` notation, and the `transparent` keyword. Out-of-range
+* channels clamp exactly as CSS does. Returns `null` for anything else.
+*/
+function parseColor(input) {
+	const source = input.trim();
+	if (source.length === 0) return null;
+	if (source.toLowerCase() === "transparent") return createColor({
+		...DEFAULT_COLOR,
+		alpha: 0
+	});
+	const hex = HEX.exec(source);
+	if (hex !== null) return parseHex(hex[1] ?? "");
+	const call = FUNCTION.exec(source);
+	if (call === null) return null;
+	const name = (call[1] ?? "").toLowerCase();
+	const args = splitArguments(call[2] ?? "");
+	if (args === null) return null;
+	const alpha = parseAlpha(args[3]);
+	if (alpha === null) return null;
+	if (name === "rgb" || name === "rgba") {
+		const red = parsePercentOrNumber(args[0], 255);
+		const green = parsePercentOrNumber(args[1], 255);
+		const blue = parsePercentOrNumber(args[2], 255);
+		if (red === null || green === null || blue === null) return null;
+		return fromRgba({
+			red,
+			green,
+			blue,
+			alpha
+		});
+	}
+	if (name === "hsl" || name === "hsla" || name === "hsb" || name === "hsba") {
+		const hue = parseHue(args[0]);
+		const second = parsePercentOrNumber(args[1], 100);
+		const third = parsePercentOrNumber(args[2], 100);
+		if (hue === null || second === null || third === null) return null;
+		if (name.startsWith("hsb")) return createColor({
+			hue,
+			saturation: second,
+			brightness: third,
+			alpha
+		});
+		return fromHsla({
+			hue: wrapHue(hue),
+			saturation: clamp(second, 0, 100),
+			lightness: clamp(third, 0, 100),
+			alpha
+		});
+	}
+	return null;
+}
+function formatAlpha(alpha) {
+	return String(round(alpha, 3));
+}
+function hexPair(value) {
+	return Math.round(clamp(value, 0, 255)).toString(16).padStart(2, "0");
+}
+/** Serialize a color into one {@link ColorFormat}. */
+function formatColor(color, format = "hex") {
+	switch (format) {
+		case "hex":
+		case "hex8": {
+			const rgb = toRgba(color);
+			const base = `#${hexPair(rgb.red)}${hexPair(rgb.green)}${hexPair(rgb.blue)}`;
+			const alpha = Math.round(color.alpha * 255);
+			return format === "hex8" || alpha < 255 ? `${base}${hexPair(alpha)}` : base;
+		}
+		case "rgb": {
+			const rgb = toRgba(color);
+			const body = `${Math.round(rgb.red)} ${Math.round(rgb.green)} ${Math.round(rgb.blue)}`;
+			return color.alpha < 1 ? `rgb(${body} / ${formatAlpha(color.alpha)})` : `rgb(${body})`;
+		}
+		case "hsl": {
+			const hsl = toHsla(color);
+			const body = `${round(hsl.hue) % 360} ${round(hsl.saturation)}% ${round(hsl.lightness)}%`;
+			return color.alpha < 1 ? `hsl(${body} / ${formatAlpha(color.alpha)})` : `hsl(${body})`;
+		}
+		case "hsb": {
+			const body = `${round(color.hue) % 360} ${round(color.saturation)}% ${round(color.brightness)}%`;
+			return color.alpha < 1 ? `hsb(${body} / ${formatAlpha(color.alpha)})` : `hsb(${body})`;
+		}
+	}
+}
+/** Serialize a color as a CSS `rgb()` string suitable for custom properties. */
+function toCssColor(color) {
+	return formatColor(color, "rgb");
+}
+/**
+* Whether two colors render identically at 8-bit sRGB precision, including
+* alpha quantized to 1/255 (the precision of `#rrggbbaa`).
+*/
+function colorEquals(left, right) {
+	return formatColor(left, "hex8") === formatColor(right, "hex8");
+}
+/** Numeric range and keyboard increments for a channel. */
+function getColorChannelRange(channel) {
+	return CHANNEL_RANGES[channel];
+}
+/** English default label for a channel, used when no accessible name is supplied. */
+function getColorChannelLabel(channel) {
+	return CHANNEL_LABELS[channel];
+}
+/**
+* Resolve the space a channel is read in. `lightness` always uses HSL, the RGB
+* channels always use RGB, and `hue`/`saturation`/`alpha` use `space` unless it
+* cannot own them (`saturation` in RGB falls back to HSB).
+*/
+function resolveColorChannelSpace(channel, space = "hsb") {
+	if (channel === "lightness") return "hsl";
+	if (channel === "brightness") return "hsb";
+	if (channel === "red" || channel === "green" || channel === "blue") return "rgb";
+	if (channel === "saturation" && space === "rgb") return "hsb";
+	return space;
+}
+/** Read one unrounded channel value in the given space. */
+function getColorChannelValue(color, channel, space) {
+	const key = channel;
+	const resolved = resolveColorChannelSpace(key, space);
+	switch (key) {
+		case "alpha": return color.alpha;
+		case "hue": return color.hue;
+		case "brightness": return color.brightness;
+		case "saturation": return resolved === "hsl" ? toHsla(color).saturation : color.saturation;
+		case "lightness": return toHsla(color).lightness;
+		case "red": return toRgba(color).red;
+		case "green": return toRgba(color).green;
+		case "blue": return toRgba(color).blue;
+	}
+}
+/** Return a new color with one channel replaced (clamped to its range). */
+function setColorChannelValue(color, channel, value, space) {
+	const key = channel;
+	const range = CHANNEL_RANGES[key];
+	const next = clamp(Number.isFinite(value) ? value : range.min, range.min, range.max);
+	const resolved = resolveColorChannelSpace(key, space);
+	switch (key) {
+		case "alpha": return createColor({
+			...color,
+			alpha: next
+		});
+		case "hue": return createColor({
+			...color,
+			hue: next === 360 ? 359.999 : next
+		});
+		case "brightness": return createColor({
+			...color,
+			brightness: next
+		});
+		case "saturation": return resolved === "hsl" ? fromHsla({
+			...toHsla(color),
+			saturation: next
+		}, color) : createColor({
+			...color,
+			saturation: next
+		});
+		case "lightness": return fromHsla({
+			...toHsla(color),
+			lightness: next
+		}, color);
+		case "red": return fromRgba({
+			...toRgba(color),
+			red: next
+		}, color);
+		case "green": return fromRgba({
+			...toRgba(color),
+			green: next
+		}, color);
+		case "blue": return fromRgba({
+			...toRgba(color),
+			blue: next
+		}, color);
+	}
+}
+/** Snap a channel value to its step grid and range. */
+function snapColorChannelValue(channel, value, step) {
+	const range = CHANNEL_RANGES[channel];
+	const size = step !== void 0 && Number.isFinite(step) && step > 0 ? step : range.step;
+	const snapped = Math.round((value - range.min) / size) * size + range.min;
+	const decimals = (String(size).split(".")[1] ?? "").length;
+	return round(clamp(snapped, range.min, range.max), decimals);
+}
+/**
+* Human-readable channel value for `aria-valuetext`, e.g. `"Hue 210°"`,
+* `"Saturation 40%"`, `"Red 128"`, or `"Alpha 50%"`.
+*/
+function formatColorChannelValue(channel, value, label = CHANNEL_LABELS[channel]) {
+	switch (channel) {
+		case "hue": return `${label} ${round(value)}°`;
+		case "alpha": return `${label} ${round(value * 100)}%`;
+		case "red":
+		case "green":
+		case "blue": return `${label} ${round(value)}`;
+		default: return `${label} ${round(value)}%`;
+	}
+}
+/**
+* Linear gradient that previews one channel's full range at the current
+* color, e.g. for a slider track background. Hue uses full saturation and
+* brightness; every other channel interpolates exactly along its range.
+*/
+function getColorChannelGradient(color, channel, space, direction = "to right") {
+	const range = CHANNEL_RANGES[channel];
+	let stops;
+	if (channel === "hue") stops = [
+		0,
+		60,
+		120,
+		180,
+		240,
+		300,
+		359.999
+	].map((hue) => toCssColor(createColor({
+		hue,
+		saturation: 100,
+		brightness: 100
+	})));
+	else if (channel === "lightness" || channel === "saturation" && space === "hsl") {
+		const at = (fraction) => toCssColor(setColorChannelValue(color, channel, range.min + (range.max - range.min) * fraction, resolveColorChannelSpace(channel, space)));
+		stops = [
+			at(0),
+			at(.5),
+			at(1)
+		];
+	} else stops = [range.min, range.max].map((value) => toCssColor(setColorChannelValue(color, channel, value, resolveColorChannelSpace(channel, space))));
+	return `linear-gradient(${direction}, ${stops.join(", ")})`;
+}
+//#endregion
+//#region src/families/form/color-picker/color-picker-context.ts
+const colorPickerContext = createContext("ColorPicker");
+//#endregion
+//#region src/families/form/color-picker/color-picker-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$6 = [
+	"id",
+	"dir",
+	"data-state",
+	"data-disabled",
+	"data-readonly",
+	"data-value"
+];
+const _hoisted_2$2 = [
+	"name",
+	"form",
+	"value",
+	"disabled",
+	"data-required"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-root.vue
+var color_picker_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: String,
+			required: false,
+			default: "#000000"
+		},
+		format: {
+			type: String,
+			required: false,
+			default: "hex"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		form: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		messages: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"commit"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const hiddenInput = useTemplateRef("hiddenInput");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "color-picker"
+		});
+		const formatState = computed(() => __props.format);
+		const disabledState = computed(() => __props.disabled);
+		const readOnlyState = computed(() => __props.readOnly);
+		const dirState = computed(() => __props.dir);
+		const editable = computed(() => !__props.disabled && !__props.readOnly);
+		const state = computed(() => {
+			if (__props.disabled) return "disabled";
+			return __props.readOnly ? "readonly" : "interactive";
+		});
+		const valueState = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue
+		});
+		const internal = shallowRef(parseColor(valueState.value.value) ?? DEFAULT_COLOR);
+		const color = computed(() => {
+			const parsed = parseColor(valueState.value.value);
+			if (parsed === null) return internal.value;
+			return formatColor(parsed, formatState.value) === formatColor(internal.value, formatState.value) ? internal.value : parsed;
+		});
+		const value = computed(() => formatColor(color.value, formatState.value));
+		const rootStyle = computed(() => {
+			const hsl = toHsla(color.value);
+			return {
+				"--vize-ui-color-picker-color": toCssColor(color.value),
+				"--vize-ui-color-picker-opaque-color": toCssColor(setColorChannelValue(color.value, "alpha", 1)),
+				"--vize-ui-color-picker-hue": `hsl(${Math.round(hsl.hue)} 100% 50%)`,
+				"--vize-ui-color-picker-alpha": String(Math.round(color.value.alpha * 1e3) / 1e3)
+			};
+		});
+		const slotState = computed(() => ({
+			color: color.value,
+			disabled: disabledState.value,
+			format: formatState.value,
+			readOnly: readOnlyState.value,
+			state: state.value,
+			value: value.value
+		}));
+		watch(() => valueState.value.value, (next) => {
+			const parsed = parseColor(next);
+			if (parsed !== null && formatColor(parsed, __props.format) !== formatColor(internal.value, __props.format)) internal.value = parsed;
+		}, { flush: "sync" });
+		function readColor() {
+			return color.value;
+		}
+		function applyColor(next, source, nativeEvent) {
+			const previousColor = readColor();
+			if (colorEquals(previousColor, next) && previousColor.hue === next.hue) {
+				internal.value = next;
+				return false;
+			}
+			internal.value = next;
+			const serialized = formatColor(next, formatState.value);
+			const changed = serialized !== value.value;
+			valueState.set(serialized);
+			if (changed) emit("update:modelValue", serialized);
+			emit("change", serialized, {
+				color: next,
+				previousColor,
+				source,
+				nativeEvent
+			});
+			return changed;
+		}
+		function setColorFromPart(next, source, nativeEvent) {
+			if (!editable.value) return false;
+			return applyColor(next, source, nativeEvent);
+		}
+		function commit(_source, _nativeEvent) {
+			emit("commit", value.value, color.value);
+		}
+		function setColor(next) {
+			const parsed = typeof next === "string" ? parseColor(next) : isColorValue(next) ? next : null;
+			if (parsed === null) return false;
+			return applyColor(parsed, "api", null);
+		}
+		function reset() {
+			return applyColor(parseColor(__props.defaultValue) ?? DEFAULT_COLOR, "form-reset", null);
+		}
+		watch(hiddenInput, (input, _previous, onCleanup) => {
+			const owner = input?.form;
+			if (owner === void 0 || owner === null) return;
+			const onReset = (event) => {
+				if (!valueState.controlled.value) applyColor(parseColor(__props.defaultValue) ?? DEFAULT_COLOR, "form-reset", event);
+			};
+			owner.addEventListener("reset", onReset);
+			onCleanup(() => owner.removeEventListener("reset", onReset));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		function channelLabel(channel) {
+			return __props.messages?.channelLabel?.(channel) ?? getColorChannelLabel(channel);
+		}
+		colorPickerContext.provide({
+			areaLabel: (x, y) => __props.messages?.areaLabel?.(channelLabel(x), channelLabel(y)) ?? `${channelLabel(x)} and ${channelLabel(y)}`,
+			channelLabel,
+			channelValueText: (channel, channelValue) => __props.messages?.channelValueText?.(channel, channelValue, channelLabel(channel)) ?? formatColorChannelValue(channel, channelValue, channelLabel(channel)),
+			color,
+			commit,
+			dir: dirState,
+			disabled: disabledState,
+			editable,
+			format: formatState,
+			getPartId: (part) => deriveDeterministicId(baseId.value, part),
+			id: baseId,
+			readOnly: readOnlyState,
+			setColor: setColorFromPart,
+			state,
+			value
+		});
+		__expose({
+			color,
+			disabled: disabledState,
+			element,
+			format: formatState,
+			id: baseId,
+			readOnly: readOnlyState,
+			reset,
+			setColor,
+			state,
+			value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				ref_key: "element",
+				ref: element,
+				role: "group",
+				dir: dirState.value,
+				"data-vize-ui": "color-picker-root",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-readonly": readOnlyState.value ? "true" : void 0,
+				"data-value": value.value,
+				style: normalizeStyle(rootStyle.value)
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true), __props.name !== void 0 ? (openBlock(), createElementBlock("input", {
+				key: 0,
+				ref_key: "hiddenInput",
+				ref: hiddenInput,
+				type: "hidden",
+				name: __props.name,
+				form: __props.form,
+				value: value.value,
+				disabled: disabledState.value,
+				"data-required": __props.required ? "true" : void 0,
+				"data-vize-ui": "color-picker-input"
+			}, null, 8, _hoisted_2$2)) : createCommentVNode("v-if", true)], 12, _hoisted_1$6);
+		};
+	}
+}), [["__scopeId", "data-v-a23b156c"]]);
+//#endregion
+//#region src/families/form/color-picker/color-picker-interaction.ts
+function clampUnit(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(1, Math.max(0, value));
+}
+/** Convert client coordinates into clamped fractions of `rect`. */
+function pointerFraction(rect, clientX, clientY, dir = "ltr") {
+	const rawX = rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+	const rawY = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
+	const x = clampUnit(rawX);
+	return {
+		x: dir === "rtl" ? 1 - x : x,
+		y: 1 - clampUnit(rawY)
+	};
+}
+/** Map a unit fraction onto a channel range. */
+function fractionToValue(range, fraction) {
+	return range.min + (range.max - range.min) * clampUnit(fraction);
+}
+/** Map a channel value onto a `0`–`100` percentage of its range. */
+function valueToPercent(range, value) {
+	const span = range.max - range.min;
+	if (span <= 0) return 0;
+	return Math.round(clampUnit((value - range.min) / span) * 1e4) / 100;
+}
+/**
+* Resolve a keydown into a slider intent, or `null` for unrelated keys.
+*
+* - Arrow keys move one `step` (Shift: one `pageStep`) on their axis; for a
+*   one-dimensional slider every arrow maps to its single axis.
+* - Page Up / Page Down move one `pageStep` on the vertical axis (2D) or the
+*   only axis (1D).
+* - Home / End jump to the minimum / maximum of the horizontal axis (2D) or
+*   the only axis (1D).
+* - Horizontal arrows invert in right-to-left layouts.
+*/
+function resolveKeyIntent(event, options) {
+	const singleAxis = options.orientation === "vertical" ? "y" : "x";
+	const horizontalAxis = options.dimensions === 2 ? "x" : singleAxis;
+	const verticalAxis = options.dimensions === 2 ? "y" : singleAxis;
+	const rangeFor = (axis) => axis === "y" && options.dimensions === 2 && options.yRange !== void 0 ? options.yRange : options.xRange;
+	const stepFor = (axis) => {
+		const range = rangeFor(axis);
+		return event.shiftKey ? range.pageStep : range.step;
+	};
+	const rtl = options.dir === "rtl" ? -1 : 1;
+	switch (event.key) {
+		case "ArrowRight": return {
+			kind: "delta",
+			axis: horizontalAxis,
+			amount: stepFor(horizontalAxis) * rtl
+		};
+		case "ArrowLeft": return {
+			kind: "delta",
+			axis: horizontalAxis,
+			amount: -stepFor(horizontalAxis) * rtl
+		};
+		case "ArrowUp": return {
+			kind: "delta",
+			axis: verticalAxis,
+			amount: stepFor(verticalAxis)
+		};
+		case "ArrowDown": return {
+			kind: "delta",
+			axis: verticalAxis,
+			amount: -stepFor(verticalAxis)
+		};
+		case "PageUp": return {
+			kind: "delta",
+			axis: verticalAxis,
+			amount: rangeFor(verticalAxis).pageStep
+		};
+		case "PageDown": return {
+			kind: "delta",
+			axis: verticalAxis,
+			amount: -rangeFor(verticalAxis).pageStep
+		};
+		case "Home": return {
+			kind: "edge",
+			axis: horizontalAxis,
+			edge: "min"
+		};
+		case "End": return {
+			kind: "edge",
+			axis: horizontalAxis,
+			edge: "max"
+		};
+		default: return null;
+	}
+}
+/** Read an element rectangle without throwing for detached nodes. */
+function readElementRect(element) {
+	const rect = element.getBoundingClientRect();
+	return {
+		left: rect.left,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+}
+/** Capture the pointer on `element` when the platform supports it. */
+function capturePointer(element, pointerId) {
+	if (typeof element.setPointerCapture !== "function") return;
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+}
+/** Release a captured pointer when the platform supports it. */
+function releasePointer(element, pointerId) {
+	if (typeof element.releasePointerCapture !== "function") return;
+	try {
+		if (typeof element.hasPointerCapture !== "function" || element.hasPointerCapture(pointerId)) element.releasePointerCapture(pointerId);
+	} catch {}
+}
+//#endregion
+//#region src/families/form/color-picker/color-picker-area.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"id",
+	"data-state",
+	"data-dragging",
+	"data-disabled",
+	"data-x-channel",
+	"data-y-channel"
+];
+const _hoisted_2$1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-disabled",
+	"aria-readonly",
+	"data-state",
+	"data-dragging"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-area.vue
+var color_picker_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-area",
+	props: {
+		xChannel: {
+			type: null,
+			required: false,
+			default: "saturation"
+		},
+		yChannel: {
+			type: null,
+			required: false,
+			default: "brightness"
+		},
+		space: {
+			type: String,
+			required: false,
+			default: "hsb"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = colorPickerContext.use();
+		const element = useTemplateRef("element");
+		const thumb = useTemplateRef("thumb");
+		const activePointer = shallowRef(null);
+		const xSpace = computed(() => resolveColorChannelSpace(__props.xChannel, __props.space));
+		const ySpace = computed(() => resolveColorChannelSpace(__props.yChannel, __props.space));
+		const xRange = computed(() => getColorChannelRange(__props.xChannel));
+		const yRange = computed(() => getColorChannelRange(__props.yChannel));
+		const xMin = computed(() => xRange.value.min);
+		const xMax = computed(() => xRange.value.max);
+		const xValue = computed(() => snapColorChannelValue(__props.xChannel, getColorChannelValue(context.color.value, __props.xChannel, xSpace.value)));
+		const yValue = computed(() => snapColorChannelValue(__props.yChannel, getColorChannelValue(context.color.value, __props.yChannel, ySpace.value)));
+		const xPercent = computed(() => valueToPercent(xRange.value, xValue.value));
+		const yPercent = computed(() => 100 - valueToPercent(yRange.value, yValue.value));
+		const dragging = computed(() => activePointer.value !== null);
+		const label = computed(() => __props.ariaLabelledby === void 0 ? __props.ariaLabel ?? context.areaLabel(__props.xChannel, __props.yChannel) : __props.ariaLabel);
+		const valueText = computed(() => `${context.channelValueText(__props.xChannel, xValue.value)}, ${context.channelValueText(__props.yChannel, yValue.value)}`);
+		const areaStyle = computed(() => {
+			const style = {
+				"--vize-ui-color-picker-thumb-x": `${xPercent.value}%`,
+				"--vize-ui-color-picker-thumb-y": `${yPercent.value}%`,
+				"--vize-ui-color-picker-area-hue": `hsl(${Math.round(context.color.value.hue)} 100% 50%)`
+			};
+			if (__props.xChannel === "saturation" && __props.yChannel === "brightness" && xSpace.value === "hsb") style["--vize-ui-color-picker-area-background"] = `linear-gradient(to top, #000, transparent), linear-gradient(${context.dir.value === "rtl" ? "to left" : "to right"}, #fff, hsl(${Math.round(context.color.value.hue)} 100% 50%))`;
+			return style;
+		});
+		const slotState = computed(() => ({
+			color: context.color.value,
+			dragging: dragging.value,
+			state: context.state.value,
+			xChannel: __props.xChannel,
+			xPercent: xPercent.value,
+			xValue: xValue.value,
+			yChannel: __props.yChannel,
+			yPercent: yPercent.value,
+			yValue: yValue.value
+		}));
+		function withChannels(x, y) {
+			return setColorChannelValue(setColorChannelValue(context.color.value, __props.xChannel, snapColorChannelValue(__props.xChannel, x), xSpace.value), __props.yChannel, snapColorChannelValue(__props.yChannel, y), ySpace.value);
+		}
+		function updateFromPointer(event) {
+			if (element.value === null) return;
+			const fraction = pointerFraction(readElementRect(element.value), event.clientX, event.clientY, context.dir.value);
+			context.setColor(withChannels(fractionToValue(xRange.value, fraction.x), fractionToValue(yRange.value, fraction.y)), "area", event);
+		}
+		function onPointerdown(event) {
+			if (!context.editable.value || event.button !== 0 || element.value === null) return;
+			event.preventDefault();
+			activePointer.value = event.pointerId;
+			capturePointer(element.value, event.pointerId);
+			thumb.value?.focus({ preventScroll: true });
+			updateFromPointer(event);
+		}
+		function onPointermove(event) {
+			if (activePointer.value !== event.pointerId) return;
+			updateFromPointer(event);
+		}
+		function endDrag(event, commit) {
+			if (activePointer.value !== event.pointerId) return;
+			activePointer.value = null;
+			if (element.value !== null) releasePointer(element.value, event.pointerId);
+			if (commit) context.commit("area", event);
+		}
+		function onPointerup(event) {
+			endDrag(event, true);
+		}
+		function onPointercancel(event) {
+			endDrag(event, false);
+		}
+		function onKeydown(event) {
+			if (context.disabled.value) return;
+			const intent = resolveKeyIntent(event, {
+				dimensions: 2,
+				dir: context.dir.value,
+				xRange: xRange.value,
+				yRange: yRange.value
+			});
+			if (intent === null) return;
+			event.preventDefault();
+			if (!context.editable.value) return;
+			const range = intent.axis === "x" ? xRange.value : yRange.value;
+			const current = intent.axis === "x" ? xValue.value : yValue.value;
+			const target = intent.kind === "edge" ? range[intent.edge] : Math.min(range.max, Math.max(range.min, current + intent.amount));
+			const next = intent.axis === "x" ? withChannels(target, yValue.value) : withChannels(xValue.value, target);
+			if (context.setColor(next, "area", event)) context.commit("area", event);
+		}
+		const thumbProps = computed(() => ({
+			role: "slider",
+			tabindex: context.disabled.value ? -1 : 0,
+			onKeydown
+		}));
+		function focus(options) {
+			thumb.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus,
+			thumb
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(context).getPartId("area"),
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "color-picker-area",
+				part: "area",
+				"data-state": unref(context).state.value,
+				"data-dragging": dragging.value ? "true" : void 0,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0,
+				"data-x-channel": __props.xChannel,
+				"data-y-channel": __props.yChannel,
+				style: normalizeStyle(areaStyle.value),
+				onPointerdown,
+				onPointermove,
+				onPointerup,
+				onPointercancel,
+				onLostpointercapture: onPointerup
+			}, [createElementVNode("div", mergeProps({
+				id: unref(context).getPartId("area-thumb"),
+				ref_key: "thumb",
+				ref: thumb,
+				"aria-roledescription": "2D slider"
+			}, thumbProps.value, {
+				"aria-label": label.value,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-valuemin": xMin.value,
+				"aria-valuemax": xMax.value,
+				"aria-valuenow": xValue.value,
+				"aria-valuetext": valueText.value,
+				"aria-disabled": unref(context).disabled.value ? "true" : void 0,
+				"aria-readonly": unref(context).readOnly.value ? "true" : void 0,
+				"data-vize-ui": "color-picker-area-thumb",
+				part: "thumb",
+				"data-state": unref(context).state.value,
+				"data-dragging": dragging.value ? "true" : void 0
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_2$1)], 44, _hoisted_1$5);
+		};
+	}
+}), [["__scopeId", "data-v-7f429c8f"]]);
+//#endregion
+//#region src/families/form/color-picker/color-picker-channel-slider.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = [
+	"id",
+	"data-state",
+	"data-channel",
+	"data-orientation",
+	"data-dragging",
+	"data-disabled"
+];
+const _hoisted_2 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-orientation",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-disabled",
+	"aria-readonly",
+	"data-state",
+	"data-channel"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-channel-slider.vue
+var color_picker_channel_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-channel-slider",
+	props: {
+		channel: {
+			type: null,
+			required: true
+		},
+		space: {
+			type: String,
+			required: false,
+			default: "hsb"
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = colorPickerContext.use();
+		const element = useTemplateRef("element");
+		const thumb = useTemplateRef("thumb");
+		const activePointer = shallowRef(null);
+		const resolvedSpace = computed(() => resolveColorChannelSpace(__props.channel, __props.space));
+		const range = computed(() => {
+			const base = getColorChannelRange(__props.channel);
+			if (__props.step === void 0 || !Number.isFinite(__props.step) || __props.step <= 0) return base;
+			return {
+				...base,
+				step: __props.step,
+				pageStep: Math.max(__props.step, base.pageStep)
+			};
+		});
+		const min = computed(() => range.value.min);
+		const max = computed(() => range.value.max);
+		const value = computed(() => snapColorChannelValue(__props.channel, getColorChannelValue(context.color.value, __props.channel, resolvedSpace.value), range.value.step));
+		const percent = computed(() => valueToPercent(range.value, value.value));
+		const dragging = computed(() => activePointer.value !== null);
+		const label = computed(() => __props.ariaLabelledby === void 0 ? __props.ariaLabel ?? context.channelLabel(__props.channel) : __props.ariaLabel);
+		const gradientDirection = computed(() => {
+			if (__props.orientation === "vertical") return "to top";
+			return context.dir.value === "rtl" ? "to left" : "to right";
+		});
+		const sliderStyle = computed(() => ({
+			"--vize-ui-color-picker-thumb-percent": `${percent.value}%`,
+			"--vize-ui-color-picker-track-background": getColorChannelGradient(context.color.value, __props.channel, resolvedSpace.value, gradientDirection.value)
+		}));
+		const slotState = computed(() => ({
+			channel: __props.channel,
+			color: context.color.value,
+			dragging: dragging.value,
+			max: range.value.max,
+			min: range.value.min,
+			orientation: __props.orientation,
+			percent: percent.value,
+			space: resolvedSpace.value,
+			state: context.state.value,
+			value: value.value
+		}));
+		function setValue(next, event) {
+			const snapped = snapColorChannelValue(__props.channel, next, range.value.step);
+			return context.setColor(setColorChannelValue(context.color.value, __props.channel, snapped, resolvedSpace.value), "channel", event);
+		}
+		function updateFromPointer(event) {
+			if (element.value === null) return;
+			const fraction = pointerFraction(readElementRect(element.value), event.clientX, event.clientY, context.dir.value);
+			setValue(fractionToValue(range.value, __props.orientation === "vertical" ? fraction.y : fraction.x), event);
+		}
+		function onPointerdown(event) {
+			if (!context.editable.value || event.button !== 0 || element.value === null) return;
+			event.preventDefault();
+			activePointer.value = event.pointerId;
+			capturePointer(element.value, event.pointerId);
+			thumb.value?.focus({ preventScroll: true });
+			updateFromPointer(event);
+		}
+		function onPointermove(event) {
+			if (activePointer.value === event.pointerId) updateFromPointer(event);
+		}
+		function endDrag(event, commit) {
+			if (activePointer.value !== event.pointerId) return;
+			activePointer.value = null;
+			if (element.value !== null) releasePointer(element.value, event.pointerId);
+			if (commit) context.commit("channel", event);
+		}
+		function onPointerup(event) {
+			endDrag(event, true);
+		}
+		function onPointercancel(event) {
+			endDrag(event, false);
+		}
+		function onKeydown(event) {
+			if (context.disabled.value) return;
+			const intent = resolveKeyIntent(event, {
+				dimensions: 1,
+				dir: context.dir.value,
+				orientation: __props.orientation,
+				xRange: range.value
+			});
+			if (intent === null) return;
+			event.preventDefault();
+			if (!context.editable.value) return;
+			if (setValue(intent.kind === "edge" ? range.value[intent.edge] : Math.min(range.value.max, Math.max(range.value.min, value.value + intent.amount)), event)) context.commit("channel", event);
+		}
+		const thumbProps = computed(() => ({
+			role: "slider",
+			tabindex: context.disabled.value ? -1 : 0,
+			onKeydown
+		}));
+		function focus(options) {
+			thumb.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus,
+			thumb,
+			value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(context).getPartId(`channel-${__props.channel}`),
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "color-picker-channel-slider",
+				part: "track",
+				"data-state": unref(context).state.value,
+				"data-channel": __props.channel,
+				"data-orientation": __props.orientation,
+				"data-dragging": dragging.value ? "true" : void 0,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0,
+				style: normalizeStyle(sliderStyle.value),
+				onPointerdown,
+				onPointermove,
+				onPointerup,
+				onPointercancel,
+				onLostpointercapture: onPointerup
+			}, [createElementVNode("div", mergeProps({
+				id: unref(context).getPartId(`channel-${__props.channel}-thumb`),
+				ref_key: "thumb",
+				ref: thumb
+			}, thumbProps.value, {
+				"aria-label": label.value,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-orientation": __props.orientation,
+				"aria-valuemin": min.value,
+				"aria-valuemax": max.value,
+				"aria-valuenow": value.value,
+				"aria-valuetext": unref(context).channelValueText(__props.channel, value.value),
+				"aria-disabled": unref(context).disabled.value ? "true" : void 0,
+				"aria-readonly": unref(context).readOnly.value ? "true" : void 0,
+				"data-vize-ui": "color-picker-channel-thumb",
+				part: "thumb",
+				"data-state": unref(context).state.value,
+				"data-channel": __props.channel
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_2)], 44, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-7d172239"]]);
+//#endregion
+//#region src/families/form/color-picker/color-picker-eye-dropper.ts
+function isEyeDropperLike(value) {
+	return typeof value === "object" && value !== null && typeof Reflect.get(value, "open") === "function";
+}
+/** Whether the current global scope exposes a constructible `EyeDropper`. SSR-safe. */
+function isEyeDropperSupported(scope = globalThis) {
+	return typeof Reflect.get(scope, "EyeDropper") === "function";
+}
+/** Construct an EyeDropper when supported, otherwise `null`. */
+function createEyeDropper(scope = globalThis) {
+	const constructor = Reflect.get(scope, "EyeDropper");
+	if (typeof constructor !== "function") return null;
+	const instance = Reflect.construct(constructor, []);
+	return isEyeDropperLike(instance) ? instance : null;
+}
+/** Read the `sRGBHex` string from an EyeDropper result, or `null` when malformed. */
+function readEyeDropperResult(result) {
+	if (typeof result !== "object" || result === null) return null;
+	const hex = Reflect.get(result, "sRGBHex");
+	return typeof hex === "string" ? hex : null;
+}
+/** Whether a rejection means the user dismissed the picker (or it was aborted). */
+function isEyeDropperAbort(error) {
+	return typeof error === "object" && error !== null && Reflect.get(error, "name") === "AbortError";
+}
+//#endregion
+//#region src/families/form/color-picker/color-picker-eye-dropper.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"id",
+	"disabled",
+	"hidden",
+	"aria-label",
+	"aria-busy",
+	"data-state",
+	"data-supported"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-eye-dropper.vue
+var color_picker_eye_dropper_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-eye-dropper",
+	props: {
+		unsupported: {
+			type: String,
+			required: false,
+			default: "disable"
+		},
+		preserveAlpha: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"pick",
+		"cancel",
+		"error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = colorPickerContext.use();
+		const element = useTemplateRef("element");
+		const supported = shallowRef(false);
+		const picking = shallowRef(false);
+		let controller = null;
+		const state = computed(() => {
+			if (!supported.value) return "unsupported";
+			return picking.value ? "picking" : "idle";
+		});
+		const buttonDisabled = computed(() => !supported.value || context.disabled.value || context.readOnly.value);
+		const slotState = computed(() => ({
+			picking: picking.value,
+			state: state.value,
+			supported: supported.value
+		}));
+		onMounted(() => {
+			supported.value = isEyeDropperSupported();
+		});
+		onScopeDispose(() => {
+			controller?.abort();
+			controller = null;
+		});
+		async function open() {
+			if (picking.value || !context.editable.value) return null;
+			const dropper = createEyeDropper();
+			if (dropper === null) return null;
+			controller = typeof AbortController === "function" ? new AbortController() : null;
+			picking.value = true;
+			try {
+				const hex = readEyeDropperResult(await dropper.open(controller === null ? void 0 : { signal: controller.signal }));
+				const parsed = hex === null ? null : parseColor(hex);
+				if (hex === null || parsed === null) {
+					emit("error", /* @__PURE__ */ new TypeError("VIZE_UI_COLOR_PICKER_EYE_DROPPER: malformed EyeDropper result"));
+					return null;
+				}
+				const next = __props.preserveAlpha ? {
+					...parsed,
+					alpha: context.color.value.alpha
+				} : parsed;
+				context.setColor(next, "eye-dropper", null);
+				context.commit("eye-dropper", null);
+				emit("pick", next, hex);
+				return next;
+			} catch (error) {
+				if (isEyeDropperAbort(error)) emit("cancel");
+				else emit("error", error);
+				return null;
+			} finally {
+				picking.value = false;
+				controller = null;
+			}
+		}
+		function onClick() {
+			open();
+		}
+		__expose({
+			element,
+			open,
+			picking,
+			state,
+			supported
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: unref(context).getPartId("eye-dropper"),
+				ref_key: "element",
+				ref: element,
+				type: "button",
+				disabled: buttonDisabled.value,
+				hidden: !supported.value && __props.unsupported === "hide" ? true : void 0,
+				"aria-label": __props.ariaLabel,
+				"aria-busy": picking.value ? "true" : void 0,
+				"data-vize-ui": "color-picker-eye-dropper",
+				part: "eye-dropper",
+				"data-state": state.value,
+				"data-supported": supported.value ? "true" : "false",
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-7a18ef98"]]);
+//#endregion
+//#region src/families/form/color-picker/color-picker-field.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"data-state",
+	"data-format",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-field.vue
+var color_picker_field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-field",
+	props: {
+		format: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		preserveAlpha: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["invalid"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = colorPickerContext.use();
+		const element = useTemplateRef("element");
+		const formatState = computed(() => __props.format ?? context.format.value);
+		const formatted = computed(() => formatColor(context.color.value, formatState.value));
+		const draft = shallowRef(formatted.value);
+		const editing = shallowRef(false);
+		const state = computed(() => draft.value.trim().length === 0 || parseColor(draft.value) !== null ? "valid" : "invalid");
+		watch(formatted, (next) => {
+			if (!editing.value) draft.value = next;
+		});
+		function hasExplicitAlpha(text) {
+			const source = text.trim();
+			if (source.startsWith("#")) return source.length === 5 || source.length === 9;
+			return source.includes("/") || source.split(",").length === 4;
+		}
+		function revert() {
+			editing.value = false;
+			draft.value = formatted.value;
+		}
+		function readDraft() {
+			return draft.value;
+		}
+		function commitDraft(nativeEvent) {
+			return commitText(readDraft(), nativeEvent);
+		}
+		function commitText(text, nativeEvent) {
+			const parsed = parseColor(text);
+			if (parsed === null) {
+				if (text.trim() !== formatted.value) emit("invalid", text, nativeEvent);
+				revert();
+				return false;
+			}
+			editing.value = false;
+			if (context.editable.value) {
+				const next = __props.preserveAlpha && !hasExplicitAlpha(text) ? {
+					...parsed,
+					alpha: context.color.value.alpha
+				} : parsed;
+				context.setColor(next, "field", nativeEvent);
+				context.commit("field", nativeEvent);
+			}
+			draft.value = formatted.value;
+			return true;
+		}
+		function onInput(event) {
+			if (!(event.currentTarget instanceof HTMLInputElement)) return;
+			editing.value = true;
+			draft.value = event.currentTarget.value;
+		}
+		function onKeydown(event) {
+			if (event.key === "Enter") commitDraft(event);
+			else if (event.key === "Escape" && editing.value) {
+				event.preventDefault();
+				revert();
+			}
+		}
+		function onBlur(event) {
+			if (editing.value) commitDraft(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			commit: () => commitDraft(null),
+			draft,
+			element,
+			focus,
+			revert,
+			state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				id: unref(context).getPartId("field"),
+				ref_key: "element",
+				ref: element,
+				type: "text",
+				autocomplete: "off",
+				autocapitalize: "off",
+				autocorrect: "off",
+				spellcheck: "false",
+				value: draft.value,
+				placeholder: __props.placeholder,
+				disabled: unref(context).disabled.value,
+				readonly: unref(context).readOnly.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-invalid": state.value === "invalid" ? "true" : void 0,
+				"data-vize-ui": "color-picker-field",
+				part: "field",
+				"data-state": state.value,
+				"data-format": formatState.value,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0,
+				onInput,
+				onKeydown,
+				onBlur
+			}, null, 40, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-b64707f5"]]);
+//#endregion
+//#region src/families/form/color-picker/color-picker-swatch-context.ts
+const colorPickerSwatchGroupContext = createContext("ColorPickerSwatchGroup");
+const safeSegment = /^[A-Za-z0-9][A-Za-z0-9_-]*$/;
+/** Create a deterministic, DOM-id-safe segment for an arbitrary swatch value such as `#ff0000`. */
+function getSwatchIdSegment(value) {
+	if (safeSegment.test(value)) return `swatch-${value}`;
+	const readable = value.replaceAll(/[^A-Za-z0-9_-]+/g, "-").replaceAll(/^-+|-+$/g, "").slice(0, 32);
+	let hash = 2166136261;
+	for (let index = 0; index < value.length; index++) {
+		hash ^= value.charCodeAt(index);
+		hash = Math.imul(hash, 16777619) >>> 0;
+	}
+	return `swatch-${readable || "empty"}-${hash.toString(36)}`;
+}
+//#endregion
+//#region src/families/form/color-picker/color-picker-swatch.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"aria-checked",
+	"aria-disabled",
+	"aria-label",
+	"data-state",
+	"data-value",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-swatch.vue
+var color_picker_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-swatch",
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		label: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		order: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = colorPickerContext.use();
+		const group = colorPickerSwatchGroupContext.use();
+		const element = useTemplateRef("element");
+		const parsed = computed(() => parseColor(__props.value));
+		const color = computed(() => parsed.value ?? DEFAULT_COLOR);
+		const swatchDisabled = computed(() => context.disabled.value || __props.disabled || parsed.value === null);
+		const checked = computed(() => parsed.value !== null && colorEquals(parsed.value, context.color.value));
+		const state = computed(() => {
+			if (swatchDisabled.value) return "disabled";
+			return checked.value ? "checked" : "unchecked";
+		});
+		const accessibleName = computed(() => __props.label ?? formatColor(color.value, context.format.value));
+		const navigationProps = computed(() => group.navigation.getItemProps(__props.value));
+		const swatchStyle = computed(() => ({ "--vize-ui-color-picker-swatch-color": toCssColor(color.value) }));
+		const slotState = computed(() => ({
+			checked: checked.value,
+			color: color.value,
+			disabled: swatchDisabled.value,
+			state: state.value,
+			value: __props.value
+		}));
+		let registration = null;
+		function register() {
+			registration?.unregister();
+			registration = group.registry.register({
+				disabled: swatchDisabled,
+				element,
+				key: __props.value,
+				order: () => __props.order,
+				textValue: () => accessibleName.value,
+				value: __props.value
+			});
+			group.syncActiveValue();
+			nextTick(group.syncActiveValue);
+		}
+		watch(() => __props.value, register, {
+			flush: "sync",
+			immediate: true
+		});
+		onUnmounted(() => {
+			registration?.unregister();
+			registration = null;
+			nextTick(group.syncActiveValue);
+		});
+		function select(event) {
+			if (swatchDisabled.value || !context.editable.value || parsed.value === null) return;
+			if (context.setColor(parsed.value, "swatch", event)) context.commit("swatch", event);
+		}
+		function onClick(event) {
+			if (swatchDisabled.value) return;
+			emit("click", event);
+			if (!event.defaultPrevented) select(event);
+		}
+		function onKeydown(event) {
+			if (swatchDisabled.value) return;
+			if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				select(event);
+				return;
+			}
+			group.navigation.getContainerProps().onKeydown(event);
+		}
+		function onFocus(event) {
+			if (!swatchDisabled.value) navigationProps.value.onFocus(event);
+		}
+		function onPointerdown(event) {
+			if (!swatchDisabled.value) navigationProps.value.onPointerdown(event);
+		}
+		const radioProps = computed(() => ({
+			role: "radio",
+			tabindex: swatchDisabled.value ? -1 : navigationProps.value.tabindex ?? -1,
+			onClick,
+			onFocus,
+			onKeydown,
+			onPointerdown
+		}));
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			checked,
+			color,
+			disabled: swatchDisabled,
+			element,
+			focus,
+			state,
+			value: __props.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				id: unref(group).getSwatchId(__props.value),
+				ref_key: "element",
+				ref: element
+			}, radioProps.value, {
+				"aria-checked": checked.value ? "true" : "false",
+				"aria-disabled": swatchDisabled.value ? "true" : void 0,
+				"aria-label": accessibleName.value,
+				"data-vize-ui": "color-picker-swatch",
+				part: "swatch",
+				"data-state": state.value,
+				"data-value": __props.value,
+				"data-disabled": swatchDisabled.value ? "true" : void 0,
+				style: swatchStyle.value
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-fc15b508"]]);
+//#endregion
+//#region src/families/form/color-picker/color-picker-swatch-group.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-readonly",
+	"data-state",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/form/color-picker/color-picker-swatch-group.vue
+var color_picker_swatch_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "color-picker-swatch-group",
+	props: {
+		loop: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = colorPickerContext.use();
+		const element = useTemplateRef("element");
+		const groupId = computed(() => context.getPartId("swatches"));
+		const registry = createCollectionRegistry({ disabledBehavior: "skip" });
+		const checkedKey = computed(() => {
+			for (const item of registry.navigableItems.value) {
+				const parsed = parseColor(item.value);
+				if (parsed !== null && colorEquals(parsed, context.color.value)) return item.key;
+			}
+			return null;
+		});
+		const slotState = computed(() => ({
+			color: context.color.value,
+			disabled: context.disabled.value,
+			format: context.format.value,
+			readOnly: context.readOnly.value,
+			state: context.state.value,
+			value: context.value.value
+		}));
+		function getSwatchId(value) {
+			return deriveDeterministicId(groupId.value, getSwatchIdSegment(value));
+		}
+		function syncActiveValue() {
+			if (context.disabled.value) {
+				if (registry.activeKey.value !== null) registry.setActiveKey(null);
+				return;
+			}
+			const target = checkedKey.value ?? registry.navigableItems.value[0]?.key ?? null;
+			if (target !== registry.activeKey.value) registry.setActiveKey(target);
+		}
+		const navigation = useCompositeNavigation({
+			registry,
+			focusStrategy: "roving",
+			getItemId: ({ key }) => getSwatchId(key),
+			orientation: "both",
+			direction: context.dir,
+			loop: () => __props.loop,
+			isDisabled: context.disabled,
+			onNavigate(change) {
+				if (change.intent === "pointer" || !context.editable.value) return;
+				const parsed = parseColor(change.key);
+				if (parsed === null) return;
+				if (context.setColor(parsed, "swatch", change.originalEvent)) context.commit("swatch", change.originalEvent);
+			}
+		});
+		watch([
+			context.disabled,
+			checkedKey,
+			registry.navigableItems
+		], syncActiveValue, {
+			flush: "post",
+			immediate: true
+		});
+		colorPickerSwatchGroupContext.provide({
+			disabled: context.disabled,
+			getSwatchId,
+			navigation,
+			registry,
+			syncActiveValue
+		});
+		function focus(options) {
+			syncActiveValue();
+			const key = registry.activeKey.value;
+			const item = key === null ? void 0 : registry.getItem(key);
+			if (item?.element instanceof HTMLElement) item.element.focus(options);
+		}
+		__expose({
+			element,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: groupId.value,
+				ref_key: "element",
+				ref: element,
+				role: "radiogroup",
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-disabled": unref(context).disabled.value ? "true" : void 0,
+				"aria-readonly": unref(context).readOnly.value ? "true" : void 0,
+				"data-vize-ui": "color-picker-swatch-group",
+				part: "swatch-group",
+				"data-state": unref(context).state.value,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-5064dc1c"]]);
+//#endregion
+export { setColorChannelValue as C, toRgba as D, toHsla as E, resolveColorChannelSpace as S, toCssColor as T, getColorChannelRange as _, color_picker_channel_slider_default as a, isColorValue as b, DEFAULT_COLOR as c, formatColor as d, formatColorChannelValue as f, getColorChannelLabel as g, getColorChannelGradient as h, color_picker_eye_dropper_default as i, colorEquals as l, fromRgba as m, color_picker_swatch_default as n, color_picker_area_default as o, fromHsla as p, color_picker_field_default as r, color_picker_root_default as s, color_picker_swatch_group_default as t, createColor as u, getColorChannelValue as v, snapColorChannelValue as w, parseColor as x, isColorFormat as y };