ropav 0.0.8 → 0.0.9

package/dist/color-picker.js

@@ -0,0 +1,717 @@
+import './color-picker.css';
+import { t as bem } from "./bem.js";
+import { t as parseCssColor } from "./color.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as check_default } from "./check.js";
+import { t as color_swatch_default } from "./color-swatch.js";
+import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setValue, template, unref, useAttrs } from "vue";
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function clampPercent(value) {
+	return clamp(Number.isFinite(value) ? value : 0, 0, 100);
+}
+function normalizeHue(value) {
+	if (!Number.isFinite(value)) return 0;
+	return (value % 360 + 360) % 360;
+}
+function normalizeHueForColor(value) {
+	const hue = normalizeHue(value);
+	return hue === 359 ? 360 : hue;
+}
+function clampHue(value) {
+	return clamp(Number.isFinite(value) ? value : 0, 0, 359);
+}
+function clampOpacity(value) {
+	return clamp(Number.isFinite(value) ? value : 100, 0, 100);
+}
+function roundPercent(value) {
+	return Math.round(value * 100) / 100;
+}
+function isColorPickerAlphaFormat(format) {
+	return format === "hexa" || format === "rgba" || format === "hsla";
+}
+function parseColorPickerValue(value) {
+	const rgb = parseCssColor(value);
+	if (!rgb) return void 0;
+	return rgbToHsv(rgb);
+}
+function formatColorPickerValue(color, format) {
+	const rgb = hsvToRgb(color.hue, color.saturation, color.value);
+	const opacity = clampOpacity(color.opacity);
+	switch (format) {
+		case "hex": return `#${toHexChannel(rgb.red)}${toHexChannel(rgb.green)}${toHexChannel(rgb.blue)}`;
+		case "hexa": return `#${toHexChannel(rgb.red)}${toHexChannel(rgb.green)}${toHexChannel(rgb.blue)}${toHexChannel(Math.round(opacity / 100 * 255))}`;
+		case "rgb": return `rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`;
+		case "rgba": return `rgba(${rgb.red}, ${rgb.green}, ${rgb.blue}, ${formatAlpha(opacity)})`;
+		case "hsl": {
+			const hsl = rgbToHsl(rgb);
+			return `hsl(${formatNumber(hsl.hue)}, ${formatNumber(hsl.saturation)}%, ${formatNumber(hsl.lightness)}%)`;
+		}
+		case "hsla": {
+			const hsl = rgbToHsl(rgb);
+			return `hsla(${formatNumber(hsl.hue)}, ${formatNumber(hsl.saturation)}%, ${formatNumber(hsl.lightness)}%, ${formatAlpha(opacity)})`;
+		}
+	}
+}
+function getHsvCssColor(hue, saturation, value) {
+	const rgb = hsvToRgb(hue, saturation, value);
+	return `rgb(${rgb.red} ${rgb.green} ${rgb.blue})`;
+}
+function hsvToRgb(hue, saturation, value) {
+	const normalizedHue = normalizeHueForColor(hue);
+	const s = clampPercent(saturation) / 100;
+	const v = clampPercent(value) / 100;
+	const c = v * s;
+	const x = c * (1 - Math.abs(normalizedHue / 60 % 2 - 1));
+	const m = v - c;
+	let r = 0;
+	let g = 0;
+	let b = 0;
+	if (normalizedHue < 60) {
+		r = c;
+		g = x;
+	} else if (normalizedHue < 120) {
+		r = x;
+		g = c;
+	} else if (normalizedHue < 180) {
+		g = c;
+		b = x;
+	} else if (normalizedHue < 240) {
+		g = x;
+		b = c;
+	} else if (normalizedHue < 300) {
+		r = x;
+		b = c;
+	} else {
+		r = c;
+		b = x;
+	}
+	return {
+		red: Math.round((r + m) * 255),
+		green: Math.round((g + m) * 255),
+		blue: Math.round((b + m) * 255)
+	};
+}
+function rgbToHsv({ red, green, blue, opacity }) {
+	const r = red / 255;
+	const g = green / 255;
+	const b = blue / 255;
+	const max = Math.max(r, g, b);
+	const delta = max - Math.min(r, g, b);
+	let hue = 0;
+	if (delta) if (max === r) hue = 60 * ((g - b) / delta % 6);
+	else if (max === g) hue = 60 * ((b - r) / delta + 2);
+	else hue = 60 * ((r - g) / delta + 4);
+	return {
+		hue: normalizeHue(hue),
+		saturation: roundPercent(max === 0 ? 0 : delta / max * 100),
+		value: roundPercent(max * 100),
+		opacity: roundPercent(opacity)
+	};
+}
+function rgbToHsl({ red, green, blue }) {
+	const r = red / 255;
+	const g = green / 255;
+	const b = blue / 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const delta = max - min;
+	const lightness = (max + min) / 2;
+	if (!delta) return {
+		hue: 0,
+		saturation: 0,
+		lightness: roundPercent(lightness * 100)
+	};
+	let hue;
+	if (max === r) hue = 60 * ((g - b) / delta % 6);
+	else if (max === g) hue = 60 * ((b - r) / delta + 2);
+	else hue = 60 * ((r - g) / delta + 4);
+	const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+	return {
+		hue: roundPercent(normalizeHue(hue)),
+		saturation: roundPercent(saturation * 100),
+		lightness: roundPercent(lightness * 100)
+	};
+}
+function toHexChannel(value) {
+	return clamp(value, 0, 255).toString(16).padStart(2, "0");
+}
+function formatAlpha(opacity) {
+	return formatNumber(clampOpacity(opacity) / 100);
+}
+function formatNumber(value) {
+	return String(Math.round(value * 100) / 100);
+}
+//#endregion
+//#region src/components/color-picker/useColorPickerDrag.ts
+function useColorPickerDrag({ target, focusTarget, readonly, updateFromPointer }) {
+	let dragWindow = null;
+	function stopDragging() {
+		if (!dragWindow) return;
+		dragWindow.removeEventListener("pointermove", onPointerMove);
+		dragWindow.removeEventListener("pointerup", stopDragging);
+		dragWindow.removeEventListener("pointercancel", stopDragging);
+		dragWindow = null;
+	}
+	function onPointerMove(event) {
+		const el = target.value;
+		if (!el) {
+			stopDragging();
+			return;
+		}
+		updateFromPointer(event, el);
+	}
+	function onPointerDown(event) {
+		if (readonly()) return;
+		const el = target.value;
+		if (!el) return;
+		event.preventDefault();
+		(focusTarget?.value ?? el).focus();
+		updateFromPointer(event, el);
+		stopDragging();
+		dragWindow = el.ownerDocument.defaultView;
+		dragWindow?.addEventListener("pointermove", onPointerMove);
+		dragWindow?.addEventListener("pointerup", stopDragging);
+		dragWindow?.addEventListener("pointercancel", stopDragging);
+	}
+	onBeforeUnmount(stopDragging);
+	return { onPointerDown };
+}
+//#endregion
+//#region src/components/color-picker/color-picker-saturation.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$2 = template("<div data-v-0ff88f34 class=rp-color-picker__saturation role=group><input data-v-0ff88f34 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-0ff88f34 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-0ff88f34 class=rp-color-picker__surface aria-hidden=true></span><span data-v-0ff88f34 class=rp-color-picker__handle aria-hidden=true>", 1);
+delegateEvents("input", "keydown", "pointerdown");
+//#endregion
+//#region src/components/color-picker/color-picker-saturation.vue
+var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpColorPickerSaturation",
+	__name: "color-picker-saturation",
+	props: {
+		id: {},
+		modelValue: {},
+		hue: { default: 0 },
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const saturationRef = ref(null);
+		const saturationInputRef = ref(null);
+		const saturation = computed(() => clampPercent(props.modelValue.saturation));
+		const value = computed(() => clampPercent(props.modelValue.value));
+		const hue = computed(() => normalizeHue(props.hue));
+		const saturationStyle = computed(() => ({
+			"--_rp-color-picker-hue": String(normalizeHueForColor(hue.value)),
+			"--_rp-color-picker-saturation-x": `${saturation.value}%`,
+			"--_rp-color-picker-saturation-y": `${100 - value.value}%`,
+			"--_rp-color-picker-current": getHsvCssColor(hue.value, saturation.value, value.value)
+		}));
+		const ariaValueText = computed(() => `${Math.round(saturation.value)}% saturation, ${Math.round(value.value)}% value`);
+		const groupAriaLabel = computed(() => props.labelledby ? void 0 : props.ariaLabel || "Color area");
+		function updateValue(nextSaturation, nextValue) {
+			if (props.readonly) return;
+			const normalizedSaturation = roundPercent(clampPercent(nextSaturation));
+			const normalizedValue = roundPercent(clampPercent(nextValue));
+			if (normalizedSaturation === saturation.value && normalizedValue === value.value) return;
+			emit("update:modelValue", {
+				saturation: normalizedSaturation,
+				value: normalizedValue
+			});
+		}
+		function updateFromPointer(e, el) {
+			const rect = el.getBoundingClientRect();
+			if (rect.width <= 0 || rect.height <= 0) return;
+			updateValue((e.clientX - rect.left) / rect.width * 100, 100 - (e.clientY - rect.top) / rect.height * 100);
+		}
+		const { onPointerDown } = useColorPickerDrag({
+			target: saturationRef,
+			focusTarget: saturationInputRef,
+			readonly: () => props.readonly,
+			updateFromPointer
+		});
+		function onAxisKeydown(event, axis) {
+			const currentValue = axis === "saturation" ? saturation.value : value.value;
+			const step = event.shiftKey ? 10 : 1;
+			let nextValue;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					nextValue = currentValue + step;
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					nextValue = currentValue - step;
+					break;
+				case "Home":
+					nextValue = 0;
+					break;
+				case "End":
+					nextValue = 100;
+					break;
+			}
+			if (nextValue === void 0) return;
+			event.preventDefault();
+			if (!props.readonly) updateAxis(axis, nextValue);
+		}
+		function onAxisInput(event, axis) {
+			const input = event.currentTarget;
+			if (!(input instanceof HTMLInputElement)) return;
+			if (props.readonly) {
+				input.value = String(axis === "saturation" ? saturation.value : value.value);
+				return;
+			}
+			updateAxis(axis, Number(input.value));
+		}
+		function updateAxis(axis, nextValue) {
+			if (axis === "saturation") updateValue(nextValue, value.value);
+			else updateValue(saturation.value, nextValue);
+		}
+		const _setTemplateRef = createTemplateRefSetter();
+		const n2 = t0$2();
+		const n0 = child(n2);
+		const n1 = next(n0, 1);
+		n0.$evtinput = createInvoker(($event) => onAxisInput($event, "saturation"));
+		n0.$evtkeydown = createInvoker(($event) => onAxisKeydown($event, "saturation"));
+		_setTemplateRef(n0, saturationInputRef, null, "saturationInputRef");
+		n1.$evtinput = createInvoker(($event) => onAxisInput($event, "value"));
+		n1.$evtkeydown = createInvoker(($event) => onAxisKeydown($event, "value"));
+		n2.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
+		_setTemplateRef(n2, saturationRef, null, "saturationRef");
+		renderEffect(() => {
+			const _describedby = __props.describedby;
+			const _id = __props.id;
+			const _saturation = saturation.value;
+			const _ariaValueText = ariaValueText.value;
+			const _value = value.value;
+			setStyle(n2, saturationStyle.value);
+			setAttr(n2, "aria-label", groupAriaLabel.value);
+			setAttr(n2, "aria-labelledby", __props.labelledby);
+			setAttr(n2, "aria-describedby", _describedby);
+			setAttr(n2, "aria-readonly", __props.readonly || void 0);
+			setAttr(n2, "data-readonly", __props.readonly || void 0);
+			setProp(n0, "id", _id);
+			setValue(n0, _saturation);
+			setAttr(n0, "aria-valuenow", Math.round(_saturation));
+			setAttr(n0, "aria-valuetext", _ariaValueText);
+			setAttr(n0, "aria-describedby", _describedby);
+			setAttr(n0, "aria-readonly", __props.readonly || void 0);
+			setProp(n1, "id", _id ? `${_id}-value` : void 0);
+			setValue(n1, _value);
+			setAttr(n1, "aria-valuenow", Math.round(_value));
+			setAttr(n1, "aria-valuetext", _ariaValueText);
+			setAttr(n1, "aria-describedby", _describedby);
+			setAttr(n1, "aria-readonly", __props.readonly || void 0);
+		});
+		return n2;
+	}
+}), [["__scopeId", "data-v-0ff88f34"]]);
+//#endregion
+//#region src/components/color-picker/color-picker-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<div data-v-d0c81f73 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-d0c81f73 aria-hidden=true></span><span data-v-d0c81f73 aria-hidden=true>", 1);
+delegateEvents("pointerdown", "keydown");
+//#endregion
+//#region src/components/color-picker/color-picker-slider.vue
+var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpColorPickerSlider",
+	__name: "color-picker-slider",
+	props: {
+		variant: {},
+		value: { default: 0 },
+		color: {},
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:value"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const sliderRef = ref(null);
+		const isHue = computed(() => props.variant === "hue");
+		const max = computed(() => isHue.value ? 359 : 100);
+		const rootClass = computed(() => `rp-color-picker__${props.variant}`);
+		const surfaceClass = computed(() => ["rp-color-picker__slider-surface", `rp-color-picker__${props.variant}-surface`]);
+		const handleClass = computed(() => ["rp-color-picker__slider-handle", `rp-color-picker__${props.variant}-handle`]);
+		const normalizedValue = computed(() => isHue.value ? normalizeHue(props.value) : clampOpacity(props.value));
+		const currentOutputValue = computed(() => normalizeOutputValue(normalizedValue.value));
+		const sliderStyle = computed(() => {
+			const style = { "--_rp-color-picker-slider-x": `${currentOutputValue.value / max.value * 100}%` };
+			if (isHue.value) style["--_rp-color-picker-hue"] = String(normalizeHueForColor(currentOutputValue.value));
+			else style["--_rp-color-picker-opacity-color"] = props.color;
+			return style;
+		});
+		const ariaLabel = computed(() => isHue.value ? "Hue" : "Opacity");
+		const ariaValueText = computed(() => isHue.value ? `${Math.round(normalizedValue.value)} degrees hue` : `${Math.round(normalizedValue.value)}% opacity`);
+		function updateValue(nextValue) {
+			if (props.readonly) return;
+			const normalizedNextValue = normalizeOutputValue(nextValue);
+			if (normalizedNextValue === currentOutputValue.value) return;
+			emit("update:value", normalizedNextValue);
+		}
+		function updateFromPointer(e, el) {
+			const rect = el.getBoundingClientRect();
+			if (rect.width <= 0) return;
+			updateValue((e.clientX - rect.left) / rect.width * max.value);
+		}
+		const { onPointerDown } = useColorPickerDrag({
+			target: sliderRef,
+			readonly: () => props.readonly,
+			updateFromPointer
+		});
+		function onKeydown(e) {
+			if (props.readonly) return;
+			const step = e.shiftKey ? 10 : 1;
+			switch (e.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					e.preventDefault();
+					updateValue(normalizedValue.value + step);
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					e.preventDefault();
+					updateValue(normalizedValue.value - step);
+					break;
+				case "Home":
+					e.preventDefault();
+					updateValue(0);
+					break;
+				case "End":
+					e.preventDefault();
+					updateValue(max.value);
+					break;
+			}
+		}
+		function normalizeOutputValue(value) {
+			return isHue.value ? Math.round(clampHue(value)) : roundPercent(clampOpacity(value));
+		}
+		const _setTemplateRef = createTemplateRefSetter();
+		const n2 = t0$1();
+		const n0 = child(n2);
+		const n1 = next(n0, 1);
+		n2.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
+		n2.$evtkeydown = createInvoker(onKeydown);
+		_setTemplateRef(n2, sliderRef, null, "sliderRef");
+		renderEffect(() => {
+			setClass(n2, rootClass.value);
+			setStyle(n2, sliderStyle.value);
+			setAttr(n2, "aria-label", ariaLabel.value);
+			setAttr(n2, "aria-valuemax", max.value);
+			setAttr(n2, "aria-valuenow", Math.round(normalizedValue.value));
+			setAttr(n2, "aria-valuetext", ariaValueText.value);
+			setAttr(n2, "aria-readonly", __props.readonly || void 0);
+			setAttr(n2, "data-readonly", __props.readonly || void 0);
+			setClass(n0, surfaceClass.value);
+			setClass(n1, handleClass.value);
+		});
+		return n2;
+	}
+}), [["__scopeId", "data-v-d0c81f73"]]);
+//#endregion
+//#region src/components/color-picker/useColorPickerSwatches.ts
+var MAX_SWATCHES_PER_ROW = 15;
+function useColorPickerSwatches(props, options) {
+	const swatchesRef = ref(null);
+	const focusedSwatchIndex = ref(null);
+	const normalizedSwatchesPerRow = computed(() => normalizeSwatchesPerRow(props.swatchesPerRow));
+	const validSwatches = computed(() => (props.swatches ?? []).filter((swatch) => Boolean(parseColorPickerValue(swatch))));
+	const swatchesStyle = computed(() => {
+		const swatchesPerRow = normalizedSwatchesPerRow.value;
+		if (!swatchesPerRow) return void 0;
+		return { "--_rp-color-picker-swatches-per-row": String(swatchesPerRow) };
+	});
+	const swatchSize = computed(() => normalizedSwatchesPerRow.value ? "100%" : "var(--_rp-color-picker-swatch-size)");
+	const selectedSwatchIndex = computed(() => validSwatches.value.findIndex((swatch) => options.isSelected(swatch)));
+	const tabbableSwatchIndex = computed(() => {
+		const focusedIndex = focusedSwatchIndex.value;
+		if (focusedIndex != null && focusedIndex < validSwatches.value.length) return focusedIndex;
+		return selectedSwatchIndex.value >= 0 ? selectedSwatchIndex.value : 0;
+	});
+	function isSwatchSelected(index) {
+		return selectedSwatchIndex.value === index;
+	}
+	function getSwatchTabindex(index) {
+		return tabbableSwatchIndex.value === index ? 0 : -1;
+	}
+	function selectSwatch(swatch) {
+		options.select(swatch);
+	}
+	function onSwatchFocus(index) {
+		focusedSwatchIndex.value = index;
+	}
+	function onSwatchesFocusout(event) {
+		const group = event.currentTarget;
+		const nextTarget = event.relatedTarget;
+		if (group instanceof HTMLElement && nextTarget instanceof Node && group.contains(nextTarget)) return;
+		focusedSwatchIndex.value = null;
+	}
+	function onSwatchKeydown(event, index) {
+		const offset = getNavigationOffset(event.key);
+		if (offset === void 0 || validSwatches.value.length === 0) return;
+		event.preventDefault();
+		const nextIndex = (index + offset + validSwatches.value.length) % validSwatches.value.length;
+		const nextSwatch = validSwatches.value[nextIndex];
+		(swatchesRef.value?.querySelectorAll(".rp-color-picker__swatch")[nextIndex])?.focus({ preventScroll: true });
+		if (nextSwatch) selectSwatch(nextSwatch);
+	}
+	return {
+		swatchesRef,
+		normalizedSwatchesPerRow,
+		validSwatches,
+		swatchesStyle,
+		swatchSize,
+		isSwatchSelected,
+		getSwatchTabindex,
+		selectSwatch,
+		onSwatchFocus,
+		onSwatchesFocusout,
+		onSwatchKeydown
+	};
+}
+function normalizeSwatchesPerRow(value) {
+	if (value === void 0 || !Number.isFinite(value) || value < 1) return void 0;
+	return Math.min(MAX_SWATCHES_PER_ROW, Math.floor(value));
+}
+function getNavigationOffset(key) {
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowDown": return 1;
+		case "ArrowLeft":
+		case "ArrowUp": return -1;
+		default: return;
+	}
+}
+//#endregion
+//#region src/components/color-picker/useColorPickerValue.ts
+function useColorPickerValue(props, emitUpdate) {
+	const format = computed(() => props.format ?? "hex");
+	const emittedStringColor = ref(null);
+	const selectedColor = computed(() => {
+		const value = props.modelValue;
+		const cached = emittedStringColor.value;
+		if (cached && cached.value === value && cached.format === format.value) return cached.color;
+		return parseColorPickerValue(value) ?? {
+			hue: 0,
+			saturation: 100,
+			value: 100,
+			opacity: 100
+		};
+	});
+	const saturationValue = computed(() => ({
+		saturation: selectedColor.value.saturation,
+		value: selectedColor.value.value
+	}));
+	const opacityColor = computed(() => getHsvCssColor(selectedColor.value.hue, selectedColor.value.saturation, selectedColor.value.value));
+	const showAlphaControls = computed(() => isColorPickerAlphaFormat(format.value));
+	function updateSelection(value) {
+		emitColor({
+			saturation: value.saturation,
+			value: value.value,
+			...value.opacity === void 0 ? {} : { opacity: value.opacity }
+		});
+	}
+	function updateHue(value) {
+		emitColor({ hue: value });
+	}
+	function updateOpacity(value) {
+		emitColor({ opacity: value });
+	}
+	function selectColor(value) {
+		if (props.readonly) return;
+		const parsedColor = parseColorPickerValue(value);
+		if (!parsedColor) return;
+		emitColor(normalizeColor(parsedColor));
+	}
+	function isColorSelected(value) {
+		const parsedColor = parseColorPickerValue(value);
+		if (!parsedColor) return false;
+		return getComparableColor(normalizeColor(parsedColor)) === getComparableColor(selectedColor.value);
+	}
+	function emitColor(nextColor) {
+		const color = normalizeColor({
+			...selectedColor.value,
+			...nextColor
+		});
+		const formattedValue = formatColorPickerValue(color, format.value);
+		emittedStringColor.value = {
+			value: formattedValue,
+			format: format.value,
+			color
+		};
+		emitUpdate(formattedValue);
+	}
+	return {
+		selectedColor,
+		saturationValue,
+		opacityColor,
+		showAlphaControls,
+		updateSelection,
+		updateHue,
+		updateOpacity,
+		selectColor,
+		isColorSelected
+	};
+}
+function normalizeColor(color) {
+	return {
+		hue: normalizeHue(color.hue),
+		saturation: roundPercent(clampPercent(color.saturation)),
+		value: roundPercent(clampPercent(color.value)),
+		opacity: roundPercent(clampOpacity(color.opacity))
+	};
+}
+function getComparableColor(color) {
+	return formatColorPickerValue(color, "rgba");
+}
+//#endregion
+//#region src/components/color-picker/color-picker.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-38eeea2b class=rp-color-picker__header><span data-v-38eeea2b class=rp-color-picker__label>");
+var t1 = template("<button data-v-38eeea2b class=rp-color-picker__swatch type=button role=radio>");
+var t2 = template("<div data-v-38eeea2b class=rp-color-picker__swatches role=radiogroup>");
+var t3 = template("<div data-v-38eeea2b>", 1);
+delegateEvents("click", "keydown", "focusout");
+//#endregion
+//#region src/components/color-picker/color-picker.vue
+var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpColorPicker",
+	inheritAttrs: false,
+	__name: "color-picker",
+	props: {
+		id: {},
+		modelValue: {},
+		format: { default: "hex" },
+		size: {},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		withPicker: {
+			type: Boolean,
+			default: true
+		},
+		swatches: { default: () => [] },
+		swatchesPerRow: {},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const rootClass = computed(() => bem("rp-color-picker", {
+			[`size-${props.size}`]: Boolean(props.size),
+			readonly: props.readonly
+		}));
+		const attrs = useAttrs();
+		const rootAttrs = computed(() => {
+			const { disabled: _disabled, invalid: _invalid, required: _required, ...filteredAttrs } = attrs;
+			return filteredAttrs;
+		});
+		const { selectedColor, saturationValue, opacityColor, showAlphaControls, updateSelection, updateHue, updateOpacity, selectColor, isColorSelected } = useColorPickerValue(props, (value) => emit("update:modelValue", value));
+		const { swatchesRef, normalizedSwatchesPerRow, validSwatches, swatchesStyle, swatchSize, isSwatchSelected, getSwatchTabindex, selectSwatch, onSwatchFocus, onSwatchesFocusout, onSwatchKeydown } = useColorPickerSwatches(props, {
+			isSelected: isColorSelected,
+			select: selectColor
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n22 = t3();
+		renderEffect(() => setDynamicProps(n22, [rootAttrs.value, {
+			class: rootClass.value,
+			"data-readonly": __props.readonly || void 0
+		}]));
+		setInsertionState(n22, null, 0);
+		createIf(() => $slots.default, () => {
+			const n4 = t0();
+			setInsertionState(child(n4), null, 0);
+			createSlot("default", null, null, 1);
+			return n4;
+		});
+		setInsertionState(n22, null, 1);
+		createIf(() => __props.withPicker, () => {
+			return [
+				createComponent(color_picker_saturation_default, {
+					id: () => __props.id,
+					"model-value": () => unref(saturationValue),
+					hue: () => unref(selectedColor).hue,
+					readonly: () => __props.readonly,
+					"aria-label": () => __props.ariaLabel,
+					describedby: () => __props.describedby,
+					labelledby: () => __props.labelledby,
+					"onUpdate:modelValue": () => unref(updateSelection)
+				}),
+				createComponent(color_picker_slider_default, {
+					variant: "hue",
+					value: () => unref(selectedColor).hue,
+					readonly: () => __props.readonly,
+					"onUpdate:value": () => unref(updateHue)
+				}),
+				createIf(() => unref(showAlphaControls), () => {
+					return createComponent(color_picker_slider_default, {
+						variant: "opacity",
+						color: () => unref(opacityColor),
+						value: () => unref(selectedColor).opacity,
+						readonly: () => __props.readonly,
+						"onUpdate:value": () => unref(updateOpacity)
+					});
+				})
+			];
+		}, null, 2);
+		setInsertionState(n22, null, 2);
+		createIf(() => unref(validSwatches).length, () => {
+			const n21 = t2();
+			renderEffect(() => {
+				const _withPicker = __props.withPicker;
+				setStyle(n21, unref(swatchesStyle));
+				setAttr(n21, "data-fill", unref(normalizedSwatchesPerRow) ? true : void 0);
+				setAttr(n21, "data-with-picker", _withPicker || void 0);
+				setProp(n21, "id", _withPicker ? void 0 : __props.id);
+				setAttr(n21, "aria-label", _withPicker ? "Color swatches" : __props.ariaLabel || "Color swatches");
+				setAttr(n21, "aria-describedby", _withPicker ? void 0 : __props.describedby);
+				setAttr(n21, "aria-labelledby", _withPicker ? void 0 : __props.labelledby);
+			});
+			setInsertionState(n21, null, 0);
+			createFor(() => unref(validSwatches), (_for_item0, _for_key0) => {
+				const n20 = t1();
+				renderEffect(() => {
+					const _readonly = __props.readonly;
+					const _index = _for_key0.value;
+					const _swatch = _for_item0.value;
+					setProp(n20, "disabled", _readonly);
+					setProp(n20, "tabindex", _readonly ? -1 : unref(getSwatchTabindex)(_index));
+					setAttr(n20, "aria-checked", unref(isSwatchSelected)(_index));
+					setAttr(n20, "aria-label", `Select color ${_swatch}`);
+					setProp(n20, "title", _swatch);
+				});
+				setInsertionState(n20, null, 0);
+				createComponent(color_swatch_default, {
+					color: () => _for_item0.value,
+					size: () => unref(swatchSize),
+					"aria-hidden": "true"
+				}, extend(() => {
+					return createIf(() => unref(isSwatchSelected)(_for_key0.value), () => {
+						return createComponent(unref(check_default), { class: "rp-color-picker__swatch-check" });
+					}, null, 129);
+				}, { _: 8 }));
+				n20.$evtclick = createInvoker(() => unref(selectSwatch)(_for_item0.value));
+				on(n20, "focus", () => unref(onSwatchFocus)(_for_key0.value));
+				n20.$evtkeydown = createInvoker(($event) => unref(onSwatchKeydown)($event, _for_key0.value));
+				return n20;
+			}, (swatch, index) => `${swatch}-${index}`, 9);
+			n21.$evtfocusout = createInvoker((e) => unref(onSwatchesFocusout)(e));
+			_setTemplateRef(n21, swatchesRef, null, "swatchesRef");
+			return n21;
+		});
+		return n22;
+	}
+}), [["__scopeId", "data-v-38eeea2b"]]);
+//#endregion
+export { formatColorPickerValue as n, parseColorPickerValue as r, color_picker_default as t };