ropav 0.2.0 → 0.3.0

package/dist/color-picker.js

@@ -1,860 +0,0 @@
-import './color-picker.css';
-import { t as useStylesApi } from "./styles-api.js";
-import { n as toPresenceAttribute } from "./attributes.js";
-import { t as bem } from "./bem.js";
-import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { i as roundTo, t as clamp } from "./number.js";
-import { t as parseCssColor } from "./color.js";
-import { t as check_default } from "./check.js";
-import { t as color_swatch_default } from "./color-swatch.js";
-import { n as toHTMLElement } from "./componentRef.js";
-import { t as createPointerSession } from "./pointerSession.js";
-import { i as isNodeWithinElement } from "./events.js";
-import { child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, next, nthChild, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setTemplateRefBinding, setValue, template, unref } from "vue";
-//#region src/utils/colorPicker.ts
-var colorPickerFormats = [
-	"hex",
-	"hexa",
-	"rgb",
-	"rgba",
-	"hsl",
-	"hsla"
-];
-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 roundTo(value);
-}
-function getColorPickerKeyboardValue(key, currentValue, maxValue, step = 1) {
-	switch (key) {
-		case "ArrowRight":
-		case "ArrowUp": return currentValue + step;
-		case "ArrowLeft":
-		case "ArrowDown": return currentValue - step;
-		case "Home": return 0;
-		case "End": return maxValue;
-		default: return;
-	}
-}
-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(roundTo(value));
-}
-//#endregion
-//#region src/components/color-picker/useColorPickerDrag.ts
-function useColorPickerDrag({ target, focusTarget, readonly, isGeometryValid, updateFromPointer }) {
-	function refreshGeometry(currentSession) {
-		const rect = currentSession.element.getBoundingClientRect();
-		if (!isGeometryValid(rect)) return false;
-		currentSession.geometryValid = true;
-		currentSession.rect = rect;
-		return true;
-	}
-	function applyPointer(event, currentSession) {
-		updateFromPointer({
-			clientX: event.clientX,
-			clientY: event.clientY
-		}, currentSession.rect);
-	}
-	const pointerSession = createPointerSession({
-		onStart(event, currentSession) {
-			if (currentSession.geometryValid) applyPointer(event, currentSession);
-		},
-		onUpdate: applyPointer,
-		refreshGeometry
-	});
-	function onPointerDown(event) {
-		return pointerSession.start(event, () => {
-			if (readonly()) return;
-			const element = target.value;
-			if (!element) return;
-			event.preventDefault();
-			(focusTarget?.value ?? element).focus();
-			const rect = element.getBoundingClientRect();
-			const geometryValid = isGeometryValid(rect);
-			return {
-				geometryDirty: !geometryValid,
-				state: {
-					element,
-					geometryValid,
-					rect
-				},
-				target: element
-			};
-		});
-	}
-	onBeforeUnmount(pointerSession.stop);
-	return { onPointerDown };
-}
-//#endregion
-//#region src/components/color-picker/useColorPickerSaturation.ts
-function useColorPickerSaturation({ modelValue, hue, readonly, onChange }) {
-	const saturationRef = ref(null);
-	const saturationInputRef = ref(null);
-	const selection = computed(() => {
-		const currentSelection = modelValue();
-		return {
-			saturation: clampPercent(currentSelection.saturation),
-			value: clampPercent(currentSelection.value)
-		};
-	});
-	const normalizedHue = computed(() => normalizeHue(hue()));
-	function setSaturationElement(value) {
-		saturationRef.value = toHTMLElement(value);
-	}
-	function setSaturationInput(value) {
-		saturationInputRef.value = toHTMLElement(value);
-	}
-	function commitSelection(nextSaturation, nextValue) {
-		if (readonly()) return;
-		const nextSelection = {
-			saturation: roundPercent(clampPercent(nextSaturation)),
-			value: roundPercent(clampPercent(nextValue))
-		};
-		if (nextSelection.saturation === selection.value.saturation && nextSelection.value === selection.value.value) return;
-		onChange(nextSelection);
-	}
-	function updateAxis(axis, nextValue) {
-		if (axis === "saturation") {
-			commitSelection(nextValue, selection.value.value);
-			return;
-		}
-		commitSelection(selection.value.saturation, nextValue);
-	}
-	function onAxisKeydown(event, axis) {
-		const currentValue = axis === "saturation" ? selection.value.saturation : selection.value.value;
-		const nextValue = getColorPickerKeyboardValue(event.key, currentValue, 100, event.shiftKey ? 10 : void 0);
-		if (nextValue === void 0) return;
-		event.preventDefault();
-		if (!readonly()) updateAxis(axis, nextValue);
-	}
-	function onAxisInput(event, axis) {
-		const input = event.currentTarget;
-		if (!(input instanceof HTMLInputElement)) return;
-		if (readonly()) {
-			input.value = String(axis === "saturation" ? selection.value.saturation : selection.value.value);
-			return;
-		}
-		updateAxis(axis, Number(input.value));
-	}
-	function updateFromTwoDimensionalPointer(pointer, rect) {
-		if (rect.width <= 0 || rect.height <= 0) return;
-		commitSelection((pointer.clientX - rect.left) / rect.width * 100, 100 - (pointer.clientY - rect.top) / rect.height * 100);
-	}
-	const { onPointerDown } = useColorPickerDrag({
-		target: saturationRef,
-		focusTarget: saturationInputRef,
-		readonly,
-		isGeometryValid: (rect) => rect.width > 0 && rect.height > 0,
-		updateFromPointer: updateFromTwoDimensionalPointer
-	});
-	return {
-		setSaturationElement,
-		setSaturationInput,
-		selection,
-		normalizedHue,
-		onPointerDown,
-		onAxisKeydown,
-		onAxisInput
-	};
-}
-//#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-9c7fa05b role=group data-control=saturation><input data-v-9c7fa05b 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-9c7fa05b 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-9c7fa05b class=rp-color-picker__surface aria-hidden=true></span><span data-v-9c7fa05b data-control=saturation aria-hidden=true>", 1);
-//#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: {},
-		controlClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		controlStyle: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		handleClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		handleStyle: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const { setSaturationElement, setSaturationInput, selection, normalizedHue, onPointerDown, onAxisKeydown, onAxisInput } = useColorPickerSaturation({
-			modelValue: () => props.modelValue,
-			hue: () => props.hue,
-			readonly: () => props.readonly,
-			onChange: (nextSelection) => emit("update:modelValue", nextSelection)
-		});
-		const saturationStyle = computed(() => ({
-			"--_rp-color-picker-hue": String(normalizeHueForColor(normalizedHue.value)),
-			"--_rp-color-picker-saturation-x": `${selection.value.saturation}%`,
-			"--_rp-color-picker-saturation-y": `${100 - selection.value.value}%`,
-			"--_rp-color-picker-current": getHsvCssColor(normalizedHue.value, selection.value.saturation, selection.value.value)
-		}));
-		const ariaValueText = computed(() => `${Math.round(selection.value.saturation)}% saturation, ${Math.round(selection.value.value)}% value`);
-		const groupAriaLabel = computed(() => props.labelledby ? void 0 : props.ariaLabel || "Color area");
-		const _setTemplateRef = createTemplateRefSetter();
-		const n3 = t0$2();
-		const n0 = child(n3);
-		const n1 = next(n0, 1);
-		const n2 = nthChild(n3, 3);
-		on(n0, "input", ($event) => unref(onAxisInput)($event, "saturation"));
-		on(n0, "keydown", ($event) => unref(onAxisKeydown)($event, "saturation"));
-		on(n1, "input", ($event) => unref(onAxisInput)($event, "value"));
-		on(n1, "keydown", ($event) => unref(onAxisKeydown)($event, "value"));
-		on(n3, "pointerdown", (e) => unref(onPointerDown)(e));
-		renderEffect(() => {
-			const _describedby = __props.describedby;
-			const _readonly = __props.readonly;
-			const _id = __props.id;
-			const _selection = unref(selection);
-			const _ariaValueText = ariaValueText.value;
-			setClass(n3, ["rp-color-picker__saturation", __props.controlClass]);
-			setStyle(n3, [saturationStyle.value, __props.controlStyle]);
-			setAttr(n3, "aria-label", groupAriaLabel.value);
-			setAttr(n3, "aria-labelledby", __props.labelledby);
-			setAttr(n3, "aria-describedby", _describedby);
-			setAttr(n3, "data-readonly", unref(toPresenceAttribute)(_readonly));
-			setProp(n0, "id", _id);
-			setValue(n0, _selection.saturation);
-			setAttr(n0, "aria-valuenow", Math.round(_selection.saturation));
-			setAttr(n0, "aria-valuetext", _ariaValueText);
-			setAttr(n0, "aria-describedby", _describedby);
-			setAttr(n0, "aria-readonly", _readonly || void 0);
-			_setTemplateRef(n0, setSaturationInput, null, "setSaturationInput");
-			setProp(n1, "id", _id ? `${_id}-value` : void 0);
-			setValue(n1, _selection.value);
-			setAttr(n1, "aria-valuenow", Math.round(_selection.value));
-			setAttr(n1, "aria-valuetext", _ariaValueText);
-			setAttr(n1, "aria-describedby", _describedby);
-			setAttr(n1, "aria-readonly", _readonly || void 0);
-			setClass(n2, ["rp-color-picker__handle", __props.handleClass]);
-			setStyle(n2, __props.handleStyle);
-			_setTemplateRef(n3, setSaturationElement, null, "setSaturationElement");
-		});
-		return n3;
-	}
-}), [["__scopeId", "data-v-9c7fa05b"]]);
-//#endregion
-//#region src/components/color-picker/useColorPickerSlider.ts
-function useColorPickerSlider({ variant, value, readonly, onChange }) {
-	const sliderRef = ref(null);
-	const sliderState = computed(() => {
-		const isHue = variant() === "hue";
-		const normalizedValue = isHue ? normalizeHue(value()) : clampOpacity(value());
-		return {
-			isHue,
-			max: isHue ? 359 : 100,
-			value: normalizedValue,
-			outputValue: normalizeOutputValue(normalizedValue, isHue)
-		};
-	});
-	function setSliderElement(element) {
-		sliderRef.value = toHTMLElement(element);
-	}
-	function commitValue(nextValue) {
-		if (readonly()) return;
-		const normalizedNextValue = normalizeOutputValue(nextValue, sliderState.value.isHue);
-		if (normalizedNextValue === sliderState.value.outputValue) return;
-		onChange(normalizedNextValue);
-	}
-	function updateFromHorizontalPointer(pointer, rect) {
-		if (rect.width <= 0) return;
-		commitValue((pointer.clientX - rect.left) / rect.width * sliderState.value.max);
-	}
-	const { onPointerDown } = useColorPickerDrag({
-		target: sliderRef,
-		readonly,
-		isGeometryValid: (rect) => rect.width > 0,
-		updateFromPointer: updateFromHorizontalPointer
-	});
-	function onKeydown(event) {
-		if (readonly()) return;
-		const nextValue = getColorPickerKeyboardValue(event.key, sliderState.value.value, sliderState.value.max, event.shiftKey ? 10 : void 0);
-		if (nextValue === void 0) return;
-		event.preventDefault();
-		commitValue(nextValue);
-	}
-	return {
-		setSliderElement,
-		sliderState,
-		onPointerDown,
-		onKeydown
-	};
-}
-function normalizeOutputValue(nextValue, isHue) {
-	return isHue ? Math.round(clampHue(nextValue)) : roundPercent(clampOpacity(nextValue));
-}
-//#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-3a0ac9e0 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-3a0ac9e0 aria-hidden=true></span><span data-v-3a0ac9e0 aria-hidden=true>", 1);
-//#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
-		},
-		controlClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		controlStyle: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		handleClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		handleStyle: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: ["update:value"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const { setSliderElement, sliderState, onPointerDown, onKeydown } = useColorPickerSlider({
-			variant: () => props.variant,
-			value: () => props.value,
-			readonly: () => props.readonly,
-			onChange: (value) => emit("update:value", value)
-		});
-		const rootClass = computed(() => `rp-color-picker__${props.variant}`);
-		const surfaceClass = computed(() => ["rp-color-picker__slider-surface", `rp-color-picker__${props.variant}-surface`]);
-		const internalHandleClass = computed(() => ["rp-color-picker__slider-handle", `rp-color-picker__${props.variant}-handle`]);
-		const sliderStyle = computed(() => {
-			const style = { "--_rp-color-picker-slider-x": `${sliderState.value.outputValue / sliderState.value.max * 100}%` };
-			if (sliderState.value.isHue) style["--_rp-color-picker-hue"] = String(normalizeHueForColor(sliderState.value.outputValue));
-			else style["--_rp-color-picker-opacity-color"] = props.color;
-			return style;
-		});
-		const ariaLabel = computed(() => sliderState.value.isHue ? "Hue" : "Opacity");
-		const ariaValueText = computed(() => sliderState.value.isHue ? `${Math.round(sliderState.value.value)} degrees hue` : `${Math.round(sliderState.value.value)}% opacity`);
-		const _setTemplateRef = createTemplateRefSetter();
-		const n2 = t0$1();
-		const n0 = child(n2);
-		const n1 = next(n0, 1);
-		on(n2, "pointerdown", (e) => unref(onPointerDown)(e));
-		on(n2, "keydown", (e) => unref(onKeydown)(e));
-		renderEffect(() => {
-			const _sliderState = unref(sliderState);
-			const _readonly = __props.readonly;
-			const _variant = __props.variant;
-			setClass(n2, [rootClass.value, __props.controlClass]);
-			setStyle(n2, [sliderStyle.value, __props.controlStyle]);
-			setAttr(n2, "aria-label", ariaLabel.value);
-			setAttr(n2, "aria-valuemax", _sliderState.max);
-			setAttr(n2, "aria-valuenow", Math.round(_sliderState.value));
-			setAttr(n2, "aria-valuetext", ariaValueText.value);
-			setAttr(n2, "aria-readonly", _readonly || void 0);
-			setAttr(n2, "data-readonly", unref(toPresenceAttribute)(_readonly));
-			setAttr(n2, "data-control", _variant);
-			setClass(n0, surfaceClass.value);
-			setClass(n1, [internalHandleClass.value, __props.handleClass]);
-			setStyle(n1, __props.handleStyle);
-			setAttr(n1, "data-control", _variant);
-			_setTemplateRef(n2, setSliderElement, null, "setSliderElement");
-		});
-		return n2;
-	}
-}), [["__scopeId", "data-v-3a0ac9e0"]]);
-//#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) {
-		if (isNodeWithinElement(event.relatedTarget, event.currentTarget)) 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-7fe38e4e class=rp-color-picker__header><span data-v-7fe38e4e>");
-var t1 = template("<button data-v-7fe38e4e>");
-var t2 = template("<div data-v-7fe38e4e>");
-var t3 = template("<div data-v-7fe38e4e>", 1);
-//#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: {},
-		classNames: {},
-		styles: {}
-	},
-	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 { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			class: rootClass.value,
-			"data-readonly": toPresenceAttribute(props.readonly)
-		}));
-		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 templateRefs = { swatches: swatchesRef };
-		const n22 = t3();
-		renderEffect(() => setDynamicProps(n22, [rootAttrs.value]));
-		setInsertionState(n22, null, 0);
-		createIf(() => $slots.default, () => {
-			const n4 = t0();
-			const n3 = child(n4);
-			renderEffect(() => setDynamicProps(n3, [unref(getPartAttrs)("label", { class: "rp-color-picker__label" })]));
-			setInsertionState(n3, 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,
-					"control-class": () => __props.classNames?.control,
-					"control-style": () => __props.styles?.control,
-					"handle-class": () => __props.classNames?.handle,
-					"handle-style": () => __props.styles?.handle,
-					"onUpdate:modelValue": () => unref(updateSelection)
-				}),
-				createComponent(color_picker_slider_default, {
-					variant: "hue",
-					value: () => unref(selectedColor).hue,
-					readonly: () => __props.readonly,
-					"control-class": () => __props.classNames?.control,
-					"control-style": () => __props.styles?.control,
-					"handle-class": () => __props.classNames?.handle,
-					"handle-style": () => __props.styles?.handle,
-					"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,
-						"control-class": () => __props.classNames?.control,
-						"control-style": () => __props.styles?.control,
-						"handle-class": () => __props.classNames?.handle,
-						"handle-style": () => __props.styles?.handle,
-						"onUpdate:value": () => unref(updateOpacity)
-					});
-				})
-			];
-		}, null, 2);
-		setInsertionState(n22, null, 2);
-		createIf(() => unref(validSwatches).length, () => {
-			const n21 = t2();
-			renderEffect(() => {
-				const _withPicker = __props.withPicker;
-				setDynamicProps(n21, [unref(getPartAttrs)("swatches", {
-					class: "rp-color-picker__swatches",
-					style: unref(swatchesStyle)
-				}), {
-					"data-fill": unref(normalizedSwatchesPerRow) ? true : void 0,
-					"data-with-picker": _withPicker || void 0,
-					id: _withPicker ? void 0 : __props.id,
-					role: "radiogroup",
-					"aria-label": _withPicker ? "Color swatches" : __props.ariaLabel || "Color swatches",
-					"aria-describedby": _withPicker ? void 0 : __props.describedby,
-					"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 _isSwatchSelected = unref(isSwatchSelected);
-					const _swatch = _for_item0.value;
-					const _toPresenceAttribute = unref(toPresenceAttribute);
-					setDynamicProps(n20, [unref(getPartAttrs)("swatch", { class: "rp-color-picker__swatch" }), {
-						type: "button",
-						role: "radio",
-						disabled: _readonly,
-						tabindex: _readonly ? -1 : unref(getSwatchTabindex)(_index),
-						"aria-checked": _isSwatchSelected(_index),
-						"aria-label": `Select color ${_swatch}`,
-						title: _swatch,
-						"data-selected": _toPresenceAttribute(_isSwatchSelected(_index)),
-						"data-readonly": _toPresenceAttribute(_readonly)
-					}]);
-				});
-				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 }));
-				on(n20, "click", () => unref(selectSwatch)(_for_item0.value));
-				on(n20, "focus", () => unref(onSwatchFocus)(_for_key0.value));
-				on(n20, "keydown", ($event) => unref(onSwatchKeydown)($event, _for_key0.value));
-				return n20;
-			}, (swatch, index) => `${swatch}-${index}`, 9);
-			on(n21, "focusout", (e) => unref(onSwatchesFocusout)(e));
-			setTemplateRefBinding(n21, () => templateRefs.swatches);
-			return n21;
-		});
-		return n22;
-	}
-}), [["__scopeId", "data-v-7fe38e4e"]]);
-//#endregion
-export { parseColorPickerValue as i, colorPickerFormats as n, formatColorPickerValue as r, color_picker_default as t };