ropav 0.1.4 → 0.1.6

package/README.md

@@ -37,6 +37,26 @@ Import the components you need:
 import { Button } from 'ropav';
 ```
 
+Headless state utilities are available from `ropav/composables`. See the
+[public composables API](./docs/public-composables-api.md) for their controlled and uncontrolled
+state contracts.
+
+## Custom color contrast
+
+`autoContrast` selects foreground colors for preset colors and opaque custom color literals. A
+translucent custom color depends on the surface behind the component, so its contrast cannot be
+determined from the color alone. Pass `contrastColor` explicitly whenever a custom background has
+alpha:
+
+```vue
+<Button color="rgba(255, 255, 255, 0.2)" contrast-color="var(--rp-color-white)" variant="solid">
+  Continue
+</Button>
+```
+
+In development, Ropav warns when auto contrast receives a translucent custom color without an
+explicit `contrastColor`. The production fallback remains `var(--rp-color-white)`.
+
 ## Progress and interactive ranges
 
 Use `Progress` for read-only status and `Slider` when the user can change the value. A media seek

package/dist/accordion.js

@@ -1,10 +1,11 @@
 import './accordion.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 { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as bem } from "./bem.js";
 import { t as useCollapse } from "./useCollapse.js";
-import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, provide, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId } from "vue";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, provide, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId } from "vue";
 //#region src/components/accordion/types.ts
 var accordionParts = ["root"];
 var accordionItemParts = [
@@ -61,9 +62,12 @@ function useAccordion(props, emitUpdate) {
 	const isMultiple = computed(() => Boolean(props.multiple));
 	const isCollapsible = computed(() => props.collapsible !== false);
 	const isDisabled = computed(() => Boolean(props.disabled));
-	const isControlled = computed(() => props.modelValue !== void 0);
-	const uncontrolledValue = ref(props.defaultValue ?? null);
-	const openValues = computed(() => normalizeValue(isControlled.value ? props.modelValue : uncontrolledValue.value, isMultiple.value));
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: emitUpdate
+	});
+	const openValues = computed(() => normalizeValue(controllable.value.value, isMultiple.value));
 	const rootClass = computed(() => bem("rp-accordion", {
 		disabled: isDisabled.value,
 		multiple: isMultiple.value
@@ -79,8 +83,7 @@ function useAccordion(props, emitUpdate) {
 	}));
 	function setValues(nextValues) {
 		const nextModelValue = toModelValue(nextValues, isMultiple.value);
-		if (!isControlled.value) uncontrolledValue.value = nextModelValue;
-		emitUpdate(nextModelValue);
+		controllable.setValue(nextModelValue);
 	}
 	function setItemOpen(value, open) {
 		if (isDisabled.value) return;

package/dist/alert.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-alert[data-v-8e95a4b4] {
+.rp-alert[data-v-9ae78ff5] {
     --_rp-alert-bg: var(--rp-color-cyan-light);
     --_rp-alert-fg: var(--rp-color-text);
     --_rp-alert-title-fg: var(--rp-color-cyan-light-color);
@@ -22,25 +22,25 @@
     border-radius: var(--_rp-alert-radius);
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-alert--radius-none[data-v-8e95a4b4] {
+.rp-alert--radius-none[data-v-9ae78ff5] {
     --_rp-alert-radius: var(--rp-radius-none);
 }
-.rp-alert--radius-xs[data-v-8e95a4b4] {
+.rp-alert--radius-xs[data-v-9ae78ff5] {
     --_rp-alert-radius: var(--rp-radius-xs);
 }
-.rp-alert--radius-sm[data-v-8e95a4b4] {
+.rp-alert--radius-sm[data-v-9ae78ff5] {
     --_rp-alert-radius: var(--rp-radius-sm);
 }
-.rp-alert--radius-md[data-v-8e95a4b4] {
+.rp-alert--radius-md[data-v-9ae78ff5] {
     --_rp-alert-radius: var(--rp-radius-md);
 }
-.rp-alert--radius-lg[data-v-8e95a4b4] {
+.rp-alert--radius-lg[data-v-9ae78ff5] {
     --_rp-alert-radius: var(--rp-radius-lg);
 }
-.rp-alert--radius-xl[data-v-8e95a4b4] {
+.rp-alert--radius-xl[data-v-9ae78ff5] {
     --_rp-alert-radius: var(--rp-radius-xl);
 }
-.rp-alert__icon[data-v-8e95a4b4] {
+.rp-alert__icon[data-v-9ae78ff5] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -49,37 +49,37 @@
     color: var(--_rp-alert-icon-fg);
     line-height: 0;
 }
-.rp-alert__icon[data-v-8e95a4b4] >  svg {
+.rp-alert__icon[data-v-9ae78ff5] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-alert__content[data-v-8e95a4b4] {
+.rp-alert__content[data-v-9ae78ff5] {
     display: grid;
     flex: 1 1 auto;
     min-width: 0;
     gap: var(--rp-spacing-1);
 }
-.rp-alert__title[data-v-8e95a4b4] {
+.rp-alert__title[data-v-9ae78ff5] {
     color: var(--_rp-alert-title-fg);
     font-size: var(--rp-font-size-md);
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--rp-line-height-xs);
 }
-.rp-alert__description[data-v-8e95a4b4] {
+.rp-alert__description[data-v-9ae78ff5] {
     margin: 0;
 }
-.rp-alert__body[data-v-8e95a4b4], .rp-alert__description[data-v-8e95a4b4] {
+.rp-alert__body[data-v-9ae78ff5], .rp-alert__description[data-v-9ae78ff5] {
     min-width: 0;
     color: var(--_rp-alert-fg);
 }
-.rp-alert__action[data-v-8e95a4b4] {
+.rp-alert__action[data-v-9ae78ff5] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     margin-left: auto;
 }
-.rp-alert__close[data-v-8e95a4b4] {
+.rp-alert__close[data-v-9ae78ff5] {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -96,14 +96,14 @@
     cursor: pointer;
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
 }
-.rp-alert__close[data-v-8e95a4b4]:hover {
+.rp-alert__close[data-v-9ae78ff5]:hover {
     background-color: color-mix(in srgb, var(--_rp-alert-icon-fg) 12%, transparent);
 }
-.rp-alert__close[data-v-8e95a4b4]:focus-visible {
+.rp-alert__close[data-v-9ae78ff5]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-alert__close[data-v-8e95a4b4] >  svg {
+.rp-alert__close[data-v-9ae78ff5] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;

package/dist/alert.js

@@ -1,19 +1,21 @@
 import './alert.css';
-import { t as x_default } from "./x.js";
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } 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 { computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots, watch } from "vue";
+import { t as x_default } from "./x.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
 //#region src/components/alert/useAlertColor.ts
-function getAlertColorStyle(color, variant, autoContrast) {
+function getAlertColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const resolvedVariant = variant ?? "subtle";
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant: resolvedVariant,
 		defaultColor: "cyan",
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -26,12 +28,12 @@ function getAlertColorStyle(color, variant, autoContrast) {
 }
 //#endregion
 //#region src/components/alert/alert.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-8e95a4b4>");
+var t0 = template("<div data-v-9ae78ff5>");
 var t1 = template(" ");
-var t2 = template("<p data-v-8e95a4b4> ");
-var t3 = template("<div data-v-8e95a4b4 class=rp-alert__content>");
-var t4 = template("<button data-v-8e95a4b4>");
-var t5 = template("<div data-v-8e95a4b4>", 1);
+var t2 = template("<p data-v-9ae78ff5> ");
+var t3 = template("<div data-v-9ae78ff5 class=rp-alert__content>");
+var t4 = template("<button data-v-9ae78ff5>");
+var t5 = template("<div data-v-9ae78ff5>", 1);
 delegateEvents("click");
 //#endregion
 //#region src/components/alert/alert.vue
@@ -48,7 +50,11 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		description: { default: "" },
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		radius: {},
 		role: { default: "alert" },
 		closable: {
@@ -64,11 +70,12 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const localOpen = ref(props.open ?? true);
-		watch(() => props.open, (open) => {
-			if (open !== void 0) localOpen.value = open;
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => true,
+			onChange: (open) => emit("update:open", open)
 		});
-		const isOpen = computed(() => props.open ?? localOpen.value);
+		const isOpen = controllableOpen.value;
 		const hasTitle = computed(() => Boolean(props.title || slots.title));
 		const hasDescription = computed(() => Boolean(props.description));
 		const hasContent = computed(() => Boolean(hasTitle.value || hasDescription.value || slots.default));
@@ -78,7 +85,7 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			[props.variant ?? ""]: Boolean(props.variant),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
-		const rootStyle = computed(() => getAlertColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getAlertColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -86,11 +93,10 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			role: resolvedRole.value
 		}));
 		function closeAlert() {
-			localOpen.value = false;
-			emit("update:open", false);
+			controllableOpen.setValue(false);
 			emit("close");
 		}
-		return createIf(() => isOpen.value, () => {
+		return createIf(() => unref(isOpen), () => {
 			const n30 = t5();
 			renderEffect(() => setDynamicProps(n30, [rootAttrs.value]));
 			setInsertionState(n30, null, 0);
@@ -159,7 +165,7 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			return n30;
 		});
 	}
-}), [["__scopeId", "data-v-8e95a4b4"]]);
+}), [["__scopeId", "data-v-9ae78ff5"]]);
 //#endregion
 //#region src/components/alert/types.ts
 var alertParts = [

package/dist/avatar.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-avatar[data-v-0561357f] {
+.rp-avatar[data-v-416c3281] {
     --_rp-avatar-size: var(--rp-size-control-md);
     --_rp-avatar-font-size: var(--rp-font-size-md);
     --_rp-avatar-radius: var(--rp-radius-full);
@@ -27,72 +27,72 @@
     border-radius: var(--_rp-avatar-radius);
     user-select: none;
 }
-.rp-avatar--surface[data-v-0561357f], .rp-avatar--outline[data-v-0561357f] {
+.rp-avatar--surface[data-v-416c3281], .rp-avatar--outline[data-v-416c3281] {
     --_rp-avatar-border-width: var(--rp-border-width-thin);
 }
-.rp-avatar--size-xs[data-v-0561357f] {
+.rp-avatar--size-xs[data-v-416c3281] {
     --_rp-avatar-size: var(--rp-size-control-xs);
     --_rp-avatar-font-size: var(--rp-font-size-xs);
 }
-.rp-avatar--size-sm[data-v-0561357f] {
+.rp-avatar--size-sm[data-v-416c3281] {
     --_rp-avatar-size: var(--rp-size-control-sm);
     --_rp-avatar-font-size: var(--rp-font-size-sm);
 }
-.rp-avatar--size-md[data-v-0561357f] {
+.rp-avatar--size-md[data-v-416c3281] {
     --_rp-avatar-size: var(--rp-size-control-md);
     --_rp-avatar-font-size: var(--rp-font-size-md);
 }
-.rp-avatar--size-lg[data-v-0561357f] {
+.rp-avatar--size-lg[data-v-416c3281] {
     --_rp-avatar-size: var(--rp-size-control-lg);
     --_rp-avatar-font-size: var(--rp-font-size-lg);
 }
-.rp-avatar--size-xl[data-v-0561357f] {
+.rp-avatar--size-xl[data-v-416c3281] {
     --_rp-avatar-size: var(--rp-size-control-xl);
     --_rp-avatar-font-size: var(--rp-font-size-xl);
 }
-.rp-avatar--radius-none[data-v-0561357f] {
+.rp-avatar--radius-none[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-none);
 }
-.rp-avatar--radius-xs[data-v-0561357f] {
+.rp-avatar--radius-xs[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-xs);
 }
-.rp-avatar--radius-sm[data-v-0561357f] {
+.rp-avatar--radius-sm[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-sm);
 }
-.rp-avatar--radius-md[data-v-0561357f] {
+.rp-avatar--radius-md[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-md);
 }
-.rp-avatar--radius-lg[data-v-0561357f] {
+.rp-avatar--radius-lg[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-lg);
 }
-.rp-avatar--radius-xl[data-v-0561357f] {
+.rp-avatar--radius-xl[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-xl);
 }
-.rp-avatar--radius-full[data-v-0561357f] {
+.rp-avatar--radius-full[data-v-416c3281] {
     --_rp-avatar-radius: var(--rp-radius-full);
 }
-.rp-avatar__image[data-v-0561357f] {
+.rp-avatar__image[data-v-416c3281] {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
-.rp-avatar__fallback[data-v-0561357f] {
+.rp-avatar__fallback[data-v-416c3281] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
 }
-.rp-avatar__fallback[data-v-0561357f] >  svg {
+.rp-avatar__fallback[data-v-416c3281] >  svg {
     display: block;
     width: 50%;
     height: 50%;
 }
-.rp-avatar__initials[data-v-0561357f] {
+.rp-avatar__initials[data-v-416c3281] {
     text-transform: uppercase;
 }
-.rp-avatar__icon[data-v-0561357f] {
+.rp-avatar__icon[data-v-416c3281] {
     width: 50%;
     height: 50%;
 }

package/dist/avatar.js

@@ -1,8 +1,8 @@
 import './avatar.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } 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 { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, markRaw, on, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, watch } from "vue";
 //#region ~icons/lucide/user
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path><circle cx=12 cy=7 r=4>", 3, 1);
@@ -15,12 +15,13 @@ var user_default = markRaw(defineVaporComponent({
 }));
 //#endregion
 //#region src/components/avatar/useAvatarColor.ts
-function getAvatarColorStyle(color, variant, autoContrast) {
+function getAvatarColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant: variant ?? "solid",
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -31,10 +32,10 @@ function getAvatarColorStyle(color, variant, autoContrast) {
 }
 //#endregion
 //#region src/components/avatar/avatar.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<img data-v-0561357f>");
-var t1 = template("<span data-v-0561357f class=rp-avatar__initials> ");
-var t2 = template("<span data-v-0561357f>");
-var t3 = template("<span data-v-0561357f>", 1);
+var t0 = template("<img data-v-416c3281>");
+var t1 = template("<span data-v-416c3281 class=rp-avatar__initials> ");
+var t2 = template("<span data-v-416c3281>");
+var t3 = template("<span data-v-416c3281>", 1);
 //#endregion
 //#region src/components/avatar/avatar.vue
 var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -48,7 +49,11 @@ var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		name: {},
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		classNames: {},
@@ -76,7 +81,7 @@ var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
-		const rootStyle = computed(() => getAvatarColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getAvatarColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			style: rootStyle.value,
@@ -137,7 +142,7 @@ var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		}, 261);
 		return n13;
 	}
-}), [["__scopeId", "data-v-0561357f"]]);
+}), [["__scopeId", "data-v-416c3281"]]);
 //#endregion
 //#region src/components/avatar/types.ts
 var avatarParts = [

package/dist/badge.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-badge[data-v-0b9a55a5] {
+.rp-badge[data-v-1bf7c45c] {
     --_rp-badge-height: 20px;
     --_rp-badge-padding-x: 10px;
     --_rp-badge-font-size: 11px;
@@ -28,65 +28,65 @@
     border-radius: var(--_rp-badge-radius);
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-badge--size-xs[data-v-0b9a55a5] {
+.rp-badge--size-xs[data-v-1bf7c45c] {
     --_rp-badge-height: 16px;
     --_rp-badge-padding-x: 6px;
     --_rp-badge-font-size: 9px;
 }
-.rp-badge--size-sm[data-v-0b9a55a5] {
+.rp-badge--size-sm[data-v-1bf7c45c] {
     --_rp-badge-height: 18px;
     --_rp-badge-padding-x: 8px;
     --_rp-badge-font-size: 10px;
 }
-.rp-badge--size-md[data-v-0b9a55a5] {
+.rp-badge--size-md[data-v-1bf7c45c] {
     --_rp-badge-height: 20px;
     --_rp-badge-padding-x: 10px;
     --_rp-badge-font-size: 11px;
 }
-.rp-badge--size-lg[data-v-0b9a55a5] {
+.rp-badge--size-lg[data-v-1bf7c45c] {
     --_rp-badge-height: 26px;
     --_rp-badge-padding-x: 12px;
     --_rp-badge-font-size: 13px;
 }
-.rp-badge--size-xl[data-v-0b9a55a5] {
+.rp-badge--size-xl[data-v-1bf7c45c] {
     --_rp-badge-height: 32px;
     --_rp-badge-padding-x: 16px;
     --_rp-badge-font-size: 16px;
 }
-.rp-badge--radius-none[data-v-0b9a55a5] {
+.rp-badge--radius-none[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-none);
 }
-.rp-badge--radius-xs[data-v-0b9a55a5] {
+.rp-badge--radius-xs[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-xs);
 }
-.rp-badge--radius-sm[data-v-0b9a55a5] {
+.rp-badge--radius-sm[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-sm);
 }
-.rp-badge--radius-md[data-v-0b9a55a5] {
+.rp-badge--radius-md[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-md);
 }
-.rp-badge--radius-lg[data-v-0b9a55a5] {
+.rp-badge--radius-lg[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-lg);
 }
-.rp-badge--radius-xl[data-v-0b9a55a5] {
+.rp-badge--radius-xl[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-xl);
 }
-.rp-badge--radius-full[data-v-0b9a55a5] {
+.rp-badge--radius-full[data-v-1bf7c45c] {
     --_rp-badge-radius: var(--rp-radius-full);
 }
-.rp-badge__left[data-v-0b9a55a5], .rp-badge__right[data-v-0b9a55a5] {
+.rp-badge__left[data-v-1bf7c45c], .rp-badge__right[data-v-1bf7c45c] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     line-height: 0;
 }
-.rp-badge__left[data-v-0b9a55a5] >  svg, .rp-badge__right[data-v-0b9a55a5] >  svg {
+.rp-badge__left[data-v-1bf7c45c] >  svg, .rp-badge__right[data-v-1bf7c45c] >  svg {
     display: block;
     width: 1em;
     height: 1em;
 }
-.rp-badge__label[data-v-0b9a55a5] {
+.rp-badge__label[data-v-1bf7c45c] {
     display: inline-block;
     min-width: 0;
     overflow: hidden;

package/dist/badge.js

@@ -1,16 +1,17 @@
 import './badge.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } 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 { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/badge/useBadgeColor.ts
-function getBadgeColorStyle(color, variant, autoContrast) {
+function getBadgeColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant: variant ?? "solid",
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -21,8 +22,8 @@ function getBadgeColorStyle(color, variant, autoContrast) {
 }
 //#endregion
 //#region src/components/badge/badge.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-0b9a55a5>");
-var t1 = template("<span data-v-0b9a55a5>", 1);
+var t0 = template("<span data-v-1bf7c45c>");
+var t1 = template("<span data-v-1bf7c45c>", 1);
 //#endregion
 //#region src/components/badge/badge.vue
 var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -32,7 +33,11 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	props: {
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		ariaLabel: {},
@@ -46,7 +51,7 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
-		const rootStyle = computed(() => getBadgeColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getBadgeColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -81,7 +86,7 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n12;
 	}
-}), [["__scopeId", "data-v-0b9a55a5"]]);
+}), [["__scopeId", "data-v-1bf7c45c"]]);
 //#endregion
 //#region src/components/badge/types.ts
 var badgeParts = [