@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -4,28 +4,28 @@ var b = {
 	"data-ac-ds": "",
 	"data-testid": "ac-tabs"
 }, x = {
-	role: "tablist",
-	class: "flex gap-6 overflow-x-auto overflow-y-hidden border-b border-border px-1 text-base font-medium [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-}, S = {
 	key: 0,
 	role: "tabpanel",
 	class: "pt-6"
-}, C = /*@__PURE__*/ s({
+}, S = /*@__PURE__*/ s({
 	__name: "AcTabs",
-	props: /*@__PURE__*/ l({ items: {} }, {
+	props: /*@__PURE__*/ l({
+		items: {},
+		variant: { default: "soft" }
+	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
 	setup(s) {
-		let l = s, C = _(s, "modelValue"), w = c()?.appContext, T = w?.components.RouterLink, E = w?.config.globalProperties.$router, D = t(() => {
-			if (!E) return "";
-			let e = E.currentRoute.value.path, t = "", n = -1;
+		let l = s, S = _(s, "modelValue"), C = c()?.appContext, w = C?.components.RouterLink, T = C?.config.globalProperties.$router, E = t(() => {
+			if (!T) return "";
+			let e = T.currentRoute.value.path, t = "", n = -1;
 			for (let r of l.items) {
 				if (r.to === void 0 || r.disabled) continue;
 				let i;
 				try {
-					i = E.resolve(r.to).path;
+					i = T.resolve(r.to).path;
 				} catch {
 					continue;
 				}
@@ -35,38 +35,53 @@ var b = {
 			}
 			return t;
 		});
-		v(D, (e) => e && (C.value = e), { immediate: !0 });
-		function O(e) {
-			return e.to !== void 0 && T && !e.disabled ? T : e.href || typeof e.to == "string" ? "a" : "button";
+		v(E, (e) => e && (S.value = e), { immediate: !0 });
+		function D(e) {
+			return e.to !== void 0 && w && !e.disabled ? w : e.href || typeof e.to == "string" ? "a" : "button";
 		}
-		function k(e) {
-			let t = O(e), n = { "data-testid": e.testid };
-			return t === T ? n.to = e.to : t === "a" ? e.disabled ? n["aria-disabled"] = "true" : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
+		function O(e) {
+			let t = D(e), n = { "data-testid": e.testid };
+			return t === w ? n.to = e.to : t === "a" ? e.disabled ? n["aria-disabled"] = "true" : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
 		}
-		function A(e, t) {
+		function k(e, t) {
 			if (e.disabled) {
 				t.preventDefault();
 				return;
 			}
-			C.value = e.key;
+			S.value = e.key;
+		}
+		function A(e) {
+			let t = S.value === e.key;
+			return l.variant === "soft" ? ["rounded-t-8 px-3 py-2", t ? "border-primary bg-primary/4 text-primary-strong" : "border-transparent text-muted hover:bg-accent/60 hover:text-heading"] : ["pt-1 pb-3", t ? "border-primary text-primary-strong" : "border-transparent text-muted hover:border-border hover:text-heading"];
 		}
-		return (t, c) => (f(), i("div", b, [a("div", x, [(f(!0), i(e, null, p(s.items, (e) => (f(), n(h(O(e)), u({ key: e.key }, { ref_for: !0 }, k(e), {
+		return (t, c) => (f(), i("div", b, [a("div", {
+			role: "tablist",
+			class: d(["flex border-b border-border px-1 text-base font-medium", s.variant === "soft" ? "flex-wrap gap-1" : "gap-6 overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"])
+		}, [(f(!0), i(e, null, p(s.items, (e) => (f(), n(h(D(e)), u({ key: e.key }, { ref_for: !0 }, O(e), {
 			role: "tab",
-			"aria-selected": C.value === e.key,
-			class: ["relative inline-flex shrink-0 cursor-pointer items-center gap-2 border-b-2 pt-1 pb-3 whitespace-nowrap no-underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40", C.value === e.key ? "border-primary text-primary-strong" : "border-transparent text-muted hover:border-border hover:text-heading"],
-			onClick: (t) => A(e, t)
+			"aria-selected": S.value === e.key,
+			class: ["relative inline-flex shrink-0 cursor-pointer items-center gap-2 border-b-2 whitespace-nowrap no-underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40", A(e)],
+			onClick: (t) => k(e, t)
 		}), {
-			default: y(() => [o(g(e.label) + " ", 1), e.count === void 0 ? r("", !0) : (f(), i("span", {
-				key: 0,
-				class: d(["inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs leading-none font-medium tabular-nums", C.value === e.key ? "bg-primary/10 text-primary-strong" : "bg-surface-sunken text-muted"])
-			}, g(e.count), 3))]),
+			default: y(() => [
+				e.icon ? (f(), n(h(e.icon), {
+					key: 0,
+					class: "-mr-0.5 size-3.5 shrink-0",
+					"aria-hidden": "true"
+				})) : r("", !0),
+				o(" " + g(e.label) + " ", 1),
+				e.count === void 0 ? r("", !0) : (f(), i("span", {
+					key: 1,
+					class: d(["inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs leading-none font-medium tabular-nums", S.value === e.key ? "bg-primary/10 text-primary-strong" : "bg-surface-sunken text-muted"])
+				}, g(e.count), 3))
+			]),
 			_: 2
 		}, 1040, [
 			"aria-selected",
 			"class",
 			"onClick"
-		]))), 128))]), t.$slots.default ? (f(), i("div", S, [m(t.$slots, "default", { active: C.value })])) : r("", !0)]));
+		]))), 128))], 2), t.$slots.default ? (f(), i("div", x, [m(t.$slots, "default", { active: S.value })])) : r("", !0)]));
 	}
 });
 //#endregion
-export { C as default };
+export { S as default };

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

@@ -27,9 +27,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     label: string;
     color: Tone | "neutral";
     rounded: boolean;
-    removable: boolean;
     keyLabel: string;
     valueLabel: string;
+    removable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -3,15 +3,15 @@ export interface Props {
     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". */
+    /** 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;
-    /** `small` 36px or `normal` 40px tall when empty; the field grows as values wrap. */
+    /** Field height: `small` 36px or `normal` 42px. Values show as chips under it. */
     size?: "small" | "normal";
-    /** Most values allowed. The count shows under the field and adding more shows an error. */
+    /** 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;
@@ -23,13 +23,13 @@ export interface Props {
     showClear?: boolean;
     /** Adds the typed text when the input loses focus, so a value isn't lost when people click Save. */
     addOnBlur?: boolean;
-    /** Shows values and the input in the monospace font, for IPs, CIDRs and resource names. */
+    /** 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 values on a muted fill, without remove buttons or the text input. Was `is-read-only` in cloud-ui. */
+    /** 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;

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

@@ -1,18 +1,14 @@
-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";
+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 ce = ["for"], y = {
+var ie = ["for"], x = {
 	key: 0,
 	class: "font-normal text-muted"
-}, b = {
+}, ae = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, x = ["aria-label"], S = ["title"], le = [
-	"aria-label",
-	"onClick",
-	"onKeydown"
-], C = [
+}, S = [
 	"id",
 	"name",
 	"placeholder",
@@ -21,19 +17,25 @@ var ce = ["for"], y = {
 	"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 = {
+], 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"
-}, D = /*@__PURE__*/ s({
+}, E = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcTagInput",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ s({
 		label: {},
 		name: { default: "" },
 		placeholder: { default: "" },
@@ -81,34 +83,34 @@ var ce = ["for"], y = {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c([
+	emits: /*@__PURE__*/ s([
 		"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;
+	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;
-		}), 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);
+		}), 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) {
-			G.value = "", u(() => G.value = e);
+			W.value = "", l(() => W.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) || "";
+			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 = [...K.value], r = [], i = [], a = "";
+			let n = [...G.value], r = [], i = [], a = "";
 			for (let o of e.split(t)) {
-				let e = O.transform(o);
+				let e = D.transform(o);
 				if (!e) continue;
 				let t = he(e, n);
 				if (t) {
@@ -117,175 +119,171 @@ var ce = ["for"], y = {
 				}
 				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;
+			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 !q.value || !H.value.trim() ? !1 : X(H.value, de);
+			return !K.value || !V.value.trim() ? !1 : X(V.value, ue);
 		}
 		function Q(e, t = !0) {
-			if (!q.value) return;
-			let n = K.value[e];
+			if (!K.value) return;
+			let n = G.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 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)] ?? B.value)?.focus();
+				(t[Math.min(e, t.length - 1)] ?? z.value)?.focus();
 			});
 		}
 		function ge() {
-			q.value && K.value.length && (k.value = [], W.value = !1, A("clear"), Y("Removed every value."), B.value?.focus());
+			K.value && G.value.length && (O.value = [], U.value = !1, k("clear"), Y("Removed every value."), z.value?.focus());
 		}
 		function $() {
-			return Array.from(V.value?.querySelectorAll("[data-remove]") ?? []);
+			return Array.from(B.value?.querySelectorAll("[data-remove]") ?? []);
 		}
 		function _e(e) {
-			if (!q.value || e.isComposing) return;
+			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 && 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;
+			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] ?? B.value)?.focus()) : e.key === "Home" ? (e.preventDefault(), n[0]?.focus()) : e.key === "End" && (e.preventDefault(), B.value?.focus());
+			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 (!q.value) return;
+			if (!K.value) return;
 			let t = e.clipboardData?.getData("text") ?? "";
-			if (!j.test(t.trim())) return;
+			if (!A.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);
+			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() {
-			W.value = !1, O.addOnBlur && Z();
+			U.value = !1, D.addOnBlur && Z();
 		}
 		function xe(e) {
-			e.target.closest("button") || B.value?.focus();
+			D.disabled || e.target.closest("button") || z.value?.focus();
 		}
-		return re(H, () => {
-			U.value = "", W.value = !1;
-		}), c({
-			focus: () => B.value?.focus(),
+		return ee(V, () => {
+			H.value = "", U.value = !1;
+		}), s({
+			focus: () => z.value?.focus(),
 			commit: () => !Z()
-		}), (t, c) => (f(), r("div", l(R.value, {
-			class: ["w-full", s.disabled && "opacity-50"],
+		}), (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: g(M),
+				for: h(j),
 				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", {
+				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: N,
+				id: M,
 				class: "mb-2 text-base text-muted"
-			}, h(s.hint), 1)) : n("", !0),
+			}, m(o.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"]
+				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
-			}, [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),
+			}, [te(i("input", c({
+				id: h(j),
 				ref_key: "input",
-				ref: B
-			}, z.value, {
-				"onUpdate:modelValue": c[0] ||= (e) => H.value = e,
+				ref: z
+			}, R.value, {
+				"onUpdate:modelValue": s[0] ||= (e) => V.value = e,
 				type: "text",
-				name: s.name,
-				placeholder: me.value,
-				disabled: s.disabled,
-				readonly: s.readonly,
+				name: o.name,
+				placeholder: pe.value,
+				disabled: o.disabled,
+				readonly: o.readonly,
 				"aria-invalid": !!J.value || void 0,
-				"aria-required": s.required || void 0,
-				"aria-describedby": pe.value,
+				"aria-required": o.required || void 0,
+				"aria-describedby": fe.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"]],
+				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, C), [[ne, H.value]]), q.value && (H.value.trim() || s.showClear && K.value.length) ? (f(), r("span", ue, [H.value.trim() ? (f(), r("button", {
+			}), 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: "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()}”`,
+				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: c[1] ||= ae(() => {}, ["prevent"]),
+				onMousedown: s[1] ||= ne(() => {}, ["prevent"]),
 				onClick: Z
-			}, [o(g(se), {
+			}, [a(h(re), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 40, w)) : n("", !0), s.showClear && K.value.length ? (f(), r("button", {
+			})], 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",
-				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), {
+				"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"
-			})])) : 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", {
+			})], 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: 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)
+			i("p", T, m(W.value), 1)
 		], 16));
 	}
 });
 //#endregion
-export { D as default };
+export { E as default };

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

@@ -3,7 +3,7 @@ export interface Props {
     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;