@webority/ui-elements 0.18.0 → 0.19.0

package/dist/ui-elements.js

@@ -2541,7 +2541,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			options: ue(e)
 		}), this._countryCache.options;
 	}
-}, I = [
+}, fe = [
 	"January",
 	"February",
 	"March",
@@ -2554,7 +2554,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	"October",
 	"November",
 	"December"
-], L = [
+], I = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -2562,24 +2562,24 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	"Th",
 	"Fr",
 	"Sa"
-], R = (e) => String(e).padStart(2, "0"), z = (e, t, n) => `${e}-${R(t + 1)}-${R(n)}`, B = (e) => {
+], pe = (e) => String(e).padStart(2, "0"), L = (e, t, n) => `${e}-${pe(t + 1)}-${pe(n)}`, R = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, V = (e) => {
-	let t = B(e);
-	return t ? `${R(t.d)} ${I[t.m].slice(0, 3)} ${t.y}` : "";
-}, H = (e, t) => new Date(e, t + 1, 0).getDate(), U = (e, t) => {
+}, z = (e) => {
+	let t = R(e);
+	return t ? `${pe(t.d)} ${fe[t.m].slice(0, 3)} ${t.y}` : "";
+}, B = (e, t) => new Date(e, t + 1, 0).getDate(), V = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, fe = class extends e {
+}, me = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2639,13 +2639,13 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	}
 	render() {
 		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);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = R(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("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${_(i)}"` : ""}${a ? ` aria-describedby="${_(a)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? V(this._value) : _(e)}</span>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? z(this._value) : _(e)}</span>
           ${m("calendar-dots")}
         </button>
         <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
@@ -2657,11 +2657,11 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	_syncTrigger() {
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = B(this._value);
-		t.textContent = n ? V(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = R(this._value);
+		t.textContent = n ? z(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;
+		let e = R(this.getAttribute("min")), t = R(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 {
 			dayDisabled: (e, t, i) => {
 				let a = new Date(e, t, i).getTime();
@@ -2669,7 +2669,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			},
 			monthDisabled: (e, t) => {
 				let i = new Date(e, t, 1).getTime();
-				return new Date(e, t, H(e, t)).getTime() < n || i > r;
+				return new Date(e, t, B(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -2682,28 +2682,28 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		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 = H(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 = B(this._viewY, this._viewM), r = R(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
 		}, s = (e, t, n, s) => {
-			let c = z(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
+			let c = L(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
 			return `<button type="button" class="${[
 				"datepicker-day",
 				s ? "is-outside" : "",
 				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 = U(this._viewY, this._viewM - 1), u = H(l.y, l.m);
+		}, c = "", l = V(this._viewY, this._viewM - 1), u = B(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 = U(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = V(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 = a(i.getFullYear(), i.getMonth(), i.getDate()), h = L.map((t, n) => L[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
+		let p = a(i.getFullYear(), i.getMonth(), i.getDate()), h = I.map((t, n) => I[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
 		return `
       <div class="datepicker-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${m("chevron-left")}</button>
-        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${I[this._viewM]} ${this._viewY}</button>
+        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${fe[this._viewM]} ${this._viewY}</button>
         <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${m("chevron-right")}</button>
       </div>
       <div class="datepicker-weekdays">${h}</div>
@@ -2714,14 +2714,14 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
       </div>`;
 	}
 	_monthsHtml() {
-		let e = B(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
+		let e = R(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
 		for (let i = 0; i < 12; i++) {
 			let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
 				"datepicker-cell",
 				o ? "is-today" : "",
 				a ? "is-selected" : ""
 			].filter(Boolean).join(" ");
-			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${I[i].slice(0, 3)}</button>`;
+			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${fe[i].slice(0, 3)}</button>`;
 		}
 		return `
       <div class="datepicker-head">
@@ -2732,7 +2732,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
       <div class="datepicker-cells">${r}</div>`;
 	}
 	_yearsHtml() {
-		let e = B(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
+		let e = R(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
 		for (let a = 0; a < 12; a++) {
 			let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
 				"datepicker-cell",
@@ -2757,21 +2757,21 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		c(e, t, { clampHeight: !0 });
 	}
 	_setFocus(e, t, n, r) {
-		let { y: i, m: a } = U(e, t);
+		let { y: i, m: a } = V(e, t);
 		this._focus = {
 			y: i,
 			m: a,
 			d: n
 		};
 		let o = i !== this._viewY || a !== this._viewM;
-		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${z(i, a, n)}"]`)?.focus();
+		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${L(i, a, n)}"]`)?.focus();
 	}
 	_onKey(e) {
 		if (this._mode !== "days") {
 			e.key === "Escape" && this._close();
 			return;
 		}
-		let t = this._focus || B(this._value) || {
+		let t = this._focus || R(this._value) || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
@@ -2789,17 +2789,17 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			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 = U(t.y, t.m - (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, H(n.y, n.m)), "slide-prev");
+				let n = V(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, B(n.y, n.m)), "slide-prev");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				let n = U(t.y, t.m + (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, H(n.y, n.m)), "slide-next");
+				let n = V(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, B(n.y, n.m)), "slide-next");
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = z(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
+				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = L(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 				return;
 			case "Escape": return this._close();
 			default:
@@ -2811,7 +2811,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = /* @__PURE__ */ new Date(), i = B(this._value);
+			let r = /* @__PURE__ */ new Date(), i = R(this._value);
 			(i || !this._viewNavigated) && (this._viewY = r.getFullYear(), this._viewM = r.getMonth()), this._mode = "days";
 			let a = r.getFullYear() === this._viewY && r.getMonth() === this._viewM, o = i && i.y === this._viewY && i.m === this._viewM;
 			this._focus = o ? i : {
@@ -2826,7 +2826,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			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 = U(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = V(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -2866,7 +2866,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			if (e.target.closest("[data-today]")) {
 				let e = /* @__PURE__ */ new Date();
 				if (this._limits().dayDisabled(e.getFullYear(), e.getMonth(), e.getDate())) return;
-				this.value = z(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				this.value = L(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
@@ -2894,7 +2894,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, pe = class extends e {
+}, he = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2962,13 +2962,13 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			text: e,
 			empty: !0
 		} : {
-			text: `${V(this._start) || "Start"} – ${V(this._end) || "End"}`,
+			text: `${z(this._start) || "Start"} – ${z(this._end) || "End"}`,
 			empty: !1
 		};
 	}
 	render() {
 		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 = B(this._start);
+		let e = R(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 = `
@@ -3002,24 +3002,24 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		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 = 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;
+		let e = R(this.getAttribute("min")), t = R(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 = H(e, t), a = this._limits(), o = L.map((e, t) => L[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
-			let i = z(e, t, n), o = a(e, t, n);
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = B(e, t), a = this._limits(), o = I.map((e, t) => I[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = L(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 = U(e, t - 1), u = H(l.y, l.m);
+		}, c = "", l = V(e, t - 1), u = B(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 = U(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = V(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">${I[t]} ${e}</div>
+        <div class="datepicker-month-label">${fe[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -3027,7 +3027,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = U(this._viewY, this._viewM + 1);
+		let t = V(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">${m("chevron-left")}</button>
@@ -3053,7 +3053,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			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 ? `${V(this._start)} – ${V(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${z(this._start)} – ${z(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		c(e, t, { clampHeight: !0 });
@@ -3075,7 +3075,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = B(this._start);
+			let r = R(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -3088,7 +3088,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				let e = U(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = V(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -3118,7 +3118,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, me = class extends e {
+}, ge = class extends e {
 	static get observedAttributes() {
 		return [
 			"static",
@@ -3139,10 +3139,10 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		e === "static" && this.isConnected && this._wire();
 	}
 	_maxScale() {
-		return he(this.getAttribute("max-scale"), 1.6);
+		return _e(this.getAttribute("max-scale"), 1.6);
 	}
 	_radius() {
-		return he(this.getAttribute("radius"), 100);
+		return _e(this.getAttribute("radius"), 100);
 	}
 	_magnifyEnabled() {
 		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
@@ -3167,26 +3167,26 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	_teardown() {
 		this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
 	}
-}, he = (e, t) => {
+}, _e = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, ge = {
+}, ve = {
 	enter: "Enter",
 	comma: ",",
 	space: " ",
 	tab: "Tab"
-}, _e = {
+}, ye = {
 	enter: "\n",
 	comma: ",",
 	space: " ",
 	tab: "	"
-}, ve = (e) => ge[e], ye = (e) => _e[e];
-function be(e, t) {
+}, be = (e) => ve[e], xe = (e) => ye[e];
+function Se(e, t) {
 	let n = [String(e ?? "")];
 	for (let e of t) n = n.flatMap((t) => t.split(e));
 	return n.map((e) => e.trim()).filter(Boolean);
 }
-var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends e {
+var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -3286,7 +3286,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 				[g]: !0,
 				selected: e.hasAttribute("selected")
 			};
-			for (let [n, r] of we) {
+			for (let [n, r] of Ee) {
 				let i = e.getAttribute(n);
 				i && (t[r] = i);
 			}
@@ -3317,23 +3317,23 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
       <div class="search-select${a}">
         <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : ""}>
           ${r ? m(r, { className: "search-select-icon" }) : ""}
-          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(o)}" aria-label="${W(this._accessibleName())}" aria-describedby="${W(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${H(o)}" aria-label="${H(this._accessibleName())}" aria-describedby="${H(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
           ${m("chevron-down", { className: "search-select-caret" })}
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(o)}" aria-multiselectable="true" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${H(o)}" aria-multiselectable="true" tabindex="-1" hidden>
           <div class="search-select-options"></div>
         </div>
       </div>
-      <div class="field-error wui-ms-custom-error" id="${W(e)}" aria-live="polite" hidden></div>`;
+      <div class="field-error wui-ms-custom-error" id="${H(e)}" aria-live="polite" hidden></div>`;
 		} else this.innerHTML = `
       <div class="search-select${a}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(o)}" aria-label="${W(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${H(o)}" aria-label="${H(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
           ${r ? m(r, { className: "search-select-icon" }) : ""}
           <div class="ms-chips" data-chips></div>
           ${m("chevron-down", { className: "search-select-caret" })}
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(o)}" aria-multiselectable="true" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search">${m("search")}<input class="search-select-input" placeholder="${W(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${m("x")}</button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${H(o)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${m("search")}<input class="search-select-input" placeholder="${H(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${m("x")}</button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -3343,7 +3343,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 	_renderControl() {
 		let e = this.querySelector("[data-chips]");
 		if (!e) return;
-		let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = 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="${W(e)}" aria-label="Remove ${W(je(this._labelFor(e)))}">${m("x")}</button></span>`).join("");
+		let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = 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="${H(e)}" aria-label="Remove ${H(Ne(this._labelFor(e)))}">${m("x")}</button></span>`).join("");
 		if (n) {
 			for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
 			n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
@@ -3374,11 +3374,11 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 		i.textContent = `+${t.length - o}`;
 	}
 	_matches(e, t) {
-		return je(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
+		return Ne(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
 	}
 	_optionNamed(e) {
 		let t = e.trim().toLowerCase();
-		return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || je(e.label).trim().toLowerCase() === t);
+		return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || Ne(e.label).trim().toLowerCase() === t);
 	}
 	_renderOptions(e) {
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
@@ -3387,9 +3387,9 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 		i && (a = a.filter((e) => this._matches(e, i)));
 		let o = this._listboxId || `${this.id || "wui-multiselect"}-listbox`, s = this._allowCustom && r && !this._optionNamed(r), c = a.map((e, t) => {
 			let n = this._values.includes(String(e.value)), r = `${o}-opt-${t}`;
-			return Te(e) ? Oe(e, r, n) : `<button type="button" role="option" id="${W(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${x(e)}</span><span class="ms-check">${m("check")}</span></button>`;
+			return De(e) ? Ae(e, r, n) : `<button type="button" role="option" id="${H(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${H(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${x(e)}</span><span class="ms-check">${m("check")}</span></button>`;
 		});
-		s && c.push(`<button type="button" role="option" id="${W(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${W(r)}" data-custom="true" aria-selected="false">Add “${_(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
+		s && c.push(`<button type="button" role="option" id="${H(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${H(r)}" data-custom="true" aria-selected="false">Add “${_(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
 	}
 	_combobox() {
 		return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
@@ -3402,7 +3402,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 	_customRefusal(e) {
 		let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
 		if (n) {
-			let r = Ae(n);
+			let r = Me(n);
 			if (r && !r.test(e)) return t;
 		}
 		let r = this._validateCustom;
@@ -3462,7 +3462,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 		}, w = (e) => {
 			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), S();
 		}, T = (e, { quiet: t = !1 } = {}) => {
-			let n = this._values.length, r = xe(e, Ce) ? be(e, Ce) : [e], i = [], a = "";
+			let n = this._values.length, r = Ce(e, Te) ? Se(e, Te) : [e], i = [], a = "";
 			for (let e of r) {
 				let t = this._commitTyped(e);
 				t && (i.push(e.trim()), a ||= t);
@@ -3540,7 +3540,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 				(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), D(e);
 			}), o.addEventListener("paste", (e) => {
 				let t = e.clipboardData?.getData("text/plain") ?? "";
-				xe(t, Ce) && (e.preventDefault(), T(`${o.value}${t}`));
+				Ce(t, Te) && (e.preventDefault(), T(`${o.value}${t}`));
 			}), o.addEventListener("blur", (e) => {
 				e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && T(o.value, { quiet: !0 }), x());
 			});
@@ -3565,35 +3565,35 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, Ce = [
+}, Te = [
 	",",
 	";",
 	"\n",
 	"	"
-], we = [
+], Ee = [
 	["description", "description"],
 	["avatar", "avatar"],
 	["initials", "initials"],
 	["disabled-hint", "disabledHint"]
-], Te = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Ee = (e) => {
+], De = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Oe = (e) => {
 	let t = String(e ?? "").trim();
 	return /^(https?:)?\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t) ? t : "";
-}, De = (e) => {
-	let t = Ee(e.avatar);
-	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${_(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${W(t)}" alt="" />` : ""}</span>`;
-}, Oe = (e, t, n) => {
+}, ke = (e) => {
+	let t = Oe(e.avatar);
+	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${_(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${H(t)}" alt="" />` : ""}</span>`;
+}, Ae = (e, t, n) => {
 	let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${_(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${_(e.disabledHint)}</span>` : "";
-	return `<button type="button" role="option" id="${W(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${x(e)}</span>${i}</span>${a}${De(e)}<span class="ms-check">${m("check")}</span></button>`;
-}, ke = /* @__PURE__ */ new Map(), Ae = (e) => {
-	if (ke.has(e)) return ke.get(e);
+	return `<button type="button" role="option" id="${H(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${H(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${x(e)}</span>${i}</span>${a}${ke(e)}<span class="ms-check">${m("check")}</span></button>`;
+}, je = /* @__PURE__ */ new Map(), Me = (e) => {
+	if (je.has(e)) return je.get(e);
 	let t = null;
 	try {
 		t = RegExp(`^(?:${e})$`, "u");
 	} catch {
 		console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`);
 	}
-	return ke.set(e, t), t;
-}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), je = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Me = /[^0-9]/g, Ne = /[^0-9a-zA-Z]/g, Pe = class extends e {
+	return je.set(e, t), t;
+}, H = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ne = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Pe = /[^0-9]/g, Fe = /[^0-9a-zA-Z]/g, Ie = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3624,7 +3624,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 		this._value = this._clean(e), f(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Ne : Me, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Fe : Pe, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -3715,7 +3715,7 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, Fe = {
+}, Le = {
 	AD: ["Europe/Andorra"],
 	AE: ["Asia/Dubai"],
 	AF: ["Asia/Kabul"],
@@ -4117,13 +4117,13 @@ var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extend
 	ZA: ["Africa/Johannesburg"],
 	ZM: ["Africa/Lusaka"],
 	ZW: ["Africa/Harare"]
-}, Ie = new Set(M.map(([e]) => e)), Le = /* @__PURE__ */ new Map();
-for (let [e, t] of Object.entries(Fe)) for (let n of t) Le.set(n, e);
-function Re(e) {
-	let t = Le.get(e);
-	return t && Ie.has(t) ? t : null;
+}, Re = new Set(M.map(([e]) => e)), ze = /* @__PURE__ */ new Map();
+for (let [e, t] of Object.entries(Le)) for (let n of t) ze.set(n, e);
+function Be(e) {
+	let t = ze.get(e);
+	return t && Re.has(t) ? t : null;
 }
-function ze(e) {
+function Ve(e) {
 	if (!e) return null;
 	let t;
 	try {
@@ -4131,9 +4131,9 @@ function ze(e) {
 	} catch {
 		return null;
 	}
-	return t && Ie.has(t) ? t : null;
+	return t && Re.has(t) ? t : null;
 }
-function Be() {
+function He() {
 	let e;
 	try {
 		e = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -4141,77 +4141,77 @@ function Be() {
 		e = void 0;
 	}
 	let t = typeof navigator > "u" ? void 0 : navigator.language;
-	return Re(e) || ze(t) || "IN";
+	return Be(e) || Ve(t) || "IN";
 }
 //#endregion
 //#region src/WuiPhone.js
-var Ve = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, G = null, He = null;
-function Ue() {
-	return G ? Promise.resolve(G) : (He ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (G = {
+var Ue = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, U = null, We = null;
+function Ge() {
+	return U ? Promise.resolve(U) : (We ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (U = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		parsePhoneNumber: e.parsePhoneNumber,
 		examples: t.default || t
-	}, G)).catch(() => null), He);
+	}, U)).catch(() => null), We);
 }
-function We(e, t) {
+function Ke(e, t) {
 	let n = `+${N(e)}`;
 	return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
 }
-function K(e, t) {
-	if (!G || !t) return t;
+function W(e, t) {
+	if (!U || !t) return t;
 	try {
-		return We(e, new G.AsYouType(e).input(`+${N(e)}${t}`)) || t;
+		return Ke(e, new U.AsYouType(e).input(`+${N(e)}${t}`)) || t;
 	} catch {
 		return t;
 	}
 }
-function Ge(e, t) {
+function qe(e, t) {
 	if (t <= 0) return 0;
 	let n = 0;
 	for (let r = 0; r < e.length; r++) if (/[0-9]/.test(e[r]) && (n += 1, n === t)) return r + 1;
 	return e.length;
 }
-function q(e) {
-	if (!G) return null;
+function G(e) {
+	if (!U) return null;
 	try {
-		return We(e, G.getExampleNumber(e, G.examples)?.formatInternational()) || null;
+		return Ke(e, U.getExampleNumber(e, U.examples)?.formatInternational()) || null;
 	} catch {
 		return null;
 	}
 }
-function Ke(e) {
-	if (!G || !e) return null;
+function Je(e) {
+	if (!U || !e) return null;
 	try {
-		if (!G.isValidPhoneNumber(e)) return !1;
-		let t = G.parsePhoneNumber(e)?.getType?.();
+		if (!U.isValidPhoneNumber(e)) return !1;
+		let t = U.parsePhoneNumber(e)?.getType?.();
 		return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
 	} catch {
 		return null;
 	}
 }
-function qe(e) {
-	if (!G) return null;
+function Ye(e) {
+	if (!U) return null;
 	try {
-		let t = G.getExampleNumber(e, G.examples);
+		let t = U.getExampleNumber(e, U.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function Je(e, t, n) {
+function Xe(e, t, n) {
 	try {
-		let r = G.parsePhoneNumber(t, e), i = r?.nationalNumber;
+		let r = U.parsePhoneNumber(t, e), i = r?.nationalNumber;
 		return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
 	} catch {
 		return null;
 	}
 }
-function Ye(e) {
-	if (!G || !e?.trim().startsWith("+")) return null;
+function Ze(e) {
+	if (!U || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new G.AsYouType();
+		let t = new U.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -4222,7 +4222,7 @@ function Ye(e) {
 		return null;
 	}
 }
-var Xe = class extends e {
+var Qe = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4242,7 +4242,7 @@ var Xe = class extends e {
 		} catch {
 			this._internals = null;
 		}
-		this._defaultCountry = Be(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
+		this._defaultCountry = He(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -4272,7 +4272,7 @@ var Xe = class extends e {
 		return this._national ? `+${N(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = Ye(t);
+		let t = String(e ?? "").trim(), n = Ze(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(N(this._country));
@@ -4291,25 +4291,25 @@ var Xe = class extends e {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._country = this.getAttribute("country") || this._country;
-		let e = this.getAttribute("placeholder") || q(this._country) || "Enter phone number";
+		let e = this.getAttribute("placeholder") || G(this._country) || "Enter phone number";
 		this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
 		let t = `${this.id}-listbox`;
 		this._listboxId = t;
-		let n = M.map(([e, n, r], i) => `<button type="button" role="option" id="${J(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Ve(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
+		let n = M.map(([e, n, r], i) => `<button type="button" role="option" id="${K(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Ue(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
-          <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${J(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${Ve(this._country)}" data-flag aria-hidden="true"></span>
+          <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${K(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="${Ue(this._country)}" data-flag aria-hidden="true"></span>
             ${m("chevron-down", { className: "phone-chevron" })}
             <span class="phone-dial" data-dial>+${N(this._country)}</span>
           </button>
-          <div class="country-dropdown-menu" role="listbox" id="${J(t)}" tabindex="-1" hidden>
-            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${m("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${J(t)}" aria-autocomplete="list" /></div>
+          <div class="country-dropdown-menu" role="listbox" id="${K(t)}" tabindex="-1" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${m("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${K(t)}" aria-autocomplete="list" /></div>
             <div class="country-list-scroll">${n}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
-        <input type="tel" class="input" placeholder="${J(e)}" value="${J(K(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${J(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${J(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${K(e)}" value="${K(W(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${K(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${K(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
       </div>
       <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, f(this, this.value), this._wire();
 	}
@@ -4340,12 +4340,12 @@ var Xe = class extends e {
 			}
 			a && (a.hidden = n > 0);
 		}, v = (e) => {
-			this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), s && (s.className = Ve(e)), d && (d.textContent = `+${N(e)}`);
+			this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), s && (s.className = Ue(e)), d && (d.textContent = `+${N(e)}`);
 			for (let t of this._itemEls()) {
 				let n = t.dataset.iso === e;
 				t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
 			}
-			!this.getAttribute("placeholder") && o && (o.placeholder = q(e) || "Enter phone number"), o && this._national && (o.value = K(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
+			!this.getAttribute("placeholder") && o && (o.placeholder = G(e) || "Enter phone number"), o && this._national && (o.value = W(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
 		}, y = (t) => {
 			let n = this._visibleItems();
 			if (t.key === "ArrowDown") {
@@ -4379,7 +4379,7 @@ var Xe = class extends e {
 		let b = this.querySelector("[data-phone-error]"), x = (e) => {
 			if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), b) {
 				if (e) {
-					let e = q(this._country);
+					let e = G(this._country);
 					b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
 				b.hidden = !e;
@@ -4387,24 +4387,24 @@ var Xe = class extends e {
 		};
 		o.addEventListener("input", (e) => {
 			e.stopPropagation();
-			let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i = qe(this._country);
+			let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i = Ye(this._country);
 			if (i && r.length > i) {
-				let e = Je(this._country, r, i);
+				let e = Xe(this._country, r, i);
 				e ? (n = Math.max(0, n - (r.length - e.length)), r = e) : r = r.slice(0, i);
 			}
 			this._national = r;
-			let a = K(this._country, this._national);
+			let a = W(this._country, this._national);
 			if (o.value !== a) {
 				o.value = a;
-				let e = Ge(a, Math.min(n, r.length));
+				let e = qe(a, Math.min(n, r.length));
 				o.setSelectionRange(e, e);
 			}
-			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Ke(this.value) === !0) && x(!1);
+			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Je(this.value) === !0) && x(!1);
 		}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
-			x(this._national.length > 0 && Ke(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && Je(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), o.addEventListener("paste", (e) => {
-			let t = Ye(e.clipboardData?.getData("text"));
-			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = K(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
+			let t = Ze(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = W(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
 		}), this._bindGlobal = () => {
 			this._teardownGlobals?.(), this._onDocClick = (e) => {
 				f() && !this.contains(e.target) && g();
@@ -4413,9 +4413,9 @@ var Xe = class extends e {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this);
-		}, this._bindGlobal(), Ue().then((e) => {
-			if (!(!e || !o.isConnected) && (this._national && (o.value = K(this._country, this._national)), !this.getAttribute("placeholder"))) {
-				let e = q(this._country);
+		}, this._bindGlobal(), Ge().then((e) => {
+			if (!(!e || !o.isConnected) && (this._national && (o.value = W(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = G(this._country);
 				e && (o.placeholder = e);
 			}
 		}), this._syncMirror();
@@ -4426,7 +4426,7 @@ var Xe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, J = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ze = class extends e {
+}, K = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), $e = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4466,19 +4466,19 @@ var Xe = class extends e {
 		return this._value;
 	}
 	set value(e) {
-		this._value = this._snapToStep(this._clamp(Y(e, this._value))), this._syncValue(), this._syncMirrors();
+		this._value = this._snapToStep(this._clamp(q(e, this._value))), this._syncValue(), this._syncMirrors();
 	}
 	get start() {
 		return this._start;
 	}
 	set start(e) {
-		this._start = Math.min(this._snapToStep(this._clamp(Y(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
+		this._start = Math.min(this._snapToStep(this._clamp(q(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(Y(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
+		this._end = Math.max(this._snapToStep(this._clamp(q(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") {
@@ -4491,19 +4491,19 @@ var Xe = class extends e {
 		this._isRange() ? this._resetRange() : this._resetSingle();
 	}
 	_updateFromAttribute(e) {
-		e === "value" ? this._value = this._snapToStep(this._clamp(Y(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(Y(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(Y(this.getAttribute("end"), this._end))));
+		e === "value" ? this._value = this._snapToStep(this._clamp(q(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(q(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(q(this.getAttribute("end"), this._end))));
 	}
 	_isRange() {
 		return this.hasAttribute("range");
 	}
 	_min() {
-		return Y(this.getAttribute("min"), 0);
+		return q(this.getAttribute("min"), 0);
 	}
 	_max() {
-		return Y(this.getAttribute("max"), 100);
+		return q(this.getAttribute("max"), 100);
 	}
 	_step() {
-		return Y(this.getAttribute("step"), 1);
+		return q(this.getAttribute("step"), 1);
 	}
 	_clamp(e) {
 		return Math.max(this._min(), Math.min(e, this._max()));
@@ -4571,7 +4571,7 @@ var Xe = class extends e {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${Qe(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${et(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>` : ""}
@@ -4673,10 +4673,10 @@ var Xe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, Y = (e, t) => {
+}, q = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, Qe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), $e = class extends e {
+}, et = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), tt = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -4749,7 +4749,7 @@ var Xe = class extends e {
 		f(this, this._values.join(",")), this.innerHTML = `
       <div class="search-select${t}">
         <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
-          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${X(this._accessibleName())}" placeholder="${X(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/></div>
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${J(this._accessibleName())}" placeholder="${J(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/></div>
         </div>
       </div>`, this._rendered = !0, f(this, this._values.join(",")), this._renderControl(), this._wire();
 	}
@@ -4757,14 +4757,14 @@ var Xe = class extends e {
 		let e = this.querySelector("[data-chips]");
 		if (e) {
 			for (let t of e.querySelectorAll(":scope > .chip")) t.remove();
-			this._values.length && e.querySelector("[data-input]").insertAdjacentHTML("beforebegin", this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${et(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${m("x")}</button></span>`).join(""));
+			this._values.length && e.querySelector("[data-input]").insertAdjacentHTML("beforebegin", this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${nt(e)}</span><button type="button" class="chip-remove" data-remove="${J(e)}" aria-label="Remove ${J(e)}">${m("x")}</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 = new Set(r.map(ve).filter(Boolean)), s = () => {
+		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 = new Set(r.map(be).filter(Boolean)), s = () => {
 			f(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}, c = (e) => {
 			let t = e.trim();
@@ -4796,9 +4796,9 @@ var Xe = class extends e {
 			e.preventDefault();
 			let n = e.clipboardData.getData("text/plain"), a = [];
 			for (let e of r) {
-				let t = ye(e) ?? e;
-				if (xe(n, [t])) {
-					a.push(...be(n, [t]));
+				let t = xe(e) ?? e;
+				if (Ce(n, [t])) {
+					a.push(...Se(n, [t]));
 					break;
 				}
 			}
@@ -4826,18 +4826,18 @@ var Xe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, et = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), tt = (e) => String(e).padStart(2, "0"), nt = (e, t) => `${tt(e)}:${tt(t)}`, Z = (e) => {
+}, nt = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), J = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), rt = (e) => String(e).padStart(2, "0"), it = (e, t) => `${rt(e)}:${rt(t)}`, Y = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, rt = (e, t = "24") => {
+}, at = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return nt(e.h, e.m);
+	if (t === "24") return it(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
-	return `${n}:${tt(e.m)} ${r}`;
-}, it = class extends e {
+	return `${n}:${rt(e.m)} ${r}`;
+}, ot = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4893,11 +4893,11 @@ var Xe = class extends e {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Select time", t = Z(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");
+		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("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${_(a)}"` : ""}${o ? ` aria-describedby="${_(o)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? rt(t, n) : _(e)}</span>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? at(t, n) : _(e)}</span>
           ${m("clock")}
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -4909,14 +4909,14 @@ var Xe = class extends e {
 	_syncTrigger() {
 		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = Z(this._value), r = this.getAttribute("format") || "24";
-		t.textContent = n ? rt(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = Y(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? at(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 = Z(t) || {
+		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 = Z(n) || {
+		}, i = Y(n) || {
 			h: 23,
 			m: 59
 		}, a = [], o = r.h, s = r.m;
@@ -4929,10 +4929,10 @@ var Xe = class extends e {
 	_renderOptions() {
 		let e = this.querySelector(".timepicker-pop");
 		if (!e) return;
-		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Z(this._value), i = this._focus, a = "";
+		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 = nt(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\"" : ""}>${rt(o, t)}</button>`;
+			let o = n[e], s = it(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\"" : ""}>${at(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -5030,7 +5030,7 @@ var Xe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, at = "wui-wizard-step", ot = class extends e {
+}, st = "wui-wizard-step", ct = class extends e {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -5064,7 +5064,7 @@ var Xe = class extends e {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${at}`)];
+		return [...this.querySelectorAll(`:scope > ${st}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -5103,7 +5103,7 @@ var Xe = class extends e {
 	}
 	_reconcileSteps() {
 		let e = this._steps, t = this._known;
-		if (this._known = e, st(e, t)) return e;
+		if (this._known = e, lt(e, t)) return e;
 		let n = (n) => new Set([...n].map((n) => e.indexOf(t[n])).filter((e) => e >= 0));
 		this._skipped = n(this._skipped), this._invalid = n(this._invalid);
 		let r = t[this._active];
@@ -5123,7 +5123,7 @@ var Xe = class extends e {
 	_onStepsMutated() {
 		if (!this._rendered) return;
 		let e = this._steps;
-		(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && st(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
+		(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && lt(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
 	}
 	_syncPanels(e) {
 		e.forEach((e, t) => {
@@ -5147,13 +5147,13 @@ var Xe = class extends e {
 		return e.map((e, r) => {
 			let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
 			u = a === "done" ? m("check") : a === "error" ? m("alert-triangle") : a === "skipped" ? m("minus") : c ? m(c) : String(l);
-			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", p = i || r < this._active, h = s ? `<span class="step-desc">${Q(s)}</span>` : "", g;
-			return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${h}`, p ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
+			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", p = i || r < this._active, h = s ? `<span class="step-desc">${X(s)}</span>` : "", g;
+			return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${X(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${X(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${X(o)}</span>${h}`, p ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
 		}).join("");
 	}
 	_footerHtml(e) {
 		let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional") || this.hasAttribute("skippable"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
-		return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${m("arrow-left", { className: "me-2" })}${Q(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Q(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Q(o)}${m("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Q(c)}</button>`}</span>`;
+		return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${m("arrow-left", { className: "me-2" })}${X(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${X(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${X(o)}${m("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${X(c)}</button>`}</span>`;
 	}
 	_wire() {
 		this._teardown(), this._onHeaderClick = (e) => {
@@ -5227,7 +5227,7 @@ var Xe = class extends e {
 	_reflectActive(e) {
 		this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
 	}
-}, st = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ct = class extends e {
+}, lt = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ut = class extends e {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -5241,8 +5241,8 @@ var Xe = class extends e {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, lt = 2e3;
-async function ut(e) {
+}, dt = 2e3;
+async function ft(e) {
 	try {
 		if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
 	} catch {}
@@ -5257,14 +5257,14 @@ async function ut(e) {
 }
 //#endregion
 //#region src/fileValidation.js
-var dt = "image/png,image/jpeg,image/webp", ft = 5, pt = {
+var pt = "image/png,image/jpeg,image/webp", mt = 5, ht = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, mt = {
+}, gt = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -5278,7 +5278,7 @@ var dt = "image/png,image/jpeg,image/webp", ft = 5, pt = {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, ht = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), gt = [
+}, _t = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), vt = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -5289,54 +5289,54 @@ var dt = "image/png,image/jpeg,image/webp", ft = 5, pt = {
 	".avif",
 	".heic"
 ];
-function _t(e) {
+function yt(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 gt.some((e) => r.endsWith(e));
+	return vt.some((e) => r.endsWith(e));
 }
-function vt(e) {
-	let t = ht(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? gt.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+function bt(e) {
+	let t = _t(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? vt.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function yt(e) {
+function xt(e) {
 	let t = [];
-	for (let n of ht(e)) {
-		let e = mt[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of _t(e)) {
+		let e = gt[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 bt(e, t) {
-	let n = ht(t);
+function St(e, t) {
+	let n = _t(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 && (pt[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 && (ht[e] || []).some((e) => i.endsWith(e)));
 }
-function xt(e, t = {}) {
+function Ct(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? dt : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
-	return bt(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${yt(n)} file.`;
+	let n = t.accept === void 0 ? pt : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
+	return St(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${xt(n)} file.`;
 }
 //#endregion
 //#region src/passwordRules.js
-var St = {
+var wt = {
 	minLength: 8,
 	uppercase: !0,
 	lowercase: !0,
 	digit: !0,
 	special: !0,
 	uniqueChars: 0
-}, Ct = "Password Requirements";
-function wt(e) {
-	return e === !0 || e == null ? { ...St } : {
-		...St,
+}, Tt = "Password Requirements";
+function Et(e) {
+	return e === !0 || e == null ? { ...wt } : {
+		...wt,
 		...e
 	};
 }
-function Tt(e) {
-	let t = wt(e), n = [];
+function Dt(e) {
+	let t = Et(e), n = [];
 	if (t.minLength > 0 && n.push({
 		key: "length",
 		label: `At least ${t.minLength} characters long`,
@@ -5367,25 +5367,145 @@ function Tt(e) {
 	}
 	return n;
 }
-function Et(e, t) {
+function Ot(e, t) {
 	let n = e == null ? "" : String(e);
-	return Tt(t).map((e) => ({
+	return Dt(t).map((e) => ({
 		key: e.key,
 		label: e.label,
 		met: e.test(n)
 	}));
 }
-function Dt(e, t) {
-	return Et(e, t).every((e) => e.met);
+function kt(e, t) {
+	return Ot(e, t).every((e) => e.met);
+}
+//#endregion
+//#region src/themeTransition.js
+var At = [
+	"light",
+	"dark",
+	"auto"
+], jt = [
+	"wave",
+	"circle",
+	"slide",
+	"blinds",
+	"fade",
+	"none"
+], Mt = "wave", Nt = "theme", Pt = {
+	wave: 1100,
+	circle: 700,
+	slide: 600,
+	blinds: 900,
+	fade: 350,
+	none: 0
+}, Ft = "wui-theme-switching", It = "wui-theme-change", Lt = "wui-theme-toggle", Rt = "(prefers-color-scheme: dark)", zt = (e) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(e).matches, Bt = (e) => At.includes(e);
+function Vt(e) {
+	return e === "dark" || e === "auto" && zt(Rt) ? "dark" : "light";
+}
+function Ht(e = Nt, { includeAuto: t = !1 } = {}) {
+	let n = null;
+	try {
+		n = window.localStorage.getItem(e);
+	} catch {}
+	return !Bt(n) || n === "auto" && !t ? "light" : n;
+}
+function Ut(e, t = Nt) {
+	try {
+		window.localStorage.setItem(t, e);
+	} catch {}
+}
+function Wt(e) {
+	let t = document.documentElement;
+	t.setAttribute("data-theme", e), t.setAttribute("data-bs-theme", Vt(e)), document.dispatchEvent(new CustomEvent(It, { detail: { mode: e } }));
+}
+function Gt(e, { includeAuto: t = !1 } = {}) {
+	return e === "light" ? "dark" : e === "dark" && t ? "auto" : "light";
+}
+function Kt(e) {
+	if (typeof window > "u" || typeof window.matchMedia != "function") return () => {};
+	let t = window.matchMedia(Rt), n = () => e(t.matches ? "dark" : "light");
+	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
+}
+var qt = 60, Jt = (e) => e < .5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2, Z = (e) => e.toFixed(1), Q = (e, t) => `${Z(e)}px ${Z(t)}px`, Yt = {
+	amplitude: 22,
+	segments: 36,
+	cycles: 1.5,
+	ripples: 2
+}, Xt = 6, Zt = (e, t, n, r, i) => {
+	let { amplitude: a, segments: o, cycles: s } = Yt, c = n * (t + 2 * a), l = i ? t + a - c : c - a, u = i ? t + 2 * a : -2 * a, d = [Q(0, u)];
+	for (let t = 0; t <= o; t++) {
+		let n = e * t / o, i = l + a * Math.sin(2 * Math.PI * s * t / o + r);
+		d.push(Q(n, i));
+	}
+	return d.push(Q(e, u)), `polygon(${d.join(", ")})`;
+}, Qt = (e, t, n, r) => {
+	let i = t / Xt, a = [];
+	for (let t = 0; t < Xt; t++) {
+		let o = t * i, s = i * n, c = r ? o + i - s : o, l = r ? o + i : o + s;
+		a.push(Q(0, c), Q(e, c), Q(e, l), Q(0, l));
+	}
+	return `polygon(${a.join(", ")})`;
+};
+function $t(e, { width: t, height: n, to: r = "dark", origin: i } = {}) {
+	let a = r === "dark", o = [];
+	for (let r = 0; r <= qt; r++) {
+		let s = r / qt, c = Jt(s);
+		switch (e) {
+			case "circle": {
+				let e = i?.x ?? t / 2, r = i?.y ?? n / 2, a = Math.hypot(Math.max(e, t - e), Math.max(r, n - r));
+				o.push({ clipPath: `circle(${Z(a * c)}px at ${Z(e)}px ${Z(r)}px)` });
+				break;
+			}
+			case "slide": {
+				let e = n * (1 - c);
+				o.push({ clipPath: a ? `inset(${Z(e)}px 0px 0px 0px)` : `inset(0px 0px ${Z(e)}px 0px)` });
+				break;
+			}
+			case "blinds":
+				o.push({ clipPath: Qt(t, n, c, a) });
+				break;
+			case "fade":
+				o.push({
+					clipPath: "none",
+					opacity: c
+				});
+				break;
+			case "none": return [];
+			default: o.push({ clipPath: Zt(t, n, c, s * Yt.ripples * 2 * Math.PI, a) });
+		}
+	}
+	return o;
+}
+function en(e, { effect: t = Mt, to: n, origin: r, duration: i, live: a } = {}) {
+	let o = document.documentElement, s = n !== void 0 && o.getAttribute("data-bs-theme") === n;
+	if (t === "none" || s || zt("(prefers-reduced-motion: reduce)") || typeof document.startViewTransition != "function" || typeof o.animate != "function") return e(), Promise.resolve(!1);
+	o.classList.add(Ft);
+	let c = a instanceof Element ? a : null;
+	c && (c.style.viewTransitionName = Lt);
+	let l = document.startViewTransition(e), u = i ?? Pt[t] ?? Pt.wave;
+	return l.ready.then(() => {
+		let e = $t(t, {
+			width: window.innerWidth,
+			height: window.innerHeight,
+			to: n,
+			origin: r
+		});
+		o.animate(e, {
+			duration: u,
+			easing: "linear",
+			fill: "both",
+			pseudoElement: "::view-transition-new(root)"
+		});
+	}).catch(() => {}), l.finished.catch(() => {}).then(() => (o.classList.remove(Ft), c && (c.style.viewTransitionName = ""), !0));
 }
 //#endregion
 //#region src/index.js
 var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function Ot() {
-	$("wui-select", P), $("wui-country-select", de), $("wui-phone", Xe), $("wui-datepicker", fe), $("wui-date-range", pe), $("wui-dock", me), $("wui-consent-banner", se), $("wui-slider", Ze), $("wui-timepicker", it), $("wui-autocomplete", S), $("wui-command-palette", ee), $("wui-multiselect", Se), $("wui-taginput", $e), $("wui-otp", Pe), $("wui-status-icon", i), $("wui-wizard-step", ct), $("wui-wizard", ot);
+function tn() {
+	$("wui-select", P), $("wui-country-select", de), $("wui-phone", Qe), $("wui-datepicker", me), $("wui-date-range", he), $("wui-dock", ge), $("wui-consent-banner", se), $("wui-slider", $e), $("wui-timepicker", ot), $("wui-autocomplete", S), $("wui-command-palette", ee), $("wui-multiselect", we), $("wui-taginput", tt), $("wui-otp", Ie), $("wui-status-icon", i), $("wui-wizard-step", ut), $("wui-wizard", ct);
 }
-Ot();
+tn();
 //#endregion
-export { lt as COPY_FEEDBACK_MS, dt as DEFAULT_IMAGE_ACCEPT, ft as DEFAULT_MAX_SIZE_MB, St as DEFAULT_PASSWORD_RULES, Ct as DEFAULT_REQUIREMENTS_TITLE, r as STATUS_TONES, S as WuiAutocomplete, ee as WuiCommandPalette, se as WuiConsentBanner, de as WuiCountrySelect, fe as WuiDatePicker, pe as WuiDateRange, me as WuiDock, Se as WuiMultiSelect, Pe as WuiOtp, Xe as WuiPhone, P as WuiSelect, Ze as WuiSlider, i as WuiStatusIcon, $e as WuiTagInput, it as WuiTimePicker, ot as WuiWizard, ct as WuiWizardStep, yt as acceptLabel, Tt as buildPasswordRules, ut as copyTextToClipboard, Ot as defineWeborityElements, Et as evaluatePassword, m as glyphSvg, _t as isImageFile, vt as isImageOnlyAccept, T as matchSegments, bt as matchesAccept, Dt as passwordSatisfies, xt as validateFile };
+export { dt as COPY_FEEDBACK_MS, pt as DEFAULT_IMAGE_ACCEPT, mt as DEFAULT_MAX_SIZE_MB, wt as DEFAULT_PASSWORD_RULES, Tt as DEFAULT_REQUIREMENTS_TITLE, Mt as DEFAULT_THEME_EFFECT, Nt as DEFAULT_THEME_STORAGE_KEY, r as STATUS_TONES, It as THEME_CHANGE_EVENT, jt as THEME_EFFECTS, Pt as THEME_EFFECT_DURATION, Lt as THEME_LIVE_NAME, At as THEME_MODES, Ft as THEME_SWITCHING_CLASS, S as WuiAutocomplete, ee as WuiCommandPalette, se as WuiConsentBanner, de as WuiCountrySelect, me as WuiDatePicker, he as WuiDateRange, ge as WuiDock, we as WuiMultiSelect, Ie as WuiOtp, Qe as WuiPhone, P as WuiSelect, $e as WuiSlider, i as WuiStatusIcon, tt as WuiTagInput, ot as WuiTimePicker, ct as WuiWizard, ut as WuiWizardStep, xt as acceptLabel, Wt as applyTheme, Dt as buildPasswordRules, ft as copyTextToClipboard, tn as defineWeborityElements, Ot as evaluatePassword, m as glyphSvg, yt as isImageFile, bt as isImageOnlyAccept, T as matchSegments, St as matchesAccept, Gt as nextTheme, kt as passwordSatisfies, Ht as readStoredTheme, Vt as resolveTheme, Ut as storeTheme, $t as themeKeyframes, en as transitionTheme, Ct as validateFile, Kt as watchSystemTheme };