@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/components/AcSlider.vue_vue_type_script_setup_true_lang.js

@@ -1,25 +1,25 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useId as g, useModel as ee } from "vue";
-import { CircleAlert as te } from "@lucide/vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as ee, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as te, useId as ne, useModel as re } from "vue";
+import { CircleAlert as ie } from "@lucide/vue";
 //#region src/lib/components/AcSlider.vue?vue&type=script&setup=true&lang.ts
-var ne = {
+var m = {
 	key: 0,
 	class: "mb-2 flex items-start justify-between gap-3"
-}, _ = { class: "min-w-0" }, v = {
+}, h = { class: "min-w-0" }, g = {
 	key: 0,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, y = {
+}, _ = {
 	key: 1,
 	class: "mt-0.5 text-xs text-muted"
-}, b = {
+}, ae = {
 	key: 0,
 	class: "shrink-0 text-base font-medium text-heading tabular-nums",
 	"aria-hidden": "true"
-}, x = {
+}, oe = {
 	key: 1,
 	class: "mb-2 text-right text-base font-medium text-heading tabular-nums",
 	"aria-hidden": "true"
-}, re = [
+}, se = [
 	"value",
 	"min",
 	"max",
@@ -27,7 +27,7 @@ var ne = {
 	"disabled",
 	"aria-label",
 	"aria-invalid"
-], ie = { class: "relative min-w-0 flex-1" }, ae = [
+], v = { class: "relative min-w-0 flex-1" }, y = [
 	"tabindex",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -40,14 +40,14 @@ var ne = {
 	"aria-invalid",
 	"aria-required",
 	"onKeydown"
-], oe = {
+], b = {
 	key: 0,
 	class: "absolute inset-x-0 top-full mt-1 h-4",
 	"aria-hidden": "true"
-}, se = ["onClick"], ce = {
+}, ce = ["onClick"], le = {
 	key: 1,
 	class: "relative shrink-0"
-}, S = [
+}, ue = [
 	"value",
 	"min",
 	"max",
@@ -56,13 +56,13 @@ var ne = {
 	"aria-label",
 	"aria-invalid",
 	"aria-describedby"
-], C = {
+], x = {
 	key: 0,
-	class: "pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-xs text-muted",
+	class: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs text-muted",
 	"aria-hidden": "true"
-}, w = "h-9 rounded-6 border bg-surface px-2.5 text-base text-heading tabular-nums shadow-xs transition-[border-color,box-shadow] outline-none [appearance:textfield] disabled:cursor-not-allowed disabled:bg-surface-muted [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", T = /*@__PURE__*/ s({
+}, S = "h-10 rounded-10 border bg-background px-3 text-base text-heading tabular-nums transition-[color,background-color,border-color,box-shadow] duration-200 outline-none [appearance:textfield] disabled:cursor-not-allowed [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", C = /*@__PURE__*/ o({
 	__name: "AcSlider",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ s({
 		label: { default: "" },
 		description: { default: "" },
 		min: { default: 0 },
@@ -97,231 +97,233 @@ var ne = {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),
-	setup(s, { expose: c, emit: T }) {
-		let E = s, D = ee(s, "modelValue"), O = T, k = g(), A = `${k}-label`, j = `${k}-msg`, M = f(null), N = f([]), P = f(null), F = t(() => Math.max(E.max - E.min, 2 ** -52)), I = t(() => Math.max(H(E.step), H(E.min))), L = t(() => Math.max(E.step, Math.round(F.value / 10 / E.step) * E.step)), R = t(() => {
-			let e = D.value;
-			if (E.range) {
-				let [t, n] = Array.isArray(e) ? e : [E.min, E.max];
+	emits: /*@__PURE__*/ s(["change"], ["update:modelValue"]),
+	setup(o, { expose: s, emit: C }) {
+		let w = o, T = re(o, "modelValue"), E = C, D = ne(), O = `${D}-label`, k = `${D}-msg`, A = `${D}-hint`, j = d(null), M = d([]), N = d(null), P = t(() => Math.max(w.max - w.min, 2 ** -52)), F = t(() => Math.max(H(w.step), H(w.min))), I = t(() => Math.max(w.step, Math.round(P.value / 10 / w.step) * w.step)), L = t(() => {
+			let e = T.value;
+			if (w.range) {
+				let [t, n] = Array.isArray(e) ? e : [w.min, w.max];
 				return [U(Math.min(t, n)), U(Math.max(t, n))];
 			}
-			return [U(typeof e == "number" ? e : Array.isArray(e) ? e[0] : E.min)];
-		}), z = t(() => E.range ? {
-			left: `${G(R.value[0])}%`,
-			width: `${G(R.value[1]) - G(R.value[0])}%`
+			return [U(typeof e == "number" ? e : Array.isArray(e) ? e[0] : w.min)];
+		}), R = t(() => w.range ? {
+			left: `${W(L.value[0])}%`,
+			width: `${W(L.value[1]) - W(L.value[0])}%`
 		} : {
 			left: "0%",
-			width: `${G(R.value[0])}%`
-		}), B = t(() => E.marks.map((e) => typeof e == "number" ? {
+			width: `${W(L.value[0])}%`
+		}), z = t(() => w.marks.map((e) => typeof e == "number" ? {
 			value: e,
-			label: K(e)
+			label: G(e)
 		} : {
 			value: e.value,
-			label: e.label ?? K(e.value)
-		}).filter((e) => e.value >= E.min && e.value <= E.max)), V = t(() => E.errorMsg || E.hint ? j : void 0);
+			label: e.label ?? G(e.value)
+		}).filter((e) => e.value >= w.min && e.value <= w.max)), B = t(() => w.errorMsg ? "border-danger/60 focus:border-danger focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus:focus-ring", !w.disabled && "hover:border-accent-active"]), V = t(() => [w.hint && A, w.errorMsg && k].filter(Boolean).join(" ") || void 0);
 		function H(e) {
 			let t = String(e);
 			return t.includes(".") ? t.split(".")[1].length : 0;
 		}
 		function U(e) {
-			return Math.min(E.max, Math.max(E.min, Number.isFinite(e) ? e : E.min));
+			return Math.min(w.max, Math.max(w.min, Number.isFinite(e) ? e : w.min));
+		}
+		function de(e) {
+			let t = Math.round((U(e) - w.min) / w.step) * w.step + w.min;
+			return U(Number(t.toFixed(F.value)));
 		}
 		function W(e) {
-			let t = Math.round((U(e) - E.min) / E.step) * E.step + E.min;
-			return U(Number(t.toFixed(I.value)));
+			return (e - w.min) / P.value * 100;
 		}
 		function G(e) {
-			return (e - E.min) / F.value * 100;
-		}
-		function K(e) {
-			return E.formatValue ? E.formatValue(e) : E.unit ? /^[a-z]/i.test(E.unit) ? `${e} ${E.unit}` : `${e}${E.unit}` : String(e);
+			return w.formatValue ? w.formatValue(e) : w.unit ? /^[a-z]/i.test(w.unit) ? `${e} ${w.unit}` : `${e}${w.unit}` : String(e);
 		}
-		function q() {
-			return E.range ? [R.value[0], R.value[1]] : R.value[0];
+		function K() {
+			return w.range ? [L.value[0], L.value[1]] : L.value[0];
 		}
-		function J(e) {
-			return E.range ? e === 0 ? {
-				lo: E.min,
-				hi: R.value[1]
+		function q(e) {
+			return w.range ? e === 0 ? {
+				lo: w.min,
+				hi: L.value[1]
 			} : {
-				lo: R.value[0],
-				hi: E.max
+				lo: L.value[0],
+				hi: w.max
 			} : {
-				lo: E.min,
-				hi: E.max
+				lo: w.min,
+				hi: w.max
 			};
 		}
-		function Y(e, t) {
-			let { lo: n, hi: r } = J(e), i = Math.min(r, Math.max(n, W(t)));
-			if (!E.range) {
-				i !== R.value[0] && (D.value = i);
+		function J(e, t) {
+			let { lo: n, hi: r } = q(e), i = Math.min(r, Math.max(n, de(t)));
+			if (!w.range) {
+				i !== L.value[0] && (T.value = i);
 				return;
 			}
-			let a = [R.value[0], R.value[1]];
-			a[e] = i, (a[0] !== R.value[0] || a[1] !== R.value[1] || !Array.isArray(D.value)) && (D.value = a);
+			let a = [L.value[0], L.value[1]];
+			a[e] = i, (a[0] !== L.value[0] || a[1] !== L.value[1] || !Array.isArray(T.value)) && (T.value = a);
 		}
-		function X(e) {
-			let t = M.value.getBoundingClientRect(), n = t.width ? (e - t.left) / t.width : 0;
-			return E.min + Math.min(1, Math.max(0, n)) * F.value;
+		function Y(e) {
+			let t = j.value.getBoundingClientRect(), n = t.width ? (e - t.left) / t.width : 0;
+			return w.min + Math.min(1, Math.max(0, n)) * P.value;
 		}
-		function Z(e) {
-			if (!E.range) return 0;
-			let [t, n] = R.value;
+		function X(e) {
+			if (!w.range) return 0;
+			let [t, n] = L.value;
 			return t === n ? e < t ? 0 : 1 : Math.abs(e - t) <= Math.abs(e - n) ? 0 : 1;
 		}
-		function le(e) {
-			if (E.disabled || e.button !== 0 || !M.value) return;
+		function fe(e) {
+			if (w.disabled || e.button !== 0 || !j.value) return;
 			e.preventDefault();
-			let t = X(e.clientX), n = Z(t);
-			P.value = n, Y(n, t), M.value.setPointerCapture(e.pointerId), N.value[n]?.focus({ preventScroll: !0 });
+			let t = Y(e.clientX), n = X(t);
+			N.value = n, J(n, t), j.value.setPointerCapture(e.pointerId), M.value[n]?.focus({ preventScroll: !0 });
 		}
-		function ue(e) {
-			P.value !== null && Y(P.value, X(e.clientX));
+		function pe(e) {
+			N.value !== null && J(N.value, Y(e.clientX));
 		}
-		function Q(e) {
-			P.value !== null && (P.value = null, M.value?.hasPointerCapture(e.pointerId) && M.value.releasePointerCapture(e.pointerId), O("change", q()));
+		function Z(e) {
+			N.value !== null && (N.value = null, j.value?.hasPointerCapture(e.pointerId) && j.value.releasePointerCapture(e.pointerId), E("change", K()));
 		}
-		function de(e, t) {
-			if (E.disabled) return;
-			let n = R.value[t], { lo: r, hi: i } = J(t), a = {
-				ArrowRight: n + E.step,
-				ArrowUp: n + E.step,
-				ArrowLeft: n - E.step,
-				ArrowDown: n - E.step,
-				PageUp: n + L.value,
-				PageDown: n - L.value,
+		function Q(e, t) {
+			if (w.disabled) return;
+			let n = L.value[t], { lo: r, hi: i } = q(t), a = {
+				ArrowRight: n + w.step,
+				ArrowUp: n + w.step,
+				ArrowLeft: n - w.step,
+				ArrowDown: n - w.step,
+				PageUp: n + I.value,
+				PageDown: n - I.value,
 				Home: r,
 				End: i
 			};
-			e.key in a && (e.preventDefault(), Y(t, a[e.key]), O("change", q()));
+			e.key in a && (e.preventDefault(), J(t, a[e.key]), E("change", K()));
 		}
-		function fe(e) {
-			if (E.disabled) return;
-			let t = Z(e);
-			Y(t, e), N.value[t]?.focus(), O("change", q());
+		function me(e) {
+			if (w.disabled) return;
+			let t = X(e);
+			J(t, e), M.value[t]?.focus(), E("change", K());
 		}
 		function $(e, t) {
 			let n = e.target, r = n.valueAsNumber;
-			Number.isFinite(r) && (Y(t, r), O("change", q())), n.value = String(R.value[t]);
+			Number.isFinite(r) && (J(t, r), E("change", K())), n.value = String(L.value[t]);
 		}
-		function pe(e) {
-			let t = E.label || "Value";
-			return E.range ? `${t}, ${e === 0 ? "minimum" : "maximum"}` : E.label ? void 0 : t;
+		function he(e) {
+			let t = w.label || "Value";
+			return w.range ? `${t}, ${e === 0 ? "minimum" : "maximum"}` : w.label ? void 0 : t;
 		}
-		function me(e, t) {
-			e && (N.value[t] = e);
+		function ge(e, t) {
+			e && (M.value[t] = e);
 		}
-		return c({ focus: () => N.value[0]?.focus() }), (t, c) => (d(), r("div", {
-			class: l(["w-full", s.disabled && "opacity-60"]),
+		return s({ focus: () => M.value[0]?.focus() }), (t, s) => (u(), r("div", {
+			class: c(["w-full", o.disabled && "opacity-50"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-slider"
 		}, [
-			s.label || s.description || !s.showInput && !s.range ? (d(), r("div", ne, [i("div", _, [s.label ? (d(), r("p", {
+			o.label || o.description || !o.showInput && !o.range ? (u(), r("div", m, [i("div", h, [o.label ? (u(), r("p", {
 				key: 0,
+				id: O,
+				class: "flex items-center gap-1 text-base font-medium text-heading"
+			}, [i("span", null, p(o.label), 1), o.required ? (u(), r("span", g, "*")) : n("", !0)])) : n("", !0), o.description ? (u(), r("p", _, p(o.description), 1)) : n("", !0)]), o.showInput ? n("", !0) : (u(), r("span", ae, p(o.range ? `${G(L.value[0])} – ${G(L.value[1])}` : G(L.value[0])), 1))])) : !o.showInput && o.range ? (u(), r("div", oe, p(G(L.value[0])) + " – " + p(G(L.value[1])), 1)) : n("", !0),
+			o.hint ? (u(), r("p", {
+				key: 2,
 				id: A,
-				class: "text-base font-medium text-heading"
-			}, [a(m(s.label), 1), s.required ? (d(), r("span", v, " *")) : n("", !0)])) : n("", !0), s.description ? (d(), r("p", y, m(s.description), 1)) : n("", !0)]), s.showInput ? n("", !0) : (d(), r("span", b, m(s.range ? `${K(R.value[0])} – ${K(R.value[1])}` : K(R.value[0])), 1))])) : !s.showInput && s.range ? (d(), r("div", x, m(K(R.value[0])) + " – " + m(K(R.value[1])), 1)) : n("", !0),
-			i("div", { class: l(["flex items-center gap-3", B.value.length > 0 && "pb-5"]) }, [
-				s.showInput && s.range ? (d(), r("input", {
+				class: "mb-2 text-base text-muted"
+			}, p(o.hint), 1)) : n("", !0),
+			i("div", { class: c(["flex items-center gap-3", z.value.length > 0 && "pb-5"]) }, [
+				o.showInput && o.range ? (u(), r("input", {
 					key: 0,
 					type: "number",
-					value: R.value[0],
-					min: s.min,
-					max: R.value[1],
-					step: s.step,
-					disabled: s.disabled,
-					"aria-label": `${s.label || "Value"}, minimum`,
-					"aria-invalid": !!s.errorMsg || void 0,
-					class: l(["shrink-0", [
-						w,
-						"w-16",
-						s.errorMsg ? "border-red-60" : "border-border hover:border-border-dark focus:focus-ring"
+					value: L.value[0],
+					min: o.min,
+					max: L.value[1],
+					step: o.step,
+					disabled: o.disabled,
+					"aria-label": `${o.label || "Value"}, minimum`,
+					"aria-invalid": !!o.errorMsg || void 0,
+					class: c(["shrink-0", [
+						S,
+						B.value,
+						"w-16"
 					]]),
-					onChange: c[0] ||= (e) => $(e, 0)
-				}, null, 42, re)) : n("", !0),
-				i("div", ie, [i("div", { class: l(s.tooltip === "always" && "pt-8") }, [i("div", {
+					onChange: s[0] ||= (e) => $(e, 0)
+				}, null, 42, se)) : n("", !0),
+				i("div", v, [i("div", { class: c(o.tooltip === "always" && "pt-10") }, [i("div", {
 					ref_key: "track",
-					ref: M,
-					class: l(["relative flex h-5 touch-none items-center select-none", s.disabled ? "cursor-not-allowed" : "cursor-pointer"]),
-					onPointerdown: le,
-					onPointermove: ue,
-					onPointerup: Q,
-					onPointercancel: Q
-				}, [i("div", { class: l(["relative h-1.5 w-full rounded-full", s.errorMsg ? "bg-red-90" : "bg-slate-90"]) }, [i("div", {
-					class: l(["absolute inset-y-0 rounded-full", s.errorMsg ? "bg-danger" : "bg-primary"]),
-					style: u(z.value)
-				}, null, 6), (d(!0), r(e, null, p(B.value, (e) => (d(), r("span", {
+					ref: j,
+					class: c(["relative flex h-5 touch-none items-center select-none", o.disabled ? "cursor-not-allowed" : "cursor-pointer"]),
+					onPointerdown: fe,
+					onPointermove: pe,
+					onPointerup: Z,
+					onPointercancel: Z
+				}, [i("div", { class: c(["relative h-1.5 w-full rounded-full", o.errorMsg ? "bg-danger/15" : "bg-surface-sunken"]) }, [i("div", {
+					class: c(["absolute inset-y-0 rounded-full", o.errorMsg ? "bg-danger" : "bg-primary"]),
+					style: l(R.value)
+				}, null, 6), (u(!0), r(e, null, f(z.value, (e) => (u(), r("span", {
 					key: e.value,
-					class: l(["absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", (s.range ? e.value >= R.value[0] && e.value <= R.value[1] : e.value <= R.value[0]) ? "bg-primary-90" : "bg-slate-70"]),
-					style: u({ left: `${G(e.value)}%` }),
+					class: c(["absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", (o.range ? e.value >= L.value[0] && e.value <= L.value[1] : e.value <= L.value[0]) ? "bg-white/70" : "bg-muted/40"]),
+					style: l({ left: `${W(e.value)}%` }),
 					"aria-hidden": "true"
-				}, null, 6))), 128))], 2), (d(!0), r(e, null, p(R.value, (e, t) => (d(), r("div", {
+				}, null, 6))), 128))], 2), (u(!0), r(e, null, f(L.value, (e, t) => (u(), r("div", {
 					key: t,
 					ref_for: !0,
-					ref: (e) => me(e, t),
+					ref: (e) => ge(e, t),
 					role: "slider",
-					tabindex: s.disabled ? -1 : 0,
-					"aria-valuemin": J(t).lo,
-					"aria-valuemax": J(t).hi,
+					tabindex: o.disabled ? -1 : 0,
+					"aria-valuemin": q(t).lo,
+					"aria-valuemax": q(t).hi,
 					"aria-valuenow": e,
-					"aria-valuetext": K(e),
+					"aria-valuetext": G(e),
 					"aria-orientation": "horizontal",
-					"aria-labelledby": !s.range && s.label ? A : void 0,
-					"aria-label": pe(t),
+					"aria-labelledby": !o.range && o.label ? O : void 0,
+					"aria-label": he(t),
 					"aria-describedby": V.value,
-					"aria-disabled": s.disabled || void 0,
-					"aria-invalid": !!s.errorMsg || void 0,
-					"aria-required": s.required || void 0,
-					class: l(["group/thumb absolute top-1/2 size-4.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-surface shadow-sm transition-[box-shadow,scale] duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring motion-safe:hover:scale-110", [
-						s.errorMsg ? "border-danger" : "border-primary",
-						P.value === t && "ring-[3px] ring-ring motion-safe:scale-110",
-						s.range && R.value[0] === R.value[1] && t === 1 && "z-10"
+					"aria-disabled": o.disabled || void 0,
+					"aria-invalid": !!o.errorMsg || void 0,
+					"aria-required": o.required || void 0,
+					class: c(["group/thumb absolute top-1/2 size-4.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-surface shadow-sm transition-[box-shadow,scale] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-safe:hover:scale-110", [
+						o.errorMsg ? "border-danger" : "border-primary",
+						N.value === t && (o.errorMsg ? "ring-4 ring-danger/20" : "ring-4 ring-primary/20") + " motion-safe:scale-110",
+						o.range && L.value[0] === L.value[1] && t === 1 && "z-10"
 					]]),
-					style: u({ left: `${G(e)}%` }),
-					onKeydown: (e) => de(e, t)
-				}, [s.tooltip === "never" ? n("", !0) : (d(), r("span", {
+					style: l({ left: `${W(e)}%` }),
+					onKeydown: (e) => Q(e, t)
+				}, [o.tooltip === "never" ? n("", !0) : (u(), r("span", {
 					key: 0,
-					class: l(["pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-6 bg-slate-10 px-2 py-1 text-xs font-medium whitespace-nowrap text-slate-95 tabular-nums shadow-md transition-opacity duration-100 dark:bg-slate-80 dark:text-slate-10 dark:ring-1 dark:ring-slate-70", s.tooltip === "always" || P.value === t ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"]),
+					class: c(["pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-10 border border-white/10 bg-tooltip px-2.5 py-1.5 text-xs leading-relaxed font-medium whitespace-nowrap text-on-tooltip tabular-nums shadow-lg shadow-black/25 transition-opacity duration-100", o.tooltip === "always" || N.value === t ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"]),
 					"aria-hidden": "true"
-				}, m(K(e)), 3))], 46, ae))), 128))], 34)], 2), B.value.length ? (d(), r("div", oe, [(d(!0), r(e, null, p(B.value, (e, t) => (d(), r("span", {
+				}, p(G(e)), 3))], 46, y))), 128))], 34)], 2), z.value.length ? (u(), r("div", b, [(u(!0), r(e, null, f(z.value, (e, t) => (u(), r("span", {
 					key: e.value,
-					class: l(["absolute top-0 text-xs whitespace-nowrap text-muted tabular-nums transition-colors", [t === 0 && G(e.value) < 5 ? "" : t === B.value.length - 1 && G(e.value) > 95 ? "-translate-x-full" : "-translate-x-1/2", !s.disabled && "cursor-pointer hover:text-heading"]]),
-					style: u({ left: `${G(e.value)}%` }),
-					onClick: (t) => fe(e.value)
-				}, m(e.label), 15, se))), 128))])) : n("", !0)]),
-				s.showInput ? (d(), r("div", ce, [i("input", {
+					class: c(["absolute top-0 text-xs whitespace-nowrap text-muted tabular-nums transition-colors", [t === 0 && W(e.value) < 5 ? "" : t === z.value.length - 1 && W(e.value) > 95 ? "-translate-x-full" : "-translate-x-1/2", !o.disabled && "cursor-pointer hover:text-heading"]]),
+					style: l({ left: `${W(e.value)}%` }),
+					onClick: (t) => me(e.value)
+				}, p(e.label), 15, ce))), 128))])) : n("", !0)]),
+				o.showInput ? (u(), r("div", le, [i("input", {
 					type: "number",
-					value: R.value[+!!s.range],
-					min: s.range ? R.value[0] : s.min,
-					max: s.max,
-					step: s.step,
-					disabled: s.disabled,
-					"aria-label": s.range ? `${s.label || "Value"}, maximum` : s.label || "Value",
-					"aria-invalid": !!s.errorMsg || void 0,
+					value: L.value[+!!o.range],
+					min: o.range ? L.value[0] : o.min,
+					max: o.max,
+					step: o.step,
+					disabled: o.disabled,
+					"aria-label": o.range ? `${o.label || "Value"}, maximum` : o.label || "Value",
+					"aria-invalid": !!o.errorMsg || void 0,
 					"aria-describedby": V.value,
-					class: l([
-						w,
-						s.range ? "w-16" : "w-20",
-						s.errorMsg ? "border-red-60" : "border-border hover:border-border-dark focus:focus-ring",
-						s.unit && !s.formatValue && !s.range && "pr-8"
+					class: c([
+						S,
+						B.value,
+						o.range ? "w-16" : "w-20",
+						o.unit && !o.formatValue && !o.range && "pr-8"
 					]),
-					onChange: c[1] ||= (e) => $(e, +!!s.range)
-				}, null, 42, S), s.unit && !s.formatValue && !s.range ? (d(), r("span", C, m(s.unit.trim()), 1)) : n("", !0)])) : n("", !0)
+					onChange: s[1] ||= (e) => $(e, +!!o.range)
+				}, null, 42, ue), o.unit && !o.formatValue && !o.range ? (u(), r("span", x, p(o.unit.trim()), 1)) : n("", !0)])) : n("", !0)
 			], 2),
-			s.errorMsg ? (d(), r("p", {
-				key: 2,
-				id: j,
-				class: "mt-1.5 flex items-center gap-1 text-xs text-red-30"
-			}, [o(h(te), {
-				class: "size-3.5 shrink-0",
-				"aria-hidden": "true"
-			}), a(" " + m(s.errorMsg), 1)])) : s.hint ? (d(), r("p", {
+			o.errorMsg ? (u(), r("p", {
 				key: 3,
-				id: j,
-				class: "mt-1.5 text-xs text-muted"
-			}, m(s.hint), 1)) : n("", !0)
+				id: k,
+				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				role: "alert"
+			}, [ee(te(ie), {
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			}), a(" " + p(o.errorMsg), 1)])) : n("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { T as default };
+export { C as default };

package/dist/lib/components/AcStatCard.vue.d.ts

@@ -23,13 +23,13 @@ export interface Props {
     progress?: number;
     /** Colour of the `progress` bar. `auto` turns it warning from 80 and danger from 95. */
     progressColor?: Tone | "auto";
-    /** A Lucide icon shown in a tinted tile at the top right. Or use the `icon` slot. */
+    /** A Lucide icon shown in a round 36px tile at the top right, tinted with `status`. Or use the `icon` slot. */
     icon?: Component;
-    /** `small` for dense grids and summaries (14px value); `normal` for overview rows (24px value). */
+    /** `small` for dense grids and summaries (16px value); `normal` for overview rows (24px value), as cloud-ui's dashboard widgets. */
     size?: "small" | "normal";
     /** Label on the left and value on the right, in one compact row. Replaces the old OverviewCard. */
     inline?: boolean;
-    /** Sets the value in Geist Mono, for IDs, timestamps and durations. */
+    /** Sets the value in the monospace font, for IDs, timestamps and durations. */
     mono?: boolean;
     /** Shows a placeholder bar instead of the value while it loads. */
     loading?: boolean;