@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -1,19 +1,19 @@
-import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, useSlots as p, withCtx as m } from "vue";
+import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, useSlots as m, withCtx as h } from "vue";
 //#region src/lib/components/AcCard.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var g = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
 	"aria-hidden": "true"
-}, g = { class: "flex min-w-0 flex-1 items-center gap-3" }, _ = { class: "min-w-0 flex-1" }, v = { class: "flex flex-wrap items-center gap-2" }, y = {
+}, _ = { class: "min-w-0 flex-1" }, v = {
 	key: 0,
 	class: "mt-0.5 text-xs leading-4 text-muted"
-}, b = {
+}, y = {
 	key: 1,
 	class: "mt-0.5 text-xs leading-4 text-muted"
-}, x = {
+}, b = {
 	key: 1,
 	class: "flex shrink-0 flex-wrap items-center gap-2"
-}, S = /*@__PURE__*/ s({
+}, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {
 		title: { default: "" },
@@ -28,6 +28,11 @@ var h = {
 		variant: { default: "default" },
 		color: { default: "primary" },
 		headerSize: { default: "normal" },
+		titleTag: { default: "h3" },
+		bare: {
+			type: Boolean,
+			default: !1
+		},
 		hoverable: {
 			type: Boolean,
 			default: !1
@@ -42,12 +47,17 @@ var h = {
 		},
 		as: { default: "section" }
 	},
-	setup(s) {
-		let S = s, C = p(), w = {
+	setup(c) {
+		let x = c, S = m(), C = {
 			default: "border-border bg-surface",
 			muted: "border-border bg-surface-sunken/40",
 			dashed: "border-dashed border-border bg-transparent",
 			danger: "border-danger/30 bg-danger/5"
+		}, w = {
+			default: "border-border [:where(&)]:bg-surface",
+			muted: "border-border [:where(&)]:bg-surface-sunken/40",
+			dashed: "border-dashed border-border [:where(&)]:bg-transparent",
+			danger: "border-danger/30 [:where(&)]:bg-danger/5"
 		}, T = {
 			none: "",
 			xs: "p-3",
@@ -113,77 +123,115 @@ var h = {
 				washSm: "from-warning/[0.07]",
 				watermark: "text-warning/5"
 			}
-		}, A = n(() => S.headerSize === "small"), j = n(() => k[S.color]), M = n(() => S.description || S.subtitle), N = n(() => [
-			w[S.variant],
-			S.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			S.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
-			S.shadow && "shadow-xs hover:shadow-card",
-			S.hoverable && S.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+		}, A = n(() => x.headerSize === "bar"), j = n(() => x.headerSize === "small" || A.value), M = n(() => k[x.color]), N = n(() => x.description || x.subtitle), P = n(() => [
+			C[x.variant],
+			x.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			x.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+			x.shadow && "shadow-xs hover:shadow-card",
+			x.hoverable && x.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
 		]);
-		function P() {
-			return !!(S.title || S.icon || C.icon || C.actions || C.badges);
-		}
-		function F(n) {
-			return n.some((n) => n.type === e ? !1 : n.type !== t || F(n.children));
+		function F() {
+			return !!(x.title || N.value || x.icon || S.icon || S.actions || S.badges || S.description);
 		}
 		function I() {
-			return F(C.default?.() ?? []);
-		}
-		function L() {
-			let e = I(), t = S.padding;
+			let e = x.padding ?? (x.padded ? "md" : "none"), t = x.as !== "section" && x.as !== "div";
 			return [
+				w[x.variant],
+				T[e],
+				t && "block no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+				x.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+				x.shadow && "shadow-xs hover:shadow-card",
+				x.hoverable && x.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+			];
+		}
+		function L(n) {
+			return n.some((n) => n.type === e ? !1 : n.type !== t || L(n.children));
+		}
+		function R() {
+			return L(S.default?.() ?? []);
+		}
+		function z() {
+			let e = R(), t = x.padding;
+			return A.value ? [
+				"items-center gap-2.5 px-4 py-2.5",
+				e && "border-b border-border",
+				!e && !S.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				x.accent && ["bg-linear-to-r to-transparent", M.value.washSm]
+			] : [
 				t ? [
 					"items-start gap-3",
 					E[t],
 					D[t],
-					!A.value && "border-border/60"
-				] : A.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
+					!j.value && "border-border/60"
+				] : j.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
 				!e && (t ? O[t] : "pb-5"),
-				e && !A.value && "border-b pb-3",
-				!e && !C.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
-				S.accent && (A.value ? ["bg-linear-to-r to-transparent", j.value.washSm] : ["bg-linear-to-br to-transparent", j.value.wash])
+				e && !j.value && "border-b pb-3",
+				!e && !S.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				x.accent && (j.value ? ["bg-linear-to-r to-transparent", M.value.washSm] : ["bg-linear-to-br to-transparent", M.value.wash])
 			];
 		}
-		function R() {
-			return S.padding && S.padding !== "none" ? T[S.padding] : S.padded && S.padding !== "none" ? A.value ? "p-5" : "p-6" : [
+		function B() {
+			return x.padding && x.padding !== "none" ? T[x.padding] : x.padded && x.padding !== "none" ? j.value ? "p-5" : "p-6" : [
 				"overflow-hidden",
-				!C.footer && "rounded-b-14",
-				!P() && "rounded-t-14"
+				!S.footer && "rounded-b-14",
+				!F() && "rounded-t-14"
 			];
 		}
-		return (e, t) => (l(), r(d(s.as), {
-			class: c(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", N.value]),
+		return (e, t) => c.bare ? (u(), r(f(c.as), {
+			key: 0,
+			class: l(["rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", I()]),
 			"data-ac-ds": "",
 			"data-testid": "ac-card"
 		}, {
-			default: m(() => [
-				P() ? (l(), a("header", {
+			default: h(() => [d(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class"])) : (u(), r(f(c.as), {
+			key: 1,
+			class: l(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", P.value]),
+			"data-ac-ds": "",
+			"data-testid": "ac-card"
+		}, {
+			default: h(() => [
+				F() ? (u(), a("header", {
 					key: 0,
-					class: c(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", L()])
+					class: l(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", z()])
 				}, [
-					s.accent && s.icon && !A.value ? (l(), a("div", h, [(l(), r(d(s.icon), { class: c(["absolute -top-4 -right-4 size-24", j.value.watermark]) }, null, 8, ["class"]))])) : i("", !0),
-					o("div", g, [s.icon || e.$slots.icon ? (l(), a("span", {
+					c.accent && (c.icon || e.$slots.icon) && !j.value ? (u(), a("div", g, [c.icon ? (u(), r(f(c.icon), {
+						key: 0,
+						class: l(["absolute -top-4 -right-4 size-24", M.value.watermark])
+					}, null, 8, ["class"])) : (u(), a("span", {
+						key: 1,
+						class: l(["absolute -top-4 -right-4 [&_svg]:size-24!", M.value.watermark])
+					}, [d(e.$slots, "icon")], 2))])) : i("", !0),
+					o("div", { class: l(["flex min-w-0 flex-1 items-center", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
 						key: 0,
-						class: c(["flex shrink-0 items-center justify-center", [j.value.tile, A.value ? ["size-7 rounded-8 ring-1 ring-inset", j.value.ring] : ["size-8 rounded-10 border", j.value.border]]]),
+						class: l(["flex shrink-0 items-center justify-center", [
+							M.value.tile,
+							j.value ? ["size-7 rounded-8 ring-1 ring-inset", M.value.ring] : ["size-8 rounded-10 border", M.value.border],
+							c.headerSize === "small" ? "[:where(&)_svg]:size-3.5" : "[:where(&)_svg]:size-4"
+						]]),
 						"aria-hidden": "true"
-					}, [u(e.$slots, "icon", {}, () => [(l(), r(d(s.icon), { class: c(A.value ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", v, [s.title ? (l(), a("h3", {
+					}, [d(e.$slots, "icon", {}, () => [(u(), r(f(c.icon), { class: l(c.headerSize === "small" ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", { class: l(["flex flex-wrap items-center", A.value ? "gap-2.5" : "gap-2"]) }, [c.title ? (u(), r(f(c.titleTag), {
 						key: 0,
-						class: c(["truncate font-heading font-semibold tracking-tight text-heading", A.value ? "text-base" : "text-lg leading-tight"])
-					}, f(s.title), 3)) : i("", !0), u(e.$slots, "badges")]), e.$slots.description ? (l(), a("div", y, [u(e.$slots, "description")])) : M.value ? (l(), a("p", b, f(M.value), 1)) : i("", !0)])]),
-					e.$slots.actions ? (l(), a("div", x, [u(e.$slots, "actions")])) : i("", !0)
+						class: l(["truncate font-heading font-semibold tracking-tight text-heading", j.value ? "text-base" : "text-lg leading-tight"])
+					}, {
+						default: h(() => [s(p(c.title), 1)]),
+						_: 1
+					}, 8, ["class"])) : i("", !0), d(e.$slots, "badges")], 2), e.$slots.description ? (u(), a("div", v, [d(e.$slots, "description")])) : N.value ? (u(), a("p", y, p(N.value), 1)) : i("", !0)])], 2),
+					e.$slots.actions ? (u(), a("div", b, [d(e.$slots, "actions")])) : i("", !0)
 				], 2)) : i("", !0),
-				I() ? (l(), a("div", {
+				R() ? (u(), a("div", {
 					key: 1,
-					class: c(["flex-1", R()])
-				}, [u(e.$slots, "default")], 2)) : i("", !0),
-				e.$slots.footer ? (l(), a("footer", {
+					class: l(["flex-1", B()])
+				}, [d(e.$slots, "default")], 2)) : i("", !0),
+				e.$slots.footer ? (u(), a("footer", {
 					key: 2,
-					class: c(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", s.padding ? E[s.padding] : A.value ? "px-5" : "px-6"])
-				}, [u(e.$slots, "footer")], 2)) : i("", !0)
+					class: l(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", c.padding ? E[c.padding] : j.value ? "px-5" : "px-6"])
+				}, [d(e.$slots, "footer")], 2)) : i("", !0)
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { S as default };
+export { x as default };

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

@@ -126,12 +126,12 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     icon: string;
     color: string;
     href: string;
-    loading: boolean;
     align: "left" | "center" | "right";
-    maxItems: number;
-    plain: boolean;
     maxWidth: string;
     tooltip: string;
+    loading: boolean;
+    maxItems: number;
+    plain: boolean;
     column: ResourceColumn;
     emptyText: string;
     cell: ResourceCell;

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

@@ -1,8 +1,8 @@
-import { statusMeta as e } from "./status.js";
-import t from "./AcBadge.js";
-import n from "./AcModal.js";
-import r from "./AcSkeleton.js";
-import i from "./AcTooltip.js";
+import e from "./AcTooltip.js";
+import { statusMeta as t } from "./status.js";
+import n from "./AcBadge.js";
+import r from "./AcModal.js";
+import i from "./AcSkeleton.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as ee, defineAsyncComponent as te, defineComponent as f, getCurrentInstance as ne, h as re, mergeProps as p, nextTick as ie, normalizeClass as m, normalizeStyle as ae, onBeforeUnmount as oe, onMounted as se, openBlock as h, ref as g, renderList as ce, resolveDynamicComponent as _, toDisplayString as v, unref as y, watch as b, withCtx as x, withModifiers as S } from "vue";
 import { Braces as le, Check as ue, LoaderCircle as de, Minus as fe, Tag as pe } from "@lucide/vue";
 //#region src/lib/components/AcCellValue.vue?vue&type=script&setup=true&lang.ts
@@ -112,7 +112,7 @@ var A = /*@__PURE__*/ f({
 			timeStyle: "long"
 		}), je = te({
 			loader: () => import("../editor/index.js").then((e) => e.AcCodeEditor),
-			loadingComponent: () => re(r, {
+			loadingComponent: () => re(i, {
 				shape: "editor",
 				height: "240px"
 			}),
@@ -127,7 +127,7 @@ var A = /*@__PURE__*/ f({
 		} : B.value === "a" ? { href: z.value } : { to: z.value } : null), H = o(() => {
 			let e = (w.color || w.cell?.color || "").trim().split(/\s+/)[0].replace(/^is-/, "");
 			return e ? D[e] ?? "default" : void 0;
-		}), U = o(() => G.value === "status" ? e(String(F.value)) : null), W = o(() => !!U.value?.transient), Le = o(() => H.value ? H.value : U.value ? W.value ? "primary" : U.value.tone : null), Re = o(() => !H.value && !!U.value?.hollow), G = o(() => {
+		}), U = o(() => G.value === "status" ? t(String(F.value)) : null), W = o(() => !!U.value?.transient), Le = o(() => H.value ? H.value : U.value ? W.value ? "primary" : U.value.tone : null), Re = o(() => !H.value && !!U.value?.hollow), G = o(() => {
 			let e = F.value;
 			if (Ke(e)) return "empty";
 			if (w.color || w.cell?.color) return "status";
@@ -229,7 +229,7 @@ var A = /*@__PURE__*/ f({
 			G.value === "date" && Te();
 		}), oe(() => {
 			G.value === "date" && E(), j.value && k(j.value);
-		}), (e, o) => (h(), l("span", {
+		}), (t, o) => (h(), l("span", {
 			class: m(["max-w-full min-w-0 items-center gap-1.5 align-middle", [
 				R.value ? "flex w-full" : "inline-flex",
 				R.value === "center" && "justify-center",
@@ -238,7 +238,7 @@ var A = /*@__PURE__*/ f({
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-cell-value"
-		}, [f.loading ? (h(), s(r, {
+		}, [f.loading ? (h(), s(i, {
 			key: 0,
 			width: "96px"
 		})) : (h(), l(a, { key: 1 }, [
@@ -263,7 +263,7 @@ var A = /*@__PURE__*/ f({
 					key: 1,
 					class: m(["size-1.5 shrink-0 rounded-full", Re.value ? "border border-muted bg-transparent" : Q.value[0]]),
 					"aria-hidden": "true"
-				}, null, 2)), d(v(q.value), 1)], 2)) : (h(), s(t, {
+				}, null, 2)), d(v(q.value), 1)], 2)) : (h(), s(n, {
 					key: 1,
 					status: String(F.value),
 					label: q.value,
@@ -278,7 +278,7 @@ var A = /*@__PURE__*/ f({
 					"rounded"
 				]))]),
 				_: 1
-			}, 16, ["class"])) : G.value === "status" ? (h(), s(i, {
+			}, 16, ["class"])) : G.value === "status" ? (h(), s(e, {
 				key: 3,
 				content: L.value
 			}, {
@@ -296,7 +296,7 @@ var A = /*@__PURE__*/ f({
 					key: 1,
 					class: m(["size-1.5 shrink-0 rounded-full", Re.value ? "border border-muted bg-transparent" : Q.value[0]]),
 					"aria-hidden": "true"
-				}, null, 2)), d(v(q.value), 1)], 2)) : (h(), s(t, {
+				}, null, 2)), d(v(q.value), 1)], 2)) : (h(), s(n, {
 					key: 1,
 					status: String(F.value),
 					label: q.value,
@@ -319,7 +319,7 @@ var A = /*@__PURE__*/ f({
 				key: 1,
 				class: "size-3.5 text-muted",
 				"aria-hidden": "true"
-			})), u("span", { class: m(!$(F.value) && "text-muted") }, v(q.value), 3)])) : G.value === "date" ? (h(), s(i, {
+			})), u("span", { class: m(!$(F.value) && "text-muted") }, v(q.value), 3)])) : G.value === "date" ? (h(), s(e, {
 				key: 5,
 				content: J.value
 			}, {
@@ -340,16 +340,16 @@ var A = /*@__PURE__*/ f({
 				key: 6,
 				class: m(["flex w-max min-w-0 items-center gap-2", M.value ? "flex-wrap" : "flex-nowrap"]),
 				style: ae({ maxWidth: f.maxWidth })
-			}, [(h(!0), l(a, null, ce(Ve.value, (e, t) => (h(), s(i, {
-				key: `${e.text}-${t}`,
-				content: e.text.length > 28 && !M.value ? e.text : "",
+			}, [(h(!0), l(a, null, ce(Ve.value, (t, n) => (h(), s(e, {
+				key: `${t.text}-${n}`,
+				content: t.text.length > 28 && !M.value ? t.text : "",
 				class: m(!M.value && "max-w-48 min-w-0")
 			}, {
 				default: x(() => [u("span", be, [G.value === "labels" ? (h(), s(y(pe), {
 					key: 0,
 					class: "size-3 shrink-0",
 					"aria-hidden": "true"
-				})) : c("", !0), u("span", xe, v(e.text), 1)])]),
+				})) : c("", !0), u("span", xe, v(t.text), 1)])]),
 				_: 2
 			}, 1032, ["content", "class"]))), 128)), X.value > 0 ? (h(), l("button", {
 				key: 0,
@@ -358,7 +358,7 @@ var A = /*@__PURE__*/ f({
 				"aria-expanded": M.value,
 				"aria-label": M.value ? `Show fewer ${Ge.value}` : `Show ${X.value} more ${Ge.value}`,
 				onClick: o[2] ||= S((e) => M.value = !M.value, ["stop"])
-			}, v(M.value ? "Show less" : `+${X.value} more`), 9, Se)) : c("", !0)], 6)) : (h(), s(i, {
+			}, v(M.value ? "Show less" : `+${X.value} more`), 9, Se)) : c("", !0)], 6)) : (h(), s(e, {
 				key: 7,
 				content: ze.value,
 				class: "min-w-0"
@@ -386,7 +386,7 @@ var A = /*@__PURE__*/ f({
 				}, v(q.value), 15, Ce))]),
 				_: 1
 			}, 8, ["content"])),
-			He.value ? (h(), s(i, {
+			He.value ? (h(), s(e, {
 				key: 8,
 				content: "View as JSON"
 			}, {
@@ -402,7 +402,7 @@ var A = /*@__PURE__*/ f({
 				})], 8, we)]),
 				_: 1
 			})) : c("", !0),
-			N.value ? (h(), s(n, {
+			N.value ? (h(), s(r, {
 				key: 9,
 				open: P.value,
 				"onUpdate:open": o[4] ||= (e) => P.value = e,

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

@@ -31,7 +31,10 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        /** Single checkbox: rich content beside the box in place of `label`, e.g. an icon and text. It's the checkbox's accessible name. */
+        label?: () => unknown;
+    };
     emit: ((event: "update:modelValue", value: T[]) => void) & ((event: "update:checked", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;

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

@@ -1,35 +1,35 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelCheckbox as y, withDirectives as b, withModifiers as x } from "vue";
-import { Check as S, Minus as C } from "@lucide/vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, useSlots as b, vModelCheckbox as x, withDirectives as S, withModifiers as C } from "vue";
+import { Check as w, Minus as T } from "@lucide/vue";
 //#region src/lib/components/AcCheckBox.vue?vue&type=script&setup=true&lang.ts
-var w = { class: "flex flex-col gap-3" }, T = ["for"], E = [
+var E = { class: "flex flex-col gap-3" }, D = ["for"], O = [
 	"id",
 	"name",
 	"value",
 	"disabled"
-], D = { class: "flex min-w-0 flex-col gap-1" }, O = { class: "font-medium" }, k = {
+], k = { class: "flex min-w-0 flex-col gap-1" }, A = { class: "font-medium" }, j = {
 	key: 0,
 	class: "text-xs text-muted"
-}, A = {
+}, M = {
 	key: 0,
 	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, j = [
+}, N = [
 	"name",
 	"checked",
 	"indeterminate",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], M = {
+], P = {
 	key: 0,
 	class: "flex min-w-0 flex-col gap-1"
-}, N = {
-	key: 0,
-	class: "font-medium"
-}, P = {
+}, F = { key: 0 }, I = {
 	key: 1,
+	class: "font-medium"
+}, L = {
+	key: 2,
 	class: "text-xs text-muted"
-}, F = ["id"], I = /*@__PURE__*/ o({
+}, R = ["id"], z = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcCheckBox",
 	props: /*@__PURE__*/ s({
@@ -58,75 +58,75 @@ var w = { class: "flex flex-col gap-3" }, T = ["for"], E = [
 	}),
 	emits: ["update:modelValue", "update:checked"],
 	setup(o) {
-		let s = o, I = v(o, "modelValue"), L = v(o, "checked"), R = _(), z = g(), B = f(null), V = t(() => s.size === "small"), H = t(() => s.indeterminate && !L.value), U = t(() => s.options ? z : {
-			class: z.class,
-			style: z.style
-		}), W = t(() => {
-			let { class: e, style: t, ...n } = z;
-			return s.label || n["aria-label"] || n["aria-labelledby"] ? n : {
+		let s = o, z = y(o, "modelValue"), B = y(o, "checked"), V = b(), H = v(), U = _(), W = f(null), G = t(() => s.size === "small"), K = t(() => s.indeterminate && !B.value), q = t(() => s.options ? U : {
+			class: U.class,
+			style: U.style
+		}), J = t(() => {
+			let { class: e, style: t, ...n } = U;
+			return s.label || V.label || n["aria-label"] || n["aria-labelledby"] ? n : {
 				"aria-label": "Select",
 				...n
 			};
-		}), G = t(() => V.value ? "size-[18px]" : "size-6"), K = t(() => [
-			"peer cursor-pointer appearance-none rounded-4 border border-muted/70 transition-colors duration-200 group-hover:enabled:not-checked:not-indeterminate:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-surface-sunken",
-			G.value,
-			V.value ? "bg-background" : "bg-transparent"
-		]), q = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", V.value ? "size-3.5" : "size-5"]), J = t(() => ["cursor-not-allowed", V.value ? "opacity-40" : "opacity-50"]);
-		async function Y(e) {
-			L.value = e.target.checked, await l(), B.value && (B.value.checked = L.value, B.value.indeterminate = H.value);
+		}), Y = t(() => G.value ? "size-[18px]" : "size-6"), X = t(() => [
+			"peer cursor-pointer appearance-none rounded-4 border border-muted/70 transition-colors duration-200 group-hover:enabled:not-checked:not-indeterminate:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:not-checked:not-indeterminate:bg-surface-sunken",
+			Y.value,
+			G.value ? "bg-background" : "bg-transparent"
+		]), Z = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", G.value ? "size-3.5" : "size-5"]), Q = t(() => ["cursor-not-allowed", G.value ? "opacity-40" : "opacity-50"]);
+		async function $(e) {
+			B.value = e.target.checked, await l(), W.value && (W.value.checked = B.value, W.value.indeterminate = K.value);
 		}
 		return (t, s) => o.options ? (d(), r("div", c({
 			key: 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, U.value), [i("div", w, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
+		}, q.value), [i("div", E, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
 			key: e.label,
-			for: `${h(R)}-${t}`,
-			class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [e.disabled && J.value, V.value ? "gap-2.5" : "gap-3"]])
-		}, [i("span", { class: u(["relative inline-flex shrink-0", G.value]) }, [b(i("input", {
-			id: `${h(R)}-${t}`,
-			"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
+			for: `${g(H)}-${t}`,
+			class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [e.disabled && Q.value, G.value ? "gap-2.5" : "gap-3"]])
+		}, [i("span", { class: u(["relative inline-flex shrink-0", Y.value]) }, [S(i("input", {
+			id: `${g(H)}-${t}`,
+			"onUpdate:modelValue": s[0] ||= (e) => z.value = e,
 			type: "checkbox",
 			name: o.name,
 			value: e.value,
 			disabled: e.disabled,
-			class: u(K.value)
-		}, null, 10, E), [[y, I.value]]), a(h(S), {
-			class: u([q.value, "peer-checked:opacity-100"]),
+			class: u(X.value)
+		}, null, 10, O), [[x, z.value]]), a(g(w), {
+			class: u([Z.value, "peer-checked:opacity-100"]),
 			"aria-hidden": "true"
-		}, null, 8, ["class"])], 2), i("span", D, [i("span", O, m(e.label), 1), e.description ? (d(), r("span", k, m(e.description), 1)) : n("", !0)])], 10, T))), 128))]), o.errorMsg ? (d(), r("p", A, m(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
+		}, null, 8, ["class"])], 2), i("span", k, [i("span", A, h(e.label), 1), e.description ? (d(), r("span", j, h(e.description), 1)) : n("", !0)])], 10, D))), 128))]), o.errorMsg ? (d(), r("p", M, h(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
 			key: 1,
 			class: "inline-flex flex-col",
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, U.value, { onClick: s[1] ||= x(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [o.disabled && J.value, V.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", G.value]) }, [
+		}, q.value, { onClick: s[1] ||= C(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [o.disabled && Q.value, G.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", Y.value]) }, [
 			i("input", c({
 				ref_key: "single",
-				ref: B,
+				ref: W,
 				type: "checkbox",
 				name: o.name,
-				checked: L.value,
-				indeterminate: H.value,
+				checked: B.value,
+				indeterminate: K.value,
 				disabled: o.disabled,
 				"aria-invalid": o.errorMsg ? !0 : void 0,
-				"aria-describedby": o.errorMsg ? `${h(R)}-error` : void 0,
-				class: K.value
-			}, W.value, { onChange: Y }), null, 16, j),
-			a(h(S), {
-				class: u([q.value, "peer-checked:opacity-100"]),
+				"aria-describedby": o.errorMsg ? `${g(H)}-error` : void 0,
+				class: X.value
+			}, J.value, { onChange: $ }), null, 16, N),
+			a(g(w), {
+				class: u([Z.value, "peer-checked:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]),
-			a(h(C), {
-				class: u([q.value, "peer-indeterminate:opacity-100"]),
+			a(g(T), {
+				class: u([Z.value, "peer-indeterminate:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])
-		], 2), o.label || o.description ? (d(), r("span", M, [o.label ? (d(), r("span", N, m(o.label), 1)) : n("", !0), o.description ? (d(), r("span", P, m(o.description), 1)) : n("", !0)])) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
+		], 2), o.label || t.$slots.label || o.description ? (d(), r("span", P, [t.$slots.label ? (d(), r("span", F, [m(t.$slots, "label")])) : o.label ? (d(), r("span", I, h(o.label), 1)) : n("", !0), o.description ? (d(), r("span", L, h(o.description), 1)) : n("", !0)])) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
 			key: 0,
-			id: `${h(R)}-error`,
+			id: `${g(H)}-error`,
 			class: "mt-1 text-base text-danger-strong",
 			role: "alert"
-		}, m(o.errorMsg), 9, F)) : n("", !0)], 16));
+		}, h(o.errorMsg), 9, R)) : n("", !0)], 16));
 	}
 });
 //#endregion
-export { I as default };
+export { z as default };

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

@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     max: number;
     size: "small" | "normal" | "large" | number;
     strokeWidth: number;
-    indeterminate: boolean;
     showLabel: boolean;
+    indeterminate: boolean;
     valueText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -31,6 +31,14 @@ export interface Props {
     label?: string;
     /** Draws the border and rounded corners. Turn off inside a card or modal body that has its own. */
     bordered?: boolean;
+    /** Shows `label` above the editor as a form field label, as cloud-ui's editor field. */
+    showLabel?: boolean;
+    /** Adds a red asterisk after the shown label and sets `aria-required`. */
+    required?: boolean;
+    /** Error text under the editor, e.g. "Paste a kubeconfig". Sets `aria-invalid` on the text area. */
+    errorMsg?: string;
+    /** Lists each problem under the editor, with a button that jumps to it. Turn off for cloud-ui's look, where the underlines and gutter marks are the only sign. */
+    showProblems?: boolean;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -63,6 +71,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:view"?: ((value: "edit" | "changes") => any) | undefined;
 }>, {
     bordered: boolean;
+    required: boolean;
     label: string;
     title: string;
     height: string;
@@ -77,6 +86,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     placeholder: string;
     copyable: boolean;
     diffLayout: "unified" | "split";
+    showLabel: boolean;
+    errorMsg: string;
+    showProblems: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;