@ac-design/design-system 2.0.0 → 2.1.1

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,12 +1,12 @@
 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 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 = {
+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 p-6"
 }, A = {
 	key: 0,
-	class: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border px-6 py-4"
+	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({
@@ -78,7 +78,7 @@ 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: U,
@@ -100,7 +100,7 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 			}, [
 				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"
+					class: "text-xl leading-7 font-semibold text-heading"
 				}, h(s.title), 9, E), s.description ? (f(), i("p", {
 					key: 0,
 					id: `${g(z)}-desc`,
@@ -108,7 +108,7 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				}, 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-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",
+					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",

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

@@ -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/AcSidebar.vue.d.ts

@@ -1,7 +1,7 @@
 export interface Props {
     /** Accessible name of the navigation landmark. */
     label?: string;
-    /** Dark sidebar on `bg-sidebar` (#171717) in both themes, like cloud-ui's dark theme. 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;
@@ -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;

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

@@ -11,8 +11,8 @@ var te = [
 }, re = {
 	key: 0,
 	role: "list",
-	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({
+	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,111 +49,114 @@ var te = [
 	}),
 	emits: ["update:collapsed", "update:mobileOpen"],
 	setup(c, { expose: l }) {
-		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)));
+		let j = c, M = x(c, "collapsed"), N = x(c, "mobileOpen"), P = g(null), F = g(null), I = g(!j.contained && typeof window < "u" && window.matchMedia(Y()).matches), L = null, R = null, z = null, B = g(!1), V = n(() => j.hoverExpand && M.value && !I.value && B.value), H = n(() => M.value && !I.value && !V.value), U = n(() => M.value && !I.value), W = !1, G;
+		function K(e) {
+			j.hoverExpand && (e && W || (clearTimeout(G), G = setTimeout(() => B.value = e, e ? ae : A)));
 		}
-		function J() {
-			G = !0, clearTimeout(K), V.value = !1, N.value = !N.value;
+		function q() {
+			W = !0, clearTimeout(G), B.value = !1, M.value = !M.value;
 		}
-		function ae() {
-			G = !1, q(!1);
+		function oe() {
+			W = !1, K(!1);
 		}
-		function oe(e) {
-			F.value?.contains(e.relatedTarget) || q(!1);
+		function se(e) {
+			P.value?.contains(e.relatedTarget) || K(!1);
 		}
-		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 = M.dark ? "dark border-r border-border bg-sidebar text-body" : "border-r border-border bg-surface-muted text-body";
-			return L.value ? [
+		let J = n(() => I.value && N.value), ce = n(() => j.dark), le = n(() => I.value || j.contained ? void 0 : {
+			top: j.top,
+			height: `calc(100dvh - ${j.top})`
+		}), ue = n(() => {
+			let e = j.dark ? "dark border-r border-border bg-sidebar text-body shadow-sm" : "border-r border-border bg-sidebar-panel/95 text-body shadow-sm backdrop-blur-sm";
+			return I.value ? [
 				e,
-				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]"
+				j.contained ? "absolute" : "fixed",
+				"inset-y-0 left-0 z-[80] w-64 duration-300 ease-out-soft motion-reduce:transition-none",
+				N.value ? "visible translate-x-0 transition-[translate]" : "invisible -translate-x-full transition-[translate,visibility]"
 			] : [
 				e,
-				H.value ? [M.contained ? "absolute inset-y-0 left-0" : "fixed left-0", "z-30 shadow-xl"] : M.contained ? "relative h-full" : "sticky",
+				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",
-				U.value ? "w-14" : "w-64"
+				H.value ? "w-14" : j.contained ? "w-64" : "w-64 lg:w-52 xl:w-64"
 			];
 		});
-		function X() {
-			return `(max-width: ${M.breakpoint - .02}px)`;
-		}
-		function ue() {
-			L.value ? P.value = !P.value : N.value = !N.value;
+		function Y() {
+			return `(max-width: ${j.breakpoint - .02}px)`;
 		}
 		function de() {
-			N.value = !1;
+			I.value ? N.value = !N.value : M.value = !M.value;
 		}
 		function fe() {
-			L.value && (P.value = !1);
+			M.value = !1;
 		}
-		function Z() {
-			P.value = !1;
+		function pe() {
+			I.value && (N.value = !1);
+		}
+		function X() {
+			N.value = !1;
 		}
-		function pe(e) {
-			if (Y.value && F.value) {
-				if (e.key === "Escape") e.stopPropagation(), Z();
+		function me(e) {
+			if (J.value && P.value) {
+				if (e.key === "Escape") e.stopPropagation(), X();
 				else if (e.key === "Tab") {
-					let t = [...F.value.querySelectorAll(k)].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) {
-			L.value = e.matches;
+		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() {
-			let e = I.value, t = e?.querySelector("[aria-current=\"page\"]");
+		function $() {
+			let e = F.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: U,
-			isMobile: L,
-			dark: se,
-			expand: de,
-			navigate: fe
-		}), 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);
+			rail: H,
+			isMobile: I,
+			dark: ce,
+			expand: fe,
+			navigate: pe
+		}), S(J, async (e, t) => {
+			e ? (L = document.activeElement, j.contained || Q(!0), await ee(), (P.value?.querySelector("[aria-current=\"page\"]") ?? P.value?.querySelector(k))?.focus()) : t && (j.contained || Q(!1), L?.focus?.());
+		}), S(I, (e) => {
+			e || (N.value = !1);
 		}), p(() => {
-			if (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();
+			if (j.contained) {
+				let e = P.value?.parentElement;
+				e && (z = new ResizeObserver(([e]) => I.value = (e?.contentRect.width ?? 0) < j.breakpoint), z.observe(e));
+			} else R = window.matchMedia(Y()), I.value = R.matches, R.addEventListener("change", Z);
+			$();
 		}), f(() => {
-			clearTimeout(K), z?.removeEventListener("change", Q), B?.disconnect(), Y.value && !M.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",
 				"leave-active-class": "transition-opacity duration-150",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: C(() => [Y.value ? (m(), a("div", {
+				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
 			}),
-			H.value ? (m(), a("div", {
+			V.value ? (m(), a("div", {
 				key: 0,
 				class: d(["w-14 shrink-0", c.contained && "h-full"]),
 				"aria-hidden": "true",
@@ -161,61 +164,68 @@ var te = [
 			}, null, 2)) : i("", !0),
 			o("aside", u({
 				ref_key: "root",
-				ref: F
+				ref: P
 			}, n.$attrs, {
-				class: ["flex shrink-0 flex-col overflow-hidden", le.value],
-				style: ce.value,
-				role: Y.value ? "dialog" : void 0,
-				"aria-modal": Y.value || void 0,
-				"aria-label": Y.value ? c.label : void 0,
+				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,
-				onMouseenter: l[0] ||= (e) => q(!0),
-				onMouseleave: ae,
-				onFocusin: l[1] ||= (e) => q(!0),
-				onFocusout: oe
+				onKeydown: me,
+				onMouseenter: l[0] ||= (e) => K(!0),
+				onMouseleave: oe,
+				onFocusin: l[1] ||= (e) => K(!0),
+				onFocusout: se
 			}), [
-				n.$slots.header || L.value ? (m(), a("div", {
+				n.$slots.header || I.value ? (m(), a("div", {
 					key: 0,
-					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", {
+					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: "-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",
+					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-5",
 					"aria-hidden": "true"
 				})])) : i("", !0)], 2)) : i("", !0),
 				o("nav", {
 					ref_key: "nav",
-					ref: I,
+					ref: F,
 					"aria-label": c.label,
-					class: d(["ac-scrollbar min-h-0 flex-1 overflow-x-hidden py-5", U.value ? "px-2" : "px-4"])
+					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 && !L.value ? (m(), a("div", {
-					key: 1,
-					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", {
+				n.$slots.footer || c.collapsible && !I.value ? (m(), a("div", {
 					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", 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: J
-				}, [(m(), r(v(W.value ? b(T) : b(w)), {
-					class: "size-4 shrink-0 text-muted group-hover:text-heading",
-					"aria-hidden": "true"
-				})), U.value ? i("", !0) : (m(), a("span", O, y(W.value ? "Expand" : "Collapse"), 1))], 10, ie)) : 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));
 	}
 });
 //#endregion
-export { M as default };
+export { j as default };

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 duration-200 group-hover:text-heading group-aria-[current=page]:text-primary! [&>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 = {
+		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"
-		}, R = {
+		}, 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(() => N.to && V && !N.disabled ? V : N.to || N.href ? "a" : "button"), Y = 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 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) {
+			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 (M.disabled) {
 				e.preventDefault();
 				return;
 			}
-			F("click", e), z?.navigate();
+			P("click", e), R?.navigate();
 		}
-		function Q() {
-			q.value ? (z?.expand(), P.value = !0) : P.value = !P.value;
+		function ee() {
+			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,
@@ -95,62 +91,66 @@ var D = {
 				!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": "",
 			"data-testid": "ac-sidebar-group",
-			onClick: Q
+			onClick: ee
 		}, [
 			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 duration-200 [&>img]:size-4", W.value ? "text-primary" : "text-muted group-hover:text-heading"]),
+				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),
-			X.value && !q.value ? (m(), i("span", {
+			Z.value && !q.value ? (m(), i("span", {
 				key: 1,
-				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),
+				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-4 shrink-0 text-muted transition-transform duration-200 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-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: 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 ? X.value ? `${o.label} (${X.value})` : o.label : void 0,
+			title: q.value ? Z.value ? `${o.label} (${Z.value})` : o.label : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-link",
-			onClick: Z
+			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: 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-4"
-				})) : (m(), i("span", k, y(o.label.charAt(0)), 1))])])) : r("", !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),
-				X.value ? (m(), i(e, { key: 1 }, [q.value ? (m(), i("span", {
+				Z.value ? (m(), i(e, { key: 1 }, [q.value ? (m(), i("span", {
 					key: 0,
-					class: d(["absolute top-1 right-1 size-2 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-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)
+					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
 		}, 16, ["class", "title"]))]));
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };