@webority/ui-elements 0.7.1 → 0.7.3

package/dist/ui-elements.js

@@ -16,7 +16,7 @@ var e = {
 		this.isConnected && this.render();
 	}
 	render() {
-		let t = this.getAttribute("tone"), n = this.getAttribute("size") || "72", r = e[t] || e.info;
+		let t = this.getAttribute("tone"), n = Number.parseInt(this.getAttribute("size"), 10) || 72, r = e[t] || e.info;
 		this.innerHTML = `<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`;
 	}
 }, r = 4;
@@ -57,6 +57,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	let t = e[l] ? String(e.label ?? "") : u(e.label), n = d(e.icon);
 	return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
 }, p = class extends HTMLElement {
+	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
@@ -69,17 +70,30 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			"debounce",
 			"remote",
 			"size",
-			"aria-label"
+			"aria-label",
+			"allow-custom"
 		];
 	}
 	constructor() {
 		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null;
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		this._rendered || (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
+	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
 	}
 	attributeChangedCallback(e, t, n) {
-		this._rendered && (e === "value" ? this.value = n : this.render());
+		if (e === "value") {
+			this.value = n;
+			return;
+		}
+		this._rendered && this.render();
 	}
 	get value() {
 		return this._value;
@@ -106,6 +120,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	get _remote() {
 		return this.hasAttribute("remote");
 	}
+	get _allowCustom() {
+		return this.hasAttribute("allow-custom");
+	}
+	_matchesKnownOption(e) {
+		let t = e.toLowerCase();
+		return this._readOptions().some((e) => h(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
+	}
 	get _minChars() {
 		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
 	}
@@ -172,13 +193,22 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_renderOptions(e) {
 		let t = this._refs();
 		if (!t.optionsWrap) return;
-		let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
-		!this._remote && n && (r = r.filter((e) => h(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
+		let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
+		!this._remote && r && (i = i.filter((e) => h(e.label).toLowerCase().includes(r)));
+		let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
+			value: a,
+			custom: !0
+		}] : i;
+		t.optionsWrap.innerHTML = o.map((e) => {
+			if (e.custom) {
+				let t = `Add “${u(e.value)}”`;
+				return `<button type="button" role="option" class="search-select-option search-select-option-custom" data-value="${m(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
+			}
 			let t = String(e.value) === String(this._value);
 			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${t}">${f(e)}</button>`;
 		}).join(""), this._active = -1;
-		let i = n.length < this._minChars;
-		t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
+		let s = r.length < this._minChars;
+		t.hint && (t.hint.hidden = !(this._remote && s && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && s);
 	}
 	_wire() {
 		let e = this._refs();
@@ -193,7 +223,16 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}, l = () => {
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
 		}, u = (t) => {
-			this._value = t.dataset.value, this._label = h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), l(), e.input.focus();
+			let n = t.dataset.custom === "true";
+			this._value = t.dataset.value, this._label = n ? t.dataset.value : h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				detail: { isCustom: n }
+			})), l(), e.input.focus();
+		}, d = (t) => {
+			this._value = t, this._label = t, c(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				detail: { isCustom: !0 }
+			})), l();
 		};
 		e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
 			let t = e.input.value;
@@ -206,9 +245,21 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 					}));
 				}, this._debounceMs);
 			} else this._renderOptions(t);
-		}), e.input.addEventListener("keydown", (e) => {
-			let t = n();
-			e.key === "ArrowDown" ? (e.preventDefault(), o() || s(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), u(t[this._active])) : e.key === "Escape" && l();
+		}), e.input.addEventListener("keydown", (t) => {
+			let i = n();
+			if (t.key === "ArrowDown") t.preventDefault(), o() || s(), r(Math.min(this._active + 1, i.length - 1));
+			else if (t.key === "ArrowUp") t.preventDefault(), r(Math.max(this._active - 1, 0));
+			else if (t.key === "Enter") {
+				if (i[this._active]) t.preventDefault(), u(i[this._active]);
+				else if (this._allowCustom) {
+					let n = e.input.value.trim();
+					n && !this._matchesKnownOption(n) && (t.preventDefault(), d(n));
+				}
+			} else t.key === "Escape" && l();
+		}), e.input.addEventListener("blur", (t) => {
+			if (!this._allowCustom || t.relatedTarget && this.contains(t.relatedTarget)) return;
+			let n = e.input.value.trim();
+			!n || n === this._label || this._matchesKnownOption(n) || d(n);
 		}), e.optionsWrap.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && u(t);
@@ -265,6 +316,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		m: t
 	};
 }, w = class extends HTMLElement {
+	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
 			"value",
@@ -273,11 +325,19 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			"placeholder",
 			"disabled",
 			"first-day",
-			"size"
+			"size",
+			"aria-label",
+			"aria-describedby"
 		];
 	}
 	constructor() {
-		super(), this._value = "";
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._value = "";
 		let e = new Date(2e3, 0, 1);
 		this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
 	}
@@ -287,6 +347,9 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	attributeChangedCallback(e, t, n) {
 		this._rendered && (e === "value" ? (this._value = n || "", this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
 	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
 	get value() {
 		return this._value;
 	}
@@ -298,14 +361,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
 	}
 	render() {
-		this._value = this.getAttribute("value") || this._value;
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._value = this.getAttribute("value") || this._value;
 		let e = this.getAttribute("placeholder") || "Enter Date", t = b(this._value);
 		t && (this._viewY = t.y, this._viewM = t.m);
-		let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "";
+		let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="datepicker">
-        <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? x(this._value) : e}</span>
+        <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${u(i)}"` : ""}${a ? ` aria-describedby="${u(a)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? x(this._value) : u(e)}</span>
           <i class="bi bi-calendar3" aria-hidden="true"></i>
         </button>
         <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
@@ -466,6 +529,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}
 	}
 	_wire() {
+		this._teardown();
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop"), n = this.querySelector(".datepicker");
 		if (!e || !t) return;
 		let r = () => !t.hidden;
@@ -544,9 +608,12 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			r() && this._position(e, t);
 		}), this._syncFormValue();
 	}
-	disconnectedCallback() {
+	_teardown() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
 	}
+	disconnectedCallback() {
+		this._teardown();
+	}
 }, T = [
 	"January",
 	"February",
@@ -586,6 +653,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		m: t
 	};
 }, M = class extends HTMLElement {
+	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
 			"start",
@@ -595,11 +663,22 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			"placeholder",
 			"disabled",
 			"first-day",
-			"size"
+			"size",
+			"aria-label",
+			"aria-describedby",
+			"name",
+			"start-name",
+			"end-name"
 		];
 	}
 	constructor() {
-		super(), this._start = "", this._end = "", this._hover = "";
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._start = "", this._end = "", this._hover = "";
 		let e = new Date(2e3, 0, 1);
 		this._viewY = e.getFullYear(), this._viewM = e.getMonth();
 	}
@@ -633,19 +712,25 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		};
 	}
 	render() {
-		this._start = this.getAttribute("start") || this._start, this._end = this.getAttribute("end") || this._end;
+		this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || ""), this._start = this.getAttribute("start") || this._start, this._end = this.getAttribute("end") || this._end;
 		let e = O(this._start);
 		e && (this._viewY = e.y, this._viewM = e.m);
-		let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label();
+		let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label(), a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="daterange">
-        <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${r}</span>
+        <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${u(a)}"` : ""}${o ? ` aria-describedby="${u(o)}"` : ""}>
+          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${u(r)}</span>
           <i class="bi bi-calendar-range" aria-hidden="true"></i>
         </button>
         <div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
       </div>`, this._rendered = !0, this._syncMirrors(), this._wire();
 	}
+	formResetCallback() {
+		this.value = {
+			start: this._defaultStart || "",
+			end: this._defaultEnd || ""
+		};
+	}
 	_syncTrigger() {
 		let e = this.querySelector(".daterange-trigger"), t = this.querySelector("[data-range-label]");
 		if (!t) return;
@@ -659,7 +744,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_mirror(e, t, n) {
 		if (!t) return;
 		let r = this.querySelector(`input[type="hidden"][data-range-mirror="${e}"]`);
-		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "";
+		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "", r.disabled = this.hasAttribute("disabled");
 	}
 	_limits() {
 		let e = O(this.getAttribute("min")), t = O(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
@@ -724,12 +809,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			return;
 		}
 		if (new Date(e).getTime() < new Date(this._start).getTime()) {
-			this._start = e, this._paint();
+			this._start = e, this._syncTrigger(), this._syncMirrors(), this._paint();
 			return;
 		}
 		this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 	}
 	_wire() {
+		this._teardown();
 		let e = this.querySelector(".daterange-trigger"), t = this.querySelector(".daterange-pop"), n = this.querySelector(".daterange");
 		if (!e || !t) return;
 		let r = () => !t.hidden;
@@ -769,10 +855,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			r() && this._position(e, t);
 		}), this._syncMirrors();
 	}
-	disconnectedCallback() {
+	_teardown() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
 	}
+	disconnectedCallback() {
+		this._teardown();
+	}
 }, N = class extends HTMLElement {
+	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
@@ -790,6 +880,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	constructor() {
 		super(), this._values = [], this._optionsProp = null, this._active = -1;
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -797,9 +892,12 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 				let e = [...this.querySelectorAll(":scope > wui-option[selected]")].map((e) => e.getAttribute("value") ?? e.textContent.trim());
 				e.length && (this._values = e.map(String));
 			}
-			this._valuesInit = !0, this.render();
+			this._valuesInit = !0, this._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
 		}
 	}
+	formResetCallback() {
+		this.values = (this._defaultValues || []).slice();
+	}
 	attributeChangedCallback() {
 		this._rendered && this.render();
 	}
@@ -842,7 +940,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…", n = this.getAttribute("icon"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "";
 		c(this, this._values.join(",")), this.innerHTML = `
       <div class="search-select${i}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${P(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${P(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
           ${n ? `<i class="bi bi-${P(n)} search-select-icon" aria-hidden="true"></i>` : ""}
           <div class="ms-chips" data-chips></div>
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
@@ -892,6 +990,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
 	}
 	_wire() {
+		this._teardown();
 		let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), o = this.querySelector(".search-select-options");
 		if (!e || !t) return;
 		let s = () => this.hasAttribute("disabled");
@@ -914,6 +1013,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), g();
 		};
 		e.addEventListener("click", (e) => {
+			if (s()) return;
 			let t = e.target.closest("[data-remove]");
 			if (t) {
 				e.stopPropagation(), v(t.dataset.remove);
@@ -947,8 +1047,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			p() && l();
 		});
 	}
+	_teardown() {
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
+	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), this._ro?.disconnect(), this._ro = null;
+		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
 }, P = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), te = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ne = /[^0-9]/g, re = /[^0-9a-zA-Z]/g, F = class extends HTMLElement {
 	static get observedAttributes() {
@@ -2333,23 +2436,40 @@ function W(e) {
 	}
 }
 var G = class extends HTMLElement {
+	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
 			"value",
 			"country",
 			"placeholder",
-			"disabled"
+			"disabled",
+			"required",
+			"aria-label",
+			"aria-describedby"
 		];
 	}
 	constructor() {
-		super(), this._country = "IN", this._national = "";
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._country = "IN", this._national = "";
 	}
 	connectedCallback() {
 		this._rendered || this.render();
 	}
 	attributeChangedCallback(e, t, n) {
+		if (e === "value") {
+			this.value = n;
+			return;
+		}
 		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
 	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
 	get value() {
 		return `+${L(this._country)}${this._national}`;
 	}
@@ -2366,6 +2486,7 @@ var G = class extends HTMLElement {
 		c(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 	}
 	render() {
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "");
 		let e = this.getAttribute("placeholder") || H(this._country) || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
 		let t = I.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${R(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
@@ -2382,11 +2503,12 @@ var G = class extends HTMLElement {
             <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
-        <input type="tel" class="input" placeholder="${K(e)}" value="${K(V(this._country, this._national))}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${K(e)}" value="${K(V(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${K(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${K(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
       </div>
       <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, c(this, this.value), this._wire();
 	}
 	_wire() {
+		this._teardown();
 		let e = this.querySelector(".country-toggle"), t = this.querySelector(".phone-input-wrap"), n = this.querySelector(".country-dropdown-menu"), r = this.querySelector(".dropdown-search-input"), i = this.querySelector(".country-list-scroll"), a = this.querySelector(".country-empty"), o = this.querySelector("input[type=tel]"), s = this.querySelector("[data-flag]"), l = this.querySelector("[data-dial]");
 		if (!e || !n) return;
 		let u = () => !n.hidden, d = () => {
@@ -2444,10 +2566,14 @@ var G = class extends HTMLElement {
 			}
 		}), c(this, this.value);
 	}
-	disconnectedCallback() {
+	_teardown() {
 		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
+	disconnectedCallback() {
+		this._teardown();
+	}
 }, K = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), q = class extends HTMLElement {
+	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
 			"value",
@@ -2467,7 +2593,13 @@ var G = class extends HTMLElement {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
 	constructor() {
-		super(), this._value = "", this._optionsProp = null, this._active = -1;
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._value = "", this._optionsProp = null, this._active = -1;
 	}
 	connectedCallback() {
 		this._rendered || this.render();
@@ -2479,6 +2611,9 @@ var G = class extends HTMLElement {
 		}
 		this._rendered && this.render();
 	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
 	get value() {
 		return this._value;
 	}
@@ -2506,7 +2641,7 @@ var G = class extends HTMLElement {
 		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
 	}
 	render() {
-		this._snapshotDeclared();
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._snapshotDeclared();
 		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", l = this.getAttribute("search-placeholder") || "Search...", d = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
 		d && (this._value = String(d.value)), c(this, this._value);
 		let p = e.map((e) => {
@@ -2559,6 +2694,7 @@ var G = class extends HTMLElement {
 		e && (e.hidden = !(this.hasAttribute("clearable") && this._value !== "" && !this.hasAttribute("disabled")));
 	}
 	_wire() {
+		this._teardown();
 		let e = this._refs();
 		if (!e.control || !e.menu) return;
 		let t = () => {
@@ -2612,9 +2748,12 @@ var G = class extends HTMLElement {
 			o() && t();
 		});
 	}
-	disconnectedCallback() {
+	_teardown() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
 	}
+	disconnectedCallback() {
+		this._teardown();
+	}
 }, J = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Y = "image/png,image/jpeg,image/webp", oe = 5, se = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",