ropav 0.1.5 → 0.1.6

package/dist/button.js

@@ -1,15 +1,13 @@
-import './button.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/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",
@@ -65,7 +63,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 +71,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);

package/dist/card.js

@@ -1,6 +1,6 @@
 import './card.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, 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-871a9e21] {
     --_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-871a9e21] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-checkbox[data-v-f0f09b8a] {
+.rp-checkbox[data-v-871a9e21] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-checkbox-font-size);
 }
-.rp-checkbox__native[data-v-f0f09b8a] {
+.rp-checkbox__native[data-v-871a9e21] {
     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-871a9e21] {
     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-871a9e21] {
     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-871a9e21], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-871a9e21] {
     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-871a9e21] {
     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-871a9e21] {
     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-871a9e21] {
     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-871a9e21] [stroke-width] {
     stroke-width: 3;
 }
-.rp-checkbox__label[data-v-f0f09b8a] {
+.rp-checkbox__label[data-v-871a9e21] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-checkbox--outline[data-v-f0f09b8a] {
+.rp-checkbox--outline[data-v-871a9e21] {
     --_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-871a9e21] {
     --_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-871a9e21] {
     --_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-871a9e21] {
     --_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-871a9e21] {
     --_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-871a9e21] {
     --_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-871a9e21] {
     --_rp-checkbox-radius: 2px;
 }
-.rp-checkbox--radius-sm[data-v-f0f09b8a] {
+.rp-checkbox--radius-sm[data-v-871a9e21] {
     --_rp-checkbox-radius: 4px;
 }
-.rp-checkbox--radius-md[data-v-f0f09b8a] {
+.rp-checkbox--radius-md[data-v-871a9e21] {
     --_rp-checkbox-radius: 6px;
 }
-.rp-checkbox--radius-lg[data-v-f0f09b8a] {
+.rp-checkbox--radius-lg[data-v-871a9e21] {
     --_rp-checkbox-radius: 8px;
 }
-.rp-checkbox--radius-xl[data-v-f0f09b8a] {
+.rp-checkbox--radius-xl[data-v-871a9e21] {
     --_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-871a9e21],
+  .rp-checkbox-icon-leave-active[data-v-871a9e21] {
     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-871a9e21],
+  .rp-checkbox-icon-leave-to[data-v-871a9e21] {
     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-871a9e21],
+  .rp-checkbox-icon-leave-from[data-v-871a9e21] {
     opacity: 1;
     transform: translateY(0) scale(1);
 }
-.rp-checkbox-icon-leave-to[data-v-f0f09b8a] {
+.rp-checkbox-icon-leave-to[data-v-871a9e21] {
     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-871a9e21],
+    .rp-checkbox-icon-leave-active[data-v-871a9e21] {
       transition: none;
 }
 }

package/dist/checkbox.js

@@ -1,11 +1,11 @@
 import './checkbox.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 { n as getComponentColorValue, r as getComponentContrastColor } 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 { i as getComponentContrastColor, r as getComponentColorValue } 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 { 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";
@@ -52,8 +52,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-871a9e21>");
+var t1 = template("<label data-v-871a9e21><input data-v-871a9e21><span data-v-871a9e21></span>", 1);
 //#endregion
 //#region src/components/checkbox/checkbox.vue
 var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -204,7 +204,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n13;
 	}
-}), [["__scopeId", "data-v-f0f09b8a"]]);
+}), [["__scopeId", "data-v-871a9e21"]]);
 //#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-06c57838] {
     --_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-06c57838] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-collapse__content[data-v-a380be0d] {
+.rp-collapse__content[data-v-06c57838] {
     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-06c57838] {
     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-06c57838],
+  .rp-collapse-content-leave-to[data-v-06c57838] {
     opacity: 0;
     grid-template-rows: 0fr;
 }

package/dist/collapse.js

@@ -1,11 +1,11 @@
 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 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-06c57838><div data-v-06c57838 class=rp-collapse__inner>");
+var t1 = template("<div data-v-06c57838>", 1);
 //#endregion
 //#region src/components/collapse/collapse.vue
 var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -81,7 +81,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}, { _: 8 }));
 		return n7;
 	}
-}), [["__scopeId", "data-v-a380be0d"]]);
+}), [["__scopeId", "data-v-06c57838"]]);
 //#endregion
 //#region src/components/collapse/types.ts
 var collapseParts = [

package/dist/collectionNavigation.js

@@ -1,5 +1,5 @@
 import { onBeforeUnmount } from "vue";
-//#region src/composables/useTypeahead.ts
+//#region src/internal/composables/useTypeahead.ts
 var DEFAULT_TYPEAHEAD_TIMEOUT = 1e3;
 var COMBINING_MARKS = /\p{M}/gu;
 var WHITESPACE = /\s+/g;
@@ -95,7 +95,7 @@ function useTypeahead(options) {
 	};
 }
 //#endregion
-//#region src/composables/collectionNavigation.ts
+//#region src/internal/composables/collectionNavigation.ts
 function getEnabledIndexes(items, isDisabled) {
 	return items.map((item, index) => isDisabled(item) ? -1 : index).filter((index) => index >= 0);
 }

package/dist/color-input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-color-input[data-v-0c4e1f32] {
+.rp-color-input[data-v-19e2ebe7] {
     --_rp-color-input-height: var(--rp-size-control-md);
     --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
     --_rp-color-input-preview-inset: calc(
@@ -18,42 +18,42 @@
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
-.rp-color-input--size-xs[data-v-0c4e1f32] {
+.rp-color-input--size-xs[data-v-19e2ebe7] {
     --_rp-color-input-height: var(--rp-size-control-xs);
 }
-.rp-color-input--size-sm[data-v-0c4e1f32] {
+.rp-color-input--size-sm[data-v-19e2ebe7] {
     --_rp-color-input-height: var(--rp-size-control-sm);
 }
-.rp-color-input--size-md[data-v-0c4e1f32] {
+.rp-color-input--size-md[data-v-19e2ebe7] {
     --_rp-color-input-height: var(--rp-size-control-md);
 }
-.rp-color-input--size-lg[data-v-0c4e1f32] {
+.rp-color-input--size-lg[data-v-19e2ebe7] {
     --_rp-color-input-height: var(--rp-size-control-lg);
 }
-.rp-color-input--size-xl[data-v-0c4e1f32] {
+.rp-color-input--size-xl[data-v-19e2ebe7] {
     --_rp-color-input-height: var(--rp-size-control-xl);
 }
-html.dark .rp-color-input[data-v-0c4e1f32], [data-rp-color-scheme=dark] .rp-color-input[data-v-0c4e1f32] {
+html.dark .rp-color-input[data-v-19e2ebe7], [data-rp-color-scheme=dark] .rp-color-input[data-v-19e2ebe7] {
     --_rp-color-input-empty-tile: var(--rp-color-dark-6);
     --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
 }
-.rp-color-input[data-v-0c4e1f32] .rp-input {
+.rp-color-input[data-v-19e2ebe7] .rp-input {
     width: 100%;
     min-width: 180px;
     padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
-.rp-color-input[data-v-0c4e1f32] .rp-popover__content {
+.rp-color-input[data-v-19e2ebe7] .rp-popover__content {
     min-width: auto;
     padding: var(--rp-spacing-3);
     padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
-.rp-color-input[data-v-0c4e1f32] .rp-color-picker {
+.rp-color-input[data-v-19e2ebe7] .rp-color-picker {
     --_rp-color-picker-size: min(
         var(--_rp-color-picker-saturation-width),
         calc(100vw - var(--rp-spacing-12))
     );
 }
-.rp-color-input__preview[data-v-0c4e1f32] {
+.rp-color-input__preview[data-v-19e2ebe7] {
     --_rp-color-swatch-radius: 50%;
     width: var(--_rp-color-input-preview-size);
     height: var(--_rp-color-input-preview-size);
@@ -61,14 +61,14 @@ html.dark .rp-color-input[data-v-0c4e1f32], [data-rp-color-scheme=dark] .rp-colo
     border-radius: 50%;
     pointer-events: none;
 }
-.rp-color-input__preview--empty[data-v-0c4e1f32] {
+.rp-color-input__preview--empty[data-v-19e2ebe7] {
     box-sizing: border-box;
     display: inline-flex;
     background: var(--_rp-color-input-empty-grid);
     background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
     border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
 }
-.rp-color-input__eye-dropper[data-v-0c4e1f32] {
+.rp-color-input__eye-dropper[data-v-19e2ebe7] {
     padding: 0;
     font: inherit;
     background: none;
@@ -81,29 +81,29 @@ html.dark .rp-color-input[data-v-0c4e1f32], [data-rp-color-scheme=dark] .rp-colo
     color: var(--rp-color-control-icon);
     transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-color-input__eye-dropper[data-v-0c4e1f32]:hover:not(:disabled) {
+.rp-color-input__eye-dropper[data-v-19e2ebe7]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
 }
-.rp-color-input__eye-dropper[data-v-0c4e1f32]:focus-visible {
+.rp-color-input__eye-dropper[data-v-19e2ebe7]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-color-input__eye-dropper[data-v-0c4e1f32]:disabled {
+.rp-color-input__eye-dropper[data-v-19e2ebe7]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-color-input__eye-dropper-icon[data-v-0c4e1f32] {
+.rp-color-input__eye-dropper-icon[data-v-19e2ebe7] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-color-input__eye-dropper-icon svg[data-v-0c4e1f32] {
+.rp-color-input__eye-dropper-icon svg[data-v-19e2ebe7] {
     width: 100%;
     height: 100%;
 }
-.rp-color-input__eye-dropper-icon[data-v-0c4e1f32] >  svg {
+.rp-color-input__eye-dropper-icon[data-v-19e2ebe7] >  svg {
     width: 100%;
     height: 100%;
 }

package/dist/color-input.js

@@ -1,8 +1,8 @@
 import './color-input.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 bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as useControllableValue } from "./useControllableValue.js";
 import { a as useTextFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as color_swatch_default } from "./color-swatch.js";
@@ -183,8 +183,8 @@ function useColorInput(props, emit, getValue = () => props.modelValue ?? "") {
 }
 //#endregion
 //#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-0c4e1f32>");
-var t1 = template("<button data-v-0c4e1f32><span data-v-0c4e1f32 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+var t0 = template("<span data-v-19e2ebe7>");
+var t1 = template("<button data-v-19e2ebe7><span data-v-19e2ebe7 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
 //#endregion
 //#region src/components/color-input/color-input.vue
 var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -417,7 +417,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-0c4e1f32"]]);
+}), [["__scopeId", "data-v-19e2ebe7"]]);
 //#endregion
 //#region src/components/color-input/types.ts
 var colorInputParts = [

package/dist/color-picker.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-color-picker__saturation[data-v-fbb051b0] {
+.rp-color-picker__saturation[data-v-22669f8e] {
     position: relative;
     box-sizing: border-box;
     width: var(--_rp-color-picker-control-width);
@@ -10,13 +10,13 @@
     touch-action: none;
     cursor: crosshair;
 }
-.rp-color-picker__saturation[data-v-fbb051b0]:focus-visible {
+.rp-color-picker__saturation[data-v-22669f8e]:focus-visible {
     outline: none;
 }
-.rp-color-picker__saturation[data-readonly][data-v-fbb051b0] {
+.rp-color-picker__saturation[data-readonly][data-v-22669f8e] {
     cursor: default;
 }
-.rp-color-picker__axis-input[data-v-fbb051b0] {
+.rp-color-picker__axis-input[data-v-22669f8e] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -28,10 +28,10 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-fbb051b0] {
+.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-22669f8e] {
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-color-picker__surface[data-v-fbb051b0] {
+.rp-color-picker__surface[data-v-22669f8e] {
     position: absolute;
     inset: calc(-1 * var(--_rp-color-picker-thumb-radius));
     overflow: hidden;
@@ -39,7 +39,7 @@
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
     background: linear-gradient(to top, #000 0 var(--_rp-color-picker-thumb-radius), rgba(0, 0, 0, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), linear-gradient(to right, #fff 0 var(--_rp-color-picker-thumb-radius), rgba(255, 255, 255, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), hsl(var(--_rp-color-picker-hue), 100%, 50%);
 }
-.rp-color-picker__handle[data-v-fbb051b0] {
+.rp-color-picker__handle[data-v-22669f8e] {
     position: absolute;
     top: var(--_rp-color-picker-saturation-y);
     left: var(--_rp-color-picker-saturation-x);

package/dist/color-picker.js

@@ -1,8 +1,8 @@
 import './color-picker.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { t as parseCssColor } from "./color.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as parseCssColor } from "./color.js";
 import { t as check_default } from "./check.js";
 import { t as color_swatch_default } from "./color-swatch.js";
 import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nthChild, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setValue, template, unref } from "vue";
@@ -261,7 +261,7 @@ function useColorPickerDrag({ target, focusTarget, readonly, isGeometryValid, up
 }
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-fbb051b0 role=group data-control=saturation><input data-v-fbb051b0 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-fbb051b0 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-fbb051b0 class=rp-color-picker__surface aria-hidden=true></span><span data-v-fbb051b0 data-control=saturation aria-hidden=true>", 1);
+var t0$2 = template("<div data-v-22669f8e role=group data-control=saturation><input data-v-22669f8e class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-22669f8e class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-22669f8e class=rp-color-picker__surface aria-hidden=true></span><span data-v-22669f8e data-control=saturation aria-hidden=true>", 1);
 delegateEvents("input", "keydown", "pointerdown");
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue
@@ -407,7 +407,6 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			setAttr(n3, "aria-label", groupAriaLabel.value);
 			setAttr(n3, "aria-labelledby", __props.labelledby);
 			setAttr(n3, "aria-describedby", _describedby);
-			setAttr(n3, "aria-readonly", _readonly || void 0);
 			setAttr(n3, "data-readonly", unref(presence)(_readonly));
 			setProp(n0, "id", _id);
 			setValue(n0, _saturation);
@@ -426,7 +425,7 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		});
 		return n3;
 	}
-}), [["__scopeId", "data-v-fbb051b0"]]);
+}), [["__scopeId", "data-v-22669f8e"]]);
 //#endregion
 //#region src/components/color-picker/color-picker-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0$1 = template("<div data-v-0299a505 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-0299a505 aria-hidden=true></span><span data-v-0299a505 aria-hidden=true>", 1);

package/dist/color-swatch.js

@@ -1,7 +1,7 @@
 import './color-swatch.css';
 import { n as useStylesApi } from "./styles-api.js";
-import { t as parseCssColor } from "./color.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as parseCssColor } from "./color.js";
 import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template } from "vue";
 //#region src/components/color-swatch/useColorSwatchColor.ts
 function getColorSwatchForeground(color) {

package/dist/componentColors.js

@@ -110,7 +110,8 @@ function getComponentColorRoles(color) {
 	return createComponentColorRoles(parsed.value, {
 		contrast: contrast.color,
 		contrastHover: contrast.hover,
-		contrastActive: contrast.active
+		contrastActive: contrast.active,
+		foreground: getCustomForegroundColor(parsed.value)
 	});
 }
 function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast, contrastColor }) {
@@ -222,6 +223,45 @@ function createComponentColorRoles(color, overrides = {}) {
 		contrastActive: overrides.contrastActive ?? roles.contrast
 	};
 }
+var customForegroundBackgroundMixes = [
+	0,
+	.12,
+	.18,
+	.24
+];
+function getCustomForegroundColor(color) {
+	const parsed = parseCssColor(color);
+	if (!parsed || parsed.opacity < 100) return color;
+	const black = {
+		red: 0,
+		green: 0,
+		blue: 0
+	};
+	const white = {
+		red: 255,
+		green: 255,
+		blue: 255
+	};
+	const darkBody = {
+		red: 36,
+		green: 36,
+		blue: 36
+	};
+	let colorPercent = 100;
+	while (colorPercent > 0) {
+		const weight = colorPercent / 100;
+		const lightForeground = mixOpaqueColors(parsed, weight, black);
+		const darkForeground = mixOpaqueColors(parsed, weight, white);
+		if (customForegroundBackgroundMixes.every((backgroundWeight) => {
+			const lightBackground = mixOpaqueColors(parsed, backgroundWeight, white);
+			const darkBackground = mixOpaqueColors(parsed, backgroundWeight, darkBody);
+			return contrastRatio(lightForeground, lightBackground) >= 4.5 && contrastRatio(darkForeground, darkBackground) >= 4.5;
+		})) break;
+		colorPercent -= 1;
+	}
+	if (colorPercent === 100) return color;
+	return `color-mix(in srgb, ${color} ${colorPercent}%, var(--rp-color-bright))`;
+}
 function getCustomContrastColorRoles(color, warnForTranslucentColor = false) {
 	const parsed = parseCssColor(color);
 	if (!parsed) return createContrastColorRoles("var(--rp-color-white)");
@@ -282,4 +322,4 @@ function relativeLuminance(color) {
 	return .2126 * red + .7152 * green + .0722 * blue;
 }
 //#endregion
-export { getComponentVariantColorRoles as i, getComponentColorValue as n, getComponentContrastColor as r, componentColors as t };
+export { getComponentVariantColorRoles as a, getComponentContrastColor as i, getComponentColorRoles as n, getComponentColorValue as r, componentColors as t };

package/dist/components/checkbox/useCheckbox.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'vue';
 import { CheckboxProps } from './types.js';
 export declare function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void, getValue?: () => boolean): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
     onChange: (e: Event) => void;