ropav 0.1.6 → 0.1.8

package/dist/color-picker.js

@@ -1,14 +1,25 @@
 import './color-picker.css';
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+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 { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nthChild, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setValue, template, unref } from "vue";
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
+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);
 }
@@ -27,7 +38,18 @@ function clampOpacity(value) {
 	return clamp(Number.isFinite(value) ? value : 100, 0, 100);
 }
 function roundPercent(value) {
-	return Math.round(value * 100) / 100;
+	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";
@@ -142,127 +164,129 @@ function formatAlpha(opacity) {
 	return formatNumber(clampOpacity(opacity) / 100);
 }
 function formatNumber(value) {
-	return String(Math.round(value * 100) / 100);
+	return String(roundTo(value));
 }
 //#endregion
 //#region src/components/color-picker/useColorPickerDrag.ts
-function getPointerId(event) {
-	return Number.isFinite(event.pointerId) ? event.pointerId : void 0;
-}
 function useColorPickerDrag({ target, focusTarget, readonly, isGeometryValid, updateFromPointer }) {
-	let session;
-	let frameWindow = null;
-	let frameId;
-	let geometryDirty = false;
-	let pendingPointer;
-	function isCurrentPointer(event) {
-		const currentSession = session;
-		if (!currentSession) return false;
-		const pointerId = getPointerId(event);
-		return currentSession.pointerId === void 0 || pointerId === currentSession.pointerId;
-	}
-	function cancelScheduledFrame() {
-		if (frameId !== void 0) frameWindow?.cancelAnimationFrame(frameId);
-		frameWindow = null;
-		frameId = void 0;
-	}
-	function applyScheduledUpdate(currentSession) {
-		if (session !== currentSession) return;
-		if (geometryDirty) {
-			const rect = currentSession.element.getBoundingClientRect();
-			if (!isGeometryValid(rect)) return;
-			currentSession.rect = rect;
-			geometryDirty = false;
-		}
-		const pointer = pendingPointer;
-		pendingPointer = void 0;
-		if (pointer) updateFromPointer(pointer, currentSession.rect);
-	}
-	function flushScheduledUpdate() {
-		const currentSession = session;
-		cancelScheduledFrame();
-		if (currentSession) applyScheduledUpdate(currentSession);
-	}
-	function scheduleUpdate() {
-		const currentSession = session;
-		if (!currentSession) return;
-		const view = currentSession.view;
-		if (!view?.requestAnimationFrame) {
-			applyScheduledUpdate(currentSession);
-			return;
-		}
-		if (frameId !== void 0) return;
-		frameWindow = view;
-		frameId = view.requestAnimationFrame(() => {
-			frameWindow = null;
-			frameId = void 0;
-			applyScheduledUpdate(currentSession);
-		});
+	function refreshGeometry(currentSession) {
+		const rect = currentSession.element.getBoundingClientRect();
+		if (!isGeometryValid(rect)) return false;
+		currentSession.geometryValid = true;
+		currentSession.rect = rect;
+		return true;
 	}
-	function onGeometryChange() {
-		if (!session) return;
-		geometryDirty = true;
-		scheduleUpdate();
-	}
-	function stopDragging() {
-		const stoppedSession = session;
-		if (!stoppedSession) return;
-		stoppedSession.view?.removeEventListener("pointermove", onPointerMove);
-		stoppedSession.view?.removeEventListener("pointerup", onPointerEnd);
-		stoppedSession.view?.removeEventListener("pointercancel", onPointerEnd);
-		stoppedSession.view?.removeEventListener("resize", onGeometryChange);
-		stoppedSession.view?.removeEventListener("scroll", onGeometryChange, true);
-		cancelScheduledFrame();
-		geometryDirty = false;
-		pendingPointer = void 0;
-		session = void 0;
-	}
-	function onPointerMove(event) {
-		if (!isCurrentPointer(event)) return;
-		pendingPointer = {
+	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)
 		};
-		scheduleUpdate();
+	});
+	const normalizedHue = computed(() => normalizeHue(hue()));
+	function setSaturationElement(value) {
+		saturationRef.value = toHTMLElement(value);
 	}
-	function onPointerEnd(event) {
-		if (!isCurrentPointer(event)) return;
-		if (event.type === "pointerup") flushScheduledUpdate();
-		stopDragging();
+	function setSaturationInput(value) {
+		saturationInputRef.value = toHTMLElement(value);
 	}
-	function onPointerDown(event) {
-		if (readonly() || event.button !== 0 || event.isPrimary === false) return;
-		const el = target.value;
-		if (!el) return;
-		event.preventDefault();
-		(focusTarget?.value ?? el).focus();
-		stopDragging();
-		const nextSession = {
-			element: el,
-			pointerId: getPointerId(event),
-			rect: el.getBoundingClientRect(),
-			view: el.ownerDocument.defaultView
+	function commitSelection(nextSaturation, nextValue) {
+		if (readonly()) return;
+		const nextSelection = {
+			saturation: roundPercent(clampPercent(nextSaturation)),
+			value: roundPercent(clampPercent(nextValue))
 		};
-		session = nextSession;
-		geometryDirty = !isGeometryValid(nextSession.rect);
-		if (!geometryDirty) updateFromPointer({
-			clientX: event.clientX,
-			clientY: event.clientY
-		}, nextSession.rect);
-		if (session !== nextSession) return;
-		nextSession.view?.addEventListener("pointermove", onPointerMove);
-		nextSession.view?.addEventListener("pointerup", onPointerEnd);
-		nextSession.view?.addEventListener("pointercancel", onPointerEnd);
-		nextSession.view?.addEventListener("resize", onGeometryChange);
-		nextSession.view?.addEventListener("scroll", onGeometryChange, true);
-	}
-	onBeforeUnmount(stopDragging);
-	return { onPointerDown };
+		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-22669f8e role=group data-control=saturation><input data-v-22669f8e 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-22669f8e 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-22669f8e class=rp-color-picker__surface aria-hidden=true></span><span data-v-22669f8e data-control=saturation aria-hidden=true>", 1);
-delegateEvents("input", "keydown", "pointerdown");
+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({
@@ -312,124 +336,115 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 	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 { 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(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)
+			"--_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(saturation.value)}% saturation, ${Math.round(value.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");
-		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, rect) {
-			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,
-			isGeometryValid: (rect) => rect.width > 0 && rect.height > 0,
-			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 n3 = t0$2();
 		const n0 = child(n3);
 		const n1 = next(n0, 1);
 		const n2 = nthChild(n3, 3);
-		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"));
-		n3.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
-		_setTemplateRef(n3, saturationRef, null, "saturationRef");
+		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 _saturation = saturation.value;
+			const _selection = unref(selection);
 			const _ariaValueText = ariaValueText.value;
-			const _value = value.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(presence)(_readonly));
+			setAttr(n3, "data-readonly", unref(toPresenceAttribute)(_readonly));
 			setProp(n0, "id", _id);
-			setValue(n0, _saturation);
-			setAttr(n0, "aria-valuenow", Math.round(_saturation));
+			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, _value);
-			setAttr(n1, "aria-valuenow", Math.round(_value));
+			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-22669f8e"]]);
+}), [["__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-0299a505 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-0299a505 aria-hidden=true></span><span data-v-0299a505 aria-hidden=true>", 1);
-delegateEvents("pointerdown", "keydown");
+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({
@@ -476,92 +491,51 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 	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 { 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 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));
+			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(() => 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, rect) {
-			if (rect.width <= 0) return;
-			updateValue((e.clientX - rect.left) / rect.width * max.value);
-		}
-		const { onPointerDown } = useColorPickerDrag({
-			target: sliderRef,
-			readonly: () => props.readonly,
-			isGeometryValid: (rect) => rect.width > 0,
-			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 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);
-		n2.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
-		n2.$evtkeydown = createInvoker(onKeydown);
-		_setTemplateRef(n2, sliderRef, null, "sliderRef");
+		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", max.value);
-			setAttr(n2, "aria-valuenow", Math.round(normalizedValue.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(presence)(_readonly));
+			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-0299a505"]]);
+}), [["__scopeId", "data-v-3a0ac9e0"]]);
 //#endregion
 //#region src/components/color-picker/useColorPickerSwatches.ts
 var MAX_SWATCHES_PER_ROW = 15;
@@ -595,9 +569,7 @@ function useColorPickerSwatches(props, options) {
 		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;
+		if (isNodeWithinElement(event.relatedTarget, event.currentTarget)) return;
 		focusedSwatchIndex.value = null;
 	}
 	function onSwatchKeydown(event, index) {
@@ -720,11 +692,10 @@ function getComparableColor(color) {
 }
 //#endregion
 //#region src/components/color-picker/color-picker.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-41c4ca07 class=rp-color-picker__header><span data-v-41c4ca07>");
-var t1 = template("<button data-v-41c4ca07>");
-var t2 = template("<div data-v-41c4ca07>");
-var t3 = template("<div data-v-41c4ca07>", 1);
-delegateEvents("click", "keydown", "focusout");
+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({
@@ -763,14 +734,14 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
-			"data-readonly": presence(props.readonly)
+			"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 _setTemplateRef = createTemplateRefSetter();
+		const templateRefs = { swatches: swatchesRef };
 		const n22 = t3();
 		renderEffect(() => setDynamicProps(n22, [rootAttrs.value]));
 		setInsertionState(n22, null, 0);
@@ -850,7 +821,7 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					const _index = _for_key0.value;
 					const _isSwatchSelected = unref(isSwatchSelected);
 					const _swatch = _for_item0.value;
-					const _presence = unref(presence);
+					const _toPresenceAttribute = unref(toPresenceAttribute);
 					setDynamicProps(n20, [unref(getPartAttrs)("swatch", { class: "rp-color-picker__swatch" }), {
 						type: "button",
 						role: "radio",
@@ -859,8 +830,8 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 						"aria-checked": _isSwatchSelected(_index),
 						"aria-label": `Select color ${_swatch}`,
 						title: _swatch,
-						"data-selected": _presence(_isSwatchSelected(_index)),
-						"data-readonly": _presence(_readonly)
+						"data-selected": _toPresenceAttribute(_isSwatchSelected(_index)),
+						"data-readonly": _toPresenceAttribute(_readonly)
 					}]);
 				});
 				setInsertionState(n20, null, 0);
@@ -873,17 +844,17 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 						return createComponent(unref(check_default), { class: "rp-color-picker__swatch-check" });
 					}, null, 129);
 				}, { _: 8 }));
-				n20.$evtclick = createInvoker(() => unref(selectSwatch)(_for_item0.value));
+				on(n20, "click", () => unref(selectSwatch)(_for_item0.value));
 				on(n20, "focus", () => unref(onSwatchFocus)(_for_key0.value));
-				n20.$evtkeydown = createInvoker(($event) => unref(onSwatchKeydown)($event, _for_key0.value));
+				on(n20, "keydown", ($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");
+			on(n21, "focusout", (e) => unref(onSwatchesFocusout)(e));
+			setTemplateRefBinding(n21, () => templateRefs.swatches);
 			return n21;
 		});
 		return n22;
 	}
-}), [["__scopeId", "data-v-41c4ca07"]]);
+}), [["__scopeId", "data-v-7fe38e4e"]]);
 //#endregion
-export { formatColorPickerValue as n, parseColorPickerValue as r, color_picker_default as t };
+export { parseColorPickerValue as i, colorPickerFormats as n, formatColorPickerValue as r, color_picker_default as t };