@poveste/controls 0.13.1 → 0.15.0

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { t as e } from "./HstWrapper-C557fRoN.es.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineAsyncComponent as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, onUnmounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, vModelText as x, watch as S, withCtx as C, withDirectives as w, withKeys as T, withModifiers as E } from "@poveste/vendors/vue";
 import { Dropdown as ee, VTooltip as D } from "@poveste/vendors/floating-vue";
 import { Icon as O } from "@poveste/vendors/iconify";
-import { useClipboard as te } from "@poveste/vendors/vue-use";
+import { useClipboard as te, useLiveAnnouncer as ne } from "@poveste/vendors/vue-use";
 //#endregion
 //#region src/components/button/HstButton.vue
 var k = /* @__PURE__ */ u({
@@ -16,7 +16,7 @@ var k = /* @__PURE__ */ u({
 		};
 		return (n, r) => (h(), a("button", { class: f(["poveste-button cursor-pointer rounded-sm border-none", t[e.color ?? "default"]]) }, [v(n.$slots, "default")], 2));
 	}
-}), ne = { class: "flex gap-px border border-solid border-black/25 dark:border-white/25 rounded-sm p-px" }, re = /* @__PURE__ */ u({
+}), re = { class: "flex gap-px border border-solid border-black/25 dark:border-white/25 rounded-sm p-px" }, ie = /* @__PURE__ */ u({
 	name: "HstButtonGroup",
 	props: {
 		title: {},
@@ -28,9 +28,9 @@ var k = /* @__PURE__ */ u({
 		let l = i, u = c, d = n(() => Array.isArray(l.options) ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? {
 			value: e,
 			label: String(e)
-		} : e) : Object.keys(l.options).map((e) => ({
+		} : e) : Object.entries(l.options).map(([e, t]) => ({
 			value: e,
-			label: l.options[e]
+			label: String(t)
 		})));
 		function f(e) {
 			u("update:modelValue", e);
@@ -42,7 +42,7 @@ var k = /* @__PURE__ */ u({
 			class: "poveste-button-group flex-nowrap items-center"
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", ne, [(h(!0), a(t, null, _(d.value, ({ label: e, value: t }) => (h(), r(k, {
+			default: C(() => [o("div", re, [(h(!0), a(t, null, _(d.value, ({ label: e, value: t }) => (h(), r(k, {
 				key: t,
 				class: "px-1 h-[22px] flex-1 rounded-[3px]!",
 				color: t === i.modelValue ? "primary" : "flat",
@@ -55,12 +55,12 @@ var k = /* @__PURE__ */ u({
 			_: 3
 		}, 8, ["title"]));
 	}
-}), ie = {
+}), ae = {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 24 24",
 	class: "relative z-10"
-}, ae = ["stroke-dasharray", "stroke-dashoffset"], A = /* @__PURE__ */ u({
+}, oe = ["stroke-dasharray", "stroke-dashoffset"], A = /* @__PURE__ */ u({
 	name: "HstSimpleCheckbox",
 	props: {
 		modelValue: { type: Boolean },
@@ -77,11 +77,11 @@ var k = /* @__PURE__ */ u({
 		});
 		let c = g(), l = g(0), u = n(() => +!!r.modelValue), d = n(() => (1 - u.value) * l.value), p = g(!1);
 		return S(c, () => {
-			l.value = c.value.getTotalLength?.() ?? 21.21;
+			l.value = c.value?.getTotalLength?.() ?? 21.21;
 		}), (t, n) => (h(), a("div", {
 			class: f(["poveste-simple-checkbox group text-white w-[16px] h-[16px] relative", { "cursor-pointer": e.withToggle }]),
 			onClick: s
-		}, [o("div", { class: f(["border border-solid group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out group-hover:border-primary-500 group-hover:dark:border-primary-500", [e.modelValue ? "border-primary-500 border-8" : "border-black/25 dark:border-white/25 delay-150"]]) }, null, 2), (h(), a("svg", ie, [o("path", {
+		}, [o("div", { class: f(["border border-solid group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out group-hover:border-primary-500 group-hover:dark:border-primary-500", [e.modelValue ? "border-primary-500 border-8" : "border-black/25 dark:border-white/25 delay-150"]]) }, null, 2), (h(), a("svg", ae, [o("path", {
 			ref_key: "path",
 			ref: c,
 			d: "m 4 12 l 5 5 l 10 -10",
@@ -89,9 +89,9 @@ var k = /* @__PURE__ */ u({
 			class: f(["stroke-white stroke-2 duration-200 ease-in-out", [p.value ? "transition-all" : "transition-none", { "delay-150": e.modelValue }]]),
 			"stroke-dasharray": l.value,
 			"stroke-dashoffset": d.value
-		}, null, 10, ae)]))], 2));
+		}, null, 10, oe)]))], 2));
 	}
-}), oe = /* @__PURE__ */ u({
+}), se = /* @__PURE__ */ u({
 	name: "HstCheckbox",
 	props: {
 		modelValue: { type: [
@@ -111,7 +111,7 @@ var k = /* @__PURE__ */ u({
 			}
 			o("update:modelValue", !a.modelValue);
 		}
-		let l = n(() => typeof a.modelValue == "string" ? a.modelValue !== "false" : a.modelValue);
+		let l = n(() => typeof a.modelValue == "string" ? a.modelValue !== "false" : a.modelValue ?? void 0);
 		return (n, i) => (h(), r(e, {
 			tag: "div",
 			role: "checkbox",
@@ -127,11 +127,11 @@ var k = /* @__PURE__ */ u({
 			_: 3
 		}, 8, ["aria-checked", "title"]));
 	}
-}), se = { class: "-my-1" }, ce = [
+}), ce = { class: "-my-1" }, le = [
 	"for",
 	"onKeydown",
 	"onClick"
-], le = /* @__PURE__ */ u({
+], ue = /* @__PURE__ */ u({
 	name: "HstCheckboxList",
 	props: {
 		title: {},
@@ -151,7 +151,7 @@ var k = /* @__PURE__ */ u({
 			style: p(n.$attrs.style)
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", se, [(h(!0), a(t, null, _(m.value, (e, t) => (h(), a("label", {
+			default: C(() => [o("div", ce, [(h(!0), a(t, null, _(m.value, (e, t) => (h(), a("label", {
 				key: t,
 				tabindex: "0",
 				for: `${t}-radio`,
@@ -161,7 +161,7 @@ var k = /* @__PURE__ */ u({
 			}, [c(A, {
 				"model-value": i.modelValue.includes(t),
 				class: "mr-2"
-			}, null, 8, ["model-value"]), s(" " + y(e), 1)], 40, ce))), 128))])]),
+			}, null, 8, ["model-value"]), s(" " + y(e), 1)], 40, le))), 128))])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -169,7 +169,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), ue = { class: "flex flex-row gap-1" }, de = ["value"], fe = /* @__PURE__ */ u({
+}), de = { class: "flex flex-row gap-1" }, fe = ["value"], pe = /* @__PURE__ */ u({
 	name: "HstColorSelect",
 	inheritAttrs: !1,
 	props: {
@@ -185,7 +185,7 @@ var k = /* @__PURE__ */ u({
 			}
 		});
 		function l(e, t = 15) {
-			let n = !1, r, i = () => {
+			let n = !1, r = null, i = () => {
 				r == null ? n = !1 : (e(...r), r = null, setTimeout(i, t));
 			};
 			return (...a) => {
@@ -208,7 +208,7 @@ var k = /* @__PURE__ */ u({
 			style: p(n.$attrs.style)
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", ue, [w(o("input", d({
+			default: C(() => [o("div", de, [w(o("input", d({
 				...n.$attrs,
 				class: null,
 				style: null
@@ -220,7 +220,7 @@ var k = /* @__PURE__ */ u({
 				type: "color",
 				value: t.modelValue,
 				onInput: i[1] ||= ((e) => m(e.target.value))
-			}, null, 40, de)])]),
+			}, null, 40, fe)])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -232,27 +232,31 @@ var k = /* @__PURE__ */ u({
 	name: "HstCopyIcon",
 	props: { content: { type: [String, Function] } },
 	setup(e) {
-		let t = e, { copy: n, copied: i } = te();
-		async function a() {
+		let t = e, { copy: n, copied: r } = te(), { polite: i } = ne();
+		async function o() {
 			let e = typeof t.content == "function" ? await t.content() : t.content;
-			n(e);
+			await n(e), r.value && i("Copied");
 		}
-		return (e, t) => w((h(), r(b(O), {
+		return (e, t) => w((h(), a("button", {
+			type: "button",
+			"aria-label": "Copy",
+			class: "flex p-0 bg-transparent border-0 text-inherit opacity-50 hover:opacity-100 focus-visible:opacity-100 hover:text-primary-500 cursor-pointer",
+			onClick: t[0] ||= (e) => o()
+		}, [c(b(O), {
 			icon: "carbon:copy-file",
-			class: "w-4 h-4 opacity-50 hover:opacity-100 hover:text-primary-500 cursor-pointer",
-			onClick: t[0] ||= (e) => a()
-		}, null, 512)), [[b(D), {
+			class: "w-4 h-4"
+		})])), [[b(D), {
 			content: "Copied!",
 			triggers: [],
-			shown: b(i),
+			shown: b(r),
 			distance: 12,
 			delay: 0
 		}]]);
 	}
-}), pe = {
+}), me = {
 	key: 0,
 	class: "poveste-color-shades grid gap-4 grid-cols-[repeat(auto-fill,minmax(200px,1fr))] m-4"
-}, me = ["onMouseenter"], he = { class: "flex gap-1" }, ge = { class: "my-0 truncate shrink" }, _e = { class: "flex gap-1" }, M = { class: "my-0 opacity-50 truncate shrink" }, N = /* @__PURE__ */ u({
+}, he = ["onMouseenter"], ge = { class: "flex gap-1" }, _e = { class: "my-0 truncate shrink" }, M = { class: "flex gap-1" }, N = { class: "my-0 opacity-50 truncate shrink" }, P = /* @__PURE__ */ u({
 	name: "HstColorShades",
 	props: {
 		shades: {},
@@ -285,7 +289,7 @@ var k = /* @__PURE__ */ u({
 			}
 			return e;
 		}), f = g(null);
-		return (e, n) => d.value.length ? (h(), a("div", pe, [(h(!0), a(t, null, _(d.value, (t) => (h(), a("div", {
+		return (e, n) => d.value.length ? (h(), a("div", me, [(h(!0), a(t, null, _(d.value, (t) => (h(), a("div", {
 			key: t.key,
 			class: "flex flex-col gap-2",
 			onMouseenter: (e) => f.value = t.key,
@@ -293,25 +297,22 @@ var k = /* @__PURE__ */ u({
 		}, [v(e.$slots, "default", { color: t.color }, () => [o("div", {
 			class: "rounded-full w-16 h-16",
 			style: p({ backgroundColor: t.color })
-		}, null, 4)]), o("div", null, [o("div", he, [w((h(), a("pre", ge, [s(y(t.name), 1)])), [[b(D), t.name.length > 23 ? t.name : ""]]), f.value === t.key ? (h(), r(j, {
+		}, null, 4)]), o("div", null, [o("div", ge, [w((h(), a("pre", _e, [s(y(t.name), 1)])), [[b(D), t.name.length > 23 ? t.name : ""]]), f.value === t.key ? (h(), r(j, {
 			key: 0,
 			content: t.name,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)]), o("div", _e, [w((h(), a("pre", M, [s(y(t.color), 1)])), [[b(D), t.color.length > 23 ? t.color : ""]]), f.value === t.key ? (h(), r(j, {
+		}, null, 8, ["content"])) : i("", !0)]), o("div", M, [w((h(), a("pre", N, [s(y(t.color), 1)])), [[b(D), t.color.length > 23 ? t.color : ""]]), f.value === t.key ? (h(), r(j, {
 			key: 0,
 			content: t.color,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)])])], 40, me))), 128))])) : i("", !0);
+		}, null, 8, ["content"])) : i("", !0)])])], 40, he))), 128))])) : i("", !0);
 	}
-}), P = ["onMouseenter"], F = { class: "flex gap-1" }, I = { class: "my-0 truncate shrink" }, ve = { class: "flex gap-1" }, ye = { class: "my-0 opacity-50 truncate shrink" }, be = /* @__PURE__ */ u({
+}), F = ["onMouseenter"], I = { class: "flex gap-1" }, ve = { class: "my-0 truncate shrink" }, ye = { class: "flex gap-1" }, be = { class: "my-0 opacity-50 truncate shrink" }, xe = /* @__PURE__ */ u({
 	name: "HstTokenGrid",
 	props: {
 		tokens: {},
 		colSize: { default: 180 },
-		getName: {
-			type: Function,
-			default: null
-		}
+		getName: {}
 	},
 	setup(e) {
 		let c = e, l = n(() => {
@@ -330,17 +331,17 @@ var k = /* @__PURE__ */ u({
 			class: "flex flex-col gap-2",
 			onMouseenter: (e) => d.value = t.key,
 			onMouseleave: c[0] ||= (e) => d.value = null
-		}, [v(n.$slots, "default", { token: t }), o("div", null, [o("div", F, [w((h(), a("pre", I, [s(y(t.name), 1)])), [[b(D), t.name.length > e.colSize / 8 ? t.name : ""]]), d.value === t.key ? (h(), r(j, {
+		}, [v(n.$slots, "default", { token: t }), o("div", null, [o("div", I, [w((h(), a("pre", ve, [s(y(t.name), 1)])), [[b(D), t.name.length > e.colSize / 8 ? t.name : ""]]), d.value === t.key ? (h(), r(j, {
 			key: 0,
 			content: t.name,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)]), o("div", ve, [w((h(), a("pre", ye, [s(y(t.value), 1)])), [[b(D), t.value.length > e.colSize / 8 ? t.value : ""]]), d.value === t.key ? (h(), r(j, {
+		}, null, 8, ["content"])) : i("", !0)]), o("div", ye, [w((h(), a("pre", be, [s(y(t.value), 1)])), [[b(D), t.value.length > e.colSize / 8 ? t.value : ""]]), d.value === t.key ? (h(), r(j, {
 			key: 0,
 			content: typeof t.value == "string" ? t.value : JSON.stringify(t.value),
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)])])], 40, P))), 128))], 4));
+		}, null, 8, ["content"])) : i("", !0)])])], 40, F))), 128))], 4));
 	}
-}), xe = ["onMouseenter"], Se = { class: "mx-4" }, Ce = { class: "flex gap-1" }, we = { class: "my-0 truncate shrink" }, Te = { class: "flex gap-1" }, Ee = { class: "my-0 opacity-50 truncate shrink" }, De = /* @__PURE__ */ u({
+}), Se = ["onMouseenter"], Ce = { class: "mx-4" }, we = { class: "flex gap-1" }, Te = { class: "my-0 truncate shrink" }, Ee = { class: "flex gap-1" }, De = { class: "my-0 opacity-50 truncate shrink" }, Oe = /* @__PURE__ */ u({
 	name: "HstTokenList",
 	props: {
 		tokens: {},
@@ -360,17 +361,17 @@ var k = /* @__PURE__ */ u({
 			class: "poveste-token-list flex flex-col gap-2 my-8",
 			onMouseenter: (e) => l.value = t.key,
 			onMouseleave: n[0] ||= (e) => l.value = null
-		}, [v(e.$slots, "default", { token: t }), o("div", Se, [o("div", Ce, [o("pre", we, y(t.name), 1), l.value === t.key ? (h(), r(j, {
+		}, [v(e.$slots, "default", { token: t }), o("div", Ce, [o("div", we, [o("pre", Te, y(t.name), 1), l.value === t.key ? (h(), r(j, {
 			key: 0,
 			content: t.name,
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)]), o("div", Te, [o("pre", Ee, y(t.value), 1), l.value === t.key ? (h(), r(j, {
+		}, null, 8, ["content"])) : i("", !0)]), o("div", Ee, [o("pre", De, y(t.value), 1), l.value === t.key ? (h(), r(j, {
 			key: 0,
 			content: typeof t.value == "string" ? t.value : JSON.stringify(t.value),
 			class: "flex-none"
-		}, null, 8, ["content"])) : i("", !0)])])], 40, xe))), 128));
+		}, null, 8, ["content"])) : i("", !0)])])], 40, Se))), 128));
 	}
-}), Oe = /* @__PURE__ */ u({
+}), L = /* @__PURE__ */ u({
 	name: "HstNumber",
 	inheritAttrs: !1,
 	props: {
@@ -386,14 +387,14 @@ var k = /* @__PURE__ */ u({
 			}
 		}), l = g();
 		function u() {
-			l.value.focus(), l.value.select();
+			l.value?.focus(), l.value?.select();
 		}
 		let _ = g(!1), y, b;
 		function S(e) {
-			_.value = !0, y = e.clientX, b = c.value, window.addEventListener("mousemove", T), window.addEventListener("mouseup", E);
+			_.value = !0, y = e.clientX, b = c.value ?? 0, window.addEventListener("mousemove", T), window.addEventListener("mouseup", E);
 		}
 		function T(e) {
-			let t = Number.parseFloat(l.value.step);
+			let t = Number.parseFloat(l.value?.step ?? "");
 			Number.isNaN(t) && (t = 1), c.value = b + Math.round((e.clientX - y) / 10 / t) * t;
 		}
 		function E() {
@@ -433,13 +434,13 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), L = { class: "-my-1" }, ke = [
+}), ke = { class: "-my-1" }, Ae = [
 	"id",
 	"name",
 	"value",
 	"checked",
 	"onChange"
-], Ae = ["for", "onKeydown"], je = /* @__PURE__ */ u({
+], je = ["for", "onKeydown"], Me = /* @__PURE__ */ u({
 	name: "HstRadio",
 	props: {
 		title: {},
@@ -460,7 +461,7 @@ var k = /* @__PURE__ */ u({
 			style: p(n.$attrs.style)
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [o("div", L, [(h(!0), a(t, null, _(d.value, (e, n) => (h(), a(t, { key: n }, [o("input", {
+			default: C(() => [o("div", ke, [(h(!0), a(t, null, _(d.value, (e, n) => (h(), a(t, { key: n }, [o("input", {
 				id: `${n}-radio_${i.title}`,
 				type: "radio",
 				name: `${n}-radio_${i.title}`,
@@ -468,7 +469,7 @@ var k = /* @__PURE__ */ u({
 				checked: n === i.modelValue,
 				class: "hidden!",
 				onChange: (e) => m(n)
-			}, null, 40, ke), o("label", {
+			}, null, 40, Ae), o("label", {
 				tabindex: "0",
 				for: `${n}-radio_${i.title}`,
 				class: "cursor-pointer flex items-center relative py-1 group",
@@ -485,7 +486,7 @@ var k = /* @__PURE__ */ u({
 					{ "delay-150": i.modelValue === n },
 					i.modelValue === n ? "fill-primary-500" : "fill-transparent scale-0"
 				]])
-			}, null, 2)], 2)), s(" " + y(e), 1)], 40, Ae)], 64))), 128))])]),
+			}, null, 2)], 2)), s(" " + y(e), 1)], 40, je)], 64))), 128))])]),
 			_: 3
 		}, 8, [
 			"title",
@@ -493,7 +494,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), Me = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" }, Ne = { class: "flex-1 truncate" }, Pe = { class: "flex flex-col bg-gray-50 dark:bg-gray-700" }, Fe = ["onClick"], Ie = /* @__PURE__ */ u({
+}), Ne = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" }, Pe = { class: "flex-1 truncate" }, Fe = { class: "flex flex-col bg-gray-50 dark:bg-gray-700" }, Ie = ["onClick"], Le = /* @__PURE__ */ u({
 	name: "CustomSelect",
 	props: {
 		modelValue: {},
@@ -509,7 +510,7 @@ var k = /* @__PURE__ */ u({
 			"auto-size": "",
 			"auto-boundary-max-size": ""
 		}, {
-			popper: C(({ hide: n }) => [o("div", Pe, [(h(!0), a(t, null, _(f.value, ([t, r]) => (h(), a("div", d({ ref_for: !0 }, {
+			popper: C(({ hide: n }) => [o("div", Fe, [(h(!0), a(t, null, _(f.value, ([t, r]) => (h(), a("div", d({ ref_for: !0 }, {
 				...e.$attrs,
 				class: null,
 				style: null
@@ -517,15 +518,15 @@ var k = /* @__PURE__ */ u({
 				key: r,
 				class: ["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", { "bg-primary-200 dark:bg-primary-800": l.modelValue === t }],
 				onClick: (e) => m(t, n)
-			}), y(r), 17, Fe))), 128))])]),
-			default: C(() => [o("div", Me, [o("div", Ne, [v(e.$slots, "default", { label: p.value }, () => [s(y(p.value), 1)])]), c(b(O), {
+			}), y(r), 17, Ie))), 128))])]),
+			default: C(() => [o("div", Ne, [o("div", Pe, [v(e.$slots, "default", { label: p.value }, () => [s(y(p.value), 1)])]), c(b(O), {
 				icon: "carbon:chevron-sort",
 				class: "w-4 h-4 flex-none ml-auto"
 			})])]),
 			_: 3
 		}));
 	}
-}), Le = /* @__PURE__ */ u({
+}), Re = /* @__PURE__ */ u({
 	name: "HstSelect",
 	props: {
 		title: {},
@@ -541,7 +542,7 @@ var k = /* @__PURE__ */ u({
 			style: p(n.$attrs.style)
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
-			default: C(() => [c(Ie, {
+			default: C(() => [c(Le, {
 				options: t.options,
 				"model-value": t.modelValue,
 				"onUpdate:modelValue": a[0] ||= (e) => i("update:modelValue", e)
@@ -553,7 +554,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), Re = { class: "relative w-full flex items-center" }, ze = /* @__PURE__ */ u({
+}), ze = { class: "relative w-full flex items-center" }, Be = /* @__PURE__ */ u({
 	name: "HstSlider",
 	inheritAttrs: !1,
 	props: {
@@ -569,13 +570,13 @@ var k = /* @__PURE__ */ u({
 			set: (e) => {
 				l("update:modelValue", e);
 			}
-		}), v = n(() => (c.modelValue - c.min) / (c.max - c.min)), y = n(() => m.value ? { left: `${8 + (m.value.clientWidth - 16) * v.value}px` } : {});
+		}), v = n(() => ((c.modelValue ?? c.min) - c.min) / (c.max - c.min)), y = n(() => m.value ? { left: `${8 + (m.value.clientWidth - 16) * v.value}px` } : {});
 		return (n, s) => (h(), r(e, {
 			class: f(["poveste-slider items-center", n.$attrs.class]),
 			title: t.title,
 			style: p(n.$attrs.style)
 		}, {
-			default: C(() => [o("div", Re, [
+			default: C(() => [o("div", ze, [
 				s[3] ||= o("div", { class: "absolute inset-0 flex items-center" }, [o("div", { class: "border border-black/25 dark:border-white/25 h-1 w-full rounded-full" })], -1),
 				w(o("input", d({
 					ref_key: "input",
@@ -603,7 +604,7 @@ var k = /* @__PURE__ */ u({
 					class: "absolute",
 					style: p(y.value)
 				}, null, 4)), [[b(D), {
-					content: t.modelValue.toString(),
+					content: String(t.modelValue ?? ""),
 					shown: !0,
 					distance: 16,
 					delay: 0
@@ -616,7 +617,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), Be = ["value"], Ve = /* @__PURE__ */ u({
+}), Ve = ["value"], He = /* @__PURE__ */ u({
 	name: "HstText",
 	props: {
 		title: {},
@@ -629,7 +630,7 @@ var k = /* @__PURE__ */ u({
 			title: t.title,
 			class: f(["poveste-text cursor-text items-center", n.$attrs.class]),
 			style: p(n.$attrs.style),
-			onClick: s[1] ||= (e) => a.value.focus()
+			onClick: s[1] ||= (e) => a.value?.focus()
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
 			default: C(() => [o("input", d({
@@ -644,7 +645,7 @@ var k = /* @__PURE__ */ u({
 				value: t.modelValue,
 				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm",
 				onInput: s[0] ||= (e) => i("update:modelValue", e.target.value)
-			}), null, 16, Be)]),
+			}), null, 16, Ve)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -652,7 +653,7 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), He = ["value"], Ue = /* @__PURE__ */ u({
+}), Ue = ["value"], We = /* @__PURE__ */ u({
 	name: "HstTextarea",
 	inheritAttrs: !1,
 	props: {
@@ -666,7 +667,7 @@ var k = /* @__PURE__ */ u({
 			title: t.title,
 			class: f(["poveste-textarea cursor-text", n.$attrs.class]),
 			style: p(n.$attrs.style),
-			onClick: s[1] ||= (e) => a.value.focus()
+			onClick: s[1] ||= (e) => a.value?.focus()
 		}, {
 			actions: C(() => [v(n.$slots, "actions")]),
 			default: C(() => [o("textarea", d({
@@ -680,7 +681,7 @@ var k = /* @__PURE__ */ u({
 				value: t.modelValue,
 				class: "text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm box-border resize-y min-h-[26px]",
 				onInput: s[0] ||= (e) => i("update:modelValue", e.target.value)
-			}), null, 16, He)]),
+			}), null, 16, Ue)]),
 			_: 3
 		}, 8, [
 			"title",
@@ -688,10 +689,10 @@ var k = /* @__PURE__ */ u({
 			"style"
 		]));
 	}
-}), R = k, z = re, B = oe, V = le, H = Ve, U = Oe, W = ze, G = Ue, K = Le, q = N, J = De, Y = be, X = j, Z = je, Q = Object.assign(l(() => import("./HstJson-Dz6cYiFP.es.js")), {
+}), R = k, z = ie, B = se, V = ue, H = He, U = L, W = Be, G = We, K = Re, q = P, J = Oe, Y = xe, X = j, Z = Me, Q = Object.assign(l(() => import("./HstJson-3DiXqRjL.es.js")), {
 	name: "HstJson",
 	emits: ["update:modelValue"]
-}), $ = fe, We = {
+}), $ = pe, Ge = {
 	HstButton: R,
 	HstButtonGroup: z,
 	HstCheckbox: B,
@@ -710,4 +711,4 @@ var k = /* @__PURE__ */ u({
 	HstColorSelect: $
 };
 //#endregion
-export { R as HstButton, z as HstButtonGroup, B as HstCheckbox, V as HstCheckboxList, $ as HstColorSelect, q as HstColorShades, X as HstCopyIcon, Q as HstJson, U as HstNumber, Z as HstRadio, K as HstSelect, W as HstSlider, H as HstText, G as HstTextarea, Y as HstTokenGrid, J as HstTokenList, We as components };
+export { R as HstButton, z as HstButtonGroup, B as HstCheckbox, V as HstCheckboxList, $ as HstColorSelect, q as HstColorShades, X as HstCopyIcon, Q as HstJson, U as HstNumber, Z as HstRadio, K as HstSelect, W as HstSlider, H as HstText, G as HstTextarea, Y as HstTokenGrid, J as HstTokenList, Ge as components };

package/dist/style-standalone.css

@@ -518,6 +518,9 @@
   .stroke-2 {
     stroke-width: 2;
   }
+  .p-0 {
+    padding: 0px;
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -675,6 +678,9 @@
   .focus\:border-primary-500:focus {
     border-color: var(--color-primary-500);
   }
+  .focus-visible\:opacity-100:focus-visible {
+    opacity: 100%;
+  }
   .dark\:border-gray-850:where(.ptw-dark, .ptw-dark *) {
     border-color: var(--color-gray-850);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/controls",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Prebuilt controls components",
   "author": {
     "name": "Sorin Gitlan",
@@ -52,8 +52,8 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.35.0",
-    "@poveste/shared": "^0.13.1",
-    "@poveste/vendors": "^0.13.1"
+    "@poveste/shared": "^0.15.0",
+    "@poveste/vendors": "^0.15.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.3",
@@ -62,17 +62,17 @@
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/runtime-dom": "^3.5.26",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^14.4.0",
-    "concurrently": "^9.1.0",
+    "@vueuse/core": "^15.0.0",
+    "concurrently": "^10.0.5",
     "floating-vue": "5.2.2",
     "jsdom": "^30.0.1",
     "postcss": "^8.5.23",
     "tailwindcss": "^4.3.3",
-    "typescript": "5.6.3",
+    "typescript": "6.0.3",
     "vite": "^8.2.0",
-    "vitest": "^4.1.10",
+    "vitest": "^5.0.0",
     "vue": "^3.5.26",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^3.3.11"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",