@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -0,0 +1,119 @@
+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-sm 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-4 border-t border-border pt-4"
+}, 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(() => I.value && F.warning ? "border-warning/40 bg-[color-mix(in_srgb,var(--color-warning)_5%,var(--color-surface))]" : q.value ? "border-primary bg-[color-mix(in_srgb,var(--color-primary)_5%,var(--color-surface))] ring-1 ring-primary/30" : ["border-border bg-surface", !K.value && "hover:border-primary/30"]), Z = i(() => I.value && 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 I.value && 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 p-4 transition-[background-color,border-color,box-shadow] 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", K.value ? "cursor-not-allowed" : "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: K.value,
+				"aria-labelledby": z,
+				"aria-describedby": Y.value
+			}), null, 16, [
+				"modelValue",
+				"disabled",
+				"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 { ArrowUp as x, Check as S, ChevronRight as C, ChevronsUpDown 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-4" }, ae = [
 	"checked",
 	"indeterminate",
 	"disabled"
-], ae = ["aria-sort", "onClick"], E = {
+], oe = ["aria-sort", "onClick"], se = {
 	key: 0,
-	class: "h-12 border-b border-border-light pl-3 [tr:last-child_&]:border-0"
-}, oe = {
+	class: "h-12 border-b border-border pl-4 [tr:last-child_&]:border-0"
+}, ce = {
 	key: 1,
-	class: "h-12 border-b border-border-light pl-4 [tr:last-child_&]:border-0"
-}, se = [
+	class: "h-12 border-b border-border pl-4 [tr:last-child_&]:border-0"
+}, T = [
 	"aria-current",
 	"aria-disabled",
 	"onClick"
-], D = [
+], E = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"onClick"
-], ce = { class: "relative flex size-4" }, le = [
+], le = { class: "relative flex size-4" }, ue = [
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], ue = {
+], de = {
 	key: 0,
 	class: "group",
 	"data-testid": "ac-table-detail"
-}, O = ["colspan"], de = ["id", "aria-label"], fe = {
+}, D = ["colspan"], O = ["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"
+}, k = "border-border", A = "peer size-4 cursor-pointer appearance-none rounded-4 border border-muted/70 bg-surface align-middle transition-colors duration-150 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", j = /*@__PURE__*/ l({
 	__name: "AcTable",
 	props: /*@__PURE__*/ u({
 		columns: {},
@@ -95,70 +95,70 @@ 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 j = l, M = y(l, "selected"), N = y(l, "expanded"), P = u, F = ee(), I = y(l, "sortBy"), L = n(() => I.value?.key ?? ""), R = n(() => I.value?.mode ?? "asc"), z = (e) => {
 			if (!e.sortable) return;
-			let t = I.value === e.key && L.value === "asc" ? "desc" : "asc";
-			F.value = {
+			let t = L.value === e.key && R.value === "asc" ? "desc" : "asc";
+			I.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);
+			}, P("sort", e.key, t);
+		}, B = n(() => {
+			if (!L.value || j.manualSort) return j.rows;
+			let e = L.value, t = R.value === "asc" ? 1 : -1;
+			return [...j.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)));
+		let U = (e) => !!j.rowDisabled?.(e), W = n(() => j.rows.filter((e) => !U(e)).map((e) => e[j.rowKey])), G = n(() => new Set(M.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 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 e = new Set(W.value);
+			M.value = K.value ? M.value.filter((t) => !e.has(t)) : [...M.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];
+			let t = e[j.rowKey];
+			M.value = G.value.has(t) ? M.value.filter((e) => e !== t) : [...M.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);
+		let J = n(() => new Set(N.value)), Y = (e) => j.expandable && J.value.has(e[j.rowKey]), X = (e) => !j.canExpand || j.canExpand(e), Z = (e) => `${F}-detail-${String(e[j.rowKey])}`, he = n(() => j.columns.length + +!!j.selectable + +!!j.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 t = e[j.rowKey];
+			N.value = J.value.has(t) ? N.value.filter((e) => e !== t) : [...N.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[j.columns[0]?.key ?? ""], n = V(t) ? t.data : t;
+			return typeof n == "string" || typeof n == "number" ? n : String(e[j.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", [k, !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", [k, !l.flat && "first:rounded-tl-10"]])
+			}, [o("span", ie, [o("input", {
 				type: "checkbox",
-				class: d(k),
-				checked: G.value,
-				indeterminate: K.value,
+				class: d(A),
+				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)), {
+			}, null, 40, ae), (p(), r(g(q.value ? v(te) : v(S)), {
 				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
@@ -166,85 +166,85 @@ var T = { class: "ac-scrollbar" }, ne = { class: "w-full border-separate border-
 			(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", [
+					k,
 					!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": L.value === e.key ? R.value === "asc" ? "ascending" : "descending" : void 0,
+				onClick: (t) => z(e)
+			}, [o("span", { class: d(["inline-flex items-center gap-2", L.value === e.key && "text-heading"]) }, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(L.value === e.key ? v(x) : v(w)), {
 				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 transition-transform", [L.value === e.key ? "text-primary" : "text-muted/70", L.value === e.key && R.value === "desc" && "rotate-180"]]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : i("", !0)], 2)], 14, ae))), 128))
+			}, null, 8, ["class"])) : i("", !0)], 2)], 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", se)) : i("", !0),
+			l.selectable ? (p(), a("td", ce)) : 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-12 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(B.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", [
+			class: d(["group transition-colors duration-150 hover:bg-surface-sunken/40", [
 				l.clickable && "cursor-pointer",
-				(l.rowActive?.(f) || l.selectable && W.value.has(f[l.rowKey])) && "bg-primary-97",
+				(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) && P("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-12 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"]),
+			}, [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, E)) : 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-12 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", le, [o("input", {
 				type: "checkbox",
-				class: d(k),
-				checked: W.value.has(f[l.rowKey]),
-				disabled: H(f),
-				"aria-label": `Select ${Z(f)}`,
+				class: d(A),
+				checked: G.value.has(f[l.rowKey]),
+				disabled: U(f),
+				"aria-label": `Select ${Q(f)}`,
 				onChange: (e) => me(f)
-			}, null, 40, le), c(v(x), {
+			}, null, 40, ue), c(v(S), {
 				class: "pointer-events-none absolute inset-0 m-auto size-3 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-12 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", {
+		], 10, T), Y(f) && X(f) ? (p(), a("tr", de, [o("td", {
 			colspan: he.value,
-			class: "border-b border-border-light bg-surface-muted/50 p-0 group-last:border-0"
+			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, O)], 8, D)])) : 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 { j as default };

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

@@ -5,11 +5,11 @@ var b = {
 	"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]"
+	class: "flex gap-6 overflow-x-auto overflow-y-hidden border-b border-border px-1 text-base font-medium [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
 }, S = {
 	key: 0,
 	role: "tabpanel",
-	class: "pt-5"
+	class: "pt-6"
 }, C = /*@__PURE__*/ s({
 	__name: "AcTabs",
 	props: /*@__PURE__*/ l({ items: {} }, {
@@ -53,12 +53,12 @@ var b = {
 		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), {
 			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"],
+			class: ["relative inline-flex shrink-0 cursor-pointer items-center gap-2 border-b-2 pt-1 pb-3 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", C.value === e.key ? "border-primary text-primary-strong" : "border-transparent text-muted hover:border-border hover:text-heading"],
 			onClick: (t) => A(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"])
+				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", C.value === e.key ? "bg-primary/10 text-primary-strong" : "bg-surface-sunken text-muted"])
 			}, g(e.count), 3))]),
 			_: 2
 		}, 1040, [

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;

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

@@ -29,49 +29,49 @@ var m = {
 	setup(s, { emit: b }) {
 		let x = s, S = b, C = {
 			neutral: {
-				box: "bg-surface text-body border-border",
-				value: "bg-surface text-heading",
+				box: "bg-surface-sunken text-heading border-border",
+				value: "text-heading",
 				divider: "border-border"
 			},
 			primary: {
-				box: "bg-primary-97 text-primary-20 border-primary-80",
-				value: "bg-primary-95 text-primary-10",
-				divider: "border-primary-80"
+				box: "bg-primary/10 text-primary-strong border-primary/25",
+				value: "bg-primary/10 text-primary-strong",
+				divider: "border-primary/25"
 			},
 			info: {
-				box: "bg-blue-97 text-blue-20 border-blue-80",
-				value: "bg-blue-95 text-blue-10",
-				divider: "border-blue-80"
+				box: "bg-info/10 text-info-strong border-info/25",
+				value: "bg-info/10 text-info-strong",
+				divider: "border-info/25"
 			},
 			success: {
-				box: "bg-green-97 text-green-20 border-green-80",
-				value: "bg-green-95 text-green-10",
-				divider: "border-green-80"
+				box: "bg-success/10 text-success-strong border-success/25",
+				value: "bg-success/10 text-success-strong",
+				divider: "border-success/25"
 			},
 			warning: {
-				box: "bg-yellow-97 text-yellow-20 border-yellow-80",
-				value: "bg-yellow-95 text-yellow-10",
-				divider: "border-yellow-80"
+				box: "bg-warning/10 text-warning-strong border-warning/30",
+				value: "bg-warning/10 text-warning-strong",
+				divider: "border-warning/30"
 			},
 			danger: {
-				box: "bg-red-97 text-red-20 border-red-80",
-				value: "bg-red-95 text-red-10",
-				divider: "border-red-80"
+				box: "bg-danger/10 text-danger-strong border-danger/25",
+				value: "bg-danger/10 text-danger-strong",
+				divider: "border-danger/25"
 			}
-		}, w = t(() => !!x.keyLabel), T = t(() => C[x.color]), E = t(() => w.value ? `${x.keyLabel}=${x.valueLabel}` : x.label), D = t(() => w.value ? ["bg-surface text-label", x.color === "neutral" ? "border-border" : T.value.divider] : T.value.box);
+		}, w = t(() => !!x.keyLabel), T = t(() => C[x.color]), E = t(() => w.value ? `${x.keyLabel}=${x.valueLabel}` : x.label), D = t(() => w.value ? ["bg-surface-sunken text-muted", T.value.divider] : T.value.box);
 		function O() {
 			S("remove");
 		}
 		return (t, b) => (l(), r("span", {
-			class: c(["inline-flex h-6 max-w-full items-stretch overflow-hidden border text-xs leading-none whitespace-nowrap", [
+			class: c(["inline-flex h-6 max-w-full items-stretch overflow-hidden border text-xs leading-none font-medium whitespace-nowrap", [
 				D.value,
-				s.rounded ? "rounded-50" : "rounded-6",
-				w.value && "font-mono text-[length:calc(11.5px*var(--ac-scale))]"
+				s.rounded ? "rounded-full" : "rounded-6",
+				w.value && "font-mono"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-tag"
 		}, [w.value ? (l(), r(e, { key: 0 }, [
-			i("span", { class: c(["inline-flex min-w-0 items-center gap-1.5 bg-surface-muted pr-1.5 text-label", s.rounded ? "pl-2.5" : "pl-2"]) }, [t.$slots.icon ? (l(), r("span", m, [u(t.$slots, "icon")])) : n("", !0), i("span", h, d(s.keyLabel), 1)], 2),
+			i("span", { class: c(["inline-flex min-w-0 items-center gap-1.5 pr-1.5 text-muted", s.rounded ? "pl-2.5" : "pl-2"]) }, [t.$slots.icon ? (l(), r("span", m, [u(t.$slots, "icon")])) : n("", !0), i("span", h, d(s.keyLabel), 1)], 2),
 			b[0] ||= i("span", { class: "sr-only" }, "=", -1),
 			i("span", { class: c(["inline-flex min-w-0 shrink-[0.25] items-center border-l pl-1.5", [
 				T.value.value,

package/dist/lib/components/AcTagInput.js

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

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

@@ -0,0 +1,74 @@
+export interface Props {
+    /** Label above the field. Also the accessible name of the input and of the list of values. */
+    label: string;
+    /** Native `name` attribute of the text input. */
+    name?: string;
+    /** Example value shown in the empty input, e.g. "e.g. 10.0.0.0/16". */
+    placeholder?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. A rejected value's own message shows first. */
+    errorMsg?: string;
+    /** `small` 36px or `normal` 40px tall when empty; the field grows as values wrap. */
+    size?: "small" | "normal";
+    /** Most values allowed. The count shows under the field and adding more shows an error. */
+    maxItems?: number;
+    /** Lets the same value be added twice. Off by default: a repeat shows “… is already added”. */
+    allowDuplicates?: boolean;
+    /** Checks a value before it's added. Return a message to reject it; the text stays in the input with the message. */
+    validate?: (value: string, values: string[]) => string | void | null | undefined;
+    /** Cleans typed text before it's checked and added, e.g. `(v) => v.trim().toLowerCase()`. Defaults to trimming. */
+    transform?: (value: string) => string;
+    /** Shows a button that removes every value. Was `show-all-clear` in cloud-ui. */
+    showClear?: boolean;
+    /** Adds the typed text when the input loses focus, so a value isn't lost when people click Save. */
+    addOnBlur?: boolean;
+    /** Shows values and the input in the monospace font, for IPs, CIDRs and resource names. */
+    mono?: boolean;
+    /** Marks the field required and adds a red asterisk. Pass `error-msg` when the list is empty on submit. Was `is-required` in cloud-ui. */
+    required?: boolean;
+    /** Disables the field. Was `is-disabled` in cloud-ui. */
+    disabled?: boolean;
+    /** Shows the values on a muted fill, without remove buttons or the text input. Was `is-read-only` in cloud-ui. */
+    readonly?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The values, in the order they were added. Replaced with a new array on every change. */
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the text input. */
+    focus: () => void | undefined;
+    /** Adds the typed text now, e.g. before submitting. Returns `false` when text was rejected and is still in the input. */
+    commit: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+    clear: () => any;
+    add: (value: string) => any;
+    remove: (value: string, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onAdd?: ((value: string) => any) | undefined;
+    onRemove?: ((value: string, index: number) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    transform: (value: string) => string;
+    size: "small" | "normal";
+    maxItems: number;
+    readonly: boolean;
+    hint: string;
+    validate: (value: string, values: string[]) => string | void | null | undefined;
+    placeholder: string;
+    errorMsg: string;
+    mono: boolean;
+    allowDuplicates: boolean;
+    showClear: boolean;
+    addOnBlur: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;