@ac-design/design-system 2.7.0 → 2.8.0

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

@@ -45,6 +45,10 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 			P.closable && (F.value = !1, I("close"));
 		}
 		function U(e) {
+			let t = e.currentTarget;
+			e.clientX >= t.getBoundingClientRect().left + t.clientWidth || (e.preventDefault(), P.closeOnOutsideClick && H());
+		}
+		function W(e) {
 			if (e.key === "Escape") {
 				if (e.defaultPrevented) return;
 				e.stopPropagation(), H();
@@ -55,7 +59,7 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 			}
 		}
-		function W(e) {
+		function G(e) {
 			let t = document.body, n = Number(t.dataset.acModals ?? 0) + (e ? 1 : -1);
 			if (t.dataset.acModals = String(Math.max(n, 0)), e && n === 1) {
 				let e = window.innerWidth - document.documentElement.clientWidth;
@@ -66,16 +70,16 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 		}
 		return y(F, async (e, t) => {
 			if (e) {
-				V = document.activeElement, W(!0), await l();
+				V = document.activeElement, G(!0), await l();
 				let e = B.value?.querySelector("[autofocus]");
 				((e && (e.matches(N) ? e : e.querySelector(N))) ?? B.value?.querySelector(L) ?? B.value)?.focus();
-			} else t && (W(!1), V?.focus?.());
+			} else t && (G(!1), V?.isConnected && V.focus());
 		}, { immediate: !0 }), d(() => {
-			F.value && W(!1);
+			F.value && (G(!1), V?.isConnected && V.focus());
 		}), (c, l) => (f(), n(e, { to: "body" }, [o(t, {
 			"enter-active-class": "transition-opacity duration-300 ease-out",
 			"enter-from-class": s.side === "right" ? "opacity-0 [&_[data-panel]]:translate-x-full" : "opacity-0 [&_[data-panel]]:-translate-x-full",
-			"leave-active-class": "transition-opacity duration-200 ease-in",
+			"leave-active-class": "pointer-events-none transition-opacity duration-200 ease-in",
 			"leave-to-class": s.side === "right" ? "opacity-0 [&_[data-panel]]:translate-x-full" : "opacity-0 [&_[data-panel]]:-translate-x-full"
 		}, {
 			default: b(() => [F.value ? (f(), i("div", {
@@ -83,8 +87,8 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				class: "fixed inset-0 z-[80] bg-black/50",
 				"data-ac-ds": "",
 				"data-testid": "ac-side-panel",
-				onKeydown: U,
-				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && H(), ["self"])
+				onKeydown: W,
+				onMousedown: x(U, ["self"])
 			}, [a("div", {
 				ref_key: "panel",
 				ref: B,

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

@@ -159,7 +159,7 @@ var E = [
 			s(t, {
 				"enter-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
-				"leave-active-class": "transition-opacity duration-150",
+				"leave-active-class": "pointer-events-none transition-opacity duration-150",
 				"leave-to-class": "opacity-0"
 			}, {
 				default: S(() => [q.value ? (p(), a("div", {

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

@@ -19,9 +19,12 @@ export interface Props {
     orientation?: "horizontal" | "vertical";
     /** With `orientation="vertical"`, the id of the current sub-step of the current step. Earlier sub-steps show a check mark. */
     activeSubstep?: number | string;
+    /** With `orientation="horizontal"`, hides the titles and descriptions visually when the steps are narrower than 480px, leaving the numbered dots. Screen readers still read them. Use it when the current step's own heading names it. */
+    compact?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
+    compact: boolean;
     activeSubstep: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,40 +1,41 @@
 import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
 import { Check as d } from "@lucide/vue";
 //#region src/lib/components/AcSteps.vue?vue&type=script&setup=true&lang.ts
-var f = {
-	key: 0,
-	class: "flex w-full",
-	"data-ac-ds": "",
-	"data-testid": "ac-steps"
-}, p = ["aria-current"], m = { key: 1 }, h = {
-	key: 1,
-	class: "mt-0.5 text-xs text-muted"
-}, g = {
+var f = ["aria-current"], p = { key: 1 }, m = {
 	key: 1,
 	class: "flex w-full flex-col",
 	"data-ac-ds": "",
 	"data-testid": "ac-steps"
-}, _ = ["aria-current"], v = { key: 1 }, y = { class: "min-w-0 flex-1 pt-1.5" }, b = {
+}, h = ["aria-current"], g = { key: 1 }, _ = { class: "min-w-0 flex-1 pt-1.5" }, v = {
 	key: 0,
 	class: "mt-0.5 text-xs text-muted"
-}, x = {
+}, y = {
 	key: 1,
 	class: "mt-2 space-y-0.5 border-l border-dashed border-border-dark pl-3",
 	"data-testid": "ac-steps-substeps"
-}, S = ["aria-current"], C = {
+}, b = ["aria-current"], x = {
 	key: 1,
 	class: "size-1.5 rounded-full bg-primary"
-}, w = /*@__PURE__*/ a({
+}, S = /*@__PURE__*/ a({
 	__name: "AcSteps",
 	props: {
 		options: {},
 		active: {},
 		orientation: { default: "horizontal" },
-		activeSubstep: { default: void 0 }
+		activeSubstep: { default: void 0 },
+		compact: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	setup(a) {
-		let w = a, T = (e) => w.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === w.activeSubstep);
-		return (w, E) => a.orientation === "horizontal" ? (s(), r("ol", f, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
+		let S = a, C = (e) => S.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === S.activeSubstep);
+		return (S, w) => a.orientation === "horizontal" ? (s(), r("ol", {
+			key: 0,
+			class: o(["flex w-full", a.compact && "@container/steps"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-steps"
+		}, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
 			key: e.id,
 			class: "relative flex flex-1 flex-col items-center px-2 text-center",
 			"aria-current": a.active === e.id ? "step" : void 0
@@ -49,10 +50,13 @@ var f = {
 				class: "size-4",
 				"stroke-width": 2.5,
 				"aria-hidden": "true"
-			})) : (s(), r("span", m, l(e.id), 1))], 2),
-			i("p", { class: o(["mt-3 text-base font-medium", a.active >= e.id ? "text-heading" : "text-muted"]) }, l(e.title), 3),
-			e.description ? (s(), r("p", h, l(e.description), 1)) : n("", !0)
-		], 8, p))), 128))])) : (s(), r("ol", g, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
+			})) : (s(), r("span", p, l(e.id), 1))], 2),
+			i("p", { class: o(["mt-3 text-base font-medium", [a.active >= e.id ? "text-heading" : "text-muted", a.compact && "@max-[480px]/steps:sr-only"]]) }, l(e.title), 3),
+			e.description ? (s(), r("p", {
+				key: 1,
+				class: o(["mt-0.5 text-xs text-muted", a.compact && "@max-[480px]/steps:sr-only"])
+			}, l(e.description), 3)) : n("", !0)
+		], 8, f))), 128))], 2)) : (s(), r("ol", m, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
 			key: f.id,
 			class: "relative flex gap-3 pb-6 last:pb-0",
 			"aria-current": a.active === f.id ? "step" : void 0
@@ -67,25 +71,25 @@ var f = {
 				class: "size-4",
 				"stroke-width": 2.5,
 				"aria-hidden": "true"
-			})) : (s(), r("span", v, l(f.id), 1))], 2),
-			i("div", y, [
+			})) : (s(), r("span", g, l(f.id), 1))], 2),
+			i("div", _, [
 				i("p", { class: o(["text-base font-medium", a.active >= f.id ? "text-heading" : "text-muted"]) }, l(f.title), 3),
-				f.description ? (s(), r("p", b, l(f.description), 1)) : n("", !0),
-				f.substeps?.length && a.active === f.id ? (s(), r("ul", x, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
+				f.description ? (s(), r("p", v, l(f.description), 1)) : n("", !0),
+				f.substeps?.length && a.active === f.id ? (s(), r("ul", y, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
 					key: e.id,
 					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-strong 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 < C(f) ? "bg-primary text-white" : c === C(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), {
+				}, [c < C(f) ? (s(), t(u(d), {
 					key: 0,
 					class: "size-3",
 					"stroke-width": 3
-				})) : c === T(f) ? (s(), r("span", C)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < T(f) ? "text-heading/80" : c === T(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, S))), 128))])) : n("", !0)
+				})) : c === C(f) ? (s(), r("span", x)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < C(f) ? "text-heading/80" : c === C(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, b))), 128))])) : n("", !0)
 			])
-		], 8, _))), 128))]));
+		], 8, h))), 128))]));
 	}
 });
 //#endregion
-export { w as default };
+export { S as default };

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

@@ -53,7 +53,7 @@ var h = { class: "flex items-center gap-2" }, g = ["for"], _ = [
 			i.label ? (c(), n("label", {
 				key: 0,
 				for: E.value,
-				class: s(["cursor-pointer text-base font-medium text-heading", i.disabled && "cursor-not-allowed opacity-50"])
+				class: s(["text-base font-medium", i.disabled ? "cursor-not-allowed text-muted" : "cursor-pointer text-heading"])
 			}, d(i.label), 11, g)) : t("", !0),
 			u(e.$slots, "middle"),
 			r("button", o({

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

@@ -8,40 +8,40 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 	"checked",
 	"indeterminate",
 	"disabled"
-], fe = ["aria-sort", "onClick"], pe = { class: "inline-flex items-center gap-2" }, me = {
+], fe = ["aria-sort", "onClick"], pe = {
 	key: 0,
 	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, he = {
+}, me = {
 	key: 1,
 	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, ge = {
+}, he = {
 	key: 2,
 	class: "h-11 border-b border-border [tr:last-child_&]:border-0"
-}, _e = [
+}, ge = [
 	"aria-current",
 	"aria-disabled",
 	"onClick"
-], ve = [
+], _e = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"onClick"
-], ye = { class: "relative flex size-[18px]" }, be = [
+], ve = { class: "relative flex size-[18px]" }, ye = [
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], xe = {
+], be = {
 	key: 2,
 	class: "flex min-w-0 items-center"
-}, Se = {
+}, xe = {
 	key: 1,
 	class: "block truncate"
-}, Ce = {
+}, Se = {
 	key: 0,
 	class: "group",
 	"data-testid": "ac-table-detail"
-}, we = ["colspan"], Te = ["id", "aria-label"], Ee = {
+}, Ce = ["colspan"], we = ["id", "aria-label"], Te = {
 	key: 0,
 	class: "px-6 py-12 text-center text-muted"
 }, E = "border-border", D = "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", O = /*@__PURE__*/ d({
@@ -130,7 +130,7 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 		"update:sortBy"
 	]),
 	setup(d, { emit: p }) {
-		let O = d, k = S(d, "selected"), A = S(d, "expanded"), j = S(d, "page"), M = p, N = ne(), P = f()?.appContext.components.RouterLink, De = te(), F = S(d, "sortBy"), I = i(() => F.value?.key ?? ""), L = i(() => F.value?.mode ?? "asc"), Oe = (e) => {
+		let O = d, k = S(d, "selected"), A = S(d, "expanded"), j = S(d, "page"), M = p, N = ne(), P = f()?.appContext.components.RouterLink, Ee = te(), F = S(d, "sortBy"), I = i(() => F.value?.key ?? ""), L = i(() => F.value?.mode ?? "asc"), De = (e) => {
 			if (!e.sortable) return;
 			let t = I.value === e.key && L.value === "asc" ? "desc" : "asc";
 			F.value = {
@@ -140,26 +140,26 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 		}, R = i(() => {
 			let e = O.search ?? [];
 			return e.length ? O.rows.filter((t) => e.every((e) => {
-				let n = W(t[e.key]);
+				let n = U(t[e.key]);
 				return n != null && String(n).toLowerCase().includes(e.searchText.toLowerCase());
 			})) : O.rows;
 		}), z = i(() => {
 			if (!I.value || O.manualSort) return R.value;
 			let e = I.value, t = L.value === "asc" ? 1 : -1, n = O.columns.find((t) => t.key === e)?.sortType;
 			return n ? [...R.value].sort((r, i) => {
-				let a = W(r[e]), o = W(i[e]);
+				let a = U(r[e]), o = U(i[e]);
 				return a == null ? 1 : o == null ? -1 : Ae(a, o, n) * t;
-			}) : [...R.value].sort((n, r) => String(W(n[e]) ?? "").localeCompare(String(W(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
-		}), B = i(() => O.pageSize ? Math.max(1, Math.ceil(z.value.length / O.pageSize)) : 1), V = i(() => Math.min(Math.max(1, j.value), B.value)), H = i(() => {
+			}) : [...R.value].sort((n, r) => String(U(n[e]) ?? "").localeCompare(String(U(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+		}), Oe = i(() => O.pageSize ? Math.max(1, Math.ceil(z.value.length / O.pageSize)) : 1), B = i(() => Math.min(Math.max(1, j.value), Oe.value)), V = i(() => {
 			if (!O.pageSize) return z.value;
-			let e = (V.value - 1) * O.pageSize;
+			let e = (B.value - 1) * O.pageSize;
 			return z.value.slice(e, e + O.pageSize);
 		});
-		function U(e) {
+		function H(e) {
 			return typeof e == "object" && !!e && !Array.isArray(e) && "data" in e;
 		}
-		function W(e) {
-			return U(e) ? e.sort ?? e.data : e;
+		function U(e) {
+			return H(e) ? e.sort ?? e.data : e;
 		}
 		function ke(e) {
 			return O.placeholderFor === "falsy" ? !e : e === null || e === "";
@@ -167,33 +167,33 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 		function Ae(e, t, n) {
 			return n === "number" ? Number(e) - Number(t) : n === "date" ? new Date(String(e)).getTime() - new Date(String(t)).getTime() : String(e).toLowerCase().localeCompare(String(t).toLowerCase());
 		}
-		let G = (e) => !!O.rowDisabled?.(e), je = (e) => !G(e) && (!O.rowSelectable || O.rowSelectable(e)), K = i(() => H.value.filter(je).map((e) => e[O.rowKey])), q = i(() => new Set(k.value)), J = i(() => K.value.length > 0 && K.value.every((e) => q.value.has(e))), Me = i(() => !J.value && K.value.some((e) => q.value.has(e)));
-		function Ne() {
+		let W = (e) => !!O.rowDisabled?.(e), G = (e) => !W(e) && (!O.rowSelectable || O.rowSelectable(e)), K = i(() => V.value.filter(G).map((e) => e[O.rowKey])), q = i(() => new Set(k.value)), J = i(() => K.value.length > 0 && K.value.every((e) => q.value.has(e))), je = i(() => !J.value && K.value.some((e) => q.value.has(e)));
+		function Me() {
 			let e = new Set(K.value);
 			k.value = J.value ? k.value.filter((t) => !e.has(t)) : [...k.value, ...K.value.filter((e) => !q.value.has(e))];
 		}
-		function Pe(e) {
+		function Ne(e) {
 			let t = e[O.rowKey];
 			k.value = q.value.has(t) ? k.value.filter((e) => e !== t) : [...k.value, t];
 		}
-		let Fe = i(() => new Set(A.value)), Y = (e) => O.expandable && Fe.value.has(e[O.rowKey]), Ie = (e) => !O.canExpand || O.canExpand(e), Le = (e) => `${De}-detail-${String(e[O.rowKey])}`, X = i(() => !!N.actions), Re = i(() => O.columns.length + +!!O.selectable + +!!O.expandable + +!!X.value);
-		function ze(e) {
+		let Pe = i(() => new Set(A.value)), Y = (e) => O.expandable && Pe.value.has(e[O.rowKey]), Fe = (e) => !O.canExpand || O.canExpand(e), Ie = (e) => `${Ee}-detail-${String(e[O.rowKey])}`, X = i(() => !!N.actions), Le = i(() => O.columns.length + +!!O.selectable + +!!O.expandable + +!!X.value);
+		function Re(e) {
 			let t = e[O.rowKey];
-			A.value = Fe.value.has(t) ? A.value.filter((e) => e !== t) : [...A.value, t];
+			A.value = Pe.value.has(t) ? A.value.filter((e) => e !== t) : [...A.value, t];
 		}
 		function Z(e) {
-			let t = e[O.columns[0]?.key ?? ""], n = U(t) ? t.data : t;
+			let t = e[O.columns[0]?.key ?? ""], n = H(t) ? t.data : t;
 			return typeof n == "string" || typeof n == "number" ? n : String(e[O.rowKey]);
 		}
-		let Be = i(() => O.expandable ? "py-3 [tbody_&]:h-[51px]" : "py-3"), Ve = (e) => e.wrap ?? O.relaxed ? "whitespace-normal" : "whitespace-nowrap";
-		function He(e) {
+		let ze = i(() => O.expandable ? "py-3 [tbody_&]:h-[51px]" : "py-3"), Be = (e) => e.wrap ?? O.relaxed ? "whitespace-normal" : "whitespace-nowrap";
+		function Ve(e) {
 			return !!(e.link || O.truncate || O.placeholder || N[`before-${e.key}`]);
 		}
-		function Ue(e) {
+		function He(e) {
 			let t = String(e ?? "");
 			return O.truncate && t.length > O.truncate ? `${t.slice(0, O.truncate)}...` : t;
 		}
-		function We(e, t) {
+		function Ue(e, t) {
 			let n = e[t.link] || t.linkFallback;
 			return typeof n != "string" || !n ? {
 				is: "span",
@@ -206,7 +206,7 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				attrs: { href: n }
 			};
 		}
-		let Ge = i(() => ["overflow-hidden bg-surface", !O.flat && "rounded-10 border border-border"]), Q = (e) => ({
+		let We = i(() => ["overflow-hidden bg-surface", !O.flat && "rounded-10 border border-border"]), Q = (e) => ({
 			left: "text-left",
 			center: "text-center",
 			right: "text-right"
@@ -214,10 +214,10 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 		return re(() => `${JSON.stringify(O.search?.map((e) => [e.key, e.searchText]) ?? [])}|${I.value}|${L.value}`, () => {
 			O.pageSize && (j.value = 1);
 		}), (i, f) => (g(), s("div", {
-			class: m(["w-full", !d.pageSize && Ge.value]),
+			class: m(["w-full", !d.pageSize && We.value]),
 			"data-ac-ds": "",
 			"data-testid": "ac-table"
-		}, [c("div", { class: m(!!d.pageSize && Ge.value) }, [c("div", ce, [c("table", le, [c("thead", null, [c("tr", null, [
+		}, [c("div", { class: m(!!d.pageSize && We.value) }, [c("div", ce, [c("table", le, [c("thead", null, [c("tr", null, [
 			d.expandable ? (g(), s("th", {
 				key: 0,
 				scope: "col",
@@ -231,11 +231,11 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				type: "checkbox",
 				class: m(D),
 				checked: J.value,
-				indeterminate: Me.value,
+				indeterminate: je.value,
 				disabled: d.loading || !K.value.length,
 				"aria-label": "Select all rows",
-				onChange: Ne
-			}, null, 40, de), (g(), a(y(Me.value ? x(se) : x(T)), {
+				onChange: Me
+			}, null, 40, de), (g(), a(y(je.value ? x(se) : x(T)), {
 				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"
@@ -254,12 +254,23 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				]]),
 				style: h(e.width ? { width: e.width } : void 0),
 				"aria-sort": I.value === e.key ? L.value === "asc" ? "ascending" : "descending" : void 0,
-				onClick: (t) => Oe(e)
-			}, [c("span", pe, [v(i.$slots, `header-${e.key}`, { column: e }, () => [l(b(e.label), 1)]), e.sortable ? (g(), a(y(I.value === e.key && L.value === "asc" ? x(oe) : x(ie)), {
-				key: 0,
-				class: m(["size-4 shrink-0", I.value === e.key ? "text-primary-strong" : "text-muted"]),
-				"aria-hidden": "true"
-			}, null, 8, ["class"])) : o("", !0)])], 14, fe))), 128)),
+				onClick: (t) => De(e)
+			}, [(g(), a(y(e.sortable ? "button" : "span"), {
+				type: e.sortable ? "button" : void 0,
+				class: m(["inline-flex items-center gap-2", e.sortable && "-mx-1 cursor-pointer rounded-4 border-0 bg-transparent px-1 font-semibold text-inherit focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"]),
+				"data-testid": e.sortable ? `ac-table-sort-${e.key}` : void 0
+			}, {
+				default: C(() => [v(i.$slots, `header-${e.key}`, { column: e }, () => [l(b(e.label), 1)]), e.sortable ? (g(), a(y(I.value === e.key && L.value === "asc" ? x(oe) : x(ie)), {
+					key: 0,
+					class: m(["size-4 shrink-0", I.value === e.key ? "text-primary-strong" : "text-muted"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : o("", !0)]),
+				_: 2
+			}, 1032, [
+				"type",
+				"class",
+				"data-testid"
+			]))], 14, fe))), 128)),
 			X.value ? (g(), s("th", {
 				key: 2,
 				scope: "col",
@@ -270,8 +281,8 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				]])
 			}, [...f[5] ||= [c("span", { class: "sr-only" }, "Actions", -1)]], 2)) : o("", !0)
 		])]), c("tbody", null, [d.loading ? (g(!0), s(r, { key: 0 }, _(d.loaderRows, (e) => (g(), s("tr", { key: `loader-${e}` }, [
-			d.expandable ? (g(), s("td", me)) : o("", !0),
-			d.selectable ? (g(), s("td", he)) : o("", !0),
+			d.expandable ? (g(), s("td", pe)) : o("", !0),
+			d.selectable ? (g(), s("td", me)) : o("", !0),
 			(g(!0), s(r, null, _(d.columns, (t, n) => (g(), s("td", {
 				key: t.key,
 				class: m(["h-11 border-b border-border [tr:last-child_&]:border-0", [$(t), t.class]])
@@ -279,49 +290,49 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				class: "block h-2.5 animate-pulse rounded-full bg-surface-sunken",
 				style: h({ width: `${50 + (e * 17 + n * 23) % 40}%` })
 			}, null, 4)], 2))), 128)),
-			X.value ? (g(), s("td", ge)) : o("", !0)
-		]))), 128)) : (g(!0), s(r, { key: 1 }, _(H.value, (n, p) => (g(), s(r, { key: String(n[d.rowKey] ?? p) }, [c("tr", {
+			X.value ? (g(), s("td", he)) : o("", !0)
+		]))), 128)) : (g(!0), s(r, { key: 1 }, _(V.value, (n, p) => (g(), s(r, { key: String(n[d.rowKey] ?? p) }, [c("tr", {
 			"data-testid": "ac-table-row",
 			class: m(["group transition-colors duration-150", [
 				d.clickable && "cursor-pointer hover:bg-surface-sunken/40",
 				(d.rowActive?.(n) || d.selectable && q.value.has(n[d.rowKey])) && "bg-primary/5",
 				d.rowActive?.(n) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
-				G(n) && "pointer-events-none cursor-not-allowed opacity-50",
+				W(n) && "pointer-events-none cursor-not-allowed opacity-50",
 				d.rowClass?.(n)
 			]]),
 			"aria-current": d.rowActive?.(n) ? "true" : void 0,
-			"aria-disabled": G(n) || void 0,
-			onClick: (e) => d.clickable && !G(n) && M("row-click", n)
+			"aria-disabled": W(n) || void 0,
+			onClick: (e) => d.clickable && !W(n) && M("row-click", n)
 		}, [
 			d.expandable ? (g(), s("td", {
 				key: 0,
 				class: "h-11 w-10 border-b border-border pr-0 pl-4 group-last:border-0",
 				onClick: f[0] ||= w(() => {}, ["stop"])
-			}, [Ie(n) ? (g(), s("button", {
+			}, [Fe(n) ? (g(), s("button", {
 				key: 0,
 				type: "button",
 				class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-expanded": Y(n),
-				"aria-controls": Le(n),
+				"aria-controls": Ie(n),
 				"aria-label": `${Y(n) ? "Collapse" : "Expand"} ${Z(n)}`,
 				"data-testid": "ac-table-expand",
-				onClick: (e) => ze(n)
+				onClick: (e) => Re(n)
 			}, [u(x(ae), {
 				class: m(["size-4 transition-transform duration-150 motion-reduce:transition-none", Y(n) && "rotate-90"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 8, ve)) : o("", !0)])) : o("", !0),
+			}, null, 8, ["class"])], 8, _e)) : o("", !0)])) : o("", !0),
 			d.selectable ? (g(), s("td", {
 				key: 1,
 				class: "h-11 w-10 border-b border-border pr-1 pl-4 group-last:border-0",
 				onClick: f[1] ||= w(() => {}, ["stop"])
-			}, [c("span", ye, [c("input", {
+			}, [c("span", ve, [c("input", {
 				type: "checkbox",
 				class: m(D),
 				checked: q.value.has(n[d.rowKey]),
-				disabled: !je(n),
+				disabled: !G(n),
 				"aria-label": `Select ${Z(n)}`,
-				onChange: (e) => Pe(n)
-			}, null, 40, be), u(x(T), {
+				onChange: (e) => Ne(n)
+			}, null, 40, ye), u(x(T), {
 				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"
@@ -330,8 +341,8 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				key: o.key,
 				class: m(["h-11 border-b border-border text-body tabular-nums group-last:border-0", [
 					$(o),
-					Ve(o),
-					d.relaxed && Be.value,
+					Be(o),
+					d.relaxed && ze.value,
 					Q(o),
 					o.class
 				]])
@@ -340,8 +351,8 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				value: n[o.key]
 			}, () => [o.type || o.descriptor ? (g(), a(t, {
 				key: 0,
-				value: U(n[o.key]) ? void 0 : n[o.key],
-				cell: U(n[o.key]) ? n[o.key] : void 0,
+				value: H(n[o.key]) ? void 0 : n[o.key],
+				cell: H(n[o.key]) ? n[o.key] : void 0,
 				column: o.descriptor,
 				type: o.type,
 				title: o.label,
@@ -353,37 +364,37 @@ var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border
 				"type",
 				"title",
 				"resolve-link"
-			])) : He(o) && n[o.key] === void 0 ? (g(), s(r, { key: 1 }, [], 64)) : He(o) ? (g(), s("span", xe, [v(i.$slots, `before-${o.key}`, { row: n }), !o.link && ke(n[o.key]) ? (g(), s(r, { key: 0 }, [l(b(d.placeholder), 1)], 64)) : (g(), a(e, {
+			])) : Ve(o) && n[o.key] === void 0 ? (g(), s(r, { key: 1 }, [], 64)) : Ve(o) ? (g(), s("span", be, [v(i.$slots, `before-${o.key}`, { row: n }), !o.link && ke(n[o.key]) ? (g(), s(r, { key: 0 }, [l(b(d.placeholder), 1)], 64)) : (g(), a(e, {
 				key: 1,
 				content: String(n[o.key]),
 				disabled: !d.truncate,
 				placement: "top"
 			}, {
-				default: C(() => [o.link ? (g(), a(y(We(n, o).is), ee({
+				default: C(() => [o.link ? (g(), a(y(Ue(n, o).is), ee({
 					key: 0,
 					ref_for: !0
-				}, We(n, o).attrs, { class: "cursor-pointer truncate font-medium text-primary-strong no-underline hover:underline" }), {
-					default: C(() => [l(b(Ue(n[o.key])), 1)]),
+				}, Ue(n, o).attrs, { class: "cursor-pointer truncate font-medium text-primary-strong no-underline hover:underline" }), {
+					default: C(() => [l(b(He(n[o.key])), 1)]),
 					_: 2
-				}, 1040)) : (g(), s("span", Se, b(Ue(n[o.key])), 1))]),
+				}, 1040)) : (g(), s("span", xe, b(He(n[o.key])), 1))]),
 				_: 2
 			}, 1032, ["content", "disabled"]))])) : (g(), s(r, { key: 3 }, [l(b(n[o.key]), 1)], 64))])], 2))), 128)),
 			X.value ? (g(), s("td", {
 				key: 2,
-				class: m(["h-11 w-20 border-b border-border px-2 group-last:border-0 lg:w-[120px]", d.relaxed ? [Be.value, "whitespace-normal"] : "whitespace-nowrap"]),
+				class: m(["h-11 w-20 border-b border-border px-2 group-last:border-0 lg:w-[120px]", d.relaxed ? [ze.value, "whitespace-normal"] : "whitespace-nowrap"]),
 				onClick: f[2] ||= w(() => {}, ["stop"])
 			}, [v(i.$slots, "actions", { row: n })], 2)) : o("", !0)
-		], 10, _e), Y(n) && Ie(n) ? (g(), s("tr", Ce, [c("td", {
-			colspan: Re.value,
+		], 10, ge), Y(n) && Fe(n) ? (g(), s("tr", Se, [c("td", {
+			colspan: Le.value,
 			class: m(["border-b border-border p-0 group-last:border-0", !d.expandedBare && "bg-surface-muted"])
 		}, [c("div", {
-			id: Le(n),
+			id: Ie(n),
 			role: "region",
 			"aria-label": `Details for ${Z(n)}`,
 			class: m(["text-body", !d.expandedBare && "px-6 py-4"])
-		}, [v(i.$slots, "expanded", { row: n })], 10, Te)], 10, we)])) : o("", !0)], 64))), 128))])])]), !d.loading && !z.value.length ? (g(), s("div", Ee, [v(i.$slots, "empty", {}, () => [l(b(d.emptyText), 1)])])) : o("", !0)], 2), d.pageSize && B.value > 1 && !d.loading ? (g(), a(n, {
+		}, [v(i.$slots, "expanded", { row: n })], 10, we)], 10, Ce)])) : o("", !0)], 64))), 128))])])]), !d.loading && !z.value.length ? (g(), s("div", Te, [v(i.$slots, "empty", {}, () => [l(b(d.emptyText), 1)])])) : o("", !0)], 2), d.pageSize && Oe.value > 1 && !d.loading ? (g(), a(n, {
 			key: 0,
-			page: V.value,
+			page: B.value,
 			"page-size": d.pageSize,
 			total: z.value.length,
 			"hide-page-size": "",

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

@@ -2,6 +2,8 @@ import type { HTMLAttributes } from "vue";
 export interface Props {
     /** Label above the field. Pass `placeholder` for an example value inside it. Without a label, pass `aria-label`; the placeholder is the accessible name otherwise. */
     label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Native `name` attribute. */
     name?: string;
     /** Example value shown inside the empty field. */
@@ -90,6 +92,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     readonly: boolean;
     placeholder: string;
     errorMsg: string;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     highlight: boolean;
     mono: boolean;
     maxlength: number;

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

@@ -23,6 +23,16 @@ var ee = ["for"], C = { key: 0 }, w = ["id"], T = [
 	__name: "AcTextarea",
 	props: /*@__PURE__*/ o({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		name: { default: "" },
 		placeholder: { default: void 0 },
 		rows: { default: void 0 },
@@ -164,7 +174,7 @@ var ee = ["for"], C = { key: 0 }, w = ["id"], T = [
 			U.value ? (d(), n("label", {
 				key: 0,
 				for: h(I),
-				class: l(["mb-2 flex items-center text-base font-medium text-heading", !a.flushLabelSlots && "gap-1"])
+				class: l(["mb-2 flex items-center text-base font-medium text-heading", [!a.flushLabelSlots && "gap-1", a.labelClass]])
 			}, [
 				p(e.$slots, "label-icon"),
 				a.label ? (d(), n("span", C, m(a.label), 1)) : t("", !0),

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

@@ -2,6 +2,8 @@ import type { HTMLAttributes } from "vue";
 export interface Props {
     /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
     label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Text shown in the field while there's no value. */
     placeholder?: string;
     /** `24` shows 00–23; `12` shows 1–12 with an AM/PM column. `v-model` is always 24-hour. Cloud `hour12`. */
@@ -73,6 +75,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     inline: boolean;
     placeholder: string;
     errorMsg: string;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     clearable: boolean;
     showSeconds: boolean;
     hourCycle: 12 | 24;