ropav 0.1.3 → 0.1.5

package/dist/button-link.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-button[data-v-107a8d80] {
+.rp-button[data-v-dd8ef63e] {
     --_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-107a8d80]:hover:not(:disabled):not(.rp-button--disabled) {
+.rp-button[data-v-dd8ef63e]: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-107a8d80]:active:not(:disabled):not(.rp-button--disabled) {
+.rp-button[data-v-dd8ef63e]: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-107a8d80] {
+.rp-button--size-xs[data-v-dd8ef63e] {
     --_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-107a8d80] {
+.rp-button--size-sm[data-v-dd8ef63e] {
     --_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-107a8d80] {
+.rp-button--size-md[data-v-dd8ef63e] {
     --_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-107a8d80] {
+.rp-button--size-lg[data-v-dd8ef63e] {
     --_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-107a8d80] {
+.rp-button--size-xl[data-v-dd8ef63e] {
     --_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-107a8d80] {
+.rp-button--radius-xs[data-v-dd8ef63e] {
     --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-107a8d80] {
+.rp-button--radius-sm[data-v-dd8ef63e] {
     --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-107a8d80] {
+.rp-button--radius-md[data-v-dd8ef63e] {
     --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-107a8d80] {
+.rp-button--radius-lg[data-v-dd8ef63e] {
     --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-107a8d80] {
+.rp-button--radius-xl[data-v-dd8ef63e] {
     --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--subtle[data-v-107a8d80] {
+.rp-button--subtle[data-v-dd8ef63e] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-107a8d80] {
+.rp-button--surface[data-v-dd8ef63e] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-107a8d80] {
+.rp-button--outline[data-v-dd8ef63e] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-107a8d80] {
+.rp-button--ghost[data-v-dd8ef63e] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-107a8d80] {
+.rp-button--plain[data-v-dd8ef63e] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-107a8d80]:disabled, .rp-button--disabled[data-v-107a8d80] {
+.rp-button[data-v-dd8ef63e]:disabled, .rp-button--disabled[data-v-dd8ef63e] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }
-.rp-button[data-v-107a8d80]:focus-visible {
+.rp-button[data-v-dd8ef63e]: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-107a8d80] {
+.rp-button--loading .rp-button__content[data-v-dd8ef63e] {
     opacity: 0;
 }
-.rp-button__content[data-v-107a8d80] {
+.rp-button__content[data-v-dd8ef63e] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--rp-spacing-2);
 }
-.rp-button__left[data-v-107a8d80], .rp-button__right[data-v-107a8d80] {
+.rp-button__left[data-v-dd8ef63e], .rp-button__right[data-v-dd8ef63e] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
 }
-.rp-button__loading[data-v-107a8d80] {
+.rp-button__loading[data-v-dd8ef63e] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -147,15 +151,15 @@
     left: 50%;
     translate: -50% -50%;
 }
-.rp-button__spinner[data-v-107a8d80] {
+.rp-button__spinner[data-v-dd8ef63e] {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-107a8d80 700ms linear infinite;
+    animation: rp-spinner-spin-dd8ef63e 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-107a8d80 {
+@keyframes rp-spinner-spin-dd8ef63e {
 to {
       transform: rotate(360deg);
 }

package/dist/button-link.js

@@ -5,8 +5,8 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.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 data-v-dd8ef63e>");
+var t1 = template("<a data-v-dd8ef63e><span data-v-dd8ef63e class=rp-button__content><span data-v-dd8ef63e></span>", 1);
 //#endregion
 //#region src/components/button-link/button-link.vue
 var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -21,7 +21,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 +49,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(() => {
@@ -113,7 +117,7 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		});
 		return n17;
 	}
-}), [["__scopeId", "data-v-107a8d80"]]);
+}), [["__scopeId", "data-v-dd8ef63e"]]);
 //#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[data-v-15cdf23b] {
     --_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[data-v-15cdf23b]: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[data-v-15cdf23b]: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[data-v-15cdf23b] {
     --_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[data-v-15cdf23b] {
     --_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[data-v-15cdf23b] {
     --_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[data-v-15cdf23b] {
     --_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[data-v-15cdf23b] {
     --_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[data-v-15cdf23b] {
     --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-f0062177] {
+.rp-button--radius-sm[data-v-15cdf23b] {
     --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-f0062177] {
+.rp-button--radius-md[data-v-15cdf23b] {
     --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-f0062177] {
+.rp-button--radius-lg[data-v-15cdf23b] {
     --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-f0062177] {
+.rp-button--radius-xl[data-v-15cdf23b] {
     --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--subtle[data-v-f0062177] {
+.rp-button--subtle[data-v-15cdf23b] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-f0062177] {
+.rp-button--surface[data-v-15cdf23b] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-f0062177] {
+.rp-button--outline[data-v-15cdf23b] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-f0062177] {
+.rp-button--ghost[data-v-15cdf23b] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-f0062177] {
+.rp-button--plain[data-v-15cdf23b] {
     --_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[data-v-15cdf23b]:disabled, .rp-button--disabled[data-v-15cdf23b] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }
-.rp-button[data-v-f0062177]:focus-visible {
+.rp-button[data-v-15cdf23b]: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[data-v-15cdf23b] {
     opacity: 0;
 }
-.rp-button__content[data-v-f0062177] {
+.rp-button__content[data-v-15cdf23b] {
     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[data-v-15cdf23b], .rp-button__right[data-v-15cdf23b] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
 }
-.rp-button__loading[data-v-f0062177] {
+.rp-button__loading[data-v-15cdf23b] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -147,15 +151,15 @@
     left: 50%;
     translate: -50% -50%;
 }
-.rp-button__spinner[data-v-f0062177] {
+.rp-button__spinner[data-v-15cdf23b] {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-f0062177 700ms linear infinite;
+    animation: rp-spinner-spin-15cdf23b 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-f0062177 {
+@keyframes rp-spinner-spin-15cdf23b {
 to {
       transform: rotate(360deg);
 }

package/dist/button.js

@@ -5,8 +5,8 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.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 data-v-15cdf23b>");
+var t1 = template("<button data-v-15cdf23b><span data-v-15cdf23b class=rp-button__content><span data-v-15cdf23b></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
 var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -16,7 +16,11 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	props: {
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		type: { default: "button" },
@@ -39,7 +43,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,
@@ -85,7 +89,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n17;
 	}
-}), [["__scopeId", "data-v-f0062177"]]);
+}), [["__scopeId", "data-v-15cdf23b"]]);
 //#endregion
 //#region src/components/button/types.ts
 var buttonParts = [

package/dist/checkbox.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-checkbox[data-v-cc3e1126] {
+.rp-checkbox[data-v-f0f09b8a] {
     --_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-f0f09b8a] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-checkbox[data-v-cc3e1126] {
+.rp-checkbox[data-v-f0f09b8a] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-checkbox-font-size);
 }
-.rp-checkbox__native[data-v-cc3e1126] {
+.rp-checkbox__native[data-v-f0f09b8a] {
     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-f0f09b8a] {
     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-f0f09b8a] {
     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-f0f09b8a], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-f0f09b8a] {
     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-f0f09b8a] {
     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-f0f09b8a] {
     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-f0f09b8a] {
     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-f0f09b8a] [stroke-width] {
     stroke-width: 3;
 }
-.rp-checkbox__label[data-v-cc3e1126] {
+.rp-checkbox__label[data-v-f0f09b8a] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-checkbox--outline[data-v-cc3e1126] {
+.rp-checkbox--outline[data-v-f0f09b8a] {
     --_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-f0f09b8a] {
     --_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-f0f09b8a] {
     --_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-f0f09b8a] {
     --_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-f0f09b8a] {
     --_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-f0f09b8a] {
     --_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-f0f09b8a] {
     --_rp-checkbox-radius: 2px;
 }
-.rp-checkbox--radius-sm[data-v-cc3e1126] {
+.rp-checkbox--radius-sm[data-v-f0f09b8a] {
     --_rp-checkbox-radius: 4px;
 }
-.rp-checkbox--radius-md[data-v-cc3e1126] {
+.rp-checkbox--radius-md[data-v-f0f09b8a] {
     --_rp-checkbox-radius: 6px;
 }
-.rp-checkbox--radius-lg[data-v-cc3e1126] {
+.rp-checkbox--radius-lg[data-v-f0f09b8a] {
     --_rp-checkbox-radius: 8px;
 }
-.rp-checkbox--radius-xl[data-v-cc3e1126] {
+.rp-checkbox--radius-xl[data-v-f0f09b8a] {
     --_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-f0f09b8a],
+  .rp-checkbox-icon-leave-active[data-v-f0f09b8a] {
     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-f0f09b8a],
+  .rp-checkbox-icon-leave-to[data-v-f0f09b8a] {
     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-f0f09b8a],
+  .rp-checkbox-icon-leave-from[data-v-f0f09b8a] {
     opacity: 1;
     transform: translateY(0) scale(1);
 }
-.rp-checkbox-icon-leave-to[data-v-cc3e1126] {
+.rp-checkbox-icon-leave-to[data-v-f0f09b8a] {
     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-f0f09b8a],
+    .rp-checkbox-icon-leave-active[data-v-f0f09b8a] {
       transition: none;
 }
 }

package/dist/checkbox.js

@@ -5,17 +5,21 @@ import { n as getComponentColorValue, r as getComponentContrastColor } from "./c
 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 useControllableValue } from "./useControllableValue.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-f0f09b8a>");
+var t1 = template("<label data-v-f0f09b8a><input data-v-f0f09b8a><span data-v-f0f09b8a></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-f0f09b8a"]]);
 //#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 };