@ac-design/design-system 2.2.0 → 2.3.0

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

@@ -59,7 +59,9 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 			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;
-				t.style.overflow = "hidden", e > 0 && (t.style.paddingRight = `${e}px`);
+				t.style.overflow = "hidden";
+				let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
+				e > 0 && !n && (t.style.paddingRight = `${e}px`);
 			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
 		}
 		return y(F, async (e, t) => {

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

@@ -74,8 +74,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     label: string;
     width: string;
-    bottom: string;
     top: string;
+    bottom: string;
     mobile: "select" | "scroll";
     sticky: boolean;
     collapsible: boolean;

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

@@ -13,6 +13,12 @@ export interface Props {
     hoverExpand?: boolean;
     /** Offset from the top of the viewport on desktop, e.g. `"72px"` under a full-width navbar. The height shrinks to match. */
     top?: string;
+    /** Pins the sidebar to the viewport's left edge with `position: fixed` on desktop, instead of `sticky`. The page then makes room itself, e.g. cloud-ui's `lg:pl-52 xl:pl-64`. */
+    fixed?: boolean;
+    /** Puts the `footer` items at the end of the scrolling list instead of pinning them: they sit at the bottom while the list is short and scroll with it when it's long, as in cloud-ui. */
+    footerScrolls?: boolean;
+    /** Space between sections. `compact` is cloud-ui's console: 16px either side of the rule between sections, 24px-high section headings and 8px between sub-groups. */
+    spacing?: "normal" | "compact";
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -48,13 +54,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
     "onUpdate:mobileOpen"?: ((value: boolean) => any) | undefined;
 }>, {
+    fixed: boolean;
     label: string;
+    spacing: "normal" | "compact";
     top: string;
     dark: boolean;
     collapsible: boolean;
     contained: boolean;
     breakpoint: number;
     hoverExpand: boolean;
+    footerScrolls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,18 +1,24 @@
-import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, nextTick as ee, normalizeClass as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C } from "vue";
-import { PanelLeftClose as w, PanelLeftOpen as T, X as E } from "@lucide/vue";
+import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as ee, nextTick as u, normalizeClass as d, onBeforeUnmount as te, onMounted as f, openBlock as p, provide as m, ref as h, renderSlot as g, resolveDynamicComponent as ne, toDisplayString as _, unref as v, useModel as y, useSlots as b, watch as x, withCtx as S } from "vue";
+import { PanelLeftClose as C, PanelLeftOpen as w, X as T } from "@lucide/vue";
 //#region src/lib/components/AcSidebar.vue?vue&type=script&setup=true&lang.ts
-var te = [
+var E = [
 	"role",
 	"aria-modal",
 	"aria-label"
-], D = ["aria-label"], ne = {
+], D = ["aria-label"], re = {
 	role: "list",
-	class: "flex flex-col gap-1"
-}, re = {
+	class: "flex shrink-0 flex-col gap-1"
+}, ie = {
 	key: 0,
+	class: "mt-auto flex shrink-0 flex-col pt-[54px]"
+}, ae = {
 	role: "list",
 	class: "flex flex-col"
-}, ie = ["aria-label", "title"], O = { key: 0 }, k = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", ae = 120, A = 180, j = /*@__PURE__*/ c({
+}, oe = {
+	key: 0,
+	role: "list",
+	class: "flex flex-col"
+}, se = ["aria-label", "title"], ce = { key: 0 }, O = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", le = 120, ue = 180, k = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "AcSidebar",
 	props: /*@__PURE__*/ l({
@@ -34,7 +40,16 @@ var te = [
 			type: Boolean,
 			default: !1
 		},
-		top: { default: "0px" }
+		top: { default: "0px" },
+		fixed: {
+			type: Boolean,
+			default: !1
+		},
+		footerScrolls: {
+			type: Boolean,
+			default: !1
+		},
+		spacing: { default: "normal" }
 	}, {
 		collapsed: {
 			type: Boolean,
@@ -49,56 +64,56 @@ var te = [
 	}),
 	emits: ["update:collapsed", "update:mobileOpen"],
 	setup(c, { expose: l }) {
-		let j = c, M = x(c, "collapsed"), N = x(c, "mobileOpen"), P = g(null), F = g(null), I = g(!j.contained && typeof window < "u" && window.matchMedia(Y()).matches), L = null, R = null, z = null, B = g(!1), V = n(() => j.hoverExpand && M.value && !I.value && B.value), H = n(() => M.value && !I.value && !V.value), U = n(() => M.value && !I.value), W = !1, G;
-		function K(e) {
-			j.hoverExpand && (e && W || (clearTimeout(G), G = setTimeout(() => B.value = e, e ? ae : A)));
+		let k = c, A = y(c, "collapsed"), j = y(c, "mobileOpen"), M = b(), N = h(null), P = h(null), F = h(!k.contained && typeof window < "u" && window.matchMedia(J()).matches), I = null, L = null, R = null, z = h(!1), B = n(() => k.hoverExpand && A.value && !F.value && z.value), V = n(() => A.value && !F.value && !B.value), H = n(() => A.value && !F.value), U = !1, W;
+		function G(e) {
+			k.hoverExpand && (e && U || (clearTimeout(W), W = setTimeout(() => z.value = e, e ? le : ue)));
 		}
-		function q() {
-			W = !0, clearTimeout(G), B.value = !1, M.value = !M.value;
+		function de() {
+			U = !0, clearTimeout(W), z.value = !1, A.value = !A.value;
 		}
-		function oe() {
-			W = !1, K(!1);
+		function fe() {
+			U = !1, G(!1);
 		}
-		function se(e) {
-			P.value?.contains(e.relatedTarget) || K(!1);
+		function pe(e) {
+			N.value?.contains(e.relatedTarget) || G(!1);
 		}
-		let J = n(() => I.value && N.value), ce = n(() => j.dark), le = n(() => I.value || j.contained ? void 0 : {
-			top: j.top,
-			height: `calc(100dvh - ${j.top})`
-		}), ue = n(() => {
-			let e = j.dark ? "dark border-r border-border bg-sidebar text-body shadow-sm" : "border-r border-border bg-sidebar-panel/95 text-body shadow-sm backdrop-blur-sm";
-			return I.value ? [
+		let K = n(() => k.footerScrolls && !!M.footer), q = n(() => F.value && j.value), me = n(() => k.dark), he = n(() => F.value || k.contained ? void 0 : {
+			top: k.top,
+			height: `calc(100dvh - ${k.top})`
+		}), ge = n(() => {
+			let e = k.dark ? "dark border-r border-border bg-sidebar text-body shadow-sm" : "border-r border-border bg-sidebar-panel/95 text-body shadow-sm backdrop-blur-sm";
+			return F.value ? [
 				e,
-				j.contained ? "absolute" : "fixed",
+				k.contained ? "absolute" : "fixed",
 				"inset-y-0 left-0 z-[80] w-64 duration-300 ease-out-soft motion-reduce:transition-none",
-				N.value ? "visible translate-x-0 transition-[translate]" : "invisible -translate-x-full transition-[translate,visibility]"
+				j.value ? "visible translate-x-0 transition-[translate]" : "invisible -translate-x-full transition-[translate,visibility]"
 			] : [
 				e,
-				V.value ? [j.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : j.contained ? "relative h-full" : "sticky",
+				B.value ? [k.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : k.contained ? "relative h-full" : k.fixed ? "fixed left-0 z-30" : "sticky",
 				"transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
-				H.value ? "w-14" : j.contained ? "w-64" : "w-64 lg:w-52 xl:w-64"
+				V.value ? "w-14" : k.contained ? "w-64" : "w-64 lg:w-52 xl:w-64"
 			];
 		});
-		function Y() {
-			return `(max-width: ${j.breakpoint - .02}px)`;
+		function J() {
+			return `(max-width: ${k.breakpoint - .02}px)`;
 		}
-		function de() {
-			I.value ? N.value = !N.value : M.value = !M.value;
+		function _e() {
+			F.value ? j.value = !j.value : A.value = !A.value;
 		}
-		function fe() {
-			M.value = !1;
+		function Y() {
+			A.value = !1;
 		}
-		function pe() {
-			I.value && (N.value = !1);
+		function ve() {
+			F.value && (j.value = !1);
 		}
 		function X() {
-			N.value = !1;
+			j.value = !1;
 		}
-		function me(e) {
-			if (J.value && P.value) {
+		function ye(e) {
+			if (q.value && N.value) {
 				if (e.key === "Escape") e.stopPropagation(), X();
 				else if (e.key === "Tab") {
-					let t = [...P.value.querySelectorAll(k)].filter((e) => e.offsetParent !== null);
+					let t = [...N.value.querySelectorAll(O)].filter((e) => e.offsetParent !== null);
 					if (!t.length) return;
 					let n = t[0], r = t[t.length - 1];
 					e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
@@ -106,47 +121,48 @@ var te = [
 			}
 		}
 		function Z(e) {
-			I.value = e.matches;
+			F.value = e.matches;
 		}
 		function Q(e) {
 			let t = document.body, n = Number(t.dataset.acModals ?? 0) + (e ? 1 : -1);
 			t.dataset.acModals = String(Math.max(n, 0)), e && n === 1 ? t.style.overflow = "hidden" : !e && n <= 0 && (t.style.overflow = "");
 		}
 		function $() {
-			let e = F.value, t = e?.querySelector("[aria-current=\"page\"]");
+			let e = P.value, t = e?.querySelector("[aria-current=\"page\"]");
 			if (!e || !t) return;
 			let n = t.getBoundingClientRect().top - e.getBoundingClientRect().top;
 			(n < 0 || n > e.clientHeight - t.offsetHeight) && (e.scrollTop += n - e.clientHeight / 2);
 		}
-		return h("ac-sidebar", {
-			rail: H,
-			isMobile: I,
-			dark: ce,
-			expand: fe,
-			navigate: pe
-		}), S(J, async (e, t) => {
-			e ? (L = document.activeElement, j.contained || Q(!0), await ee(), (P.value?.querySelector("[aria-current=\"page\"]") ?? P.value?.querySelector(k))?.focus()) : t && (j.contained || Q(!1), L?.focus?.());
-		}), S(I, (e) => {
-			e || (N.value = !1);
-		}), p(() => {
-			if (j.contained) {
-				let e = P.value?.parentElement;
-				e && (z = new ResizeObserver(([e]) => I.value = (e?.contentRect.width ?? 0) < j.breakpoint), z.observe(e));
-			} else R = window.matchMedia(Y()), I.value = R.matches, R.addEventListener("change", Z);
-			$();
+		return m("ac-sidebar", {
+			rail: V,
+			isMobile: F,
+			dark: me,
+			expand: Y,
+			navigate: ve,
+			compact: n(() => k.spacing === "compact")
+		}), x(q, async (e, t) => {
+			e ? (I = document.activeElement, k.contained || Q(!0), await u(), (N.value?.querySelector("[aria-current=\"page\"]") ?? N.value?.querySelector(O))?.focus()) : t && (k.contained || Q(!1), I?.focus?.());
+		}), x(F, (e) => {
+			e || (j.value = !1);
 		}), f(() => {
-			clearTimeout(G), R?.removeEventListener("change", Z), z?.disconnect(), J.value && !j.contained && Q(!1);
+			if (k.contained) {
+				let e = N.value?.parentElement;
+				e && (R = new ResizeObserver(([e]) => F.value = (e?.contentRect.width ?? 0) < k.breakpoint), R.observe(e));
+			} else L = window.matchMedia(J()), F.value = L.matches, L.addEventListener("change", Z);
+			$();
+		}), te(() => {
+			clearTimeout(W), L?.removeEventListener("change", Z), R?.disconnect(), q.value && !k.contained && Q(!1);
 		}), l({
-			toggle: de,
+			toggle: _e,
 			revealActive: $
-		}), (n, l) => (m(), a(e, null, [
+		}), (n, l) => (p(), a(e, null, [
 			s(t, {
 				"enter-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
 				"leave-active-class": "transition-opacity duration-150",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: C(() => [J.value ? (m(), a("div", {
+				default: S(() => [q.value ? (p(), a("div", {
 					key: 0,
 					class: d(["inset-0 z-[79] bg-overlay backdrop-blur-[2px]", c.contained ? "absolute" : "fixed"]),
 					"aria-hidden": "true",
@@ -156,33 +172,33 @@ var te = [
 				}, null, 2)) : i("", !0)]),
 				_: 1
 			}),
-			V.value ? (m(), a("div", {
+			B.value && (!c.fixed || c.contained) ? (p(), a("div", {
 				key: 0,
 				class: d(["w-14 shrink-0", c.contained && "h-full"]),
 				"aria-hidden": "true",
 				"data-ac-ds": ""
 			}, null, 2)) : i("", !0),
-			o("aside", u({
+			o("aside", ee({
 				ref_key: "root",
-				ref: P
+				ref: N
 			}, n.$attrs, {
-				class: ["flex shrink-0 flex-col overflow-hidden", ue.value],
-				style: le.value,
-				role: J.value ? "dialog" : void 0,
-				"aria-modal": J.value || void 0,
-				"aria-label": J.value ? c.label : void 0,
+				class: ["flex shrink-0 flex-col overflow-hidden", ge.value],
+				style: he.value,
+				role: q.value ? "dialog" : void 0,
+				"aria-modal": q.value || void 0,
+				"aria-label": q.value ? c.label : void 0,
 				"data-ac-ds": "",
 				"data-testid": "ac-sidebar",
-				onKeydown: me,
-				onMouseenter: l[0] ||= (e) => K(!0),
-				onMouseleave: oe,
-				onFocusin: l[1] ||= (e) => K(!0),
-				onFocusout: se
+				onKeydown: ye,
+				onMouseenter: l[0] ||= (e) => G(!0),
+				onMouseleave: fe,
+				onFocusin: l[1] ||= (e) => G(!0),
+				onFocusout: pe
 			}), [
-				n.$slots.header || I.value ? (m(), a("div", {
+				n.$slots.header || F.value ? (p(), a("div", {
 					key: 0,
-					class: d(["flex min-h-17 shrink-0 items-center gap-2 overflow-hidden border-b border-border/70 pt-5 pb-4", H.value ? "mx-2 justify-center" : "mx-4 px-1"])
-				}, [o("div", { class: d(["flex min-w-0 flex-1 items-center", H.value && "justify-center"]) }, [_(n.$slots, "header", { collapsed: H.value })], 2), I.value ? (m(), a("button", {
+					class: d(["flex min-h-17 shrink-0 items-center gap-2 overflow-hidden border-b border-border/70 pt-5 pb-4", V.value ? "mx-2 justify-center" : "mx-4 px-1"])
+				}, [o("div", { class: d(["flex min-w-0 flex-1 items-center", V.value && "justify-center"]) }, [g(n.$slots, "header", { collapsed: V.value })], 2), F.value ? (p(), a("button", {
 					key: 0,
 					type: "button",
 					class: "-mr-1.5 inline-flex size-8.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
@@ -190,42 +206,45 @@ var te = [
 					"data-ac-ds": "",
 					"data-testid": "ac-sidebar-close",
 					onClick: X
-				}, [s(b(E), {
+				}, [s(v(T), {
 					class: "size-5",
 					"aria-hidden": "true"
 				})])) : i("", !0)], 2)) : i("", !0),
 				o("nav", {
 					ref_key: "nav",
-					ref: F,
+					ref: P,
 					"aria-label": c.label,
-					class: d(["ac-scrollbar min-h-0 flex-1 overflow-x-hidden py-5", H.value ? "px-2" : "px-4"])
-				}, [o("ul", ne, [_(n.$slots, "default")])], 10, D),
-				n.$slots.footer || c.collapsible && !I.value ? (m(), a("div", {
+					class: d(["ac-scrollbar min-h-0 flex-1 overflow-x-hidden py-5", [V.value ? "px-2" : "px-4", K.value && "flex flex-col"]])
+				}, [o("ul", re, [g(n.$slots, "default")]), K.value ? (p(), a("div", ie, [l[2] ||= o("div", {
+					class: "my-6 border-t border-muted/20",
+					"aria-hidden": "true"
+				}, null, -1), o("ul", ae, [g(n.$slots, "footer", { collapsed: V.value })])])) : i("", !0)], 10, D),
+				!K.value && n.$slots.footer || c.collapsible && !F.value ? (p(), a("div", {
 					key: 1,
-					class: d(["flex shrink-0 flex-col pb-4", H.value ? "px-2" : "px-4"])
+					class: d(["flex shrink-0 flex-col pb-4", V.value ? "px-2" : "px-4"])
 				}, [
 					o("div", {
-						class: d(["border-t border-muted/20", H.value ? "mb-3" : "mt-5 mb-6"]),
+						class: d(["border-t border-muted/20", V.value ? "mb-3" : "mt-5 mb-6"]),
 						"aria-hidden": "true"
 					}, null, 2),
-					n.$slots.footer ? (m(), a("ul", re, [_(n.$slots, "footer", { collapsed: H.value })])) : i("", !0),
-					c.collapsible && !I.value ? (m(), a("button", {
+					!K.value && n.$slots.footer ? (p(), a("ul", oe, [g(n.$slots, "footer", { collapsed: V.value })])) : i("", !0),
+					c.collapsible && !F.value ? (p(), a("button", {
 						key: 1,
 						type: "button",
-						class: d(["group flex w-full cursor-pointer items-center gap-3 rounded-10 border border-transparent py-2 text-base font-medium text-heading/80 transition-all duration-200 hover:border-border hover:bg-accent-hover hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset motion-reduce:transition-none", H.value ? "justify-center" : "px-3"]),
-						"aria-label": U.value ? "Expand sidebar" : "Collapse sidebar",
-						title: H.value ? "Expand sidebar" : void 0,
+						class: d(["group flex w-full cursor-pointer items-center gap-3 rounded-10 border border-transparent py-2 text-base font-medium text-heading/80 transition-all duration-200 hover:border-border hover:bg-accent-hover hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset motion-reduce:transition-none", V.value ? "justify-center" : "px-3"]),
+						"aria-label": H.value ? "Expand sidebar" : "Collapse sidebar",
+						title: V.value ? "Expand sidebar" : void 0,
 						"data-ac-ds": "",
 						"data-testid": "ac-sidebar-collapse",
-						onClick: q
-					}, [(m(), r(v(U.value ? b(T) : b(w)), {
+						onClick: de
+					}, [(p(), r(ne(H.value ? v(w) : v(C)), {
 						class: "size-4 shrink-0 text-muted group-hover:text-heading",
 						"aria-hidden": "true"
-					})), H.value ? i("", !0) : (m(), a("span", O, y(U.value ? "Expand" : "Collapse"), 1))], 10, ie)) : i("", !0)
+					})), V.value ? i("", !0) : (p(), a("span", ce, _(H.value ? "Expand" : "Collapse"), 1))], 10, se)) : i("", !0)
 				], 2)) : i("", !0)
-			], 16, te)
+			], 16, E)
 		], 64));
 	}
 });
 //#endregion
-export { j as default };
+export { k as default };

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

@@ -1,7 +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, 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 v = ["aria-expanded", "aria-controls"], y = { class: "truncate" }, b = ["inert"], x = ["id", "aria-label"], S = /*@__PURE__*/ o({
+var v = ["data-closed"], y = ["aria-expanded", "aria-controls"], b = { class: "truncate" }, x = ["inert"], S = ["id", "aria-label"], C = /*@__PURE__*/ o({
 	__name: "AcSidebarSection",
 	props: /*@__PURE__*/ c({
 		label: { default: "" },
@@ -18,36 +18,37 @@ var v = ["aria-expanded", "aria-controls"], y = { class: "truncate" }, b = ["ine
 	}),
 	emits: ["update:open"],
 	setup(o) {
-		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");
+		let c = g(o, "open"), C = s("ac-sidebar", null), w = s("ac-sidebar-section", !1);
+		d("ac-sidebar-section", !0), d("ac-sidebar-subgroup", w);
+		let T = h(), E = t(() => C?.rail.value ?? !1), D = t(() => c.value || E.value), O = t(() => C?.compact?.value ?? !1), k = t(() => w ? O.value ? "mb-1 py-[5px] text-xm text-muted/80" : "mb-1 py-0.5 text-xm text-muted/80" : O.value ? D.value ? "mb-2 py-1 text-sm text-muted" : "mb-1 py-1 text-sm text-muted" : "mb-2 py-0.5 text-sm text-muted"), A = t(() => w ? O.value ? "mt-0.5 first:mt-0" : "mt-2 first:mt-0" : E.value ? "mt-2 border-t border-muted/20 pt-2 first:mt-0 first:border-0 first:pt-0" : O.value ? "mt-3 first:mt-0 [[data-testid=ac-sidebar-section][data-closed]+&]:mt-0 [[data-testid=ac-sidebar-section]+&]:mt-2.5 [[data-testid=ac-sidebar-section]+&]:border-t [[data-testid=ac-sidebar-section]+&]:border-muted/20 [[data-testid=ac-sidebar-section]+&]:pt-4" : "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", D.value]),
+			class: l(["list-none", A.value]),
+			"data-closed": !D.value || void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-section"
-		}, [o.label && !T.value ? (u(), r(e, { key: 0 }, [o.collapsible ? (u(), r("button", {
+		}, [o.label && !E.value ? (u(), r(e, { key: 0 }, [o.collapsible ? (u(), r("button", {
 			key: 0,
 			type: "button",
-			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"]),
+			class: l(["flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-1 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", k.value]),
 			"aria-expanded": c.value,
-			"aria-controls": `${m(w)}-items`,
+			"aria-controls": `${m(T)}-items`,
 			onClick: s[0] ||= (e) => c.value = !c.value
-		}, [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"]]),
+		}, [i("span", b, p(o.label), 1), a(m(_), {
+			class: l(["shrink-0 text-muted/70 transition-transform duration-200 ease-out motion-reduce:transition-none", [m(w) ? "size-3.5" : "size-4", c.value && "rotate-90"]]),
 			"aria-hidden": "true"
-		}, null, 8, ["class"])], 10, v)) : (u(), r("p", {
+		}, null, 8, ["class"])], 10, y)) : (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"])
+			class: l(["truncate px-1 font-semibold tracking-[0.08em] uppercase", k.value])
 		}, 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
+			class: l(["grid transition-[grid-template-rows,opacity] duration-300 ease-out-soft motion-reduce:transition-none", D.value ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"]),
+			inert: !D.value || void 0
 		}, [i("ul", {
-			id: `${m(w)}-items`,
+			id: `${m(T)}-items`,
 			role: "list",
 			"aria-label": o.label || void 0,
-			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));
+			class: l(["flex min-h-0 flex-col gap-1 overflow-hidden", [m(w) && !E.value && "pl-1", D.value && "pb-0.5"]])
+		}, [f(t.$slots, "default")], 10, S)], 10, x)], 10, v));
 	}
 });
 //#endregion
-export { S as default };
+export { C as default };

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

@@ -58,9 +58,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     max: number;
     min: number;
+    hint: string;
     step: number;
     tooltip: "auto" | "always" | "never";
-    hint: string;
     range: boolean;
     errorMsg: string;
     unit: string;

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

@@ -9,9 +9,15 @@ export interface Column {
     type?: CellType;
     /** A server-side column descriptor. Shows values with AcCellValue; a row value may be a server cell `{ data, link, color }`. */
     descriptor?: ResourceColumn;
+    /** Extra classes for the column's header and cells, e.g. `w-20 lg:w-[120px]` for an actions column. */
+    class?: string | string[] | Record<string, boolean>;
+    /** Lets cell text wrap onto more lines. Cells stay on one line by default. */
+    wrap?: boolean;
+    /** Pads the header and cells 8px a side instead of 24px, e.g. for a column of icon buttons. */
+    compact?: boolean;
 }
 export interface Props<R> {
-    /** Column definitions: `{ key, label, sortable?, align?, width?, type?, descriptor? }`. `type` or `descriptor` shows values with AcCellValue. */
+    /** Column definitions: `{ key, label, sortable?, align?, width?, type?, descriptor?, class?, wrap?, compact? }`. `type` or `descriptor` shows values with AcCellValue. */
     columns: Column[];
     /** Row objects. Each column's `key` is read from the row. */
     rows: R[];
@@ -35,10 +41,16 @@ export interface Props<R> {
     rowActive?: (row: R) => boolean;
     /** Greys a row out: it ignores clicks and its checkbox is disabled. */
     rowDisabled?: (row: R) => boolean;
+    /** With `selectable`, decides per row whether it can be chosen. Other rows keep their look, links and clicks; only their checkbox is disabled, and the header checkbox skips them. */
+    rowSelectable?: (row: R) => boolean;
+    /** Extra classes for a row, e.g. `(row) => ({ "bg-danger/5": row.failed })`. */
+    rowClass?: (row: R) => string | string[] | Record<string, boolean>;
     /** The table doesn't reorder rows itself: sort the whole list outside (all pages, or on the server) when `sort` fires or `v-model:sortBy` changes. Headers still show the arrow. */
     manualSort?: boolean;
     /** Drops the table's own frame (border, rounded corners, shadow) so it sits flush inside a card or section that already has one. Without it a table in a card draws a second box. */
     flat?: boolean;
+    /** Drops the detail area's padding (24px a side, 16px above and below) and tinted fill, for an `expanded` slot that brings its own. */
+    expandedBare?: boolean;
     /** Turns a server cell's link template into a URL, e.g. to fill `${username}` and `${clustername}` from the current route. */
     resolveLink?: (link: string) => string;
 }