@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,13 +1,10 @@
 import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d } from "vue";
 import { Inbox as f, SearchX as p, TriangleAlert as m } from "@lucide/vue";
 //#region src/lib/components/AcEmptyState.vue?vue&type=script&setup=true&lang.ts
-var h = ["role"], g = { class: "flex flex-col items-center gap-1" }, _ = {
+var h = ["role"], g = {
 	key: 0,
-	class: "font-mono text-xs font-medium tracking-wide text-muted uppercase"
-}, v = {
-	key: 0,
-	class: "mt-1 flex flex-wrap items-center justify-center gap-2"
-}, y = /*@__PURE__*/ o({
+	class: "mb-1 font-mono text-xs font-medium tracking-wide text-muted uppercase"
+}, _ = /*@__PURE__*/ o({
 	__name: "AcEmptyState",
 	props: {
 		variant: { default: "empty" },
@@ -16,66 +13,80 @@ var h = ["role"], g = { class: "flex flex-col items-center gap-1" }, _ = {
 		description: { default: "" },
 		query: { default: "" },
 		icon: { default: void 0 },
-		size: { default: "normal" }
+		size: { default: "normal" },
+		framed: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	setup(o) {
-		let y = o, b = {
+		let _ = o, v = {
 			empty: {
 				glyph: f,
 				title: "Nothing here yet",
-				tile: "border-border bg-surface-muted text-muted"
+				tile: "bg-primary/10 text-primary-strong",
+				frame: "border-border bg-surface"
 			},
 			search: {
 				glyph: p,
 				title: "No results found",
-				tile: "border-border bg-surface-muted text-muted"
+				tile: "bg-primary/10 text-primary-strong",
+				frame: "border-border bg-surface"
 			},
 			error: {
 				glyph: m,
 				title: "Something went wrong",
-				tile: "border-red-90 bg-red-97 text-red-40"
+				tile: "bg-danger/10 text-danger-strong",
+				frame: "border-danger/25 bg-danger/5"
 			}
-		}, x = {
+		}, y = {
 			small: {
-				root: "py-6 gap-3",
-				tile: "size-9 rounded-8 [&_svg]:size-4",
-				title: "text-lg leading-6",
-				text: "text-base max-w-80"
+				root: "py-8",
+				gap: "mb-3",
+				tile: "size-12 [&_svg]:size-6",
+				title: "text-lg",
+				text: "max-w-80 text-base",
+				actions: "mt-4"
 			},
 			normal: {
-				root: "py-12 gap-4",
-				tile: "size-11 rounded-10 [&_svg]:size-5",
-				title: "text-xl leading-6",
-				text: "text-base max-w-100"
+				root: "py-16",
+				gap: "mb-4",
+				tile: "size-16 [&_svg]:size-8",
+				title: "text-xl",
+				text: "max-w-md text-base",
+				actions: "mt-6"
 			},
 			large: {
-				root: "py-20 gap-5",
-				tile: "size-14 rounded-12 [&_svg]:size-6",
-				title: "text-2xl leading-7",
-				text: "text-lg max-w-120"
+				root: "py-20",
+				gap: "mb-5",
+				tile: "size-16 [&_svg]:size-8",
+				title: "text-2xl",
+				text: "max-w-120 text-lg",
+				actions: "mt-6"
 			}
-		}, S = e(() => b[y.variant]), C = e(() => x[y.size]), w = e(() => y.icon ?? S.value.glyph), T = e(() => y.title ? y.title : y.variant === "search" && y.query ? `No results for “${y.query}”` : S.value.title);
+		}, b = e(() => v[_.variant]), x = e(() => y[_.size]), S = e(() => _.icon ?? b.value.glyph), C = e(() => _.title ? _.title : _.variant === "search" && _.query ? `No results for “${_.query}”` : b.value.title);
 		return (e, f) => (c(), r("div", {
-			class: s(["flex flex-col items-center px-4 text-center", C.value.root]),
+			class: s(["flex flex-col items-center justify-center text-center", [x.value.root, o.framed ? ["rounded-16 border border-dashed px-6", b.value.frame] : "px-4"]]),
 			role: o.variant === "error" ? "alert" : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-empty-state"
 		}, [
-			l(e.$slots, "icon", {}, () => [i("span", {
-				class: s(["inline-flex shrink-0 items-center justify-center border shadow-xs", [S.value.tile, C.value.tile]]),
+			i("div", { class: s(["flex justify-center", x.value.gap]) }, [l(e.$slots, "icon", {}, () => [i("span", {
+				class: s(["inline-flex shrink-0 items-center justify-center rounded-16", [b.value.tile, x.value.tile]]),
 				"aria-hidden": "true"
-			}, [(c(), t(u(w.value)))], 2)]),
-			i("div", g, [
-				o.code ? (c(), r("p", _, d(o.code), 1)) : n("", !0),
-				i("p", { class: s(["font-semibold tracking-[-0.01em] text-balance text-heading", C.value.title]) }, d(T.value), 3),
-				o.description || e.$slots.default ? (c(), r("div", {
-					key: 1,
-					class: s(["text-pretty text-muted [&_a]:font-medium [&_a]:text-primary-20 [&_a]:underline [&_a]:underline-offset-2", C.value.text])
-				}, [l(e.$slots, "default", {}, () => [a(d(o.description), 1)])], 2)) : n("", !0)
-			]),
-			e.$slots.actions ? (c(), r("div", v, [l(e.$slots, "actions")])) : n("", !0)
+			}, [(c(), t(u(S.value)))], 2)])], 2),
+			o.code ? (c(), r("p", g, d(o.code), 1)) : n("", !0),
+			i("p", { class: s(["font-heading font-semibold tracking-tight text-balance text-heading", x.value.title]) }, d(C.value), 3),
+			o.description || e.$slots.default ? (c(), r("div", {
+				key: 1,
+				class: s(["mt-1.5 text-pretty text-muted [&_a]:font-medium [&_a]:text-primary-strong [&_a]:underline [&_a]:underline-offset-2", x.value.text])
+			}, [l(e.$slots, "default", {}, () => [a(d(o.description), 1)])], 2)) : n("", !0),
+			e.$slots.actions ? (c(), r("div", {
+				key: 2,
+				class: s(["flex flex-wrap items-center justify-center gap-3", x.value.actions])
+			}, [l(e.$slots, "actions")], 2)) : n("", !0)
 		], 10, h));
 	}
 });
 //#endregion
-export { y as default };
+export { _ as default };

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

@@ -83,10 +83,11 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 		}
 		return (n, u) => (m(), r(g(l.selectable ? "label" : "div"), {
 			for: l.selectable ? `${v(V)}-input` : void 0,
-			class: p(["group relative flex min-w-0 flex-col rounded-10 border border-border bg-surface p-4 shadow-xs transition-[border-color,box-shadow,background-color] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", [
+			class: p(["group relative flex min-w-0 flex-col rounded-14 border border-border bg-surface p-5 transition-[background-color,border-color,box-shadow,translate] duration-200 has-[[data-ac-card-link]:focus-visible]:ring-2 has-[[data-ac-card-link]:focus-visible]:ring-ring has-[[data-ac-card-link]:focus-visible]:ring-offset-2 has-[[data-ac-card-link]:focus-visible]:ring-offset-surface motion-reduce:transition-none", [
 				l.centered && "items-center text-center",
-				W() && "cursor-pointer hover:border-border-dark hover:shadow-sm",
-				l.selectable && "has-checked:border-primary has-checked:bg-primary-97 has-checked:shadow-[0_0_0_1px_var(--color-primary)] has-focus-visible:ring-[3px] has-focus-visible:ring-ring",
+				W() && !l.selectable && "cursor-pointer hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0",
+				l.selectable && !l.disabled && "cursor-pointer hover:border-primary/40 hover:bg-accent-hover",
+				l.selectable && "has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-surface",
 				l.disabled && "cursor-not-allowed opacity-60"
 			]]),
 			"data-ac-ds": "",
@@ -95,7 +96,7 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 			default: S(() => [o("div", { class: p(["flex w-full min-w-0 gap-3", l.centered ? "flex-col items-center" : "items-start"]) }, [
 				n.$slots.icon || l.logo || l.icon ? (m(), a("span", {
 					key: 0,
-					class: p(["inline-flex shrink-0 items-center justify-center overflow-hidden rounded-8", [l.centered ? "size-12" : "size-10", l.logo ? "border border-border-light bg-surface-muted p-1.5" : "bg-primary-95 text-primary-30 [&_svg]:size-5"]]),
+					class: p(["inline-flex shrink-0 items-center justify-center overflow-hidden border", [l.centered ? "size-12 rounded-14" : "size-10 rounded-10", l.logo ? "border-border bg-surface-muted p-1.5" : "border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-5"]]),
 					"aria-hidden": l.logo && l.logoAlt ? void 0 : "true"
 				}, [h(n.$slots, "icon", {}, () => [l.logo ? (m(), a("img", {
 					key: 0,
@@ -107,14 +108,14 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 					o("div", { class: p(["flex min-w-0 items-start gap-2", l.centered ? "justify-center" : "justify-between"]) }, [
 						o("div", { class: p(["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", l.centered && "justify-center"]) }, [o("h3", {
 							id: `${v(V)}-title`,
-							class: "min-w-0 text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+							class: "min-w-0 font-heading text-lg leading-6 font-semibold tracking-tight text-heading"
 						}, [H.value ? (m(), r(g(H.value.is), f({ key: 0 }, {
 							...H.value,
 							is: void 0
 						}, {
 							"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
 							"data-ac-card-link": "",
-							class: "outline-none after:absolute after:inset-0 after:rounded-10",
+							class: "outline-none after:absolute after:inset-0 after:rounded-14",
 							onClick: G
 						}), {
 							default: S(() => [s(_(l.title), 1)]),
@@ -124,7 +125,7 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 							type: "button",
 							"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
 							"data-ac-card-link": "",
-							class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-10",
+							class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-14",
 							onClick: G
 						}, _(l.title), 9, A)) : (m(), a(t, { key: 2 }, [s(_(l.title), 1)], 64))], 8, k), l.centered ? i("", !0) : (m(), a(t, { key: 0 }, [
 							h(n.$slots, "title-extra"),
@@ -154,14 +155,14 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 						n.$slots.actions && !l.centered ? (m(), a("div", j, [h(n.$slots, "actions")])) : i("", !0),
 						!l.centered && (H.value || U()) ? (m(), r(g(l.target === "_blank" ? v(T) : v(w)), {
 							key: 1,
-							class: "mt-1 size-4 shrink-0 text-slate-60 transition-[color,transform] duration-150 group-hover:text-heading motion-safe:group-hover:translate-x-0.5",
+							class: "mt-1 size-4 shrink-0 text-muted transition-[color,transform] duration-200 group-hover:text-primary-strong motion-safe:group-hover:translate-x-0.5",
 							"aria-hidden": "true"
 						})) : i("", !0)
 					], 2),
 					l.description ? (m(), a("p", {
 						key: 0,
 						id: `${v(V)}-desc`,
-						class: "mt-1 line-clamp-3 text-base text-muted",
+						class: "mt-1 line-clamp-3 text-base leading-relaxed text-muted",
 						title: l.description
 					}, _(l.description), 9, M)) : i("", !0),
 					n.$slots.default ? (m(), a("div", N, [h(n.$slots, "default")])) : i("", !0),
@@ -192,7 +193,7 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 				], 2),
 				l.selectable ? (m(), a("span", {
 					key: 1,
-					class: p(["relative inline-flex size-4 shrink-0", l.centered ? "absolute! top-3 right-3" : "mt-1"])
+					class: p(["relative inline-flex size-5 shrink-0", l.centered ? "absolute! top-3 right-3" : "mt-0.5"])
 				}, [C(o("input", {
 					id: `${v(V)}-input`,
 					"onUpdate:modelValue": u[0] ||= (e) => L.value = e,
@@ -200,15 +201,15 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 					disabled: l.disabled,
 					"aria-labelledby": `${v(V)}-title`,
 					"aria-describedby": l.description ? `${v(V)}-desc` : void 0,
-					class: "peer size-4 cursor-pointer appearance-none rounded-4 border border-border-dark bg-surface shadow-xs transition-[background-color,border-color] duration-150 outline-none group-hover:border-slate-60 checked:border-primary checked:bg-primary checked:shadow-button disabled:cursor-not-allowed"
+					class: "peer size-5 cursor-pointer appearance-none rounded-4 border border-muted/70 bg-surface transition-colors duration-200 outline-none checked:border-primary checked:bg-primary disabled:cursor-not-allowed disabled:bg-surface-sunken"
 				}, null, 8, F), [[x, L.value]]), c(v(E), {
-					class: "pointer-events-none absolute inset-0 m-auto size-3 scale-75 text-white opacity-0 transition duration-150 peer-checked:scale-100 peer-checked:opacity-100",
+					class: "pointer-events-none absolute inset-0 m-auto size-4 scale-75 text-white opacity-0 transition duration-150 peer-checked:scale-100 peer-checked:opacity-100 motion-reduce:transition-none",
 					"stroke-width": 3,
 					"aria-hidden": "true"
 				})], 2)) : i("", !0)
 			], 2), n.$slots.footer ? (m(), a("div", {
 				key: 0,
-				class: p(["mt-auto flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-1 pt-3 text-xs text-muted", l.centered ? "justify-center" : "justify-between"])
+				class: p(["mt-auto flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-1 pt-4 text-xs text-muted", l.centered ? "justify-center" : "justify-between"])
 			}, [h(n.$slots, "footer")], 2)) : i("", !0)]),
 			_: 3
 		}, 8, ["for", "class"]));

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

@@ -13,10 +13,10 @@ var ye = ["aria-busy"], be = {
 	key: 0,
 	class: "flex h-full flex-col @2xl:flex-row"
 }, xe = {
-	class: "hidden w-60 shrink-0 flex-col gap-1 border-r border-border-light bg-surface-muted p-2 @2xl:flex @4xl:w-72",
+	class: "hidden w-60 shrink-0 flex-col gap-1 border-r border-border bg-surface-muted p-2 @2xl:flex @4xl:w-72",
 	"aria-hidden": "true"
 }, Se = { class: "flex min-w-0 flex-1 flex-col gap-1.5" }, Ce = {
-	class: "border-b border-border-light p-2 @2xl:hidden",
+	class: "border-b border-border p-2 @2xl:hidden",
 	"aria-hidden": "true"
 }, we = {
 	key: 1,
@@ -24,7 +24,7 @@ var ye = ["aria-busy"], be = {
 }, Te = {
 	key: 2,
 	class: "flex h-full flex-col @2xl:flex-row"
-}, Ee = { class: "hidden w-60 shrink-0 flex-col border-r border-border-light bg-surface-muted @2xl:flex @4xl:w-72" }, De = ["aria-label"], Oe = [
+}, Ee = { class: "hidden w-60 shrink-0 flex-col border-r border-border bg-surface-muted @2xl:flex @4xl:w-72" }, De = ["aria-label"], Oe = [
 	"aria-selected",
 	"tabindex",
 	"title",
@@ -43,10 +43,10 @@ var ye = ["aria-busy"], be = {
 }, Pe = {
 	key: 2,
 	class: "min-h-0 flex-1 overflow-auto"
-}, Fe = { class: "border-t border-border-light px-3 py-2 text-xs text-muted" }, Ie = { class: "text-red-40" }, Le = { class: "border-b border-border-light bg-surface-muted p-2 @2xl:hidden" }, Re = ["aria-label"], ze = {
+}, Fe = { class: "border-t border-border px-4 py-2.5 text-xs text-muted" }, Ie = { class: "text-danger-strong" }, Le = { class: "border-b border-border bg-surface-muted p-2 @2xl:hidden" }, Re = ["aria-label"], ze = {
 	key: 0,
-	class: "border-b border-yellow-90 bg-yellow-97 px-3 py-2 text-xs text-yellow-10"
-}, Be = { class: "flex min-h-11 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border-light px-3 py-2" }, Ve = { class: "min-w-0 truncate font-mono text-xs font-medium text-heading" }, He = { class: "inline-flex items-center gap-1 rounded-4 bg-surface-sunken px-1.5 text-sm leading-5 font-medium text-muted" }, Ue = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, We = { class: "flex min-h-0 flex-1 items-center justify-center overflow-auto bg-surface-muted" }, Ge = ["aria-label"], Ke = /*@__PURE__*/ h({
+	class: "border-b border-warning/30 bg-warning/10 px-4 py-2 text-xs text-warning-strong"
+}, Be = { class: "flex min-h-12 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-surface-muted px-4 py-2" }, Ve = { class: "min-w-0 truncate font-mono text-xs font-medium text-heading" }, He = { class: "inline-flex items-center gap-1 rounded-6 border border-border bg-surface px-1.5 text-xs leading-5 font-medium text-muted" }, Ue = { class: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2" }, We = { class: "flex min-h-0 flex-1 items-center justify-center overflow-auto bg-background" }, Ge = ["aria-label"], Ke = /*@__PURE__*/ h({
 	__name: "AcFileEditor",
 	props: /*@__PURE__*/ g({
 		loading: {
@@ -346,7 +346,7 @@ var ye = ["aria-busy"], be = {
 		}), te(() => {
 			clearTimeout(Tt), clearTimeout($);
 		}), g({ focus: At }), (c, g) => (y(), d("div", {
-			class: "@container min-w-0 overflow-hidden rounded-10 border border-border bg-surface shadow-xs",
+			class: "@container min-w-0 overflow-hidden rounded-10 border border-border bg-surface",
 			style: ee({ height: h.height }),
 			"aria-busy": h.loading || void 0,
 			"data-ac-ds": "",
@@ -386,7 +386,7 @@ var ye = ["aria-busy"], be = {
 					key: 0,
 					ref_key: "searchWrap",
 					ref: nt,
-					class: "border-b border-border-light p-2",
+					class: "border-b border-border p-2",
 					onKeydown: bt
 				}, [m(n, {
 					modelValue: k.value,
@@ -399,7 +399,7 @@ var ye = ["aria-busy"], be = {
 					role: "listbox",
 					"aria-label": h.label,
 					"aria-controls": tt,
-					class: "ac-scrollbar flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-1.5"
+					class: "ac-scrollbar flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2"
 				}, [(y(!0), d(s, null, ne(z.value, (e, t) => (y(), d("li", {
 					key: e.name,
 					ref_for: !0,
@@ -408,18 +408,18 @@ var ye = ["aria-busy"], be = {
 					"aria-selected": e.name === O.value,
 					tabindex: e.name === B.value ? 0 : -1,
 					title: e.name,
-					class: v(["flex min-h-9 shrink-0 cursor-pointer items-center gap-2.5 rounded-6 px-2.5 py-1.5 transition-[background-color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring", e.name === O.value ? "bg-surface text-heading shadow-xs ring-1 ring-border" : "text-body hover:bg-surface-sunken"]),
+					class: v(["group flex min-h-9 shrink-0 cursor-pointer items-center gap-2.5 rounded-10 border px-3 py-1.5 transition-[color,background-color,border-color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", e.name === O.value ? "border-primary/35 bg-primary/10 text-heading shadow-xs" : "border-transparent text-heading/80 hover:border-border hover:bg-accent-hover hover:text-heading"]),
 					onClick: (t) => Z(e.name, !0),
 					onKeydown: (e) => yt(e, t)
 				}, [
 					(y(), l(ie(ft(e)), {
-						class: v(["size-4 shrink-0", e.name === O.value ? "text-primary" : "text-muted"]),
+						class: v(["size-4 shrink-0", e.name === O.value ? "text-primary" : "text-muted group-hover:text-heading"]),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])),
 					f("span", ke, [f("span", Ae, x(e.name), 1), Y(e) ? (y(), d("span", je, x(Y(e)), 1)) : u("", !0)]),
 					J(e).length ? (y(), d("span", {
 						key: 0,
-						class: v(["inline-flex shrink-0 items-center gap-1 text-xs font-medium tabular-nums", dt(e) ? "text-red-40" : "text-yellow-30"])
+						class: v(["inline-flex shrink-0 items-center gap-1 text-xs font-medium tabular-nums", dt(e) ? "text-danger-strong" : "text-warning-strong"])
 					}, [(y(), l(ie(dt(e) ? S(se) : S(_e)), {
 						class: "size-3.5",
 						"aria-hidden": "true"
@@ -515,24 +515,24 @@ var ye = ["aria-busy"], be = {
 					h.downloadable && !U.value ? (y(), d("button", {
 						key: 1,
 						type: "button",
-						class: "inline-flex size-7 shrink-0 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",
+						class: "inline-flex size-8 shrink-0 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-label": `Download ${V.value.file.name}`,
 						title: "Download",
 						"data-testid": "ac-file-editor-download",
 						onClick: Ct
 					}, [m(S(ce), {
-						class: "size-3.5",
+						class: "size-4",
 						"aria-hidden": "true"
 					})], 8, Ge)) : u("", !0),
 					V.value.file.secret ? (y(), d("button", {
 						key: 2,
 						type: "button",
-						class: "inline-flex size-7 shrink-0 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",
+						class: "inline-flex size-8 shrink-0 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-label": "Hide value",
 						title: "Hide value",
 						onClick: g[3] ||= (e) => wt(!1)
 					}, [m(S(ue), {
-						class: "size-3.5",
+						class: "size-4",
 						"aria-hidden": "true"
 					})])) : u("", !0)
 				]),

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

@@ -15,7 +15,7 @@ export interface Props {
     multiple?: boolean;
     /** Largest allowed file in bytes, e.g. `1024 * 1024` for 1 MB. `0` means no limit. */
     maxSize?: number;
-    /** Single-line field with a "Choose file" button instead of the drop zone. For tight forms. */
+    /** Single-line 40px field with a "Choose file" button instead of the drop zone. For tight forms. */
     small?: boolean;
     /** Line under the prompt. Defaults to the allowed types and size, e.g. ".yaml, .yml · up to 1 MB". */
     description?: string;
@@ -27,7 +27,7 @@ export interface Props {
     disabled?: boolean;
     /** Error text under the field, e.g. from server-side validation. Type and size errors are shown automatically. */
     errorMsg?: string;
-    /** Helper text under the field (hidden while there's an error). */
+    /** Help text between the label and the field. */
     hint?: string;
 }
 type __VLS_Props = Props;

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

@@ -1,31 +1,31 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as ee, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useId as h, useModel as g, withModifiers as _ } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as ee, toDisplayString as p, unref as m, useId as h, useModel as g, withModifiers as _ } from "vue";
 import { CircleAlert as v, FileText as y, Upload as b, X as x } from "@lucide/vue";
 //#region src/lib/components/AcFileUpload.vue?vue&type=script&setup=true&lang.ts
-var S = ["id"], te = {
+var te = ["id"], ne = {
 	key: 0,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, ne = [
+}, re = ["id"], S = [
 	"id",
 	"name",
 	"accept",
 	"multiple",
 	"disabled"
-], re = [
+], ie = [
 	"disabled",
 	"aria-describedby",
 	"aria-label"
-], ie = ["title"], ae = ["aria-label"], C = { class: "pointer-events-none text-base text-heading" }, w = { class: "font-medium" }, oe = {
+], ae = ["title"], C = ["aria-label"], oe = { class: "pointer-events-none text-base text-heading" }, w = { class: "font-medium" }, T = {
 	key: 0,
 	class: "text-muted"
-}, T = [
+}, E = [
 	"disabled",
 	"aria-describedby",
 	"aria-label"
-], E = {
+], D = {
 	key: 0,
 	class: "pointer-events-none -mt-1 text-xs text-muted"
-}, D = ["id"], O = ["id"], se = ["aria-label"], ce = ["title"], le = { class: "shrink-0 text-xs text-muted tabular-nums" }, ue = [
+}, O = ["id"], se = ["aria-label"], ce = ["title"], le = { class: "shrink-0 text-xs text-muted tabular-nums" }, ue = [
 	"aria-label",
 	"disabled",
 	"onClick"
@@ -68,10 +68,10 @@ var S = ["id"], te = {
 		"reject"
 	], ["update:modelValue"]),
 	setup(s, { expose: c, emit: k }) {
-		let A = s, j = g(s, "modelValue"), M = k, N = h(), P = d(null), F = d(null), I = d(null), L = d(0), R = d([]), z = d(""), B = t(() => L.value > 0), V = t(() => A.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean)), fe = t(() => {
+		let A = s, j = g(s, "modelValue"), M = k, N = h(), P = f(null), F = f(null), I = f(null), L = f(0), R = f([]), z = f(""), B = t(() => L.value > 0), V = t(() => A.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean)), fe = t(() => {
 			let e = [];
 			return V.value.length && e.push(V.value.join(", ")), A.maxSize && e.push(`up to ${q(A.maxSize)}`), e.join(" · ");
-		}), H = t(() => A.description || fe.value), U = t(() => R.value.map((e) => e.message).join(" ")), W = t(() => A.errorMsg || U.value), G = t(() => W.value || A.hint ? `${N}-msg` : void 0), K = t(() => j.value.length ? j.value.length === 1 ? j.value[0].name : `${j.value.length} files` : "");
+		}), H = t(() => A.description || fe.value), U = t(() => R.value.map((e) => e.message).join(" ")), W = t(() => A.errorMsg || U.value), G = t(() => [A.hint && `${N}-hint`, W.value && `${N}-msg`].filter(Boolean).join(" ") || void 0), K = t(() => j.value.length ? j.value.length === 1 ? j.value[0].name : `${j.value.length} files` : "");
 		function q(e) {
 			if (e < 1024) return `${e} B`;
 			let t = [
@@ -131,7 +131,7 @@ var S = ["id"], te = {
 		async function ge(e) {
 			let t = j.value[e];
 			if (!t || A.disabled) return;
-			j.value = j.value.filter((t, n) => n !== e), R.value = [], M("remove", t), z.value = `${t.name} removed.`, await ee();
+			j.value = j.value.filter((t, n) => n !== e), R.value = [], M("remove", t), z.value = `${t.name} removed.`, await l();
 			let n = I.value?.querySelectorAll("button");
 			(n?.[Math.min(e, n.length - 1)] ?? F.value)?.focus();
 		}
@@ -139,16 +139,21 @@ var S = ["id"], te = {
 			let e = [...j.value];
 			j.value = [], R.value = [], e.forEach((e) => M("remove", e)), z.value = "File removed.", F.value?.focus();
 		}
-		return c({ open: Y }), (t, c) => (u(), r("div", {
-			class: l(["w-full", s.disabled && "opacity-60"]),
+		return c({ open: Y }), (t, c) => (d(), r("div", {
+			class: u(["w-full", s.disabled && "opacity-50"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-file-upload"
 		}, [
-			s.label ? (u(), r("p", {
+			s.label ? (d(), r("p", {
 				key: 0,
 				id: `${m(N)}-label`,
-				class: "mb-1.5 text-xs font-medium text-label"
-			}, [a(p(s.label), 1), s.required ? (u(), r("span", te, " *")) : n("", !0)], 8, S)) : n("", !0),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [i("span", null, p(s.label), 1), s.required ? (d(), r("span", ne, "*")) : n("", !0)], 8, te)) : n("", !0),
+			s.hint ? (d(), r("p", {
+				key: 1,
+				id: `${m(N)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, p(s.hint), 9, re)) : n("", !0),
 			i("input", {
 				id: `${m(N)}-input`,
 				ref_key: "input",
@@ -162,10 +167,10 @@ var S = ["id"], te = {
 				multiple: s.multiple,
 				disabled: s.disabled,
 				onChange: he
-			}, null, 40, ne),
-			s.small ? (u(), r("div", {
-				key: 1,
-				class: l(["flex h-9 w-full items-center rounded-6 border bg-surface shadow-xs transition-[border-color,box-shadow] duration-150", [W.value ? "border-red-60" : B.value ? "border-primary shadow-[0_0_0_3px_var(--color-ring)]" : "border-border hover:border-border-dark", s.disabled && "bg-surface-muted"]]),
+			}, null, 40, S),
+			s.small ? (d(), r("div", {
+				key: 2,
+				class: u(["flex h-10 w-full items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [s.disabled ? "cursor-not-allowed bg-surface-muted" : "bg-background", W.value ? "border-danger/60" : B.value ? "focus-ring" : ["border-border focus-within:focus-ring", !s.disabled && "hover:border-accent-active"]]]),
 				onDragenter: X,
 				onDragover: Z,
 				onDragleave: Q,
@@ -175,32 +180,32 @@ var S = ["id"], te = {
 					ref_key: "browseButton",
 					ref: F,
 					type: "button",
-					class: "ml-1 inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-4 border border-border bg-surface-muted px-2.5 text-xs font-medium text-heading transition hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed",
+					class: "ml-1 inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-8 border border-border bg-surface px-3 text-base font-medium text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface",
 					disabled: s.disabled,
 					"aria-describedby": G.value,
 					"aria-label": s.label ? `${s.multiple ? "Choose files" : "Choose file"} for ${s.label}` : void 0,
 					onClick: Y
 				}, [o(m(b), {
-					class: "size-3.5",
+					class: "size-4 text-muted",
 					"aria-hidden": "true"
-				}), a(" " + p(s.multiple ? "Choose files" : "Choose file"), 1)], 8, re),
+				}), a(" " + p(s.multiple ? "Choose files" : "Choose file"), 1)], 8, ie),
 				i("span", {
-					class: l(["min-w-0 flex-1 truncate px-2.5 text-base", K.value ? "text-heading" : "text-muted"]),
+					class: u(["min-w-0 flex-1 truncate px-3 text-base", K.value ? "text-heading" : "text-muted/80"]),
 					title: j.value.map((e) => e.name).join(", ")
-				}, p(K.value || (s.multiple ? "No files chosen" : "No file chosen")), 11, ie),
-				j.value.length && !s.disabled ? (u(), r("button", {
+				}, p(K.value || (s.multiple ? "No files chosen" : "No file chosen")), 11, ae),
+				j.value.length && !s.disabled ? (d(), r("button", {
 					key: 0,
 					type: "button",
-					class: "mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					class: "mr-1.5 inline-flex size-7 shrink-0 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-label": j.value.length === 1 ? `Remove ${j.value[0].name}` : "Remove all files",
 					onClick: _e
 				}, [o(m(x), {
-					class: "size-3.5",
+					class: "size-4",
 					"aria-hidden": "true"
-				})], 8, ae)) : n("", !0)
-			], 34)) : (u(), r("div", {
-				key: 2,
-				class: l(["flex flex-col items-center justify-center gap-3 rounded-10 border border-dashed px-6 py-7 text-center transition-colors duration-150", [s.disabled ? "cursor-not-allowed border-border bg-surface-muted" : "cursor-pointer", !s.disabled && (B.value ? "border-primary bg-primary-97" : W.value ? "border-red-60 bg-surface hover:bg-surface-muted" : "border-border-dark bg-surface hover:bg-surface-muted")]]),
+				})], 8, C)) : n("", !0)
+			], 34)) : (d(), r("div", {
+				key: 3,
+				class: u(["flex flex-col items-center justify-center gap-3 rounded-10 border-2 border-dashed px-6 py-7 text-center transition-colors duration-200", [s.disabled ? "cursor-not-allowed border-border bg-surface-muted" : "cursor-pointer", !s.disabled && (B.value ? "border-primary bg-primary/5" : W.value ? "border-danger/50 bg-danger/5" : "border-border bg-surface hover:border-primary/50 hover:bg-primary/3")]]),
 				onClick: _(Y, ["self"]),
 				onDragenter: X,
 				onDragover: Z,
@@ -208,43 +213,40 @@ var S = ["id"], te = {
 				onDrop: $
 			}, [
 				i("span", {
-					class: l(["pointer-events-none inline-flex size-10 items-center justify-center rounded-10 border shadow-xs transition-colors", B.value ? "border-primary-80 bg-surface text-primary" : "border-border bg-surface text-muted"]),
+					class: u(["pointer-events-none inline-flex size-10 items-center justify-center rounded-10 transition-colors duration-200", B.value ? "bg-primary/10 text-primary-strong" : "bg-surface-sunken text-muted"]),
 					"aria-hidden": "true"
-				}, [o(m(b), { class: "size-4.5" })], 2),
-				i("p", C, [i("span", w, p(B.value ? "Drop to upload" : s.multiple ? "Drag and drop files here" : "Drag and drop a file here"), 1), B.value ? n("", !0) : (u(), r("span", oe, " or"))]),
+				}, [o(m(b), { class: "size-5" })], 2),
+				i("p", oe, [i("span", w, p(B.value ? "Drop to upload" : s.multiple ? "Drag and drop files here" : "Drag and drop a file here"), 1), B.value ? n("", !0) : (d(), r("span", T, " or"))]),
 				i("button", {
 					ref_key: "browseButton",
 					ref: F,
 					type: "button",
-					class: "inline-flex h-8 cursor-pointer items-center gap-2 rounded-6 border border-border bg-surface px-3 text-base font-medium text-heading shadow-xs transition hover:border-border-dark hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed",
+					class: "inline-flex h-8 cursor-pointer items-center gap-2 rounded-10 border border-border bg-surface px-3 text-base font-medium text-heading transition-[color,background-color,border-color,box-shadow,transform] duration-200 hover:bg-surface-sunken/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none active:translate-y-px disabled:cursor-not-allowed disabled:hover:bg-surface",
 					disabled: s.disabled,
 					"aria-describedby": G.value,
 					"aria-label": s.label ? `Browse files for ${s.label}` : void 0,
 					onClick: Y
-				}, " Browse files ", 8, T),
-				H.value ? (u(), r("p", E, p(H.value), 1)) : n("", !0)
+				}, " Browse files ", 8, E),
+				H.value ? (d(), r("p", D, p(H.value), 1)) : n("", !0)
 			], 34)),
-			W.value ? (u(), r("p", {
-				key: 3,
+			W.value ? (d(), r("p", {
+				key: 4,
 				id: `${m(N)}-msg`,
-				class: "mt-1.5 flex items-start gap-1 text-xs text-red-30"
+				class: "mt-1.5 flex items-start gap-1.5 text-base text-danger-strong",
+				role: "alert"
 			}, [o(m(v), {
-				class: "mt-px size-3.5 shrink-0",
+				class: "mt-0.5 size-4 shrink-0",
 				"aria-hidden": "true"
-			}), a(" " + p(W.value), 1)], 8, D)) : s.hint ? (u(), r("p", {
-				key: 4,
-				id: `${m(N)}-msg`,
-				class: "mt-1.5 text-xs text-muted"
-			}, p(s.hint), 9, O)) : n("", !0),
-			!s.small && j.value.length ? (u(), r("ul", {
+			}), a(" " + p(W.value), 1)], 8, O)) : n("", !0),
+			!s.small && j.value.length ? (d(), r("ul", {
 				key: 5,
 				ref_key: "list",
 				ref: I,
-				class: "mt-3 divide-y divide-border-light overflow-hidden rounded-8 border border-border bg-surface",
+				class: "mt-3 divide-y divide-border overflow-hidden rounded-10 border border-border bg-surface",
 				"aria-label": s.label ? `${s.label} files` : "Chosen files"
-			}, [(u(!0), r(e, null, f(j.value, (e, t) => (u(), r("li", {
+			}, [(d(!0), r(e, null, ee(j.value, (e, t) => (d(), r("li", {
 				key: `${e.name}-${e.size}-${e.lastModified}`,
-				class: "flex items-center gap-3 py-2 pr-2 pl-3"
+				class: "flex items-center gap-3 py-2 pr-2 pl-4"
 			}, [
 				o(m(y), {
 					class: "size-4 shrink-0 text-muted",
@@ -257,12 +259,12 @@ var S = ["id"], te = {
 				i("span", le, p(q(e.size)), 1),
 				i("button", {
 					type: "button",
-					class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 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",
+					class: "inline-flex size-7 shrink-0 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-inset focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed",
 					"aria-label": `Remove ${e.name}`,
 					disabled: s.disabled,
 					onClick: (e) => ge(t)
 				}, [o(m(x), {
-					class: "size-3.5",
+					class: "size-4",
 					"aria-hidden": "true"
 				})], 8, ue)
 			]))), 128))], 8, se)) : n("", !0),

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

@@ -4,7 +4,7 @@ import { Fragment as n, createElementBlock as r, createElementVNode as i, define
 var d = {
 	role: "radiogroup",
 	"aria-label": "Text size",
-	class: "inline-flex items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5",
+	class: "inline-flex items-center gap-1 rounded-10 bg-surface-sunken p-1",
 	"data-ac-ds": "",
 	"data-testid": "ac-font-scale"
 }, f = [
@@ -52,7 +52,7 @@ var d = {
 			"aria-checked": u(y) === e.value,
 			"aria-label": a.display === "icons" ? `${e.label} text` : void 0,
 			title: a.display === "icons" ? `${e.label} text` : void 0,
-			class: o(["inline-flex h-6.5 cursor-pointer items-center justify-center gap-1.5 rounded-6 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [a.display === "icons" ? "w-7" : "px-2.5", u(y) === e.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted hover:text-heading"]]),
+			class: o(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [a.display === "icons" ? "w-7" : "px-3", u(y) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
 			onClick: (t) => x(e.value)
 		}, [a.display === "icons" ? (s(), r("span", {
 			key: 0,

package/dist/lib/components/AcFooter.js

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