@ac-design/design-system 2.3.0 → 2.4.1

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

@@ -1,7 +1,9 @@
 import e from "./AcSpinner.js";
-import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
+import t from "./AcTooltip.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, guardReactiveProps as s, mergeProps as c, normalizeClass as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useAttrs as h, withCtx as g } from "vue";
 //#region src/lib/components/AcButton.vue?vue&type=script&setup=true&lang.ts
-var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
+var _ = "[:where(&)_svg]:size-4", v = /*@__PURE__*/ o({
+	inheritAttrs: !1,
 	__name: "AcButton",
 	props: {
 		title: { default: "" },
@@ -30,11 +32,16 @@ var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
 			type: Boolean,
 			default: !1
 		},
-		hint: { default: void 0 }
+		hint: { default: void 0 },
+		tooltip: { default: "" },
+		block: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	emits: ["click"],
-	setup(a, { emit: p }) {
-		let m = a, h = p, g = {
+	setup(o, { emit: v }) {
+		let y = o, b = v, x = {
 			primary: {
 				solid: "border-transparent bg-primary text-white shadow-button hover:bg-primary-hover hover:shadow-sm",
 				light: "border-transparent bg-primary/12 text-primary-strong hover:bg-primary/18",
@@ -77,7 +84,7 @@ var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
 				outlined: "border-border bg-background text-heading hover:bg-surface-sunken/70",
 				ghost: "border-transparent bg-transparent text-heading hover:bg-surface-sunken"
 			}
-		}, _ = {
+		}, S = {
 			primary: "text-primary-strong",
 			info: "text-info-strong",
 			success: "text-success-strong",
@@ -86,7 +93,7 @@ var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
 			neutral: "text-muted hover:text-heading",
 			white: "text-muted hover:text-heading",
 			ghost: "text-muted hover:text-heading"
-		}, v = t(() => m.variant === "link"), y = t(() => v.value && !m.boxed), b = t(() => m.variant === "link" ? _[m.color] : m.color === "white" ? g.neutral.outlined : m.color === "ghost" ? g.neutral.ghost : g[m.color][m.variant]), x = {
+		}, C = n(() => y.variant === "link"), w = n(() => C.value && !y.boxed), T = n(() => y.variant === "link" ? S[y.color] : y.color === "white" ? x.neutral.outlined : y.color === "ghost" ? x.neutral.ghost : x[y.color][y.variant]), E = {
 			xs: {
 				base: "h-7 gap-1.5 px-2 text-xs",
 				icon: "size-7 text-xs"
@@ -107,73 +114,87 @@ var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
 				base: "h-12 gap-2 px-6 text-lg md:h-13 md:text-xl",
 				icon: "size-14 text-xl"
 			}
-		}, S = {
+		}, D = {
 			xs: "gap-1 text-xs [:where(&)_svg]:size-3.5",
-			small: `gap-1 text-base ${f}`,
-			normal: `gap-1 text-base ${f}`,
-			medium: `gap-1 text-base md:text-lg ${f}`,
-			xlarge: `gap-1 text-lg md:text-xl ${f}`
-		}, C = t(() => {
-			if (y.value) return [S[m.size], m.rounded ? "rounded-full" : "rounded-4"];
-			let e = x[m.size];
-			return m.iconOnly ? [`${e.icon} rounded-full`, f] : [
+			small: `gap-1 text-base ${_}`,
+			normal: `gap-1 text-base ${_}`,
+			medium: `gap-1 text-base md:text-lg ${_}`,
+			xlarge: `gap-1 text-lg md:text-xl ${_}`
+		}, O = n(() => {
+			if (w.value) return [D[y.size], y.rounded ? "rounded-full" : "rounded-4"];
+			let e = E[y.size];
+			return y.iconOnly ? [`${e.icon} rounded-full`, _] : [
 				e.base,
-				m.rounded ? "rounded-full" : "rounded-10",
-				f
+				y.rounded ? "rounded-full" : "rounded-10",
+				_
 			];
-		}), w = t(() => y.value ? "group/ac-button underline-offset-4 hover:underline" : v.value ? "group/ac-button justify-center border border-transparent underline-offset-4 hover:underline" : "justify-center border active:translate-y-px disabled:shadow-none disabled:active:translate-y-0 motion-reduce:active:translate-y-0"), T = (e) => {
-			!m.disabled && !m.loading && h("click", e);
+		}), k = n(() => w.value ? "group/ac-button underline-offset-4 hover:underline" : C.value ? "group/ac-button justify-center border border-transparent underline-offset-4 hover:underline" : "justify-center border active:translate-y-px disabled:shadow-none disabled:active:translate-y-0 motion-reduce:active:translate-y-0"), A = h(), j = (e, { slots: t }) => t.default?.(), M = n(() => y.tooltip ? {
+			content: y.tooltip,
+			class: [A.class, y.block && "w-full"],
+			style: A.style
+		} : {}), N = n(() => {
+			if (!y.tooltip) return A;
+			let { class: e, style: t, ...n } = A;
+			return n;
+		}), P = (e) => {
+			!y.disabled && !y.loading && b("click", e);
 		};
-		return (t, f) => (s(), n(l(a.href ? "a" : "button"), {
-			href: a.href && !a.disabled ? a.href : void 0,
-			type: a.href ? void 0 : a.type,
-			disabled: !a.href && a.disabled || void 0,
-			"aria-disabled": a.href && a.disabled || void 0,
-			"aria-busy": a.loading || void 0,
-			title: a.hint || void 0,
-			class: o(["relative inline-flex cursor-pointer items-center font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-200 select-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
-				w.value,
-				b.value,
-				"focus-visible:ring-ring",
-				C.value,
-				a.loading && "pointer-events-none"
-			]]),
-			"data-ac-ds": "",
-			"data-testid": "ac-button",
-			onClick: T
-		}, {
-			default: d(() => [
-				a.loading ? (s(), n(e, {
-					key: 0,
-					class: o(!a.iconOnly && !y.value && "-ml-0.5"),
-					label: ""
-				}, null, 8, ["class"])) : t.$slots.icon ? (s(), i("span", {
-					key: 1,
-					class: o([!a.iconOnly && !y.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
-					"aria-hidden": "true"
-				}, [c(t.$slots, "icon")], 2)) : r("", !0),
-				a.title ? (s(), i("span", {
-					key: 2,
-					class: o(a.iconOnly && "sr-only")
-				}, u(a.title), 3)) : r("", !0),
-				a.iconOnly && a.loading ? r("", !0) : c(t.$slots, "default", {}, void 0, void 0, 3),
-				t.$slots["icon-right"] ? (s(), i("span", {
-					key: 4,
-					class: o(["inline-flex shrink-0 items-center justify-center", v.value ? "transition-transform duration-200 group-hover/ac-button:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover/ac-button:translate-x-0" : "-mr-0.5"]),
-					"aria-hidden": "true"
-				}, [c(t.$slots, "icon-right")], 2)) : r("", !0)
-			]),
+		return (n, h) => (d(), r(p(o.tooltip ? t : j), u(s(M.value)), {
+			default: g(() => [(d(), r(p(o.href ? "a" : "button"), c({
+				"aria-label": o.iconOnly && !o.title && o.tooltip ? o.tooltip : void 0,
+				href: o.href && !o.disabled ? o.href : void 0,
+				type: o.href ? void 0 : o.type,
+				disabled: !o.href && o.disabled || void 0,
+				"aria-disabled": o.href && o.disabled || void 0,
+				"aria-busy": o.loading || void 0,
+				title: o.hint || void 0,
+				class: ["relative inline-flex cursor-pointer items-center font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-200 select-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
+					k.value,
+					T.value,
+					"focus-visible:ring-ring",
+					O.value,
+					o.loading && "pointer-events-none",
+					!o.hint && "disabled:pointer-events-none",
+					o.block && "w-full"
+				]],
+				"data-ac-ds": "",
+				"data-testid": "ac-button"
+			}, N.value, { onClick: P }), {
+				default: g(() => [
+					o.loading ? (d(), r(e, {
+						key: 0,
+						class: l(!o.iconOnly && !w.value && "-ml-0.5"),
+						label: ""
+					}, null, 8, ["class"])) : n.$slots.icon ? (d(), a("span", {
+						key: 1,
+						class: l([!o.iconOnly && !w.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
+						"aria-hidden": "true"
+					}, [f(n.$slots, "icon")], 2)) : i("", !0),
+					o.title ? (d(), a("span", {
+						key: 2,
+						class: l(o.iconOnly && "sr-only")
+					}, m(o.title), 3)) : i("", !0),
+					o.iconOnly && o.loading ? i("", !0) : f(n.$slots, "default", {}, void 0, void 0, 3),
+					n.$slots["icon-right"] ? (d(), a("span", {
+						key: 4,
+						class: l(["inline-flex shrink-0 items-center justify-center", C.value ? "transition-transform duration-200 group-hover/ac-button:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover/ac-button:translate-x-0" : "-mr-0.5"]),
+						"aria-hidden": "true"
+					}, [f(n.$slots, "icon-right")], 2)) : i("", !0)
+				]),
+				_: 3
+			}, 16, [
+				"aria-label",
+				"href",
+				"type",
+				"disabled",
+				"aria-disabled",
+				"aria-busy",
+				"title",
+				"class"
+			]))]),
 			_: 3
-		}, 8, [
-			"href",
-			"type",
-			"disabled",
-			"aria-disabled",
-			"aria-busy",
-			"title",
-			"class"
-		]));
+		}, 16));
 	}
 });
 //#endregion
-export { p as default };
+export { v 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;