@vielzeug/refine 1.1.3 → 1.3.1

package/dist/combobox.js

@@ -3,10 +3,12 @@ import { lifecycleSignal as n } from "./headless/ore.js";
 import { createChoiceField as r } from "./headless/choice-field.js";
 import { createInteraction as i } from "./headless/keyboard.js";
 import { createOptionList as ee } from "./headless/option-list.js";
-import { FORM_CTX as te, useFormContext as ne } from "./inputs/shared/form-context.js";
-import { filterOptions as a, getCreatableLabel as re, makeCreatableValue as ie, parseSlottedOptions as ae } from "./inputs/combobox/combobox-options.js";
-import o from "./inputs/combobox/combobox.css?inline.js";
-import { define as s, html as c, inject as oe, prop as l, ref as se, useField as ce } from "@vielzeug/ore";
+import { useField as te } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import { FORM_CTX as ne, useFormContext as re } from "./inputs/shared/form-context.js";
+import { filterOptions as a, getCreatableLabel as ie, makeCreatableValue as ae, parseSlottedOptions as oe } from "./inputs/combobox/combobox-options.js";
+import o from "./inputs/combobox/combobox.css.js";
+import { bind as se, define as s, getHost as ce, html as c, inject as le, onCleanup as ue, onElement as de, prop as l, ref as fe, useEmit as pe, watchEffect as me } from "@vielzeug/ore";
 import { computed as u, signal as d } from "@vielzeug/ripple";
 //#region src/inputs/combobox/combobox.ts
 var f = "ore-combobox";
@@ -33,69 +35,69 @@ s(f, {
 		value: l.string(),
 		variant: l.string()
 	},
-	setup(e, { bind: t, el: o, emit: s, onCleanup: l, onElement: f, watch: p }) {
-		let m = oe(te), h = ne(t, e, m), g = d(""), _ = null, v = null, y = null, b = null, x = se(), S = n(l), C = null, w = r({
-			disabled: h.disabled,
+	setup(e) {
+		let t = ce(), o = pe(), s = me, l = le(ne), f = re(e, l), p = d(""), m = null, h = null, g = null, _ = null, v = fe(), y = n(ue), b = null, x = r({
+			disabled: f.disabled,
 			error: e.error,
-			getFormField: () => C,
+			getFormField: () => b,
 			helper: e.helper,
 			label: e.label,
 			labelPlacement: e["label-placement"],
 			multiple: e.multiple,
 			prefix: "combobox",
-			signal: S,
-			validateOn: m?.validateOn,
+			signal: y,
+			validateOn: l?.validateOn,
 			value: e.value
-		}), T = d([]), E = ee({
-			getBoundary: () => o,
-			getFocusedOptionElement: () => y?.querySelector("[data-focused]") ?? null,
-			getItems: () => T.value,
-			getOptionId: (e) => `${w.fieldId}-opt-${e}`,
-			getPanel: () => y,
-			getReference: () => v,
-			getTrigger: () => _,
-			isDisabled: () => w.disabled.value,
+		}), S = d([]), C = ee({
+			getBoundary: () => t,
+			getFocusedOptionElement: () => g?.querySelector("[data-focused]") ?? null,
+			getItems: () => S.value,
+			getOptionId: (e) => `${x.fieldId}-opt-${e}`,
+			getPanel: () => g,
+			getReference: () => h,
+			getTrigger: () => m,
+			isDisabled: () => x.disabled.value,
 			onClose: (e) => {
-				s("close", { reason: e }), S.aborted || be(), w.triggerValidation("blur");
+				o("close", { reason: e }), y.aborted || Te(), x.triggerValidation("blur");
 			},
-			onOpen: (e) => s("open", { reason: e }),
+			onOpen: (e) => o("open", { reason: e }),
 			restoreFocus: !1,
-			signal: S
-		}), { disabled: D, fieldId: O, selectedValues: k, triggerValidation: A } = w;
-		C = ce({
-			disabled: w.disabled,
+			signal: y
+		}), { disabled: w, fieldId: T, selectedValues: E, triggerValidation: D } = x;
+		b = te({
+			disabled: x.disabled,
 			toFormValue: (e) => e,
-			value: w.formValue
+			value: x.formValue
 		});
-		let { focusedIndex: j, isOpen: M, scrollFocusedIntoView: le, updatePosition: ue } = E, N = () => !!e.multiple.value, de = () => !!e.creatable.value, fe = () => !!e["no-filter"].value;
-		t({ attr: {
-			open: () => M.value ? !0 : void 0,
-			size: h.size,
-			variant: h.variant
+		let { focusedIndex: O, isOpen: k, scrollFocusedIntoView: he, updatePosition: ge } = C, A = () => !!e.multiple.value, _e = () => !!e.creatable.value, j = () => !!e["no-filter"].value;
+		se({ attr: {
+			open: () => k.value ? !0 : void 0,
+			size: f.size,
+			variant: f.variant
 		} });
-		let P = null, F = !1, I = u(() => k.value[0] ?? "");
-		Object.defineProperty(o, "value", {
+		let M = null, N = !1, P = u(() => E.value[0] ?? "");
+		Object.defineProperty(t, "value", {
 			configurable: !0,
-			get: () => N() ? k.value : I.value,
+			get: () => A() ? E.value : P.value,
 			set: (e) => {
 				let t = e;
 				if (Array.isArray(t)) {
-					w.setValues(t.map((e) => String(e ?? "")));
+					x.setValues(t.map((e) => String(e ?? "")));
 					return;
 				}
 				if (t == null || t === "") {
-					w.clear();
+					x.clear();
 					return;
 				}
-				w.setValues([String(t)]);
+				x.setValues([String(t)]);
 			}
 		});
-		let pe = () => k.value.length > 0;
-		function L() {
-			_?.focus();
+		let ve = () => E.value.length > 0;
+		function F() {
+			m?.focus();
 		}
-		let R = d([]), z = d([]), me = () => !!e.loading.value;
-		function he(e) {
+		let I = d([]), L = d([]), ye = () => !!e.loading.value;
+		function be(e) {
 			return {
 				disabled: !!e.disabled,
 				iconEl: e.iconEl ?? null,
@@ -103,151 +105,151 @@ s(f, {
 				value: e.value
 			};
 		}
-		let B = u(() => {
-			let t = e.options.value, n = Array.isArray(t) ? t.map(he) : R.value;
-			return z.value.length === 0 ? n : [...n, ...z.value];
-		}), V = {
+		let R = u(() => {
+			let t = e.options.value, n = Array.isArray(t) ? t.map(be) : I.value;
+			return L.value.length === 0 ? n : [...n, ...L.value];
+		}), z = {
 			clear: () => {
-				w.clear();
+				x.clear();
 			},
 			remove: (e) => {
-				w.removeValue(e);
+				x.removeValue(e);
 			},
 			select: (e) => {
-				w.selectValue(e);
+				x.selectValue(e);
 			},
 			toggle: (e) => {
-				w.toggleValue(e);
+				x.toggleValue(e);
 			}
 		};
-		function H(e = Array.from(o.children)) {
-			if (R.value = ae(e), !N()) {
-				let e = B.value.find((e) => e.value === I.value);
-				g.value = e?.label ?? I.value;
+		function B(e = Array.from(t.children)) {
+			if (I.value = oe(e), !A()) {
+				let e = R.value.find((e) => e.value === P.value);
+				p.value = e?.label ?? P.value;
 			}
 		}
-		H(), p(() => {
-			let e = a(B.value, g.value, fe());
-			T.value = N() ? e.filter((e) => !k.value.includes(e.value)) : e;
+		B(), s(() => {
+			let e = a(R.value, p.value, j());
+			S.value = A() ? e.filter((e) => !E.value.includes(e.value)) : e;
 		});
-		let U = u(() => re(g.value, de(), T.value)), ge = () => N() && k.value.length > 0 ? "" : e.placeholder.value || "", _e = u(() => k.value), ve = u(() => k.value.map((e) => B.value.find((t) => t.value === e)?.label ?? e));
-		function W(e) {
-			s("change", {
-				labels: ve.value,
+		let V = u(() => ie(p.value, _e(), S.value)), xe = () => A() && E.value.length > 0 ? "" : e.placeholder.value || "", Se = u(() => E.value), Ce = u(() => E.value.map((e) => R.value.find((t) => t.value === e)?.label ?? e));
+		function H(e) {
+			o("change", {
+				labels: Ce.value,
 				originalEvent: e,
-				values: _e.value
+				values: Se.value
 			});
 		}
-		function ye(e) {
+		function we(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (V.remove(t), W(e), A("change"));
+			t !== void 0 && (z.remove(t), H(e), D("change"));
 		}
-		function be() {
-			if (!N()) {
-				let e = B.value.find((e) => e.value === I.value);
-				F = !0, g.value = e?.label ?? "", Promise.resolve().then(() => {
-					F = !1;
+		function Te() {
+			if (!A()) {
+				let e = R.value.find((e) => e.value === P.value);
+				N = !0, p.value = e?.label ?? "", Promise.resolve().then(() => {
+					N = !1;
 				});
 				return;
 			}
-			g.value = "";
+			p.value = "";
 		}
-		p(() => {
-			if (M.value && !N() && I.value && j.value === -1 && g.value === "") {
-				let e = T.value.findIndex((e) => e.value === I.value);
-				e >= 0 && E.set(e);
+		s(() => {
+			if (k.value && !A() && P.value && O.value === -1 && p.value === "") {
+				let e = S.value.findIndex((e) => e.value === P.value);
+				e >= 0 && C.set(e);
 			}
 		});
-		function G(e = !0, t = "programmatic") {
-			if (e && (P = g.value, g.value = ""), !N() && I.value) {
-				let e = a(B.value, "", fe()).findIndex((e) => e.value === I.value);
-				e >= 0 && E.set(e);
+		function U(e = !0, t = "programmatic") {
+			if (e && (M = p.value, p.value = ""), !A() && P.value) {
+				let e = a(R.value, "", j()).findIndex((e) => e.value === P.value);
+				e >= 0 && C.set(e);
 			}
-			E.open(t), !N() && I.value && j.value >= 0 && requestAnimationFrame(() => {
-				le();
+			C.open(t), !A() && P.value && O.value >= 0 && requestAnimationFrame(() => {
+				he();
 			});
 		}
-		function K(e = "programmatic") {
-			E.close(e);
+		function W(e = "programmatic") {
+			C.close(e);
 		}
-		let xe = i({
-			disabled: D,
+		let Ee = i({
+			disabled: w,
 			onPress: () => {
-				M.value || G(!0, "click"), L();
+				k.value || U(!0, "click"), F();
 			}
-		}), Se = i({
-			disabled: D,
+		}), De = i({
+			disabled: w,
 			keys: ["Enter"],
 			onPress: (e) => {
-				let t = T.value;
-				M.value && j.value >= 0 && j.value < t.length ? q(t[j.value], e) : M.value && j.value === -1 && U.value ? Ee(g.value, e) : M.value || G(!0, "keyboard");
+				let t = S.value;
+				k.value && O.value >= 0 && O.value < t.length ? G(t[O.value], e) : k.value && O.value === -1 && V.value ? X(p.value, e) : k.value || U(!0, "keyboard");
 			}
 		});
-		function q(t, n) {
-			t.disabled || (N() ? (V.toggle(t.value), g.value = "", W(n), A("change"), e.autoclose.value && K(), L(), requestAnimationFrame(() => L())) : (V.select(t.value), g.value = t.label, W(n), A("change"), K(), L()));
+		function G(t, n) {
+			t.disabled || (A() ? (z.toggle(t.value), p.value = "", H(n), D("change"), e.autoclose.value && W(), F(), requestAnimationFrame(() => F())) : (z.select(t.value), p.value = t.label, H(n), D("change"), W(), F()));
 		}
-		function J(e) {
+		function K(e) {
 			let t = e.getAttribute("data-option-index"), n = t ? Number(t) : -1;
-			if (Number.isInteger(n) && n >= 0 && n < T.value.length) return T.value[n] ?? null;
+			if (Number.isInteger(n) && n >= 0 && n < S.value.length) return S.value[n] ?? null;
 			let r = e.getAttribute("data-option-value");
 			if (r) {
-				let e = T.value.find((e) => e.value === r);
+				let e = S.value.find((e) => e.value === r);
 				if (e) return e;
 			}
 			let i = e.querySelector("span")?.textContent?.trim() ?? e.textContent?.trim() ?? "";
-			return i ? T.value.find((e) => e.label === i || e.value === i) ?? null : null;
+			return i ? S.value.find((e) => e.label === i || e.value === i) ?? null : null;
 		}
-		function Ce(e) {
-			e.stopPropagation(), V.clear(), g.value = "", W(e), A("change"), L();
+		function Oe(e) {
+			e.stopPropagation(), z.clear(), p.value = "", H(e), D("change"), F();
 		}
-		function Y(e) {
+		function q(e) {
 			let t = e.target, n = t.value;
-			if (!F && n !== g.value) {
-				if (g.value = n, !N()) {
-					let e = k.value[0], t = e ? B.value.find((t) => t.value === e)?.label ?? e : "";
-					n === "" && P === t && (P = null);
+			if (!N && n !== p.value) {
+				if (p.value = n, !A()) {
+					let e = E.value[0], t = e ? R.value.find((t) => t.value === e)?.label ?? e : "";
+					n === "" && M === t && (M = null);
 				}
-				E.navigate("first"), M.value || G(!1, "keyboard"), s("search", { query: t.value });
+				C.navigate("first"), k.value || U(!1, "keyboard"), o("search", { query: t.value });
 			}
 		}
-		function we() {}
-		function Te(e) {
-			if (!D.value && !E.handleKeydown(e)) switch (e.key) {
+		function J() {}
+		function Y(e) {
+			if (!w.value && !C.handleKeydown(e)) switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), M.value ? E.navigate("next") : (G(!0, "keyboard"), E.navigate("first"));
+					e.preventDefault(), k.value ? C.navigate("next") : (U(!0, "keyboard"), C.navigate("first"));
 					break;
 				case "ArrowUp":
-					e.preventDefault(), M.value ? E.navigate("prev") : G(!0, "keyboard");
+					e.preventDefault(), k.value ? C.navigate("prev") : U(!0, "keyboard");
 					break;
 				case "Backspace":
-					N() && !g.value && k.value.length > 0 && (w.removeValue(k.value[k.value.length - 1] ?? ""), W(e), A("change"));
+					A() && !p.value && E.value.length > 0 && (x.removeValue(E.value[E.value.length - 1] ?? ""), H(e), D("change"));
 					break;
 				case "Enter":
-					Se.handleKeydown(e);
+					De.handleKeydown(e);
 					break;
 				case "Tab":
-					K("programmatic");
+					W("programmatic");
 					break;
 				default: break;
 			}
 		}
-		function Ee(e, t) {
+		function X(e, t) {
 			let n = e.trim();
 			if (!n) return;
 			let r = {
 				disabled: !1,
 				iconEl: null,
 				label: n,
-				value: ie(n)
+				value: ae(n)
 			};
-			z.value = [...z.value, r], q(r, t);
+			L.value = [...L.value, r], G(r, t);
 		}
-		let De = (() => {
+		let ke = (() => {
 			let e = new MutationObserver(() => {
-				H();
+				B();
 			});
-			return e.observe(o, {
+			return e.observe(t, {
 				attributeFilter: [
 					"disabled",
 					"label",
@@ -257,106 +259,106 @@ s(f, {
 				childList: !0,
 				subtree: !0
 			}), () => e.disconnect();
-		})(), Oe = (e) => {
+		})(), Ae = (e) => {
 			let t = e.target;
 			if (!(t instanceof Element)) return;
 			let n = t.closest(".option");
 			if (!n) return;
-			let r = J(n);
+			let r = K(n);
 			if (!r || r.disabled) return;
-			let i = T.value.findIndex((e) => e.value === r.value);
-			i >= 0 && E.set(i);
-		}, X = o.shadowRoot;
-		X && X.addEventListener("pointermove", Oe);
-		let Z = (e) => {
+			let i = S.value.findIndex((e) => e.value === r.value);
+			i >= 0 && C.set(i);
+		}, Z = t.shadowRoot;
+		Z && Z.addEventListener("pointermove", Ae);
+		let je = (e) => {
 			let t = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
 				if (t.closest(".no-results-create")) {
-					e.preventDefault(), e.stopPropagation(), Ee(g.value, e);
+					e.preventDefault(), e.stopPropagation(), X(p.value, e);
 					return;
 				}
 				let n = t.closest(".option");
 				if (!n) return;
 				e.preventDefault(), e.stopPropagation();
-				let r = J(n);
-				r && q(r, e);
+				let r = K(n);
+				r && G(r, e);
 			}, n = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
 				let n = t.closest(".option");
 				if (!n) return;
-				let r = J(n);
+				let r = K(n);
 				if (!r) return;
-				let i = T.value.findIndex((e) => e.value === r.value);
-				i >= 0 && E.set(i);
+				let i = S.value.findIndex((e) => e.value === r.value);
+				i >= 0 && C.set(i);
 			};
 			return e.addEventListener("click", t), e.addEventListener("pointermove", n), () => {
 				e.removeEventListener("click", t), e.removeEventListener("pointermove", n);
 			};
-		}, Q = null, $ = null, ke = (e) => {
-			b = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = Z(e), $ = e));
-		}, Ae = () => {
-			b && ($ === b && Q || (Q?.(), Q = Z(b), $ = b));
+		}, Q = null, $ = null, Me = (e) => {
+			_ = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = je(e), $ = e));
+		}, Ne = () => {
+			_ && ($ === _ && Q || (Q?.(), Q = je(_), $ = _));
 		};
-		return p(() => {
-			Ae(), M.value ? (y && "showPopover" in y && !y.matches(":popover-open") && y.showPopover(), ue()) : y && "hidePopover" in y && y.matches(":popover-open") && y.hidePopover();
-		}), f(x, (e) => {
-			v = e;
+		return s(() => {
+			Ne(), k.value ? (g && "showPopover" in g && !g.matches(":popover-open") && g.showPopover(), ge()) : g && "hidePopover" in g && g.matches(":popover-open") && g.hidePopover();
+		}), de(v, (e) => {
+			h = e;
 			let t = e.shadowRoot?.querySelector("input") ?? null;
 			if (!t) return;
-			_ = t, t.setAttribute("role", "combobox"), t.setAttribute("autocomplete", "off"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("spellcheck", "false"), t.setAttribute("aria-controls", `${O}-listbox`);
+			m = t, t.setAttribute("role", "combobox"), t.setAttribute("autocomplete", "off"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("spellcheck", "false"), t.setAttribute("aria-controls", `${T}-listbox`);
 			let n = () => {
-				M.value || G(!0, "click"), L();
+				k.value || U(!0, "click"), F();
 			};
-			return t.addEventListener("input", Y), t.addEventListener("keydown", Te), t.addEventListener("focus", we), t.addEventListener("click", n), () => {
-				_ = null, v = null, t.removeEventListener("input", Y), t.removeEventListener("keydown", Te), t.removeEventListener("focus", we), t.removeEventListener("click", n);
+			return t.addEventListener("input", q), t.addEventListener("keydown", Y), t.addEventListener("focus", J), t.addEventListener("click", n), () => {
+				m = null, h = null, t.removeEventListener("input", q), t.removeEventListener("keydown", Y), t.removeEventListener("focus", J), t.removeEventListener("click", n);
 			};
-		}), p(() => {
-			if (!x.value) return;
-			let t = _;
-			t && (t.setAttribute("aria-expanded", String(M.value)), D.value ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), e.error.value ? (t.setAttribute("aria-invalid", "true"), t.setAttribute("aria-errormessage", `${O}-error`)) : (t.removeAttribute("aria-invalid"), t.removeAttribute("aria-errormessage")));
-		}), p(() => {
-			if (!x.value) return;
-			let e = _;
-			e && e.value !== g.value && (e.value = g.value);
-		}), l(() => {
-			X?.removeEventListener("pointermove", Oe), Q?.(), Q = null, $ = null, De();
+		}), s(() => {
+			if (!v.value) return;
+			let t = m;
+			t && (t.setAttribute("aria-expanded", String(k.value)), w.value ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), e.error.value ? (t.setAttribute("aria-invalid", "true"), t.setAttribute("aria-errormessage", `${T}-error`)) : (t.removeAttribute("aria-invalid"), t.removeAttribute("aria-errormessage")));
+		}), s(() => {
+			if (!v.value) return;
+			let e = m;
+			e && e.value !== p.value && (e.value = p.value);
+		}), ue(() => {
+			Z?.removeEventListener("pointermove", Ae), Q?.(), Q = null, $ = null, ke();
 		}), c`
       <slot></slot>
       <ore-input
         class="trigger"
-        ref=${x}
+        ref=${v}
         :label="${() => e.label.value ?? ""}"
-        :placeholder="${ge}"
+        :placeholder="${xe}"
         :label-placement="${() => e["label-placement"].value ?? "inset"}"
         :color="${() => e.color?.value ?? void 0}"
-        :size="${() => h.size?.value ?? void 0}"
-        :variant="${() => h.variant?.value ?? void 0}"
+        :size="${() => f.size?.value ?? void 0}"
+        :variant="${() => f.variant?.value ?? void 0}"
         :rounded="${() => e.rounded?.value ?? void 0}"
         :helper="${() => e.helper.value ?? ""}"
         :error="${() => e.error.value ?? ""}"
-        ?disabled="${D}"
+        ?disabled="${w}"
         ?required="${() => !1}"
         ?fullwidth="${() => e.fullwidth.value ? !0 : void 0}"
         :name="${() => e.name.value ?? ""}"
         @click="${(e) => {
-			xe.handleClick(e);
+			Ee.handleClick(e);
 		}}"
         part="wrapper">
         <div slot="prefix" class="chips-row">
           <!-- Keep chip list diffing isolated so input node identity stays stable. -->
           <span class="chips-list">
-            ${() => (N() ? k.value : []).map((t) => c`
+            ${() => (A() ? E.value : []).map((t) => c`
                   <ore-chip
                     value=${t}
-                    label=${B.value.find((e) => e.value === t)?.label ?? t}
+                    label=${R.value.find((e) => e.value === t)?.label ?? t}
                     mode="removable"
                     variant="flat"
                     size="sm"
                     color="${e.color}"
-                    @remove=${ye}>
-                    ${B.value.find((e) => e.value === t)?.label ?? t}
+                    @remove=${we}>
+                    ${R.value.find((e) => e.value === t)?.label ?? t}
                   </ore-chip>
                 `)}
           </span>
@@ -368,8 +370,8 @@ s(f, {
             type="button"
             aria-label="Clear"
             tabindex="-1"
-            ?hidden=${() => !pe()}
-            @click="${Ce}">
+            ?hidden=${() => !ve()}
+            @click="${Oe}">
             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
           </button>
           <span class="combobox-suffix-end">
@@ -382,7 +384,7 @@ s(f, {
       </ore-input>
       <span
         class="sr-only"
-        id="${() => `${O}-error`}"
+        id="${() => `${T}-error`}"
         role="alert"
         aria-live="assertive"
         ?hidden="${() => !e.error.value}"
@@ -391,36 +393,36 @@ s(f, {
       <div
         class="dropdown"
         part="dropdown"
-        id="${() => `${O}-dropdown`}"
+        id="${() => `${T}-dropdown`}"
         popover="manual"
-        ?data-open=${() => M.value}
+        ?data-open=${() => k.value}
         ref=${(e) => {
-			y = e;
+			g = e;
 		}}>
         <div
           role="listbox"
-          id="${() => `${O}-listbox`}"
-          :style="${() => M.value && T.value.length > 0 ? `height:${T.value.length * 36}px;` : ""}"
+          id="${() => `${T}-listbox`}"
+          :style="${() => k.value && S.value.length > 0 ? `height:${S.value.length * 36}px;` : ""}"
           aria-label="${() => e.label.value || e.placeholder.value || "Options"}"
           ref=${(e) => {
-			ke(e);
+			Me(e);
 		}}>
-          ${() => M.value ? me() ? c`<div class="dropdown-loading">Loading...</div>` : T.value.length === 0 ? U.value ? c`<button
+          ${() => k.value ? ye() ? c`<div class="dropdown-loading">Loading...</div>` : S.value.length === 0 ? V.value ? c`<button
                   type="button"
                   class="no-results-create"
-                  ?data-focused=${() => j.value === -1}>
-                  ${U.value}
-                </button>` : c`<div class="no-results" role="presentation">No results found</div>` : T.value.map((e, t) => c`<div
+                  ?data-focused=${() => O.value === -1}>
+                  ${V.value}
+                </button>` : c`<div class="no-results" role="presentation">No results found</div>` : S.value.map((e, t) => c`<div
                 class="option"
                 role="option"
-                id="${`${O}-opt-${t}`}"
+                id="${`${T}-opt-${t}`}"
                 data-option-index="${t}"
                 data-option-value="${e.value}"
-                :aria-selected="${() => String(N() ? k.value.includes(e.value) : I.value === e.value)}"
+                :aria-selected="${() => String(A() ? E.value.includes(e.value) : P.value === e.value)}"
                 aria-disabled="${String(e.disabled)}"
                 style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t * 36}px);`}"
-                ?data-focused=${() => j.value === t}
-                ?data-selected=${() => N() ? k.value.includes(e.value) : I.value === e.value}
+                ?data-focused=${() => O.value === t}
+                ?data-selected=${() => A() ? E.value.includes(e.value) : P.value === e.value}
                 ?data-disabled=${e.disabled}>
                 <span>${e.label}</span>
                 <span class="option-check" aria-hidden="true"