@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,15 +1,15 @@
 import e from "./AcSpinner.js";
-import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as ee, nextTick as p, normalizeClass as m, normalizeStyle as te, onBeforeUnmount as ne, openBlock as h, ref as g, renderList as _, renderSlot as re, toDisplayString as v, unref as y, useAttrs as ie, useId as ae, useModel as oe, vModelText as se, watch as ce, withCtx as le, withDirectives as ue, withModifiers as b } from "vue";
-import { Check as de, ChevronDown as fe, CircleAlert as pe, Plus as me, RefreshCw as he, X as ge } from "@lucide/vue";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as ee, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as te, nextTick as f, normalizeClass as p, normalizeStyle as ne, onBeforeUnmount as re, openBlock as m, ref as h, renderList as g, renderSlot as ie, resolveDynamicComponent as ae, toDisplayString as _, unref as v, useAttrs as oe, useId as se, useModel as ce, vModelText as le, watch as ue, withCtx as de, withDirectives as fe, withModifiers as y } from "vue";
+import { Check as pe, ChevronDown as me, ChevronUp as he, Plus as ge, RefreshCw as _e, X as ve } from "@lucide/vue";
 //#region src/lib/components/AcSelect.vue?vue&type=script&setup=true&lang.ts
-var _e = {
+var ye = {
 	key: 0,
 	class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
-}, ve = {
+}, be = {
 	key: 0,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, ye = [
+}, xe = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -20,40 +20,43 @@ var _e = {
 	"aria-invalid",
 	"aria-required",
 	"aria-activedescendant"
-], be = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5" }, xe = { class: "truncate" }, Se = [
+], Se = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-2" }, Ce = { class: "truncate" }, we = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], Ce = {
+], Te = {
 	key: 1,
 	class: "truncate"
-}, we = {
+}, Ee = {
 	key: 2,
-	class: "truncate text-muted/80"
-}, Te = { class: "flex shrink-0 items-center gap-1 text-muted" }, Ee = ["disabled"], De = {
+	class: "truncate text-muted"
+}, De = { class: "flex shrink-0 items-center gap-1 text-muted" }, Oe = ["disabled"], ke = {
+	class: "inline-flex rounded-full p-1 transition-colors hover:bg-accent-hover hover:text-primary",
+	"aria-hidden": "true"
+}, Ae = {
 	key: 0,
-	class: "border-b border-border p-2"
-}, Oe = ["aria-activedescendant"], ke = ["aria-multiselectable", "aria-labelledby"], Ae = {
+	class: "border-b border-border p-3"
+}, je = ["aria-activedescendant"], Me = ["aria-multiselectable", "aria-labelledby"], Ne = {
 	key: 0,
 	role: "presentation",
-	class: "px-3 pt-2 pb-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-}, je = [
+	class: "px-4 pt-2 pb-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
+}, Pe = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onMouseenter",
 	"onClick"
-], Me = { class: "min-w-0 flex-1" }, Ne = { class: "block truncate" }, Pe = {
+], Fe = { class: "min-w-0 flex-1" }, Ie = { class: "block truncate" }, Le = {
 	key: 0,
 	class: "block truncate text-xs font-normal text-muted"
-}, Fe = ["id"], Ie = { class: "min-w-0 flex-1 truncate" }, Le = {
+}, Re = ["id"], ze = { class: "min-w-0 flex-1 truncate" }, Be = {
 	key: 1,
 	role: "presentation",
 	class: "px-4 py-3 text-center text-base text-muted"
-}, x = /*@__PURE__*/ d({
+}, b = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "AcSelect",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ d({
 		options: {},
 		by: {
 			type: [String, Function],
@@ -102,52 +105,52 @@ var _e = {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ f([
+	emits: /*@__PURE__*/ d([
 		"select",
 		"create",
 		"remove",
 		"search",
 		"refresh"
 	], ["update:modelValue"]),
-	setup(d, { expose: f, emit: x }) {
-		let S = d, C = x, w = oe(d, "modelValue"), T = ae(), E = ie(), Re = i(() => ({
-			class: E.class,
-			style: E.style
-		})), ze = i(() => {
-			let { class: e, style: t, ...n } = E;
+	setup(u, { expose: d, emit: b }) {
+		let x = u, S = b, C = ce(u, "modelValue"), w = se(), T = oe(), Ve = i(() => ({
+			class: T.class,
+			style: T.style
+		})), He = i(() => {
+			let { class: e, style: t, ...n } = T;
 			return n;
-		}), D = `${T}-list`, O = `${T}-label`, Be = `${T}-hint`, Ve = `${T}-msg`, He = g(null), k = g(null), A = g(null), Ue = g(null), j = g(!1), M = g(""), N = g(-1), P = g({
+		}), E = `${w}-list`, D = `${w}-label`, Ue = `${w}-hint`, We = `${w}-msg`, Ge = h(null), O = h(null), k = h(null), Ke = h(null), A = h(!1), j = h(""), M = h(-1), N = h({
 			left: 0,
 			width: 0,
-			maxHeight: 280
-		}), F = i(() => {
-			let e = w.value;
+			maxHeight: 288
+		}), P = i(() => {
+			let e = C.value;
 			return e == null || e === "" ? [] : Array.isArray(e) ? e : [e];
-		}), I = (e, t) => {
-			let n = S.by;
+		}), F = (e, t) => {
+			let n = x.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) => {
-			let t = S.by;
+		}, I = (e) => {
+			let t = x.by;
 			return String(typeof t == "string" && e && typeof e == "object" ? e[t] : e);
-		}, We = (e, t) => {
-			let n = S.by;
+		}, qe = (e, t) => {
+			let n = x.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 = i(() => F.value.map((e) => S.options.find((t) => I(t.value, e)) ?? {
+		}, L = (e) => P.value.some((t) => F(t, e.value)), R = i(() => P.value.map((e) => x.options.find((t) => F(t.value, e)) ?? {
 			value: e,
-			label: L(e)
-		})), B = i(() => F.value.length > 0), Ge = (e) => {
+			label: I(e)
+		})), z = i(() => P.value.length > 0), Je = (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 = i(() => {
-			let e = M.value.trim().toLowerCase();
-			return Ge(e ? S.options.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)) : S.options);
-		}), Ke = i(() => {
+		}, B = i(() => {
+			let e = j.value.trim().toLowerCase();
+			return Je(e ? x.options.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)) : x.options);
+		}), Ye = i(() => {
 			let e = [];
-			return V.value.forEach((t, n) => {
+			return B.value.forEach((t, n) => {
 				let r = t.group ?? "", i = e.find((e) => e.name === r);
 				i || e.push(i = {
 					name: r,
@@ -157,288 +160,274 @@ var _e = {
 					index: n
 				});
 			}), e;
-		}), H = (e) => `${T}-opt-${e}`, U = i(() => M.value.trim()), W = i(() => {
-			let e = U.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);
+		}), V = (e) => `${w}-opt-${e}`, H = i(() => j.value.trim()), U = i(() => {
+			let e = H.value.toLowerCase();
+			if (!x.creatable || !x.searchable || !e) return !1;
+			let t = x.options.some((t) => t.label.toLowerCase() === e || I(t.value).toLowerCase() === e), n = P.value.some((t) => I(t).toLowerCase() === e);
 			return !t && !n;
-		}), G = i(() => V.value.length + +!!W.value - 1), K = i(() => V.value.length), qe = () => {
-			let e = k.value;
+		}), W = i(() => B.value.length + +!!U.value - 1), G = i(() => B.value.length), Xe = () => {
+			let e = O.value;
 			if (!e) return;
-			let t = e.getBoundingClientRect(), n = window.innerHeight - t.bottom - 6 - 8, r = t.top - 6 - 8;
-			P.value = n < 180 && r > n ? {
-				bottom: window.innerHeight - t.top + 6,
+			let t = e.getBoundingClientRect(), n = window.innerHeight - t.bottom - 4 - 8, r = t.top - 4 - 8;
+			N.value = n < 180 && r > n ? {
+				bottom: window.innerHeight - t.top + 4,
 				left: t.left,
 				width: t.width,
-				maxHeight: Math.min(300, r)
+				maxHeight: Math.min(288, r)
 			} : {
-				top: t.bottom + 6,
+				top: t.bottom + 4,
 				left: t.left,
 				width: t.width,
-				maxHeight: Math.min(300, n)
+				maxHeight: Math.min(288, n)
 			};
-		}, q = (e = 0, t = 1) => {
-			for (let n = e; n >= 0 && n <= G.value; n += t) if (!V.value[n]?.disabled) return n;
+		}, K = (e = 0, t = 1) => {
+			for (let n = e; n >= 0 && n <= W.value; n += t) if (!B.value[n]?.disabled) return n;
 			return -1;
-		}, Je = async () => {
-			if (S.disabled || S.loading || j.value) return;
-			j.value = !0, M.value = "", qe();
-			let e = V.value.findIndex((e) => R(e));
-			N.value = e >= 0 ? e : q(), await p(), S.searchable && Ue.value?.focus(), X();
-		}, J = (e = !0) => {
-			j.value && (j.value = !1, N.value = -1, e && k.value?.focus());
-		}, Ye = () => j.value ? J() : Je(), Xe = (e) => {
+		}, Ze = async () => {
+			if (x.disabled || x.loading || A.value) return;
+			A.value = !0, j.value = "", Xe();
+			let e = B.value.findIndex((e) => L(e));
+			M.value = e >= 0 ? e : K(), await f(), x.searchable && Ke.value?.focus(), X();
+		}, q = (e = !0) => {
+			A.value && (A.value = !1, M.value = -1, e && O.value?.focus());
+		}, Qe = () => A.value ? q() : Ze(), $e = (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();
+				if (x.multiple) {
+					let t = [...P.value], n = t.findIndex((t) => F(t, e.value));
+					n >= 0 ? (t.splice(n, 1), S("remove", e)) : (t.push(e.value), S("select", e)), C.value = t;
+				} else C.value = e.value, S("select", e), q();
 			}
-		}, Ze = (e) => {
-			w.value = S.multiple ? F.value.filter((t) => !I(t, e.value)) : null, C("remove", e);
-		}, Qe = () => {
-			let e = U.value;
-			if (!W.value || !e) return;
+		}, J = (e) => {
+			C.value = x.multiple ? P.value.filter((t) => !F(t, e.value)) : null, S("remove", e);
+		}, et = () => {
+			let e = H.value;
+			if (!U.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);
-		}, $e = () => {
-			z.value.forEach((e) => C("remove", e)), w.value = S.multiple ? [] : null, k.value?.focus();
-		}, Y = "", et, X = () => p(() => A.value?.querySelector(`#${CSS.escape(H(N.value))}`)?.scrollIntoView({ block: "nearest" })), tt = (e) => {
-			let t = G.value + 1;
+			x.multiple ? (C.value = [...P.value, t], j.value = "") : (C.value = t, q()), S("select", n), S("create", e);
+		}, tt = () => {
+			R.value.forEach((e) => S("remove", e)), C.value = x.multiple ? [] : null, O.value?.focus();
+		}, Y = "", nt, X = () => f(() => k.value?.querySelector(`#${CSS.escape(V(M.value))}`)?.scrollIntoView({ block: "nearest" })), rt = (e) => {
+			let t = W.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();
-		}, nt = (e) => {
-			if (S.disabled) return;
+			let n = M.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, B.value[n]?.disabled); r++);
+			M.value = n, X();
+		}, it = (e) => {
+			if (x.disabled) return;
 			let t = e.key;
-			if (!j.value) {
+			if (!A.value) {
 				[
 					"Enter",
 					" ",
 					"ArrowDown",
 					"ArrowUp"
-				].includes(t) ? (e.preventDefault(), Je()) : t === "Backspace" && S.multiple && B.value && e.target === k.value && Ze(z.value[z.value.length - 1]);
+				].includes(t) ? (e.preventDefault(), Ze()) : t === "Backspace" && x.multiple && z.value && e.target === O.value && J(R.value[R.value.length - 1]);
 				return;
 			}
-			if (t === "ArrowDown") e.preventDefault(), tt(1);
-			else if (t === "ArrowUp") e.preventDefault(), tt(-1);
-			else if (t === "Home") e.preventDefault(), N.value = q(), X();
-			else if (t === "End") e.preventDefault(), N.value = q(G.value, -1), X();
-			else if (t === "Enter" || t === " " && !S.searchable) {
+			if (t === "ArrowDown") e.preventDefault(), rt(1);
+			else if (t === "ArrowUp") e.preventDefault(), rt(-1);
+			else if (t === "Home") e.preventDefault(), M.value = K(), X();
+			else if (t === "End") e.preventDefault(), M.value = K(W.value, -1), X();
+			else if (t === "Enter" || t === " " && !x.searchable) {
 				e.preventDefault();
-				let t = V.value[N.value];
-				t ? Xe(t) : W.value && Qe();
-			} else if (t === "Escape") e.preventDefault(), J();
-			else if (t === "Tab") J(!1);
-			else if (!S.searchable && t.length === 1 && !e.metaKey && !e.ctrlKey) {
-				Y += t.toLowerCase(), clearTimeout(et), et = setTimeout(() => Y = "", 500);
-				let e = V.value.findIndex((e) => !e.disabled && e.label.toLowerCase().startsWith(Y));
-				e >= 0 && (N.value = e, X());
+				let t = B.value[M.value];
+				t ? $e(t) : U.value && et();
+			} else if (t === "Escape") e.preventDefault(), q();
+			else if (t === "Tab") q(!1);
+			else if (!x.searchable && t.length === 1 && !e.metaKey && !e.ctrlKey) {
+				Y += t.toLowerCase(), clearTimeout(nt), nt = setTimeout(() => Y = "", 500);
+				let e = B.value.findIndex((e) => !e.disabled && e.label.toLowerCase().startsWith(Y));
+				e >= 0 && (M.value = e, X());
 			}
-		}, rt = (e) => {
+		}, at = (e) => {
 			let t = e.target;
-			He.value?.contains(t) || A.value?.contains(t) || J(!1);
+			Ge.value?.contains(t) || k.value?.contains(t) || q(!1);
 		}, Z = (e) => {
-			e?.target instanceof Node && A.value?.contains(e.target) || qe();
-		}, it = () => {
-			document.removeEventListener("pointerdown", rt, !0), window.removeEventListener("scroll", Z, !0), window.removeEventListener("resize", Z);
+			e?.target instanceof Node && k.value?.contains(e.target) || Xe();
+		}, ot = () => {
+			document.removeEventListener("pointerdown", at, !0), window.removeEventListener("scroll", Z, !0), window.removeEventListener("resize", Z);
 		};
-		ce(j, (e) => {
-			if (!e) return it();
-			document.addEventListener("pointerdown", rt, !0), window.addEventListener("scroll", Z, !0), window.addEventListener("resize", Z);
-		}), ce(M, (e) => {
-			C("search", e), N.value = q();
-		}), ne(it);
-		let Q = g(!1), at = i(() => j.value || Q.value), ot = i(() => [S.hint && Be, S.errorMsg && Ve].filter(Boolean).join(" ") || void 0), $ = i(() => !S.multiple && z.value[0]?.label || "");
-		return f({ focus: () => k.value?.focus() }), (i, f) => (h(), s("div", ee({
+		ue(A, (e) => {
+			if (!e) return ot();
+			document.addEventListener("pointerdown", at, !0), window.addEventListener("scroll", Z, !0), window.addEventListener("resize", Z);
+		}), ue(j, (e) => {
+			S("search", e), M.value = K();
+		}), re(ot);
+		let Q = h(!1), st = i(() => A.value || Q.value), ct = i(() => [x.hint && Ue, x.errorMsg && We].filter(Boolean).join(" ") || void 0), $ = i(() => !x.multiple && R.value[0]?.label || "");
+		return d({ focus: () => O.value?.focus() }), (i, d) => (m(), s("div", te({
 			ref_key: "root",
-			ref: He
-		}, Re.value, {
-			class: ["w-full", d.disabled && "opacity-50"],
+			ref: Ge
+		}, Ve.value, {
+			class: ["w-full", u.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-select"
 		}), [
-			d.label ? (h(), s("div", _e, [c("label", {
-				id: O,
-				onClick: f[0] ||= (e) => k.value?.focus()
-			}, v(d.label), 1), d.required ? (h(), s("span", ve, "*")) : o("", !0)])) : o("", !0),
-			d.hint ? (h(), s("p", {
+			u.label ? (m(), s("div", ye, [c("label", {
+				id: D,
+				onClick: d[0] ||= (e) => O.value?.focus()
+			}, _(u.label), 1), u.required ? (m(), s("span", be, "*")) : o("", !0)])) : o("", !0),
+			u.hint ? (m(), s("p", {
 				key: 1,
-				id: Be,
+				id: Ue,
 				class: "mb-2 text-base text-muted"
-			}, v(d.hint), 1)) : o("", !0),
-			c("div", ee({
-				id: `${y(T)}-trigger`,
+			}, _(u.hint), 1)) : o("", !0),
+			c("div", te({
+				id: `${v(w)}-trigger`,
 				ref_key: "trigger",
-				ref: k
-			}, ze.value, {
+				ref: O
+			}, He.value, {
 				role: "combobox",
-				tabindex: d.disabled ? -1 : 0,
+				tabindex: u.disabled ? -1 : 0,
 				"aria-haspopup": "listbox",
-				"aria-expanded": j.value,
-				"aria-controls": D,
-				"aria-labelledby": d.label ? O : void 0,
-				"aria-label": d.label ? void 0 : y(E)["aria-label"] ?? d.placeholder,
-				"aria-describedby": ot.value,
-				"aria-disabled": d.disabled || void 0,
-				"aria-invalid": !!d.errorMsg || void 0,
-				"aria-required": d.required || void 0,
-				"aria-activedescendant": j.value && !d.searchable && N.value >= 0 ? H(N.value) : void 0,
-				class: ["group flex w-full items-center gap-2 rounded-10 border bg-background text-left text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none", [
-					d.size === "compact" ? "min-h-8 pr-1.5 pl-3" : d.size === "small" ? "min-h-9 pr-2 pl-3" : "min-h-10 pr-2.5 pl-4",
-					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/60", at.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : at.value ? "focus-ring" : ["border-border", !d.disabled && "hover:border-accent-active"]
+				"aria-expanded": A.value,
+				"aria-controls": E,
+				"aria-labelledby": u.label ? D : void 0,
+				"aria-label": u.label ? void 0 : v(T)["aria-label"] ?? u.placeholder,
+				"aria-describedby": ct.value,
+				"aria-disabled": u.disabled || void 0,
+				"aria-invalid": !!u.errorMsg || void 0,
+				"aria-required": u.required || void 0,
+				"aria-activedescendant": A.value && !u.searchable && M.value >= 0 ? V(M.value) : 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", [
+					u.size === "compact" ? "min-h-8 pr-1 pl-3" : u.size === "small" ? "min-h-9 pr-1 pl-4" : "min-h-10.5 pr-1 pl-5",
+					u.multiple && z.value && (u.size === "normal" ? "py-1.5" : "py-1"),
+					u.disabled || u.loading ? "cursor-not-allowed" : "cursor-pointer",
+					u.errorMsg ? ["border-danger/50", st.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : st.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
 				]],
-				onClick: Ye,
-				onKeydown: nt,
-				onFocus: f[2] ||= (e) => Q.value = !0,
-				onBlur: f[3] ||= (e) => Q.value = !1
-			}), [c("div", be, [d.multiple && B.value ? (h(!0), s(t, { key: 0 }, _(z.value, (e, t) => (h(), s("span", {
-				key: We(e.value, t),
-				class: "inline-flex h-6 max-w-full items-center gap-1 rounded-10 bg-accent pr-0.5 pl-2.5 text-xs text-heading"
-			}, [c("span", xe, v(e.label), 1), c("button", {
+				onClick: Qe,
+				onKeydown: it,
+				onFocus: d[2] ||= (e) => Q.value = !0,
+				onBlur: d[3] ||= (e) => Q.value = !1
+			}), [c("div", Se, [u.multiple && z.value ? (m(!0), s(t, { key: 0 }, g(R.value, (e, t) => (m(), s("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"
+			}, [c("span", Ce, _(e.label), 1), c("button", {
 				type: "button",
-				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",
+				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: b((t) => Ze(e), ["stop"])
-			}, [u(y(ge), {
-				class: "size-3.5",
+				disabled: u.disabled,
+				onClick: y((t) => J(e), ["stop"])
+			}, [l(v(ve), {
+				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, Se)]))), 128)) : $.value ? (h(), s("span", Ce, v($.value), 1)) : (h(), s("span", we, v(d.placeholder), 1))]), c("span", Te, [
-				d.loading ? (h(), a(e, {
+			})], 8, we)]))), 128)) : $.value ? (m(), s("span", Te, _($.value), 1)) : (m(), s("span", Ee, _(u.placeholder), 1))]), c("span", De, [
+				u.loading ? (m(), a(e, {
 					key: 0,
 					class: "text-primary"
-				})) : d.refreshable ? (h(), s("button", {
+				})) : u.refreshable ? (m(), s("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": "Refresh options",
-					disabled: d.disabled,
-					onClick: f[1] ||= b((e) => C("refresh"), ["stop"])
-				}, [u(y(he), {
+					disabled: u.disabled,
+					onClick: d[1] ||= y((e) => S("refresh"), ["stop"])
+				}, [l(v(_e), {
 					class: "size-4",
 					"aria-hidden": "true"
-				})], 8, Ee)) : o("", !0),
-				d.clearable && B.value && !d.disabled && !d.loading ? (h(), s("button", {
+				})], 8, Oe)) : o("", !0),
+				u.clearable && z.value && !u.disabled && !u.loading ? (m(), s("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: b($e, ["stop"])
-				}, [u(y(ge), {
+					onClick: y(tt, ["stop"])
+				}, [l(v(ve), {
 					class: "size-4",
 					"aria-hidden": "true"
 				})])) : o("", !0),
-				u(y(fe), {
-					class: m(["size-4 transition-transform duration-200 motion-reduce:transition-none", j.value && "rotate-180 text-heading"]),
-					"aria-hidden": "true"
-				}, null, 8, ["class"])
-			])], 16, ye),
-			d.errorMsg ? (h(), s("p", {
+				c("span", ke, [(m(), a(ae(A.value ? v(he) : v(me)), { class: "size-4" }))])
+			])], 16, xe),
+			u.errorMsg ? (m(), s("p", {
 				key: 2,
-				id: Ve,
-				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				id: We,
+				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, [u(y(pe), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), l(" " + v(d.errorMsg), 1)])) : o("", !0),
-			(h(), a(n, { to: "body" }, [u(r, {
-				"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
-				"enter-from-class": "opacity-0 scale-95",
-				"leave-active-class": "transition duration-100 ease-in motion-reduce:transition-none",
-				"leave-to-class": "opacity-0 scale-95"
+			}, _(u.errorMsg), 1)) : o("", !0),
+			(m(), a(n, { to: "body" }, [l(r, {
+				"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: le(() => [j.value ? (h(), s("div", {
+				default: de(() => [A.value ? (m(), s("div", {
 					key: 0,
 					ref_key: "panel",
-					ref: A,
-					class: m(["fixed z-[90] flex flex-col overflow-hidden rounded-10 border border-border bg-surface shadow-lg", P.value.bottom === void 0 ? "origin-top" : "origin-bottom"]),
-					style: te({
-						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`
+					ref: k,
+					class: "fixed z-[90] flex flex-col overflow-hidden rounded-10 border border-border bg-background shadow-lg",
+					style: ne({
+						top: N.value.top === void 0 ? void 0 : `${N.value.top}px`,
+						bottom: N.value.bottom === void 0 ? void 0 : `${N.value.bottom}px`,
+						left: `${N.value.left}px`,
+						width: `${N.value.width}px`,
+						maxHeight: `${N.value.maxHeight}px`
 					}),
 					"data-ac-ds": "",
 					"data-testid": "ac-select-panel"
-				}, [d.searchable ? (h(), s("div", De, [ue(c("input", {
+				}, [u.searchable ? (m(), s("div", Ae, [fe(c("input", {
 					ref_key: "searchInput",
-					ref: Ue,
-					"onUpdate:modelValue": f[4] ||= (e) => M.value = e,
+					ref: Ke,
+					"onUpdate:modelValue": d[4] ||= (e) => j.value = e,
 					type: "text",
 					placeholder: "Search…",
 					"aria-label": "Search options",
-					"aria-controls": D,
-					"aria-activedescendant": N.value >= 0 ? H(N.value) : void 0,
-					class: "h-9 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 focus:focus-ring",
-					onKeydown: nt
-				}, null, 40, Oe), [[se, M.value]])])) : o("", !0), c("ul", {
-					id: D,
+					"aria-controls": E,
+					"aria-activedescendant": M.value >= 0 ? V(M.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: it
+				}, null, 40, je), [[le, j.value]])])) : o("", !0), c("ul", {
+					id: E,
 					role: "listbox",
-					"aria-multiselectable": d.multiple || void 0,
-					"aria-labelledby": d.label ? O : void 0,
-					class: "ac-scrollbar min-h-0 flex-1 p-1"
+					"aria-multiselectable": u.multiple || void 0,
+					"aria-labelledby": u.label ? D : void 0,
+					class: "ac-scrollbar max-h-60 min-h-0 flex-1 p-1"
 				}, [
-					(h(!0), s(t, null, _(Ke.value, (e) => (h(), s(t, { key: e.name }, [e.name ? (h(), s("li", Ae, v(e.name), 1)) : o("", !0), (h(!0), s(t, null, _(e.items, ({ option: e, index: t }) => (h(), s("li", {
-						id: H(t),
-						key: We(e.value, t),
+					(m(!0), s(t, null, g(Ye.value, (e) => (m(), s(t, { key: e.name }, [e.name ? (m(), s("li", Ne, _(e.name), 1)) : o("", !0), (m(!0), s(t, null, g(e.items, ({ option: e, index: t }) => (m(), s("li", {
+						id: V(t),
+						key: qe(e.value, t),
 						role: "option",
-						"aria-selected": R(e),
+						"aria-selected": L(e),
 						"aria-disabled": e.disabled || void 0,
-						class: m(["flex cursor-pointer items-start gap-2.5 rounded-8 px-3 py-2 text-base text-heading transition-colors", [e.disabled && "cursor-not-allowed opacity-50", R(e) ? ["font-medium", t === N.value ? "bg-accent-active" : "bg-accent"] : t === N.value && "bg-accent-hover"]]),
-						onMouseenter: (n) => !e.disabled && (N.value = t),
-						onMousedown: f[5] ||= b(() => {}, ["prevent"]),
-						onClick: (t) => Xe(e)
-					}, [
-						d.multiple ? (h(), s("span", {
-							key: 0,
-							class: m(["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"]),
-							"aria-hidden": "true"
-						}, [R(e) ? (h(), a(y(de), {
-							key: 0,
-							class: "size-3",
-							"stroke-width": 3,
-							"aria-hidden": "true"
-						})) : o("", !0)], 2)) : o("", !0),
-						c("span", Me, [re(i.$slots, "option", {
-							option: e,
-							selected: R(e),
-							active: t === N.value
-						}, () => [c("span", Ne, v(e.label), 1), e.description ? (h(), s("span", Pe, v(e.description), 1)) : o("", !0)])]),
-						!d.multiple && R(e) ? (h(), a(y(de), {
-							key: 1,
-							class: "mt-0.5 size-4 shrink-0 text-primary-strong",
-							"aria-hidden": "true"
-						})) : o("", !0)
-					], 42, je))), 128))], 64))), 128)),
-					W.value ? (h(), s("li", {
+						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", t === M.value ? "bg-accent-hover" : L(e) && "bg-accent"]]),
+						onMouseenter: (n) => !e.disabled && (M.value = t),
+						onMousedown: d[5] ||= y(() => {}, ["prevent"]),
+						onClick: (t) => $e(e)
+					}, [u.multiple ? (m(), s("span", {
+						key: 0,
+						class: p(["mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-4 border transition-colors", L(e) ? "border-primary bg-primary text-white" : "border-muted/70 bg-surface"]),
+						"aria-hidden": "true"
+					}, [L(e) ? (m(), a(v(pe), {
+						key: 0,
+						class: "size-3",
+						"stroke-width": 3,
+						"aria-hidden": "true"
+					})) : o("", !0)], 2)) : o("", !0), c("span", Fe, [ie(i.$slots, "option", {
+						option: e,
+						selected: L(e),
+						active: t === M.value
+					}, () => [c("span", Ie, _(e.label), 1), e.description ? (m(), s("span", Le, _(e.description), 1)) : o("", !0)])])], 42, Pe))), 128))], 64))), 128)),
+					U.value ? (m(), s("li", {
 						key: 0,
-						id: H(K.value),
+						id: V(G.value),
 						role: "option",
 						"aria-selected": "false",
-						class: m(["flex cursor-pointer items-center gap-2.5 rounded-8 px-3 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", G.value === M.value && "bg-accent-hover"]),
 						"data-testid": "ac-select-create",
-						onMouseenter: f[6] ||= (e) => N.value = K.value,
-						onMousedown: f[7] ||= b(() => {}, ["prevent"]),
-						onClick: Qe
-					}, [u(y(me), {
+						onMouseenter: d[6] ||= (e) => M.value = G.value,
+						onMousedown: d[7] ||= y(() => {}, ["prevent"]),
+						onClick: et
+					}, [l(v(ge), {
 						class: "size-4 shrink-0 text-primary-strong",
 						"aria-hidden": "true"
-					}), c("span", Ie, v(d.createText) + " “" + v(U.value) + "”", 1)], 42, Fe)) : o("", !0),
-					!V.value.length && !W.value ? (h(), s("li", Le, [re(i.$slots, "empty", { query: M.value }, () => [l(v(M.value ? `${d.noResultText} for “${M.value}”` : "No options"), 1)])])) : o("", !0)
-				], 8, ke)], 6)) : o("", !0)]),
+					}), c("span", ze, _(u.createText) + " “" + _(H.value) + "”", 1)], 42, Re)) : o("", !0),
+					!B.value.length && !U.value ? (m(), s("li", Be, [ie(i.$slots, "empty", { query: j.value }, () => [ee(_(j.value ? `${u.noResultText} for “${j.value}”` : "No options"), 1)])])) : o("", !0)
+				], 8, Me)], 4)) : o("", !0)]),
 				_: 3
 			})]))
 		], 16));
 	}
 });
 //#endregion
-export { x as default };
+export { b as default };