@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -5,14 +5,14 @@ var te = [
 	"role",
 	"aria-modal",
 	"aria-label"
-], ne = ["aria-label"], re = {
+], D = ["aria-label"], ne = {
 	role: "list",
-	class: "flex flex-col gap-0.5"
-}, ie = {
+	class: "flex flex-col gap-1"
+}, re = {
 	key: 0,
 	role: "list",
-	class: "flex flex-col gap-0.5"
-}, ae = ["aria-label", "title"], D = { key: 0 }, O = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", k = 120, A = 180, j = /*@__PURE__*/ c({
+	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({
 	inheritAttrs: !1,
 	__name: "AcSidebar",
 	props: /*@__PURE__*/ l({
@@ -49,9 +49,9 @@ 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(X()).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;
+		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 ? k : A)));
+			j.hoverExpand && (e && W || (clearTimeout(G), G = setTimeout(() => B.value = e, e ? ae : A)));
 		}
 		function q() {
 			W = !0, clearTimeout(G), B.value = !1, M.value = !M.value;
@@ -62,57 +62,57 @@ var te = [
 		function se(e) {
 			P.value?.contains(e.relatedTarget) || K(!1);
 		}
-		let J = n(() => I.value && N.value), Y = n(() => j.dark), ce = n(() => I.value || j.contained ? void 0 : {
+		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})`
-		}), le = n(() => {
-			let e = j.dark ? "dark border-r border-border-light bg-sidebar text-body" : "border-r border-border-light bg-surface-muted text-body";
+		}), 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 ? [
 				e,
 				j.contained ? "absolute" : "fixed",
-				"inset-y-0 left-0 z-[80] w-60 max-w-[85%] shadow-xl duration-200 ease-out-soft motion-reduce:transition-none",
+				"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]"
 			] : [
 				e,
 				V.value ? [j.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : j.contained ? "relative h-full" : "sticky",
 				"transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
-				H.value ? "w-14" : "w-60"
+				H.value ? "w-14" : j.contained ? "w-64" : "w-64 lg:w-52 xl:w-64"
 			];
 		});
-		function X() {
+		function Y() {
 			return `(max-width: ${j.breakpoint - .02}px)`;
 		}
-		function ue() {
+		function de() {
 			I.value ? N.value = !N.value : M.value = !M.value;
 		}
-		function de() {
+		function fe() {
 			M.value = !1;
 		}
-		function fe() {
+		function pe() {
 			I.value && (N.value = !1);
 		}
-		function Z() {
+		function X() {
 			N.value = !1;
 		}
-		function pe(e) {
+		function me(e) {
 			if (J.value && P.value) {
-				if (e.key === "Escape") e.stopPropagation(), Z();
+				if (e.key === "Escape") e.stopPropagation(), X();
 				else if (e.key === "Tab") {
-					let t = [...P.value.querySelectorAll(O)].filter((e) => e.offsetParent !== null);
+					let t = [...P.value.querySelectorAll(k)].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());
 				}
 			}
 		}
-		function Q(e) {
+		function Z(e) {
 			I.value = e.matches;
 		}
-		function $(e) {
+		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 me() {
+		function $() {
 			let e = F.value, t = e?.querySelector("[aria-current=\"page\"]");
 			if (!e || !t) return;
 			let n = t.getBoundingClientRect().top - e.getBoundingClientRect().top;
@@ -121,22 +121,25 @@ var te = [
 		return h("ac-sidebar", {
 			rail: H,
 			isMobile: I,
-			dark: Y,
-			expand: de,
-			navigate: fe
+			dark: ce,
+			expand: fe,
+			navigate: pe
 		}), S(J, async (e, t) => {
-			e ? (L = document.activeElement, j.contained || $(!0), await ee(), (P.value?.querySelector("[aria-current=\"page\"]") ?? P.value?.querySelector(O))?.focus()) : t && (j.contained || $(!1), L?.focus?.());
+			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(X()), I.value = R.matches, R.addEventListener("change", Q);
-			me();
+			} else R = window.matchMedia(Y()), I.value = R.matches, R.addEventListener("change", Z);
+			$();
 		}), f(() => {
-			clearTimeout(G), R?.removeEventListener("change", Q), z?.disconnect(), J.value && !j.contained && $(!1);
-		}), l({ toggle: ue }), (n, l) => (m(), a(e, null, [
+			clearTimeout(G), R?.removeEventListener("change", Z), z?.disconnect(), J.value && !j.contained && Q(!1);
+		}), l({
+			toggle: de,
+			revealActive: $
+		}), (n, l) => (m(), a(e, null, [
 			s(t, {
 				"enter-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
@@ -145,11 +148,11 @@ var te = [
 			}, {
 				default: C(() => [J.value ? (m(), a("div", {
 					key: 0,
-					class: d(["inset-0 z-[79] bg-overlay", c.contained ? "absolute" : "fixed"]),
+					class: d(["inset-0 z-[79] bg-overlay backdrop-blur-[2px]", c.contained ? "absolute" : "fixed"]),
 					"aria-hidden": "true",
 					"data-ac-ds": "",
 					"data-testid": "ac-sidebar-backdrop",
-					onClick: Z
+					onClick: X
 				}, null, 2)) : i("", !0)]),
 				_: 1
 			}),
@@ -163,14 +166,14 @@ var te = [
 				ref_key: "root",
 				ref: P
 			}, n.$attrs, {
-				class: ["flex shrink-0 flex-col overflow-hidden", le.value],
-				style: ce.value,
+				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,
 				"data-ac-ds": "",
 				"data-testid": "ac-sidebar",
-				onKeydown: pe,
+				onKeydown: me,
 				onMouseenter: l[0] ||= (e) => K(!0),
 				onMouseleave: oe,
 				onFocusin: l[1] ||= (e) => K(!0),
@@ -178,41 +181,48 @@ var te = [
 			}), [
 				n.$slots.header || I.value ? (m(), a("div", {
 					key: 0,
-					class: d(["flex h-14 shrink-0 items-center gap-2 overflow-hidden border-b border-border-light", H.value ? "justify-center px-2" : "px-4"])
+					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", {
 					key: 0,
 					type: "button",
-					class: d(["-mr-1.5 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", Y.value ? "hover:bg-white/8" : "hover:bg-slate-90"]),
+					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",
 					"aria-label": "Close navigation",
 					"data-ac-ds": "",
 					"data-testid": "ac-sidebar-close",
-					onClick: Z
+					onClick: X
 				}, [s(b(E), {
-					class: "size-4",
+					class: "size-5",
 					"aria-hidden": "true"
-				})], 2)) : i("", !0)], 2)) : i("", !0),
+				})])) : i("", !0)], 2)) : i("", !0),
 				o("nav", {
 					ref_key: "nav",
 					ref: F,
 					"aria-label": c.label,
-					class: d(["ac-scrollbar min-h-0 flex-1 overflow-x-hidden py-3", H.value ? "px-2" : "px-3"])
-				}, [o("ul", re, [_(n.$slots, "default")])], 10, ne),
+					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", {
 					key: 1,
-					class: d(["flex shrink-0 flex-col gap-0.5 border-t border-border-light py-2", H.value ? "px-2" : "px-3"])
-				}, [n.$slots.footer ? (m(), a("ul", ie, [_(n.$slots, "footer", { collapsed: H.value })])) : i("", !0), c.collapsible && !I.value ? (m(), a("button", {
-					key: 1,
-					type: "button",
-					class: d(["flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 text-base text-label transition-colors hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [H.value ? "justify-center" : "px-2.5", Y.value ? "hover:bg-white/8" : "hover:bg-slate-90"]]),
-					"aria-label": U.value ? "Expand sidebar" : "Collapse sidebar",
-					title: H.value ? "Expand sidebar" : void 0,
-					"data-ac-ds": "",
-					"data-testid": "ac-sidebar-collapse",
-					onClick: q
-				}, [(m(), r(v(U.value ? b(T) : b(w)), {
-					class: "size-4 shrink-0 text-muted",
-					"aria-hidden": "true"
-				})), H.value ? i("", !0) : (m(), a("span", D, y(U.value ? "Expand" : "Collapse"), 1))], 10, ae)) : i("", !0)], 2)) : i("", !0)
+					class: d(["flex shrink-0 flex-col pb-4", H.value ? "px-2" : "px-4"])
+				}, [
+					o("div", {
+						class: d(["border-t border-muted/20", H.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", {
+						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,
+						"data-ac-ds": "",
+						"data-testid": "ac-sidebar-collapse",
+						onClick: q
+					}, [(m(), r(v(U.value ? b(T) : b(w)), {
+						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)
+				], 2)) : i("", !0)
 			], 16, te)
 		], 64));
 	}

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

@@ -13,7 +13,7 @@ export interface Props {
     active?: boolean;
     /** A count or short word after the label, e.g. `3` or `"New"`. Shown as a dot in the collapsed rail. */
     badge?: string | number;
-    /** Colour of the badge. */
+    /** Colour of the badge. Defaults to cloud-ui's solid primary chip. */
     badgeColor?: Tone | "neutral";
     /** Greys the item out and blocks clicks. */
     disabled?: boolean;

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

@@ -6,21 +6,17 @@ var D = {
 	"data-ac-ds": "",
 	"data-testid": "ac-sidebar-item"
 }, O = {
-	key: 0,
-	class: "inline-flex size-4 shrink-0 items-center justify-center text-muted transition-colors group-hover:text-heading group-aria-[current=page]:text-primary-30! [&>img]:size-4",
-	"aria-hidden": "true"
-}, k = {
 	key: 1,
 	class: "text-xs font-semibold"
-}, A = [
+}, k = [
 	"disabled",
 	"aria-expanded",
 	"aria-controls",
 	"title"
-], j = {
+], A = {
 	key: 1,
 	class: "text-xs font-semibold"
-}, M = ["id"], N = /*@__PURE__*/ o({
+}, j = ["id"], M = /*@__PURE__*/ o({
 	__name: "AcSidebarItem",
 	props: /*@__PURE__*/ l({
 		label: {},
@@ -32,7 +28,7 @@ var D = {
 			default: !1
 		},
 		badge: { default: void 0 },
-		badgeColor: { default: "neutral" },
+		badgeColor: { default: "primary" },
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -46,39 +42,39 @@ var D = {
 	}),
 	emits: /*@__PURE__*/ l(["click"], ["update:open"]),
 	setup(o, { emit: l }) {
-		let N = o, P = S(o, "open"), F = l, I = C(), L = {
-			neutral: "bg-slate-90 text-label ring-1 ring-border ring-inset",
-			primary: "bg-primary-95 text-primary-20",
-			info: "bg-blue-95 text-blue-20",
-			success: "bg-green-95 text-green-20",
-			warning: "bg-yellow-95 text-yellow-20",
-			danger: "bg-red-95 text-red-30"
-		}, R = {
-			neutral: "bg-slate-60",
+		let M = o, N = S(o, "open"), P = l, F = C(), I = {
+			neutral: "border border-border bg-surface-sunken text-muted",
+			primary: "bg-primary text-white",
+			info: "bg-info text-white",
+			success: "bg-success text-white",
+			warning: "bg-warning text-on-warning",
+			danger: "bg-danger text-white"
+		}, L = {
+			neutral: "bg-muted",
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
-		}, z = c("ac-sidebar", null), B = c("ac-sidebar-depth", 0), V = s()?.appContext.components.RouterLink, H = x(), U = g(null), W = g(!1), G = null, K = t(() => !!I.default), q = t(() => (z?.rail.value ?? !1) && B === 0), J = t(() => z?.dark.value ? "not-aria-[current=page]:hover:bg-white/8 not-aria-[current=page]:hover:text-heading" : "not-aria-[current=page]:hover:bg-slate-90 not-aria-[current=page]:hover:text-heading"), Y = t(() => N.to && V && !N.disabled ? V : N.to || N.href ? "a" : "button"), X = t(() => {
+		}, R = c("ac-sidebar", null), z = c("ac-sidebar-depth", 0), B = c("ac-sidebar-subgroup", !1), V = s()?.appContext.components.RouterLink, H = x(), U = g(null), W = g(!1), G = null, K = t(() => !!F.default), q = t(() => (R?.rail.value ?? !1) && z === 0), J = B || z > 0 ? "size-4 [&>img]:size-4" : "size-[17px] [&>img]:size-[17px]", Y = t(() => M.to && V && !M.disabled ? V : M.to || M.href ? "a" : "button"), X = t(() => {
 			let e = {};
-			return Y.value === V ? e.to = N.to : Y.value === "a" ? N.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = N.href ?? (typeof N.to == "string" ? N.to : void 0) : (e.type = "button", e.disabled = N.disabled || void 0), N.active && (e["aria-current"] = "page"), e;
-		}), Z = t(() => N.badge === void 0 || N.badge === "" ? "" : String(N.badge));
+			return Y.value === V ? e.to = M.to : Y.value === "a" ? M.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = M.href ?? (typeof M.to == "string" ? M.to : void 0) : (e.type = "button", e.disabled = M.disabled || void 0), M.active && (e["aria-current"] = "page"), e;
+		}), Z = t(() => M.badge === void 0 || M.badge === "" ? "" : String(M.badge));
 		function Q(e) {
-			if (N.disabled) {
+			if (M.disabled) {
 				e.preventDefault();
 				return;
 			}
-			F("click", e), z?.navigate();
+			P("click", e), R?.navigate();
 		}
 		function ee() {
-			q.value ? (z?.expand(), P.value = !0) : P.value = !P.value;
+			q.value ? (R?.expand(), N.value = !0) : N.value = !N.value;
 		}
 		function $() {
 			W.value = !!U.value?.querySelector("[aria-current=\"page\"]");
 		}
-		return h("ac-sidebar-depth", B + 1), w(W, (e) => {
-			e && (P.value = !0);
+		return h("ac-sidebar-depth", z + 1), w(W, (e) => {
+			e && (N.value = !0);
 		}), p(() => {
 			U.value && ($(), G = new MutationObserver($), G.observe(U.value, {
 				subtree: !0,
@@ -88,13 +84,14 @@ var D = {
 			}));
 		}), f(() => G?.disconnect()), (t, s) => (m(), i("li", D, [K.value ? (m(), i(e, { key: 1 }, [a("button", {
 			type: "button",
-			class: d(["group relative flex w-full items-center gap-2.5 rounded-6 text-left text-base transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [
-				q.value ? "h-9 justify-center" : "h-8 px-2.5",
-				q.value && W.value ? "bg-primary-95 text-primary-20" : W.value ? "font-medium text-heading" : "text-body",
-				o.disabled ? "cursor-not-allowed opacity-50" : ["cursor-pointer", J.value]
+			class: d(["group relative flex w-full items-center gap-3 rounded-10 border py-2 text-left text-base font-medium transition-all duration-200 select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset motion-reduce:transition-none", [
+				q.value ? "h-9.5 justify-center" : "px-3",
+				q.value && W.value ? "border-primary/35 bg-primary/10 text-heading shadow-xs shadow-primary/10" : ["border-transparent", W.value ? "text-heading" : "text-heading/80"],
+				o.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+				!o.disabled && !(q.value && W.value) && "hover:border-border hover:bg-accent-hover hover:text-heading"
 			]]),
 			disabled: o.disabled || void 0,
-			"aria-expanded": q.value ? void 0 : P.value,
+			"aria-expanded": q.value ? void 0 : N.value,
 			"aria-controls": `${b(H)}-list`,
 			title: q.value ? o.label : void 0,
 			"data-ac-ds": "",
@@ -103,48 +100,52 @@ var D = {
 		}, [
 			t.$slots.icon || o.icon || q.value ? (m(), i("span", {
 				key: 0,
-				class: d(["inline-flex size-4 shrink-0 items-center justify-center transition-colors group-hover:text-heading [&>img]:size-4", W.value ? "text-primary-30" : "text-muted"]),
+				class: d(["inline-flex shrink-0 items-center justify-center transition-colors duration-200", [b(J), W.value ? "text-primary" : "text-muted group-hover:text-heading"]]),
 				"aria-hidden": "true"
 			}, [_(t.$slots, "icon", {}, () => [o.icon ? (m(), n(v(o.icon), {
 				key: 0,
-				class: "size-4"
-			})) : (m(), i("span", j, y(o.label.charAt(0)), 1))])], 2)) : r("", !0),
+				class: "size-full"
+			})) : (m(), i("span", A, y(o.label.charAt(0)), 1))])], 2)) : r("", !0),
 			a("span", { class: d(q.value ? "sr-only" : "min-w-0 flex-1 truncate") }, y(o.label), 3),
 			Z.value && !q.value ? (m(), i("span", {
 				key: 1,
-				class: d(["inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-50 px-1.5 text-sm font-medium tabular-nums", L[o.badgeColor]])
+				class: d(["inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-6 px-2 text-xs leading-none font-medium tabular-nums", I[o.badgeColor]])
 			}, y(Z.value), 3)) : r("", !0),
 			q.value ? r("", !0) : (m(), n(b(E), {
 				key: 2,
-				class: d(["size-3.5 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none", P.value && "rotate-90"]),
+				class: d(["size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none", N.value && "rotate-90"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]))
-		], 10, A), a("ul", {
+		], 10, k), a("ul", {
 			id: `${b(H)}-list`,
 			ref_key: "list",
 			ref: U,
 			role: "list",
-			class: d(["mt-0.5 ml-4.5 flex-col gap-0.5 border-l border-border pl-2", P.value && !q.value ? "flex" : "hidden"])
-		}, [_(t.$slots, "default")], 10, M)], 64)) : (m(), n(v(Y.value), u({ key: 0 }, X.value, {
-			class: ["group relative flex w-full items-center gap-2.5 rounded-6 text-left text-base font-normal text-body no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring aria-[current=page]:bg-primary-95 aria-[current=page]:font-medium aria-[current=page]:text-primary-20", [q.value ? "h-9 justify-center" : "h-8 px-2.5", o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : ["cursor-pointer", J.value]]],
+			class: d(["mt-1 ml-5 flex-col gap-1 border-l border-border pl-2", N.value && !q.value ? "flex" : "hidden"])
+		}, [_(t.$slots, "default")], 10, j)], 64)) : (m(), n(v(Y.value), u({ key: 0 }, X.value, {
+			class: ["group relative flex w-full items-center gap-3 rounded-10 border border-transparent py-2 text-left text-base font-medium text-heading/80 no-underline transition-all duration-200 select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset motion-reduce:transition-none aria-[current=page]:border-primary/35 aria-[current=page]:bg-primary/10 aria-[current=page]:text-heading aria-[current=page]:shadow-xs aria-[current=page]:shadow-primary/10", [q.value ? "h-9.5 justify-center" : "px-3", o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer not-aria-[current=page]:hover:border-border not-aria-[current=page]:hover:bg-accent-hover not-aria-[current=page]:hover:text-heading"]],
 			title: q.value ? Z.value ? `${o.label} (${Z.value})` : o.label : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-link",
 			onClick: Q
 		}), {
 			default: T(() => [
-				t.$slots.icon || o.icon || q.value ? (m(), i("span", O, [_(t.$slots, "icon", {}, () => [o.icon ? (m(), n(v(o.icon), {
+				t.$slots.icon || o.icon || q.value ? (m(), i("span", {
 					key: 0,
-					class: "size-4"
-				})) : (m(), i("span", k, y(o.label.charAt(0)), 1))])])) : r("", !0),
+					class: d(["inline-flex shrink-0 items-center justify-center text-muted transition-colors duration-200 group-hover:text-heading group-aria-[current=page]:text-primary!", b(J)]),
+					"aria-hidden": "true"
+				}, [_(t.$slots, "icon", {}, () => [o.icon ? (m(), n(v(o.icon), {
+					key: 0,
+					class: "size-full"
+				})) : (m(), i("span", O, y(o.label.charAt(0)), 1))])], 2)) : r("", !0),
 				a("span", { class: d(q.value ? "sr-only" : "min-w-0 flex-1 truncate") }, y(o.label), 3),
 				Z.value ? (m(), i(e, { key: 1 }, [q.value ? (m(), i("span", {
 					key: 0,
-					class: d(["absolute top-1 right-1 size-1.5 rounded-full", R[o.badgeColor]]),
+					class: d(["absolute top-1 right-1 size-2 rounded-full", L[o.badgeColor]]),
 					"aria-hidden": "true"
 				}, null, 2)) : (m(), i("span", {
 					key: 1,
-					class: d(["inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-50 px-1.5 text-sm font-medium tabular-nums", L[o.badgeColor]])
+					class: d(["inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-6 px-2 text-xs leading-none font-medium tabular-nums", I[o.badgeColor]])
 				}, y(Z.value), 3))], 64)) : r("", !0)
 			]),
 			_: 3
@@ -152,4 +153,4 @@ var D = {
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };

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 { ChevronDown 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: "h-7 truncate px-2.5 text-sm leading-7 font-medium tracking-wider 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-border-light pt-2 first:mt-0 first:border-0 first:pt-0" : "mt-4 first:mt-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: "group flex h-7 w-full cursor-pointer items-center justify-between gap-2 rounded-6 px-2.5 text-sm font-medium tracking-wider text-muted uppercase transition-colors hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			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-3.5 shrink-0 transition-transform duration-150 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-0.5", 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/AcSkeleton.vue_vue_type_script_setup_true_lang.js

@@ -8,19 +8,19 @@ var d = ["aria-busy", "aria-hidden"], f = {
 	key: 3,
 	class: "w-full",
 	"aria-hidden": "true"
-}, m = { class: "flex h-9 items-center gap-4 border-b border-border px-4" }, h = {
+}, m = { class: "flex h-11 items-center gap-4 border-b border-border bg-surface-sunken/50 px-6" }, h = {
 	key: 4,
-	class: "flex size-full overflow-hidden rounded-10 border border-border bg-surface shadow-xs",
+	class: "flex size-full overflow-hidden rounded-10 border border-border bg-surface",
 	"aria-hidden": "true"
-}, g = { class: "flex w-11 shrink-0 flex-col items-end gap-2 border-r border-border-light bg-surface-muted px-2.5 py-3" }, _ = { class: "flex min-w-0 flex-1 flex-col gap-2 px-3 py-3" }, v = {
+}, g = { class: "flex w-11 shrink-0 flex-col items-end gap-2 border-r border-border bg-surface-muted px-2.5 py-3" }, _ = { class: "flex min-w-0 flex-1 flex-col gap-2 px-3 py-3" }, v = {
 	key: 5,
-	class: "rounded-10 border border-border bg-surface p-5 shadow-xs",
+	class: "rounded-14 border border-border bg-surface p-6",
 	"aria-hidden": "true"
 }, y = { class: "mt-5 flex flex-col gap-2" }, b = {
 	key: 6,
-	class: "rounded-10 border border-border bg-surface p-4 shadow-xs",
+	class: "rounded-14 border border-border bg-surface p-5",
 	"aria-hidden": "true"
-}, x = { class: "flex items-center gap-3" }, S = { class: "min-w-0 flex-1" }, C = { class: "mt-4 grid grid-cols-2 gap-x-4 gap-y-2.5 border-t border-border-light pt-4" }, w = {
+}, x = { class: "flex items-center gap-3" }, S = { class: "min-w-0 flex-1" }, C = { class: "mt-4 grid grid-cols-2 gap-x-4 gap-y-2.5 border-t border-border pt-4" }, w = {
 	key: 7,
 	class: "sr-only"
 }, T = "ac-skeleton-bone block rounded-4", E = /*@__PURE__*/ a({
@@ -105,7 +105,7 @@ var d = ["aria-busy", "aria-hidden"], f = {
 			class: "flex-1"
 		}, [i("span", { class: o([T, "h-2.5 w-1/2 opacity-70"]) })]))), 128))]), (c(!0), r(e, null, l(a.rows, (t) => (c(), r("div", {
 			key: t,
-			class: "flex h-12 items-center gap-4 border-b border-border-light px-4 last:border-0"
+			class: "flex h-12 items-center gap-4 border-b border-border px-6 last:border-0"
 		}, [(c(!0), r(e, null, l(a.cols, (e) => (c(), r("span", {
 			key: e,
 			class: "flex-1"
@@ -130,7 +130,7 @@ var d = ["aria-busy", "aria-hidden"], f = {
 				i("span", { class: o([T, "h-3 w-full"]) }),
 				i("span", { class: o([T, "h-3 w-3/5"]) })
 			])
-		])) : (c(), r("div", b, [i("div", x, [i("span", { class: o([T, "size-10 shrink-0 rounded-8"]) }), i("div", S, [i("span", { class: o([T, "h-3.5 w-1/2"]) }), i("span", { class: o([T, "mt-2 h-2.5 w-1/3"]) })])]), i("div", C, [
+		])) : (c(), r("div", b, [i("div", x, [i("span", { class: o([T, "size-10 shrink-0 rounded-10"]) }), i("div", S, [i("span", { class: o([T, "h-3.5 w-1/2"]) }), i("span", { class: o([T, "mt-2 h-2.5 w-1/3"]) })])]), i("div", C, [
 			i("span", { class: o([T, "h-2.5 w-3/5"]) }),
 			i("span", { class: o([T, "h-2.5 w-2/5 justify-self-end"]) }),
 			i("span", { class: o([T, "h-2.5 w-1/2"]) }),

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

@@ -33,7 +33,7 @@ export interface Props {
     required?: boolean;
     /** Error text under the slider. Turns the track red and sets `aria-invalid`. */
     errorMsg?: string;
-    /** Helper text under the slider (hidden while `errorMsg` is set). */
+    /** Help text between the label and the slider. */
     hint?: string;
 }
 type __VLS_Props = Props;