@vielzeug/refine 1.5.4 → 1.7.0

package/dist/combobox.js

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