@v1nt1248/3nclient-lib 0.3.49 → 0.3.50

package/dist/ui3n-plugins.js

@@ -1,35 +1,35 @@
-import { B as e, n as t, r as n, t as r } from "./chunks/plugins-keys-CmrMlx3F.js";
-import { i, t as a } from "./chunks/ui3n-notification-DPC5Ke4b.js";
-import { Fragment as o, createApp as s, createBlock as c, createElementBlock as l, defineComponent as u, markRaw as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderList as g } from "vue";
+import { H as e, i as t, n, r, t as i } from "./chunks/plugins-keys-DdadrIAg.js";
+import { i as a, t as o } from "./chunks/ui3n-notification-o0tuhTpO.js";
+import { Fragment as s, createApp as c, createBlock as l, createElementBlock as u, defineComponent as d, markRaw as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderList as _ } from "vue";
 import "pinia";
-import _ from "mitt";
-var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
+import v from "mitt";
+var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 	__name: "ui3n-notification-container",
 	setup(e, { expose: t }) {
-		let n = h([]);
+		let n = g([]);
 		function r(e) {
 			n.value.push(e);
 		}
 		function i(e) {
 			n.value = n.value.filter((t) => t.id !== e);
 		}
-		function s(e) {
+		function a(e) {
 			e.onClose && e.onClose(), i(e.id);
 		}
 		return t({
 			add: r,
 			remove: i
-		}), (e, t) => (m(), l("div", {
+		}), (e, t) => (h(), u("div", {
 			id: "ui3n-notifications-container",
-			class: p(e.$style.ui3nNotificationsWrapper)
-		}, [(m(!0), l(o, null, g(n.value, (e) => (m(), c(a, f({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => s(e) }), null, 16, ["on-close"]))), 128))], 2));
+			class: m(e.$style.ui3nNotificationsWrapper)
+		}, [(h(!0), u(s, null, _(n.value, (e) => (h(), l(o, p({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => a(e) }), null, 16, ["on-close"]))), 128))], 2));
 	}
-}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_1vwg2_1" } }]]), y = { install: (n) => {
+}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_1vwg2_1" } }]]), b = { install: (t) => {
 	if (typeof window > "u") return;
 	let r = document.createElement("div");
 	document.body.appendChild(r);
-	let i = s(v);
-	i._context.provides = n._context.provides;
+	let i = c(y);
+	i._context.provides = t._context.provides;
 	let a = i.mount(r), o = (t) => {
 		let n = t.id || e(6), r = t.duration === void 0 ? 1500 : t.duration;
 		a.add({
@@ -38,27 +38,27 @@ var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
 			duration: r
 		});
 	};
-	n.config.globalProperties.$createNotice = o, n.provide(t, { $createNotice: o });
-} }, b = _(), x = {
-	on: b.on.bind(b),
+	t.config.globalProperties.$createNotice = o, t.provide(n, { $createNotice: o });
+} }, x = v(), S = {
+	on: x.on.bind(x),
 	once: (e, t) => {
 		function n() {
-			b.off(e, n), t.apply(null, arguments);
+			x.off(e, n), t.apply(null, arguments);
 		}
-		b.on(e, n);
+		x.on(e, n);
 	},
-	off: b.off.bind(b),
-	emit: b.emit.bind(b),
-	clear: b.all.clear.bind(b)
-}, S = { install: (e) => {
-	e.config.globalProperties.$emitter = x, e.provide(n, { $emitter: x });
-} }, C = { install(t) {
-	let n = h([]);
-	function i(t, r) {
+	off: x.off.bind(x),
+	emit: x.emit.bind(x),
+	clear: x.all.clear.bind(x)
+}, C = { install: (e) => {
+	e.config.globalProperties.$emitter = S, e.provide(t, { $emitter: S });
+} }, w = { install(t) {
+	let n = g([]);
+	function r(t, r) {
 		return new Promise((i) => {
 			n.value.push({
 				id: e(5),
-				component: d(t),
+				component: f(t),
 				props: r,
 				resolve: i
 			});
@@ -73,31 +73,31 @@ var v = /* @__PURE__ */ i(/* @__PURE__ */ u({
 	}
 	t.config.globalProperties.$dialog = {
 		dialogStack: n,
-		$openDialog: i,
+		$openDialog: r,
 		$closeDialog: a,
 		$closeDialogs: o
-	}, t.provide(r, {
+	}, t.provide(i, {
 		dialogStack: n,
-		$openDialog: i,
+		$openDialog: r,
 		$closeDialog: a,
 		$closeDialogs: o
 	});
 } };
 //#endregion
 //#region src/plugins/notifications/store-notifications.ts
-function w(e) {
+function T(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $createNotice: i } = r;
 	return { $createNotice: i };
 }
 //#endregion
 //#region src/plugins/vue-bus/store-vue-bus.ts
-function T(e) {
+function E(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $emitter: i } = r;
 	return { $emitter: i };
 }
 //#endregion
 //#region src/plugins/dialogs/store-dialog.ts
-function E(e) {
+function D(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $dialog: i } = r;
 	return { $dialogs: {
 		open: i.$openDialog,
@@ -107,4 +107,53 @@ function E(e) {
 	} };
 }
 //#endregion
-export { r as DIALOGS_KEY, t as NOTIFICATIONS_KEY, n as VUEBUS_KEY, C as dialogs, y as notifications, E as storeDialogs, w as storeNotifications, T as storeVueBus, S as vueBus };
+//#region src/plugins/theme/theme.ts
+var O = [
+	"light",
+	"dark",
+	"midnight"
+], k = [
+	"light-theme",
+	"dark-theme",
+	"midnight-theme"
+];
+function A(e) {
+	return typeof e == "string" && O.includes(e);
+}
+function j(e, t) {
+	e.classList.add("colors");
+	for (let t of k) e.classList.remove(t);
+	e.classList.add(`${t}-theme`);
+}
+function M(e) {
+	if (e.persist) {
+		let t = e.storageKey ?? "ui3n-theme";
+		try {
+			let e = localStorage.getItem(t);
+			if (A(e)) return e;
+		} catch {}
+	}
+	return A(e.theme) ? e.theme : "light";
+}
+var N = { install(e, t = {}) {
+	let n = t.persist ?? !1, i = t.storageKey ?? "ui3n-theme", a = g(typeof document > "u" ? t.theme ?? "light" : M(t));
+	function o(e) {
+		if (A(e) && (a.value = e, !(typeof document > "u") && (j(t.target ?? document.documentElement, e), n))) try {
+			localStorage.setItem(i, e);
+		} catch {}
+	}
+	typeof document < "u" && o(a.value);
+	let s = {
+		theme: a,
+		setTheme: o
+	};
+	e.provide(r, s), e.config.globalProperties.$theme = s;
+} };
+//#endregion
+//#region src/plugins/theme/store-theme.ts
+function P(e) {
+	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $theme: i } = r;
+	return { $theme: i };
+}
+//#endregion
+export { i as DIALOGS_KEY, n as NOTIFICATIONS_KEY, r as THEME_KEY, t as VUEBUS_KEY, w as dialogs, b as notifications, D as storeDialogs, T as storeNotifications, P as storeTheme, E as storeVueBus, N as theme, C as vueBus };

package/dist/ui3n-utils.js

@@ -1,6 +1,6 @@
-import { A as e, B as t, C as n, D as r, E as i, F as a, G as o, H as s, I as c, J as l, K as u, L as d, M as f, N as p, O as m, P as h, S as g, T as _, U as v, V as y, W as b, Y as x, _ as S, a as C, b as w, c as T, d as E, f as D, g as O, h as k, i as A, j, k as M, l as N, m as P, n as F, o as I, p as L, q as R, r as z, s as B, t as V, u as H, v as U, w as W, x as G, y as K, z as q } from "./chunks/plugins-keys-CmrMlx3F.js";
-import { t as J } from "./chunks/emoticons-DMgiBINj.js";
+import { A as e, C as t, D as n, E as r, F as i, G as a, H as o, I as s, J as c, K as l, L as u, M as d, N as f, O as p, P as m, R as h, S as g, T as _, U as v, V as y, W as b, X as x, Y as S, Z as C, _ as w, a as T, b as E, c as D, d as O, f as k, g as A, h as j, i as M, j as N, k as P, l as F, m as I, n as L, o as R, p as z, q as B, r as V, s as H, t as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./chunks/plugins-keys-DdadrIAg.js";
+import { t as X } from "./chunks/emoticons-DMgiBINj.js";
 //#region src/constants/general.ts
-var Y = /[^@]+@[^@]+\.[^@]+/iu;
+var Z = /[^@]+@[^@]+\.[^@]+/iu;
 //#endregion
-export { V as DIALOGS_KEY, F as NOTIFICATIONS_KEY, b as NamedProcs, A as SQLiteOn3NStorage, o as SingleCyclicProc, u as SingleProc, s as TaskRunner, z as VUEBUS_KEY, D as b64ToBlob, E as blobFromDataURL, L as blobToB64, K as capitalize, f as copyToClipboard, B as createVideoThumbnail, M as debounce, x as defer, J as emoticons, j as executeFunc, T as fileToUint8Array, U as formatFileSize, n as generateColor, p as getDeliveryErrors, d as getFileExtension, t as getRandomId, W as hasSlotContent, G as html2text, g as invertColor, P as isFileArchive, k as isFileAudio, S as isFileImage, O as isFileVideo, Y as mailReg, R as makeSyncedFunc, _ as markSearch, c as mimeTypes, q as patchTextareaMaxRowsSupport, w as prepareDateAsSting, e as removeWhitespaceInString, N as resizeImage, y as round, v as schedulerYield, i as selectAll, r as selectEnd, m as selectStart, l as sleep, h as transformFileToWeb3NFile, a as transformWeb3nFileToFile, C as tryOnScopeDispose, H as uint8ToDataURL, I as unrefElement };
+export { U as DIALOGS_KEY, L as NOTIFICATIONS_KEY, l as NamedProcs, T as SQLiteOn3NStorage, B as SingleCyclicProc, c as SingleProc, V as THEME_KEY, b as TaskRunner, M as VUEBUS_KEY, z as b64ToBlob, k as blobFromDataURL, I as blobToB64, q as capitalize, m as copyToClipboard, D as createVideoThumbnail, N as debounce, C as defer, X as emoticons, f as executeFunc, F as fileToUint8Array, J as formatFileSize, _ as generateColor, i as getDeliveryErrors, Y as getFileExtension, o as getRandomId, r as hasSlotContent, t as html2text, K as invertColor, j as isFileArchive, A as isFileAudio, G as isFileImage, w as isFileVideo, Z as mailReg, S as makeSyncedFunc, n as markSearch, h as mimeTypes, y as patchTextareaMaxRowsSupport, g as prepareDateAsSting, d as removeWhitespaceInString, W as resizeImage, v as round, a as schedulerYield, p as selectAll, P as selectEnd, e as selectStart, x as sleep, E as toCssLength, s as transformFileToWeb3NFile, u as transformWeb3nFileToFile, R as tryOnScopeDispose, O as uint8ToDataURL, H as unrefElement };

package/dist/variables.css

@@ -123,6 +123,8 @@
 
 }
 
+:root,
+.light-theme,
 .default-theme {
   --ripple: var(--white-48);
   --shadow-key-1: var(--black-12);
@@ -290,7 +292,7 @@
   --info-outline-disabled: var(--blue-5);
 }
 
-.dark-theme {
+.midnight-theme {
   --ripple: var(--black-48);
   --shadow-key-1: var(--white-12);
   --shadow-key-2: var(--white-8);
@@ -457,7 +459,7 @@
   --info-outline-disabled: var(--blue-85);
 }
 
-.dark2-theme {
+.dark-theme {
   --ripple: var(--black-48);
   --shadow-key-1: var(--white-12);
   --shadow-key-2: var(--white-8);
@@ -624,6 +626,7 @@
   --info-outline-disabled: var(--blue-85);
 }
 
+:root,
 .colors {
   --color-bg-button-primary-default: var(--accent-fill-default);
   --color-bg-button-primary-hover: var(--accent-fill-hover);
@@ -930,92 +933,3 @@
   --color-icon-chat-bubble-other-selected: var(--accent-content-selected);
   --effect-dropdown-shadow: 0 0 4px 0 var(--shadow-close), 0 4px 12px 0 var(--shadow-far);
 }
-
-html {
-  overflow: hidden;
-  font-family: Inter, system-ui, sans-serif;
-}
-
-section,
-div {
-  box-sizing: border-box;
-}
-
-::-webkit-scrollbar-button {
-  background-image: url("");
-  background-repeat: no-repeat;
-  width: var(--spacing-xs);
-  height: 0;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  height: 50px;
-  background-color: var(--default-fill-pressed);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--t-default-fill-default);
-}
-
-::-webkit-resizer {
-  background-image: url("");
-  background-repeat: no-repeat;
-  width: var(--spacing-xs);
-  height: 0;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-}
-
-/* other CSS style classes */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-.ui3n-ripple {
-  --ui3n-ripple-duration: 400ms;
-  --ui3n-ripple-bg-color: var(--ripple);
-
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple var(--ui3n-ripple-duration) linear;
-  background-color: var(--ui3n-ripple-bg-color);
-}
-
-.ui3n-title {
-  position: fixed;
-  width: max-content;
-  top: 0;
-  left: 0;
-  padding: var(--spacing-xs) var(--spacing-s);
-  border-radius: var(--spacing-xs);
-  font-size: var(--font-11);
-  line-height: var(--font-12);
-  font-weight: 400;
-  overflow-wrap: break-word;
-  white-space: break-spaces;
-  box-shadow: 0 2px 1px -1px var(--shadow-key-1),
-  0 1px 1px 0 var(--shadow-key-2),
-  0 1px 3px 0 var(--shadow-key-3);
-  z-index: 1000;
-}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.49",
+  "version": "0.3.50",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-checkbox/ui3n-checkbox.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
   import { computed, onBeforeMount, ref, useCssModule, useSlots, watch } from 'vue';
   import Ui3nRipple from '../../directives/ui3n-ripple';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type {
     Ui3nCheckboxEmits,
     Ui3nCheckboxExpose,
@@ -52,7 +53,7 @@
   });
 
   const inlineStyles = computed(() => ({
-    '--ui3n-checkbox-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
+    '--ui3n-checkbox-size': toCssLength(props.size),
     '--ui3n-checkbox-color': props.color,
   }));
 
@@ -205,8 +206,6 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
-
   .ui3nCheckbox {
     --ui3n-checkbox-size: 16px;
     --ui3n-checkbox-gap: 4px;
@@ -248,17 +247,15 @@
     background-color: var(--ui3n-checkbox-color);
 
     &:hover {
-      border-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
-      background-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
-      @include mixins.ripple(oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h));
+      border-color: color-mix(in oklch, var(--ui3n-checkbox-color), black 12%);
+      background-color: color-mix(in oklch, var(--ui3n-checkbox-color), black 12%);
     }
   }
 
   .unfilled {
     &:hover {
-      border-color: oklch(from var(--ui3n-checkbox-color) calc(l - 0.1) c h);
-      background-color: oklch(from transparent calc(l - 0.1) c h);
-      @include mixins.ripple(oklch(from transparent calc(l - 0.1) c h));
+      border-color: color-mix(in oklch, var(--ui3n-checkbox-color) 84%, black);
+      background-color: color-mix(in oklch, var(--ui3n-checkbox-color) 16%, transparent);
     }
   }
 

package/src/components/ui3n-notification/types.ts

@@ -24,6 +24,11 @@ export interface Ui3nNotificationProps {
    * @default false
    */
   withIcon?: boolean;
+  /**
+   * Notification border radius in pixels or css length
+   * @default 8
+   */
+  borderRadius?: number | string;
   /**
    * Called when notification opens
    */

package/src/components/ui3n-notification/ui3n-notification.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-  import { computed, onMounted, onBeforeUnmount, ref, useCssModule } from 'vue';
+  import { computed, onMounted, onBeforeUnmount, useCssModule } from 'vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nNotificationProps } from './types';
 
   const props = withDefaults(defineProps<Ui3nNotificationProps>(), {
@@ -9,6 +10,7 @@
     position: 'center',
     duration: 0,
     withIcon: true,
+    borderRadius: 8,
     onOpen: () => {},
     onClose: () => {},
   });
@@ -20,25 +22,21 @@
   const currentTypeConfig = computed(() => {
     const stylesByTypes = {
       success: {
-        color: 'var(--success-content-default)',
         icon: 'round-check-circle',
         iconColor: 'var(--success-fill-default)',
         iconRotate: 0,
       },
       warning: {
-        color: 'var(--warning-content-default)',
         icon: 'round-warning',
         iconColor: 'var(--warning-fill-default)',
         iconRotate: 0,
       },
       info: {
-        color: 'var(--info-content-default)',
         icon: 'round-info',
         iconColor: 'var(--info-fill-default)',
         iconRotate: 180,
       },
       error: {
-        color: 'var(--error-content-default)',
         icon: 'round-info',
         iconColor: 'var(--error-fill-default)',
         iconRotate: 180,
@@ -53,6 +51,10 @@
     return val;
   });
 
+  const inlineStyles = computed(() => ({
+    '--ui3n-notification-border-radius': toCssLength(props.borderRadius, '8px'),
+  }));
+
   function closeNotification() {
     if (props.onClose) {
       props.onClose();
@@ -82,6 +84,7 @@
   <div
     :id="id"
     :class="mainCssClasses"
+    :style="inlineStyles"
   >
     <div
       v-if="withIcon"
@@ -105,7 +108,6 @@
       size="small"
       color="transparent"
       icon="round-close"
-      :icon-color="currentTypeConfig.color"
       icon-size="16"
       :class="$style.closeBtn"
       @click="closeNotification"
@@ -117,22 +119,24 @@
   .ui3nNotification {
     --ui3n-notification-width: 380px;
     --ui3n-notification-font-size: 12px;
-    --ui3n-notification-border-radius: 4px;
+    --ui3n-notification-border-radius: 8px;
     --ui3n-notification-margin-bottom: 4px;
     --ui3n-notification-icon-size: 32px;
+    --ui3n-notification-text-color: var(--default-content-default);
 
     display: flex;
     position: relative;
     box-sizing: border-box;
     z-index: 5000;
     border-radius: var(--ui3n-notification-border-radius);
-    outline: 1px solid var(--color-border-control-tritery-default);
+    outline: 1px solid var(--color-border-block-primary-default);
     padding: var(--spacing-m);
     max-width: var(--ui3n-notification-width);
     margin-bottom: var(--ui3n-notification-margin-bottom);
     justify-content: center;
     align-items: center;
     gap: 8px;
+    color: var(--ui3n-notification-text-color);
   }
 
   .withIcon {
@@ -159,6 +163,7 @@
     font-weight: 500;
     line-height: 1.33;
     padding-right: 20px;
+    color: var(--ui3n-notification-text-color);
   }
 
   .closeBtn {
@@ -166,53 +171,70 @@
     z-index: 1;
     top: 6px;
     right: 6px;
+    color: var(--ui3n-notification-text-color);
   }
 
   .infoType {
+    --ui3n-notification-text-color: var(--info-content-default);
+
     background-color: var(--info-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--info-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--info-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: oklch(from var(--info-content-default) calc(l + 0.15) c h);
     }
   }
 
   .successType {
+    --ui3n-notification-text-color: var(--success-content-default);
+
     background-color: var(--success-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--success-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--success-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: oklch(from var(--success-content-default) calc(l + 0.15) c h);
     }
   }
 
   .warningType {
+    --ui3n-notification-text-color: var(--warning-content-default);
+
     background-color: var(--warning-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--warning-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--warning-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: color-mix(in oklch, var(--warning-content-default) 45%, white);
     }
   }
 
   .errorType {
+    --ui3n-notification-text-color: var(--error-content-default);
+
     background-color: var(--error-fill-default);
 
     .ui3nNotificationIcon {
       background-color: var(--error-content-default);
     }
 
-    .ui3nNotificationContent {
-      color: var(--error-content-default);
+    :global(.dark-theme) &,
+    :global(.midnight-theme) &,
+    :global(.dark2-theme) & {
+      --ui3n-notification-text-color: color-mix(in oklch, var(--error-content-default) 45%, white);
     }
   }
 

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -1,8 +1,12 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, inject, onBeforeMount, ref, useSlots, watch } from 'vue';
+  import { computed, inject, onBeforeMount, ref, useSlots, watch } from 'vue';
   import type { ComputedRef } from 'vue';
+  import Ui3nRipple from '../../directives/ui3n-ripple';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioValue, Ui3nRadioExpose } from './types';
 
+  const vUi3nRipple = Ui3nRipple;
+
   const props = withDefaults(defineProps<Ui3nRadioProps>(), {
     name: undefined,
     modelValue: false,
@@ -38,7 +42,7 @@
   });
 
   const radioStyle = computed(() => ({
-    '--ui3n-radio-size': `${props.size}px`,
+    '--ui3n-radio-size': toCssLength(props.size),
     '--ui3n-radio-color': props.color,
   }));
 
@@ -120,6 +124,7 @@
     />
 
     <div
+      v-ui3n-ripple
       :class="[$style.body, disabled && $style.bodyDisabled]"
       :tabindex="disabled ? -1 : 0"
       @keydown.enter="change"
@@ -168,8 +173,6 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
-
   .ui3nRadio {
     --ui3n-radio-min-height: 24px;
 
@@ -206,11 +209,11 @@
     justify-content: center;
     align-items: center;
     border-radius: 50%;
+    overflow: hidden;
 
     &:hover {
       cursor: pointer;
-      background-color: oklch(from transparent calc(l - 0.1) c h);
-      @include mixins.ripple(oklch(from transparent calc(l - 0.1) c h));
+      background-color: color-mix(in oklch, var(--ui3n-radio-color) 16%, transparent);
     }
   }
 

package/src/components/ui3n-switch/ui3n-switch.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
   import { computed, ref, watch, useSlots } from 'vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots, Ui3nSwitchExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nSwitchProps>(), {
@@ -17,7 +18,7 @@
 
   const switchStyle = computed(() => ({
     '--ui3n-switch-color': props.color,
-    '--ui3n-switch-size': `${props.size}px`,
+    '--ui3n-switch-size': toCssLength(props.size),
   }));
 
   function change(ev: Event) {

package/src/components/ui3n-tabs/ui3n-tabs.vue

@@ -98,8 +98,6 @@
 </template>
 
 <style lang="scss" module>
-  @use '../../assets/styles/mixins' as mixins;
-
   .ui3nTabs {
     --ui3n-tabs-height: 48px;
 
@@ -116,7 +114,6 @@
     position: relative;
     user-select: none;
     color: var(--ui3n-tabs-inactive-color);
-    @include mixins.ripple(var(--color-bg-control-secondary-default));
 
     &:hover {
       background-color: var(--color-bg-control-secondary-default);