ropav 0.0.8 → 0.0.9

package/dist/color-input.js

@@ -0,0 +1,344 @@
+import './color-input.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as color_swatch_default } from "./color-swatch.js";
+import { n as formatColorPickerValue, r as parseColorPickerValue, t as color_picker_default } from "./color-picker.js";
+import { t as input_default } from "./input.js";
+import { t as popover_default } from "./popover.js";
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setAttr, setInsertionState, setProp, shallowRef, template, unref, withModifiers } from "vue";
+//#region ~icons/lucide/crosshair
+var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><circle cx=12 cy=12 r=10></circle><path d=\"M22 12h-4M6 12H2m10-6V2m0 20v-4\">", 3, 1);
+function render(_ctx) {
+	return t0$1();
+}
+var crosshair_default = markRaw(defineVaporComponent({
+	name: "lucide-crosshair",
+	render
+}));
+//#endregion
+//#region src/components/color-input/useColorInputEyeDropper.ts
+function useColorInputEyeDropper(options) {
+	const eyeDropperApi = shallowRef();
+	const isPickingColor = ref(false);
+	const showEyeDropper = computed(() => options.enabled() && Boolean(eyeDropperApi.value));
+	onMounted(() => {
+		eyeDropperApi.value = window.EyeDropper;
+	});
+	async function pickScreenColor(closePicker) {
+		const EyeDropperApi = eyeDropperApi.value;
+		if (options.disabled() || isPickingColor.value || !EyeDropperApi) return;
+		closePicker();
+		isPickingColor.value = true;
+		try {
+			const color = parseColorPickerValue((await new EyeDropperApi().open()).sRGBHex);
+			if (!color || options.disabled()) return;
+			options.update(formatColorPickerValue(color, options.format()));
+		} catch {} finally {
+			isPickingColor.value = false;
+		}
+	}
+	return {
+		showEyeDropper,
+		isPickingColor,
+		pickScreenColor
+	};
+}
+//#endregion
+//#region src/components/color-input/useColorInputPopover.ts
+function onInputKeydown(event, popover) {
+	if (event.key === "ArrowDown") {
+		event.preventDefault();
+		const trigger = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+		popover.open();
+		nextTick(() => focusPickerFromTrigger(trigger));
+		return;
+	}
+	if (event.key === "Escape") popover.triggerProps.onKeydown(event);
+}
+function focusPickerFromTrigger(trigger) {
+	const picker = trigger?.closest(".rp-color-input")?.querySelector(".rp-color-picker");
+	if (!picker) return;
+	(Boolean(picker.querySelector(".rp-color-picker__saturation")) ? picker.querySelector("input:not(:disabled), button:not(:disabled), [tabindex=\"0\"]") : picker.querySelector("[role=\"radio\"][aria-checked=\"true\"]") ?? picker.querySelector("[role=\"radio\"][tabindex=\"0\"]"))?.focus({ preventScroll: true });
+}
+function onPickerKeydown(event, popover) {
+	if (event.key !== "Escape") return;
+	const pickerRoot = event.currentTarget;
+	const focusTarget = pickerRoot instanceof Element ? pickerRoot.closest(".rp-color-input")?.querySelector(".rp-input__native") : void 0;
+	event.stopPropagation();
+	focusTarget?.focus({ preventScroll: true });
+	popover.close();
+}
+function useColorInputPopover(getInputAttrs) {
+	let closePicker;
+	function getInputTriggerAttrs(slotProps) {
+		const popover = slotProps;
+		const trigger = popover.triggerProps;
+		const attrs = getInputAttrs() ?? {};
+		if (!trigger["aria-haspopup"]) return attrs;
+		return {
+			...attrs,
+			role: "combobox",
+			"aria-autocomplete": "none",
+			"aria-controls": trigger["aria-controls"],
+			"aria-expanded": trigger["aria-expanded"],
+			"aria-haspopup": trigger["aria-haspopup"],
+			onFocusin(event) {
+				rememberClose(popover);
+				popover.open();
+				attrs.onFocusin?.(event);
+			},
+			onClick(event) {
+				rememberClose(popover);
+				popover.open();
+				attrs.onClick?.(event);
+			},
+			onKeydown(event) {
+				onInputKeydown(event, popover);
+				attrs.onKeydown?.(event);
+			}
+		};
+	}
+	function rememberClose(slotProps) {
+		closePicker = slotProps.close;
+	}
+	function onFocusOut(event) {
+		const root = event.currentTarget;
+		const nextTarget = event.relatedTarget;
+		if (root instanceof HTMLElement && nextTarget instanceof Node && root.contains(nextTarget)) return;
+		closePicker?.();
+	}
+	return {
+		getInputTriggerAttrs,
+		rememberClose,
+		onPickerKeydown,
+		onFocusOut
+	};
+}
+//#endregion
+//#region src/components/color-input/useColorInputValue.ts
+function useColorInputValue(props, isControlInvalid) {
+	const parsedColor = computed(() => parseColorPickerValue(props.modelValue));
+	const previewColor = computed(() => parsedColor.value ? props.modelValue : void 0);
+	const hasValidSwatches = computed(() => Boolean(props.swatches?.some((swatch) => parseColorPickerValue(swatch))));
+	const hasInvalidColor = computed(() => props.validateColor && props.modelValue.trim().length > 0 && !parsedColor.value);
+	return {
+		previewColor,
+		hasValidSwatches,
+		hasInvalidColor,
+		isInvalid: computed(() => isControlInvalid() || hasInvalidColor.value),
+		colorValidationMessage: computed(() => hasInvalidColor.value ? props.invalidColorMessage : void 0)
+	};
+}
+//#endregion
+//#region src/components/color-input/useColorInput.ts
+function useColorInput(props, emit) {
+	const control = useControlState(props);
+	const value = useColorInputValue(props, () => control.invalid);
+	const popover = useColorInputPopover(() => props.inputAttrs);
+	const popoverDisabled = computed(() => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly) && !value.hasValidSwatches.value);
+	const eyeDropper = useColorInputEyeDropper({
+		enabled: () => props.withEyeDropper !== false && !props.swatchesOnly,
+		disabled: () => control.disabled || Boolean(props.readonly) || Boolean(props.swatchesOnly),
+		format: () => props.format ?? "hex",
+		update: emit.modelValue
+	});
+	const rootClass = computed(() => bem("rp-color-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: value.isInvalid.value,
+		valid: control.valid && !value.isInvalid.value,
+		readonly: props.readonly
+	}));
+	function onInputUpdate(nextValue) {
+		if (control.disabled || props.readonly || props.disallowInput || props.swatchesOnly) return;
+		emit.modelValue(nextValue);
+	}
+	function onPickerUpdate(nextValue) {
+		if (control.disabled || props.readonly) return;
+		emit.modelValue(nextValue);
+	}
+	function onOpenUpdate(open) {
+		emit.open(open);
+	}
+	return {
+		control,
+		rootClass,
+		popoverDisabled,
+		...value,
+		...popover,
+		...eyeDropper,
+		onInputUpdate,
+		onPickerUpdate,
+		onOpenUpdate
+	};
+}
+//#endregion
+//#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-bae38f91 class=\"rp-color-input__preview rp-color-input__preview--empty\"aria-hidden=true>", 2);
+var t1 = template("<button data-v-bae38f91 class=rp-color-input__eye-dropper type=button><span data-v-bae38f91 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+//#endregion
+//#region src/components/color-input/color-input.vue
+var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpColorInput",
+	__name: "color-input",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		format: { default: "hex" },
+		size: {},
+		radius: {},
+		placeholder: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		disallowInput: {
+			type: Boolean,
+			default: false
+		},
+		swatchesOnly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validateColor: {
+			type: Boolean,
+			default: false
+		},
+		invalidColorMessage: { default: "Enter a valid color." },
+		swatches: {},
+		swatchesPerRow: {},
+		placement: { default: "bottom-start" },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		popoverId: {},
+		pickerAriaLabel: { default: "Choose color" },
+		withEyeDropper: {
+			type: Boolean,
+			default: true
+		},
+		eyeDropperAriaLabel: { default: "Pick color from screen" }
+	},
+	emits: ["update:modelValue", "update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, rootClass, previewColor, isInvalid, colorValidationMessage, popoverDisabled, getInputTriggerAttrs, rememberClose, onPickerKeydown, onFocusOut, showEyeDropper, isPickingColor, pickScreenColor, onInputUpdate, onPickerUpdate, onOpenUpdate } = useColorInput(props, {
+			modelValue: (value) => emit("update:modelValue", value),
+			open: (value) => emit("update:open", value)
+		});
+		return createComponent(popover_default, {
+			id: () => __props.popoverId,
+			class: () => unref(rootClass),
+			placement: () => __props.placement,
+			open: () => __props.open,
+			disabled: () => unref(popoverDisabled),
+			"aria-label": () => __props.pickerAriaLabel,
+			onFocusout: () => unref(onFocusOut),
+			"onUpdate:open": () => unref(onOpenUpdate)
+		}, {
+			"default": (slotProps) => {
+				return createComponent(input_default, {
+					id: () => unref(control).id,
+					name: () => __props.name,
+					"model-value": () => __props.modelValue,
+					type: "text",
+					size: () => __props.size,
+					radius: () => __props.radius,
+					placeholder: () => __props.placeholder,
+					disabled: () => unref(control).disabled || void 0,
+					readonly: () => __props.readonly || __props.disallowInput || __props.swatchesOnly || void 0,
+					required: () => unref(control).required || void 0,
+					invalid: () => unref(isInvalid) || void 0,
+					valid: () => unref(control).valid && !unref(isInvalid) ? true : void 0,
+					"aria-label": () => __props.ariaLabel,
+					describedby: () => __props.describedby,
+					labelledby: () => __props.labelledby,
+					"input-attrs": () => unref(getInputTriggerAttrs)(slotProps),
+					"validation-message": () => unref(colorValidationMessage),
+					"onUpdate:modelValue": () => unref(onInputUpdate)
+				}, {
+					"left": extend(() => {
+						return createSlot("left", {
+							color: () => unref(previewColor),
+							empty: () => !unref(previewColor)
+						}, () => {
+							return createIf(() => unref(previewColor), () => {
+								return createComponent(color_swatch_default, {
+									class: "rp-color-input__preview",
+									color: () => unref(previewColor),
+									size: "var(--_rp-color-input-preview-size)",
+									"aria-hidden": "true"
+								});
+							}, () => {
+								return t0();
+							}, 389);
+						}, 1);
+					}, { _: 8 }),
+					$: [() => unref(showEyeDropper) ? {
+						name: "right",
+						fn: () => {
+							const n13 = t1();
+							const n12 = child(n13);
+							renderEffect(() => {
+								const _isPickingColor = unref(isPickingColor);
+								setProp(n13, "disabled", unref(control).disabled || __props.readonly || _isPickingColor);
+								setAttr(n13, "aria-label", __props.eyeDropperAriaLabel);
+								setAttr(n13, "aria-busy", _isPickingColor || void 0);
+							});
+							setInsertionState(n12, null, 0);
+							createSlot("eye-dropper-icon", null, () => {
+								return createComponent(unref(crosshair_default));
+							}, 1);
+							on(n13, "click", withModifiers(() => unref(pickScreenColor)(slotProps.close), ["stop"]));
+							return n13;
+						}
+					} : void 0]
+				});
+			},
+			"content": (slotProps) => {
+				const _on_focusin = () => unref(rememberClose)(slotProps);
+				const _on_keydown = ($event) => unref(onPickerKeydown)($event, slotProps);
+				return createComponent(color_picker_default, {
+					"model-value": () => __props.modelValue,
+					format: () => __props.format,
+					size: () => __props.size,
+					readonly: () => __props.readonly,
+					"with-picker": () => !__props.swatchesOnly,
+					swatches: () => __props.swatches,
+					"swatches-per-row": () => __props.swatchesPerRow,
+					"aria-label": () => __props.pickerAriaLabel,
+					onFocusin: () => _on_focusin,
+					onKeydown: () => _on_keydown,
+					"onUpdate:modelValue": () => unref(onPickerUpdate)
+				});
+			}
+		}, true);
+	}
+}), [["__scopeId", "data-v-bae38f91"]]);
+//#endregion
+export { color_input_default as t };

package/dist/color-picker.css

@@ -0,0 +1,304 @@
+.rp-color-picker__saturation[data-v-0ff88f34] {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--_rp-color-picker-control-width);
+  height: var(--_rp-color-picker-saturation-control-height);
+  margin-block: var(--_rp-color-picker-thumb-radius);
+  margin-inline: var(--_rp-color-picker-thumb-radius);
+  overflow: visible;
+  touch-action: none;
+  cursor: crosshair;
+}
+.rp-color-picker__saturation[data-v-0ff88f34]:focus-visible {
+  outline: none;
+}
+.rp-color-picker__saturation[data-readonly=true][data-v-0ff88f34] {
+  cursor: default;
+}
+.rp-color-picker__axis-input[data-v-0ff88f34] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  pointer-events: none;
+}
+.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-0ff88f34] {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-color-picker__surface[data-v-0ff88f34] {
+  position: absolute;
+  inset: calc(-1 * var(--_rp-color-picker-thumb-radius));
+  overflow: hidden;
+  border-radius: var(--_rp-color-picker-saturation-radius);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(to top, #000 0 var(--_rp-color-picker-thumb-radius), rgba(0, 0, 0, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), linear-gradient(to right, #fff 0 var(--_rp-color-picker-thumb-radius), rgba(255, 255, 255, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), hsl(var(--_rp-color-picker-hue), 100%, 50%);
+}
+.rp-color-picker__handle[data-v-0ff88f34] {
+  position: absolute;
+  top: var(--_rp-color-picker-saturation-y);
+  left: var(--_rp-color-picker-saturation-x);
+  box-sizing: border-box;
+  width: var(--_rp-color-picker-thumb-size);
+  height: var(--_rp-color-picker-thumb-size);
+  z-index: 1;
+  background-color: var(--_rp-color-picker-current);
+  border: 2px solid var(--rp-color-white);
+  border-radius: var(--rp-radius-full);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}.rp-color-picker__hue[data-v-d0c81f73], .rp-color-picker__opacity[data-v-d0c81f73] {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--_rp-color-picker-control-width);
+  height: max(var(--_rp-color-picker-target-min-size), var(--_rp-color-picker-hue-height), var(--_rp-color-picker-thumb-size));
+  margin-inline: var(--_rp-color-picker-thumb-radius);
+  overflow: visible;
+  touch-action: none;
+  cursor: pointer;
+}
+.rp-color-picker__hue[data-v-d0c81f73]:focus-visible, .rp-color-picker__opacity[data-v-d0c81f73]:focus-visible {
+  outline: none;
+}
+.rp-color-picker__hue[data-readonly=true][data-v-d0c81f73], .rp-color-picker__opacity[data-readonly=true][data-v-d0c81f73] {
+  cursor: default;
+}
+.rp-color-picker__hue:focus-visible .rp-color-picker__slider-handle[data-v-d0c81f73], .rp-color-picker__opacity:focus-visible .rp-color-picker__slider-handle[data-v-d0c81f73] {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-color-picker__hue[data-v-d0c81f73] {
+  margin-block-start: var(--_rp-color-picker-saturation-slider-gap);
+}
+.rp-color-picker__opacity[data-v-d0c81f73] {
+  margin-block-start: var(--_rp-color-picker-slider-gap);
+}
+.rp-color-picker__slider-surface[data-v-d0c81f73] {
+  position: absolute;
+  top: 50%;
+  right: calc(-1 * var(--_rp-color-picker-thumb-radius));
+  left: calc(-1 * var(--_rp-color-picker-thumb-radius));
+  height: var(--_rp-color-picker-hue-height);
+  overflow: hidden;
+  border-radius: var(--rp-radius-full);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
+  transform: translateY(-50%);
+}
+.rp-color-picker__hue-surface[data-v-d0c81f73] {
+  background: hsl(0, 100%, 50%);
+}
+.rp-color-picker__hue-surface[data-v-d0c81f73]::before {
+  position: absolute;
+  inset: 0 var(--_rp-color-picker-thumb-radius);
+  content: "";
+  background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
+}
+.rp-color-picker__opacity-surface[data-v-d0c81f73] {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--_rp-color-picker-opacity-color)), var(--_rp-color-picker-checkerboard);
+  background-size: auto, var(--_rp-color-picker-checkerboard-size);
+}
+.rp-color-picker__slider-handle[data-v-d0c81f73] {
+  position: absolute;
+  top: 50%;
+  left: var(--_rp-color-picker-slider-x);
+  box-sizing: border-box;
+  width: var(--_rp-color-picker-thumb-size);
+  height: var(--_rp-color-picker-thumb-size);
+  z-index: 1;
+  border: 2px solid var(--rp-color-white);
+  border-radius: var(--rp-radius-full);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+.rp-color-picker__hue-handle[data-v-d0c81f73] {
+  background-color: hsl(var(--_rp-color-picker-hue), 100%, 50%);
+}
+.rp-color-picker__opacity-handle[data-v-d0c81f73] {
+  background-color: var(--_rp-color-picker-opacity-color);
+}.rp-color-picker[data-v-38eeea2b] {
+  --_rp-color-picker-saturation-width: 220px;
+  --_rp-color-picker-saturation-height: 160px;
+  --_rp-color-picker-hue-height: 14px;
+  --_rp-color-picker-saturation-slider-gap: var(--rp-spacing-4);
+  --_rp-color-picker-slider-gap: var(--rp-spacing-2);
+  --_rp-color-picker-header-gap: var(--rp-spacing-2);
+  --_rp-color-picker-swatches-gap: var(--rp-spacing-1);
+  --_rp-color-picker-swatches-margin: var(--rp-spacing-3);
+  --_rp-color-picker-swatch-size: 24px;
+  --_rp-color-picker-thumb-size: 14px;
+  --_rp-color-picker-target-min-size: 24px;
+  --_rp-color-picker-font-size: var(--rp-font-size-md);
+  --_rp-color-picker-thumb-radius: calc(var(--_rp-color-picker-thumb-size) / 2);
+  --_rp-color-picker-saturation-radius: var(--_rp-color-picker-thumb-radius);
+  --_rp-color-picker-size: var(--_rp-color-picker-saturation-width);
+  --_rp-color-picker-control-width: max(0px, calc(100% - var(--_rp-color-picker-thumb-size)));
+  --_rp-color-picker-saturation-control-height: max(
+      0px,
+      calc(var(--_rp-color-picker-saturation-height) - var(--_rp-color-picker-thumb-size))
+  );
+  --_rp-color-picker-checkerboard-tile: var(--rp-color-gray-3);
+  --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-white);
+  --_rp-color-picker-checkerboard: conic-gradient(
+      var(--_rp-color-picker-checkerboard-tile) 25%,
+      var(--_rp-color-picker-checkerboard-tile-alt) 0 50%,
+      var(--_rp-color-picker-checkerboard-tile) 0 75%,
+      var(--_rp-color-picker-checkerboard-tile-alt) 0
+  );
+  --_rp-color-picker-checkerboard-size: var(--_rp-color-picker-hue-height)
+      var(--_rp-color-picker-hue-height);
+  display: inline-grid;
+  box-sizing: border-box;
+  width: var(--_rp-color-picker-size);
+  max-width: 100%;
+  row-gap: 0;
+  font-family: var(--rp-font-family);
+  font-size: var(--_rp-color-picker-font-size);
+  font-weight: var(--rp-font-weight-normal);
+  color: var(--rp-color-text);
+  user-select: none;
+  vertical-align: top;
+}
+html.dark .rp-color-picker[data-v-38eeea2b], [data-rp-color-scheme=dark] .rp-color-picker[data-v-38eeea2b] {
+  --_rp-color-picker-checkerboard-tile: var(--rp-color-dark-6);
+  --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-dark-4);
+}
+.rp-color-picker--readonly[data-v-38eeea2b] {
+  cursor: default;
+}
+.rp-color-picker--size-xs[data-v-38eeea2b] {
+  --_rp-color-picker-saturation-width: 160px;
+  --_rp-color-picker-saturation-height: 120px;
+  --_rp-color-picker-hue-height: 10px;
+  --_rp-color-picker-saturation-slider-gap: 8px;
+  --_rp-color-picker-slider-gap: 4px;
+  --_rp-color-picker-header-gap: 4px;
+  --_rp-color-picker-swatches-gap: 2px;
+  --_rp-color-picker-swatches-margin: 8px;
+  --_rp-color-picker-swatch-size: 16px;
+  --_rp-color-picker-thumb-size: 10px;
+  --_rp-color-picker-font-size: var(--rp-font-size-xs);
+}
+.rp-color-picker--size-sm[data-v-38eeea2b] {
+  --_rp-color-picker-saturation-width: 190px;
+  --_rp-color-picker-saturation-height: 140px;
+  --_rp-color-picker-hue-height: 12px;
+  --_rp-color-picker-saturation-slider-gap: 12px;
+  --_rp-color-picker-slider-gap: 6px;
+  --_rp-color-picker-header-gap: 6px;
+  --_rp-color-picker-swatches-gap: 3px;
+  --_rp-color-picker-swatches-margin: 10px;
+  --_rp-color-picker-swatch-size: 20px;
+  --_rp-color-picker-thumb-size: 12px;
+  --_rp-color-picker-font-size: var(--rp-font-size-sm);
+}
+.rp-color-picker--size-md[data-v-38eeea2b] {
+  --_rp-color-picker-saturation-width: 220px;
+  --_rp-color-picker-saturation-height: 160px;
+  --_rp-color-picker-hue-height: 14px;
+  --_rp-color-picker-saturation-slider-gap: 16px;
+  --_rp-color-picker-slider-gap: 8px;
+  --_rp-color-picker-header-gap: 8px;
+  --_rp-color-picker-swatches-gap: 4px;
+  --_rp-color-picker-swatches-margin: 12px;
+  --_rp-color-picker-swatch-size: 24px;
+  --_rp-color-picker-thumb-size: 14px;
+  --_rp-color-picker-font-size: var(--rp-font-size-md);
+}
+.rp-color-picker--size-lg[data-v-38eeea2b] {
+  --_rp-color-picker-saturation-width: 260px;
+  --_rp-color-picker-saturation-height: 190px;
+  --_rp-color-picker-hue-height: 18px;
+  --_rp-color-picker-saturation-slider-gap: 20px;
+  --_rp-color-picker-slider-gap: 10px;
+  --_rp-color-picker-header-gap: 10px;
+  --_rp-color-picker-swatches-gap: 5px;
+  --_rp-color-picker-swatches-margin: 16px;
+  --_rp-color-picker-swatch-size: 30px;
+  --_rp-color-picker-thumb-size: 18px;
+  --_rp-color-picker-font-size: var(--rp-font-size-lg);
+}
+.rp-color-picker--size-xl[data-v-38eeea2b] {
+  --_rp-color-picker-saturation-width: 300px;
+  --_rp-color-picker-saturation-height: 220px;
+  --_rp-color-picker-hue-height: 22px;
+  --_rp-color-picker-saturation-slider-gap: 24px;
+  --_rp-color-picker-slider-gap: 12px;
+  --_rp-color-picker-header-gap: 12px;
+  --_rp-color-picker-swatches-gap: 6px;
+  --_rp-color-picker-swatches-margin: 20px;
+  --_rp-color-picker-swatch-size: 36px;
+  --_rp-color-picker-thumb-size: 22px;
+  --_rp-color-picker-font-size: var(--rp-font-size-xl);
+}
+.rp-color-picker__label[data-v-38eeea2b] {
+  display: block;
+  overflow: hidden;
+  color: var(--rp-color-text);
+  line-height: var(--rp-line-height-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rp-color-picker__header[data-v-38eeea2b] {
+  margin-block-end: var(--_rp-color-picker-header-gap);
+}
+.rp-color-picker__swatches[data-v-38eeea2b] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--_rp-color-picker-swatches-gap);
+}
+.rp-color-picker__swatches[data-with-picker=true][data-v-38eeea2b] {
+  margin-block-start: var(--_rp-color-picker-swatches-margin);
+}
+.rp-color-picker__swatches[data-fill=true][data-v-38eeea2b] {
+  display: grid;
+  grid-template-columns: repeat(var(--_rp-color-picker-swatches-per-row), minmax(var(--_rp-color-picker-target-min-size), 1fr));
+  width: 100%;
+  overflow-x: auto;
+}
+.rp-color-picker__swatch[data-v-38eeea2b] {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--_rp-color-picker-target-min-size);
+  min-height: var(--_rp-color-picker-target-min-size);
+  padding: 0;
+  flex: 0 0 auto;
+  appearance: none;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--rp-radius-sm);
+  box-shadow: none;
+  line-height: 0;
+}
+.rp-color-picker__swatch[data-v-38eeea2b]:focus-visible {
+  outline: none;
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-color-picker__swatch[data-v-38eeea2b]:disabled {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+  cursor: default;
+}
+.rp-color-picker__swatch[data-v-38eeea2b] >  .rp-color-swatch {
+  pointer-events: none;
+}
+.rp-color-picker__swatch-check[data-v-38eeea2b] {
+  stroke-width: 3;
+}
+.rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-38eeea2b] {
+  width: 100%;
+  aspect-ratio: 1;
+}
+.rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-38eeea2b] >  .rp-color-swatch {
+  width: 100%;
+  height: 100%;
+}