@ac-design/design-system 2.7.0 → 2.8.0

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

@@ -1,19 +1,16 @@
 import e from "./AcSpinner.js";
 import { fixedFrame as t } from "./fixedFrame.js";
-import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as ee, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as te, nextTick as ne, normalizeClass as p, normalizeStyle as re, onBeforeUnmount as ie, onMounted as ae, openBlock as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as oe, toDisplayString as v, unref as y, useAttrs as se, useId as ce, useModel as le, useSlots as ue, vModelText as de, watch as b, withCtx as fe, withDirectives as pe, withModifiers as x } from "vue";
-import { Check as me, ChevronDown as he, ChevronUp as ge, Plus as _e, RefreshCw as ve, X as ye } from "@lucide/vue";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as ee, nextTick as te, normalizeClass as m, normalizeStyle as ne, onBeforeUnmount as re, onMounted as ie, openBlock as h, ref as g, renderList as _, renderSlot as v, resolveDynamicComponent as ae, toDisplayString as y, unref as b, useAttrs as oe, useId as se, useModel as ce, useSlots as le, vModelText as ue, watch as x, withCtx as de, withDirectives as fe, withModifiers as S } 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 be = {
-	key: 0,
-	class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
-}, xe = {
+var ye = {
 	key: 1,
 	class: "text-muted"
-}, Se = {
+}, be = {
 	key: 2,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, Ce = [
+}, xe = [
 	"id",
 	"tabindex",
 	"aria-expanded",
@@ -26,49 +23,59 @@ var be = {
 	"aria-required",
 	"aria-activedescendant",
 	"aria-busy"
-], we = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-2" }, Te = { class: "truncate" }, Ee = [
+], Se = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-2" }, Ce = { class: "truncate" }, we = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], De = {
+], Te = {
 	key: 2,
 	class: "truncate"
-}, Oe = {
+}, Ee = {
 	key: 3,
 	class: "truncate text-muted"
-}, ke = { class: "flex shrink-0 items-center gap-1 text-muted" }, Ae = ["disabled"], je = {
+}, 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"
-}, Me = {
+}, Ae = {
 	key: 0,
 	class: "border-b border-border p-3"
-}, Ne = ["aria-activedescendant"], Pe = ["aria-multiselectable", "aria-labelledby"], Fe = {
+}, je = ["aria-activedescendant"], Me = ["aria-multiselectable", "aria-labelledby"], Ne = {
 	key: 0,
 	role: "presentation",
 	class: "px-4 pt-2 pb-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-}, Ie = [
+}, Pe = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onMouseenter",
 	"onClick"
-], Le = { class: "min-w-0 flex-1" }, Re = { class: "block truncate" }, ze = {
+], Fe = { class: "min-w-0 flex-1" }, Ie = {
 	key: 0,
 	class: "block truncate text-xs font-normal text-muted"
-}, Be = ["id"], Ve = { class: "min-w-0 flex-1 truncate" }, He = {
+}, Le = ["id"], Re = { class: "min-w-0 flex-1 truncate" }, ze = {
 	key: 1,
 	role: "presentation",
 	class: "px-4 py-3 text-center text-base text-muted"
-}, Ue = /*@__PURE__*/ d({
+}, Be = 320, Ve = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "AcSelect",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ p({
 		options: {},
 		by: {
 			type: [String, Function],
 			default: void 0
 		},
 		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
 		placeholder: { default: "Select…" },
 		multiple: {
 			type: Boolean,
@@ -152,7 +159,7 @@ var be = {
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ f([
+	emits: /*@__PURE__*/ p([
 		"select",
 		"create",
 		"remove",
@@ -160,8 +167,8 @@ var be = {
 		"refresh",
 		"change"
 	], ["update:modelValue", "update:open"]),
-	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 = {
+	setup(f, { expose: p, emit: Ve }) {
+		let C = f, w = Ve, T = le(), E = ce(f, "modelValue"), D = (e) => E.value = e, O = ce(f, "open"), He = {
 			xs: {
 				field: "min-h-[26px] pr-1 pl-2 text-xs",
 				chips: ["py-0", "py-1"],
@@ -197,50 +204,51 @@ var be = {
 				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;
+		}, k = se(), A = oe(), Ue = a(() => ({
+			class: A.class,
+			style: A.style
+		})), We = a(() => {
+			let { class: e, style: t, ...n } = A;
 			return n;
-		}), 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({
+		}), Ge = `${k}-list`, j = `${k}-label`, Ke = `${k}-hint`, qe = `${k}-msg`, Je = g(null), M = g(null), N = g(null), Ye = g(null), P = g(""), F = g(-1), I = g({
 			left: 0,
-			width: 0,
+			minWidth: 0,
+			maxWidth: 320,
 			maxHeight: 288
-		}), I = a(() => {
-			let e = T.value;
-			if (e == null || e === "") return [];
+		}), L = a(() => {
+			let e = E.value;
+			if (e == null || e === "" && (C.multiple || !C.options.some((t) => R(t.value, 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 C.hideUnknownValues ? t.filter((e) => C.options.some((t) => R(t.value, e))) : t;
+		}), R = (e, t) => {
+			let n = C.by;
 			return typeof n == "function" ? n(e, t) : n && e && t && typeof e == "object" && typeof t == "object" ? e[n] === t[n] : e === t;
-		}, R = (e) => {
-			let t = S.by;
+		}, z = (e) => {
+			let t = C.by;
 			return String(typeof t == "string" && e && typeof e == "object" ? e[t] : e);
-		}, Qe = (e, t) => {
-			let n = S.by;
+		}, Xe = (e, t) => {
+			let n = C.by;
 			return e && typeof e == "object" ? typeof n == "string" ? String(e[n]) : `i${t}` : String(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)) ?? {
+		}, B = (e) => L.value.some((t) => R(t, e.value)), V = a(() => L.value.map((e) => C.options.find((t) => R(t.value, e)) ?? {
 			value: 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 = "";
+			label: z(e)
+		})), H = a(() => L.value.length > 0), Ze = a(() => H.value && (C.multiple || C.emptyValue === null || !R(L.value[0], C.emptyValue))), U = g(""), W = a(() => U.value || C.errorMsg);
+		function Qe() {
+			C.validateRequired && C.required && !H.value ? U.value = `This field is required. Please select ${C.multiple ? "at least one option" : "an option"}.` : U.value = "";
 		}
-		let et = (e) => {
+		let $e = (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 ?? ""));
-		}, 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(() => {
+		}, G = a(() => {
+			let e = P.value.trim().toLowerCase();
+			return $e(e ? C.options.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)) : C.options);
+		}), et = a(() => {
 			let e = [];
-			return W.value.forEach((t, n) => {
+			return G.value.forEach((t, n) => {
 				let r = t.group ?? "", i = e.find((e) => e.name === r);
 				i || e.push(i = {
 					name: r,
@@ -250,297 +258,312 @@ var be = {
 					index: n
 				});
 			}), e;
-		}), 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 || R(t.value).toLowerCase() === e), n = I.value.some((t) => R(t).toLowerCase() === e);
+		}), K = (e) => `${k}-opt-${e}`, q = a(() => P.value.trim()), J = a(() => {
+			let e = q.value.toLowerCase();
+			if (!C.creatable || !C.searchable || !e) return !1;
+			let t = C.options.some((t) => t.label.toLowerCase() === e || z(t.value).toLowerCase() === e), n = L.value.some((t) => z(t).toLowerCase() === e);
 			return !t && !n;
-		}), J = a(() => W.value.length + +!!q.value - 1), Y = a(() => W.value.length), nt = () => {
-			let e = j.value;
+		}), Y = a(() => G.value.length + +!!J.value - 1), tt = a(() => G.value.length), nt = () => {
+			let e = M.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;
-			F.value = l ? {
+			let n = e.getBoundingClientRect(), r = t(), i = r.bottom - n.bottom - 4 - 8, a = n.top - r.top - 4 - 8, [o, s] = C.placement === "top" ? [a, i] : [i, a], c = o < 180 && s > o, l = C.placement === "top" ? !c : c, u = Math.max(n.width, Math.min(Be, r.width - 16)), d = Math.min(Math.max(N.value?.offsetWidth ?? n.width, n.width), u), f = n.left - r.left, p = {
+				left: f + d > r.width - 8 ? Math.max(8, n.right - r.left - d) : f,
+				minWidth: n.width,
+				maxWidth: u
+			};
+			I.value = l ? {
+				...p,
 				bottom: r.bottom - n.top + 4,
-				left: n.left - r.left,
-				width: n.width,
 				maxHeight: Math.min(288, a)
 			} : {
+				...p,
 				top: n.bottom + 4 - r.top,
-				left: n.left - r.left,
-				width: n.width,
 				maxHeight: Math.min(288, i)
 			};
 		}, X = (e = 0, t = 1) => {
-			for (let n = e; n >= 0 && n <= J.value; n += t) if (!W.value[n]?.disabled) return n;
+			for (let n = e; n >= 0 && n <= Y.value; n += t) if (!G.value[n]?.disabled) return n;
 			return -1;
 		}, rt = () => {
-			S.disabled || S.loading || S.readonly || D.value || (D.value = !0);
+			C.disabled || C.loading || C.readonly || O.value || (O.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();
+			P.value = "", nt();
+			let e = G.value.findIndex((e) => B(e));
+			F.value = e >= 0 ? e : X(), document.addEventListener("pointerdown", mt, !0), window.addEventListener("scroll", $, !0), window.addEventListener("resize", $), await te(), nt(), C.searchable && Ye.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) => {
+			O.value && (O.value = !1, F.value = -1, e && M.value?.focus());
+		}, at = () => O.value ? Z() : rt(), ot = (e) => {
 			if (!e.disabled) {
-				if (S.multiple) {
-					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();
+				if (C.multiple) {
+					let t = [...L.value], n = t.findIndex((t) => R(t, e.value));
+					n >= 0 ? (t.splice(n, 1), w("remove", e)) : (t.push(e.value), w("select", e)), D(t);
+				} else D(e.value), w("select", e), Z();
 			}
 		}, st = (e) => {
-			E(S.multiple ? I.value.filter((t) => !L(t, e.value)) : S.emptyValue), C("remove", e);
+			D(C.multiple ? L.value.filter((t) => !R(t, e.value)) : C.emptyValue), w("remove", e);
 		}, ct = () => {
-			let e = K.value;
-			if (!q.value || !e) return;
+			let e = q.value;
+			if (!J.value || !e) return;
 			let t = e, n = {
 				value: t,
 				label: e
 			};
-			S.multiple ? (E([...I.value, t]), N.value = "") : (E(t), Z()), C("select", n), C("create", e);
+			C.multiple ? (D([...L.value, t]), P.value = "") : (D(t), Z()), w("select", n), w("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;
+			V.value.forEach((e) => w("remove", e)), D(C.multiple ? [] : C.emptyValue), M.value?.focus();
+		}, ut = "", dt, Q = () => te(() => N.value?.querySelector(`#${CSS.escape(K(F.value))}`)?.scrollIntoView({ block: "nearest" })), ft = (e) => {
+			let t = Y.value + 1;
 			if (!t) 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();
+			let n = F.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, G.value[n]?.disabled); r++);
+			F.value = n, Q();
 		}, pt = (e) => {
-			if (S.disabled || S.readonly) return;
+			if (C.disabled || C.readonly) return;
 			let t = e.key;
-			if (!D.value) {
+			if (!O.value) {
 				[
 					"Enter",
 					" ",
 					"ArrowDown",
 					"ArrowUp"
-				].includes(t) ? (e.preventDefault(), rt()) : t === "Backspace" && S.multiple && V.value && e.target === j.value && st(B.value[B.value.length - 1]);
+				].includes(t) ? (e.preventDefault(), rt()) : t === "Backspace" && C.multiple && H.value && e.target === M.value && st(V.value[V.value.length - 1]);
 				return;
 			}
 			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) {
+			else if (t === "Home") e.preventDefault(), F.value = X(), Q();
+			else if (t === "End") e.preventDefault(), F.value = X(Y.value, -1), Q();
+			else if (t === "Enter" || t === " " && !C.searchable) {
 				e.preventDefault();
-				let t = W.value[P.value];
-				t ? ot(t) : q.value && ct();
+				let t = G.value[F.value];
+				t ? ot(t) : J.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) {
+			else if (!C.searchable && t.length === 1 && !e.metaKey && !e.ctrlKey) {
 				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());
+				let e = G.value.findIndex((e) => !e.disabled && e.label.toLowerCase().startsWith(ut));
+				e >= 0 && (F.value = e, Q());
 			}
 		}, mt = (e) => {
 			let t = e.target;
-			Xe.value?.contains(t) || M.value?.contains(t) || Z(!1);
+			Je.value?.contains(t) || N.value?.contains(t) || Z(!1);
 		}, $ = (e) => {
-			e?.target instanceof Node && M.value?.contains(e.target) || nt();
+			e?.target instanceof Node && N.value?.contains(e.target) || nt();
 		}, ht = () => {
 			document.removeEventListener("pointerdown", mt, !0), window.removeEventListener("scroll", $, !0), window.removeEventListener("resize", $);
 		};
-		b(D, (e) => {
+		x(O, (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({
+			F.value = -1, ht(), Qe();
+		}), x(() => E.value, (e) => {
+			Qe(), w("change", e);
+		}), x(P, (e) => {
+			w("search", e), F.value = X();
+		}), ie(() => {
+			C.initEmptyArray && C.multiple && !E.value && D([]), O.value && it();
+		}), re(ht);
+		let gt = g(!1), _t = a(() => O.value || gt.value), vt = a(() => [C.hint && Ke, W.value && qe].filter(Boolean).join(" ") || void 0), yt = a(() => !C.multiple && V.value[0]?.label || ""), bt = a(() => !C.multiple && (T.selected || T.content) && V.value[0] || null), xt = a(() => !!(C.label || C.readonly || T["label-icon"] || T["label-extra"])), St = a(() => He[C.size] ?? He.normal), Ct = a(() => C.readonly ? "bg-surface-muted" : C.variant === "soft" ? "bg-accent" : C.variant === "ghost" ? "bg-transparent" : "bg-background"), wt = a(() => C.variant !== "outline");
+		return p({ focus: () => M.value?.focus() }), (t, a) => (h(), c("div", ee({
 			ref_key: "root",
-			ref: Xe
-		}, Ge.value, {
-			class: ["w-full", d.disabled && "opacity-50"],
+			ref: Je
+		}, Ue.value, {
+			class: ["[:where(&)]:w-full", f.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-select"
 		}), [
-			xt.value ? (m(), c("div", be, [
-				_(t.$slots, "label-icon"),
-				d.label ? (m(), c("label", {
+			xt.value ? (h(), c("div", {
+				key: 0,
+				class: m(["mb-2 flex items-center gap-1 text-base font-medium text-heading", f.labelClass])
+			}, [
+				v(t.$slots, "label-icon"),
+				f.label ? (h(), 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", {
+					id: j,
+					onClick: a[0] ||= (e) => M.value?.focus()
+				}, y(f.label), 1)) : s("", !0),
+				f.readonly ? (h(), c("span", ye, "(read only)")) : s("", !0),
+				v(t.$slots, "label-extra"),
+				f.required ? (h(), c("span", be, "*")) : s("", !0)
+			], 2)) : s("", !0),
+			f.hint ? (h(), c("p", {
 				key: 1,
-				id: Je,
+				id: Ke,
 				class: "mb-2 text-base text-muted"
-			}, v(d.hint), 1)) : s("", !0),
-			l("div", te({
-				id: `${y(O)}-trigger`,
+			}, y(f.hint), 1)) : s("", !0),
+			l("div", ee({
+				id: `${b(k)}-trigger`,
 				ref_key: "trigger",
-				ref: j
-			}, Ke.value, {
+				ref: M
+			}, We.value, {
 				role: "combobox",
-				tabindex: d.disabled ? -1 : 0,
+				tabindex: f.disabled ? -1 : 0,
 				"aria-haspopup": "listbox",
-				"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-expanded": O.value,
+				"aria-controls": Ge,
+				"aria-labelledby": f.label ? j : void 0,
+				"aria-label": f.label ? void 0 : b(A)["aria-label"] ?? f.placeholder,
 				"aria-describedby": vt.value,
-				"aria-disabled": d.disabled || void 0,
-				"aria-invalid": !!U.value || void 0,
-				"aria-readonly": d.readonly || void 0,
-				"aria-required": d.required || void 0,
-				"aria-activedescendant": D.value && !d.searchable && P.value >= 0 ? G(P.value) : void 0,
-				"aria-busy": d.refreshing || void 0,
+				"aria-disabled": f.disabled || void 0,
+				"aria-invalid": !!W.value || void 0,
+				"aria-readonly": f.readonly || void 0,
+				"aria-required": f.required || void 0,
+				"aria-activedescendant": O.value && !f.searchable && F.value >= 0 ? K(F.value) : void 0,
+				"aria-busy": f.refreshing || void 0,
 				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 ? [
+					f.multiple && H.value && St.value.chips[+!!f.looseChips],
+					f.disabled || f.loading || f.readonly ? "cursor-not-allowed" : "cursor-pointer",
+					f.highlight && "ring-2 ring-primary/20 ring-offset-2 ring-offset-surface",
+					W.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"]
+						f.variant === "soft" && !f.disabled && "hover:bg-accent-hover"
+					] : _t.value ? "focus-ring" : ["border-border", !f.disabled && !f.readonly && "hover:border-accent-active"]
 				]],
 				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),
+			}), [l("div", Se, [f.multiple && H.value ? (h(!0), c(n, { key: 0 }, _(V.value, (e, t) => (h(), c("span", {
+				key: Xe(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", Te, v(e.label), 1), l("button", {
+			}, [l("span", Ce, y(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) => st(e), ["stop"])
-			}, [u(y(ye), {
+				disabled: f.disabled,
+				onClick: S((t) => st(e), ["stop"])
+			}, [d(b(ve), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, Ee)]))), 128)) : bt.value ? (m(), c("span", {
+			})], 8, we)]))), 128)) : bt.value ? (h(), c("span", {
 				key: 1,
-				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, {
+				class: m(["min-w-0 flex-1", St.value.custom])
+			}, [v(t.$slots, "selected", { option: bt.value }, () => [v(t.$slots, "content", { option: bt.value })])], 2)) : yt.value ? (h(), c("span", Te, y(yt.value), 1)) : (h(), c("span", Ee, y(f.placeholder), 1))]), l("span", De, [
+				f.loading ? (h(), o(e, {
 					key: 0,
 					class: "text-primary"
-				})) : d.refreshable && !(d.disabled && d.hideRefreshWhenDisabled) ? (m(), c("button", {
+				})) : f.refreshable && !(f.disabled && f.hideRefreshWhenDisabled) ? (h(), 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",
 					"aria-label": "Refresh options",
-					disabled: d.disabled,
-					onClick: a[1] ||= x((e) => C("refresh"), ["stop"])
-				}, [u(y(ve), {
-					class: p(["size-4", d.refreshing && "motion-safe:animate-spin"]),
+					disabled: f.disabled,
+					onClick: a[1] ||= S((e) => w("refresh"), ["stop"])
+				}, [d(b(_e), {
+					class: m(["size-4", f.refreshing && "motion-safe:animate-spin"]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])], 8, Ae)) : s("", !0),
-				d.clearable && V.value && !d.disabled && !d.loading && !d.readonly ? (m(), c("button", {
+				}, null, 8, ["class"])], 8, Oe)) : s("", !0),
+				f.clearable && Ze.value && !f.disabled && !f.loading && !f.readonly ? (h(), 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(lt, ["stop"])
-				}, [u(y(ye), {
+					onClick: S(lt, ["stop"])
+				}, [d(b(ve), {
 					class: "size-4",
 					"aria-hidden": "true"
 				})])) : s("", !0),
-				l("span", je, [(m(), o(oe(D.value ? y(ge) : y(he)), { class: "size-4" }))])
-			])], 16, Ce),
-			U.value ? (m(), c("p", {
+				l("span", ke, [(h(), o(ae(O.value ? b(he) : b(me)), { class: "size-4" }))])
+			])], 16, xe),
+			W.value ? (h(), c("p", {
 				key: 2,
-				id: Ye,
+				id: qe,
 				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, v(U.value), 1)) : s("", !0),
-			(m(), o(r, { to: "body" }, [u(i, {
+			}, y(W.value), 1)) : s("", !0),
+			(h(), o(r, { to: "body" }, [d(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(() => [D.value ? (m(), c("div", {
+				default: de(() => [O.value ? (h(), c("div", {
 					key: 0,
 					ref_key: "panel",
-					ref: M,
-					class: "fixed z-[90] flex flex-col overflow-hidden rounded-10 border border-border bg-background shadow-lg",
-					style: re({
-						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`
+					ref: N,
+					class: "fixed z-[90] flex w-max flex-col overflow-hidden rounded-10 border border-border bg-background shadow-lg",
+					style: ne({
+						top: I.value.top === void 0 ? void 0 : `${I.value.top}px`,
+						bottom: I.value.bottom === void 0 ? void 0 : `${I.value.bottom}px`,
+						left: `${I.value.left}px`,
+						minWidth: `${I.value.minWidth}px`,
+						maxWidth: `${I.value.maxWidth}px`,
+						maxHeight: `${I.value.maxHeight}px`
 					}),
 					"data-ac-ds": "",
 					"data-testid": "ac-select-panel"
-				}, [d.searchable ? (m(), c("div", Me, [pe(l("input", {
+				}, [f.searchable ? (h(), c("div", Ae, [fe(l("input", {
 					ref_key: "searchInput",
-					ref: Ze,
-					"onUpdate:modelValue": a[4] ||= (e) => N.value = e,
+					ref: Ye,
+					"onUpdate:modelValue": a[4] ||= (e) => P.value = e,
 					type: "text",
 					placeholder: "Search…",
 					"aria-label": "Search options",
-					"aria-controls": A,
-					"aria-activedescendant": P.value >= 0 ? G(P.value) : void 0,
+					"aria-controls": Ge,
+					"aria-activedescendant": F.value >= 0 ? K(F.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: pt
-				}, null, 40, Ne), [[de, N.value]])])) : s("", !0), l("ul", {
-					id: A,
+				}, null, 40, je), [[ue, P.value]])])) : s("", !0), l("ul", {
+					id: Ge,
 					role: "listbox",
-					"aria-multiselectable": d.multiple || void 0,
-					"aria-labelledby": d.label ? qe : void 0,
+					"aria-multiselectable": f.multiple || void 0,
+					"aria-labelledby": f.label ? j : void 0,
 					class: "ac-scrollbar max-h-60 min-h-0 flex-1 p-1"
 				}, [
-					(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),
+					(h(!0), c(n, null, _(et.value, (e) => (h(), c(n, { key: e.name }, [e.name ? (h(), c("li", Ne, y(e.name), 1)) : s("", !0), (h(!0), c(n, null, _(e.items, ({ option: e, index: n }) => (h(), c("li", {
+						id: K(n),
+						key: Xe(e.value, n),
 						role: "option",
-						"aria-selected": z(e),
+						"aria-selected": B(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 === P.value ? "bg-accent-hover" : z(e) && "bg-accent"]]),
-						onMouseenter: (t) => !e.disabled && (P.value = n),
-						onMousedown: a[5] ||= x(() => {}, ["prevent"]),
+						class: m(["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 === F.value ? "bg-accent-hover" : B(e) && "bg-accent"]]),
+						onMouseenter: (t) => !e.disabled && (F.value = n),
+						onMousedown: a[5] ||= S(() => {}, ["prevent"]),
 						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", z(e) ? "border-primary bg-primary text-white" : "border-muted/70 bg-surface"]),
-						"aria-hidden": "true"
-					}, [z(e) ? (m(), o(y(me), {
-						key: 0,
-						class: "size-3",
-						"stroke-width": 3,
-						"aria-hidden": "true"
-					})) : s("", !0)], 2)) : s("", !0), l("span", Le, [_(t.$slots, "option", {
-						option: e,
-						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", {
+					}, [
+						f.multiple ? (h(), c("span", {
+							key: 0,
+							class: m(["mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-4 border transition-colors", B(e) ? "border-primary bg-primary text-white" : "border-muted/70 bg-surface"]),
+							"aria-hidden": "true"
+						}, [B(e) ? (h(), o(b(pe), {
+							key: 0,
+							class: "size-3",
+							"stroke-width": 3,
+							"aria-hidden": "true"
+						})) : s("", !0)], 2)) : s("", !0),
+						l("span", Fe, [v(t.$slots, "option", {
+							option: e,
+							selected: B(e),
+							active: n === F.value
+						}, () => [v(t.$slots, "content", { option: e }, () => [l("span", { class: m(["block truncate", !f.multiple && B(e) && "font-medium text-primary-strong"]) }, y(e.label), 3), e.description ? (h(), c("span", Ie, y(e.description), 1)) : s("", !0)])])]),
+						!f.multiple && !t.$slots.option && B(e) ? (h(), o(b(pe), {
+							key: 1,
+							class: "mt-0.5 size-4 shrink-0 text-primary",
+							"aria-hidden": "true",
+							"data-testid": "ac-select-check"
+						})) : s("", !0)
+					], 42, Pe))), 128))], 64))), 128)),
+					J.value ? (h(), c("li", {
 						key: 0,
-						id: G(Y.value),
+						id: K(tt.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", Y.value === P.value && "bg-accent-hover"]),
+						class: m(["flex cursor-pointer items-center gap-2.5 rounded-6 px-4 py-2 text-base text-heading transition-colors", tt.value === F.value && "bg-accent-hover"]),
 						"data-testid": "ac-select-create",
-						onMouseenter: a[6] ||= (e) => P.value = Y.value,
-						onMousedown: a[7] ||= x(() => {}, ["prevent"]),
+						onMouseenter: a[6] ||= (e) => F.value = tt.value,
+						onMousedown: a[7] ||= S(() => {}, ["prevent"]),
 						onClick: ct
-					}, [u(y(_e), {
+					}, [d(b(ge), {
 						class: "size-4 shrink-0 text-primary-strong",
 						"aria-hidden": "true"
-					}), 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)]),
+					}), l("span", Re, y(f.createText) + " “" + y(q.value) + "”", 1)], 42, Le)) : s("", !0),
+					!G.value.length && !J.value ? (h(), c("li", ze, [v(t.$slots, "empty", { query: P.value }, () => [u(y(f.emptyText || (P.value ? `${f.noResultText} for “${P.value}”` : "No options")), 1)])])) : s("", !0)
+				], 8, Me)], 4)) : s("", !0)]),
 				_: 3
 			})]))
 		], 16));
 	}
 });
 //#endregion
-export { Ue as default };
+export { Ve as default };