ropav 0.1.4 → 0.1.6

package/dist/button-link.js

@@ -1,15 +1,13 @@
-import './button-link.css';
-import { t as bem } from "./bem.js";
 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 { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { t as bem } from "./bem.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./button.scss_vue_type_style_index_0_src_true_lang.js";
 import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/button-link/button-link.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-107a8d80>");
-var t1 = template("<a data-v-107a8d80><span data-v-107a8d80 class=rp-button__content><span data-v-107a8d80></span>", 1);
+var t0 = template("<span>");
+var t1 = template("<a><span class=rp-button__content><span></span>", 1);
 //#endregion
 //#region src/components/button-link/button-link.vue
-var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+var button_link_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpButtonLink",
 	inheritAttrs: false,
 	__name: "button-link",
@@ -21,7 +19,11 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		hreflang: {},
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		disabled: {
@@ -45,7 +47,7 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			disabled: isUnavailable.value,
 			loading: props.loading
 		}));
-		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const resolvedHref = computed(() => isUnavailable.value ? void 0 : props.href);
 		const resolvedTarget = computed(() => isUnavailable.value ? void 0 : props.target);
 		const resolvedRel = computed(() => {
@@ -89,7 +91,7 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			setInsertionState(n5, null, 0);
 			createSlot("loading", null, () => {
 				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
-			}, 1);
+			});
 			return n5;
 		});
 		setInsertionState(n16, 0);
@@ -97,23 +99,23 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			const n9 = t0();
 			renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("left", { class: "rp-button__left" })]));
 			setInsertionState(n9, null, 0);
-			createSlot("left", null, null, 1);
+			createSlot("left");
 			return n9;
 		});
 		renderEffect(() => setDynamicProps(n11, [unref(getPartAttrs)("label", { class: "rp-button__label" })]));
 		setInsertionState(n11, null, 0);
-		createSlot("default", null, null, 1);
+		createSlot();
 		setInsertionState(n16, null, 2);
 		createIf(() => $slots.right, () => {
 			const n15 = t0();
 			renderEffect(() => setDynamicProps(n15, [unref(getPartAttrs)("right", { class: "rp-button__right" })]));
 			setInsertionState(n15, null, 0);
-			createSlot("right", null, null, 1);
+			createSlot("right");
 			return n15;
 		});
 		return n17;
 	}
-}), [["__scopeId", "data-v-107a8d80"]]);
+});
 //#endregion
 //#region src/components/button-link/types.ts
 var buttonLinkParts = [

package/dist/button.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-button[data-v-f0062177] {
+.rp-button {
     --_rp-button-bg: var(--rp-color-default);
     --_rp-button-bg-hover: var(--rp-color-default-hover);
     --_rp-button-bg-active: var(--rp-color-disabled);
@@ -7,6 +7,8 @@
     --_rp-button-border-hover: var(--_rp-button-border);
     --_rp-button-border-active: var(--_rp-button-border-hover);
     --_rp-button-fg: var(--rp-color-default-color);
+    --_rp-button-fg-hover: var(--_rp-button-fg);
+    --_rp-button-fg-active: var(--_rp-button-fg-hover);
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
@@ -29,7 +31,7 @@
     color: var(--_rp-button-fg);
     cursor: pointer;
     text-decoration: none;
-    transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
     white-space: nowrap;
     user-select: none;
     height: var(--_rp-button-height);
@@ -37,108 +39,110 @@
     font-size: var(--_rp-button-font-size);
     border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-f0062177]:hover:not(:disabled):not(.rp-button--disabled) {
+.rp-button:hover:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-hover);
     border-color: var(--_rp-button-border-hover);
     box-shadow: var(--_rp-button-shadow-hover);
+    color: var(--_rp-button-fg-hover);
 }
-.rp-button[data-v-f0062177]:active:not(:disabled):not(.rp-button--disabled) {
+.rp-button:active:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-active);
     border-color: var(--_rp-button-border-active);
     box-shadow: var(--_rp-button-shadow-active);
+    color: var(--_rp-button-fg-active);
     transform: translateY(1px);
 }
-.rp-button--size-xs[data-v-f0062177] {
+.rp-button--size-xs {
     --_rp-button-height: var(--rp-size-control-xs);
     --_rp-button-padding-x: 14px;
     --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-f0062177] {
+.rp-button--size-sm {
     --_rp-button-height: var(--rp-size-control-sm);
     --_rp-button-padding-x: 18px;
     --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-md[data-v-f0062177] {
+.rp-button--size-md {
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
 }
-.rp-button--size-lg[data-v-f0062177] {
+.rp-button--size-lg {
     --_rp-button-height: var(--rp-size-control-lg);
     --_rp-button-padding-x: 26px;
     --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-f0062177] {
+.rp-button--size-xl {
     --_rp-button-height: var(--rp-size-control-xl);
     --_rp-button-padding-x: 32px;
     --_rp-button-font-size: var(--rp-font-size-xl);
 }
-.rp-button--radius-xs[data-v-f0062177] {
+.rp-button--radius-xs {
     --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-f0062177] {
+.rp-button--radius-sm {
     --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-f0062177] {
+.rp-button--radius-md {
     --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-f0062177] {
+.rp-button--radius-lg {
     --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-f0062177] {
+.rp-button--radius-xl {
     --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--subtle[data-v-f0062177] {
+.rp-button--subtle {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-f0062177] {
+.rp-button--surface {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-f0062177] {
+.rp-button--outline {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-f0062177] {
+.rp-button--ghost {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-f0062177] {
+.rp-button--plain {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-f0062177]:disabled, .rp-button--disabled[data-v-f0062177] {
+.rp-button:disabled, .rp-button--disabled {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }
-.rp-button[data-v-f0062177]:focus-visible {
+.rp-button: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-button--loading .rp-button__content[data-v-f0062177] {
+.rp-button--loading .rp-button__content {
     opacity: 0;
 }
-.rp-button__content[data-v-f0062177] {
+.rp-button__content {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--rp-spacing-2);
 }
-.rp-button__left[data-v-f0062177], .rp-button__right[data-v-f0062177] {
+.rp-button__left, .rp-button__right {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
 }
-.rp-button__loading[data-v-f0062177] {
+.rp-button__loading {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -147,15 +151,20 @@
     left: 50%;
     translate: -50% -50%;
 }
-.rp-button__spinner[data-v-f0062177] {
+.rp-button__spinner {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-f0062177 700ms linear infinite;
+    animation: rp-spinner-spin 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-f0062177 {
+@media (prefers-reduced-motion: reduce) {
+.rp-button__spinner {
+      animation: none;
+}
+}
+@keyframes rp-spinner-spin {
 to {
       transform: rotate(360deg);
 }

package/dist/button.js

@@ -1,22 +1,24 @@
-import './button.css';
-import { t as bem } from "./bem.js";
 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 { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { t as bem } from "./bem.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./button.scss_vue_type_style_index_0_src_true_lang.js";
 import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-f0062177>");
-var t1 = template("<button data-v-f0062177><span data-v-f0062177 class=rp-button__content><span data-v-f0062177></span>", 1);
+var t0 = template("<span>");
+var t1 = template("<button><span class=rp-button__content><span></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
-var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+var button_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpButton",
 	inheritAttrs: false,
 	__name: "button",
 	props: {
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		type: { default: "button" },
@@ -39,7 +41,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			[`radius-${props.radius}`]: Boolean(props.radius),
 			loading: props.loading
 		}));
-		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -61,7 +63,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			setInsertionState(n5, null, 0);
 			createSlot("loading", null, () => {
 				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
-			}, 1);
+			});
 			return n5;
 		});
 		setInsertionState(n16, 0);
@@ -69,23 +71,23 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			const n9 = t0();
 			renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("left", { class: "rp-button__left" })]));
 			setInsertionState(n9, null, 0);
-			createSlot("left", null, null, 1);
+			createSlot("left");
 			return n9;
 		});
 		renderEffect(() => setDynamicProps(n11, [unref(getPartAttrs)("label", { class: "rp-button__label" })]));
 		setInsertionState(n11, null, 0);
-		createSlot("default", null, null, 1);
+		createSlot();
 		setInsertionState(n16, null, 2);
 		createIf(() => $slots.right, () => {
 			const n15 = t0();
 			renderEffect(() => setDynamicProps(n15, [unref(getPartAttrs)("right", { class: "rp-button__right" })]));
 			setInsertionState(n15, null, 0);
-			createSlot("right", null, null, 1);
+			createSlot("right");
 			return n15;
 		});
 		return n17;
 	}
-}), [["__scopeId", "data-v-f0062177"]]);
+});
 //#endregion
 //#region src/components/button/types.ts
 var buttonParts = [

package/dist/{useButtonColor.js → button.scss_vue_type_style_index_0_src_true_lang.js}

@@ -1,4 +1,5 @@
-import { i as getComponentVariantColorRoles } from "./componentColors.js";
+import './button.css';
+import { a as getComponentVariantColorRoles } from "./componentColors.js";
 import { defineVaporComponent, markRaw, template } from "vue";
 //#region ~icons/lucide/loader-circle
 var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M21 12a9 9 0 1 1-6.219-8.56\">", 3, 1);
@@ -11,12 +12,13 @@ var loader_circle_default = markRaw(defineVaporComponent({
 }));
 //#endregion
 //#region src/components/button/useButtonColor.ts
-function getButtonColorStyle(color, variant, autoContrast) {
+function getButtonColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant,
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -26,7 +28,9 @@ function getButtonColorStyle(color, variant, autoContrast) {
 		"--_rp-button-border": roles.border,
 		"--_rp-button-border-hover": roles.borderHover,
 		"--_rp-button-border-active": roles.borderActive,
-		"--_rp-button-fg": roles.color
+		"--_rp-button-fg": roles.color,
+		"--_rp-button-fg-hover": roles.colorHover,
+		"--_rp-button-fg-active": roles.colorActive
 	};
 }
 //#endregion

package/dist/card.js

@@ -1,6 +1,6 @@
 import './card.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
 //#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/checkbox.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-checkbox[data-v-cc3e1126] {
+.rp-checkbox[data-v-871a9e21] {
     --_rp-checkbox-color: var(--rp-color-control-selected-bg);
     --_rp-checkbox-on-color: var(--rp-color-control-selected-fg);
     --_rp-checkbox-size: 24px;
@@ -17,15 +17,15 @@
     user-select: none;
     vertical-align: top;
 }
-.rp-checkbox--disabled[data-v-cc3e1126] {
+.rp-checkbox--disabled[data-v-871a9e21] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-checkbox[data-v-cc3e1126] {
+.rp-checkbox[data-v-871a9e21] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-checkbox-font-size);
 }
-.rp-checkbox__native[data-v-cc3e1126] {
+.rp-checkbox__native[data-v-871a9e21] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -37,11 +37,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-cc3e1126] {
+.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-871a9e21] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-checkbox__box[data-v-cc3e1126] {
+.rp-checkbox__box[data-v-871a9e21] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -53,90 +53,90 @@
     background-color: var(--rp-color-control-bg);
     transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-checkbox--checked .rp-checkbox__box[data-v-cc3e1126], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-cc3e1126] {
+.rp-checkbox--checked .rp-checkbox__box[data-v-871a9e21], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-871a9e21] {
     background-color: var(--_rp-checkbox-checked-bg);
     border-color: var(--_rp-checkbox-checked-border);
 }
-.rp-checkbox--invalid .rp-checkbox__box[data-v-cc3e1126] {
+.rp-checkbox--invalid .rp-checkbox__box[data-v-871a9e21] {
     border-color: var(--_rp-checkbox-invalid-border);
 }
-.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-cc3e1126] {
+.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-871a9e21] {
     border-color: var(--_rp-checkbox-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-checkbox-invalid-ring);
 }
-.rp-checkbox__icon[data-v-cc3e1126] {
+.rp-checkbox__icon[data-v-871a9e21] {
     width: 60%;
     height: 60%;
     color: var(--_rp-checkbox-checked-icon);
     transform-origin: center;
 }
-.rp-checkbox__icon[data-v-cc3e1126] [stroke-width] {
+.rp-checkbox__icon[data-v-871a9e21] [stroke-width] {
     stroke-width: 3;
 }
-.rp-checkbox__label[data-v-cc3e1126] {
+.rp-checkbox__label[data-v-871a9e21] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-checkbox--outline[data-v-cc3e1126] {
+.rp-checkbox--outline[data-v-871a9e21] {
     --_rp-checkbox-checked-bg: var(--rp-color-control-bg);
     --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
     --_rp-checkbox-checked-icon: var(--_rp-checkbox-color);
 }
-.rp-checkbox--size-xs[data-v-cc3e1126] {
+.rp-checkbox--size-xs[data-v-871a9e21] {
     --_rp-checkbox-size: 16px;
     --_rp-checkbox-font-size: var(--rp-font-size-xs);
 }
-.rp-checkbox--size-sm[data-v-cc3e1126] {
+.rp-checkbox--size-sm[data-v-871a9e21] {
     --_rp-checkbox-size: 20px;
     --_rp-checkbox-font-size: var(--rp-font-size-sm);
 }
-.rp-checkbox--size-md[data-v-cc3e1126] {
+.rp-checkbox--size-md[data-v-871a9e21] {
     --_rp-checkbox-size: 24px;
     --_rp-checkbox-font-size: var(--rp-font-size-md);
 }
-.rp-checkbox--size-lg[data-v-cc3e1126] {
+.rp-checkbox--size-lg[data-v-871a9e21] {
     --_rp-checkbox-size: 30px;
     --_rp-checkbox-font-size: var(--rp-font-size-lg);
 }
-.rp-checkbox--size-xl[data-v-cc3e1126] {
+.rp-checkbox--size-xl[data-v-871a9e21] {
     --_rp-checkbox-size: 36px;
     --_rp-checkbox-font-size: var(--rp-font-size-xl);
 }
-.rp-checkbox--radius-xs[data-v-cc3e1126] {
+.rp-checkbox--radius-xs[data-v-871a9e21] {
     --_rp-checkbox-radius: 2px;
 }
-.rp-checkbox--radius-sm[data-v-cc3e1126] {
+.rp-checkbox--radius-sm[data-v-871a9e21] {
     --_rp-checkbox-radius: 4px;
 }
-.rp-checkbox--radius-md[data-v-cc3e1126] {
+.rp-checkbox--radius-md[data-v-871a9e21] {
     --_rp-checkbox-radius: 6px;
 }
-.rp-checkbox--radius-lg[data-v-cc3e1126] {
+.rp-checkbox--radius-lg[data-v-871a9e21] {
     --_rp-checkbox-radius: 8px;
 }
-.rp-checkbox--radius-xl[data-v-cc3e1126] {
+.rp-checkbox--radius-xl[data-v-871a9e21] {
     --_rp-checkbox-radius: var(--rp-radius-full);
 }
-.rp-checkbox-icon-enter-active[data-v-cc3e1126],
-  .rp-checkbox-icon-leave-active[data-v-cc3e1126] {
+.rp-checkbox-icon-enter-active[data-v-871a9e21],
+  .rp-checkbox-icon-leave-active[data-v-871a9e21] {
     transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
 }
-.rp-checkbox-icon-enter-from[data-v-cc3e1126],
-  .rp-checkbox-icon-leave-to[data-v-cc3e1126] {
+.rp-checkbox-icon-enter-from[data-v-871a9e21],
+  .rp-checkbox-icon-leave-to[data-v-871a9e21] {
     opacity: 0;
     transform: translateY(3px) scale(0.85);
 }
-.rp-checkbox-icon-enter-to[data-v-cc3e1126],
-  .rp-checkbox-icon-leave-from[data-v-cc3e1126] {
+.rp-checkbox-icon-enter-to[data-v-871a9e21],
+  .rp-checkbox-icon-leave-from[data-v-871a9e21] {
     opacity: 1;
     transform: translateY(0) scale(1);
 }
-.rp-checkbox-icon-leave-to[data-v-cc3e1126] {
+.rp-checkbox-icon-leave-to[data-v-871a9e21] {
     transform: translateY(-3px) scale(0.85);
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-checkbox-icon-enter-active[data-v-cc3e1126],
-    .rp-checkbox-icon-leave-active[data-v-cc3e1126] {
+.rp-checkbox-icon-enter-active[data-v-871a9e21],
+    .rp-checkbox-icon-leave-active[data-v-871a9e21] {
       transition: none;
 }
 }

package/dist/checkbox.js

@@ -1,21 +1,25 @@
 import './checkbox.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.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 bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { i as getComponentContrastColor, r as getComponentColorValue } from "./componentColors.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 { r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 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) {
+function getCheckboxColorStyle(color, autoContrast, contrastColor) {
 	const colorValue = getComponentColorValue(color);
 	if (color && !colorValue) return void 0;
-	if (!colorValue && !autoContrast) return void 0;
+	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
 	const style = {};
 	if (colorValue) style["--_rp-checkbox-color"] = colorValue;
-	if (autoContrast) style["--_rp-checkbox-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
+	if (autoContrast !== false || contrastColor !== void 0) style["--_rp-checkbox-on-color"] = getComponentContrastColor(color ?? "primary", {
+		autoContrast,
+		contrastColor
+	});
 	return style;
 }
 function useCheckbox(props, emitUpdate, getValue = () => props.modelValue ?? false) {
@@ -30,7 +34,7 @@ function useCheckbox(props, emitUpdate, getValue = () => props.modelValue ?? fal
 		[`size-${props.size}`]: Boolean(props.size),
 		[`radius-${props.radius}`]: Boolean(props.radius)
 	}));
-	const rootStyle = computed(() => getCheckboxColorStyle(props.color, props.autoContrast));
+	const rootStyle = computed(() => getCheckboxColorStyle(props.color, props.autoContrast, props.contrastColor));
 	function onChange(e) {
 		emitUpdate(e.target.checked);
 	}
@@ -48,8 +52,8 @@ function useCheckbox(props, emitUpdate, getValue = () => props.modelValue ?? fal
 }
 //#endregion
 //#region src/components/checkbox/checkbox.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-cc3e1126>");
-var t1 = template("<label data-v-cc3e1126><input data-v-cc3e1126><span data-v-cc3e1126></span>", 1);
+var t0 = template("<span data-v-871a9e21>");
+var t1 = template("<label data-v-871a9e21><input data-v-871a9e21><span data-v-871a9e21></span>", 1);
 //#endregion
 //#region src/components/checkbox/checkbox.vue
 var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -71,7 +75,11 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		value: { default: "on" },
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		disabled: {
@@ -196,7 +204,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n13;
 	}
-}), [["__scopeId", "data-v-cc3e1126"]]);
+}), [["__scopeId", "data-v-871a9e21"]]);
 //#endregion
 //#region src/components/checkbox/types.ts
 var checkboxParts = [

package/dist/chevron-right.js

@@ -0,0 +1,12 @@
+import { defineVaporComponent, markRaw, template } from "vue";
+//#region ~icons/lucide/chevron-right
+var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m9 18l6-6l-6-6\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var chevron_right_default = markRaw(defineVaporComponent({
+	name: "lucide-chevron-right",
+	render
+}));
+//#endregion
+export { chevron_right_default as t };

package/dist/collapse.css

@@ -1,16 +1,16 @@
 @layer ropav.components {
-.rp-collapse[data-v-a380be0d] {
+.rp-collapse[data-v-06c57838] {
     --_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-a380be0d] {
+.rp-collapse--disabled[data-v-06c57838] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-collapse__content[data-v-a380be0d] {
+.rp-collapse__content[data-v-06c57838] {
     box-sizing: border-box;
     display: grid;
     min-width: 0;
@@ -21,13 +21,13 @@
     grid-template-rows: 1fr;
     transition: grid-template-rows var(--_rp-collapse-duration), opacity var(--_rp-collapse-duration);
 }
-.rp-collapse__inner[data-v-a380be0d] {
+.rp-collapse__inner[data-v-06c57838] {
     min-height: 0;
     min-width: 0;
     overflow: hidden;
 }
-.rp-collapse-content-enter-from[data-v-a380be0d],
-  .rp-collapse-content-leave-to[data-v-a380be0d] {
+.rp-collapse-content-enter-from[data-v-06c57838],
+  .rp-collapse-content-leave-to[data-v-06c57838] {
     opacity: 0;
     grid-template-rows: 0fr;
 }