@ac-design/design-system 2.7.0 → 2.8.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;
   }
@@ -411,8 +415,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 +472,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 +583,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 +673,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 +1833,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;
   }
@@ -5351,6 +5358,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 +5582,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 +5624,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 +5945,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/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;

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

@@ -112,6 +112,16 @@ var be = ["for"], xe = { key: 0 }, Se = {
 	__name: "AcDatePicker",
 	props: /*@__PURE__*/ te({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		placeholder: { default: "" },
 		mode: { default: "date" },
 		range: {
@@ -844,13 +854,13 @@ var be = ["for"], xe = { key: 0 }, Se = {
 				key: 0,
 				id: vt,
 				for: d.inline ? void 0 : `${v(x)}-trigger`,
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: p(["mb-2 flex items-center gap-1 text-base font-medium text-heading", d.labelClass])
 			}, [
 				oe(e.$slots, "label-icon"),
 				d.label ? (m(), c("span", xe, _(d.label), 1)) : s("", !0),
 				oe(e.$slots, "label-extra"),
 				d.required ? (m(), c("span", Se, "*")) : s("", !0)
-			], 8, be)) : s("", !0),
+			], 10, be)) : s("", !0),
 			d.hint ? (m(), c("p", {
 				key: 1,
 				id: St,

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

@@ -43,7 +43,7 @@ var b = {
 			style: u(c.sticky ? { top: c.top } : void 0),
 			"data-ac-ds": "",
 			"data-testid": "ac-header"
-		}, [j.value && t.$slots.breadcrumb ? (d(), i("div", b, [f(t.$slots, "breadcrumb")])) : r("", !0), a("div", { class: l(j.value && "relative isolate overflow-hidden rounded-16 border border-border bg-surface px-5 py-5 shadow-xs sm:px-7 sm:py-6") }, [j.value ? (d(), i(e, { key: 0 }, [
+		}, [j.value && t.$slots.breadcrumb ? (d(), i("div", b, [f(t.$slots, "breadcrumb")])) : r("", !0), a("div", { class: l(j.value && "relative isolate overflow-clip rounded-16 border border-border bg-surface px-5 py-5 shadow-xs sm:px-7 sm:py-6") }, [j.value ? (d(), i(e, { key: 0 }, [
 			D[1] ||= a("div", {
 				class: "absolute inset-0 -z-10 bg-linear-to-br from-primary/10 via-primary/3 to-transparent",
 				"aria-hidden": "true"

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

@@ -2,6 +2,8 @@ import type { Component, HTMLAttributes } from "vue";
 export interface Props {
     /** Label above the field. Pass `placeholder` for an example value inside it. Without a label, pass `aria-label`; the placeholder is the accessible name otherwise. */
     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. */
     name?: string;
     /** Example value shown inside the empty field. */

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

@@ -28,6 +28,16 @@ var x = ["for"], S = { key: 0 }, C = ["id"], w = { class: "flex" }, re = [
 	__name: "AcInput",
 	props: /*@__PURE__*/ s({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		name: { default: "" },
 		placeholder: { default: void 0 },
 		autocomplete: { default: void 0 },
@@ -194,12 +204,12 @@ var x = ["for"], S = { key: 0 }, C = ["id"], w = { class: "flex" }, re = [
 			normal: "pr-4",
 			large: "pr-5"
 		}, me = {
-			xs: "mr-2",
-			xsmall: "mr-3",
-			small: "mr-3",
-			medium: "mr-3",
-			normal: "mr-4",
-			large: "mr-5"
+			xs: "mr-0.5 size-6 rounded-6",
+			xsmall: "mr-1.5 size-7 rounded-8",
+			small: "mr-1.5 size-7 rounded-8",
+			medium: "mr-1.5 size-7 rounded-8",
+			normal: "mr-3 size-7 rounded-8",
+			large: "mr-4 size-8 rounded-8"
 		}, he = {
 			xs: "size-3",
 			xsmall: "size-4",
@@ -267,7 +277,7 @@ var x = ["for"], S = { key: 0 }, C = ["id"], w = { class: "flex" }, re = [
 			U.value ? (u(), i("label", {
 				key: 0,
 				for: h(P),
-				class: l(["mb-2 flex items-center text-base font-medium text-heading", !o.flushLabelSlots && "gap-1"])
+				class: l(["mb-2 flex items-center text-base font-medium text-heading", [!o.flushLabelSlots && "gap-1", o.labelClass]])
 			}, [
 				f(t.$slots, "label-icon"),
 				o.label ? (u(), i("span", S, m(o.label), 1)) : r("", !0),
@@ -340,7 +350,7 @@ var x = ["for"], S = { key: 0 }, C = ["id"], w = { class: "flex" }, re = [
 				o.type === "password" ? (u(), i("button", {
 					key: 3,
 					type: "button",
-					class: l(["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-wait", me[Z.value]]),
+					class: l(["relative inline-flex shrink-0 cursor-pointer items-center justify-center text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-wait disabled:hover:bg-transparent", me[Z.value]]),
 					disabled: q.value,
 					"aria-label": M.value ? "Hide value" : "Show value",
 					"aria-pressed": M.value,

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

@@ -68,6 +68,10 @@ var w = [
 			B.closable && (V.value = !1, H("close"));
 		}
 		function Z(e) {
+			let t = e.currentTarget;
+			e.clientX >= t.getBoundingClientRect().left + t.clientWidth || (e.preventDefault(), B.closeOnOutsideClick && X());
+		}
+		function Q(e) {
 			if (e.key === "Escape") {
 				if (e.defaultPrevented) return;
 				e.stopPropagation(), X();
@@ -78,7 +82,7 @@ var w = [
 				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 			}
 		}
-		function Q(e) {
+		function $(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;
@@ -89,16 +93,16 @@ var w = [
 		}
 		return b(V, async (e, t) => {
 			if (e) {
-				J = document.activeElement, Y = !0, Q(!0), await u();
+				J = document.activeElement, Y = !0, $(!0), await u();
 				let e = q.value?.querySelector("[autofocus]");
 				((e && (e.matches(z) ? e : e.querySelector(z))) ?? q.value?.querySelector(U) ?? q.value)?.focus();
-			} else t && Y && (Y = !1, Q(!1), J?.focus?.());
+			} else t && Y && (Y = !1, $(!1), J?.isConnected && J.focus());
 		}, { immediate: !0 }), f(() => {
-			Y && (Y = !1, Q(!1), J?.isConnected && J.focus());
+			Y && (Y = !1, $(!1), J?.isConnected && J.focus());
 		}), (l, u) => (p(), r(t, { to: "body" }, [s(n, {
 			"enter-active-class": "transition-opacity duration-200 ease-out",
 			"enter-from-class": "opacity-0",
-			"leave-active-class": "transition-opacity duration-150 ease-in",
+			"leave-active-class": "pointer-events-none transition-opacity duration-150 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
 			default: x(() => [V.value ? (p(), a("div", {
@@ -106,11 +110,11 @@ var w = [
 				class: "fixed inset-0 z-[80] overflow-y-auto bg-black/50",
 				"data-ac-ds": "",
 				"data-testid": "ac-modal",
-				onKeydown: Z,
-				onMousedown: u[1] ||= S((e) => c.closeOnOutsideClick && X(), ["self"])
+				onKeydown: Q,
+				onMousedown: S(Z, ["self"])
 			}, [o("div", {
 				class: "flex min-h-full items-start justify-center p-4 sm:items-center sm:p-8",
-				onMousedown: u[0] ||= S((e) => c.closeOnOutsideClick && X(), ["self"])
+				onMousedown: S(Z, ["self"])
 			}, [o("div", {
 				ref_key: "panel",
 				ref: q,

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

@@ -8,6 +8,8 @@ export interface MonthPickerPreset {
 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 month" (or "Choose months" with `range`). */
     placeholder?: string;
     /** Pick a start and an end month; `v-model` becomes `[start, end]`, swapped so start ≤ end. */
@@ -81,6 +83,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: MonthPickerPreset[];
     locale: string;

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

@@ -54,6 +54,16 @@ var he = ["for"], ge = { key: 0 }, _e = {
 	__name: "AcMonthPicker",
 	props: /*@__PURE__*/ ee({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		placeholder: { default: "" },
 		range: {
 			type: Boolean,
@@ -384,13 +394,13 @@ var he = ["for"], ge = { key: 0 }, _e = {
 				key: 0,
 				id: Ve,
 				for: u.inline ? void 0 : `${v(C)}-trigger`,
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: p(["mb-2 flex items-center gap-1 text-base font-medium text-heading", u.labelClass])
 			}, [
 				re(e.$slots, "label-icon"),
 				u.label ? (m(), s("span", ge, _(u.label), 1)) : o("", !0),
 				re(e.$slots, "label-extra"),
 				u.required ? (m(), s("span", _e, "*")) : o("", !0)
-			], 8, he)) : o("", !0),
+			], 10, he)) : o("", !0),
 			u.hint ? (m(), s("p", {
 				key: 1,
 				id: We,

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

@@ -1,6 +1,9 @@
+import type { HTMLAttributes } from "vue";
 export interface Props<K extends "null" | "undefined" = "null"> {
     /** 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. */
     name?: string;
     /** Text shown inside the empty field, e.g. "Enter number". */