@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,66 @@
+import e from "./AcButton.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { CircleAlert as g, RotateCw as _ } from "@lucide/vue";
+//#region src/lib/components/AcErrorState.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	class: "mb-4 inline-flex size-12 items-center justify-center rounded-16 bg-danger/10 text-danger-strong",
+	"aria-hidden": "true"
+}, y = {
+	key: 0,
+	class: "mt-1.5 max-w-md text-base break-words text-muted"
+}, b = {
+	key: 1,
+	class: "mt-5 flex flex-wrap items-center justify-center gap-3"
+}, x = /*@__PURE__*/ c({
+	__name: "AcErrorState",
+	props: {
+		title: { default: "Something went wrong" },
+		error: { default: void 0 },
+		description: { default: "" },
+		retrying: {
+			type: Boolean,
+			default: !1
+		},
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		retryText: { default: "Try again" },
+		hideRetry: {
+			type: Boolean,
+			default: !1
+		},
+		titleTag: { default: "h2" }
+	},
+	emits: ["retry"],
+	setup(c, { emit: x }) {
+		let S = c, C = x, w = t(() => S.description ? S.description : typeof S.error == "string" ? S.error : S.error instanceof Error ? S.error.message : "");
+		return (t, x) => (u(), i("div", {
+			role: "alert",
+			class: l(["flex flex-col items-center justify-center rounded-16 border border-danger/25 bg-danger/5 px-6 text-center", c.compact ? "py-8" : "py-14"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-error-state"
+		}, [
+			a("div", v, [s(m(g), { class: "size-6" })]),
+			(u(), n(f(c.titleTag), { class: "font-heading text-lg font-semibold text-heading" }, {
+				default: h(() => [o(p(c.title), 1)]),
+				_: 1
+			})),
+			w.value ? (u(), i("p", y, p(w.value), 1)) : r("", !0),
+			d(t.$slots, "default"),
+			!c.hideRetry || t.$slots.actions ? (u(), i("div", b, [c.hideRetry ? r("", !0) : (u(), n(e, {
+				key: 0,
+				color: "white",
+				loading: c.retrying,
+				"data-testid": "ac-error-state-retry",
+				onClick: x[0] ||= (e) => C("retry")
+			}, {
+				icon: h(() => [s(m(_))]),
+				default: h(() => [o(" " + p(c.retryText), 1)]),
+				_: 1
+			}, 8, ["loading"])), d(t.$slots, "actions")])) : r("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { x as default };

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

@@ -3,8 +3,12 @@ import type { Tone } from "./types";
 export interface Props {
     /** Name of the feature, product or option. Also the card's accessible name. */
     title: string;
+    /** A short muted line under the title, e.g. "NoSQL database". With an icon, the description then runs the full width of the card below them. */
+    subtitle?: string;
     /** One or two sentences on what it does. Clamped to three lines. Old `card-sub-title` slot. */
     description?: string;
+    /** Lights the border and lifts a soft shadow on hover, as cloud-ui's engine and "Learn more" cards do, for a card that holds its own links but isn't a link itself. */
+    hoverable?: boolean;
     /** A Lucide icon, shown in a tinted tile. Or use the `icon` slot. */
     icon?: Component;
     /** Logo image URL, e.g. a product or cloud-provider logo. Takes the place of `icon`. */
@@ -67,6 +71,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     href: string;
     to: string | Record<string, unknown>;
     status: string;
+    subtitle: string;
+    hoverable: boolean;
     logo: string;
     logoAlt: string;
     statusColor: Tone | "default";

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

@@ -5,22 +5,30 @@ import { ArrowRight as w, ArrowUpRight as T, Check as E } from "@lucide/vue";
 var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"], j = {
 	key: 0,
 	class: "relative z-10 -my-0.5 flex shrink-0 items-center gap-2"
-}, M = ["id", "title"], N = {
+}, M = ["id"], N = ["id", "title"], P = {
 	key: 1,
 	class: "mt-2 text-base text-body"
-}, P = {
+}, F = {
 	key: 2,
 	class: "mt-2 flex flex-wrap justify-center gap-2"
-}, F = [
+}, I = [
 	"id",
 	"disabled",
 	"aria-labelledby",
 	"aria-describedby"
-], I = /*@__PURE__*/ l({
+], L = ["id", "title"], R = {
+	key: 1,
+	class: "mt-2 text-base text-body"
+}, z = /*@__PURE__*/ l({
 	__name: "AcFeatureCard",
 	props: /*@__PURE__*/ d({
 		title: {},
+		subtitle: { default: "" },
 		description: { default: "" },
+		hoverable: {
+			type: Boolean,
+			default: !1
+		},
 		icon: { default: void 0 },
 		logo: { default: "" },
 		logoAlt: { default: "" },
@@ -58,76 +66,121 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 	}),
 	emits: /*@__PURE__*/ d(["click"], ["update:checked"]),
 	setup(l, { emit: d }) {
-		let I = l, L = b(l, "checked"), R = d, z = u(), B = z?.appContext.components.RouterLink, V = y(), H = n(() => {
-			if (I.disabled || I.selectable) return null;
-			if (I.to !== void 0 && B) return {
-				is: B,
-				to: I.to
+		let z = l, B = b(l, "checked"), V = d, H = u(), U = H?.appContext.components.RouterLink, W = y(), G = n(() => !!z.subtitle && !z.centered), K = n(() => [z.subtitle && `${W}-sub`, z.description && `${W}-desc`].filter(Boolean).join(" ") || void 0), q = n(() => {
+			if (z.disabled || z.selectable) return null;
+			if (z.to !== void 0 && U) return {
+				is: U,
+				to: z.to
 			};
-			let e = I.href ?? (typeof I.to == "string" ? I.to : void 0);
+			let e = z.href ?? (typeof z.to == "string" ? z.to : void 0);
 			return e ? {
 				is: "a",
 				href: e,
-				target: I.target,
-				rel: I.target === "_blank" ? "noopener noreferrer" : void 0
+				target: z.target,
+				rel: z.target === "_blank" ? "noopener noreferrer" : void 0
 			} : null;
 		});
-		function U() {
-			return !H.value && !I.disabled && !I.selectable && !!z?.vnode.props?.onClick;
+		function J() {
+			return !q.value && !z.disabled && !z.selectable && !!H?.vnode.props?.onClick;
 		}
-		function W() {
-			return !!H.value || U() || I.selectable && !I.disabled;
+		function Y() {
+			return !!q.value || J() || z.selectable && !z.disabled;
 		}
-		function G(e) {
-			R("click", e);
+		function X(e) {
+			V("click", e);
 		}
 		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", [
+			for: l.selectable ? `${v(W)}-input` : void 0,
+			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",
+				Y() && !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.hoverable && !Y() && !l.selectable && "hover:border-primary/45 hover:shadow-sm",
 				l.disabled && "cursor-not-allowed opacity-60"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-feature-card"
 		}, {
-			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"]]),
-					"aria-hidden": l.logo && l.logoAlt ? void 0 : "true"
-				}, [h(n.$slots, "icon", {}, () => [l.logo ? (m(), a("img", {
-					key: 0,
-					src: l.logo,
-					alt: l.logoAlt,
-					class: "size-full object-contain"
-				}, null, 8, O)) : (m(), r(g(l.icon), { key: 1 }))])], 10, D)) : i("", !0),
-				o("div", { class: p(["min-w-0 flex-1", l.centered && "w-full"]) }, [
-					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"
-						}, [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",
-							onClick: G
-						}), {
-							default: S(() => [s(_(l.title), 1)]),
-							_: 1
-						}, 16, ["aria-describedby"])) : U() ? (m(), a("button", {
-							key: 1,
-							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",
-							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"),
+			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 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,
+						src: l.logo,
+						alt: l.logoAlt,
+						class: "size-full object-contain"
+					}, null, 8, O)) : (m(), r(g(l.icon), { key: 1 }))])], 10, D)) : i("", !0),
+					o("div", { class: p(["min-w-0 flex-1", l.centered && "w-full"]) }, [
+						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(W)}-title`,
+								class: "min-w-0 font-heading text-lg leading-6 font-semibold tracking-tight text-heading"
+							}, [q.value ? (m(), r(g(q.value.is), f({ key: 0 }, {
+								...q.value,
+								is: void 0
+							}, {
+								"aria-describedby": K.value,
+								"data-ac-card-link": "",
+								class: "outline-none after:absolute after:inset-0 after:rounded-14",
+								onClick: X
+							}), {
+								default: S(() => [s(_(l.title), 1)]),
+								_: 1
+							}, 16, ["aria-describedby"])) : J() ? (m(), a("button", {
+								key: 1,
+								type: "button",
+								"aria-describedby": K.value,
+								"data-ac-card-link": "",
+								class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-14",
+								onClick: X
+							}, _(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"),
+								l.required ? (m(), r(e, {
+									key: 0,
+									label: "Required",
+									color: "warning",
+									variant: "light",
+									rounded: ""
+								})) : i("", !0),
+								l.recommended ? (m(), r(e, {
+									key: 1,
+									label: "Recommended",
+									color: "info",
+									variant: "light",
+									rounded: ""
+								})) : i("", !0),
+								h(n.$slots, "status", {}, () => [l.status ? (m(), r(e, {
+									key: 0,
+									label: l.status,
+									color: l.statusColor,
+									variant: "light",
+									rounded: "",
+									dot: ""
+								}, null, 8, ["label", "color"])) : i("", !0)])
+							], 64))], 2),
+							n.$slots.actions && !l.centered ? (m(), a("div", j, [h(n.$slots, "actions")])) : i("", !0),
+							!l.centered && (q.value || J()) ? (m(), r(g(l.target === "_blank" ? v(T) : v(w)), {
+								key: 1,
+								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.subtitle ? (m(), a("p", {
+							key: 0,
+							id: `${v(W)}-sub`,
+							class: "mt-0.5 text-xs text-muted"
+						}, _(l.subtitle), 9, M)) : i("", !0),
+						G.value ? i("", !0) : (m(), a(t, { key: 1 }, [l.description ? (m(), a("p", {
+							key: 0,
+							id: `${v(W)}-desc`,
+							class: "mt-1 line-clamp-3 text-base leading-relaxed text-muted",
+							title: l.description
+						}, _(l.description), 9, N)) : i("", !0), n.$slots.default ? (m(), a("div", P, [h(n.$slots, "default")])) : i("", !0)], 64)),
+						l.centered && (l.required || l.recommended || l.status || n.$slots.status) ? (m(), a("div", F, [
 							l.required ? (m(), r(e, {
 								key: 0,
 								label: "Required",
@@ -150,69 +203,39 @@ var D = ["aria-hidden"], O = ["src", "alt"], k = ["id"], A = ["aria-describedby"
 								rounded: "",
 								dot: ""
 							}, null, 8, ["label", "color"])) : i("", !0)])
-						], 64))], 2),
-						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",
-							"aria-hidden": "true"
-						})) : i("", !0)
+						])) : i("", !0)
 					], 2),
-					l.description ? (m(), a("p", {
-						key: 0,
-						id: `${v(V)}-desc`,
-						class: "mt-1 line-clamp-3 text-base text-muted",
-						title: l.description
-					}, _(l.description), 9, M)) : i("", !0),
-					n.$slots.default ? (m(), a("div", N, [h(n.$slots, "default")])) : i("", !0),
-					l.centered && (l.required || l.recommended || l.status || n.$slots.status) ? (m(), a("div", P, [
-						l.required ? (m(), r(e, {
-							key: 0,
-							label: "Required",
-							color: "warning",
-							variant: "light",
-							rounded: ""
-						})) : i("", !0),
-						l.recommended ? (m(), r(e, {
-							key: 1,
-							label: "Recommended",
-							color: "info",
-							variant: "light",
-							rounded: ""
-						})) : i("", !0),
-						h(n.$slots, "status", {}, () => [l.status ? (m(), r(e, {
-							key: 0,
-							label: l.status,
-							color: l.statusColor,
-							variant: "light",
-							rounded: "",
-							dot: ""
-						}, null, 8, ["label", "color"])) : i("", !0)])
-					])) : i("", !0)
+					l.selectable ? (m(), a("span", {
+						key: 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(W)}-input`,
+						"onUpdate:modelValue": u[0] ||= (e) => B.value = e,
+						type: "checkbox",
+						disabled: l.disabled,
+						"aria-labelledby": `${v(W)}-title`,
+						"aria-describedby": K.value,
+						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, I), [[x, B.value]]), c(v(E), {
+						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),
-				l.selectable ? (m(), a("span", {
+				G.value ? (m(), a(t, { key: 0 }, [l.description ? (m(), a("p", {
+					key: 0,
+					id: `${v(W)}-desc`,
+					class: "mt-3 line-clamp-3 text-base leading-relaxed text-muted",
+					title: l.description
+				}, _(l.description), 9, L)) : i("", !0), n.$slots.default ? (m(), a("div", R, [h(n.$slots, "default")])) : i("", !0)], 64)) : i("", !0),
+				n.$slots.footer ? (m(), a("div", {
 					key: 1,
-					class: p(["relative inline-flex size-4 shrink-0", l.centered ? "absolute! top-3 right-3" : "mt-1"])
-				}, [C(o("input", {
-					id: `${v(V)}-input`,
-					"onUpdate:modelValue": u[0] ||= (e) => L.value = e,
-					type: "checkbox",
-					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"
-				}, 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",
-					"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"])
-			}, [h(n.$slots, "footer")], 2)) : i("", !0)]),
+					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"]));
 	}
 });
 //#endregion
-export { I as default };
+export { z as default };

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;