@ac-design/design-system 1.0.2 → 2.0.0

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

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