@vielzeug/refine 1.8.0 → 2.0.1

package/dist/combobox.js

@@ -1,73 +1,77 @@
-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 { 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";
+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 { dispatchNativeFieldEvent as s } from "./inputs/shared/native-field-event.js";
+import { createListboxDropdown as ee } from "./core/option-list.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";
 //#region src/inputs/combobox/combobox.ts
-var m = "ore-combobox";
-c(m, {
+var g = "ore-combobox";
+u(g, {
 	formAssociated: !0,
 	props: {
-		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()
+		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()
 	},
-	setup(e) {
-		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,
-			labelPlacement: e["label-placement"],
-			multiple: e.multiple,
+	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,
 			prefix: "combobox",
-			required: e.required,
+			required: r.required,
 			signal: y,
-			validateOn: s?.validateOn,
-			value: e.value
-		}), x = p([]), S = te({
-			getBoundary: () => t,
+			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: () => h,
-			getTrigger: () => m,
+			getReference: () => p,
+			getTrigger: () => u,
 			isDisabled: () => b.disabled.value,
 			onClose: (e) => {
-				n("close", { reason: e }), y.aborted || Ee(), b.triggerValidation("blur");
+				a("open-change", {
+					open: !1,
+					reason: e
+				}), y.aborted || be(), b.triggerValidation("blur");
 			},
-			onOpen: (e) => n("open", { reason: e }),
+			onOpen: (e) => a("open-change", {
+				open: !0,
+				reason: e
+			}),
 			restoreFocus: !1,
 			signal: y
 		}), { disabled: C, fieldId: w, selectedValues: T, triggerValidation: E } = b;
-		b.attachFormField(me({
+		b.attachFormField(le({
 			disabled: b.disabled,
 			onReset: b.reset,
 			toFormValue: (e) => e,
@@ -75,16 +79,16 @@ c(m, {
 			validity: b.validity,
 			value: b.formValue
 		}));
-		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: {
+		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: c.size,
-			variant: c.variant
+			size: r.size,
+			variant: r.variant
 		} });
-		let j = null, M = !1, N = f(() => T.value[0] ?? "");
-		Object.defineProperty(t, "value", {
+		let A = null, j = !1, M = m(() => T.value[0] ?? "");
+		Object.defineProperty(i, "value", {
 			configurable: !0,
-			get: () => k() ? T.value : N.value,
+			get: () => b.formValue.value,
 			set: (e) => {
 				let t = e;
 				if (Array.isArray(t)) {
@@ -95,15 +99,15 @@ c(m, {
 					b.clear();
 					return;
 				}
-				b.setValues([String(t)]);
+				b.setValues(k() ? String(t).split(",") : [String(t)]);
 			}
 		});
-		let ve = () => T.value.length > 0;
-		function P() {
-			m?.focus();
+		let he = () => T.value.length > 0;
+		function N() {
+			u?.focus();
 		}
-		let F = p([]), I = p([]), ye = () => !!e.loading.value;
-		function be(e) {
+		let P = h([]), F = h([]), ge = () => !!r.loading.value;
+		function _e(e) {
 			return {
 				disabled: !!e.disabled,
 				iconEl: e.iconEl ?? null,
@@ -111,10 +115,10 @@ c(m, {
 				value: e.value
 			};
 		}
-		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 = {
+		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 = {
 			clear: () => {
 				b.clear();
 			},
@@ -128,72 +132,68 @@ c(m, {
 				b.toggleValue(e);
 			}
 		};
-		function xe(e = Array.from(t.children)) {
-			if (F.value = oe(e), !k()) {
-				let e = L.value.find((e) => e.value === N.value);
-				d.value = e?.label ?? N.value;
+		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;
 			}
 		}
-		xe(), r(() => {
-			let e = o(L.value, d.value, A());
+		R(), o(() => {
+			let e = c(I.value, l.value, me());
 			x.value = k() ? e.filter((e) => !T.value.includes(e.value)) : e;
 		});
-		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: Ce.value
-			});
+		let z = m(() => te(l.value, pe(), x.value)), ve = () => k() && T.value.length > 0 ? "" : r.placeholder.value || "";
+		function B() {
+			s(i, "input"), s(i, "change");
 		}
-		function Te(e) {
+		function ye(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (R.remove(t), B(e), E("change"));
+			t !== void 0 && (L.remove(t), B(), E("change"));
 		}
-		function Ee() {
+		function be() {
 			if (!k()) {
-				let e = L.value.find((e) => e.value === N.value);
-				M = !0, d.value = e?.label ?? "", Promise.resolve().then(() => {
-					M = !1;
+				let e = I.value.find((e) => e.value === M.value);
+				j = !0, l.value = e?.label ?? "", Promise.resolve().then(() => {
+					j = !1;
 				});
 				return;
 			}
-			d.value = "";
+			l.value = "";
 		}
-		r(() => {
-			if (O.value && !k() && N.value && D.value === -1 && d.value === "") {
-				let e = x.value.findIndex((e) => e.value === N.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);
 			}
 		});
 		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);
+			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);
 			}
-			S.open(t), !k() && N.value && D.value >= 0 && requestAnimationFrame(() => {
-				he();
+			S.open(t), !k() && M.value && D.value >= 0 && requestAnimationFrame(() => {
+				de();
 			});
 		}
 		function H(e = "programmatic") {
 			S.close(e);
 		}
-		let De = a({
+		let xe = n({
 			disabled: C,
 			onPress: () => {
-				O.value || V(!0, "click"), P();
+				O.value || V(!0, "click"), N();
 			}
-		}), Oe = a({
+		}), Se = n({
 			disabled: C,
 			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(d.value, e) : O.value || V(!0, "keyboard");
+				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");
 			}
 		});
-		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 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 W(e) {
 			let t = e.getAttribute("data-option-index"), n = t ? Number(t) : -1;
@@ -206,17 +206,17 @@ c(m, {
 			let i = e.querySelector("span")?.textContent?.trim() ?? e.textContent?.trim() ?? "";
 			return i ? x.value.find((e) => e.label === i || e.value === i) ?? null : null;
 		}
-		function ke(e) {
-			e.stopPropagation(), R.clear(), d.value = "", B(e), E("change"), P();
+		function Ce(e) {
+			e.stopPropagation(), L.clear(), l.value = "", B(), E("change"), N();
 		}
 		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);
+			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);
 				}
-				S.navigate("first"), O.value || V(!1, "keyboard"), n("search", { query: t.value });
+				S.navigate("first"), O.value || V(!1, "keyboard"), a("search", { query: t.value });
 			}
 		}
 		function K() {}
@@ -229,15 +229,12 @@ c(m, {
 					e.preventDefault(), O.value ? S.navigate("prev") : V(!0, "keyboard");
 					break;
 				case "Backspace":
-					k() && !d.value && T.value.length > 0 && (b.removeValue(T.value[T.value.length - 1] ?? ""), B(e), E("change"));
+					k() && !l.value && T.value.length > 0 && (b.removeValue(T.value[T.value.length - 1] ?? ""), B(), E("change"));
 					break;
 				case "Enter":
-					Oe.handleKeydown(e);
-					break;
-				case "Tab":
-					H("programmatic");
+					Se.handleKeydown(e);
 					break;
-				default: break;
+				case "Tab": H("programmatic");
 			}
 		}
 		function J(e, t) {
@@ -247,15 +244,15 @@ c(m, {
 				disabled: !1,
 				iconEl: null,
 				label: n,
-				value: ae(n)
+				value: ne(n)
 			};
-			I.value = [...I.value, r], U(r, t);
+			F.value = [...F.value, r], U(r, t);
 		}
-		let Ae = (() => {
+		let we = (() => {
 			let e = new MutationObserver(() => {
-				xe();
+				R();
 			});
-			return e.observe(t, {
+			return e.observe(i, {
 				attributeFilter: [
 					"disabled",
 					"label",
@@ -274,14 +271,14 @@ c(m, {
 			if (!r || r.disabled) return;
 			let i = x.value.findIndex((e) => e.value === r.value);
 			i >= 0 && S.set(i);
-		}, X = t.shadowRoot;
+		}, X = i.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(d.value, e);
+					e.preventDefault(), e.stopPropagation(), J(l.value, e);
 					return;
 				}
 				let n = t.closest(".option");
@@ -302,70 +299,70 @@ c(m, {
 			return e.addEventListener("click", t), e.addEventListener("pointermove", n), () => {
 				e.removeEventListener("click", t), e.removeEventListener("pointermove", n);
 			};
-		}, Q = null, $ = null, je = (e) => {
+		}, Q = null, $ = null, Te = (e) => {
 			_ = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = Z(e), $ = e));
-		}, Me = () => {
+		}, Ee = () => {
 			_ && ($ === _ && Q || (Q?.(), Q = Z(_), $ = _));
 		};
-		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;
+		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;
 			let t = e.shadowRoot?.querySelector("input") ?? null;
 			if (!t) return;
-			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`);
+			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`);
 			let n = () => {
-				O.value || V(!0, "click"), P();
+				O.value || V(!0, "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);
+				u = null, p = null, t.removeEventListener("input", G), t.removeEventListener("keydown", q), t.removeEventListener("focus", K), t.removeEventListener("click", n);
 			};
-		}), r(() => {
+		}), o(() => {
 			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(() => {
+			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 = m;
-			e && e.value !== d.value && (e.value = d.value);
-		}), u(() => {
-			X?.removeEventListener("pointermove", Y), Q?.(), Q = null, $ = null, Ae();
-		}), l`
+			let e = u;
+			e && e.value !== l.value && (e.value = l.value);
+		}), f(() => {
+			X?.removeEventListener("pointermove", Y), Q?.(), Q = null, $ = null, we();
+		}), d`
       <slot></slot>
       <ore-input
         class="trigger"
         ref=${v}
-        :label="${() => e.label.value ?? ""}"
-        :placeholder="${Se}"
-        :label-placement="${() => e["label-placement"].value ?? "inset"}"
-        :color="${() => e.color?.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 ?? ""}"
+        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}"
         ?required="${() => !1}"
-        ?fullwidth="${() => e.fullwidth.value ? !0 : void 0}"
-        ?success="${() => e.success.value}"
-        :name="${() => e.name.value ?? ""}"
+        ?fullwidth="${() => r.fullwidth.value ? !0 : void 0}"
+        ?success="${() => r.success.value}"
+        name="${() => r.name.value ?? ""}"
         @click="${(e) => {
-			De.handleClick(e);
+			xe.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">
-            ${() => (k() ? T.value : []).map((t) => l`
+            ${() => (k() ? T.value : []).map((e) => d`
                   <ore-chip
-                    value=${t}
-                    label=${L.value.find((e) => e.value === t)?.label ?? t}
+                    value=${e}
+                    label=${I.value.find((t) => t.value === e)?.label ?? e}
                     mode="removable"
                     variant="flat"
                     size="sm"
-                    color="${e.color}"
-                    @remove=${Te}>
-                    ${L.value.find((e) => e.value === t)?.label ?? t}
+                    color="${r.color}"
+                    @remove=${ye}>
+                    ${I.value.find((t) => t.value === e)?.label ?? e}
                   </ore-chip>
                 `)}
           </span>
@@ -377,8 +374,8 @@ c(m, {
             type="button"
             aria-label="Clear"
             tabindex="-1"
-            ?hidden=${() => !ve()}
-            @click="${ke}">
+            ?hidden=${() => !he()}
+            @click="${Ce}">
             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
           </button>
           <span class="combobox-suffix-end">
@@ -394,9 +391,9 @@ c(m, {
         id="${() => `${w}-error`}"
         role="alert"
         aria-live="assertive"
-        ?hidden="${() => !e.error.value}"
-        >${() => e.error.value ?? ""}</span
-      >
+        ?hidden="${() => !r.error.value}">
+        ${() => r.error.value ?? ""}
+      </span>
       <div
         class="dropdown"
         part="dropdown"
@@ -409,47 +406,52 @@ c(m, {
         <div
           role="listbox"
           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"}"
+          style="${() => O.value && x.value.length > 0 ? `height:${x.value.length * 36}px;` : ""}"
+          aria-label="${() => r.label.value || r.placeholder.value || "Options"}"
           ref=${(e) => {
-			je(e);
+			Te(e);
 		}}>
-          ${() => 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=${() => 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="${`${w}-opt-${t}`}"
-                data-option-index="${t}"
-                data-option-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=${() => 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"
-                  ><ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon
-                ></span>
-              </div>`) : ""}
+          ${() => O.value ? ge() ? d`
+                <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}
+                  </button>
+                ` : d`
+                <div class="no-results" role="presentation">No results found</div>
+              ` : x.value.map((e, t) => d`
+                <div
+                  class="option"
+                  role="option"
+                  id="${`${w}-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-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-disabled=${e.disabled}>
+                  <span>${e.label}</span>
+                  <span class="option-check" aria-hidden="true">
+                    <ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                  </span>
+                </div>
+              `) : ""}
         </div>
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
+		o,
 		r,
-		e,
-		n,
-		t,
-		s
+		a,
+		i,
+		l
 	]
 });
 //#endregion
-export { m as COMBOBOX_TAG };
+export { g as COMBOBOX_TAG };
 
 //# sourceMappingURL=combobox.js.map