@webority/ui-elements 0.7.5 → 0.7.6

package/dist/ui-elements.js

@@ -43,6 +43,7 @@ function c(e, t) {
 		return;
 	}
 	r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(s, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
+	for (let t of [...r.attributes]) t.name.startsWith("data-val") && !e.hasAttribute(t.name) && r.removeAttribute(t.name);
 	for (let t of e.attributes) t.name.startsWith("data-val") && r.setAttribute(t.name, t.value);
 	r.disabled = e.hasAttribute("disabled");
 }
@@ -75,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;
+		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null, this._reqSeq = 0;
 		try {
 			this._internals = this.attachInternals();
 		} catch {
@@ -211,6 +212,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		t.hint && (t.hint.hidden = !(this._remote && s && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && s);
 	}
 	_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) => {
@@ -237,11 +239,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), t.trim().length < this._minChars) return;
-				clearTimeout(this._timer), this._timer = setTimeout(() => {
+				if (this._renderOptions(t), clearTimeout(this._timer), t.trim().length < this._minChars) return;
+				let e = ++this._reqSeq;
+				this._timer = setTimeout(() => {
 					this.dispatchEvent(new CustomEvent("search", {
 						bubbles: !0,
-						detail: { query: t }
+						detail: {
+							query: t,
+							seq: e
+						}
 					}));
 				}, this._debounceMs);
 			} else this._renderOptions(t);
@@ -274,10 +280,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			o() && t();
 		});
 	}
-	disconnectedCallback() {
+	_teardown() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), clearTimeout(this._timer);
 	}
-}, m = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), h = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), g = [
+	disconnectedCallback() {
+		this._teardown();
+	}
+}, m = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), h = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), g = [
 	"January",
 	"February",
 	"March",
@@ -305,17 +314,17 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, x = (e) => {
+}, ee = (e) => {
 	let t = b(e);
 	return t ? `${v(t.d)} ${g[t.m].slice(0, 3)} ${t.y}` : "";
-}, S = (e, t) => new Date(e, t + 1, 0).getDate(), C = (e, t) => {
+}, x = (e, t) => new Date(e, t + 1, 0).getDate(), S = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, w = class extends HTMLElement {
+}, te = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -345,7 +354,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered || this.render();
 	}
 	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());
+		this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
 	}
 	formResetCallback() {
 		this.value = this._defaultValue || "";
@@ -354,7 +363,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._value;
 	}
 	set value(e) {
-		this._value = e || "", c(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		this._value = e || "", c(this, this._value), this._syncTrigger();
 	}
 	_firstDay() {
 		let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
@@ -368,7 +377,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		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 ? x(this._value) : u(e)}</span>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? ee(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>
@@ -381,7 +390,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 ? x(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		t.textContent = n ? ee(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;
@@ -392,7 +401,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, S(e, t)).getTime() < n || i > r;
+				return new Date(e, t, x(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -405,7 +414,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 = S(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 = x(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
@@ -417,10 +426,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 = C(this._viewY, this._viewM - 1), u = S(l.y, l.m);
+		}, c = "", l = S(this._viewY, this._viewM - 1), u = x(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 = C(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = S(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 `
@@ -480,7 +489,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 } = C(e, t);
+		let { y: i, m: a } = S(e, t);
 		this._focus = {
 			y: i,
 			m: a,
@@ -512,17 +521,17 @@ 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 = 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");
+				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");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				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");
+				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");
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = y(t.y, t.m, t.d), this._close());
+				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = y(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 				return;
 			case "Escape": return this._close();
 			default:
@@ -551,7 +560,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 = C(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = S(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -590,31 +599,33 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			}
 			if (e.target.closest("[data-today]")) {
 				let e = /* @__PURE__ */ new Date();
-				this.value = y(e.getFullYear(), e.getMonth(), e.getDate()), this._close();
+				this.value = y(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
-				this.value = "", this._close();
+				this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			let s = e.target.closest(".datepicker-day[data-iso]");
-			s && !s.disabled && (this.value = s.dataset.iso, this._close());
+			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), a(this, () => {
+		}, 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();
 	}
 	_teardown() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, T = [
+}, C = [
 	"January",
 	"February",
 	"March",
@@ -627,7 +638,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	"October",
 	"November",
 	"December"
-], E = [
+], w = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -635,24 +646,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	"Th",
 	"Fr",
 	"Sa"
-], D = (e) => String(e).padStart(2, "0"), ee = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, O = (e) => {
+], T = (e) => String(e).padStart(2, "0"), ne = (e, t, n) => `${e}-${T(t + 1)}-${T(n)}`, E = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, k = (e) => {
-	let t = O(e);
-	return t ? `${D(t.d)} ${T[t.m].slice(0, 3)} ${t.y}` : "";
-}, A = (e, t) => new Date(e, t + 1, 0).getDate(), j = (e, t) => {
+}, D = (e) => {
+	let t = E(e);
+	return t ? `${T(t.d)} ${C[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;
 	return {
 		y: e,
 		m: t
 	};
-}, M = class extends HTMLElement {
+}, A = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -695,7 +706,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		};
 	}
 	set value(e) {
-		this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors();
 	}
 	_firstDay() {
 		let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
@@ -707,13 +718,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			text: e,
 			empty: !0
 		} : {
-			text: `${k(this._start) || "Start"} – ${k(this._end) || "End"}`,
+			text: `${D(this._start) || "Start"} – ${D(this._end) || "End"}`,
 			empty: !1
 		};
 	}
 	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;
-		let e = O(this._start);
+		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");
 		this.innerHTML = `
@@ -747,24 +758,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		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;
+		let e = E(this.getAttribute("min")), t = E(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;
 		return (e, t, i) => {
 			let a = new Date(e, t, i).getTime();
 			return a < n || a > r;
 		};
 	}
 	_monthHtml(e, t) {
-		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = A(e, t), a = this._limits(), o = E.map((e, t) => E[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
-			let i = ee(e, t, n), o = a(e, t, n);
+		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 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 = j(e, t - 1), u = A(l.y, l.m);
+		}, c = "", l = k(e, t - 1), u = O(l.y, l.m);
 		for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
 		for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
-		let d = j(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = k(e, t + 1), f = (7 - (r + i) % 7) % 7;
 		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">${T[t]} ${e}</div>
+        <div class="datepicker-month-label">${C[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -772,7 +783,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = j(this._viewY, this._viewM + 1);
+		let t = k(this._viewY, this._viewM + 1);
 		e.innerHTML = `
       <div class="daterange-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
@@ -798,7 +809,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
 		}
 		let i = e.querySelector("[data-range-hint]");
-		i && (i.textContent = this._start ? this._end ? `${k(this._start)} – ${k(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${D(this._start)} – ${D(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		i(e, t);
@@ -809,7 +820,7 @@ 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._syncTrigger(), this._syncMirrors(), this._paint();
+			this._start = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 			return;
 		}
 		this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
@@ -820,7 +831,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = O(this._start);
+			let r = E(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -833,7 +844,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				let e = j(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = k(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -861,7 +872,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, N = class extends HTMLElement {
+}, j = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -940,13 +951,13 @@ 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\"" : " tabindex=\"0\""}>
-          ${n ? `<i class="bi bi-${P(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-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="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="${P(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>` : ""}
+          ${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-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -960,7 +971,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="${P(e)}" aria-label="Remove"><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="${M(e)}" aria-label="Remove ${re(this._labelFor(e))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -984,9 +995,9 @@ 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) => te(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
+		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="${P(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>`;
+			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;
 	}
 	_wire() {
@@ -1031,7 +1042,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		});
 		let y = (t) => {
 			let r = d();
-			t.key === "ArrowDown" ? (t.preventDefault(), f(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), f(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && _(r[this._active].dataset.value)) : t.key === "Escape" ? (h(), e.focus()) : t.key === "Backspace" && !n.value && this._values.length && v(this._values[this._values.length - 1]);
+			t.key === "ArrowDown" ? (t.preventDefault(), f(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), f(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && _(r[this._active].dataset.value)) : t.key === "Escape" ? (h(), e.focus()) : t.key === "Backspace" && !n?.value && this._values.length && v(this._values[this._values.length - 1]);
 		};
 		n?.addEventListener("keydown", y), r?.addEventListener("click", () => {
 			n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
@@ -1053,7 +1064,8 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		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 {
+}, 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 {
+	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
 			"value",
@@ -1083,10 +1095,21 @@ 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" ? re : ne, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ae : ie, "").slice(0, this.length);
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		this._rendered ? this._onSelectionChange && document.addEventListener("selectionchange", this._onSelectionChange) : (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
+	}
+	formResetCallback() {
+		this._value = this._defaultValue || "", c(this, this._value), this._paint();
 	}
 	attributeChangedCallback(e, t, n) {
 		this._rendered && (e === "value" ? (this._value = this._clean(n), c(this, this._value), this._paint()) : this.render());
@@ -1145,11 +1168,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			"blur",
 			"select"
 		]) e.addEventListener(t, () => this._paint());
-		document.addEventListener("selectionchange", () => {
+		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange), this._onSelectionChange = () => {
 			document.activeElement === e && this._paint();
-		});
+		}, document.addEventListener("selectionchange", this._onSelectionChange);
 	}
-}, I = [
+	disconnectedCallback() {
+		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
+	}
+}, se = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2375,56 +2401,56 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], L = (e) => (I.find((t) => t[0] === e) || [
+], N = (e) => (se.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], R = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, z = null, B = null;
-function ie() {
-	return z ? Promise.resolve(z) : (B ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (z = {
+])[2], P = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, F = null, I = null;
+function ce() {
+	return F ? Promise.resolve(F) : (I ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (F = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		examples: t.default || t
-	}, z)).catch(() => null), B);
+	}, F)).catch(() => null), I);
 }
-function V(e, t) {
-	if (!z || !t) return t;
+function L(e, t) {
+	if (!F || !t) return t;
 	try {
-		return new z.AsYouType(e).input(t);
+		return new F.AsYouType(e).input(t);
 	} catch {
 		return t;
 	}
 }
-function H(e) {
-	if (!z) return null;
+function R(e) {
+	if (!F) return null;
 	try {
-		return z.getExampleNumber(e, z.examples)?.formatNational() || null;
+		return F.getExampleNumber(e, F.examples)?.formatNational() || null;
 	} catch {
 		return null;
 	}
 }
-function U(e) {
-	if (!z || !e) return null;
+function z(e) {
+	if (!F || !e) return null;
 	try {
-		return z.isValidPhoneNumber(e);
+		return F.isValidPhoneNumber(e);
 	} catch {
 		return null;
 	}
 }
-function ae(e) {
-	if (!z) return null;
+function le(e) {
+	if (!F) return null;
 	try {
-		let t = z.getExampleNumber(e, z.examples);
+		let t = F.getExampleNumber(e, F.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function W(e) {
-	if (!z || !e?.trim().startsWith("+")) return null;
+function B(e) {
+	if (!F || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new z.AsYouType();
+		let t = new F.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -2435,7 +2461,7 @@ function W(e) {
 		return null;
 	}
 }
-var G = class extends HTMLElement {
+var V = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2471,100 +2497,100 @@ var G = class extends HTMLElement {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return `+${L(this._country)}${this._national}`;
+		return this._national ? `+${N(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = W(t);
+		let t = String(e ?? "").trim(), n = B(t);
 		if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
 		else if (t.startsWith("+")) {
-			let e = t.replace(/[^0-9]/g, ""), n = String(L(this._country));
+			let e = t.replace(/[^0-9]/g, ""), n = String(N(this._country));
 			n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
 		} else this._national = t.replace(/[^0-9]/g, "");
-		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._commit();
+		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._syncMirror();
 	}
-	_commit() {
-		c(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	_syncMirror() {
+		c(this, this.value);
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "");
-		let e = this.getAttribute("placeholder") || H(this._country) || "Enter phone number";
+		let e = this.getAttribute("placeholder") || R(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("");
+		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("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
           <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${R(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${P(this._country)}" data-flag aria-hidden="true"></span>
             <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
-            <span class="phone-dial" data-dial>+${L(this._country)}</span>
+            <span class="phone-dial" data-dial>+${N(this._country)}</span>
           </button>
           <div class="country-dropdown-menu" role="listbox" hidden>
             <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
             <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.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" : ""} />
+        <input type="tel" class="input" placeholder="${H(e)}" value="${H(L(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${H(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${H(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]");
+		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]"), c = this.querySelector("[data-dial]");
 		if (!e || !n) return;
-		let u = () => !n.hidden, d = () => {
+		let l = () => !n.hidden, u = () => {
 			let r = (t || e).getBoundingClientRect(), i = n.offsetWidth || 320, a = n.offsetHeight || 320, o = window.innerHeight - r.bottom, s = o < a + 6 && r.top > o ? r.top - a - 6 : r.bottom + 6, c = Math.min(Math.max(8, r.left), Math.max(8, window.innerWidth - i - 8));
 			n.style.top = `${Math.max(8, s)}px`, n.style.left = `${c}px`;
+		}, d = () => {
+			n.hidden = !1, e.setAttribute("aria-expanded", "true"), r.value = "", p(""), u(), r.focus();
 		}, f = () => {
-			n.hidden = !1, e.setAttribute("aria-expanded", "true"), r.value = "", m(""), d(), r.focus();
-		}, p = () => {
 			n.hidden = !0, e.setAttribute("aria-expanded", "false");
 		};
 		this._reposition = () => {
-			u() && d();
+			l() && u();
 		}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
-		let m = (e) => {
+		let p = (e) => {
 			let t = e.trim().toLowerCase(), n = 0;
 			for (let e of i.querySelectorAll(".country-dropdown-item")) {
 				let r = !t || e.textContent.toLowerCase().includes(t);
 				e.hidden = !r, r && (n += 1);
 			}
 			a && (a.hidden = n > 0);
-		}, h = (e) => {
-			this._country = e, this.setAttribute("country", e), s && (s.className = R(e)), l && (l.textContent = `+${L(e)}`);
+		}, m = (e) => {
+			this._country = e, this.setAttribute("country", e), s && (s.className = P(e)), c && (c.textContent = `+${N(e)}`);
 			for (let t of i.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
-			p(), this._commit();
+			f(), this._syncMirror(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		};
-		e.addEventListener("click", () => u() ? p() : f()), r.addEventListener("input", () => m(r.value)), i.addEventListener("click", (e) => {
+		e.addEventListener("click", () => l() ? f() : d()), r.addEventListener("input", () => p(r.value)), i.addEventListener("click", (e) => {
 			let t = e.target.closest(".country-dropdown-item");
-			t && h(t.dataset.iso);
+			t && m(t.dataset.iso);
 		});
-		let g = this.querySelector("[data-phone-error]"), _ = (e) => {
-			if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), g) {
+		let h = this.querySelector("[data-phone-error]"), g = (e) => {
+			if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), h) {
 				if (e) {
-					let e = H(this._country);
-					g.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
+					let e = R(this._country);
+					h.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
-				g.hidden = !e;
+				h.hidden = !e;
 			}
 		};
 		o.addEventListener("input", () => {
-			let e = o.value.replace(/[^0-9]/g, ""), t = ae(this._country);
+			let e = o.value.replace(/[^0-9]/g, ""), t = le(this._country);
 			t && e.length > t && (e = e.slice(0, t)), this._national = e;
-			let n = V(this._country, this._national);
-			o.value !== n && (o.value = n), this._commit(), o.classList.contains("is-invalid") && (!this._national || U(this.value) === !0) && _(!1);
+			let n = L(this._country, this._national);
+			o.value !== n && (o.value = n), this._syncMirror(), this.dispatchEvent(new Event("change", { bubbles: !0 })), o.classList.contains("is-invalid") && (!this._national || z(this.value) === !0) && g(!1);
 		}), o.addEventListener("blur", () => {
-			_(this._national.length > 0 && U(this.value) === !1);
+			g(this._national.length > 0 && z(this.value) === !1);
 		}), o.addEventListener("paste", (e) => {
-			let t = W(e.clipboardData?.getData("text"));
-			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = V(this._country, this._national) : this.setAttribute("country", t.country), this._commit(), this.querySelector("input[type=tel]")?.focus());
+			let t = B(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = L(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.querySelector("input[type=tel]")?.focus());
 		}), this._onDocClick = (e) => {
-			u() && !this.contains(e.target) && p();
-		}, document.addEventListener("click", this._onDocClick), ie().then((e) => {
-			if (!(!e || !o) && (this._national && (o.value = V(this._country, this._national)), !this.getAttribute("placeholder"))) {
-				let e = H(this._country);
+			l() && !this.contains(e.target) && f();
+		}, document.addEventListener("click", this._onDocClick), ce().then((e) => {
+			if (!(!e || !o) && (this._national && (o.value = L(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = R(this._country);
 				e && (o.placeholder = e);
 			}
-		}), c(this, this.value);
+		}), this._syncMirror();
 	}
 	_teardown() {
 		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
@@ -2572,7 +2598,7 @@ var G = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, K = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), q = class extends HTMLElement {
+}, H = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), U = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2646,19 +2672,19 @@ var G = class extends HTMLElement {
 		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="${J(e.value)}" aria-selected="${t}">${f(e)}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${t}">${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="${J(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          ${a ? `<i class="bi bi-${J(a)} search-select-icon" aria-hidden="true"></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" : ""}>
+          ${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>
-          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${J(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>` : ""}
+          ${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>
       </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
@@ -2687,7 +2713,7 @@ var G = class extends HTMLElement {
 			let t = e.dataset.value === String(this._value);
 			e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
 		}
-		e && (e.innerHTML = t ? f(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
+		e && (e.innerHTML = t ? f(t) : u(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
 	}
 	_syncReset() {
 		let { reset: e } = this._refs();
@@ -2754,14 +2780,534 @@ var G = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, J = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Y = "image/png,image/jpeg,image/webp", oe = 5, se = {
+}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), G = class extends HTMLElement {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"min",
+			"max",
+			"step",
+			"value",
+			"start",
+			"end",
+			"name",
+			"start-name",
+			"end-name",
+			"disabled",
+			"size",
+			"show-value",
+			"unit",
+			"aria-label"
+		];
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} 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;
+	}
+	connectedCallback() {
+		this._rendered || this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "value" || e === "start" || e === "end" || e === "min" || e === "max" || e === "step") {
+			this._updateFromAttribute(e), this._rendered && (this._syncValue(), this._syncMirrors());
+			return;
+		}
+		this._rendered && this.render();
+	}
+	formResetCallback() {
+		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")))));
+	}
+	_isRange() {
+		return this.hasAttribute("range");
+	}
+	_min() {
+		return Number.parseFloat(this.getAttribute("min")) || 0;
+	}
+	_max() {
+		return Number.parseFloat(this.getAttribute("max")) || 100;
+	}
+	_step() {
+		return Number.parseFloat(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;
+	}
+	_captureDefaults() {
+		this._defaultsCaptured ||= (this._isRange() ? (this._defaultStart = this._start, this._defaultEnd = this._end) : this._defaultValue = this._value, !0);
+	}
+	_resetSingle() {
+		this._value = this._defaultValue ?? 50, this._syncValue(), this._syncMirrors();
+	}
+	_resetRange() {
+		this._start = this._defaultStart ?? 25, this._end = this._defaultEnd ?? 75, this._syncValue(), this._syncMirrors();
+	}
+	render() {
+		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);
+		this.innerHTML = `
+      <div class="slider${i}">
+        <div class="slider-track" role="presentation"></div>
+        <div class="slider-fill" style="left: ${s}%; right: ${100 - c}%;" role="presentation"></div>
+        ${n ? `
+          <button
+            type="button"
+            role="slider"
+            class="slider-thumb"
+            data-thumb="start"
+            aria-label="Minimum"
+            aria-valuemin="${e}"
+            aria-valuemax="${t}"
+            aria-valuenow="${this._start}"
+            aria-valuetext="${this._formatValue(this._start)}"
+            ${a ? "disabled" : ""}
+          ></button>
+          <button
+            type="button"
+            role="slider"
+            class="slider-thumb"
+            data-thumb="end"
+            aria-label="Maximum"
+            aria-valuemin="${e}"
+            aria-valuemax="${t}"
+            aria-valuenow="${this._end}"
+            aria-valuetext="${this._formatValue(this._end)}"
+            ${a ? "disabled" : ""}
+          ></button>
+        ` : `
+          <button
+            type="button"
+            role="slider"
+            class="slider-thumb"
+            data-thumb="single"
+            aria-valuemin="${e}"
+            aria-valuemax="${t}"
+            aria-valuenow="${this._value}"
+            aria-valuetext="${this._formatValue(this._value)}"
+            ${a ? "disabled" : ""}
+            aria-label="${ue(this.getAttribute("aria-label") || "Value")}"
+          ></button>
+        `}
+        ${this.hasAttribute("show-value") ? n ? `<span class="slider-value">${this._formatValue(this._start)} – ${this._formatValue(this._end)}</span>` : `<span class="slider-value">${this._formatValue(this._value)}</span>` : ""}
+      </div>
+    `, this._rendered = !0, this._syncMirrors(), this._wire();
+	}
+	_formatValue(e) {
+		return `${e}${this.getAttribute("unit") || ""}`;
+	}
+	_syncValue() {
+		if (!this._rendered) return;
+		let e = this._min(), t = this._max(), n = (n) => (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}%`);
+			let i = this.querySelector("[data-thumb=\"start\"]"), a = this.querySelector("[data-thumb=\"end\"]");
+			i && (i.style.left = `${e}%`, i.setAttribute("aria-valuenow", String(this._start)), i.setAttribute("aria-valuetext", this._formatValue(this._start))), a && (a.style.left = `${t}%`, a.setAttribute("aria-valuenow", String(this._end)), a.setAttribute("aria-valuetext", this._formatValue(this._end)));
+			let o = this.querySelector(".slider-value");
+			o && (o.textContent = `${this._formatValue(this._start)} – ${this._formatValue(this._end)}`);
+		} else {
+			let e = n(this._value);
+			r && (r.style.left = "0%", r.style.right = `${100 - e}%`);
+			let t = this.querySelector(".slider-thumb");
+			t && (t.style.left = `${e}%`, t.setAttribute("aria-valuenow", String(this._value)), t.setAttribute("aria-valuetext", this._formatValue(this._value)));
+			let i = this.querySelector(".slider-value");
+			i && (i.textContent = this._formatValue(this._value));
+		}
+	}
+	_syncMirrors() {
+		this._isRange() ? this._syncRangeMirrors() : this._syncSingleMirror();
+	}
+	_syncSingleMirror() {
+		this.getAttribute("name") && c(this, String(this._value));
+	}
+	_syncRangeMirrors() {
+		let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
+		this._mirrorRange("start", e, this._start), this._mirrorRange("end", t, this._end);
+	}
+	_mirrorRange(e, t, n) {
+		if (!t) return;
+		let r = this.querySelector(`input[type="hidden"][data-slider-mirror="${e}"]`);
+		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-slider-mirror", e), this.appendChild(r)), r.name = t, r.value = String(n), r.disabled = this.hasAttribute("disabled");
+	}
+	_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;
+	}
+	_nearestThumb(e) {
+		return Math.abs(e - this._start) <= Math.abs(e - this._end) ? "start" : "end";
+	}
+	_wire() {
+		if (this._teardown(), this.hasAttribute("disabled")) return;
+		let e = this.querySelectorAll(".slider-thumb"), t = this.querySelector(".slider-track"), n = this._isRange();
+		this._pointerDownListener = (e) => {
+			if (this.hasAttribute("disabled")) return;
+			let t = e.target.closest(".slider-thumb");
+			t && (e.preventDefault(), this._isDragging = !0, this._dragThumb = t.getAttribute("data-thumb"), document.addEventListener("pointermove", this._pointerMoveListener), document.addEventListener("pointerup", this._pointerUpListener));
+		}, this._pointerMoveListener = (e) => {
+			if (!this._isDragging) return;
+			e.preventDefault();
+			let t = this._valueAtPosition(e.clientX);
+			if (this._dragThumb === "single") this._value = this._clamp(t), this._syncValue(), this.dispatchEvent(new CustomEvent("slide", { detail: { value: this._value } }));
+			else if (this._dragThumb === "start") {
+				let e = Math.min(t, this._end);
+				this._start = this._clamp(e), this._syncValue(), this.dispatchEvent(new CustomEvent("slide", { detail: {
+					start: this._start,
+					end: this._end
+				} }));
+			} else if (this._dragThumb === "end") {
+				let e = Math.max(t, this._start);
+				this._end = this._clamp(e), this._syncValue(), this.dispatchEvent(new CustomEvent("slide", { detail: {
+					start: this._start,
+					end: this._end
+				} }));
+			}
+		}, 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) => {
+			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 }));
+		});
+	}
+	_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);
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+}, ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = class extends HTMLElement {
+	static formAssociated = !0;
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
+	}
+	static get observedAttributes() {
+		return [
+			"placeholder",
+			"disabled",
+			"size",
+			"max-tags",
+			"aria-label"
+		];
+	}
+	constructor() {
+		super(), this._values = [], this._draftText = "";
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+	}
+	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));
+			}
+			this._valuesInit = !0, this._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
+		}
+	}
+	formResetCallback() {
+		this.values = (this._defaultValues || []).slice(), this._draftText = "";
+		let e = this.querySelector("[data-input]");
+		e && (e.value = "");
+	}
+	attributeChangedCallback() {
+		this._rendered && this.render();
+	}
+	get values() {
+		return this._values.slice();
+	}
+	set values(e) {
+		this._values = Array.isArray(e) ? e.map(String) : [], c(this, this._values.join(",")), this._rendered && this._renderControl();
+	}
+	render() {
+		let e = this.getAttribute("size"), t = e === "sm" ? " search-select-sm" : e === "lg" ? " search-select-lg" : "";
+		c(this, this._values.join(",")), this.innerHTML = `
+      <div class="search-select${t}">
+        <div class="input search-select-control search-select-multi"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          <div class="ms-chips" data-chips></div>
+          <input type="text" class="ms-input" data-input aria-label="${q(this._accessibleName())}" placeholder="${q(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
+        </div>
+      </div>`, this._rendered = !0, c(this, this._values.join(",")), this._renderControl(), this._wire();
+	}
+	_renderControl() {
+		let e = this.querySelector("[data-chips]");
+		if (e) {
+			if (!this._values.length) {
+				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("");
+		}
+	}
+	_wire() {
+		this._teardown();
+		let e = this.querySelector(".search-select-control"), t = this.querySelector("[data-input]");
+		if (!e || !t) return;
+		let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = /* @__PURE__ */ new Set();
+		for (let e of r) e === "enter" ? o.add("Enter") : e === "comma" ? o.add(",") : e === "space" ? o.add(" ") : e === "tab" && o.add("Tab");
+		let s = () => {
+			c(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}, l = (e) => {
+			let t = e.trim();
+			if (!t || i && this._values.length >= parseInt(i, 10)) return;
+			let n = a ? t : t.toLowerCase();
+			(!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) => {
+			if (e.key === "Enter" && o.has("Enter")) {
+				e.preventDefault(), l(t.value), t.value = "";
+				return;
+			}
+			if (e.key === "," && o.has(",")) {
+				e.preventDefault(), l(t.value.replace(/,+$/, "")), t.value = "";
+				return;
+			}
+			if (e.key === " " && o.has(" ")) {
+				let n = t.value.trim();
+				n && (e.preventDefault(), l(n), t.value = "");
+				return;
+			}
+			if (e.key === "Tab" && o.has("Tab")) {
+				e.preventDefault(), l(t.value), t.value = "";
+				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) => {
+			e.preventDefault();
+			let n = e.clipboardData.getData("text/plain"), a = [];
+			for (let e of r) {
+				let t = e;
+				if (t === "enter" ? t = "\n" : t === "comma" ? t = "," : t === "space" ? t = " " : t === "tab" && (t = "	"), n.includes(t)) {
+					a.push(...n.split(t).map((e) => e.trim()).filter((e) => e));
+					break;
+				}
+			}
+			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.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);
+		}
+	}
+	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) => {
+	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
+	return t ? {
+		h: +t[1],
+		m: +t[2]
+	} : null;
+}, X = (e, t = "24") => {
+	if (!e) return "";
+	if (t === "24") return fe(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 {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"value",
+			"min",
+			"max",
+			"step",
+			"format",
+			"placeholder",
+			"disabled",
+			"required",
+			"size",
+			"aria-label",
+			"aria-describedby"
+		];
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._value = "", this._focus = null;
+	}
+	connectedCallback() {
+		this._rendered || this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : this.render());
+	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		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;
+		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">
+        <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${u(a)}"` : ""}${o ? ` aria-describedby="${u(o)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? X(t, n) : u(e)}</span>
+          <i class="bi bi-clock" aria-hidden="true"></i>
+        </button>
+        <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
+      </div>`, this._rendered = !0, c(this, this._value), this._wire();
+	}
+	_syncFormValue() {
+		c(this, this._value);
+	}
+	_syncTrigger() {
+		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
+		if (!t) return;
+		let n = Y(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? X(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+	}
+	_buildTimes() {
+		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = Y(t) || {
+			h: 0,
+			m: 0
+		}, i = Y(n) || {
+			h: 23,
+			m: 59
+		}, a = [], o = r.h, s = r.m;
+		for (s = Math.ceil(s / e) * e, s >= 60 && (o += 1, s -= 60); o < i.h || o === i.h && s <= i.m;) a.push({
+			h: o,
+			m: s
+		}), s += e, s >= 60 && (o += 1, s -= 60);
+		return a;
+	}
+	_renderOptions() {
+		let e = this.querySelector(".timepicker-pop");
+		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;
+			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();
+	}
+	_focusActive() {
+		let e = this.querySelector(".timepicker-pop"), t = e?.querySelector("[tabindex=\"0\"]") || e?.querySelector(".is-selected");
+		t && !e.hidden && t.focus();
+	}
+	_position(e, t) {
+		i(e, t);
+	}
+	_onKey(e) {
+		let t = [...this.querySelector(".timepicker-pop").querySelectorAll(".timepicker-option")];
+		switch (e.key) {
+			case "ArrowUp": {
+				e.preventDefault();
+				let t = Math.max((this._focus ?? 0) - 1, 0);
+				this._focus = t, this._renderOptions();
+				break;
+			}
+			case "ArrowDown": {
+				e.preventDefault();
+				let n = Math.min((this._focus ?? -1) + 1, t.length - 1);
+				this._focus = n, this._renderOptions();
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault(), t[this._focus] && (this.value = t[this._focus].dataset.hm, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
+				break;
+			case "Escape":
+				this._close();
+				break;
+			default:
+		}
+	}
+	_wire() {
+		this._teardown();
+		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector(".timepicker-pop");
+		if (!e || !t) return;
+		let n = () => !t.hidden;
+		this._open = () => {
+			this._focus = null, this._renderOptions(), t.hidden = !1, e.setAttribute("aria-expanded", "true"), this._position(e, t);
+			let n = t.querySelector(".is-selected");
+			n ? this._focus = [...t.querySelectorAll(".timepicker-option")].indexOf(n) : this._focus = 0, this._renderOptions(), t.querySelector("[tabindex=\"0\"]")?.focus();
+		}, this._close = () => {
+			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.focus();
+		}, e.addEventListener("click", () => n() ? this._close() : this._open()), e.addEventListener("keydown", (e) => {
+			(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), n() || this._open());
+		}), t.addEventListener("click", (e) => {
+			this._popClick = !0;
+			let t = e.target.closest(".timepicker-option");
+			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();
+	}
+	_teardown() {
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+}, me = "image/png,image/jpeg,image/webp", he = 5, ge = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, ce = {
+}, _e = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -2775,7 +3321,7 @@ var G = class extends HTMLElement {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, X = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Z = [
+}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Q = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -2786,44 +3332,44 @@ var G = class extends HTMLElement {
 	".avif",
 	".heic"
 ];
-function le(e) {
+function ve(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 Z.some((e) => r.endsWith(e));
+	return Q.some((e) => r.endsWith(e));
 }
-function ue(e) {
-	let t = X(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? Z.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+function ye(e) {
+	let t = Z(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? Q.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function Q(e) {
+function be(e) {
 	let t = [];
-	for (let n of X(e)) {
-		let e = ce[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of Z(e)) {
+		let e = _e[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 de(e, t) {
-	let n = X(t);
+function xe(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 && (se[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 && (ge[e] || []).some((e) => i.endsWith(e)));
 }
-function fe(e, t = {}) {
+function Se(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? Y : t.accept, r = t.maxSizeMb || 5;
-	return de(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Q(n)} file.`;
+	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.`;
 }
 //#endregion
 //#region src/index.js
 var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function pe() {
-	$("wui-select", q), $("wui-phone", G), $("wui-datepicker", w), $("wui-date-range", M), $("wui-autocomplete", p), $("wui-multiselect", N), $("wui-otp", F), $("wui-status-icon", n);
+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);
 }
-pe();
+Ce();
 //#endregion
-export { Y as DEFAULT_IMAGE_ACCEPT, oe as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, M as WuiDateRange, N as WuiMultiSelect, F as WuiOtp, G as WuiPhone, q as WuiSelect, n as WuiStatusIcon, Q as acceptLabel, pe as defineWeborityElements, le as isImageFile, ue as isImageOnlyAccept, de as matchesAccept, fe as validateFile };
+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 };