ropav 0.0.2 → 0.0.3

package/dist/switch.js

@@ -8,7 +8,9 @@ function useSwitch(props, emitUpdate) {
 	const rootClass = computed(() => bem("rp-switch", {
 		checked: props.modelValue,
 		disabled: control.disabled,
-		invalid: control.invalid
+		invalid: control.invalid,
+		[`color-${props.color}`]: Boolean(props.color),
+		[`size-${props.size}`]: Boolean(props.size)
 	}));
 	function onChange(e) {
 		emitUpdate(e.target.checked);
@@ -21,8 +23,8 @@ function useSwitch(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-8d0cc56f class=rp-switch__label>");
-var t1 = template("<label data-v-8d0cc56f><input data-v-8d0cc56f type=checkbox class=rp-switch__native role=switch><span data-v-8d0cc56f class=rp-switch__track><span data-v-8d0cc56f class=rp-switch__thumb></span></span>", 1);
+var t0 = template("<span data-v-aeef0d94 class=rp-switch__label>");
+var t1 = template("<label data-v-aeef0d94><input data-v-aeef0d94 type=checkbox class=rp-switch__native role=switch><span data-v-aeef0d94 class=rp-switch__track><span data-v-aeef0d94 class=rp-switch__thumb></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -32,6 +34,8 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		id: {},
 		name: {},
 		modelValue: { type: Boolean },
+		color: {},
+		size: {},
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -87,7 +91,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n5;
 	}
-}), [["__scopeId", "data-v-8d0cc56f"]]);
+}), [["__scopeId", "data-v-aeef0d94"]]);
 //#endregion
 export { switch_default as t };
 

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/components/switch/useSwitch.ts","../src/components/switch/switch.vue","../src/components/switch/switch.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { SwitchProps } from './types';\n\nexport function useSwitch(\n    props: Readonly<SwitchProps>,\n    emitUpdate: (value: boolean) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-switch', {\n            checked: props.modelValue,\n            disabled: control.disabled,\n            invalid: control.invalid,\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 :class=\"rootClass\" :data-disabled=\"control.disabled || undefined\" :data-state=\"modelValue ? 'checked' : 'unchecked'\">\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label :class=\"rootClass\" :data-disabled=\"control.disabled || undefined\" :data-state=\"modelValue ? 'checked' : 'unchecked'\">\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAgB,UACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;CACrB,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECMA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,UAAU,QAAQ,UAAU;GACjE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;SA7BY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;gBAhBV,MAAA,SAAA,CAAS;eAAG,iBAAe,qBAAoB,KAAA,CAAS;eAAG,cAAY,cAAU,YAAA,WAAA;eAEvF,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAIV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,gBAAc,WAAU;eACxB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAMrC,OAAM,eAAA"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/components/switch/useSwitch.ts","../src/components/switch/switch.vue","../src/components/switch/switch.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { SwitchProps } from './types';\n\nexport function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-switch', {\n            checked: props.modelValue,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [`color-${props.color}`]: Boolean(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\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=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAgB,UAAU,OAA8B,YAAsC;CAC1F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;CAC9C,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECWA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,UAAU,QAAQ,UAAU;GACjE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;SA7BY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;gBAnBb,MAAA,SAAA,CAAS;eAChB,iBAAe,qBAAoB,KAAA,CAAS;eAC5C,cAAY,cAAU,YAAA,WAAA;eAGlB,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAIV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,gBAAc,WAAU;eACxB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAMrC,OAAM,eAAA"}

package/dist/textarea.css

@@ -1,46 +1,106 @@
-.rp-textarea[data-v-84020885] {
+.rp-textarea[data-v-2c68871d] {
+  --_rp-textarea-padding-y: var(--rp-spacing-3);
+  --_rp-textarea-padding-x: var(--rp-spacing-3);
+  --_rp-textarea-font-size: var(--rp-font-size-base);
+  --_rp-textarea-radius: var(--rp-radius-sm);
   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-control-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+  background-color: var(--rp-color-button-default-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-textarea[data-v-84020885]:hover:not(.rp-textarea--disabled) {
-  border-color: var(--rp-color-control-border-hover);
+.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);
 }
-.rp-textarea[data-v-84020885]:focus-within:not(.rp-textarea--disabled) {
-  border-color: var(--rp-color-control-border-focus);
+.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);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-textarea[data-v-84020885] {
-  padding: var(--rp-spacing-3) var(--rp-spacing-4);
-  font-size: var(--rp-font-size-base);
-  border-radius: var(--rp-radius-lg);
+.rp-textarea[data-v-2c68871d] {
+  padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
+  font-size: var(--_rp-textarea-font-size);
+  border-radius: var(--_rp-textarea-radius);
 }
-.rp-textarea--disabled[data-v-84020885] {
+.rp-textarea--size-xs[data-v-2c68871d] {
+  --_rp-textarea-padding-y: var(--rp-spacing-1);
+  --_rp-textarea-padding-x: var(--rp-spacing-1);
+  --_rp-textarea-font-size: var(--rp-font-size-xs);
+}
+.rp-textarea--size-sm[data-v-2c68871d] {
+  --_rp-textarea-padding-y: var(--rp-spacing-2);
+  --_rp-textarea-padding-x: var(--rp-spacing-2);
+  --_rp-textarea-font-size: var(--rp-font-size-sm);
+}
+.rp-textarea--size-md[data-v-2c68871d] {
+  --_rp-textarea-padding-y: var(--rp-spacing-3);
+  --_rp-textarea-padding-x: var(--rp-spacing-3);
+  --_rp-textarea-font-size: var(--rp-font-size-base);
+}
+.rp-textarea--size-lg[data-v-2c68871d] {
+  --_rp-textarea-padding-y: var(--rp-spacing-4);
+  --_rp-textarea-padding-x: var(--rp-spacing-4);
+  --_rp-textarea-font-size: var(--rp-font-size-lg);
+}
+.rp-textarea--size-xl[data-v-2c68871d] {
+  --_rp-textarea-padding-y: var(--rp-spacing-5);
+  --_rp-textarea-padding-x: var(--rp-spacing-5);
+  --_rp-textarea-font-size: var(--rp-font-size-lg);
+}
+.rp-textarea--radius-xs[data-v-2c68871d] {
+  --_rp-textarea-radius: var(--rp-radius-sm);
+}
+.rp-textarea--radius-sm[data-v-2c68871d] {
+  --_rp-textarea-radius: var(--rp-radius-sm);
+}
+.rp-textarea--radius-md[data-v-2c68871d] {
+  --_rp-textarea-radius: var(--rp-radius-md);
+}
+.rp-textarea--radius-lg[data-v-2c68871d] {
+  --_rp-textarea-radius: var(--rp-radius-lg);
+}
+.rp-textarea--radius-xl[data-v-2c68871d] {
+  --_rp-textarea-radius: var(--rp-radius-xl);
+}
+.rp-textarea--disabled[data-v-2c68871d] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-textarea--invalid[data-v-84020885] {
+.rp-textarea--valid[data-v-2c68871d] {
+  border-color: var(--rp-color-success-fg);
+}
+.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);
+}
+.rp-textarea--invalid[data-v-2c68871d] {
+  border-color: var(--rp-color-danger-fg);
+}
+.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);
 }
-.rp-textarea--readonly[data-v-84020885] {
-  background-color: var(--rp-color-control-readonly-bg);
+.rp-textarea--readonly[data-v-2c68871d] {
+  background-color: var(--rp-color-surface-muted);
 }
-.rp-textarea__native[data-v-84020885] {
+.rp-textarea__native[data-v-2c68871d] {
+  box-sizing: border-box;
   flex: 1;
+  width: 100%;
   min-width: 0;
+  padding: 0;
   border: none;
   outline: none;
   background: transparent;
   font: inherit;
-  color: var(--rp-color-control-fg);
+  color: var(--rp-color-text);
   line-height: var(--rp-line-height-relaxed);
 }
-.rp-textarea__native[data-v-84020885]::placeholder {
-  color: var(--rp-color-control-placeholder);
+.rp-textarea__native[data-v-2c68871d]::placeholder {
+  color: var(--rp-color-text-secondary);
 }
-.rp-textarea__native[data-v-84020885]:disabled {
+.rp-textarea__native[data-v-2c68871d]:disabled {
   cursor: not-allowed;
 }

package/dist/textarea.js

@@ -3,26 +3,47 @@ import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createInvoker, defineVaporComponent, delegateEvents, renderEffect, setAttr, setClass, setProp, setValue, template, unref } from "vue";
 //#region src/components/textarea/useTextarea.ts
+function isInteractiveElement(target) {
+	return Boolean(target.closest([
+		"button",
+		"a[href]",
+		"input",
+		"select",
+		"textarea:not(.rp-textarea__native)",
+		"[contenteditable=\"true\"]",
+		"[tabindex]:not([tabindex=\"-1\"])"
+	].join(",")));
+}
 function useTextarea(props, emitUpdate) {
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-textarea", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
 		disabled: control.disabled,
 		invalid: control.invalid,
+		valid: control.valid && !control.invalid,
 		readonly: props.readonly
 	}));
 	function onInput(e) {
 		emitUpdate(e.target.value);
 	}
+	function focusTextarea(e) {
+		if (control.disabled) return;
+		const target = e.target;
+		if (target instanceof Element && isInteractiveElement(target)) return;
+		e.currentTarget.querySelector(".rp-textarea__native")?.focus();
+	}
 	return {
 		control,
 		rootClass,
-		onInput
+		onInput,
+		focusTextarea
 	};
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-84020885><textarea data-v-84020885 class=rp-textarea__native>", 1);
-delegateEvents("input");
+var t0 = template("<div data-v-2c68871d><textarea data-v-2c68871d class=rp-textarea__native>", 1);
+delegateEvents("input", "mousedown");
 //#endregion
 //#region src/components/textarea/textarea.vue
 var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -32,6 +53,8 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		id: {},
 		name: {},
 		modelValue: {},
+		size: {},
+		radius: {},
 		placeholder: { default: "" },
 		rows: { default: 3 },
 		disabled: {
@@ -50,6 +73,10 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: void 0
 		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
 		ariaLabel: {},
 		describedby: {},
 		labelledby: {}
@@ -58,12 +85,13 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, onInput } = useTextarea(props, (value) => {
+		const { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {
 			emit("update:modelValue", value);
 		});
 		const n1 = t0();
 		const n0 = child(n1);
 		n0.$evtinput = createInvoker((e) => unref(onInput)(e));
+		n1.$evtmousedown = createInvoker((e) => unref(focusTextarea)(e));
 		renderEffect(() => {
 			const _control = unref(control);
 			const _control_required = _control.required;
@@ -84,7 +112,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-84020885"]]);
+}), [["__scopeId", "data-v-2c68871d"]]);
 //#endregion
 export { textarea_default as t };
 

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../src/components/textarea/useTextarea.ts","../src/components/textarea/textarea.vue","../src/components/textarea/textarea.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { TextareaProps } from './types';\n\nexport function useTextarea(\n    props: Readonly<TextareaProps>,\n    emitUpdate: (value: string) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n    }\n\n    return {\n        control,\n        rootClass,\n        onInput,\n    };\n}\n","<template>\n    <div :class=\"rootClass\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || 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            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || 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            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAgB,YACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,UAAU,MAAM;CACpB,CAAC,CACL;CAEA,SAAS,QAAQ,GAAU;EACvB,WAAY,EAAE,OAA+B,KAAK;CACtD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECAA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,YAAY,YAAY,QAAQ,UAAU;GAClE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;sCA1BmB,MAAA,OAAA,CAAO,CAAA,CAAA,CAAA;;;;gBAhBV,MAAA,SAAA,CAAS;eAEb,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;gBAEH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,QAAM,QAAA,IAAI;eACV,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/components/textarea/useTextarea.ts","../src/components/textarea/textarea.vue","../src/components/textarea/textarea.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { TextareaProps } from './types';\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input',\n                'select',\n                'textarea:not(.rp-textarea__native)',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n\nexport function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n    }\n\n    function focusTextarea(e: MouseEvent) {\n        if (control.disabled) return;\n\n        const target = e.target;\n        if (target instanceof Element && isInteractiveElement(target)) return;\n\n        (e.currentTarget as HTMLElement)\n            .querySelector<HTMLTextAreaElement>('.rp-textarea__native')\n            ?.focus();\n    }\n\n    return {\n        control,\n        rootClass,\n        onInput,\n        focusTextarea,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || 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            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || 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            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAS,qBAAqB,QAAiB;CAC3C,OAAO,QACH,OAAO,QACH;EACI;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC,CAAC,KAAK,GAAG,CACd,CACJ;AACJ;AAEA,SAAgB,YAAY,OAAgC,YAAqC;CAC7F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;GACd,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EAChD,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,OAAO,QAAQ,SAAS,CAAC,QAAQ;EACjC,UAAU,MAAM;CACpB,CAAC,CACL;CAEA,SAAS,QAAQ,GAAU;EACvB,WAAY,EAAE,OAA+B,KAAK;CACtD;CAEA,SAAS,cAAc,GAAe;EAClC,IAAI,QAAQ,UAAU;EAEtB,MAAM,SAAS,EAAE;EACjB,IAAI,kBAAkB,WAAW,qBAAqB,MAAM,GAAG;EAE/D,EAAG,cACE,cAAmC,sBAAsB,CAAC,EACzD,MAAM;CAChB;CAEA,OAAO;EACH;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC5BA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,SAAS,kBAAkB,YAAY,QAAQ,UAAU;GACjF,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;sCA3BmB,MAAA,OAAA,CAAO,CAAA,CAAA,CAAA;0CAhBa,MAAA,aAAA,CAAa,CAAA,CAAA,CAAA;;;;gBAApC,MAAA,SAAA,CAAS;eAEb,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;gBAEH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,QAAM,QAAA,IAAI;eACV,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS"}

package/dist/useControlState.js

@@ -9,6 +9,7 @@ function useControlState(options = {}) {
 	const disabled = computed(() => options.disabled ?? false);
 	const required = computed(() => options.required ?? false);
 	const invalid = computed(() => options.invalid ?? false);
+	const valid = computed(() => options.valid ?? false);
 	const ariaDescribedby = computed(() => mergeIds(options.describedby));
 	const ariaLabelledby = computed(() => mergeIds(options.labelledby));
 	return {
@@ -24,6 +25,9 @@ function useControlState(options = {}) {
 		get invalid() {
 			return invalid.value;
 		},
+		get valid() {
+			return valid.value;
+		},
 		get ariaDescribedby() {
 			return ariaDescribedby.value;
 		},

package/dist/useControlState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlState.js","names":[],"sources":["../src/composables/useControlState.ts"],"sourcesContent":["import { computed } from 'vue';\n\nexport interface ControlStateOptions {\n    id?: string;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface ControlState {\n    id: string | undefined;\n    disabled: boolean;\n    required: boolean;\n    invalid: boolean;\n    ariaDescribedby: string | undefined;\n    ariaLabelledby: string | undefined;\n}\n\nfunction mergeIds(...values: Array<string | undefined>): string | undefined {\n    const ids = values\n        .flatMap((value) => value?.split(/\\s+/) ?? [])\n        .filter(Boolean);\n    return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;\n}\n\nexport function useControlState(options: ControlStateOptions = {}): ControlState {\n    const id = computed(() => options.id);\n    const disabled = computed(() => options.disabled ?? false);\n    const required = computed(() => options.required ?? false);\n    const invalid = computed(() => options.invalid ?? false);\n\n    const ariaDescribedby = computed(() => mergeIds(options.describedby));\n    const ariaLabelledby = computed(() => mergeIds(options.labelledby));\n\n    return {\n        get id() { return id.value; },\n        get disabled() { return disabled.value; },\n        get required() { return required.value; },\n        get invalid() { return invalid.value; },\n        get ariaDescribedby() { return ariaDescribedby.value; },\n        get ariaLabelledby() { return ariaLabelledby.value; },\n    };\n}\n"],"mappings":";;AAoBA,SAAS,SAAS,GAAG,QAAuD;CACxE,MAAM,MAAM,OACP,SAAS,UAAU,OAAO,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7C,OAAO,OAAO;CACnB,OAAO,IAAI,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;AACjE;AAEA,SAAgB,gBAAgB,UAA+B,CAAC,GAAiB;CAC7E,MAAM,KAAK,eAAe,QAAQ,EAAE;CACpC,MAAM,WAAW,eAAe,QAAQ,YAAY,KAAK;CACzD,MAAM,WAAW,eAAe,QAAQ,YAAY,KAAK;CACzD,MAAM,UAAU,eAAe,QAAQ,WAAW,KAAK;CAEvD,MAAM,kBAAkB,eAAe,SAAS,QAAQ,WAAW,CAAC;CACpE,MAAM,iBAAiB,eAAe,SAAS,QAAQ,UAAU,CAAC;CAElE,OAAO;EACH,IAAI,KAAK;GAAE,OAAO,GAAG;EAAO;EAC5B,IAAI,WAAW;GAAE,OAAO,SAAS;EAAO;EACxC,IAAI,WAAW;GAAE,OAAO,SAAS;EAAO;EACxC,IAAI,UAAU;GAAE,OAAO,QAAQ;EAAO;EACtC,IAAI,kBAAkB;GAAE,OAAO,gBAAgB;EAAO;EACtD,IAAI,iBAAiB;GAAE,OAAO,eAAe;EAAO;CACxD;AACJ"}
+{"version":3,"file":"useControlState.js","names":[],"sources":["../src/composables/useControlState.ts"],"sourcesContent":["import { computed } from 'vue';\n\nexport interface ControlStateOptions {\n    id?: string;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    valid?: boolean;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface ControlState {\n    id: string | undefined;\n    disabled: boolean;\n    required: boolean;\n    invalid: boolean;\n    valid: boolean;\n    ariaDescribedby: string | undefined;\n    ariaLabelledby: string | undefined;\n}\n\nfunction mergeIds(...values: Array<string | undefined>): string | undefined {\n    const ids = values.flatMap((value) => value?.split(/\\s+/) ?? []).filter(Boolean);\n    return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;\n}\n\nexport function useControlState(options: ControlStateOptions = {}): ControlState {\n    const id = computed(() => options.id);\n    const disabled = computed(() => options.disabled ?? false);\n    const required = computed(() => options.required ?? false);\n    const invalid = computed(() => options.invalid ?? false);\n    const valid = computed(() => options.valid ?? false);\n\n    const ariaDescribedby = computed(() => mergeIds(options.describedby));\n    const ariaLabelledby = computed(() => mergeIds(options.labelledby));\n\n    return {\n        get id() {\n            return id.value;\n        },\n        get disabled() {\n            return disabled.value;\n        },\n        get required() {\n            return required.value;\n        },\n        get invalid() {\n            return invalid.value;\n        },\n        get valid() {\n            return valid.value;\n        },\n        get ariaDescribedby() {\n            return ariaDescribedby.value;\n        },\n        get ariaLabelledby() {\n            return ariaLabelledby.value;\n        },\n    };\n}\n"],"mappings":";;AAsBA,SAAS,SAAS,GAAG,QAAuD;CACxE,MAAM,MAAM,OAAO,SAAS,UAAU,OAAO,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,OAAO;CAC/E,OAAO,IAAI,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;AACjE;AAEA,SAAgB,gBAAgB,UAA+B,CAAC,GAAiB;CAC7E,MAAM,KAAK,eAAe,QAAQ,EAAE;CACpC,MAAM,WAAW,eAAe,QAAQ,YAAY,KAAK;CACzD,MAAM,WAAW,eAAe,QAAQ,YAAY,KAAK;CACzD,MAAM,UAAU,eAAe,QAAQ,WAAW,KAAK;CACvD,MAAM,QAAQ,eAAe,QAAQ,SAAS,KAAK;CAEnD,MAAM,kBAAkB,eAAe,SAAS,QAAQ,WAAW,CAAC;CACpE,MAAM,iBAAiB,eAAe,SAAS,QAAQ,UAAU,CAAC;CAElE,OAAO;EACH,IAAI,KAAK;GACL,OAAO,GAAG;EACd;EACA,IAAI,WAAW;GACX,OAAO,SAAS;EACpB;EACA,IAAI,WAAW;GACX,OAAO,SAAS;EACpB;EACA,IAAI,UAAU;GACV,OAAO,QAAQ;EACnB;EACA,IAAI,QAAQ;GACR,OAAO,MAAM;EACjB;EACA,IAAI,kBAAkB;GAClB,OAAO,gBAAgB;EAC3B;EACA,IAAI,iBAAiB;GACjB,OAAO,eAAe;EAC1B;CACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "packageManager": "pnpm@11.9.0",
   "engines": {
@@ -45,18 +45,10 @@
       "types": "./dist/components/switch/index.d.ts",
       "import": "./dist/components/switch/index.js"
     },
-    "./tabs": {
-      "types": "./dist/components/tabs/index.d.ts",
-      "import": "./dist/components/tabs/index.js"
-    },
     "./textarea": {
       "types": "./dist/components/textarea/index.d.ts",
       "import": "./dist/components/textarea/index.js"
     },
-    "./tooltip": {
-      "types": "./dist/components/tooltip/index.d.ts",
-      "import": "./dist/components/tooltip/index.js"
-    },
     "./base.css": "./dist/base.css",
     "./scss/*": "./src/styles/*"
   },
@@ -66,6 +58,10 @@
     "tokens:check": "node scripts/check-tokens.mjs",
     "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json",
     "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
     "test": "vitest run --project=unit",
     "test:exports": "node scripts/check-exports.mjs",
     "test:watch": "vitest --project=unit",
@@ -83,6 +79,7 @@
     "vue": "^3.6.0-beta.4"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.116",
     "@storybook/addon-themes": "^10.4.6",
     "@storybook/addon-vitest": "^10.4.6",
     "@storybook/vue3-vite": "^10.4.6",
@@ -92,11 +89,14 @@
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
     "jsdom": "^29.1.1",
+    "oxfmt": "^0.57.0",
+    "oxlint": "^1.72.0",
     "playwright": "^1.61.1",
     "sass-embedded": "^1.100.0",
     "storybook": "^10.4.6",
     "style-dictionary": "5.5.0",
     "typescript": "~6.0.3",
+    "unplugin-icons": "^23.0.1",
     "vite": "^8.1.3",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.9",

package/src/styles/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 @mixin flex-center {
     display: inline-flex;
     align-items: center;
@@ -5,7 +7,7 @@
 }
 
 @mixin focus-ring {
-    border-color: var(--rp-color-control-border-focus);
+    border-color: var(--rp-color-primary);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 
@@ -75,7 +77,11 @@
     }
 }
 
-@mixin menu-surface($z-index: var(--rp-z-index-dropdown), $surface: var(--rp-color-surface-raised), $radius: var(--rp-radius-lg)) {
+@mixin menu-surface(
+    $z-index: $z-index-dropdown,
+    $surface: var(--rp-color-surface-raised),
+    $radius: var(--rp-radius-lg)
+) {
     z-index: $z-index;
     background-color: $surface;
     border: var(--rp-border-width-thin) solid var(--rp-color-border);
@@ -99,7 +105,9 @@
 
 @mixin semantic-colors($var-name) {
     @each $name in primary, secondary, success, warning, danger, info {
-        &--#{$name} { #{$var-name}: var(--rp-color-#{$name}-fg); }
+        &--#{$name} {
+            #{$var-name}: var(--rp-color-#{$name}-fg);
+        }
     }
 }
 
@@ -116,11 +124,13 @@
     @each $name in primary, secondary, success, warning, danger, info {
         &--#{$name} {
             #{$prefix}-bg: var(--rp-color-#{$name});
-            #{$prefix}-bg-hover: color-mix(in srgb, var(--rp-color-#{$name}) 90%, var(--rp-color-black));
-            #{$prefix}-bg-active: color-mix(in srgb, var(--rp-color-#{$name}) 80%, var(--rp-color-black));
-            #{$prefix}-subtle-bg: color-mix(in srgb, var(--rp-color-#{$name}) 10%, transparent);
-            #{$prefix}-subtle-bg-hover: color-mix(in srgb, var(--rp-color-#{$name}) 14%, transparent);
-            #{$prefix}-subtle-bg-active: color-mix(in srgb, var(--rp-color-#{$name}) 18%, transparent);
+            #{$prefix}-bg-hover: var(--rp-color-#{$name}-hover);
+            #{$prefix}-bg-active: var(--rp-color-#{$name}-active);
+            #{$prefix}-subtle-bg: var(--rp-color-#{$name}-subtle-bg);
+            #{$prefix}-subtle-bg-hover: var(--rp-color-#{$name}-subtle-bg-hover);
+            #{$prefix}-subtle-bg-active: var(--rp-color-#{$name}-subtle-bg-active);
+            #{$prefix}-border: var(--rp-color-#{$name}-border);
+            #{$prefix}-border-hover: var(--rp-color-#{$name}-border-hover);
             #{$prefix}-fg: var(--rp-color-#{$name}-fg);
             #{$prefix}-on-bg: var(--rp-color-on-#{$name});
         }