@ac-design/design-system 2.7.0 → 2.9.0

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". */

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

@@ -21,6 +21,16 @@ var oe = ["for"], g = { key: 0 }, _ = ["id"], se = { class: "flex items-center g
 	__name: "AcNumberInput",
 	props: /*@__PURE__*/ o({
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		name: { default: "" },
 		placeholder: { default: void 0 },
 		min: { default: void 0 },
@@ -213,7 +223,7 @@ var oe = ["for"], g = { key: 0 }, _ = ["id"], se = { class: "flex items-center g
 			pe.value ? (l(), n("label", {
 				key: 0,
 				for: p(S),
-				class: c(["mb-2 flex items-center text-base font-medium text-heading", !a.flushLabelSlots && "gap-1"])
+				class: c(["mb-2 flex items-center text-base font-medium text-heading", [!a.flushLabelSlots && "gap-1", a.labelClass]])
 			}, [
 				d(e.$slots, "label-icon"),
 				a.label ? (l(), n("span", g, f(a.label), 1)) : t("", !0),

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

@@ -38,11 +38,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onBack?: (() => any) | undefined;
 }>, {
     title: string;
+    collapsible: boolean;
     tone: "default" | "danger";
     subtitle: string;
     padded: boolean;
     plain: boolean;
-    collapsible: boolean;
     backButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 import type { SelectOption } from "./types";
 export interface Props<T> {
     /** The choices: `{ value, label, description?, disabled?, group? }`. */
@@ -6,6 +7,8 @@ export interface Props<T> {
     by?: string | ((a: T, b: T) => boolean);
     /** Label above the field. Also the accessible name of the select. */
     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 nothing is selected, e.g. "Select a version". */
     placeholder?: string;
     /** Allow several values; `v-model` becomes an array. */