@ac-design/design-system 1.0.2 → 2.0.0

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

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

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

@@ -1,5 +1,5 @@
 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;
@@ -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,14 @@
-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, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, onMounted as d, openBlock as f, ref as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelText as y, watch as b, withDirectives as x } from "vue";
+import { CircleAlert as S } from "@lucide/vue";
 //#region src/lib/components/AcTextarea.vue?vue&type=script&setup=true&lang.ts
-var x = { class: "relative" }, S = [
+var C = ["for"], w = {
+	key: 0,
+	class: "font-normal text-muted"
+}, T = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, E = ["id"], D = [
 	"id",
 	"name",
 	"rows",
@@ -11,17 +18,14 @@ var x = { class: "relative" }, S = [
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], C = ["for"], w = {
-	key: 0,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, T = {
-	key: 0,
+], O = {
+	key: 1,
 	class: "mt-1.5 flex items-start gap-3"
-}, E = ["id"], D = ["id"], O = {
-	key: 2,
+}, k = ["id"], A = {
+	key: 1,
 	class: "flex-1"
-}, k = ["id"], A = /*@__PURE__*/ o({
+}, j = ["id"], M = /*@__PURE__*/ o({
+	inheritAttrs: !1,
 	__name: "AcTextarea",
 	props: /*@__PURE__*/ s({
 		label: {},
@@ -57,64 +61,85 @@ var x = { class: "relative" }, S = [
 	}),
 	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;
-			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 M = o, N = v(o, "modelValue"), P = _(), F = g(), I = e(() => ({
+			class: F.class,
+			style: F.style
+		})), L = e(() => {
+			let { class: e, style: t, ...n } = F;
+			return n;
+		}), R = p(null), z = p(!1), B = e(() => (N.value ?? "").length), V = e(() => M.maxlength !== void 0 && B.value >= M.maxlength), H = e(() => [
+			M.hint && `${P}-hint`,
+			M.errorMsg && `${P}-msg`,
+			M.maxlength !== void 0 && `${P}-count`
+		].filter(Boolean).join(" ") || void 0);
+		function U() {
+			let e = R.value;
+			if (!e || !M.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 = M.rows * n + r, a = M.maxRows > 0 ? M.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`, z.value = o > a;
 		}
-		return v(j, () => c(R)), v(() => [
-			A.autoResize,
-			A.rows,
-			A.maxRows
+		return b(N, () => l(U)), b(() => [
+			M.autoResize,
+			M.rows,
+			M.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"]),
+			!M.autoResize && R.value && (R.value.style.height = ""), l(U);
+		}), d(U), s({ focus: () => R.value?.focus() }), (e, s) => (f(), n("div", c(I.value, {
+			class: ["w-full", o.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: h(P),
+				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+			}, [
+				r("span", null, m(o.label), 1),
+				o.readonly ? (f(), n("span", w, "(read only)")) : t("", !0),
+				o.required ? (f(), n("span", T, "*")) : t("", !0)
+			], 8, C),
+			o.hint ? (f(), n("p", {
+				key: 0,
+				id: `${h(P)}-hint`,
+				class: "mb-2 text-base text-muted"
+			}, m(o.hint), 9, E)) : t("", !0),
+			x(r("textarea", c({
+				id: h(P),
+				ref_key: "field",
+				ref: R
+			}, L.value, {
+				"onUpdate:modelValue": s[0] ||= (e) => N.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": H.value,
+				class: ["block w-full rounded-10 border px-4 py-2.5 text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
+					o.readonly ? "bg-surface-muted" : "bg-background",
+					o.mono && "font-mono text-xs leading-5",
+					o.autoResize ? z.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
+					o.errorMsg ? "border-danger/60 focus:border-danger focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus:focus-ring", !o.disabled && "hover:border-accent-active"]
+				]]
+			}), null, 16, D), [[y, N.value]]),
+			o.errorMsg || o.maxlength !== void 0 ? (f(), n("div", O, [o.errorMsg ? (f(), n("p", {
+				key: 0,
+				id: `${h(P)}-msg`,
+				class: "flex min-w-0 flex-1 items-center gap-1.5 text-base text-danger-strong",
+				role: "alert"
+			}, [a(h(S), {
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			}), i(" " + m(o.errorMsg), 1)], 8, k)) : (f(), n("span", A)), o.maxlength === void 0 ? t("", !0) : (f(), n("p", {
+				key: 2,
+				id: `${h(P)}-count`,
+				class: u(["shrink-0 text-xs tabular-nums", V.value ? "font-medium text-danger-strong" : "text-muted"])
+			}, [s[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(m(B.value) + " / " + m(o.maxlength), 1)], 10, j))])) : t("", !0)
+		], 16));
 	}
 });
 //#endregion
-export { A as default };
+export { M as default };

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

@@ -5,7 +5,7 @@ import { Monitor as p, Moon as m, Sun as h } from "@lucide/vue";
 var g = {
 	role: "radiogroup",
 	"aria-label": "Theme",
-	class: "inline-flex items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5",
+	class: "inline-flex items-center gap-1 rounded-10 bg-surface-sunken p-1",
 	"data-ac-ds": "",
 	"data-testid": "ac-theme-mode"
 }, _ = [
@@ -48,10 +48,10 @@ var g = {
 			"aria-checked": f(C) === e.value,
 			"aria-label": o.display === "icons" ? `${e.label} theme` : void 0,
 			title: o.display === "icons" ? `${e.label} theme` : void 0,
-			class: s(["inline-flex h-6.5 cursor-pointer items-center justify-center gap-1.5 rounded-6 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [o.display === "icons" ? "w-7" : "px-2.5", f(C) === e.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted hover:text-heading"]]),
+			class: s(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [o.display === "icons" ? "w-7" : "px-3", f(C) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
 			onClick: (t) => E(e.value)
 		}, [(c(), n(u(e.icon), {
-			class: "size-3.5",
+			class: "size-4",
 			"aria-hidden": "true"
 		})), o.display === "labels" ? (c(), i("span", v, d(e.label), 1)) : r("", !0)], 10, _)), 64))]));
 	}

package/dist/lib/components/AcTimePicker.js

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

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

@@ -0,0 +1,65 @@
+export interface Props {
+    /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
+    label?: string;
+    /** Text shown in the field while there's no value. */
+    placeholder?: string;
+    /** `24` shows 00–23; `12` shows 1–12 with an AM/PM column. `v-model` is always 24-hour. Cloud `hour12`. */
+    hourCycle?: 12 | 24;
+    /** Gap between the minutes on offer, e.g. `5` or `15`. */
+    minuteStep?: number;
+    /** Adds a seconds column; `v-model` becomes `HH:mm:ss`. */
+    showSeconds?: boolean;
+    /** Earliest choosable time, `HH:mm` or `HH:mm:ss`. Earlier hours and minutes are greyed out. */
+    min?: string;
+    /** Latest choosable time, `HH:mm` or `HH:mm:ss`. Must be after `min`; windows across midnight aren't supported. */
+    max?: string;
+    /** Shows a clear button when there is a value. */
+    clearable?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** `small` 36px or `normal` 40px tall. */
+    size?: "small" | "normal";
+    /** Adds a hidden input with this name so plain form posts include the value. */
+    name?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** `"14:05"`, or `"14:05:30"` with `show-seconds`, always 24-hour. `null` when empty. */
+    modelValue?: string | null;
+    /** Whether the popover is open. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the field. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    max: string;
+    min: string;
+    name: string;
+    size: "small" | "normal";
+    hint: string;
+    placeholder: string;
+    clearable: boolean;
+    errorMsg: string;
+    showSeconds: boolean;
+    hourCycle: 12 | 24;
+    minuteStep: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;