ropav 0.0.9 → 0.0.11

package/dist/checkbox.js

@@ -1,11 +1,12 @@
 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 { 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);
@@ -17,6 +18,7 @@ function getCheckboxColorStyle(color, autoContrast) {
 	return style;
 }
 function useCheckbox(props, emitUpdate) {
+	const inputRef = ref(null);
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-checkbox", {
 		checked: props.modelValue,
@@ -31,21 +33,27 @@ 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-bad0fe43>");
+var t1 = template("<label data-v-bad0fe43><input data-v-bad0fe43><span data-v-bad0fe43></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: {},
@@ -74,41 +82,75 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		indeterminate: {
 			type: Boolean,
 			default: false
-		}
+		},
+		inputAttrs: {},
+		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) => {
+		const { inputRef, control, rootClass, rootStyle, onChange, focus } = useCheckbox(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const state = computed(() => props.indeterminate ? "indeterminate" : props.modelValue ? "checked" : "unchecked");
+		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 _control = unref(control);
-			const _indeterminate = __props.indeterminate;
 			const _modelValue = __props.modelValue;
-			const _control_disabled = _control.disabled;
+			const _indeterminate = __props.indeterminate;
 			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.value, {
+				id: _control.id,
+				name: __props.name,
+				type: "checkbox",
+				checked: _modelValue,
+				disabled: _control.disabled || void 0,
+				required: _control_required || void 0,
+				indeterminate: _indeterminate,
+				"aria-checked": _indeterminate ? "mixed" : _modelValue,
+				"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, {
@@ -128,12 +170,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-bad0fe43"]]);
+//#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-bae38f91] {
-  --_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-bae38f91] {
-  --_rp-color-input-height: var(--rp-size-control-xs);
-}
-.rp-color-input--size-sm[data-v-bae38f91] {
-  --_rp-color-input-height: var(--rp-size-control-sm);
-}
-.rp-color-input--size-md[data-v-bae38f91] {
-  --_rp-color-input-height: var(--rp-size-control-md);
-}
-.rp-color-input--size-lg[data-v-bae38f91] {
-  --_rp-color-input-height: var(--rp-size-control-lg);
-}
-.rp-color-input--size-xl[data-v-bae38f91] {
-  --_rp-color-input-height: var(--rp-size-control-xl);
-}
-html.dark .rp-color-input[data-v-bae38f91], [data-rp-color-scheme=dark] .rp-color-input[data-v-bae38f91] {
-  --_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-bae38f91] .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-bae38f91] .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-bae38f91] .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-bae38f91] {
-  --_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-bae38f91] {
-  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-bae38f91] {
-  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-bae38f91]:hover:not(:disabled) {
-  color: var(--rp-color-control-fg);
-}
-.rp-color-input__eye-dropper[data-v-bae38f91]:focus-visible {
-  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
-  outline-offset: 2px;
-}
-.rp-color-input__eye-dropper[data-v-bae38f91]:disabled {
-  cursor: not-allowed;
-  opacity: var(--rp-opacity-disabled);
-}
-.rp-color-input__eye-dropper-icon[data-v-bae38f91] {
-  display: inline-flex;
-  align-items: center;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-}
-.rp-color-input__eye-dropper-icon svg[data-v-bae38f91] {
-  width: 100%;
-  height: 100%;
-}
-.rp-color-input__eye-dropper-icon[data-v-bae38f91] >  svg {
-  width: 100%;
-  height: 100%;
+@layer ropav.components {
+.rp-color-input[data-v-cf9bd64a] {
+    --_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-cf9bd64a] {
+    --_rp-color-input-height: var(--rp-size-control-xs);
+}
+.rp-color-input--size-sm[data-v-cf9bd64a] {
+    --_rp-color-input-height: var(--rp-size-control-sm);
+}
+.rp-color-input--size-md[data-v-cf9bd64a] {
+    --_rp-color-input-height: var(--rp-size-control-md);
+}
+.rp-color-input--size-lg[data-v-cf9bd64a] {
+    --_rp-color-input-height: var(--rp-size-control-lg);
+}
+.rp-color-input--size-xl[data-v-cf9bd64a] {
+    --_rp-color-input-height: var(--rp-size-control-xl);
+}
+html.dark .rp-color-input[data-v-cf9bd64a], [data-rp-color-scheme=dark] .rp-color-input[data-v-cf9bd64a] {
+    --_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-cf9bd64a] .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-cf9bd64a] .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-cf9bd64a] .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-cf9bd64a] {
+    --_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-cf9bd64a] {
+    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-cf9bd64a] {
+    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-cf9bd64a]:hover:not(:disabled) {
+    color: var(--rp-color-control-fg);
+}
+.rp-color-input__eye-dropper[data-v-cf9bd64a]:focus-visible {
+    outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+    outline-offset: 2px;
+}
+.rp-color-input__eye-dropper[data-v-cf9bd64a]:disabled {
+    cursor: not-allowed;
+    opacity: var(--rp-opacity-disabled);
+}
+.rp-color-input__eye-dropper-icon[data-v-cf9bd64a] {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-color-input__eye-dropper-icon svg[data-v-cf9bd64a] {
+    width: 100%;
+    height: 100%;
+}
+.rp-color-input__eye-dropper-icon[data-v-cf9bd64a] >  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))
+    );
+}
 }