@webority/ui-elements 0.7.6 → 0.7.7

package/dist/ui-elements.js

@@ -76,7 +76,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		];
 	}
 	constructor() {
-		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null, this._reqSeq = 0;
+		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null, this._reqSeq = 0, this._pendingSearch = null;
 		try {
 			this._internals = this.attachInternals();
 		} catch {
@@ -84,7 +84,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}
 	}
 	connectedCallback() {
-		this._rendered || (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
+		if (!this._rendered) {
+			this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render();
+			return;
+		}
+		if (this._bindGlobal?.(), this._pendingSearch) {
+			let { query: e, seq: t } = this._pendingSearch;
+			clearTimeout(this._timer), this._timer = setTimeout(() => this._fireSearch(e, t), this._debounceMs);
+		}
 	}
 	formResetCallback() {
 		this.value = this._defaultValue || "";
@@ -154,14 +161,16 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	render() {
 		this._snapshotDeclared();
 		let e = this.getAttribute("placeholder") || "Search…", t = this.getAttribute("size"), n = t === "sm" ? " search-select-sm" : t === "lg" ? " search-select-lg" : "";
-		this.innerHTML = `
+		this.id ||= `wui-autocomplete-${Math.random().toString(36).slice(2, 9)}`;
+		let r = `${this.id}-listbox`;
+		this._listboxId = r, this.innerHTML = `
       <div class="search-select${n}">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${m(this._accessibleName())}">
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${m(r)}" aria-label="${m(this._accessibleName())}">
           <input class="search-select-input search-select-ac-input" placeholder="${m(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
           <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
           <button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${m(r)}" tabindex="-1" hidden>
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
           <div class="search-select-hint" hidden>Type to search…</div>
@@ -199,27 +208,28 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
 			value: a,
 			custom: !0
-		}] : i;
-		t.optionsWrap.innerHTML = o.map((e) => {
+		}] : i, s = this._listboxId || `${this.id || "wui-autocomplete"}-listbox`;
+		t.optionsWrap.innerHTML = o.map((e, t) => {
+			let n = `${s}-opt-${t}`;
 			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>`;
+				return `<button type="button" role="option" id="${m(n)}" 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 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);
+			let r = String(e.value) === String(this._value);
+			return `<button type="button" role="option" id="${m(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${r}">${f(e)}</button>`;
+		}).join(""), this._active = -1, t.control?.removeAttribute("aria-activedescendant");
+		let c = r.length < this._minChars;
+		t.hint && (t.hint.hidden = !(this._remote && c && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && c);
 	}
 	_wire() {
 		this._teardown();
 		let e = this._refs();
 		if (!e.control || !e.input) return;
-		let t = () => i(e.control, e.menu, { matchWidth: !0 }), n = () => this._optionEls().filter((e) => !e.hidden), r = (e) => {
-			let t = n();
-			this._active = e;
+		let t = () => i(e.control, e.menu, { matchWidth: !0 }), n = () => this._optionEls().filter((e) => !e.hidden), r = (t) => {
+			let r = n();
+			this._active = t;
 			for (let e of this._optionEls()) e.classList.remove("is-active");
-			e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
+			t >= 0 && r[t] ? (r[t].classList.add("is-active"), r[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", r[t].id)) : e.control.removeAttribute("aria-activedescendant");
 		}, o = () => !e.menu.hidden, s = () => {
 			e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
 		}, l = () => {
@@ -239,17 +249,15 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
 			let t = e.input.value;
 			if (e.clear && (e.clear.hidden = !t), o() || s(), this._remote) {
-				if (this._renderOptions(t), clearTimeout(this._timer), t.trim().length < this._minChars) return;
+				if (this._renderOptions(t), clearTimeout(this._timer), t.trim().length < this._minChars) {
+					this._pendingSearch = null;
+					return;
+				}
 				let e = ++this._reqSeq;
-				this._timer = setTimeout(() => {
-					this.dispatchEvent(new CustomEvent("search", {
-						bubbles: !0,
-						detail: {
-							query: t,
-							seq: e
-						}
-					}));
-				}, this._debounceMs);
+				this._pendingSearch = {
+					query: t,
+					seq: e
+				}, this._timer = setTimeout(() => this._fireSearch(t, e), this._debounceMs);
 			} else this._renderOptions(t);
 		}), e.input.addEventListener("keydown", (t) => {
 			let i = n();
@@ -274,14 +282,25 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			t && r(this._optionEls().indexOf(t));
 		}), e.optionsWrap.addEventListener("mouseleave", () => r(-1)), e.clear?.addEventListener("click", () => {
 			this._value = "", this._label = "", c(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
-		}), this._onDocClick = (e) => {
-			o() && !this.contains(e.target) && l();
-		}, document.addEventListener("click", this._onDocClick), a(this, () => {
-			o() && t();
-		});
+		}), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				o() && !this.contains(e.target) && l();
+			}, document.addEventListener("click", this._onDocClick), a(this, () => {
+				o() && t();
+			});
+		}, this._bindGlobal();
+	}
+	_fireSearch(e, t) {
+		this._pendingSearch = null, this.dispatchEvent(new CustomEvent("search", {
+			bubbles: !0,
+			detail: {
+				query: e,
+				seq: t
+			}
+		}));
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), clearTimeout(this._timer);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this), clearTimeout(this._timer);
 	}
 	disconnectedCallback() {
 		this._teardown();
@@ -314,17 +333,17 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, ee = (e) => {
+}, x = (e) => {
 	let t = b(e);
 	return t ? `${v(t.d)} ${g[t.m].slice(0, 3)} ${t.y}` : "";
-}, x = (e, t) => new Date(e, t + 1, 0).getDate(), S = (e, t) => {
+}, S = (e, t) => new Date(e, t + 1, 0).getDate(), C = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, te = class extends HTMLElement {
+}, w = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -351,7 +370,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
 	}
 	attributeChangedCallback(e, t, n) {
 		this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
@@ -370,14 +393,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._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._value = this.getAttribute("value") || this._value;
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || 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" : "", 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" : ""}${i ? ` aria-label="${u(i)}"` : ""}${a ? ` aria-describedby="${u(a)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? ee(this._value) : u(e)}</span>
+          <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>
@@ -390,7 +413,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
 		let n = b(this._value);
-		t.textContent = n ? ee(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		t.textContent = n ? x(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_limits() {
 		let e = b(this.getAttribute("min")), t = b(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;
@@ -401,7 +424,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			},
 			monthDisabled: (e, t) => {
 				let i = new Date(e, t, 1).getTime();
-				return new Date(e, t, x(e, t)).getTime() < n || i > r;
+				return new Date(e, t, S(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -414,7 +437,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
 	}
 	_daysHtml() {
-		let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = x(this._viewY, this._viewM), r = b(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
+		let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = S(this._viewY, this._viewM), r = b(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
@@ -426,10 +449,10 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 				u ? "is-today" : "",
 				l ? "is-selected" : ""
 			].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
-		}, c = "", l = S(this._viewY, this._viewM - 1), u = x(l.y, l.m);
+		}, c = "", l = C(this._viewY, this._viewM - 1), u = S(l.y, l.m);
 		for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
 		for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
-		let d = S(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = C(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
 		for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
 		let p = _.map((t, n) => _[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
 		return `
@@ -489,7 +512,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		i(e, t);
 	}
 	_setFocus(e, t, n, r) {
-		let { y: i, m: a } = S(e, t);
+		let { y: i, m: a } = C(e, t);
 		this._focus = {
 			y: i,
 			m: a,
@@ -521,13 +544,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
 			case "PageUp": {
 				e.preventDefault();
-				let n = S(t.y, t.m - (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, x(n.y, n.m)), "slide-prev");
+				let n = C(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, S(n.y, n.m)), "slide-prev");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				let n = S(t.y, t.m + (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, x(n.y, n.m)), "slide-next");
+				let n = C(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, S(n.y, n.m)), "slide-next");
 			}
 			case "Enter":
 			case " ":
@@ -560,7 +583,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			let t = e.target.closest("[data-nav]");
 			if (t) {
 				this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
-				let e = S(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = C(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -610,22 +633,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			s && !s.disabled && (this.value = s.dataset.iso, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 		}), this._onKeyBound = (e) => {
 			r() && this._onKey(e);
-		}, t.addEventListener("keydown", this._onKeyBound), this._onDocClick = (e) => {
-			let t = this._popClick;
-			this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
-		}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
-			r() && e.key === "Escape" && this._close();
-		}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
-			r() && this._position(e, t);
-		}), this._syncFormValue();
+		}, t.addEventListener("keydown", this._onKeyBound), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				let t = this._popClick;
+				this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
+			}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
+				r() && e.key === "Escape" && this._close();
+			}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
+				r() && this._position(e, t);
+			});
+		}, this._bindGlobal(), this._syncFormValue();
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), o(this);
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, C = [
+}, ee = [
 	"January",
 	"February",
 	"March",
@@ -638,7 +663,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	"October",
 	"November",
 	"December"
-], w = [
+], te = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -655,7 +680,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	} : null;
 }, D = (e) => {
 	let t = E(e);
-	return t ? `${T(t.d)} ${C[t.m].slice(0, 3)} ${t.y}` : "";
+	return t ? `${T(t.d)} ${ee[t.m].slice(0, 3)} ${t.y}` : "";
 }, O = (e, t) => new Date(e, t + 1, 0).getDate(), k = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
@@ -663,7 +688,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		y: e,
 		m: t
 	};
-}, A = class extends HTMLElement {
+}, re = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -694,7 +719,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._viewY = e.getFullYear(), this._viewM = e.getMonth();
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
 	}
 	attributeChangedCallback(e, t, n) {
 		this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
@@ -723,7 +752,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		};
 	}
 	render() {
-		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;
+		this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || "", this._start = this._defaultStart || this._start, this._end = this._defaultEnd || this._end);
 		let e = E(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(), a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
@@ -765,7 +794,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		};
 	}
 	_monthHtml(e, t) {
-		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = O(e, t), a = this._limits(), o = w.map((e, t) => w[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = O(e, t), a = this._limits(), o = te.map((e, t) => te[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
 			let i = ne(e, t, n), o = a(e, t, n);
 			return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
 		}, c = "", l = k(e, t - 1), u = O(l.y, l.m);
@@ -775,7 +804,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
 		return `
       <div class="daterange-cal">
-        <div class="datepicker-month-label">${C[t]} ${e}</div>
+        <div class="datepicker-month-label">${ee[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -857,22 +886,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}), t.addEventListener("mouseover", (e) => {
 			let t = e.target.closest(".datepicker-day[data-iso]");
 			t && this._start && !this._end && (this._hover = t.dataset.iso, this._paint());
-		}), this._onDocClick = (e) => {
-			let t = this._popClick;
-			this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
-		}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
-			r() && e.key === "Escape" && this._close();
-		}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
-			r() && this._position(e, t);
-		}), this._syncMirrors();
+		}), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				let t = this._popClick;
+				this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
+			}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
+				r() && e.key === "Escape" && this._close();
+			}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
+				r() && this._position(e, t);
+			});
+		}, this._bindGlobal(), this._syncMirrors();
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), o(this);
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, j = class extends HTMLElement {
+}, ie = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -900,11 +931,17 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	connectedCallback() {
 		if (!this._rendered) {
 			if (!this._valuesInit && !this._optionsProp && !this._values.length) {
-				let e = [...this.querySelectorAll(":scope > wui-option[selected]")].map((e) => e.getAttribute("value") ?? e.textContent.trim());
-				e.length && (this._values = e.map(String));
+				let e = this.getAttribute("value");
+				if (e != null && e !== "") this._values = e.split(",").map((e) => e.trim()).filter(Boolean);
+				else {
+					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._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
+			return;
 		}
+		this._bindGlobal?.();
 	}
 	formResetCallback() {
 		this.values = (this._defaultValues || []).slice();
@@ -916,7 +953,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._values.slice();
 	}
 	set values(e) {
-		this._values = Array.isArray(e) ? e.map(String) : [], c(this, this._values.join(",")), this._rendered && this._renderControl();
+		if (this._values = Array.isArray(e) ? e.map(String) : [], c(this, this._values.join(",")), this._rendered) {
+			this._renderControl();
+			let e = this.querySelector(".search-select-input");
+			this._renderOptions(e ? e.value : "");
+		}
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
@@ -949,15 +990,17 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	render() {
 		this._snapshotDeclared();
 		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 = `
+		c(this, this._values.join(",")), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
+		let a = `${this.id}-listbox`;
+		this._listboxId = a, 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="${M(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
-          ${n ? `<i class="bi bi-${M(n)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${A(a)}" aria-label="${A(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+          ${n ? `<i class="bi bi-${A(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>
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${M(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${A(a)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${A(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -971,7 +1014,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			e.innerHTML = `<span class="search-select-placeholder">${u(t)}</span>`;
 			return;
 		}
-		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${M(e)}" aria-label="Remove ${re(this._labelFor(e))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
+		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${A(e)}" aria-label="Remove ${A(ae(this._labelFor(e)))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -995,22 +1038,22 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
 		if (!t) return;
 		let r = (e || "").trim().toLowerCase(), i = this._readOptions();
-		r && (i = i.filter((e) => re(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
-			let t = this._values.includes(String(e.value));
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${M(e.value)}" aria-selected="${t}"><span class="ms-opt-label">${f(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
-		}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
+		r && (i = i.filter((e) => ae(e.label).toLowerCase().includes(r)));
+		let a = this._listboxId || `${this.id || "wui-multiselect"}-listbox`;
+		t.innerHTML = i.map((e, t) => {
+			let n = this._values.includes(String(e.value));
+			return `<button type="button" role="option" id="${A(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${A(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${f(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
+		}).join(""), n && (n.hidden = i.length > 0), this._active = -1, this.querySelector(".search-select-control")?.removeAttribute("aria-activedescendant");
 	}
 	_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");
-		!this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this));
-		let l = () => i(e, t, { matchWidth: !0 }), u = () => [...this.querySelectorAll(".search-select-option")], d = () => u().filter((e) => !e.hidden), f = (e) => {
-			let t = d();
-			this._active = e;
+		let s = () => this.hasAttribute("disabled"), l = () => i(e, t, { matchWidth: !0 }), u = () => [...this.querySelectorAll(".search-select-option")], d = () => u().filter((e) => !e.hidden), f = (t) => {
+			let n = d();
+			this._active = t;
 			for (let e of u()) e.classList.remove("is-active");
-			e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
+			t >= 0 && n[t] ? (n[t].classList.add("is-active"), n[t].scrollIntoView({ block: "nearest" }), e.setAttribute("aria-activedescendant", n[t].id)) : e.removeAttribute("aria-activedescendant");
 		}, p = () => !t.hidden, m = () => {
 			s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), l(), n && (n.value = "", this._renderOptions(""), n.focus()));
 		}, h = () => {
@@ -1052,19 +1095,21 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 				return;
 			}
 			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
-		}), this._onDocClick = (e) => {
-			p() && !this.contains(e.target) && h();
-		}, document.addEventListener("click", this._onDocClick), a(this, () => {
-			p() && l();
-		});
+		}), this._bindGlobal = () => {
+			this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
+				p() && !this.contains(e.target) && h();
+			}, document.addEventListener("click", this._onDocClick), a(this, () => {
+				p() && l();
+			});
+		}, this._bindGlobal();
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this);
 	}
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, M = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), re = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ie = /[^0-9]/g, ae = /[^0-9a-zA-Z]/g, oe = class extends HTMLElement {
+}, A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ae = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), oe = /[^0-9]/g, se = /[^0-9a-zA-Z]/g, j = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1095,7 +1140,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._value = this._clean(e), c(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ae : ie, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? se : oe, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -1175,7 +1220,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, se = [
+}, M = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2401,7 +2446,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], N = (e) => (se.find((t) => t[0] === e) || [
+], N = (e) => (M.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
@@ -2515,7 +2560,7 @@ var V = class extends HTMLElement {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "");
 		let e = this.getAttribute("placeholder") || R(this._country) || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
-		let t = se.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${P(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		let t = M.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${P(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
@@ -2628,7 +2673,11 @@ var V = class extends HTMLElement {
 		this._value = "", this._optionsProp = null, this._active = -1;
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "value") {
@@ -2669,23 +2718,25 @@ var V = class extends HTMLElement {
 	render() {
 		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) => {
-			let t = String(e.value) === String(this._value);
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${t}">${f(e)}</button>`;
+		d && (this._value = String(d.value)), c(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
+		let p = `${this.id}-listbox`;
+		this._listboxId = p;
+		let m = e.map((e, t) => {
+			let n = String(e.value) === String(this._value);
+			return `<button type="button" role="option" id="${W(`${p}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}">${f(e)}</button>`;
 		}).join("");
 		this.innerHTML = `
       <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${W(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(p)}" aria-label="${W(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
           ${a ? `<i class="bi bi-${W(a)} search-select-icon" aria-hidden="true"></i>` : ""}
           ${o ? `<span class="search-select-prefix">${u(o)}</span>` : ""}
           <span class="${d ? "" : "search-select-placeholder"}" data-label>${d ? f(d) : u(s)}</span>
           ${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </button>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(p)}" tabindex="-1" hidden>
           ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${W(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
-          <div class="search-select-options">${p}<div class="search-select-empty" hidden>No matches</div></div>
+          <div class="search-select-options">${m}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
 	}
@@ -2728,11 +2779,11 @@ var V = class extends HTMLElement {
 				let t = e.control.getBoundingClientRect();
 				e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px", i(e.control, e.menu);
 			} else i(e.control, e.menu, { matchWidth: !0 });
-		}, n = (e) => {
-			let t = this._visible();
-			this._active = e;
+		}, n = (t) => {
+			let n = this._visible();
+			this._active = t;
 			for (let e of this._optionEls()) e.classList.remove("is-active");
-			e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
+			t >= 0 && n[t] ? (n[t].classList.add("is-active"), n[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", n[t].id)) : e.control.removeAttribute("aria-activedescendant");
 		}, r = (t) => {
 			let n = t.trim().toLowerCase(), r = 0;
 			for (let e of this._optionEls()) {
@@ -2768,14 +2819,16 @@ var V = class extends HTMLElement {
 			r(e.search.value), n(-1);
 		}), e.clear?.addEventListener("click", () => {
 			e.search.value = "", r(""), e.search.focus();
-		}), e.menu.addEventListener("keydown", u), this._onDocClick = (e) => {
-			o() && !this.contains(e.target) && c();
-		}, document.addEventListener("click", this._onDocClick), a(this, () => {
-			o() && t();
-		});
+		}), e.menu.addEventListener("keydown", u), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				o() && !this.contains(e.target) && c();
+			}, document.addEventListener("click", this._onDocClick), a(this, () => {
+				o() && t();
+			});
+		}, this._bindGlobal();
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this);
 	}
 	disconnectedCallback() {
 		this._teardown();
@@ -2807,10 +2860,32 @@ var V = class extends HTMLElement {
 		} catch {
 			this._internals = null;
 		}
-		this._value = 50, this._start = 25, this._end = 75, this._isDragging = !1, this._dragThumb = null, this._pointerDownListener = null, this._pointerMoveListener = null, this._pointerUpListener = null;
+		this._value = 50, this._start = 25, this._end = 75, this._isDragging = !1, this._dragThumb = null, this._pointerDownListener = null, this._pointerMoveListener = null, this._pointerUpListener = null, this._thumbKeyListener = null, this._trackClickListener = null;
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._wire();
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		this._value = this._snapToStep(this._clamp(K(e, this._value))), this._syncValue(), this._syncMirrors();
+	}
+	get start() {
+		return this._start;
+	}
+	set start(e) {
+		this._start = Math.min(this._snapToStep(this._clamp(K(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
+	}
+	get end() {
+		return this._end;
+	}
+	set end(e) {
+		this._end = Math.max(this._snapToStep(this._clamp(K(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "value" || e === "start" || e === "end" || e === "min" || e === "max" || e === "step") {
@@ -2823,27 +2898,28 @@ var V = class extends HTMLElement {
 		this._isRange() ? this._resetRange() : this._resetSingle();
 	}
 	_updateFromAttribute(e) {
-		let t = (e) => Number.parseFloat(e) || 0;
-		e === "value" ? this._value = this._snapToStep(this._clamp(t(this.getAttribute("value")))) : e === "start" ? this._start = this._snapToStep(this._clamp(t(this.getAttribute("start")))) : e === "end" && (this._end = this._snapToStep(this._clamp(t(this.getAttribute("end")))));
+		e === "value" ? this._value = this._snapToStep(this._clamp(K(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(K(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(K(this.getAttribute("end"), this._end))));
 	}
 	_isRange() {
 		return this.hasAttribute("range");
 	}
 	_min() {
-		return Number.parseFloat(this.getAttribute("min")) || 0;
+		return K(this.getAttribute("min"), 0);
 	}
 	_max() {
-		return Number.parseFloat(this.getAttribute("max")) || 100;
+		return K(this.getAttribute("max"), 100);
 	}
 	_step() {
-		return Number.parseFloat(this.getAttribute("step")) || 1;
+		return K(this.getAttribute("step"), 1);
 	}
 	_clamp(e) {
 		return Math.max(this._min(), Math.min(e, this._max()));
 	}
 	_snapToStep(e) {
 		let t = this._step();
-		return t <= 0 ? e : Math.round(e / t) * t;
+		if (t <= 0) return e;
+		let n = this._min();
+		return this._clamp(n + Math.round((e - n) / t) * t);
 	}
 	_captureDefaults() {
 		this._defaultsCaptured ||= (this._isRange() ? (this._defaultStart = this._start, this._defaultEnd = this._end) : this._defaultValue = this._value, !0);
@@ -2858,7 +2934,7 @@ var V = class extends HTMLElement {
 		this._captureDefaults();
 		let e = this._min(), t = this._max(), n = this._isRange(), r = this.getAttribute("size"), i = r === "sm" ? " slider-sm" : r === "lg" ? " slider-lg" : "", a = this.hasAttribute("disabled");
 		n ? (this._start = this._clamp(this._start), this._end = this._clamp(this._end), this._start > this._end && ([this._start, this._end] = [this._end, this._start])) : this._value = this._clamp(this._value);
-		let o = (n) => (n - e) / (t - e) * 100, s = n ? o(this._start) : 0, c = o(n ? this._end : this._value);
+		let o = (n) => t === e ? 0 : (n - e) / (t - e) * 100, s = n ? o(this._start) : 0, c = o(n ? this._end : this._value);
 		this.innerHTML = `
       <div class="slider${i}">
         <div class="slider-track" role="presentation"></div>
@@ -2911,7 +2987,7 @@ var V = class extends HTMLElement {
 	}
 	_syncValue() {
 		if (!this._rendered) return;
-		let e = this._min(), t = this._max(), n = (n) => (n - e) / (t - e) * 100, r = this.querySelector(".slider-fill");
+		let e = this._min(), t = this._max(), n = (n) => t === e ? 0 : (n - e) / (t - e) * 100, r = this.querySelector(".slider-fill");
 		if (this._isRange()) {
 			let e = n(this._start), t = n(this._end);
 			r && (r.style.left = `${e}%`, r.style.right = `${100 - t}%`);
@@ -2946,8 +3022,8 @@ var V = class extends HTMLElement {
 	_valueAtPosition(e) {
 		let t = this.querySelector(".slider-track");
 		if (!t) return this._min();
-		let n = t.getBoundingClientRect(), r = Math.max(0, Math.min(1, (e - n.left) / n.width)), i = this._min() + r * (this._max() - this._min()), a = this._step();
-		return Math.round(i / a) * a;
+		let n = t.getBoundingClientRect(), r = Math.max(0, Math.min(1, (e - n.left) / n.width)), i = this._min() + r * (this._max() - this._min());
+		return this._snapToStep(i);
 	}
 	_nearestThumb(e) {
 		return Math.abs(e - this._start) <= Math.abs(e - this._end) ? "start" : "end";
@@ -2979,29 +3055,30 @@ var V = class extends HTMLElement {
 			}
 		}, this._pointerUpListener = () => {
 			this._isDragging && (this._isDragging = !1, this._dragThumb = null, document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
-		}, e.forEach((e) => {
-			e.addEventListener("pointerdown", this._pointerDownListener), e.addEventListener("keydown", (t) => {
-				if (this.hasAttribute("disabled")) return;
-				let n = this._step(), r = n * 10, i = null, a = e.getAttribute("data-thumb");
-				t.key === "ArrowLeft" || t.key === "ArrowDown" ? (t.preventDefault(), i = (a === "end" ? this._end : a === "start" ? this._start : this._value) - n) : t.key === "ArrowRight" || t.key === "ArrowUp" ? (t.preventDefault(), i = (a === "end" ? this._end : a === "start" ? this._start : this._value) + n) : t.key === "PageDown" ? (t.preventDefault(), i = (a === "end" ? this._end : a === "start" ? this._start : this._value) - r) : t.key === "PageUp" ? (t.preventDefault(), i = (a === "end" ? this._end : a === "start" ? this._start : this._value) + r) : t.key === "Home" ? (t.preventDefault(), i = this._min()) : t.key === "End" && (t.preventDefault(), i = this._max()), i != null && (i = this._clamp(i), a === "single" ? this._value = i : a === "start" ? this._start = Math.min(i, this._end) : a === "end" && (this._end = Math.max(i, this._start)), this._syncValue(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
-			});
-		}), t && t.addEventListener("click", (e) => {
+		}, this._thumbKeyListener = (e) => {
+			let t = e.currentTarget;
+			if (this.hasAttribute("disabled")) return;
+			let n = this._step(), r = n * 10, i = null, a = t.getAttribute("data-thumb"), o = a === "end" ? this._end : a === "start" ? this._start : this._value;
+			e.key === "ArrowLeft" || e.key === "ArrowDown" ? (e.preventDefault(), i = o - n) : e.key === "ArrowRight" || e.key === "ArrowUp" ? (e.preventDefault(), i = o + n) : e.key === "PageDown" ? (e.preventDefault(), i = o - r) : e.key === "PageUp" ? (e.preventDefault(), i = o + r) : e.key === "Home" ? (e.preventDefault(), i = this._min()) : e.key === "End" && (e.preventDefault(), i = this._max()), i != null && (i = this._clamp(i), a === "single" ? this._value = i : a === "start" ? this._start = Math.min(i, this._end) : a === "end" && (this._end = Math.max(i, this._start)), this._syncValue(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+		}, this._trackClickListener = (e) => {
 			if (this.hasAttribute("disabled")) return;
 			let t = this._valueAtPosition(e.clientX);
-			n ? this._nearestThumb(t) === "start" ? this._start = Math.min(t, this._end) : this._end = Math.max(t, this._start) : this._value = this._clamp(t), this._syncValue(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-		});
+			n ? this._nearestThumb(t) === "start" ? this._start = Math.min(this._clamp(t), this._end) : this._end = Math.max(this._clamp(t), this._start) : this._value = this._clamp(t), this._syncValue(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}, e.forEach((e) => {
+			e.addEventListener("pointerdown", this._pointerDownListener), e.addEventListener("keydown", this._thumbKeyListener);
+		}), t?.addEventListener("click", this._trackClickListener);
 	}
 	_teardown() {
-		this.querySelectorAll(".slider-thumb").forEach((e) => {
-			e.removeEventListener("pointerdown", this._pointerDownListener), e.removeEventListener("keydown", this._pointerMoveListener);
-		}), document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener);
-		let e = this.querySelector(".slider-track");
-		e && e.removeEventListener("click", this._pointerUpListener);
+		for (let e of this.querySelectorAll(".slider-thumb")) e.removeEventListener("pointerdown", this._pointerDownListener), e.removeEventListener("keydown", this._thumbKeyListener);
+		document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), this._isDragging = !1, this._dragThumb = null, this.querySelector(".slider-track")?.removeEventListener("click", this._trackClickListener);
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = class extends HTMLElement {
+}, K = (e, t) => {
+	let n = Number.parseFloat(e);
+	return Number.isFinite(n) ? n : t;
+}, ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), de = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -3012,7 +3089,9 @@ var V = class extends HTMLElement {
 			"disabled",
 			"size",
 			"max-tags",
-			"aria-label"
+			"aria-label",
+			"separators",
+			"allow-duplicates"
 		];
 	}
 	constructor() {
@@ -3026,19 +3105,31 @@ var V = class extends HTMLElement {
 	connectedCallback() {
 		if (!this._rendered) {
 			if (!this._valuesInit && !this._values.length) {
-				let e = [...this.querySelectorAll(":scope > wui-tag")].map((e) => e.textContent.trim());
-				e.length && (this._values = e.map(String));
+				let e = this.getAttribute("value");
+				if (e != null && e !== "") this._values = e.split(",").map((e) => e.trim()).filter(Boolean);
+				else {
+					let e = [...this.querySelectorAll(":scope > wui-tag")].map((e) => e.textContent.trim());
+					e.length && (this._values = e.map(String));
+				}
 			}
 			this._valuesInit = !0, this._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
+			return;
 		}
+		this._wire();
 	}
 	formResetCallback() {
 		this.values = (this._defaultValues || []).slice(), this._draftText = "";
 		let e = this.querySelector("[data-input]");
 		e && (e.value = "");
 	}
-	attributeChangedCallback() {
-		this._rendered && this.render();
+	attributeChangedCallback(e) {
+		if (this._rendered) {
+			if (e === "separators" || e === "allow-duplicates") {
+				this._wire();
+				return;
+			}
+			this.render();
+		}
 	}
 	get values() {
 		return this._values.slice();
@@ -3063,7 +3154,7 @@ var V = class extends HTMLElement {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${de(e)}</span><button type="button" class="chip-remove" data-remove="${q(e)}" aria-label="Remove ${q(e)}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
+			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${fe(e)}</span><button type="button" class="chip-remove" data-remove="${q(e)}" aria-label="Remove ${q(e)}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
 		}
 	}
 	_wire() {
@@ -3081,16 +3172,7 @@ var V = class extends HTMLElement {
 			(!this._values.some((e) => a ? e === t : e.toLowerCase() === n) || a) && (this._values.push(t), this._renderControl(), s());
 		}, u = (e) => {
 			this._values = this._values.filter((t) => t !== e), this._renderControl(), s();
-		};
-		e.addEventListener("click", (e) => {
-			if (n()) return;
-			let r = e.target.closest("[data-remove]");
-			if (r) {
-				e.stopPropagation(), u(r.dataset.remove), t.focus();
-				return;
-			}
-			t.focus();
-		}), t.addEventListener("keydown", (e) => {
+		}, d = (e) => {
 			if (e.key === "Enter" && o.has("Enter")) {
 				e.preventDefault(), l(t.value), t.value = "";
 				return;
@@ -3109,7 +3191,7 @@ var V = class extends HTMLElement {
 				return;
 			}
 			e.key === "Backspace" && !t.value && this._values.length && (e.preventDefault(), u(this._values[this._values.length - 1])), e.key === "Escape" && (t.value = "");
-		}), t.addEventListener("paste", (e) => {
+		}, f = (e) => {
 			e.preventDefault();
 			let n = e.clipboardData.getData("text/plain"), a = [];
 			for (let e of r) {
@@ -3122,22 +3204,28 @@ var V = class extends HTMLElement {
 			a.length || a.push(n.trim());
 			for (let e of a) if (l(e), i && this._values.length >= parseInt(i, 10)) break;
 			t.value = "";
-		}), this._onDocClick = (e) => {
+		};
+		this._onControlClick = (e) => {
+			if (n()) return;
+			let r = e.target.closest("[data-remove]");
+			if (r) {
+				e.stopPropagation(), u(r.dataset.remove), t.focus();
+				return;
+			}
+			t.focus();
+		}, this._onInputKey = d, this._onInputPaste = f, e.addEventListener("click", this._onControlClick), t.addEventListener("keydown", this._onInputKey), t.addEventListener("paste", this._onInputPaste), this._onDocClick = (e) => {
 			this.contains(e.target) || t.blur();
 		}, document.addEventListener("click", this._onDocClick);
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick);
-		let e = this.querySelector("[data-input]");
-		if (e) {
-			let t = e, n = t.cloneNode(!1);
-			t.replaceWith(n);
-		}
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null);
+		let e = this.querySelector(".search-select-control"), t = this.querySelector("[data-input]");
+		e && this._onControlClick && e.removeEventListener("click", this._onControlClick), t && this._onInputKey && (t.removeEventListener("keydown", this._onInputKey), t.removeEventListener("paste", this._onInputPaste));
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, de = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), J = (e) => String(e).padStart(2, "0"), fe = (e, t) => `${J(e)}:${J(t)}`, Y = (e) => {
+}, fe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), J = (e) => String(e).padStart(2, "0"), pe = (e, t) => `${J(e)}:${J(t)}`, Y = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
@@ -3145,10 +3233,10 @@ var V = class extends HTMLElement {
 	} : null;
 }, X = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return fe(e.h, e.m);
+	if (t === "24") return pe(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
 	return `${n}:${J(e.m)} ${r}`;
-}, pe = class extends HTMLElement {
+}, me = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3175,7 +3263,11 @@ var V = class extends HTMLElement {
 		this._value = "", this._focus = null;
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
 	}
 	attributeChangedCallback(e, t, n) {
 		this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : this.render());
@@ -3190,7 +3282,7 @@ var V = class extends HTMLElement {
 		this._value = e || "", c(this, this._value), this._syncTrigger();
 	}
 	render() {
-		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._value = this.getAttribute("value") || this._value;
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
 		let e = this.getAttribute("placeholder") || "Select time", t = Y(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="timepicker">
@@ -3229,7 +3321,7 @@ var V = class extends HTMLElement {
 		if (!e) return;
 		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Y(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			let o = n[e], s = fe(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
+			let o = n[e], s = pe(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
 			a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${X(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
@@ -3285,29 +3377,31 @@ var V = class extends HTMLElement {
 			t && !t.disabled && (this.value = t.dataset.hm, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 		}), this._onKeyBound = (e) => {
 			n() && this._onKey(e);
-		}, t.addEventListener("keydown", this._onKeyBound), this._onDocClick = (e) => {
-			let t = this._popClick;
-			this._popClick = !1, n() && !t && !this.contains(e.target) && this._close();
-		}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
-			n() && e.key === "Escape" && this._close();
-		}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
-			n() && this._position(e, t);
-		}), this._syncFormValue();
+		}, t.addEventListener("keydown", this._onKeyBound), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				let t = this._popClick;
+				this._popClick = !1, n() && !t && !this.contains(e.target) && this._close();
+			}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
+				n() && e.key === "Escape" && this._close();
+			}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
+				n() && this._position(e, t);
+			});
+		}, this._bindGlobal(), this._syncFormValue();
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), o(this);
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, me = "image/png,image/jpeg,image/webp", he = 5, ge = {
+}, he = "image/png,image/jpeg,image/webp", ge = 5, _e = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, _e = {
+}, ve = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -3321,7 +3415,7 @@ var V = class extends HTMLElement {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Q = [
+}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ye = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -3332,44 +3426,44 @@ var V = class extends HTMLElement {
 	".avif",
 	".heic"
 ];
-function ve(e) {
+function be(e) {
 	if (!e) return !1;
 	let t = typeof e == "object" && e.type ? String(e.type).toLowerCase() : "";
 	if (t) return t.startsWith("image/");
 	let n = typeof e == "string" ? e : e.name || e.url || "", r = String(n).toLowerCase();
-	return Q.some((e) => r.endsWith(e));
+	return ye.some((e) => r.endsWith(e));
 }
-function ye(e) {
+function xe(e) {
 	let t = Z(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? Q.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+	return t.length ? t.every((e) => e.startsWith(".") ? ye.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function be(e) {
+function Se(e) {
 	let t = [];
 	for (let n of Z(e)) {
-		let e = _e[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+		let e = ve[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
 		t.includes(e) || t.push(e);
 	}
 	return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
 }
-function xe(e, t) {
+function Ce(e, t) {
 	let n = Z(t);
 	if (!n.length) return !0;
 	let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
-	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (ge[e] || []).some((e) => i.endsWith(e)));
+	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (_e[e] || []).some((e) => i.endsWith(e)));
 }
-function Se(e, t = {}) {
+function we(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? me : t.accept, r = t.maxSizeMb || 5;
-	return xe(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${be(n)} file.`;
+	let n = t.accept === void 0 ? he : t.accept, r = t.maxSizeMb || 5;
+	return Ce(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Se(n)} file.`;
 }
 //#endregion
 //#region src/index.js
-var $ = (e, t) => {
+var Q = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function Ce() {
-	$("wui-select", U), $("wui-phone", V), $("wui-datepicker", te), $("wui-date-range", A), $("wui-slider", G), $("wui-timepicker", pe), $("wui-autocomplete", p), $("wui-multiselect", j), $("wui-taginput", K), $("wui-otp", oe), $("wui-status-icon", n);
+function $() {
+	Q("wui-select", U), Q("wui-phone", V), Q("wui-datepicker", w), Q("wui-date-range", re), Q("wui-slider", G), Q("wui-timepicker", me), Q("wui-autocomplete", p), Q("wui-multiselect", ie), Q("wui-taginput", de), Q("wui-otp", j), Q("wui-status-icon", n);
 }
-Ce();
+$();
 //#endregion
-export { me as DEFAULT_IMAGE_ACCEPT, he as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, te as WuiDatePicker, A as WuiDateRange, j as WuiMultiSelect, oe as WuiOtp, V as WuiPhone, U as WuiSelect, G as WuiSlider, n as WuiStatusIcon, K as WuiTagInput, pe as WuiTimePicker, be as acceptLabel, Ce as defineWeborityElements, ve as isImageFile, ye as isImageOnlyAccept, xe as matchesAccept, Se as validateFile };
+export { he as DEFAULT_IMAGE_ACCEPT, ge as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, re as WuiDateRange, ie as WuiMultiSelect, j as WuiOtp, V as WuiPhone, U as WuiSelect, G as WuiSlider, n as WuiStatusIcon, de as WuiTagInput, me as WuiTimePicker, Se as acceptLabel, $ as defineWeborityElements, be as isImageFile, xe as isImageOnlyAccept, Ce as matchesAccept, we as validateFile };