@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,24 +1,28 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
-import { ArrowLeft as f } from "@lucide/vue";
+import { Fragment as e, 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, normalizeStyle as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h } from "vue";
+import { ArrowLeft as g, BookOpen as _, SquareArrowOutUpRight as v } from "@lucide/vue";
 //#region src/lib/components/AcHeader.vue?vue&type=script&setup=true&lang.ts
-var p = { class: "flex min-w-0 items-center gap-3.5" }, m = {
-	key: 1,
-	class: "inline-flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-10 border border-border-light bg-surface p-2 text-label shadow-xs ring-1 ring-black/[0.02] [&_img]:size-full [&_img]:object-contain [&_svg]:size-5",
-	"aria-hidden": "true"
-}, h = { class: "min-w-0" }, g = {
+var y = {
 	key: 0,
-	class: "mb-1 text-xs text-muted"
-}, _ = { class: "flex min-w-0 items-center gap-2.5" }, v = {
+	class: "mb-4"
+}, b = { class: "min-w-0" }, x = {
 	key: 0,
-	class: "mt-px truncate text-sm leading-5 text-muted"
-}, y = {
+	class: "mb-2"
+}, S = { class: "flex min-w-0 flex-wrap items-center gap-2.5" }, C = {
 	key: 0,
-	class: "flex flex-wrap items-center gap-2"
-}, b = /*@__PURE__*/ a({
+	class: "inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium whitespace-nowrap text-primary-strong",
+	"data-testid": "ac-header-count"
+}, w = {
+	key: 1,
+	class: "mt-2"
+}, T = ["href"], E = /*@__PURE__*/ c({
 	__name: "AcHeader",
 	props: {
 		title: { default: "" },
 		subtitle: { default: "" },
+		variant: { default: "bar" },
+		icon: { default: void 0 },
+		countLabel: { default: "" },
+		docsHref: { default: "" },
 		backButton: {
 			type: Boolean,
 			default: !1
@@ -31,30 +35,80 @@ var p = { class: "flex min-w-0 items-center gap-3.5" }, m = {
 		size: { default: "normal" }
 	},
 	emits: ["back"],
-	setup(a, { emit: b }) {
-		let x = a, S = e(() => x.size === "compact"), C = b;
-		return (e, b) => (c(), n("header", {
-			class: o(["z-20 border-b border-border-light bg-surface/85 shadow-[0_1px_2px_0_rgb(15_23_42/0.03)] backdrop-blur-md backdrop-saturate-150", a.sticky && "sticky"]),
-			style: s(a.sticky ? { top: a.top } : void 0),
+	setup(c, { emit: E }) {
+		let D = c, O = E, k = t(() => D.size === "compact"), A = t(() => D.variant === "hero"), j = t(() => D.variant === "bar" ? ["z-20 border-b border-border/80 bg-surface/90 backdrop-blur-sm", D.sticky && "sticky"] : D.sticky && "sticky z-20 bg-background/90 backdrop-blur-sm"), M = t(() => D.variant === "bar" ? ["flex-wrap items-center gap-x-6 gap-y-4", k.value ? "px-4 py-3 sm:px-6" : "px-4 py-5 sm:px-6"] : ["flex-col gap-4 sm:flex-row sm:items-center", D.variant === "plain" && k.value && "py-2"]), N = t(() => A.value ? "size-12 rounded-14 border border-primary/25 bg-surface text-primary-strong shadow-sm ring-4 ring-primary/5 [&_svg]:size-6" : ["bg-primary text-white has-[img]:border has-[img]:border-border has-[img]:bg-surface has-[img]:p-2 [&_img]:size-full [&_img]:object-contain", k.value ? "size-9 rounded-10 [&_svg]:size-5" : "size-11 rounded-14 [&_svg]:size-6"]), P = t(() => A.value ? "text-3xl text-balance sm:text-[28px]" : ["truncate", k.value ? "text-lg" : "text-2xl md:text-3xl"]);
+		return (t, E) => (d(), i("header", {
+			class: l(j.value),
+			style: u(c.sticky ? { top: c.top } : void 0),
 			"data-ac-ds": "",
 			"data-testid": "ac-header"
-		}, [r("div", { class: o(["flex flex-wrap items-center justify-between gap-x-6 gap-y-3", S.value ? "px-5 py-2.5" : "px-6 py-3.5"]) }, [r("div", p, [
-			a.backButton ? (c(), n("button", {
+		}, [A.value && t.$slots.breadcrumb ? (d(), i("div", y, [f(t.$slots, "breadcrumb")])) : r("", !0), a("div", { class: l(A.value && "relative isolate overflow-hidden rounded-16 border border-border bg-surface px-5 py-5 shadow-xs sm:px-7 sm:py-6") }, [A.value ? (d(), i(e, { key: 0 }, [
+			E[1] ||= a("div", {
+				class: "absolute inset-0 -z-10 bg-linear-to-br from-primary/10 via-primary/3 to-transparent",
+				"aria-hidden": "true"
+			}, null, -1),
+			E[2] ||= a("div", {
+				class: "absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,var(--color-border)_1px,transparent_0)] bg-size-[18px_18px] [mask-image:linear-gradient(to_left,black,transparent_60%)]",
+				"aria-hidden": "true"
+			}, null, -1),
+			c.icon ? (d(), n(p(c.icon), {
+				key: 0,
+				class: "absolute -right-8 -bottom-12 -z-10 size-48 text-primary/6",
+				"aria-hidden": "true"
+			})) : r("", !0)
+		], 64)) : r("", !0), a("div", { class: l(["flex justify-between", M.value]) }, [a("div", { class: l(["flex min-w-0 items-center gap-3.5", A.value && "gap-4"]) }, [
+			c.backButton ? (d(), i("button", {
 				key: 0,
 				type: "button",
-				class: "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-8 border border-border bg-surface text-label shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading active:scale-95 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				class: "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-border bg-surface 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 motion-reduce:active:translate-y-0",
 				"aria-label": "Back",
 				"data-ac-ds": "",
 				"data-testid": "ac-header-back",
-				onClick: b[0] ||= (e) => C("back")
-			}, [i(d(f), {
+				onClick: E[0] ||= (e) => O("back")
+			}, [s(h(g), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})])) : t("", !0),
-			e.$slots.icon ? (c(), n("span", m, [l(e.$slots, "icon")])) : t("", !0),
-			r("div", h, [e.$slots.breadcrumb ? (c(), n("div", g, [l(e.$slots, "breadcrumb")])) : t("", !0), l(e.$slots, "title", {}, () => [r("div", _, [r("h4", { class: o(["truncate font-semibold text-heading", S.value ? "text-lg leading-6 tracking-[-0.01em]" : "text-xl leading-7 tracking-tight"]) }, u(a.title), 3), l(e.$slots, "title-extra")]), a.subtitle ? (c(), n("p", v, u(a.subtitle), 1)) : t("", !0)])])
-		]), e.$slots.default ? (c(), n("div", y, [l(e.$slots, "default")])) : t("", !0)], 2)], 6));
+			})])) : r("", !0),
+			t.$slots.icon || c.icon ? (d(), i("span", {
+				key: 1,
+				class: l(["inline-flex shrink-0 items-center justify-center overflow-hidden", N.value]),
+				"aria-hidden": "true"
+			}, [f(t.$slots, "icon", {}, () => [(d(), n(p(c.icon)))])], 2)) : r("", !0),
+			a("div", b, [
+				!A.value && t.$slots.breadcrumb ? (d(), i("div", x, [f(t.$slots, "breadcrumb")])) : r("", !0),
+				f(t.$slots, "title", {}, () => [a("div", S, [
+					a("h4", { class: l(["font-heading font-semibold tracking-tight text-heading", P.value]) }, m(c.title), 3),
+					c.countLabel ? (d(), i("span", C, m(c.countLabel), 1)) : r("", !0),
+					f(t.$slots, "title-extra")
+				]), c.subtitle ? (d(), i("p", {
+					key: 0,
+					class: l(["mt-1 max-w-prose text-base text-muted", c.variant === "bar" ? "truncate" : "leading-relaxed"])
+				}, m(c.subtitle), 3)) : r("", !0)]),
+				t.$slots.meta ? (d(), i("div", w, [f(t.$slots, "meta")])) : r("", !0)
+			])
+		], 2), t.$slots.default || c.docsHref ? (d(), i("div", {
+			key: 0,
+			class: l(["flex shrink-0 flex-wrap items-center gap-2", A.value && "self-start sm:self-center"])
+		}, [c.docsHref ? (d(), i("a", {
+			key: 0,
+			href: c.docsHref,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			class: "inline-flex h-8 items-center gap-2 rounded-10 border border-border bg-background/80 px-3 text-base font-medium text-heading shadow-xs backdrop-blur-sm transition-colors duration-200 hover:border-primary/40 hover:text-primary-strong focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
+			"data-testid": "ac-header-docs"
+		}, [
+			s(h(_), {
+				class: "size-4",
+				"aria-hidden": "true"
+			}),
+			E[3] ||= o(" Documentation ", -1),
+			s(h(v), {
+				class: "size-3 text-muted",
+				"aria-hidden": "true"
+			}),
+			E[4] ||= a("span", { class: "sr-only" }, "(opens in a new tab)", -1)
+		], 8, T)) : r("", !0), f(t.$slots, "default")], 2)) : r("", !0)], 2)], 2)], 6));
 	}
 });
 //#endregion
-export { b as default };
+export { E as default };

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     loading: boolean;
     items: InfoItem[];
     emptyText: string;
-    layout: "horizontal" | "stacked";
     columns: 1 | 2;
+    layout: "horizontal" | "stacked";
 }, {}, {}, {}, 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/AcInfoTable.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ import { Check as b, Copy as x, Eye as S, EyeOff as C } from "@lucide/vue";
 //#region src/lib/components/AcInfoTable.vue?vue&type=script&setup=true&lang.ts
 var w = {
 	key: 0,
-	class: "text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+	class: "font-heading text-lg leading-tight font-semibold tracking-tight text-heading"
 }, T = {
 	key: 1,
 	class: "ml-auto flex shrink-0 items-center gap-2"
@@ -48,10 +48,14 @@ var w = {
 			item: e,
 			key: e.key ?? e.label
 		}))), z = r(() => [
-			"min-w-0 border-t border-border-light py-2.5 first:border-t-0",
+			"min-w-0 border-t border-border py-3.5 first:border-t-0",
 			N.columns === 2 && "md:[&:nth-child(2)]:border-t-0",
-			N.layout === "horizontal" ? "flex flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-4" : "flex flex-col gap-1"
-		]), B = r(() => ["flex items-center gap-1.5 text-base text-muted", N.layout === "horizontal" && (N.columns === 2 ? "sm:w-36 sm:shrink-0" : "sm:w-48 sm:shrink-0")]);
+			N.layout === "horizontal" ? "flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-4" : "flex flex-col gap-1"
+		]), B = r(() => [
+			"flex items-center gap-2 text-muted",
+			N.layout === "stacked" ? "text-xs font-medium" : "text-base",
+			N.layout === "horizontal" && (N.columns === 2 ? "sm:w-36 sm:shrink-0" : "sm:w-48 sm:shrink-0")
+		]);
 		function V(e) {
 			return e == null || e === "";
 		}
@@ -65,34 +69,34 @@ var w = {
 			} catch {}
 		}
 		return d(() => clearTimeout(L)), (t, r) => (f(), o("div", {
-			class: u(l.bordered && "rounded-10 border border-border bg-surface shadow-xs"),
+			class: u(l.bordered && "rounded-14 border border-border bg-surface"),
 			"data-ac-ds": "",
 			"data-testid": "ac-info-table"
 		}, [l.title || t.$slots.actions ? (f(), o("div", {
 			key: 0,
-			class: u(["flex items-center justify-between gap-4", l.bordered ? "border-b border-border-light px-5 py-3.5" : "mb-2"])
+			class: u(["flex items-center justify-between gap-4", l.bordered ? "border-b border-border px-6 pt-5 pb-3" : "mb-2"])
 		}, [l.title ? (f(), o("h3", w, _(l.title), 1)) : a("", !0), t.$slots.actions ? (f(), o("div", T, [h(t.$slots, "actions")])) : a("", !0)], 2)) : a("", !0), !l.loading && !l.items.length ? (f(), o("p", {
 			key: 1,
-			class: u(["py-6 text-center text-base text-muted", l.bordered && "px-5"])
+			class: u(["py-10 text-center text-base text-muted", l.bordered && "px-6"])
 		}, _(l.emptyText), 3)) : (f(), o("dl", {
 			key: 2,
-			class: u(["grid", [l.columns === 2 && "md:grid-cols-2 md:gap-x-10", l.bordered ? "px-5 py-2" : ""]]),
+			class: u(["grid", [l.columns === 2 && "md:grid-cols-2 md:gap-x-10", l.bordered ? "px-6 py-1" : ""]]),
 			"aria-busy": l.loading || void 0
 		}, [l.loading && !l.items.length ? (f(), o(n, { key: 0 }, m(P, (e, t) => s("div", {
 			key: t,
 			class: u(z.value)
-		}, [s("dt", { class: u(B.value) }, [...r[0] ||= [s("span", { class: "h-3 w-20 animate-pulse rounded-4 bg-surface-sunken" }, null, -1)]], 2), s("dd", D, [s("span", { class: u(["h-3 animate-pulse rounded-4 bg-surface-sunken", e]) }, null, 2)])], 2)), 64)) : a("", !0), (f(!0), o(n, null, m(R.value, ({ item: n, key: r }, d) => (f(), o("div", {
+		}, [s("dt", { class: u(B.value) }, [...r[0] ||= [s("span", { class: "h-3 w-20 animate-pulse rounded-full bg-surface-sunken" }, null, -1)]], 2), s("dd", D, [s("span", { class: u(["h-3 animate-pulse rounded-full bg-surface-sunken", e]) }, null, 2)])], 2)), 64)) : a("", !0), (f(!0), o(n, null, m(R.value, ({ item: n, key: r }, d) => (f(), o("div", {
 			key: r,
 			class: u(z.value)
 		}, [s("dt", { class: u(B.value) }, [h(t.$slots, `label-${r}`, { item: n }, () => [c(_(n.label), 1)])], 2), s("dd", O, [l.loading ? (f(), o("span", {
 			key: 0,
-			class: u(["h-3 animate-pulse rounded-4 bg-surface-sunken", P[d % P.length]])
+			class: u(["h-3 animate-pulse rounded-full bg-surface-sunken", P[d % P.length]])
 		}, null, 2)) : h(t.$slots, `value-${r}`, { item: n }, () => [V(n.value) ? (f(), o("span", k, "—")) : (f(), o("span", A, [
 			s("span", { class: u(["min-w-0 [overflow-wrap:anywhere]", (n.mono || n.secret) && "font-mono text-xs leading-5"]) }, _(n.secret && !I.value.has(r) ? "••••••••••••" : n.value), 3),
 			n.secret ? (f(), o("button", {
 				key: 0,
 				type: "button",
-				class: "-my-0.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: "-my-0.5 inline-flex size-6 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": I.value.has(r) ? `Hide ${n.label}` : `Show ${n.label}`,
 				"aria-pressed": I.value.has(r),
 				onClick: (e) => H(r)
@@ -106,12 +110,12 @@ var w = {
 			}, {
 				default: y(() => [s("button", {
 					type: "button",
-					class: "-my-0.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: "-my-0.5 inline-flex size-6 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": F.value === r ? `${n.label} copied` : `Copy ${n.label}`,
 					onClick: (e) => U(r, n.value)
 				}, [F.value === r ? (f(), i(v(b), {
 					key: 0,
-					class: "size-3.5 text-success",
+					class: "size-3.5 text-success-strong",
 					"aria-hidden": "true"
 				})) : (f(), i(v(x), {
 					key: 1,

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

@@ -1,6 +1,6 @@
 import type { Component } from "vue";
 export interface Props {
-    /** Floating label. It rests inside the field and rises on focus or when filled. With a `prefix`, it always sits on the top edge. */
+    /** Label above the field. Pass `placeholder` for an example value inside it. */
     label: string;
     /** Native `name` attribute. */
     name?: string;
@@ -10,13 +10,13 @@ export interface Props {
     required?: boolean;
     /** Disables the field. */
     disabled?: boolean;
-    /** Read-only field with a gray background. */
+    /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
-    /** Helper text under the field (hidden while `errorMsg` is set). */
+    /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 40px tall. */
+    /** `small` 36px or `normal` 42px tall. */
     size?: "small" | "normal";
     /** Text of a button attached to the right edge, such as "Copy", "Generate" or "Browse". It emits `addon` when clicked. Also its accessible name when `addon-icon-only` is set. */
     addonLabel?: string;

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

@@ -1,10 +1,14 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, useSlots as b, vModelDynamic as x, withDirectives as S } from "vue";
-import { CircleAlert as C, Eye as w, EyeOff as T } from "@lucide/vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, useSlots as v, vModelDynamic as y, withDirectives as b } from "vue";
+import { Eye as x, EyeOff as S } from "@lucide/vue";
 //#region src/lib/components/AcInput.vue?vue&type=script&setup=true&lang.ts
-var E = { class: "flex" }, D = {
+var C = ["for"], w = {
 	key: 0,
-	class: "flex h-full shrink-0 items-center pl-3 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4"
-}, O = [
+	class: "text-muted"
+}, T = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, E = ["id"], D = { class: "flex" }, O = [
 	"id",
 	"name",
 	"type",
@@ -13,18 +17,14 @@ var E = { class: "flex" }, D = {
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], k = ["for"], A = {
-	key: 0,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, j = ["aria-label"], M = [
+], k = ["aria-label", "aria-pressed"], A = [
 	"disabled",
 	"aria-label",
 	"title"
-], N = { key: 1 }, P = ["id"], F = ["id"], I = /*@__PURE__*/ s({
+], j = { key: 1 }, M = ["id"], N = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcInput",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ o({
 		label: {},
 		name: { default: "" },
 		type: { default: "text" },
@@ -42,7 +42,7 @@ var E = { class: "flex" }, D = {
 		},
 		errorMsg: { default: "" },
 		hint: { default: "" },
-		size: { default: "small" },
+		size: { default: "normal" },
 		addonLabel: { default: "" },
 		addonIcon: { default: void 0 },
 		addonIconOnly: {
@@ -53,91 +53,99 @@ var E = { class: "flex" }, D = {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["addon"], ["update:modelValue"]),
-	setup(s, { expose: c, emit: I }) {
-		let L = s, R = y(s, "modelValue"), z = I, B = v(), V = _(), H = b(), U = e(() => ({
-			class: V.class,
-			style: V.style
-		})), W = e(() => {
-			let { class: e, style: t, ...n } = V;
+	emits: /*@__PURE__*/ o(["addon"], ["update:modelValue"]),
+	setup(a, { expose: o, emit: N }) {
+		let P = a, F = _(a, "modelValue"), I = N, L = g(), R = h(), z = v(), B = e(() => ({
+			class: R.class,
+			style: R.style
+		})), V = e(() => {
+			let { class: e, style: t, ...n } = R;
 			return n;
-		}), G = f(null), K = f(!1), q = e(() => L.type === "password" && K.value ? "text" : L.type), J = e(() => L.errorMsg || L.hint ? `${B}-msg` : void 0), Y = e(() => !!L.addonLabel || !!L.addonIcon), X = e(() => !!H.suffix || L.type === "password");
-		function Z(e) {
-			L.disabled || z("addon", e);
+		}), H = u(null), U = u(!1), W = e(() => P.type === "password" && U.value ? "text" : P.type), G = e(() => [P.hint && `${L}-hint`, P.errorMsg && `${L}-msg`].filter(Boolean).join(" ") || void 0), K = e(() => !!P.addonLabel || !!P.addonIcon), q = e(() => !!z.suffix || P.type === "password");
+		function J(e) {
+			P.disabled || I("addon", e);
 		}
-		return c({ focus: () => G.value?.focus() }), (e, c) => (d(), r("div", l(U.value, {
-			class: ["w-full", s.disabled && "opacity-60"],
+		return o({ focus: () => H.value?.focus() }), (e, o) => (l(), r("div", s(B.value, {
+			class: ["w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-input"
-		}), [i("div", E, [i("div", { class: u(["relative flex min-w-0 flex-1 items-center border shadow-xs transition-[border-color,box-shadow] duration-150", [
-			s.size === "small" ? "h-9" : "h-10",
-			Y.value ? "rounded-l-6" : "rounded-6",
-			s.disabled || s.readonly ? "bg-surface-muted" : "bg-surface",
-			s.readonly && "shadow-none",
-			s.errorMsg ? "border-red-60 focus-within:border-danger focus-within:shadow-[0_0_0_3px_var(--color-red-90)]" : "border-border hover:border-border-dark focus-within:focus-ring"
-		]]) }, [
-			e.$slots.prefix ? (d(), r("span", D, [p(e.$slots, "prefix")])) : n("", !0),
-			S(i("input", l({
-				id: g(B),
-				ref_key: "input",
-				ref: G
-			}, W.value, {
-				"onUpdate:modelValue": c[0] ||= (e) => R.value = e,
-				name: s.name,
-				type: q.value,
-				disabled: s.disabled,
-				readonly: s.readonly,
-				required: s.required,
-				"aria-invalid": !!s.errorMsg || void 0,
-				"aria-describedby": J.value,
-				placeholder: " ",
-				class: ["peer block h-full w-full min-w-0 flex-1 rounded-6 bg-transparent text-base text-heading outline-none placeholder:text-transparent disabled:cursor-not-allowed", [e.$slots.prefix ? "pl-1" : "pl-3", X.value ? "pr-1.5" : "pr-3"]]
-			}), null, 16, O), [[x, R.value]]),
+		}), [
 			i("label", {
-				for: g(B),
-				class: u(["pointer-events-none absolute -top-px left-2.25 max-w-[calc(100%-20px)] -translate-y-1/2 truncate rounded-2 bg-surface px-1 text-xs font-medium whitespace-nowrap text-label transition-all duration-150 ease-out peer-focus:text-primary-20 peer-read-only:bg-linear-to-b peer-read-only:from-surface peer-read-only:from-50% peer-read-only:to-surface-muted peer-read-only:to-50% peer-disabled:bg-linear-to-b peer-disabled:from-surface peer-disabled:from-50% peer-disabled:to-surface-muted peer-disabled:to-50%", [!e.$slots.prefix && "peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-muted peer-focus:-top-px peer-focus:text-xs peer-focus:font-medium", s.errorMsg && "text-red-30! peer-focus:text-red-30!"]])
-			}, [a(h(s.label), 1), s.required ? (d(), r("span", A, " *")) : n("", !0)], 10, k),
-			e.$slots.suffix ? (d(), r("span", {
-				key: 1,
-				class: u(["relative flex h-full shrink-0 items-center bg-inherit text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", s.type === "password" ? "pr-1" : "pr-3"])
-			}, [p(e.$slots, "suffix")], 2)) : n("", !0),
-			s.type === "password" ? (d(), r("button", {
-				key: 2,
+				for: m(L),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				i("span", null, p(a.label), 1),
+				a.readonly ? (l(), r("span", w, "(read only)")) : n("", !0),
+				a.required ? (l(), r("span", T, "*")) : n("", !0)
+			], 8, C),
+			a.hint ? (l(), r("p", {
+				key: 0,
+				id: `${m(L)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, p(a.hint), 9, E)) : n("", !0),
+			i("div", D, [i("div", { class: c(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
+				a.size === "small" ? "h-9" : "h-10.5",
+				K.value ? "rounded-l-10" : "rounded-10",
+				a.readonly ? "bg-surface-muted" : "bg-background",
+				a.errorMsg ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+			]]) }, [
+				e.$slots.prefix ? (l(), r("span", {
+					key: 0,
+					class: c(["flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.size === "small" ? "pl-3" : "pl-4"])
+				}, [d(e.$slots, "prefix")], 2)) : n("", !0),
+				b(i("input", s({
+					id: m(L),
+					ref_key: "input",
+					ref: H
+				}, V.value, {
+					"onUpdate:modelValue": o[0] ||= (e) => F.value = e,
+					name: a.name,
+					type: W.value,
+					disabled: a.disabled,
+					readonly: a.readonly,
+					required: a.required,
+					"aria-invalid": !!a.errorMsg || void 0,
+					"aria-describedby": G.value,
+					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [e.$slots.prefix ? "pl-2" : a.size === "small" ? "pl-4" : "pl-5", q.value ? "pr-2" : a.size === "small" ? "pr-4" : "pr-5"]]
+				}), null, 16, O), [[y, F.value]]),
+				e.$slots.suffix ? (l(), r("span", {
+					key: 1,
+					class: c(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.type === "password" ? "pr-2" : a.size === "small" ? "pr-3" : "pr-4"])
+				}, [d(e.$slots, "suffix")], 2)) : n("", !0),
+				a.type === "password" ? (l(), r("button", {
+					key: 2,
+					type: "button",
+					class: c(["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", a.size === "small" ? "mr-3" : "mr-4"]),
+					"aria-label": U.value ? "Hide value" : "Show value",
+					"aria-pressed": U.value,
+					onClick: o[1] ||= (e) => U.value = !U.value
+				}, [(l(), t(f(U.value ? m(S) : m(x)), {
+					class: c(a.size === "small" ? "size-4" : "size-5"),
+					"aria-hidden": "true"
+				}, null, 8, ["class"]))], 10, k)) : n("", !0)
+			], 2), K.value ? (l(), r("button", {
+				key: 0,
 				type: "button",
-				class: "relative 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",
-				"aria-label": K.value ? "Hide value" : "Show value",
-				onClick: c[1] ||= (e) => K.value = !K.value
-			}, [(d(), t(m(K.value ? g(T) : g(w)), {
-				class: "size-4",
+				class: c(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-10 border border-border bg-surface text-base font-medium whitespace-nowrap text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface", [a.size === "small" ? "h-9" : "h-10.5", a.addonIconOnly ? a.size === "small" ? "w-9" : "w-10.5" : "px-4"]]),
+				disabled: a.disabled,
+				"aria-label": a.addonIconOnly ? a.addonLabel : void 0,
+				title: a.addonIconOnly ? a.addonLabel : void 0,
+				"data-ac-ds": "",
+				"data-testid": "ac-input-addon",
+				onClick: J
+			}, [a.addonIcon ? (l(), t(f(a.addonIcon), {
+				key: 0,
+				class: "size-4 text-muted",
 				"aria-hidden": "true"
-			}))], 8, j)) : n("", !0)
-		], 2), Y.value ? (d(), r("button", {
-			key: 0,
-			type: "button",
-			class: u(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-6 border border-border bg-surface-muted text-base font-medium whitespace-nowrap text-heading shadow-xs transition-[background-color,border-color,box-shadow] duration-150 hover:bg-surface-sunken focus-visible:z-10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:hover:bg-surface-muted", [s.size === "small" ? "h-9" : "h-10", s.addonIconOnly ? "w-9" : "px-3"]]),
-			disabled: s.disabled,
-			"aria-label": s.addonIconOnly ? s.addonLabel : void 0,
-			title: s.addonIconOnly ? s.addonLabel : void 0,
-			"data-ac-ds": "",
-			"data-testid": "ac-input-addon",
-			onClick: Z
-		}, [s.addonIcon ? (d(), t(m(s.addonIcon), {
-			key: 0,
-			class: "size-4 text-label",
-			"aria-hidden": "true"
-		})) : n("", !0), s.addonIconOnly ? n("", !0) : (d(), r("span", N, h(s.addonLabel), 1))], 10, M)) : n("", !0)]), s.errorMsg ? (d(), r("p", {
-			key: 0,
-			id: `${g(B)}-msg`,
-			class: "mt-1.5 flex items-center gap-1 text-xs text-red-30"
-		}, [o(g(C), {
-			class: "size-3.5 shrink-0",
-			"aria-hidden": "true"
-		}), a(" " + h(s.errorMsg), 1)], 8, P)) : s.hint ? (d(), r("p", {
-			key: 1,
-			id: `${g(B)}-msg`,
-			class: "mt-1.5 text-xs text-muted"
-		}, h(s.hint), 9, F)) : n("", !0)], 16));
+			})) : n("", !0), a.addonIconOnly ? n("", !0) : (l(), r("span", j, p(a.addonLabel), 1))], 10, A)) : n("", !0)]),
+			a.errorMsg ? (l(), r("p", {
+				key: 1,
+				id: `${m(L)}-msg`,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, p(a.errorMsg), 9, M)) : n("", !0)
+		], 16));
 	}
 });
 //#endregion
-export { I as default };
+export { N as default };

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

@@ -8,7 +8,7 @@ var f = {
 }, p = {
 	key: 0,
 	class: "px-px text-xs text-muted"
-}, m = { "aria-hidden": "true" }, h = { class: "sr-only" }, g = "inline-flex items-center justify-center border border-border border-b-border-dark bg-surface-muted font-sans font-medium text-label shadow-[inset_0_-1px_0_0_var(--color-border)] select-none", _ = /*@__PURE__*/ o({
+}, m = { "aria-hidden": "true" }, h = { class: "sr-only" }, g = "inline-flex items-center justify-center border border-border bg-surface-muted font-mono font-medium text-muted select-none", _ = /*@__PURE__*/ o({
 	__name: "AcKbd",
 	props: {
 		keys: { default: () => [] },

package/dist/lib/components/AcKeyValueInput.js

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

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

@@ -0,0 +1,114 @@
+import type { SelectOption } from "./types";
+/** One row of the field. */
+export interface KeyValueItem {
+    key: string;
+    value: string;
+    /** The third column's value, when `options` is set, e.g. a taint effect. */
+    option?: string;
+}
+/** Messages for one row, by cell. */
+export interface KeyValueRowErrors {
+    key?: string;
+    value?: string;
+}
+export interface Props {
+    /** Label above the rows, e.g. “Labels” or “Taints”. Also names the group for screen readers. */
+    label?: string;
+    /** Help text between the label and the rows. */
+    hint?: string;
+    /** Error for the whole field under the rows, e.g. “Add at least one label”. */
+    errorMsg?: string;
+    /** Header of the key column. Each key field is named “<key-label> <row>” for screen readers, e.g. “Key 2”. */
+    keyLabel?: string;
+    /** Header of the value column, e.g. “Value” or “Value (optional)”. */
+    valueLabel?: string;
+    /** Example key shown in empty key fields, e.g. “e.g. app.kubernetes.io/name”. */
+    keyPlaceholder?: string;
+    /** Example value shown in empty value fields. */
+    valuePlaceholder?: string;
+    /** Singular name of one row, used in “Remove <item-name> app” and announcements. */
+    itemName?: string;
+    /** Text of the Add button. Defaults to “Add new”, as in cloud-ui. */
+    addLabel?: string;
+    /** Choices for a third column, such as taint effects. Each row then gets a small select bound to `option`. */
+    options?: SelectOption<string>[];
+    /** Header of the third column, e.g. “Effect”. */
+    optionLabel?: string;
+    /** Option a new row starts with. Defaults to the first of `options`. */
+    defaultOption?: string;
+    /** Most rows allowed. The Add button disables at the limit and a count shows next to it. */
+    max?: number;
+    /** Checks a key. Return a message to show under it. Runs on every non-empty key. */
+    validateKey?: (key: string, index: number, items: KeyValueItem[]) => string | void | null | undefined;
+    /** Checks a value. Return a message to show under it. Runs on every row with a key or a value. */
+    validateValue?: (value: string, key: string, index: number, items: KeyValueItem[]) => string | void | null | undefined;
+    /** Lets the same key appear twice. Off by default: a repeated key (key and option, with `options`) shows an error. */
+    allowDuplicateKeys?: boolean;
+    /** Shows keys in the monospace font, for label keys and env var names. */
+    mono?: boolean;
+    /** `small` 36px or `normal` 40px fields. */
+    size?: "small" | "normal";
+    /** Marks the field required and adds a red asterisk. Pass `error-msg` when it's empty on submit. Was `is-required` in cloud-ui. */
+    required?: boolean;
+    /** Disables every field and button. Was `is-disabled` in cloud-ui. */
+    disabled?: boolean;
+    /** Shows the rows as read-only fields, without the Add and Remove buttons. */
+    readonly?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content under the rows and above the Add button, e.g. a warning about `NoExecute` taints. */
+    footer?: () => unknown;
+};
+declare function add(): void;
+type __VLS_ModelProps = {
+    /** The rows, empty ones included, in order. Replaced with a new array on every change; drop rows with an empty key before saving. */
+    modelValue?: KeyValueItem[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Adds an empty row and focuses its key. */
+    add: typeof add;
+    /** Moves focus to the first key, or to the Add button when there are no rows. */
+    focus: () => void;
+    /** Whether any row shows an error (duplicate key, missing key, or a validator's message). Check it before saving. */
+    hasErrors: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: KeyValueItem[]) => any;
+    add: (index: number) => any;
+    remove: (item: KeyValueItem, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: KeyValueItem[]) => any) | undefined;
+    onAdd?: ((index: number) => any) | undefined;
+    onRemove?: ((item: KeyValueItem, index: number) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    max: number;
+    size: "small" | "normal";
+    readonly: boolean;
+    options: SelectOption<string>[];
+    hint: string;
+    errorMsg: string;
+    mono: boolean;
+    itemName: string;
+    addLabel: string;
+    keyLabel: string;
+    valueLabel: string;
+    keyPlaceholder: string;
+    valuePlaceholder: string;
+    optionLabel: string;
+    defaultOption: string;
+    validateKey: (key: string, index: number, items: KeyValueItem[]) => string | void | null | undefined;
+    validateValue: (value: string, key: string, index: number, items: KeyValueItem[]) => string | void | null | undefined;
+    allowDuplicateKeys: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};