@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,20 +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 = { class: "min-w-0" }, h = {
+var y = {
 	key: 0,
-	class: "mb-2"
-}, g = { class: "flex min-w-0 flex-wrap items-center gap-2.5" }, _ = {
+	class: "mb-4"
+}, b = { class: "min-w-0" }, x = {
 	key: 0,
-	class: "mt-1 max-w-prose truncate text-base text-muted"
-}, v = {
+	class: "mb-2"
+}, S = { class: "flex min-w-0 flex-wrap items-center gap-2.5" }, C = {
 	key: 0,
-	class: "flex shrink-0 flex-wrap items-center gap-2"
-}, y = /*@__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
@@ -27,34 +35,80 @@ var p = { class: "flex min-w-0 items-center gap-3.5" }, m = { class: "min-w-0" }
 		size: { default: "normal" }
 	},
 	emits: ["back"],
-	setup(a, { emit: y }) {
-		let b = a, x = e(() => b.size === "compact"), S = y;
-		return (e, y) => (c(), n("header", {
-			class: o(["z-20 border-b border-border/80 bg-surface/90 backdrop-blur-sm", 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-4", x.value ? "px-4 py-3 sm:px-6" : "px-4 py-5 sm:px-6"]) }, [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-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: y[0] ||= (e) => S("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", {
+			})])) : r("", !0),
+			t.$slots.icon || c.icon ? (d(), i("span", {
 				key: 1,
-				class: o(["inline-flex shrink-0 items-center justify-center overflow-hidden 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", x.value ? "size-9 rounded-10 [&_svg]:size-5" : "size-11 rounded-14 [&_svg]:size-6"]),
+				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"
-			}, [l(e.$slots, "icon")], 2)) : t("", !0),
-			r("div", m, [e.$slots.breadcrumb ? (c(), n("div", h, [l(e.$slots, "breadcrumb")])) : t("", !0), l(e.$slots, "title", {}, () => [r("div", g, [r("h4", { class: o(["truncate font-heading font-semibold tracking-tight text-heading", x.value ? "text-lg" : "text-2xl md:text-3xl"]) }, u(a.title), 3), l(e.$slots, "title-extra")]), a.subtitle ? (c(), n("p", _, u(a.subtitle), 1)) : t("", !0)])])
-		]), e.$slots.default ? (c(), n("div", v, [l(e.$slots, "default")])) : t("", !0)], 2)], 6));
+			}),
+			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 { y 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/AcInput.vue.d.ts

@@ -16,7 +16,7 @@ export interface Props {
     errorMsg?: string;
     /** 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,17 +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 = ["for"], D = {
+var C = ["for"], w = {
 	key: 0,
-	class: "font-normal text-muted"
-}, O = {
+	class: "text-muted"
+}, T = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, k = ["id"], A = { class: "flex" }, j = {
-	key: 0,
-	class: "flex h-full shrink-0 items-center pl-3.5 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4"
-}, M = [
+}, E = ["id"], D = { class: "flex" }, O = [
 	"id",
 	"name",
 	"type",
@@ -20,14 +17,14 @@ var E = ["for"], D = {
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], N = ["aria-label", "aria-pressed"], P = [
+], k = ["aria-label", "aria-pressed"], A = [
 	"disabled",
 	"aria-label",
 	"title"
-], F = { key: 1 }, I = ["id"], L = /*@__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" },
@@ -56,99 +53,99 @@ var E = ["for"], D = {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["addon"], ["update:modelValue"]),
-	setup(s, { expose: c, emit: L }) {
-		let R = s, z = y(s, "modelValue"), B = L, V = v(), H = _(), U = b(), W = e(() => ({
-			class: H.class,
-			style: H.style
-		})), G = e(() => {
-			let { class: e, style: t, ...n } = H;
+	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;
-		}), K = f(null), q = f(!1), J = e(() => R.type === "password" && q.value ? "text" : R.type), Y = e(() => [R.hint && `${V}-hint`, R.errorMsg && `${V}-msg`].filter(Boolean).join(" ") || void 0), X = e(() => !!R.addonLabel || !!R.addonIcon), Z = e(() => !!U.suffix || R.type === "password");
-		function Q(e) {
-			R.disabled || B("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: () => K.value?.focus() }), (e, c) => (d(), r("div", l(W.value, {
-			class: ["w-full", s.disabled && "opacity-50"],
+		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("label", {
-				for: g(V),
+				for: m(L),
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				i("span", null, h(s.label), 1),
-				s.readonly ? (d(), r("span", D, "(read only)")) : n("", !0),
-				s.required ? (d(), r("span", O, "*")) : n("", !0)
-			], 8, E),
-			s.hint ? (d(), r("p", {
+				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: `${g(V)}-hint`,
+				id: `${m(L)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, h(s.hint), 9, k)) : n("", !0),
-			i("div", A, [i("div", { class: u(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
-				s.size === "small" ? "h-9" : "h-10",
-				X.value ? "rounded-l-10" : "rounded-10",
-				s.readonly ? "bg-surface-muted" : "bg-background",
-				s.errorMsg ? "border-danger/60 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", !s.disabled && "hover:border-accent-active"]
+			}, 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 ? (d(), r("span", j, [p(e.$slots, "prefix")])) : n("", !0),
-				S(i("input", l({
-					id: g(V),
+				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: K
-				}, G.value, {
-					"onUpdate:modelValue": c[0] ||= (e) => z.value = e,
-					name: s.name,
-					type: J.value,
-					disabled: s.disabled,
-					readonly: s.readonly,
-					required: s.required,
-					"aria-invalid": !!s.errorMsg || void 0,
-					"aria-describedby": Y.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" : s.size === "small" ? "pl-3" : "pl-4", Z.value ? "pr-2" : s.size === "small" ? "pr-3" : "pr-4"]]
-				}), null, 16, M), [[x, z.value]]),
-				e.$slots.suffix ? (d(), r("span", {
+					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: u(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", s.type === "password" ? "pr-1" : "pr-3.5"])
-				}, [p(e.$slots, "suffix")], 2)) : n("", !0),
-				s.type === "password" ? (d(), r("button", {
+					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: "relative 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": q.value ? "Hide value" : "Show value",
-					"aria-pressed": q.value,
-					onClick: c[1] ||= (e) => q.value = !q.value
-				}, [(d(), t(m(q.value ? g(T) : g(w)), {
-					class: "size-4",
+					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"
-				}))], 8, N)) : n("", !0)
-			], 2), X.value ? (d(), r("button", {
+				}, null, 8, ["class"]))], 10, k)) : n("", !0)
+			], 2), K.value ? (l(), 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-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", [s.size === "small" ? "h-9" : "h-10", s.addonIconOnly ? s.size === "small" ? "w-9" : "w-10" : "px-4"]]),
-				disabled: s.disabled,
-				"aria-label": s.addonIconOnly ? s.addonLabel : void 0,
-				title: s.addonIconOnly ? s.addonLabel : void 0,
+				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: Q
-			}, [s.addonIcon ? (d(), t(m(s.addonIcon), {
+				onClick: J
+			}, [a.addonIcon ? (l(), t(f(a.addonIcon), {
 				key: 0,
 				class: "size-4 text-muted",
 				"aria-hidden": "true"
-			})) : n("", !0), s.addonIconOnly ? n("", !0) : (d(), r("span", F, h(s.addonLabel), 1))], 10, P)) : n("", !0)]),
-			s.errorMsg ? (d(), r("p", {
+			})) : 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: `${g(V)}-msg`,
-				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				id: `${m(L)}-msg`,
+				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, [o(g(C), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), a(" " + h(s.errorMsg), 1)], 8, I)) : n("", !0)
+			}, p(a.errorMsg), 9, M)) : n("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { L as default };
+export { N as default };

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

@@ -26,9 +26,9 @@ export interface Props {
     keyPlaceholder?: string;
     /** Example value shown in empty value fields. */
     valuePlaceholder?: string;
-    /** Singular name of one row, used in “Add <item-name>”, “Remove <item-name> app” and announcements. */
+    /** Singular name of one row, used in “Remove <item-name> app” and announcements. */
     itemName?: string;
-    /** Text of the Add button. Defaults to “Add <item-name>”. */
+    /** 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>[];
@@ -87,8 +87,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     max: number;
     size: "small" | "normal";
-    keyLabel: string;
-    valueLabel: string;
     readonly: boolean;
     options: SelectOption<string>[];
     hint: string;
@@ -96,6 +94,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     mono: boolean;
     itemName: string;
     addLabel: string;
+    keyLabel: string;
+    valueLabel: string;
     keyPlaceholder: string;
     valuePlaceholder: string;
     optionLabel: string;