@ac-design/design-system 2.10.1 → 2.10.3

package/dist/lib/compat.css

@@ -6064,6 +6064,28 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .\[\&\>svg\]\:text-muted > svg:where([data-ac-ds], [data-ac-ds] *) {
     color: var(--color-muted) !important;
   }
+  .peer + .\[\.peer\+\&\]\:mt-2\.5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: calc(var(--spacing) * 2.5) !important;
+  }
+  .peer + .\[\.peer\+\&\]\:mt-5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: calc(var(--spacing) * 5) !important;
+  }
+  .peer + .\[\.peer\+\&\]\:border-t:where([data-ac-ds], [data-ac-ds] *) {
+    border-top-style: var(--tw-border-style) !important;
+    border-top-width: 1px !important;
+  }
+  .peer + .\[\.peer\+\&\]\:border-muted\/20:where([data-ac-ds], [data-ac-ds] *) {
+    border-color: color-mix(in srgb, #5c5c5c 20%, transparent) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-muted) 20%, transparent) !important;
+    }
+  }
+  .peer + .\[\.peer\+\&\]\:pt-4:where([data-ac-ds], [data-ac-ds] *) {
+    padding-top: calc(var(--spacing) * 4) !important;
+  }
+  .peer[data-closed] + .\[\.peer\[data-closed\]\+\&\]\:mt-0:where([data-ac-ds], [data-ac-ds] *) {
+    margin-top: 0px !important;
+  }
   :where(.\[\:where\(\&\)\]\:w-full):where([data-ac-ds], [data-ac-ds] *) {
     width: 100% !important;
   }
@@ -6093,28 +6115,6 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     width: calc(var(--spacing) * 4) !important;
     height: calc(var(--spacing) * 4) !important;
   }
-  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:mt-2\.5:where([data-ac-ds], [data-ac-ds] *) {
-    margin-top: calc(var(--spacing) * 2.5) !important;
-  }
-  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:mt-5:where([data-ac-ds], [data-ac-ds] *) {
-    margin-top: calc(var(--spacing) * 5) !important;
-  }
-  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:border-t:where([data-ac-ds], [data-ac-ds] *) {
-    border-top-style: var(--tw-border-style) !important;
-    border-top-width: 1px !important;
-  }
-  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:border-muted\/20:where([data-ac-ds], [data-ac-ds] *) {
-    border-color: color-mix(in srgb, #5c5c5c 20%, transparent) !important;
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-muted) 20%, transparent) !important;
-    }
-  }
-  [data-testid=ac-sidebar-section] + .\[\[data-testid\=ac-sidebar-section\]\+\&\]\:pt-4:where([data-ac-ds], [data-ac-ds] *) {
-    padding-top: calc(var(--spacing) * 4) !important;
-  }
-  [data-testid=ac-sidebar-section][data-closed] + .\[\[data-testid\=ac-sidebar-section\]\[data-closed\]\+\&\]\:mt-0:where([data-ac-ds], [data-ac-ds] *) {
-    margin-top: 0px !important;
-  }
   tbody .\[tbody_\&\]\:h-\[51px\]:where([data-ac-ds], [data-ac-ds] *) {
     height: 51px !important;
   }

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

@@ -1,6 +1,6 @@
-import { computed as e, createElementBlock as t, defineComponent as n, mergeModels as r, normalizeClass as i, openBlock as a, provide as o, ref as s, renderSlot as c, useModel as l } from "vue";
+import { computed as e, createElementBlock as t, defineComponent as n, mergeModels as r, normalizeClass as i, openBlock as a, provide as o, ref as s, renderSlot as c, useId as l, useModel as u } from "vue";
 //#region src/lib/components/AcAccordion.vue?vue&type=script&setup=true&lang.ts
-var u = /*@__PURE__*/ n({
+var d = /*@__PURE__*/ n({
 	__name: "AcAccordion",
 	props: /*@__PURE__*/ r({
 		multiple: {
@@ -15,18 +15,19 @@ var u = /*@__PURE__*/ n({
 	}),
 	emits: ["update:modelValue"],
 	setup(n) {
-		let r = n, u = l(n, "modelValue"), d = s(null), f = e(() => {
-			let e = u.value;
+		let r = n, d = u(n, "modelValue"), f = s(null), p = e(() => {
+			let e = d.value;
 			return e == null || e === "" ? [] : Array.isArray(e) ? e : [e];
 		});
-		function p(e) {
-			return f.value.includes(e);
-		}
 		function m(e) {
-			let t = p(e);
-			r.multiple ? u.value = t ? f.value.filter((t) => t !== e) : [...f.value, e] : u.value = t ? null : e;
+			return p.value.includes(e);
 		}
 		function h(e) {
+			let t = m(e);
+			r.multiple ? d.value = t ? p.value.filter((t) => t !== e) : [...p.value, e] : d.value = t ? null : e;
+		}
+		let g = l();
+		function _(e) {
 			if (![
 				"ArrowDown",
 				"ArrowUp",
@@ -35,17 +36,18 @@ var u = /*@__PURE__*/ n({
 			].includes(e.key)) return;
 			let t = e.target;
 			if (!t.matches("[data-accordion-trigger]")) return;
-			let n = [...d.value?.querySelectorAll("[data-accordion-trigger]") ?? []].filter((e) => e.closest("[data-testid='ac-accordion']") === d.value && !e.disabled), r = n.indexOf(t);
+			let n = [...f.value?.querySelectorAll("[data-accordion-trigger]") ?? []].filter((e) => e.dataset.accordionTrigger === g && !e.disabled), r = n.indexOf(t);
 			r < 0 || (e.preventDefault(), n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : (r + (e.key === "ArrowDown" ? 1 : -1) + n.length) % n.length]?.focus());
 		}
 		return o("ac-accordion", {
-			isOpen: p,
-			toggle: m,
+			uid: g,
+			isOpen: m,
+			toggle: h,
 			variant: e(() => r.variant),
 			headingLevel: e(() => r.headingLevel)
 		}), (e, r) => (a(), t("div", {
 			ref_key: "root",
-			ref: d,
+			ref: f,
 			class: i(["w-full", {
 				"divide-y divide-border overflow-hidden rounded-14 border border-border bg-surface": n.variant === "bordered",
 				"flex flex-col gap-3": n.variant === "separated",
@@ -53,9 +55,9 @@ var u = /*@__PURE__*/ n({
 			}]),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion",
-			onKeydown: h
+			onKeydown: _
 		}, [c(e.$slots, "default")], 34));
 	}
 });
 //#endregion
-export { u as default };
+export { d as default };

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

@@ -46,7 +46,7 @@ var S = {
 		}
 		let R = e(() => O.collapsible ? {
 			type: "button",
-			"data-accordion-trigger": "",
+			"data-accordion-trigger": j?.uid ?? "",
 			"aria-expanded": P.value,
 			"aria-controls": `${M}-panel`,
 			disabled: O.disabled

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

@@ -26,67 +26,69 @@ var T = ["aria-label"], E = { class: "sr-only" }, D = { class: "block font-mono
 	},
 	emits: ["copy"],
 	setup(u, { expose: M, emit: N }) {
-		let P = u, F = N, I = b(), L = g(null), R = g(null), z = g("idle"), B = g(!1), V, H = r(() => ({
+		let P = u, F = N, I = b(), L = g(null), R = g(null), z = g(null), B = g("idle"), V = g(!1), H, U = r(() => ({
 			class: I.class,
 			style: I.style
-		})), U = r(() => {
+		})), W = r(() => {
 			let { class: e, style: t, ...n } = I;
 			return n;
-		}), W = r(() => P.display || P.value), G = r(() => P.label ? ` ${P.label}` : ""), K = r(() => P.label || "value"), q = r(() => !P.iconOnly && (B.value || !!P.display && P.display !== P.value)), J = r(() => P.iconOnly ? P.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : P.variant === "chip" ? P.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : P.size === "small" ? "gap-1 rounded-4 text-xs" : P.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), Y = r(() => P.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : P.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : P.size ? "text-heading" : ""), X = r(() => P.iconOnly && P.size !== "small" ? "size-4" : "size-3.5"), Z = r(() => P.iconOnly ? "" : P.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
-		function Q() {
-			let e = R.value;
-			B.value = !!e && e.scrollWidth > e.clientWidth + 1;
+		}), G = r(() => P.display || P.value), K = r(() => P.label ? ` ${P.label}` : ""), q = r(() => P.label || "value"), J = r(() => !P.iconOnly && (V.value || !!P.display && P.display !== P.value)), Y = r(() => P.iconOnly ? P.size === "small" ? "size-6 justify-center rounded-6" : "size-7 justify-center rounded-8" : P.variant === "chip" ? P.size === "small" ? "gap-1.5 rounded-8 px-2 py-0.5 text-xs" : "gap-1.5 rounded-8 px-2.5 py-1 text-base" : P.size === "small" ? "gap-1 rounded-4 text-xs" : P.size === "normal" ? "gap-1.5 rounded-6 text-base" : "gap-1 rounded-4"), X = r(() => P.iconOnly ? "text-muted hover:bg-surface-sunken hover:text-heading" : P.variant === "chip" ? "border border-border bg-surface-sunken/50 text-muted hover:border-border-dark hover:text-heading" : P.size ? "text-heading" : ""), Z = r(() => P.iconOnly && P.size !== "small" ? "size-4" : "size-3.5"), Q = r(() => P.iconOnly ? "" : P.variant === "chip" ? "text-muted opacity-60 group-hover:opacity-100 group-focus-visible:opacity-100" : "text-muted opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 pointer-coarse:opacity-100");
+		function $() {
+			let e = z.value;
+			V.value = !!e && e.scrollWidth > e.clientWidth + 1;
 		}
-		async function $() {
-			clearTimeout(V);
+		async function ee() {
+			clearTimeout(H);
 			try {
-				await t(P.value), z.value = "copied", F("copy", P.value);
+				await t(P.value), B.value = "copied", F("copy", P.value);
 			} catch {
-				z.value = "failed";
+				B.value = "failed";
 			}
-			V = setTimeout(() => z.value = "idle", A), await f(), ee();
+			H = setTimeout(() => B.value = "idle", A), await f(), te();
 		}
-		function ee() {
-			let e = L.value?.closest("[data-testid=\"ac-tooltip\"]");
+		function te() {
+			let e = R.value?.$el;
 			e && L.value?.matches(":hover") && e.dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
 		}
-		function te() {
+		function ne() {
 			L.value?.focus();
 		}
-		return m(() => clearTimeout(V)), M({ focus: te }), (t, r) => (h(), o("span", d({ class: "inline-flex max-w-full min-w-0 align-middle" }, H.value, {
+		return m(() => clearTimeout(H)), M({ focus: ne }), (t, r) => (h(), o("span", d({ class: "inline-flex max-w-full min-w-0 align-middle" }, U.value, {
 			"data-ac-ds": "",
 			"data-testid": "ac-copy-button"
 		}), [l(e, {
+			ref_key: "tooltip",
+			ref: R,
 			class: "min-w-0 flex-auto",
-			delay: z.value === "idle" ? 300 : 0,
-			"max-width": z.value === "idle" && q.value ? j : void 0
+			delay: B.value === "idle" ? 300 : 0,
+			"max-width": B.value === "idle" && J.value ? j : void 0
 		}, {
-			content: x(() => [z.value === "copied" ? (h(), o(n, { key: 0 }, [c("Copied" + v(G.value), 1)], 64)) : z.value === "failed" ? (h(), o(n, { key: 1 }, [c("Couldn't copy" + v(G.value) + ". The browser blocked the clipboard.", 1)], 64)) : q.value ? (h(), o(n, { key: 2 }, [s("span", D, v(u.value), 1), s("span", O, "Click to copy" + v(G.value), 1)], 64)) : (h(), o(n, { key: 3 }, [c("Copy" + v(G.value), 1)], 64))]),
+			content: x(() => [B.value === "copied" ? (h(), o(n, { key: 0 }, [c("Copied" + v(K.value), 1)], 64)) : B.value === "failed" ? (h(), o(n, { key: 1 }, [c("Couldn't copy" + v(K.value) + ". The browser blocked the clipboard.", 1)], 64)) : J.value ? (h(), o(n, { key: 2 }, [s("span", D, v(u.value), 1), s("span", O, "Click to copy" + v(K.value), 1)], 64)) : (h(), o(n, { key: 3 }, [c("Copy" + v(K.value), 1)], 64))]),
 			default: x(() => [s("button", d({
 				ref_key: "button",
 				ref: L,
 				type: "button",
-				class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [J.value, Y.value]],
-				"aria-label": u.iconOnly ? `Copy ${K.value}` : void 0
-			}, U.value, {
-				onClick: S($, ["stop"]),
-				onPointerenter: Q,
-				onFocus: Q
-			}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${K.value}: `), 1), s("span", {
+				class: ["group inline-flex max-w-full min-w-0 flex-auto cursor-pointer items-center text-left transition-[color,background-color,border-color] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", [Y.value, X.value]],
+				"aria-label": u.iconOnly ? `Copy ${q.value}` : void 0
+			}, W.value, {
+				onClick: S(ee, ["stop"]),
+				onPointerenter: $,
+				onFocus: $
+			}), [u.iconOnly ? a("", !0) : (h(), o(n, { key: 0 }, [s("span", E, v(`Copy ${q.value}: `), 1), s("span", {
 				ref_key: "text",
-				ref: R,
+				ref: z,
 				class: p(["min-w-0 truncate", u.mono && "font-mono"])
-			}, [_(t.$slots, "default", {}, () => [c(v(W.value), 1)])], 2)], 64)), z.value === "copied" ? (h(), i(y(C), {
+			}, [_(t.$slots, "default", {}, () => [c(v(G.value), 1)])], 2)], 64)), B.value === "copied" ? (h(), i(y(C), {
 				key: 1,
-				class: p(["shrink-0 text-primary", X.value]),
+				class: p(["shrink-0 text-primary", Z.value]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])) : (h(), i(y(w), {
 				key: 2,
-				class: p(["shrink-0 transition-opacity duration-200", [X.value, Z.value]]),
+				class: p(["shrink-0 transition-opacity duration-200", [Z.value, Q.value]]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]))], 16, T)]),
 			_: 3
-		}, 8, ["delay", "max-width"]), s("span", k, v(z.value === "copied" ? `Copied ${K.value}` : z.value === "failed" ? `Couldn't copy ${K.value}` : ""), 1)], 16));
+		}, 8, ["delay", "max-width"]), s("span", k, v(B.value === "copied" ? `Copied ${q.value}` : B.value === "failed" ? `Couldn't copy ${q.value}` : ""), 1)], 16));
 	}
 });
 //#endregion

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

@@ -165,8 +165,14 @@ var oe = [
 			e.isComposing || (e.preventDefault(), t < R.value.length - 1 ? Y(t + 1, "key") : V.value || $());
 		}
 		function Ce(e, t) {
+			return [...e.querySelectorAll("[aria-controls]")].some((n) => {
+				let r = document.getElementById(n.getAttribute("aria-controls") ?? "")?.closest("[data-ac-ds]");
+				return !!r && !r.contains(e) && r.contains(t);
+			});
+		}
+		function we(e, t) {
 			let n = e.currentTarget, r = e.relatedTarget;
-			r && (n.contains(r) || r instanceof Element && r.closest("[data-testid='ac-select-panel']")) || N.value === t && (N.value = null);
+			r && (n.contains(r) || Ce(n, r)) || N.value === t && (N.value = null);
 		}
 		return y(w, (e) => {
 			!e || Array.isArray(e) || ye(e, I) || (F.value = Object.entries(e).map(([e, t]) => ({
@@ -227,7 +233,7 @@ var oe = [
 					"data-row": r,
 					class: m(["grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4", !d.plain && "max-sm:rounded-10 max-sm:border max-sm:border-border max-sm:bg-surface max-sm:p-3"]),
 					onFocusin: (e) => N.value = M.value[r] ?? null,
-					onFocusout: (e) => Ce(e, M.value[r] ?? -1)
+					onFocusout: (e) => we(e, M.value[r] ?? -1)
 				}, [l("div", { class: m(["grid items-start gap-x-4 gap-y-3 [&_div:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:font-medium", [H.value, d.plain && "[&_input]:pr-3 [&_input]:pl-3"]]) }, [
 					u(t, {
 						"data-cell": "key",

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

@@ -1,7 +1,7 @@
 import e from "./AcListItem.js";
-import { Fragment as t, computed as n, createBlock as r, createElementBlock as i, defineComponent as a, getCurrentInstance as o, mergeProps as s, normalizeClass as c, openBlock as l, provide as u, reactive as d, ref as f, renderList as p, renderSlot as m, toHandlers as h, toRef as g } from "vue";
+import { Fragment as t, computed as n, createBlock as r, createElementBlock as i, defineComponent as a, getCurrentInstance as o, mergeProps as s, normalizeClass as c, openBlock as l, provide as u, reactive as d, ref as f, renderList as p, renderSlot as m, toHandlers as h, toRef as g, useId as _ } from "vue";
 //#region src/lib/components/AcList.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-label"], v = "[data-ac-list-row]:not([aria-disabled='true']):not(:disabled)", y = /*@__PURE__*/ a({
+var v = ["aria-label"], y = "[data-ac-list-row]:not([aria-disabled='true']):not(:disabled)", b = /*@__PURE__*/ a({
 	__name: "AcList",
 	props: {
 		items: { default: () => [] },
@@ -14,16 +14,17 @@ var _ = ["aria-label"], v = "[data-ac-list-row]:not([aria-disabled='true']):not(
 		label: { default: void 0 }
 	},
 	emits: ["select"],
-	setup(a, { emit: y }) {
-		let b = a, x = y, S = !!o()?.vnode.props?.onSelect, C = f(null), w = n(() => b.variant === "plain" && !b.divided), T = n(() => b.items.some((e) => e.selected !== void 0));
+	setup(a, { emit: b }) {
+		let x = a, S = b, C = !!o()?.vnode.props?.onSelect, w = f(null), T = n(() => x.variant === "plain" && !x.divided), E = n(() => x.items.some((e) => e.selected !== void 0)), D = _();
 		u("ac-list", d({
-			size: g(b, "size"),
-			rounded: w
+			uid: D,
+			size: g(x, "size"),
+			rounded: T
 		}));
-		function E(e, t) {
-			return S ? { click: () => x("select", e, t) } : {};
+		function O(e, t) {
+			return C ? { click: () => S("select", e, t) } : {};
 		}
-		function D(e) {
+		function k(e) {
 			if (![
 				"ArrowDown",
 				"ArrowUp",
@@ -32,22 +33,22 @@ var _ = ["aria-label"], v = "[data-ac-list-row]:not([aria-disabled='true']):not(
 			].includes(e.key)) return;
 			let t = e.target;
 			if (!t.matches("[data-ac-list-row]")) return;
-			let n = [...C.value?.querySelectorAll(v) ?? []].filter((e) => e.closest("[data-testid='ac-list']") === C.value), r = n.indexOf(t);
+			let n = [...w.value?.querySelectorAll(y) ?? []].filter((e) => e.dataset.acListRow === D), r = n.indexOf(t);
 			r < 0 || (e.preventDefault(), n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : Math.min(Math.max(r + (e.key === "ArrowDown" ? 1 : -1), 0), n.length - 1)]?.focus());
 		}
 		return (n, o) => (l(), i("ul", {
 			ref_key: "root",
-			ref: C,
+			ref: w,
 			role: "list",
 			class: c(["@container m-0 flex list-none flex-col p-0", [
 				a.variant === "card" && "overflow-hidden rounded-14 border border-border bg-surface",
 				a.divided && "divide-y divide-border",
-				w.value && "gap-0.5"
+				T.value && "gap-0.5"
 			]]),
 			"aria-label": a.label,
 			"data-ac-ds": "",
 			"data-testid": "ac-list",
-			onKeydown: D
+			onKeydown: k
 		}, [m(n.$slots, "default", {}, () => [(l(!0), i(t, null, p(a.items, (t, n) => (l(), r(e, s({
 			key: t.key ?? t.title,
 			title: t.title,
@@ -55,10 +56,10 @@ var _ = ["aria-label"], v = "[data-ac-list-row]:not([aria-disabled='true']):not(
 			icon: t.icon,
 			to: t.to,
 			href: t.href,
-			selected: T.value ? !!t.selected : void 0,
+			selected: E.value ? !!t.selected : void 0,
 			disabled: t.disabled,
 			chevron: t.chevron
-		}, h(E(t, n))), null, 16, [
+		}, h(O(t, n))), null, 16, [
 			"title",
 			"description",
 			"icon",
@@ -67,8 +68,8 @@ var _ = ["aria-label"], v = "[data-ac-list-row]:not([aria-disabled='true']):not(
 			"selected",
 			"disabled",
 			"chevron"
-		]))), 128))])], 42, _));
+		]))), 128))])], 42, v));
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };

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

@@ -46,7 +46,7 @@ var v = {
 			}
 		}, O = c("ac-list", null), k = s()?.appContext.components.RouterLink, A = !!s()?.vnode.props?.onClick, j = e(() => D[O?.size ?? "normal"]), M = e(() => T.to && k && !T.disabled ? k : T.to || T.href ? "a" : A ? "button" : "div"), N = e(() => M.value !== "div"), P = e(() => {
 			let e = {};
-			return M.value === k ? e.to = T.to : M.value === "a" ? T.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = T.href ?? (typeof T.to == "string" ? T.to : void 0) : M.value === "button" && (e.type = "button", e.disabled = T.disabled || void 0, e["aria-pressed"] = T.selected), N.value && (e["data-ac-list-row"] = ""), T.selected && M.value !== "button" && (e["aria-current"] = N.value ? "page" : "true"), e;
+			return M.value === k ? e.to = T.to : M.value === "a" ? T.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = T.href ?? (typeof T.to == "string" ? T.to : void 0) : M.value === "button" && (e.type = "button", e.disabled = T.disabled || void 0, e["aria-pressed"] = T.selected), N.value && (e["data-ac-list-row"] = O?.uid ?? ""), T.selected && M.value !== "button" && (e["aria-current"] = N.value ? "page" : "true"), e;
 		});
 		function F(e) {
 			if (T.disabled) {

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

@@ -20,9 +20,9 @@ var v = ["data-closed"], y = ["aria-expanded", "aria-controls"], b = { class: "t
 	setup(o) {
 		let c = g(o, "open"), C = s("ac-sidebar", null), w = s("ac-sidebar-section", !1);
 		d("ac-sidebar-section", !0), d("ac-sidebar-subgroup", w);
-		let T = h(), E = t(() => C?.rail.value ?? !1), D = t(() => c.value || E.value), O = t(() => C?.compact?.value ?? !1), k = t(() => w ? O.value ? "mb-1 py-[5px] text-xm text-muted/80" : "mb-1 py-0.5 text-xm text-muted/80" : O.value ? D.value ? "mb-2 py-1 text-sm text-muted" : "mb-1 py-1 text-sm text-muted" : "mb-2 py-0.5 text-sm text-muted"), A = t(() => w ? O.value ? "mt-0.5 first:mt-0" : "mt-2 first:mt-0" : E.value ? "mt-2 border-t border-muted/20 pt-2 first:mt-0 first:border-0 first:pt-0" : O.value ? "mt-3 first:mt-0 [[data-testid=ac-sidebar-section][data-closed]+&]:mt-0 [[data-testid=ac-sidebar-section]+&]:mt-2.5 [[data-testid=ac-sidebar-section]+&]:border-t [[data-testid=ac-sidebar-section]+&]:border-muted/20 [[data-testid=ac-sidebar-section]+&]:pt-4" : "mt-4 first:mt-0 [[data-testid=ac-sidebar-section]+&]:mt-5 [[data-testid=ac-sidebar-section]+&]:border-t [[data-testid=ac-sidebar-section]+&]:border-muted/20 [[data-testid=ac-sidebar-section]+&]:pt-4");
+		let T = h(), E = t(() => C?.rail.value ?? !1), D = t(() => c.value || E.value), O = t(() => C?.compact?.value ?? !1), k = t(() => w ? O.value ? "mb-1 py-[5px] text-xm text-muted/80" : "mb-1 py-0.5 text-xm text-muted/80" : O.value ? D.value ? "mb-2 py-1 text-sm text-muted" : "mb-1 py-1 text-sm text-muted" : "mb-2 py-0.5 text-sm text-muted"), A = t(() => w ? O.value ? "mt-0.5 first:mt-0" : "mt-2 first:mt-0" : E.value ? "mt-2 border-t border-muted/20 pt-2 first:mt-0 first:border-0 first:pt-0" : O.value ? "mt-3 first:mt-0 [.peer[data-closed]+&]:mt-0 [.peer+&]:mt-2.5 [.peer+&]:border-t [.peer+&]:border-muted/20 [.peer+&]:pt-4" : "mt-4 first:mt-0 [.peer+&]:mt-5 [.peer+&]:border-t [.peer+&]:border-muted/20 [.peer+&]:pt-4");
 		return (t, s) => (u(), r("li", {
-			class: l(["list-none", A.value]),
+			class: l(["peer list-none", A.value]),
 			"data-closed": !D.value || void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-sidebar-section"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ac-design/design-system",
-  "version": "2.10.1",
+  "version": "2.10.3",
   "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
   "repository": {
     "type": "git",