ropav 0.1.5 → 0.1.7

package/dist/button.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-button[data-v-15cdf23b] {
+.rp-button {
     --_rp-button-bg: var(--rp-color-default);
     --_rp-button-bg-hover: var(--rp-color-default-hover);
     --_rp-button-bg-active: var(--rp-color-disabled);
@@ -39,110 +39,110 @@
     font-size: var(--_rp-button-font-size);
     border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-15cdf23b]:hover:not(:disabled):not(.rp-button--disabled) {
+.rp-button:hover:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-hover);
     border-color: var(--_rp-button-border-hover);
     box-shadow: var(--_rp-button-shadow-hover);
     color: var(--_rp-button-fg-hover);
 }
-.rp-button[data-v-15cdf23b]:active:not(:disabled):not(.rp-button--disabled) {
+.rp-button:active:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-active);
     border-color: var(--_rp-button-border-active);
     box-shadow: var(--_rp-button-shadow-active);
     color: var(--_rp-button-fg-active);
     transform: translateY(1px);
 }
-.rp-button--size-xs[data-v-15cdf23b] {
+.rp-button--size-xs {
     --_rp-button-height: var(--rp-size-control-xs);
     --_rp-button-padding-x: 14px;
     --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-15cdf23b] {
+.rp-button--size-sm {
     --_rp-button-height: var(--rp-size-control-sm);
     --_rp-button-padding-x: 18px;
     --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-md[data-v-15cdf23b] {
+.rp-button--size-md {
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
 }
-.rp-button--size-lg[data-v-15cdf23b] {
+.rp-button--size-lg {
     --_rp-button-height: var(--rp-size-control-lg);
     --_rp-button-padding-x: 26px;
     --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-15cdf23b] {
+.rp-button--size-xl {
     --_rp-button-height: var(--rp-size-control-xl);
     --_rp-button-padding-x: 32px;
     --_rp-button-font-size: var(--rp-font-size-xl);
 }
-.rp-button--radius-xs[data-v-15cdf23b] {
+.rp-button--radius-xs {
     --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-15cdf23b] {
+.rp-button--radius-sm {
     --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-15cdf23b] {
+.rp-button--radius-md {
     --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-15cdf23b] {
+.rp-button--radius-lg {
     --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-15cdf23b] {
+.rp-button--radius-xl {
     --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--subtle[data-v-15cdf23b] {
+.rp-button--subtle {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-15cdf23b] {
+.rp-button--surface {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-15cdf23b] {
+.rp-button--outline {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-15cdf23b] {
+.rp-button--ghost {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-15cdf23b] {
+.rp-button--plain {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-15cdf23b]:disabled, .rp-button--disabled[data-v-15cdf23b] {
+.rp-button:disabled, .rp-button--disabled {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }
-.rp-button[data-v-15cdf23b]:focus-visible {
+.rp-button:focus-visible {
     outline: none;
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-button--loading .rp-button__content[data-v-15cdf23b] {
+.rp-button--loading .rp-button__content {
     opacity: 0;
 }
-.rp-button__content[data-v-15cdf23b] {
+.rp-button__content {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--rp-spacing-2);
 }
-.rp-button__left[data-v-15cdf23b], .rp-button__right[data-v-15cdf23b] {
+.rp-button__left, .rp-button__right {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
 }
-.rp-button__loading[data-v-15cdf23b] {
+.rp-button__loading {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -151,15 +151,20 @@
     left: 50%;
     translate: -50% -50%;
 }
-.rp-button__spinner[data-v-15cdf23b] {
+.rp-button__spinner {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-15cdf23b 700ms linear infinite;
+    animation: rp-spinner-spin 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-15cdf23b {
+@media (prefers-reduced-motion: reduce) {
+.rp-button__spinner {
+      animation: none;
+}
+}
+@keyframes rp-spinner-spin {
 to {
       transform: rotate(360deg);
 }

package/dist/button.js

@@ -1,15 +1,14 @@
-import './button.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/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-15cdf23b>");
-var t1 = template("<button data-v-15cdf23b><span data-v-15cdf23b class=rp-button__content><span data-v-15cdf23b></span>", 1);
+var t0 = template("<span>");
+var t1 = template("<button><span class=rp-button__content><span></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
-var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+var button_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpButton",
 	inheritAttrs: false,
 	__name: "button",
@@ -51,8 +50,8 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			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);
@@ -65,7 +64,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			setInsertionState(n5, null, 0);
 			createSlot("loading", null, () => {
 				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
-			}, 1);
+			});
 			return n5;
 		});
 		setInsertionState(n16, 0);
@@ -73,23 +72,23 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			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-15cdf23b"]]);
+});
 //#endregion
 //#region src/components/button/types.ts
 var buttonParts = [

package/dist/{useButtonColor.js → button.scss_vue_type_style_index_0_src_true_lang.js}

@@ -1,4 +1,5 @@
-import { i as getComponentVariantColorRoles } from "./componentColors.js";
+import './button.css';
+import { a as getComponentVariantColorRoles } from "./componentColors.js";
 import { defineVaporComponent, markRaw, template } from "vue";
 //#region ~icons/lucide/loader-circle
 var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M21 12a9 9 0 1 1-6.219-8.56\">", 3, 1);
@@ -10,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,6 +1,6 @@
 import './card.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, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
 //#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts

package/dist/checkbox.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-checkbox[data-v-f0f09b8a] {
+.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-f0f09b8a] {
+.rp-checkbox--disabled[data-v-0b6b0a88] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-checkbox[data-v-f0f09b8a] {
+.rp-checkbox[data-v-0b6b0a88] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-checkbox-font-size);
 }
-.rp-checkbox__native[data-v-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.rp-checkbox__icon[data-v-0b6b0a88] {
     width: 60%;
     height: 60%;
     color: var(--_rp-checkbox-checked-icon);
     transform-origin: center;
 }
-.rp-checkbox__icon[data-v-f0f09b8a] [stroke-width] {
+.rp-checkbox__icon[data-v-0b6b0a88] [stroke-width] {
     stroke-width: 3;
 }
-.rp-checkbox__label[data-v-f0f09b8a] {
+.rp-checkbox__label[data-v-0b6b0a88] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-checkbox--outline[data-v-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a] {
+.rp-checkbox--radius-xs[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 2px;
 }
-.rp-checkbox--radius-sm[data-v-f0f09b8a] {
+.rp-checkbox--radius-sm[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 4px;
 }
-.rp-checkbox--radius-md[data-v-f0f09b8a] {
+.rp-checkbox--radius-md[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 6px;
 }
-.rp-checkbox--radius-lg[data-v-f0f09b8a] {
+.rp-checkbox--radius-lg[data-v-0b6b0a88] {
     --_rp-checkbox-radius: 8px;
 }
-.rp-checkbox--radius-xl[data-v-f0f09b8a] {
+.rp-checkbox--radius-xl[data-v-0b6b0a88] {
     --_rp-checkbox-radius: var(--rp-radius-full);
 }
-.rp-checkbox-icon-enter-active[data-v-f0f09b8a],
-  .rp-checkbox-icon-leave-active[data-v-f0f09b8a] {
+.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-f0f09b8a],
-  .rp-checkbox-icon-leave-to[data-v-f0f09b8a] {
+.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-f0f09b8a],
-  .rp-checkbox-icon-leave-from[data-v-f0f09b8a] {
+.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-f0f09b8a] {
+.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-f0f09b8a],
-    .rp-checkbox-icon-leave-active[data-v-f0f09b8a] {
+.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 { 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 { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.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 { t as useControllableValue } from "./useControllableValue.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-f0f09b8a>");
-var t1 = template("<label data-v-f0f09b8a><input data-v-f0f09b8a><span data-v-f0f09b8a></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-f0f09b8a"]]);
+}), [["__scopeId", "data-v-0b6b0a88"]]);
 //#endregion
 //#region src/components/checkbox/types.ts
 var checkboxParts = [

package/dist/collapse.css

@@ -1,16 +1,16 @@
 @layer ropav.components {
-.rp-collapse[data-v-a380be0d] {
+.rp-collapse[data-v-13f319ff] {
     --_rp-collapse-duration: var(--rp-transition-fast);
     display: block;
     min-width: 0;
     font-family: var(--rp-font-family);
     color: var(--rp-color-text);
 }
-.rp-collapse--disabled[data-v-a380be0d] {
+.rp-collapse--disabled[data-v-13f319ff] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-collapse__content[data-v-a380be0d] {
+.rp-collapse__content[data-v-13f319ff] {
     box-sizing: border-box;
     display: grid;
     min-width: 0;
@@ -21,13 +21,13 @@
     grid-template-rows: 1fr;
     transition: grid-template-rows var(--_rp-collapse-duration), opacity var(--_rp-collapse-duration);
 }
-.rp-collapse__inner[data-v-a380be0d] {
+.rp-collapse__inner[data-v-13f319ff] {
     min-height: 0;
     min-width: 0;
     overflow: hidden;
 }
-.rp-collapse-content-enter-from[data-v-a380be0d],
-  .rp-collapse-content-leave-to[data-v-a380be0d] {
+.rp-collapse-content-enter-from[data-v-13f319ff],
+  .rp-collapse-content-leave-to[data-v-13f319ff] {
     opacity: 0;
     grid-template-rows: 0fr;
 }

package/dist/collapse.js

@@ -1,11 +1,12 @@
 import './collapse.css';
-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 useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as useCollapse } from "./useCollapse.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/collapse/collapse.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<section data-v-a380be0d><div data-v-a380be0d class=rp-collapse__inner>");
-var t1 = template("<div data-v-a380be0d>", 1);
+var t0 = template("<div data-v-13f319ff><div data-v-13f319ff class=rp-collapse__inner>");
+var t1 = template("<div data-v-13f319ff>", 1);
 //#endregion
 //#region src/components/collapse/collapse.vue
 var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -43,7 +44,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			...internalRootProps.value,
-			"data-disabled": presence(isDisabled.value)
+			"data-disabled": toPresenceAttribute(isDisabled.value)
 		}));
 		const publicTriggerProps = computed(() => {
 			const partAttrs = getPartAttrs("trigger");
@@ -52,7 +53,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
 				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
 				"data-state": state.value,
-				"data-disabled": presence(isDisabled.value)
+				"data-disabled": toPresenceAttribute(isDisabled.value)
 			};
 		});
 		const publicTriggerSlotProps = computed(() => ({
@@ -81,7 +82,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}, { _: 8 }));
 		return n7;
 	}
-}), [["__scopeId", "data-v-a380be0d"]]);
+}), [["__scopeId", "data-v-13f319ff"]]);
 //#endregion
 //#region src/components/collapse/types.ts
 var collapseParts = [