ropav 0.1.5 → 0.1.6

package/README.md

@@ -37,6 +37,10 @@ Import the components you need:
 import { Button } from 'ropav';
 ```
 
+Headless state utilities are available from `ropav/composables`. See the
+[public composables API](./docs/public-composables-api.md) for their controlled and uncontrolled
+state contracts.
+
 ## Custom color contrast
 
 `autoContrast` selects foreground colors for preset colors and opaque custom color literals. A

package/dist/accordion.js

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

package/dist/alert.css

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

package/dist/alert.js

@@ -1,10 +1,11 @@
 import './alert.css';
-import { t as x_default } from "./x.js";
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots, watch } from "vue";
+import { t as x_default } from "./x.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
 //#region src/components/alert/useAlertColor.ts
 function getAlertColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
@@ -27,12 +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-9ae78ff5>");
 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);
+var t2 = template("<p data-v-9ae78ff5> ");
+var t3 = template("<div data-v-9ae78ff5 class=rp-alert__content>");
+var t4 = template("<button data-v-9ae78ff5>");
+var t5 = template("<div data-v-9ae78ff5>", 1);
 delegateEvents("click");
 //#endregion
 //#region src/components/alert/alert.vue
@@ -69,11 +70,12 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const localOpen = ref(props.open ?? true);
-		watch(() => props.open, (open) => {
-			if (open !== void 0) localOpen.value = open;
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => true,
+			onChange: (open) => emit("update:open", open)
 		});
-		const isOpen = computed(() => props.open ?? localOpen.value);
+		const isOpen = controllableOpen.value;
 		const hasTitle = computed(() => Boolean(props.title || slots.title));
 		const hasDescription = computed(() => Boolean(props.description));
 		const hasContent = computed(() => Boolean(hasTitle.value || hasDescription.value || slots.default));
@@ -91,11 +93,10 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			role: resolvedRole.value
 		}));
 		function closeAlert() {
-			localOpen.value = false;
-			emit("update:open", false);
+			controllableOpen.setValue(false);
 			emit("close");
 		}
-		return createIf(() => isOpen.value, () => {
+		return createIf(() => unref(isOpen), () => {
 			const n30 = t5();
 			renderEffect(() => setDynamicProps(n30, [rootAttrs.value]));
 			setInsertionState(n30, null, 0);
@@ -164,7 +165,7 @@ var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			return n30;
 		});
 	}
-}), [["__scopeId", "data-v-433c81a2"]]);
+}), [["__scopeId", "data-v-9ae78ff5"]]);
 //#endregion
 //#region src/components/alert/types.ts
 var alertParts = [

package/dist/avatar.js

@@ -1,8 +1,8 @@
 import './avatar.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, markRaw, on, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, watch } from "vue";
 //#region ~icons/lucide/user
 var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path><circle cx=12 cy=7 r=4>", 3, 1);

package/dist/badge.js

@@ -1,8 +1,8 @@
 import './badge.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/badge/useBadgeColor.ts
 function getBadgeColorStyle(color, variant, autoContrast, contrastColor) {

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 bem } from "./bem.js";
 import { n 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";
 //#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,13 @@
-import './button-link.css';
-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 { 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";
 //#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",
@@ -93,7 +91,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 +99,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 = [

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);
 }