@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -1,13 +1,13 @@
 import { Teleport as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, unref as g, useId as _, useModel as v, watch as y, withCtx as b, withModifiers as x } from "vue";
 import { X as S } from "@lucide/vue";
 //#region src/lib/components/AcSidePanel.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 items-start gap-4 border-b border-border-light px-5 py-4" }, T = { class: "min-w-0 flex-1" }, E = ["id"], D = ["id"], O = { class: "-mt-0.5 -mr-1.5 flex shrink-0 items-center gap-1" }, k = {
+var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 items-start gap-4 border-b border-border px-6 py-4" }, T = { class: "min-w-0 flex-1" }, E = ["id"], D = ["id"], O = { class: "-my-1 -mr-2 flex shrink-0 items-center gap-1" }, k = {
 	"data-panel-body": "",
-	class: "ac-scrollbar min-h-0 flex-1 px-5 py-5"
+	class: "ac-scrollbar min-h-0 flex-1 p-6"
 }, A = {
 	key: 0,
-	class: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border-light bg-surface-muted px-5 py-3"
-}, j = { class: "flex min-w-0 items-center gap-2" }, M = { class: "ml-auto flex items-center gap-2" }, N = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", P = /*@__PURE__*/ s({
+	class: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border px-6 py-4"
+}, j = { class: "flex min-w-0 items-center gap-2" }, M = { class: "ml-auto flex items-center gap-3" }, N = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", P = /*@__PURE__*/ s({
 	__name: "AcSidePanel",
 	props: /*@__PURE__*/ c({
 		title: { default: "" },
@@ -35,27 +35,27 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 	}),
 	emits: /*@__PURE__*/ c(["close"], ["update:open"]),
 	setup(s, { emit: c }) {
-		let P = s, F = v(s, "open"), I = c, L = {
+		let P = s, F = v(s, "open"), I = c, L = N.split(", ").map((e) => `[data-panel-body] ${e}`).join(", "), R = {
 			small: "sm:max-w-100",
 			normal: "sm:max-w-130",
 			large: "sm:max-w-200",
 			full: ""
-		}, R = _(), z = p(null), B = null;
-		function V() {
+		}, z = _(), B = p(null), V = null;
+		function H() {
 			P.closable && (F.value = !1, I("close"));
 		}
-		function H(e) {
+		function U(e) {
 			if (e.key === "Escape") {
 				if (e.defaultPrevented) return;
-				e.stopPropagation(), V();
-			} else if (e.key === "Tab" && z.value) {
-				let t = [...z.value.querySelectorAll(N)].filter((e) => e.offsetParent !== null);
+				e.stopPropagation(), H();
+			} else if (e.key === "Tab" && B.value) {
+				let t = [...B.value.querySelectorAll(N)].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 U(e) {
+		function W(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;
@@ -64,12 +64,12 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 		}
 		return y(F, async (e, t) => {
 			if (e) {
-				B = document.activeElement, U(!0), await l();
-				let e = z.value?.querySelector("[autofocus]");
-				((e && (e.matches(N) ? e : e.querySelector(N))) ?? z.value?.querySelector(`[data-panel-body] ${N}`) ?? z.value)?.focus();
-			} else t && (U(!1), B?.focus?.());
+				V = document.activeElement, W(!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?.());
 		}, { immediate: !0 }), d(() => {
-			F.value && U(!1);
+			F.value && W(!1);
 		}), (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",
@@ -81,40 +81,40 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				class: "fixed inset-0 z-[80] bg-overlay backdrop-blur-[2px]",
 				"data-ac-ds": "",
 				"data-testid": "ac-side-panel",
-				onKeydown: H,
-				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && V(), ["self"])
+				onKeydown: U,
+				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && H(), ["self"])
 			}, [a("div", {
 				ref_key: "panel",
-				ref: z,
+				ref: B,
 				"data-panel": "",
 				role: "dialog",
 				"aria-modal": "true",
-				"aria-labelledby": s.title ? `${g(R)}-title` : void 0,
-				"aria-describedby": s.description ? `${g(R)}-desc` : void 0,
+				"aria-labelledby": s.title ? `${g(z)}-title` : void 0,
+				"aria-describedby": s.description ? `${g(z)}-desc` : void 0,
 				tabindex: "-1",
 				class: u(["absolute inset-y-0 flex w-full flex-col bg-surface shadow-xl outline-none transition-transform duration-300 ease-out-soft motion-reduce:transition-none", [
 					s.side === "right" ? "right-0" : "left-0",
 					s.size !== "full" && (s.side === "right" ? "border-border sm:border-l" : "border-border sm:border-r"),
-					L[s.size]
+					R[s.size]
 				]])
 			}, [
-				a("header", w, [a("div", T, [m(c.$slots, "header", {}, () => [a("h4", {
-					id: `${g(R)}-title`,
-					class: "text-[16px] leading-6 tracking-[-0.015em]"
+				a("header", w, [a("div", T, [m(c.$slots, "header", {}, () => [a("h2", {
+					id: `${g(z)}-title`,
+					class: "text-xl leading-7 font-semibold tracking-tight text-heading"
 				}, h(s.title), 9, E), s.description ? (f(), i("p", {
 					key: 0,
-					id: `${g(R)}-desc`,
-					class: "mt-0.5 text-base text-muted"
+					id: `${g(z)}-desc`,
+					class: "mt-1 text-base text-muted"
 				}, h(s.description), 9, D)) : r("", !0)])]), a("div", O, [m(c.$slots, "header-actions"), s.closable ? (f(), i("button", {
 					key: 0,
 					type: "button",
-					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					class: "inline-flex size-9 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 					"aria-label": "Close",
 					"data-ac-ds": "",
 					"data-testid": "ac-side-panel-close",
-					onClick: V
+					onClick: H
 				}, [o(g(S), {
-					class: "size-4",
+					class: "size-5",
 					"aria-hidden": "true"
 				})])) : r("", !0)])]),
 				a("div", k, [m(c.$slots, "default")]),

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

@@ -31,7 +31,7 @@ export interface Props {
     label?: string;
     /** Sticks the list to the top while the page scrolls. */
     sticky?: boolean;
-    /** Sticky offset from the top of the scroll area, e.g. `"56px"` under a navbar. */
+    /** Sticky offset from the top of the scroll area, e.g. `"72px"` under the navbar. */
     top?: string;
     /** Space kept free at the bottom while sticky, e.g. `"28px"` above a status bar. */
     bottom?: string;

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

@@ -4,16 +4,16 @@ import { ChevronRight as se, PanelLeftClose as ce, PanelLeftOpen as le } from "@
 //#region src/lib/components/AcSideTabs.vue?vue&type=script&setup=true&lang.ts
 var ue = {
 	key: 0,
-	class: "border-b border-border-light bg-surface px-4 py-3"
+	class: "border-b border-border bg-surface px-4 py-3"
 }, de = ["aria-label"], fe = ["aria-label"], pe = {
 	key: 0,
-	class: "mb-1 truncate px-2.5 pt-1 text-sm font-semibold tracking-[0.06em] text-muted uppercase"
+	class: "mb-2 truncate px-1 pt-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 }, me = {
 	key: 1,
-	class: "mx-2 mb-2 h-px bg-border-light",
+	class: "mx-1 mb-2 h-px bg-muted/20",
 	"aria-hidden": "true"
 }, he = {
-	class: "flex flex-col gap-0.5",
+	class: "flex flex-col gap-1",
 	role: "list"
 }, ge = {
 	key: 1,
@@ -69,24 +69,24 @@ var ue = {
 	emits: /*@__PURE__*/ l(["select"], ["update:modelValue", "update:collapsed"]),
 	setup(s, { emit: l }) {
 		let C = s, w = b(s, "modelValue"), T = b(s, "collapsed"), E = l, D = {
-			neutral: "bg-surface-sunken 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"
 		}, we = {
-			neutral: "bg-slate-60",
+			neutral: "bg-muted",
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
 		}, Te = {
-			none: ["text-body hover:bg-surface-sunken hover:text-heading", "bg-primary-95 font-medium text-primary-20"],
-			danger: ["text-red-30 hover:bg-red-97", "bg-red-95 font-medium text-red-20"],
-			warning: ["text-yellow-30 hover:bg-yellow-97", "bg-yellow-95 font-medium text-yellow-20"],
-			success: ["text-green-30 hover:bg-green-97", "bg-green-95 font-medium text-green-20"]
+			none: ["border-transparent text-heading/80 hover:border-border hover:bg-accent-hover hover:text-heading", "border-primary/35 bg-primary/10 text-heading shadow-xs shadow-primary/10"],
+			danger: ["border-transparent text-danger-strong hover:border-danger/25 hover:bg-danger/10", "border-danger/25 bg-danger/10 text-danger-strong"],
+			warning: ["border-transparent text-warning-strong hover:border-warning/30 hover:bg-warning/10", "border-warning/30 bg-warning/10 text-warning-strong"],
+			success: ["border-transparent text-success-strong hover:border-success/25 hover:bg-success/10", "border-success/25 bg-success/10 text-success-strong"]
 		}, O = ae(), Ee = oe(), k = c()?.appContext, A = k?.components.RouterLink, j = k?.config.globalProperties.$router, M = h(null), N = h(null), P = h(!1), F = h(0), I = h({}), L = null, R = null, z = n(() => !!Ee.default), B = n(() => T.value && !P.value), V = n(() => C.items.flatMap((e) => e.children?.length ? e.children : [e])), De = n(() => {
 			let e = [];
 			for (let t of C.items) {
@@ -228,7 +228,7 @@ var ue = {
 		])])) : P.value ? (m(), a("nav", {
 			key: 1,
 			"aria-label": s.label,
-			class: "border-b border-border-light bg-surface"
+			class: "border-b border-border bg-surface"
 		}, [o("ul", {
 			ref_key: "scroller",
 			ref: N,
@@ -239,35 +239,35 @@ var ue = {
 			class: "shrink-0"
 		}, [(m(), r(_(K(e)), u({ ref_for: !0 }, q(e), {
 			"data-side-tab": "",
-			class: ["inline-flex h-8 items-center gap-2 rounded-6 px-3 text-base whitespace-nowrap no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", J(e)],
+			class: ["inline-flex h-9 items-center gap-2 rounded-10 border px-3 text-base font-medium whitespace-nowrap 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", J(e)],
 			onClick: (t) => Y(e, t)
 		}), {
 			default: S(() => [
 				e.icon ? (m(), r(_(e.icon), {
 					key: 0,
-					class: "size-4 shrink-0 opacity-80",
+					class: f(["size-4 shrink-0", !e.tone && (U(e) ? "text-primary" : "text-muted")]),
 					"aria-hidden": "true"
-				})) : i("", !0),
+				}, null, 8, ["class"])) : i("", !0),
 				ee(" " + v(e.label) + " ", 1),
 				e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
 					key: 1,
-					class: f(["inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 px-1.5 text-sm font-medium tabular-nums", D[e.badgeColor ?? "neutral"]])
+					class: f(["inline-flex h-5 min-w-5 items-center justify-center rounded-6 px-2 text-xs leading-none font-medium tabular-nums", D[e.badgeColor ?? "neutral"]])
 				}, v(e.badge), 3)) : i("", !0)
 			]),
 			_: 2
 		}, 1040, ["class", "onClick"]))]))), 128))], 544)], 8, de)) : (m(), a("div", {
 			key: 2,
-			class: "shrink-0 border-r border-border-light bg-surface transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
+			class: "shrink-0 border-r border-border bg-surface transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
 			style: p(je.value)
 		}, [o("nav", {
 			"aria-label": s.label,
-			class: f(["ac-scrollbar flex flex-col gap-3 p-2", s.sticky && "sticky"]),
+			class: f(["ac-scrollbar flex flex-col gap-4", [s.sticky && "sticky", B.value ? "p-2" : "p-3"]]),
 			style: p(Ae.value),
 			onKeydown: X
 		}, [(m(!0), a(t, null, g(De.value, (e, n) => (m(), a("div", { key: e.name || `section-${n}` }, [e.name && !B.value ? (m(), a("p", pe, v(e.name), 1)) : e.name && n > 0 ? (m(), a("div", me)) : i("", !0), o("ul", he, [(m(!0), a(t, null, g(e.items, (e) => (m(), a("li", { key: e.key }, [e.children?.length ? (m(), a(t, { key: 1 }, [o("button", {
 			type: "button",
 			"data-side-tab": "",
-			class: f(["group flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 text-left text-base transition-colors duration-100 select-none hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", [B.value ? "justify-center" : "px-2.5", B.value && W(e) ? "bg-primary-95 text-primary-20" : W(e) ? "font-medium text-heading" : "text-body hover:text-heading"]]),
+			class: f(["group flex w-full cursor-pointer 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 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [B.value ? "h-9.5 justify-center" : "px-3", B.value && W(e) ? "border-primary/35 bg-primary/10 text-heading shadow-xs shadow-primary/10" : ["border-transparent hover:border-border hover:bg-accent-hover hover:text-heading", W(e) ? "text-heading" : "text-heading/80"]]]),
 			disabled: e.disabled || void 0,
 			"aria-expanded": B.value ? void 0 : G(e),
 			"aria-controls": `${y(O)}-${e.key}`,
@@ -276,7 +276,7 @@ var ue = {
 		}, [
 			e.icon || B.value ? (m(), a("span", {
 				key: 0,
-				class: f(["inline-flex size-4 shrink-0 items-center justify-center", W(e) ? "text-primary-30" : "text-muted group-hover:text-heading"]),
+				class: f(["inline-flex size-4 shrink-0 items-center justify-center", W(e) ? "text-primary" : "text-muted group-hover:text-heading"]),
 				"aria-hidden": "true"
 			}, [e.icon ? (m(), r(_(e.icon), {
 				key: 0,
@@ -285,32 +285,32 @@ var ue = {
 			o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
 			!B.value && e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
 				key: 1,
-				class: f(["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", D[e.badgeColor ?? "neutral"]])
+				class: f(["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", D[e.badgeColor ?? "neutral"]])
 			}, v(e.badge), 3)) : i("", !0),
 			B.value ? i("", !0) : (m(), r(y(se), {
 				key: 2,
-				class: f(["size-3.5 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none", G(e) && "rotate-90"]),
+				class: f(["size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none", G(e) && "rotate-90"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]))
 		], 10, _e), o("ul", {
 			id: `${y(O)}-${e.key}`,
 			role: "list",
-			class: f(["mt-0.5 ml-4.5 flex-col gap-0.5 border-l border-border-light pl-2", G(e) && !B.value ? "flex" : "hidden"])
+			class: f(["mt-1 ml-5 flex-col gap-1 border-l border-border pl-2", G(e) && !B.value ? "flex" : "hidden"])
 		}, [(m(!0), a(t, null, g(e.children, (e) => (m(), a("li", { key: e.key }, [(m(), r(_(K(e)), u({ ref_for: !0 }, q(e), {
 			"data-side-tab": "",
-			class: ["group flex h-8 w-full items-center gap-2.5 rounded-6 px-2.5 text-left text-base no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", J(e)],
+			class: ["group flex w-full items-center gap-3 rounded-10 border px-3 py-2 text-left text-base font-medium 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", J(e)],
 			onClick: (t) => Y(e, t)
 		}), {
 			default: S(() => [
 				e.icon ? (m(), r(_(e.icon), {
 					key: 0,
-					class: f(["size-4 shrink-0", !e.tone && !U(e) && "text-muted group-hover:text-heading"]),
+					class: f(["size-4 shrink-0", !e.tone && (U(e) ? "text-primary" : "text-muted group-hover:text-heading")]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])) : i("", !0),
 				o("span", be, v(e.label), 1),
 				e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
 					key: 1,
-					class: f(["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", D[e.badgeColor ?? "neutral"]])
+					class: f(["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", D[e.badgeColor ?? "neutral"]])
 				}, v(e.badge), 3)) : i("", !0)
 			]),
 			_: 2
@@ -319,14 +319,14 @@ var ue = {
 			ref_for: !0
 		}, q(e), {
 			"data-side-tab": "",
-			class: ["group relative flex h-8 w-full items-center gap-2.5 rounded-6 text-left text-base no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [J(e), B.value ? "justify-center" : "px-2.5"]],
+			class: ["group relative flex w-full items-center gap-3 rounded-10 border py-2 text-left text-base font-medium 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", [J(e), B.value ? "h-9.5 justify-center" : "px-3"]],
 			title: B.value ? e.label : void 0,
 			onClick: (t) => Y(e, t)
 		}), {
 			default: S(() => [
 				e.icon || B.value ? (m(), a("span", {
 					key: 0,
-					class: f(["inline-flex size-4 shrink-0 items-center justify-center", !e.tone && !U(e) && "text-muted group-hover:text-heading"]),
+					class: f(["inline-flex size-4 shrink-0 items-center justify-center", !e.tone && (U(e) ? "text-primary" : "text-muted group-hover:text-heading")]),
 					"aria-hidden": "true"
 				}, [e.icon ? (m(), r(_(e.icon), {
 					key: 0,
@@ -335,11 +335,11 @@ var ue = {
 				o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
 				e.badge !== void 0 && e.badge !== "" ? (m(), a(t, { key: 1 }, [B.value ? (m(), a("span", {
 					key: 0,
-					class: f(["absolute top-1 right-1 size-1.5 rounded-full", we[e.badgeColor ?? "neutral"]]),
+					class: f(["absolute top-1 right-1 size-2 rounded-full", we[e.badgeColor ?? "neutral"]]),
 					"aria-hidden": "true"
 				}, null, 2)) : (m(), a("span", {
 					key: 1,
-					class: f(["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", D[e.badgeColor ?? "neutral"]])
+					class: f(["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", D[e.badgeColor ?? "neutral"]])
 				}, v(e.badge), 3))], 64)) : i("", !0)
 			]),
 			_: 2
@@ -350,18 +350,18 @@ var ue = {
 		]))]))), 128))])]))), 128)), s.collapsible ? (m(), a("button", {
 			key: 0,
 			type: "button",
-			class: f(["mt-auto flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 text-base text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", B.value ? "justify-center" : "px-2.5"]),
+			class: f(["group mt-auto 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", B.value ? "h-9.5 justify-center" : "px-3"]),
 			"aria-label": B.value ? `Expand ${s.label}` : `Collapse ${s.label}`,
 			"aria-expanded": !T.value,
 			title: B.value ? "Expand" : void 0,
 			onClick: c[0] ||= (e) => T.value = !T.value
 		}, [B.value ? (m(), r(y(le), {
 			key: 0,
-			class: "size-4 shrink-0",
+			class: "size-4 shrink-0 text-muted group-hover:text-heading",
 			"aria-hidden": "true"
 		})) : (m(), r(y(ce), {
 			key: 1,
-			class: "size-4 shrink-0",
+			class: "size-4 shrink-0 text-muted group-hover:text-heading",
 			"aria-hidden": "true"
 		})), B.value ? i("", !0) : (m(), a("span", Se, "Collapse"))], 10, xe)) : i("", !0)], 46, fe)], 4))], 64)), z.value ? (m(), a("div", Ce, [ie(n.$slots, "default", {
 			active: w.value,

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

@@ -1,7 +1,7 @@
 export interface Props {
     /** Accessible name of the navigation landmark. */
     label?: string;
-    /** Dark sidebar on `bg-sidebar` in both themes, like the old library's default look. Everything inside uses the dark tokens. */
+    /** Dark sidebar on `bg-sidebar` (#171717) in both themes, like cloud-ui's dark theme. Everything inside uses the dark tokens. */
     dark?: boolean;
     /** Shows a Collapse button at the bottom that toggles `v-model:collapsed`. It's hidden in the mobile drawer. */
     collapsible?: boolean;
@@ -11,12 +11,12 @@ export interface Props {
     breakpoint?: number;
     /** With the sidebar collapsed to the rail, opens it to full width over the page while the pointer or keyboard focus is inside, then folds it back. The page doesn't shift. */
     hoverExpand?: boolean;
-    /** Offset from the top of the viewport on desktop, e.g. `"56px"` under a full-width navbar. The height shrinks to match. */
+    /** Offset from the top of the viewport on desktop, e.g. `"72px"` under a full-width navbar. The height shrinks to match. */
     top?: string;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
-    /** The 56px top bar: logo or cluster switcher. Receives `collapsed` so you can show a small logo in the rail. */
+    /** The 72px top bar, level with the navbar: logo or cluster switcher. Receives `collapsed` so you can show a small logo in the rail. */
     header?: (props: {
         collapsed: boolean;
     }) => unknown;