ropav 0.0.5 → 0.0.7

package/dist/progress.js

@@ -0,0 +1,178 @@
+import './progress.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
+import { t as useControlState } from "./useControlState.js";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/progress/useProgress.ts
+function normalizeProgressBounds(min, max) {
+	const safeMin = Number.isFinite(min) ? min : 0;
+	const safeMax = Number.isFinite(max) ? max : 100;
+	return safeMax >= safeMin ? {
+		min: safeMin,
+		max: safeMax
+	} : {
+		min: safeMax,
+		max: safeMin
+	};
+}
+function normalizeProgressValue(value, min, max) {
+	const safeValue = Number.isFinite(value) ? Number(value) : min;
+	return Math.min(max, Math.max(min, safeValue));
+}
+function getProgressValuePercent(value, min, max) {
+	if (max <= min) return 0;
+	const percent = (value - min) / (max - min) * 100;
+	return Math.min(100, Math.max(0, percent));
+}
+function getFormattedProgressValue(value, percent, formatter) {
+	return formatter ? formatter(value, percent) : `${Math.round(percent)}%`;
+}
+function getProgressAriaValueText(value, percent, ariaValueText, formatter) {
+	if (typeof ariaValueText === "function") return String(ariaValueText(value, percent));
+	if (ariaValueText != null && ariaValueText !== "") return String(ariaValueText);
+	if (formatter) return String(formatter(value, percent));
+}
+function setProgressStyleValue(style, property, value) {
+	if (value) style[property] = value;
+}
+function useProgress(props) {
+	const control = useControlState(props);
+	const bounds = computed(() => normalizeProgressBounds(props.min, props.max));
+	const isIndeterminate = computed(() => props.indeterminate || props.value == null);
+	const normalizedValue = computed(() => normalizeProgressValue(props.value, bounds.value.min, bounds.value.max));
+	const valuePercent = computed(() => getProgressValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
+	const formattedValue = computed(() => getFormattedProgressValue(normalizedValue.value, valuePercent.value, props.formatValue));
+	const ariaValueText = computed(() => isIndeterminate.value ? void 0 : getProgressAriaValueText(normalizedValue.value, valuePercent.value, props.ariaValueText, props.formatValue));
+	return {
+		control,
+		rootClass: computed(() => bem("rp-progress", {
+			[`color-${props.color}`]: isComponentPresetColor(props.color),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius),
+			indeterminate: isIndeterminate.value
+		})),
+		rootStyle: computed(() => {
+			const style = {
+				"--_rp-progress-value": `${valuePercent.value}%`,
+				"--_rp-progress-ratio": `${valuePercent.value / 100}`
+			};
+			setProgressStyleValue(style, "--_rp-progress-custom-color", getComponentCustomColor(props.color));
+			return style;
+		}),
+		isIndeterminate,
+		normalizedValue,
+		valuePercent,
+		formattedValue,
+		ariaValueText,
+		ariaValueMin: computed(() => isIndeterminate.value ? void 0 : bounds.value.min),
+		ariaValueMax: computed(() => isIndeterminate.value ? void 0 : bounds.value.max),
+		ariaValueNow: computed(() => isIndeterminate.value ? void 0 : normalizedValue.value)
+	};
+}
+//#endregion
+//#region src/components/progress/progress.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-7870ef03 class=rp-progress__label>");
+var t1 = template(" ");
+var t2 = template("<span data-v-7870ef03 class=rp-progress__value aria-hidden=true>");
+var t3 = template("<span data-v-7870ef03 class=rp-progress__header>");
+var t4 = template("<div data-v-7870ef03 role=progressbar><span data-v-7870ef03 class=rp-progress__track aria-hidden=true><span data-v-7870ef03 class=rp-progress__indicator>", 1);
+//#endregion
+//#region src/components/progress/progress.vue
+var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpProgress",
+	__name: "progress",
+	props: {
+		id: {},
+		value: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		color: {},
+		size: {},
+		radius: {},
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: {},
+		ariaLabel: {},
+		ariaValueText: {},
+		describedby: {},
+		labelledby: {}
+	},
+	setup(__props, { slots: $slots }) {
+		const { control, rootClass, rootStyle, isIndeterminate, normalizedValue, valuePercent, formattedValue, ariaValueText, ariaValueMin, ariaValueMax, ariaValueNow } = useProgress(__props);
+		const n15 = t4();
+		renderEffect(() => {
+			const _control = unref(control);
+			setProp(n15, "id", _control.id);
+			setClass(n15, unref(rootClass));
+			setStyle(n15, unref(rootStyle));
+			setAttr(n15, "data-state", unref(isIndeterminate) ? "indeterminate" : "determinate");
+			setAttr(n15, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n15, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n15, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n15, "aria-valuemin", unref(ariaValueMin));
+			setAttr(n15, "aria-valuemax", unref(ariaValueMax));
+			setAttr(n15, "aria-valuenow", unref(ariaValueNow));
+			setAttr(n15, "aria-valuetext", unref(ariaValueText));
+		});
+		setInsertionState(n15, 0, 0);
+		createIf(() => $slots.default || !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
+			const n14 = t3();
+			setInsertionState(n14, null, 0);
+			createIf(() => $slots.default, () => {
+				const n5 = t0();
+				setInsertionState(n5, null, 0);
+				createSlot("default", null, null, 1);
+				return n5;
+			});
+			setInsertionState(n14, null, 1);
+			createIf(() => !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
+				const n13 = t2();
+				setInsertionState(n13, null, 0);
+				createIf(() => $slots.value, () => {
+					return createSlot("value", {
+						value: () => unref(normalizedValue),
+						formattedValue: () => unref(formattedValue),
+						percent: () => unref(valuePercent)
+					}, null, 1);
+				}, () => {
+					const n12 = t1();
+					renderEffect(() => setText(n12, toDisplayString(unref(formattedValue))));
+					return n12;
+				}, 517);
+				return n13;
+			});
+			return n14;
+		});
+		return n15;
+	}
+}), [["__scopeId", "data-v-7870ef03"]]);
+//#endregion
+//#region src/components/progress/types.ts
+var progressColors = componentColors;
+var progressSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var progressRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+//#endregion
+export { progress_default as i, progressRadiuses as n, progressSizes as r, progressColors as t };
+
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../src/components/progress/useProgress.ts","../src/components/progress/progress.vue","../src/components/progress/progress.vue","../src/components/progress/types.ts"],"sourcesContent":["import { computed, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport type { ProgressProps } from './types';\n\ntype ProgressStateProps = Readonly<\n    ProgressProps & {\n        min: number;\n        max: number;\n        indeterminate: boolean;\n        showValue: boolean;\n    }\n>;\n\nexport function normalizeProgressBounds(min: number, max: number) {\n    const safeMin = Number.isFinite(min) ? min : 0;\n    const safeMax = Number.isFinite(max) ? max : 100;\n\n    return safeMax >= safeMin ? { min: safeMin, max: safeMax } : { min: safeMax, max: safeMin };\n}\n\nexport function normalizeProgressValue(value: number | null | undefined, min: number, max: number) {\n    const safeValue = Number.isFinite(value) ? Number(value) : min;\n\n    return Math.min(max, Math.max(min, safeValue));\n}\n\nexport function getProgressValuePercent(value: number, min: number, max: number) {\n    if (max <= min) return 0;\n\n    const percent = ((value - min) / (max - min)) * 100;\n    return Math.min(100, Math.max(0, percent));\n}\n\nfunction getFormattedProgressValue(\n    value: number,\n    percent: number,\n    formatter: ProgressProps['formatValue'],\n) {\n    return formatter ? formatter(value, percent) : `${Math.round(percent)}%`;\n}\n\nfunction getProgressAriaValueText(\n    value: number,\n    percent: number,\n    ariaValueText: ProgressProps['ariaValueText'],\n    formatter: ProgressProps['formatValue'],\n) {\n    if (typeof ariaValueText === 'function') return String(ariaValueText(value, percent));\n    if (ariaValueText != null && ariaValueText !== '') return String(ariaValueText);\n    if (formatter) return String(formatter(value, percent));\n\n    return undefined;\n}\n\nfunction setProgressStyleValue(\n    style: CSSProperties,\n    property: `--_rp-progress-${string}`,\n    value: string | undefined,\n) {\n    if (value) {\n        style[property] = value;\n    }\n}\n\nexport function useProgress(props: ProgressStateProps) {\n    const control = useControlState(props);\n\n    const bounds = computed(() => normalizeProgressBounds(props.min, props.max));\n    const isIndeterminate = computed(() => props.indeterminate || props.value == null);\n    const normalizedValue = computed(() =>\n        normalizeProgressValue(props.value, bounds.value.min, bounds.value.max),\n    );\n    const valuePercent = computed(() =>\n        getProgressValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max),\n    );\n    const formattedValue = computed(() =>\n        getFormattedProgressValue(normalizedValue.value, valuePercent.value, props.formatValue),\n    );\n    const ariaValueText = computed(() =>\n        isIndeterminate.value\n            ? undefined\n            : getProgressAriaValueText(\n                  normalizedValue.value,\n                  valuePercent.value,\n                  props.ariaValueText,\n                  props.formatValue,\n              ),\n    );\n    const rootClass = computed(() =>\n        bem('rp-progress', {\n            [`color-${props.color}`]: isComponentPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            indeterminate: isIndeterminate.value,\n        }),\n    );\n    const rootStyle = computed<CSSProperties>(() => {\n        const style: CSSProperties = {\n            '--_rp-progress-value': `${valuePercent.value}%`,\n            '--_rp-progress-ratio': `${valuePercent.value / 100}`,\n        };\n\n        setProgressStyleValue(\n            style,\n            '--_rp-progress-custom-color',\n            getComponentCustomColor(props.color),\n        );\n\n        return style;\n    });\n\n    return {\n        control,\n        rootClass,\n        rootStyle,\n        isIndeterminate,\n        normalizedValue,\n        valuePercent,\n        formattedValue,\n        ariaValueText,\n        ariaValueMin: computed(() => (isIndeterminate.value ? undefined : bounds.value.min)),\n        ariaValueMax: computed(() => (isIndeterminate.value ? undefined : bounds.value.max)),\n        ariaValueNow: computed(() => (isIndeterminate.value ? undefined : normalizedValue.value)),\n    };\n}\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        role=\"progressbar\"\n        :data-state=\"isIndeterminate ? 'indeterminate' : 'determinate'\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-valuemin=\"ariaValueMin\"\n        :aria-valuemax=\"ariaValueMax\"\n        :aria-valuenow=\"ariaValueNow\"\n        :aria-valuetext=\"ariaValueText\"\n    >\n        <span\n            v-if=\"$slots.default || (!isIndeterminate && ($slots.value || showValue))\"\n            class=\"rp-progress__header\"\n        >\n            <span v-if=\"$slots.default\" class=\"rp-progress__label\">\n                <slot />\n            </span>\n            <span\n                v-if=\"!isIndeterminate && ($slots.value || showValue)\"\n                class=\"rp-progress__value\"\n                aria-hidden=\"true\"\n            >\n                <slot\n                    v-if=\"$slots.value\"\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n                <template v-else>{{ formattedValue }}</template>\n            </span>\n        </span>\n        <span class=\"rp-progress__track\" aria-hidden=\"true\">\n            <span class=\"rp-progress__indicator\" />\n        </span>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport type { ProgressProps } from './types';\nimport { useProgress } from './useProgress';\n\ndefineOptions({ name: 'RpProgress' });\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    min: 0,\n    max: 100,\n    indeterminate: false,\n    showValue: false,\n});\n\nconst {\n    control,\n    rootClass,\n    rootStyle,\n    isIndeterminate,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    ariaValueMin,\n    ariaValueMax,\n    ariaValueNow,\n} = useProgress(props);\n</script>\n\n<style src=\"./progress.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        role=\"progressbar\"\n        :data-state=\"isIndeterminate ? 'indeterminate' : 'determinate'\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-valuemin=\"ariaValueMin\"\n        :aria-valuemax=\"ariaValueMax\"\n        :aria-valuenow=\"ariaValueNow\"\n        :aria-valuetext=\"ariaValueText\"\n    >\n        <span\n            v-if=\"$slots.default || (!isIndeterminate && ($slots.value || showValue))\"\n            class=\"rp-progress__header\"\n        >\n            <span v-if=\"$slots.default\" class=\"rp-progress__label\">\n                <slot />\n            </span>\n            <span\n                v-if=\"!isIndeterminate && ($slots.value || showValue)\"\n                class=\"rp-progress__value\"\n                aria-hidden=\"true\"\n            >\n                <slot\n                    v-if=\"$slots.value\"\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n                <template v-else>{{ formattedValue }}</template>\n            </span>\n        </span>\n        <span class=\"rp-progress__track\" aria-hidden=\"true\">\n            <span class=\"rp-progress__indicator\" />\n        </span>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport type { ProgressProps } from './types';\nimport { useProgress } from './useProgress';\n\ndefineOptions({ name: 'RpProgress' });\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    min: 0,\n    max: 100,\n    indeterminate: false,\n    showValue: false,\n});\n\nconst {\n    control,\n    rootClass,\n    rootStyle,\n    isIndeterminate,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    ariaValueMin,\n    ariaValueMax,\n    ariaValueNow,\n} = useProgress(props);\n</script>\n\n<style src=\"./progress.scss\" lang=\"scss\" scoped></style>\n","import { componentColors, type ComponentColorValue } from '../../utils/componentColors';\n\nexport const progressColors = componentColors;\n\nexport const progressSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const progressRadiuses = ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport type ProgressColor = ComponentColorValue;\n\nexport type ProgressSize = (typeof progressSizes)[number];\n\nexport type ProgressRadius = (typeof progressRadiuses)[number];\n\nexport type ProgressValueFormatter = (value: number, percent: number) => string | number;\n\nexport interface ProgressProps {\n    id?: string;\n    value?: number | null;\n    min?: number;\n    max?: number;\n    color?: ProgressColor;\n    size?: ProgressSize;\n    radius?: ProgressRadius;\n    indeterminate?: boolean;\n    showValue?: boolean;\n    formatValue?: ProgressValueFormatter;\n    ariaLabel?: string;\n    ariaValueText?: string | ProgressValueFormatter;\n    describedby?: string;\n    labelledby?: string;\n}\n"],"mappings":"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"}

package/dist/radio.css

@@ -1,27 +1,27 @@
-.rp-radio[data-v-ecddd6c8] {
-  --_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);
-  --_radio-checked-bg: var(--_radio-color);
-  --_radio-checked-border: var(--_radio-color);
-  --_radio-checked-dot: var(--_radio-on-color);
+.rp-radio[data-v-18269eb4] {
+  --_rp-radio-color: var(--_rp-radio-custom-color, var(--rp-color-control-selected-bg));
+  --_rp-radio-on-color: var(--_rp-radio-custom-on-color, var(--rp-color-control-selected-fg));
+  --_rp-radio-size: 18px;
+  --_rp-radio-dot: 8px;
+  --_rp-radio-font-size: var(--rp-font-size-base);
+  --_rp-radio-checked-bg: var(--_rp-radio-color);
+  --_rp-radio-checked-border: var(--_rp-radio-color);
+  --_rp-radio-checked-dot: var(--_rp-radio-on-color);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
-.rp-radio--disabled[data-v-ecddd6c8] {
+.rp-radio--disabled[data-v-18269eb4] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-radio[data-v-ecddd6c8] {
+.rp-radio[data-v-18269eb4] {
   gap: var(--rp-spacing-2);
-  font-size: var(--_radio-font-size);
+  font-size: var(--_rp-radio-font-size);
 }
-.rp-radio__native[data-v-ecddd6c8] {
+.rp-radio__native[data-v-18269eb4] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -33,99 +33,99 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-radio__native:focus-visible + .rp-radio__dot[data-v-ecddd6c8] {
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-18269eb4] {
   border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-radio__dot[data-v-ecddd6c8] {
+.rp-radio__dot[data-v-18269eb4] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--_radio-size);
-  height: var(--_radio-size);
+  width: var(--_rp-radio-size);
+  height: var(--_rp-radio-size);
   flex-shrink: 0;
   border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
   border-radius: var(--rp-radius-full);
   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 {
+.rp-radio__dot[data-v-18269eb4]::after {
   content: "";
-  width: var(--_radio-dot);
-  height: var(--_radio-dot);
+  width: var(--_rp-radio-dot);
+  height: var(--_rp-radio-dot);
   border-radius: var(--rp-radius-full);
-  background-color: var(--_radio-checked-dot);
+  background-color: var(--_rp-radio-checked-dot);
   transform: scale(0);
   transition: transform var(--rp-transition-fast);
 }
-.rp-radio--checked .rp-radio__dot[data-v-ecddd6c8] {
-  background-color: var(--_radio-checked-bg);
-  border-color: var(--_radio-checked-border);
+.rp-radio--checked .rp-radio__dot[data-v-18269eb4] {
+  background-color: var(--_rp-radio-checked-bg);
+  border-color: var(--_rp-radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-ecddd6c8]::after {
+.rp-radio--checked .rp-radio__dot[data-v-18269eb4]::after {
   transform: scale(1);
 }
-.rp-radio__label[data-v-ecddd6c8] {
+.rp-radio__label[data-v-18269eb4] {
   line-height: var(--rp-line-height-normal);
   color: var(--rp-color-text);
 }
-.rp-radio--color-primary[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-primary);
-  --_radio-on-color: var(--rp-color-on-primary);
-}
-.rp-radio--color-secondary[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-secondary);
-  --_radio-on-color: var(--rp-color-on-secondary);
-}
-.rp-radio--color-success[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-success);
-  --_radio-on-color: var(--rp-color-on-success);
-}
-.rp-radio--color-warning[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-warning);
-  --_radio-on-color: var(--rp-color-on-warning);
-}
-.rp-radio--color-danger[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-danger);
-  --_radio-on-color: var(--rp-color-on-danger);
-}
-.rp-radio--color-info[data-v-ecddd6c8] {
-  --_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-control-bg);
-  --_radio-checked-border: var(--_radio-color);
-  --_radio-checked-dot: var(--_radio-color);
-}
-.rp-radio--size-xs[data-v-ecddd6c8] {
-  --_radio-size: 14px;
-  --_radio-dot: 6px;
-  --_radio-font-size: var(--rp-font-size-xs);
-}
-.rp-radio--size-sm[data-v-ecddd6c8] {
-  --_radio-size: 16px;
-  --_radio-dot: 7px;
-  --_radio-font-size: var(--rp-font-size-sm);
-}
-.rp-radio--size-md[data-v-ecddd6c8] {
-  --_radio-size: 18px;
-  --_radio-dot: 8px;
-  --_radio-font-size: var(--rp-font-size-base);
-}
-.rp-radio--size-lg[data-v-ecddd6c8] {
-  --_radio-size: 22px;
-  --_radio-dot: 10px;
-  --_radio-font-size: var(--rp-font-size-lg);
-}
-.rp-radio--size-xl[data-v-ecddd6c8] {
-  --_radio-size: 26px;
-  --_radio-dot: 12px;
-  --_radio-font-size: var(--rp-font-size-xl);
+.rp-radio--color-primary[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-primary);
+  --_rp-radio-on-color: var(--rp-color-on-primary);
+}
+.rp-radio--color-secondary[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-secondary);
+  --_rp-radio-on-color: var(--rp-color-on-secondary);
+}
+.rp-radio--color-success[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-success);
+  --_rp-radio-on-color: var(--rp-color-on-success);
+}
+.rp-radio--color-warning[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-warning);
+  --_rp-radio-on-color: var(--rp-color-on-warning);
+}
+.rp-radio--color-danger[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-danger);
+  --_rp-radio-on-color: var(--rp-color-on-danger);
+}
+.rp-radio--color-info[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-info);
+  --_rp-radio-on-color: var(--rp-color-on-info);
+}
+.rp-radio--color-neutral[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-neutral);
+  --_rp-radio-on-color: var(--rp-color-on-neutral);
+}
+.rp-radio--outline[data-v-18269eb4] {
+  --_rp-radio-checked-bg: var(--rp-color-control-bg);
+  --_rp-radio-checked-border: var(--_rp-radio-color);
+  --_rp-radio-checked-dot: var(--_rp-radio-color);
+}
+.rp-radio--size-xs[data-v-18269eb4] {
+  --_rp-radio-size: 14px;
+  --_rp-radio-dot: 6px;
+  --_rp-radio-font-size: var(--rp-font-size-xs);
+}
+.rp-radio--size-sm[data-v-18269eb4] {
+  --_rp-radio-size: 16px;
+  --_rp-radio-dot: 7px;
+  --_rp-radio-font-size: var(--rp-font-size-sm);
+}
+.rp-radio--size-md[data-v-18269eb4] {
+  --_rp-radio-size: 18px;
+  --_rp-radio-dot: 8px;
+  --_rp-radio-font-size: var(--rp-font-size-base);
+}
+.rp-radio--size-lg[data-v-18269eb4] {
+  --_rp-radio-size: 22px;
+  --_rp-radio-dot: 10px;
+  --_rp-radio-font-size: var(--rp-font-size-lg);
+}
+.rp-radio--size-xl[data-v-18269eb4] {
+  --_rp-radio-size: 26px;
+  --_rp-radio-dot: 12px;
+  --_rp-radio-font-size: var(--rp-font-size-xl);
 }.rp-radio-group[data-v-a2c46e46] {
   display: flex;
   flex-direction: column;

package/dist/radio.js

@@ -1,18 +1,22 @@
 import './radio.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, inject, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref, useId } from "vue";
-//#region src/composables/useRequiredInject.ts
-function useRequiredInject(key, componentName) {
-	const value = inject(key);
-	if (value == null) throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);
-	return value;
-}
-//#endregion
+import { child, computed, createIf, createSlot, defineVaporComponent, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setValue, template, unref, useId } from "vue";
 //#region src/components/radio/types.ts
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
+function getRadioColorStyle(color) {
+	const customColor = getComponentCustomColor(color);
+	if (!customColor) return void 0;
+	return {
+		"--_rp-radio-custom-color": customColor,
+		"--_rp-radio-custom-on-color": "var(--rp-color-on-primary)"
+	};
+}
 function useRadio(props) {
 	const group = useRequiredInject(radioGroupKey, "RpRadio");
 	const isChecked = computed(() => group.modelValue === props.value);
@@ -24,9 +28,10 @@ function useRadio(props) {
 		checked: isChecked.value,
 		disabled: isDisabled.value,
 		[variant.value ?? ""]: Boolean(variant.value),
-		[`color-${color.value}`]: Boolean(color.value),
+		[`color-${color.value}`]: isComponentPresetColor(color.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
+	const rootStyle = computed(() => getRadioColorStyle(color.value));
 	function onSelect() {
 		if (isDisabled.value) return;
 		group.select(props.value);
@@ -36,6 +41,7 @@ function useRadio(props) {
 		isChecked,
 		isDisabled,
 		rootClass,
+		rootStyle,
 		onSelect
 	};
 }
@@ -80,8 +86,8 @@ function useRadioGroup(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-ecddd6c8 class=rp-radio__label>");
-var t1 = template("<label data-v-ecddd6c8><input data-v-ecddd6c8 type=radio class=rp-radio__native><span data-v-ecddd6c8 class=rp-radio__dot></span>", 1);
+var t0$1 = template("<span data-v-18269eb4 class=rp-radio__label>");
+var t1 = template("<label data-v-18269eb4><input data-v-18269eb4 type=radio class=rp-radio__native><span data-v-18269eb4 class=rp-radio__dot></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -98,7 +104,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}
 	},
 	setup(__props, { slots: $slots }) {
-		const { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(__props);
+		const { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(__props);
 		const n5 = t1();
 		const n0 = child(n5);
 		on(n0, "change", (e) => unref(onSelect)(e));
@@ -106,6 +112,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const _isChecked = unref(isChecked);
 			const _group = unref(group);
 			setClass(n5, unref(rootClass));
+			setStyle(n5, unref(rootStyle));
 			setAttr(n5, "data-disabled", unref(isDisabled) || void 0);
 			setAttr(n5, "data-state", _isChecked ? "checked" : "unchecked");
 			setProp(n0, "name", _group.name);
@@ -123,7 +130,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n5;
 	}
-}), [["__scopeId", "data-v-ecddd6c8"]]);
+}), [["__scopeId", "data-v-18269eb4"]]);
 //#endregion
 //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-v-a2c46e46 role=radiogroup>", 1);

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 =\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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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../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 type { InjectionKey } from 'vue';\nimport type { ComponentColorValue } from '../../utils/componentColors';\n\nexport type RadioColor = ComponentColorValue;\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, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\n\nfunction getRadioColorStyle(color: RadioProps['color']) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-radio-custom-color': customColor,\n        '--_rp-radio-custom-on-color': 'var(--rp-color-on-primary)',\n    } satisfies CSSProperties;\n}\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}`]: isComponentPresetColor(color.value),\n            [`size-${size.value}`]: Boolean(size.value),\n        }),\n    );\n\n    const rootStyle = computed(() => getRadioColorStyle(color.value));\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        rootStyle,\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        :style=\"rootStyle\"\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, rootStyle, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\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, rootStyle, 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":";;;;;;;AA2CA,IAAa,gBAAgB,OAAO,YAAY;;;ACnChD,SAAS,mBAAmB,OAA4B;CACpD,MAAM,cAAc,wBAAwB,KAAK;CACjD,IAAI,CAAC,aAAa,OAAO,KAAA;CAEzB,OAAO;EACH,4BAA4B;EAC5B,+BAA+B;CACnC;AACJ;AAEA,SAAgB,SAAS,OAA6B;CAClD,MAAM,QAAQ,kBAAkB,eAAe,SAAS;CACxD,MAAM,YAAY,eAAe,MAAM,eAAe,MAAM,KAAK;CACjE,MAAM,aAAa,eAAe,MAAM,YAAY,MAAM,QAAQ;CAClE,MAAM,UAAU,eAAe,MAAM,WAAW,MAAM,OAAO;CAC7D,MAAM,QAAQ,eAAe,MAAM,SAAS,MAAM,KAAK;CACvD,MAAM,OAAO,eAAe,MAAM,QAAQ,MAAM,IAAI;CAEpD,MAAM,YAAY,eACd,IAAI,YAAY;EACZ,SAAS,UAAU;EACnB,UAAU,WAAW;GACpB,QAAQ,SAAS,KAAK,QAAQ,QAAQ,KAAK;GAC3C,SAAS,MAAM,UAAU,uBAAuB,MAAM,KAAK;GAC3D,QAAQ,KAAK,UAAU,QAAQ,KAAK,KAAK;CAC9C,CAAC,CACL;CAEA,MAAM,YAAY,eAAe,mBAAmB,MAAM,KAAK,CAAC;CAEhE,SAAS,WAAW;EAChB,IAAI,WAAW,OAAO;EACtB,MAAM,OAAO,MAAM,KAAK;CAC5B;CAEA,OAAO;EACH;EACA;EACA;EACA;EACA;EACA;CACJ;AACJ;AAEA,SAAgB,cACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,kBAAkB;EAClB,UAAU,QAAQ;EAClB,SAAS,QAAQ;CACrB,CAAC,CACL;CAEA,MAAM,gBAAgB,MAAM;CAC5B,MAAM,YAAY,eAAe,MAAM,QAAQ,GAAG,QAAQ,MAAM,cAAc,OAAO;CAErF,QAA2B,eAAe;EACtC,IAAI,aAAa;GACb,OAAO,MAAM;EACjB;EACA,IAAI,OAAO;GACP,OAAO,UAAU;EACrB;EACA,IAAI,WAAW;GACX,OAAO,QAAQ;EACnB;EACA,IAAI,WAAW;GACX,OAAO,QAAQ;EACnB;EACA,IAAI,UAAU;GACV,OAAO,MAAM;EACjB;EACA,IAAI,QAAQ;GACR,OAAO,MAAM;EACjB;EACA,IAAI,OAAO;GACP,OAAO,MAAM;EACjB;EACA,OAAO,OAAO;GACV,WAAW,KAAK;EACpB;CACJ,CAAC;CAED,OAAO;EACH;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;EC/DA,MAAM,EAAE,OAAO,WAAW,YAAY,WAAW,WAAW,aAAa,SAAS,OAAK;;;SAtB1E,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;gBAbb,MAAA,SAAA,CAAS;gBACT,MAAA,SAAA,CAAS;eAChB,iBAAe,MAAA,UAAA,KAAc,KAAA,CAAS;eACtC,cAAY,aAAS,YAAA,WAAA;eAKjB,QAAM,OAAK,IAAA;gBACJ,QAAA,KAAK;eACZ,WAAS,UAAS;eAClB,YAAU,MAAA,UAAA,KAAc,KAAA,CAAS;eACjC,YAAU,OAAK,YAAa,KAAA,CAAS;;;iBAI9B,OAAM,eAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEK1B,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,cAAc,cAAc,QAAQ,UAAU;GAC3D,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;;eApCQ,MAAI,SAAO,EAAA;gBACJ,MAAA,SAAA,CAAS;eAEhB,iBAAe,SAAO,YAAa,KAAA,CAAS;eAC5C,gBAAc,oBAAmB,KAAA,CAAS;eAC1C,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,oBAAmB,KAAA,CAAS;eAC1C,iBAAe,SAAO,YAAa,KAAA,CAAS"}

package/dist/select.css

@@ -2,6 +2,7 @@
   --_rp-select-radius: var(--rp-radius-sm);
   --_rp-select-invalid-border: var(--rp-color-danger);
   --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  --_rp-select-option-focused-bg: var(--rp-color-surface-hover);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
@@ -11,6 +12,7 @@
 html.dark .rp-select[data-v-9838513c] {
   --_rp-select-invalid-border: var(--rp-color-danger-fg);
   --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+  --_rp-select-option-focused-bg: var(--rp-color-button-default-bg-active);
 }
 .rp-select--disabled[data-v-9838513c] {
   opacity: var(--rp-opacity-disabled);
@@ -168,7 +170,7 @@ html.dark .rp-select[data-v-9838513c] {
   color: var(--rp-color-control-fg);
 }
 .rp-select__option--focused[data-v-9838513c] {
-  background-color: var(--rp-color-surface-hover);
+  background-color: var(--_rp-select-option-focused-bg);
 }
 .rp-select__option--selected[data-v-9838513c] {
   color: var(--rp-color-primary-fg);