@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,26 +1,22 @@
 import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, withCtx as _ } from "vue";
 import { ArrowDownRight as v, ArrowUpRight as y, Minus as b } from "@lucide/vue";
 //#region src/lib/components/AcStatCard.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-busy"], ee = {
+var x = ["aria-busy"], S = {
 	key: 0,
 	class: "-mt-0.5 flex shrink-0 items-center gap-2"
-}, te = {
-	key: 0,
-	class: "inline-flex size-8 items-center justify-center rounded-8 bg-primary-95 text-primary-30 [&_svg]:size-4",
-	"aria-hidden": "true"
-}, ne = ["id"], S = {
+}, C = ["id"], w = {
 	key: 1,
 	class: "min-w-0"
-}, C = { class: "flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5" }, w = {
+}, T = { class: "flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5" }, E = {
 	key: 0,
-	class: "text-base text-muted"
-}, T = ["viewBox", "aria-label"], E = ["d"], D = ["d"], O = ["cx", "cy"], k = ["aria-labelledby", "aria-valuenow"], A = {
+	class: "text-xs font-medium text-muted"
+}, D = ["viewBox", "aria-label"], O = ["d"], ee = ["d"], te = ["cx", "cy"], ne = ["aria-labelledby", "aria-valuenow"], k = {
 	key: 1,
-	class: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-muted"
-}, j = {
+	class: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 text-sm text-muted"
+}, A = {
 	key: 0,
-	class: "inline-flex items-center gap-1"
-}, M = { class: "sr-only" }, N = { key: 0 }, P = 88, F = 28, I = /*@__PURE__*/ o({
+	class: "inline-flex items-center gap-1.5"
+}, j = { class: "sr-only" }, M = { key: 0 }, N = 88, P = 28, F = /*@__PURE__*/ o({
 	__name: "AcStatCard",
 	props: {
 		label: {},
@@ -56,80 +52,85 @@ var x = ["aria-busy"], ee = {
 		target: { default: void 0 }
 	},
 	emits: ["click"],
-	setup(o, { emit: I }) {
-		let L = o, R = I, z = {
+	setup(o, { emit: F }) {
+		let I = o, L = F, R = {
 			default: {
 				card: "border-border bg-surface",
 				value: "text-heading",
-				label: "text-muted"
+				label: "text-muted",
+				tile: "bg-primary/10 text-primary-strong ring-primary/20"
 			},
 			success: {
 				card: "border-border bg-surface",
-				value: "text-green-30",
-				label: "text-muted"
+				value: "text-success-strong",
+				label: "text-muted",
+				tile: "bg-success/10 text-success-strong ring-success/20"
 			},
 			info: {
 				card: "border-border bg-surface",
-				value: "text-blue-30",
-				label: "text-muted"
+				value: "text-info-strong",
+				label: "text-muted",
+				tile: "bg-info/10 text-info-strong ring-info/20"
 			},
 			warning: {
-				card: "border-yellow-80 bg-yellow-97",
-				value: "text-yellow-20",
-				label: "text-yellow-20"
+				card: "border-warning/30 bg-warning/5",
+				value: "text-warning-strong",
+				label: "text-warning-strong",
+				tile: "bg-warning/10 text-warning-strong ring-warning/25"
 			},
 			danger: {
-				card: "border-red-80 bg-red-97",
-				value: "text-red-30",
-				label: "text-red-30"
+				card: "border-danger/25 bg-danger/5",
+				value: "text-danger-strong",
+				label: "text-danger-strong",
+				tile: "bg-danger/10 text-danger-strong ring-danger/20"
 			}
-		}, B = {
+		}, z = {
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
-		}, V = s(), H = V?.appContext.components.RouterLink, U = g(), W = e(() => z[L.status]), G = e(() => {
-			if (L.trend) return L.trend;
-			if (L.delta === void 0 || L.delta === "") return;
-			if (typeof L.delta == "number") return L.delta > 0 ? "up" : L.delta < 0 ? "down" : "flat";
-			let e = L.delta.trim()[0];
+		}, B = s(), V = B?.appContext.components.RouterLink, H = g(), U = e(() => R[I.status]), W = e(() => {
+			if (I.trend) return I.trend;
+			if (I.delta === void 0 || I.delta === "") return;
+			if (typeof I.delta == "number") return I.delta > 0 ? "up" : I.delta < 0 ? "down" : "flat";
+			let e = I.delta.trim()[0];
 			return e === "+" ? "up" : e === "-" || e === "−" ? "down" : "flat";
-		}), K = e(() => typeof L.delta == "number" ? `${L.delta > 0 ? "+" : L.delta < 0 ? "−" : ""}${Math.abs(L.delta).toLocaleString(void 0, { maximumFractionDigits: 1 })}%` : L.delta ?? ""), q = e(() => G.value === "flat" || !G.value ? "text-muted" : G.value === "up" === L.invertTrend ? "text-red-30" : "text-green-30"), J = e(() => !!G.value && K.value !== ""), Y = e(() => Math.min(100, Math.max(0, L.progress ?? 0))), X = e(() => L.progressColor === "auto" ? Y.value >= 95 ? B.danger : Y.value >= 80 ? B.warning : B.primary : B[L.progressColor]), re = e(() => G.value === "up" ? y : G.value === "down" ? v : b), Z = e(() => {
-			let e = L.sparkline.filter((e) => Number.isFinite(e));
+		}), G = e(() => typeof I.delta == "number" ? `${I.delta > 0 ? "+" : I.delta < 0 ? "−" : ""}${Math.abs(I.delta).toLocaleString(void 0, { maximumFractionDigits: 1 })}%` : I.delta ?? ""), K = e(() => W.value === "flat" || !W.value ? "bg-surface-sunken text-muted" : W.value === "up" === I.invertTrend ? "bg-danger/10 text-danger-strong" : "bg-success/10 text-success-strong"), q = e(() => !!W.value && G.value !== ""), J = e(() => Math.min(100, Math.max(0, I.progress ?? 0))), Y = e(() => I.progressColor === "auto" ? J.value >= 95 ? z.danger : J.value >= 80 ? z.warning : z.primary : z[I.progressColor]), X = e(() => W.value === "up" ? y : W.value === "down" ? v : b), Z = e(() => {
+			let e = I.sparkline.filter((e) => Number.isFinite(e));
 			if (e.length < 2) return null;
 			let t = Math.min(...e), n = Math.max(...e), r = n - t || 1, i = e.map((n, i) => [i / (e.length - 1) * 82 + 3, 25 - (n - t) / r * 22]), a = i.map(([e, t], n) => `${n ? "L" : "M"}${e.toFixed(1)} ${t.toFixed(1)}`).join(" "), o = i[i.length - 1], s = (e) => e.toLocaleString(), c = `Trend over ${e.length} points: from ${s(e[0])} to ${s(e[e.length - 1])}, low ${s(t)}, high ${s(n)}`;
 			return {
 				line: a,
-				area: `${a} L${o[0].toFixed(1)} ${F} L3 ${F} Z`,
+				area: `${a} L${o[0].toFixed(1)} ${P} L3 ${P} Z`,
 				last: o,
 				summary: c
 			};
-		}), ie = e(() => L.inline || L.size === "small" ? "text-lg font-semibold" : "text-3xl font-semibold"), Q = e(() => {
-			if (L.to !== void 0 && H) return {
-				is: H,
-				to: L.to
+		}), re = e(() => I.inline || I.size === "small" ? "text-lg font-semibold tabular-nums" : "text-3xl font-bold tracking-tight tabular-nums"), Q = e(() => {
+			if (I.to !== void 0 && V) return {
+				is: V,
+				to: I.to
 			};
-			let e = L.href ?? (typeof L.to == "string" ? L.to : void 0);
+			let e = I.href ?? (typeof I.to == "string" ? I.to : void 0);
 			return e ? {
 				is: "a",
 				href: e,
-				target: L.target,
-				rel: L.target === "_blank" ? "noopener noreferrer" : void 0
+				target: I.target,
+				rel: I.target === "_blank" ? "noopener noreferrer" : void 0
 			} : null;
 		});
 		function $() {
-			return !Q.value && !!V?.vnode.props?.onClick;
+			return !Q.value && !!B?.vnode.props?.onClick;
 		}
-		function ae(e) {
-			R("click", e);
+		function ie(e) {
+			L("click", e);
 		}
 		return (e, s) => (d(), r("div", {
-			class: l(["relative flex min-w-0 rounded-10 border shadow-xs transition-[border-color,box-shadow] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", [
-				W.value.card,
-				o.inline ? "items-center justify-between gap-3 px-4 py-2.5" : "flex-col gap-2",
-				!o.inline && (o.size === "small" ? "px-3.5 py-3" : "p-4"),
-				(Q.value || $()) && "hover:border-border-dark hover:shadow-sm"
+			class: l(["relative flex min-w-0 rounded-14 border transition-[background-color,border-color,box-shadow,translate] duration-200 has-[[data-ac-card-link]:focus-visible]:ring-2 has-[[data-ac-card-link]:focus-visible]:ring-ring has-[[data-ac-card-link]:focus-visible]:ring-offset-2 has-[[data-ac-card-link]:focus-visible]:ring-offset-surface motion-reduce:transition-none", [
+				U.value.card,
+				o.inline ? "items-center justify-between gap-3 px-4 py-3" : "flex-col gap-2",
+				!o.inline && (o.size === "small" ? "px-4 py-3.5" : "p-5"),
+				(Q.value || $()) && "hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0"
 			]]),
 			"aria-busy": o.loading || void 0,
 			"data-ac-ds": "",
@@ -139,16 +140,16 @@ var x = ["aria-busy"], ee = {
 				...Q.value,
 				is: void 0
 			} : {}, {
-				id: `${h(U)}-label`,
+				id: `${h(H)}-label`,
 				type: $() ? "button" : void 0,
-				"aria-describedby": Q.value || $() ? `${h(U)}-value` : void 0,
+				"aria-describedby": Q.value || $() ? `${h(H)}-value` : void 0,
 				"data-ac-card-link": Q.value || $() ? "" : void 0,
-				class: ["min-w-0 truncate text-left font-medium outline-none after:absolute after:inset-0 after:rounded-10", [
-					o.inline ? "text-base text-body" : o.size === "small" ? "text-sm tracking-wide uppercase" : "text-xs",
-					!o.inline && W.value.label,
+				class: ["min-w-0 truncate text-left outline-none after:absolute after:inset-0 after:rounded-14", [
+					o.inline ? "text-base font-medium text-body" : ["font-semibold tracking-wide uppercase", o.size === "small" ? "text-sm" : "text-xs"],
+					!o.inline && U.value.label,
 					(Q.value || $()) && "cursor-pointer"
 				]],
-				onClick: s[0] ||= (e) => Q.value || $() ? ae(e) : void 0
+				onClick: s[0] ||= (e) => Q.value || $() ? ie(e) : void 0
 			}), {
 				default: _(() => [a(m(o.label), 1)]),
 				_: 1
@@ -158,68 +159,72 @@ var x = ["aria-busy"], ee = {
 				"aria-describedby",
 				"data-ac-card-link",
 				"class"
-			])), !o.inline && (e.$slots.badge || e.$slots.icon || o.icon) ? (d(), r("div", ee, [f(e.$slots, "badge"), e.$slots.icon || o.icon ? (d(), r("span", te, [f(e.$slots, "icon", {}, () => [(d(), t(p(o.icon)))])])) : n("", !0)])) : n("", !0)], 2),
+			])), !o.inline && (e.$slots.badge || e.$slots.icon || o.icon) ? (d(), r("div", S, [f(e.$slots, "badge"), e.$slots.icon || o.icon ? (d(), r("span", {
+				key: 0,
+				class: l(["inline-flex items-center justify-center rounded-full ring-1 ring-inset [&_svg]:size-4", [U.value.tile, o.size === "small" ? "size-8" : "size-9"]]),
+				"aria-hidden": "true"
+			}, [f(e.$slots, "icon", {}, () => [(d(), t(p(o.icon)))])], 2)) : n("", !0)])) : n("", !0)], 2),
 			i("div", {
-				id: `${h(U)}-value`,
+				id: `${h(H)}-value`,
 				class: l(["flex min-w-0 items-end justify-between gap-3", o.inline ? "shrink-0" : "flex-1"])
 			}, [o.loading ? (d(), r("span", {
 				key: 0,
-				class: l(["ac-skeleton-bone block rounded-4", o.inline ? "h-4 w-12" : o.size === "small" ? "h-4 w-2/5" : "mt-1 h-6 w-1/2"])
-			}, null, 2)) : (d(), r("div", S, [f(e.$slots, "default", {}, () => [i("p", C, [i("span", { class: l(["min-w-0 break-words", [
-				ie.value,
-				W.value.value,
+				class: l(["ac-skeleton-bone block rounded-6", o.inline ? "h-4 w-12" : o.size === "small" ? "h-4 w-2/5" : "mt-1 h-7 w-1/2"])
+			}, null, 2)) : (d(), r("div", w, [f(e.$slots, "default", {}, () => [i("p", T, [i("span", { class: l(["min-w-0 break-words", [
+				re.value,
+				U.value.value,
 				o.mono && "font-mono tracking-tight"
-			]]) }, m(o.value), 3), o.suffix ? (d(), r("span", w, m(o.suffix), 1)) : n("", !0)])])])), Z.value && !o.inline && !o.loading ? (d(), r("svg", {
+			]]) }, m(o.value), 3), o.suffix ? (d(), r("span", E, m(o.suffix), 1)) : n("", !0)])])])), Z.value && !o.inline && !o.loading ? (d(), r("svg", {
 				key: 2,
-				width: P,
-				height: F,
-				viewBox: `0 0 ${P} ${F}`,
+				width: N,
+				height: P,
+				viewBox: `0 0 ${N} ${P}`,
 				class: "mb-1 shrink-0 overflow-visible",
 				role: "img",
 				"aria-label": Z.value.summary
 			}, [
 				i("path", {
 					d: Z.value.area,
-					class: "fill-primary-97"
-				}, null, 8, E),
+					class: "fill-primary/10"
+				}, null, 8, O),
 				i("path", {
 					d: Z.value.line,
 					fill: "none",
-					class: "stroke-slate-60",
+					class: "stroke-primary",
 					"stroke-width": "1.5",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, null, 8, D),
+				}, null, 8, ee),
 				i("circle", {
 					cx: Z.value.last[0],
 					cy: Z.value.last[1],
 					r: "3",
 					class: "fill-primary stroke-surface",
 					"stroke-width": "1.5"
-				}, null, 8, O)
-			], 8, T)) : n("", !0)], 10, ne),
+				}, null, 8, te)
+			], 8, D)) : n("", !0)], 10, C),
 			o.progress !== void 0 && !o.inline ? (d(), r("div", {
 				key: 0,
 				role: "progressbar",
-				"aria-labelledby": `${h(U)}-label`,
+				"aria-labelledby": `${h(H)}-label`,
 				"aria-valuemin": "0",
 				"aria-valuemax": "100",
-				"aria-valuenow": Math.round(Y.value),
-				class: "h-1 w-full overflow-hidden rounded-full bg-slate-90"
+				"aria-valuenow": Math.round(J.value),
+				class: "h-1 w-full overflow-hidden rounded-full bg-surface-sunken"
 			}, [i("div", {
-				class: l(["h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none", X.value]),
-				style: u({ width: `${Y.value}%` })
-			}, null, 6)], 8, k)) : n("", !0),
-			!o.inline && (J.value || e.$slots.footer) ? (d(), r("div", A, [J.value ? (d(), r("span", j, [i("span", { class: l(["inline-flex items-center gap-0.5 font-medium", q.value]) }, [
-				(d(), t(p(re.value), {
-					class: "size-3.5",
+				class: l(["h-full rounded-full transition-[width] duration-700 ease-out motion-reduce:transition-none", Y.value]),
+				style: u({ width: `${J.value}%` })
+			}, null, 6)], 8, ne)) : n("", !0),
+			!o.inline && (q.value || e.$slots.footer) ? (d(), r("div", k, [q.value ? (d(), r("span", A, [i("span", { class: l(["inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-sm font-semibold tabular-nums", K.value]) }, [
+				(d(), t(p(X.value), {
+					class: "size-3",
 					"aria-hidden": "true"
 				})),
-				i("span", M, m(G.value === "up" ? "Up" : G.value === "down" ? "Down" : "No change"), 1),
-				a(" " + m(K.value), 1)
-			], 2), o.deltaLabel ? (d(), r("span", N, m(o.deltaLabel), 1)) : n("", !0)])) : n("", !0), f(e.$slots, "footer")])) : n("", !0)
+				i("span", j, m(W.value === "up" ? "Up" : W.value === "down" ? "Down" : "No change"), 1),
+				a(" " + m(G.value), 1)
+			], 2), o.deltaLabel ? (d(), r("span", M, m(o.deltaLabel), 1)) : n("", !0)])) : n("", !0), f(e.$slots, "footer")])) : n("", !0)
 		], 10, x));
 	}
 });
 //#endregion
-export { I as default };
+export { F as default };

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

@@ -39,7 +39,7 @@ export interface Props {
     items?: StatusBarItem[];
     /** Accessible name of the bar. */
     label?: string;
-    /** Dark bar on `bg-sidebar` in both themes, like the old footer. Everything inside uses the dark tokens. */
+    /** Dark bar on `bg-sidebar` (#171717) in both themes, to sit under a `dark` sidebar. Everything inside uses the dark tokens. */
     dark?: boolean;
     /** Sticks the bar to the bottom of its scroll area. */
     sticky?: boolean;

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

@@ -44,14 +44,14 @@ var C = ["aria-label"], w = { class: "flex h-7 items-center justify-between gap-
 			danger: "bg-danger",
 			info: "bg-info",
 			pending: "bg-warning",
-			neutral: "bg-slate-60"
+			neutral: "bg-muted/60"
 		}, M = {
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger",
 			info: "bg-info",
-			pending: "bg-slate-60",
-			neutral: "bg-slate-60"
+			pending: "bg-muted/60",
+			neutral: "bg-muted/60"
 		}, N = {
 			high: "",
 			normal: "@max-lg:hidden",
@@ -90,7 +90,7 @@ var C = ["aria-label"], w = { class: "flex h-7 items-center justify-between gap-
 		}
 		return (n, c) => (f(), a("footer", {
 			"aria-label": s.label,
-			class: u(["@container z-10 w-full border-t", [s.dark ? "dark border-border-light bg-sidebar text-body" : "border-border-light bg-surface-muted text-body", s.sticky && "sticky bottom-0"]]),
+			class: u(["@container z-10 w-full border-t", [s.dark ? "dark border-border bg-sidebar text-body" : "border-border bg-surface-muted text-body", s.sticky && "sticky bottom-0"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-status-bar"
 		}, [o("div", w, [(f(), a(t, null, p(["left", "right"], (s) => o("div", {
@@ -100,7 +100,7 @@ var C = ["aria-label"], w = { class: "flex h-7 items-center justify-between gap-
 			key: L(n, s),
 			class: u(["flex min-w-0 shrink-0 items-center", N[n.priority ?? "normal"]])
 		}, [(f(), r(h(R(n)), l({ ref_for: !0 }, B(n), {
-			class: ["inline-flex h-6 min-w-0 items-center gap-1.5 rounded-4 px-1.5 text-xs whitespace-nowrap no-underline", z(n) && (n.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring")],
+			class: ["inline-flex h-6 min-w-0 items-center gap-1.5 rounded-6 px-1.5 text-xs whitespace-nowrap no-underline", z(n) && (n.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset")],
 			onClick: (e) => z(n) && V(n, e)
 		}), {
 			default: _(() => [
@@ -131,7 +131,7 @@ var C = ["aria-label"], w = { class: "flex h-7 items-center justify-between gap-
 					"aria-valuemin": "0",
 					"aria-valuemax": "100",
 					"aria-label": n.label ? `${n.label} usage` : "Usage",
-					class: "h-1.5 w-8 shrink-0 overflow-hidden rounded-full bg-slate-80"
+					class: "h-1.5 w-8 shrink-0 overflow-hidden rounded-full bg-border-dark"
 				}, [o("span", {
 					class: u(["block h-full rounded-full", H(n)]),
 					style: d({ width: `${U(n.meter)}%` })

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

@@ -7,18 +7,24 @@ var f = {
 	"data-ac-ds": "",
 	"data-testid": "ac-steps"
 }, p = ["aria-current"], m = { key: 1 }, h = {
+	key: 1,
+	class: "mt-0.5 text-xs text-muted"
+}, g = {
 	key: 1,
 	class: "flex w-full flex-col",
 	"data-ac-ds": "",
 	"data-testid": "ac-steps"
-}, g = ["aria-current"], _ = { key: 1 }, v = { class: "min-w-0 flex-1 pt-1" }, y = {
+}, _ = ["aria-current"], v = { key: 1 }, y = { class: "min-w-0 flex-1 pt-1.5" }, b = {
+	key: 0,
+	class: "mt-0.5 text-xs text-muted"
+}, x = {
 	key: 1,
 	class: "mt-2 space-y-0.5 border-l border-dashed border-border-dark pl-3",
 	"data-testid": "ac-steps-substeps"
-}, b = ["aria-current"], x = {
+}, S = ["aria-current"], C = {
 	key: 1,
 	class: "size-1.5 rounded-full bg-primary"
-}, S = /*@__PURE__*/ a({
+}, w = /*@__PURE__*/ a({
 	__name: "AcSteps",
 	props: {
 		options: {},
@@ -27,65 +33,59 @@ var f = {
 		activeSubstep: { default: void 0 }
 	},
 	setup(a) {
-		let S = a, C = (e) => S.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === S.activeSubstep);
-		return (S, w) => a.orientation === "horizontal" ? (s(), r("ol", f, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
+		let w = a, T = (e) => w.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === w.activeSubstep);
+		return (w, E) => a.orientation === "horizontal" ? (s(), r("ol", f, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
 			key: e.id,
 			class: "relative flex flex-1 flex-col items-center px-2 text-center",
 			"aria-current": a.active === e.id ? "step" : void 0
 		}, [
 			c < a.options.length - 1 ? (s(), r("span", {
 				key: 0,
-				class: o(["absolute top-3.5 left-[calc(50%+22px)] h-0.5 w-[calc(100%-44px)] -translate-y-1/2 rounded-full transition-colors duration-300", a.active > e.id ? "bg-primary" : "bg-border"]),
+				class: o(["absolute top-4 left-[calc(50%+26px)] h-0.5 w-[calc(100%-52px)] -translate-y-1/2 rounded-full transition-colors duration-300 motion-reduce:transition-none", a.active > e.id ? "bg-primary" : "bg-border"]),
 				"aria-hidden": "true"
 			}, null, 2)) : n("", !0),
-			i("span", { class: o(["relative inline-flex size-7 items-center justify-center rounded-full text-xs font-semibold tabular-nums transition-all duration-200", a.active > e.id ? "bg-primary text-white shadow-button" : a.active === e.id ? "bg-surface text-primary-20 ring-2 ring-primary shadow-[0_0_0_5px_var(--color-ring)]" : "bg-surface text-muted ring-1 ring-border-dark"]) }, [a.active > e.id ? (s(), t(u(d), {
+			i("span", { class: o(["relative inline-flex size-8 items-center justify-center rounded-full text-base font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-200 motion-reduce:transition-none", a.active > e.id ? "bg-primary text-white shadow-button" : a.active === e.id ? "bg-surface text-primary-strong ring-2 ring-primary shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_15%,transparent)]" : "bg-surface text-muted ring-1 ring-border-dark"]) }, [a.active > e.id ? (s(), t(u(d), {
 				key: 0,
-				class: "size-3.5",
+				class: "size-4",
 				"stroke-width": 2.5,
 				"aria-hidden": "true"
 			})) : (s(), r("span", m, l(e.id), 1))], 2),
 			i("p", { class: o(["mt-3 text-base font-medium", a.active >= e.id ? "text-heading" : "text-muted"]) }, l(e.title), 3),
-			e.description ? (s(), r("p", {
-				key: 1,
-				class: o(["mt-0.5 text-xs", a.active >= e.id ? "text-label" : "text-muted"])
-			}, l(e.description), 3)) : n("", !0)
-		], 8, p))), 128))])) : (s(), r("ol", h, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
+			e.description ? (s(), r("p", h, l(e.description), 1)) : n("", !0)
+		], 8, p))), 128))])) : (s(), r("ol", g, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
 			key: f.id,
 			class: "relative flex gap-3 pb-6 last:pb-0",
 			"aria-current": a.active === f.id ? "step" : void 0
 		}, [
 			p < a.options.length - 1 ? (s(), r("span", {
 				key: 0,
-				class: o(["absolute top-9 bottom-1 left-3.5 w-0.5 -translate-x-1/2 rounded-full transition-colors duration-300", a.active > f.id ? "bg-primary" : "bg-border"]),
+				class: o(["absolute top-10 bottom-2 left-4 w-0.5 -translate-x-1/2 rounded-full transition-colors duration-300 motion-reduce:transition-none", a.active > f.id ? "bg-primary" : "bg-border"]),
 				"aria-hidden": "true"
 			}, null, 2)) : n("", !0),
-			i("span", { class: o(["relative inline-flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums transition-all duration-200", a.active > f.id ? "bg-primary text-white shadow-button" : a.active === f.id ? "bg-surface text-primary-20 ring-2 ring-primary shadow-[0_0_0_5px_var(--color-ring)]" : "bg-surface text-muted ring-1 ring-border-dark"]) }, [a.active > f.id ? (s(), t(u(d), {
+			i("span", { class: o(["relative inline-flex size-8 shrink-0 items-center justify-center rounded-full text-base font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-200 motion-reduce:transition-none", a.active > f.id ? "bg-primary text-white shadow-button" : a.active === f.id ? "bg-surface text-primary-strong ring-2 ring-primary shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_15%,transparent)]" : "bg-surface text-muted ring-1 ring-border-dark"]) }, [a.active > f.id ? (s(), t(u(d), {
 				key: 0,
-				class: "size-3.5",
+				class: "size-4",
 				"stroke-width": 2.5,
 				"aria-hidden": "true"
-			})) : (s(), r("span", _, l(f.id), 1))], 2),
-			i("div", v, [
+			})) : (s(), r("span", v, l(f.id), 1))], 2),
+			i("div", y, [
 				i("p", { class: o(["text-base font-medium", a.active >= f.id ? "text-heading" : "text-muted"]) }, l(f.title), 3),
-				f.description ? (s(), r("p", {
-					key: 0,
-					class: o(["mt-0.5 text-xs", a.active >= f.id ? "text-label" : "text-muted"])
-				}, l(f.description), 3)) : n("", !0),
-				f.substeps?.length && a.active === f.id ? (s(), r("ul", y, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
+				f.description ? (s(), r("p", b, l(f.description), 1)) : n("", !0),
+				f.substeps?.length && a.active === f.id ? (s(), r("ul", x, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
 					key: e.id,
 					class: "flex items-center gap-2 py-1",
 					"aria-current": e.id === a.activeSubstep ? "step" : void 0
 				}, [i("span", {
-					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < C(f) ? "bg-primary text-white" : c === C(f) ? "bg-surface text-primary ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
+					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < T(f) ? "bg-primary text-white" : c === T(f) ? "bg-surface text-primary ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
 					"aria-hidden": "true"
-				}, [c < C(f) ? (s(), t(u(d), {
+				}, [c < T(f) ? (s(), t(u(d), {
 					key: 0,
 					class: "size-3",
 					"stroke-width": 3
-				})) : c === C(f) ? (s(), r("span", x)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < C(f) ? "text-label" : c === C(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, b))), 128))])) : n("", !0)
+				})) : c === T(f) ? (s(), r("span", C)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < T(f) ? "text-heading/80" : c === T(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, S))), 128))])) : n("", !0)
 			])
-		], 8, g))), 128))]));
+		], 8, _))), 128))]));
 	}
 });
 //#endregion
-export { S as default };
+export { w as default };

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

@@ -1,17 +1,19 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, normalizeClass as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, unref as f, useAttrs as p, useId as m, useModel as h } from "vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _ } from "vue";
+import { CircleAlert as v } from "@lucide/vue";
 //#region src/lib/components/AcSwitch.vue?vue&type=script&setup=true&lang.ts
-var g = { class: "flex items-center gap-2" }, _ = ["for"], v = [
+var y = { class: "flex items-center gap-2" }, b = ["for"], x = [
 	"id",
 	"name",
 	"aria-checked",
 	"disabled"
-], y = {
+], S = {
 	key: 0,
-	class: "mt-1.5 text-xs text-red-30"
-}, b = /*@__PURE__*/ i({
+	class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+	role: "alert"
+}, C = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcSwitch",
-	props: /*@__PURE__*/ a({
+	props: /*@__PURE__*/ s({
 		label: { default: "" },
 		name: { default: "" },
 		disabled: {
@@ -27,41 +29,44 @@ var g = { class: "flex items-center gap-2" }, _ = ["for"], v = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(i, { expose: a }) {
-		let b = h(i, "modelValue"), x = m(), S = p(), C = e(() => ({
-			class: S.class,
-			style: S.style
-		})), w = e(() => {
-			let { class: e, style: t, ...n } = S;
+	setup(o, { expose: s }) {
+		let C = _(o, "modelValue"), w = g(), T = h(), E = e(() => ({
+			class: T.class,
+			style: T.style
+		})), D = e(() => {
+			let { class: e, style: t, ...n } = T;
 			return n;
-		}), T = l(null);
-		return a({ focus: () => T.value?.focus() }), (e, a) => (c(), n("div", o(C.value, {
+		}), O = d(null);
+		return s({ focus: () => O.value?.focus() }), (e, s) => (u(), n("div", c(E.value, {
 			"data-ac-ds": "",
 			"data-testid": "ac-switch"
-		}), [r("div", g, [
-			u(e.$slots, "left"),
-			i.label ? (c(), n("label", {
+		}), [r("div", y, [
+			f(e.$slots, "left"),
+			o.label ? (u(), n("label", {
 				key: 0,
-				for: f(x),
-				class: "cursor-pointer text-base text-heading"
-			}, d(i.label), 9, _)) : t("", !0),
-			u(e.$slots, "middle"),
-			r("button", o({
-				id: f(x),
+				for: m(w),
+				class: l(["cursor-pointer text-base font-medium text-heading", o.disabled && "cursor-not-allowed opacity-50"])
+			}, p(o.label), 11, b)) : t("", !0),
+			f(e.$slots, "middle"),
+			r("button", c({
+				id: m(w),
 				ref_key: "button",
-				ref: T
-			}, w.value, {
+				ref: O
+			}, D.value, {
 				type: "button",
 				role: "switch",
-				name: i.name,
-				"aria-checked": b.value,
-				disabled: i.disabled,
-				class: ["relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-50 p-0.5 inset-shadow-xs transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", b.value ? "bg-primary" : "bg-slate-70 hover:bg-slate-60"],
-				onClick: a[0] ||= (e) => b.value = !b.value
-			}), [r("span", { class: s(["inline-block size-4 rounded-full bg-white shadow-md ring-1 ring-black/5 transition-transform duration-200 ease-out-soft", b.value ? "translate-x-4" : "translate-x-0"]) }, null, 2)], 16, v),
-			u(e.$slots, "right")
-		]), i.errorMsg ? (c(), n("p", y, d(i.errorMsg), 1)) : t("", !0)], 16));
+				name: o.name,
+				"aria-checked": C.value,
+				disabled: o.disabled,
+				class: ["relative h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", C.value ? "bg-primary" : "bg-muted/45"],
+				onClick: s[0] ||= (e) => C.value = !C.value
+			}), [r("span", { class: l(["pointer-events-none absolute top-0.5 left-0.5 size-5 rounded-full bg-white shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none", C.value ? "translate-x-5" : "translate-x-0"]) }, null, 2)], 16, x),
+			f(e.$slots, "right")
+		]), o.errorMsg ? (u(), n("p", S, [a(m(v), {
+			class: "size-4 shrink-0",
+			"aria-hidden": "true"
+		}), i(" " + p(o.errorMsg), 1)])) : t("", !0)], 16));
 	}
 });
 //#endregion
-export { b as default };
+export { C as default };

package/dist/lib/components/AcSwitchCard.js

@@ -0,0 +1,5 @@
+import e from "./AcSwitchCard.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcSwitchCard.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,59 @@
+import type { Component } from "vue";
+export interface Props {
+    /** Name of the feature the switch turns on, e.g. "Automated backups". Also the switch's accessible name. */
+    title: string;
+    /** One line on what the current position does, e.g. "Runs a Stash backup every 6 hours." */
+    description?: string;
+    /** Bold text beside the switch, e.g. the cost or result of the choice: "Free", "+$15.00", "3 nodes". */
+    status?: string;
+    /** A small line under `status`, e.g. "per month" or "if enabled". */
+    statusDetail?: string;
+    /** A Lucide icon shown in a 32px tile before the title. */
+    icon?: Component;
+    /** Adds a "Recommended" pill after the title. */
+    recommended?: boolean;
+    /** The switch is on but won't take effect yet: tints the card amber instead of primary. Explain why in the default slot. */
+    warning?: boolean;
+    /** Turns the switch and the card click off. */
+    disabled?: boolean;
+    /** Shows a spinner beside the switch and blocks changes, e.g. while the change is saved. */
+    loading?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Pills after the title, beside the built-in Recommended one, e.g. "Coming soon". */
+    badges?: () => unknown;
+    /** Replaces the `status` text, e.g. a price with a muted unit. */
+    status?: () => unknown;
+    /** Content under the row, shown only while the switch is on: settings revealed after enabling, or a warning about the choice. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the switch. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    description: string;
+    disabled: boolean;
+    icon: Component;
+    status: string;
+    warning: boolean;
+    loading: boolean;
+    recommended: boolean;
+    statusDetail: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};