ropav 0.1.3 → 0.1.5

package/README.md

@@ -37,6 +37,22 @@ Import the components you need:
 import { Button } from 'ropav';
 ```
 
+## 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/alert.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-alert[data-v-8e95a4b4] {
+.rp-alert[data-v-433c81a2] {
     --_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-433c81a2] {
     --_rp-alert-radius: var(--rp-radius-none);
 }
-.rp-alert--radius-xs[data-v-8e95a4b4] {
+.rp-alert--radius-xs[data-v-433c81a2] {
     --_rp-alert-radius: var(--rp-radius-xs);
 }
-.rp-alert--radius-sm[data-v-8e95a4b4] {
+.rp-alert--radius-sm[data-v-433c81a2] {
     --_rp-alert-radius: var(--rp-radius-sm);
 }
-.rp-alert--radius-md[data-v-8e95a4b4] {
+.rp-alert--radius-md[data-v-433c81a2] {
     --_rp-alert-radius: var(--rp-radius-md);
 }
-.rp-alert--radius-lg[data-v-8e95a4b4] {
+.rp-alert--radius-lg[data-v-433c81a2] {
     --_rp-alert-radius: var(--rp-radius-lg);
 }
-.rp-alert--radius-xl[data-v-8e95a4b4] {
+.rp-alert--radius-xl[data-v-433c81a2] {
     --_rp-alert-radius: var(--rp-radius-xl);
 }
-.rp-alert__icon[data-v-8e95a4b4] {
+.rp-alert__icon[data-v-433c81a2] {
     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-433c81a2] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-alert__content[data-v-8e95a4b4] {
+.rp-alert__content[data-v-433c81a2] {
     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-433c81a2] {
     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-433c81a2] {
     margin: 0;
 }
-.rp-alert__body[data-v-8e95a4b4], .rp-alert__description[data-v-8e95a4b4] {
+.rp-alert__body[data-v-433c81a2], .rp-alert__description[data-v-433c81a2] {
     min-width: 0;
     color: var(--_rp-alert-fg);
 }
-.rp-alert__action[data-v-8e95a4b4] {
+.rp-alert__action[data-v-433c81a2] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     margin-left: auto;
 }
-.rp-alert__close[data-v-8e95a4b4] {
+.rp-alert__close[data-v-433c81a2] {
     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-433c81a2]: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-433c81a2]: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-433c81a2] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;

package/dist/alert.js

@@ -6,14 +6,15 @@ import { i as getComponentVariantColorRoles, t as componentColors } from "./comp
 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";
 //#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 +27,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-433c81a2>");
 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-433c81a2> ");
+var t3 = template("<div data-v-433c81a2 class=rp-alert__content>");
+var t4 = template("<button data-v-433c81a2>");
+var t5 = template("<div data-v-433c81a2>", 1);
 delegateEvents("click");
 //#endregion
 //#region src/components/alert/alert.vue
@@ -48,7 +49,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: {
@@ -78,7 +83,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,
@@ -159,7 +164,7 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			return n30;
 		});
 	}
-}), [["__scopeId", "data-v-8e95a4b4"]]);
+}), [["__scopeId", "data-v-433c81a2"]]);
 //#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

@@ -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

@@ -5,12 +5,13 @@ import { i as getComponentVariantColorRoles, t as componentColors } from "./comp
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.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 = [