@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -0,0 +1,208 @@
+import e from "./AcInput.js";
+import t from "./AcSelect.js";
+import { Fragment as n, TransitionGroup as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
+import { Plus as ee, Trash as S, TriangleAlert as C } from "@lucide/vue";
+//#region src/lib/components/AcTaintInput.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "relative flex-1 max-sm:basis-full" }, T = {
+	key: 0,
+	class: "mt-1.5 flex items-center gap-1.5 text-xs font-bold text-danger-strong",
+	role: "alert"
+}, E = { class: "relative flex-1 max-sm:basis-full" }, D = { class: "w-64 max-sm:min-w-0 max-sm:flex-1" }, O = { class: "flex flex-col" }, k = { class: "text-base font-bold" }, A = { class: "text-xs text-muted" }, te = { class: "flex flex-col" }, j = { class: "text-base font-bold" }, M = { class: "text-xs text-muted" }, N = [
+	"disabled",
+	"aria-label",
+	"onClick"
+], P = { class: "mt-4 flex" }, F = ["disabled"], I = {
+	key: 0,
+	class: "mt-6 flex items-start gap-3 rounded-8 border border-warning/20 bg-warning/5 p-4",
+	role: "note"
+}, L = /*@__PURE__*/ d({
+	__name: "AcTaintInput",
+	props: /*@__PURE__*/ f({
+		effects: { default: () => [
+			{
+				value: "NoSchedule",
+				label: "NoSchedule",
+				description: "Does not schedule new pods"
+			},
+			{
+				value: "NoExecute",
+				label: "NoExecute",
+				description: "Evicts existing pods"
+			},
+			{
+				value: "PreferNoSchedule",
+				label: "PreferNoSchedule",
+				description: "Prefers not to schedule new pods"
+			}
+		] },
+		evictEffect: { default: () => "NoExecute" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["add", "remove"], ["update:modelValue"]),
+	setup(d, { expose: f, emit: L }) {
+		let R = d, z = y(d, "modelValue"), B = L, V = h(null), H = 0, U = h([]), W = "", G = i(() => R.effects[0]?.value), K = i(() => U.value.some((e) => e.effect === R.evictEffect)), q = i(() => {
+			let e = /* @__PURE__ */ new Set();
+			return U.value.map((t) => {
+				if (t.key) {
+					let n = e.has(t.key);
+					return e.add(t.key), n ? "If duplicate key found , it will be overwritten" : "";
+				}
+				return !t.keyFocused && (t.value || t.effect !== G.value) ? "Key is required" : "";
+			});
+		});
+		function J(e = "", t = "", n) {
+			return {
+				id: H++,
+				key: e,
+				value: t,
+				effect: n || G.value,
+				keyFocused: !1
+			};
+		}
+		function Y(e) {
+			let t = (e ?? []).map((e) => J(e.key, e.value || "", e.effect));
+			U.value = t.length ? t : [J()], W = JSON.stringify(X());
+		}
+		function X() {
+			return U.value.filter((e) => e.key).map((e) => ({
+				key: e.key,
+				value: e.value,
+				effect: e.effect
+			}));
+		}
+		function Z() {
+			let e = X();
+			W = JSON.stringify(e), z.value = e;
+		}
+		function Q(e, t) {
+			Object.assign(e, t), Z();
+		}
+		function $() {
+			if (R.disabled) return;
+			U.value.push(J()), Z(), B("add");
+			let e = U.value.length - 1;
+			p(() => V.value?.querySelectorAll("[data-cell='key']")[e]?.focus());
+		}
+		function ne(e) {
+			R.disabled || (U.value.splice(e, 1), Z(), B("remove", e));
+		}
+		return b(z, (e) => {
+			JSON.stringify(e ?? []) !== W && Y(e);
+		}, { immediate: !0 }), f({ add: $ }), (i, f) => (m(), o("div", {
+			ref_key: "root",
+			ref: V,
+			class: "w-full",
+			"data-ac-ds": "",
+			"data-testid": "ac-taint-input"
+		}, [
+			f[3] ||= c("<div class=\"mb-2 flex items-center gap-4 text-base font-bold text-heading max-sm:hidden\" aria-hidden=\"true\"><div class=\"flex-1\">Key<span class=\"ml-1 text-danger\">*</span></div><div class=\"flex-1\">Value (Optional)</div><div class=\"w-64\">Effect</div><div class=\"w-9\"></div></div>", 1),
+			u(r, {
+				tag: "div",
+				class: "relative space-y-4",
+				"enter-active-class": "transition-all duration-300 ease-out motion-reduce:transition-none",
+				"enter-from-class": "-translate-y-2.5 opacity-0",
+				"leave-active-class": "absolute w-full transition-all duration-300 ease-out motion-reduce:transition-none",
+				"leave-to-class": "translate-x-5 opacity-0",
+				"move-class": "transition-transform duration-300 ease-out motion-reduce:transition-none"
+			}, {
+				default: x(() => [(m(!0), o(n, null, g(U.value, (n, r) => (m(), o("div", {
+					key: n.id,
+					class: "flex w-full items-start gap-4 max-sm:flex-wrap max-sm:gap-2"
+				}, [
+					s("div", w, [u(e, {
+						"data-cell": "key",
+						"model-value": n.key,
+						disabled: d.disabled,
+						invalid: !!q.value[r],
+						"aria-label": `Taint ${r + 1} key`,
+						placeholder: "Enter identifier for taint",
+						autocomplete: "off",
+						spellcheck: "false",
+						class: "[&_:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:pr-3 [&_input]:pl-3 [&_input]:font-medium [&_input]:placeholder:text-heading/50",
+						"onUpdate:modelValue": (e) => Q(n, { key: String(e) }),
+						onFocus: (e) => n.keyFocused = !0,
+						onBlur: (e) => n.keyFocused = !1
+					}, null, 8, [
+						"model-value",
+						"disabled",
+						"invalid",
+						"aria-label",
+						"onUpdate:modelValue",
+						"onFocus",
+						"onBlur"
+					]), !n.key && !n.keyFocused && (n.value || q.value[r]) ? (m(), o("p", T, [u(v(C), {
+						class: "size-3.5 fill-danger text-surface",
+						"aria-hidden": "true"
+					}), f[0] ||= l(" Key is required ", -1)])) : a("", !0)]),
+					s("div", E, [u(e, {
+						"data-cell": "value",
+						"model-value": n.value,
+						disabled: d.disabled,
+						"aria-label": `Taint ${r + 1} value`,
+						placeholder: "Enter associated value",
+						autocomplete: "off",
+						spellcheck: "false",
+						class: "[&_:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:pr-3 [&_input]:pl-3 [&_input]:font-medium [&_input]:placeholder:text-heading/50",
+						"onUpdate:modelValue": (e) => Q(n, { value: String(e) })
+					}, null, 8, [
+						"model-value",
+						"disabled",
+						"aria-label",
+						"onUpdate:modelValue"
+					])]),
+					s("div", D, [u(t, {
+						"model-value": n.effect,
+						options: d.effects,
+						disabled: d.disabled,
+						"aria-label": `Taint ${r + 1} effect`,
+						placeholder: "Select effect",
+						"onUpdate:modelValue": (e) => Q(n, { effect: e ?? G.value })
+					}, {
+						option: x(({ option: e }) => [s("div", O, [s("span", k, _(e.label), 1), s("span", A, _(e.description), 1)])]),
+						selected: x(({ option: e }) => [s("div", te, [s("span", j, _(e.label), 1), s("span", M, _(e.description), 1)])]),
+						_: 1
+					}, 8, [
+						"model-value",
+						"options",
+						"disabled",
+						"aria-label",
+						"onUpdate:modelValue"
+					])]),
+					s("button", {
+						type: "button",
+						class: "mt-0.5 inline-flex size-[38px] shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-danger/10 hover:text-danger focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted",
+						disabled: d.disabled,
+						"aria-label": n.key ? `Remove taint ${n.key}` : `Remove taint ${r + 1}`,
+						title: "Remove item",
+						onClick: (e) => ne(r)
+					}, [u(v(S), {
+						class: "size-[18px]",
+						"aria-hidden": "true"
+					})], 8, N)
+				]))), 128))]),
+				_: 1
+			}),
+			s("div", P, [s("button", {
+				type: "button",
+				class: "inline-flex cursor-pointer items-center gap-1.5 rounded-4 text-base leading-5 font-bold text-primary hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:no-underline",
+				disabled: d.disabled,
+				onClick: $
+			}, [u(v(ee), {
+				class: "size-4",
+				"aria-hidden": "true"
+			}), f[1] ||= l(" Add another taint ", -1)], 8, F)]),
+			K.value ? (m(), o("div", I, [u(v(C), {
+				class: "mt-0.5 size-5 shrink-0 text-warning",
+				"aria-hidden": "true"
+			}), f[2] ||= s("p", { class: "text-base text-heading" }, [s("span", { class: "font-bold" }, "Warning:"), l(" NoExecute taint immediately evicts any running pods on this node pool that don't have a matching toleration. ")], -1)])) : a("", !0)
+		], 512));
+	}
+});
+//#endregion
+export { L as default };

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

@@ -1,8 +1,11 @@
+import type { HTMLAttributes } from "vue";
 export interface Props {
-    /** Label above the field. Pass `placeholder` for an example value inside it. */
-    label: string;
+    /** 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;
     /** Native `name` attribute. */
     name?: string;
+    /** Example value shown inside the empty field. */
+    placeholder?: string;
     /** Visible height in lines. Unset, the field is 160px tall (about 6 lines). With `autoResize` it's the starting (minimum) height. */
     rows?: number;
     /** Grows the field with its content instead of showing a scrollbar. */
@@ -15,39 +18,96 @@ export interface Props {
     mono?: boolean;
     /** 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. */
+    requiredMark?: boolean;
     /** Disables the field. */
     disabled?: boolean;
     /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
+    /** Text after the label of a read-only field, e.g. "(Read Only)". */
+    readonlyText?: string;
+    /** Cloud-ui v1 error look: no field fill while it shows an error, and the message in 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;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
+    /** Turns the border red and sets `aria-invalid` without a message, for forms that print their own. */
+    invalid?: boolean;
     /** Help text between the label and the field. */
     hint?: string;
+    /** Error shown under the field when the viewer clears it or leaves it empty, e.g. "Please enter a description". `error-msg` shows when this one doesn't. */
+    requiredMessage?: string;
+    /** With `required-message`, an empty field emits no `input` or `focusout`, as cloud-ui's v1 AcInput did. */
+    silentWhenEmpty?: boolean;
+    /** Inner spacing: `xs` 8px × 4px with 12px text, `xsmall` 12px × 6px, `small` 16px × 8px, `medium` 16px × 8px, `normal` 20px × 10px or `large` 24px × 12px with 16px text. Without `rows` or a height in `input-class`, `xs` is 60px tall, `medium` 120px, `large` 240px and the rest at least 160px. */
+    size?: "xs" | "xsmall" | "small" | "medium" | "normal" | "large";
+    /** Field look: `outline` (border on the page fill), `soft` (grey fill, no border), `ghost` (no fill or border until focus) or `none` (bare text, no border or focus style). */
+    variant?: "outline" | "soft" | "ghost" | "none";
+    /** Draws a 2px primary halo around the field to point the viewer at it. */
+    highlight?: boolean;
+    /** Classes for the `<textarea>` element itself, e.g. `h-30` for a fixed 120px height; they replace the 160px default height. `class` goes on the wrapper. */
+    inputClass?: HTMLAttributes["class"];
 }
 type __VLS_Props = Props;
+type __VLS_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;
+};
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** Moves focus to the textarea. */
     focus: () => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: Event) => any;
     "update:modelValue": (value: string) => any;
+    blur: (event: FocusEvent) => any;
+    change: (event: Event) => any;
+    focus: (event: FocusEvent) => any;
+    focusout: (event: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onInput?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onFocusout?: ((event: FocusEvent) => any) | undefined;
 }>, {
+    variant: "outline" | "soft" | "ghost" | "none";
     required: boolean;
+    label: string;
     disabled: boolean;
     name: string;
+    size: "xs" | "xsmall" | "small" | "medium" | "normal" | "large";
+    invalid: boolean;
+    hint: string;
     rows: number;
     readonly: boolean;
-    hint: string;
+    placeholder: string;
     errorMsg: string;
+    highlight: boolean;
     mono: boolean;
     maxlength: number;
+    requiredMark: boolean;
+    requiredMessage: string;
+    silentWhenEmpty: boolean;
+    readonlyText: string;
+    plainError: boolean;
+    flushLabelSlots: boolean;
+    inputClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     autoResize: boolean;
     maxRows: 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;
+    };
+};

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

@@ -1,34 +1,30 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, nextTick as c, normalizeClass as l, onMounted as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, vModelText as v, watch as y, withDirectives as b } from "vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, nextTick as c, normalizeClass as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, useSlots as y, vModelText as b, watch as x, withDirectives as S } from "vue";
 //#region src/lib/components/AcTextarea.vue?vue&type=script&setup=true&lang.ts
-var x = ["for"], S = {
-	key: 0,
-	class: "text-muted"
-}, C = {
-	key: 1,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, w = ["id"], T = [
+var ee = ["for"], C = { key: 0 }, w = ["id"], T = [
 	"id",
 	"name",
+	"placeholder",
 	"rows",
 	"maxlength",
 	"disabled",
 	"readonly",
 	"required",
+	"aria-label",
 	"aria-invalid",
 	"aria-describedby"
 ], E = {
-	key: 1,
+	key: 2,
 	class: "mt-1 flex items-start gap-3"
-}, D = ["id"], O = {
+}, te = ["id"], ne = {
 	key: 1,
 	class: "flex-1"
-}, k = ["id"], A = /*@__PURE__*/ a({
+}, D = ["id"], O = "focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]", k = "focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]", A = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcTextarea",
 	props: /*@__PURE__*/ o({
-		label: {},
+		label: { default: "" },
 		name: { default: "" },
+		placeholder: { default: void 0 },
 		rows: { default: void 0 },
 		autoResize: {
 			type: Boolean,
@@ -44,6 +40,10 @@ var x = ["for"], S = {
 			type: Boolean,
 			default: !1
 		},
+		requiredMark: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -52,89 +52,180 @@ var x = ["for"], S = {
 			type: Boolean,
 			default: !1
 		},
+		readonlyText: { default: "(read only)" },
+		plainError: {
+			type: Boolean,
+			default: !1
+		},
+		flushLabelSlots: {
+			type: Boolean,
+			default: !1
+		},
 		errorMsg: { default: "" },
-		hint: { default: "" }
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		hint: { default: "" },
+		requiredMessage: { default: "" },
+		silentWhenEmpty: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "normal" },
+		variant: { default: "outline" },
+		highlight: {
+			type: Boolean,
+			default: !1
+		},
+		inputClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: ["update:modelValue"],
-	setup(a, { expose: o }) {
-		let A = a, j = _(a, "modelValue"), M = g(), N = h(), P = e(() => ({
-			class: N.class,
-			style: N.style
-		})), F = e(() => {
-			let { class: e, style: t, ...n } = N;
+	emits: /*@__PURE__*/ o([
+		"focus",
+		"blur",
+		"focusout",
+		"input",
+		"change"
+	], ["update:modelValue"]),
+	setup(a, { expose: o, emit: A }) {
+		let j = a, M = v(a, "modelValue"), N = A, P = {
+			xs: "px-2 py-1 text-xs",
+			xsmall: "px-3 py-1.5 text-base",
+			small: "px-4 py-2 text-base",
+			medium: "px-4 py-2 text-base",
+			normal: "px-5 py-2.5 text-base",
+			large: "px-6 py-3 text-lg"
+		}, F = {
+			xs: "h-15",
+			xsmall: "min-h-40",
+			small: "min-h-40",
+			medium: "h-30",
+			normal: "min-h-40",
+			large: "h-60"
+		}, I = _(), L = g(), R = y(), z = e(() => ({
+			class: L.class,
+			style: L.style
+		})), B = e(() => {
+			let { class: e, style: t, ...n } = L;
 			return n;
-		}), I = f(null), L = f(!1), R = e(() => A.rows ?? 4), z = e(() => (j.value ?? "").length), B = e(() => A.maxlength !== void 0 && z.value >= A.maxlength), V = e(() => [
-			A.hint && `${M}-hint`,
-			A.errorMsg && `${M}-msg`,
-			A.maxlength !== void 0 && `${M}-count`
+		}), V = f(null), H = f(!1), U = e(() => !!j.label || !!R["label-icon"] || !!R["label-extra"]), W = e(() => U.value ? void 0 : L["aria-label"] ?? j.placeholder), G = f(""), K = e(() => G.value || j.errorMsg), q = e(() => !!K.value || j.invalid), J = e(() => j.size in P ? j.size : "normal"), Y = e(() => {
+			let e = !j.disabled;
+			return j.variant === "soft" ? q.value ? `border-transparent bg-danger/5 focus:bg-danger/10 ${O}` : [
+				"border-transparent bg-accent focus:bg-accent-hover",
+				k,
+				e && "hover:bg-accent-hover"
+			] : j.variant === "ghost" ? q.value ? `border-transparent bg-transparent focus:bg-danger/5 ${O}` : `border-transparent bg-transparent focus:bg-accent-hover ${k}` : j.variant === "none" ? ["border-transparent bg-transparent", q.value && "text-danger-strong"] : [q.value && j.plainError ? "bg-transparent" : j.readonly ? "bg-surface-muted" : "bg-background", q.value ? `border-danger/50 focus:border-danger ${O}` : ["border-border focus:focus-ring", e && "hover:border-accent-active"]];
+		}), X = e(() => j.rows ?? 4), Z = e(() => (M.value ?? "").length), re = e(() => j.maxlength !== void 0 && Z.value >= j.maxlength), ie = e(() => [
+			L["aria-describedby"],
+			j.hint && `${I}-hint`,
+			K.value && `${I}-msg`,
+			j.maxlength !== void 0 && `${I}-count`
 		].filter(Boolean).join(" ") || void 0);
-		function H() {
-			let e = I.value;
-			if (!e || !A.autoResize) return;
-			let t = getComputedStyle(e), n = parseFloat(t.lineHeight) || 20, r = parseFloat(t.paddingTop) + parseFloat(t.paddingBottom) + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i = R.value * n + r, a = A.maxRows > 0 ? A.maxRows * n + r : Infinity;
+		function Q(e) {
+			j.requiredMessage && (G.value = e.target.value === "" ? j.requiredMessage : "");
+		}
+		function ae(e) {
+			Q(e), j.silentWhenEmpty && G.value || N("input", e);
+		}
+		function oe(e) {
+			Q(e), j.silentWhenEmpty && G.value || N("focusout", e);
+		}
+		function $() {
+			let e = V.value;
+			if (!e || !j.autoResize) return;
+			let t = getComputedStyle(e), n = parseFloat(t.lineHeight) || 20, r = parseFloat(t.paddingTop) + parseFloat(t.paddingBottom) + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i = X.value * n + r, a = j.maxRows > 0 ? j.maxRows * n + r : Infinity;
 			e.style.height = "auto";
 			let o = e.scrollHeight + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth);
-			e.style.height = `${Math.min(Math.max(o, i), a)}px`, L.value = o > a;
+			e.style.height = `${Math.min(Math.max(o, i), a)}px`, H.value = o > a;
 		}
-		return y(j, () => c(H)), y(() => [
-			A.autoResize,
-			A.rows,
-			A.maxRows
+		return x(M, () => c($)), x(() => [
+			j.autoResize,
+			j.rows,
+			j.maxRows
 		], () => {
-			!A.autoResize && I.value && (I.value.style.height = ""), c(H);
-		}), u(H), o({ focus: () => I.value?.focus() }), (e, o) => (d(), n("div", s(P.value, {
+			!j.autoResize && V.value && (V.value.style.height = ""), c($);
+		}), u($), o({ focus: () => V.value?.focus() }), (e, o) => (d(), n("div", s(z.value, {
 			class: ["w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-textarea"
 		}), [
-			r("label", {
-				for: m(M),
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			U.value ? (d(), n("label", {
+				key: 0,
+				for: h(I),
+				class: l(["mb-2 flex items-center text-base font-medium text-heading", !a.flushLabelSlots && "gap-1"])
 			}, [
-				r("span", null, p(a.label), 1),
-				a.readonly ? (d(), n("span", S, "(read only)")) : t("", !0),
-				a.required ? (d(), n("span", C, "*")) : t("", !0)
-			], 8, x),
+				p(e.$slots, "label-icon"),
+				a.label ? (d(), n("span", C, m(a.label), 1)) : t("", !0),
+				a.readonly ? (d(), n("span", {
+					key: 1,
+					class: l(["text-muted", a.flushLabelSlots && "ml-1"])
+				}, m(a.readonlyText), 3)) : t("", !0),
+				p(e.$slots, "label-extra"),
+				a.required || a.requiredMark ? (d(), n("span", {
+					key: 2,
+					class: l(["text-danger", a.flushLabelSlots && "ml-1"]),
+					"aria-hidden": "true"
+				}, "*", 2)) : t("", !0)
+			], 10, ee)) : t("", !0),
 			a.hint ? (d(), n("p", {
-				key: 0,
-				id: `${m(M)}-hint`,
+				key: 1,
+				id: `${h(I)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, p(a.hint), 9, w)) : t("", !0),
-			b(r("textarea", s({
-				id: m(M),
+			}, m(a.hint), 9, w)) : t("", !0),
+			S(r("textarea", s({
+				id: h(I),
 				ref_key: "field",
-				ref: I
-			}, F.value, {
-				"onUpdate:modelValue": o[0] ||= (e) => j.value = e,
+				ref: V
+			}, B.value, {
+				"onUpdate:modelValue": o[0] ||= (e) => M.value = e,
 				name: a.name,
-				rows: R.value,
+				placeholder: a.placeholder,
+				rows: X.value,
 				maxlength: a.maxlength,
 				disabled: a.disabled,
 				readonly: a.readonly,
 				required: a.required,
-				"aria-invalid": !!a.errorMsg || void 0,
-				"aria-describedby": V.value,
-				class: ["block w-full rounded-10 border px-5 py-2.5 text-base text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
-					a.readonly ? "bg-surface-muted" : "bg-background",
-					a.rows === void 0 && "min-h-40",
+				"aria-label": W.value,
+				"aria-invalid": q.value || void 0,
+				"aria-describedby": ie.value,
+				class: ["block w-full rounded-10 border text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
+					P[J.value],
+					a.rows === void 0 && !a.inputClass && !a.autoResize && F[J.value],
+					a.rows === void 0 && !a.inputClass && a.autoResize && "min-h-40",
 					a.mono ? "font-mono text-xs leading-5 font-normal" : "font-medium",
-					a.autoResize ? L.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
-					a.errorMsg ? "border-danger/50 focus:border-danger focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus:focus-ring", !a.disabled && "hover:border-accent-active"]
-				]]
-			}), null, 16, T), [[v, j.value]]),
-			a.errorMsg || a.maxlength !== void 0 ? (d(), n("div", E, [a.errorMsg ? (d(), n("p", {
+					a.autoResize ? H.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
+					Y.value,
+					a.highlight && "ring-2 ring-primary/20 ring-offset-2 ring-offset-surface",
+					a.inputClass
+				]],
+				onInput: ae,
+				onFocusout: oe,
+				onFocus: o[1] ||= (e) => N("focus", e),
+				onBlur: o[2] ||= (e) => N("blur", e),
+				onChange: o[3] ||= (e) => N("change", e)
+			}), null, 16, T), [[b, M.value]]),
+			K.value || a.maxlength !== void 0 ? (d(), n("div", E, [K.value ? (d(), n("p", {
 				key: 0,
-				id: `${m(M)}-msg`,
-				class: "min-w-0 flex-1 text-base text-danger-strong",
+				id: `${h(I)}-msg`,
+				class: l(["min-w-0 flex-1 text-base", a.plainError ? "text-danger" : "text-danger-strong"]),
 				role: "alert"
-			}, p(a.errorMsg), 9, D)) : (d(), n("span", O)), a.maxlength === void 0 ? t("", !0) : (d(), n("p", {
+			}, m(K.value), 11, te)) : (d(), n("span", ne)), a.maxlength === void 0 ? t("", !0) : (d(), n("p", {
 				key: 2,
-				id: `${m(M)}-count`,
-				class: l(["shrink-0 text-xs tabular-nums", B.value ? "font-medium text-danger-strong" : "text-muted"])
-			}, [o[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(p(z.value) + " / " + p(a.maxlength), 1)], 10, k))])) : t("", !0)
+				id: `${h(I)}-count`,
+				class: l(["shrink-0 text-xs tabular-nums", re.value ? "font-medium text-danger-strong" : "text-muted"])
+			}, [o[4] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(m(Z.value) + " / " + m(a.maxlength), 1)], 10, D))])) : t("", !0)
 		], 16));
 	}
 });

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

@@ -5,10 +5,18 @@ export interface Props {
     /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages; `toggle` is cloud-ui's sun/moon switch for the navbar (64×32px), light or dark only. */
     display?: "icons" | "labels" | "toggle";
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The theme as a boolean, for apps that keep it in their own store (e.g. cloud-ui's VueUse `useDark`). When bound, the switch only reads and writes this value and leaves the `dark` class and localStorage to the app. */
+    "dark"?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "set:theme": (theme: "light" | "dark") => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "update:dark": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onSet:theme"?: ((theme: "light" | "dark") => any) | undefined;
+    "onUpdate:dark"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     display: "icons" | "labels" | "toggle";
     defaultMode: ColorMode;