@ac-design/design-system 1.0.2 → 2.0.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 gap-1"
+}, 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\"])", A = 120, j = 180, M = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "AcSidebar",
 	props: /*@__PURE__*/ l({
@@ -49,56 +49,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(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;
-		function K(e) {
-			j.hoverExpand && (e && W || (clearTimeout(G), G = setTimeout(() => B.value = e, e ? k : A)));
+		let M = c, N = x(c, "collapsed"), P = x(c, "mobileOpen"), F = g(null), I = g(null), L = g(!M.contained && typeof window < "u" && window.matchMedia(X()).matches), R = null, z = null, B = null, V = g(!1), H = n(() => M.hoverExpand && N.value && !L.value && V.value), U = n(() => N.value && !L.value && !H.value), W = n(() => N.value && !L.value), G = !1, K;
+		function q(e) {
+			M.hoverExpand && (e && G || (clearTimeout(K), K = setTimeout(() => V.value = e, e ? A : j)));
 		}
-		function q() {
-			W = !0, clearTimeout(G), B.value = !1, M.value = !M.value;
+		function J() {
+			G = !0, clearTimeout(K), V.value = !1, N.value = !N.value;
 		}
-		function oe() {
-			W = !1, K(!1);
+		function ae() {
+			G = !1, q(!1);
 		}
-		function se(e) {
-			P.value?.contains(e.relatedTarget) || K(!1);
+		function oe(e) {
+			F.value?.contains(e.relatedTarget) || q(!1);
 		}
-		let J = n(() => I.value && N.value), Y = n(() => j.dark), ce = n(() => I.value || j.contained ? void 0 : {
-			top: j.top,
-			height: `calc(100dvh - ${j.top})`
+		let Y = n(() => L.value && P.value), se = n(() => M.dark), ce = n(() => L.value || M.contained ? void 0 : {
+			top: M.top,
+			height: `calc(100dvh - ${M.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";
-			return I.value ? [
+			let e = M.dark ? "dark border-r border-border bg-sidebar text-body" : "border-r border-border bg-surface-muted text-body";
+			return L.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",
-				N.value ? "visible translate-x-0 transition-[translate]" : "invisible -translate-x-full transition-[translate,visibility]"
+				M.contained ? "absolute" : "fixed",
+				"inset-y-0 left-0 z-[80] w-64 max-w-[85%] shadow-xl duration-300 ease-out-soft motion-reduce:transition-none",
+				P.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",
+				H.value ? [M.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : M.contained ? "relative h-full" : "sticky",
 				"transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
-				H.value ? "w-14" : "w-60"
+				U.value ? "w-14" : "w-64"
 			];
 		});
 		function X() {
-			return `(max-width: ${j.breakpoint - .02}px)`;
+			return `(max-width: ${M.breakpoint - .02}px)`;
 		}
 		function ue() {
-			I.value ? N.value = !N.value : M.value = !M.value;
+			L.value ? P.value = !P.value : N.value = !N.value;
 		}
 		function de() {
-			M.value = !1;
+			N.value = !1;
 		}
 		function fe() {
-			I.value && (N.value = !1);
+			L.value && (P.value = !1);
 		}
 		function Z() {
-			N.value = !1;
+			P.value = !1;
 		}
 		function pe(e) {
-			if (J.value && P.value) {
+			if (Y.value && F.value) {
 				if (e.key === "Escape") e.stopPropagation(), Z();
 				else if (e.key === "Tab") {
-					let t = [...P.value.querySelectorAll(O)].filter((e) => e.offsetParent !== null);
+					let t = [...F.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());
@@ -106,36 +106,36 @@ var te = [
 			}
 		}
 		function Q(e) {
-			I.value = e.matches;
+			L.value = e.matches;
 		}
 		function $(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() {
-			let e = F.value, t = e?.querySelector("[aria-current=\"page\"]");
+			let e = I.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: Y,
+			rail: U,
+			isMobile: L,
+			dark: se,
 			expand: de,
 			navigate: fe
-		}), 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?.());
-		}), S(I, (e) => {
-			e || (N.value = !1);
+		}), S(Y, async (e, t) => {
+			e ? (R = document.activeElement, M.contained || $(!0), await ee(), (F.value?.querySelector("[aria-current=\"page\"]") ?? F.value?.querySelector(k))?.focus()) : t && (M.contained || $(!1), R?.focus?.());
+		}), S(L, (e) => {
+			e || (P.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);
+			if (M.contained) {
+				let e = F.value?.parentElement;
+				e && (B = new ResizeObserver(([e]) => L.value = (e?.contentRect.width ?? 0) < M.breakpoint), B.observe(e));
+			} else z = window.matchMedia(X()), L.value = z.matches, z.addEventListener("change", Q);
 			me();
 		}), f(() => {
-			clearTimeout(G), R?.removeEventListener("change", Q), z?.disconnect(), J.value && !j.contained && $(!1);
+			clearTimeout(K), z?.removeEventListener("change", Q), B?.disconnect(), Y.value && !M.contained && $(!1);
 		}), l({ toggle: ue }), (n, l) => (m(), a(e, null, [
 			s(t, {
 				"enter-active-class": "transition-opacity duration-200",
@@ -143,7 +143,7 @@ var te = [
 				"leave-active-class": "transition-opacity duration-150",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: C(() => [J.value ? (m(), a("div", {
+				default: C(() => [Y.value ? (m(), a("div", {
 					key: 0,
 					class: d(["inset-0 z-[79] bg-overlay", c.contained ? "absolute" : "fixed"]),
 					"aria-hidden": "true",
@@ -153,7 +153,7 @@ var te = [
 				}, null, 2)) : i("", !0)]),
 				_: 1
 			}),
-			V.value ? (m(), a("div", {
+			H.value ? (m(), a("div", {
 				key: 0,
 				class: d(["w-14 shrink-0", c.contained && "h-full"]),
 				"aria-hidden": "true",
@@ -161,61 +161,61 @@ var te = [
 			}, null, 2)) : i("", !0),
 			o("aside", u({
 				ref_key: "root",
-				ref: P
+				ref: F
 			}, n.$attrs, {
 				class: ["flex shrink-0 flex-col overflow-hidden", le.value],
 				style: ce.value,
-				role: J.value ? "dialog" : void 0,
-				"aria-modal": J.value || void 0,
-				"aria-label": J.value ? c.label : void 0,
+				role: Y.value ? "dialog" : void 0,
+				"aria-modal": Y.value || void 0,
+				"aria-label": Y.value ? c.label : void 0,
 				"data-ac-ds": "",
 				"data-testid": "ac-sidebar",
 				onKeydown: pe,
-				onMouseenter: l[0] ||= (e) => K(!0),
-				onMouseleave: oe,
-				onFocusin: l[1] ||= (e) => K(!0),
-				onFocusout: se
+				onMouseenter: l[0] ||= (e) => q(!0),
+				onMouseleave: ae,
+				onFocusin: l[1] ||= (e) => q(!0),
+				onFocusout: oe
 			}), [
-				n.$slots.header || I.value ? (m(), a("div", {
+				n.$slots.header || L.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"])
-				}, [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 h-18 shrink-0 items-center gap-2 overflow-hidden border-b border-border", U.value ? "justify-center px-2" : "px-5"])
+				}, [o("div", { class: d(["flex min-w-0 flex-1 items-center", U.value && "justify-center"]) }, [_(n.$slots, "header", { collapsed: U.value })], 2), L.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-9 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
 				}, [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,
+					ref: I,
 					"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),
-				n.$slots.footer || c.collapsible && !I.value ? (m(), a("div", {
+					class: d(["ac-scrollbar min-h-0 flex-1 overflow-x-hidden py-5", U.value ? "px-2" : "px-4"])
+				}, [o("ul", ne, [_(n.$slots, "default")])], 10, D),
+				n.$slots.footer || c.collapsible && !L.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", {
+					class: d(["flex shrink-0 flex-col gap-1 border-t border-border py-3", U.value ? "px-2" : "px-4"])
+				}, [n.$slots.footer ? (m(), a("ul", re, [_(n.$slots, "footer", { collapsed: U.value })])) : i("", !0), c.collapsible && !L.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,
+					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", U.value ? "justify-center" : "px-3"]),
+					"aria-label": W.value ? "Expand sidebar" : "Collapse sidebar",
+					title: U.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",
+					onClick: J
+				}, [(m(), r(v(W.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", D, y(U.value ? "Expand" : "Collapse"), 1))], 10, ae)) : i("", !0)], 2)) : i("", !0)
+				})), U.value ? i("", !0) : (m(), a("span", O, y(W.value ? "Expand" : "Collapse"), 1))], 10, ie)) : i("", !0)], 2)) : i("", !0)
 			], 16, te)
 		], 64));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

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

@@ -7,7 +7,7 @@ var D = {
 	"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",
+	class: "inline-flex size-4 shrink-0 items-center justify-center text-muted transition-colors duration-200 group-hover:text-heading group-aria-[current=page]:text-primary! [&>img]:size-4",
 	"aria-hidden": "true"
 }, k = {
 	key: 1,
@@ -47,31 +47,31 @@ 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"
+			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"
 		}, R = {
-			neutral: "bg-slate-60",
+			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(() => {
+		}, 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(() => N.to && V && !N.disabled ? V : N.to || N.href ? "a" : "button"), Y = 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));
-		function Q(e) {
+			return J.value === V ? e.to = N.to : J.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;
+		}), X = t(() => N.badge === void 0 || N.badge === "" ? "" : String(N.badge));
+		function Z(e) {
 			if (N.disabled) {
 				e.preventDefault();
 				return;
 			}
 			F("click", e), z?.navigate();
 		}
-		function ee() {
+		function Q() {
 			q.value ? (z?.expand(), P.value = !0) : P.value = !P.value;
 		}
 		function $() {
@@ -88,10 +88,11 @@ 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,
@@ -99,24 +100,24 @@ var D = {
 			title: q.value ? o.label : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-group",
-			onClick: ee
+			onClick: Q
 		}, [
 			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 size-4 shrink-0 items-center justify-center transition-colors duration-200 [&>img]:size-4", 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),
 			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", {
+			X.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]])
-			}, y(Z.value), 3)) : r("", !0),
+				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", L[o.badgeColor]])
+			}, y(X.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", P.value && "rotate-90"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]))
 		], 10, A), a("ul", {
@@ -124,13 +125,13 @@ var D = {
 			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]]],
-			title: q.value ? Z.value ? `${o.label} (${Z.value})` : o.label : void 0,
+			class: d(["mt-1 ml-5 flex-col gap-1 border-l border-border pl-2", P.value && !q.value ? "flex" : "hidden"])
+		}, [_(t.$slots, "default")], 10, M)], 64)) : (m(), n(v(J.value), u({ key: 0 }, Y.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 ? X.value ? `${o.label} (${X.value})` : o.label : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-link",
-			onClick: Q
+			onClick: Z
 		}), {
 			default: T(() => [
 				t.$slots.icon || o.icon || q.value ? (m(), i("span", O, [_(t.$slots, "icon", {}, () => [o.icon ? (m(), n(v(o.icon), {
@@ -138,14 +139,14 @@ var D = {
 					class: "size-4"
 				})) : (m(), i("span", k, y(o.label.charAt(0)), 1))])])) : 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", {
+				X.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", R[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]])
-				}, y(Z.value), 3))], 64)) : r("", !0)
+					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", L[o.badgeColor]])
+				}, y(X.value), 3))], 64)) : r("", !0)
 			]),
 			_: 3
 		}, 16, ["class", "title"]))]));

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

@@ -1,9 +1,9 @@
 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 { ChevronRight as g } 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"
+	class: "mb-2 truncate px-1 py-0.5 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 }, b = ["id", "aria-label"], x = /*@__PURE__*/ o({
 	__name: "AcSidebarSection",
 	props: /*@__PURE__*/ c({
@@ -23,24 +23,24 @@ var _ = ["aria-expanded", "aria-controls"], v = { class: "truncate" }, y = {
 	setup(o) {
 		let c = h(o, "open"), x = s("ac-sidebar", null), S = m(), C = t(() => x?.rail.value ?? !1);
 		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", C.value ? "mt-2 border-t border-muted/20 pt-2 first:mt-0 first:border-0 first:pt-0" : "mt-4 border-t border-muted/20 pt-4 first:mt-0 first:border-0 first:pt-0"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-section"
 		}, [o.label && !C.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: "mb-2 flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-1 py-0.5 text-left text-sm font-semibold tracking-[0.08em] text-muted uppercase transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
 			"aria-expanded": c.value,
 			"aria-controls": `${p(S)}-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"]),
+			class: l(["size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none", 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`,
 			role: "list",
 			"aria-label": o.label || void 0,
-			class: l(["flex-col gap-0.5", c.value || C.value || !o.collapsible ? "flex" : "hidden"])
+			class: l(["flex-col gap-1", c.value || C.value || !o.collapsible ? "flex" : "hidden"])
 		}, [d(t.$slots, "default")], 10, b)], 2));
 	}
 });

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;