solid-ui 3.1.3-12 → 3.1.3-14

package/dist/chunks/{combobox-DrT0Nb-A.js → combobox-0NWv9K3D.js}

@@ -1,15 +1,13 @@
-import { n as e, r as t, t as n } from "./components-PQfnwrHI.js";
-import { c as r, i, n as a, o } from "./lit-C4H1jI4q.js";
-import "./chunk.7MPIABXH-CEYdxYyt.js";
-import { n as s, t as c } from "./decorators-BqWyWiL9.js";
-import { t as l } from "./query-BYu9q8lA.js";
+import { c as e, f as t, g as n, i as r, p as i, r as a, t as o, u as s } from "./components-DrP7BOrs.js";
+import "./chunk.64OG2H45-BADxAtEI.js";
+import { t as c } from "./query-BYu9q8lA.js";
 import "./chevron-down-ujxRg3MD.js";
 //#region node_modules/@lit/task/task.js
-var u = Symbol(), d = class {
+var l = Symbol(), u = class {
 	get taskComplete() {
-		return this.t || (this.i === 1 ? this.t = new Promise(((e, t) => {
+		return this.t ||= this.i === 1 ? new Promise(((e, t) => {
 			this.o = e, this.h = t;
-		})) : this.i === 3 ? this.t = Promise.reject(this.l) : this.t = Promise.resolve(this.u)), this.t;
+		})) : this.i === 3 ? Promise.reject(this.l) : Promise.resolve(this.u), this.t;
 	}
 	constructor(e, t, n) {
 		this.p = 0, this.i = 0, (this._ = e).addController(this);
@@ -17,7 +15,7 @@ var u = Symbol(), d = class {
 			task: t,
 			args: n
 		};
-		this.v = r.task, this.j = r.args, this.m = r.argsEqual ?? f, this.k = r.onComplete, this.A = r.onError, this.autoRun = r.autoRun ?? !0, "initialValue" in r && (this.u = r.initialValue, this.i = 2, this.O = this.T?.());
+		this.v = r.task, this.j = r.args, this.m = r.argsEqual ?? d, this.k = r.onComplete, this.A = r.onError, this.autoRun = r.autoRun ?? !0, "initialValue" in r && (this.u = r.initialValue, this.i = 2, this.O = this.T?.());
 	}
 	hostUpdate() {
 		!0 === this.autoRun && this.S();
@@ -47,7 +45,7 @@ var u = Symbol(), d = class {
 			i = !0, n = e;
 		}
 		if (this.p === r) {
-			if (t === u) this.i = 0;
+			if (t === l) this.i = 0;
 			else {
 				if (!1 === i) {
 					try {
@@ -86,10 +84,10 @@ var u = Symbol(), d = class {
 			default: throw Error("Unexpected status: " + this.i);
 		}
 	}
-}, f = (e, t) => e === t || e.length === t.length && e.every(((e, n) => !o(e, t[n])));
+}, d = (e, n) => e === n || e.length === n.length && e.every(((e, r) => !t(e, n[r])));
 //#endregion
 //#region src/lib/timing.ts
-function p(e, t) {
+function f(e, t) {
 	let n = null, r = (...i) => {
 		r.cancel(), n = setTimeout(() => t(...i), e);
 	};
@@ -99,40 +97,40 @@ function p(e, t) {
 }
 //#endregion
 //#region ~icons/svg-spinners/3-dots-fade
-var m = class extends HTMLElement {
+var p = class extends HTMLElement {
 	constructor() {
 		super(), this.attachShadow({ mode: "open" }).innerHTML = "<style>:host { display: inline-flex; }</style><svg viewBox=\"0 0 24 24\" width=\"100%\" height=\"100%\" ><circle cx=\"4\" cy=\"12\" r=\"3\" fill=\"currentColor\"><animate id=\"SVG7x14Dcom\" fill=\"freeze\" attributeName=\"opacity\" begin=\"0;SVGqSjG0dUp.end-0.25s\" dur=\"0.75s\" values=\"1;.2\"/></circle><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"currentColor\" opacity=\".4\"><animate fill=\"freeze\" attributeName=\"opacity\" begin=\"SVG7x14Dcom.begin+0.15s\" dur=\"0.75s\" values=\"1;.2\"/></circle><circle cx=\"20\" cy=\"12\" r=\"3\" fill=\"currentColor\" opacity=\".3\"><animate id=\"SVGqSjG0dUp\" fill=\"freeze\" attributeName=\"opacity\" begin=\"SVG7x14Dcom.begin+0.3s\" dur=\"0.75s\" values=\"1;.2\"/></circle></svg>";
 	}
 };
-customElements.get("icon-svg-spinners-3-dots-fade") || customElements.define("icon-svg-spinners-3-dots-fade", m);
+customElements.get("icon-svg-spinners-3-dots-fade") || customElements.define("icon-svg-spinners-3-dots-fade", p);
 //#endregion
 //#region src/components/combobox/Combobox.styles.css
-var h = r`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex;& label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}& wa-popup{width:100%;display:block}& wa-popup::part(popup){border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;padding:4px;overflow:hidden;box-shadow:0 4px 16px #00000059}& .input-wrapper{width:100%;position:relative;& input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}& icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}}& .listbox{max-height:inherit;flex-direction:column;gap:2px;display:flex;overflow:auto;& [role=option],& .non-selectable-option{color:var(--solid-ui-color-gray-700);border-radius:5px;padding:12px 8px}& [role=option]{cursor:pointer;&:hover,&[data-active]{background:var(--solid-ui-color-primary-hover)}&[aria-selected=true]{background:var(--solid-ui-color-primary-selected)}}& .non-selectable-option{justify-content:center;align-items:center;display:flex;& icon-svg-spinners-3-dots-fade{width:2rem}& .message--error{color:var(--solid-ui-color-error)}}}}`, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, N, P, ee, te, ne, re, ie, ae, oe, se, F, I, L, R, z, B, V, H, U, W, G, K, ce, le, ue, de, fe, pe, me, he, ge, _e, ve, ye, be, xe, Se, Ce, we, Te, Ee;
+var m = i`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex;& label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}& wa-popup{width:100%;display:block}& wa-popup::part(popup){border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;padding:4px;overflow:hidden;box-shadow:0 4px 16px #00000059}& .input-wrapper{width:100%;position:relative;& input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}& icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}}& .listbox{max-height:inherit;flex-direction:column;gap:2px;display:flex;overflow:auto;& [role=option],& .non-selectable-option{color:var(--solid-ui-color-gray-700);border-radius:5px;padding:12px 8px}& [role=option]{cursor:pointer;&:hover,&[data-active]{background:var(--solid-ui-color-primary-hover)}&[aria-selected=true]{background:var(--solid-ui-color-primary-selected)}}& .non-selectable-option{justify-content:center;align-items:center;display:flex;& icon-svg-spinners-3-dots-fade{width:2rem}& .message--error{color:var(--solid-ui-color-error)}}}}`, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, ee, te, ne, re, ie, ae, oe, se, M, N, P, F, I, L, R, z, B, V, H, U, W, G, K, ce, le, ue, de, fe, pe;
 function q(e, t, n) {
-	De(e, t), t.set(e, n);
+	me(e, t), t.set(e, n);
 }
-function De(e, t) {
+function me(e, t) {
 	if (t.has(e)) throw TypeError("Cannot initialize the same private elements twice on an object");
 }
 function J(e, t, n) {
-	return e.set(Oe(e, t), n), n;
+	return e.set(he(e, t), n), n;
 }
 function Y(e, t) {
-	return e.get(Oe(e, t));
+	return e.get(he(e, t));
 }
-function Oe(e, t, n) {
+function he(e, t, n) {
 	if (typeof e == "function" ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
 	throw TypeError("Private element is not present on this object");
 }
 function X(e, t, n) {
-	return (t = Z(t)) in e ? Object.defineProperty(e, t, {
+	return (t = _e(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
 		writable: !0
 	}) : e[t] = n, e;
 }
-function ke(e, t, n, r, i, a) {
+function ge(e, t, n, r, i, a) {
 	function o(e, t, n) {
 		return function(r, i) {
 			return n && n(r), e[t].call(r, i);
@@ -155,13 +153,13 @@ function ke(e, t, n, r, i, a) {
 			n || Array.isArray(_) || (_ = [_]);
 			var b = {}, x = [], S = i === 3 ? "get" : i === 4 || p ? "set" : "value";
 			d ? (f || p ? b = {
-				get: je(function() {
+				get: Z(function() {
 					return v(this);
 				}, r, "get"),
 				set: function(e) {
 					t[4](this, e);
 				}
-			} : b[S] = v, f || je(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
+			} : b[S] = v, f || Z(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
 		}
 		for (var C = e, w = _.length - 1; w >= 0; w -= n ? 2 : 1) {
 			var T = _[w], E = n ? _[w - 1] : void 0, D = {}, O = {
@@ -221,7 +219,7 @@ function ke(e, t, n, r, i, a) {
 	if (arguments.length >= 6) var d = a[Symbol.metadata || Symbol.for("Symbol.metadata")];
 	var f = Object.create(d ?? null), p = function(e, t, n, r) {
 		var i, a, o = [], c = function(t) {
-			return Me(t) === e;
+			return ye(t) === e;
 		}, u = /* @__PURE__ */ new Map();
 		function d(e) {
 			e && o.push(s.bind(null, e));
@@ -235,7 +233,7 @@ function ke(e, t, n, r, i, a) {
 					if (!0 === x || x === 3 && m !== 4 || x === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h);
 					u.set(b, !(m > 2) || m);
 				}
-				l(v ? e : e.prototype, p, _, g ? "#" + h : Z(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
+				l(v ? e : e.prototype, p, _, g ? "#" + h : _e(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
 			}
 		}
 		return d(i), d(a), o;
@@ -248,11 +246,11 @@ function ke(e, t, n, r, i, a) {
 		}
 	};
 }
-function Z(e) {
-	var t = Ae(e, "string");
+function _e(e) {
+	var t = ve(e, "string");
 	return typeof t == "symbol" ? t : t + "";
 }
-function Ae(e, t) {
+function ve(e, t) {
 	if (typeof e != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
@@ -262,7 +260,7 @@ function Ae(e, t) {
 	}
 	return (t === "string" ? String : Number)(e);
 }
-function je(e, t, n) {
+function Z(e, t, n) {
 	typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
 	try {
 		Object.defineProperty(e, "name", {
@@ -272,159 +270,123 @@ function je(e, t, n) {
 	} catch {}
 	return e;
 }
-function Me(e) {
+function ye(e) {
 	if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e === null ? "null" : typeof e));
 	return e;
 }
-function Ne(e) {
+function be(e) {
 	return e;
 }
 var Q = class extends Error {};
-function Pe(e) {
+function xe(e) {
 	return e;
 }
-ne = [t("solid-ui-combobox")];
+ee = [n("solid-ui-combobox")];
 var $;
-new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b = /*#__PURE__*/ new WeakMap(), x = /*#__PURE__*/ new WeakMap(), S = /*#__PURE__*/ new WeakMap(), C = /*#__PURE__*/ new WeakMap(), w = /*#__PURE__*/ new WeakMap(), T = /*#__PURE__*/ new WeakMap(), E = /*#__PURE__*/ new WeakMap(), D = /*#__PURE__*/ new WeakMap(), O = /*#__PURE__*/ new WeakMap(), k = /*#__PURE__*/ new WeakMap(), A = /*#__PURE__*/ new WeakMap(), j = /*#__PURE__*/ new WeakMap(), M = /*#__PURE__*/ new WeakMap(), N = /*#__PURE__*/ new WeakMap(), P = /*#__PURE__*/ new WeakMap(), Ee = (re = s({
-	type: String,
-	reflect: !0
-}), ae = s({
-	type: String,
-	reflect: !0
-}), se = s(), I = s({
-	type: String,
-	reflect: !0
-}), R = s({
-	type: Boolean,
-	reflect: !0
-}), B = s({
+new (fe = (_ = /*#__PURE__*/ new WeakMap(), v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b = /*#__PURE__*/ new WeakMap(), x = /*#__PURE__*/ new WeakMap(), S = /*#__PURE__*/ new WeakMap(), C = /*#__PURE__*/ new WeakMap(), w = /*#__PURE__*/ new WeakMap(), T = /*#__PURE__*/ new WeakMap(), E = /*#__PURE__*/ new WeakMap(), D = /*#__PURE__*/ new WeakMap(), O = /*#__PURE__*/ new WeakMap(), k = /*#__PURE__*/ new WeakMap(), pe = (te = r({
 	type: Boolean,
 	reflect: !0,
 	attribute: "select-only"
-}), H = s({
+}), re = r({
 	type: String,
 	attribute: "async-options-url"
-}), W = s({
+}), ae = r({
 	type: String,
 	attribute: "async-options-results-field"
-}), K = s({
+}), se = r({
 	type: String,
 	attribute: "async-options-label-field"
-}), le = s({
+}), N = r({
 	type: String,
 	attribute: "async-options-value-field"
-}), de = s({ type: Function }), pe = s({ type: Array }), he = l("input"), _e = c(), ye = c(), xe = c(), Ce = c(), "label"), _ = class extends e {
-	get [Ee]() {
+}), F = r({ type: Function }), L = r({ type: Array }), z = c("input"), V = r({
+	type: Boolean,
+	reflect: !0
+}), U = a(), G = a(), ce = a(), ue = a(), "selectOnly"), g = class extends o {
+	get [pe]() {
+		return Y(_, this);
+	}
+	set selectOnly(e) {
+		J(_, this, e);
+	}
+	get asyncOptionsUrl() {
 		return Y(v, this);
 	}
-	set label(e) {
+	set asyncOptionsUrl(e) {
 		J(v, this, e);
 	}
-	get name() {
+	get asyncOptionsResultsField() {
 		return Y(y, this);
 	}
-	set name(e) {
+	set asyncOptionsResultsField(e) {
 		J(y, this, e);
 	}
-	get value() {
+	get asyncOptionsLabelField() {
 		return Y(b, this);
 	}
-	set value(e) {
+	set asyncOptionsLabelField(e) {
 		J(b, this, e);
 	}
-	get placeholder() {
+	get asyncOptionsValueField() {
 		return Y(x, this);
 	}
-	set placeholder(e) {
+	set asyncOptionsValueField(e) {
 		J(x, this, e);
 	}
-	get required() {
+	get asyncOptionsProvider() {
 		return Y(S, this);
 	}
-	set required(e) {
+	set asyncOptionsProvider(e) {
 		J(S, this, e);
 	}
-	get selectOnly() {
+	get optionsFallback() {
 		return Y(C, this);
 	}
-	set selectOnly(e) {
+	set optionsFallback(e) {
 		J(C, this, e);
 	}
-	get asyncOptionsUrl() {
+	get controlElement() {
 		return Y(w, this);
 	}
-	set asyncOptionsUrl(e) {
+	set controlElement(e) {
 		J(w, this, e);
 	}
-	get asyncOptionsResultsField() {
+	get readonly() {
 		return Y(T, this);
 	}
-	set asyncOptionsResultsField(e) {
+	set readonly(e) {
 		J(T, this, e);
 	}
-	get asyncOptionsLabelField() {
-		return Y(E, this);
-	}
-	set asyncOptionsLabelField(e) {
-		J(E, this, e);
-	}
-	get asyncOptionsValueField() {
-		return Y(D, this);
-	}
-	set asyncOptionsValueField(e) {
-		J(D, this, e);
-	}
-	get asyncOptionsProvider() {
-		return Y(O, this);
-	}
-	set asyncOptionsProvider(e) {
-		J(O, this, e);
-	}
-	get optionsFallback() {
-		return Y(k, this);
-	}
-	set optionsFallback(e) {
-		J(k, this, e);
-	}
-	get inputElement() {
-		return Y(A, this);
-	}
-	set inputElement(e) {
-		J(A, this, e);
-	}
 	get filter() {
-		return Y(j, this);
+		return Y(E, this);
 	}
 	set filter(e) {
-		J(j, this, e);
+		J(E, this, e);
 	}
 	get displayValue() {
-		return Y(M, this);
+		return Y(D, this);
 	}
 	set displayValue(e) {
-		J(M, this, e);
+		J(D, this, e);
 	}
 	get open() {
-		return Y(N, this);
+		return Y(O, this);
 	}
 	set open(e) {
-		J(N, this, e);
+		J(O, this, e);
 	}
 	get activeIndex() {
-		return Y(P, this);
+		return Y(k, this);
 	}
 	set activeIndex(e) {
-		J(P, this, e);
+		J(k, this, e);
 	}
 	constructor() {
-		super(), q(this, v, (ee(this), ie(this, ""))), q(this, y, oe(this, "")), q(this, b, F(this, "")), q(this, x, L(this, "")), q(this, S, z(this, !1)), q(this, C, V(this, !1)), q(this, w, U(this, "")), q(this, T, G(this, "")), q(this, E, ce(this, "")), q(this, D, ue(this, "")), q(this, O, fe(this, null)), q(this, k, me(this, null)), q(this, A, ge(this, null)), q(this, j, ve(this, "")), q(this, M, be(this, "")), q(this, N, Se(this, !1)), q(this, P, we(this, -1)), X(this, "controlTrait", void 0), X(this, "openListenersAttached", !1), X(this, "updateDebouncedFilter", p(300, (e) => this.filter = e)), X(this, "asyncOptionsTask", void 0), X(this, "_selectedOption", void 0), X(this, "listboxId", void 0), X(this, "handleDocumentFocusIn", (e) => {
+		super(), q(this, _, (A(this), ne(this, !1))), q(this, v, ie(this, "")), q(this, y, oe(this, "")), q(this, b, M(this, "")), q(this, x, P(this, "")), q(this, S, I(this, null)), q(this, C, R(this, null)), q(this, w, B(this, null)), q(this, T, H(this, !1)), q(this, E, W(this, "")), q(this, D, K(this, "")), q(this, O, le(this, !1)), q(this, k, de(this, -1)), X(this, "openListenersAttached", !1), X(this, "updateDebouncedFilter", f(300, (e) => this.filter = e)), X(this, "asyncOptionsTask", void 0), X(this, "_selectedOption", void 0), X(this, "listboxId", void 0), X(this, "handleDocumentFocusIn", (e) => {
 			e.composedPath().includes(this) || this.hide();
 		}), X(this, "handleDocumentMouseDown", (e) => {
 			e.composedPath().includes(this) || this.hide();
-		}), this.controlTrait = this.addTrait(new n(this, {
-			getControlElement: () => this.inputElement,
-			getInternals: () => this.getInternals()
-		})), this.listboxId = `listbox-${this.controlTrait.controlId}`;
+		}), this.listboxId = `listbox-${this.controlTrait.controlId}`;
 	}
 	get selectedOption() {
 		return this._selectedOption;
@@ -439,8 +401,8 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 		}
 	}
 	render() {
-		let e = this.getFilteredOptions(), t = (this.open && this.activeIndex >= 0 ? e[this.activeIndex] : void 0) === void 0 ? void 0 : this.getOptionId(this.activeIndex), n = this.placeholder || "Combobox";
-		return i`
+		let t = this.getFilteredOptions(), n = (this.open && this.activeIndex >= 0 ? t[this.activeIndex] : void 0) === void 0 ? void 0 : this.getOptionId(this.activeIndex), r = this.placeholder || "Combobox";
+		return s`
       ${this.controlTrait.renderLabel()}
       <wa-popup
         placement="bottom"
@@ -462,17 +424,17 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
             aria-haspopup="listbox"
             aria-expanded=${this.open ? "true" : "false"}
             aria-controls=${this.listboxId}
-            aria-activedescendant=${t ?? a}
-            aria-labelledby=${this.label ? this.controlTrait.labelId : a}
-            aria-label=${this.label ? a : n}
-            aria-required=${this.required ? "true" : a}
+            aria-activedescendant=${n ?? e}
+            aria-labelledby=${this.label ? this.controlTrait.labelId : e}
+            aria-label=${this.label ? e : r}
+            aria-required=${this.required ? "true" : e}
             autocomplete="off"
             spellcheck="false"
             ?required=${this.required}
             .value=${this.displayValue}
             @keydown=${this.onInputKeyDown}
             @focus=${this.onInputFocus}
-            @input=${() => this.selectOnly ? this.updateDisplayValue(this.inputElement?.value ?? "") : this.controlTrait.onInput()}
+            @input=${() => this.selectOnly ? this.updateDisplayValue(this.controlElement?.value ?? "") : this.controlTrait.onInput()}
           />
           <icon-lucide-chevron-down></icon-lucide-chevron-down>
         </div>
@@ -481,19 +443,19 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
           class="listbox"
           role="listbox"
           aria-orientation="vertical"
-          aria-labelledby=${this.label ? this.controlTrait.labelId : a}
-          aria-label=${this.label ? a : n}
+          aria-labelledby=${this.label ? this.controlTrait.labelId : e}
+          aria-label=${this.label ? e : r}
           ?hidden=${!this.open}
           @mousedown=${this.onListboxMouseDown}
         >
-          ${e.map((e, t) => e.selectable === !1 ? i`<div class="non-selectable-option">${e.template ?? e.label}</div>` : i`<div
-                  id=${this.getOptionId(t)}
+          ${t.map((t, n) => t.selectable === !1 ? s`<div class="non-selectable-option">${t.template ?? t.label}</div>` : s`<div
+                  id=${this.getOptionId(n)}
                   role="option"
-                  aria-selected=${e.value === this.value ? "true" : "false"}
-                  data-active=${t === this.activeIndex || a}
-                  @mousemove=${() => this.setActiveIndex(t)}
+                  aria-selected=${t.value === this.value ? "true" : "false"}
+                  data-active=${n === this.activeIndex || e}
+                  @mousemove=${() => this.setActiveIndex(n)}
                 >
-                  ${e.template ?? e.label}
+                  ${t.template ?? t.label}
                 </div>`)}
         </div>
       </wa-popup>
@@ -506,7 +468,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 			pending: () => [{
 				value: "",
 				label: "Loading...",
-				template: i`<icon-svg-spinners-3-dots-fade></icon-svg-spinners-3-dots-fade>`,
+				template: s`<icon-svg-spinners-3-dots-fade></icon-svg-spinners-3-dots-fade>`,
 				selectable: !1
 			}],
 			error: (e) => {
@@ -514,7 +476,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 				return [{
 					value: "",
 					label: n,
-					template: i`<span class="message message--${t ? "error" : "info"}">${n}</span>`,
+					template: s`<span class="message message--${t ? "error" : "info"}">${n}</span>`,
 					selectable: !1
 				}];
 			}
@@ -541,7 +503,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 		this.activeIndex = e;
 	}
 	updateDisplayValue(e) {
-		if (this.displayValue = String(e), this.open) {
+		if (this.displayValue = e ? String(e) : "", this.open) {
 			let e = this.displayValue.toLowerCase();
 			this.asyncOptionsTask ? this.updateDebouncedFilter(e) : this.filter = e;
 		}
@@ -551,7 +513,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 			this.asyncOptionsTask = void 0;
 			return;
 		}
-		this.asyncOptionsTask ??= new d(this, async ([e]) => {
+		this.asyncOptionsTask ??= new u(this, async ([e]) => {
 			if (this.asyncOptionsProvider) {
 				let t = await this.asyncOptionsProvider(e);
 				if (t.length === 0) throw new Q("No results found");
@@ -576,7 +538,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 	}
 	selectOption(e) {
 		let t = this.value;
-		this._selectedOption = e, this.hide(), this.controlTrait.setValue(e.value), this.inputElement?.focus({ preventScroll: !0 }), this.dispatchEvent(new CustomEvent("change", {
+		this._selectedOption = e, this.hide(), this.controlTrait.setValue(e.value), this.controlElement?.focus({ preventScroll: !0 }), this.dispatchEvent(new CustomEvent("change", {
 			bubbles: !0,
 			composed: !0,
 			detail: { option: e }
@@ -598,7 +560,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 		e !== document && e.removeEventListener("focusin", this.handleDocumentFocusIn), this.openListenersAttached = !1;
 	}
 	onAnchorMouseDown(e) {
-		e.target !== this.inputElement && (e.preventDefault(), this.inputElement?.focus({ preventScroll: !0 }));
+		e.target !== this.controlElement && (e.preventDefault(), this.controlElement?.focus({ preventScroll: !0 }));
 	}
 	onInputFocus() {
 		this.show();
@@ -619,7 +581,7 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 				this.open && this.activeIndex >= 0 && t[this.activeIndex] ? (e.preventDefault(), this.selectOption(t[this.activeIndex])) : this.open || (e.preventDefault(), this.controlTrait.onSubmit());
 				break;
 			case "Escape":
-				this.open && (e.preventDefault(), e.stopPropagation(), this.hide(), this.inputElement?.focus({ preventScroll: !0 }));
+				this.open && (e.preventDefault(), e.stopPropagation(), this.hide(), this.controlElement?.focus({ preventScroll: !0 }));
 				break;
 			case "Tab":
 				this.hide();
@@ -634,101 +596,81 @@ new (Te = (v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), b =
 		let n = t.id, r = Number.parseInt(n.replace(`${this.listboxId}-option-`, ""), 10), i = this.getFilteredOptions()[r];
 		i && this.selectOption(i);
 	}
-}, {e: [ie, oe, F, L, z, V, U, G, ce, ue, fe, me, ge, ve, be, Se, we, ee], c: [$, te]} = ke(_, [
-	[
-		re,
-		1,
-		"label"
-	],
-	[
-		ae,
-		1,
-		"name"
-	],
-	[
-		se,
-		1,
-		"value"
-	],
-	[
-		I,
-		1,
-		"placeholder"
-	],
-	[
-		R,
-		1,
-		"required"
-	],
+}, {e: [ne, ie, oe, M, P, I, R, B, H, W, K, le, de, A], c: [$, j]} = ge(g, [
 	[
-		B,
+		te,
 		1,
 		"selectOnly"
 	],
 	[
-		H,
+		re,
 		1,
 		"asyncOptionsUrl"
 	],
 	[
-		W,
+		ae,
 		1,
 		"asyncOptionsResultsField"
 	],
 	[
-		K,
+		se,
 		1,
 		"asyncOptionsLabelField"
 	],
 	[
-		le,
+		N,
 		1,
 		"asyncOptionsValueField"
 	],
 	[
-		de,
+		F,
 		1,
 		"asyncOptionsProvider"
 	],
 	[
-		pe,
+		L,
 		1,
 		"optionsFallback"
 	],
 	[
-		he,
+		z,
+		1,
+		"controlElement"
+	],
+	[
+		V,
 		1,
-		"inputElement"
+		"readonly"
 	],
 	[
-		_e,
+		U,
 		1,
 		"filter"
 	],
 	[
-		ye,
+		G,
 		1,
 		"displayValue"
 	],
 	[
-		xe,
+		ce,
 		1,
 		"open"
 	],
 	[
-		Ce,
+		ue,
 		1,
 		"activeIndex"
 	]
-], ne, 0, void 0, e), _), g = class extends Ne {
+], ee, 0, void 0, o), g), h = class extends be {
 	constructor() {
-		super($), X(this, "styles", h), X(this, "formAssociated", !0), te();
+		super($), X(this, "styles", m), j();
 	}
-}, X(g, Te, void 0), g)();
+}, X(h, fe, void 0), h)();
 //#endregion
 //#region src/components/combobox/index.ts
-var Fe = $;
+var Se = $;
 //#endregion
-export { $ as n, Pe as r, Fe as t };
+export { $ as n, xe as r, Se as t };
 
-//# sourceMappingURL=combobox-DrT0Nb-A.js.map
+//# sourceMappingURL=combobox-0NWv9K3D.js.map