@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/components/AcSettingsRow.js

@@ -0,0 +1,5 @@
+import e from "./AcSettingsRow.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcSettingsRow.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,29 @@
+export interface Props {
+    /** What the setting is, in a few words: "Destroy", "Recovery console". */
+    title: string;
+    /** One or two sentences on what it does or what happens, e.g. "The VM is destroyed and its data can't be recovered." */
+    description?: string;
+    /** Dims the row and adds a "Coming soon" tag, for a setting that isn't wired up yet. Disable its action too. */
+    comingSoon?: boolean;
+    /** Text of the tag after the title. Defaults to "Coming soon" when `coming-soon` is set. */
+    tag?: string;
+}
+type __VLS_Slots = {
+    /** Extra content under the description, e.g. a field or a list of details. */
+    default?: () => unknown;
+    /** The control on the right: a button, a switch or a select. It moves under the text below 640px. */
+    action?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    description: string;
+    tag: string;
+    comingSoon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,37 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+//#region src/lib/components/AcSettingsRow.vue?vue&type=script&setup=true&lang.ts
+var c = { class: "min-w-0" }, l = { class: "flex flex-wrap items-center gap-2" }, u = { class: "text-base font-medium text-heading" }, d = {
+	key: 0,
+	class: "rounded-full bg-surface-sunken px-1.5 py-0.5 text-xm leading-none font-medium text-muted"
+}, f = {
+	key: 0,
+	class: "mt-0.5 text-xs leading-relaxed text-muted"
+}, p = {
+	key: 0,
+	class: "shrink-0"
+}, m = /*@__PURE__*/ r({
+	__name: "AcSettingsRow",
+	props: {
+		title: {},
+		description: { default: "" },
+		comingSoon: {
+			type: Boolean,
+			default: !1
+		},
+		tag: { default: "" }
+	},
+	setup(r) {
+		let m = r;
+		return (h, g) => (a(), t("div", {
+			class: i(["flex flex-col gap-3 border-t border-border/60 py-3.5 first:border-t-0 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between sm:gap-4", r.comingSoon && "opacity-60"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-settings-row"
+		}, [n("div", c, [
+			n("div", l, [n("h4", u, s(r.title), 1), r.tag || r.comingSoon ? (a(), t("span", d, s(m.tag || "Coming soon"), 1)) : e("", !0)]),
+			r.description ? (a(), t("p", f, s(r.description), 1)) : e("", !0),
+			o(h.$slots, "default")
+		]), h.$slots.action ? (a(), t("div", p, [o(h.$slots, "action")])) : e("", !0)], 2));
+	}
+});
+//#endregion
+export { m as default };

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 p-6" }, T = { class: "min-w-0 flex-1" }, E = ["id"], D = ["id"], O = { class: "flex h-7 shrink-0 items-center gap-3" }, 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 p-6"
+}, 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",
@@ -78,43 +78,43 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 		}, {
 			default: b(() => [F.value ? (f(), i("div", {
 				key: 0,
-				class: "fixed inset-0 z-[80] bg-overlay backdrop-blur-[2px]",
+				class: "fixed inset-0 z-[80] bg-black/50",
 				"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 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: "-m-0.5 inline-flex cursor-pointer items-center justify-center rounded-6 p-0.5 text-muted transition-colors 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;
@@ -77,8 +77,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     bottom: string;
     top: string;
     mobile: "select" | "scroll";
-    collapsible: boolean;
     sticky: boolean;
+    collapsible: boolean;
     breakpoint: number;
     offsetSelectors: string[];
     hideTabs: boolean;

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. In the app's dark theme the sidebar uses this colour anyway. */
     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;
@@ -29,6 +29,7 @@ type __VLS_Slots = {
 };
 /** Collapses or expands on desktop, and opens or closes the drawer on mobile. Wire it to a navbar menu button. */
 declare function toggle(): void;
+declare function revealActive(): void;
 type __VLS_ModelProps = {
     /** Icon-only 56px rail on desktop. Bind with `v-model:collapsed`. */
     "collapsed"?: boolean;
@@ -38,6 +39,8 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     toggle: typeof toggle;
+    /** Scrolls the current page's item into view when it's outside the visible list. Call it after the route changes. */
+    revealActive: typeof revealActive;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:collapsed": (value: boolean) => any;
     "update:mobileOpen": (value: boolean) => any;