@ac-design/design-system 2.3.0 → 2.4.1

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

@@ -1,8 +1,10 @@
-export interface Props {
+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;
     /** Native `name` attribute. */
     name?: string;
+    /** Text shown inside the empty field, e.g. "Enter number". */
+    placeholder?: string;
     /** Lowest allowed value. ↓, − and Home stop here, and typed values are clamped to it on blur. No limit by default. */
     min?: number;
     /** Highest allowed value. ↑, + and End stop here, and typed values are clamped to it on blur. No limit by default. */
@@ -21,6 +23,8 @@ export interface Props {
     holdIntervalDelay?: number;
     /** Marks the field required and adds a red asterisk. */
     required?: boolean;
+    /** Adds the red asterisk without native `required`, for forms that run their own validation on submit. Cloud `is-required`. */
+    requiredMark?: boolean;
     /** Disables the field and its buttons. */
     disabled?: boolean;
     /** Read-only field: a muted fill, "(read only)" after the label, and no stepping. */
@@ -29,51 +33,57 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall, the same as `AcInput`; the step buttons match. */
-    size?: "small" | "normal";
+    /** `small` 36px, `normal` 42px or `large` 46px tall (cloud-ui's default number field); the step buttons match. */
+    size?: "small" | "normal" | "large";
+    /** What an empty field puts in `v-model`: `"null"` (default) or `"undefined"`, as cloud-ui's v1 AcNumberInput did. */
+    emptyValue?: K;
+    /** Text after the label of a read-only field, e.g. "(Read Only)". */
+    readonlyText?: string;
+    /** Keeps the editable fill on a read-only field and shows no focus halo, as cloud-ui's v1 AcNumberInput did. */
+    plainReadonly?: boolean;
+    /** Cloud-ui v1 error look: the border stays grey and the message uses the base `text-danger` red instead of the AA `-strong` shade. */
+    plainError?: boolean;
+    /** No gap around `#label-icon` and `#label-extra`, for slot content that brings its own margin. */
+    flushLabelSlots?: boolean;
+    /** Replaces the built-in range message, e.g. "Value must be between {min} and {max}". It shows from a keystroke that leaves the range until a blur that commits a value, and wins over `error-msg`. */
+    rangeMessage?: string;
+    /** The value and placeholder take the page's font weight and default placeholder colour instead of the field's own. */
+    inheritFont?: boolean;
+    /** Puts the − and + buttons in the tab order and lets a click focus them, as cloud-ui's v1 AcNumberInput did. */
+    focusableStepButtons?: boolean;
+    /** Drops the root's `w-full`, so in a flex row the field sizes to its content, as cloud-ui's v1 AcNumberInput did. */
+    autoWidth?: boolean;
 }
-type __VLS_Props = Props;
-type __VLS_Slots = {
-    /** Content inside the field after the value, before the buttons: an icon or richer unit text. */
-    suffix?: () => unknown;
-};
-type __VLS_ModelProps = {
-    /** The number, or `null` while the field is empty. */
-    modelValue?: number | null;
+declare const __VLS_export: <K extends "null" | "undefined" = "null">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<K> & {
+        modelValue?: number | (K extends "undefined" ? undefined : null);
+    }) & {
+        "onUpdate:modelValue"?: ((value: number | (K extends "undefined" ? undefined : null)) => any) | undefined;
+        onChange?: ((value: number | (K extends "undefined" ? undefined : null)) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Moves focus to the input. */
+        focus: () => void | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Content before the label text, such as a 14px icon. */
+        "label-icon"?: () => unknown;
+        /** Content after the label text, such as "(Optional)" or an info tooltip. */
+        "label-extra"?: () => unknown;
+        /** Content inside the field after the value, before the buttons: an icon or richer unit text. */
+        suffix?: () => unknown;
+    };
+    emit: ((evt: "change", value: number | (K extends "undefined" ? undefined : null)) => void) & ((event: "update:modelValue", value: number | (K extends "undefined" ? undefined : null)) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    /** Moves focus to the input. */
-    focus: () => void | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number | null) => any;
-    change: (value: number | null) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
-    onChange?: ((value: number | null) => any) | undefined;
-}>, {
-    required: boolean;
-    label: string;
-    disabled: boolean;
-    max: number;
-    min: number;
-    name: string;
-    size: "small" | "normal";
-    hint: string;
-    step: number;
-    readonly: boolean;
-    errorMsg: string;
-    unit: string;
-    precision: number;
-    stepButtons: boolean;
-    holdDelay: number;
-    holdIntervalDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,18 +1,12 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, watch as ee } from "vue";
-import { Minus as te, Plus as ne } from "@lucide/vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, onBeforeUnmount as ee, openBlock as l, ref as u, renderSlot as d, toDisplayString as f, unref as p, useAttrs as m, useId as h, useModel as te, useSlots as ne, watch as re } from "vue";
+import { Minus as ie, Plus as ae } from "@lucide/vue";
 //#region src/lib/components/AcNumberInput.vue?vue&type=script&setup=true&lang.ts
-var re = ["for"], v = {
-	key: 0,
-	class: "text-muted"
-}, ie = {
-	key: 1,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, y = ["id"], b = { class: "flex items-center gap-3" }, ae = [
+var oe = ["for"], g = { key: 0 }, _ = ["id"], se = { class: "flex items-center gap-3" }, ce = ["tabindex"], le = [
 	"id",
 	"inputmode",
 	"value",
 	"name",
+	"placeholder",
 	"disabled",
 	"readonly",
 	"required",
@@ -22,12 +16,13 @@ var re = ["for"], v = {
 	"aria-valuetext",
 	"aria-invalid",
 	"aria-describedby"
-], oe = { key: 0 }, se = ["id"], x = /*@__PURE__*/ a({
+], ue = { key: 0 }, de = ["tabindex"], v = ["id"], y = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcNumberInput",
 	props: /*@__PURE__*/ o({
 		label: { default: "" },
 		name: { default: "" },
+		placeholder: { default: void 0 },
 		min: { default: void 0 },
 		max: { default: void 0 },
 		step: { default: 1 },
@@ -43,6 +38,10 @@ var re = ["for"], v = {
 			type: Boolean,
 			default: !1
 		},
+		requiredMark: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -53,37 +52,82 @@ var re = ["for"], v = {
 		},
 		errorMsg: { default: "" },
 		hint: { default: "" },
-		size: { default: "normal" }
+		size: { default: "normal" },
+		emptyValue: { default: "null" },
+		readonlyText: { default: "(read only)" },
+		plainReadonly: {
+			type: Boolean,
+			default: !1
+		},
+		plainError: {
+			type: Boolean,
+			default: !1
+		},
+		flushLabelSlots: {
+			type: Boolean,
+			default: !1
+		},
+		rangeMessage: { default: "" },
+		inheritFont: {
+			type: Boolean,
+			default: !1
+		},
+		focusableStepButtons: {
+			type: Boolean,
+			default: !1
+		},
+		autoWidth: {
+			type: Boolean,
+			default: !1
+		}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
-	setup(a, { expose: o, emit: x }) {
-		let S = a, C = _(a, "modelValue"), w = x, T = g(), E = h(), D = e(() => ({
-			class: E.class,
-			style: E.style
-		})), O = e(() => {
-			let { class: e, style: t, ...n } = E;
+	setup(a, { expose: o, emit: y }) {
+		let b = a, x = te(a, "modelValue"), fe = y, S = h(), C = m(), w = ne(), T = e(() => ({
+			class: C.class,
+			style: C.style
+		})), E = e(() => {
+			let { class: e, style: t, ...n } = C;
 			return n;
-		}), k = d(null), A = d(G(C.value)), j = d(!1), M, N, P = e(() => S.precision ?? W(S.step)), F = e(() => S.min === void 0 || S.min < 0), I = e(() => S.disabled || S.readonly), L = e(() => S.min !== void 0 && C.value !== null && C.value <= S.min), R = e(() => S.max !== void 0 && C.value !== null && C.value >= S.max), z = e(() => {
-			let e = C.value;
-			if (!j.value || e === null) return "";
-			let { min: t, max: n } = S;
+		}), D = u(null), O = u(G(x.value)), k = u(!1), A = u(""), j, M, pe = e(() => !!b.label || !!w["label-icon"] || !!w["label-extra"]), N = {
+			small: "h-9",
+			normal: "h-10.5",
+			large: "h-11.5"
+		}, P = e(() => b.size in N ? b.size : "normal"), F = e(() => b.precision ?? ve(b.step)), I = e(() => b.min === void 0 || b.min < 0), L = e(() => b.disabled || b.readonly), R = e(() => x.value), z = e(() => b.min !== void 0 && !U(R.value) && R.value <= b.min), B = e(() => b.max !== void 0 && !U(R.value) && R.value >= b.max), me = e(() => {
+			let e = R.value;
+			if (!k.value || U(e)) return "";
+			let { min: t, max: n } = b;
 			return (t === void 0 || e >= t) && (n === void 0 || e <= n) ? "" : t !== void 0 && n !== void 0 ? `Enter a value from ${t} to ${n}` : t === void 0 ? `Enter ${n} or less` : `Enter ${t} or more`;
-		}), B = e(() => S.errorMsg || z.value), V = e(() => [S.hint && `${T}-hint`, B.value && `${T}-msg`].filter(Boolean).join(" ") || void 0), H = e(() => ["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-10 border border-border bg-accent text-heading transition-colors duration-200 select-none hover:bg-accent-hover active:bg-accent-active disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-accent", S.size === "small" ? "h-9 px-3" : "h-10.5 px-5"]), U = e(() => C.value === null ? void 0 : [A.value, S.unit].filter(Boolean).join(" "));
+		}), V = e(() => b.rangeMessage ? A.value || b.errorMsg : b.errorMsg || me.value), he = e(() => {
+			if (V.value && !b.plainError) return "border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]";
+			let e = !b.disabled && "hover:border-accent-active";
+			return b.readonly && b.plainReadonly ? ["border-border focus-within:border-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]", e] : ["border-border focus-within:focus-ring", e];
+		}), ge = e(() => [b.hint && `${S}-hint`, V.value && `${S}-msg`].filter(Boolean).join(" ") || void 0), H = e(() => [
+			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-10 border border-border bg-accent text-heading transition-colors duration-200 select-none hover:bg-accent-hover active:bg-accent-active disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-accent",
+			N[P.value],
+			P.value === "small" ? "px-3" : "px-5"
+		]), _e = e(() => U(x.value) ? void 0 : [O.value, b.unit].filter(Boolean).join(" "));
+		function U(e) {
+			return e == null;
+		}
 		function W(e) {
+			return e === null && b.emptyValue === "undefined" ? void 0 : e;
+		}
+		function ve(e) {
 			let t = String(e);
 			return t.includes("e-") ? Number(t.split("e-")[1]) : t.split(".")[1]?.length ?? 0;
 		}
 		function G(e) {
-			return e === null ? "" : String(e);
+			return U(e) ? "" : String(e);
 		}
 		function K(e) {
-			return Number(e.toFixed(P.value));
+			return Number(e.toFixed(F.value));
 		}
 		function q(e) {
-			return S.min !== void 0 && e < S.min ? S.min : S.max !== void 0 && e > S.max ? S.max : e;
+			return b.min !== void 0 && e < b.min ? b.min : b.max !== void 0 && e > b.max ? b.max : e;
 		}
 		function J(e) {
 			if (e === "" || e === "-" || e === "." || e === "-.") return null;
@@ -91,151 +135,167 @@ var re = ["for"], v = {
 			return Number.isNaN(t) ? null : t;
 		}
 		function Y(e) {
-			let t = e !== C.value;
-			C.value = e, A.value = G(e), t && w("change", e);
+			let t = W(e), n = t !== x.value;
+			x.value = t, O.value = G(e), n && fe("change", t);
+		}
+		function ye() {
+			return b.rangeMessage.replace("{min}", String(b.min ?? -Infinity)).replace("{max}", String(b.max ?? Infinity));
 		}
 		function X(e, t = 1) {
-			I.value || Y(q(K((C.value ?? 0) + e * S.step * t)));
+			L.value || Y(q(K((x.value ?? 0) + e * b.step * t)));
 		}
-		function ce(e) {
+		function be(e) {
 			let t = e.target;
-			if (!RegExp(`^${F.value ? "-?" : ""}\\d*${P.value > 0 ? "(\\.\\d*)?" : ""}$`).test(t.value)) {
-				t.value = A.value;
+			if (!RegExp(`^${I.value ? "-?" : ""}\\d*${F.value > 0 ? "(\\.\\d*)?" : ""}$`).test(t.value)) {
+				t.value = O.value;
 				return;
 			}
-			A.value = t.value;
+			O.value = t.value;
 			let n = J(t.value);
-			(n !== null || t.value === "") && (C.value = n);
+			if ((n !== null || t.value === "") && (x.value = W(n)), b.rangeMessage) {
+				let e = Number(t.value);
+				A.value = e > (b.max ?? Infinity) || e < (b.min ?? -Infinity) ? ye() : "";
+			}
 		}
 		function Z() {
-			let e = J(A.value);
+			let e = J(O.value);
 			Y(e === null ? null : q(K(e)));
 		}
-		function le() {
-			j.value = !1, Z();
+		function xe() {
+			k.value = !1, Z(), O.value !== "" && (A.value = "");
 		}
-		function ue(e) {
+		function Se(e) {
 			let t = {
 				ArrowUp: () => X(1),
 				ArrowDown: () => X(-1),
 				PageUp: () => X(1, 10),
 				PageDown: () => X(-1, 10)
 			};
-			if (S.min !== void 0 && (t.Home = () => !I.value && Y(S.min)), S.max !== void 0 && (t.End = () => !I.value && Y(S.max)), e.key === "Enter") return Z();
+			if (b.min !== void 0 && (t.Home = () => !L.value && Y(b.min)), b.max !== void 0 && (t.End = () => !L.value && Y(b.max)), e.key === "Enter") return Z();
 			let n = t[e.key];
 			n && (e.preventDefault(), n());
 		}
 		function Q() {
-			clearTimeout(M), clearInterval(N);
+			clearTimeout(j), clearInterval(M);
 		}
-		function de(e, t) {
-			e.button !== 0 || I.value || (Q(), X(t), M = setTimeout(() => {
-				N = setInterval(() => {
-					X(t), (t > 0 && R.value || t < 0 && L.value) && Q();
-				}, S.holdIntervalDelay);
-			}, S.holdDelay));
+		function Ce(e, t) {
+			e.button !== 0 || L.value || (Q(), X(t), j = setTimeout(() => {
+				M = setInterval(() => {
+					X(t), (t > 0 && B.value || t < 0 && z.value) && Q();
+				}, b.holdIntervalDelay);
+			}, b.holdDelay));
 		}
-		function fe(e, t) {
+		function we(e, t) {
 			e.detail === 0 && X(t);
 		}
 		function $(e) {
 			let t = e < 0 ? "Decrease" : "Increase";
 			return {
 				"aria-label": t,
-				"aria-controls": T,
+				"aria-controls": S,
 				"data-testid": `ac-number-input-${t.toLowerCase()}`,
-				disabled: I.value || (e < 0 ? L.value : R.value),
-				onMousedown: (e) => e.preventDefault(),
-				onPointerdown: (t) => de(t, e),
+				disabled: L.value || (e < 0 ? z.value : B.value),
+				onMousedown: (e) => !b.focusableStepButtons && e.preventDefault(),
+				onPointerdown: (t) => Ce(t, e),
 				onPointerup: Q,
 				onPointerleave: Q,
 				onPointercancel: Q,
-				onClick: (t) => fe(t, e)
+				onClick: (t) => we(t, e)
 			};
 		}
-		return ee(C, (e) => {
-			J(A.value) !== e && (A.value = G(e));
-		}), l(Q), o({ focus: () => k.value?.focus() }), (e, o) => (u(), n("div", s(D.value, {
-			class: ["w-full", a.disabled && "opacity-50"],
+		return re(x, (e) => {
+			J(O.value) !== (e ?? null) && (O.value = G(e));
+		}), ee(Q), o({ focus: () => D.value?.focus() }), (e, o) => (l(), n("div", s(T.value, {
+			class: [!a.autoWidth && "w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-number-input"
 		}), [
-			a.label ? (u(), n("label", {
+			pe.value ? (l(), n("label", {
 				key: 0,
-				for: m(T),
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				for: p(S),
+				class: c(["mb-2 flex items-center text-base font-medium text-heading", !a.flushLabelSlots && "gap-1"])
 			}, [
-				r("span", null, p(a.label), 1),
-				a.readonly ? (u(), n("span", v, "(read only)")) : t("", !0),
-				a.required ? (u(), n("span", ie, "*")) : t("", !0)
-			], 8, re)) : t("", !0),
-			a.hint ? (u(), n("p", {
+				d(e.$slots, "label-icon"),
+				a.label ? (l(), n("span", g, f(a.label), 1)) : t("", !0),
+				a.readonly ? (l(), n("span", {
+					key: 1,
+					class: c(["text-muted", a.flushLabelSlots && "ml-1"])
+				}, f(a.readonlyText), 3)) : t("", !0),
+				d(e.$slots, "label-extra"),
+				a.required || a.requiredMark ? (l(), n("span", {
+					key: 2,
+					class: c(["text-danger", a.flushLabelSlots && "ml-1"]),
+					"aria-hidden": "true"
+				}, "*", 2)) : t("", !0)
+			], 10, oe)) : t("", !0),
+			a.hint ? (l(), n("p", {
 				key: 1,
-				id: `${m(T)}-hint`,
+				id: `${p(S)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, p(a.hint), 9, y)) : t("", !0),
-			r("div", b, [
-				a.stepButtons ? (u(), n("button", s({
+			}, f(a.hint), 9, _)) : t("", !0),
+			r("div", se, [
+				a.stepButtons ? (l(), n("button", s({
 					key: 0,
 					type: "button",
-					tabindex: "-1",
+					tabindex: a.focusableStepButtons ? void 0 : -1,
 					class: H.value
-				}, $(-1)), [i(m(te), {
+				}, $(-1)), [i(p(ie), {
 					class: c(a.size === "small" ? "size-4" : "size-6"),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])], 16)) : t("", !0),
+				}, null, 8, ["class"])], 16, ce)) : t("", !0),
 				r("div", { class: c(["relative flex min-w-0 flex-1 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
-					a.size === "small" ? "h-9" : "h-10.5",
-					a.readonly ? "bg-surface-muted" : "bg-background",
-					B.value ? "border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+					N[P.value],
+					a.readonly && !a.plainReadonly ? "bg-surface-muted" : "bg-background",
+					he.value
 				]]) }, [r("input", s({
-					id: m(T),
+					id: p(S),
 					ref_key: "input",
-					ref: k
-				}, O.value, {
+					ref: D
+				}, E.value, {
 					type: "text",
 					role: "spinbutton",
 					autocomplete: "off",
-					inputmode: P.value > 0 || F.value ? "decimal" : "numeric",
-					value: A.value,
+					inputmode: F.value > 0 || I.value ? "decimal" : "numeric",
+					value: O.value,
 					name: a.name,
+					placeholder: a.placeholder,
 					disabled: a.disabled,
 					readonly: a.readonly,
 					required: a.required,
-					"aria-valuenow": C.value ?? void 0,
+					"aria-valuenow": x.value ?? void 0,
 					"aria-valuemin": a.min,
 					"aria-valuemax": a.max,
-					"aria-valuetext": U.value,
-					"aria-invalid": !!B.value || void 0,
-					"aria-describedby": V.value,
-					class: "block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent px-2 text-center text-base font-normal text-heading tabular-nums outline-none placeholder:text-muted/80 disabled:cursor-not-allowed",
-					onInput: ce,
-					onKeydown: ue,
-					onFocus: o[0] ||= (e) => j.value = !0,
-					onBlur: le
-				}), null, 16, ae), a.unit || e.$slots.suffix ? (u(), n("span", {
+					"aria-valuetext": _e.value,
+					"aria-invalid": !!V.value || void 0,
+					"aria-describedby": ge.value,
+					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent px-2 text-center text-base text-heading tabular-nums outline-none disabled:cursor-not-allowed", [a.inheritFont ? "font-[inherit]" : "font-normal placeholder:text-muted/80", a.readonly && a.plainReadonly && "cursor-default"]],
+					onInput: be,
+					onKeydown: Se,
+					onFocus: o[0] ||= (e) => k.value = !0,
+					onBlur: xe
+				}), null, 16, le), a.unit || e.$slots.suffix ? (l(), n("span", {
 					key: 0,
 					class: c(["flex h-full shrink-0 items-center gap-1.5 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.size === "small" ? "pr-3" : "pr-4"]),
 					"aria-hidden": "true"
-				}, [f(e.$slots, "suffix"), a.unit ? (u(), n("span", oe, p(a.unit), 1)) : t("", !0)], 2)) : t("", !0)], 2),
-				a.stepButtons ? (u(), n("button", s({
+				}, [d(e.$slots, "suffix"), a.unit ? (l(), n("span", ue, f(a.unit), 1)) : t("", !0)], 2)) : t("", !0)], 2),
+				a.stepButtons ? (l(), n("button", s({
 					key: 1,
 					type: "button",
-					tabindex: "-1",
+					tabindex: a.focusableStepButtons ? void 0 : -1,
 					class: H.value
-				}, $(1)), [i(m(ne), {
+				}, $(1)), [i(p(ae), {
 					class: c(a.size === "small" ? "size-4" : "size-6"),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])], 16)) : t("", !0)
+				}, null, 8, ["class"])], 16, de)) : t("", !0)
 			]),
-			B.value ? (u(), n("p", {
+			V.value ? (l(), n("p", {
 				key: 2,
-				id: `${m(T)}-msg`,
-				class: "mt-1 text-base text-danger-strong",
+				id: `${p(S)}-msg`,
+				class: c(["mt-1 text-base", a.plainError ? "text-danger" : "text-danger-strong"]),
 				role: "alert"
-			}, p(B.value), 9, se)) : t("", !0)
+			}, f(V.value), 11, v)) : t("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { x as default };
+export { y as default };

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

@@ -20,7 +20,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & {
         modelValue?: T;
     }) & {
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onChange?: ((value: T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -42,7 +42,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         /** Content on the right of the card, e.g. a price. Below 768px it moves under the text. Hides the check badge, so pair it with `show-radio`. Old cloud-ui `#rightContent`. */
         right?: () => unknown;
     };
-    emit: ((evt: "change", value: T) => void) & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "change", value: T) => void) & ((event: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -37,7 +37,7 @@ var S = ["aria-disabled"], C = [
 		titleClass: { default: "text-base font-semibold text-heading" },
 		descriptionClass: { default: "mt-0.5 text-xs leading-relaxed text-muted" }
 	}, {
-		modelValue: {},
+		modelValue: { default: void 0 },
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),

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

@@ -32,23 +32,44 @@ export interface Props<T> {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `compact` 32px (toolbars and filters), `small` 36px or `normal` 42px tall. */
-    size?: "compact" | "small" | "normal";
+    /** Field height: `xs` 26px, `compact` 32px (toolbars and filters), `xsmall` 34px, `small` 36px, `medium` 38px, `normal` 42px or `large` 50px. Old cloud-ui `size` `xs`, `sm`, `md`, `lg`, `xl` are `xs`, `xsmall`, `medium`, `normal`, `large`. */
+    size?: "xs" | "compact" | "xsmall" | "small" | "medium" | "normal" | "large";
+    /** Field style: `outline` (bordered), `soft` (accent fill, no border) or `ghost` (no fill, no border), e.g. inside a table row. */
+    variant?: "outline" | "soft" | "ghost";
+    /** Draws a primary halo around the field to point the viewer at it. */
+    highlight?: boolean;
+    /** Shows the value but blocks changes: a muted fill, and "(read only)" after the label. Old cloud-ui `is-read-only`. */
+    readonly?: boolean;
+    /** With `required`, shows "This field is required. Please select an option." (with `multiple`, "…at least one option.") when the list closes or the value changes while nothing is selected. It shows instead of `errorMsg`. */
+    validateRequired?: boolean;
+    /** Treats values that aren't in `options` as no selection, so the field shows the placeholder instead of the raw value. */
+    hideUnknownValues?: boolean;
+    /** What a single select writes to `v-model` when the viewer clears it, e.g. `""` for a string field. */
+    emptyValue?: T | null;
+    /** With `multiple`, writes `[]` on mount when `v-model` starts empty (`null`, `undefined` or `""`), so the app always reads an array. */
+    initEmptyArray?: boolean;
+    /** Text shown when the list is empty or nothing matches the search, in place of "No options" and "No results for “text”", e.g. "No options found". */
+    emptyText?: string;
+    /** With `refreshable`, hides the refresh button while the field is disabled instead of showing it greyed out. */
+    hideRefreshWhenDisabled?: boolean;
+    /** With `multiple`, pads the chips like a line of text, so a field with chips is 4–8px taller than the bare field. */
+    looseChips?: boolean;
     /** Text shown when no option matches the search. */
     noResultText?: string;
     /** Side of the field the list opens on: `bottom` or `top`. It flips to the other side when there isn't room. */
     placement?: "bottom" | "top";
 }
-declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <V, M = V | V[] | null>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<V> & {
-        modelValue?: V | V[] | null;
+        modelValue?: M;
         /** Whether the list is open. Bind `v-model:open` to react when it opens or closes, e.g. to check a required field. */
         open?: boolean;
     }) & {
         onSearch?: ((query: string) => any) | undefined;
         onSelect?: ((option: SelectOption<V>) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: V | V[] | null) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: M) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onChange?: ((value: M) => any) | undefined;
         onCreate?: ((text: string) => any) | undefined;
         onRemove?: ((option: SelectOption<V>) => any) | undefined;
         onRefresh?: (() => any) | undefined;
@@ -75,8 +96,16 @@ declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         empty?: (props: {
             query: string;
         }) => unknown;
+        /** One template for an option in the list and in the closed field (single select). `option` and `selected` win over it. Old cloud-ui `custom-options`. */
+        content?: (props: {
+            option: SelectOption<V>;
+        }) => unknown;
+        /** Content before the label text, e.g. an icon. */
+        "label-icon"?: () => unknown;
+        /** Content after the label text, e.g. "(Optional)". */
+        "label-extra"?: () => unknown;
     };
-    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "refresh") => void)) & (((event: "update:modelValue", value: V | V[] | null) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "change", value: M) => void) & ((evt: "create", text: string) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "refresh") => void)) & (((event: "update:modelValue", value: M) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };