@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,12 +1,12 @@
 export interface Props {
-    /** Small uppercase heading above the items. Hidden in the collapsed rail, where a divider takes its place. */
+    /** Small uppercase heading above the items. Hidden in the collapsed rail, where a divider takes its place. A section inside another section is a sub-group, like cloud-ui's Networking → VPC. */
     label?: string;
     /** Turns the heading into a button that shows and hides the items. */
     collapsible?: boolean;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
-    /** The section's `AcSidebarItem`s. */
+    /** The section's `AcSidebarItem`s, or nested `AcSidebarSection`s for sub-groups. */
     default?: () => unknown;
 };
 type __VLS_ModelProps = {

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

@@ -1,10 +1,7 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useId as m, useModel as h } from "vue";
-import { ChevronRight as g } 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, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, provide as d, renderSlot as f, toDisplayString as p, unref as m, useId as h, useModel as g } from "vue";
+import { ChevronRight as _ } from "@lucide/vue";
 //#region src/lib/components/AcSidebarSection.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-expanded", "aria-controls"], v = { class: "truncate" }, y = {
-	key: 1,
-	class: "mb-2 truncate px-1 py-0.5 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-}, b = ["id", "aria-label"], x = /*@__PURE__*/ o({
+var v = ["aria-expanded", "aria-controls"], y = { class: "truncate" }, b = ["inert"], x = ["id", "aria-label"], S = /*@__PURE__*/ o({
 	__name: "AcSidebarSection",
 	props: /*@__PURE__*/ c({
 		label: { default: "" },
@@ -21,28 +18,36 @@ var _ = ["aria-expanded", "aria-controls"], v = { class: "truncate" }, y = {
 	}),
 	emits: ["update:open"],
 	setup(o) {
-		let c = h(o, "open"), x = s("ac-sidebar", null), S = m(), C = t(() => x?.rail.value ?? !1);
+		let c = g(o, "open"), S = s("ac-sidebar", null), C = s("ac-sidebar-section", !1);
+		d("ac-sidebar-section", !0), d("ac-sidebar-subgroup", C);
+		let w = h(), T = t(() => S?.rail.value ?? !1), E = t(() => c.value || T.value), D = t(() => C ? "mt-2 first:mt-0" : T.value ? "mt-2 border-t border-muted/20 pt-2 first:mt-0 first:border-0 first:pt-0" : "mt-4 first:mt-0 [[data-testid=ac-sidebar-section]+&]:mt-5 [[data-testid=ac-sidebar-section]+&]:border-t [[data-testid=ac-sidebar-section]+&]:border-muted/20 [[data-testid=ac-sidebar-section]+&]:pt-4");
 		return (t, s) => (u(), r("li", {
-			class: l(["list-none", C.value ? "mt-2 border-t border-muted/20 pt-2 first:mt-0 first:border-0 first:pt-0" : "mt-4 border-t border-muted/20 pt-4 first:mt-0 first:border-0 first:pt-0"]),
+			class: l(["list-none", D.value]),
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-section"
-		}, [o.label && !C.value ? (u(), r(e, { key: 0 }, [o.collapsible ? (u(), r("button", {
+		}, [o.label && !T.value ? (u(), r(e, { key: 0 }, [o.collapsible ? (u(), r("button", {
 			key: 0,
 			type: "button",
-			class: "mb-2 flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-1 py-0.5 text-left text-sm font-semibold tracking-[0.08em] text-muted uppercase transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
+			class: l(["flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-1 py-0.5 text-left font-semibold tracking-[0.08em] uppercase transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset", m(C) ? "mb-1 text-xm text-muted/80" : "mb-2 text-sm text-muted"]),
 			"aria-expanded": c.value,
-			"aria-controls": `${p(S)}-items`,
+			"aria-controls": `${m(w)}-items`,
 			onClick: s[0] ||= (e) => c.value = !c.value
-		}, [i("span", v, f(o.label), 1), a(p(g), {
-			class: l(["size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none", c.value && "rotate-90"]),
+		}, [i("span", y, p(o.label), 1), a(m(_), {
+			class: l(["shrink-0 text-muted/70 transition-transform duration-200 ease-out motion-reduce:transition-none", [m(C) ? "size-3.5" : "size-4", c.value && "rotate-90"]]),
 			"aria-hidden": "true"
-		}, null, 8, ["class"])], 8, _)) : (u(), r("p", y, f(o.label), 1))], 64)) : n("", !0), i("ul", {
-			id: `${p(S)}-items`,
+		}, null, 8, ["class"])], 10, v)) : (u(), r("p", {
+			key: 1,
+			class: l(["truncate px-1 py-0.5 font-semibold tracking-[0.08em] uppercase", m(C) ? "mb-1 text-xm text-muted/80" : "mb-2 text-sm text-muted"])
+		}, p(o.label), 3))], 64)) : n("", !0), i("div", {
+			class: l(["grid transition-[grid-template-rows,opacity] duration-300 ease-out-soft motion-reduce:transition-none", E.value ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"]),
+			inert: !E.value || void 0
+		}, [i("ul", {
+			id: `${m(w)}-items`,
 			role: "list",
 			"aria-label": o.label || void 0,
-			class: l(["flex-col gap-1", c.value || C.value || !o.collapsible ? "flex" : "hidden"])
-		}, [d(t.$slots, "default")], 10, b)], 2));
+			class: l(["flex min-h-0 flex-col gap-1 overflow-hidden", [m(C) && !T.value && "pl-1", E.value && "pb-0.5"]])
+		}, [f(t.$slots, "default")], 10, x)], 10, b)], 2));
 	}
 });
 //#endregion
-export { x as default };
+export { S as default };

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

@@ -76,7 +76,7 @@ var f = {
 					class: "flex items-center gap-2 py-1",
 					"aria-current": e.id === a.activeSubstep ? "step" : void 0
 				}, [i("span", {
-					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < T(f) ? "bg-primary text-white" : c === T(f) ? "bg-surface text-primary ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
+					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < T(f) ? "bg-primary text-white" : c === T(f) ? "bg-surface text-primary-strong ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
 					"aria-hidden": "true"
 				}, [c < T(f) ? (s(), t(u(d), {
 					key: 0,

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

@@ -7,6 +7,8 @@ export interface Props {
     disabled?: boolean;
     /** Error text under the switch. */
     errorMsg?: string;
+    /** Pulses the track and blocks changes, e.g. while the new value is saved. Sets `aria-busy`. */
+    loading?: boolean;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -32,6 +34,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     disabled: boolean;
     name: string;
+    loading: boolean;
     errorMsg: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,26 +1,31 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _ } from "vue";
-import { CircleAlert as v } from "@lucide/vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, normalizeClass as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, unref as f, useAttrs as p, useId as m, useModel as h } from "vue";
 //#region src/lib/components/AcSwitch.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "flex items-center gap-2" }, b = ["for"], x = [
+var g = { class: "flex items-center gap-2" }, _ = ["for"], v = [
 	"id",
 	"name",
 	"aria-checked",
+	"aria-busy",
+	"aria-disabled",
 	"disabled"
-], S = {
+], y = {
 	key: 0,
-	class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, C = /*@__PURE__*/ o({
+}, b = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "AcSwitch",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ a({
 		label: { default: "" },
 		name: { default: "" },
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		errorMsg: { default: "" }
+		errorMsg: { default: "" },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
 	}, {
 		modelValue: {
 			type: Boolean,
@@ -29,44 +34,46 @@ var y = { class: "flex items-center gap-2" }, b = ["for"], x = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o, { expose: s }) {
-		let C = _(o, "modelValue"), w = g(), T = h(), E = e(() => ({
-			class: T.class,
-			style: T.style
-		})), D = e(() => {
-			let { class: e, style: t, ...n } = T;
+	setup(i, { expose: a }) {
+		let b = i, x = h(i, "modelValue"), S = m(), C = p(), w = e(() => ({
+			class: C.class,
+			style: C.style
+		})), T = e(() => {
+			let { class: e, style: t, ...n } = C;
 			return n;
-		}), O = d(null);
-		return s({ focus: () => O.value?.focus() }), (e, s) => (u(), n("div", c(E.value, {
+		}), E = l(null);
+		function D() {
+			b.disabled || b.loading || (x.value = !x.value);
+		}
+		return a({ focus: () => E.value?.focus() }), (e, a) => (c(), n("div", o(w.value, {
 			"data-ac-ds": "",
 			"data-testid": "ac-switch"
-		}), [r("div", y, [
-			f(e.$slots, "left"),
-			o.label ? (u(), n("label", {
+		}), [r("div", g, [
+			u(e.$slots, "left"),
+			i.label ? (c(), n("label", {
 				key: 0,
-				for: m(w),
-				class: l(["cursor-pointer text-base font-medium text-heading", o.disabled && "cursor-not-allowed opacity-50"])
-			}, p(o.label), 11, b)) : t("", !0),
-			f(e.$slots, "middle"),
-			r("button", c({
-				id: m(w),
+				for: f(S),
+				class: s(["cursor-pointer text-base font-medium text-heading", i.disabled && "cursor-not-allowed opacity-50"])
+			}, d(i.label), 11, _)) : t("", !0),
+			u(e.$slots, "middle"),
+			r("button", o({
+				id: f(S),
 				ref_key: "button",
-				ref: O
-			}, D.value, {
+				ref: E
+			}, T.value, {
 				type: "button",
 				role: "switch",
-				name: o.name,
-				"aria-checked": C.value,
-				disabled: o.disabled,
-				class: ["relative h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors duration-200 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:opacity-50 motion-reduce:transition-none", C.value ? "bg-primary" : "bg-muted/45"],
-				onClick: s[0] ||= (e) => C.value = !C.value
-			}), [r("span", { class: l(["pointer-events-none absolute top-0.5 left-0.5 size-5 rounded-full bg-white shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none", C.value ? "translate-x-5" : "translate-x-0"]) }, null, 2)], 16, x),
-			f(e.$slots, "right")
-		]), o.errorMsg ? (u(), n("p", S, [a(m(v), {
-			class: "size-4 shrink-0",
-			"aria-hidden": "true"
-		}), i(" " + p(o.errorMsg), 1)])) : t("", !0)], 16));
+				name: i.name,
+				"aria-checked": x.value,
+				"aria-busy": i.loading || void 0,
+				"aria-disabled": i.loading && !i.disabled || void 0,
+				disabled: i.disabled,
+				class: ["relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none motion-reduce:transition-none", [x.value ? "bg-primary" : "bg-slate-80", i.disabled ? "cursor-not-allowed opacity-50" : i.loading ? "cursor-wait animate-pulse motion-reduce:animate-none" : "cursor-pointer"]],
+				onClick: D
+			}), [r("span", { class: s(["pointer-events-none absolute top-0.5 left-0.5 size-5 rounded-full border bg-white transition-transform duration-200 ease-out motion-reduce:transition-none", x.value ? "translate-x-5 border-white" : "translate-x-0 border-slate-70"]) }, null, 2)], 16, v),
+			u(e.$slots, "right")
+		]), i.errorMsg ? (c(), n("p", y, d(i.errorMsg), 1)) : t("", !0)], 16));
 	}
 });
 //#endregion
-export { C as default };
+export { b as default };

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

@@ -12,11 +12,11 @@ export interface Props {
     icon?: Component;
     /** Adds a "Recommended" pill after the title. */
     recommended?: boolean;
-    /** The switch is on but won't take effect yet: tints the card amber instead of primary. Explain why in the default slot. */
+    /** The choice won't take effect yet: tints the card and status amber instead of primary, on or off. Explain why in the default slot. */
     warning?: boolean;
     /** Turns the switch and the card click off. */
     disabled?: boolean;
-    /** Shows a spinner beside the switch and blocks changes, e.g. while the change is saved. */
+    /** Shows a spinner beside the switch, pulses it and blocks changes, e.g. while the change is saved. */
     loading?: boolean;
 }
 type __VLS_Props = Props;
@@ -25,7 +25,7 @@ type __VLS_Slots = {
     badges?: () => unknown;
     /** Replaces the `status` text, e.g. a price with a muted unit. */
     status?: () => unknown;
-    /** Content under the row, shown only while the switch is on: settings revealed after enabling, or a warning about the choice. */
+    /** Content under the row, e.g. a warning about the choice. Wrap it in `v-if="model"` to show settings only while the switch is on. */
     default?: () => unknown;
 };
 type __VLS_ModelProps = {

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

@@ -5,13 +5,13 @@ import { Sparkles as T } from "@lucide/vue";
 //#region src/lib/components/AcSwitchCard.vue?vue&type=script&setup=true&lang.ts
 var E = ["aria-busy"], D = { class: "flex min-w-[200px] flex-1 items-start gap-3" }, O = { class: "min-w-0 flex-1" }, k = { class: "flex flex-wrap items-center gap-x-2 gap-y-1 text-base font-semibold text-heading" }, A = {
 	key: 0,
-	class: "inline-flex items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-sm font-bold tracking-wide text-primary-strong uppercase"
+	class: "inline-flex items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-xm font-bold tracking-wide text-primary-strong uppercase"
 }, j = { class: "ml-auto flex shrink-0 items-center gap-3" }, M = {
 	key: 0,
 	class: "text-sm text-muted"
 }, N = {
 	key: 0,
-	class: "mt-4 border-t border-border pt-4"
+	class: "mt-3"
 }, P = "a, button, input, select, textarea, label, [tabindex], [contenteditable]", F = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "AcSwitchCard",
@@ -52,12 +52,12 @@ var E = ["aria-busy"], D = { class: "flex min-w-[200px] flex-1 items-start gap-3
 		})), W = i(() => {
 			let { class: e, style: t, ...n } = H;
 			return n;
-		}), G = g(null), K = i(() => F.disabled || F.loading), q = i(() => I.value && !F.disabled && !F.warning), J = i(() => !!(F.status || F.statusDetail || L.status)), Y = i(() => [F.description && B, J.value && V].filter(Boolean).join(" ") || void 0), X = i(() => I.value && F.warning ? "border-warning/40 bg-[color-mix(in_srgb,var(--color-warning)_5%,var(--color-surface))]" : q.value ? "border-primary bg-[color-mix(in_srgb,var(--color-primary)_5%,var(--color-surface))] ring-1 ring-primary/30" : ["border-border bg-surface", !K.value && "hover:border-primary/30"]), Z = i(() => I.value && F.warning ? "text-warning-strong" : q.value ? "text-heading" : "text-muted");
+		}), G = g(null), K = i(() => F.disabled || F.loading), q = i(() => I.value && !F.disabled && !F.warning), J = i(() => !!(F.status || F.statusDetail || L.status)), Y = i(() => [F.description && B, J.value && V].filter(Boolean).join(" ") || void 0), X = i(() => F.warning ? "border-warning/40 bg-[color-mix(in_srgb,var(--color-warning)_5%,var(--color-surface))]" : q.value ? "border-primary/40 bg-[color-mix(in_srgb,var(--color-primary)_5%,var(--color-surface))]" : "border-border bg-surface-sunken/5"), Z = i(() => F.warning ? "text-warning-strong" : q.value ? "text-heading" : "text-muted");
 		function Q(e) {
 			return !!e?.some((e) => e.type !== n && (e.type !== r || Q(e.children)));
 		}
 		function $() {
-			return I.value && Q(L.default?.());
+			return Q(L.default?.());
 		}
 		function ee(e) {
 			if (K.value) return;
@@ -65,12 +65,12 @@ var E = ["aria-busy"], D = { class: "flex min-w-[200px] flex-1 items-start gap-3
 			t && e.currentTarget.contains(t) || window.getSelection()?.toString() || (I.value = !I.value, G.value?.focus());
 		}
 		return f({ focus: () => G.value?.focus() }), (n, r) => (h(), s("div", p(U.value, {
-			class: ["rounded-14 border p-4 transition-[background-color,border-color,box-shadow] duration-200 motion-reduce:transition-none", X.value],
+			class: ["rounded-14 border px-4 py-3 transition-colors duration-200 motion-reduce:transition-none", X.value],
 			"aria-busy": d.loading || void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-switch-card"
 		}), [c("div", {
-			class: m(["flex flex-wrap items-center justify-between gap-x-4 gap-y-3", K.value ? "cursor-not-allowed" : "cursor-pointer"]),
+			class: m(["flex flex-wrap items-center justify-between gap-x-4 gap-y-3", d.disabled ? "cursor-not-allowed" : d.loading ? "cursor-wait" : "cursor-pointer"]),
 			onClick: ee
 		}, [c("div", D, [d.icon ? (h(), s("span", {
 			key: 0,
@@ -104,12 +104,14 @@ var E = ["aria-busy"], D = { class: "flex min-w-[200px] flex-1 items-start gap-3
 			}, W.value, {
 				modelValue: I.value,
 				"onUpdate:modelValue": r[0] ||= (e) => I.value = e,
-				disabled: K.value,
+				disabled: d.disabled,
+				loading: d.loading,
 				"aria-labelledby": z,
 				"aria-describedby": Y.value
 			}), null, 16, [
 				"modelValue",
 				"disabled",
+				"loading",
 				"aria-describedby"
 			])
 		])], 2), $() ? (h(), s("div", N, [_(n.$slots, "default")])) : o("", !0)], 16, E));

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

@@ -1,39 +1,39 @@
 import e from "./AcCellValue.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useModel as y, withModifiers as b } from "vue";
-import { ArrowUp as x, Check as S, ChevronRight as C, ChevronsUpDown as w, Minus as te } from "@lucide/vue";
+import { Check as x, ChevronDown as S, ChevronRight as C, ChevronUp as w, Minus as te } from "@lucide/vue";
 //#region src/lib/components/AcTable.vue?vue&type=script&setup=true&lang.ts
-var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border-spacing-0 text-base" }, ie = { class: "relative flex size-4" }, ae = [
+var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border-spacing-0 text-base" }, ie = { class: "relative flex size-[18px]" }, ae = [
 	"checked",
 	"indeterminate",
 	"disabled"
-], oe = ["aria-sort", "onClick"], se = {
+], oe = ["aria-sort", "onClick"], se = { class: "inline-flex items-center gap-2" }, ce = {
 	key: 0,
-	class: "h-12 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, ce = {
+	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
+}, T = {
 	key: 1,
-	class: "h-12 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, T = [
+	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
+}, E = [
 	"aria-current",
 	"aria-disabled",
 	"onClick"
-], E = [
+], le = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"onClick"
-], le = { class: "relative flex size-4" }, ue = [
+], ue = { class: "relative flex size-[18px]" }, D = [
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], de = {
+], O = {
 	key: 0,
 	class: "group",
 	"data-testid": "ac-table-detail"
-}, D = ["colspan"], O = ["id", "aria-label"], fe = {
+}, k = ["colspan"], de = ["id", "aria-label"], fe = {
 	key: 0,
 	class: "px-6 py-12 text-center text-muted"
-}, k = "border-border", A = "peer size-4 cursor-pointer appearance-none rounded-4 border border-muted/70 bg-surface align-middle transition-colors duration-150 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:opacity-50", j = /*@__PURE__*/ l({
+}, A = "border-border", j = "peer size-[18px] cursor-pointer appearance-none rounded-4 border border-muted/70 bg-background align-middle transition-colors duration-150 hover: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:opacity-50", M = /*@__PURE__*/ l({
 	__name: "AcTable",
 	props: /*@__PURE__*/ u({
 		columns: {},
@@ -95,17 +95,17 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 		"update:sortBy"
 	]),
 	setup(l, { emit: u }) {
-		let j = l, M = y(l, "selected"), N = y(l, "expanded"), P = u, F = ee(), I = y(l, "sortBy"), L = n(() => I.value?.key ?? ""), R = n(() => I.value?.mode ?? "asc"), z = (e) => {
+		let M = l, N = y(l, "selected"), P = y(l, "expanded"), F = u, I = ee(), L = y(l, "sortBy"), R = n(() => L.value?.key ?? ""), z = n(() => L.value?.mode ?? "asc"), B = (e) => {
 			if (!e.sortable) return;
-			let t = L.value === e.key && R.value === "asc" ? "desc" : "asc";
-			I.value = {
+			let t = R.value === e.key && z.value === "asc" ? "desc" : "asc";
+			L.value = {
 				key: e.key,
 				mode: t
-			}, P("sort", e.key, t);
-		}, B = n(() => {
-			if (!L.value || j.manualSort) return j.rows;
-			let e = L.value, t = R.value === "asc" ? 1 : -1;
-			return [...j.rows].sort((n, r) => String(H(n[e]) ?? "").localeCompare(String(H(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+			}, F("sort", e.key, t);
+		}, pe = n(() => {
+			if (!R.value || M.manualSort) return M.rows;
+			let e = R.value, t = z.value === "asc" ? 1 : -1;
+			return [...M.rows].sort((n, r) => String(H(n[e]) ?? "").localeCompare(String(H(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
 		});
 		function V(e) {
 			return typeof e == "object" && !!e && !Array.isArray(e) && "data" in e;
@@ -113,23 +113,23 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 		function H(e) {
 			return V(e) ? e.sort ?? e.data : e;
 		}
-		let U = (e) => !!j.rowDisabled?.(e), W = n(() => j.rows.filter((e) => !U(e)).map((e) => e[j.rowKey])), G = n(() => new Set(M.value)), K = n(() => W.value.length > 0 && W.value.every((e) => G.value.has(e))), q = n(() => !K.value && W.value.some((e) => G.value.has(e)));
-		function pe() {
+		let U = (e) => !!M.rowDisabled?.(e), W = n(() => M.rows.filter((e) => !U(e)).map((e) => e[M.rowKey])), G = n(() => new Set(N.value)), K = n(() => W.value.length > 0 && W.value.every((e) => G.value.has(e))), q = n(() => !K.value && W.value.some((e) => G.value.has(e)));
+		function me() {
 			let e = new Set(W.value);
-			M.value = K.value ? M.value.filter((t) => !e.has(t)) : [...M.value, ...W.value.filter((e) => !G.value.has(e))];
+			N.value = K.value ? N.value.filter((t) => !e.has(t)) : [...N.value, ...W.value.filter((e) => !G.value.has(e))];
 		}
-		function me(e) {
-			let t = e[j.rowKey];
-			M.value = G.value.has(t) ? M.value.filter((e) => e !== t) : [...M.value, t];
+		function he(e) {
+			let t = e[M.rowKey];
+			N.value = G.value.has(t) ? N.value.filter((e) => e !== t) : [...N.value, t];
 		}
-		let J = n(() => new Set(N.value)), Y = (e) => j.expandable && J.value.has(e[j.rowKey]), X = (e) => !j.canExpand || j.canExpand(e), Z = (e) => `${F}-detail-${String(e[j.rowKey])}`, he = n(() => j.columns.length + +!!j.selectable + +!!j.expandable);
-		function ge(e) {
-			let t = e[j.rowKey];
-			N.value = J.value.has(t) ? N.value.filter((e) => e !== t) : [...N.value, t];
+		let J = n(() => new Set(P.value)), Y = (e) => M.expandable && J.value.has(e[M.rowKey]), X = (e) => !M.canExpand || M.canExpand(e), Z = (e) => `${I}-detail-${String(e[M.rowKey])}`, ge = n(() => M.columns.length + +!!M.selectable + +!!M.expandable);
+		function _e(e) {
+			let t = e[M.rowKey];
+			P.value = J.value.has(t) ? P.value.filter((e) => e !== t) : [...P.value, t];
 		}
 		function Q(e) {
-			let t = e[j.columns[0]?.key ?? ""], n = V(t) ? t.data : t;
-			return typeof n == "string" || typeof n == "number" ? n : String(e[j.rowKey]);
+			let t = e[M.columns[0]?.key ?? ""], n = V(t) ? t.data : t;
+			return typeof n == "string" || typeof n == "number" ? n : String(e[M.rowKey]);
 		}
 		let $ = (e) => ({
 			left: "text-left",
@@ -144,22 +144,22 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 			l.expandable ? (p(), a("th", {
 				key: 0,
 				scope: "col",
-				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-0 pl-4", [k, !l.flat && "first:rounded-tl-10"]])
+				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-0 pl-4", [A, !l.flat && "first:rounded-tl-10"]])
 			}, [...u[2] ||= [o("span", { class: "sr-only" }, "Expand", -1)]], 2)) : i("", !0),
 			l.selectable ? (p(), a("th", {
 				key: 1,
 				scope: "col",
-				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-1 pl-4", [k, !l.flat && "first:rounded-tl-10"]])
+				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-1 pl-4", [A, !l.flat && "first:rounded-tl-10"]])
 			}, [o("span", ie, [o("input", {
 				type: "checkbox",
-				class: d(A),
+				class: d(j),
 				checked: K.value,
 				indeterminate: q.value,
 				disabled: l.loading || !l.rows.length,
 				"aria-label": "Select all rows",
-				onChange: pe
-			}, null, 40, ae), (p(), r(g(q.value ? v(te) : v(S)), {
-				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
+				onChange: me
+			}, null, 40, ae), (p(), r(g(q.value ? v(te) : v(x)), {
+				class: "pointer-events-none absolute inset-0 m-auto size-3.5 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
 			}))])], 2)) : i("", !0),
@@ -167,44 +167,44 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 				key: e.key,
 				scope: "col",
 				class: d(["h-11 border-b bg-surface-sunken/50 px-6 text-base font-semibold whitespace-nowrap text-muted", [
-					k,
+					A,
 					!l.flat && "first:rounded-tl-10 last:rounded-tr-10",
 					$(e),
 					e.sortable && "cursor-pointer select-none transition-colors hover:text-heading"
 				]]),
 				style: f(e.width ? { width: e.width } : void 0),
-				"aria-sort": L.value === e.key ? R.value === "asc" ? "ascending" : "descending" : void 0,
-				onClick: (t) => z(e)
-			}, [o("span", { class: d(["inline-flex items-center gap-2", L.value === e.key && "text-heading"]) }, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(L.value === e.key ? v(x) : v(w)), {
+				"aria-sort": R.value === e.key ? z.value === "asc" ? "ascending" : "descending" : void 0,
+				onClick: (t) => B(e)
+			}, [o("span", se, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(R.value === e.key && z.value === "asc" ? v(w) : v(S)), {
 				key: 0,
-				class: d(["size-4 shrink-0 transition-transform", [L.value === e.key ? "text-primary" : "text-muted/70", L.value === e.key && R.value === "desc" && "rotate-180"]]),
+				class: d(["size-4 shrink-0", R.value === e.key ? "text-primary-strong" : "text-muted"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : i("", !0)], 2)], 14, oe))), 128))
+			}, null, 8, ["class"])) : i("", !0)])], 14, oe))), 128))
 		])]), o("tbody", null, [l.loading ? (p(!0), a(t, { key: 0 }, m(l.loaderRows, (e) => (p(), a("tr", { key: `loader-${e}` }, [
-			l.expandable ? (p(), a("td", se)) : i("", !0),
-			l.selectable ? (p(), a("td", ce)) : i("", !0),
+			l.expandable ? (p(), a("td", ce)) : i("", !0),
+			l.selectable ? (p(), a("td", T)) : i("", !0),
 			(p(!0), a(t, null, m(l.columns, (t, n) => (p(), a("td", {
 				key: t.key,
-				class: "h-12 border-b border-border px-6 [tr:last-child_&]:border-0"
+				class: "h-11 border-b border-border px-6 [tr:last-child_&]:border-0"
 			}, [o("span", {
 				class: "block h-2.5 animate-pulse rounded-full bg-surface-sunken",
 				style: f({ width: `${50 + (e * 17 + n * 23) % 40}%` })
 			}, null, 4)]))), 128))
-		]))), 128)) : (p(!0), a(t, { key: 1 }, m(B.value, (f, g) => (p(), a(t, { key: String(f[l.rowKey] ?? g) }, [o("tr", {
+		]))), 128)) : (p(!0), a(t, { key: 1 }, m(pe.value, (f, g) => (p(), a(t, { key: String(f[l.rowKey] ?? g) }, [o("tr", {
 			"data-testid": "ac-table-row",
-			class: d(["group transition-colors duration-150 hover:bg-surface-sunken/40", [
-				l.clickable && "cursor-pointer",
+			class: d(["group transition-colors duration-150", [
+				l.clickable && "cursor-pointer hover:bg-surface-sunken/40",
 				(l.rowActive?.(f) || l.selectable && G.value.has(f[l.rowKey])) && "bg-primary/5",
 				l.rowActive?.(f) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
 				U(f) && "pointer-events-none cursor-not-allowed opacity-50"
 			]]),
 			"aria-current": l.rowActive?.(f) ? "true" : void 0,
 			"aria-disabled": U(f) || void 0,
-			onClick: (e) => l.clickable && !U(f) && P("row-click", f)
+			onClick: (e) => l.clickable && !U(f) && F("row-click", f)
 		}, [
 			l.expandable ? (p(), a("td", {
 				key: 0,
-				class: "h-12 w-10 border-b border-border pr-0 pl-4 group-last:border-0",
+				class: "h-11 w-10 border-b border-border pr-0 pl-4 group-last:border-0",
 				onClick: u[0] ||= b(() => {}, ["stop"])
 			}, [X(f) ? (p(), a("button", {
 				key: 0,
@@ -214,30 +214,30 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 				"aria-controls": Z(f),
 				"aria-label": `${Y(f) ? "Collapse" : "Expand"} ${Q(f)}`,
 				"data-testid": "ac-table-expand",
-				onClick: (e) => ge(f)
+				onClick: (e) => _e(f)
 			}, [c(v(C), {
 				class: d(["size-4 transition-transform duration-150 motion-reduce:transition-none", Y(f) && "rotate-90"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 8, E)) : i("", !0)])) : i("", !0),
+			}, null, 8, ["class"])], 8, le)) : i("", !0)])) : i("", !0),
 			l.selectable ? (p(), a("td", {
 				key: 1,
-				class: "h-12 w-10 border-b border-border pr-1 pl-4 group-last:border-0",
+				class: "h-11 w-10 border-b border-border pr-1 pl-4 group-last:border-0",
 				onClick: u[1] ||= b(() => {}, ["stop"])
-			}, [o("span", le, [o("input", {
+			}, [o("span", ue, [o("input", {
 				type: "checkbox",
-				class: d(A),
+				class: d(j),
 				checked: G.value.has(f[l.rowKey]),
 				disabled: U(f),
 				"aria-label": `Select ${Q(f)}`,
-				onChange: (e) => me(f)
-			}, null, 40, ue), c(v(S), {
-				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100",
+				onChange: (e) => he(f)
+			}, null, 40, D), c(v(x), {
+				class: "pointer-events-none absolute inset-0 m-auto size-3.5 text-white opacity-0 peer-checked:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
 			})])])) : i("", !0),
 			(p(!0), a(t, null, m(l.columns, (i) => (p(), a("td", {
 				key: i.key,
-				class: d(["h-12 border-b border-border px-6 whitespace-nowrap text-body tabular-nums group-last:border-0", $(i)])
+				class: d(["h-11 border-b border-border px-6 whitespace-nowrap text-body tabular-nums group-last:border-0", $(i)])
 			}, [h(n.$slots, `cell-${i.key}`, {
 				row: f,
 				value: f[i.key]
@@ -257,16 +257,16 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 				"title",
 				"resolve-link"
 			])) : (p(), a(t, { key: 1 }, [s(_(f[i.key]), 1)], 64))])], 2))), 128))
-		], 10, T), Y(f) && X(f) ? (p(), a("tr", de, [o("td", {
-			colspan: he.value,
+		], 10, E), Y(f) && X(f) ? (p(), a("tr", O, [o("td", {
+			colspan: ge.value,
 			class: "border-b border-border bg-surface-muted p-0 group-last:border-0"
 		}, [o("div", {
 			id: Z(f),
 			role: "region",
 			"aria-label": `Details for ${Q(f)}`,
 			class: "px-6 py-4 text-body"
-		}, [h(n.$slots, "expanded", { row: f })], 8, O)], 8, D)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", fe, [h(n.$slots, "empty", {}, () => [s(_(l.emptyText), 1)])])) : i("", !0)], 2));
+		}, [h(n.$slots, "expanded", { row: f })], 8, de)], 8, k)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", fe, [h(n.$slots, "empty", {}, () => [s(_(l.emptyText), 1)])])) : i("", !0)], 2));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

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

@@ -1,6 +1,9 @@
+import type { Component } from "vue";
 export interface TabItem {
     key: string;
     label: string;
+    /** A Lucide icon shown at 16px before the label, in the tab's colour. */
+    icon?: Component;
     count?: number;
     disabled?: boolean;
     /** Makes the tab a `RouterLink` to this route (needs vue-router in the app). The tab for the current route becomes active by itself. */
@@ -11,8 +14,10 @@ export interface TabItem {
     testid?: string;
 }
 export interface Props {
-    /** The tabs: `{ key, label, count?, disabled?, to?, href?, testid? }`. `v-model` holds the active `key`. With `to`, it follows the current route. */
+    /** The tabs: `{ key, label, icon?, count?, disabled?, to?, href?, testid? }`. `v-model` holds the active `key`. With `to`, it follows the current route. */
     items: TabItem[];
+    /** `soft` is cloud-ui's tab: a tinted active tab with rounded top corners, 4px apart, wrapping onto a second line when crowded. `underline` is a bare label with a 2px line under the active tab, 24px apart, scrolling sideways. */
+    variant?: "soft" | "underline";
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -29,7 +34,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    variant: "soft" | "underline";
+}, {}, {}, {}, 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;