ropav 0.1.5 → 0.1.7

package/dist/alert.js

@@ -1,11 +1,12 @@
 import './alert.css';
-import { t as x_default } from "./x.js";
+import { t as useControllableValue } from "./useControllableValue.js";
+import { t as useStylesApi } from "./styles-api.js";
 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 _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
+import { t as x_default } from "./x.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
+//#region src/components/alert/alertColor.ts
 function getAlertColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const resolvedVariant = variant ?? "subtle";
@@ -27,13 +28,12 @@ function getAlertColorStyle(color, variant, autoContrast, contrastColor) {
 }
 //#endregion
 //#region src/components/alert/alert.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-433c81a2>");
+var t0 = template("<div data-v-09abef83>");
 var t1 = template(" ");
-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");
+var t2 = template("<p data-v-09abef83> ");
+var t3 = template("<div data-v-09abef83 class=rp-alert__content>");
+var t4 = template("<button data-v-09abef83>");
+var t5 = template("<div data-v-09abef83>", 1);
 //#endregion
 //#region src/components/alert/alert.vue
 var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -69,11 +69,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));
@@ -91,11 +92,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);
@@ -158,13 +158,13 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				}]));
 				setInsertionState(n29, null, 0);
 				createComponent(unref(x_default), { "aria-hidden": "true" });
-				n29.$evtclick = createInvoker(closeAlert);
+				on(n29, "click", closeAlert);
 				return n29;
 			});
 			return n30;
 		});
 	}
-}), [["__scopeId", "data-v-433c81a2"]]);
+}), [["__scopeId", "data-v-09abef83"]]);
 //#endregion
 //#region src/components/alert/types.ts
 var alertParts = [

package/dist/aria.js

@@ -0,0 +1,14 @@
+import { n as hasAttributeToken, r as parseAttributeTokens } from "./attributes2.js";
+//#region src/utils/aria.ts
+function parseAriaIdRefs(value) {
+	return parseAttributeTokens(value);
+}
+function hasAriaIdRef(value, id) {
+	return hasAttributeToken(value, id);
+}
+function mergeAriaIdRefs(...values) {
+	const ids = values.flatMap(parseAriaIdRefs);
+	return ids.length > 0 ? Array.from(new Set(ids)).join(" ") : void 0;
+}
+//#endregion
+export { mergeAriaIdRefs as n, parseAriaIdRefs as r, hasAriaIdRef as t };

package/dist/aspect-ratio.js

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

package/dist/attributes.js

@@ -0,0 +1,9 @@
+//#region src/utils/attributes.ts
+function toPresenceAttribute(value) {
+	return value ? "" : void 0;
+}
+function toOptionalAttribute(value) {
+	return value || void 0;
+}
+//#endregion
+export { toPresenceAttribute as n, toOptionalAttribute as t };

package/dist/attributes2.js

@@ -0,0 +1,29 @@
+//#region src/utils/dom/attributes.ts
+function splitCompatibilityAttributes(attributes) {
+	const { class: compatibilityClass, style: compatibilityStyle, ...forwardedAttributes } = attributes;
+	return {
+		compatibilityClass,
+		compatibilityStyle,
+		forwardedAttributes
+	};
+}
+function composeEventHandlers(...handlers) {
+	return (event) => {
+		for (const handler of handlers) handler?.(event);
+	};
+}
+function parseAttributeTokens(value) {
+	return value?.split(/\s+/).filter(Boolean) ?? [];
+}
+function hasAttributeToken(value, token) {
+	return parseAttributeTokens(value).includes(token);
+}
+function snapshotAttributes(element, attributes) {
+	return new Map(attributes.map((attribute) => [attribute, element.getAttribute(attribute)]));
+}
+function restoreAttributes(element, snapshot) {
+	for (const [attribute, value] of snapshot) if (value == null) element.removeAttribute(attribute);
+	else element.setAttribute(attribute, value);
+}
+//#endregion
+export { snapshotAttributes as a, restoreAttributes as i, hasAttributeToken as n, splitCompatibilityAttributes as o, parseAttributeTokens as r, composeEventHandlers as t };

package/dist/avatar.css

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

package/dist/avatar.js

@@ -1,8 +1,9 @@
 import './avatar.css';
+import { t as useStylesApi } from "./styles-api.js";
 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 _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as getNameInitials } from "./text.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);
@@ -14,7 +15,7 @@ var user_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
-//#region src/components/avatar/useAvatarColor.ts
+//#region src/components/avatar/avatarColor.ts
 function getAvatarColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({
@@ -32,10 +33,10 @@ function getAvatarColorStyle(color, variant, autoContrast, contrastColor) {
 }
 //#endregion
 //#region src/components/avatar/avatar.vue?vue&type=script&setup=true&vapor=true&lang.ts
-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);
+var t0 = template("<img data-v-36d66f33>");
+var t1 = template("<span data-v-36d66f33 class=rp-avatar__initials> ");
+var t2 = template("<span data-v-36d66f33>");
+var t3 = template("<span data-v-36d66f33>", 1);
 //#endregion
 //#region src/components/avatar/avatar.vue
 var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -75,7 +76,7 @@ var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const rootRole = computed(() => !showsImage.value && accessibleName.value ? "img" : void 0);
 		const rootAriaLabel = computed(() => rootRole.value ? accessibleName.value : void 0);
 		const fallbackAriaHidden = computed(() => isHidden.value || rootAriaLabel.value ? true : void 0);
-		const initials = computed(() => getInitials(props.name));
+		const initials = computed(() => getNameInitials(props.name));
 		const rootClass = computed(() => bem("rp-avatar", {
 			[props.variant ?? ""]: Boolean(props.variant),
 			[`size-${props.size}`]: Boolean(props.size),
@@ -98,15 +99,6 @@ var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			imageFailed.value = true;
 			emit("error", event);
 		}
-		function getInitials(name) {
-			if (!name) return "";
-			const parts = name.trim().split(/\s+/).filter(Boolean);
-			const firstPart = parts[0];
-			if (!firstPart) return "";
-			if (parts.length === 1) return Array.from(firstPart).slice(0, 2).join("").toLocaleUpperCase();
-			const lastPart = parts.at(-1) ?? firstPart;
-			return `${Array.from(firstPart)[0] ?? ""}${Array.from(lastPart)[0] ?? ""}`.toLocaleUpperCase();
-		}
 		const n13 = t3();
 		renderEffect(() => setDynamicProps(n13, [rootAttrs.value]));
 		setInsertionState(n13, null, 0);
@@ -142,7 +134,7 @@ var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		}, 261);
 		return n13;
 	}
-}), [["__scopeId", "data-v-416c3281"]]);
+}), [["__scopeId", "data-v-36d66f33"]]);
 //#endregion
 //#region src/components/avatar/types.ts
 var avatarParts = [

package/dist/badge.css

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

package/dist/badge.js

@@ -1,10 +1,10 @@
 import './badge.css';
+import { t as useStylesApi } from "./styles-api.js";
 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 _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
+//#region src/components/badge/badgeColor.ts
 function getBadgeColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({
@@ -22,8 +22,8 @@ function getBadgeColorStyle(color, variant, autoContrast, contrastColor) {
 }
 //#endregion
 //#region src/components/badge/badge.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-1bf7c45c>");
-var t1 = template("<span data-v-1bf7c45c>", 1);
+var t0 = template("<span data-v-5da092ee>");
+var t1 = template("<span data-v-5da092ee>", 1);
 //#endregion
 //#region src/components/badge/badge.vue
 var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -86,7 +86,7 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n12;
 	}
-}), [["__scopeId", "data-v-1bf7c45c"]]);
+}), [["__scopeId", "data-v-5da092ee"]]);
 //#endregion
 //#region src/components/badge/types.ts
 var badgeParts = [

package/dist/base.css

@@ -463,7 +463,7 @@
     --rp-color-red-contrast: var(--rp-color-white);
     --rp-color-red-light: var(--rp-color-red-1);
     --rp-color-red-light-hover: var(--rp-color-red-2);
-    --rp-color-red-light-color: var(--rp-color-red-9);
+    --rp-color-red-light-color: color-mix(in srgb, var(--rp-color-red-9) 89%, var(--rp-color-black));
     --rp-color-red-outline: var(--rp-color-red-6);
     --rp-color-red-outline-hover: color-mix(in srgb, var(--rp-color-red-6) 5%, transparent);
     --rp-color-pink-filled: var(--rp-color-pink-7);
@@ -487,7 +487,7 @@
     --rp-color-violet-contrast: var(--rp-color-white);
     --rp-color-violet-light: var(--rp-color-violet-1);
     --rp-color-violet-light-hover: var(--rp-color-violet-2);
-    --rp-color-violet-light-color: var(--rp-color-violet-9);
+    --rp-color-violet-light-color: color-mix(in srgb, var(--rp-color-violet-9) 96%, var(--rp-color-black));
     --rp-color-violet-outline: var(--rp-color-violet-6);
     --rp-color-violet-outline-hover: color-mix(in srgb, var(--rp-color-violet-6) 5%, transparent);
     --rp-color-indigo-filled: var(--rp-color-indigo-7);
@@ -495,7 +495,7 @@
     --rp-color-indigo-contrast: var(--rp-color-white);
     --rp-color-indigo-light: var(--rp-color-indigo-1);
     --rp-color-indigo-light-hover: var(--rp-color-indigo-2);
-    --rp-color-indigo-light-color: var(--rp-color-indigo-9);
+    --rp-color-indigo-light-color: color-mix(in srgb, var(--rp-color-indigo-9) 93%, var(--rp-color-black));
     --rp-color-indigo-outline: var(--rp-color-indigo-6);
     --rp-color-indigo-outline-hover: color-mix(in srgb, var(--rp-color-indigo-6) 5%, transparent);
     --rp-color-blue-filled: var(--rp-color-blue-8);
@@ -503,7 +503,7 @@
     --rp-color-blue-contrast: var(--rp-color-white);
     --rp-color-blue-light: var(--rp-color-blue-1);
     --rp-color-blue-light-hover: var(--rp-color-blue-2);
-    --rp-color-blue-light-color: var(--rp-color-blue-9);
+    --rp-color-blue-light-color: color-mix(in srgb, var(--rp-color-blue-9) 92%, var(--rp-color-black));
     --rp-color-blue-outline: var(--rp-color-blue-6);
     --rp-color-blue-outline-hover: color-mix(in srgb, var(--rp-color-blue-6) 5%, transparent);
     --rp-color-cyan-filled: var(--rp-color-cyan-9);
@@ -511,7 +511,7 @@
     --rp-color-cyan-contrast: var(--rp-color-white);
     --rp-color-cyan-light: var(--rp-color-cyan-1);
     --rp-color-cyan-light-hover: var(--rp-color-cyan-2);
-    --rp-color-cyan-light-color: var(--rp-color-cyan-9);
+    --rp-color-cyan-light-color: color-mix(in srgb, var(--rp-color-cyan-9) 93%, var(--rp-color-black));
     --rp-color-cyan-outline: var(--rp-color-cyan-6);
     --rp-color-cyan-outline-hover: color-mix(in srgb, var(--rp-color-cyan-6) 5%, transparent);
     --rp-color-teal-filled: var(--rp-color-teal-9);
@@ -519,7 +519,7 @@
     --rp-color-teal-contrast: var(--rp-color-white);
     --rp-color-teal-light: var(--rp-color-teal-1);
     --rp-color-teal-light-hover: var(--rp-color-teal-2);
-    --rp-color-teal-light-color: var(--rp-color-teal-9);
+    --rp-color-teal-light-color: color-mix(in srgb, var(--rp-color-teal-9) 89%, var(--rp-color-black));
     --rp-color-teal-outline: var(--rp-color-teal-6);
     --rp-color-teal-outline-hover: color-mix(in srgb, var(--rp-color-teal-6) 5%, transparent);
     --rp-color-green-filled: color-mix(in srgb, var(--rp-color-green-9) 98%, var(--rp-color-black));
@@ -527,7 +527,7 @@
     --rp-color-green-contrast: var(--rp-color-white);
     --rp-color-green-light: var(--rp-color-green-1);
     --rp-color-green-light-hover: var(--rp-color-green-2);
-    --rp-color-green-light-color: var(--rp-color-green-9);
+    --rp-color-green-light-color: color-mix(in srgb, var(--rp-color-green-9) 84%, var(--rp-color-black));
     --rp-color-green-outline: var(--rp-color-green-6);
     --rp-color-green-outline-hover: color-mix(in srgb, var(--rp-color-green-6) 5%, transparent);
     --rp-color-lime-filled: var(--rp-color-lime-6);
@@ -535,7 +535,7 @@
     --rp-color-lime-contrast: var(--rp-color-lime-6-contrast);
     --rp-color-lime-light: var(--rp-color-lime-1);
     --rp-color-lime-light-hover: var(--rp-color-lime-2);
-    --rp-color-lime-light-color: var(--rp-color-lime-9);
+    --rp-color-lime-light-color: color-mix(in srgb, var(--rp-color-lime-9) 79%, var(--rp-color-black));
     --rp-color-lime-outline: var(--rp-color-lime-6);
     --rp-color-lime-outline-hover: color-mix(in srgb, var(--rp-color-lime-6) 5%, transparent);
     --rp-color-yellow-filled: var(--rp-color-yellow-6);
@@ -543,7 +543,7 @@
     --rp-color-yellow-contrast: var(--rp-color-yellow-6-contrast);
     --rp-color-yellow-light: var(--rp-color-yellow-1);
     --rp-color-yellow-light-hover: var(--rp-color-yellow-2);
-    --rp-color-yellow-light-color: var(--rp-color-yellow-9);
+    --rp-color-yellow-light-color: color-mix(in srgb, var(--rp-color-yellow-9) 72%, var(--rp-color-black));
     --rp-color-yellow-outline: var(--rp-color-yellow-6);
     --rp-color-yellow-outline-hover: color-mix(in srgb, var(--rp-color-yellow-6) 5%, transparent);
     --rp-color-orange-filled: color-mix(in srgb, var(--rp-color-orange-9) 97%, var(--rp-color-black));
@@ -551,14 +551,14 @@
     --rp-color-orange-contrast: var(--rp-color-white);
     --rp-color-orange-light: var(--rp-color-orange-1);
     --rp-color-orange-light-hover: var(--rp-color-orange-2);
-    --rp-color-orange-light-color: var(--rp-color-orange-9);
+    --rp-color-orange-light-color: color-mix(in srgb, var(--rp-color-orange-9) 81%, var(--rp-color-black));
     --rp-color-orange-outline: var(--rp-color-orange-6);
     --rp-color-orange-outline-hover: color-mix(in srgb, var(--rp-color-orange-6) 5%, transparent);
     --rp-color-scheme: light;
     --rp-color-bright: var(--rp-color-black);
     --rp-color-text: var(--rp-color-black);
     --rp-color-body: var(--rp-color-white);
-    --rp-color-placeholder: var(--rp-color-gray-5);
+    --rp-color-placeholder: var(--rp-color-gray-7);
     --rp-color-default: var(--rp-color-white);
     --rp-color-default-hover: var(--rp-color-gray-1);
     --rp-color-default-color: var(--rp-color-black);
@@ -637,7 +637,7 @@
     --rp-size-control-md: 42px;
     --rp-size-control-lg: 50px;
     --rp-size-control-xl: 60px;
-    --rp-opacity-disabled: 0.5;
+    --rp-opacity-disabled: 0.65;
     --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
     --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
@@ -764,7 +764,7 @@
     --rp-color-bright: var(--rp-color-white);
     --rp-color-text: var(--rp-color-dark-0);
     --rp-color-body: var(--rp-color-dark-7);
-    --rp-color-placeholder: var(--rp-color-dark-3);
+    --rp-color-placeholder: var(--rp-color-dark-1);
     --rp-color-default: var(--rp-color-dark-6);
     --rp-color-default-hover: var(--rp-color-dark-5);
     --rp-color-default-color: var(--rp-color-white);
@@ -802,6 +802,11 @@
     transform-origin: center;
     animation: rp-spinner-spin 700ms linear infinite;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .rp-spinner {
+      animation: none;
+    }
+  }
   .rp-spinner > svg {
     display: block;
     width: 100%;

package/dist/button-group.js

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

package/dist/button-link.js

@@ -1,15 +1,14 @@
-import './button-link.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 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 { 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-dd8ef63e>");
-var t1 = template("<a data-v-dd8ef63e><span data-v-dd8ef63e class=rp-button__content><span data-v-dd8ef63e></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",
@@ -73,8 +72,8 @@ var button_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			"aria-disabled": isUnavailable.value || void 0,
 			"aria-busy": props.loading || void 0,
 			tabindex: isUnavailable.value ? -1 : void 0,
-			"data-disabled": presence(isUnavailable.value),
-			"data-loading": presence(props.loading),
+			"data-disabled": toPresenceAttribute(isUnavailable.value),
+			"data-loading": toPresenceAttribute(props.loading),
 			onClickCapture: onDisabledClick
 		}));
 		function onDisabledClick(event) {
@@ -93,7 +92,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);
@@ -101,23 +100,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-dd8ef63e"]]);
+});
 //#endregion
 //#region src/components/button-link/types.ts
 var buttonLinkParts = [