ropav 0.1.6 → 0.1.7

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 { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { 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 { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { 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/button-group.js

@@ -1,5 +1,5 @@
 import './button-group.css';
-import { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template } from "vue";

package/dist/button-link.js

@@ -1,4 +1,5 @@
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+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 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";
@@ -71,8 +72,8 @@ var button_link_default = /* @__PURE__ */ defineVaporComponent({
 			"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) {

package/dist/button.js

@@ -1,4 +1,5 @@
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+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 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";
@@ -49,8 +50,8 @@ var button_default = /* @__PURE__ */ defineVaporComponent({
 			disabled: props.disabled || props.loading || void 0,
 			type: props.type,
 			"aria-busy": props.loading || void 0,
-			"data-disabled": presence(props.disabled || props.loading),
-			"data-loading": presence(props.loading)
+			"data-disabled": toPresenceAttribute(props.disabled || props.loading),
+			"data-loading": toPresenceAttribute(props.loading)
 		}));
 		const n17 = t1();
 		const n16 = child(n17, 1);

package/dist/button.scss_vue_type_style_index_0_src_true_lang.js

@@ -11,7 +11,7 @@ var loader_circle_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
-//#region src/components/button/useButtonColor.ts
+//#region src/components/button/buttonColor.ts
 function getButtonColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({

package/dist/card.js

@@ -1,5 +1,5 @@
 import './card.css';
-import { n as useStylesApi } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";

package/dist/checkbox.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-checkbox[data-v-871a9e21] {
+.rp-checkbox[data-v-0b6b0a88] {
     --_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-871a9e21] {
+.rp-checkbox--disabled[data-v-0b6b0a88] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-checkbox[data-v-871a9e21] {
+.rp-checkbox[data-v-0b6b0a88] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-checkbox-font-size);
 }
-.rp-checkbox__native[data-v-871a9e21] {
+.rp-checkbox__native[data-v-0b6b0a88] {
     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-871a9e21] {
+.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-0b6b0a88] {
     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-871a9e21] {
+.rp-checkbox__box[data-v-0b6b0a88] {
     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-871a9e21], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-871a9e21] {
+.rp-checkbox--checked .rp-checkbox__box[data-v-0b6b0a88], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-0b6b0a88] {
     background-color: var(--_rp-checkbox-checked-bg);
     border-color: var(--_rp-checkbox-checked-border);
 }
-.rp-checkbox--invalid .rp-checkbox__box[data-v-871a9e21] {
+.rp-checkbox--invalid .rp-checkbox__box[data-v-0b6b0a88] {
     border-color: var(--_rp-checkbox-invalid-border);
 }
-.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-871a9e21] {
+.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-0b6b0a88] {
     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-871a9e21] {
+.rp-checkbox__icon[data-v-0b6b0a88] {
     width: 60%;
     height: 60%;
     color: var(--_rp-checkbox-checked-icon);
     transform-origin: center;
 }
-.rp-checkbox__icon[data-v-871a9e21] [stroke-width] {
+.rp-checkbox__icon[data-v-0b6b0a88] [stroke-width] {
     stroke-width: 3;
 }
-.rp-checkbox__label[data-v-871a9e21] {
+.rp-checkbox__label[data-v-0b6b0a88] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-checkbox--outline[data-v-871a9e21] {
+.rp-checkbox--outline[data-v-0b6b0a88] {
     --_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-871a9e21] {
+.rp-checkbox--size-xs[data-v-0b6b0a88] {
     --_rp-checkbox-size: 16px;
     --_rp-checkbox-font-size: var(--rp-font-size-xs);
 }
-.rp-checkbox--size-sm[data-v-871a9e21] {
+.rp-checkbox--size-sm[data-v-0b6b0a88] {
     --_rp-checkbox-size: 20px;
     --_rp-checkbox-font-size: var(--rp-font-size-sm);
 }
-.rp-checkbox--size-md[data-v-871a9e21] {
+.rp-checkbox--size-md[data-v-0b6b0a88] {
     --_rp-checkbox-size: 24px;
     --_rp-checkbox-font-size: var(--rp-font-size-md);
 }
-.rp-checkbox--size-lg[data-v-871a9e21] {
+.rp-checkbox--size-lg[data-v-0b6b0a88] {
     --_rp-checkbox-size: 30px;
     --_rp-checkbox-font-size: var(--rp-font-size-lg);
 }
-.rp-checkbox--size-xl[data-v-871a9e21] {
+.rp-checkbox--size-xl[data-v-0b6b0a88] {
     --_rp-checkbox-size: 36px;
     --_rp-checkbox-font-size: var(--rp-font-size-xl);
 }
-.rp-checkbox--radius-xs[data-v-871a9e21] {
+.rp-checkbox--radius-xs[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 2px;
 }
-.rp-checkbox--radius-sm[data-v-871a9e21] {
+.rp-checkbox--radius-sm[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 4px;
 }
-.rp-checkbox--radius-md[data-v-871a9e21] {
+.rp-checkbox--radius-md[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 6px;
 }
-.rp-checkbox--radius-lg[data-v-871a9e21] {
+.rp-checkbox--radius-lg[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 8px;
 }
-.rp-checkbox--radius-xl[data-v-871a9e21] {
+.rp-checkbox--radius-xl[data-v-0b6b0a88] {
     --_rp-checkbox-radius: var(--rp-radius-full);
 }
-.rp-checkbox-icon-enter-active[data-v-871a9e21],
-  .rp-checkbox-icon-leave-active[data-v-871a9e21] {
+.rp-checkbox-icon-enter-active[data-v-0b6b0a88],
+  .rp-checkbox-icon-leave-active[data-v-0b6b0a88] {
     transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
 }
-.rp-checkbox-icon-enter-from[data-v-871a9e21],
-  .rp-checkbox-icon-leave-to[data-v-871a9e21] {
+.rp-checkbox-icon-enter-from[data-v-0b6b0a88],
+  .rp-checkbox-icon-leave-to[data-v-0b6b0a88] {
     opacity: 0;
     transform: translateY(3px) scale(0.85);
 }
-.rp-checkbox-icon-enter-to[data-v-871a9e21],
-  .rp-checkbox-icon-leave-from[data-v-871a9e21] {
+.rp-checkbox-icon-enter-to[data-v-0b6b0a88],
+  .rp-checkbox-icon-leave-from[data-v-0b6b0a88] {
     opacity: 1;
     transform: translateY(0) scale(1);
 }
-.rp-checkbox-icon-leave-to[data-v-871a9e21] {
+.rp-checkbox-icon-leave-to[data-v-0b6b0a88] {
     transform: translateY(-3px) scale(0.85);
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-checkbox-icon-enter-active[data-v-871a9e21],
-    .rp-checkbox-icon-leave-active[data-v-871a9e21] {
+.rp-checkbox-icon-enter-active[data-v-0b6b0a88],
+    .rp-checkbox-icon-leave-active[data-v-0b6b0a88] {
       transition: none;
 }
 }

package/dist/checkbox.js

@@ -1,27 +1,17 @@
 import './checkbox.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { i as getComponentContrastColor, r as getComponentColorValue } from "./componentColors.js";
+import { n as getComponentCheckedColorStyle } from "./componentColors.js";
 import { t as check_default } from "./check.js";
 import { t as minus_default } from "./minus.js";
 import { r as useCheckedFormControl } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.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, contrastColor) {
-	const colorValue = getComponentColorValue(color);
-	if (color && !colorValue) return void 0;
-	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
-	const style = {};
-	if (colorValue) style["--_rp-checkbox-color"] = colorValue;
-	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) {
 	const inputRef = ref(null);
 	const control = useControlState(props);
@@ -34,7 +24,13 @@ 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, props.contrastColor));
+	const rootStyle = computed(() => getComponentCheckedColorStyle({
+		color: props.color,
+		autoContrast: props.autoContrast,
+		contrastColor: props.contrastColor,
+		colorProperty: "--_rp-checkbox-color",
+		checkedColorProperty: "--_rp-checkbox-on-color"
+	}));
 	function onChange(e) {
 		emitUpdate(e.target.checked);
 	}
@@ -52,8 +48,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-871a9e21>");
-var t1 = template("<label data-v-871a9e21><input data-v-871a9e21><span data-v-871a9e21></span>", 1);
+var t0 = template("<span data-v-0b6b0a88>");
+var t1 = template("<label data-v-0b6b0a88><input data-v-0b6b0a88><span data-v-0b6b0a88></span>", 1);
 //#endregion
 //#region src/components/checkbox/checkbox.vue
 var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -122,23 +118,21 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			style: rootStyle.value,
-			"data-disabled": presence(control.disabled),
-			"data-invalid": presence(control.invalid),
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
 			"data-state": state.value
 		}));
 		const nativeInputAttrs = computed(() => {
-			const { class: compatibilityClass, style: compatibilityStyle, onChange: compatibilityOnChange, ...attrs } = props.inputAttrs ?? {};
+			const inputAttrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(inputAttrs);
 			return {
-				...attrs,
+				...forwardedAttributes,
 				...getPartAttrs("input", {
 					class: "rp-checkbox__native",
 					compatibilityClass,
 					compatibilityStyle
 				}),
-				onChange(event) {
-					onChange(event);
-					compatibilityOnChange?.(event);
-				}
+				onChange: composeEventHandlers(onChange, inputAttrs.onChange)
 			};
 		});
 		__expose({
@@ -173,8 +167,8 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"aria-describedby": _control.ariaDescribedby,
 				"aria-invalid": _control.invalid || void 0,
 				"aria-required": _control_required || void 0,
-				"data-disabled": unref(presence)(_control.disabled),
-				"data-invalid": unref(presence)(_control.invalid),
+				"data-disabled": unref(toPresenceAttribute)(_control.disabled),
+				"data-invalid": unref(toPresenceAttribute)(_control.invalid),
 				"data-state": state.value
 			}]);
 			setDynamicProps(n8, [unref(getPartAttrs)("indicator", { class: "rp-checkbox__box" })]);
@@ -204,7 +198,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n13;
 	}
-}), [["__scopeId", "data-v-871a9e21"]]);
+}), [["__scopeId", "data-v-0b6b0a88"]]);
 //#endregion
 //#region src/components/checkbox/types.ts
 var checkboxParts = [