@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -7,7 +7,7 @@ import { Check as le, ChevronDown as ue, ChevronRight as de, CircleAlert as fe,
 //#region src/lib/components/AcFormArray.vue?vue&type=script&setup=true&lang.ts
 var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-between gap-3" }, ye = {
 	key: 0,
-	class: "text-danger",
+	class: "ml-1 text-danger",
 	"aria-hidden": "true"
 }, be = {
 	key: 2,
@@ -15,10 +15,10 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 }, xe = { class: "ac-scrollbar" }, Se = { class: "w-full border-separate border-spacing-0 text-base" }, Ce = { class: "sr-only" }, we = {
 	key: 0,
 	scope: "col",
-	class: "h-8 w-px border-b border-border bg-surface-muted px-3 text-right"
+	class: "h-10 w-px border-b border-border bg-surface-sunken/50 px-3 text-right"
 }, Te = ["data-row"], Ee = {
 	key: 0,
-	class: "h-10 border-b border-border-light px-2 text-right whitespace-nowrap [tr:last-child_&]:border-b-0"
+	class: "h-12 border-b border-border px-2 text-right whitespace-nowrap [tr:last-child_&]:border-b-0"
 }, De = { class: "inline-flex items-center gap-0.5" }, Oe = [
 	"aria-expanded",
 	"aria-label",
@@ -31,18 +31,18 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 	"aria-label",
 	"disabled",
 	"onClick"
-], je = ["aria-label"], Me = { class: "inline-flex h-9 items-center px-1 text-body" }, Ne = { class: "border-b border-border-light px-2 py-2 text-right align-top whitespace-nowrap [tr:last-child_&]:border-b-0" }, Pe = { class: "inline-flex h-9 items-center gap-0.5" }, Fe = ["aria-label", "disabled"], Ie = ["disabled"], Le = {
+], je = ["aria-label"], Me = { class: "inline-flex h-10 items-center px-2 text-body" }, Ne = { class: "border-b border-border px-2 py-2 text-right align-top whitespace-nowrap [tr:last-child_&]:border-b-0" }, Pe = { class: "inline-flex h-10 items-center gap-0.5" }, Fe = ["aria-label", "disabled"], Ie = ["disabled"], Le = {
 	key: 0,
 	role: "alert",
-	class: "mt-1 max-w-48 text-left text-xs whitespace-normal text-red-30"
+	class: "mt-1 max-w-48 text-left text-xs whitespace-normal text-danger-strong"
 }, Re = { key: 2 }, ze = ["colspan"], Be = ["aria-labelledby"], Ve = ["id"], He = {
 	"data-editor-fields": "",
 	class: "space-y-4"
 }, Ue = {
 	key: 0,
 	role: "alert",
-	class: "mt-3 flex items-center gap-1 text-xs text-red-30"
-}, We = { class: "mt-4 flex justify-end gap-2" }, Ge = { key: 3 }, Ke = ["colspan"], qe = {
+	class: "mt-3 flex items-center gap-1.5 text-base text-danger-strong"
+}, We = { class: "mt-5 flex justify-end gap-3" }, Ge = { key: 3 }, Ke = ["colspan"], qe = {
 	class: "sr-only",
 	"aria-live": "polite"
 }, S = -1, C = "input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role=\"combobox\"]:not([aria-disabled=\"true\"]), button:not([disabled])", w = /*@__PURE__*/ f({
@@ -116,34 +116,34 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 		"remove"
 	], ["update:modelValue"]),
 	setup(f, { expose: p, emit: w }) {
-		let T = f, E = ie(f, "modelValue"), D = w, Je = ae(), O = re(), Ye = `${O}-label`, Xe = `${O}-body`, k = `${O}-msg`, A = _(null), j = _(T.collapsible && T.defaultCollapsed), M = _(null), N = _({}), P = _({}), F = _(""), I = _(!1), L = _(/* @__PURE__ */ new Set()), R = _(""), z = a(() => E.value ?? []), B = a(() => I.value || T.loading), Ze = a(() => M.value !== null), V = a(() => Array.isArray(T.errorMsg) ? T.errorMsg : T.errorMsg ? [T.errorMsg] : []), Qe = a(() => T.max !== void 0 && z.value.length >= T.max), $e = a(() => !T.disabled && !T.addDisabled && !Qe.value && !Ze.value && !B.value), H = a(() => T.disabled || Ze.value || B.value), U = a(() => !T.readonly || !!Je.details || !!Je["row-actions"]), et = a(() => z.value.length > 0 || M.value === S), tt = a(() => T.columns.length + +!!U.value), nt = a(() => T.addLabel || `Add ${T.itemName}`), rt = a(() => T.formTitle || `${M.value === S ? "New" : "Edit"} ${T.itemName}`), it = a(() => {
+		let T = f, E = ie(f, "modelValue"), D = w, O = ae(), k = re(), A = `${k}-label`, j = `${k}-body`, Je = `${k}-msg`, Ye = `${k}-hint`, M = _(null), N = _(T.collapsible && T.defaultCollapsed), P = _(null), F = _({}), I = _({}), L = _(""), R = _(!1), z = _(/* @__PURE__ */ new Set()), B = _(""), V = a(() => E.value ?? []), H = a(() => R.value || T.loading), Xe = a(() => P.value !== null), U = a(() => Array.isArray(T.errorMsg) ? T.errorMsg : T.errorMsg ? [T.errorMsg] : []), Ze = a(() => [T.hint && Ye, U.value.length && Je].filter(Boolean).join(" ") || void 0), Qe = a(() => T.max !== void 0 && V.value.length >= T.max), $e = a(() => !T.disabled && !T.addDisabled && !Qe.value && !Xe.value && !H.value), W = a(() => T.disabled || Xe.value || H.value), G = a(() => !T.readonly || !!O.details || !!O["row-actions"]), et = a(() => V.value.length > 0 || P.value === S), tt = a(() => T.columns.length + +!!G.value), nt = a(() => T.addLabel || `Add ${T.itemName}`), rt = a(() => T.formTitle || `${P.value === S ? "New" : "Edit"} ${T.itemName}`), it = a(() => {
 			let e = [];
-			return z.value.forEach((t, n) => {
-				let r = M.value === n;
+			return V.value.forEach((t, n) => {
+				let r = P.value === n;
 				e.push({
 					kind: r && T.mode === "inline" ? "inline" : "item",
 					index: n
 				}), r && T.mode === "form" ? e.push({
 					kind: "form",
 					index: n
-				}) : !r && L.value.has(n) && e.push({
+				}) : !r && z.value.has(n) && e.push({
 					kind: "details",
 					index: n
 				});
-			}), M.value === S && e.push({
+			}), P.value === S && e.push({
 				kind: T.mode === "inline" ? "inline" : "form",
 				index: S
 			}), e;
 		});
-		function W(e) {
-			return e === S ? N.value : z.value[e];
+		function K(e) {
+			return e === S ? F.value : V.value[e];
 		}
-		function G(e) {
-			let t = T.columns[0], n = t ? z.value[e]?.[t.key] : void 0;
+		function q(e) {
+			let t = T.columns[0], n = t ? V.value[e]?.[t.key] : void 0;
 			return n == null || typeof n == "object" || n === "" ? `${T.itemName} ${e + 1}` : `${T.itemName} ${String(n)}`;
 		}
 		function at(e, t) {
-			let n = W(t);
+			let n = K(t);
 			return e.format ? e.format(n[e.key], n) : null;
 		}
 		function ot(e) {
@@ -153,118 +153,118 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 				return JSON.parse(JSON.stringify(e));
 			}
 		}
-		function K(e, t) {
+		function J(e, t) {
 			m(() => {
-				(A.value?.querySelector(e) ?? t?.())?.focus();
+				(M.value?.querySelector(e) ?? t?.())?.focus();
 			});
 		}
 		function st() {
 			m(() => {
-				let e = A.value?.querySelector("[data-editor]");
+				let e = M.value?.querySelector("[data-editor]");
 				(e?.querySelector(`[data-editor-fields] :is(${C})`) ?? e?.querySelector(C))?.focus();
 			});
 		}
-		function q(e) {
-			e >= 0 && e < z.value.length ? K(`[data-row="${e}"] [data-action="edit"], [data-row="${e}"] [data-action="remove"]`, ct) : K("[data-action='add']");
+		function Y(e) {
+			e >= 0 && e < V.value.length ? J(`[data-row="${e}"] [data-action="edit"], [data-row="${e}"] [data-action="remove"]`, ct) : J("[data-action='add']");
 		}
 		function ct() {
-			return A.value?.querySelector("[data-action='add']");
+			return M.value?.querySelector("[data-action='add']");
 		}
-		function J() {
-			P.value = {}, F.value = "";
+		function X() {
+			I.value = {}, L.value = "";
 		}
-		function Y() {
-			$e.value && (j.value = !1, J(), N.value = T.newItem(), M.value = S, st());
+		function lt() {
+			$e.value && (N.value = !1, X(), F.value = T.newItem(), P.value = S, st());
 		}
-		function lt(e) {
-			!H.value && T.editable && (J(), N.value = ot(z.value[e]), M.value = e, st());
+		function ut(e) {
+			!W.value && T.editable && (X(), F.value = ot(V.value[e]), P.value = e, st());
 		}
-		function X() {
-			let e = M.value;
-			e === null || I.value || (M.value = null, J(), q(e));
+		function Z() {
+			let e = P.value;
+			e === null || R.value || (P.value = null, X(), Y(e));
 		}
-		async function Z() {
-			let e = M.value;
-			if (e === null || B.value) return;
-			let t = N.value, n = T.validate?.(t, e);
-			if (P.value = n && typeof n == "object" ? n : {}, F.value = typeof n == "string" ? n : "", F.value || Object.keys(P.value).length) {
-				K("[data-editor] [aria-invalid='true'], [data-editor] [aria-invalid='true'] input");
+		async function Q() {
+			let e = P.value;
+			if (e === null || H.value) return;
+			let t = F.value, n = T.validate?.(t, e);
+			if (I.value = n && typeof n == "object" ? n : {}, L.value = typeof n == "string" ? n : "", L.value || Object.keys(I.value).length) {
+				J("[data-editor] [aria-invalid='true'], [data-editor] [aria-invalid='true'] input");
 				return;
 			}
-			I.value = !0;
+			R.value = !0;
 			try {
 				if (await T.beforeSave?.(t, e) === !1) return;
 			} catch (e) {
-				F.value = e instanceof Error ? e.message : String(e);
+				L.value = e instanceof Error ? e.message : String(e);
 				return;
 			} finally {
-				I.value = !1;
+				R.value = !1;
 			}
-			let r = [...z.value];
-			e === S ? r.push(t) : r[e] = t, E.value = r, M.value = null, J(), e === S ? (D("add", t), R.value = `${$(T.itemName)} added.`) : (D("update", t, e), R.value = `${$(T.itemName)} updated.`), q(e === S ? r.length - 1 : e);
+			let r = [...V.value];
+			e === S ? r.push(t) : r[e] = t, E.value = r, P.value = null, X(), e === S ? (D("add", t), B.value = `${$(T.itemName)} added.`) : (D("update", t, e), B.value = `${$(T.itemName)} updated.`), Y(e === S ? r.length - 1 : e);
 		}
-		async function ut(e) {
-			if (H.value) return;
-			let t = z.value[e];
+		async function dt(e) {
+			if (W.value) return;
+			let t = V.value[e];
 			if (T.beforeRemove) {
-				I.value = !0;
+				R.value = !0;
 				try {
 					if (await T.beforeRemove(t, e) === !1) return;
 				} finally {
-					I.value = !1;
+					R.value = !1;
 				}
 			}
-			E.value = z.value.filter((t, n) => n !== e), L.value = /* @__PURE__ */ new Set(), D("remove", t, e), R.value = `${$(T.itemName)} removed.`, q(Math.min(e, z.value.length - 1));
+			E.value = V.value.filter((t, n) => n !== e), z.value = /* @__PURE__ */ new Set(), D("remove", t, e), B.value = `${$(T.itemName)} removed.`, Y(Math.min(e, V.value.length - 1));
 		}
-		function dt(e) {
-			let t = new Set(L.value);
-			t.delete(e) || t.add(e), L.value = t;
+		function ft(e) {
+			let t = new Set(z.value);
+			t.delete(e) || t.add(e), z.value = t;
 		}
-		function Q(e) {
+		function pt(e) {
 			if (e.defaultPrevented) return;
 			let t = e.target;
-			e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), X()) : e.key === "Enter" && t.tagName === "INPUT" && ![
+			e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), Z()) : e.key === "Enter" && t.tagName === "INPUT" && ![
 				"checkbox",
 				"radio",
 				"file"
-			].includes(t.type) && (e.preventDefault(), Z());
+			].includes(t.type) && (e.preventDefault(), Q());
 		}
 		function $(e) {
 			return e.charAt(0).toUpperCase() + e.slice(1);
 		}
 		return p({
-			add: Y,
-			edit: lt,
-			cancel: X
+			add: lt,
+			edit: ut,
+			cancel: Z
 		}), (a, p) => (g(), c("div", {
 			ref_key: "root",
-			ref: A,
+			ref: M,
 			role: "group",
-			"aria-labelledby": Ye,
-			"aria-describedby": V.value.length || f.hint ? k : void 0,
+			"aria-labelledby": A,
+			"aria-describedby": Ze.value,
 			"data-ac-ds": "",
 			"data-testid": "ac-form-array"
 		}, [
 			l("div", ve, [(g(), o(te(f.collapsible ? "button" : "div"), {
 				type: f.collapsible ? "button" : void 0,
-				class: h(["-ml-1 flex min-w-0 items-center gap-1.5 rounded-6 px-1 py-0.5 text-left", f.collapsible && "cursor-pointer transition hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"]),
-				"aria-expanded": f.collapsible ? !j.value : void 0,
-				"aria-controls": f.collapsible ? Xe : void 0,
-				onClick: p[0] ||= (e) => f.collapsible && (j.value = !j.value)
+				class: h(["-ml-1.5 flex min-w-0 items-center gap-1.5 rounded-8 px-1.5 py-1 text-left", f.collapsible && "cursor-pointer transition-colors duration-200 hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"]),
+				"aria-expanded": f.collapsible ? !N.value : void 0,
+				"aria-controls": f.collapsible ? j : void 0,
+				onClick: p[0] ||= (e) => f.collapsible && (N.value = !N.value)
 			}, {
 				default: se(() => [
 					f.collapsible ? (g(), o(x(de), {
 						key: 0,
-						class: h(["size-4 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none", !j.value && "rotate-90"]),
+						class: h(["size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none", !N.value && "rotate-90"]),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : s("", !0),
 					l("span", {
-						id: Ye,
-						class: "truncate text-lg font-medium text-heading"
-					}, [u(b(f.label), 1), f.required ? (g(), c("span", ye, " *")) : s("", !0)]),
-					z.value.length ? (g(), o(n, {
+						id: A,
+						class: "truncate text-base font-medium text-heading"
+					}, [u(b(f.label), 1), f.required ? (g(), c("span", ye, "*")) : s("", !0)]),
+					V.value.length ? (g(), o(n, {
 						key: 1,
-						label: String(z.value.length),
+						label: String(V.value.length),
 						rounded: "",
 						class: "shrink-0"
 					}, null, 8, ["label"])) : s("", !0),
@@ -281,56 +281,46 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 				"data-action": "add",
 				title: nt.value,
 				size: "small",
-				color: "white",
+				variant: "light",
 				disabled: !$e.value,
-				onClick: Y
+				onClick: lt
 			}, {
 				icon: se(() => [d(x(me), { "aria-hidden": "true" })]),
 				_: 1
 			}, 8, ["title", "disabled"]))]),
-			V.value.length ? (g(), c("div", {
+			f.hint ? (g(), c("p", {
 				key: 0,
-				id: k,
-				class: "mt-1 space-y-0.5"
-			}, [(g(!0), c(i, null, v(V.value, (e) => (g(), c("p", {
-				key: e,
-				class: "flex items-center gap-1 text-xs text-red-30"
-			}, [d(x(fe), {
-				class: "size-3.5 shrink-0",
-				"aria-hidden": "true"
-			}), u(" " + b(e), 1)]))), 128))])) : f.hint ? (g(), c("p", {
-				key: 1,
-				id: k,
-				class: "mt-0.5 text-xs text-muted"
+				id: Ye,
+				class: "mt-1 text-base text-muted"
 			}, b(f.hint), 1)) : s("", !0),
 			ce(l("div", {
-				id: Xe,
+				id: j,
 				class: "mt-2"
 			}, [et.value ? (g(), c("div", {
 				key: 0,
-				class: h(["overflow-hidden rounded-10 border bg-surface shadow-xs", V.value.length ? "border-red-60" : "border-border"])
+				class: h(["overflow-hidden rounded-10 border bg-surface", U.value.length ? "border-danger/60" : "border-border"])
 			}, [l("div", xe, [l("table", Se, [
 				l("caption", Ce, b(f.label), 1),
 				l("thead", null, [l("tr", null, [(g(!0), c(i, null, v(f.columns, (e) => (g(), c("th", {
 					key: e.key,
 					scope: "col",
-					class: "h-8 border-b border-border bg-surface-muted px-3 text-left text-xs font-medium whitespace-nowrap text-label",
+					class: "h-10 border-b border-border bg-surface-sunken/50 px-4 text-left text-base font-semibold whitespace-nowrap text-muted",
 					style: ee(e.width ? { width: e.width } : void 0)
-				}, b(e.label), 5))), 128)), U.value ? (g(), c("th", we, [...p[1] ||= [l("span", { class: "sr-only" }, "Actions", -1)]])) : s("", !0)])]),
+				}, b(e.label), 5))), 128)), G.value ? (g(), c("th", we, [...p[1] ||= [l("span", { class: "sr-only" }, "Actions", -1)]])) : s("", !0)])]),
 				l("tbody", null, [(g(!0), c(i, null, v(it.value, (n) => (g(), c(i, { key: `${n.kind}-${n.index}` }, [n.kind === "item" ? (g(), c("tr", {
 					key: 0,
 					"data-row": n.index,
-					class: "group/row"
+					class: "group/row transition-colors duration-150 hover:bg-surface-sunken/40"
 				}, [(g(!0), c(i, null, v(f.columns, (e) => (g(), c("td", {
 					key: e.key,
-					class: "h-10 border-b border-border-light px-3 whitespace-nowrap text-body [tr:last-child_&]:border-b-0"
+					class: "h-12 border-b border-border px-4 whitespace-nowrap text-body [tr:last-child_&]:border-b-0"
 				}, [y(a.$slots, `cell-${e.key}`, {
-					item: W(n.index),
+					item: K(n.index),
 					index: n.index,
-					value: W(n.index)[e.key]
+					value: K(n.index)[e.key]
 				}, () => [e.format ? (g(), c(i, { key: 0 }, [u(b(at(e, n.index)), 1)], 64)) : (g(), o(r, {
 					key: 1,
-					value: W(n.index)[e.key],
+					value: K(n.index)[e.key],
 					type: e.type ?? "auto",
 					title: e.label,
 					"max-width": "220px"
@@ -338,63 +328,63 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 					"value",
 					"type",
 					"title"
-				]))])]))), 128)), U.value ? (g(), c("td", Ee, [l("span", De, [
+				]))])]))), 128)), G.value ? (g(), c("td", Ee, [l("span", De, [
 					y(a.$slots, "row-actions", {
-						item: W(n.index),
+						item: K(n.index),
 						index: n.index
 					}),
 					a.$slots.details ? (g(), c("button", {
 						key: 0,
 						type: "button",
-						class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-						"aria-expanded": L.value.has(n.index),
-						"aria-label": `Details of ${G(n.index)}`,
-						onClick: (e) => dt(n.index)
+						class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+						"aria-expanded": z.value.has(n.index),
+						"aria-label": `Details of ${q(n.index)}`,
+						onClick: (e) => ft(n.index)
 					}, [d(x(ue), {
-						class: h(["size-4 transition-transform motion-reduce:transition-none", L.value.has(n.index) && "rotate-180"]),
+						class: h(["size-4 transition-transform motion-reduce:transition-none", z.value.has(n.index) && "rotate-180"]),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])], 8, Oe)) : s("", !0),
 					f.editable && !f.readonly ? (g(), c("button", {
 						key: 1,
 						type: "button",
 						"data-action": "edit",
-						class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
-						"aria-label": `Edit ${G(n.index)}`,
-						disabled: H.value,
-						onClick: (e) => lt(n.index)
+						class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
+						"aria-label": `Edit ${q(n.index)}`,
+						disabled: W.value,
+						onClick: (e) => ut(n.index)
 					}, [d(x(pe), {
-						class: "size-3.5",
+						class: "size-4",
 						"aria-hidden": "true"
 					})], 8, ke)) : s("", !0),
 					f.readonly ? s("", !0) : (g(), c("button", {
 						key: 2,
 						type: "button",
 						"data-action": "remove",
-						class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-red-95 hover:text-red-30 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted",
-						"aria-label": `Remove ${G(n.index)}`,
-						disabled: H.value,
-						onClick: (e) => ut(n.index)
+						class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-danger/10 hover:text-danger-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted",
+						"aria-label": `Remove ${q(n.index)}`,
+						disabled: W.value,
+						onClick: (e) => dt(n.index)
 					}, [d(x(he), {
-						class: "size-3.5",
+						class: "size-4",
 						"aria-hidden": "true"
 					})], 8, Ae))
 				])])) : s("", !0)], 8, Te)) : n.kind === "inline" ? (g(), c("tr", {
 					key: 1,
 					"data-editor": "",
 					"aria-label": rt.value,
-					class: "bg-surface-muted",
-					onKeydown: Q
+					class: "bg-surface-sunken/40",
+					onKeydown: pt
 				}, [(g(!0), c(i, null, v(f.columns, (e) => (g(), c("td", {
 					key: e.key,
 					"data-editor-fields": "",
-					class: "border-b border-border-light px-2 py-2 align-top [tr:last-child_&]:border-b-0"
+					class: "border-b border-border px-2 py-2 align-top [tr:last-child_&]:border-b-0 [&_[data-ac-ds]>label:first-child]:sr-only"
 				}, [y(a.$slots, `field-${e.key}`, {
-					item: N.value,
+					item: F.value,
 					index: n.index,
-					error: P.value[e.key] ?? "",
-					errors: P.value
+					error: I.value[e.key] ?? "",
+					errors: I.value
 				}, () => [l("span", Me, [d(r, {
-					value: N.value[e.key],
+					value: F.value[e.key],
 					type: e.type ?? "auto",
 					title: e.label,
 					"max-width": "220px"
@@ -404,11 +394,11 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 					"title"
 				])])])]))), 128)), l("td", Ne, [l("span", Pe, [l("button", {
 					type: "button",
-					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-primary-20 transition hover:bg-primary-95 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
+					class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-8 text-primary-strong transition-colors duration-200 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
 					"aria-label": n.index === S ? `Add ${f.itemName}` : `Save ${f.itemName}`,
-					disabled: B.value || f.disabled,
-					onClick: Z
-				}, [B.value ? (g(), o(e, {
+					disabled: H.value || f.disabled,
+					onClick: Q
+				}, [H.value ? (g(), o(e, {
 					key: 0,
 					class: "text-primary",
 					label: ""
@@ -418,49 +408,49 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 					"aria-hidden": "true"
 				}))], 8, Fe), l("button", {
 					type: "button",
-					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
+					class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
 					"aria-label": "Cancel",
-					disabled: I.value,
-					onClick: X
+					disabled: R.value,
+					onClick: Z
 				}, [d(x(ge), {
 					class: "size-4",
 					"aria-hidden": "true"
-				})], 8, Ie)]), F.value ? (g(), c("p", Le, b(F.value), 1)) : s("", !0)])], 40, je)) : n.kind === "form" ? (g(), c("tr", Re, [l("td", {
+				})], 8, Ie)]), L.value ? (g(), c("p", Le, b(L.value), 1)) : s("", !0)])], 40, je)) : n.kind === "form" ? (g(), c("tr", Re, [l("td", {
 					colspan: tt.value,
-					class: "border-b border-border-light bg-surface-muted p-0 [tr:last-child_&]:border-b-0"
+					class: "border-b border-border bg-surface-sunken/40 p-0 [tr:last-child_&]:border-b-0"
 				}, [l("div", {
 					"data-editor": "",
 					role: "group",
-					"aria-labelledby": `${x(O)}-form-title`,
-					class: "px-4 py-4",
-					onKeydown: Q
+					"aria-labelledby": `${x(k)}-form-title`,
+					class: "p-4",
+					onKeydown: pt
 				}, [
 					l("p", {
-						id: `${x(O)}-form-title`,
-						class: "mb-3 text-base font-medium text-heading"
+						id: `${x(k)}-form-title`,
+						class: "mb-4 text-base font-semibold tracking-tight text-heading"
 					}, b(rt.value), 9, Ve),
 					l("div", He, [y(a.$slots, "form", {
-						item: N.value,
+						item: F.value,
 						index: n.index,
-						errors: P.value,
+						errors: I.value,
 						isNew: n.index === S
 					})]),
-					F.value ? (g(), c("p", Ue, [d(x(fe), {
-						class: "size-3.5 shrink-0",
+					L.value ? (g(), c("p", Ue, [d(x(fe), {
+						class: "size-4 shrink-0",
 						"aria-hidden": "true"
-					}), u(" " + b(F.value), 1)])) : s("", !0),
+					}), u(" " + b(L.value), 1)])) : s("", !0),
 					l("div", We, [d(t, {
 						title: "Cancel",
 						size: "small",
 						color: "white",
-						disabled: I.value,
-						onClick: X
+						disabled: R.value,
+						onClick: Z
 					}, null, 8, ["disabled"]), d(t, {
 						title: n.index === S ? `Add ${f.itemName}` : "Save",
 						size: "small",
-						loading: B.value,
+						loading: H.value,
 						disabled: f.disabled,
-						onClick: Z
+						onClick: Q
 					}, null, 8, [
 						"title",
 						"loading",
@@ -468,16 +458,28 @@ var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-
 					])])
 				], 40, Be)], 8, ze)])) : n.kind === "details" ? (g(), c("tr", Ge, [l("td", {
 					colspan: tt.value,
-					class: "border-b border-border-light bg-surface-muted px-4 py-3 text-base text-body [tr:last-child_&]:border-b-0"
+					class: "border-b border-border bg-surface-muted px-4 py-3 text-base text-body [tr:last-child_&]:border-b-0"
 				}, [y(a.$slots, "details", {
-					item: W(n.index),
+					item: K(n.index),
 					index: n.index
 				})], 8, Ke)])) : s("", !0)], 64))), 128))])
 			])])], 2)) : (g(), c("div", {
 				key: 1,
-				class: h(["rounded-10 border border-dashed px-4 py-5 text-center text-base text-muted", V.value.length ? "border-red-60" : "border-border-dark"])
-			}, [y(a.$slots, "empty", {}, () => [u(b(f.emptyText), 1)])], 2))], 512), [[oe, !j.value]]),
-			l("p", qe, b(R.value), 1)
+				class: h(["rounded-10 border border-dashed bg-surface px-4 py-6 text-center text-base text-muted", U.value.length ? "border-danger/60" : "border-border"])
+			}, [y(a.$slots, "empty", {}, () => [u(b(f.emptyText), 1)])], 2))], 512), [[oe, !N.value]]),
+			U.value.length ? (g(), c("div", {
+				key: 1,
+				id: Je,
+				class: "mt-1.5 space-y-1",
+				role: "alert"
+			}, [(g(!0), c(i, null, v(U.value, (e) => (g(), c("p", {
+				key: e,
+				class: "flex items-center gap-1.5 text-base text-danger-strong"
+			}, [d(x(fe), {
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			}), u(" " + b(e), 1)]))), 128))])) : s("", !0),
+			l("p", qe, b(B.value), 1)
 		], 8, _e));
 	}
 });

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

@@ -1,7 +1,7 @@
 export interface Props {
     /** Text of the primary button. It's a `type="submit"` button, so it submits the surrounding form. */
     submitLabel?: string;
-    /** Text of the secondary button. */
+    /** Text of the secondary button, a neutral outline button left of the primary one. */
     cancelLabel?: string;
     /** Hides the Cancel button. */
     hideCancel?: boolean;
@@ -33,10 +33,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     form: string;
     disabled: boolean;
     loading: boolean;
-    submitLabel: string;
     cancelLabel: string;
-    hideCancel: boolean;
     sticky: "container" | "viewport" | "none";
+    submitLabel: string;
+    hideCancel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,7 +1,7 @@
 import e from "./AcButton.js";
 import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, inject as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, watch as g } from "vue";
 //#region src/lib/components/AcFormFooter.vue?vue&type=script&setup=true&lang.ts
-var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = { class: "ml-auto flex items-center gap-2" }, y = /*@__PURE__*/ s({
+var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = { class: "ml-auto flex items-center gap-3" }, y = /*@__PURE__*/ s({
 	__name: "AcFormFooter",
 	props: {
 		submitLabel: { default: "Save" },
@@ -56,7 +56,7 @@ var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = {
 		}, [a("div", {
 			ref_key: "bar",
 			ref: w,
-			class: l(["border-t border-border bg-surface py-3", s.sticky === "viewport" && "fixed bottom-0 z-40 px-4"]),
+			class: l(["border-t border-border bg-surface py-4", s.sticky === "viewport" && "fixed bottom-0 z-40 px-4"]),
 			style: u(s.sticky === "viewport" ? {
 				left: `${T.value.left}px`,
 				width: `${T.value.width}px`

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

@@ -1,10 +1,15 @@
+import type { Component } from "vue";
 export interface Props {
     /** Heading of the group, e.g. "Schedule" or "Retention". */
     title?: string;
     /** A line or two under the title explaining the group. */
     description?: string;
+    /** A Lucide icon shown in a tinted 28px tile before the title. */
+    icon?: Component;
     /** `stacked` puts the title above the fields; `aside` puts it in a left column from 768px up. Defaults to the AcForm's `layout`. */
     layout?: "stacked" | "aside";
+    /** `card` is a bordered card with 20px padding; `plain` has no card and a divider above it. Defaults to the AcForm's `variant`, or `card`. */
+    variant?: "card" | "plain";
     /** Lays the fields out in two columns from 640px up. Use `class="sm:col-span-2"` on a field to span both. */
     columns?: 1 | 2;
 }
@@ -17,10 +22,12 @@ type __VLS_Slots = {
     actions?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "card" | "plain";
     title: string;
     description: string;
-    layout: "stacked" | "aside";
+    icon: Component;
     columns: 1 | 2;
+    layout: "stacked" | "aside";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;