ropav 0.0.3 → 0.0.4

package/dist/base.css

@@ -6,6 +6,7 @@
   --rp-color-warning: #cc4e00;
   --rp-color-danger: #ce2c31;
   --rp-color-info: #107d98;
+  --rp-color-neutral: #646464;
   --rp-color-text: #202020;
   --rp-color-text-secondary: #646464;
   --rp-color-text-disabled: #8d8d8d;
@@ -23,12 +24,25 @@
   --rp-color-border: #d9d9d9;
   --rp-color-border-hover: #bbbbbb;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
+  --rp-color-control-bg: #f9f9f9;
+  --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
+  --rp-color-control-fg: var(--rp-color-text);
+  --rp-color-control-placeholder: var(--rp-color-text-secondary);
+  --rp-color-control-icon: var(--rp-color-text-secondary);
+  --rp-color-control-border: var(--rp-color-border);
+  --rp-color-control-border-hover: var(--rp-color-border-hover);
+  --rp-color-control-border-focus: var(--rp-color-primary);
+  --rp-color-control-track-bg: var(--rp-color-border);
+  --rp-color-control-thumb-bg: #ffffff;
+  --rp-color-control-selected-bg: var(--rp-color-primary);
+  --rp-color-control-selected-fg: var(--rp-color-on-primary);
   --rp-color-on-primary: #ffffff;
   --rp-color-on-secondary: #ffffff;
   --rp-color-on-success: #ffffff;
   --rp-color-on-warning: #ffffff;
   --rp-color-on-danger: #ffffff;
   --rp-color-on-info: #ffffff;
+  --rp-color-on-neutral: #ffffff;
   --rp-color-primary-hover: color-mix(in srgb, var(--rp-color-primary) 90%, #111111);
   --rp-color-primary-active: color-mix(in srgb, var(--rp-color-primary) 80%, #111111);
   --rp-color-primary-subtle-bg: #e6f4fe;
@@ -77,6 +91,14 @@
   --rp-color-info-border: #7dcedc;
   --rp-color-info-border-hover: #3db9cf;
   --rp-color-info-fg: #0d3c48;
+  --rp-color-neutral-hover: color-mix(in srgb, var(--rp-color-neutral) 90%, #111111);
+  --rp-color-neutral-active: color-mix(in srgb, var(--rp-color-neutral) 80%, #111111);
+  --rp-color-neutral-subtle-bg: #f0f0f0;
+  --rp-color-neutral-subtle-bg-hover: #e8e8e8;
+  --rp-color-neutral-subtle-bg-active: #e0e0e0;
+  --rp-color-neutral-border: #cecece;
+  --rp-color-neutral-border-hover: #bbbbbb;
+  --rp-color-neutral-fg: #202020;
   --rp-font-size-xs: 0.75rem;
   --rp-font-size-sm: 0.875rem;
   --rp-font-size-base: 1rem;
@@ -114,6 +136,7 @@
   --rp-size-control-sm: 32px;
   --rp-size-control-md: 40px;
   --rp-size-control-lg: 48px;
+  --rp-opacity-disabled: 0.5;
   --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);
@@ -141,6 +164,16 @@ html.dark {
   --rp-color-border: #3a3a3a;
   --rp-color-border-hover: #606060;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+  --rp-color-control-bg: #191919;
+  --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
+  --rp-color-control-fg: #eeeeee;
+  --rp-color-control-placeholder: #6e6e6e;
+  --rp-color-control-icon: #b4b4b4;
+  --rp-color-control-border: #3a3a3a;
+  --rp-color-control-border-hover: #606060;
+  --rp-color-control-border-focus: var(--rp-color-primary);
+  --rp-color-control-track-bg: var(--rp-color-border);
+  --rp-color-control-thumb-bg: var(--rp-color-surface-inverted);
   --rp-color-primary-subtle-bg: #0d2847;
   --rp-color-primary-subtle-bg-hover: #003362;
   --rp-color-primary-subtle-bg-active: #004074;
@@ -177,6 +210,12 @@ html.dark {
   --rp-color-info-border: #12677e;
   --rp-color-info-border-hover: #11809c;
   --rp-color-info-fg: #4ccce6;
+  --rp-color-neutral-subtle-bg: #222222;
+  --rp-color-neutral-subtle-bg-hover: #2a2a2a;
+  --rp-color-neutral-subtle-bg-active: #313131;
+  --rp-color-neutral-border: #484848;
+  --rp-color-neutral-border-hover: #606060;
+  --rp-color-neutral-fg: #eeeeee;
   --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
   --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);

package/dist/button.css

@@ -158,6 +158,23 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
+.rp-button--color-neutral[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-neutral);
+  --_rp-button-accent-hover: var(--rp-color-neutral-hover);
+  --_rp-button-accent-active: var(--rp-color-neutral-active);
+  --_rp-button-accent-on: var(--rp-color-on-neutral);
+  --_rp-button-accent-subtle-bg: var(--rp-color-neutral-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-neutral-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-neutral-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-neutral-border);
+  --_rp-button-accent-border-hover: var(--rp-color-neutral-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-neutral-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
 .rp-button--size-xs[data-v-b8d57358] {
   --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-button-padding-x: var(--rp-spacing-2);

package/dist/button.js

@@ -1,26 +1,15 @@
 import './button.css';
 import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createComponent, createElementBlock, createElementVNode, createIf, createSlot, defineVaporComponent, markRaw, openBlock, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, markRaw, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
 //#region ~icons/lucide/loader-circle
-var _hoisted_1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("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"
-	}, null, -1)])]);
+var t0$1 = 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);
+function render(_ctx) {
+	return t0$1();
 }
-var loader_circle_default = markRaw({
+var loader_circle_default = markRaw(defineVaporComponent({
 	name: "lucide-loader-circle",
 	render
-});
+}));
 //#endregion
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span data-v-b8d57358 class=rp-button__left>");

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EACpD,CAAC,CACL;;;;iBArCoB,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACzD,UAAA,aAAS;;IAAE,OAAM;IAAqB,eAAY;;;;iBAC9D,OAAM,QAAA,CAAU,UAAA,aAAS;;;cAC3B,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}
+{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EACpD,CAAC,CACL;;;;iBArCoB,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACzD,UAAA,aAAS;;IAAE,OAAM;IAAqB,eAAY;;;;iBAC9D,OAAM,QAAA,CAAU,UAAA,aAAS;;;cAC3B,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}

package/dist/checkbox.css

@@ -1,6 +1,6 @@
 .rp-checkbox[data-v-7333dac7] {
-  --_checkbox-color: var(--rp-color-primary);
-  --_checkbox-on-color: var(--rp-color-on-primary);
+  --_checkbox-color: var(--rp-color-control-selected-bg);
+  --_checkbox-on-color: var(--rp-color-control-selected-fg);
   --_checkbox-size: 18px;
   --_checkbox-icon-size: 14px;
   --_checkbox-font-size: var(--rp-font-size-base);
@@ -45,9 +45,9 @@
   width: var(--_checkbox-size);
   height: var(--_checkbox-size);
   flex-shrink: 0;
-  border: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
   border-radius: var(--_checkbox-radius);
-  background-color: var(--rp-color-button-default-bg);
+  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-7333dac7], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-7333dac7] {
@@ -94,8 +94,12 @@
   --_checkbox-color: var(--rp-color-info);
   --_checkbox-on-color: var(--rp-color-on-info);
 }
+.rp-checkbox--color-neutral[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-neutral);
+  --_checkbox-on-color: var(--rp-color-on-neutral);
+}
 .rp-checkbox--outline[data-v-7333dac7] {
-  --_checkbox-checked-bg: var(--rp-color-button-default-bg);
+  --_checkbox-checked-bg: var(--rp-color-control-bg);
   --_checkbox-checked-border: var(--_checkbox-color);
   --_checkbox-checked-icon: var(--_checkbox-color);
 }

package/dist/checkbox.js

@@ -1,48 +1,26 @@
 import './checkbox.css';
 import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { VaporTransition, child, computed, createComponent, createElementBlock, createElementVNode, createIf, createSlot, defineVaporComponent, extend, markRaw, next, on, openBlock, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, on, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, template, unref } from "vue";
 //#region ~icons/lucide/check
-var _hoisted_1$1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$1(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"stroke-width": "2",
-		d: "M20 6L9 17l-5-5"
-	}, null, -1)])]);
+var t0$2 = 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=\"M20 6L9 17l-5-5\">", 3, 1);
+function render$1(_ctx) {
+	return t0$2();
 }
-var check_default = markRaw({
+var check_default = markRaw(defineVaporComponent({
 	name: "lucide-check",
 	render: render$1
-});
+}));
 //#endregion
 //#region ~icons/lucide/minus
-var _hoisted_1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"stroke-width": "2",
-		d: "M5 12h14"
-	}, null, -1)])]);
+var t0$1 = 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=\"M5 12h14\">", 3, 1);
+function render(_ctx) {
+	return t0$1();
 }
-var minus_default = markRaw({
+var minus_default = markRaw(defineVaporComponent({
 	name: "lucide-minus",
 	render
-});
+}));
 //#endregion
 //#region src/components/checkbox/useCheckbox.ts
 function useCheckbox(props, emitUpdate) {

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-checkbox', {\n            checked: props.modelValue,\n            indeterminate: props.indeterminate,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [props.variant ?? '']: Boolean(props.variant),\n            [`color-${props.color}`]: Boolean(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n        }),\n    );\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport CheckIcon from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport CheckIcon from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAAgB,YAAY,OAAgC,YAAsC;CAC9F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;GAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;CACpD,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAnCY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;;iBAnBb,MAAA,SAAA,CAAS;gBAChB,iBAAe,qBAAoB,KAAA,CAAS;gBAC5C,cAAY,iBAAa,kBAAqB,cAAU,YAAA,WAAA;eAGpD,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAGV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,iBAAe,cAAa;eAC5B,gBAAc,iBAAa,UAAa,WAAU;eAClD,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;;GAIjC,MAAK;GAAmB,MAAK;;yBACpB,QAAA,qBAAa;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;2BACrB,QAAA,kBAAU;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;;;;iBAGzC,OAAM,eAAA"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-checkbox', {\n            checked: props.modelValue,\n            indeterminate: props.indeterminate,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [props.variant ?? '']: Boolean(props.variant),\n            [`color-${props.color}`]: Boolean(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n        }),\n    );\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport CheckIcon from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport CheckIcon from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAAgB,YAAY,OAAgC,YAAsC;CAC9F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;GAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;CACpD,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAnCY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;;iBAnBb,MAAA,SAAA,CAAS;gBAChB,iBAAe,qBAAoB,KAAA,CAAS;gBAC5C,cAAY,iBAAa,kBAAqB,cAAU,YAAA,WAAA;eAGpD,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAGV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,iBAAe,cAAa;eAC5B,gBAAc,iBAAa,UAAa,WAAU;eAClD,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;;GAIjC,MAAK;GAAmB,MAAK;;yBACpB,QAAA,qBAAa;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;2BACrB,QAAA,kBAAU;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;;;;iBAGzC,OAAM,eAAA"}

package/dist/components/button/types.d.ts

@@ -1,4 +1,4 @@
-export type ButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type ButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonVariant = 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';

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

@@ -1,4 +1,4 @@
-export type CheckboxColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type CheckboxColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type CheckboxRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type CheckboxVariant = 'solid' | 'outline';

package/dist/components/radio/types.d.ts

@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue';
-export type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type RadioVariant = 'solid' | 'outline';
 export interface RadioProps {

package/dist/components/switch/types.d.ts

@@ -1,4 +1,4 @@
-export type SwitchColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type SwitchColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SwitchProps {
     id?: string;

package/dist/input.css

@@ -3,6 +3,10 @@
   --_rp-input-padding-x: var(--rp-spacing-3);
   --_rp-input-font-size: var(--rp-font-size-base);
   --_rp-input-radius: var(--rp-radius-sm);
+  --_rp-input-valid-border: var(--rp-color-success-border-hover);
+  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
+  --_rp-input-invalid-border: var(--rp-color-danger-border-hover);
+  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -10,16 +14,16 @@
   gap: var(--rp-spacing-2);
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
-  background-color: var(--rp-color-button-default-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
 .rp-input[data-v-fedf15e7]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
-  border-color: var(--rp-color-border-hover);
+  border-color: var(--rp-color-control-border-hover);
 }
 .rp-input[data-v-fedf15e7]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-input[data-v-fedf15e7] {
@@ -68,26 +72,32 @@
 .rp-input--radius-xl[data-v-fedf15e7] {
   --_rp-input-radius: var(--rp-radius-xl);
 }
+html.dark .rp-input[data-v-fedf15e7] {
+  --_rp-input-valid-border: var(--rp-color-success-fg);
+  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  --_rp-input-invalid-border: var(--rp-color-danger-fg);
+  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
 .rp-input--disabled[data-v-fedf15e7] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
 .rp-input--valid[data-v-fedf15e7] {
-  border-color: var(--rp-color-success-fg);
+  border-color: var(--_rp-input-valid-border);
 }
 .rp-input--valid[data-v-fedf15e7]:focus-within:not(.rp-input--disabled) {
-  border-color: var(--rp-color-success-fg);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  border-color: var(--_rp-input-valid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
 }
 .rp-input--invalid[data-v-fedf15e7] {
-  border-color: var(--rp-color-danger-fg);
+  border-color: var(--_rp-input-invalid-border);
 }
 .rp-input--invalid[data-v-fedf15e7]:focus-within:not(.rp-input--disabled) {
-  border-color: var(--rp-color-danger-fg);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+  border-color: var(--_rp-input-invalid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
 }
 .rp-input--readonly[data-v-fedf15e7] {
-  background-color: var(--rp-color-surface-muted);
+  background-color: var(--rp-color-control-readonly-bg);
 }
 .rp-input__native[data-v-fedf15e7] {
   box-sizing: border-box;
@@ -100,11 +110,11 @@
   outline: none;
   background: transparent;
   font: inherit;
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-none);
 }
 .rp-input__native[data-v-fedf15e7]::placeholder {
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-control-placeholder);
 }
 .rp-input__native[data-v-fedf15e7]:disabled {
   cursor: not-allowed;
@@ -113,5 +123,5 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  color: color-mix(in srgb, var(--rp-color-text-secondary) 50%, var(--rp-color-border));
+  color: var(--rp-color-control-icon);
 }

package/dist/radio.css

@@ -1,6 +1,6 @@
 .rp-radio[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-primary);
-  --_radio-on-color: var(--rp-color-on-primary);
+  --_radio-color: var(--rp-color-control-selected-bg);
+  --_radio-on-color: var(--rp-color-control-selected-fg);
   --_radio-size: 18px;
   --_radio-dot: 8px;
   --_radio-font-size: var(--rp-font-size-base);
@@ -44,9 +44,9 @@
   width: var(--_radio-size);
   height: var(--_radio-size);
   flex-shrink: 0;
-  border: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
   border-radius: var(--rp-radius-full);
-  background-color: var(--rp-color-button-default-bg);
+  background-color: var(--rp-color-control-bg);
   transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
 .rp-radio__dot[data-v-ecddd6c8]::after {
@@ -93,8 +93,12 @@
   --_radio-color: var(--rp-color-info);
   --_radio-on-color: var(--rp-color-on-info);
 }
+.rp-radio--color-neutral[data-v-ecddd6c8] {
+  --_radio-color: var(--rp-color-neutral);
+  --_radio-on-color: var(--rp-color-on-neutral);
+}
 .rp-radio--outline[data-v-ecddd6c8] {
-  --_radio-checked-bg: var(--rp-color-button-default-bg);
+  --_radio-checked-bg: var(--rp-color-control-bg);
   --_radio-checked-border: var(--_radio-color);
   --_radio-checked-dot: var(--_radio-color);
 }

package/dist/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../src/composables/useRequiredInject.ts","../src/components/radio/types.ts","../src/components/radio/useRadio.ts","../src/components/radio/radio.vue","../src/components/radio/radio.vue","../src/components/radio/radio-group.vue","../src/components/radio/radio-group.vue"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\n\nexport function useRequiredInject<T>(key: InjectionKey<T>, componentName: string): T {\n    const value = inject(key);\n    if (value == null) {\n        throw new Error(\n            `[Ropav] <${componentName}> must be used inside its parent provider component.`,\n        );\n    }\n    return value;\n}\n","import type { InjectionKey } from 'vue';\n\nexport type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type RadioVariant = 'solid' | 'outline';\n\nexport interface RadioProps {\n    value: string | number;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    ariaLabel?: string;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface RadioGroupContext {\n    modelValue: string | number | null;\n    name: string;\n    disabled: boolean;\n    required: boolean;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    select: (value: string | number) => void;\n}\n\nexport const radioGroupKey = Symbol('radioGroup') as InjectionKey<RadioGroupContext>;\n","import { computed, provide, useId } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\n\nexport function useRadio(props: Readonly<RadioProps>) {\n    const group = useRequiredInject(radioGroupKey, 'RpRadio');\n    const isChecked = computed(() => group.modelValue === props.value);\n    const isDisabled = computed(() => props.disabled || group.disabled);\n    const variant = computed(() => props.variant ?? group.variant);\n    const color = computed(() => props.color ?? group.color);\n    const size = computed(() => props.size ?? group.size);\n\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n            [variant.value ?? '']: Boolean(variant.value),\n            [`color-${color.value}`]: Boolean(color.value),\n            [`size-${size.value}`]: Boolean(size.value),\n        }),\n    );\n\n    function onSelect() {\n        if (isDisabled.value) return;\n        group.select(props.value);\n    }\n\n    return {\n        group,\n        isChecked,\n        isDisabled,\n        rootClass,\n        onSelect,\n    };\n}\n\nexport function useRadioGroup(\n    props: Readonly<RadioGroupProps>,\n    emitUpdate: (value: string | number | null) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-radio-group', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const generatedName = useId();\n    const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);\n\n    provide<RadioGroupContext>(radioGroupKey, {\n        get modelValue() {\n            return props.modelValue;\n        },\n        get name() {\n            return groupName.value;\n        },\n        get disabled() {\n            return control.disabled;\n        },\n        get required() {\n            return control.required;\n        },\n        get variant() {\n            return props.variant;\n        },\n        get color() {\n            return props.color;\n        },\n        get size() {\n            return props.size;\n        },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../src/composables/useRequiredInject.ts","../src/components/radio/types.ts","../src/components/radio/useRadio.ts","../src/components/radio/radio.vue","../src/components/radio/radio.vue","../src/components/radio/radio-group.vue","../src/components/radio/radio-group.vue"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\n\nexport function useRequiredInject<T>(key: InjectionKey<T>, componentName: string): T {\n    const value = inject(key);\n    if (value == null) {\n        throw new Error(\n            `[Ropav] <${componentName}> must be used inside its parent provider component.`,\n        );\n    }\n    return value;\n}\n","import type { InjectionKey } from 'vue';\n\nexport type RadioColor =\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'neutral';\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type RadioVariant = 'solid' | 'outline';\n\nexport interface RadioProps {\n    value: string | number;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    ariaLabel?: string;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface RadioGroupContext {\n    modelValue: string | number | null;\n    name: string;\n    disabled: boolean;\n    required: boolean;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    select: (value: string | number) => void;\n}\n\nexport const radioGroupKey = Symbol('radioGroup') as InjectionKey<RadioGroupContext>;\n","import { computed, provide, useId } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\n\nexport function useRadio(props: Readonly<RadioProps>) {\n    const group = useRequiredInject(radioGroupKey, 'RpRadio');\n    const isChecked = computed(() => group.modelValue === props.value);\n    const isDisabled = computed(() => props.disabled || group.disabled);\n    const variant = computed(() => props.variant ?? group.variant);\n    const color = computed(() => props.color ?? group.color);\n    const size = computed(() => props.size ?? group.size);\n\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n            [variant.value ?? '']: Boolean(variant.value),\n            [`color-${color.value}`]: Boolean(color.value),\n            [`size-${size.value}`]: Boolean(size.value),\n        }),\n    );\n\n    function onSelect() {\n        if (isDisabled.value) return;\n        group.select(props.value);\n    }\n\n    return {\n        group,\n        isChecked,\n        isDisabled,\n        rootClass,\n        onSelect,\n    };\n}\n\nexport function useRadioGroup(\n    props: Readonly<RadioGroupProps>,\n    emitUpdate: (value: string | number | null) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-radio-group', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const generatedName = useId();\n    const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);\n\n    provide<RadioGroupContext>(radioGroupKey, {\n        get modelValue() {\n            return props.modelValue;\n        },\n        get name() {\n            return groupName.value;\n        },\n        get disabled() {\n            return control.disabled;\n        },\n        get required() {\n            return control.required;\n        },\n        get variant() {\n            return props.variant;\n        },\n        get color() {\n            return props.color;\n        },\n        get size() {\n            return props.size;\n        },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || undefined\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-invalid=\"control.invalid || undefined\"\n        :aria-required=\"control.required || undefined\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: undefined,\n    color: undefined,\n    size: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/select.css

@@ -20,19 +20,19 @@
   height: var(--rp-size-control-md);
   padding: 0 var(--rp-spacing-3);
   font-size: var(--rp-font-size-base);
-  background-color: var(--rp-color-button-default-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
   border-radius: var(--_rp-select-radius);
   cursor: pointer;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
   gap: var(--rp-spacing-2);
 }
 .rp-select__trigger[data-v-9838513c]:hover {
-  border-color: var(--rp-color-border-hover);
+  border-color: var(--rp-color-control-border-hover);
 }
 .rp-select__trigger[data-v-9838513c]:focus-visible {
   outline: none;
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-select--radius-xs[data-v-9838513c] {
@@ -51,7 +51,7 @@
   --_rp-select-radius: var(--rp-radius-xl);
 }
 .rp-select--open .rp-select__trigger[data-v-9838513c] {
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-select--invalid .rp-select__trigger[data-v-9838513c] {
@@ -62,10 +62,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
 }
 .rp-select__placeholder[data-v-9838513c] {
-  color: var(--rp-color-text-disabled);
+  color: var(--rp-color-control-placeholder);
 }
 .rp-select__indicator[data-v-9838513c] {
   display: inline-flex;
@@ -80,7 +80,7 @@
 }
 .rp-select__indicator[data-v-9838513c] {
   position: relative;
-  color: var(--rp-color-text-disabled);
+  color: var(--rp-color-control-icon);
   transform: translateX(var(--rp-spacing-1));
 }
 .rp-select__arrow[data-v-9838513c] {
@@ -117,13 +117,13 @@
   position: absolute;
   inset: 0;
   z-index: 1;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-control-icon);
   opacity: 0;
   pointer-events: none;
   transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
 .rp-select__clear[data-v-9838513c]:hover {
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
 }
 .rp-select__trigger:hover .rp-select__clear[data-v-9838513c] {
   opacity: 1;
@@ -155,7 +155,7 @@
   font-size: var(--rp-font-size-base);
   cursor: pointer;
   transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
 }
 .rp-select__option--focused[data-v-9838513c] {
   background-color: var(--rp-color-surface-hover);

package/dist/select.js

@@ -1,48 +1,26 @@
 import './select.css';
 import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { VaporTransition, child, computed, createComponent, createElementBlock, createElementVNode, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, openBlock, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch, withModifiers, withVaporModifiers } from "vue";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
-var _hoisted_1$1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$1(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"stroke-width": "2",
-		d: "m7 15l5 5l5-5M7 9l5-5l5 5"
-	}, null, -1)])]);
+var t0$2 = 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=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
+function render$1(_ctx) {
+	return t0$2();
 }
-var chevrons_up_down_default = markRaw({
+var chevrons_up_down_default = markRaw(defineVaporComponent({
 	name: "lucide-chevrons-up-down",
 	render: render$1
-});
+}));
 //#endregion
 //#region ~icons/lucide/x
-var _hoisted_1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"stroke-width": "2",
-		d: "M18 6L6 18M6 6l12 12"
-	}, null, -1)])]);
+var t0$1 = 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=\"M18 6L6 18M6 6l12 12\">", 3, 1);
+function render(_ctx) {
+	return t0$1();
 }
-var x_default = markRaw({
+var x_default = markRaw(defineVaporComponent({
 	name: "lucide-x",
 	render
-});
+}));
 //#endregion
 //#region src/composables/useClickOutside.ts
 function useClickOutside(target, active, callback) {

package/dist/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../src/composables/useClickOutside.ts","../src/composables/useListNavigation.ts","../src/components/select/useSelect.ts","../src/components/select/select.vue","../src/components/select/select.vue"],"sourcesContent":["import { watch, onMounted, onBeforeUnmount, type Ref } from 'vue';\n\nexport function useClickOutside(\n    target: Ref<HTMLElement | null>,\n    active: Ref<boolean>,\n    callback: () => void,\n) {\n    let isListening = false;\n    let stopWatch: (() => void) | undefined;\n\n    function handler(e: MouseEvent) {\n        if (target.value && !target.value.contains(e.target as Node)) {\n            callback();\n        }\n    }\n\n    function setListening(value: boolean) {\n        if (typeof document === 'undefined' || value === isListening) return;\n        isListening = value;\n\n        if (value) {\n            document.addEventListener('click', handler, true);\n        } else {\n            document.removeEventListener('click', handler, true);\n        }\n    }\n\n    onMounted(() => {\n        stopWatch = watch(active, setListening, { immediate: true });\n    });\n\n    onBeforeUnmount(() => {\n        stopWatch?.();\n        setListening(false);\n    });\n}\n","import { computed, ref } from 'vue';\n\nexport interface ListNavigationItem {\n    disabled?: boolean;\n}\n\nexport interface UseListNavigationOptions<T extends ListNavigationItem> {\n    items: () => T[];\n    isSelected?: (item: T) => boolean;\n    loop?: boolean;\n}\n\nexport function useListNavigation<T extends ListNavigationItem>(\n    options: UseListNavigationOptions<T>,\n) {\n    const localFocusedIndex = ref(-1);\n    const loop = options.loop ?? true;\n\n    const enabledIndexes = computed(() =>\n        options\n            .items()\n            .map((item, index) => (item.disabled ? -1 : index))\n            .filter((index) => index >= 0),\n    );\n\n    function resetFocus() {\n        localFocusedIndex.value = -1;\n    }\n\n    function setNearest(index: number, direction: 1 | -1) {\n        const indexes = enabledIndexes.value;\n        if (indexes.length === 0) {\n            resetFocus();\n            return;\n        }\n\n        if (options.items()[index] && !options.items()[index]?.disabled) {\n            localFocusedIndex.value = index;\n            return;\n        }\n\n        let next: number | undefined;\n        if (direction === 1) {\n            next = indexes.find((i) => i > index);\n        } else {\n            for (let i = indexes.length - 1; i >= 0; i -= 1) {\n                const candidate = indexes[i]!;\n                if (candidate < index) {\n                    next = candidate;\n                    break;\n                }\n            }\n        }\n\n        if (next !== undefined) {\n            localFocusedIndex.value = next;\n        } else if (loop) {\n            localFocusedIndex.value = direction === 1 ? indexes[0]! : indexes[indexes.length - 1]!;\n        }\n    }\n\n    function focusSelected() {\n        const items = options.items();\n        const selectedIndex = options.isSelected\n            ? items.findIndex((item) => options.isSelected!(item) && !item.disabled)\n            : -1;\n        if (selectedIndex >= 0) {\n            localFocusedIndex.value = selectedIndex;\n        } else {\n            focusFirst();\n        }\n    }\n\n    function focusFirst() {\n        const first = enabledIndexes.value[0];\n        localFocusedIndex.value = first ?? -1;\n    }\n\n    function focusLast() {\n        const indexes = enabledIndexes.value;\n        localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;\n    }\n\n    function moveFocus(delta: 1 | -1) {\n        if (localFocusedIndex.value < 0) {\n            if (delta === 1) {\n                focusFirst();\n            } else {\n                focusLast();\n            }\n            return;\n        }\n        setNearest(localFocusedIndex.value + delta, delta);\n    }\n\n    return {\n        focusedIndex: localFocusedIndex,\n        resetFocus,\n        focusSelected,\n        focusFirst,\n        focusLast,\n        moveFocus,\n    };\n}\n","import { computed, nextTick, ref, useId } from 'vue';\nimport { useClickOutside } from '@/composables/useClickOutside';\nimport { useControlState } from '@/composables/useControlState';\nimport { useListNavigation } from '@/composables/useListNavigation';\nimport { bem } from '@/utils/bem';\nimport type { SelectOption, SelectProps } from './types';\n\ntype SelectValue = string | number | null;\n\nfunction hasSelectValue(value: SelectValue) {\n    return value != null && value !== '';\n}\n\nfunction getSelectDisplayLabel(options: SelectOption[] | undefined, value: SelectValue) {\n    if (!hasSelectValue(value)) return '';\n    return options?.find((option) => option.value === value)?.label ?? '';\n}\n\nfunction getSelectActiveDescendantId(baseId: string, focusedIndex: number) {\n    return focusedIndex < 0 ? undefined : `${baseId}-option-${focusedIndex}`;\n}\n\nexport function useSelect(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void) {\n    const selectRef = ref<HTMLElement | null>(null);\n    const triggerRef = ref<HTMLElement | null>(null);\n    const isOpen = ref(false);\n\n    const selectId = useId();\n    const listboxId = `${selectId}-listbox`;\n\n    const control = useControlState(props);\n    const visibleOptions = computed(() => props.options ?? []);\n\n    const navigation = useListNavigation<SelectOption>({\n        items: () => visibleOptions.value,\n        isSelected: (item) => item.value === props.modelValue,\n    });\n\n    const focusedIndex = navigation.focusedIndex;\n    const activeDescendantId = computed(() =>\n        getSelectActiveDescendantId(selectId, focusedIndex.value),\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-select', {\n            open: isOpen.value,\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const hasValue = computed(() => hasSelectValue(props.modelValue));\n    const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));\n    const canClear = computed(() =>\n        Boolean(props.clearable && hasValue.value && !control.disabled),\n    );\n\n    function focusTrigger() {\n        nextTick(() => triggerRef.value?.focus());\n    }\n\n    function open() {\n        if (control.disabled || isOpen.value) return;\n        isOpen.value = true;\n        navigation.focusSelected();\n    }\n\n    function close() {\n        isOpen.value = false;\n        navigation.resetFocus();\n    }\n\n    function toggle() {\n        if (control.disabled) return;\n        if (isOpen.value) {\n            close();\n            focusTrigger();\n        } else {\n            open();\n        }\n    }\n\n    function selectOption(option: SelectOption) {\n        if (option.disabled) return;\n        emitUpdate(option.value);\n        close();\n        focusTrigger();\n    }\n\n    function clearSelection() {\n        if (!canClear.value) return;\n        emitUpdate(null);\n        close();\n        focusTrigger();\n    }\n\n    function onOptionMouseenter(option: SelectOption, index: number) {\n        if (!option.disabled) focusedIndex.value = index;\n    }\n\n    function selectFocusedOption() {\n        if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;\n        selectOption(visibleOptions.value[focusedIndex.value]!);\n    }\n\n    function onTriggerKeydown(e: KeyboardEvent) {\n        if (control.disabled) return;\n\n        switch (e.key) {\n            case 'Enter':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case ' ':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case 'ArrowDown':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else navigation.moveFocus(1);\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                if (!isOpen.value) {\n                    open();\n                    navigation.focusLast();\n                } else {\n                    navigation.moveFocus(-1);\n                }\n                break;\n            case 'Home':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusFirst();\n                }\n                break;\n            case 'End':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusLast();\n                }\n                break;\n            case 'Escape':\n                e.preventDefault();\n                close();\n                focusTrigger();\n                break;\n        }\n    }\n\n    useClickOutside(selectRef, isOpen, close);\n\n    return {\n        selectRef,\n        triggerRef,\n        isOpen,\n        selectId,\n        listboxId,\n        control,\n        visibleOptions,\n        focusedIndex,\n        activeDescendantId,\n        rootClass,\n        hasValue,\n        displayLabel,\n        canClear,\n        toggle,\n        selectOption,\n        clearSelection,\n        onOptionMouseenter,\n        onTriggerKeydown,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../src/composables/useClickOutside.ts","../src/composables/useListNavigation.ts","../src/components/select/useSelect.ts","../src/components/select/select.vue","../src/components/select/select.vue"],"sourcesContent":["import { watch, onMounted, onBeforeUnmount, type Ref } from 'vue';\n\nexport function useClickOutside(\n    target: Ref<HTMLElement | null>,\n    active: Ref<boolean>,\n    callback: () => void,\n) {\n    let isListening = false;\n    let stopWatch: (() => void) | undefined;\n\n    function handler(e: MouseEvent) {\n        if (target.value && !target.value.contains(e.target as Node)) {\n            callback();\n        }\n    }\n\n    function setListening(value: boolean) {\n        if (typeof document === 'undefined' || value === isListening) return;\n        isListening = value;\n\n        if (value) {\n            document.addEventListener('click', handler, true);\n        } else {\n            document.removeEventListener('click', handler, true);\n        }\n    }\n\n    onMounted(() => {\n        stopWatch = watch(active, setListening, { immediate: true });\n    });\n\n    onBeforeUnmount(() => {\n        stopWatch?.();\n        setListening(false);\n    });\n}\n","import { computed, ref } from 'vue';\n\nexport interface ListNavigationItem {\n    disabled?: boolean;\n}\n\nexport interface UseListNavigationOptions<T extends ListNavigationItem> {\n    items: () => T[];\n    isSelected?: (item: T) => boolean;\n    loop?: boolean;\n}\n\nexport function useListNavigation<T extends ListNavigationItem>(\n    options: UseListNavigationOptions<T>,\n) {\n    const localFocusedIndex = ref(-1);\n    const loop = options.loop ?? true;\n\n    const enabledIndexes = computed(() =>\n        options\n            .items()\n            .map((item, index) => (item.disabled ? -1 : index))\n            .filter((index) => index >= 0),\n    );\n\n    function resetFocus() {\n        localFocusedIndex.value = -1;\n    }\n\n    function setNearest(index: number, direction: 1 | -1) {\n        const indexes = enabledIndexes.value;\n        if (indexes.length === 0) {\n            resetFocus();\n            return;\n        }\n\n        if (options.items()[index] && !options.items()[index]?.disabled) {\n            localFocusedIndex.value = index;\n            return;\n        }\n\n        let next: number | undefined;\n        if (direction === 1) {\n            next = indexes.find((i) => i > index);\n        } else {\n            for (let i = indexes.length - 1; i >= 0; i -= 1) {\n                const candidate = indexes[i]!;\n                if (candidate < index) {\n                    next = candidate;\n                    break;\n                }\n            }\n        }\n\n        if (next !== undefined) {\n            localFocusedIndex.value = next;\n        } else if (loop) {\n            localFocusedIndex.value = direction === 1 ? indexes[0]! : indexes[indexes.length - 1]!;\n        }\n    }\n\n    function focusSelected() {\n        const items = options.items();\n        const selectedIndex = options.isSelected\n            ? items.findIndex((item) => options.isSelected!(item) && !item.disabled)\n            : -1;\n        if (selectedIndex >= 0) {\n            localFocusedIndex.value = selectedIndex;\n        } else {\n            focusFirst();\n        }\n    }\n\n    function focusFirst() {\n        const first = enabledIndexes.value[0];\n        localFocusedIndex.value = first ?? -1;\n    }\n\n    function focusLast() {\n        const indexes = enabledIndexes.value;\n        localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;\n    }\n\n    function moveFocus(delta: 1 | -1) {\n        if (localFocusedIndex.value < 0) {\n            if (delta === 1) {\n                focusFirst();\n            } else {\n                focusLast();\n            }\n            return;\n        }\n        setNearest(localFocusedIndex.value + delta, delta);\n    }\n\n    return {\n        focusedIndex: localFocusedIndex,\n        resetFocus,\n        focusSelected,\n        focusFirst,\n        focusLast,\n        moveFocus,\n    };\n}\n","import { computed, nextTick, ref, useId } from 'vue';\nimport { useClickOutside } from '@/composables/useClickOutside';\nimport { useControlState } from '@/composables/useControlState';\nimport { useListNavigation } from '@/composables/useListNavigation';\nimport { bem } from '@/utils/bem';\nimport type { SelectOption, SelectProps } from './types';\n\ntype SelectValue = string | number | null;\n\nfunction hasSelectValue(value: SelectValue) {\n    return value != null && value !== '';\n}\n\nfunction getSelectDisplayLabel(options: SelectOption[] | undefined, value: SelectValue) {\n    if (!hasSelectValue(value)) return '';\n    return options?.find((option) => option.value === value)?.label ?? '';\n}\n\nfunction getSelectActiveDescendantId(baseId: string, focusedIndex: number) {\n    return focusedIndex < 0 ? undefined : `${baseId}-option-${focusedIndex}`;\n}\n\nexport function useSelect(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void) {\n    const selectRef = ref<HTMLElement | null>(null);\n    const triggerRef = ref<HTMLElement | null>(null);\n    const isOpen = ref(false);\n\n    const selectId = useId();\n    const listboxId = `${selectId}-listbox`;\n\n    const control = useControlState(props);\n    const visibleOptions = computed(() => props.options ?? []);\n\n    const navigation = useListNavigation<SelectOption>({\n        items: () => visibleOptions.value,\n        isSelected: (item) => item.value === props.modelValue,\n    });\n\n    const focusedIndex = navigation.focusedIndex;\n    const activeDescendantId = computed(() =>\n        getSelectActiveDescendantId(selectId, focusedIndex.value),\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-select', {\n            open: isOpen.value,\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const hasValue = computed(() => hasSelectValue(props.modelValue));\n    const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));\n    const canClear = computed(() =>\n        Boolean(props.clearable && hasValue.value && !control.disabled),\n    );\n\n    function focusTrigger() {\n        nextTick(() => triggerRef.value?.focus());\n    }\n\n    function open() {\n        if (control.disabled || isOpen.value) return;\n        isOpen.value = true;\n        navigation.focusSelected();\n    }\n\n    function close() {\n        isOpen.value = false;\n        navigation.resetFocus();\n    }\n\n    function toggle() {\n        if (control.disabled) return;\n        if (isOpen.value) {\n            close();\n            focusTrigger();\n        } else {\n            open();\n        }\n    }\n\n    function selectOption(option: SelectOption) {\n        if (option.disabled) return;\n        emitUpdate(option.value);\n        close();\n        focusTrigger();\n    }\n\n    function clearSelection() {\n        if (!canClear.value) return;\n        emitUpdate(null);\n        close();\n        focusTrigger();\n    }\n\n    function onOptionMouseenter(option: SelectOption, index: number) {\n        if (!option.disabled) focusedIndex.value = index;\n    }\n\n    function selectFocusedOption() {\n        if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;\n        selectOption(visibleOptions.value[focusedIndex.value]!);\n    }\n\n    function onTriggerKeydown(e: KeyboardEvent) {\n        if (control.disabled) return;\n\n        switch (e.key) {\n            case 'Enter':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case ' ':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case 'ArrowDown':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else navigation.moveFocus(1);\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                if (!isOpen.value) {\n                    open();\n                    navigation.focusLast();\n                } else {\n                    navigation.moveFocus(-1);\n                }\n                break;\n            case 'Home':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusFirst();\n                }\n                break;\n            case 'End':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusLast();\n                }\n                break;\n            case 'Escape':\n                e.preventDefault();\n                close();\n                focusTrigger();\n                break;\n        }\n    }\n\n    useClickOutside(selectRef, isOpen, close);\n\n    return {\n        selectRef,\n        triggerRef,\n        isOpen,\n        selectId,\n        listboxId,\n        control,\n        visibleOptions,\n        focusedIndex,\n        activeDescendantId,\n        rootClass,\n        hasValue,\n        displayLabel,\n        canClear,\n        toggle,\n        selectOption,\n        clearSelection,\n        onOptionMouseenter,\n        onTriggerKeydown,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/switch.css

@@ -1,12 +1,12 @@
 .rp-switch[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-primary);
+  --_switch-color: var(--rp-color-control-selected-bg);
   --_switch-font-size: var(--rp-font-size-base);
   --_track-w: 40px;
   --_track-h: 22px;
   --_thumb-size: 18px;
   --_thumb-offset: 2px;
-  --_track-bg: var(--rp-color-border);
-  --_thumb-bg: #ffffff;
+  --_track-bg: var(--rp-color-control-track-bg);
+  --_thumb-bg: var(--rp-color-control-thumb-bg);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
@@ -21,9 +21,6 @@
   gap: var(--rp-spacing-2);
   font-size: var(--_switch-font-size);
 }
-html.dark .rp-switch[data-v-aeef0d94] {
-  --_thumb-bg: var(--rp-color-surface-inverted);
-}
 .rp-switch__native[data-v-aeef0d94] {
   position: absolute;
   width: 1px;
@@ -93,6 +90,9 @@ html.dark .rp-switch[data-v-aeef0d94] {
 .rp-switch--color-info[data-v-aeef0d94] {
   --_switch-color: var(--rp-color-info);
 }
+.rp-switch--color-neutral[data-v-aeef0d94] {
+  --_switch-color: var(--rp-color-neutral);
+}
 .rp-switch--size-xs[data-v-aeef0d94] {
   --_track-w: 28px;
   --_track-h: 16px;

package/dist/textarea.css

@@ -3,20 +3,24 @@
   --_rp-textarea-padding-x: var(--rp-spacing-3);
   --_rp-textarea-font-size: var(--rp-font-size-base);
   --_rp-textarea-radius: var(--rp-radius-sm);
+  --_rp-textarea-valid-border: var(--rp-color-success-border-hover);
+  --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
+  --_rp-textarea-invalid-border: var(--rp-color-danger-border-hover);
+  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   box-sizing: border-box;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
-  background-color: var(--rp-color-button-default-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
 .rp-textarea[data-v-2c68871d]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
-  border-color: var(--rp-color-border-hover);
+  border-color: var(--rp-color-control-border-hover);
 }
 .rp-textarea[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-textarea[data-v-2c68871d] {
@@ -64,26 +68,32 @@
 .rp-textarea--radius-xl[data-v-2c68871d] {
   --_rp-textarea-radius: var(--rp-radius-xl);
 }
+html.dark .rp-textarea[data-v-2c68871d] {
+  --_rp-textarea-valid-border: var(--rp-color-success-fg);
+  --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  --_rp-textarea-invalid-border: var(--rp-color-danger-fg);
+  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
 .rp-textarea--disabled[data-v-2c68871d] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
 .rp-textarea--valid[data-v-2c68871d] {
-  border-color: var(--rp-color-success-fg);
+  border-color: var(--_rp-textarea-valid-border);
 }
 .rp-textarea--valid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
-  border-color: var(--rp-color-success-fg);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  border-color: var(--_rp-textarea-valid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-valid-ring);
 }
 .rp-textarea--invalid[data-v-2c68871d] {
-  border-color: var(--rp-color-danger-fg);
+  border-color: var(--_rp-textarea-invalid-border);
 }
 .rp-textarea--invalid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
-  border-color: var(--rp-color-danger-fg);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+  border-color: var(--_rp-textarea-invalid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-invalid-ring);
 }
 .rp-textarea--readonly[data-v-2c68871d] {
-  background-color: var(--rp-color-surface-muted);
+  background-color: var(--rp-color-control-readonly-bg);
 }
 .rp-textarea__native[data-v-2c68871d] {
   box-sizing: border-box;
@@ -95,11 +105,11 @@
   outline: none;
   background: transparent;
   font: inherit;
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-relaxed);
 }
 .rp-textarea__native[data-v-2c68871d]::placeholder {
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-control-placeholder);
 }
 .rp-textarea__native[data-v-2c68871d]:disabled {
   cursor: not-allowed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "packageManager": "pnpm@11.9.0",
   "engines": {
@@ -56,7 +56,7 @@
     "dev": "pnpm run storybook",
     "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
     "tokens:check": "node scripts/check-tokens.mjs",
-    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json",
+    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
     "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
@@ -86,6 +86,7 @@
     "@types/node": "^25.9.4",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser-playwright": "^4.1.9",
+    "@vue/compiler-vapor": "3.6.0-beta.17",
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
     "jsdom": "^29.1.1",

package/src/styles/_mixins.scss

@@ -104,7 +104,7 @@
 }
 
 @mixin semantic-colors($var-name) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$var-name}: var(--rp-color-#{$name}-fg);
         }
@@ -112,7 +112,7 @@
 }
 
 @mixin semantic-color-pair($color-var, $foreground-var) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$color-var}: var(--rp-color-#{$name});
             #{$foreground-var}: var(--rp-color-on-#{$name});
@@ -121,7 +121,7 @@
 }
 
 @mixin semantic-state-colors($prefix) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$prefix}-bg: var(--rp-color-#{$name});
             #{$prefix}-bg-hover: var(--rp-color-#{$name}-hover);

package/src/styles/_tokens.scss

@@ -14,6 +14,7 @@
     --rp-color-warning                   : #{$color-warning};
     --rp-color-danger                    : #{$color-danger};
     --rp-color-info                      : #{$color-info};
+    --rp-color-neutral                   : #{$color-neutral};
     --rp-color-text                      : #{$color-text};
     --rp-color-text-secondary            : #{$color-text-secondary};
     --rp-color-text-disabled             : #{$color-text-disabled};
@@ -31,12 +32,25 @@
     --rp-color-border                    : #{$color-border};
     --rp-color-border-hover              : #{$color-border-hover};
     --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
+    --rp-color-control-bg                : #{$color-gray-2};
+    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
+    --rp-color-control-fg                : var(--rp-color-text);
+    --rp-color-control-placeholder       : var(--rp-color-text-secondary);
+    --rp-color-control-icon              : var(--rp-color-text-secondary);
+    --rp-color-control-border            : var(--rp-color-border);
+    --rp-color-control-border-hover      : var(--rp-color-border-hover);
+    --rp-color-control-border-focus      : var(--rp-color-primary);
+    --rp-color-control-track-bg          : var(--rp-color-border);
+    --rp-color-control-thumb-bg          : #{$color-white};
+    --rp-color-control-selected-bg       : var(--rp-color-primary);
+    --rp-color-control-selected-fg       : var(--rp-color-on-primary);
     --rp-color-on-primary                : #{$color-on-primary};
     --rp-color-on-secondary              : #{$color-on-secondary};
     --rp-color-on-success                : #{$color-on-success};
     --rp-color-on-warning                : #{$color-on-warning};
     --rp-color-on-danger                 : #{$color-on-danger};
     --rp-color-on-info                   : #{$color-on-info};
+    --rp-color-on-neutral                : #{$color-on-neutral};
     --rp-color-primary-hover             : color-mix(in srgb, var(--rp-color-primary) 90%, #{$color-black});
     --rp-color-primary-active            : color-mix(in srgb, var(--rp-color-primary) 80%, #{$color-black});
     --rp-color-primary-subtle-bg         : #e6f4fe;
@@ -85,6 +99,14 @@
     --rp-color-info-border               : #7dcedc;
     --rp-color-info-border-hover         : #3db9cf;
     --rp-color-info-fg                   : #0d3c48;
+    --rp-color-neutral-hover             : color-mix(in srgb, var(--rp-color-neutral) 90%, #{$color-black});
+    --rp-color-neutral-active            : color-mix(in srgb, var(--rp-color-neutral) 80%, #{$color-black});
+    --rp-color-neutral-subtle-bg         : #f0f0f0;
+    --rp-color-neutral-subtle-bg-hover   : #e8e8e8;
+    --rp-color-neutral-subtle-bg-active  : #e0e0e0;
+    --rp-color-neutral-border            : #cecece;
+    --rp-color-neutral-border-hover      : #bbbbbb;
+    --rp-color-neutral-fg                : #202020;
 
     // Font sizes
     --rp-font-size-xs  : #{$font-size-xs};
@@ -137,6 +159,9 @@
     --rp-size-control-md: #{$size-control-md};
     --rp-size-control-lg: #{$size-control-lg};
 
+    // Opacity
+    --rp-opacity-disabled: #{$opacity-disabled};
+
     // Shadows
     --rp-shadow-sm  : #{$shadow-sm};
     --rp-shadow-base: #{$shadow-base};
@@ -169,6 +194,16 @@ html.dark {
     --rp-color-border                    : #3a3a3a;
     --rp-color-border-hover              : #606060;
     --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+    --rp-color-control-bg                : #191919;
+    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
+    --rp-color-control-fg                : #eeeeee;
+    --rp-color-control-placeholder       : #6e6e6e;
+    --rp-color-control-icon              : #b4b4b4;
+    --rp-color-control-border            : #3a3a3a;
+    --rp-color-control-border-hover      : #606060;
+    --rp-color-control-border-focus      : var(--rp-color-primary);
+    --rp-color-control-track-bg          : var(--rp-color-border);
+    --rp-color-control-thumb-bg          : var(--rp-color-surface-inverted);
     --rp-color-primary-subtle-bg         : #0d2847;
     --rp-color-primary-subtle-bg-hover   : #003362;
     --rp-color-primary-subtle-bg-active  : #004074;
@@ -205,6 +240,12 @@ html.dark {
     --rp-color-info-border               : #12677e;
     --rp-color-info-border-hover         : #11809c;
     --rp-color-info-fg                   : #4ccce6;
+    --rp-color-neutral-subtle-bg         : #222222;
+    --rp-color-neutral-subtle-bg-hover   : #2a2a2a;
+    --rp-color-neutral-subtle-bg-active  : #313131;
+    --rp-color-neutral-border            : #484848;
+    --rp-color-neutral-border-hover      : #606060;
+    --rp-color-neutral-fg                : #eeeeee;
 
     // Shadows
     --rp-shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.3);

package/src/styles/_variables.scss

@@ -11,6 +11,7 @@ $color-success       : #218358 !default;
 $color-warning       : #cc4e00 !default;
 $color-danger        : #ce2c31 !default;
 $color-info          : #107d98 !default;
+$color-neutral       : #646464 !default;
 $color-white         : #ffffff !default;
 $color-black         : #111111 !default;
 $color-gray-1        : #fcfcfc !default;
@@ -37,6 +38,7 @@ $color-on-success    : $color-white !default;
 $color-on-warning    : $color-white !default;
 $color-on-danger     : $color-white !default;
 $color-on-info       : $color-white !default;
+$color-on-neutral    : $color-white !default;
 
 // Font sizes
 $font-size-xs  : 0.75rem !default;