ropav 0.0.10 → 0.0.12

package/dist/checkbox.js

@@ -1,11 +1,13 @@
 import './checkbox.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.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 minus_default } from "./minus.js";
+import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, next, on, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
+import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, next, ref, renderEffect, setBlockKey, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/checkbox/useCheckbox.ts
 function getCheckboxColorStyle(color, autoContrast) {
 	const colorValue = getComponentColorValue(color);
@@ -16,10 +18,11 @@ function getCheckboxColorStyle(color, autoContrast) {
 	if (autoContrast) style["--_rp-checkbox-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
 	return style;
 }
-function useCheckbox(props, emitUpdate) {
+function useCheckbox(props, emitUpdate, getValue = () => props.modelValue ?? false) {
+	const inputRef = ref(null);
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-checkbox", {
-		checked: props.modelValue,
+		checked: getValue(),
 		indeterminate: props.indeterminate,
 		disabled: control.disabled,
 		invalid: control.invalid,
@@ -31,26 +34,41 @@ function useCheckbox(props, emitUpdate) {
 	function onChange(e) {
 		emitUpdate(e.target.checked);
 	}
+	function focus(options) {
+		inputRef.value?.focus(options);
+	}
 	return {
+		inputRef,
 		control,
 		rootClass,
 		rootStyle,
-		onChange
+		onChange,
+		focus
 	};
 }
 //#endregion
 //#region src/components/checkbox/checkbox.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-8af73824 class=rp-checkbox__label>");
-var t1 = template("<label data-v-8af73824><input data-v-8af73824 type=checkbox class=rp-checkbox__native><span data-v-8af73824 class=rp-checkbox__box></span>", 1);
+var t0 = template("<span data-v-cc3e1126>");
+var t1 = template("<label data-v-cc3e1126><input data-v-cc3e1126><span data-v-cc3e1126></span>", 1);
 //#endregion
 //#region src/components/checkbox/checkbox.vue
 var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpCheckbox",
+	inheritAttrs: false,
 	__name: "checkbox",
 	props: {
 		id: {},
 		name: {},
-		modelValue: { type: Boolean },
+		form: {},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: false
+		},
+		value: { default: "on" },
 		variant: {},
 		color: {},
 		autoContrast: { type: Boolean },
@@ -74,41 +92,84 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		indeterminate: {
 			type: Boolean,
 			default: false
-		}
+		},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, rootStyle, onChange } = useCheckbox(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const { inputRef, control, rootClass, rootStyle, onChange, focus } = useCheckbox(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		const state = computed(() => props.indeterminate ? "indeterminate" : controllable.value.value ? "checked" : "unchecked");
+		useCheckedFormControl(() => inputRef.value, controllable, () => props.validationMessage);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
+			"data-state": state.value
+		}));
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onChange: compatibilityOnChange, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				...getPartAttrs("input", {
+					class: "rp-checkbox__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onChange(event) {
+					onChange(event);
+					compatibilityOnChange?.(event);
+				}
+			};
+		});
+		__expose({
+			nativeElement: inputRef,
+			focus
 		});
 		const n13 = t1();
 		const n0 = child(n13);
 		const n8 = next(n0, 1);
-		on(n0, "change", (e) => unref(onChange)(e));
+		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
+			const _controllable = unref(controllable);
 			const _indeterminate = __props.indeterminate;
-			const _modelValue = __props.modelValue;
-			const _control_disabled = _control.disabled;
+			const _controllable_value = _controllable.value;
 			const _control_required = _control.required;
-			setClass(n13, unref(rootClass));
-			setStyle(n13, unref(rootStyle));
-			setAttr(n13, "data-disabled", _control_disabled || void 0);
-			setAttr(n13, "data-state", _indeterminate ? "indeterminate" : _modelValue ? "checked" : "unchecked");
-			setProp(n0, "id", _control.id);
-			setProp(n0, "name", __props.name);
-			setProp(n0, "checked", _modelValue);
-			setProp(n0, "disabled", _control_disabled || void 0);
-			setProp(n0, "required", _control_required || void 0);
-			setProp(n0, "indeterminate", _indeterminate);
-			setAttr(n0, "aria-checked", _indeterminate ? "mixed" : _modelValue);
-			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n0, "aria-invalid", _control.invalid || void 0);
-			setAttr(n0, "aria-required", _control_required || void 0);
+			setDynamicProps(n13, [rootAttrs.value]);
+			setDynamicProps(n0, [_nativeInputAttrs, {
+				id: _control.id,
+				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
+				type: "checkbox",
+				value: __props.value,
+				checked: _controllable_value.value,
+				disabled: _control.disabled || void 0,
+				required: _control_required || void 0,
+				indeterminate: _indeterminate,
+				"aria-checked": _indeterminate ? "mixed" : _controllable_value.value,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-invalid": _control.invalid || void 0,
+				"aria-required": _control_required || void 0,
+				"data-disabled": unref(presence)(_control.disabled),
+				"data-invalid": unref(presence)(_control.invalid),
+				"data-state": state.value
+			}]);
+			setDynamicProps(n8, [unref(getPartAttrs)("indicator", { class: "rp-checkbox__box" })]);
 		});
 		setInsertionState(n8, null, 0);
 		createComponent(VaporTransition, {
@@ -119,7 +180,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				const n3 = createComponent(unref(minus_default), { class: "rp-checkbox__icon" });
 				setBlockKey(n3, "minus");
 				return n3;
-			}, () => createIf(() => __props.modelValue, () => {
+			}, () => createIf(() => unref(controllable).value.value, () => {
 				const n5 = createComponent(unref(check_default), { class: "rp-checkbox__icon" });
 				setBlockKey(n5, "check");
 				return n5;
@@ -128,12 +189,21 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		setInsertionState(n13, null, 2);
 		createIf(() => $slots.default, () => {
 			const n12 = t0();
+			renderEffect(() => setDynamicProps(n12, [unref(getPartAttrs)("label", { class: "rp-checkbox__label" })]));
 			setInsertionState(n12, null, 0);
 			createSlot("default", null, null, 1);
 			return n12;
 		});
 		return n13;
 	}
-}), [["__scopeId", "data-v-8af73824"]]);
+}), [["__scopeId", "data-v-cc3e1126"]]);
+//#endregion
+//#region src/components/checkbox/types.ts
+var checkboxParts = [
+	"root",
+	"input",
+	"indicator",
+	"label"
+];
 //#endregion
-export { checkbox_default as t };
+export { checkbox_default as n, checkboxParts as t };

package/dist/collapse.css

@@ -1,32 +1,34 @@
-.rp-collapse[data-v-a78ac964] {
-  --_rp-collapse-duration: var(--rp-transition-fast);
-  display: block;
-  min-width: 0;
-  font-family: var(--rp-font-family);
-  color: var(--rp-color-text);
+@layer ropav.components {
+.rp-collapse[data-v-a380be0d] {
+    --_rp-collapse-duration: var(--rp-transition-fast);
+    display: block;
+    min-width: 0;
+    font-family: var(--rp-font-family);
+    color: var(--rp-color-text);
 }
-.rp-collapse--disabled[data-v-a78ac964] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
+.rp-collapse--disabled[data-v-a380be0d] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
 }
-.rp-collapse__content[data-v-a78ac964] {
-  box-sizing: border-box;
-  display: grid;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--rp-color-text);
-  font-size: var(--rp-font-size-md);
-  line-height: var(--rp-line-height-md);
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--_rp-collapse-duration), opacity var(--_rp-collapse-duration);
+.rp-collapse__content[data-v-a380be0d] {
+    box-sizing: border-box;
+    display: grid;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--rp-color-text);
+    font-size: var(--rp-font-size-md);
+    line-height: var(--rp-line-height-md);
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--_rp-collapse-duration), opacity var(--_rp-collapse-duration);
 }
-.rp-collapse__inner[data-v-a78ac964] {
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
+.rp-collapse__inner[data-v-a380be0d] {
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+.rp-collapse-content-enter-from[data-v-a380be0d],
+  .rp-collapse-content-leave-to[data-v-a380be0d] {
+    opacity: 0;
+    grid-template-rows: 0fr;
 }
-.rp-collapse-content-enter-from[data-v-a78ac964],
-.rp-collapse-content-leave-to[data-v-a78ac964] {
-  opacity: 0;
-  grid-template-rows: 0fr;
 }

package/dist/collapse.js

@@ -1,14 +1,16 @@
 import './collapse.css';
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useCollapse } from "./useCollapse.js";
-import { VaporTransition, applyVShow, child, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
+import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/collapse/collapse.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<section data-v-a78ac964><div data-v-a78ac964 class=rp-collapse__inner>");
-var t1 = template("<div data-v-a78ac964>", 1);
+var t0 = template("<section data-v-a380be0d><div data-v-a380be0d class=rp-collapse__inner>");
+var t1 = template("<div data-v-a380be0d>", 1);
 //#endregion
 //#region src/components/collapse/collapse.vue
 var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpCollapse",
+	inheritAttrs: false,
 	__name: "collapse",
 	props: {
 		id: {},
@@ -27,19 +29,44 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		role: { default: "region" },
 		ariaLabel: {},
 		ariaDescribedby: {},
-		ariaLabelledby: {}
+		ariaLabelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:open"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { isOpen, shouldRenderContent, rootProps, contentProps, triggerSlotProps, contentSlotProps } = useCollapse(props, (open) => {
+		const { isOpen, isDisabled, state, shouldRenderContent, rootProps: internalRootProps, triggerProps, contentProps, triggerSlotProps, contentSlotProps } = useCollapse(props, (open) => {
 			emit("update:open", open);
 		});
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			...internalRootProps.value,
+			"data-disabled": presence(isDisabled.value)
+		}));
+		const publicTriggerProps = computed(() => {
+			const partAttrs = getPartAttrs("trigger");
+			return {
+				...triggerProps.value,
+				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
+				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
+				"data-state": state.value,
+				"data-disabled": presence(isDisabled.value)
+			};
+		});
+		const publicTriggerSlotProps = computed(() => ({
+			...triggerSlotProps.value,
+			triggerProps: publicTriggerProps.value
+		}));
+		const publicContentProps = computed(() => ({
+			...contentProps.value,
+			...getPartAttrs("content", { class: contentProps.value.class })
+		}));
 		const n7 = t1();
-		renderEffect(() => setDynamicProps(n7, [unref(rootProps)]));
+		renderEffect(() => setDynamicProps(n7, [rootAttrs.value]));
 		setInsertionState(n7, null, 0);
-		createSlot("trigger", { $: [() => unref(triggerSlotProps)] }, null, 1);
+		createSlot("trigger", { $: [() => publicTriggerSlotProps.value] }, null, 1);
 		setInsertionState(n7, null, 1);
 		createComponent(VaporTransition, {
 			name: "rp-collapse-content",
@@ -48,7 +75,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			return createIf(() => unref(shouldRenderContent), () => {
 				const n5 = t0();
 				const n4 = child(n5);
-				renderEffect(() => setDynamicProps(n5, [unref(contentProps)]));
+				renderEffect(() => setDynamicProps(n5, [publicContentProps.value]));
 				setInsertionState(n4, null, 0);
 				createSlot("default", { $: [() => unref(contentSlotProps)] }, null, 1);
 				applyVShow(n5, () => unref(isOpen));
@@ -57,6 +84,13 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}, { _: 8 }));
 		return n7;
 	}
-}), [["__scopeId", "data-v-a78ac964"]]);
+}), [["__scopeId", "data-v-a380be0d"]]);
+//#endregion
+//#region src/components/collapse/types.ts
+var collapseParts = [
+	"root",
+	"trigger",
+	"content"
+];
 //#endregion
-export { collapse_default as t };
+export { collapse_default as n, collapseParts as t };

package/dist/color-input.css

@@ -1,108 +1,138 @@
-.rp-color-input[data-v-e752da15] {
-  --_rp-color-input-height: var(--rp-size-control-md);
-  --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
-  --_rp-color-input-preview-inset: calc(
-      (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
-  );
-  --_rp-color-input-empty-tile: var(--rp-color-gray-3);
-  --_rp-color-input-empty-tile-alt: var(--rp-color-white);
-  --_rp-color-input-empty-grid: conic-gradient(
-      var(--_rp-color-input-empty-tile) 25%,
-      var(--_rp-color-input-empty-tile-alt) 0 50%,
-      var(--_rp-color-input-empty-tile) 0 75%,
-      var(--_rp-color-input-empty-tile-alt) 0
-  );
-  display: inline-flex;
-  max-width: 100%;
-  font-family: var(--rp-font-family);
-  vertical-align: middle;
-}
-.rp-color-input--size-xs[data-v-e752da15] {
-  --_rp-color-input-height: var(--rp-size-control-xs);
-}
-.rp-color-input--size-sm[data-v-e752da15] {
-  --_rp-color-input-height: var(--rp-size-control-sm);
-}
-.rp-color-input--size-md[data-v-e752da15] {
-  --_rp-color-input-height: var(--rp-size-control-md);
-}
-.rp-color-input--size-lg[data-v-e752da15] {
-  --_rp-color-input-height: var(--rp-size-control-lg);
-}
-.rp-color-input--size-xl[data-v-e752da15] {
-  --_rp-color-input-height: var(--rp-size-control-xl);
-}
-html.dark .rp-color-input[data-v-e752da15], [data-rp-color-scheme=dark] .rp-color-input[data-v-e752da15] {
-  --_rp-color-input-empty-tile: var(--rp-color-dark-6);
-  --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
-}
-.rp-color-input[data-v-e752da15] .rp-input {
-  width: 100%;
-  min-width: 180px;
-  padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
-}
-.rp-color-input[data-v-e752da15] .rp-popover__content {
-  min-width: auto;
-  padding: var(--rp-spacing-3);
-  padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
-}
-.rp-color-input[data-v-e752da15] .rp-color-picker {
-  --_rp-color-picker-size: min(
-      var(--_rp-color-picker-saturation-width),
-      calc(100vw - var(--rp-spacing-12))
-  );
-}
-.rp-color-input__preview[data-v-e752da15] {
-  --_rp-color-swatch-radius: 50%;
-  width: var(--_rp-color-input-preview-size);
-  height: var(--_rp-color-input-preview-size);
-  flex-shrink: 0;
-  border-radius: 50%;
-  pointer-events: none;
-}
-.rp-color-input__preview--empty[data-v-e752da15] {
-  box-sizing: border-box;
-  display: inline-flex;
-  background: var(--_rp-color-input-empty-grid);
-  background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
-  border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
-}
-.rp-color-input__eye-dropper[data-v-e752da15] {
-  padding: 0;
-  font: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rp-radius-xs);
-  color: var(--rp-color-control-icon);
-  transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
-}
-.rp-color-input__eye-dropper[data-v-e752da15]:hover:not(:disabled) {
-  color: var(--rp-color-control-fg);
-}
-.rp-color-input__eye-dropper[data-v-e752da15]:focus-visible {
-  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
-  outline-offset: 2px;
-}
-.rp-color-input__eye-dropper[data-v-e752da15]:disabled {
-  cursor: not-allowed;
-  opacity: var(--rp-opacity-disabled);
-}
-.rp-color-input__eye-dropper-icon[data-v-e752da15] {
-  display: inline-flex;
-  align-items: center;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-}
-.rp-color-input__eye-dropper-icon svg[data-v-e752da15] {
-  width: 100%;
-  height: 100%;
-}
-.rp-color-input__eye-dropper-icon[data-v-e752da15] >  svg {
-  width: 100%;
-  height: 100%;
+@layer ropav.components {
+.rp-color-input[data-v-0c4e1f32] {
+    --_rp-color-input-height: var(--rp-size-control-md);
+    --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
+    --_rp-color-input-preview-inset: calc(
+        (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
+    );
+    --_rp-color-input-empty-tile: var(--rp-color-gray-3);
+    --_rp-color-input-empty-tile-alt: var(--rp-color-white);
+    --_rp-color-input-empty-grid: conic-gradient(
+        var(--_rp-color-input-empty-tile) 25%,
+        var(--_rp-color-input-empty-tile-alt) 0 50%,
+        var(--_rp-color-input-empty-tile) 0 75%,
+        var(--_rp-color-input-empty-tile-alt) 0
+    );
+    display: inline-flex;
+    max-width: 100%;
+    font-family: var(--rp-font-family);
+    vertical-align: middle;
+}
+.rp-color-input--size-xs[data-v-0c4e1f32] {
+    --_rp-color-input-height: var(--rp-size-control-xs);
+}
+.rp-color-input--size-sm[data-v-0c4e1f32] {
+    --_rp-color-input-height: var(--rp-size-control-sm);
+}
+.rp-color-input--size-md[data-v-0c4e1f32] {
+    --_rp-color-input-height: var(--rp-size-control-md);
+}
+.rp-color-input--size-lg[data-v-0c4e1f32] {
+    --_rp-color-input-height: var(--rp-size-control-lg);
+}
+.rp-color-input--size-xl[data-v-0c4e1f32] {
+    --_rp-color-input-height: var(--rp-size-control-xl);
+}
+html.dark .rp-color-input[data-v-0c4e1f32], [data-rp-color-scheme=dark] .rp-color-input[data-v-0c4e1f32] {
+    --_rp-color-input-empty-tile: var(--rp-color-dark-6);
+    --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
+}
+.rp-color-input[data-v-0c4e1f32] .rp-input {
+    width: 100%;
+    min-width: 180px;
+    padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input[data-v-0c4e1f32] .rp-popover__content {
+    min-width: auto;
+    padding: var(--rp-spacing-3);
+    padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input[data-v-0c4e1f32] .rp-color-picker {
+    --_rp-color-picker-size: min(
+        var(--_rp-color-picker-saturation-width),
+        calc(100vw - var(--rp-spacing-12))
+    );
+}
+.rp-color-input__preview[data-v-0c4e1f32] {
+    --_rp-color-swatch-radius: 50%;
+    width: var(--_rp-color-input-preview-size);
+    height: var(--_rp-color-input-preview-size);
+    flex-shrink: 0;
+    border-radius: 50%;
+    pointer-events: none;
+}
+.rp-color-input__preview--empty[data-v-0c4e1f32] {
+    box-sizing: border-box;
+    display: inline-flex;
+    background: var(--_rp-color-input-empty-grid);
+    background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
+    border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
+}
+.rp-color-input__eye-dropper[data-v-0c4e1f32] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--rp-radius-xs);
+    color: var(--rp-color-control-icon);
+    transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-color-input__eye-dropper[data-v-0c4e1f32]:hover:not(:disabled) {
+    color: var(--rp-color-control-fg);
+}
+.rp-color-input__eye-dropper[data-v-0c4e1f32]:focus-visible {
+    outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+    outline-offset: 2px;
+}
+.rp-color-input__eye-dropper[data-v-0c4e1f32]:disabled {
+    cursor: not-allowed;
+    opacity: var(--rp-opacity-disabled);
+}
+.rp-color-input__eye-dropper-icon[data-v-0c4e1f32] {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-color-input__eye-dropper-icon svg[data-v-0c4e1f32] {
+    width: 100%;
+    height: 100%;
+}
+.rp-color-input__eye-dropper-icon[data-v-0c4e1f32] >  svg {
+    width: 100%;
+    height: 100%;
+}
+.rp-popover__content.rp-color-input__popover {
+    --_rp-color-input-height: var(--rp-size-control-md);
+    --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
+    --_rp-color-input-preview-inset: calc(
+        (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
+    );
+    min-width: auto;
+    padding: var(--rp-spacing-3);
+    padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input__popover--size-xs {
+    --_rp-color-input-height: var(--rp-size-control-xs);
+}
+.rp-color-input__popover--size-sm {
+    --_rp-color-input-height: var(--rp-size-control-sm);
+}
+.rp-color-input__popover--size-lg {
+    --_rp-color-input-height: var(--rp-size-control-lg);
+}
+.rp-color-input__popover--size-xl {
+    --_rp-color-input-height: var(--rp-size-control-xl);
+}
+.rp-color-input__popover .rp-color-picker {
+    --_rp-color-picker-size: min(
+        var(--_rp-color-picker-saturation-width),
+        calc(100vw - var(--rp-spacing-12))
+    );
+}
 }