@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -29,49 +29,49 @@ var m = {
 	setup(s, { emit: b }) {
 		let x = s, S = b, C = {
 			neutral: {
-				box: "bg-surface text-body border-border",
-				value: "bg-surface text-heading",
+				box: "bg-surface-sunken text-heading border-border",
+				value: "text-heading",
 				divider: "border-border"
 			},
 			primary: {
-				box: "bg-primary-97 text-primary-20 border-primary-80",
-				value: "bg-primary-95 text-primary-10",
-				divider: "border-primary-80"
+				box: "bg-primary/10 text-primary-strong border-primary/25",
+				value: "bg-primary/10 text-primary-strong",
+				divider: "border-primary/25"
 			},
 			info: {
-				box: "bg-blue-97 text-blue-20 border-blue-80",
-				value: "bg-blue-95 text-blue-10",
-				divider: "border-blue-80"
+				box: "bg-info/10 text-info-strong border-info/25",
+				value: "bg-info/10 text-info-strong",
+				divider: "border-info/25"
 			},
 			success: {
-				box: "bg-green-97 text-green-20 border-green-80",
-				value: "bg-green-95 text-green-10",
-				divider: "border-green-80"
+				box: "bg-success/10 text-success-strong border-success/25",
+				value: "bg-success/10 text-success-strong",
+				divider: "border-success/25"
 			},
 			warning: {
-				box: "bg-yellow-97 text-yellow-20 border-yellow-80",
-				value: "bg-yellow-95 text-yellow-10",
-				divider: "border-yellow-80"
+				box: "bg-warning/10 text-warning-strong border-warning/30",
+				value: "bg-warning/10 text-warning-strong",
+				divider: "border-warning/30"
 			},
 			danger: {
-				box: "bg-red-97 text-red-20 border-red-80",
-				value: "bg-red-95 text-red-10",
-				divider: "border-red-80"
+				box: "bg-danger/10 text-danger-strong border-danger/25",
+				value: "bg-danger/10 text-danger-strong",
+				divider: "border-danger/25"
 			}
-		}, w = t(() => !!x.keyLabel), T = t(() => C[x.color]), E = t(() => w.value ? `${x.keyLabel}=${x.valueLabel}` : x.label), D = t(() => w.value ? ["bg-surface text-label", x.color === "neutral" ? "border-border" : T.value.divider] : T.value.box);
+		}, w = t(() => !!x.keyLabel), T = t(() => C[x.color]), E = t(() => w.value ? `${x.keyLabel}=${x.valueLabel}` : x.label), D = t(() => w.value ? ["bg-surface-sunken text-muted", T.value.divider] : T.value.box);
 		function O() {
 			S("remove");
 		}
 		return (t, b) => (l(), r("span", {
-			class: c(["inline-flex h-6 max-w-full items-stretch overflow-hidden border text-xs leading-none whitespace-nowrap", [
+			class: c(["inline-flex h-6 max-w-full items-stretch overflow-hidden border text-xs leading-none font-medium whitespace-nowrap", [
 				D.value,
-				s.rounded ? "rounded-50" : "rounded-6",
-				w.value && "font-mono text-[length:calc(11.5px*var(--ac-scale))]"
+				s.rounded ? "rounded-full" : "rounded-6",
+				w.value && "font-mono"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-tag"
 		}, [w.value ? (l(), r(e, { key: 0 }, [
-			i("span", { class: c(["inline-flex min-w-0 items-center gap-1.5 bg-surface-muted pr-1.5 text-label", s.rounded ? "pl-2.5" : "pl-2"]) }, [t.$slots.icon ? (l(), r("span", m, [u(t.$slots, "icon")])) : n("", !0), i("span", h, d(s.keyLabel), 1)], 2),
+			i("span", { class: c(["inline-flex min-w-0 items-center gap-1.5 pr-1.5 text-muted", s.rounded ? "pl-2.5" : "pl-2"]) }, [t.$slots.icon ? (l(), r("span", m, [u(t.$slots, "icon")])) : n("", !0), i("span", h, d(s.keyLabel), 1)], 2),
 			b[0] ||= i("span", { class: "sr-only" }, "=", -1),
 			i("span", { class: c(["inline-flex min-w-0 shrink-[0.25] items-center border-l pl-1.5", [
 				T.value.value,

package/dist/lib/components/AcTagInput.js

@@ -0,0 +1,5 @@
+import e from "./AcTagInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcTagInput.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,74 @@
+export interface Props {
+    /** Label above the field. Also the accessible name of the input and of the list of values. */
+    label: string;
+    /** Native `name` attribute of the text input. */
+    name?: string;
+    /** Example value shown in the empty input, e.g. "e.g. 10.0.0.0/16". Defaults to "Add item and press Enter". */
+    placeholder?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. A rejected value's own message shows first. */
+    errorMsg?: string;
+    /** Field height: `small` 36px or `normal` 42px. Values show as chips under it. */
+    size?: "small" | "normal";
+    /** Most values allowed. A “N / max items” count shows under the values, amber from 80% and red at the limit; adding more shows an error. */
+    maxItems?: number;
+    /** Lets the same value be added twice. Off by default: a repeat shows “… is already added”. */
+    allowDuplicates?: boolean;
+    /** Checks a value before it's added. Return a message to reject it; the text stays in the input with the message. */
+    validate?: (value: string, values: string[]) => string | void | null | undefined;
+    /** Cleans typed text before it's checked and added, e.g. `(v) => v.trim().toLowerCase()`. Defaults to trimming. */
+    transform?: (value: string) => string;
+    /** Shows a button that removes every value. Was `show-all-clear` in cloud-ui. */
+    showClear?: boolean;
+    /** Adds the typed text when the input loses focus, so a value isn't lost when people click Save. */
+    addOnBlur?: boolean;
+    /** Shows the chips and the input in the monospace font, for IPs, CIDRs and resource names. */
+    mono?: boolean;
+    /** Marks the field required and adds a red asterisk. Pass `error-msg` when the list is empty on submit. Was `is-required` in cloud-ui. */
+    required?: boolean;
+    /** Disables the field. Was `is-disabled` in cloud-ui. */
+    disabled?: boolean;
+    /** Shows the input on a muted fill and the chips without remove buttons. Was `is-read-only` in cloud-ui. */
+    readonly?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The values, in the order they were added. Replaced with a new array on every change. */
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the text input. */
+    focus: () => void | undefined;
+    /** Adds the typed text now, e.g. before submitting. Returns `false` when text was rejected and is still in the input. */
+    commit: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+    clear: () => any;
+    add: (value: string) => any;
+    remove: (value: string, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onAdd?: ((value: string) => any) | undefined;
+    onRemove?: ((value: string, index: number) => any) | undefined;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    transform: (value: string) => string;
+    size: "small" | "normal";
+    maxItems: number;
+    readonly: boolean;
+    hint: string;
+    validate: (value: string, values: string[]) => string | void | null | undefined;
+    placeholder: string;
+    errorMsg: string;
+    mono: boolean;
+    allowDuplicates: boolean;
+    showClear: boolean;
+    addOnBlur: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,289 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelText as y, watch as ee, withDirectives as te, withModifiers as ne } from "vue";
+import { Plus as re, X as b } from "@lucide/vue";
+//#region src/lib/components/AcTagInput.vue?vue&type=script&setup=true&lang.ts
+var ie = ["for"], x = {
+	key: 0,
+	class: "font-normal text-muted"
+}, ae = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, S = [
+	"id",
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], C = [
+	"disabled",
+	"aria-label",
+	"title"
+], oe = ["aria-label"], se = ["title"], ce = [
+	"aria-label",
+	"title",
+	"onClick",
+	"onKeydown"
+], le = {
+	key: 3,
+	class: "mt-2 flex items-center justify-between gap-3 text-xs text-muted tabular-nums"
+}, w = { key: 0 }, T = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, E = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "AcTagInput",
+	props: /*@__PURE__*/ s({
+		label: {},
+		name: { default: "" },
+		placeholder: { default: "" },
+		hint: { default: "" },
+		errorMsg: { default: "" },
+		size: { default: "normal" },
+		maxItems: { default: void 0 },
+		allowDuplicates: {
+			type: Boolean,
+			default: !1
+		},
+		validate: {
+			type: Function,
+			default: void 0
+		},
+		transform: {
+			type: Function,
+			default: (e) => e.trim()
+		},
+		showClear: {
+			type: Boolean,
+			default: !1
+		},
+		addOnBlur: {
+			type: Boolean,
+			default: !1
+		},
+		mono: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s([
+		"add",
+		"remove",
+		"clear"
+	], ["update:modelValue"]),
+	setup(o, { expose: s, emit: E }) {
+		let D = o, O = v(o, "modelValue"), k = E, A = /[\s,;]+/, ue = /[,\n]+/, j = _(), M = `${j}-hint`, N = `${j}-msg`, P = `${j}-count`, F = `${j}-help`, I = g(), L = t(() => ({
+			class: I.class,
+			style: I.style
+		})), R = t(() => {
+			let { class: e, style: t, ...n } = I;
+			return n;
+		}), z = f(null), B = f(null), V = f(""), H = f(""), U = f(!1), W = f(""), G = t(() => O.value ?? []), K = t(() => !D.disabled && !D.readonly), q = t(() => D.maxItems !== void 0 && G.value.length >= D.maxItems), de = t(() => D.maxItems !== void 0 && G.value.length >= D.maxItems * .8), J = t(() => H.value || D.errorMsg), fe = t(() => [
+			D.hint && M,
+			J.value && N,
+			D.maxItems !== void 0 && P,
+			K.value && F
+		].filter(Boolean).join(" ") || void 0), pe = t(() => K.value ? q.value ? `Maximum ${D.maxItems} items reached` : D.placeholder || "Add item and press Enter" : ""), me = t(() => K.value && !q.value && !!V.value.trim());
+		function Y(e) {
+			W.value = "", l(() => W.value = e);
+		}
+		function he(e, t) {
+			return D.maxItems !== void 0 && t.length >= D.maxItems ? `You can add up to ${D.maxItems} ${D.maxItems === 1 ? "value" : "values"}. Remove one first.` : !D.allowDuplicates && t.includes(e) ? `“${e}” is already added.` : D.validate?.(e, t) || "";
+		}
+		function X(e, t) {
+			let n = [...G.value], r = [], i = [], a = "";
+			for (let o of e.split(t)) {
+				let e = D.transform(o);
+				if (!e) continue;
+				let t = he(e, n);
+				if (t) {
+					i.push(o.trim()), a ||= t;
+					continue;
+				}
+				n.push(e), r.push(e);
+			}
+			return r.length && (O.value = n, r.forEach((e) => k("add", e)), Y(r.length === 1 ? `Added ${r[0]}.` : `Added ${r.length} values.`)), V.value = i.join(", "), l(() => H.value = a), i.length > 0;
+		}
+		function Z() {
+			return !K.value || !V.value.trim() ? !1 : X(V.value, ue);
+		}
+		function Q(e, t = !0) {
+			if (!K.value) return;
+			let n = G.value[e];
+			if (n === void 0) return;
+			let r = G.value.filter((t, n) => n !== e);
+			O.value = r, U.value = !1, H.value = "", k("remove", n, e), Y(`Removed ${n}.`), t && l(() => {
+				let t = $();
+				(t[Math.min(e, t.length - 1)] ?? z.value)?.focus();
+			});
+		}
+		function ge() {
+			K.value && G.value.length && (O.value = [], U.value = !1, k("clear"), Y("Removed every value."), z.value?.focus());
+		}
+		function $() {
+			return Array.from(B.value?.querySelectorAll("[data-remove]") ?? []);
+		}
+		function _e(e) {
+			if (!K.value || e.isComposing) return;
+			let t = e.target, n = t.selectionStart === 0 && t.selectionEnd === 0;
+			e.key === "Enter" || e.key === "," ? (e.preventDefault(), Z()) : e.key === "Tab" && !e.shiftKey && V.value.trim() ? Z() : e.key === "Backspace" && !V.value && G.value.length ? (e.preventDefault(), U.value ? Q(G.value.length - 1, !1) : (U.value = !0, Y(`${G.value[G.value.length - 1]} selected. Press Backspace again to remove it.`))) : e.key === "ArrowLeft" && n && G.value.length ? (e.preventDefault(), U.value = !1, $().at(-1)?.focus()) : e.key === "Escape" && (V.value || H.value) ? (e.preventDefault(), V.value = "", H.value = "") : U.value = !1;
+		}
+		function ve(e, t) {
+			let n = $();
+			e.key === "Backspace" || e.key === "Delete" ? (e.preventDefault(), Q(t)) : e.key === "ArrowLeft" ? (e.preventDefault(), n[Math.max(t - 1, 0)]?.focus()) : e.key === "ArrowRight" ? (e.preventDefault(), (n[t + 1] ?? z.value)?.focus()) : e.key === "Home" ? (e.preventDefault(), n[0]?.focus()) : e.key === "End" && (e.preventDefault(), z.value?.focus());
+		}
+		function ye(e) {
+			if (!K.value) return;
+			let t = e.clipboardData?.getData("text") ?? "";
+			if (!A.test(t.trim())) return;
+			e.preventDefault();
+			let n = z.value, r = n?.selectionStart ?? V.value.length, i = n?.selectionEnd ?? V.value.length;
+			X(V.value.slice(0, r) + t + V.value.slice(i), A);
+		}
+		function be() {
+			U.value = !1, D.addOnBlur && Z();
+		}
+		function xe(e) {
+			D.disabled || e.target.closest("button") || z.value?.focus();
+		}
+		return ee(V, () => {
+			H.value = "", U.value = !1;
+		}), s({
+			focus: () => z.value?.focus(),
+			commit: () => !Z()
+		}), (t, s) => (d(), r("div", c(L.value, {
+			class: ["w-full", o.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-tag-input"
+		}), [
+			i("label", {
+				for: h(j),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				i("span", null, m(o.label), 1),
+				o.readonly ? (d(), r("span", x, "(read only)")) : n("", !0),
+				o.required ? (d(), r("span", ae, "*")) : n("", !0)
+			], 8, ie),
+			o.hint ? (d(), r("p", {
+				key: 0,
+				id: M,
+				class: "mb-2 text-base text-muted"
+			}, m(o.hint), 1)) : n("", !0),
+			i("div", {
+				class: u(["flex w-full items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
+					o.size === "small" ? "h-9" : "h-10.5",
+					o.readonly ? "bg-surface-muted" : "bg-background",
+					o.disabled ? "cursor-not-allowed" : "cursor-text",
+					J.value ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !o.disabled && "hover:border-accent-active"]
+				]]),
+				onClick: xe
+			}, [te(i("input", c({
+				id: h(j),
+				ref_key: "input",
+				ref: z
+			}, R.value, {
+				"onUpdate:modelValue": s[0] ||= (e) => V.value = e,
+				type: "text",
+				name: o.name,
+				placeholder: pe.value,
+				disabled: o.disabled,
+				readonly: o.readonly,
+				"aria-invalid": !!J.value || void 0,
+				"aria-required": o.required || void 0,
+				"aria-describedby": fe.value,
+				autocomplete: "off",
+				autocapitalize: "off",
+				spellcheck: "false",
+				class: ["h-full min-w-0 flex-1 rounded-10 bg-transparent pr-2 text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [o.mono && "font-mono", o.size === "small" ? "pl-4" : "pl-5"]],
+				onKeydown: _e,
+				onPaste: ye,
+				onBlur: be
+			}), null, 16, S), [[y, V.value]]), i("span", { class: u(["flex shrink-0 items-center text-heading", o.size === "small" ? "mr-1" : "mr-3"]) }, [K.value && o.showClear && G.value.length ? (d(), r("button", {
+				key: 0,
+				type: "button",
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", o.size === "small" ? "size-7" : "size-8"]),
+				"aria-label": "Clear all values",
+				title: "Clear all items",
+				onClick: ge
+			}, [a(h(b), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 2)) : n("", !0), i("button", {
+				type: "button",
+				class: u(["inline-flex items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none enabled:cursor-pointer enabled:hover:bg-surface-sunken disabled:cursor-not-allowed disabled:opacity-40", o.size === "small" ? "size-7" : "size-8"]),
+				disabled: !me.value,
+				"aria-label": V.value.trim() ? `Add ${V.value.trim()}` : "Add item",
+				title: V.value.trim() ? `Add “${V.value.trim()}”` : "Add item",
+				tabindex: "-1",
+				onMousedown: s[1] ||= ne(() => {}, ["prevent"]),
+				onClick: Z
+			}, [a(h(re), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 42, C)], 2)], 2),
+			J.value ? (d(), r("p", {
+				key: 1,
+				id: N,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, m(J.value), 1)) : n("", !0),
+			G.value.length ? (d(), r("ul", {
+				key: 2,
+				ref_key: "list",
+				ref: B,
+				role: "list",
+				"aria-label": o.label,
+				class: "mt-3 flex w-full flex-wrap gap-2"
+			}, [(d(!0), r(e, null, p(G.value, (e, t) => (d(), r("li", {
+				key: `${t}-${e}`,
+				class: u(["inline-flex h-8 max-w-full min-w-0 items-center justify-between gap-2 rounded-10 border px-3 text-base text-heading transition-all duration-300 hover:shadow-sm motion-reduce:transition-none", [o.mono && "font-mono", U.value && t === G.value.length - 1 ? "border-primary bg-accent-active ring-2 ring-ring" : "border-border bg-background"]]),
+				"data-testid": "ac-tag-input-chip"
+			}, [i("span", {
+				class: "truncate",
+				title: e
+			}, m(e), 9, se), K.value ? (d(), r("button", {
+				key: 0,
+				type: "button",
+				"data-remove": "",
+				class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+				"aria-label": `Remove ${e}`,
+				title: `Remove ${e}`,
+				onClick: (e) => Q(t),
+				onKeydown: (e) => ve(e, t)
+			}, [a(h(b), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 40, ce)) : n("", !0)], 2))), 128))], 8, oe)) : n("", !0),
+			G.value.length || o.maxItems !== void 0 ? (d(), r("div", le, [G.value.length ? (d(), r("span", w, m(G.value.length) + " " + m(G.value.length === 1 ? "item" : "items"), 1)) : n("", !0), o.maxItems === void 0 ? n("", !0) : (d(), r("span", {
+				key: 1,
+				id: P,
+				class: u(["ml-auto", q.value ? "text-danger-strong" : de.value && "text-warning-strong"])
+			}, m(G.value.length) + " / " + m(o.maxItems) + " items ", 3))])) : n("", !0),
+			K.value ? (d(), r("p", {
+				key: 4,
+				id: F,
+				class: "sr-only"
+			}, "Press Enter or comma to add a value. Backspace in the empty input removes the last one.")) : n("", !0),
+			i("p", T, m(W.value), 1)
+		], 16));
+	}
+});
+//#endregion
+export { E as default };

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

@@ -1,9 +1,9 @@
 export interface Props {
-    /** Floating label. It rests on the first line and rises on focus or when filled. */
+    /** Label above the field. Pass `placeholder` for an example value inside it. */
     label: string;
     /** Native `name` attribute. */
     name?: string;
-    /** Visible height in lines. With `autoResize` it's the starting (minimum) height. */
+    /** 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. */
     autoResize?: boolean;
@@ -17,11 +17,11 @@ export interface Props {
     required?: boolean;
     /** Disables the field. */
     disabled?: boolean;
-    /** Read-only field with a gray background. */
+    /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
-    /** Helper text under the field (hidden while `errorMsg` is set). */
+    /** Help text between the label and the field. */
     hint?: string;
 }
 type __VLS_Props = Props;

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

@@ -1,7 +1,13 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, nextTick as c, normalizeClass as l, onMounted as u, openBlock as d, ref as f, toDisplayString as p, unref as m, useId as h, useModel as g, vModelText as _, watch as v, withDirectives as y } from "vue";
-import { CircleAlert as b } from "@lucide/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, 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";
 //#region src/lib/components/AcTextarea.vue?vue&type=script&setup=true&lang.ts
-var x = { class: "relative" }, S = [
+var x = ["for"], S = {
+	key: 0,
+	class: "text-muted"
+}, C = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, w = ["id"], T = [
 	"id",
 	"name",
 	"rows",
@@ -11,22 +17,19 @@ var x = { class: "relative" }, S = [
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], C = ["for"], w = {
-	key: 0,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, T = {
-	key: 0,
-	class: "mt-1.5 flex items-start gap-3"
-}, E = ["id"], D = ["id"], O = {
-	key: 2,
+], E = {
+	key: 1,
+	class: "mt-1 flex items-start gap-3"
+}, D = ["id"], O = {
+	key: 1,
 	class: "flex-1"
-}, k = ["id"], A = /*@__PURE__*/ o({
+}, k = ["id"], A = /*@__PURE__*/ a({
+	inheritAttrs: !1,
 	__name: "AcTextarea",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ o({
 		label: {},
 		name: { default: "" },
-		rows: { default: 4 },
+		rows: { default: void 0 },
 		autoResize: {
 			type: Boolean,
 			default: !1
@@ -56,64 +59,83 @@ var x = { class: "relative" }, S = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o, { expose: s }) {
-		let A = o, j = g(o, "modelValue"), M = h(), N = f(null), P = f(!1), F = e(() => (j.value ?? "").length), I = e(() => A.maxlength !== void 0 && F.value >= A.maxlength), L = e(() => [A.errorMsg || A.hint ? `${M}-msg` : "", A.maxlength === void 0 ? "" : `${M}-count`].filter(Boolean).join(" ") || void 0);
-		function R() {
-			let e = N.value;
+	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;
+			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`
+		].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 = A.rows * n + r, a = A.maxRows > 0 ? A.maxRows * n + r : Infinity;
+			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;
 			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`, P.value = o > a;
+			e.style.height = `${Math.min(Math.max(o, i), a)}px`, L.value = o > a;
 		}
-		return v(j, () => c(R)), v(() => [
+		return y(j, () => c(H)), y(() => [
 			A.autoResize,
 			A.rows,
 			A.maxRows
 		], () => {
-			!A.autoResize && N.value && (N.value.style.height = ""), c(R);
-		}), u(R), s({ focus: () => N.value?.focus() }), (e, s) => (d(), n("div", {
-			class: l(["w-full", o.disabled && "opacity-60"]),
+			!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, {
+			class: ["w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-textarea"
-		}, [r("div", x, [y(r("textarea", {
-			id: m(M),
-			ref_key: "field",
-			ref: N,
-			"onUpdate:modelValue": s[0] ||= (e) => j.value = e,
-			name: o.name,
-			rows: o.rows,
-			maxlength: o.maxlength,
-			disabled: o.disabled,
-			readonly: o.readonly,
-			required: o.required,
-			"aria-invalid": !!o.errorMsg || void 0,
-			"aria-describedby": L.value,
-			placeholder: " ",
-			class: l(["peer block w-full rounded-6 border bg-surface px-3 py-2 text-base text-heading shadow-xs transition-[border-color,box-shadow] duration-150 outline-none placeholder:text-transparent disabled:cursor-not-allowed disabled:bg-surface-muted read-only:bg-surface-muted read-only:shadow-none", [
-				o.mono && "font-mono text-xs leading-5",
-				o.autoResize ? P.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
-				o.errorMsg ? "border-red-60 focus:border-danger focus:shadow-[0_0_0_3px_var(--color-red-90)]" : "border-border hover:border-border-dark focus:focus-ring"
-			]])
-		}, null, 10, S), [[_, j.value]]), r("label", {
-			for: m(M),
-			class: l(["pointer-events-none absolute top-0 left-2.5 -translate-y-1/2 rounded-2 bg-surface px-1 text-xs font-medium text-label transition-all duration-150 ease-out peer-placeholder-shown:top-4.5 peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-muted peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium peer-focus:text-primary-20 peer-read-only:bg-linear-to-b peer-read-only:from-surface peer-read-only:from-50% peer-read-only:to-surface-muted peer-read-only:to-50% peer-disabled:bg-linear-to-b peer-disabled:from-surface peer-disabled:from-50% peer-disabled:to-surface-muted peer-disabled:to-50%", o.errorMsg && "text-red-30! peer-focus:text-red-30!"])
-		}, [i(p(o.label), 1), o.required ? (d(), n("span", w, " *")) : t("", !0)], 10, C)]), o.errorMsg || o.hint || o.maxlength !== void 0 ? (d(), n("div", T, [o.errorMsg ? (d(), n("p", {
-			key: 0,
-			id: `${m(M)}-msg`,
-			class: "flex min-w-0 flex-1 items-center gap-1 text-xs text-red-30"
-		}, [a(m(b), {
-			class: "size-3.5 shrink-0",
-			"aria-hidden": "true"
-		}), i(" " + p(o.errorMsg), 1)], 8, E)) : o.hint ? (d(), n("p", {
-			key: 1,
-			id: `${m(M)}-msg`,
-			class: "min-w-0 flex-1 text-xs text-muted"
-		}, p(o.hint), 9, D)) : (d(), n("span", O)), o.maxlength === void 0 ? t("", !0) : (d(), n("p", {
-			key: 3,
-			id: `${m(M)}-count`,
-			class: l(["shrink-0 text-xs tabular-nums", I.value ? "font-medium text-red-30" : "text-muted"])
-		}, [s[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(p(F.value) + " / " + p(o.maxlength), 1)], 10, k))])) : t("", !0)], 2));
+		}), [
+			r("label", {
+				for: m(M),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				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),
+			a.hint ? (d(), n("p", {
+				key: 0,
+				id: `${m(M)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, p(a.hint), 9, w)) : t("", !0),
+			b(r("textarea", s({
+				id: m(M),
+				ref_key: "field",
+				ref: I
+			}, F.value, {
+				"onUpdate:modelValue": o[0] ||= (e) => j.value = e,
+				name: a.name,
+				rows: R.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",
+					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", {
+				key: 0,
+				id: `${m(M)}-msg`,
+				class: "min-w-0 flex-1 text-base text-danger-strong",
+				role: "alert"
+			}, p(a.errorMsg), 9, D)) : (d(), n("span", O)), 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)
+		], 16));
 	}
 });
 //#endregion