@ac-design/design-system 2.7.0 → 2.9.0

package/dist/lib/compat.css

@@ -316,6 +316,10 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     display: none !important;
   }
 @layer ac-compat {
+  .\@container\/steps:where([data-ac-ds], [data-ac-ds] *) {
+    container-type: inline-size !important;
+    container-name: steps !important;
+  }
   .\@container:where([data-ac-ds], [data-ac-ds] *) {
     container-type: inline-size !important;
   }
@@ -357,6 +361,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .relative:where([data-ac-ds], [data-ac-ds] *) {
     position: relative !important;
   }
+  .static:where([data-ac-ds], [data-ac-ds] *) {
+    position: static !important;
+  }
   .sticky:where([data-ac-ds], [data-ac-ds] *) {
     position: sticky !important;
   }
@@ -411,8 +418,8 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .top-10:where([data-ac-ds], [data-ac-ds] *) {
     top: calc(var(--spacing) * 10) !important;
   }
-  .top-20:where([data-ac-ds], [data-ac-ds] *) {
-    top: calc(var(--spacing) * 20) !important;
+  .top-\[var\(--ac-toaster-offset\,80px\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    top: var(--ac-toaster-offset,80px) !important;
   }
   .top-full:where([data-ac-ds], [data-ac-ds] *) {
     top: 100% !important;
@@ -468,8 +475,8 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .bottom-3:where([data-ac-ds], [data-ac-ds] *) {
     bottom: calc(var(--spacing) * 3) !important;
   }
-  .bottom-5:where([data-ac-ds], [data-ac-ds] *) {
-    bottom: calc(var(--spacing) * 5) !important;
+  .bottom-\[var\(--ac-toaster-offset\,20px\)\]:where([data-ac-ds], [data-ac-ds] *) {
+    bottom: var(--ac-toaster-offset,20px) !important;
   }
   .bottom-full:where([data-ac-ds], [data-ac-ds] *) {
     bottom: 100% !important;
@@ -579,6 +586,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     margin-inline: auto !important;
     padding-inline: calc(var(--spacing) * 4) !important;
   }
+  .-mx-1:where([data-ac-ds], [data-ac-ds] *) {
+    margin-inline: calc(var(--spacing) * -1) !important;
+  }
   .-mx-2:where([data-ac-ds], [data-ac-ds] *) {
     margin-inline: calc(var(--spacing) * -2) !important;
   }
@@ -666,24 +676,21 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .-mr-2:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * -2) !important;
   }
+  .mr-0\.5:where([data-ac-ds], [data-ac-ds] *) {
+    margin-right: calc(var(--spacing) * 0.5) !important;
+  }
   .mr-1:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: var(--spacing) !important;
   }
   .mr-1\.5:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * 1.5) !important;
   }
-  .mr-2:where([data-ac-ds], [data-ac-ds] *) {
-    margin-right: calc(var(--spacing) * 2) !important;
-  }
   .mr-3:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * 3) !important;
   }
   .mr-4:where([data-ac-ds], [data-ac-ds] *) {
     margin-right: calc(var(--spacing) * 4) !important;
   }
-  .mr-5:where([data-ac-ds], [data-ac-ds] *) {
-    margin-right: calc(var(--spacing) * 5) !important;
-  }
   .mb-1:where([data-ac-ds], [data-ac-ds] *) {
     margin-bottom: var(--spacing) !important;
   }
@@ -1829,6 +1836,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
   .overflow-auto:where([data-ac-ds], [data-ac-ds] *) {
     overflow: auto !important;
   }
+  .overflow-clip:where([data-ac-ds], [data-ac-ds] *) {
+    overflow: clip !important;
+  }
   .overflow-hidden:where([data-ac-ds], [data-ac-ds] *) {
     overflow: hidden !important;
   }
@@ -3678,6 +3688,14 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
+  .ac-focus-inset:focus-visible:where([data-ac-ds], [data-ac-ds] *) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+    --tw-ring-color: var(--color-ring) !important;
+    --tw-outline-style: none !important;
+    outline-style: none !important;
+    --tw-ring-inset: inset !important;
+  }
   .ring:where([data-ac-ds], [data-ac-ds] *) {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -3913,6 +3931,16 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,) !important;
   }
+  .ac-transition-colors:where([data-ac-ds], [data-ac-ds] *) {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+    --tw-duration: 200ms !important;
+    transition-duration: 200ms !important;
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none !important;
+    }
+  }
   .transition:where([data-ac-ds], [data-ac-ds] *) {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
@@ -5351,6 +5379,9 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
     .sm\:shrink-0:where([data-ac-ds], [data-ac-ds] *) {
       flex-shrink: 0 !important;
     }
+    .sm\:basis-\[160px\]:where([data-ac-ds], [data-ac-ds] *) {
+      flex-basis: 160px !important;
+    }
     .sm\:-translate-x-1\/2:where([data-ac-ds], [data-ac-ds] *) {
       --tw-translate-x: calc(calc(1 / 2 * 100%) * -1) !important;
       translate: var(--tw-translate-x) var(--tw-translate-y) !important;
@@ -5572,6 +5603,19 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       display: none !important;
     }
   }
+  @container steps (width < 480px) {
+    .\@max-\[480px\]\/steps\:sr-only:where([data-ac-ds], [data-ac-ds] *) {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip-path: inset(50%) !important;
+      white-space: nowrap !important;
+      border-width: 0 !important;
+    }
+  }
   @container (width < 448px) {
     .\@max-md\:-mt-1:where([data-ac-ds], [data-ac-ds] *) {
       margin-top: calc(var(--spacing) * -1) !important;
@@ -5601,6 +5645,19 @@ button:is([data-ac-ds], [data-ac-ds] *), input:where([type="button"], [type="res
       padding-left: calc(var(--spacing) * 12) !important;
     }
   }
+  @container (width >= 401px) {
+    .\@min-\[401px\]\:sr-only:where([data-ac-ds], [data-ac-ds] *) {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip-path: inset(50%) !important;
+      white-space: nowrap !important;
+      border-width: 0 !important;
+    }
+  }
   @container (width >= 512px) {
     .\@lg\:w-2\/5:where([data-ac-ds], [data-ac-ds] *) {
       width: calc(2 / 5 * 100%) !important;
@@ -5909,6 +5966,9 @@ 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;
   }
+  :where(.\[\:where\(\&\)\]\:w-full):where([data-ac-ds], [data-ac-ds] *) {
+    width: 100% !important;
+  }
   :where(.\[\:where\(\&\)\]\:bg-danger\/5):where([data-ac-ds], [data-ac-ds] *) {
     background-color: color-mix(in srgb, #ef4444 5%, transparent) !important;
     @supports (color: color-mix(in lab, red, red)) {

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

@@ -9,6 +9,12 @@ export interface Props {
     disabled?: boolean;
     /** Heading level of the title. Defaults to the parent AcAccordion's, or 3. */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Turn off for a section that always shows its content: the header is plain text, with no chevron, and `open` is ignored. */
+    collapsible?: boolean;
+    /** Frame of an item on its own (inside an AcAccordion the parent's applies): `separated` its own card, `bordered` no frame with card padding, for a container that draws the border, `flush` no frame or side padding. */
+    variant?: "bordered" | "separated" | "flush";
+    /** Attributes for the header button (the header row when not `collapsible`), e.g. `{ 'data-testid': 'section-heading' }` for tests. */
+    headerAttrs?: Record<string, unknown>;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -35,11 +41,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onToggle?: ((open: boolean) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    variant: "bordered" | "separated" | "flush";
     headingLevel: 2 | 3 | 4 | 5 | 6;
     title: string;
     value: string;
     description: string;
     disabled: boolean;
+    collapsible: boolean;
+    headerAttrs: Record<string, unknown>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,12 +1,7 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, mergeModels as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, useId as h, useModel as g, watch as _, withCtx as v } from "vue";
-import { ChevronDown as y, ChevronRight as b } from "@lucide/vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { ChevronDown as b, ChevronRight as x } from "@lucide/vue";
 //#region src/lib/components/AcAccordionItem.vue?vue&type=script&setup=true&lang.ts
-var x = [
-	"id",
-	"aria-expanded",
-	"aria-controls",
-	"disabled"
-], S = {
+var S = {
 	key: 1,
 	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-4",
 	"aria-hidden": "true"
@@ -17,7 +12,7 @@ var x = [
 	"id",
 	"aria-labelledby",
 	"inert"
-], D = /*@__PURE__*/ o({
+], D = "cursor-pointer ac-transition-colors ac-focus-inset disabled:cursor-not-allowed disabled:opacity-50", O = /*@__PURE__*/ o({
 	__name: "AcAccordionItem",
 	props: /*@__PURE__*/ c({
 		value: { default: void 0 },
@@ -27,7 +22,13 @@ var x = [
 			type: Boolean,
 			default: !1
 		},
-		headingLevel: { default: void 0 }
+		headingLevel: { default: void 0 },
+		collapsible: {
+			type: Boolean,
+			default: !0
+		},
+		variant: { default: void 0 },
+		headerAttrs: { default: void 0 }
 	}, {
 		open: {
 			type: Boolean,
@@ -37,54 +38,65 @@ var x = [
 	}),
 	emits: /*@__PURE__*/ c(["toggle"], ["update:open"]),
 	setup(o, { emit: c }) {
-		let D = o, O = g(o, "open"), k = c, A = s("ac-accordion", null), j = h(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
-		function I() {
-			if (D.disabled) return;
-			let e = !N.value;
-			A ? A.toggle(M.value) : O.value = e, k("toggle", e);
+		let O = o, k = _(o, "open"), A = c, j = s("ac-accordion", null), M = g(), N = e(() => O.value ?? M), P = e(() => !O.collapsible || (j ? j.isOpen(N.value) : k.value)), F = e(() => O.headingLevel ?? j?.headingLevel.value ?? 3), I = e(() => j?.variant.value ?? O.variant ?? "separated");
+		function L() {
+			if (O.disabled || !O.collapsible) return;
+			let e = !P.value;
+			j ? j.toggle(N.value) : k.value = e, A("toggle", e);
 		}
-		return _(N, (e) => {
-			A && (O.value = e);
-		}), (e, s) => (u(), r("div", {
-			class: l([F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface", e.$slots.actions && "@container"]),
+		let R = e(() => O.collapsible ? {
+			type: "button",
+			"data-accordion-trigger": "",
+			"aria-expanded": P.value,
+			"aria-controls": `${M}-panel`,
+			disabled: O.disabled
+		} : {});
+		return v(P, (e) => {
+			j && (k.value = e);
+		}), (e, s) => (d(), r("div", {
+			class: u([I.value === "separated" && "overflow-clip rounded-14 border border-border bg-surface", e.$slots.actions && "@container"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion-item"
-		}, [i("div", { class: l(["flex items-center", e.$slots.actions && "transition-colors duration-200 @max-md:flex-wrap has-[[data-accordion-trigger]:enabled:hover]:bg-accent-hover/60"]) }, [(u(), t(f(`h${P.value}`), { class: "m-0 min-w-0 flex-1 text-base leading-5 font-normal tracking-normal @max-md:basis-full" }, {
-			default: v(() => [i("button", {
-				id: `${m(j)}-trigger`,
-				type: "button",
-				"data-accordion-trigger": "",
-				"aria-expanded": N.value,
-				"aria-controls": `${m(j)}-panel`,
-				disabled: o.disabled,
-				class: l(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !o.disabled && !e.$slots.actions && "hover:bg-accent-hover/60"]]),
-				onClick: I
-			}, [
-				e.$slots.actions ? (u(), t(m(b), {
-					key: 0,
-					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-90 text-heading"]),
-					"aria-hidden": "true"
-				}, null, 8, ["class"])) : n("", !0),
-				e.$slots.icon ? (u(), r("span", S, [d(e.$slots, "icon")])) : n("", !0),
-				i("span", C, [i("span", w, [d(e.$slots, "title", {}, () => [a(p(o.title), 1)])]), o.description || e.$slots.description ? (u(), r("span", T, [d(e.$slots, "description", {}, () => [a(p(o.description), 1)])])) : n("", !0)]),
-				e.$slots.actions ? n("", !0) : (u(), t(m(y), {
-					key: 2,
-					class: l(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
-					"aria-hidden": "true"
-				}, null, 8, ["class"]))
-			], 10, x)]),
+		}, [i("div", { class: u(["flex items-center", e.$slots.actions && "transition-colors duration-200 @max-md:flex-wrap has-[[data-accordion-trigger]:enabled:hover]:bg-accent-hover/60"]) }, [(d(), t(p(`h${F.value}`), { class: "m-0 min-w-0 flex-1 text-base leading-5 font-normal tracking-normal @max-md:basis-full" }, {
+			default: y(() => [(d(), t(p(o.collapsible ? "button" : "span"), l({ id: `${h(M)}-trigger` }, {
+				...R.value,
+				...o.headerAttrs
+			}, {
+				class: ["flex w-full items-center gap-3 text-left", [
+					I.value === "flush" ? "px-1 py-3" : "px-5 py-4",
+					o.collapsible && D,
+					o.collapsible && !o.disabled && !e.$slots.actions && "hover:bg-accent-hover/60"
+				]],
+				onClick: L
+			}), {
+				default: y(() => [
+					o.collapsible && e.$slots.actions ? (d(), t(h(x), {
+						key: 0,
+						class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", P.value && "rotate-90 text-heading"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : n("", !0),
+					e.$slots.icon ? (d(), r("span", S, [f(e.$slots, "icon")])) : n("", !0),
+					i("span", C, [i("span", w, [f(e.$slots, "title", {}, () => [a(m(o.title), 1)])]), o.description || e.$slots.description ? (d(), r("span", T, [f(e.$slots, "description", {}, () => [a(m(o.description), 1)])])) : n("", !0)]),
+					o.collapsible && !e.$slots.actions ? (d(), t(h(b), {
+						key: 2,
+						class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", P.value && "rotate-180 text-heading"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : n("", !0)
+				]),
+				_: 3
+			}, 16, ["id", "class"]))]),
 			_: 3
-		})), e.$slots.actions ? (u(), r("div", {
+		})), e.$slots.actions ? (d(), r("div", {
 			key: 0,
-			class: l(["flex shrink-0 flex-wrap items-center gap-1.5 @max-md:w-full", F.value === "flush" ? "pr-1 @max-md:-mt-1 @max-md:pb-3 @max-md:pl-8" : "pr-5 @max-md:-mt-2 @max-md:pb-4 @max-md:pl-12"])
-		}, [d(e.$slots, "actions")], 2)) : n("", !0)], 2), i("div", { class: l(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
-			id: `${m(j)}-panel`,
+			class: u(["flex shrink-0 flex-wrap items-center gap-1.5 @max-md:w-full", I.value === "flush" ? "pr-1 @max-md:-mt-1 @max-md:pb-3 @max-md:pl-8" : "pr-5 @max-md:-mt-2 @max-md:pb-4 @max-md:pl-12"])
+		}, [f(e.$slots, "actions")], 2)) : n("", !0)], 2), i("div", { class: u(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", P.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
+			id: `${h(M)}-panel`,
 			role: "region",
-			"aria-labelledby": `${m(j)}-trigger`,
-			inert: !N.value || void 0,
-			class: "min-h-0 overflow-hidden"
-		}, [i("div", { class: l(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [d(e.$slots, "default")], 2)], 8, E)], 2)], 2));
+			"aria-labelledby": `${h(M)}-trigger`,
+			inert: !P.value || void 0,
+			class: "min-h-0 overflow-clip"
+		}, [i("div", { class: u(["pt-0.5 text-base text-body", I.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

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

@@ -12,7 +12,7 @@ var g = {
 	class: "mt-0.5 text-xs leading-4 text-muted"
 }, b = {
 	key: 1,
-	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2"
+	class: "flex max-w-full min-w-0 shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap"
 }, x = /*@__PURE__*/ c({
 	__name: "AcCard",
 	props: {
@@ -203,7 +203,7 @@ var g = {
 						key: 1,
 						class: l(["absolute -top-4 -right-4 [&_svg]:size-24!", M.value.watermark])
 					}, [d(e.$slots, "icon")], 2))])) : i("", !0),
-					o("div", { class: l(["flex min-w-0 flex-1 basis-[220px] items-center", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
+					o("div", { class: l(["flex min-w-0 flex-1 basis-[220px] items-center sm:basis-[160px]", A.value ? "gap-2.5" : "gap-3"]) }, [c.icon || e.$slots.icon ? (u(), a("span", {
 						key: 0,
 						class: l(["flex shrink-0 items-center justify-center", [
 							M.value.tile,

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

@@ -6,30 +6,30 @@ var E = { class: "flex flex-col gap-3" }, D = ["for"], O = [
 	"name",
 	"value",
 	"disabled"
-], k = { class: "flex min-w-0 flex-col gap-1" }, A = { class: "font-normal" }, j = {
+], k = { class: "font-normal" }, A = {
 	key: 0,
 	class: "text-xs text-muted"
-}, M = {
+}, j = {
 	key: 0,
 	class: "mt-1 text-base text-danger-strong",
 	role: "alert"
-}, N = [
+}, M = [
 	"name",
 	"checked",
 	"indeterminate",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], P = {
+], N = {
 	key: 0,
-	class: "flex min-w-0 flex-col gap-1"
-}, F = { key: 0 }, I = {
+	class: "font-medium"
+}, P = {
 	key: 1,
 	class: "font-medium"
-}, L = {
+}, F = {
 	key: 2,
 	class: "text-xs text-muted"
-}, R = ["id"], z = /*@__PURE__*/ o({
+}, I = ["id"], L = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcCheckBox",
 	props: /*@__PURE__*/ s({
@@ -58,75 +58,78 @@ var E = { class: "flex flex-col gap-3" }, D = ["for"], O = [
 	}),
 	emits: ["update:modelValue", "update:checked"],
 	setup(o) {
-		let s = o, z = y(o, "modelValue"), B = y(o, "checked"), V = b(), H = v(), U = _(), W = f(null), G = t(() => s.size === "small"), K = t(() => s.indeterminate && !B.value), q = t(() => s.options ? U : {
-			class: U.class,
-			style: U.style
-		}), J = t(() => {
-			let { class: e, style: t, ...n } = U;
-			return s.label || V.label || n["aria-label"] || n["aria-labelledby"] ? n : {
+		let s = o, L = y(o, "modelValue"), R = y(o, "checked"), z = b(), B = v(), V = _(), H = f(null), U = t(() => s.size === "small"), W = t(() => s.indeterminate && !R.value), G = t(() => s.options ? V : {
+			class: V.class,
+			style: V.style
+		}), K = t(() => {
+			let { class: e, style: t, ...n } = V;
+			return s.label || z.label || n["aria-label"] || n["aria-labelledby"] ? n : {
 				"aria-label": "Select",
 				...n
 			};
-		}), Y = t(() => G.value ? "size-[18px]" : "size-6"), X = t(() => [
+		}), q = t(() => !!(s.label || z.label || s.description)), J = t(() => U.value ? "size-[18px]" : "size-6"), Y = t(() => [
 			"peer cursor-pointer appearance-none rounded-4 border border-muted/70 transition-colors duration-200 group-hover:enabled:not-checked:not-indeterminate:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:not-checked:not-indeterminate:bg-surface-sunken",
-			Y.value,
-			G.value ? "bg-background" : "bg-transparent"
-		]), Z = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", G.value ? "size-3.5" : "size-5"]), Q = t(() => ["cursor-not-allowed", G.value ? "opacity-40" : "opacity-50"]);
-		async function $(e) {
-			B.value = e.target.checked, await l(), W.value && (W.value.checked = B.value, W.value.indeterminate = K.value);
+			J.value,
+			U.value ? "bg-background" : "bg-transparent"
+		]), X = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", U.value ? "size-3.5" : "size-5"]), Z = t(() => U.value ? "" : "pt-0.5"), Q = t(() => U.value ? "mt-px" : ""), $ = t(() => ["cursor-not-allowed", U.value ? "opacity-40" : "opacity-50"]);
+		async function ee(e) {
+			R.value = e.target.checked, await l(), H.value && (H.value.checked = R.value, H.value.indeterminate = W.value);
 		}
 		return (t, s) => o.options ? (d(), r("div", c({
 			key: 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, q.value), [i("div", E, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
+		}, G.value), [i("div", E, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
 			key: e.label,
-			for: `${g(H)}-${t}`,
-			class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [e.disabled && Q.value, G.value ? "gap-2.5" : "gap-3"]])
-		}, [i("span", { class: u(["relative inline-flex shrink-0", Y.value]) }, [S(i("input", {
-			id: `${g(H)}-${t}`,
-			"onUpdate:modelValue": s[0] ||= (e) => z.value = e,
+			for: `${g(B)}-${t}`,
+			class: u(["group inline-flex w-fit cursor-pointer items-start text-base font-normal text-heading select-none", [e.disabled && $.value, U.value ? "gap-2.5" : "gap-3"]])
+		}, [i("span", { class: u(["relative inline-flex shrink-0", [J.value, Q.value]]) }, [S(i("input", {
+			id: `${g(B)}-${t}`,
+			"onUpdate:modelValue": s[0] ||= (e) => L.value = e,
 			type: "checkbox",
 			name: o.name,
 			value: e.value,
 			disabled: e.disabled,
-			class: u(X.value)
-		}, null, 10, O), [[x, z.value]]), a(g(w), {
-			class: u([Z.value, "peer-checked:opacity-100"]),
+			class: u(Y.value)
+		}, null, 10, O), [[x, L.value]]), a(g(w), {
+			class: u([X.value, "peer-checked:opacity-100"]),
 			"aria-hidden": "true"
-		}, null, 8, ["class"])], 2), i("span", k, [i("span", A, h(e.label), 1), e.description ? (d(), r("span", j, h(e.description), 1)) : n("", !0)])], 10, D))), 128))]), o.errorMsg ? (d(), r("p", M, h(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
+		}, null, 8, ["class"])], 2), i("span", { class: u(["flex min-w-0 flex-col gap-1", Z.value]) }, [i("span", k, h(e.label), 1), e.description ? (d(), r("span", A, h(e.description), 1)) : n("", !0)], 2)], 10, D))), 128))]), o.errorMsg ? (d(), r("p", j, h(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
 			key: 1,
 			class: "inline-flex flex-col",
 			"data-ac-ds": "",
 			"data-testid": "ac-checkbox"
-		}, q.value, { onClick: s[1] ||= C(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [o.disabled && Q.value, G.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", Y.value]) }, [
+		}, G.value, { onClick: s[1] ||= C(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base font-normal text-heading select-none", [o.disabled && $.value, U.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", [J.value, q.value && Q.value]]) }, [
 			i("input", c({
 				ref_key: "single",
-				ref: W,
+				ref: H,
 				type: "checkbox",
 				name: o.name,
-				checked: B.value,
-				indeterminate: K.value,
+				checked: R.value,
+				indeterminate: W.value,
 				disabled: o.disabled,
 				"aria-invalid": o.errorMsg ? !0 : void 0,
-				"aria-describedby": o.errorMsg ? `${g(H)}-error` : void 0,
-				class: X.value
-			}, J.value, { onChange: $ }), null, 16, N),
+				"aria-describedby": o.errorMsg ? `${g(B)}-error` : void 0,
+				class: Y.value
+			}, K.value, { onChange: ee }), null, 16, M),
 			a(g(w), {
-				class: u([Z.value, "peer-checked:opacity-100"]),
+				class: u([X.value, "peer-checked:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]),
 			a(g(T), {
-				class: u([Z.value, "peer-indeterminate:opacity-100"]),
+				class: u([X.value, "peer-indeterminate:opacity-100"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])
-		], 2), o.label || t.$slots.label || o.description ? (d(), r("span", P, [t.$slots.label ? (d(), r("span", F, [m(t.$slots, "label")])) : o.label ? (d(), r("span", I, h(o.label), 1)) : n("", !0), o.description ? (d(), r("span", L, h(o.description), 1)) : n("", !0)])) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
+		], 2), q.value ? (d(), r("span", {
+			key: 0,
+			class: u(["flex min-w-0 flex-col gap-1", Z.value])
+		}, [t.$slots.label ? (d(), r("span", N, [m(t.$slots, "label")])) : o.label ? (d(), r("span", P, h(o.label), 1)) : n("", !0), o.description ? (d(), r("span", F, h(o.description), 1)) : n("", !0)], 2)) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
 			key: 0,
-			id: `${g(H)}-error`,
+			id: `${g(B)}-error`,
 			class: "mt-1 text-base text-danger-strong",
 			role: "alert"
-		}, h(o.errorMsg), 9, R)) : n("", !0)], 16));
+		}, h(o.errorMsg), 9, I)) : n("", !0)], 16));
 	}
 });
 //#endregion
-export { z as default };
+export { L as default };

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

@@ -66,8 +66,8 @@ var w = {
 		return (n, _) => (d(), a("div", w, [o("div", { class: u(c.cards ? ["grid gap-3", !L.value && "sm:grid-cols-2"] : c.row ? "flex flex-row flex-wrap gap-x-6 gap-y-3" : "flex flex-col gap-3") }, [(d(!0), a(e, null, f(c.options, (e, f) => (d(), r(m(L.value ? "div" : "label"), {
 			key: e.label,
 			for: L.value ? void 0 : `${g(I)}-${f}`,
-			class: u(["group flex cursor-pointer gap-3 text-base text-heading select-none", [
-				c.cards ? "relative items-start rounded-14 border border-border bg-surface p-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background motion-reduce:transition-none" : L.value ? "relative items-center" : "w-fit items-center",
+			class: u(["group flex cursor-pointer gap-3 text-base font-normal text-heading select-none", [
+				c.cards ? "relative items-start rounded-14 border border-border bg-surface px-4 py-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background motion-reduce:transition-none" : L.value ? "relative items-center" : "w-fit items-center",
 				e.disabled && ["cursor-not-allowed", c.cards ? "opacity-60" : "opacity-50"],
 				L.value && "flex-wrap",
 				c.cards && !e.disabled && "hover:border-primary/40 hover:bg-accent-hover has-checked:hover:border-primary has-checked:hover:bg-primary/5"
@@ -77,7 +77,7 @@ var w = {
 				(d(), r(m(L.value ? "label" : "span"), {
 					for: L.value ? `${g(I)}-${f}` : void 0,
 					class: u(L.value ? [
-						"flex min-w-0 flex-1 basis-[240px] gap-3 after:absolute after:inset-0",
+						"flex min-w-0 flex-1 basis-[240px] gap-3 font-normal after:absolute after:inset-0",
 						c.cards ? "items-start" : "items-center",
 						e.disabled ? "cursor-not-allowed" : "cursor-pointer"
 					] : "contents")

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 export interface ColorPreset {
     /** Hex colour, `#rgb` or `#rrggbb`. */
     value: string;
@@ -7,6 +8,8 @@ export interface ColorPreset {
 export interface Props {
     /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
     label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Native `name` attribute of the hex field. */
     name?: string;
     /** Quick-pick swatches under the field: hex strings or `{ value, label }`. */
@@ -50,6 +53,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     hint: string;
     readonly: boolean;
     errorMsg: string;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     presets: (string | ColorPreset)[];
     swatchOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -40,6 +40,16 @@ var b = ["for"], x = {
 	__name: "AcColorInput",
 	props: /*@__PURE__*/ o({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		name: { default: "" },
 		presets: { default: () => [] },
 		required: {
@@ -124,12 +134,12 @@ var b = ["for"], x = {
 			a.label ? (u(), r("label", {
 				key: 0,
 				for: a.swatchOnly ? `${m(P)}-picker` : m(P),
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: c(["mb-2 flex items-center gap-1 text-base font-medium text-heading", a.labelClass])
 			}, [
 				i("span", null, p(a.label), 1),
 				a.readonly ? (u(), r("span", x, "(read only)")) : n("", !0),
 				a.required ? (u(), r("span", S, "*")) : n("", !0)
-			], 8, b)) : n("", !0),
+			], 10, b)) : n("", !0),
 			a.hint ? (u(), r("p", {
 				key: 1,
 				id: `${m(P)}-hint`,

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

@@ -10,6 +10,8 @@ export interface DatePickerPreset {
 export interface Props {
     /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
     label?: string;
+    /** Classes for the label above the field, e.g. `@min-[401px]:sr-only` to hide it on wide layouts while screen readers still read it. */
+    labelClass?: HTMLAttributes["class"];
     /** Text shown in the field while there's no value. Defaults to "Choose date" (or "Choose duration"). */
     placeholder?: string;
     /** `date` for a calendar day (`YYYY-MM-DD`), `datetime` for an instant with hours and minutes (UTC ISO 8601), or `duration` for a Go/Kubernetes duration such as `26h30m`. */
@@ -94,6 +96,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     placeholder: string;
     errorMsg: string;
     range: boolean;
+    labelClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     clearable: boolean;
     presets: DatePickerPreset[];
     locale: string;