@ac-design/design-system 2.6.1 → 2.8.0

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

@@ -45,6 +45,10 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 			P.closable && (F.value = !1, I("close"));
 		}
 		function U(e) {
+			let t = e.currentTarget;
+			e.clientX >= t.getBoundingClientRect().left + t.clientWidth || (e.preventDefault(), P.closeOnOutsideClick && H());
+		}
+		function W(e) {
 			if (e.key === "Escape") {
 				if (e.defaultPrevented) return;
 				e.stopPropagation(), H();
@@ -55,7 +59,7 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 			}
 		}
-		function W(e) {
+		function G(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;
@@ -66,16 +70,16 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 		}
 		return y(F, async (e, t) => {
 			if (e) {
-				V = document.activeElement, W(!0), await l();
+				V = document.activeElement, G(!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?.());
+			} else t && (G(!1), V?.isConnected && V.focus());
 		}, { immediate: !0 }), d(() => {
-			F.value && W(!1);
+			F.value && (G(!1), V?.isConnected && V.focus());
 		}), (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",
-			"leave-active-class": "transition-opacity duration-200 ease-in",
+			"leave-active-class": "pointer-events-none transition-opacity duration-200 ease-in",
 			"leave-to-class": s.side === "right" ? "opacity-0 [&_[data-panel]]:translate-x-full" : "opacity-0 [&_[data-panel]]:-translate-x-full"
 		}, {
 			default: b(() => [F.value ? (f(), i("div", {
@@ -83,8 +87,8 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				class: "fixed inset-0 z-[80] bg-black/50",
 				"data-ac-ds": "",
 				"data-testid": "ac-side-panel",
-				onKeydown: U,
-				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && H(), ["self"])
+				onKeydown: W,
+				onMousedown: x(U, ["self"])
 			}, [a("div", {
 				ref_key: "panel",
 				ref: B,

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

@@ -5,6 +5,8 @@ export interface SideTabItem {
     key: string;
     /** Text of the item. */
     label: string;
+    /** A muted second line under the label, e.g. "Sort, search, select". Truncated to one line; hidden in the collapsed rail and the phone row of tabs. */
+    description?: string;
     /** A Lucide icon component, e.g. `:icon="Database"`. The collapsed rail shows only the icon. */
     icon?: Component;
     /** Route for `RouterLink` (needs vue-router in the app). The item for the current route becomes active by itself. */
@@ -25,7 +27,7 @@ export interface SideTabItem {
     children?: SideTabItem[];
 }
 export interface Props {
-    /** The sections: `{ key, label, icon?, to?, href?, badge?, tone?, disabled?, group?, children? }`. */
+    /** The sections: `{ key, label, description?, icon?, to?, href?, badge?, tone?, disabled?, group?, children? }`. */
     items: SideTabItem[];
     /** Accessible name of the navigation, and the label of the select on phones. */
     label?: string;

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

@@ -18,20 +18,32 @@ var ue = {
 }, ge = {
 	key: 1,
 	class: "text-xs font-semibold"
-}, _e = [
+}, _e = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, ve = { class: "block truncate" }, ye = { class: "block truncate text-xs font-normal text-muted" }, be = [
 	"disabled",
 	"aria-expanded",
 	"aria-controls",
 	"title",
 	"onClick"
-], ve = {
+], xe = {
 	key: 1,
 	class: "text-xs font-semibold"
-}, ye = ["id"], be = { class: "min-w-0 flex-1 truncate" }, xe = [
+}, Se = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, Ce = { class: "block truncate" }, we = { class: "block truncate text-xs font-normal text-muted" }, Te = ["id"], Ee = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, De = { class: "block truncate" }, Oe = { class: "block truncate text-xs font-normal text-muted" }, ke = {
+	key: 2,
+	class: "min-w-0 flex-1 truncate"
+}, Ae = [
 	"aria-label",
 	"aria-expanded",
 	"title"
-], Se = { key: 2 }, Ce = {
+], je = { key: 2 }, Me = {
 	key: 1,
 	class: "min-w-0 flex-1"
 }, C = /*@__PURE__*/ s({
@@ -75,19 +87,19 @@ var ue = {
 			success: "bg-success text-white",
 			warning: "bg-warning text-on-warning",
 			danger: "bg-danger text-white"
-		}, we = {
+		}, Ne = {
 			neutral: "bg-muted",
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
-		}, Te = {
+		}, Pe = {
 			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(() => {
+		}, O = ae(), Fe = 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(() => !!Fe.default), B = n(() => T.value && !P.value), V = n(() => C.items.flatMap((e) => e.children?.length ? e.children : [e])), Ie = n(() => {
 			let e = [];
 			for (let t of C.items) {
 				let n = t.group ?? "", r = e[e.length - 1];
@@ -97,17 +109,19 @@ var ue = {
 				});
 			}
 			return e;
-		}), Oe = n(() => C.items.flatMap((e) => e.children?.length ? e.children.map((t) => ({
+		}), Le = n(() => C.items.flatMap((e) => e.children?.length ? e.children.map((t) => ({
 			value: t.key,
 			label: t.label,
+			description: t.description,
 			group: e.label,
 			disabled: t.disabled
 		})) : [{
 			value: e.key,
 			label: e.label,
+			description: e.description,
 			group: e.group,
 			disabled: e.disabled
-		}])), ke = n(() => {
+		}])), Re = n(() => {
 			if (!j) return "";
 			let e = j.currentRoute.value.path, t = "", n = -1;
 			for (let r of V.value) {
@@ -123,10 +137,10 @@ var ue = {
 				e.startsWith(a) && i.length > n && (t = r.key, n = i.length);
 			}
 			return t;
-		}), H = n(() => F.value ? `calc(${C.top} + ${F.value}px)` : C.top), Ae = n(() => C.sticky ? {
+		}), H = n(() => F.value ? `calc(${C.top} + ${F.value}px)` : C.top), ze = n(() => C.sticky ? {
 			top: H.value,
 			maxHeight: `calc(100dvh - ${H.value} - ${C.bottom})`
-		} : void 0), je = n(() => ({
+		} : void 0), Be = n(() => ({
 			width: B.value ? "calc(56px * var(--ac-scale))" : C.width,
 			minHeight: C.sticky && z.value ? `calc(100dvh - ${H.value} - ${C.bottom})` : void 0
 		}));
@@ -139,7 +153,7 @@ var ue = {
 		function G(e) {
 			return !I.value[e.key];
 		}
-		function Me(e) {
+		function Ve(e) {
 			if (B.value) {
 				T.value = !1, I.value[e.key] = !1;
 				return;
@@ -154,7 +168,7 @@ var ue = {
 			return t === A ? n.to = e.to : t === "a" ? e.disabled ? (n.role = "link", n["aria-disabled"] = "true") : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
 		}
 		function J(e) {
-			let [t, n] = Te[e.tone ?? "none"];
+			let [t, n] = Pe[e.tone ?? "none"];
 			return [U(e) ? n : t, e.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer"];
 		}
 		function Y(e, t) {
@@ -164,7 +178,7 @@ var ue = {
 			}
 			w.value = e.key, E("select", e);
 		}
-		function Ne(e) {
+		function He(e) {
 			let t = V.value.find((t) => t.key === e);
 			t && !t.disabled && (w.value = t.key, E("select", t), t.to !== void 0 && j ? j.push(t.to) : t.href && window.location.assign(t.href));
 		}
@@ -197,7 +211,7 @@ var ue = {
 			let e = C.offsetSelectors.map((e) => document.querySelector(e)).filter((e) => !!e), t = () => F.value = e.reduce((e, t) => e + t.offsetHeight, 0);
 			R = new ResizeObserver(t), e.forEach((e) => R.observe(e)), t();
 		}
-		return x(ke, (e) => {
+		return x(Re, (e) => {
 			e && (w.value = e);
 		}, { immediate: !0 }), x(w, (e) => {
 			let t = C.items.find((t) => t.children?.some((t) => t.key === e));
@@ -218,9 +232,9 @@ var ue = {
 			"data-testid": "ac-side-tabs"
 		}, [s.hideTabs ? i("", !0) : (m(), a(t, { key: 0 }, [P.value && s.mobile === "select" ? (m(), a("div", ue, [te(e, {
 			"model-value": w.value || null,
-			options: Oe.value,
+			options: Le.value,
 			label: s.label,
-			"onUpdate:modelValue": Ne
+			"onUpdate:modelValue": He
 		}, null, 8, [
 			"model-value",
 			"options",
@@ -258,13 +272,13 @@ var ue = {
 		}, 1040, ["class", "onClick"]))]))), 128))], 544)], 8, de)) : (m(), a("div", {
 			key: 2,
 			class: "shrink-0 border-r border-border bg-surface transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
-			style: p(je.value)
+			style: p(Be.value)
 		}, [o("nav", {
 			"aria-label": s.label,
 			class: f(["ac-scrollbar flex flex-col gap-4", [s.sticky && "sticky", B.value ? "p-2" : "p-3"]]),
-			style: p(Ae.value),
+			style: p(ze.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", {
+		}, [(m(!0), a(t, null, g(Ie.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 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"]]]),
@@ -272,7 +286,7 @@ var ue = {
 			"aria-expanded": B.value ? void 0 : G(e),
 			"aria-controls": `${y(O)}-${e.key}`,
 			title: B.value ? e.label : void 0,
-			onClick: (t) => Me(e)
+			onClick: (t) => Ve(e)
 		}, [
 			e.icon || B.value ? (m(), a("span", {
 				key: 0,
@@ -281,18 +295,21 @@ var ue = {
 			}, [e.icon ? (m(), r(_(e.icon), {
 				key: 0,
 				class: "size-4"
-			})) : (m(), a("span", ve, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
-			o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
+			})) : (m(), a("span", xe, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
+			e.description && !B.value ? (m(), a("span", Se, [o("span", Ce, v(e.label), 1), o("span", we, v(e.description), 1)])) : (m(), a("span", {
+				key: 2,
+				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,
+				key: 3,
 				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,
+				key: 4,
 				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", {
+		], 10, be), o("ul", {
 			id: `${y(O)}-${e.key}`,
 			role: "list",
 			class: f(["mt-1 ml-5 flex-col gap-1 border-l border-border pl-2", G(e) && !B.value ? "flex" : "hidden"])
@@ -307,14 +324,14 @@ var ue = {
 					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.description ? (m(), a("span", Ee, [o("span", De, v(e.label), 1), o("span", Oe, v(e.description), 1)])) : (m(), a("span", ke, v(e.label), 1)),
 				e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
-					key: 1,
+					key: 3,
 					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
-		}, 1040, ["class", "onClick"]))]))), 128))], 10, ye)], 64)) : (m(), r(_(K(e)), u({
+		}, 1040, ["class", "onClick"]))]))), 128))], 10, Te)], 64)) : (m(), r(_(K(e)), u({
 			key: 0,
 			ref_for: !0
 		}, q(e), {
@@ -332,10 +349,13 @@ var ue = {
 					key: 0,
 					class: "size-4"
 				})) : (m(), a("span", ge, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
-				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", {
+				e.description && !B.value ? (m(), a("span", _e, [o("span", ve, v(e.label), 1), o("span", ye, v(e.description), 1)])) : (m(), a("span", {
+					key: 2,
+					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: 3 }, [B.value ? (m(), a("span", {
 					key: 0,
-					class: f(["absolute top-1 right-1 size-2 rounded-full", we[e.badgeColor ?? "neutral"]]),
+					class: f(["absolute top-1 right-1 size-2 rounded-full", Ne[e.badgeColor ?? "neutral"]]),
 					"aria-hidden": "true"
 				}, null, 2)) : (m(), a("span", {
 					key: 1,
@@ -363,7 +383,7 @@ var ue = {
 			key: 1,
 			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", {
+		})), B.value ? i("", !0) : (m(), a("span", je, "Collapse"))], 10, Ae)) : i("", !0)], 46, fe)], 4))], 64)), z.value ? (m(), a("div", Me, [ie(n.$slots, "default", {
 			active: w.value,
 			compact: P.value
 		})])) : i("", !0)], 2));

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

@@ -159,7 +159,7 @@ var E = [
 			s(t, {
 				"enter-active-class": "transition-opacity duration-200",
 				"enter-from-class": "opacity-0",
-				"leave-active-class": "transition-opacity duration-150",
+				"leave-active-class": "pointer-events-none transition-opacity duration-150",
 				"leave-to-class": "opacity-0"
 			}, {
 				default: S(() => [q.value ? (p(), a("div", {

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

@@ -38,9 +38,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;
-    icon: Component;
     href: string;
     to: string | object;
+    icon: Component;
     active: boolean;
     badge: string | number;
     badgeColor: Tone | "neutral";

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

@@ -57,10 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     progress: number;
     value: string | number;
-    icon: Component;
     target: string;
     href: string;
     to: string | Record<string, unknown>;
+    icon: Component;
     size: "small" | "normal";
     status: "default" | "success" | "info" | "warning" | "danger";
     loading: boolean;

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

@@ -19,9 +19,12 @@ export interface Props {
     orientation?: "horizontal" | "vertical";
     /** With `orientation="vertical"`, the id of the current sub-step of the current step. Earlier sub-steps show a check mark. */
     activeSubstep?: number | string;
+    /** With `orientation="horizontal"`, hides the titles and descriptions visually when the steps are narrower than 480px, leaving the numbered dots. Screen readers still read them. Use it when the current step's own heading names it. */
+    compact?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
+    compact: boolean;
     activeSubstep: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,40 +1,41 @@
 import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
 import { Check as d } from "@lucide/vue";
 //#region src/lib/components/AcSteps.vue?vue&type=script&setup=true&lang.ts
-var f = {
-	key: 0,
-	class: "flex w-full",
-	"data-ac-ds": "",
-	"data-testid": "ac-steps"
-}, p = ["aria-current"], m = { key: 1 }, h = {
-	key: 1,
-	class: "mt-0.5 text-xs text-muted"
-}, g = {
+var f = ["aria-current"], p = { key: 1 }, m = {
 	key: 1,
 	class: "flex w-full flex-col",
 	"data-ac-ds": "",
 	"data-testid": "ac-steps"
-}, _ = ["aria-current"], v = { key: 1 }, y = { class: "min-w-0 flex-1 pt-1.5" }, b = {
+}, h = ["aria-current"], g = { key: 1 }, _ = { class: "min-w-0 flex-1 pt-1.5" }, v = {
 	key: 0,
 	class: "mt-0.5 text-xs text-muted"
-}, x = {
+}, y = {
 	key: 1,
 	class: "mt-2 space-y-0.5 border-l border-dashed border-border-dark pl-3",
 	"data-testid": "ac-steps-substeps"
-}, S = ["aria-current"], C = {
+}, b = ["aria-current"], x = {
 	key: 1,
 	class: "size-1.5 rounded-full bg-primary"
-}, w = /*@__PURE__*/ a({
+}, S = /*@__PURE__*/ a({
 	__name: "AcSteps",
 	props: {
 		options: {},
 		active: {},
 		orientation: { default: "horizontal" },
-		activeSubstep: { default: void 0 }
+		activeSubstep: { default: void 0 },
+		compact: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	setup(a) {
-		let w = a, T = (e) => w.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === w.activeSubstep);
-		return (w, E) => a.orientation === "horizontal" ? (s(), r("ol", f, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
+		let S = a, C = (e) => S.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === S.activeSubstep);
+		return (S, w) => a.orientation === "horizontal" ? (s(), r("ol", {
+			key: 0,
+			class: o(["flex w-full", a.compact && "@container/steps"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-steps"
+		}, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
 			key: e.id,
 			class: "relative flex flex-1 flex-col items-center px-2 text-center",
 			"aria-current": a.active === e.id ? "step" : void 0
@@ -49,10 +50,13 @@ var f = {
 				class: "size-4",
 				"stroke-width": 2.5,
 				"aria-hidden": "true"
-			})) : (s(), r("span", m, l(e.id), 1))], 2),
-			i("p", { class: o(["mt-3 text-base font-medium", a.active >= e.id ? "text-heading" : "text-muted"]) }, l(e.title), 3),
-			e.description ? (s(), r("p", h, l(e.description), 1)) : n("", !0)
-		], 8, p))), 128))])) : (s(), r("ol", g, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
+			})) : (s(), r("span", p, l(e.id), 1))], 2),
+			i("p", { class: o(["mt-3 text-base font-medium", [a.active >= e.id ? "text-heading" : "text-muted", a.compact && "@max-[480px]/steps:sr-only"]]) }, l(e.title), 3),
+			e.description ? (s(), r("p", {
+				key: 1,
+				class: o(["mt-0.5 text-xs text-muted", a.compact && "@max-[480px]/steps:sr-only"])
+			}, l(e.description), 3)) : n("", !0)
+		], 8, f))), 128))], 2)) : (s(), r("ol", m, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
 			key: f.id,
 			class: "relative flex gap-3 pb-6 last:pb-0",
 			"aria-current": a.active === f.id ? "step" : void 0
@@ -67,25 +71,25 @@ var f = {
 				class: "size-4",
 				"stroke-width": 2.5,
 				"aria-hidden": "true"
-			})) : (s(), r("span", v, l(f.id), 1))], 2),
-			i("div", y, [
+			})) : (s(), r("span", g, l(f.id), 1))], 2),
+			i("div", _, [
 				i("p", { class: o(["text-base font-medium", a.active >= f.id ? "text-heading" : "text-muted"]) }, l(f.title), 3),
-				f.description ? (s(), r("p", b, l(f.description), 1)) : n("", !0),
-				f.substeps?.length && a.active === f.id ? (s(), r("ul", x, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
+				f.description ? (s(), r("p", v, l(f.description), 1)) : n("", !0),
+				f.substeps?.length && a.active === f.id ? (s(), r("ul", y, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
 					key: e.id,
 					class: "flex items-center gap-2 py-1",
 					"aria-current": e.id === a.activeSubstep ? "step" : void 0
 				}, [i("span", {
-					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < T(f) ? "bg-primary text-white" : c === T(f) ? "bg-surface text-primary-strong ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
+					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < C(f) ? "bg-primary text-white" : c === C(f) ? "bg-surface text-primary-strong ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
 					"aria-hidden": "true"
-				}, [c < T(f) ? (s(), t(u(d), {
+				}, [c < C(f) ? (s(), t(u(d), {
 					key: 0,
 					class: "size-3",
 					"stroke-width": 3
-				})) : c === T(f) ? (s(), r("span", C)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < T(f) ? "text-heading/80" : c === T(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, S))), 128))])) : n("", !0)
+				})) : c === C(f) ? (s(), r("span", x)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < C(f) ? "text-heading/80" : c === C(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, b))), 128))])) : n("", !0)
 			])
-		], 8, _))), 128))]));
+		], 8, h))), 128))]));
 	}
 });
 //#endregion
-export { w as default };
+export { S as default };

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

@@ -53,7 +53,7 @@ var h = { class: "flex items-center gap-2" }, g = ["for"], _ = [
 			i.label ? (c(), n("label", {
 				key: 0,
 				for: E.value,
-				class: s(["cursor-pointer text-base font-medium text-heading", i.disabled && "cursor-not-allowed opacity-50"])
+				class: s(["text-base font-medium", i.disabled ? "cursor-not-allowed text-muted" : "cursor-pointer text-heading"])
 			}, d(i.label), 11, g)) : t("", !0),
 			u(e.$slots, "middle"),
 			r("button", o({