ropav 0.0.8 → 0.0.9

package/dist/radio.css

@@ -1,9 +1,9 @@
-.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[data-v-c9fb5041] {
+  --_rp-radio-color: var(--rp-color-control-selected-bg);
+  --_rp-radio-on-color: var(--rp-color-control-selected-fg);
+  --_rp-radio-size: 24px;
+  --_rp-radio-dot: 10px;
+  --_rp-radio-font-size: var(--rp-font-size-md);
   --_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);
@@ -13,15 +13,15 @@
   font-family: var(--rp-font-family);
   user-select: none;
 }
-.rp-radio--disabled[data-v-18269eb4] {
+.rp-radio--disabled[data-v-c9fb5041] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-radio[data-v-18269eb4] {
+.rp-radio[data-v-c9fb5041] {
   gap: var(--rp-spacing-2);
   font-size: var(--_rp-radio-font-size);
 }
-.rp-radio__native[data-v-18269eb4] {
+.rp-radio__native[data-v-c9fb5041] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -33,11 +33,11 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-radio__native:focus-visible + .rp-radio__dot[data-v-18269eb4] {
-  border-color: var(--rp-color-primary);
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-c9fb5041] {
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-radio__dot[data-v-18269eb4] {
+.rp-radio__dot[data-v-c9fb5041] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -49,7 +49,7 @@
   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-18269eb4]::after {
+.rp-radio__dot[data-v-c9fb5041]::after {
   content: "";
   width: var(--_rp-radio-dot);
   height: var(--_rp-radio-dot);
@@ -58,75 +58,47 @@
   transform: scale(0);
   transition: transform var(--rp-transition-fast);
 }
-.rp-radio--checked .rp-radio__dot[data-v-18269eb4] {
+.rp-radio--checked .rp-radio__dot[data-v-c9fb5041] {
   background-color: var(--_rp-radio-checked-bg);
   border-color: var(--_rp-radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-18269eb4]::after {
+.rp-radio--checked .rp-radio__dot[data-v-c9fb5041]::after {
   transform: scale(1);
 }
-.rp-radio__label[data-v-18269eb4] {
-  line-height: var(--rp-line-height-normal);
+.rp-radio__label[data-v-c9fb5041] {
+  line-height: var(--rp-line-height-md);
   color: var(--rp-color-text);
 }
-.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--outline[data-v-c9fb5041] {
   --_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--size-xs[data-v-c9fb5041] {
+  --_rp-radio-size: 16px;
   --_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--size-sm[data-v-c9fb5041] {
+  --_rp-radio-size: 20px;
   --_rp-radio-dot: 8px;
-  --_rp-radio-font-size: var(--rp-font-size-base);
+  --_rp-radio-font-size: var(--rp-font-size-sm);
 }
-.rp-radio--size-lg[data-v-18269eb4] {
-  --_rp-radio-size: 22px;
+.rp-radio--size-md[data-v-c9fb5041] {
+  --_rp-radio-size: 24px;
   --_rp-radio-dot: 10px;
+  --_rp-radio-font-size: var(--rp-font-size-md);
+}
+.rp-radio--size-lg[data-v-c9fb5041] {
+  --_rp-radio-size: 30px;
+  --_rp-radio-dot: 14px;
   --_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--size-xl[data-v-c9fb5041] {
+  --_rp-radio-size: 36px;
+  --_rp-radio-dot: 16px;
   --_rp-radio-font-size: var(--rp-font-size-xl);
-}.rp-radio-group[data-v-a2c46e46] {
+}.rp-radio-group[data-v-4ef9fed2] {
   display: flex;
   flex-direction: column;
   gap: var(--rp-spacing-3);

package/dist/radio.js

@@ -1,21 +1,22 @@
 import './radio.css';
-import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as bem } from "./bem.js";
+import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as useControlState } from "./useControlState.js";
 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 getRadioColorStyle(color, autoContrast) {
+	const colorValue = getComponentColorValue(color);
+	if (color && !colorValue) return void 0;
+	if (!colorValue && !autoContrast) return void 0;
+	const style = {};
+	if (colorValue) style["--_rp-radio-color"] = colorValue;
+	if (autoContrast) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
+	return style;
 }
 function useRadio(props) {
 	const group = useRequiredInject(radioGroupKey, "RpRadio");
@@ -23,15 +24,15 @@ function useRadio(props) {
 	const isDisabled = computed(() => props.disabled || group.disabled);
 	const variant = computed(() => props.variant ?? group.variant);
 	const color = computed(() => props.color ?? group.color);
+	const autoContrast = computed(() => props.autoContrast ?? group.autoContrast);
 	const size = computed(() => props.size ?? group.size);
 	const rootClass = computed(() => bem("rp-radio", {
 		checked: isChecked.value,
 		disabled: isDisabled.value,
 		[variant.value ?? ""]: Boolean(variant.value),
-		[`color-${color.value}`]: isComponentPresetColor(color.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
-	const rootStyle = computed(() => getRadioColorStyle(color.value));
+	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value));
 	function onSelect() {
 		if (isDisabled.value) return;
 		group.select(props.value);
@@ -72,6 +73,9 @@ function useRadioGroup(props, emitUpdate) {
 		get color() {
 			return props.color;
 		},
+		get autoContrast() {
+			return props.autoContrast;
+		},
 		get size() {
 			return props.size;
 		},
@@ -86,8 +90,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-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);
+var t0$1 = template("<span data-v-c9fb5041 class=rp-radio__label>");
+var t1 = template("<label data-v-c9fb5041><input data-v-c9fb5041 type=radio class=rp-radio__native><span data-v-c9fb5041 class=rp-radio__dot></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -97,6 +101,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		value: {},
 		variant: { default: void 0 },
 		color: { default: void 0 },
+		autoContrast: {
+			type: Boolean,
+			default: void 0
+		},
 		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -130,10 +138,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n5;
 	}
-}), [["__scopeId", "data-v-18269eb4"]]);
+}), [["__scopeId", "data-v-c9fb5041"]]);
 //#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);
+var t0 = template("<div data-v-4ef9fed2 role=radiogroup>", 1);
 //#endregion
 //#region src/components/radio/radio-group.vue
 var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -145,6 +153,10 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		modelValue: {},
 		variant: { default: void 0 },
 		color: { default: void 0 },
+		autoContrast: {
+			type: Boolean,
+			default: void 0
+		},
 		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -187,6 +199,6 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-a2c46e46"]]);
+}), [["__scopeId", "data-v-4ef9fed2"]]);
 //#endregion
 export { radio_default as n, radio_group_default as t };

package/dist/select.css

@@ -1,33 +1,77 @@
-.rp-select[data-v-9838513c] {
+.rp-select[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-md);
+  --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-select-font-size: var(--rp-font-size-md);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+  --_rp-select-option-padding-y: var(--rp-spacing-1);
   --_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);
+  --_rp-select-invalid-border: var(--rp-color-red-filled);
+  --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
+  --_rp-select-option-focused-bg: var(--rp-color-default-hover);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
-  line-height: var(--rp-line-height-none);
-}
-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] {
+  line-height: 1;
+}
+.rp-select--size-xs[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-xs);
+  --_rp-select-padding-x: calc(var(--rp-size-control-xs) / 3);
+  --_rp-select-font-size: var(--rp-font-size-xs);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
+  --_rp-select-option-padding-y: calc(var(--rp-spacing-1) / 2);
+}
+.rp-select--size-sm[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-sm);
+  --_rp-select-padding-x: calc(var(--rp-size-control-sm) / 3);
+  --_rp-select-font-size: var(--rp-font-size-sm);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
+  --_rp-select-option-padding-y: var(--rp-spacing-1);
+}
+.rp-select--size-md[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-md);
+  --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-select-font-size: var(--rp-font-size-md);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+  --_rp-select-option-padding-y: var(--rp-spacing-1);
+}
+.rp-select--size-lg[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-lg);
+  --_rp-select-padding-x: calc(var(--rp-size-control-lg) / 3);
+  --_rp-select-font-size: var(--rp-font-size-lg);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
+  --_rp-select-option-padding-y: calc(var(--rp-spacing-3) / 2);
+}
+.rp-select--size-xl[data-v-abf4b97a] {
+  --_rp-select-height: var(--rp-size-control-xl);
+  --_rp-select-padding-x: calc(var(--rp-size-control-xl) / 3);
+  --_rp-select-font-size: var(--rp-font-size-xl);
+  --_rp-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
+  --_rp-select-option-padding-y: var(--rp-spacing-2);
+}
+html.dark .rp-select[data-v-abf4b97a], [data-rp-color-scheme=dark] .rp-select[data-v-abf4b97a] {
+  --_rp-select-invalid-border: var(--rp-color-red-light-color);
+  --_rp-select-invalid-ring: color-mix(
+      in srgb,
+      var(--rp-color-red-light-color) 32%,
+      transparent
+  );
+  --_rp-select-option-focused-bg: var(--rp-color-default-hover);
+}
+.rp-select--disabled[data-v-abf4b97a] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-select__trigger[data-v-9838513c] {
+.rp-select__trigger[data-v-abf4b97a] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-content: space-between;
   width: 100%;
   min-width: 180px;
-  height: var(--rp-size-control-md);
-  padding: 0 var(--rp-spacing-3);
-  font-size: var(--rp-font-size-base);
+  height: var(--_rp-select-height);
+  padding: 0 var(--_rp-select-padding-x);
+  font-size: var(--_rp-select-font-size);
   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);
@@ -35,81 +79,81 @@ html.dark .rp-select[data-v-9838513c] {
   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 {
+.rp-select__trigger[data-v-abf4b97a]:hover {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-select__trigger[data-v-9838513c]:focus-visible {
+.rp-select__trigger[data-v-abf4b97a]:focus-visible {
   outline: none;
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--radius-xs[data-v-9838513c] {
+.rp-select--radius-xs[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-xs);
 }
-.rp-select--radius-sm[data-v-9838513c] {
+.rp-select--radius-sm[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-sm);
 }
-.rp-select--radius-md[data-v-9838513c] {
+.rp-select--radius-md[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-md);
 }
-.rp-select--radius-lg[data-v-9838513c] {
+.rp-select--radius-lg[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-lg);
 }
-.rp-select--radius-xl[data-v-9838513c] {
+.rp-select--radius-xl[data-v-abf4b97a] {
   --_rp-select-radius: var(--rp-radius-xl);
 }
-.rp-select--open .rp-select__trigger[data-v-9838513c] {
+.rp-select--open .rp-select__trigger[data-v-abf4b97a] {
   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] {
+.rp-select--invalid .rp-select__trigger[data-v-abf4b97a] {
   border-color: var(--_rp-select-invalid-border);
 }
-.rp-select--invalid .rp-select__trigger[data-v-9838513c]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-9838513c] {
+.rp-select--invalid .rp-select__trigger[data-v-abf4b97a]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-abf4b97a] {
   border-color: var(--_rp-select-invalid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-select-invalid-ring);
 }
-.rp-select__value[data-v-9838513c] {
+.rp-select__value[data-v-abf4b97a] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--rp-color-control-fg);
 }
-.rp-select__placeholder[data-v-9838513c] {
+.rp-select__placeholder[data-v-abf4b97a] {
   color: var(--rp-color-control-placeholder);
 }
-.rp-select__indicator[data-v-9838513c] {
+.rp-select__indicator[data-v-abf4b97a] {
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__indicator svg[data-v-9838513c] {
+.rp-select__indicator svg[data-v-abf4b97a] {
   width: 100%;
   height: 100%;
 }
-.rp-select__indicator[data-v-9838513c] {
+.rp-select__indicator[data-v-abf4b97a] {
   position: relative;
   color: var(--rp-color-control-icon);
   transform: translateX(var(--rp-spacing-1));
 }
-.rp-select__arrow[data-v-9838513c] {
+.rp-select__arrow[data-v-abf4b97a] {
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-9838513c] {
+.rp-select__arrow svg[data-v-abf4b97a] {
   width: 100%;
   height: 100%;
 }
-.rp-select__arrow[data-v-9838513c] {
+.rp-select__arrow[data-v-abf4b97a] {
   transition: opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-9838513c] {
+.rp-select__clear[data-v-abf4b97a] {
   padding: 0;
   font: inherit;
   background: none;
@@ -121,11 +165,11 @@ html.dark .rp-select[data-v-9838513c] {
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__clear svg[data-v-9838513c] {
+.rp-select__clear svg[data-v-abf4b97a] {
   width: 100%;
   height: 100%;
 }
-.rp-select__clear[data-v-9838513c] {
+.rp-select__clear[data-v-abf4b97a] {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -134,24 +178,24 @@ html.dark .rp-select[data-v-9838513c] {
   pointer-events: none;
   transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-9838513c]:hover {
+.rp-select__clear[data-v-abf4b97a]:hover {
   color: var(--rp-color-control-fg);
 }
-.rp-select__trigger:hover .rp-select__clear[data-v-9838513c] {
+.rp-select__trigger:hover .rp-select__clear[data-v-abf4b97a] {
   opacity: 1;
   pointer-events: auto;
 }
-.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-9838513c] {
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-abf4b97a] {
   opacity: 0;
 }
-.rp-select__dropdown[data-v-9838513c] {
+.rp-select__dropdown[data-v-abf4b97a] {
   position: absolute;
   top: calc(100% + var(--rp-spacing-2));
   left: 0;
   right: 0;
   z-index: 100;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-select-radius);
   box-shadow: var(--rp-shadow-md);
   padding: var(--rp-spacing-1) 0;
@@ -159,41 +203,41 @@ html.dark .rp-select[data-v-9838513c] {
   overflow-y: auto;
   padding: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-9838513c] {
+.rp-select__option[data-v-abf4b97a] {
   display: flex;
   align-items: center;
-  padding: var(--rp-spacing-2) var(--rp-spacing-4);
-  border-radius: calc(var(--_rp-select-radius) - var(--rp-spacing-1));
-  font-size: var(--rp-font-size-base);
+  min-height: var(--_rp-select-option-min-height);
+  padding: var(--_rp-select-option-padding-y) var(--_rp-select-padding-x);
+  border-radius: var(--_rp-select-radius);
+  font-size: var(--_rp-select-font-size);
   cursor: pointer;
-  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+  transition: color var(--rp-transition-fast);
   color: var(--rp-color-control-fg);
 }
-.rp-select__option--focused[data-v-9838513c] {
+.rp-select__option--focused[data-v-abf4b97a] {
   background-color: var(--_rp-select-option-focused-bg);
 }
-.rp-select__option--selected[data-v-9838513c] {
-  color: var(--rp-color-primary-fg);
-  font-weight: var(--rp-font-weight-medium);
+.rp-select__option--selected[data-v-abf4b97a] {
+  color: var(--rp-primary-color-light-color);
 }
-.rp-select__option--disabled[data-v-9838513c] {
-  color: var(--rp-color-text-disabled);
+.rp-select__option--disabled[data-v-abf4b97a] {
+  color: var(--rp-color-disabled-color);
   cursor: not-allowed;
 }
-.rp-select__empty[data-v-9838513c] {
+.rp-select__empty[data-v-abf4b97a] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--rp-spacing-4);
-  color: var(--rp-color-text-secondary);
-  font-size: var(--rp-font-size-base);
+  color: var(--rp-color-dimmed);
+  font-size: var(--_rp-select-font-size);
 }
-.rp-select-dropdown-enter-active[data-v-9838513c],
-.rp-select-dropdown-leave-active[data-v-9838513c] {
+.rp-select-dropdown-enter-active[data-v-abf4b97a],
+.rp-select-dropdown-leave-active[data-v-abf4b97a] {
   transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-select-dropdown-enter-from[data-v-9838513c],
-.rp-select-dropdown-leave-to[data-v-9838513c] {
+.rp-select-dropdown-enter-from[data-v-abf4b97a],
+.rp-select-dropdown-leave-to[data-v-abf4b97a] {
   opacity: 0;
   transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }

package/dist/select.js

@@ -1,9 +1,9 @@
 import './select.css';
+import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as useClickOutside } from "./useClickOutside.js";
-import { t as x_default } from "./x.js";
 import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
 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=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
@@ -104,6 +104,7 @@ function useSelect(props, emitUpdate) {
 	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
 	const rootClass = computed(() => bem("rp-select", {
 		open: isOpen.value,
+		[`size-${props.size}`]: Boolean(props.size),
 		[`radius-${props.radius}`]: Boolean(props.radius),
 		disabled: control.disabled,
 		invalid: control.invalid
@@ -224,13 +225,13 @@ function useSelect(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<input data-v-9838513c type=hidden>");
-var t1 = template("<button data-v-9838513c type=button class=rp-select__clear aria-label=\"Clear selection\"tabindex=-1></button>");
+var t0 = template("<input data-v-abf4b97a type=hidden>");
+var t1 = template("<button data-v-abf4b97a type=button class=rp-select__clear tabindex=-1></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-9838513c class=rp-select__empty>");
-var t4 = template("<div data-v-9838513c role=option> ");
-var t5 = template("<div data-v-9838513c class=rp-select__dropdown role=listbox>");
-var t6 = template("<div data-v-9838513c><div data-v-9838513c class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-9838513c> </span><span data-v-9838513c class=rp-select__indicator><span data-v-9838513c class=rp-select__arrow aria-hidden=true>", 1);
+var t3 = template("<div data-v-abf4b97a class=rp-select__empty>");
+var t4 = template("<div data-v-abf4b97a role=option> ");
+var t5 = template("<div data-v-abf4b97a class=rp-select__dropdown role=listbox>");
+var t6 = template("<div data-v-abf4b97a><div data-v-abf4b97a class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-abf4b97a> </span><span data-v-abf4b97a class=rp-select__indicator><span data-v-abf4b97a class=rp-select__arrow aria-hidden=true>", 1);
 delegateEvents("mousedown", "click", "keydown");
 //#endregion
 //#region src/components/select/select.vue
@@ -242,12 +243,14 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		name: {},
 		modelValue: {},
 		options: { default: () => [] },
+		size: {},
 		radius: {},
 		placeholder: { default: "Select..." },
 		clearable: {
 			type: Boolean,
 			default: false
 		},
+		clearLabel: { default: "Clear selection" },
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -312,6 +315,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		setInsertionState(n10, 0, 0);
 		createIf(() => unref(canClear), () => {
 			const n7 = t1();
+			renderEffect(() => setAttr(n7, "aria-label", __props.clearLabel));
 			setInsertionState(n7, null, 0);
 			createComponent(unref(x_default));
 			n7.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
@@ -373,6 +377,6 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		_setTemplateRef(n25, selectRef, null, "selectRef");
 		return n25;
 	}
-}), [["__scopeId", "data-v-9838513c"]]);
+}), [["__scopeId", "data-v-abf4b97a"]]);
 //#endregion
 export { select_default as t };