ropav 0.0.9 → 0.0.11

package/dist/color-picker.js

@@ -1,10 +1,11 @@
 import './color-picker.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.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";
+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));
 }
@@ -145,42 +146,122 @@ function formatNumber(value) {
 }
 //#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 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 onPointerMove(event) {
-		const el = target.value;
-		if (!el) {
-			stopDragging();
+	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;
 		}
-		updateFromPointer(event, el);
+		if (frameId !== void 0) return;
+		frameWindow = view;
+		frameId = view.requestAnimationFrame(() => {
+			frameWindow = null;
+			frameId = void 0;
+			applyScheduledUpdate(currentSession);
+		});
+	}
+	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 = {
+			clientX: event.clientX,
+			clientY: event.clientY
+		};
+		scheduleUpdate();
+	}
+	function onPointerEnd(event) {
+		if (!isCurrentPointer(event)) return;
+		if (event.type === "pointerup") flushScheduledUpdate();
+		stopDragging();
 	}
 	function onPointerDown(event) {
-		if (readonly()) return;
+		if (readonly() || event.button !== 0 || event.isPrimary === false) 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);
+		const nextSession = {
+			element: el,
+			pointerId: getPointerId(event),
+			rect: el.getBoundingClientRect(),
+			view: el.ownerDocument.defaultView
+		};
+		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 };
 }
 //#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);
+var t0$2 = template("<div data-v-fbb051b0 role=group data-control=saturation><input data-v-fbb051b0 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-fbb051b0 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-fbb051b0 class=rp-color-picker__surface aria-hidden=true></span><span data-v-fbb051b0 data-control=saturation aria-hidden=true>", 1);
 delegateEvents("input", "keydown", "pointerdown");
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue
@@ -197,7 +278,35 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		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 }) {
@@ -226,8 +335,7 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 				value: normalizedValue
 			});
 		}
-		function updateFromPointer(e, el) {
-			const rect = el.getBoundingClientRect();
+		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);
 		}
@@ -235,6 +343,7 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			target: saturationRef,
 			focusTarget: saturationInputRef,
 			readonly: () => props.readonly,
+			isGeometryValid: (rect) => rect.width > 0 && rect.height > 0,
 			updateFromPointer
 		});
 		function onAxisKeydown(event, axis) {
@@ -275,47 +384,52 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			else updateValue(saturation.value, nextValue);
 		}
 		const _setTemplateRef = createTemplateRefSetter();
-		const n2 = t0$2();
-		const n0 = child(n2);
+		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"));
-		n2.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
-		_setTemplateRef(n2, saturationRef, null, "saturationRef");
+		n3.$evtpointerdown = createInvoker((e) => unref(onPointerDown)(e));
+		_setTemplateRef(n3, saturationRef, null, "saturationRef");
 		renderEffect(() => {
 			const _describedby = __props.describedby;
+			const _readonly = __props.readonly;
 			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);
+			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, "aria-readonly", _readonly || void 0);
+			setAttr(n3, "data-readonly", unref(presence)(_readonly));
 			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);
+			setAttr(n0, "aria-readonly", _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);
+			setAttr(n1, "aria-readonly", _readonly || void 0);
+			setClass(n2, ["rp-color-picker__handle", __props.handleClass]);
+			setStyle(n2, __props.handleStyle);
 		});
-		return n2;
+		return n3;
 	}
-}), [["__scopeId", "data-v-0ff88f34"]]);
+}), [["__scopeId", "data-v-fbb051b0"]]);
 //#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);
+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");
 //#endregion
 //#region src/components/color-picker/color-picker-slider.vue
@@ -329,7 +443,35 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		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 }) {
@@ -340,7 +482,7 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		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 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(() => {
@@ -357,14 +499,14 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			if (normalizedNextValue === currentOutputValue.value) return;
 			emit("update:value", normalizedNextValue);
 		}
-		function updateFromPointer(e, el) {
-			const rect = el.getBoundingClientRect();
+		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) {
@@ -402,20 +544,25 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		n2.$evtkeydown = createInvoker(onKeydown);
 		_setTemplateRef(n2, sliderRef, null, "sliderRef");
 		renderEffect(() => {
-			setClass(n2, rootClass.value);
-			setStyle(n2, sliderStyle.value);
+			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-valuetext", ariaValueText.value);
-			setAttr(n2, "aria-readonly", __props.readonly || void 0);
-			setAttr(n2, "data-readonly", __props.readonly || void 0);
+			setAttr(n2, "aria-readonly", _readonly || void 0);
+			setAttr(n2, "data-readonly", unref(presence)(_readonly));
+			setAttr(n2, "data-control", _variant);
 			setClass(n0, surfaceClass.value);
-			setClass(n1, handleClass.value);
+			setClass(n1, [internalHandleClass.value, __props.handleClass]);
+			setStyle(n1, __props.handleStyle);
+			setAttr(n1, "data-control", _variant);
 		});
 		return n2;
 	}
-}), [["__scopeId", "data-v-d0c81f73"]]);
+}), [["__scopeId", "data-v-0299a505"]]);
 //#endregion
 //#region src/components/color-picker/useColorPickerSwatches.ts
 var MAX_SWATCHES_PER_ROW = 15;
@@ -574,10 +721,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-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);
+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");
 //#endregion
 //#region src/components/color-picker/color-picker.vue
@@ -602,7 +749,9 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		swatchesPerRow: {},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit, slots: $slots }) {
@@ -612,11 +761,11 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			[`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 { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-readonly": presence(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,
@@ -624,14 +773,13 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		const _setTemplateRef = createTemplateRefSetter();
 		const n22 = t3();
-		renderEffect(() => setDynamicProps(n22, [rootAttrs.value, {
-			class: rootClass.value,
-			"data-readonly": __props.readonly || void 0
-		}]));
+		renderEffect(() => setDynamicProps(n22, [rootAttrs.value]));
 		setInsertionState(n22, null, 0);
 		createIf(() => $slots.default, () => {
 			const n4 = t0();
-			setInsertionState(child(n4), null, 0);
+			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;
 		});
@@ -646,12 +794,20 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					"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), () => {
@@ -660,6 +816,10 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 						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)
 					});
 				})
@@ -670,13 +830,18 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			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);
+				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) => {
@@ -684,12 +849,20 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				renderEffect(() => {
 					const _readonly = __props.readonly;
 					const _index = _for_key0.value;
+					const _isSwatchSelected = unref(isSwatchSelected);
 					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);
+					const _presence = unref(presence);
+					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": _presence(_isSwatchSelected(_index)),
+						"data-readonly": _presence(_readonly)
+					}]);
 				});
 				setInsertionState(n20, null, 0);
 				createComponent(color_swatch_default, {
@@ -712,6 +885,6 @@ var color_picker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		return n22;
 	}
-}), [["__scopeId", "data-v-38eeea2b"]]);
+}), [["__scopeId", "data-v-41c4ca07"]]);
 //#endregion
 export { formatColorPickerValue as n, parseColorPickerValue as r, color_picker_default as t };

package/dist/color-picker2.js

@@ -1,4 +1,12 @@
 //#region src/components/color-picker/types.ts
+var colorPickerParts = [
+	"root",
+	"label",
+	"control",
+	"handle",
+	"swatches",
+	"swatch"
+];
 var colorPickerFormats = [
 	"hex",
 	"hexa",
@@ -15,4 +23,4 @@ var colorPickerSizes = [
 	"xl"
 ];
 //#endregion
-export { colorPickerSizes as n, colorPickerFormats as t };
+export { colorPickerParts as n, colorPickerSizes as r, colorPickerFormats as t };

package/dist/color-swatch.css

@@ -1,50 +1,52 @@
-.rp-color-swatch[data-v-b0899989] {
-  --_rp-color-swatch-size: 24px;
-  --_rp-color-swatch-radius: var(--rp-radius-sm);
-  --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-3);
-  --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-white);
-  --_rp-color-swatch-checkerboard: conic-gradient(
-      var(--_rp-color-swatch-checkerboard-tile) 25%,
-      var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
-      var(--_rp-color-swatch-checkerboard-tile) 0 75%,
-      var(--_rp-color-swatch-checkerboard-tile-alt) 0
-  );
-  --_rp-color-swatch-checkerboard-size: calc(var(--_rp-color-swatch-size) / 2)
-      calc(var(--_rp-color-swatch-size) / 2);
-  --_rp-color-swatch-overlay-stroke: rgb(0 0 0 / 10%);
-  --_rp-color-swatch-overlay-shadow: rgb(0 0 0 / 15%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: var(--_rp-color-swatch-size);
-  height: var(--_rp-color-swatch-size);
-  flex-shrink: 0;
-  background: linear-gradient(var(--_rp-color-swatch-color), var(--_rp-color-swatch-color)), var(--_rp-color-swatch-checkerboard);
-  background-size: auto, var(--_rp-color-swatch-checkerboard-size);
-  border: 0;
-  border-radius: var(--_rp-color-swatch-radius);
-  box-shadow: var(--_rp-color-swatch-overlay-stroke) 0 0 0 0.0625rem inset, var(--_rp-color-swatch-overlay-shadow) 0 0 0.25rem inset;
-  color: var(--_rp-color-swatch-fg);
-  line-height: 1;
-  overflow: hidden;
-  vertical-align: middle;
+@layer ropav.components {
+.rp-color-swatch[data-v-13032098] {
+    --_rp-color-swatch-size: 24px;
+    --_rp-color-swatch-radius: var(--rp-radius-sm);
+    --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-3);
+    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-white);
+    --_rp-color-swatch-checkerboard: conic-gradient(
+        var(--_rp-color-swatch-checkerboard-tile) 25%,
+        var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
+        var(--_rp-color-swatch-checkerboard-tile) 0 75%,
+        var(--_rp-color-swatch-checkerboard-tile-alt) 0
+    );
+    --_rp-color-swatch-checkerboard-size: calc(var(--_rp-color-swatch-size) / 2)
+        calc(var(--_rp-color-swatch-size) / 2);
+    --_rp-color-swatch-overlay-stroke: rgb(0 0 0 / 10%);
+    --_rp-color-swatch-overlay-shadow: rgb(0 0 0 / 15%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--_rp-color-swatch-size);
+    height: var(--_rp-color-swatch-size);
+    flex-shrink: 0;
+    background: linear-gradient(var(--_rp-color-swatch-color), var(--_rp-color-swatch-color)), var(--_rp-color-swatch-checkerboard);
+    background-size: auto, var(--_rp-color-swatch-checkerboard-size);
+    border: 0;
+    border-radius: var(--_rp-color-swatch-radius);
+    box-shadow: var(--_rp-color-swatch-overlay-stroke) 0 0 0 0.0625rem inset, var(--_rp-color-swatch-overlay-shadow) 0 0 0.25rem inset;
+    color: var(--_rp-color-swatch-fg);
+    line-height: 1;
+    overflow: hidden;
+    vertical-align: middle;
 }
-html.dark .rp-color-swatch[data-v-b0899989], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-b0899989] {
-  --_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
-  --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
+html.dark .rp-color-swatch[data-v-13032098], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-13032098] {
+    --_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
+    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
 }
-.rp-color-swatch__icon[data-v-b0899989] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 70%;
-  height: 70%;
-  color: inherit;
-  pointer-events: none;
+.rp-color-swatch__icon[data-v-13032098] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 70%;
+    height: 70%;
+    color: inherit;
+    pointer-events: none;
+}
+.rp-color-swatch__icon[data-v-13032098] svg {
+    display: block;
+    width: 100%;
+    height: 100%;
 }
-.rp-color-swatch__icon[data-v-b0899989] svg {
-  display: block;
-  width: 100%;
-  height: 100%;
 }