@v1nt1248/3nclient-lib 0.3.51 → 0.4.1

package/dist/ui3n-plugins.js

@@ -1,12 +1,12 @@
-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 { U as e, a as t, i as n, n as r, r as i, t as a } from "./chunks/plugins-keys-CjKqZeyH.js";
+import { a as o, n as s, t as c } from "./chunks/ui3n-tooltip-BbbM2459.js";
+import { Fragment as l, createApp as u, createBlock as d, createElementBlock as f, defineComponent as p, markRaw as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderList as y } from "vue";
 import "pinia";
-import v from "mitt";
-var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
+import b from "mitt";
+var x = /* @__PURE__ */ o(/* @__PURE__ */ p({
 	__name: "ui3n-notification-container",
 	setup(e, { expose: t }) {
-		let n = g([]);
+		let n = v([]);
 		function r(e) {
 			n.value.push(e);
 		}
@@ -19,18 +19,19 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 		return t({
 			add: r,
 			remove: i
-		}), (e, t) => (h(), u("div", {
+		}), (e, t) => (_(), f("div", {
 			id: "ui3n-notifications-container",
-			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));
+			"data-ui3n": "notification-container",
+			class: g(e.$style.ui3nNotificationsWrapper)
+		}, [(_(!0), f(l, null, y(n.value, (e) => (_(), d(s, h({ key: e.id }, { ref_for: !0 }, e, { "on-close": () => a(e) }), null, 16, ["on-close"]))), 128))], 2));
 	}
-}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_n58wk_1" } }]]), b = { install: (t) => {
+}), [["__cssModules", { $style: { ui3nNotificationsWrapper: "_ui3nNotificationsWrapper_n58wk_1" } }]]), S = { install: (t) => {
 	if (typeof window > "u") return;
-	let r = document.createElement("div");
-	document.body.appendChild(r);
-	let i = c(y);
+	let n = document.createElement("div");
+	document.body.appendChild(n);
+	let i = u(x);
 	i._context.provides = t._context.provides;
-	let a = i.mount(r), o = (t) => {
+	let a = i.mount(n), o = (t) => {
 		let n = t.id || e(6), r = t.duration === void 0 ? 1500 : t.duration;
 		a.add({
 			...t,
@@ -38,33 +39,33 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 			duration: r
 		});
 	};
-	t.config.globalProperties.$createNotice = o, t.provide(n, { $createNotice: o });
-} }, x = v(), S = {
-	on: x.on.bind(x),
+	t.config.globalProperties.$createNotice = o, t.provide(r, { $createNotice: o });
+} }, C = b(), w = {
+	on: C.on.bind(C),
 	once: (e, t) => {
 		function n() {
-			x.off(e, n), t.apply(null, arguments);
+			C.off(e, n), t.apply(null, arguments);
 		}
-		x.on(e, n);
+		C.on(e, n);
 	},
-	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([]);
+	off: C.off.bind(C),
+	emit: C.emit.bind(C),
+	clear: C.all.clear.bind(C)
+}, T = { install: (e) => {
+	e.config.globalProperties.$emitter = w, e.provide(t, { $emitter: w });
+} }, E = { install(t) {
+	let n = v([]);
 	function r(t, r) {
 		return new Promise((i) => {
 			n.value.push({
 				id: e(5),
-				component: f(t),
+				component: m(t),
 				props: r,
 				resolve: i
 			});
 		});
 	}
-	function a(e, t) {
+	function i(e, t) {
 		let r = n.value.findIndex((t) => t.id === e);
 		r !== -1 && (n.value[r].resolve(t), n.value.splice(r, 1));
 	}
@@ -74,30 +75,30 @@ var y = /* @__PURE__ */ a(/* @__PURE__ */ d({
 	t.config.globalProperties.$dialog = {
 		dialogStack: n,
 		$openDialog: r,
-		$closeDialog: a,
+		$closeDialog: i,
 		$closeDialogs: o
-	}, t.provide(i, {
+	}, t.provide(a, {
 		dialogStack: n,
 		$openDialog: r,
-		$closeDialog: a,
+		$closeDialog: i,
 		$closeDialogs: o
 	});
 } };
 //#endregion
 //#region src/plugins/notifications/store-notifications.ts
-function T(e) {
+function D(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 E(e) {
+function O(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 D(e) {
+function k(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $dialog: i } = r;
 	return { $dialogs: {
 		open: i.$openDialog,
@@ -108,38 +109,38 @@ function D(e) {
 }
 //#endregion
 //#region src/plugins/theme/theme.ts
-var O = [
+var A = [
 	"light",
 	"dark",
 	"midnight"
-], k = [
+], j = [
 	"light-theme",
 	"dark-theme",
 	"midnight-theme"
 ];
-function A(e) {
-	return typeof e == "string" && O.includes(e);
+function M(e) {
+	return typeof e == "string" && A.includes(e);
 }
-function j(e, t) {
+function N(e, t) {
 	e.classList.add("colors");
-	for (let t of k) e.classList.remove(t);
+	for (let t of j) e.classList.remove(t);
 	e.classList.add(`${t}-theme`);
 }
-function M(e) {
+function P(e) {
 	if (e.persist) {
 		let t = e.storageKey ?? "ui3n-theme";
 		try {
 			let e = localStorage.getItem(t);
-			if (A(e)) return e;
+			if (M(e)) return e;
 		} catch {}
 	}
-	return A(e.theme) ? e.theme : "light";
+	return M(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));
+var F = { install(e, t = {}) {
+	let n = t.persist ?? !1, r = t.storageKey ?? "ui3n-theme", a = v(typeof document > "u" ? t.theme ?? "light" : P(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);
+		if (M(e) && (a.value = e, !(typeof document > "u") && (N(t.target ?? document.documentElement, e), n))) try {
+			localStorage.setItem(r, e);
 		} catch {}
 	}
 	typeof document < "u" && o(a.value);
@@ -147,13 +148,131 @@ var N = { install(e, t = {}) {
 		theme: a,
 		setTheme: o
 	};
-	e.provide(r, s), e.config.globalProperties.$theme = s;
+	e.provide(i, s), e.config.globalProperties.$theme = s;
 } };
 //#endregion
 //#region src/plugins/theme/store-theme.ts
-function P(e) {
+function I(e) {
 	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $theme: i } = r;
 	return { $theme: i };
 }
+var L = /* @__PURE__ */ o(/* @__PURE__ */ p({
+	__name: "ui3n-tooltip-container",
+	setup(e, { expose: t }) {
+		let n = v([]);
+		function r(e) {
+			n.value.push(e);
+		}
+		function i(e) {
+			n.value = n.value.filter((t) => t.id !== e);
+		}
+		function a(e) {
+			n.value = n.value.filter((t) => t.kind !== e);
+		}
+		function o(e) {
+			n.value = n.value.filter((t) => !(t.kind === "attach" && t.target === e));
+		}
+		function s(e, t) {
+			let r = n.value.find((t) => t.id === e);
+			r && Object.assign(r, t);
+		}
+		function u() {
+			n.value = [];
+		}
+		function p(e) {
+			return {
+				id: e.id,
+				content: e.content,
+				maxContentWidth: e.maxContentWidth,
+				color: e.color,
+				textColor: e.textColor,
+				placement: e.placement,
+				positionStrategy: e.positionStrategy ?? "fixed",
+				offsetX: e.offsetX,
+				offsetY: e.offsetY,
+				trigger: e.trigger,
+				modelValue: e.modelValue,
+				disabled: e.disabled,
+				triggerElement: e.target
+			};
+		}
+		return t({
+			add: r,
+			remove: i,
+			removeByKind: a,
+			removeByTarget: o,
+			update: s,
+			clearAll: u
+		}), (e, t) => (_(), f("div", {
+			id: "ui3n-tooltips-container",
+			"data-ui3n": "tooltip-container",
+			class: g(e.$style.container)
+		}, [(_(!0), f(l, null, y(n.value, (e) => (_(), d(c, h({ key: e.id }, { ref_for: !0 }, p(e)), null, 16))), 128))], 2));
+	}
+}), [["__cssModules", { $style: { container: "_container_zxf3h_1" } }]]), R = { install: (t) => {
+	if (typeof window > "u") return;
+	let r = document.createElement("div");
+	document.body.appendChild(r);
+	let i = u(L);
+	i._context.provides = t._context.provides;
+	let a = i.mount(r);
+	function o(e, t) {
+		return {
+			id: e,
+			close: () => {
+				t === "show" ? l() : d(e);
+			},
+			update: (t) => a.update(e, t)
+		};
+	}
+	function s(t, n) {
+		a.removeByKind("show");
+		let r = e(6);
+		return a.add({
+			...n,
+			id: r,
+			kind: "show",
+			target: m(t),
+			trigger: "manual",
+			modelValue: !0,
+			positionStrategy: n.positionStrategy ?? "fixed"
+		}), o(r, "show");
+	}
+	function c(t, n) {
+		t instanceof HTMLElement && a.removeByTarget(t);
+		let r = e(6);
+		return a.add({
+			...n,
+			id: r,
+			kind: "attach",
+			target: m(t),
+			trigger: n.trigger ?? "hover",
+			positionStrategy: n.positionStrategy ?? "fixed"
+		}), o(r, "attach");
+	}
+	function l() {
+		a.removeByKind("show");
+	}
+	function d(e) {
+		typeof e == "string" ? a.remove(e) : a.removeByTarget(e);
+	}
+	function f() {
+		a.clearAll();
+	}
+	let p = {
+		show: s,
+		attach: c,
+		hide: l,
+		detach: d,
+		detachAll: f
+	};
+	t.config.globalProperties.$tooltip = p, t.provide(n, p);
+} };
+//#endregion
+//#region src/plugins/tooltips/store-tooltips.ts
+function z(e) {
+	let { app: t = {} } = e, { config: n = {} } = t, { globalProperties: r = {} } = n, { $tooltip: i } = r;
+	return { $tooltip: 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 };
+export { a as DIALOGS_KEY, r as NOTIFICATIONS_KEY, i as THEME_KEY, n as TOOLTIPS_KEY, t as VUEBUS_KEY, E as dialogs, S as notifications, k as storeDialogs, D as storeNotifications, I as storeTheme, z as storeTooltips, O as storeVueBus, F as theme, R as tooltips, T as vueBus };

package/dist/ui3n-utils.js

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.51",
+  "version": "0.4.1",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -34,13 +34,17 @@
     "build": "pnpm clean:dist && vite build",
     "pack": "pnpm build && npm pack && cp *.tgz ./dist && rm *.tgz",
     "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss,css}'",
     "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss,css}'",
-    "lint": "pnpm linter && pnpm stylelint",
-    "lint:fix": "pnpm linter:fix && pnpm stylelint:fix",
+    "lint": "pnpm eslint && pnpm stylelint",
+    "lint:fix": "pnpm eslint:fix && pnpm stylelint:fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "eslint": "eslint src",
+    "eslint:fix": "eslint --fix src"
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.6",
@@ -67,6 +71,7 @@
     "@vue/compiler-core": "3.5.35",
     "@vue/eslint-config-typescript": "14.7.0",
     "@vue/runtime-core": "3.5.35",
+    "@vue/test-utils": "2.5.0",
     "@vuedx/typescript-plugin-vue": "0.7.6",
     "eslint": "10.4.0",
     "eslint-config-prettier": "10.1.8",
@@ -77,6 +82,7 @@
     "eslint-plugin-vue": "10.9.1",
     "globals": "17.6.0",
     "jackspeak": "4.2.3",
+    "jsdom": "30.0.1",
     "path": "0.12.7",
     "pinia": "3.0.4",
     "postcss-html": "1.8.1",
@@ -98,6 +104,7 @@
     "vite-plugin-static-copy": "^4.1.1",
     "vite-plugin-vue-devtools": "8.1.2",
     "vitepress": "1.6.4",
+    "vitest": "4.1.11",
     "vue": "3.5.35",
     "vue-component-meta": "3.3.2",
     "vue-docgen-api": "4.79.2",

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

@@ -380,7 +380,10 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nAutocomplete">
+  <div
+    data-ui3n="autocomplete"
+    :class="$style.ui3nAutocomplete"
+  >
     <!-- 'hidden inputs' block for setting of 'name' attr when used in a form -->
     <fieldset
       v-if="name && !isEmpty(modelValue)"
@@ -545,17 +548,17 @@
 
 <style lang="scss" module>
   .ui3nAutocomplete {
-    --ui3n-autocomplete-min-height: 32px;
-    --ui3n-autocomplete-font-size: 12px;
-    --ui3n-autocomplete-item-font-size: 13px;
-    --ui3n-autocomplete-padding-inline: 8px;
-    --ui3n-autocomplete-padding-block: 4px;
-    --ui3n-autocomplete-border-radius: 4px;
+    --_autocomplete-min-height: var(--ui3n-autocomplete-min-height, 32px);
+    --_autocomplete-font-size: var(--ui3n-autocomplete-font-size, 12px);
+    --_autocomplete-item-font-size: var(--ui3n-autocomplete-item-font-size, 13px);
+    --_autocomplete-padding-inline: var(--ui3n-autocomplete-padding-inline, 8px);
+    --_autocomplete-padding-block: var(--ui3n-autocomplete-padding-block, 4px);
+    --_autocomplete-border-radius: var(--ui3n-autocomplete-border-radius, 4px);
 
     position: relative;
     display: flex;
     width: 100%;
-    min-height: var(--ui3n-autocomplete-min-height);
+    min-height: var(--_autocomplete-min-height);
 
     :global(.match-search) {
       font-weight: 600;
@@ -580,20 +583,20 @@
   }
 
   .displayValue {
-    font-size: var(--ui3n-autocomplete-font-size);
-    line-height: var(--ui3n-autocomplete-min-height);
+    font-size: var(--_autocomplete-font-size);
+    line-height: var(--_autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
   }
 
   .input {
-    border-radius: var(--ui3n-autocomplete-border-radius);
-    padding: 0 var(--ui3n-autocomplete-padding-inline);
+    border-radius: var(--_autocomplete-border-radius);
+    padding: 0 var(--_autocomplete-padding-inline);
     flex: 1 1 60px;
     min-width: 60px;
-    height: var(--ui3n-autocomplete-min-height);
-    font-size: var(--ui3n-autocomplete-font-size);
-    line-height: var(--ui3n-autocomplete-min-height);
+    height: var(--_autocomplete-min-height);
+    font-size: var(--_autocomplete-font-size);
+    line-height: var(--_autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
     background-color: transparent;
@@ -610,8 +613,8 @@
     }
 
     &.inputWithError {
-      height: calc(var(--ui3n-autocomplete-min-height) - 2px);
-      padding: 0 calc(var(--ui3n-autocomplete-padding-inline) - 1px);
+      height: calc(var(--_autocomplete-min-height) - 2px);
+      padding: 0 calc(var(--_autocomplete-padding-inline) - 1px);
       border: 1px solid var(--error-content-default);
     }
   }
@@ -624,15 +627,15 @@
 
   .item {
     display: flex;
-    min-height: var(--ui3n-autocomplete-min-height);
+    min-height: var(--_autocomplete-min-height);
     justify-content: flex-start;
     align-items: center;
-    padding: var(--ui3n-autocomplete-padding-block) var(--ui3n-autocomplete-padding-inline);
-    font-size: var(--ui3n-autocomplete-item-font-size);
+    padding: var(--_autocomplete-padding-block) var(--_autocomplete-padding-inline);
+    font-size: var(--_autocomplete-item-font-size);
     line-height: 1.23;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
-    border-radius: var(--ui3n-autocomplete-border-radius);
+    border-radius: var(--_autocomplete-border-radius);
     user-select: none;
     cursor: pointer;
 
@@ -655,15 +658,15 @@
 
   .noData {
     display: flex;
-    min-height: var(--ui3n-autocomplete-min-height);
+    min-height: var(--_autocomplete-min-height);
     justify-content: flex-start;
     align-items: center;
-    padding: var(--ui3n-autocomplete-padding-block) var(--ui3n-autocomplete-padding-inline);
-    font-size: var(--ui3n-autocomplete-item-font-size);
+    padding: var(--_autocomplete-padding-block) var(--_autocomplete-padding-inline);
+    font-size: var(--_autocomplete-item-font-size);
     line-height: 1.23;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
-    border-radius: var(--ui3n-autocomplete-border-radius);
+    border-radius: var(--_autocomplete-border-radius);
   }
 
   .chipsContainer {

package/src/components/ui3n-badge/ui3n-badge-simple.vue

@@ -35,6 +35,7 @@
   <div
     ref="element"
     :id="id"
+    data-ui3n="badge-simple"
     :class="[$style.ui3nBadgeSimple, dot && $style.ui3nBadgeDot]"
   >
     <span
@@ -48,11 +49,11 @@
 
 <style lang="scss" module>
   .ui3nBadgeSimple {
-    --ui3n-badge-size: 20px;
-    --ui3n-badge-dot-size: 8px;
-    --ui3n-badge-padding-inline: 6px;
-    --ui3n-badge-nodot-border-radius: 10px;
-    --ui3n-badge-font-size: 12px;
+    --_badge-size: var(--ui3n-badge-size, 20px);
+    --_badge-dot-size: var(--ui3n-badge-dot-size, 8px);
+    --_badge-padding-inline: var(--ui3n-badge-padding-inline, 6px);
+    --_badge-nodot-border-radius: var(--ui3n-badge-nodot-border-radius, 10px);
+    --_badge-font-size: var(--ui3n-badge-font-size, 12px);
 
     position: relative;
     box-sizing: border-box;
@@ -60,29 +61,29 @@
     outline: 1px var(--color-bg-block-primary-default) solid;
 
     &:not(.ui3nBadgeDot) {
-      min-height: var(--ui3n-badge-size);
-      height: var(--ui3n-badge-size);
+      min-height: var(--_badge-size);
+      height: var(--_badge-size);
       width: max-content;
-      padding: 0 var(--ui3n-badge-padding-inline);
-      border-radius: var(--ui3n-badge-nodot-border-radius);
+      padding: 0 var(--_badge-padding-inline);
+      border-radius: var(--_badge-nodot-border-radius);
     }
   }
 
   .ui3nBadgeDot {
-    min-width: var(--ui3n-badge-dot-size);
-    width: var(--ui3n-badge-dot-size);
-    max-width: var(--ui3n-badge-dot-size);
-    min-height: var(--ui3n-badge-dot-size);
-    height: var(--ui3n-badge-dot-size);
-    max-height: var(--ui3n-badge-dot-size);
+    min-width: var(--_badge-dot-size);
+    width: var(--_badge-dot-size);
+    max-width: var(--_badge-dot-size);
+    min-height: var(--_badge-dot-size);
+    height: var(--_badge-dot-size);
+    max-height: var(--_badge-dot-size);
     border-radius: 50%;
   }
 
   .ui3nBadgeText {
     display: block;
     color: v-bind(textColor);
-    font-size: var(--ui3n-badge-font-size);
-    line-height: var(--ui3n-badge-size);
+    font-size: var(--_badge-font-size);
+    line-height: var(--_badge-size);
     text-align: center;
   }
 </style>

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

@@ -39,6 +39,7 @@
   <!-- eslint-disable vue/no-multiple-template-root -->
   <div
     v-if="hasDefaultSlot"
+    data-ui3n="badge"
     :class="$style.ui3nBadge"
   >
     <div :class="$style.ui3nBadgeWrapper">
@@ -69,7 +70,7 @@
 
 <style lang="scss" module>
   .ui3nBadge {
-    --ui3n-badge-size: 20px;
+    --_badge-size: var(--ui3n-badge-size, 20px);
 
     position: relative;
   }
@@ -77,7 +78,7 @@
   .ui3nBadgeWrapper {
     position: relative;
     width: max-content;
-    min-width: var(--ui3n-badge-size);
+    min-width: var(--_badge-size);
   }
 
   .ui3nBadgeContent {

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -40,6 +40,7 @@
 
 <template>
   <div
+    data-ui3n="breadcrumb"
     :class="cssClasses"
     v-on="isActive && !(disabled || parentDisabled) ? { click: onClick } : {}"
   >
@@ -65,11 +66,11 @@
 
 <style lang="scss" module>
   .ui3nBreadcrumb {
-    --ui3n-breadcrumb-font-size: 16px;
-    --ui3n-breadcrumb-padding-inline: 4px;
-    --ui3n-breadcrumb-separator-distance: 8px;
-    --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
-    --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
+    --_breadcrumb-font-size: var(--ui3n-breadcrumb-font-size, 16px);
+    --_breadcrumb-padding-inline: var(--ui3n-breadcrumb-padding-inline, 4px);
+    --_breadcrumb-separator-distance: var(--ui3n-breadcrumb-separator-distance, 8px);
+    --_breadcrumb-color-default: var(--ui3n-breadcrumb-color-default, var(--color-text-block-primary-default));
+    --_breadcrumb-color-selected: var(--ui3n-breadcrumb-color-selected, var(--color-text-block-accent-default));
 
     display: flex;
     align-items: center;
@@ -82,16 +83,16 @@
   }
 
   .content {
-    font-size: var(--ui3n-breadcrumb-font-size);
+    font-size: var(--_breadcrumb-font-size);
     line-height: 1.25;
-    color: var(--ui3n-breadcrumb-color-default);
+    color: var(--_breadcrumb-color-default);
   }
 
   .ui3nBreadcrumbSeparator {
     display: flex;
     align-items: center;
-    margin: 0 var(--ui3n-breadcrumb-separator-distance);
-    padding-left: var(--ui3n-breadcrumb-padding-inline);
+    margin: 0 var(--_breadcrumb-separator-distance);
+    padding-left: var(--_breadcrumb-padding-inline);
     color: var(--color-text-block-tertiary-default);
   }
 
@@ -99,7 +100,7 @@
     .content {
       &:hover {
         cursor: pointer;
-        color: var(--ui3n-breadcrumb-color-selected);
+        color: var(--_breadcrumb-color-selected);
       }
     }
   }

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

@@ -18,7 +18,10 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nBreadcrumbs">
+  <div
+    data-ui3n="breadcrumbs"
+    :class="$style.ui3nBreadcrumbs"
+  >
     <slot />
   </div>
 </template>