@vielzeug/refine 2.1.0 → 2.1.2

package/dist/combobox.js

@@ -1,113 +1,113 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { createChoiceField as t } from "./core/choice-field.js";
-import { createInteraction as n } from "./core/keyboard.js";
-import { reducedMotionMixin as r, srOnlyMixin as i } from "./styles/mixins/accessibility.css.js";
-import { roundedVariantMixin as a } from "./styles/mixins/shape.css.js";
-import { colorThemeMixin as o } from "./styles/mixins/theme.css.js";
-import { createListboxDropdown as ee } from "./core/option-list.js";
-import { dispatchNativeFieldEvent as s } from "./inputs/shared/native-field-event.js";
-import { filterOptions as c, getCreatableLabel as te, makeCreatableValue as ne, parseSlottedOptions as re } from "./inputs/combobox/combobox-options.js";
-import l from "./inputs/combobox/combobox.css.js";
-import { bind as ie, define as u, getHost as ae, html as d, onCleanup as f, onElement as oe, prop as p, ref as se, useEmit as ce, useField as le, watchEffect as ue } from "@vielzeug/ore";
-import { computed as m, signal as h } from "@vielzeug/ripple";
+import { reducedMotionMixin as e, srOnlyMixin as t } from "./styles/mixins/accessibility.css.js";
+import { roundedVariantMixin as n } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as r } from "./styles/mixins/theme.css.js";
+import { createInteraction as i } from "./core/keyboard.js";
+import { createChoiceField as ee } from "./core/choice-field.js";
+import { lifecycleSignal as te } from "./core/ore.js";
+import { createListboxDropdown as ne } from "./core/option-list.js";
+import { dispatchNativeFieldEvent as a } from "./inputs/shared/native-field-event.js";
+import { filterOptions as o, getCreatableLabel as re, makeCreatableValue as ie, parseSlottedOptions as ae } from "./inputs/combobox/combobox-options.js";
+import s from "./inputs/combobox/combobox.css.js";
+import { bind as oe, define as c, getHost as se, html as l, onCleanup as u, onElement as ce, prop as d, ref as le, useEmit as ue, useField as de, watchEffect as fe } from "@vielzeug/ore";
+import { computed as f, signal as p } from "@vielzeug/ripple";
 //#region src/inputs/combobox/combobox.ts
-var g = "ore-combobox";
-u(g, {
+var m = "ore-combobox";
+c(m, {
 	formAssociated: !0,
 	props: {
-		autoclose: p.bool(!1),
-		color: p.string(),
-		creatable: p.bool(!1),
-		disabled: p.bool(!1),
-		error: p.string(),
-		fullwidth: p.bool(!1),
-		helper: p.string(),
-		label: p.string(),
-		"label-placement": p.oneOf(["inset", "outside"], "inset"),
-		loading: p.bool(!1),
-		multiple: p.bool(!1),
-		name: p.string(),
-		"no-filter": p.bool(!1),
-		options: p.data(),
-		placeholder: p.string("Select..."),
-		required: p.bool(!1),
-		rounded: p.string(),
-		size: p.string(),
-		success: p.bool(!1),
-		value: p.string(),
-		variant: p.string()
+		autoclose: d.bool(!1),
+		color: d.string(),
+		creatable: d.bool(!1),
+		disabled: d.bool(!1),
+		error: d.string(),
+		fullwidth: d.bool(!1),
+		helper: d.string(),
+		label: d.string(),
+		"label-placement": d.oneOf(["inset", "outside"], "inset"),
+		loading: d.bool(!1),
+		multiple: d.bool(!1),
+		name: d.string(),
+		"no-filter": d.bool(!1),
+		options: d.data(),
+		placeholder: d.string("Select..."),
+		required: d.bool(!1),
+		rounded: d.string(),
+		size: d.string(),
+		success: d.bool(!1),
+		value: d.string(),
+		variant: d.string()
 	},
-	setup(r) {
-		let i = ae(), a = ce(), o = ue, l = h(""), u = null, p = null, g = null, _ = null, v = se(), y = e(f), b = t({
-			disabled: r.disabled,
-			error: r.error,
-			helper: r.helper,
-			label: r.label,
-			labelPlacement: r["label-placement"],
-			multiple: r.multiple,
+	setup(e) {
+		let t = se(), n = ue(), r = fe, s = p(""), c = null, d = null, m = null, h = null, g = le(), _ = te(u), v = ee({
+			disabled: e.disabled,
+			error: e.error,
+			helper: e.helper,
+			label: e.label,
+			labelPlacement: e["label-placement"],
+			multiple: e.multiple,
 			prefix: "combobox",
-			required: r.required,
-			signal: y,
-			value: r.value
-		}), x = h([]), S = ee({
-			getBoundary: () => i,
-			getFocusedOptionElement: () => g?.querySelector("[data-focused]") ?? null,
-			getItems: () => x.value,
-			getOptionId: (e) => `${b.fieldId}-opt-${e}`,
-			getPanel: () => g,
-			getReference: () => p,
-			getTrigger: () => u,
-			isDisabled: () => b.disabled.value,
+			required: e.required,
+			signal: _,
+			value: e.value
+		}), y = p([]), b = ne({
+			getBoundary: () => t,
+			getFocusedOptionElement: () => m?.querySelector("[data-focused]") ?? null,
+			getItems: () => y.value,
+			getOptionId: (e) => `${v.fieldId}-opt-${e}`,
+			getPanel: () => m,
+			getReference: () => d,
+			getTrigger: () => c,
+			isDisabled: () => v.disabled.value,
 			onClose: (e) => {
-				a("open-change", {
+				n("open-change", {
 					open: !1,
 					reason: e
-				}), y.aborted || be(), b.triggerValidation("blur");
+				}), _.aborted || be(), v.triggerValidation("blur");
 			},
-			onOpen: (e) => a("open-change", {
+			onOpen: (e) => n("open-change", {
 				open: !0,
 				reason: e
 			}),
 			restoreFocus: !1,
-			signal: y
-		}), { disabled: C, fieldId: w, selectedValues: T, triggerValidation: E } = b;
-		b.attachFormField(le({
-			disabled: b.disabled,
-			onReset: b.reset,
+			signal: _
+		}), { disabled: x, fieldId: S, selectedValues: C, triggerValidation: w } = v;
+		v.attachFormField(de({
+			disabled: v.disabled,
+			onReset: v.reset,
 			toFormValue: (e) => e,
-			validationMessage: b.validationMessage,
-			validity: b.validity,
-			value: b.formValue
+			validationMessage: v.validationMessage,
+			validity: v.validity,
+			value: v.formValue
 		}));
-		let { focusedIndex: D, isOpen: O, scrollFocusedIntoView: de, updatePosition: fe } = S, k = () => !!r.multiple.value, pe = () => !!r.creatable.value, me = () => !!r["no-filter"].value;
-		ie({ attr: {
-			open: () => O.value ? !0 : void 0,
-			size: r.size,
-			variant: r.variant
+		let { focusedIndex: T, isOpen: E, scrollFocusedIntoView: pe, updatePosition: me } = b, D = () => !!e.multiple.value, he = () => !!e.creatable.value, O = () => !!e["no-filter"].value;
+		oe({ attr: {
+			open: () => E.value ? !0 : void 0,
+			size: e.size,
+			variant: e.variant
 		} });
-		let A = null, j = !1, M = m(() => T.value[0] ?? "");
-		Object.defineProperty(i, "value", {
+		let k = null, A = !1, j = f(() => C.value[0] ?? "");
+		Object.defineProperty(t, "value", {
 			configurable: !0,
-			get: () => b.formValue.value,
+			get: () => v.formValue.value,
 			set: (e) => {
 				let t = e;
 				if (Array.isArray(t)) {
-					b.setValues(t.map((e) => String(e ?? "")));
+					v.setValues(t.map((e) => String(e ?? "")));
 					return;
 				}
 				if (t == null || t === "") {
-					b.clear();
+					v.clear();
 					return;
 				}
-				b.setValues(k() ? String(t).split(",") : [String(t)]);
+				v.setValues(D() ? String(t).split(",") : [String(t)]);
 			}
 		});
-		let he = () => T.value.length > 0;
-		function N() {
-			u?.focus();
+		let ge = () => C.value.length > 0;
+		function M() {
+			c?.focus();
 		}
-		let P = h([]), F = h([]), ge = () => !!r.loading.value;
-		function _e(e) {
+		let N = p([]), P = p([]), _e = () => !!e.loading.value;
+		function ve(e) {
 			return {
 				disabled: !!e.disabled,
 				iconEl: e.iconEl ?? null,
@@ -115,121 +115,121 @@ u(g, {
 				value: e.value
 			};
 		}
-		let I = m(() => {
-			let e = r.options.value, t = Array.isArray(e) ? e.map(_e) : P.value;
-			return F.value.length === 0 ? t : [...t, ...F.value];
-		}), L = {
+		let F = f(() => {
+			let t = e.options.value, n = Array.isArray(t) ? t.map(ve) : N.value;
+			return P.value.length === 0 ? n : [...n, ...P.value];
+		}), I = {
 			clear: () => {
-				b.clear();
+				v.clear();
 			},
 			remove: (e) => {
-				b.removeValue(e);
+				v.removeValue(e);
 			},
 			select: (e) => {
-				b.selectValue(e);
+				v.selectValue(e);
 			},
 			toggle: (e) => {
-				b.toggleValue(e);
+				v.toggleValue(e);
 			}
 		};
-		function R(e = Array.from(i.children)) {
-			if (P.value = re(e), !k()) {
-				let e = I.value.find((e) => e.value === M.value);
-				l.value = e?.label ?? M.value;
+		function L(e = Array.from(t.children)) {
+			if (N.value = ae(e), !D()) {
+				let e = F.value.find((e) => e.value === j.value);
+				s.value = e?.label ?? j.value;
 			}
 		}
-		R(), o(() => {
-			let e = c(I.value, l.value, me());
-			x.value = k() ? e.filter((e) => !T.value.includes(e.value)) : e;
+		L(), r(() => {
+			let e = o(F.value, s.value, O());
+			y.value = D() ? e.filter((e) => !C.value.includes(e.value)) : e;
 		});
-		let z = m(() => te(l.value, pe(), x.value)), ve = () => k() && T.value.length > 0 ? "" : r.placeholder.value || "";
+		let R = f(() => re(s.value, he(), y.value)), z = () => D() && C.value.length > 0 ? "" : e.placeholder.value || "";
 		function B() {
-			s(i, "input"), s(i, "change");
+			a(t, "input"), a(t, "change");
 		}
 		function ye(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (L.remove(t), B(), E("change"));
+			t !== void 0 && (I.remove(t), B(), w("change"));
 		}
 		function be() {
-			if (!k()) {
-				let e = I.value.find((e) => e.value === M.value);
-				j = !0, l.value = e?.label ?? "", Promise.resolve().then(() => {
-					j = !1;
+			if (!D()) {
+				let e = F.value.find((e) => e.value === j.value);
+				A = !0, s.value = e?.label ?? "", Promise.resolve().then(() => {
+					A = !1;
 				});
 				return;
 			}
-			l.value = "";
+			s.value = "";
 		}
-		o(() => {
-			if (O.value && !k() && M.value && D.value === -1 && l.value === "") {
-				let e = x.value.findIndex((e) => e.value === M.value);
-				e >= 0 && S.set(e);
+		r(() => {
+			if (E.value && !D() && j.value && T.value === -1 && s.value === "") {
+				let e = y.value.findIndex((e) => e.value === j.value);
+				e >= 0 && b.set(e);
 			}
 		});
 		function V(e = !0, t = "programmatic") {
-			if (e && (A = l.value, l.value = ""), !k() && M.value) {
-				let e = c(I.value, "", me()).findIndex((e) => e.value === M.value);
-				e >= 0 && S.set(e);
+			if (e && (k = s.value, s.value = ""), !D() && j.value) {
+				let e = o(F.value, "", O()).findIndex((e) => e.value === j.value);
+				e >= 0 && b.set(e);
 			}
-			S.open(t), !k() && M.value && D.value >= 0 && requestAnimationFrame(() => {
-				de();
+			b.open(t), !D() && j.value && T.value >= 0 && requestAnimationFrame(() => {
+				pe();
 			});
 		}
 		function H(e = "programmatic") {
-			S.close(e);
+			b.close(e);
 		}
-		let xe = n({
-			disabled: C,
+		let xe = i({
+			disabled: x,
 			onPress: () => {
-				O.value || V(!0, "click"), N();
+				E.value || V(!0, "click"), M();
 			}
-		}), Se = n({
-			disabled: C,
+		}), Se = i({
+			disabled: x,
 			keys: ["Enter"],
 			onPress: (e) => {
-				let t = x.value;
-				O.value && D.value >= 0 && D.value < t.length ? U(t[D.value], e) : O.value && D.value === -1 && z.value ? J(l.value, e) : O.value || V(!0, "keyboard");
+				let t = y.value;
+				E.value && T.value >= 0 && T.value < t.length ? U(t[T.value], e) : E.value && T.value === -1 && R.value ? J(s.value, e) : E.value || V(!0, "keyboard");
 			}
 		});
-		function U(e, t) {
-			e.disabled || (k() ? (L.toggle(e.value), l.value = "", B(), E("change"), r.autoclose.value && H(), N(), requestAnimationFrame(() => N())) : (L.select(e.value), l.value = e.label, B(), E("change"), H(), N()));
+		function U(t, n) {
+			t.disabled || (D() ? (I.toggle(t.value), s.value = "", B(), w("change"), e.autoclose.value && H(), M(), requestAnimationFrame(() => M())) : (I.select(t.value), s.value = t.label, B(), w("change"), H(), M()));
 		}
 		function W(e) {
 			let t = e.getAttribute("data-option-index"), n = t ? Number(t) : -1;
-			if (Number.isInteger(n) && n >= 0 && n < x.value.length) return x.value[n] ?? null;
+			if (Number.isInteger(n) && n >= 0 && n < y.value.length) return y.value[n] ?? null;
 			let r = e.getAttribute("data-option-value");
 			if (r) {
-				let e = x.value.find((e) => e.value === r);
+				let e = y.value.find((e) => e.value === r);
 				if (e) return e;
 			}
 			let i = e.querySelector("span")?.textContent?.trim() ?? e.textContent?.trim() ?? "";
-			return i ? x.value.find((e) => e.label === i || e.value === i) ?? null : null;
+			return i ? y.value.find((e) => e.label === i || e.value === i) ?? null : null;
 		}
 		function Ce(e) {
-			e.stopPropagation(), L.clear(), l.value = "", B(), E("change"), N();
+			e.stopPropagation(), I.clear(), s.value = "", B(), w("change"), M();
 		}
 		function G(e) {
-			let t = e.target, n = t.value;
-			if (!j && n !== l.value) {
-				if (l.value = n, !k()) {
-					let e = T.value[0], t = e ? I.value.find((t) => t.value === e)?.label ?? e : "";
-					n === "" && A === t && (A = null);
+			let t = e.target, r = t.value;
+			if (!A && r !== s.value) {
+				if (s.value = r, !D()) {
+					let e = C.value[0], t = e ? F.value.find((t) => t.value === e)?.label ?? e : "";
+					r === "" && k === t && (k = null);
 				}
-				S.navigate("first"), O.value || V(!1, "keyboard"), a("search", { query: t.value });
+				b.navigate("first"), E.value || V(!1, "keyboard"), n("search", { query: t.value });
 			}
 		}
 		function K() {}
 		function q(e) {
-			if (!C.value && !S.handleKeydown(e)) switch (e.key) {
+			if (!x.value && !b.handleKeydown(e)) switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), O.value ? S.navigate("next") : (V(!0, "keyboard"), S.navigate("first"));
+					e.preventDefault(), E.value ? b.navigate("next") : (V(!0, "keyboard"), b.navigate("first"));
 					break;
 				case "ArrowUp":
-					e.preventDefault(), O.value ? S.navigate("prev") : V(!0, "keyboard");
+					e.preventDefault(), E.value ? b.navigate("prev") : V(!0, "keyboard");
 					break;
 				case "Backspace":
-					k() && !l.value && T.value.length > 0 && (b.removeValue(T.value[T.value.length - 1] ?? ""), B(), E("change"));
+					D() && !s.value && C.value.length > 0 && (v.removeValue(C.value[C.value.length - 1] ?? ""), B(), w("change"));
 					break;
 				case "Enter":
 					Se.handleKeydown(e);
@@ -244,15 +244,15 @@ u(g, {
 				disabled: !1,
 				iconEl: null,
 				label: n,
-				value: ne(n)
+				value: ie(n)
 			};
-			F.value = [...F.value, r], U(r, t);
+			P.value = [...P.value, r], U(r, t);
 		}
 		let we = (() => {
 			let e = new MutationObserver(() => {
-				R();
+				L();
 			});
-			return e.observe(i, {
+			return e.observe(t, {
 				attributeFilter: [
 					"disabled",
 					"label",
@@ -269,16 +269,16 @@ u(g, {
 			if (!n) return;
 			let r = W(n);
 			if (!r || r.disabled) return;
-			let i = x.value.findIndex((e) => e.value === r.value);
-			i >= 0 && S.set(i);
-		}, X = i.shadowRoot;
+			let i = y.value.findIndex((e) => e.value === r.value);
+			i >= 0 && b.set(i);
+		}, X = t.shadowRoot;
 		X && X.addEventListener("pointermove", Y);
 		let Z = (e) => {
 			let t = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
 				if (t.closest(".no-results-create")) {
-					e.preventDefault(), e.stopPropagation(), J(l.value, e);
+					e.preventDefault(), e.stopPropagation(), J(s.value, e);
 					return;
 				}
 				let n = t.closest(".option");
@@ -293,59 +293,59 @@ u(g, {
 				if (!n) return;
 				let r = W(n);
 				if (!r) return;
-				let i = x.value.findIndex((e) => e.value === r.value);
-				i >= 0 && S.set(i);
+				let i = y.value.findIndex((e) => e.value === r.value);
+				i >= 0 && b.set(i);
 			};
 			return e.addEventListener("click", t), e.addEventListener("pointermove", n), () => {
 				e.removeEventListener("click", t), e.removeEventListener("pointermove", n);
 			};
 		}, Q = null, $ = null, Te = (e) => {
-			_ = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = Z(e), $ = e));
+			h = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = Z(e), $ = e));
 		}, Ee = () => {
-			_ && ($ === _ && Q || (Q?.(), Q = Z(_), $ = _));
+			h && ($ === h && Q || (Q?.(), Q = Z(h), $ = h));
 		};
-		return o(() => {
-			Ee(), O.value ? (g && "showPopover" in g && !g.matches(":popover-open") && g.showPopover(), fe()) : g && "hidePopover" in g && g.matches(":popover-open") && g.hidePopover();
-		}), oe(v, (e) => {
-			p = e;
+		return r(() => {
+			Ee(), E.value ? (m && "showPopover" in m && !m.matches(":popover-open") && m.showPopover(), me()) : m && "hidePopover" in m && m.matches(":popover-open") && m.hidePopover();
+		}), ce(g, (e) => {
+			d = e;
 			let t = e.shadowRoot?.querySelector("input") ?? null;
 			if (!t) return;
-			u = 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", `${w}-listbox`);
+			c = 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", `${S}-listbox`);
 			let n = () => {
-				O.value || V(!0, "click"), N();
+				E.value || V(!0, "click"), M();
 			};
 			return t.addEventListener("input", G), t.addEventListener("keydown", q), t.addEventListener("focus", K), t.addEventListener("click", n), () => {
-				u = null, p = null, t.removeEventListener("input", G), t.removeEventListener("keydown", q), t.removeEventListener("focus", K), t.removeEventListener("click", n);
+				c = null, d = null, t.removeEventListener("input", G), t.removeEventListener("keydown", q), t.removeEventListener("focus", K), t.removeEventListener("click", n);
 			};
-		}), o(() => {
-			if (!v.value) return;
-			let e = u;
-			e && (e.setAttribute("aria-expanded", String(O.value)), C.value ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), r.error.value ? (e.setAttribute("aria-invalid", "true"), e.setAttribute("aria-errormessage", `${w}-error`)) : (e.removeAttribute("aria-invalid"), e.removeAttribute("aria-errormessage")));
-		}), o(() => {
-			if (!v.value) return;
-			let e = u;
-			e && e.value !== l.value && (e.value = l.value);
-		}), f(() => {
+		}), r(() => {
+			if (!g.value) return;
+			let t = c;
+			t && (t.setAttribute("aria-expanded", String(E.value)), x.value ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), e.error.value ? (t.setAttribute("aria-invalid", "true"), t.setAttribute("aria-errormessage", `${S}-error`)) : (t.removeAttribute("aria-invalid"), t.removeAttribute("aria-errormessage")));
+		}), r(() => {
+			if (!g.value) return;
+			let e = c;
+			e && e.value !== s.value && (e.value = s.value);
+		}), u(() => {
 			X?.removeEventListener("pointermove", Y), Q?.(), Q = null, $ = null, we();
-		}), d`
+		}), l`
       <slot></slot>
       <ore-input
         class="trigger"
-        ref=${v}
-        label="${() => r.label.value ?? ""}"
-        placeholder="${ve}"
-        label-placement="${() => r["label-placement"].value ?? "inset"}"
-        color="${() => r.color?.value ?? void 0}"
-        size="${() => r.size?.value ?? void 0}"
-        variant="${() => r.variant?.value ?? void 0}"
-        rounded="${() => r.rounded?.value ?? void 0}"
-        helper="${() => r.helper.value ?? ""}"
-        error="${() => r.error.value ?? ""}"
-        ?disabled="${C}"
+        ref=${g}
+        label="${() => e.label.value ?? ""}"
+        placeholder="${z}"
+        label-placement="${() => e["label-placement"].value ?? "inset"}"
+        color="${() => e.color?.value ?? void 0}"
+        size="${() => e.size?.value ?? void 0}"
+        variant="${() => e.variant?.value ?? void 0}"
+        rounded="${() => e.rounded?.value ?? void 0}"
+        helper="${() => e.helper.value ?? ""}"
+        error="${() => e.error.value ?? ""}"
+        ?disabled="${x}"
         ?required="${() => !1}"
-        ?fullwidth="${() => r.fullwidth.value ? !0 : void 0}"
-        ?success="${() => r.success.value}"
-        name="${() => r.name.value ?? ""}"
+        ?fullwidth="${() => e.fullwidth.value ? !0 : void 0}"
+        ?success="${() => e.success.value}"
+        name="${() => e.name.value ?? ""}"
         @click="${(e) => {
 			xe.handleClick(e);
 		}}"
@@ -353,16 +353,16 @@ u(g, {
         <div slot="prefix" class="chips-row">
           <!-- Keep chip list diffing isolated so input node identity stays stable. -->
           <span class="chips-list">
-            ${() => (k() ? T.value : []).map((e) => d`
+            ${() => (D() ? C.value : []).map((t) => l`
                   <ore-chip
-                    value=${e}
-                    label=${I.value.find((t) => t.value === e)?.label ?? e}
+                    value=${t}
+                    label=${F.value.find((e) => e.value === t)?.label ?? t}
                     mode="removable"
                     variant="flat"
                     size="sm"
-                    color="${r.color}"
+                    color="${e.color}"
                     @remove=${ye}>
-                    ${I.value.find((t) => t.value === e)?.label ?? e}
+                    ${F.value.find((e) => e.value === t)?.label ?? t}
                   </ore-chip>
                 `)}
           </span>
@@ -374,7 +374,7 @@ u(g, {
             type="button"
             aria-label="Clear"
             tabindex="-1"
-            ?hidden=${() => !he()}
+            ?hidden=${() => !ge()}
             @click="${Ce}">
             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
           </button>
@@ -388,49 +388,49 @@ u(g, {
       </ore-input>
       <span
         class="sr-only"
-        id="${() => `${w}-error`}"
+        id="${() => `${S}-error`}"
         role="alert"
         aria-live="assertive"
-        ?hidden="${() => !r.error.value}">
-        ${() => r.error.value ?? ""}
+        ?hidden="${() => !e.error.value}">
+        ${() => e.error.value ?? ""}
       </span>
       <div
         class="dropdown"
         part="dropdown"
-        id="${() => `${w}-dropdown`}"
+        id="${() => `${S}-dropdown`}"
         popover="manual"
-        ?data-open=${() => O.value}
+        ?data-open=${() => E.value}
         ref=${(e) => {
-			g = e;
+			m = e;
 		}}>
         <div
           role="listbox"
-          id="${() => `${w}-listbox`}"
-          style="${() => O.value && x.value.length > 0 ? `height:${x.value.length * 36}px;` : ""}"
-          aria-label="${() => r.label.value || r.placeholder.value || "Options"}"
+          id="${() => `${S}-listbox`}"
+          style="${() => E.value && y.value.length > 0 ? `height:${y.value.length * 36}px;` : ""}"
+          aria-label="${() => e.label.value || e.placeholder.value || "Options"}"
           ref=${(e) => {
 			Te(e);
 		}}>
-          ${() => O.value ? ge() ? d`
+          ${() => E.value ? _e() ? l`
                 <div class="dropdown-loading">Loading...</div>
-              ` : x.value.length === 0 ? z.value ? d`
-                  <button type="button" class="no-results-create" ?data-focused=${() => D.value === -1}>
-                    ${z.value}
+              ` : y.value.length === 0 ? R.value ? l`
+                  <button type="button" class="no-results-create" ?data-focused=${() => T.value === -1}>
+                    ${R.value}
                   </button>
-                ` : d`
+                ` : l`
                 <div class="no-results" role="presentation">No results found</div>
-              ` : x.value.map((e, t) => d`
+              ` : y.value.map((e, t) => l`
                 <div
                   class="option"
                   role="option"
-                  id="${`${w}-opt-${t}`}"
+                  id="${`${S}-opt-${t}`}"
                   data-option-index="${t}"
                   data-option-value="${e.value}"
-                  aria-selected="${() => String(k() ? T.value.includes(e.value) : M.value === e.value)}"
+                  aria-selected="${() => String(D() ? C.value.includes(e.value) : j.value === e.value)}"
                   aria-disabled="${String(e.disabled)}"
                   style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t * 36}px);`}"
-                  ?data-focused=${() => D.value === t}
-                  ?data-selected=${() => k() ? T.value.includes(e.value) : M.value === e.value}
+                  ?data-focused=${() => T.value === t}
+                  ?data-selected=${() => D() ? C.value.includes(e.value) : j.value === e.value}
                   ?data-disabled=${e.disabled}>
                   <span>${e.label}</span>
                   <span class="option-check" aria-hidden="true">
@@ -444,14 +444,14 @@ u(g, {
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		o,
 		r,
-		a,
-		i,
-		l
+		e,
+		n,
+		t,
+		s
 	]
 });
 //#endregion
-export { g as COMBOBOX_TAG };
+export { m as COMBOBOX_TAG };
 
 //# sourceMappingURL=combobox.js.map