@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,121 @@
+import e from "./AcSpinner.js";
+import t from "./AcSwitch.js";
+import { Comment as n, Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useAttrs as x, useId as S, useModel as C, useSlots as w } from "vue";
+import { Sparkles as T } from "@lucide/vue";
+//#region src/lib/components/AcSwitchCard.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-busy"], D = { class: "flex min-w-[200px] flex-1 items-start gap-3" }, O = { class: "min-w-0 flex-1" }, k = { class: "flex flex-wrap items-center gap-x-2 gap-y-1 text-base font-semibold text-heading" }, A = {
+	key: 0,
+	class: "inline-flex items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-xm font-bold tracking-wide text-primary-strong uppercase"
+}, j = { class: "ml-auto flex shrink-0 items-center gap-3" }, M = {
+	key: 0,
+	class: "text-sm text-muted"
+}, N = {
+	key: 0,
+	class: "mt-3"
+}, P = "a, button, input, select, textarea, label, [tabindex], [contenteditable]", F = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "AcSwitchCard",
+	props: /*@__PURE__*/ f({
+		title: {},
+		description: { default: "" },
+		status: { default: "" },
+		statusDetail: { default: "" },
+		icon: { default: void 0 },
+		recommended: {
+			type: Boolean,
+			default: !1
+		},
+		warning: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d, { expose: f }) {
+		let F = d, I = C(d, "modelValue"), L = w(), R = S(), z = `${R}-title`, B = `${R}-description`, V = `${R}-status`, H = x(), U = i(() => ({
+			class: H.class,
+			style: H.style
+		})), W = i(() => {
+			let { class: e, style: t, ...n } = H;
+			return n;
+		}), G = g(null), K = i(() => F.disabled || F.loading), q = i(() => I.value && !F.disabled && !F.warning), J = i(() => !!(F.status || F.statusDetail || L.status)), Y = i(() => [F.description && B, J.value && V].filter(Boolean).join(" ") || void 0), X = i(() => F.warning ? "border-warning/40 bg-[color-mix(in_srgb,var(--color-warning)_5%,var(--color-surface))]" : q.value ? "border-primary/40 bg-[color-mix(in_srgb,var(--color-primary)_5%,var(--color-surface))]" : "border-border bg-surface-sunken/5"), Z = i(() => F.warning ? "text-warning-strong" : q.value ? "text-heading" : "text-muted");
+		function Q(e) {
+			return !!e?.some((e) => e.type !== n && (e.type !== r || Q(e.children)));
+		}
+		function $() {
+			return Q(L.default?.());
+		}
+		function ee(e) {
+			if (K.value) return;
+			let t = e.target.closest(P);
+			t && e.currentTarget.contains(t) || window.getSelection()?.toString() || (I.value = !I.value, G.value?.focus());
+		}
+		return f({ focus: () => G.value?.focus() }), (n, r) => (h(), s("div", p(U.value, {
+			class: ["rounded-14 border px-4 py-3 transition-colors duration-200 motion-reduce:transition-none", X.value],
+			"aria-busy": d.loading || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-switch-card"
+		}), [c("div", {
+			class: m(["flex flex-wrap items-center justify-between gap-x-4 gap-y-3", d.disabled ? "cursor-not-allowed" : d.loading ? "cursor-wait" : "cursor-pointer"]),
+			onClick: ee
+		}, [c("div", D, [d.icon ? (h(), s("span", {
+			key: 0,
+			class: m(["flex size-8 shrink-0 items-center justify-center rounded-10 border transition-colors duration-200", q.value ? "border-primary/25 bg-primary/10 text-primary-strong" : "border-border bg-surface-sunken text-muted"]),
+			"aria-hidden": "true"
+		}, [(h(), a(v(d.icon), { class: "size-4" }))], 2)) : o("", !0), c("div", O, [c("p", k, [
+			c("span", { id: z }, y(d.title), 1),
+			d.recommended ? (h(), s("span", A, [u(b(T), {
+				class: "size-3",
+				"aria-hidden": "true"
+			}), r[1] ||= l(" Recommended ", -1)])) : o("", !0),
+			_(n.$slots, "badges")
+		]), d.description ? (h(), s("p", {
+			key: 0,
+			id: B,
+			class: "mt-0.5 text-xs leading-snug text-muted"
+		}, y(d.description), 1)) : o("", !0)])]), c("div", j, [
+			J.value ? (h(), s("div", {
+				key: 0,
+				id: V,
+				class: "text-right"
+			}, [c("div", { class: m(["text-base font-bold tabular-nums", Z.value]) }, [_(n.$slots, "status", {}, () => [l(y(d.status), 1)])], 2), d.statusDetail ? (h(), s("div", M, y(d.statusDetail), 1)) : o("", !0)])) : o("", !0),
+			d.loading ? (h(), a(e, {
+				key: 1,
+				class: "text-muted",
+				label: "Saving"
+			})) : o("", !0),
+			u(t, p({
+				ref_key: "toggle",
+				ref: G
+			}, W.value, {
+				modelValue: I.value,
+				"onUpdate:modelValue": r[0] ||= (e) => I.value = e,
+				disabled: d.disabled,
+				loading: d.loading,
+				"aria-labelledby": z,
+				"aria-describedby": Y.value
+			}), null, 16, [
+				"modelValue",
+				"disabled",
+				"loading",
+				"aria-describedby"
+			])
+		])], 2), $() ? (h(), s("div", N, [_(n.$slots, "default")])) : o("", !0)], 16, E));
+	}
+});
+//#endregion
+export { F as default };

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

@@ -1,39 +1,39 @@
 import e from "./AcCellValue.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, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useModel as y, withModifiers as b } from "vue";
-import { ArrowUp as te, Check as x, ChevronRight as S, ChevronsUpDown as C, Minus as w } from "@lucide/vue";
+import { Check as x, ChevronDown as S, ChevronRight as C, ChevronUp as w, Minus as te } from "@lucide/vue";
 //#region src/lib/components/AcTable.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "ac-scrollbar" }, ne = { class: "w-full border-separate border-spacing-0 text-base" }, re = { class: "relative flex size-4" }, ie = [
+var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border-spacing-0 text-base" }, ie = { class: "relative flex size-[18px]" }, ae = [
 	"checked",
 	"indeterminate",
 	"disabled"
-], ae = ["aria-sort", "onClick"], E = {
+], oe = ["aria-sort", "onClick"], se = { class: "inline-flex items-center gap-2" }, ce = {
 	key: 0,
-	class: "h-12 border-b border-border-light pl-3 [tr:last-child_&]:border-0"
-}, oe = {
+	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
+}, T = {
 	key: 1,
-	class: "h-12 border-b border-border-light pl-4 [tr:last-child_&]:border-0"
-}, se = [
+	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
+}, E = [
 	"aria-current",
 	"aria-disabled",
 	"onClick"
-], D = [
+], le = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"onClick"
-], ce = { class: "relative flex size-4" }, le = [
+], ue = { class: "relative flex size-[18px]" }, D = [
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], ue = {
+], O = {
 	key: 0,
 	class: "group",
 	"data-testid": "ac-table-detail"
-}, O = ["colspan"], de = ["id", "aria-label"], fe = {
+}, k = ["colspan"], de = ["id", "aria-label"], fe = {
 	key: 0,
-	class: "px-4 py-12 text-center text-muted"
-}, k = "peer size-4 cursor-pointer appearance-none rounded-4 border border-border-dark bg-surface align-middle shadow-xs transition-[background-color,border-color,box-shadow] duration-150 hover:border-slate-60 checked:border-primary checked:bg-primary checked:shadow-button indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", A = /*@__PURE__*/ l({
+	class: "px-6 py-12 text-center text-muted"
+}, A = "border-border", j = "peer size-[18px] cursor-pointer appearance-none rounded-4 border border-muted/70 bg-background align-middle transition-colors duration-150 hover:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary 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", M = /*@__PURE__*/ l({
 	__name: "AcTable",
 	props: /*@__PURE__*/ u({
 		columns: {},
@@ -95,156 +95,156 @@ var T = { class: "ac-scrollbar" }, ne = { class: "w-full border-separate border-
 		"update:sortBy"
 	]),
 	setup(l, { emit: u }) {
-		let A = l, j = y(l, "selected"), M = y(l, "expanded"), N = u, P = ee(), F = y(l, "sortBy"), I = n(() => F.value?.key ?? ""), L = n(() => F.value?.mode ?? "asc"), R = (e) => {
+		let M = l, N = y(l, "selected"), P = y(l, "expanded"), F = u, I = ee(), L = y(l, "sortBy"), R = n(() => L.value?.key ?? ""), z = n(() => L.value?.mode ?? "asc"), B = (e) => {
 			if (!e.sortable) return;
-			let t = I.value === e.key && L.value === "asc" ? "desc" : "asc";
-			F.value = {
+			let t = R.value === e.key && z.value === "asc" ? "desc" : "asc";
+			L.value = {
 				key: e.key,
 				mode: t
-			}, N("sort", e.key, t);
-		}, z = n(() => {
-			if (!I.value || A.manualSort) return A.rows;
-			let e = I.value, t = L.value === "asc" ? 1 : -1;
-			return [...A.rows].sort((n, r) => String(V(n[e]) ?? "").localeCompare(String(V(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+			}, F("sort", e.key, t);
+		}, pe = n(() => {
+			if (!R.value || M.manualSort) return M.rows;
+			let e = R.value, t = z.value === "asc" ? 1 : -1;
+			return [...M.rows].sort((n, r) => String(H(n[e]) ?? "").localeCompare(String(H(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
 		});
-		function B(e) {
+		function V(e) {
 			return typeof e == "object" && !!e && !Array.isArray(e) && "data" in e;
 		}
-		function V(e) {
-			return B(e) ? e.sort ?? e.data : e;
+		function H(e) {
+			return V(e) ? e.sort ?? e.data : e;
 		}
-		let H = (e) => !!A.rowDisabled?.(e), U = n(() => A.rows.filter((e) => !H(e)).map((e) => e[A.rowKey])), W = n(() => new Set(j.value)), G = n(() => U.value.length > 0 && U.value.every((e) => W.value.has(e))), K = n(() => !G.value && U.value.some((e) => W.value.has(e)));
-		function pe() {
-			let e = new Set(U.value);
-			j.value = G.value ? j.value.filter((t) => !e.has(t)) : [...j.value, ...U.value.filter((e) => !W.value.has(e))];
+		let U = (e) => !!M.rowDisabled?.(e), W = n(() => M.rows.filter((e) => !U(e)).map((e) => e[M.rowKey])), G = n(() => new Set(N.value)), K = n(() => W.value.length > 0 && W.value.every((e) => G.value.has(e))), q = n(() => !K.value && W.value.some((e) => G.value.has(e)));
+		function me() {
+			let e = new Set(W.value);
+			N.value = K.value ? N.value.filter((t) => !e.has(t)) : [...N.value, ...W.value.filter((e) => !G.value.has(e))];
 		}
-		function me(e) {
-			let t = e[A.rowKey];
-			j.value = W.value.has(t) ? j.value.filter((e) => e !== t) : [...j.value, t];
+		function he(e) {
+			let t = e[M.rowKey];
+			N.value = G.value.has(t) ? N.value.filter((e) => e !== t) : [...N.value, t];
 		}
-		let q = n(() => new Set(M.value)), J = (e) => A.expandable && q.value.has(e[A.rowKey]), Y = (e) => !A.canExpand || A.canExpand(e), X = (e) => `${P}-detail-${String(e[A.rowKey])}`, he = n(() => A.columns.length + +!!A.selectable + +!!A.expandable);
-		function ge(e) {
-			let t = e[A.rowKey];
-			M.value = q.value.has(t) ? M.value.filter((e) => e !== t) : [...M.value, t];
+		let J = n(() => new Set(P.value)), Y = (e) => M.expandable && J.value.has(e[M.rowKey]), X = (e) => !M.canExpand || M.canExpand(e), Z = (e) => `${I}-detail-${String(e[M.rowKey])}`, ge = n(() => M.columns.length + +!!M.selectable + +!!M.expandable);
+		function _e(e) {
+			let t = e[M.rowKey];
+			P.value = J.value.has(t) ? P.value.filter((e) => e !== t) : [...P.value, t];
 		}
-		function Z(e) {
-			let t = e[A.columns[0]?.key ?? ""], n = B(t) ? t.data : t;
-			return typeof n == "string" || typeof n == "number" ? n : String(e[A.rowKey]);
+		function Q(e) {
+			let t = e[M.columns[0]?.key ?? ""], n = V(t) ? t.data : t;
+			return typeof n == "string" || typeof n == "number" ? n : String(e[M.rowKey]);
 		}
-		let Q = n(() => A.flat ? "border-border-light" : "border-border"), $ = (e) => ({
+		let $ = (e) => ({
 			left: "text-left",
 			center: "text-center",
 			right: "text-right"
 		})[e.align ?? "left"];
 		return (n, u) => (p(), a("div", {
-			class: d(["w-full overflow-hidden bg-surface", !l.flat && "rounded-10 border border-border shadow-xs"]),
+			class: d(["w-full overflow-hidden bg-surface", !l.flat && "rounded-10 border border-border"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-table"
-		}, [o("div", T, [o("table", ne, [o("thead", null, [o("tr", null, [
+		}, [o("div", ne, [o("table", re, [o("thead", null, [o("tr", null, [
 			l.expandable ? (p(), a("th", {
 				key: 0,
 				scope: "col",
-				class: d(["h-9 w-10 border-b bg-surface-muted pr-0 pl-3", [Q.value, !l.flat && "first:rounded-tl-10"]])
+				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-0 pl-4", [A, !l.flat && "first:rounded-tl-10"]])
 			}, [...u[2] ||= [o("span", { class: "sr-only" }, "Expand", -1)]], 2)) : i("", !0),
 			l.selectable ? (p(), a("th", {
 				key: 1,
 				scope: "col",
-				class: d(["h-9 w-10 border-b bg-surface-muted pr-0 pl-4", [Q.value, !l.flat && "first:rounded-tl-10"]])
-			}, [o("span", re, [o("input", {
+				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-1 pl-4", [A, !l.flat && "first:rounded-tl-10"]])
+			}, [o("span", ie, [o("input", {
 				type: "checkbox",
-				class: d(k),
-				checked: G.value,
-				indeterminate: K.value,
+				class: d(j),
+				checked: K.value,
+				indeterminate: q.value,
 				disabled: l.loading || !l.rows.length,
 				"aria-label": "Select all rows",
-				onChange: pe
-			}, null, 40, ie), (p(), r(g(K.value ? v(w) : v(x)), {
-				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
+				onChange: me
+			}, null, 40, ae), (p(), r(g(q.value ? v(te) : v(x)), {
+				class: "pointer-events-none absolute inset-0 m-auto size-3.5 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
 			}))])], 2)) : i("", !0),
 			(p(!0), a(t, null, m(l.columns, (e) => (p(), a("th", {
 				key: e.key,
 				scope: "col",
-				class: d(["h-9 border-b bg-surface-muted px-4 text-xs font-medium whitespace-nowrap text-label", [
-					Q.value,
+				class: d(["h-11 border-b bg-surface-sunken/50 px-6 text-base font-semibold whitespace-nowrap text-muted", [
+					A,
 					!l.flat && "first:rounded-tl-10 last:rounded-tr-10",
 					$(e),
 					e.sortable && "cursor-pointer select-none transition-colors hover:text-heading"
 				]]),
 				style: f(e.width ? { width: e.width } : void 0),
-				"aria-sort": I.value === e.key ? L.value === "asc" ? "ascending" : "descending" : void 0,
-				onClick: (t) => R(e)
-			}, [o("span", { class: d(["inline-flex items-center gap-1", I.value === e.key && "text-heading"]) }, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(I.value === e.key ? v(te) : v(C)), {
+				"aria-sort": R.value === e.key ? z.value === "asc" ? "ascending" : "descending" : void 0,
+				onClick: (t) => B(e)
+			}, [o("span", se, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(R.value === e.key && z.value === "asc" ? v(w) : v(S)), {
 				key: 0,
-				class: d(["size-3 transition-transform", [I.value === e.key ? "text-primary" : "text-slate-60", I.value === e.key && L.value === "desc" && "rotate-180"]]),
+				class: d(["size-4 shrink-0", R.value === e.key ? "text-primary-strong" : "text-muted"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : i("", !0)], 2)], 14, ae))), 128))
+			}, null, 8, ["class"])) : i("", !0)])], 14, oe))), 128))
 		])]), o("tbody", null, [l.loading ? (p(!0), a(t, { key: 0 }, m(l.loaderRows, (e) => (p(), a("tr", { key: `loader-${e}` }, [
-			l.expandable ? (p(), a("td", E)) : i("", !0),
-			l.selectable ? (p(), a("td", oe)) : i("", !0),
+			l.expandable ? (p(), a("td", ce)) : i("", !0),
+			l.selectable ? (p(), a("td", T)) : i("", !0),
 			(p(!0), a(t, null, m(l.columns, (t, n) => (p(), a("td", {
 				key: t.key,
-				class: "h-12 border-b border-border-light px-4 [tr:last-child_&]:border-0"
+				class: "h-11 border-b border-border px-6 [tr:last-child_&]:border-0"
 			}, [o("span", {
 				class: "block h-2.5 animate-pulse rounded-full bg-surface-sunken",
 				style: f({ width: `${50 + (e * 17 + n * 23) % 40}%` })
 			}, null, 4)]))), 128))
-		]))), 128)) : (p(!0), a(t, { key: 1 }, m(z.value, (f, g) => (p(), a(t, { key: String(f[l.rowKey] ?? g) }, [o("tr", {
+		]))), 128)) : (p(!0), a(t, { key: 1 }, m(pe.value, (f, g) => (p(), a(t, { key: String(f[l.rowKey] ?? g) }, [o("tr", {
 			"data-testid": "ac-table-row",
-			class: d(["group transition-colors duration-100 hover:bg-surface-muted/70", [
-				l.clickable && "cursor-pointer",
-				(l.rowActive?.(f) || l.selectable && W.value.has(f[l.rowKey])) && "bg-primary-97",
+			class: d(["group transition-colors duration-150", [
+				l.clickable && "cursor-pointer hover:bg-surface-sunken/40",
+				(l.rowActive?.(f) || l.selectable && G.value.has(f[l.rowKey])) && "bg-primary/5",
 				l.rowActive?.(f) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
-				H(f) && "pointer-events-none cursor-not-allowed opacity-50"
+				U(f) && "pointer-events-none cursor-not-allowed opacity-50"
 			]]),
 			"aria-current": l.rowActive?.(f) ? "true" : void 0,
-			"aria-disabled": H(f) || void 0,
-			onClick: (e) => l.clickable && !H(f) && N("row-click", f)
+			"aria-disabled": U(f) || void 0,
+			onClick: (e) => l.clickable && !U(f) && F("row-click", f)
 		}, [
 			l.expandable ? (p(), a("td", {
 				key: 0,
-				class: "h-12 w-10 border-b border-border-light pr-0 pl-3 group-last:border-0",
+				class: "h-11 w-10 border-b border-border pr-0 pl-4 group-last:border-0",
 				onClick: u[0] ||= b(() => {}, ["stop"])
-			}, [Y(f) ? (p(), a("button", {
+			}, [X(f) ? (p(), a("button", {
 				key: 0,
 				type: "button",
-				class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-				"aria-expanded": J(f),
-				"aria-controls": X(f),
-				"aria-label": `${J(f) ? "Collapse" : "Expand"} ${Z(f)}`,
+				class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+				"aria-expanded": Y(f),
+				"aria-controls": Z(f),
+				"aria-label": `${Y(f) ? "Collapse" : "Expand"} ${Q(f)}`,
 				"data-testid": "ac-table-expand",
-				onClick: (e) => ge(f)
-			}, [c(v(S), {
-				class: d(["size-4 transition-transform duration-150 motion-reduce:transition-none", J(f) && "rotate-90"]),
+				onClick: (e) => _e(f)
+			}, [c(v(C), {
+				class: d(["size-4 transition-transform duration-150 motion-reduce:transition-none", Y(f) && "rotate-90"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 8, D)) : i("", !0)])) : i("", !0),
+			}, null, 8, ["class"])], 8, le)) : i("", !0)])) : i("", !0),
 			l.selectable ? (p(), a("td", {
 				key: 1,
-				class: "h-12 w-10 border-b border-border-light pr-0 pl-4 group-last:border-0",
+				class: "h-11 w-10 border-b border-border pr-1 pl-4 group-last:border-0",
 				onClick: u[1] ||= b(() => {}, ["stop"])
-			}, [o("span", ce, [o("input", {
+			}, [o("span", ue, [o("input", {
 				type: "checkbox",
-				class: d(k),
-				checked: W.value.has(f[l.rowKey]),
-				disabled: H(f),
-				"aria-label": `Select ${Z(f)}`,
-				onChange: (e) => me(f)
-			}, null, 40, le), c(v(x), {
-				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100",
+				class: d(j),
+				checked: G.value.has(f[l.rowKey]),
+				disabled: U(f),
+				"aria-label": `Select ${Q(f)}`,
+				onChange: (e) => he(f)
+			}, null, 40, D), c(v(x), {
+				class: "pointer-events-none absolute inset-0 m-auto size-3.5 text-white opacity-0 peer-checked:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
 			})])])) : i("", !0),
 			(p(!0), a(t, null, m(l.columns, (i) => (p(), a("td", {
 				key: i.key,
-				class: d(["h-12 border-b border-border-light px-4 whitespace-nowrap text-body tabular-nums group-last:border-0", $(i)])
+				class: d(["h-11 border-b border-border px-6 whitespace-nowrap text-body tabular-nums group-last:border-0", $(i)])
 			}, [h(n.$slots, `cell-${i.key}`, {
 				row: f,
 				value: f[i.key]
 			}, () => [i.type || i.descriptor ? (p(), r(e, {
 				key: 0,
-				value: B(f[i.key]) ? void 0 : f[i.key],
-				cell: B(f[i.key]) ? f[i.key] : void 0,
+				value: V(f[i.key]) ? void 0 : f[i.key],
+				cell: V(f[i.key]) ? f[i.key] : void 0,
 				column: i.descriptor,
 				type: i.type,
 				title: i.label,
@@ -257,16 +257,16 @@ var T = { class: "ac-scrollbar" }, ne = { class: "w-full border-separate border-
 				"title",
 				"resolve-link"
 			])) : (p(), a(t, { key: 1 }, [s(_(f[i.key]), 1)], 64))])], 2))), 128))
-		], 10, se), J(f) && Y(f) ? (p(), a("tr", ue, [o("td", {
-			colspan: he.value,
-			class: "border-b border-border-light bg-surface-muted/50 p-0 group-last:border-0"
+		], 10, E), Y(f) && X(f) ? (p(), a("tr", O, [o("td", {
+			colspan: ge.value,
+			class: "border-b border-border bg-surface-muted p-0 group-last:border-0"
 		}, [o("div", {
-			id: X(f),
+			id: Z(f),
 			role: "region",
-			"aria-label": `Details for ${Z(f)}`,
-			class: "px-4 py-3 text-body"
-		}, [h(n.$slots, "expanded", { row: f })], 8, de)], 8, O)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", fe, [h(n.$slots, "empty", {}, () => [s(_(l.emptyText), 1)])])) : i("", !0)], 2));
+			"aria-label": `Details for ${Q(f)}`,
+			class: "px-6 py-4 text-body"
+		}, [h(n.$slots, "expanded", { row: f })], 8, de)], 8, k)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", fe, [h(n.$slots, "empty", {}, () => [s(_(l.emptyText), 1)])])) : i("", !0)], 2));
 	}
 });
 //#endregion
-export { A as default };
+export { M as default };

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

@@ -1,6 +1,9 @@
+import type { Component } from "vue";
 export interface TabItem {
     key: string;
     label: string;
+    /** A Lucide icon shown at 16px before the label, in the tab's colour. */
+    icon?: Component;
     count?: number;
     disabled?: boolean;
     /** Makes the tab a `RouterLink` to this route (needs vue-router in the app). The tab for the current route becomes active by itself. */
@@ -11,8 +14,10 @@ export interface TabItem {
     testid?: string;
 }
 export interface Props {
-    /** The tabs: `{ key, label, count?, disabled?, to?, href?, testid? }`. `v-model` holds the active `key`. With `to`, it follows the current route. */
+    /** The tabs: `{ key, label, icon?, count?, disabled?, to?, href?, testid? }`. `v-model` holds the active `key`. With `to`, it follows the current route. */
     items: TabItem[];
+    /** `soft` is cloud-ui's tab: a tinted active tab with rounded top corners, 4px apart, wrapping onto a second line when crowded. `underline` is a bare label with a 2px line under the active tab, 24px apart, scrolling sideways. */
+    variant?: "soft" | "underline";
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -29,7 +34,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    variant: "soft" | "underline";
+}, {}, {}, {}, 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;

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

@@ -4,28 +4,28 @@ var b = {
 	"data-ac-ds": "",
 	"data-testid": "ac-tabs"
 }, x = {
-	role: "tablist",
-	class: "flex gap-5 overflow-x-auto overflow-y-hidden border-b border-border-light [scrollbar-width:none]"
-}, S = {
 	key: 0,
 	role: "tabpanel",
-	class: "pt-5"
-}, C = /*@__PURE__*/ s({
+	class: "pt-6"
+}, S = /*@__PURE__*/ s({
 	__name: "AcTabs",
-	props: /*@__PURE__*/ l({ items: {} }, {
+	props: /*@__PURE__*/ l({
+		items: {},
+		variant: { default: "soft" }
+	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(s) {
-		let l = s, C = _(s, "modelValue"), w = c()?.appContext, T = w?.components.RouterLink, E = w?.config.globalProperties.$router, D = t(() => {
-			if (!E) return "";
-			let e = E.currentRoute.value.path, t = "", n = -1;
+		let l = s, S = _(s, "modelValue"), C = c()?.appContext, w = C?.components.RouterLink, T = C?.config.globalProperties.$router, E = t(() => {
+			if (!T) return "";
+			let e = T.currentRoute.value.path, t = "", n = -1;
 			for (let r of l.items) {
 				if (r.to === void 0 || r.disabled) continue;
 				let i;
 				try {
-					i = E.resolve(r.to).path;
+					i = T.resolve(r.to).path;
 				} catch {
 					continue;
 				}
@@ -35,38 +35,53 @@ var b = {
 			}
 			return t;
 		});
-		v(D, (e) => e && (C.value = e), { immediate: !0 });
-		function O(e) {
-			return e.to !== void 0 && T && !e.disabled ? T : e.href || typeof e.to == "string" ? "a" : "button";
+		v(E, (e) => e && (S.value = e), { immediate: !0 });
+		function D(e) {
+			return e.to !== void 0 && w && !e.disabled ? w : e.href || typeof e.to == "string" ? "a" : "button";
 		}
-		function k(e) {
-			let t = O(e), n = { "data-testid": e.testid };
-			return t === T ? n.to = e.to : t === "a" ? e.disabled ? n["aria-disabled"] = "true" : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
+		function O(e) {
+			let t = D(e), n = { "data-testid": e.testid };
+			return t === w ? n.to = e.to : t === "a" ? e.disabled ? n["aria-disabled"] = "true" : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
 		}
-		function A(e, t) {
+		function k(e, t) {
 			if (e.disabled) {
 				t.preventDefault();
 				return;
 			}
-			C.value = e.key;
+			S.value = e.key;
+		}
+		function A(e) {
+			let t = S.value === e.key;
+			return l.variant === "soft" ? ["rounded-t-8 px-3 py-2", t ? "border-primary bg-primary/4 text-primary-strong" : "border-transparent text-muted hover:bg-accent/60 hover:text-heading"] : ["pt-1 pb-3", t ? "border-primary text-primary-strong" : "border-transparent text-muted hover:border-border hover:text-heading"];
 		}
-		return (t, c) => (f(), i("div", b, [a("div", x, [(f(!0), i(e, null, p(s.items, (e) => (f(), n(h(O(e)), u({ key: e.key }, { ref_for: !0 }, k(e), {
+		return (t, c) => (f(), i("div", b, [a("div", {
+			role: "tablist",
+			class: d(["flex border-b border-border px-1 text-base font-medium", s.variant === "soft" ? "flex-wrap gap-1" : "gap-6 overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"])
+		}, [(f(!0), i(e, null, p(s.items, (e) => (f(), n(h(D(e)), u({ key: e.key }, { ref_for: !0 }, O(e), {
 			role: "tab",
-			"aria-selected": C.value === e.key,
-			class: ["relative -mb-px inline-flex h-10 cursor-pointer items-center gap-2 border-b-2 text-base font-medium whitespace-nowrap transition-colors duration-150 focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring no-underline disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40", C.value === e.key ? "border-primary text-heading" : "border-transparent text-muted hover:border-border-dark hover:text-heading"],
-			onClick: (t) => A(e, t)
+			"aria-selected": S.value === e.key,
+			class: ["relative inline-flex shrink-0 cursor-pointer items-center gap-2 border-b-2 whitespace-nowrap no-underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40", A(e)],
+			onClick: (t) => k(e, t)
 		}), {
-			default: y(() => [o(g(e.label) + " ", 1), e.count === void 0 ? r("", !0) : (f(), i("span", {
-				key: 0,
-				class: d(["inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 px-1.5 text-sm leading-none tabular-nums", C.value === e.key ? "bg-primary-95 text-primary-10" : "bg-surface-sunken text-label"])
-			}, g(e.count), 3))]),
+			default: y(() => [
+				e.icon ? (f(), n(h(e.icon), {
+					key: 0,
+					class: "-mr-0.5 size-3.5 shrink-0",
+					"aria-hidden": "true"
+				})) : r("", !0),
+				o(" " + g(e.label) + " ", 1),
+				e.count === void 0 ? r("", !0) : (f(), i("span", {
+					key: 1,
+					class: d(["inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs leading-none font-medium tabular-nums", S.value === e.key ? "bg-primary/10 text-primary-strong" : "bg-surface-sunken text-muted"])
+				}, g(e.count), 3))
+			]),
 			_: 2
 		}, 1040, [
 			"aria-selected",
 			"class",
 			"onClick"
-		]))), 128))]), t.$slots.default ? (f(), i("div", S, [m(t.$slots, "default", { active: C.value })])) : r("", !0)]));
+		]))), 128))], 2), t.$slots.default ? (f(), i("div", x, [m(t.$slots, "default", { active: S.value })])) : r("", !0)]));
 	}
 });
 //#endregion
-export { C as default };
+export { S as default };

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

@@ -4,7 +4,7 @@ export interface Props {
     label?: string;
     /** `neutral` for most labels; a tone to group filters by kind, e.g. environment or region. */
     color?: Tone | "neutral";
-    /** Pill shape (`rounded-50`) instead of the 6px control radius. */
+    /** Pill shape (`rounded-full`), as cloud-ui's label chips, instead of 6px corners. */
     rounded?: boolean;
     /** Shows a remove button that emits `remove`. */
     removable?: boolean;
@@ -27,9 +27,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     label: string;
     color: Tone | "neutral";
     rounded: boolean;
-    removable: boolean;
     keyLabel: string;
     valueLabel: string;
+    removable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;