@ac-design/design-system 2.3.0 → 2.4.0

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

@@ -7,10 +7,13 @@ var be = {
 	key: 0,
 	class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 }, xe = {
-	key: 0,
+	key: 1,
+	class: "text-muted"
+}, Se = {
+	key: 2,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, Se = [
+}, Ce = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -19,43 +22,44 @@ var be = {
 	"aria-describedby",
 	"aria-disabled",
 	"aria-invalid",
+	"aria-readonly",
 	"aria-required",
 	"aria-activedescendant",
 	"aria-busy"
-], Ce = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-2" }, we = { class: "truncate" }, Te = [
+], we = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-2" }, Te = { class: "truncate" }, Ee = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], Ee = {
+], De = {
 	key: 2,
 	class: "truncate"
-}, De = {
+}, Oe = {
 	key: 3,
 	class: "truncate text-muted"
-}, Oe = { class: "flex shrink-0 items-center gap-1 text-muted" }, ke = ["disabled"], Ae = {
+}, ke = { class: "flex shrink-0 items-center gap-1 text-muted" }, Ae = ["disabled"], je = {
 	class: "inline-flex rounded-full p-1 transition-colors hover:bg-accent-hover hover:text-primary",
 	"aria-hidden": "true"
-}, je = {
+}, Me = {
 	key: 0,
 	class: "border-b border-border p-3"
-}, Me = ["aria-activedescendant"], Ne = ["aria-multiselectable", "aria-labelledby"], Pe = {
+}, Ne = ["aria-activedescendant"], Pe = ["aria-multiselectable", "aria-labelledby"], Fe = {
 	key: 0,
 	role: "presentation",
 	class: "px-4 pt-2 pb-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-}, Fe = [
+}, Ie = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onMouseenter",
 	"onClick"
-], Ie = { class: "min-w-0 flex-1" }, Le = { class: "block truncate" }, Re = {
+], Le = { class: "min-w-0 flex-1" }, Re = { class: "block truncate" }, ze = {
 	key: 0,
 	class: "block truncate text-xs font-normal text-muted"
-}, ze = ["id"], Be = { class: "min-w-0 flex-1 truncate" }, Ve = {
+}, Be = ["id"], Ve = { class: "min-w-0 flex-1 truncate" }, He = {
 	key: 1,
 	role: "presentation",
 	class: "px-4 py-3 text-center text-base text-muted"
-}, He = /*@__PURE__*/ d({
+}, Ue = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "AcSelect",
 	props: /*@__PURE__*/ f({
@@ -106,6 +110,37 @@ var be = {
 		errorMsg: { default: "" },
 		hint: { default: "" },
 		size: { default: "normal" },
+		variant: { default: "outline" },
+		highlight: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		validateRequired: {
+			type: Boolean,
+			default: !1
+		},
+		hideUnknownValues: {
+			type: Boolean,
+			default: !1
+		},
+		emptyValue: { default: null },
+		initEmptyArray: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "" },
+		hideRefreshWhenDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		looseChips: {
+			type: Boolean,
+			default: !1
+		},
 		noResultText: { default: "No results" },
 		placement: { default: "bottom" }
 	}, {
@@ -122,47 +157,90 @@ var be = {
 		"create",
 		"remove",
 		"search",
-		"refresh"
+		"refresh",
+		"change"
 	], ["update:modelValue", "update:open"]),
-	setup(d, { expose: f, emit: He }) {
-		let S = d, C = He, Ue = ue(), w = le(d, "modelValue"), T = le(d, "open"), E = ce(), D = se(), We = a(() => ({
-			class: D.class,
-			style: D.style
-		})), Ge = a(() => {
-			let { class: e, style: t, ...n } = D;
+	setup(d, { expose: f, emit: Ue }) {
+		let S = d, C = Ue, w = ue(), T = le(d, "modelValue"), E = (e) => T.value = e, D = le(d, "open"), We = {
+			xs: {
+				field: "min-h-[26px] pr-1 pl-2 text-xs",
+				chips: ["py-0", "py-1"],
+				custom: "py-1"
+			},
+			compact: {
+				field: "min-h-8 pr-1 pl-3 text-base",
+				chips: ["py-1", "py-1"],
+				custom: "py-[5px]"
+			},
+			xsmall: {
+				field: "min-h-[34px] pr-1 pl-3 text-base",
+				chips: ["py-1", "py-1.5"],
+				custom: "py-1.5"
+			},
+			small: {
+				field: "min-h-9 pr-1 pl-4 text-base",
+				chips: ["py-1", "py-1.5"],
+				custom: "py-[7px]"
+			},
+			medium: {
+				field: "min-h-[38px] pr-1 pl-4 text-base",
+				chips: ["py-1", "py-2"],
+				custom: "py-2"
+			},
+			normal: {
+				field: "min-h-10.5 pr-1 pl-5 text-base",
+				chips: ["py-1.5", "py-2.5"],
+				custom: "py-2.5"
+			},
+			large: {
+				field: "min-h-[50px] pr-1 pl-6 text-lg",
+				chips: ["py-1.5", "py-3"],
+				custom: "py-3"
+			}
+		}, O = ce(), k = se(), Ge = a(() => ({
+			class: k.class,
+			style: k.style
+		})), Ke = a(() => {
+			let { class: e, style: t, ...n } = k;
 			return n;
-		}), O = `${E}-list`, k = `${E}-label`, Ke = `${E}-hint`, qe = `${E}-msg`, Je = h(null), A = h(null), j = h(null), Ye = h(null), M = h(""), N = h(-1), P = h({
+		}), A = `${O}-list`, qe = `${O}-label`, Je = `${O}-hint`, Ye = `${O}-msg`, Xe = h(null), j = h(null), M = h(null), Ze = h(null), N = h(""), P = h(-1), F = h({
 			left: 0,
 			width: 0,
 			maxHeight: 288
-		}), F = a(() => {
-			let e = w.value;
-			return e == null || e === "" ? [] : Array.isArray(e) ? e : [e];
-		}), I = (e, t) => {
+		}), I = a(() => {
+			let e = T.value;
+			if (e == null || e === "") return [];
+			let t = Array.isArray(e) ? e : [e];
+			return S.hideUnknownValues ? t.filter((e) => S.options.some((t) => L(t.value, e))) : t;
+		}), L = (e, t) => {
 			let n = S.by;
 			return typeof n == "function" ? n(e, t) : n && e && t && typeof e == "object" && typeof t == "object" ? e[n] === t[n] : e === t;
-		}, L = (e) => {
+		}, R = (e) => {
 			let t = S.by;
 			return String(typeof t == "string" && e && typeof e == "object" ? e[t] : e);
-		}, Xe = (e, t) => {
+		}, Qe = (e, t) => {
 			let n = S.by;
 			return e && typeof e == "object" ? typeof n == "string" ? String(e[n]) : `i${t}` : String(e);
-		}, R = (e) => F.value.some((t) => I(t, e.value)), z = a(() => F.value.map((e) => S.options.find((t) => I(t.value, e)) ?? {
+		}, z = (e) => I.value.some((t) => L(t, e.value)), B = a(() => I.value.map((e) => S.options.find((t) => L(t.value, e)) ?? {
 			value: e,
-			label: L(e)
-		})), B = a(() => F.value.length > 0), Ze = (e) => {
+			label: R(e)
+		})), V = a(() => I.value.length > 0), H = h(""), U = a(() => H.value || S.errorMsg);
+		function $e() {
+			S.validateRequired && S.required && !V.value ? H.value = `This field is required. Please select ${S.multiple ? "at least one option" : "an option"}.` : H.value = "";
+		}
+		let et = (e) => {
 			if (!e.some((e) => e.group)) return e;
 			let t = [];
 			return e.forEach((e) => {
 				let n = e.group ?? "";
 				t.includes(n) || t.push(n);
 			}), [...e].sort((e, n) => t.indexOf(e.group ?? "") - t.indexOf(n.group ?? ""));
-		}, V = a(() => {
-			let e = M.value.trim().toLowerCase();
-			return Ze(e ? S.options.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)) : S.options);
-		}), Qe = a(() => {
+		}, W = a(() => {
+			let e = N.value.trim().toLowerCase();
+			return et(e ? S.options.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)) : S.options);
+		}), tt = a(() => {
 			let e = [];
-			return V.value.forEach((t, n) => {
+			return W.value.forEach((t, n) => {
 				let r = t.group ?? "", i = e.find((e) => e.name === r);
 				i || e.push(i = {
 					name: r,
@@ -172,16 +250,16 @@ var be = {
 					index: n
 				});
 			}), e;
-		}), H = (e) => `${E}-opt-${e}`, U = a(() => M.value.trim()), W = a(() => {
-			let e = U.value.toLowerCase();
+		}), G = (e) => `${O}-opt-${e}`, K = a(() => N.value.trim()), q = a(() => {
+			let e = K.value.toLowerCase();
 			if (!S.creatable || !S.searchable || !e) return !1;
-			let t = S.options.some((t) => t.label.toLowerCase() === e || L(t.value).toLowerCase() === e), n = F.value.some((t) => L(t).toLowerCase() === e);
+			let t = S.options.some((t) => t.label.toLowerCase() === e || R(t.value).toLowerCase() === e), n = I.value.some((t) => R(t).toLowerCase() === e);
 			return !t && !n;
-		}), G = a(() => V.value.length + +!!W.value - 1), K = a(() => V.value.length), $e = () => {
-			let e = A.value;
+		}), J = a(() => W.value.length + +!!q.value - 1), Y = a(() => W.value.length), nt = () => {
+			let e = j.value;
 			if (!e) return;
 			let n = e.getBoundingClientRect(), r = t(), i = r.bottom - n.bottom - 4 - 8, a = n.top - r.top - 4 - 8, [o, s] = S.placement === "top" ? [a, i] : [i, a], c = o < 180 && s > o, l = S.placement === "top" ? !c : c;
-			P.value = l ? {
+			F.value = l ? {
 				bottom: r.bottom - n.top + 4,
 				left: n.left - r.left,
 				width: n.width,
@@ -192,149 +270,167 @@ var be = {
 				width: n.width,
 				maxHeight: Math.min(288, i)
 			};
-		}, q = (e = 0, t = 1) => {
-			for (let n = e; n >= 0 && n <= G.value; n += t) if (!V.value[n]?.disabled) return n;
+		}, X = (e = 0, t = 1) => {
+			for (let n = e; n >= 0 && n <= J.value; n += t) if (!W.value[n]?.disabled) return n;
 			return -1;
-		}, et = () => {
-			S.disabled || S.loading || T.value || (T.value = !0);
-		}, tt = async () => {
-			M.value = "", $e();
-			let e = V.value.findIndex((e) => R(e));
-			N.value = e >= 0 ? e : q(), document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), await ne(), S.searchable && Ye.value?.focus(), X();
-		}, J = (e = !0) => {
-			T.value && (T.value = !1, N.value = -1, e && A.value?.focus());
-		}, nt = () => T.value ? J() : et(), rt = (e) => {
+		}, rt = () => {
+			S.disabled || S.loading || S.readonly || D.value || (D.value = !0);
+		}, it = async () => {
+			N.value = "", nt();
+			let e = W.value.findIndex((e) => z(e));
+			P.value = e >= 0 ? e : X(), document.addEventListener("pointerdown", mt, !0), window.addEventListener("scroll", $, !0), window.addEventListener("resize", $), await ne(), S.searchable && Ze.value?.focus(), Q();
+		}, Z = (e = !0) => {
+			D.value && (D.value = !1, P.value = -1, e && j.value?.focus());
+		}, at = () => D.value ? Z() : rt(), ot = (e) => {
 			if (!e.disabled) {
 				if (S.multiple) {
-					let t = [...F.value], n = t.findIndex((t) => I(t, e.value));
-					n >= 0 ? (t.splice(n, 1), C("remove", e)) : (t.push(e.value), C("select", e)), w.value = t;
-				} else w.value = e.value, C("select", e), J();
+					let t = [...I.value], n = t.findIndex((t) => L(t, e.value));
+					n >= 0 ? (t.splice(n, 1), C("remove", e)) : (t.push(e.value), C("select", e)), E(t);
+				} else E(e.value), C("select", e), Z();
 			}
-		}, it = (e) => {
-			w.value = S.multiple ? F.value.filter((t) => !I(t, e.value)) : null, C("remove", e);
-		}, at = () => {
-			let e = U.value;
-			if (!W.value || !e) return;
+		}, st = (e) => {
+			E(S.multiple ? I.value.filter((t) => !L(t, e.value)) : S.emptyValue), C("remove", e);
+		}, ct = () => {
+			let e = K.value;
+			if (!q.value || !e) return;
 			let t = e, n = {
 				value: t,
 				label: e
 			};
-			S.multiple ? (w.value = [...F.value, t], M.value = "") : (w.value = t, J()), C("select", n), C("create", e);
-		}, ot = () => {
-			z.value.forEach((e) => C("remove", e)), w.value = S.multiple ? [] : null, A.value?.focus();
-		}, Y = "", st, X = () => ne(() => j.value?.querySelector(`#${CSS.escape(H(N.value))}`)?.scrollIntoView({ block: "nearest" })), ct = (e) => {
-			let t = G.value + 1;
+			S.multiple ? (E([...I.value, t]), N.value = "") : (E(t), Z()), C("select", n), C("create", e);
+		}, lt = () => {
+			B.value.forEach((e) => C("remove", e)), E(S.multiple ? [] : S.emptyValue), j.value?.focus();
+		}, ut = "", dt, Q = () => ne(() => M.value?.querySelector(`#${CSS.escape(G(P.value))}`)?.scrollIntoView({ block: "nearest" })), ft = (e) => {
+			let t = J.value + 1;
 			if (!t) return;
-			let n = N.value;
-			for (let r = 0; r < t && (n = (n + e + t) % t, V.value[n]?.disabled); r++);
-			N.value = n, X();
-		}, lt = (e) => {
-			if (S.disabled) return;
+			let n = P.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, W.value[n]?.disabled); r++);
+			P.value = n, Q();
+		}, pt = (e) => {
+			if (S.disabled || S.readonly) return;
 			let t = e.key;
-			if (!T.value) {
+			if (!D.value) {
 				[
 					"Enter",
 					" ",
 					"ArrowDown",
 					"ArrowUp"
-				].includes(t) ? (e.preventDefault(), et()) : t === "Backspace" && S.multiple && B.value && e.target === A.value && it(z.value[z.value.length - 1]);
+				].includes(t) ? (e.preventDefault(), rt()) : t === "Backspace" && S.multiple && V.value && e.target === j.value && st(B.value[B.value.length - 1]);
 				return;
 			}
-			if (t === "ArrowDown") e.preventDefault(), ct(1);
-			else if (t === "ArrowUp") e.preventDefault(), ct(-1);
-			else if (t === "Home") e.preventDefault(), N.value = q(), X();
-			else if (t === "End") e.preventDefault(), N.value = q(G.value, -1), X();
+			if (t === "ArrowDown") e.preventDefault(), ft(1);
+			else if (t === "ArrowUp") e.preventDefault(), ft(-1);
+			else if (t === "Home") e.preventDefault(), P.value = X(), Q();
+			else if (t === "End") e.preventDefault(), P.value = X(J.value, -1), Q();
 			else if (t === "Enter" || t === " " && !S.searchable) {
 				e.preventDefault();
-				let t = V.value[N.value];
-				t ? rt(t) : W.value && at();
-			} else if (t === "Escape") e.preventDefault(), J();
-			else if (t === "Tab") J(!1);
+				let t = W.value[P.value];
+				t ? ot(t) : q.value && ct();
+			} else if (t === "Escape") e.preventDefault(), Z();
+			else if (t === "Tab") Z(!1);
 			else if (!S.searchable && t.length === 1 && !e.metaKey && !e.ctrlKey) {
-				Y += t.toLowerCase(), clearTimeout(st), st = setTimeout(() => Y = "", 500);
-				let e = V.value.findIndex((e) => !e.disabled && e.label.toLowerCase().startsWith(Y));
-				e >= 0 && (N.value = e, X());
+				ut += t.toLowerCase(), clearTimeout(dt), dt = setTimeout(() => ut = "", 500);
+				let e = W.value.findIndex((e) => !e.disabled && e.label.toLowerCase().startsWith(ut));
+				e >= 0 && (P.value = e, Q());
 			}
-		}, Z = (e) => {
+		}, mt = (e) => {
 			let t = e.target;
-			Je.value?.contains(t) || j.value?.contains(t) || J(!1);
-		}, Q = (e) => {
-			e?.target instanceof Node && j.value?.contains(e.target) || $e();
-		}, ut = () => {
-			document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+			Xe.value?.contains(t) || M.value?.contains(t) || Z(!1);
+		}, $ = (e) => {
+			e?.target instanceof Node && M.value?.contains(e.target) || nt();
+		}, ht = () => {
+			document.removeEventListener("pointerdown", mt, !0), window.removeEventListener("scroll", $, !0), window.removeEventListener("resize", $);
 		};
-		b(T, (e) => {
-			if (e) return tt();
-			N.value = -1, ut();
-		}), b(M, (e) => {
-			C("search", e), N.value = q();
-		}), ae(() => T.value && tt()), ie(ut);
-		let $ = h(!1), dt = a(() => T.value || $.value), ft = a(() => [S.hint && Ke, S.errorMsg && qe].filter(Boolean).join(" ") || void 0), pt = a(() => !S.multiple && z.value[0]?.label || ""), mt = a(() => !S.multiple && Ue.selected && z.value[0] || null);
-		return f({ focus: () => A.value?.focus() }), (t, a) => (m(), c("div", te({
+		b(D, (e) => {
+			if (e) return it();
+			P.value = -1, ht(), $e();
+		}), b(() => T.value, (e) => {
+			$e(), C("change", e);
+		}), b(N, (e) => {
+			C("search", e), P.value = X();
+		}), ae(() => {
+			S.initEmptyArray && S.multiple && !T.value && E([]), D.value && it();
+		}), ie(ht);
+		let gt = h(!1), _t = a(() => D.value || gt.value), vt = a(() => [S.hint && Je, U.value && Ye].filter(Boolean).join(" ") || void 0), yt = a(() => !S.multiple && B.value[0]?.label || ""), bt = a(() => !S.multiple && (w.selected || w.content) && B.value[0] || null), xt = a(() => !!(S.label || S.readonly || w["label-icon"] || w["label-extra"])), St = a(() => We[S.size] ?? We.normal), Ct = a(() => S.readonly ? "bg-surface-muted" : S.variant === "soft" ? "bg-accent" : S.variant === "ghost" ? "bg-transparent" : "bg-background"), wt = a(() => S.variant !== "outline");
+		return f({ focus: () => j.value?.focus() }), (t, a) => (m(), c("div", te({
 			ref_key: "root",
-			ref: Je
-		}, We.value, {
+			ref: Xe
+		}, Ge.value, {
 			class: ["w-full", d.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-select"
 		}), [
-			d.label ? (m(), c("div", be, [l("label", {
-				id: k,
-				onClick: a[0] ||= (e) => A.value?.focus()
-			}, v(d.label), 1), d.required ? (m(), c("span", xe, "*")) : s("", !0)])) : s("", !0),
+			xt.value ? (m(), c("div", be, [
+				_(t.$slots, "label-icon"),
+				d.label ? (m(), c("label", {
+					key: 0,
+					id: qe,
+					onClick: a[0] ||= (e) => j.value?.focus()
+				}, v(d.label), 1)) : s("", !0),
+				d.readonly ? (m(), c("span", xe, "(read only)")) : s("", !0),
+				_(t.$slots, "label-extra"),
+				d.required ? (m(), c("span", Se, "*")) : s("", !0)
+			])) : s("", !0),
 			d.hint ? (m(), c("p", {
 				key: 1,
-				id: Ke,
+				id: Je,
 				class: "mb-2 text-base text-muted"
 			}, v(d.hint), 1)) : s("", !0),
 			l("div", te({
-				id: `${y(E)}-trigger`,
+				id: `${y(O)}-trigger`,
 				ref_key: "trigger",
-				ref: A
-			}, Ge.value, {
+				ref: j
+			}, Ke.value, {
 				role: "combobox",
 				tabindex: d.disabled ? -1 : 0,
 				"aria-haspopup": "listbox",
-				"aria-expanded": T.value,
-				"aria-controls": O,
-				"aria-labelledby": d.label ? k : void 0,
-				"aria-label": d.label ? void 0 : y(D)["aria-label"] ?? d.placeholder,
-				"aria-describedby": ft.value,
+				"aria-expanded": D.value,
+				"aria-controls": A,
+				"aria-labelledby": d.label ? qe : void 0,
+				"aria-label": d.label ? void 0 : y(k)["aria-label"] ?? d.placeholder,
+				"aria-describedby": vt.value,
 				"aria-disabled": d.disabled || void 0,
-				"aria-invalid": !!d.errorMsg || void 0,
+				"aria-invalid": !!U.value || void 0,
+				"aria-readonly": d.readonly || void 0,
 				"aria-required": d.required || void 0,
-				"aria-activedescendant": T.value && !d.searchable && N.value >= 0 ? H(N.value) : void 0,
+				"aria-activedescendant": D.value && !d.searchable && P.value >= 0 ? G(P.value) : void 0,
 				"aria-busy": d.refreshing || void 0,
-				class: ["group flex w-full items-center gap-2 rounded-10 border bg-background text-left text-base font-medium text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none", [
-					d.size === "compact" ? "min-h-8 pr-1 pl-3" : d.size === "small" ? "min-h-9 pr-1 pl-4" : "min-h-10.5 pr-1 pl-5",
-					d.multiple && B.value && (d.size === "normal" ? "py-1.5" : "py-1"),
-					d.disabled || d.loading ? "cursor-not-allowed" : "cursor-pointer",
-					d.errorMsg ? ["border-danger/50", dt.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : dt.value ? "focus-ring" : ["border-border", !d.disabled && "hover:border-accent-active"]
+				class: ["group flex w-full items-center gap-2 rounded-10 border text-left font-medium text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none", [
+					St.value.field,
+					Ct.value,
+					d.multiple && V.value && St.value.chips[+!!d.looseChips],
+					d.disabled || d.loading || d.readonly ? "cursor-not-allowed" : "cursor-pointer",
+					d.highlight && "ring-2 ring-primary/20 ring-offset-2 ring-offset-surface",
+					U.value ? ["border-danger/50", _t.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : wt.value ? [
+						"border-transparent",
+						_t.value && "shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]",
+						d.variant === "soft" && !d.disabled && "hover:bg-accent-hover"
+					] : _t.value ? "focus-ring" : ["border-border", !d.disabled && !d.readonly && "hover:border-accent-active"]
 				]],
-				onClick: nt,
-				onKeydown: lt,
-				onFocus: a[2] ||= (e) => $.value = !0,
-				onBlur: a[3] ||= (e) => $.value = !1
-			}), [l("div", Ce, [d.multiple && B.value ? (m(!0), c(n, { key: 0 }, g(z.value, (e, t) => (m(), c("span", {
-				key: Xe(e.value, t),
+				onClick: at,
+				onKeydown: pt,
+				onFocus: a[2] ||= (e) => gt.value = !0,
+				onBlur: a[3] ||= (e) => gt.value = !1
+			}), [l("div", we, [d.multiple && V.value ? (m(!0), c(n, { key: 0 }, g(B.value, (e, t) => (m(), c("span", {
+				key: Qe(e.value, t),
 				class: "inline-flex max-w-full items-center gap-2 rounded-10 bg-accent px-2 text-xs text-heading"
-			}, [l("span", we, v(e.label), 1), l("button", {
+			}, [l("span", Te, v(e.label), 1), l("button", {
 				type: "button",
 				class: "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 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.label}`,
 				disabled: d.disabled,
-				onClick: x((t) => it(e), ["stop"])
+				onClick: x((t) => st(e), ["stop"])
 			}, [u(y(ye), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, Te)]))), 128)) : mt.value ? (m(), c("span", {
+			})], 8, Ee)]))), 128)) : bt.value ? (m(), c("span", {
 				key: 1,
-				class: p(["min-w-0 flex-1", d.size === "normal" ? "py-2.5" : d.size === "small" ? "py-[7px]" : "py-[5px]"])
-			}, [_(t.$slots, "selected", { option: mt.value })], 2)) : pt.value ? (m(), c("span", Ee, v(pt.value), 1)) : (m(), c("span", De, v(d.placeholder), 1))]), l("span", Oe, [
+				class: p(["min-w-0 flex-1", St.value.custom])
+			}, [_(t.$slots, "selected", { option: bt.value }, () => [_(t.$slots, "content", { option: bt.value })])], 2)) : yt.value ? (m(), c("span", De, v(yt.value), 1)) : (m(), c("span", Oe, v(d.placeholder), 1))]), l("span", ke, [
 				d.loading ? (m(), o(e, {
 					key: 0,
 					class: "text-primary"
-				})) : d.refreshable ? (m(), c("button", {
+				})) : d.refreshable && !(d.disabled && d.hideRefreshWhenDisabled) ? (m(), c("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",
@@ -344,107 +440,107 @@ var be = {
 				}, [u(y(ve), {
 					class: p(["size-4", d.refreshing && "motion-safe:animate-spin"]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])], 8, ke)) : s("", !0),
-				d.clearable && B.value && !d.disabled && !d.loading ? (m(), c("button", {
+				}, null, 8, ["class"])], 8, Ae)) : s("", !0),
+				d.clearable && V.value && !d.disabled && !d.loading && !d.readonly ? (m(), c("button", {
 					key: 2,
 					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 selection",
-					onClick: x(ot, ["stop"])
+					onClick: x(lt, ["stop"])
 				}, [u(y(ye), {
 					class: "size-4",
 					"aria-hidden": "true"
 				})])) : s("", !0),
-				l("span", Ae, [(m(), o(oe(T.value ? y(ge) : y(he)), { class: "size-4" }))])
-			])], 16, Se),
-			d.errorMsg ? (m(), c("p", {
+				l("span", je, [(m(), o(oe(D.value ? y(ge) : y(he)), { class: "size-4" }))])
+			])], 16, Ce),
+			U.value ? (m(), c("p", {
 				key: 2,
-				id: qe,
+				id: Ye,
 				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, v(d.errorMsg), 1)) : s("", !0),
+			}, v(U.value), 1)) : s("", !0),
 			(m(), o(r, { to: "body" }, [u(i, {
 				"enter-active-class": "transition-opacity duration-100 ease-out motion-reduce:transition-none",
 				"enter-from-class": "opacity-0",
 				"leave-active-class": "transition-opacity duration-75 ease-in motion-reduce:transition-none",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: fe(() => [T.value ? (m(), c("div", {
+				default: fe(() => [D.value ? (m(), c("div", {
 					key: 0,
 					ref_key: "panel",
-					ref: j,
+					ref: M,
 					class: "fixed z-[90] flex flex-col overflow-hidden rounded-10 border border-border bg-background shadow-lg",
 					style: re({
-						top: P.value.top === void 0 ? void 0 : `${P.value.top}px`,
-						bottom: P.value.bottom === void 0 ? void 0 : `${P.value.bottom}px`,
-						left: `${P.value.left}px`,
-						width: `${P.value.width}px`,
-						maxHeight: `${P.value.maxHeight}px`
+						top: F.value.top === void 0 ? void 0 : `${F.value.top}px`,
+						bottom: F.value.bottom === void 0 ? void 0 : `${F.value.bottom}px`,
+						left: `${F.value.left}px`,
+						width: `${F.value.width}px`,
+						maxHeight: `${F.value.maxHeight}px`
 					}),
 					"data-ac-ds": "",
 					"data-testid": "ac-select-panel"
-				}, [d.searchable ? (m(), c("div", je, [pe(l("input", {
+				}, [d.searchable ? (m(), c("div", Me, [pe(l("input", {
 					ref_key: "searchInput",
-					ref: Ye,
-					"onUpdate:modelValue": a[4] ||= (e) => M.value = e,
+					ref: Ze,
+					"onUpdate:modelValue": a[4] ||= (e) => N.value = e,
 					type: "text",
 					placeholder: "Search…",
 					"aria-label": "Search options",
-					"aria-controls": O,
-					"aria-activedescendant": N.value >= 0 ? H(N.value) : void 0,
+					"aria-controls": A,
+					"aria-activedescendant": P.value >= 0 ? G(P.value) : void 0,
 					class: "h-9.5 w-full rounded-10 border border-border bg-background px-3 text-base text-heading transition-[border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 hover:border-accent-active focus:focus-ring",
-					onKeydown: lt
-				}, null, 40, Me), [[de, M.value]])])) : s("", !0), l("ul", {
-					id: O,
+					onKeydown: pt
+				}, null, 40, Ne), [[de, N.value]])])) : s("", !0), l("ul", {
+					id: A,
 					role: "listbox",
 					"aria-multiselectable": d.multiple || void 0,
-					"aria-labelledby": d.label ? k : void 0,
+					"aria-labelledby": d.label ? qe : void 0,
 					class: "ac-scrollbar max-h-60 min-h-0 flex-1 p-1"
 				}, [
-					(m(!0), c(n, null, g(Qe.value, (e) => (m(), c(n, { key: e.name }, [e.name ? (m(), c("li", Pe, v(e.name), 1)) : s("", !0), (m(!0), c(n, null, g(e.items, ({ option: e, index: n }) => (m(), c("li", {
-						id: H(n),
-						key: Xe(e.value, n),
+					(m(!0), c(n, null, g(tt.value, (e) => (m(), c(n, { key: e.name }, [e.name ? (m(), c("li", Fe, v(e.name), 1)) : s("", !0), (m(!0), c(n, null, g(e.items, ({ option: e, index: n }) => (m(), c("li", {
+						id: G(n),
+						key: Qe(e.value, n),
 						role: "option",
-						"aria-selected": R(e),
+						"aria-selected": z(e),
 						"aria-disabled": e.disabled || void 0,
-						class: p(["flex cursor-pointer items-start gap-2.5 rounded-6 px-4 py-2 text-base text-heading transition-colors", [e.disabled && "cursor-not-allowed opacity-50", n === N.value ? "bg-accent-hover" : R(e) && "bg-accent"]]),
-						onMouseenter: (t) => !e.disabled && (N.value = n),
+						class: p(["flex cursor-pointer items-start gap-2.5 rounded-6 px-4 py-2 text-base text-heading transition-colors", [e.disabled && "cursor-not-allowed opacity-50", n === P.value ? "bg-accent-hover" : z(e) && "bg-accent"]]),
+						onMouseenter: (t) => !e.disabled && (P.value = n),
 						onMousedown: a[5] ||= x(() => {}, ["prevent"]),
-						onClick: (t) => rt(e)
+						onClick: (t) => ot(e)
 					}, [d.multiple ? (m(), c("span", {
 						key: 0,
-						class: p(["mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-4 border transition-colors", R(e) ? "border-primary bg-primary text-white" : "border-muted/70 bg-surface"]),
+						class: p(["mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-4 border transition-colors", z(e) ? "border-primary bg-primary text-white" : "border-muted/70 bg-surface"]),
 						"aria-hidden": "true"
-					}, [R(e) ? (m(), o(y(me), {
+					}, [z(e) ? (m(), o(y(me), {
 						key: 0,
 						class: "size-3",
 						"stroke-width": 3,
 						"aria-hidden": "true"
-					})) : s("", !0)], 2)) : s("", !0), l("span", Ie, [_(t.$slots, "option", {
+					})) : s("", !0)], 2)) : s("", !0), l("span", Le, [_(t.$slots, "option", {
 						option: e,
-						selected: R(e),
-						active: n === N.value
-					}, () => [l("span", Le, v(e.label), 1), e.description ? (m(), c("span", Re, v(e.description), 1)) : s("", !0)])])], 42, Fe))), 128))], 64))), 128)),
-					W.value ? (m(), c("li", {
+						selected: z(e),
+						active: n === P.value
+					}, () => [_(t.$slots, "content", { option: e }, () => [l("span", Re, v(e.label), 1), e.description ? (m(), c("span", ze, v(e.description), 1)) : s("", !0)])])])], 42, Ie))), 128))], 64))), 128)),
+					q.value ? (m(), c("li", {
 						key: 0,
-						id: H(K.value),
+						id: G(Y.value),
 						role: "option",
 						"aria-selected": "false",
-						class: p(["flex cursor-pointer items-center gap-2.5 rounded-6 px-4 py-2 text-base text-heading transition-colors", K.value === N.value && "bg-accent-hover"]),
+						class: p(["flex cursor-pointer items-center gap-2.5 rounded-6 px-4 py-2 text-base text-heading transition-colors", Y.value === P.value && "bg-accent-hover"]),
 						"data-testid": "ac-select-create",
-						onMouseenter: a[6] ||= (e) => N.value = K.value,
+						onMouseenter: a[6] ||= (e) => P.value = Y.value,
 						onMousedown: a[7] ||= x(() => {}, ["prevent"]),
-						onClick: at
+						onClick: ct
 					}, [u(y(_e), {
 						class: "size-4 shrink-0 text-primary-strong",
 						"aria-hidden": "true"
-					}), l("span", Be, v(d.createText) + " “" + v(U.value) + "”", 1)], 42, ze)) : s("", !0),
-					!V.value.length && !W.value ? (m(), c("li", Ve, [_(t.$slots, "empty", { query: M.value }, () => [ee(v(M.value ? `${d.noResultText} for “${M.value}”` : "No options"), 1)])])) : s("", !0)
-				], 8, Ne)], 4)) : s("", !0)]),
+					}), l("span", Ve, v(d.createText) + " “" + v(K.value) + "”", 1)], 42, Be)) : s("", !0),
+					!W.value.length && !q.value ? (m(), c("li", He, [_(t.$slots, "empty", { query: N.value }, () => [ee(v(d.emptyText || (N.value ? `${d.noResultText} for “${N.value}”` : "No options")), 1)])])) : s("", !0)
+				], 8, Pe)], 4)) : s("", !0)]),
 				_: 3
 			})]))
 		], 16));
 	}
 });
 //#endregion
-export { He as default };
+export { Ue as default };