@webority/ui-elements 0.24.0 → 0.25.0

package/dist/ui-elements.js

@@ -56,20 +56,34 @@ function u(e) {
 //#endregion
 //#region src/formMirror.js
 var d = "data-wui-mirror";
-function f(e, t) {
+function f(e, t, n, r) {
+	t.name = n, t.value = r == null ? "" : String(r);
+	for (let n of [...t.attributes]) n.name.startsWith("data-val") && !e.hasAttribute(n.name) && t.removeAttribute(n.name);
+	for (let n of e.attributes) n.name.startsWith("data-val") && t.setAttribute(n.name, n.value);
+	t.disabled = e.hasAttribute("disabled");
+}
+function p(e) {
+	let t = document.createElement("input");
+	return t.type = "hidden", t.setAttribute(d, ""), e.appendChild(t), t;
+}
+function m(e, t) {
 	let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${d}]`);
 	if (!n) {
 		r?.remove();
 		return;
 	}
-	r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(d, ""), 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");
+	r ||= p(e), f(e, r, n, t);
+}
+function h(e, t) {
+	let n = e.getAttribute("name"), r = [...e.querySelectorAll(`:scope > input[${d}]`)], i = n ? t.length > 0 ? t : [""] : [];
+	for (let e of r.splice(i.length)) e.remove();
+	i.forEach((t, i) => {
+		f(e, r[i] ?? p(e), n, t);
+	});
 }
 //#endregion
 //#region src/iconGlyphs.g.js
-var p = {
+var g = {
 	activity: "<path d=\"M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"m7.33 14.49 2.38-3.09c.34-.44.97-.52 1.41-.18l1.83 1.44c.44.34 1.07.26 1.41-.17l2.31-2.98\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
 	alarm: "<path d=\"M2 22h20M12 6a9 9 0 0 0-9 9v7h18v-7a9 9 0 0 0-9-9ZM12 2v1M4 4l1 1M20 4l-1 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
 	"alert-circle": "<path d=\"M12 7.75V13M21.08 8.58v6.84c0 1.12-.6 2.16-1.57 2.73l-5.94 3.43c-.97.56-2.17.56-3.15 0l-5.94-3.43a3.15 3.15 0 0 1-1.57-2.73V8.58c0-1.12.6-2.16 1.57-2.73l5.94-3.43c.97-.56 2.17-.56 3.15 0l5.94 3.43c.97.57 1.57 1.6 1.57 2.73Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M12 16.2v.1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
@@ -226,14 +240,14 @@ var p = {
 	"zoom-in": "<path d=\"M11 20a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM8.5 11h5M11 13.5v-5M18.93 20.69c.53 1.6 1.74 1.76 2.67.36.85-1.28.29-2.33-1.25-2.33-1.14-.01-1.78.88-1.42 1.97Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
 	"zoom-out": "<path d=\"M9 11.7h5M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>"
 };
-Object.keys(p);
-function m(e, { size: t = 16, className: n = "", style: r = "" } = {}) {
-	let i = p[e];
+Object.keys(g);
+function _(e, { size: t = 16, className: n = "", style: r = "" } = {}) {
+	let i = g[e];
 	return i ? `<svg class="${n ? `wui-icon ${n}` : "wui-icon"}" data-icon="${e}" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" aria-hidden="true" style="vertical-align:-.125em${r ? `;${r}` : ""}">${i}</svg>` : "";
 }
 //#endregion
 //#region src/listboxKeyNav.js
-function h(e) {
+function v(e) {
 	let { getVisibleOptions: t, getActive: n, setActive: r, onEnter: i, onEscape: a, onTypeahead: o, typeaheadMs: s = 500 } = e, c = "", l = null, u = () => {
 		clearTimeout(l), l = null, c = "";
 	};
@@ -264,18 +278,18 @@ function h(e) {
 }
 //#endregion
 //#region src/optionLabel.js
-var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), v = (e) => {
+var y = Symbol("wui.trustedHtml"), b = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), x = (e) => {
 	if (!e) return "";
 	let t = String(e).toLowerCase().replace(/[^a-z0-9-]/g, "");
-	return t ? m(t) : "";
-}, y = (e) => `wui-flag wui-flag-${e}`, b = (e) => {
+	return t ? _(t) : "";
+}, S = (e) => `wui-flag wui-flag-${e}`, ee = (e) => {
 	let t = String(e ?? "").toLowerCase();
-	return /^[a-z]{2}$/.test(t) ? `<span class="${y(t)}" aria-hidden="true"></span>` : "";
-}, x = (e) => {
+	return /^[a-z]{2}$/.test(t) ? `<span class="${S(t)}" aria-hidden="true"></span>` : "";
+}, C = (e) => {
 	if (e == null) return "";
-	let t = e[g] ? String(e.label ?? "") : _(e.label), n = b(e.flag) + v(e.icon);
+	let t = e[y] ? String(e.label ?? "") : b(e.label), n = ee(e.flag) + x(e.icon);
 	return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
-}, S = class extends e {
+}, w = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -334,14 +348,14 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._value;
 	}
 	set value(e) {
-		this._value = e == null ? "" : String(e), f(this, this._value);
+		this._value = e == null ? "" : String(e), m(this, this._value);
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		this._label = t ? w(t.label) : "", this._syncInput(), this._renderOptions("");
+		this._label = t ? E(t.label) : "", this._syncInput(), this._renderOptions("");
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : [];
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		t && (this._label = w(t.label)), this._renderOptions(), this._syncInput();
+		t && (this._label = E(t.label)), this._renderOptions(), this._syncInput();
 	}
 	get options() {
 		return this._readOptions();
@@ -360,7 +374,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	_matchesKnownOption(e) {
 		let t = e.toLowerCase();
-		return this._readOptions().some((e) => w(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
+		return this._readOptions().some((e) => E(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
 	}
 	get _minChars() {
 		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
@@ -378,7 +392,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
 			icon: e.getAttribute("icon") || void 0,
-			[g]: !0,
+			[y]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -392,17 +406,17 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		let r = `${this.id}-listbox`;
 		this._listboxId = r, this.innerHTML = `
       <div class="search-select${n}">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${C(r)}" aria-label="${C(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}>
-          <input class="search-select-input search-select-ac-input" placeholder="${C(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${T(r)}" aria-label="${T(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}>
+          <input class="search-select-input search-select-ac-input" placeholder="${T(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
           <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
-          <button type="button" class="search-select-clear" aria-label="Clear" hidden>${m("x")}</button>
+          <button type="button" class="search-select-clear" aria-label="Clear" hidden>${_("x")}</button>
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${C(r)}" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${T(r)}" tabindex="-1" hidden>
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
           <div class="search-select-hint" hidden>Type to search…</div>
         </div>
-      </div>`, this._rendered = !0, f(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
+      </div>`, this._rendered = !0, m(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
 	}
 	_refs() {
 		return {
@@ -431,7 +445,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this._refs();
 		if (!t.optionsWrap) return;
 		let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
-		!this._remote && r && (i = i.filter((e) => w(e.label).toLowerCase().includes(r)));
+		!this._remote && r && (i = i.filter((e) => E(e.label).toLowerCase().includes(r)));
 		let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
 			value: a,
 			custom: !0
@@ -439,11 +453,11 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		t.optionsWrap.innerHTML = o.map((e, t) => {
 			let n = `${s}-opt-${t}`;
 			if (e.custom) {
-				let t = `Add “${_(e.value)}”`;
-				return `<button type="button" role="option" id="${C(n)}" class="search-select-option search-select-option-custom" data-value="${C(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
+				let t = `Add “${b(e.value)}”`;
+				return `<button type="button" role="option" id="${T(n)}" class="search-select-option search-select-option-custom" data-value="${T(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
 			}
 			let r = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${C(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${C(e.value)}" aria-selected="${r}">${x(e)}</button>`;
+			return `<button type="button" role="option" id="${T(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${T(e.value)}" aria-selected="${r}">${C(e)}</button>`;
 		}).join(""), this._active = -1, t.control?.removeAttribute("aria-activedescendant");
 		let c = r.length < this._minChars;
 		t.hint && (t.hint.hidden = !(this._remote && c && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && c), this._reanchor?.();
@@ -463,12 +477,12 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", this._syncInput();
 		}, s = (t) => {
 			let n = t.dataset.custom === "true";
-			this._value = t.dataset.value, this._label = n ? t.dataset.value : w(t.innerHTML), f(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
+			this._value = t.dataset.value, this._label = n ? t.dataset.value : E(t.innerHTML), m(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
 				bubbles: !0,
 				detail: { isCustom: n }
 			})), o(), e.input.focus();
 		}, u = (t) => {
-			this._value = t, this._label = t, f(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
+			this._value = t, this._label = t, m(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
 				bubbles: !0,
 				detail: { isCustom: !0 }
 			})), o();
@@ -486,7 +500,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 				}, this._timer = setTimeout(() => this._fireSearch(t, e), this._debounceMs);
 			} else this._renderOptions(t);
 		};
-		this._navHandler = h({
+		this._navHandler = v({
 			getVisibleOptions: n,
 			getActive: () => this._active,
 			setActive: (e) => r(e),
@@ -501,7 +515,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 				this._navHandler.clearTypeahead(), o();
 			}
 		});
-		let p = (e) => {
+		let f = (e) => {
 			let t = e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA";
 			if (e.key === "ArrowDown") {
 				e.preventDefault(), i() || a();
@@ -515,7 +529,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 			else if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey || !i() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA") && (!i() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA")) return;
 			this._navHandler.handler(e);
 		};
-		e.input.addEventListener("focus", () => a()), e.input.addEventListener("input", d), e.input.addEventListener("keydown", p), e.menu.addEventListener("keydown", p), e.input.addEventListener("blur", (t) => {
+		e.input.addEventListener("focus", () => a()), e.input.addEventListener("input", d), e.input.addEventListener("keydown", f), e.menu.addEventListener("keydown", f), e.input.addEventListener("blur", (t) => {
 			if (!this._allowCustom || t.relatedTarget && this.contains(t.relatedTarget)) return;
 			let n = e.input.value.trim();
 			!n || n === this._label || this._matchesKnownOption(n) || u(n);
@@ -526,7 +540,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 			let t = e.target.closest(".search-select-option");
 			t && r(this._optionEls().indexOf(t));
 		}), e.optionsWrap.addEventListener("mouseleave", () => r(-1)), e.clear?.addEventListener("click", () => {
-			this._value = "", this._label = "", f(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
+			this._value = "", this._label = "", m(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
 		}), this._bindGlobal = () => {
 			this._teardown(), this._onDocClick = (e) => {
 				i() && !this.contains(e.target) && o();
@@ -550,10 +564,10 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, C = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), w = (e) => String(e ?? "").replace(/<[^>]*>/g, "");
+}, T = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), E = (e) => String(e ?? "").replace(/<[^>]*>/g, "");
 //#endregion
 //#region src/textMatch.js
-function T(e, t) {
+function D(e, t) {
 	let n = String(e ?? ""), r = String(t ?? "").trim();
 	if (!r || !n) return [{
 		text: n,
@@ -579,7 +593,7 @@ function T(e, t) {
 }
 //#endregion
 //#region src/WuiCommandPalette.js
-var E = "[role=\"option\"]", D = "No results", ee = class extends e {
+var O = "[role=\"option\"]", te = "No results", ne = class extends e {
 	static get observedAttributes() {
 		return [
 			"filter",
@@ -622,7 +636,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		this.setAttribute("highlight", e ? "true" : "false");
 	}
 	get emptyText() {
-		return this.getAttribute("empty-text") ?? D;
+		return this.getAttribute("empty-text") ?? te;
 	}
 	set emptyText(e) {
 		this.setAttribute("empty-text", String(e ?? ""));
@@ -639,7 +653,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		return this.querySelector("[role=\"combobox\"]");
 	}
 	_optionFrom(e, t = !1) {
-		let n = e?.closest?.(E);
+		let n = e?.closest?.(O);
 		return n && this.contains(n) && !this._isHidden(n) && (t || !this._isDisabled(n)) ? n : null;
 	}
 	_isDisabled(e) {
@@ -649,11 +663,11 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		return e.hidden || !!e.closest("[role=\"group\"]")?.hidden;
 	}
 	_selectableOptions() {
-		return [...this.querySelectorAll(E)].filter((e) => !this._isHidden(e) && !this._isDisabled(e));
+		return [...this.querySelectorAll(O)].filter((e) => !this._isHidden(e) && !this._isDisabled(e));
 	}
 	_setActive(e, t) {
 		this._activeId = e ? e.id : null;
-		for (let t of this.querySelectorAll(E)) t.setAttribute("aria-selected", t === e ? "true" : "false");
+		for (let t of this.querySelectorAll(O)) t.setAttribute("aria-selected", t === e ? "true" : "false");
 		let n = this._input();
 		n && (e ? n.setAttribute("aria-activedescendant", e.id) : n.removeAttribute("aria-activedescendant")), e && t && e.scrollIntoView({ block: "nearest" });
 	}
@@ -689,11 +703,11 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	}
 	_applyFilter() {
 		let e = this._input(), t = (e ? e.value : "").trim(), n = t.toLowerCase(), r = this.highlight, i = 0;
-		for (let e of this.querySelectorAll(E)) {
+		for (let e of this.querySelectorAll(O)) {
 			let a = e.querySelector(".wui-cmd-item-label"), o = e.dataset.label ?? a?.textContent ?? "", s = !n || o.toLowerCase().includes(n);
-			e.hidden = !s, s && i++, a && (a.innerHTML = T(o, r ? t : "").map((e) => e.match ? `<mark class="wui-cmd-mark">${_(e.text)}</mark>` : _(e.text)).join(""));
+			e.hidden = !s, s && i++, a && (a.innerHTML = D(o, r ? t : "").map((e) => e.match ? `<mark class="wui-cmd-mark">${b(e.text)}</mark>` : b(e.text)).join(""));
 		}
-		for (let e of this.querySelectorAll("[role=\"group\"]")) e.hidden = ![...e.querySelectorAll(E)].some((e) => !e.hidden);
+		for (let e of this.querySelectorAll("[role=\"group\"]")) e.hidden = ![...e.querySelectorAll(O)].some((e) => !e.hidden);
 		let a = this.querySelector("[role=\"listbox\"]");
 		a && (a.hidden = i === 0);
 		let o = this.querySelector(".wui-cmd-empty");
@@ -702,7 +716,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	_teardown() {
 		this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("click", this._onClick), this.removeEventListener("mousedown", this._onMouseDown), this.removeEventListener("mousemove", this._onMouseMove), this.removeEventListener("input", this._onInput);
 	}
-}, te = {
+}, re = {
 	"--color-primary": "#4F46E5",
 	"--color-primary-hover": "#4338CA",
 	"--color-text": "#071437",
@@ -712,21 +726,21 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	"--wui-radius-lg": "14px",
 	"--wui-shadow-overlay-lg": "0 24px 60px -16px rgba(7, 20, 55, 0.28)",
 	"--wui-z-fixed": "1030"
-}, O = (e) => `var(${e}, ${te[e]})`, ne = `
+}, k = (e) => `var(${e}, ${re[e]})`, ie = `
 :host {
     all: initial;
     position: fixed;
     bottom: 20px;
     left: 20px;
     right: auto;
-    z-index: ${O("--wui-z-fixed")};
+    z-index: ${k("--wui-z-fixed")};
     display: block;
     width: 420px;
     max-width: calc(100vw - 40px);
     font-family: inherit;
     font-size: 16px;
     line-height: 1.5;
-    color: ${O("--color-text")};
+    color: ${k("--color-text")};
 }
 :host([position="bottom-right"]) {
     right: 20px;
@@ -744,10 +758,10 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 
 .wui-consent-banner-panel {
     padding: 20px;
-    background: ${O("--color-surface")};
-    border: 1px solid ${O("--color-border")};
-    border-radius: ${O("--wui-radius-lg")};
-    box-shadow: ${O("--wui-shadow-overlay-lg")};
+    background: ${k("--color-surface")};
+    border: 1px solid ${k("--color-border")};
+    border-radius: ${k("--wui-radius-lg")};
+    box-shadow: ${k("--wui-shadow-overlay-lg")};
     text-align: start;
     pointer-events: auto;
 }
@@ -756,16 +770,16 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
-    color: ${O("--color-text")};
+    color: ${k("--color-text")};
 }
 .wui-consent-banner-description {
     margin: 0 0 16px;
     font-size: 14px;
     line-height: 1.5;
-    color: ${O("--color-text-muted")};
+    color: ${k("--color-text-muted")};
 }
 .wui-consent-banner-policy {
-    color: ${O("--color-primary")};
+    color: ${k("--color-primary")};
     font-weight: 500;
 }
 
@@ -776,15 +790,15 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
     margin: 0 0 16px;
     padding: 12px 0;
     overflow-y: auto;
-    border-top: 1px solid ${O("--color-border")};
-    border-bottom: 1px solid ${O("--color-border")};
+    border-top: 1px solid ${k("--color-border")};
+    border-bottom: 1px solid ${k("--color-border")};
 }
 .wui-consent-banner-category-description {
     margin: 2px 0 0;
     padding-inline-start: 2.5em;
     font-size: 12px;
     line-height: 1.4;
-    color: ${O("--color-text-muted")};
+    color: ${k("--color-text-muted")};
 }
 
 .form-check {
@@ -802,20 +816,20 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
     margin: 0;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 2em;
-    background: ${O("--color-surface")} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat;
+    background: ${k("--color-surface")} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat;
     cursor: pointer;
     transition: background-position 0.15s ease-in-out;
 }
 .form-check-input:checked {
-    border-color: ${O("--color-primary")};
-    background: ${O("--color-primary")} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat;
+    border-color: ${k("--color-primary")};
+    background: ${k("--color-primary")} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat;
 }
 .form-check-input:disabled {
     opacity: 0.5;
     cursor: default;
 }
 .form-check-input:focus-visible {
-    outline: 2px solid ${O("--color-primary")};
+    outline: 2px solid ${k("--color-primary")};
     outline-offset: 2px;
 }
 .form-check-label {
@@ -844,33 +858,33 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
     cursor: pointer;
 }
 .btn:focus-visible {
-    outline: 2px solid ${O("--color-primary")};
+    outline: 2px solid ${k("--color-primary")};
     outline-offset: 2px;
 }
 .btn-primary {
-    background: ${O("--color-primary")};
-    border-color: ${O("--color-primary")};
+    background: ${k("--color-primary")};
+    border-color: ${k("--color-primary")};
     color: #fff;
 }
 .btn-primary:hover {
-    background: ${O("--color-primary-hover")};
-    border-color: ${O("--color-primary-hover")};
+    background: ${k("--color-primary-hover")};
+    border-color: ${k("--color-primary-hover")};
 }
 .btn-outline-secondary {
-    border-color: ${O("--color-text-muted")};
-    color: ${O("--color-text-muted")};
+    border-color: ${k("--color-text-muted")};
+    color: ${k("--color-text-muted")};
 }
 .btn-outline-secondary:hover {
-    background: ${O("--color-text-muted")};
+    background: ${k("--color-text-muted")};
     color: #fff;
 }
 .btn-link {
     font-weight: 400;
-    color: ${O("--color-primary")};
+    color: ${k("--color-primary")};
     text-decoration: underline;
 }
 .btn-link:hover {
-    color: ${O("--color-primary-hover")};
+    color: ${k("--color-primary-hover")};
 }
 .wui-consent-banner-settings-toggle {
     margin-inline-end: auto;
@@ -890,7 +904,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
         max-width: none;
     }
 }
-`, re = "wui-consent-save", ie = "[data-consent-settings]", k = {
+`, ae = "wui-consent-save", oe = "[data-consent-settings]", A = {
 	heading: "Cookies on this site",
 	description: "We use cookies to understand how the site is used and to measure our campaigns. You can change your choice at any time.",
 	policyLabel: "Cookie policy",
@@ -906,11 +920,11 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	rejectLabel: "Reject all",
 	acceptLabel: "Accept all",
 	saveLabel: "Save preferences"
-}, ae = [
+}, se = [
 	"analytics",
 	"functional",
 	"marketing"
-], oe = 0, se = class extends e {
+], ce = 0, le = class extends e {
 	static get observedAttributes() {
 		return [
 			"heading",
@@ -923,12 +937,12 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		];
 	}
 	constructor() {
-		super(), oe += 1, this._uid = `wui-consent-${oe}`, this._preferences = {
+		super(), ce += 1, this._uid = `wui-consent-${ce}`, this._preferences = {
 			analytics: !1,
 			functional: !1,
 			marketing: !1
 		}, this._settings = !1, this._onDocumentClick = (e) => {
-			e.target instanceof Element && e.target.closest(ie) && (e.preventDefault(), this.open({
+			e.target instanceof Element && e.target.closest(oe) && (e.preventDefault(), this.open({
 				settings: !0,
 				focus: !0
 			}));
@@ -947,13 +961,13 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		this.toggleAttribute("standalone", e === !0 || e === "" || e === "true");
 	}
 	get heading() {
-		return this.getAttribute("heading") || k.heading;
+		return this.getAttribute("heading") || A.heading;
 	}
 	set heading(e) {
 		this.setAttribute("heading", String(e ?? ""));
 	}
 	get description() {
-		return this.getAttribute("description") || k.description;
+		return this.getAttribute("description") || A.description;
 	}
 	set description(e) {
 		this.setAttribute("description", String(e ?? ""));
@@ -965,25 +979,25 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		this.setAttribute("policy-href", String(e ?? ""));
 	}
 	get policyLabel() {
-		return this.getAttribute("policy-label") || k.policyLabel;
+		return this.getAttribute("policy-label") || A.policyLabel;
 	}
 	set policyLabel(e) {
 		this.setAttribute("policy-label", String(e ?? ""));
 	}
 	get analyticsDescription() {
-		return this.getAttribute("analytics-description") || k.analyticsDescription;
+		return this.getAttribute("analytics-description") || A.analyticsDescription;
 	}
 	set analyticsDescription(e) {
 		this.setAttribute("analytics-description", String(e ?? ""));
 	}
 	get functionalDescription() {
-		return this.getAttribute("functional-description") || k.functionalDescription;
+		return this.getAttribute("functional-description") || A.functionalDescription;
 	}
 	set functionalDescription(e) {
 		this.setAttribute("functional-description", String(e ?? ""));
 	}
 	get marketingDescription() {
-		return this.getAttribute("marketing-description") || k.marketingDescription;
+		return this.getAttribute("marketing-description") || A.marketingDescription;
 	}
 	set marketingDescription(e) {
 		this.setAttribute("marketing-description", String(e ?? ""));
@@ -1011,22 +1025,22 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		this._rendered && this.render();
 	}
 	render() {
-		let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${ce(this.policyHref)}">${j(this.policyLabel)}</a>` : "", r = this._root();
-		r.innerHTML = `${r === this ? "" : `<style>${ne}</style>`}
+		let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${fe(this.policyHref)}">${de(this.policyLabel)}</a>` : "", r = this._root();
+		r.innerHTML = `${r === this ? "" : `<style>${ie}</style>`}
       <div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden>
-        <h2 class="wui-consent-banner-heading" id="${t}-heading">${j(this.heading)}</h2>
-        <p class="wui-consent-banner-description" id="${t}-description">${j(this.description)}${n}</p>
+        <h2 class="wui-consent-banner-heading" id="${t}-heading">${de(this.heading)}</h2>
+        <p class="wui-consent-banner-description" id="${t}-description">${de(this.description)}${n}</p>
         <div class="wui-consent-banner-settings" hidden>
-          ${A(t, "essential", k.essentialLabel, k.essentialDescription, !0)}
-          ${A(t, "analytics", k.analyticsLabel, this.analyticsDescription, !1)}
-          ${A(t, "functional", k.functionalLabel, this.functionalDescription, !1)}
-          ${A(t, "marketing", k.marketingLabel, this.marketingDescription, !1)}
+          ${ue(t, "essential", A.essentialLabel, A.essentialDescription, !0)}
+          ${ue(t, "analytics", A.analyticsLabel, this.analyticsDescription, !1)}
+          ${ue(t, "functional", A.functionalLabel, this.functionalDescription, !1)}
+          ${ue(t, "marketing", A.marketingLabel, this.marketingDescription, !1)}
         </div>
         <div class="wui-consent-banner-actions">
-          <button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${k.settingsLabel}</button>
-          <button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${k.rejectLabel}</button>
-          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${k.acceptLabel}</button>
-          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${k.saveLabel}</button>
+          <button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${A.settingsLabel}</button>
+          <button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${A.rejectLabel}</button>
+          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${A.acceptLabel}</button>
+          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${A.saveLabel}</button>
         </div>
       </div>`, this._rendered = !0, this._wire(), this._applyPreferences(), this._showSettings(this._settings), e && (this._panel().hidden = !1);
 	}
@@ -1056,7 +1070,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		})), e.querySelector(".wui-consent-banner-save")?.addEventListener("click", () => this._save(this._switchValues())), e.querySelector(".wui-consent-banner-settings-toggle")?.addEventListener("click", () => this._showSettings(!this._settings));
 	}
 	_save(e) {
-		this._preferences = { ...e }, this.dispatchEvent(new CustomEvent(re, {
+		this._preferences = { ...e }, this.dispatchEvent(new CustomEvent(ae, {
 			bubbles: !0,
 			composed: !0,
 			detail: { ...e }
@@ -1064,11 +1078,11 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	}
 	_switchValues() {
 		let e = {};
-		for (let t of ae) e[t] = this._root().querySelector(`input[data-category="${t}"]`)?.checked === !0;
+		for (let t of se) e[t] = this._root().querySelector(`input[data-category="${t}"]`)?.checked === !0;
 		return e;
 	}
 	_applyPreferences() {
-		for (let e of ae) {
+		for (let e of se) {
 			let t = this._root().querySelector(`input[data-category="${e}"]`);
 			t && (t.checked = this._preferences[e]);
 		}
@@ -1086,17 +1100,221 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		}
 	}
 };
-function A(e, t, n, r, i) {
+function ue(e, t, n, r, i) {
 	let a = `${e}-${t}`;
 	return `<div class="wui-consent-banner-category">
             <div class="form-check form-switch">
               <input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i ? " checked disabled" : ""} />
-              <label class="form-check-label" for="${a}">${j(n)}</label>
+              <label class="form-check-label" for="${a}">${de(n)}</label>
             </div>
-            <p class="wui-consent-banner-category-description">${j(r)}</p>
+            <p class="wui-consent-banner-category-description">${de(r)}</p>
           </div>`;
 }
-var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ce = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), M = [
+var de = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), fe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), pe = "[role=\"menuitem\"]", me = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]", he = "data-open", ge = 500, _e = 10, ve = 400, j = null, ye = null, be = /* @__PURE__ */ new WeakMap();
+function xe(e, t, n) {
+	let r = be.get(e);
+	if (r) {
+		if (r.region === t || t.contains(r.region)) return !1;
+		r.cancel();
+	}
+	return be.set(e, {
+		region: t,
+		cancel: n
+	}), !0;
+}
+var M = (e) => e instanceof Element ? e : e?.parentElement ?? null, Se = class extends e {
+	static get observedAttributes() {
+		return ["disabled"];
+	}
+	constructor() {
+		super(), this._region = null, this._origin = null, this._returnFocus = null, this._press = null, this._swallowClick = !1, this._nav = v({
+			getVisibleOptions: () => this._items(),
+			getActive: () => this._items().indexOf(document.activeElement),
+			setActive: (e) => this._items()[e]?.focus({ preventScroll: !0 })
+		}), this._onContextMenu = (e) => this._handleContextMenu(e), this._onContextMenuCapture = (e) => {
+			this.isOpen && !this._inPanel(e.target) && !this._isKeyEcho() && this.close();
+		}, this._onDocKeyDown = (e) => this._handleDocKeyDown(e), this._onPointerDown = (e) => this._handlePointerDown(e), this._onPressMove = (e) => {
+			this._press && Math.hypot(e.clientX - this._press.x, e.clientY - this._press.y) > _e && this._cancelPress();
+		}, this._onPressEnd = () => this._cancelPress(), this._onClickCapture = (e) => {
+			!this._swallowClick || !this._region?.contains(e.target) || (this._swallowClick = !1, e.preventDefault(), e.stopImmediatePropagation());
+		}, this._onKeyDown = (e) => {
+			this._inPanel(e.target) && this._handleMenuKey(e);
+		}, this._onClick = (e) => this._handleClick(e), this._onMouseMove = (e) => {
+			let t = M(e.target)?.closest(pe);
+			t && this._inPanel(t) && !this._isDisabled(t) && t !== document.activeElement && t.focus({ preventScroll: !0 });
+		}, this._onDismiss = (e) => {
+			e.type === "scroll" && this._inPanel(e.target) || this.close();
+		}, this._onPointerDownCapture = (e) => {
+			this._swallowClick = !1, this.isOpen && !this._inPanel(e.target) && this.close();
+		};
+	}
+	connectedCallback() {
+		this._teardown(), document.addEventListener("contextmenu", this._onContextMenuCapture, !0), document.addEventListener("contextmenu", this._onContextMenu), document.addEventListener("keydown", this._onDocKeyDown), document.addEventListener("pointerdown", this._onPointerDownCapture, !0), document.addEventListener("pointerdown", this._onPointerDown), document.addEventListener("click", this._onClickCapture, !0), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("click", this._onClick), this.addEventListener("mousemove", this._onMouseMove);
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	attributeChangedCallback() {
+		this.disabled && this.close();
+	}
+	get target() {
+		return this.getAttribute("target");
+	}
+	set target(e) {
+		e == null || e === "" ? this.removeAttribute("target") : this.setAttribute("target", String(e));
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this.toggleAttribute("disabled", !!e);
+	}
+	get isOpen() {
+		return this._panel()?.hasAttribute(he) ?? !1;
+	}
+	open(e, t, { region: n = this, origin: r = n, keyboard: i = !1 } = {}) {
+		let a = this._panel();
+		if (a) {
+			if (j && j !== this && j.close(!0), !this.isOpen) {
+				let e = document.activeElement;
+				this._returnFocus = e && e !== document.body && !this._inPanel(e) ? e : null;
+			}
+			this._region = n, this._origin = r, ye = null, a.setAttribute(he, ""), j = this, c({ getBoundingClientRect: () => ({
+				left: e,
+				right: e,
+				top: t,
+				bottom: t,
+				width: 0,
+				height: 0
+			}) }, a, { clampHeight: !0 }), window.addEventListener("scroll", this._onDismiss, !0), window.addEventListener("resize", this._onDismiss), window.addEventListener("blur", this._onDismiss), ((i ? this._items()[0] : null) ?? a).focus({ preventScroll: !0 }), this.dispatchEvent(new CustomEvent("wui-context-menu:open", {
+				bubbles: !0,
+				detail: {
+					region: n,
+					origin: r,
+					x: e,
+					y: t
+				}
+			}));
+		}
+	}
+	close(e = !1) {
+		let t = this._panel();
+		if (!t?.hasAttribute(he)) return;
+		t.removeAttribute(he), j === this && (j = null), window.removeEventListener("scroll", this._onDismiss, !0), window.removeEventListener("resize", this._onDismiss), window.removeEventListener("blur", this._onDismiss), this._nav.teardown();
+		let n = this._returnFocus;
+		this._returnFocus = null, e && n?.isConnected && n.focus({ preventScroll: !0 });
+	}
+	_panel() {
+		return [...this.children].find((e) => e.getAttribute("role") === "menu") ?? null;
+	}
+	_inPanel(e) {
+		return !!e && !!this._panel()?.contains(e);
+	}
+	_items() {
+		return [...this._panel()?.querySelectorAll(pe) ?? []].filter((e) => !this._isDisabled(e));
+	}
+	_isDisabled(e) {
+		return e.getAttribute("aria-disabled") === "true";
+	}
+	_regionFor(e) {
+		let t = M(e);
+		if (!t || this.disabled || !this._panel() || this._inPanel(t) || t.closest(me)) return null;
+		let n = this.target;
+		return n ? t.closest(n) : this.contains(t) ? this : null;
+	}
+	_isKeyEcho() {
+		return ye?.menu === this && this.isOpen && performance.now() - ye.at < ve;
+	}
+	_handleContextMenu(e) {
+		if (this._inPanel(e.target)) {
+			e.preventDefault();
+			return;
+		}
+		if (e.defaultPrevented && !be.has(e)) return;
+		let t = this._regionFor(e.target);
+		if (t) {
+			if (this._isKeyEcho()) {
+				e.preventDefault();
+				return;
+			}
+			e.shiftKey || xe(e, t, () => this.close(!0)) && (e.preventDefault(), this.open(e.clientX, e.clientY, {
+				region: t,
+				origin: M(e.target)
+			}));
+		}
+	}
+	_handleDocKeyDown(e) {
+		if (e.defaultPrevented && !be.has(e) || !(e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) || this._inPanel(e.target)) return;
+		let t = this._regionFor(e.target);
+		if (!t || !xe(e, t, () => this.close(!0))) return;
+		e.preventDefault();
+		let n = M(e.target), r = n.getBoundingClientRect();
+		this.open(r.left + Math.min(16, r.width / 2), r.bottom, {
+			region: t,
+			origin: n,
+			keyboard: !0
+		}), ye = {
+			menu: this,
+			at: performance.now()
+		};
+	}
+	_handlePointerDown(e) {
+		if (e.pointerType !== "touch") return;
+		let t = this._regionFor(e.target);
+		if (!t || !xe(e, t, () => this._cancelPress())) return;
+		this._cancelPress();
+		let { clientX: n, clientY: r } = e, i = M(e.target);
+		this._press = {
+			x: n,
+			y: r,
+			timer: setTimeout(() => {
+				this._cancelPress(), this._swallowClick = !0, this.open(n, r, {
+					region: t,
+					origin: i
+				});
+			}, ge)
+		}, document.addEventListener("pointermove", this._onPressMove, { passive: !0 }), document.addEventListener("pointerup", this._onPressEnd), document.addEventListener("pointercancel", this._onPressEnd), window.addEventListener("scroll", this._onPressEnd, !0);
+	}
+	_cancelPress() {
+		this._press && (clearTimeout(this._press.timer), this._press = null, document.removeEventListener("pointermove", this._onPressMove), document.removeEventListener("pointerup", this._onPressEnd), document.removeEventListener("pointercancel", this._onPressEnd), window.removeEventListener("scroll", this._onPressEnd, !0));
+	}
+	_handleMenuKey(e) {
+		if (this.isOpen) if (e.key === "Escape") e.preventDefault(), e.stopPropagation(), this.close(!0);
+		else if (e.key === "Tab") this.close(!0);
+		else if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), this._step(e.key === "ArrowDown" ? 1 : -1);
+		else if (e.key === " ") {
+			let t = M(e.target)?.closest(pe);
+			e.preventDefault(), t && t.click();
+		} else this._nav.handler(e);
+	}
+	_step(e) {
+		let t = this._items();
+		if (!t.length) return;
+		let n = t.indexOf(document.activeElement);
+		t[n < 0 ? e > 0 ? 0 : t.length - 1 : (n + e + t.length) % t.length].focus({ preventScroll: !0 });
+	}
+	_handleClick(e) {
+		let t = M(e.target)?.closest(pe);
+		if (!(!t || !this._inPanel(t))) {
+			if (this._isDisabled(t)) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			this.close(!0), this.dispatchEvent(new CustomEvent("wui-context-menu:select", {
+				bubbles: !0,
+				detail: {
+					key: t.dataset.key ?? null,
+					item: t,
+					region: this._region,
+					origin: this._origin
+				}
+			}));
+		}
+	}
+	_teardown() {
+		this.close(), this._cancelPress(), document.removeEventListener("contextmenu", this._onContextMenuCapture, !0), document.removeEventListener("contextmenu", this._onContextMenu), document.removeEventListener("keydown", this._onDocKeyDown), document.removeEventListener("pointerdown", this._onPointerDownCapture, !0), document.removeEventListener("pointerdown", this._onPointerDown), document.removeEventListener("click", this._onClickCapture, !0), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("click", this._onClick), this.removeEventListener("mousemove", this._onMouseMove);
+	}
+}, Ce = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2322,11 +2540,11 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		"Zimbabwe",
 		"263"
 	]
-], N = (e) => (M.find((t) => t[0] === e) || [
+], N = (e) => (Ce.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], P = class extends e {
+])[2], we = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2385,7 +2603,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		return this._value;
 	}
 	set value(e) {
-		this._value = e == null ? "" : String(e), f(this, this._value), this._syncSelected(), this._syncReset();
+		this._value = e == null ? "" : String(e), m(this, this._value), this._syncSelected(), this._syncReset();
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
@@ -2400,7 +2618,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
 			icon: e.getAttribute("icon") || void 0,
-			[g]: !0,
+			[y]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -2410,27 +2628,27 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._snapshotDeclared();
 		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", c = this.getAttribute("search-placeholder") || "Search...", l = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
-		l && (this._value = String(l.value)), f(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
+		l && (this._value = String(l.value)), m(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
 		let u = `${this.id}-listbox`;
 		this._listboxId = u;
 		let d = e.map((e, t) => {
 			let n = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${F(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${F(e.value)}" aria-selected="${n}">${x(e)}</button>`;
+			return `<button type="button" role="option" id="${P(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${P(e.value)}" aria-selected="${n}">${C(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-controls="${F(u)}" aria-label="${F(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
-          ${a ? m(a, { className: "search-select-icon" }) : ""}
-          ${o ? `<span class="search-select-prefix">${_(o)}</span>` : ""}
-          <span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? x(l) : _(s)}</span>
-          ${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${m("x")}</span>` : ""}
-          ${m("chevron-down", { className: "search-select-caret" })}
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${P(u)}" aria-label="${P(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
+          ${a ? _(a, { className: "search-select-icon" }) : ""}
+          ${o ? `<span class="search-select-prefix">${b(o)}</span>` : ""}
+          <span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? C(l) : b(s)}</span>
+          ${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${_("x")}</span>` : ""}
+          ${_("chevron-down", { className: "search-select-caret" })}
         </button>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${F(u)}" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search">${m("search")}<input class="search-select-input" placeholder="${F(c)}" 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="${P(u)}" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${_("search")}<input class="search-select-input" placeholder="${P(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${_("x")}</button></div>` : ""}
           <div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
-      </div>`, this._rendered = !0, f(this, this._value), this._wire(), this._syncReset();
+      </div>`, this._rendered = !0, m(this, this._value), this._wire(), this._syncReset();
 	}
 	_refs() {
 		return {
@@ -2456,7 +2674,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			let t = e.dataset.value === String(this._value);
 			e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
 		}
-		e && (e.innerHTML = t ? x(t) : _(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
+		e && (e.innerHTML = t ? C(t) : b(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
 	}
 	_syncReset() {
 		let { reset: e } = this._refs();
@@ -2490,7 +2708,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		}, s = (t) => {
 			this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.control.focus();
 		};
-		this._navHandler = h({
+		this._navHandler = v({
 			getVisibleOptions: () => this._visible(),
 			getActive: () => this._active,
 			setActive: (e) => n(e),
@@ -2532,29 +2750,29 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, F = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), le = (e) => {
+}, P = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Te = (e) => {
 	if (e == null) return null;
 	let t = String(e).split(",").map((e) => e.trim().toUpperCase()).filter(Boolean);
 	return t.length ? new Set(t) : null;
-}, ue = (e) => {
-	let t = le(e);
-	return M.filter(([e]) => !t || t.has(e)).map(([e, t]) => ({
+}, Ee = (e) => {
+	let t = Te(e);
+	return Ce.filter(([e]) => !t || t.has(e)).map(([e, t]) => ({
 		value: e,
 		label: t,
 		flag: e
 	}));
-}, de = class extends P {
+}, De = class extends we {
 	static get observedAttributes() {
-		return [...P.observedAttributes, "countries"];
+		return [...we.observedAttributes, "countries"];
 	}
 	_readOptions() {
 		let e = this.getAttribute("countries");
 		return this._countryCache?.attr !== e && (this._countryCache = {
 			attr: e,
-			options: ue(e)
+			options: Ee(e)
 		}), this._countryCache.options;
 	}
-}, fe = [
+}, Oe = [
 	"January",
 	"February",
 	"March",
@@ -2567,7 +2785,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	"October",
 	"November",
 	"December"
-], I = [
+], ke = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -2575,24 +2793,24 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	"Th",
 	"Fr",
 	"Sa"
-], pe = (e) => String(e).padStart(2, "0"), L = (e, t, n) => `${e}-${pe(t + 1)}-${pe(n)}`, R = (e) => {
+], Ae = (e) => String(e).padStart(2, "0"), je = (e, t, n) => `${e}-${Ae(t + 1)}-${Ae(n)}`, F = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, 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) => {
+}, I = (e) => {
+	let t = F(e);
+	return t ? `${Ae(t.d)} ${Oe[t.m].slice(0, 3)} ${t.y}` : "";
+}, L = (e, t) => new Date(e, t + 1, 0).getDate(), R = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, me = class extends e {
+}, Me = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2644,7 +2862,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		return this._value;
 	}
 	set value(e) {
-		this._value = e || "", f(this, this._value), this._syncTrigger();
+		this._value = e || "", m(this, this._value), this._syncTrigger();
 	}
 	_firstDay() {
 		let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
@@ -2652,29 +2870,29 @@ 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 = R(this._value);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = F(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 ? z(this._value) : _(e)}</span>
-          ${m("calendar-dots")}
+        <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="${b(i)}"` : ""}${a ? ` aria-describedby="${b(a)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? I(this._value) : b(e)}</span>
+          ${_("calendar-dots")}
         </button>
         <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
-      </div>`, this._rendered = !0, f(this, this._value), this._wire();
+      </div>`, this._rendered = !0, m(this, this._value), this._wire();
 	}
 	_syncFormValue() {
-		f(this, this._value);
+		m(this, this._value);
 	}
 	_syncTrigger() {
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		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);
+		let n = F(this._value);
+		t.textContent = n ? I(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_limits() {
-		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;
+		let e = F(this.getAttribute("min")), t = F(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();
@@ -2682,7 +2900,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, B(e, t)).getTime() < n || i > r;
+				return new Date(e, t, L(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -2695,31 +2913,31 @@ 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 = B(this._viewY, this._viewM), r = R(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 = L(this._viewY, this._viewM), r = F(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 = 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);
+			let c = je(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 = V(this._viewY, this._viewM - 1), u = B(l.y, l.m);
+		}, c = "", l = R(this._viewY, this._viewM - 1), u = L(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 = V(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = R(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 = I.map((t, n) => I[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
+		let p = a(i.getFullYear(), i.getMonth(), i.getDate()), m = ke.map((t, n) => ke[(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">${fe[this._viewM]} ${this._viewY}</button>
-        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${m("chevron-right")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${_("chevron-left")}</button>
+        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${Oe[this._viewM]} ${this._viewY}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${_("chevron-right")}</button>
       </div>
-      <div class="datepicker-weekdays">${h}</div>
+      <div class="datepicker-weekdays">${m}</div>
       <div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${c}</div>
       <div class="datepicker-foot">
         <button type="button" class="datepicker-link" data-today${p ? " disabled" : ""}>Today</button>
@@ -2727,25 +2945,25 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
       </div>`;
 	}
 	_monthsHtml() {
-		let e = R(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
+		let e = F(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" : ""}>${fe[i].slice(0, 3)}</button>`;
+			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${Oe[i].slice(0, 3)}</button>`;
 		}
 		return `
       <div class="datepicker-head">
-        <button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year">${m("chevron-left")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year">${_("chevron-left")}</button>
         <button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
-        <button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year">${m("chevron-right")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year">${_("chevron-right")}</button>
       </div>
       <div class="datepicker-cells">${r}</div>`;
 	}
 	_yearsHtml() {
-		let e = R(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
+		let e = F(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",
@@ -2756,9 +2974,9 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		}
 		return `
       <div class="datepicker-head">
-        <button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade">${m("chevron-left")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade">${_("chevron-left")}</button>
         <span class="datepicker-month">${r + 1} to ${r + 10}</span>
-        <button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${m("chevron-right")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${_("chevron-right")}</button>
       </div>
       <div class="datepicker-cells">${i}</div>`;
 	}
@@ -2770,21 +2988,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 } = V(e, t);
+		let { y: i, m: a } = R(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="${L(i, a, n)}"]`)?.focus();
+		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${je(i, a, n)}"]`)?.focus();
 	}
 	_onKey(e) {
 		if (this._mode !== "days") {
 			e.key === "Escape" && this._close();
 			return;
 		}
-		let t = this._focus || R(this._value) || {
+		let t = this._focus || F(this._value) || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
@@ -2802,17 +3020,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 = 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");
+				let n = R(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, L(n.y, n.m)), "slide-prev");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				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");
+				let n = R(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, L(n.y, n.m)), "slide-next");
 			}
 			case "Enter":
 			case " ":
-				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());
+				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = je(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 				return;
 			case "Escape": return this._close();
 			default:
@@ -2824,7 +3042,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 = R(this._value);
+			let r = /* @__PURE__ */ new Date(), i = F(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 : {
@@ -2839,7 +3057,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 = V(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = R(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -2879,7 +3097,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 = L(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				this.value = je(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
@@ -2907,7 +3125,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, he = class extends e {
+}, Ne = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2975,20 +3193,20 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			text: e,
 			empty: !0
 		} : {
-			text: `${z(this._start) || "Start"} to ${z(this._end) || "End"}`,
+			text: `${I(this._start) || "Start"} to ${I(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 = R(this._start);
+		let e = F(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 = `
       <div class="daterange">
-        <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${_(a)}"` : ""}${o ? ` aria-describedby="${_(o)}"` : ""}>
-          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${_(r)}</span>
-          ${m("calendar")}
+        <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${b(a)}"` : ""}${o ? ` aria-describedby="${b(o)}"` : ""}>
+          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${b(r)}</span>
+          ${_("calendar")}
         </button>
         <div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
       </div>`, this._rendered = !0, this._syncMirrors(), this._wire();
@@ -3015,24 +3233,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 = 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;
+		let e = F(this.getAttribute("min")), t = F(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 = 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);
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = L(e, t), a = this._limits(), o = ke.map((e, t) => ke[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = je(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 = V(e, t - 1), u = B(l.y, l.m);
+		}, c = "", l = R(e, t - 1), u = L(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 = V(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = R(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">${fe[t]} ${e}</div>
+        <div class="datepicker-month-label">${Oe[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -3040,11 +3258,11 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = V(this._viewY, this._viewM + 1);
+		let t = R(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>
-        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${m("chevron-right")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${_("chevron-left")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${_("chevron-right")}</button>
       </div>
       <div class="daterange-cals">
         ${this._monthHtml(this._viewY, this._viewM)}
@@ -3066,7 +3284,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 ? `${z(this._start)} to ${z(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${I(this._start)} to ${I(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		c(e, t, { clampHeight: !0 });
@@ -3088,7 +3306,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 = R(this._start);
+			let r = F(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -3101,7 +3319,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 = V(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = R(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -3131,7 +3349,7 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ge = class extends e {
+}, Pe = class extends e {
 	static get observedAttributes() {
 		return [
 			"static",
@@ -3152,10 +3370,10 @@ var j = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		e === "static" && this.isConnected && this._wire();
 	}
 	_maxScale() {
-		return _e(this.getAttribute("max-scale"), 1.6);
+		return Fe(this.getAttribute("max-scale"), 1.6);
 	}
 	_radius() {
-		return _e(this.getAttribute("radius"), 100);
+		return Fe(this.getAttribute("radius"), 100);
 	}
 	_magnifyEnabled() {
 		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
@@ -3180,26 +3398,352 @@ 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();
 	}
-}, _e = (e, t) => {
+}, Fe = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, ve = {
+}, Ie = 4096, Le = [
+	.92,
+	.8,
+	.65,
+	.5
+], Re = .8, ze = 8;
+function Be(e) {
+	if (e == null || e === "" || e === "free") return null;
+	let t = typeof e == "number" ? e : Number(e);
+	return Number.isFinite(t) && t > 0 ? t : null;
+}
+function Ve(e, t, n) {
+	if (!n) return {
+		x: 0,
+		y: 0,
+		w: e,
+		h: t
+	};
+	let r = e, i = r / n;
+	return i > t && (i = t, r = i * n), {
+		x: (e - r) / 2,
+		y: (t - i) / 2,
+		w: r,
+		h: i
+	};
+}
+function He(e, t, n) {
+	return {
+		...e,
+		x: Math.min(Math.max(e.x, 0), Math.max(t - e.w, 0)),
+		y: Math.min(Math.max(e.y, 0), Math.max(n - e.h, 0))
+	};
+}
+function Ue(e, t, n, r, i) {
+	return He({
+		...e,
+		x: e.x + t,
+		y: e.y + n
+	}, r, i);
+}
+function We(e, t) {
+	return Math.min(32, e, t);
+}
+function Ge(e, t) {
+	return t.w / e.w;
+}
+function Ke(e, t) {
+	return Math.max(4, Ge(e, t));
+}
+function qe(e, t, n, r, i) {
+	let a = Math.min(Math.max(n, 1), Ke(e, t)), o = e.h / e.w, s = Math.min(r, i / o), c = Math.min(Math.max(We(r, i), We(r, i) / o), s), l = Math.min(Math.max(t.w / a, c), s), u = l * o, d = e.x + e.w / 2, f = e.y + e.h / 2;
+	return He({
+		x: d - l / 2,
+		y: f - u / 2,
+		w: l,
+		h: u
+	}, r, i);
+}
+var Je = [
+	"nw",
+	"ne",
+	"sw",
+	"se"
+];
+function Ye(e, t, n, r, i, a) {
+	let o = We(i, a), s = t.endsWith("w"), c = t.startsWith("n"), l = s ? e.x + e.w : e.x, u = c ? e.y + e.h : e.y, d = Math.min(Math.max(n, 0), i), f = Math.min(Math.max(r, 0), a);
+	return d = s ? Math.min(d, l - o) : Math.max(d, l + o), f = c ? Math.min(f, u - o) : Math.max(f, u + o), {
+		x: Math.min(d, l),
+		y: Math.min(f, u),
+		w: Math.abs(d - l),
+		h: Math.abs(f - u)
+	};
+}
+function Xe(e, t = Ie) {
+	let n = Math.min(1, t / Math.max(e.w, e.h));
+	return {
+		width: Math.max(1, Math.round(e.w * n)),
+		height: Math.max(1, Math.round(e.h * n))
+	};
+}
+var Ze = [
+	"image/png",
+	"image/jpeg",
+	"image/webp"
+], Qe = {
+	"image/png": ".png",
+	"image/jpeg": ".jpg",
+	"image/webp": ".webp"
+};
+function $e(e) {
+	let t = String(e || "").toLowerCase();
+	return Ze.includes(t) ? t : "image/png";
+}
+function et(e, t) {
+	let n = String(e || "image"), r = Qe[t];
+	return (t === "image/jpeg" ? /\.jpe?g$/i.test(n) : n.toLowerCase().endsWith(r)) ? n : `${n.replace(/\.[^./\\]+$/, "") || "image"}${r}`;
+}
+async function tt(e, { width: t, height: n, type: r, maxBytes: i }) {
+	let a = r, o = t, s = n, c = null;
+	for (let t = 0; t <= ze; t++) {
+		let n = a === "image/png" ? [void 0] : t === 0 ? Le : [Le[1]];
+		for (let t of n) {
+			if (c = await e(o, s, a, t), !c || (c.type && c.type !== a && (a = c.type), !(i > 0) || c.size <= i)) return c;
+			if (a === "image/png") break;
+		}
+		o = Math.max(1, Math.round(o * Re)), s = Math.max(1, Math.round(s * Re));
+	}
+	return c;
+}
+//#endregion
+//#region src/WuiImageCrop.js
+var nt = .05, rt = .2, it = {
+	w: 320,
+	h: 240
+}, at = {
+	nw: "top left",
+	ne: "top right",
+	sw: "bottom left",
+	se: "bottom right"
+}, ot = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"/></svg>", st = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5v14\"/></svg>", ct = class extends e {
+	static get observedAttributes() {
+		return [
+			"src",
+			"aspect",
+			"round"
+		];
+	}
+	constructor() {
+		super(), this._rect = null, this._base = null, this._natural = null, this._drag = null, this._resizeObserver = null;
+	}
+	get src() {
+		return this.getAttribute("src") || "";
+	}
+	set src(e) {
+		e == null || e === "" ? this.removeAttribute("src") : this.setAttribute("src", String(e));
+	}
+	get aspect() {
+		return Be(this.getAttribute("aspect"));
+	}
+	set aspect(e) {
+		e == null || e === "" ? this.removeAttribute("aspect") : this.setAttribute("aspect", String(e));
+	}
+	get round() {
+		return this.hasAttribute("round");
+	}
+	set round(e) {
+		this.toggleAttribute("round", !!e);
+	}
+	get rect() {
+		return this._rect ? { ...this._rect } : null;
+	}
+	get zoom() {
+		return this._rect ? Ge(this._rect, this._base) : 1;
+	}
+	set zoom(e) {
+		this._rect && (this._rect = qe(this._rect, this._base, Number(e) || 1, this._natural.w, this._natural.h), this._paint(), this._announce());
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._observe();
+	}
+	disconnectedCallback() {
+		this._resizeObserver?.disconnect(), this._resizeObserver = null;
+	}
+	attributeChangedCallback(e) {
+		this._rendered && (e === "src" ? this._loadImage() : e === "aspect" ? (this._rebuildHandles(), this._resetRect()) : this._frame.classList.toggle("wui-crop-frame--round", this.round));
+	}
+	render() {
+		this.innerHTML = `<div>
+        <div class="wui-crop-stage" tabindex="0" role="group" aria-label="Crop area. Drag the frame or use the arrow keys to move it, and plus or minus to zoom.">
+          <img class="wui-crop-img" alt="" draggable="false">
+          <div class="wui-crop-frame"></div>
+        </div>
+        <div class="wui-crop-controls">
+          <button type="button" class="wui-crop-zoombtn" data-zoom="out" aria-label="Zoom out">${ot}</button>
+          <input type="range" class="form-range wui-crop-zoom" min="1" max="4" step="0.01" value="1" aria-label="Zoom">
+          <button type="button" class="wui-crop-zoombtn" data-zoom="in" aria-label="Zoom in">${st}</button>
+        </div>
+        <div class="visually-hidden" data-wui-crop-live aria-live="polite"></div>
+      </div>`, this._stage = this.querySelector(".wui-crop-stage"), this._img = this.querySelector(".wui-crop-img"), this._frame = this.querySelector(".wui-crop-frame"), this._slider = this.querySelector(".wui-crop-zoom"), this._live = this.querySelector("[data-wui-crop-live]"), this._rendered = !0, this._frame.classList.toggle("wui-crop-frame--round", this.round), this._rebuildHandles(), this._wire(), this._observe(), this._loadImage();
+	}
+	_rebuildHandles() {
+		for (let e of this._frame.querySelectorAll(".wui-crop-handle")) e.remove();
+		if (!this.aspect) for (let e of Je) {
+			let t = document.createElement("button");
+			t.type = "button", t.className = `wui-crop-handle wui-crop-handle--${e}`, t.dataset.handle = e, t.setAttribute("aria-label", `Resize ${at[e]} corner`), this._frame.appendChild(t);
+		}
+	}
+	_loadImage() {
+		this._rect = null, this._natural = null, this._drag = null;
+		let e = this.src;
+		this._img.hidden = !e, this._frame.hidden = !0, e && (this._img.onload = () => {
+			this._natural = {
+				w: this._img.naturalWidth,
+				h: this._img.naturalHeight
+			}, this._resetRect(), this.dispatchEvent(new Event("load"));
+		}, this._img.onerror = () => {
+			this._frame.hidden = !0, this.dispatchEvent(new Event("error"));
+		}, this._img.src = e);
+	}
+	_resetRect() {
+		this._natural && (this._base = Ve(this._natural.w, this._natural.h, this.aspect), this._rect = { ...this._base }, this._frame.hidden = !1, this._paint());
+	}
+	_observe() {
+		typeof ResizeObserver > "u" || this._resizeObserver || (this._resizeObserver = new ResizeObserver(() => this._paint()), this._resizeObserver.observe(this._stage));
+	}
+	_view() {
+		let e = this._stage.clientWidth || it.w, t = this._stage.clientHeight || it.h, n = Math.min(e / this._natural.w, t / this._natural.h), r = this._natural.w * n, i = this._natural.h * n;
+		return {
+			scale: n,
+			left: (e - r) / 2,
+			top: (t - i) / 2,
+			iw: r,
+			ih: i
+		};
+	}
+	_paint() {
+		if (!this._rect) return;
+		let e = this._view();
+		Object.assign(this._img.style, {
+			left: `${e.left}px`,
+			top: `${e.top}px`,
+			width: `${e.iw}px`,
+			height: `${e.ih}px`
+		});
+		let t = this._rect;
+		Object.assign(this._frame.style, {
+			left: `${e.left + t.x * e.scale}px`,
+			top: `${e.top + t.y * e.scale}px`,
+			width: `${t.w * e.scale}px`,
+			height: `${t.h * e.scale}px`
+		});
+		let n = Ge(t, this._base), r = Ke(t, this._base);
+		this._slider.max = String(r), this._slider.value = String(Math.min(Math.max(n, 1), r)), this._slider.setAttribute("aria-valuetext", `${Math.round(n * 100)}%`);
+	}
+	_announce() {
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: !0,
+			detail: this.rect
+		}));
+	}
+	_say() {
+		let e = this._rect, t = `Frame ${Math.round(e.w)} by ${Math.round(e.h)} pixels, ${Math.round(e.x)} from the left, ${Math.round(e.y)} from the top, zoom ${Math.round(Ge(e, this._base) * 100)}%.`;
+		this._live.textContent = t === this._live.textContent ? `${t}\u00a0` : t;
+	}
+	_wire() {
+		let e = this._stage;
+		e.addEventListener("pointerdown", (t) => {
+			if (!this._rect || t.button > 0) return;
+			let n = t.target.closest?.(".wui-crop-handle");
+			this._drag = {
+				id: t.pointerId,
+				corner: n ? n.dataset.handle : null,
+				x: t.clientX,
+				y: t.clientY,
+				start: { ...this._rect }
+			}, e.setPointerCapture?.(t.pointerId), n || e.focus(), t.preventDefault();
+		}), e.addEventListener("pointermove", (t) => {
+			let n = this._drag;
+			if (!n || n.id !== t.pointerId) return;
+			let r = this._view(), { w: i, h: a } = this._natural;
+			if (n.corner) {
+				let o = e.getBoundingClientRect(), s = (t.clientX - o.left - e.clientLeft - r.left) / r.scale, c = (t.clientY - o.top - e.clientTop - r.top) / r.scale;
+				this._rect = Ye(this._rect, n.corner, s, c, i, a);
+			} else this._rect = Ue(n.start, (t.clientX - n.x) / r.scale, (t.clientY - n.y) / r.scale, i, a);
+			this._paint();
+		});
+		let t = (t) => {
+			let n = this._drag;
+			!n || n.id !== t.pointerId || (this._drag = null, e.releasePointerCapture?.(t.pointerId), this._announce());
+		};
+		e.addEventListener("pointerup", t), e.addEventListener("pointercancel", t), e.addEventListener("keydown", (e) => this._onKey(e)), e.addEventListener("wheel", (t) => {
+			!this._rect || document.activeElement !== e || (t.preventDefault(), this.zoom *= t.deltaY < 0 ? 1.1 : 1 / 1.1);
+		}, { passive: !1 });
+		for (let e of ["input", "change"]) this._slider.addEventListener(e, (e) => e.stopPropagation());
+		this._slider.addEventListener("input", () => {
+			this.zoom = Number(this._slider.value);
+		});
+		for (let e of this.querySelectorAll(".wui-crop-zoombtn")) e.addEventListener("click", () => {
+			this.zoom *= e.dataset.zoom === "in" ? 1.25 : .8;
+		});
+	}
+	_onKey(e) {
+		if (!this._rect || e.altKey || e.ctrlKey || e.metaKey) return;
+		let { w: t, h: n } = this._natural;
+		if (e.key === "+" || e.key === "=") this.zoom *= 1.25, this._say();
+		else if (e.key === "-" || e.key === "_") this.zoom *= .8, this._say();
+		else if (e.key.startsWith("Arrow")) {
+			let r = e.shiftKey ? rt : nt, i = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0, a = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0, o = e.target.closest?.(".wui-crop-handle")?.dataset.handle;
+			if (o) {
+				let e = this._rect, s = (o.endsWith("w") ? e.x : e.x + e.w) + i * r * e.w, c = (o.startsWith("n") ? e.y : e.y + e.h) + a * r * e.h;
+				this._rect = Ye(e, o, s, c, t, n);
+			} else this._rect = Ue(this._rect, i * r * this._rect.w, a * r * this._rect.h, t, n);
+			this._paint(), this._announce(), this._say();
+		} else return;
+		e.preventDefault();
+	}
+	async toBlob({ type: e, maxBytes: t = 0 } = {}) {
+		if (!this._rect) return null;
+		let n = $e(e), r = He(this._rect, this._natural.w, this._natural.h), { width: i, height: a } = Xe(r);
+		return tt((e, t, n, i) => new Promise((a) => {
+			let o = document.createElement("canvas");
+			o.width = e, o.height = t;
+			let s = o.getContext("2d");
+			if (!s) {
+				a(null);
+				return;
+			}
+			n === "image/jpeg" && (s.fillStyle = "#fff", s.fillRect(0, 0, e, t)), s.drawImage(this._img, r.x, r.y, r.w, r.h, 0, 0, e, t), o.toBlob(a, n, i);
+		}), {
+			width: i,
+			height: a,
+			type: n,
+			maxBytes: t
+		});
+	}
+	async toFile({ name: e, type: t, maxBytes: n = 0 } = {}) {
+		let r = await this.toBlob({
+			type: t,
+			maxBytes: n
+		});
+		return r ? new File([r], et(e, r.type), { type: r.type }) : null;
+	}
+}, lt = {
 	enter: "Enter",
 	comma: ",",
 	space: " ",
 	tab: "Tab"
-}, ye = {
+}, ut = {
 	enter: "\n",
 	comma: ",",
 	space: " ",
 	tab: "	"
-}, be = (e) => ve[e], xe = (e) => ye[e];
-function Se(e, t) {
+}, dt = (e) => lt[e], ft = (e) => ut[e];
+function pt(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 Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extends e {
+var mt = (e, t) => t.some((t) => String(e ?? "").includes(t)), ht = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -3263,7 +3807,7 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 		return this._values.slice();
 	}
 	set values(e) {
-		this._values = Array.isArray(e) ? e.map(String) : [], f(this, this._values.join(",")), this._rendered && (this._renderControl(), this._renderOptions(this._query()));
+		this._values = Array.isArray(e) ? e.map(String) : [], h(this, this._values), this._rendered && (this._renderControl(), this._renderOptions(this._query()));
 	}
 	set options(e) {
 		if (this._optionsProp = Array.isArray(e) ? e : null, this._rendered && this._allowCustom) {
@@ -3296,10 +3840,10 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 				value: e.getAttribute("value") ?? e.textContent.trim(),
 				label: e.innerHTML,
 				icon: e.getAttribute("icon") || void 0,
-				[g]: !0,
+				[y]: !0,
 				selected: e.hasAttribute("selected")
 			};
-			for (let [n, r] of Ee) {
+			for (let [n, r] of _t) {
 				let i = e.getAttribute(n);
 				i && (t[r] = i);
 			}
@@ -3315,12 +3859,12 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 	}
 	_labelHtmlFor(e) {
 		let t = this._readOptions().find((t) => String(t.value) === String(e));
-		return t ? x(t) : _(e);
+		return t ? C(t) : b(e);
 	}
 	render() {
 		this._snapshotDeclared();
 		let e = this._allowCustom, t = this.hasAttribute("searchable") && !e, n = this.getAttribute("search-placeholder") || "Search…", r = this.getAttribute("icon"), i = this.getAttribute("size"), a = i === "sm" ? " search-select-sm" : i === "lg" ? " search-select-lg" : "";
-		f(this, this._values.join(",")), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
+		h(this, this._values), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
 		let o = `${this.id}-listbox`;
 		this._listboxId = o;
 		let s = this.hasAttribute("disabled");
@@ -3329,41 +3873,41 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 			this.innerHTML = `
       <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="${H(o)}" aria-label="${H(this._accessibleName())}" aria-describedby="${H(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
-          ${m("chevron-down", { className: "search-select-caret" })}
+          ${r ? _(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="${z(o)}" aria-label="${z(this._accessibleName())}" aria-describedby="${z(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
+          ${_("chevron-down", { className: "search-select-caret" })}
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${H(o)}" aria-multiselectable="true" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
           <div class="search-select-options"></div>
         </div>
       </div>
-      <div class="field-error wui-ms-custom-error" id="${H(e)}" aria-live="polite" hidden></div>`;
+      <div class="field-error wui-ms-custom-error" id="${z(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="${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="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+          ${r ? _(r, { className: "search-select-icon" }) : ""}
           <div class="ms-chips" data-chips></div>
-          ${m("chevron-down", { className: "search-select-caret" })}
+          ${_("chevron-down", { className: "search-select-caret" })}
         </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-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${_("search")}<input class="search-select-input" placeholder="${z(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${_("x")}</button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
       </div>`;
-		this._rendered = !0, this._customError = "", f(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
+		this._rendered = !0, this._customError = "", h(this, this._values), this._renderControl(), this._renderOptions(), this._wire();
 	}
 	_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="${H(e)}" aria-label="Remove ${H(Ne(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="${z(e)}" aria-label="Remove ${z(wt(this._labelFor(e)))}">${_("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();
 			return;
 		}
 		if (!this._values.length) {
-			e.innerHTML = `<span class="search-select-placeholder">${_(t)}</span>`;
+			e.innerHTML = `<span class="search-select-placeholder">${b(t)}</span>`;
 			return;
 		}
 		e.innerHTML = r, this._collapseChips();
@@ -3387,11 +3931,11 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 		i.textContent = `+${t.length - o}`;
 	}
 	_matches(e, t) {
-		return Ne(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
+		return wt(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 || Ne(e.label).trim().toLowerCase() === t);
+		return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || wt(e.label).trim().toLowerCase() === t);
 	}
 	_renderOptions(e) {
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
@@ -3400,9 +3944,9 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = 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 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>`;
+			return vt(e) ? xt(e, r, n) : `<button type="button" role="option" id="${z(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${C(e)}</span><span class="ms-check">${_("check")}</span></button>`;
 		});
-		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?.();
+		s && c.push(`<button type="button" role="option" id="${z(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${z(r)}" data-custom="true" aria-selected="false">Add “${b(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");
@@ -3415,7 +3959,7 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 	_customRefusal(e) {
 		let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
 		if (n) {
-			let r = Me(n);
+			let r = Ct(n);
 			if (r && !r.test(e)) return t;
 		}
 		let r = this._validateCustom;
@@ -3444,95 +3988,95 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 		this._teardown();
 		let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), i = this.querySelector(".search-select-options"), a = this._allowCustom, o = a ? this.querySelector("[data-input]") : null, s = o || e;
 		if (!e || !t) return;
-		let u = () => this.hasAttribute("disabled"), d = () => c(e, t, { matchWidth: !0 }), p = () => [...this.querySelectorAll(".search-select-option")], m = () => p().filter((e) => !e.hidden), g = (e) => {
-			let t = m();
+		let u = () => this.hasAttribute("disabled"), d = () => c(e, t, { matchWidth: !0 }), f = () => [...this.querySelectorAll(".search-select-option")], p = () => f().filter((e) => !e.hidden), m = (e) => {
+			let t = p();
 			this._active = e;
-			for (let e of p()) e.classList.remove("is-active");
+			for (let e of f()) e.classList.remove("is-active");
 			e >= 0 && t[e] ? (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }), s.setAttribute("aria-activedescendant", t[e].id)) : s.removeAttribute("aria-activedescendant");
-		}, _ = !1, v = () => a ? _ : !t.hidden, y = () => {
-			let n = _ && p().length > 0, r = t.hidden;
+		}, g = !1, _ = () => a ? g : !t.hidden, y = () => {
+			let n = g && f().length > 0, r = t.hidden;
 			t.hidden = !n, s.setAttribute("aria-expanded", String(n)), e.classList.toggle("open", n), n && r && d();
 		};
 		this._syncCustomMenu = a ? y : null;
 		let b = () => {
 			if (!u()) {
 				if (a) {
-					_ = !0, y();
+					g = !0, y();
 					return;
 				}
 				t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), d(), n && (n.value = "", this._renderOptions(""), n.focus());
 			}
 		}, x = () => {
-			a ? (_ = !1, y()) : (t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open")), g(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
+			a ? (g = !1, y()) : (t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open")), m(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
 		}, S = () => {
-			f(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-		}, C = (e) => {
+			h(this, this._values), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}, ee = (e) => {
 			let t = String(e);
 			if (this._values.includes(t)) this._values = this._values.filter((e) => e !== t);
 			else if (a && this._values.some((e) => e.toLowerCase() === t.toLowerCase())) return;
 			else this._values = [...this._values, t];
 			this._renderControl(), this._renderOptions(this._query()), S();
-		}, w = (e) => {
+		}, C = (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 = Ce(e, Te) ? Se(e, Te) : [e], i = [], a = "";
+		}, w = (e, { quiet: t = !1 } = {}) => {
+			let n = this._values.length, r = mt(e, gt) ? pt(e, gt) : [e], i = [], a = "";
 			for (let e of r) {
 				let t = this._commitTyped(e);
 				t && (i.push(e.trim()), a ||= t);
 			}
 			t && i.length || (o.value = i.join(", "), this._setCustomError(a), this._values.length !== n && (this._renderControl(), S()), this._renderOptions(o.value));
-		}, E = (e) => {
+		}, T = (e) => {
 			if (!(!e || e.getAttribute("aria-disabled") === "true")) {
 				if (e.dataset.custom === "true") {
-					T(e.dataset.value);
+					w(e.dataset.value);
 					return;
 				}
-				C(e.dataset.value), o?.value && (o.value = "", this._setCustomError(""), this._renderOptions(""));
+				ee(e.dataset.value), o?.value && (o.value = "", this._setCustomError(""), this._renderOptions(""));
 			}
 		};
 		e.addEventListener("click", (e) => {
 			if (u()) return;
 			let t = e.target.closest("[data-remove]");
 			if (t) {
-				e.stopPropagation(), w(t.dataset.remove), o?.focus();
+				e.stopPropagation(), C(t.dataset.remove), o?.focus();
 				return;
 			}
 			if (o) {
-				let t = v();
+				let t = _();
 				e.target !== o && o.focus(), e.target === o || !t ? b() : x();
 				return;
 			}
-			v() ? x() : b();
+			_() ? x() : b();
 		}), i.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && (E(t), (o || n)?.focus());
+			t && (T(t), (o || n)?.focus());
 		}), i.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && g(m().indexOf(t));
-		}), i.addEventListener("mouseleave", () => g(-1)), i.addEventListener("error", (e) => {
+			t && m(p().indexOf(t));
+		}), i.addEventListener("mouseleave", () => m(-1)), i.addEventListener("error", (e) => {
 			e.target?.classList?.contains("avatar-img") && e.target.remove();
 		}, !0), n?.addEventListener("input", () => {
-			this._renderOptions(n.value), r && (r.hidden = !n.value), g(-1);
-		}), this._navHandler = h({
-			getVisibleOptions: m,
+			this._renderOptions(n.value), r && (r.hidden = !n.value), m(-1);
+		}), this._navHandler = v({
+			getVisibleOptions: p,
 			getActive: () => this._active,
-			setActive: (e) => g(e),
+			setActive: (e) => m(e),
 			onEnter: (e) => {
-				e ? E(e) : o?.value.trim() && T(o.value);
+				e ? T(e) : o?.value.trim() && w(o.value);
 			},
 			onEscape: () => {
 				this._navHandler.clearTypeahead(), x(), o || e.focus();
 			}
 		});
-		let D = (e) => {
+		let E = (e) => {
 			let t = o || n;
 			if (e.key === "Backspace" && !t?.value && this._values.length) {
-				w(this._values[this._values.length - 1]);
+				C(this._values[this._values.length - 1]);
 				return;
 			}
 			this._navHandler.handler(e);
 		};
-		if (n?.addEventListener("keydown", D), r?.addEventListener("click", () => {
+		if (n?.addEventListener("keydown", E), r?.addEventListener("click", () => {
 			n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
 		}), o) {
 			let t = (e) => {
@@ -3542,7 +4086,7 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 				this._customError && this._setCustomError(""), this._renderOptions(o.value), b();
 			}), o.addEventListener("keydown", (e) => {
 				if (e.key === "," && o.value.trim()) {
-					e.preventDefault(), T(o.value);
+					e.preventDefault(), w(o.value);
 					return;
 				}
 				if (e.key === "Enter") {
@@ -3550,25 +4094,25 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 					this._navHandler.handler(e);
 					return;
 				}
-				(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), D(e);
+				(e.key === "ArrowDown" || e.key === "ArrowUp") && !_() && b(), E(e);
 			}), o.addEventListener("paste", (e) => {
 				let t = e.clipboardData?.getData("text/plain") ?? "";
-				Ce(t, Te) && (e.preventDefault(), T(`${o.value}${t}`));
+				mt(t, gt) && (e.preventDefault(), w(`${o.value}${t}`));
 			}), o.addEventListener("blur", (e) => {
-				e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && T(o.value, { quiet: !0 }), x());
+				e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && w(o.value, { quiet: !0 }), x());
 			});
 		} else e.addEventListener("keydown", (e) => {
-			if (v()) {
-				D(e);
+			if (_()) {
+				E(e);
 				return;
 			}
 			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
 		});
 		this._bindGlobal = () => {
 			this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
-				v() && !this.contains(e.target) && x();
+				_() && !this.contains(e.target) && x();
 			}, document.addEventListener("click", this._onDocClick), l(this, () => {
-				v() && d();
+				_() && d();
 			});
 		}, this._bindGlobal();
 	}
@@ -3578,35 +4122,35 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, Te = [
+}, gt = [
 	",",
 	";",
 	"\n",
 	"	"
-], Ee = [
+], _t = [
 	["description", "description"],
 	["avatar", "avatar"],
 	["initials", "initials"],
 	["disabled-hint", "disabledHint"]
-], De = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Oe = (e) => {
+], vt = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), yt = (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 : "";
-}, 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="${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);
+}, bt = (e) => {
+	let t = yt(e.avatar);
+	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${b(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${z(t)}" alt="" />` : ""}</span>`;
+}, xt = (e, t, n) => {
+	let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${b(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${b(e.disabledHint)}</span>` : "";
+	return `<button type="button" role="option" id="${z(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${C(e)}</span>${i}</span>${a}${bt(e)}<span class="ms-check">${_("check")}</span></button>`;
+}, St = /* @__PURE__ */ new Map(), Ct = (e) => {
+	if (St.has(e)) return St.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 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 {
+	return St.set(e, t), t;
+}, z = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), wt = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Tt = /[^0-9]/g, Et = /[^0-9a-zA-Z]/g, Dt = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3634,10 +4178,10 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 		return this._value ?? "";
 	}
 	set value(e) {
-		this._value = this._clean(e), f(this, this._value), this._paint();
+		this._value = this._clean(e), m(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Fe : Pe, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Et : Tt, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -3651,10 +4195,10 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 		this._rendered ? this._onSelectionChange && document.addEventListener("selectionchange", this._onSelectionChange) : (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
 	}
 	formResetCallback() {
-		this._value = this._defaultValue || "", f(this, this._value), this._paint();
+		this._value = this._defaultValue || "", m(this, this._value), this._paint();
 	}
 	attributeChangedCallback(e, t, n) {
-		this._rendered && (e === "value" ? (this._value = this._clean(n), f(this, this._value), this._paint()) : this.render());
+		this._rendered && (e === "value" ? (this._value = this._clean(n), m(this, this._value), this._paint()) : this.render());
 	}
 	render() {
 		this._value = this._clean(this.getAttribute("value") ?? this._value);
@@ -3672,7 +4216,7 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
           spellcheck="false"
           ${n ? "disabled" : ""} />
         <div class="otp-slots" aria-hidden="true">${r}</div>
-      </div>`, this._rendered = !0, f(this, this._value), this._wire(), this._paint();
+      </div>`, this._rendered = !0, m(this, this._value), this._wire(), this._paint();
 	}
 	_refs() {
 		return {
@@ -3694,7 +4238,7 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 		if (!e) return;
 		let t = (e) => {
 			let t = this._clean(e), n = t !== this._value;
-			this._value = t, f(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
+			this._value = t, m(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
 				bubbles: !0,
 				detail: t
 			}));
@@ -3728,7 +4272,7 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, Le = {
+}, Ot = {
 	AD: ["Europe/Andorra"],
 	AE: ["Asia/Dubai"],
 	AF: ["Asia/Kabul"],
@@ -4130,13 +4674,13 @@ var Ce = (e, t) => t.some((t) => String(e ?? "").includes(t)), we = class extend
 	ZA: ["Africa/Johannesburg"],
 	ZM: ["Africa/Lusaka"],
 	ZW: ["Africa/Harare"]
-}, 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;
+}, kt = new Set(Ce.map(([e]) => e)), At = /* @__PURE__ */ new Map();
+for (let [e, t] of Object.entries(Ot)) for (let n of t) At.set(n, e);
+function jt(e) {
+	let t = At.get(e);
+	return t && kt.has(t) ? t : null;
 }
-function Ve(e) {
+function Mt(e) {
 	if (!e) return null;
 	let t;
 	try {
@@ -4144,9 +4688,9 @@ function Ve(e) {
 	} catch {
 		return null;
 	}
-	return t && Re.has(t) ? t : null;
+	return t && kt.has(t) ? t : null;
 }
-function He() {
+function Nt() {
 	let e;
 	try {
 		e = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -4154,77 +4698,77 @@ function He() {
 		e = void 0;
 	}
 	let t = typeof navigator > "u" ? void 0 : navigator.language;
-	return Be(e) || Ve(t) || "IN";
+	return jt(e) || Mt(t) || "IN";
 }
 //#endregion
 //#region src/WuiPhone.js
-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 = {
+var Pt = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, B = null, Ft = null;
+function It() {
+	return B ? Promise.resolve(B) : (Ft ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (B = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		parsePhoneNumber: e.parsePhoneNumber,
 		examples: t.default || t
-	}, U)).catch(() => null), We);
+	}, B)).catch(() => null), Ft);
 }
-function Ke(e, t) {
+function Lt(e, t) {
 	let n = `+${N(e)}`;
 	return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
 }
-function W(e, t) {
-	if (!U || !t) return t;
+function Rt(e, t) {
+	if (!B || !t) return t;
 	try {
-		return Ke(e, new U.AsYouType(e).input(`+${N(e)}${t}`)) || t;
+		return Lt(e, new B.AsYouType(e).input(`+${N(e)}${t}`)) || t;
 	} catch {
 		return t;
 	}
 }
-function qe(e, t) {
+function zt(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 G(e) {
-	if (!U) return null;
+function Bt(e) {
+	if (!B) return null;
 	try {
-		return Ke(e, U.getExampleNumber(e, U.examples)?.formatInternational()) || null;
+		return Lt(e, B.getExampleNumber(e, B.examples)?.formatInternational()) || null;
 	} catch {
 		return null;
 	}
 }
-function Je(e) {
-	if (!U || !e) return null;
+function Vt(e) {
+	if (!B || !e) return null;
 	try {
-		if (!U.isValidPhoneNumber(e)) return !1;
-		let t = U.parsePhoneNumber(e)?.getType?.();
+		if (!B.isValidPhoneNumber(e)) return !1;
+		let t = B.parsePhoneNumber(e)?.getType?.();
 		return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
 	} catch {
 		return null;
 	}
 }
-function Ye(e) {
-	if (!U) return null;
+function Ht(e) {
+	if (!B) return null;
 	try {
-		let t = U.getExampleNumber(e, U.examples);
+		let t = B.getExampleNumber(e, B.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function Xe(e, t, n) {
+function Ut(e, t, n) {
 	try {
-		let r = U.parsePhoneNumber(t, e), i = r?.nationalNumber;
+		let r = B.parsePhoneNumber(t, e), i = r?.nationalNumber;
 		return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
 	} catch {
 		return null;
 	}
 }
-function Ze(e) {
-	if (!U || !e?.trim().startsWith("+")) return null;
+function Wt(e) {
+	if (!B || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new U.AsYouType();
+		let t = new B.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -4235,7 +4779,7 @@ function Ze(e) {
 		return null;
 	}
 }
-var Qe = class extends e {
+var Gt = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4255,7 +4799,7 @@ var Qe = class extends e {
 		} catch {
 			this._internals = null;
 		}
-		this._defaultCountry = He(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
+		this._defaultCountry = Nt(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -4285,7 +4829,7 @@ var Qe = class extends e {
 		return this._national ? `+${N(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = Ze(t);
+		let t = String(e ?? "").trim(), n = Wt(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));
@@ -4294,7 +4838,7 @@ var Qe = class extends e {
 		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
 	}
 	_syncMirror() {
-		f(this, this.value);
+		m(this, this.value);
 	}
 	_emitInput() {
 		this.dispatchEvent(new Event("input", { bubbles: !0 }));
@@ -4304,27 +4848,27 @@ var Qe = 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") || G(this._country) || "Enter phone number";
+		let e = this.getAttribute("placeholder") || Bt(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="${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("");
+		let n = Ce.map(([e, n, r], i) => `<button type="button" role="option" id="${V(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Pt(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="${K(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${Ue(this._country)}" data-flag aria-hidden="true"></span>
-            ${m("chevron-down", { className: "phone-chevron" })}
+          <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${V(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="${Pt(this._country)}" data-flag aria-hidden="true"></span>
+            ${_("chevron-down", { className: "phone-chevron" })}
             <span class="phone-dial" data-dial>+${N(this._country)}</span>
           </button>
-          <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-dropdown-menu" role="listbox" id="${V(t)}" tabindex="-1" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${_("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${V(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="${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" : ""} />
+        <input type="tel" class="input" placeholder="${V(e)}" value="${V(Rt(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${V(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${V(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();
+      <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, m(this, this.value), this._wire();
 	}
 	_itemEls() {
 		return [...this.querySelectorAll(".country-dropdown-item")];
@@ -4353,12 +4897,12 @@ var Qe = 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 = Ue(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 = Pt(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 = G(e) || "Enter phone number"), o && this._national && (o.value = W(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
+			!this.getAttribute("placeholder") && o && (o.placeholder = Bt(e) || "Enter phone number"), o && this._national && (o.value = Rt(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
 		}, y = (t) => {
 			let n = this._visibleItems();
 			if (t.key === "ArrowDown") {
@@ -4392,7 +4936,7 @@ var Qe = 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 = G(this._country);
+					let e = Bt(this._country);
 					b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
 				b.hidden = !e;
@@ -4400,24 +4944,24 @@ var Qe = 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 = Ye(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 = Ht(this._country);
 			if (i && r.length > i) {
-				let e = Xe(this._country, r, i);
+				let e = Ut(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 = W(this._country, this._national);
+			let a = Rt(this._country, this._national);
 			if (o.value !== a) {
 				o.value = a;
-				let e = qe(a, Math.min(n, r.length));
+				let e = zt(a, Math.min(n, r.length));
 				o.setSelectionRange(e, e);
 			}
-			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Je(this.value) === !0) && x(!1);
+			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Vt(this.value) === !0) && x(!1);
 		}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
-			x(this._national.length > 0 && Je(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && Vt(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), o.addEventListener("paste", (e) => {
-			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());
+			let t = Wt(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = Rt(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();
@@ -4426,9 +4970,9 @@ var Qe = class extends e {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this);
-		}, 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);
+		}, this._bindGlobal(), It().then((e) => {
+			if (!(!e || !o.isConnected) && (this._national && (o.value = Rt(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = Bt(this._country);
 				e && (o.placeholder = e);
 			}
 		}), this._syncMirror();
@@ -4439,7 +4983,7 @@ var Qe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, K = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), $e = class extends e {
+}, V = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Kt = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4479,19 +5023,19 @@ var Qe = class extends e {
 		return this._value;
 	}
 	set value(e) {
-		this._value = this._snapToStep(this._clamp(q(e, this._value))), this._syncValue(), this._syncMirrors();
+		this._value = this._snapToStep(this._clamp(H(e, this._value))), this._syncValue(), this._syncMirrors();
 	}
 	get start() {
 		return this._start;
 	}
 	set start(e) {
-		this._start = Math.min(this._snapToStep(this._clamp(q(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
+		this._start = Math.min(this._snapToStep(this._clamp(H(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(q(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
+		this._end = Math.max(this._snapToStep(this._clamp(H(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") {
@@ -4504,19 +5048,19 @@ var Qe = class extends e {
 		this._isRange() ? this._resetRange() : this._resetSingle();
 	}
 	_updateFromAttribute(e) {
-		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))));
+		e === "value" ? this._value = this._snapToStep(this._clamp(H(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(H(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(H(this.getAttribute("end"), this._end))));
 	}
 	_isRange() {
 		return this.hasAttribute("range");
 	}
 	_min() {
-		return q(this.getAttribute("min"), 0);
+		return H(this.getAttribute("min"), 0);
 	}
 	_max() {
-		return q(this.getAttribute("max"), 100);
+		return H(this.getAttribute("max"), 100);
 	}
 	_step() {
-		return q(this.getAttribute("step"), 1);
+		return H(this.getAttribute("step"), 1);
 	}
 	_clamp(e) {
 		return Math.max(this._min(), Math.min(e, this._max()));
@@ -4584,7 +5128,7 @@ var Qe = class extends e {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${et(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${qt(this.getAttribute("aria-label") || "Value")}"
           ></button>
         `}
         ${this.hasAttribute("show-value") ? n ? `<span class="slider-value">${this._formatValue(this._start)} to ${this._formatValue(this._end)}</span>` : `<span class="slider-value">${this._formatValue(this._value)}</span>` : ""}
@@ -4619,7 +5163,7 @@ var Qe = class extends e {
 		this._isRange() ? this._syncRangeMirrors() : this._syncSingleMirror();
 	}
 	_syncSingleMirror() {
-		this.getAttribute("name") && f(this, String(this._value));
+		this.getAttribute("name") && m(this, String(this._value));
 	}
 	_syncRangeMirrors() {
 		let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
@@ -4686,10 +5230,287 @@ var Qe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, q = (e, t) => {
+}, H = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, et = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), tt = class extends e {
+}, qt = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Jt = /* @__PURE__ */ new Set(), Yt = ".wui-sortable-handle", Xt = "a[href],button,input,select,textarea,label,summary,[contenteditable='true'],[role='button'],[role='link']", Zt = 4, Qt = 8, $t = 250, U = 48, en = 18, tn = class extends e {
+	static get observedAttributes() {
+		return ["name", "disabled"];
+	}
+	constructor() {
+		super(), this._drag = null, this._kb = null, this._moving = !1, this.controlled = !1, this._observer = null, this._onPointerDown = this._onPointerDown.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onDragStart = (e) => e.preventDefault(), this._onDocMove = this._onDocMove.bind(this), this._onDocUp = this._onDocUp.bind(this), this._onDocCancel = this._onDocCancel.bind(this), this._onDocKey = this._onDocKey.bind(this), this._onDocTouchMove = (e) => {
+			this._drag?.started && e.preventDefault();
+		}, this._onSelectStart = (e) => e.preventDefault(), this._scrollTick = this._scrollTick.bind(this);
+	}
+	connectedCallback() {
+		Jt.add(this), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("focusout", this._onFocusOut), this.addEventListener("dragstart", this._onDragStart), this._observer = new MutationObserver(() => this._syncMirrors()), this._observer.observe(this, { childList: !0 }), this._syncMirrors();
+	}
+	disconnectedCallback() {
+		Jt.delete(this), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("dragstart", this._onDragStart), this._observer?.disconnect(), this._observer = null, this._abort();
+	}
+	attributeChangedCallback(e) {
+		e === "disabled" && this._abort(), this.isConnected && this._syncMirrors();
+	}
+	get order() {
+		return this._items().map((e) => e.getAttribute("data-id"));
+	}
+	set order(e) {
+		if (this._drag?.started || this._kb) return;
+		let t = this._items(), n = new Map(t.map((e) => [e.getAttribute("data-id"), e])), r = [];
+		for (let t of e ?? []) {
+			let e = n.get(String(t));
+			e && !r.includes(e) && r.push(e);
+		}
+		[...r, ...t.filter((e) => !r.includes(e))].forEach((e, t) => {
+			let n = this._items()[t];
+			n !== e && this.insertBefore(e, n);
+		}), this._syncMirrors();
+	}
+	_items() {
+		return [...this.querySelectorAll(":scope > [data-id]")];
+	}
+	_itemFrom(e) {
+		let t = e;
+		for (; t && t.parentElement !== this;) t = t.parentElement;
+		return t?.hasAttribute("data-id") ? t : null;
+	}
+	_itemDisabled(e) {
+		return e.hasAttribute("data-disabled");
+	}
+	_horizontal() {
+		return this.getAttribute("orientation") === "horizontal";
+	}
+	_syncMirrors() {
+		h(this, this.order);
+	}
+	_insertAt(e, t) {
+		let n = this._items();
+		if (n.indexOf(e) === t) return;
+		let r = n.filter((t) => t !== e), i = r[t] ?? null;
+		i ? this.insertBefore(e, i) : r.length > 0 ? r[r.length - 1].after(e) : this.appendChild(e);
+	}
+	_indexFor(e, t, n) {
+		let r = this._items().filter((t) => t !== e), i = this._horizontal();
+		for (let e = 0; e < r.length; e++) {
+			let a = r[e].getBoundingClientRect();
+			if (i ? n < a.top || n <= a.bottom && t < a.left + a.width / 2 : n < a.top + a.height / 2) return e;
+		}
+		return r.length;
+	}
+	_peers() {
+		let e = this.getAttribute("group");
+		return [...Jt].filter((t) => t === this || e && t.getAttribute("group") === e && !t.hasAttribute("disabled"));
+	}
+	_labelOf(e) {
+		return e.getAttribute("data-label") || e.textContent.replace(/\s+/g, " ").trim() || e.getAttribute("data-id");
+	}
+	_announce(e) {
+		let t = this.querySelector(":scope > .wui-sortable-live");
+		t || (t = document.createElement("div"), t.className = "wui-sortable-live", t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite"), t.setAttribute("aria-atomic", "true"), this.appendChild(t)), t.textContent = e;
+	}
+	_position(e) {
+		let t = this._items();
+		return `position ${t.indexOf(e) + 1} of ${t.length}`;
+	}
+	_onPointerDown(e) {
+		if (this._drag || this._kb || this.hasAttribute("disabled") || e.pointerType === "mouse" && e.button !== 0) return;
+		let t = this._itemFrom(e.target);
+		if (!t || this._itemDisabled(t)) return;
+		let n = t.querySelector(`:scope > ${Yt}`), r = !!n && n.contains(e.target);
+		if (this.hasAttribute("handle") && !r) return;
+		if (!r) {
+			let n = e.target.closest?.(Xt);
+			if (n && n !== t && t.contains(n)) return;
+		}
+		let i = e.pointerType === "touch" && !r, a = {
+			item: t,
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			x: e.clientX,
+			y: e.clientY,
+			slop: e.pointerType === "touch" ? Qt : Zt,
+			ready: !i,
+			started: !1,
+			timer: null,
+			raf: 0,
+			list: this,
+			ghost: null
+		};
+		this._drag = a, i && (a.timer = setTimeout(() => {
+			a.timer = null, a.ready = !0, this._begin();
+		}, $t)), document.addEventListener("pointermove", this._onDocMove), document.addEventListener("pointerup", this._onDocUp), document.addEventListener("pointercancel", this._onDocCancel), document.addEventListener("keydown", this._onDocKey, !0), document.addEventListener("touchmove", this._onDocTouchMove, { passive: !1 });
+	}
+	_onDocMove(e) {
+		let t = this._drag;
+		if (!(!t || e.pointerId !== t.pointerId)) {
+			if (t.x = e.clientX, t.y = e.clientY, !t.started) {
+				let e = Math.hypot(t.x - t.startX, t.y - t.startY);
+				if (!t.ready) {
+					e > t.slop && this._finish(!0);
+					return;
+				}
+				if (e < t.slop || (this._begin(), !this._drag?.started)) return;
+			}
+			e.preventDefault?.(), this._moveGhost(), this._update();
+		}
+	}
+	_onDocUp(e) {
+		this._drag && e.pointerId === this._drag.pointerId && this._finish(!1);
+	}
+	_onDocCancel(e) {
+		this._drag && e.pointerId === this._drag.pointerId && this._finish(!0);
+	}
+	_onDocKey(e) {
+		e.key !== "Escape" || !this._drag || (e.preventDefault(), e.stopPropagation(), this._finish(!0));
+	}
+	_begin() {
+		let e = this._drag;
+		if (!e || e.started) return;
+		e.started = !0;
+		let t = e.item.getBoundingClientRect();
+		e.offsetX = e.startX - t.left, e.offsetY = e.startY - t.top, e.fromIndex = this._items().indexOf(e.item);
+		let n = e.item.cloneNode(!0);
+		for (let e of [n, ...n.querySelectorAll("[id],[data-id]")]) e.removeAttribute("id"), e.removeAttribute("data-id");
+		n.classList.add("wui-sortable-ghost"), n.setAttribute("aria-hidden", "true"), n.inert = !0, n.style.width = `${t.width}px`, n.style.height = `${t.height}px`, e.ghost = n, e.item.classList.add("wui-sortable-dragging"), document.body.appendChild(n), document.documentElement.classList.add("wui-sortable-active"), document.addEventListener("selectstart", this._onSelectStart), this._moveGhost(), e.raf = requestAnimationFrame(this._scrollTick), this._emit(this, "wui-sortable:start", { id: e.item.getAttribute("data-id") });
+	}
+	_moveGhost() {
+		let e = this._drag;
+		e?.ghost && (e.ghost.style.transform = `translate(${e.x - e.offsetX}px, ${e.y - e.offsetY}px)`);
+	}
+	_update() {
+		let e = this._drag;
+		if (!e?.started) return;
+		let t = e.list;
+		for (let n of this._peers()) {
+			let r = n.getBoundingClientRect();
+			if (e.x >= r.left && e.x <= r.right && e.y >= r.top && e.y <= r.bottom) {
+				t = n;
+				break;
+			}
+		}
+		let n = t._indexFor(e.item, e.x, e.y);
+		(t !== e.list || n !== t._items().indexOf(e.item)) && t._insertAt(e.item, n), e.list = t;
+	}
+	_scrollTick() {
+		let e = this._drag;
+		if (!e?.started) return;
+		let t = rn(e.list), n = t ? t.getBoundingClientRect() : null, r = Math.max(n?.top ?? 0, 0), i = Math.min(n?.bottom ?? window.innerHeight, window.innerHeight), a = Math.max(n?.left ?? 0, 0), o = Math.min(n?.right ?? window.innerWidth, window.innerWidth), s = nn(e.y, r, i), c = nn(e.x, a, o);
+		(c || s) && (t ? (t.scrollTop += s, t.scrollLeft += c) : window.scrollBy(c, s), this._update()), e.raf = requestAnimationFrame(this._scrollTick);
+	}
+	_finish(e) {
+		let t = this._drag;
+		if (!t || (this._drag = null, clearTimeout(t.timer), cancelAnimationFrame(t.raf), document.removeEventListener("pointermove", this._onDocMove), document.removeEventListener("pointerup", this._onDocUp), document.removeEventListener("pointercancel", this._onDocCancel), document.removeEventListener("keydown", this._onDocKey, !0), document.removeEventListener("touchmove", this._onDocTouchMove), document.removeEventListener("selectstart", this._onSelectStart), !t.started)) return;
+		t.ghost?.remove(), document.documentElement.classList.remove("wui-sortable-active"), t.item.classList.remove("wui-sortable-dragging");
+		let n = t.item.getAttribute("data-id");
+		e ? (this._insertAt(t.item, t.fromIndex), this._syncMirrors(), t.list !== this && t.list._syncMirrors()) : this._settle(t.item, this, t.fromIndex, t.list), this._emit(this, "wui-sortable:end", {
+			id: n,
+			cancelled: e
+		});
+	}
+	_settle(e, t, n, r) {
+		let i = r._items().indexOf(e);
+		if (r === t && i === n) return;
+		let a = e.getAttribute("data-id"), o = r.order, s = r !== t, c = t.order;
+		s && (t.controlled || r.controlled) && t._insertAt(e, n), t._syncMirrors(), r._syncMirrors();
+		let l = r._labelOf(e), u = s && r.getAttribute("aria-label") ? ` to ${r.getAttribute("aria-label")}` : "", d = {
+			id: a,
+			fromIndex: n,
+			toIndex: i,
+			from: t,
+			to: r
+		};
+		s && this._emit(t, "wui-sortable:change", {
+			...d,
+			ids: c
+		}), this._emit(r, "wui-sortable:change", {
+			...d,
+			ids: o
+		}), r._announce(`${l} moved${u}, position ${i + 1} of ${o.length}.`);
+	}
+	_emit(e, t, n) {
+		e.dispatchEvent(new CustomEvent(t, {
+			bubbles: !0,
+			detail: n
+		}));
+	}
+	_abort() {
+		this._drag && this._finish(!0), this._kb && this._dropKeyboard(!0);
+	}
+	_onKeyDown(e) {
+		if (this.hasAttribute("disabled")) return;
+		let t = e.target.closest?.(Yt), n = t && t.parentElement?.parentElement === this ? t.parentElement : null;
+		if (!n || this._itemDisabled(n) || this._drag) return;
+		let r = e.key;
+		if (!this._kb) {
+			if (r !== " " && r !== "Enter") return;
+			e.preventDefault(), this._liftKeyboard(n, t);
+			return;
+		}
+		if (this._kb.item === n) {
+			if (r === " " || r === "Enter") e.preventDefault(), this._dropKeyboard(!1);
+			else if (r === "Escape") e.preventDefault(), e.stopPropagation(), this._dropKeyboard(!0);
+			else if ([
+				"ArrowUp",
+				"ArrowLeft",
+				"ArrowDown",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(r)) {
+				e.preventDefault();
+				let i = this._items(), a = i.indexOf(n), o = i.length - 1, s = r === "Home" ? 0 : r === "End" ? o : Math.max(0, Math.min(o, a + (r === "ArrowUp" || r === "ArrowLeft" ? -1 : 1)));
+				if (s === a) {
+					this._announce(`${this._labelOf(n)} is already ${a === 0 ? "first" : "last"}, ${this._position(n)}.`);
+					return;
+				}
+				this._moveFocused(() => this._insertAt(n, s), t), this._announce(`${this._labelOf(n)} moved to ${this._position(n)}.`);
+			}
+		}
+	}
+	_onFocusOut(e) {
+		!this._kb || this._moving || e.relatedTarget && this._kb.handle.contains(e.relatedTarget) || this._dropKeyboard(!1);
+	}
+	_liftKeyboard(e, t) {
+		this._kb = {
+			item: e,
+			handle: t,
+			fromIndex: this._items().indexOf(e)
+		}, t.setAttribute("aria-pressed", "true"), this._announce(`${this._labelOf(e)} lifted, ${this._position(e)}. Use the arrow keys to move it, Space to drop it, Escape to cancel.`);
+	}
+	_dropKeyboard(e) {
+		let t = this._kb;
+		if (t) {
+			if (this._kb = null, t.handle.removeAttribute("aria-pressed"), e) {
+				this._moveFocused(() => this._insertAt(t.item, t.fromIndex), t.handle), this._announce(`Reorder cancelled. ${this._labelOf(t.item)} is back at ${this._position(t.item)}.`);
+				return;
+			}
+			if (this._items().indexOf(t.item) === t.fromIndex) {
+				this._announce(`${this._labelOf(t.item)} dropped, ${this._position(t.item)}.`);
+				return;
+			}
+			this._settle(t.item, this, t.fromIndex, this);
+		}
+	}
+	_moveFocused(e, t) {
+		this._moving = !0;
+		let n = this.contains(document.activeElement);
+		e(), n && document.activeElement !== t && t.focus(), this._moving = !1;
+	}
+};
+function nn(e, t, n) {
+	return e < t + U ? -Math.ceil(en * Math.min(1, (t + U - e) / U)) : e > n - U ? Math.ceil(en * Math.min(1, (e - (n - U)) / U)) : 0;
+}
+function rn(e) {
+	for (let t = e.parentElement; t && t !== document.body && t !== document.documentElement; t = t.parentElement) {
+		let e = getComputedStyle(t), n = /(auto|scroll)/.test(e.overflowY) && t.scrollHeight > t.clientHeight, r = /(auto|scroll)/.test(e.overflowX) && t.scrollWidth > t.clientWidth;
+		if (n || r) return t;
+	}
+	return null;
+}
+//#endregion
+//#region src/WuiTagInput.js
+var an = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -4755,30 +5576,30 @@ var Qe = class extends e {
 		return this._values.slice();
 	}
 	set values(e) {
-		this._values = Array.isArray(e) ? e.map(String) : [], f(this, this._values.join(",")), this._rendered && this._renderControl();
+		this._values = Array.isArray(e) ? e.map(String) : [], h(this, this._values), this._rendered && this._renderControl();
 	}
 	render() {
 		let e = this.getAttribute("size"), t = e === "sm" ? " search-select-sm" : e === "lg" ? " search-select-lg" : "";
-		f(this, this._values.join(",")), this.innerHTML = `
+		h(this, this._values), 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="${J(this._accessibleName())}" placeholder="${J(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="${sn(this._accessibleName())}" placeholder="${sn(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();
+      </div>`, this._rendered = !0, h(this, this._values), this._renderControl(), this._wire();
 	}
 	_renderControl() {
 		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">${nt(e)}</span><button type="button" class="chip-remove" data-remove="${J(e)}" aria-label="Remove ${J(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">${on(e)}</span><button type="button" class="chip-remove" data-remove="${sn(e)}" aria-label="Remove ${sn(e)}">${_("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(be).filter(Boolean)), s = () => {
-			f(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		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(dt).filter(Boolean)), s = () => {
+			h(this, this._values), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}, c = (e) => {
 			let t = e.trim();
 			if (!t || i && this._values.length >= parseInt(i, 10)) return;
@@ -4809,9 +5630,9 @@ var Qe = class extends e {
 			e.preventDefault();
 			let n = e.clipboardData.getData("text/plain"), a = [];
 			for (let e of r) {
-				let t = xe(e) ?? e;
-				if (Ce(n, [t])) {
-					a.push(...Se(n, [t]));
+				let t = ft(e) ?? e;
+				if (mt(n, [t])) {
+					a.push(...pt(n, [t]));
 					break;
 				}
 			}
@@ -4839,18 +5660,18 @@ var Qe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, 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) => {
+}, on = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), sn = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), cn = (e) => String(e).padStart(2, "0"), ln = (e, t) => `${cn(e)}:${cn(t)}`, un = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, at = (e, t = "24") => {
+}, dn = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return it(e.h, e.m);
+	if (t === "24") return ln(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
-	return `${n}:${rt(e.m)} ${r}`;
-}, ot = class extends e {
+	return `${n}:${cn(e.m)} ${r}`;
+}, fn = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4902,34 +5723,34 @@ var Qe = class extends e {
 		return this._value;
 	}
 	set value(e) {
-		this._value = e || "", f(this, this._value), this._syncTrigger();
+		this._value = e || "", m(this, this._value), this._syncTrigger();
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Select time", t = Y(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
+		let e = this.getAttribute("placeholder") || "Select time", t = un(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 ? at(t, n) : _(e)}</span>
-          ${m("clock")}
+        <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="${b(a)}"` : ""}${o ? ` aria-describedby="${b(o)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? dn(t, n) : b(e)}</span>
+          ${_("clock")}
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
-      </div>`, this._rendered = !0, f(this, this._value), this._wire();
+      </div>`, this._rendered = !0, m(this, this._value), this._wire();
 	}
 	_syncFormValue() {
-		f(this, this._value);
+		m(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 ? at(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = un(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? dn(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) || {
+		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = un(t) || {
 			h: 0,
 			m: 0
-		}, i = Y(n) || {
+		}, i = un(n) || {
 			h: 23,
 			m: 59
 		}, a = [], o = r.h, s = r.m;
@@ -4942,10 +5763,10 @@ var Qe = class extends e {
 	_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 = "";
+		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = un(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			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>`;
+			let o = n[e], s = ln(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\"" : ""}>${dn(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -5043,7 +5864,498 @@ var Qe = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, st = "wui-wizard-step", ct = class extends e {
+}, pn = "wui-csrf", mn = "RequestVerificationToken", W = Object.freeze({
+	fragment: "X-Wui-Fragment",
+	message: "X-Wui-Message",
+	redirect: "X-Wui-Redirect",
+	result: "X-Wui-Result",
+	keepOpen: "X-Wui-Keep-Open"
+}), hn = Object.freeze([
+	"ok",
+	"validation",
+	"forbidden",
+	"client",
+	"server",
+	"network",
+	"aborted",
+	"stale",
+	"session"
+]), gn = /* @__PURE__ */ new Set(["GET", "HEAD"]);
+function _n(e = document) {
+	let t = e.querySelector(`meta[name="${pn}"]`), n = t?.getAttribute("content");
+	return n ? {
+		header: t.getAttribute("data-header") || "RequestVerificationToken",
+		token: n
+	} : null;
+}
+var vn = (e) => {
+	try {
+		return new URL(e, window.location.href).origin === window.location.origin;
+	} catch {
+		return !1;
+	}
+};
+function yn(e) {
+	return e >= 200 && e < 300 ? "ok" : e === 401 ? "session" : e === 403 ? "forbidden" : e === 422 ? "validation" : e >= 400 && e < 500 ? "client" : "server";
+}
+var bn = (e) => e?.name === "AbortError";
+async function xn(e, t = {}) {
+	let n = (t.method || "GET").toUpperCase(), r = t.navigate || ((e) => window.location.assign(e)), i = {
+		Accept: "text/html",
+		"X-Requested-With": "XMLHttpRequest",
+		...t.headers
+	};
+	if (!gn.has(n) && vn(e)) {
+		let e = _n();
+		e && (i[e.header] = e.token);
+	}
+	let a = (e, t = null, n = "") => {
+		let r = (e) => t?.headers.get(e) ?? null;
+		return {
+			kind: e,
+			ok: e === "ok",
+			status: t?.status ?? 0,
+			html: n,
+			response: t,
+			message: r(W.message),
+			redirect: r(W.redirect),
+			result: r(W.result),
+			keepOpen: r(W.keepOpen) === "1",
+			fragment: r(W.fragment) === "1"
+		};
+	}, o;
+	try {
+		o = await fetch(e, {
+			method: n,
+			body: t.body,
+			headers: i,
+			signal: t.signal,
+			credentials: "same-origin"
+		});
+	} catch (e) {
+		return a(bn(e) || t.signal?.aborted ? "aborted" : "network");
+	}
+	let s = yn(o.status);
+	if (s === "ok" && o.redirected && o.headers.get(W.fragment) !== "1" && (s = "session"), s === "session") return r(o.status === 401 ? o.headers.get("Location") || window.location.href : o.url), a(s, o);
+	let c = "";
+	if (s === "ok" || s === "validation") try {
+		c = await o.text();
+	} catch (e) {
+		return a(bn(e) || t.signal?.aborted ? "aborted" : "network", o);
+	}
+	return a(s, o, c);
+}
+function Sn() {
+	let e = null, t = 0;
+	return {
+		async run(n, r = {}) {
+			e?.abort();
+			let i = new AbortController();
+			e = i;
+			let a = ++t, o = r.signal;
+			o && (o.aborted ? i.abort() : o.addEventListener("abort", () => i.abort(), { once: !0 }));
+			let s = await xn(n, {
+				...r,
+				signal: i.signal
+			});
+			return e === i && (e = null), a !== t && s.kind !== "aborted" ? {
+				...s,
+				kind: "stale",
+				ok: !1
+			} : s;
+		},
+		abort() {
+			e?.abort(), e = null;
+		}
+	};
+}
+//#endregion
+//#region src/WuiTree.js
+var Cn = [
+	"none",
+	"single",
+	"multiple"
+], wn = "parentId", Tn = "Loading", En = "Could not load. Try again.", Dn = ":scope > input[data-wui-mirror]", On = [
+	"nodes",
+	"selection",
+	"selected",
+	"values",
+	"loadChildren",
+	"loadUrl",
+	"name"
+], kn = 0;
+function G(e, t, n) {
+	let r = document.createElement(e);
+	t && (r.className = t);
+	for (let [e, t] of Object.entries(n ?? {})) t != null && r.setAttribute(e, String(t));
+	return r;
+}
+var An = class extends e {
+	static get observedAttributes() {
+		return [
+			"selection",
+			"selected",
+			"name",
+			"aria-label",
+			"loading-text",
+			"error-text"
+		];
+	}
+	constructor() {
+		super(), this._uid = `wui-tree-${++kn}`, this._seq = 0, this._roots = [], this._byId = /* @__PURE__ */ new Map(), this._prev = null, this._staged = null, this._els = /* @__PURE__ */ new Map(), this._checked = /* @__PURE__ */ new Set(), this._selected = null, this._focusId = null, this._loader = null, this._list = null, this._live = null, this._ready = !1, this._nav = v({
+			getVisibleOptions: () => this._visible().map((e) => this._els.get(e.id)?.row),
+			getActive: () => this._visible().findIndex((e) => e.id === this._focusId),
+			setActive: (e) => this._focusNode(this._visible()[e]),
+			onEnter: () => {
+				let e = this._byId.get(this._focusId);
+				e && this._activate(e);
+			}
+		}), this._onKeyDown = (e) => this._handleKeyDown(e), this._onClick = (e) => this._handleClick(e), this._onFocusIn = (e) => {
+			let t = this._nodeFrom(e.target);
+			t && t.id !== this._focusId && this._setRoving(t);
+		};
+	}
+	connectedCallback() {
+		let e = {};
+		for (let t of On) Object.hasOwn(this, t) && (e[t] = this[t], delete this[t]);
+		if (!this._ready) {
+			this._ready = !0;
+			let e = this._readScript();
+			this.replaceChildren(), this._list = G("ul", "wui-tree"), this._list.setAttribute("role", "tree"), this._live = G("div", "visually-hidden", {
+				role: "status",
+				"aria-live": "polite"
+			}), this.append(this._list, this._live), e && this._adoptAll(e);
+		}
+		for (let [t, n] of Object.entries(e)) this[t] = n;
+		this.addEventListener("keydown", this._onKeyDown), this.addEventListener("click", this._onClick), this.addEventListener("focusin", this._onFocusIn), this._render(), this._loadOpenNodes();
+	}
+	disconnectedCallback() {
+		this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("click", this._onClick), this.removeEventListener("focusin", this._onFocusIn), this._nav.teardown();
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "selected" && (this._selected = n), this._ready && this.isConnected && this._render();
+	}
+	get nodes() {
+		return this._roots.map((e) => e.raw);
+	}
+	set nodes(e) {
+		this._adoptAll(e ?? []), this._render(), this._loadOpenNodes();
+	}
+	get selection() {
+		let e = this.getAttribute("selection");
+		return Cn.includes(e) ? e : "none";
+	}
+	set selection(e) {
+		this.setAttribute("selection", String(e));
+	}
+	get selected() {
+		return this._selected;
+	}
+	set selected(e) {
+		this._selected = e == null ? null : String(e), this._render();
+	}
+	get values() {
+		let e = [], t = (n) => {
+			for (let r of n) this._state(r) === "checked" && e.push(r.id), r.children && t(r.children);
+		};
+		return t(this._roots), [...e, ...[...this._checked].filter((e) => !this._byId.has(e))];
+	}
+	set values(e) {
+		this._checked.clear();
+		for (let t of e ?? []) {
+			let e = this._byId.get(String(t));
+			e ? this._setChecked(e, !0) : this._checked.add(String(t));
+		}
+		this._render();
+	}
+	get loadChildren() {
+		return this._loader;
+	}
+	set loadChildren(e) {
+		this._loader = typeof e == "function" ? e : null;
+	}
+	get loadUrl() {
+		return this.getAttribute("load-url");
+	}
+	set loadUrl(e) {
+		e == null ? this.removeAttribute("load-url") : this.setAttribute("load-url", String(e));
+	}
+	get name() {
+		return this.getAttribute("name");
+	}
+	set name(e) {
+		e == null ? this.removeAttribute("name") : this.setAttribute("name", String(e));
+	}
+	get loadingText() {
+		return this.getAttribute("loading-text") ?? Tn;
+	}
+	set loadingText(e) {
+		this.setAttribute("loading-text", String(e ?? ""));
+	}
+	get errorText() {
+		return this.getAttribute("error-text") ?? En;
+	}
+	set errorText(e) {
+		this.setAttribute("error-text", String(e ?? ""));
+	}
+	_readScript() {
+		let e = this.querySelector(":scope > script[type='application/json']");
+		if (!e) return null;
+		try {
+			return JSON.parse(e.textContent);
+		} catch (e) {
+			return console.error("[@webority/ui-elements] <wui-tree> could not read its JSON nodes:", e?.message), null;
+		}
+	}
+	_adoptAll(e) {
+		let t = this._byId;
+		this._prev = t, this._byId = /* @__PURE__ */ new Map();
+		let n;
+		try {
+			n = this._adoptStaged(e, null, 1);
+		} catch (e) {
+			throw this._byId = t, e;
+		} finally {
+			this._prev = null;
+		}
+		this._roots = n;
+		for (let e of t.keys()) this._byId.has(e) || this._checked.delete(e);
+		for (let e of this._roots) this._passChecksDown(e);
+		this._focusId && !this._byId.has(this._focusId) && (this._focusId = null);
+	}
+	_adoptStaged(e, t, n) {
+		let r = [], i = [];
+		this._staged = {
+			ids: r,
+			checks: i
+		};
+		try {
+			let r = this._adopt(e, t, n);
+			for (let e of i) this._checked.add(e);
+			return r;
+		} catch (e) {
+			for (let e of r) this._byId.delete(e);
+			throw e;
+		} finally {
+			this._staged = null;
+		}
+	}
+	_adopt(e, t, n) {
+		if (!Array.isArray(e)) throw Error("<wui-tree> nodes must be an array.");
+		return e.map((e) => {
+			let r = e?.id == null ? "" : String(e.id);
+			if (!r) throw Error("<wui-tree> every node needs an id.");
+			if (this._byId.has(r)) throw Error(`<wui-tree> node id "${r}" is used twice.`);
+			let i = this._prev?.get(r), a = {
+				id: r,
+				raw: e,
+				parent: t,
+				level: n,
+				seq: ++this._seq,
+				label: e.label == null ? r : String(e.label),
+				icon: e.icon || null,
+				badge: e.badge == null || e.badge === "" ? null : String(e.badge),
+				badgeTone: e.badgeTone || null,
+				disabled: !!e.disabled,
+				hasChildren: !!e.hasChildren,
+				children: null,
+				expanded: i ? i.expanded : !!e.expanded,
+				loading: !1,
+				failed: !1
+			};
+			this._byId.set(r, a), this._staged.ids.push(r);
+			let o = e.children ?? (e.hasChildren ? i?.children?.map((e) => e.raw) : void 0);
+			return Array.isArray(o) && (a.children = this._adopt(o, a, n + 1)), a.loading = !!i?.loading && a.children === null && a.hasChildren, e.checked && !i && this._staged.checks.push(r), a;
+		});
+	}
+	_passChecksDown(e) {
+		e.children?.length && this._checked.has(e.id) && (this._checked.delete(e.id), this._setChecked(e, !0));
+		for (let t of e.children ?? []) this._passChecksDown(t);
+	}
+	_loadOpenNodes() {
+		queueMicrotask(() => {
+			if (this.isConnected) for (let e of [...this._byId.values()]) e.expanded && e.children === null && e.hasChildren && !e.loading && this._load(e);
+		});
+	}
+	_isBranch(e) {
+		return e.children ? e.children.length > 0 : e.hasChildren;
+	}
+	_visible() {
+		let e = [], t = (n) => {
+			for (let r of n) e.push(r), r.expanded && r.children && t(r.children);
+		};
+		return t(this._roots), e;
+	}
+	_state(e) {
+		if (e.children?.length) {
+			let t = 0, n = 0;
+			for (let r of e.children) {
+				let e = this._state(r);
+				e === "checked" ? t++ : e === "unchecked" && n++;
+			}
+			return t === e.children.length ? "checked" : n === e.children.length ? "unchecked" : "mixed";
+		}
+		return this._checked.has(e.id) ? "checked" : "unchecked";
+	}
+	_setChecked(e, t) {
+		if (e.children?.length) for (let n of e.children) n.disabled || this._setChecked(n, t);
+		else t ? this._checked.add(e.id) : this._checked.delete(e.id);
+	}
+	_nodeFrom(e) {
+		let t = e?.closest?.("li.wui-tree-item");
+		if (!t) return null;
+		for (let [e, n] of this._els) if (n.li === t) return this._byId.get(e) ?? null;
+		return null;
+	}
+	_emit(e, t) {
+		this.dispatchEvent(new CustomEvent(`wui-tree:${e}`, {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_announce(e) {
+		this._live && (this._live.textContent = e);
+	}
+	_setRoving(e) {
+		let t = this._els.get(this._focusId);
+		t && (t.li.tabIndex = -1), this._focusId = e.id;
+		let n = this._els.get(e.id);
+		n && (n.li.tabIndex = 0);
+	}
+	_focusNode(e) {
+		e && (this._setRoving(e), this._els.get(e.id)?.li.focus());
+	}
+	_activate(e) {
+		e.disabled || (this.selection === "single" && (this._selected = e.id, this._render(), this._syncForm()), this._emit("select", {
+			id: e.id,
+			node: e.raw
+		}));
+	}
+	_enabledLeaves(e) {
+		return e.disabled ? [] : e.children?.length ? e.children.flatMap((e) => this._enabledLeaves(e)) : [e];
+	}
+	_toggleCheck(e) {
+		let t = this._enabledLeaves(e);
+		if (!t.length) return;
+		let n = !t.every((e) => this._checked.has(e.id));
+		this._setChecked(e, n), this._render(), this._syncForm(), this._emit("check", {
+			id: e.id,
+			checked: n,
+			values: this.values
+		});
+	}
+	_toggleExpand(e) {
+		e.disabled || !this._isBranch(e) || (e.expanded ? (e.expanded = !1, this._render()) : this._expand(e));
+	}
+	_expand(e) {
+		e.expanded = !0, e.children === null ? this._load(e) : this._render();
+	}
+	async _load(e) {
+		if (e.loading) return;
+		e.loading = !0, e.failed = !1, this._announce(this.loadingText), this._render();
+		let t, n = null;
+		try {
+			t = await this._fetchChildren(e);
+		} catch (e) {
+			n = e;
+		}
+		let r = this._byId.get(e.id);
+		if (!r) {
+			this._announce("");
+			return;
+		}
+		if (r.loading) {
+			if (r.loading = !1, !n) try {
+				r.children = this._adoptStaged(t, r, r.level + 1), this._passChecksDown(r), this._announce("");
+			} catch (e) {
+				n = e;
+			}
+			n && (r.failed = !0, r.expanded = !1, this._announce(this.errorText), this._emit("error", {
+				id: r.id,
+				message: n?.message ?? String(n)
+			})), this._render(), this._syncForm();
+		}
+	}
+	async _fetchChildren(e) {
+		if (this._loader) return this._loader(e.raw);
+		let t = this.getAttribute("load-url");
+		if (!t) throw Error("<wui-tree> has a node with children to load but no loadChildren or load-url.");
+		let n = new URL(t, window.location.href);
+		n.searchParams.set(wn, e.id);
+		let r = await xn(n.href, { headers: { Accept: "application/json" } });
+		if (!r.ok) throw Error(`Loading children answered ${r.kind}.`);
+		return JSON.parse(r.html);
+	}
+	_handleClick(e) {
+		let t = this._nodeFrom(e.target);
+		!t || t.disabled || (this._focusNode(t), e.target.closest(".wui-tree-toggle") ? this._toggleExpand(t) : e.target.closest(".wui-tree-check") ? (e.preventDefault(), this._toggleCheck(t)) : this._activate(t));
+	}
+	_handleKeyDown(e) {
+		if (e.ctrlKey || e.metaKey || e.altKey) return;
+		let t = this._nodeFrom(e.target);
+		if (!(!t || e.target !== this._els.get(t.id)?.li)) if (e.key === "ArrowRight") {
+			if (e.preventDefault(), !this._isBranch(t) || t.disabled) return;
+			t.expanded ? t.children?.length && this._focusNode(t.children[0]) : this._expand(t);
+		} else e.key === "ArrowLeft" ? (e.preventDefault(), t.expanded && this._isBranch(t) && !t.disabled ? this._toggleExpand(t) : t.parent && this._focusNode(t.parent)) : e.key === " " ? (e.preventDefault(), this.selection === "multiple" ? this._toggleCheck(t) : this.selection === "single" && this._activate(t)) : this._nav.handler(e);
+	}
+	_syncForm() {
+		let e = this.selection;
+		if (e === "multiple") h(this, this.values);
+		else if (e === "single") m(this, this._selected ?? "");
+		else for (let e of this.querySelectorAll(Dn)) e.remove();
+	}
+	_render() {
+		if (!this._list) return;
+		let e = document.activeElement, t = !!e && this._list.contains(e), n = this._visible();
+		n.some((e) => e.id === this._focusId) || (this._focusId = (n.find((e) => e.id === this._selected) ?? n[0])?.id ?? null), this._els = /* @__PURE__ */ new Map();
+		let r = this.getAttribute("aria-label");
+		r ? this._list.setAttribute("aria-label", r) : this._list.removeAttribute("aria-label"), this._list.replaceChildren(...this._buildLevel(this._roots)), t && this._focusId && this._els.get(this._focusId)?.li.focus(), this._syncForm();
+	}
+	_buildLevel(e) {
+		return e.map((t, n) => this._buildItem(t, n + 1, e.length));
+	}
+	_buildItem(e, t, n) {
+		let r = this.selection, i = this._isBranch(e), a = this._state(e), o = G("li", "wui-tree-item", {
+			role: "treeitem",
+			tabindex: e.id === this._focusId ? 0 : -1,
+			"aria-level": e.level,
+			"aria-setsize": n,
+			"aria-posinset": t,
+			"aria-labelledby": `${this._uid}-${e.seq}`,
+			"aria-describedby": e.badge ? `${this._uid}-${e.seq}-badge` : null
+		});
+		i && o.setAttribute("aria-expanded", String(e.expanded)), e.disabled && o.setAttribute("aria-disabled", "true"), e.loading && o.setAttribute("aria-busy", "true"), r === "single" && o.setAttribute("aria-selected", String(e.id === this._selected)), r === "multiple" && o.setAttribute("aria-checked", a === "mixed" ? "mixed" : String(a === "checked"));
+		let s = G("div", "wui-tree-row", { role: "presentation" });
+		s.style.setProperty("--wui-tree-level", String(e.level - 1)), r === "single" && e.id === this._selected && s.classList.add("wui-tree-row-selected"), e.failed && s.classList.add("wui-tree-row-error");
+		let c = G("span", i ? "wui-tree-toggle" : "wui-tree-toggle wui-tree-toggle-leaf", { "aria-hidden": "true" });
+		if (i && (c.innerHTML = _("chevron-right", { size: 16 })), s.append(c), r === "multiple") {
+			let t = G("input", "form-check-input wui-tree-check", {
+				type: "checkbox",
+				tabindex: -1,
+				"aria-hidden": "true"
+			});
+			t.checked = a === "checked", t.indeterminate = a === "mixed", t.disabled = e.disabled, t.addEventListener("mousedown", (e) => e.preventDefault()), s.append(t);
+		}
+		if (e.icon) {
+			let t = G("span", "wui-tree-icon", { "aria-hidden": "true" });
+			t.innerHTML = _(e.icon, { size: 16 }), s.append(t);
+		}
+		let l = G("span", "wui-tree-label", { id: `${this._uid}-${e.seq}` });
+		if (l.textContent = e.label, s.append(l), e.badge) {
+			let t = G("span", `badge wui-tree-badge${e.badgeTone && e.badgeTone !== "neutral" ? ` badge-${e.badgeTone}` : ""}`, { id: `${this._uid}-${e.seq}-badge` });
+			t.textContent = e.badge, s.append(t);
+		}
+		if (e.loading && s.append(G("span", "wui-tree-spinner", { "aria-hidden": "true" })), o.append(s), e.expanded && e.children?.length) {
+			let t = G("ul", "wui-tree-group", { role: "group" });
+			t.append(...this._buildLevel(e.children)), o.append(t);
+		}
+		return this._els.set(e.id, {
+			li: o,
+			row: s
+		}), o;
+	}
+}, jn = "wui-wizard-step", Mn = class extends e {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -5077,7 +6389,7 @@ var Qe = class extends e {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${st}`)];
+		return [...this.querySelectorAll(`:scope > ${jn}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -5116,7 +6428,7 @@ var Qe = class extends e {
 	}
 	_reconcileSteps() {
 		let e = this._steps, t = this._known;
-		if (this._known = e, lt(e, t)) return e;
+		if (this._known = e, Nn(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];
@@ -5136,7 +6448,7 @@ var Qe = 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]) && lt(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
+		(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && Nn(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
 	}
 	_syncPanels(e) {
 		e.forEach((e, t) => {
@@ -5159,14 +6471,14 @@ var Qe = class extends e {
 		let i = this.hasAttribute("non-linear");
 		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">${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>`;
+			u = a === "done" ? _("check") : a === "error" ? _("alert-triangle") : a === "skipped" ? _("minus") : c ? _(c) : String(l);
+			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", p = i || r < this._active, m = s ? `<span class="step-desc">${K(s)}</span>` : "", h;
+			return h = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${K(o)}</span>${m}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${K(o)}</span>${m}` : `<span class="step-circle">${u}</span><span class="step-label">${K(o)}</span>${m}`, p ? `<button type="button" class="${d}" data-step="${r}"${f}>${h}</button>` : `<div class="${d}"${f}>${h}</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" })}${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>`;
+		return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${_("arrow-left", { className: "me-2" })}${K(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${K(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${K(o)}${_("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${K(c)}</button>`}</span>`;
 	}
 	_wire() {
 		this._teardown(), this._onHeaderClick = (e) => {
@@ -5240,7 +6552,7 @@ var Qe = class extends e {
 	_reflectActive(e) {
 		this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
 	}
-}, 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 {
+}, Nn = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), K = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Pn = class extends e {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -5254,8 +6566,8 @@ var Qe = class extends e {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, dt = 2e3;
-async function ft(e) {
+}, Fn = 2e3;
+async function In(e) {
 	try {
 		if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
 	} catch {}
@@ -5270,14 +6582,14 @@ async function ft(e) {
 }
 //#endregion
 //#region src/fileValidation.js
-var pt = "image/png,image/jpeg,image/webp", mt = 5, ht = {
+var Ln = "image/png,image/jpeg,image/webp", Rn = 5, zn = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, gt = {
+}, Bn = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -5291,7 +6603,7 @@ var pt = "image/png,image/jpeg,image/webp", mt = 5, ht = {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, _t = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), vt = [
+}, Vn = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Hn = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -5302,54 +6614,459 @@ var pt = "image/png,image/jpeg,image/webp", mt = 5, ht = {
 	".avif",
 	".heic"
 ];
-function yt(e) {
+function Un(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 vt.some((e) => r.endsWith(e));
+	return Hn.some((e) => r.endsWith(e));
 }
-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 Wn(e) {
+	let t = Vn(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? Hn.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function xt(e) {
+function Gn(e) {
 	let t = [];
-	for (let n of _t(e)) {
-		let e = gt[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of Vn(e)) {
+		let e = Bn[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 St(e, t) {
-	let n = _t(t);
+function Kn(e, t) {
+	let n = Vn(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 && (ht[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 && (zn[e] || []).some((e) => i.endsWith(e)));
 }
-function Ct(e, t = {}) {
+function qn(e, t = {}) {
 	if (!e) return null;
-	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.`;
+	let n = t.accept === void 0 ? Ln : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
+	return Kn(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Gn(n)} file.`;
+}
+//#endregion
+//#region src/formatters.js
+var Jn = [
+	"number",
+	"currency",
+	"percent",
+	"compact",
+	"duration",
+	"date"
+], Yn = ["INR"], Xn = ["rupees", "paise"], Zn = [
+	"ms",
+	"s",
+	"min",
+	"h"
+], Qn = [
+	"day",
+	"month",
+	"year",
+	"datetime",
+	"time"
+], $n = "Asia/Kolkata", er = "-", tr = "−", nr = "₹", rr = 330 * 60 * 1e3, ir = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], ar = [
+	[1e7, "Cr"],
+	[1e5, "L"],
+	[1e3, "K"]
+], or = (e, t) => Number.isInteger(e) && e >= 0 && e <= 20 ? e : t, sr = /* @__PURE__ */ new Map(), q = (e) => (sr.has(e) || sr.set(e, new Intl.NumberFormat("en-IN", {
+	minimumFractionDigits: 0,
+	maximumFractionDigits: e
+})), sr.get(e)), cr = /* @__PURE__ */ new Map(), lr = (e) => (cr.has(e) || cr.set(e, new Intl.NumberFormat("en-IN", {
+	minimumFractionDigits: e,
+	maximumFractionDigits: e
+})), cr.get(e)), ur = (e) => typeof e == "number" && Number.isFinite(e), dr = (e) => e < 0 && !Object.is(Math.abs(e), 0) ? tr : "", fr = (e, t) => t === "paise" ? e / 100 : e;
+function pr(e, { decimals: t } = {}) {
+	if (!ur(e)) return "-";
+	let n = q(or(t, 2)).format(Math.abs(e));
+	return n === "0" ? "0" : dr(e) + n;
+}
+function mr(e, { unit: t = "rupees", decimals: n } = {}) {
+	if (!ur(e)) return "-";
+	let r = fr(e, t), i = lr(or(n, 0)).format(Math.abs(r));
+	return (Number(i.replace(/,/g, "")) === 0 ? "" : dr(r)) + nr + i;
+}
+var hr = (e) => e > 0 && e < .1 ? Math.min(20, 1 - Math.floor(Math.log10(e))) : 2;
+function gr(e, { currency: t, unit: n = "rupees" } = {}) {
+	if (!ur(e)) return "-";
+	let r = t ? fr(e, n) : e, i = t ? nr : "", a = Math.abs(r), o = ar.findIndex(([e]) => a >= e);
+	if (o === -1) {
+		let e = q(hr(a)).format(a);
+		if (e !== "1,000") return (e === "0" ? "" : dr(r)) + i + e;
+		o = ar.length - 1;
+	}
+	let [s, c] = ar[o], l = a / s, u = l >= 100 ? 0 : l >= 10 ? 1 : 2, d = Number(l.toFixed(u));
+	return d >= 100 && o > 0 && (--o, [s, c] = ar[o], l = a / s, u = l >= 100 ? 0 : l >= 10 ? 1 : 2, d = Number(l.toFixed(u))), `${dr(r)}${i}${q(u).format(d)} ${c}`;
+}
+function _r(e, { decimals: t } = {}) {
+	return ur(e) ? `${pr(e * 100, { decimals: or(t, 1) })}%` : "-";
+}
+function vr(e, { unit: t = "s" } = {}) {
+	if (!ur(e)) return "-";
+	let n = {
+		ms: 1,
+		s: 1e3,
+		min: 6e4,
+		h: 36e5
+	}[t] ?? 1e3, r = Math.abs(e * n), i = dr(e);
+	if (Math.round(r) < 1e3) return `${i}${q(0).format(r)} ms`;
+	let a = r / 1e3;
+	if (a < 10) return `${i}${q(1).format(a)}s`;
+	let o = Math.round(a);
+	if (o < 60) return `${i}${o}s`;
+	let s = (e) => String(e).padStart(2, "0"), c = Math.floor(o / 60);
+	if (c < 60) return `${i}${c}m ${s(o % 60)}s`;
+	let l = Math.floor(c / 60);
+	return `${i}${q(0).format(l)}h ${s(c % 60)}m`;
+}
+function yr(e) {
+	if (e instanceof Date) return e.getTime();
+	if (ur(e)) return e;
+	if (typeof e != "string") return NaN;
+	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e.trim());
+	if (t) {
+		let [e, n, r] = [
+			Number(t[1]),
+			Number(t[2]),
+			Number(t[3])
+		], i = new Date(Date.UTC(2e3, n - 1, r));
+		return i.setUTCFullYear(e), i.getUTCFullYear() === e && i.getUTCMonth() === n - 1 && i.getUTCDate() === r ? i.getTime() - rr : NaN;
+	}
+	return Date.parse(e);
+}
+function br(e) {
+	let t = new Date(e + rr);
+	return {
+		year: t.getUTCFullYear(),
+		month: t.getUTCMonth(),
+		day: t.getUTCDate(),
+		hour: t.getUTCHours(),
+		minute: t.getUTCMinutes()
+	};
+}
+function xr(e, { pattern: t = "day" } = {}) {
+	let n = yr(e);
+	if (!Number.isFinite(n)) return "-";
+	let r = br(n), i = (e) => String(e).padStart(2, "0"), a = `${i(r.day)}-${ir[r.month]}-${r.year}`, o = `${i(r.hour)}:${i(r.minute)}`;
+	switch (t) {
+		case "month": return `${ir[r.month]}-${r.year}`;
+		case "year": return String(r.year);
+		case "datetime": return `${a} ${o}`;
+		case "time": return o;
+		default: return a;
+	}
+}
+function Sr(e, t) {
+	if (e == null || e === "") return "-";
+	let n = t?.style;
+	if (n === "date") return xr(e, t);
+	if (typeof e != "number") return String(e);
+	switch (n) {
+		case "currency": return mr(e, t);
+		case "percent": return _r(e, t);
+		case "compact": return gr(e, t);
+		case "duration": return vr(e, t);
+		default: return pr(e, t);
+	}
+}
+//#endregion
+//#region src/inputMask.js
+var Cr = /[0-9]/, wr = {
+	9: Cr,
+	A: /[A-Za-z]/,
+	"*": /[0-9A-Za-z]/
+}, Tr = /[9A*]/, Er = /* @__PURE__ */ new Set([
+	"text",
+	"tel",
+	"search",
+	"url",
+	"password"
+]), Dr = (e) => {
+	let t = e.replace(/\D/g, "");
+	return t.length === 12 && t.startsWith("91") ? t.slice(2) : t.length === 11 && t.startsWith("0") ? t.slice(1) : e;
+}, Or = (e) => {
+	let t = Number(e.slice(0, 2)), n = Number(e.slice(2, 4)), r = Number(e.slice(4, 8));
+	if (r < 1) return !1;
+	let i = new Date(Date.UTC(r, n - 1, t));
+	return i.getUTCFullYear() === r && i.getUTCMonth() === n - 1 && i.getUTCDate() === t;
+}, kr = (e) => e.length <= 3 ? e : `${e.slice(0, -3).replace(/\B(?=(\d{2})+(?!\d))/g, ",")},${e.slice(-3)}`, Ar = (e) => {
+	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e.trim());
+	return t ? `${t[3]}-${t[2]}-${t[1]}` : e;
+};
+function J(e, { upper: t = !1, normalize: n, valid: r, post: i = (e) => e, message: a = "Enter the full value" } = {}) {
+	let o = [...e].map((e) => wr[e] ? { re: wr[e] } : { lit: e }), s = o.filter((e) => e.re).length;
+	return {
+		inputMode: o.every((e) => !e.re || e.re === Cr) ? "numeric" : "text",
+		normalize: n,
+		post: i,
+		message: a,
+		extract(e) {
+			let n = "", r = 0;
+			for (let i of e) {
+				for (; r < o.length && o[r].lit !== void 0 && o[r].lit !== i;) r++;
+				if (r >= o.length) break;
+				let e = o[r];
+				e.lit === void 0 ? e.re.test(i) && (n += t ? i.toUpperCase() : i, r++) : r++;
+			}
+			return n;
+		},
+		layout(e) {
+			let t = "", n = [], r = 0;
+			for (let i = 0; i < o.length && r < e.length; i++) o[i].lit === void 0 ? (t += e[r++], n.push(!0)) : (t += o[i].lit, n.push(!1));
+			return {
+				text: t,
+				isRaw: n
+			};
+		},
+		isValid: (e) => e.length === s && (!r || r(e))
+	};
+}
+function jr() {
+	return {
+		inputMode: "decimal",
+		post: (e) => e,
+		message: "Enter a valid amount",
+		extract(e) {
+			let t = "", n = !1, r = 0;
+			for (let i of e) Cr.test(i) ? n ? r < 2 && (t += i, r++) : t += i : i === "." && !n && (n = !0, t += i);
+			return t.startsWith(".") && (t = `0${t}`), t.replace(/^0+(?=\d)/, "");
+		},
+		layout(e) {
+			let [t, n] = e.split("."), r = kr(t) + (e.includes(".") ? `.${n}` : "");
+			return {
+				text: r,
+				isRaw: [...r].map((e) => e !== ",")
+			};
+		},
+		isValid: (e) => /^\d+(\.\d{1,2})?$/.test(e)
+	};
+}
+var Mr = {
+	"phone-in": () => J("99999 99999", {
+		normalize: Dr,
+		valid: (e) => /^[6-9]/.test(e),
+		message: "Enter a 10-digit mobile number"
+	}),
+	pan: () => J("AAAAA9999A", {
+		upper: !0,
+		valid: (e) => /^[A-Z]{5}\d{4}[A-Z]$/.test(e),
+		message: "Enter a valid PAN"
+	}),
+	gstin: () => J("99AAAAA9999A***", {
+		upper: !0,
+		valid: (e) => /^\d{2}[A-Z]{5}\d{4}[A-Z][1-9A-Z]Z[0-9A-Z]$/.test(e),
+		message: "Enter a valid GSTIN"
+	}),
+	aadhaar: () => J("9999 9999 9999", {
+		valid: (e) => /^[2-9]/.test(e),
+		message: "Enter a valid 12-digit Aadhaar number"
+	}),
+	ifsc: () => J("AAAA*******", {
+		upper: !0,
+		valid: (e) => /^[A-Z]{4}0[A-Z0-9]{6}$/.test(e),
+		message: "Enter a valid IFSC"
+	}),
+	"pin-code": () => J("999999", {
+		valid: (e) => /^[1-9]/.test(e),
+		message: "Enter a valid 6-digit PIN code"
+	}),
+	date: () => J("99-99-9999", {
+		normalize: Ar,
+		valid: Or,
+		post: (e, t) => e.length === 8 && Or(e) ? `${e.slice(4)}-${e.slice(2, 4)}-${e.slice(0, 2)}` : t,
+		message: "Enter a valid date as DD-MM-YYYY"
+	}),
+	amount: jr
+}, Nr = Object.keys(Mr), Pr = (e) => {
+	let t = String(e).toLowerCase();
+	return Object.hasOwn(Mr, t) ? t : void 0;
+}, Fr = (e) => Tr.test(String(e)) && Pr(e) === void 0, Ir = /* @__PURE__ */ new Map();
+function Lr(e) {
+	if (e == null || e === "") return null;
+	let t = String(e);
+	return Ir.has(t) || (Fr(t) ? Ir.set(t, J(t)) : Ir.set(t, Object.hasOwn(Mr, t) ? Mr[t]() : null)), Ir.get(t);
+}
+var Y = (e, t) => e.normalize ? e.normalize(t) : t;
+function Rr(e, t) {
+	let n = Lr(e);
+	return n ? n.extract(Y(n, String(t ?? ""))) : String(t ?? "");
+}
+function zr(e, t) {
+	let n = Lr(e);
+	if (!n) return String(t ?? "");
+	let r = n.extract(Y(n, String(t ?? "")));
+	return n.post(r, n.layout(r).text);
+}
+function Br(e, t) {
+	let n = Lr(e);
+	return n ? n.layout(n.extract(Y(n, String(t ?? "")))).text : String(t ?? "");
+}
+var Vr = (e, t) => {
+	if (t <= 0) return 0;
+	let n = 0;
+	for (let r = 0; r < e.length; r++) if (e[r] && ++n === t) return r + 1;
+	return e.length;
+}, Hr = /* @__PURE__ */ new WeakMap(), Ur = (e) => Hr.get(e)?.(), Wr = /* @__PURE__ */ new WeakMap();
+function Gr(e, t, n, r) {
+	let i = e.getAll(t), a = Wr.get(e);
+	a || Wr.set(e, a = /* @__PURE__ */ new Set());
+	let o = i.findIndex((e, r) => e === n && !a.has(`${t}\u0000${r}`));
+	if (!(o < 0)) {
+		if (a.add(`${t}\u0000${o}`), i[o] = r, i.length === 1) {
+			e.set(t, r);
+			return;
+		}
+		e.delete(t);
+		for (let n of i) e.append(t, n);
+	}
+}
+function Kr(e) {
+	let t = null, n = null, r = !1, i = (t, n) => n === null ? e.removeAttribute(t) : e.setAttribute(t, n), a, o, s = () => {
+		t?.remove(), t = null, n && (n.hidden = !1), n = null, r && e.classList.remove("error"), r = !1, a !== void 0 && i("aria-invalid", a), o !== void 0 && i("aria-describedby", o), a = void 0, o = void 0;
+	};
+	return (i) => {
+		if (!i) {
+			s();
+			return;
+		}
+		let c = e.closest(".field"), l = c?.querySelector(".field-error");
+		l && l !== t && l.textContent.trim() || (t || (r = !e.classList.contains("error"), e.classList.add("error"), a = e.getAttribute("aria-invalid"), o = e.getAttribute("aria-describedby"), c && (t = document.createElement("div"), t.className = "field-error", e.id && (t.id = `${e.id}-error`), n = c.querySelector(".field-hint"), n && (n.hidden = !0), c.insertBefore(t, [...c.children].find((e) => e.classList.contains("field-count")) ?? null), t.id && e.setAttribute("aria-describedby", t.id)), e.setAttribute("aria-invalid", "true")), t && (t.textContent = i));
+	};
+}
+function qr(e, { mask: t, postFormatted: n = !1, onChange: r, onInvalidChange: i } = {}) {
+	let a = Lr(t);
+	if (!a || !Er.has(e.type)) return () => {};
+	let o = Object.getPrototypeOf(e), s = Object.getOwnPropertyDescriptor(o, "value").set, c = !e.hasAttribute("inputmode");
+	c && e.setAttribute("inputmode", a.inputMode);
+	let l = i ?? Kr(e), u = null, d = !1, f = !1, p = !1, m = "", h = "", g, _ = () => {
+		let e = p ? m : "";
+		e !== h && (h = e, l(h));
+	}, v = (t, n, i) => {
+		let o = a.extract(t.slice(0, n)).length, c = a.extract(t), { text: l, isRaw: d } = a.layout(c);
+		if (e.value !== l && (s.call(e, l), document.activeElement === e && Er.has(e.type))) {
+			let t = Vr(d, o);
+			e.setSelectionRange(t, t);
+		}
+		e.dataset.maskRaw = c, m = c && !a.isValid(c) ? a.message : "", e.setCustomValidity(m), _(), i && c !== u && r?.(c, l), u = c;
+	}, y = Object.getOwnPropertyDescriptor(e, "value"), b = y ?? Object.getOwnPropertyDescriptor(o, "value");
+	Object.defineProperty(e, "value", {
+		configurable: !0,
+		enumerable: b.enumerable,
+		get: () => b.get.call(e),
+		set: (t) => {
+			if (b.set.call(e, t), f) return;
+			let n = Y(a, e.value);
+			v(n, n.length, !0);
+		}
+	});
+	let x = () => {
+		d = !0, e.dispatchEvent(new Event("input", { bubbles: !0 })), d = !1;
+	}, S = (t) => {
+		if (d || f || t.isComposing) return;
+		let n = t.inputType === "insertText" && (t.data?.length ?? 0) <= 1 || t.inputType?.startsWith("delete") ? e.value : Y(a, e.value);
+		v(n, e.selectionStart ?? n.length, !0);
+	}, ee = () => {
+		f = !0;
+	}, C = () => {
+		f = !1;
+		let t = Y(a, e.value);
+		v(t, e.selectionStart ?? t.length, !0), x();
+	}, w = (t) => {
+		let n = t.inputType === "deleteContentBackward";
+		if (!n && t.inputType !== "deleteContentForward" || t.isComposing) return;
+		let r = e.selectionStart;
+		if (r == null || r !== e.selectionEnd) return;
+		let { isRaw: i } = a.layout(a.extract(e.value)), o = n ? r - 1 : r;
+		for (; o >= 0 && o < i.length && !i[o];) o += n ? -1 : 1;
+		o !== (n ? r - 1 : r) && (t.preventDefault(), !(o < 0 || o >= i.length) && (v(e.value.slice(0, o) + e.value.slice(o + 1), n ? o : r, !0), x()));
+	}, T = (t) => {
+		if (e.readOnly || e.disabled) return;
+		let n = t.clipboardData?.getData("text");
+		if (n == null) return;
+		t.preventDefault();
+		let r = Y(a, n), i = e.selectionStart ?? e.value.length, o = e.selectionEnd ?? i;
+		v(e.value.slice(0, i) + r + e.value.slice(o), i + r.length, !0), x();
+	}, E = () => {
+		let t = a.extract(e.value);
+		return a.post(t, a.layout(t).text);
+	}, D = () => {
+		p = !0, _();
+	};
+	e.addEventListener("input", S), e.addEventListener("beforeinput", w), e.addEventListener("paste", T), e.addEventListener("compositionstart", ee), e.addEventListener("compositionend", C), e.addEventListener("blur", D), e.addEventListener("invalid", D);
+	let O = e.form, te = (t) => {
+		e.name && !e.disabled && Gr(t.formData, e.name, e.value, E());
+	}, ne = () => {
+		clearTimeout(g), g = setTimeout(() => {
+			p = !1, v(Y(a, e.value), e.value.length, !0);
+		}, 0);
+	};
+	n || (O?.addEventListener("formdata", te), Hr.set(e, E)), O?.addEventListener("reset", ne), O?.addEventListener("submit", D);
+	let re = Y(a, e.value);
+	return v(re, re.length, !1), () => {
+		clearTimeout(g), e.removeEventListener("input", S), e.removeEventListener("beforeinput", w), e.removeEventListener("paste", T), e.removeEventListener("compositionstart", ee), e.removeEventListener("compositionend", C), e.removeEventListener("blur", D), e.removeEventListener("invalid", D), O?.removeEventListener("formdata", te), O?.removeEventListener("reset", ne), O?.removeEventListener("submit", D), Hr.delete(e), y ? Object.defineProperty(e, "value", y) : delete e.value, p = !1, m = "", _(), e.setCustomValidity(""), delete e.dataset.maskRaw, c && e.removeAttribute("inputmode");
+	};
+}
+function Jr() {
+	let e = typeof window > "u" ? void 0 : window.jQuery?.validator?.prototype;
+	if (!e || e.wuiMaskHook) return;
+	let t = e.elementValue;
+	e.elementValue = function(e) {
+		let n = Ur(e);
+		return n === void 0 ? t.call(this, e) : n;
+	}, e.wuiMaskHook = !0;
+}
+var Yr = /* @__PURE__ */ new WeakMap(), Xr, Zr = (e) => {
+	Yr.has(e) || Yr.set(e, qr(e, {
+		mask: e.dataset.appMask,
+		postFormatted: e.hasAttribute("data-mask-post-formatted")
+	}));
+}, Qr = (e) => e.nodeType === 1 ? [...e.matches("input[data-app-mask]") ? [e] : [], ...e.querySelectorAll("input[data-app-mask]")] : [];
+function $r() {
+	Xr || typeof MutationObserver > "u" || (Xr = new MutationObserver((e) => {
+		for (let t of e) {
+			for (let e of t.removedNodes) for (let t of Qr(e)) Yr.get(t)?.(), Yr.delete(t);
+			for (let e of t.addedNodes) for (let t of Qr(e)) Zr(t);
+		}
+	}), Xr.observe(document.documentElement, {
+		childList: !0,
+		subtree: !0
+	}));
+}
+function ei(e = document) {
+	Jr();
+	for (let t of e.querySelectorAll("input[data-app-mask]")) Zr(t);
+	e === document && $r();
 }
 //#endregion
 //#region src/passwordRules.js
-var wt = {
+var ti = {
 	minLength: 8,
 	uppercase: !0,
 	lowercase: !0,
 	digit: !0,
 	special: !0,
 	uniqueChars: 0
-}, Tt = "Password requirements";
-function Et(e) {
-	return e === !0 || e == null ? { ...wt } : {
-		...wt,
+}, ni = "Password requirements";
+function ri(e) {
+	return e === !0 || e == null ? { ...ti } : {
+		...ti,
 		...e
 	};
 }
-function Dt(e) {
-	let t = Et(e), n = [];
+function ii(e) {
+	let t = ri(e), n = [];
 	if (t.minLength > 0 && n.push({
 		key: "length",
 		label: `At least ${t.minLength} characters long`,
@@ -5380,89 +7097,145 @@ function Dt(e) {
 	}
 	return n;
 }
-function Ot(e, t) {
+function ai(e, t) {
 	let n = e == null ? "" : String(e);
-	return Dt(t).map((e) => ({
+	return ii(t).map((e) => ({
 		key: e.key,
 		label: e.label,
 		met: e.test(n)
 	}));
 }
-function kt(e, t) {
-	return Ot(e, t).every((e) => e.met);
+function oi(e, t) {
+	return ai(e, t).every((e) => e.met);
+}
+//#endregion
+//#region src/remoteModal.js
+function si(e = document) {}
+function ci(e, t = {}) {
+	return Promise.reject(/* @__PURE__ */ Error(`WUI.modal.load(${String(e)}): server-loaded modals are not available in this build.`));
+}
+//#endregion
+//#region src/serverTable.js
+function li(e = document) {}
+function ui(e) {
+	return null;
+}
+//#endregion
+//#region src/shellParts.js
+function di(e = document) {}
+function fi(e) {
+	return null;
+}
+//#endregion
+//#region src/tableSelect.js
+var pi = "Select all rows", mi = "Select row", X = "wui-select-cell", hi = (e, t) => {
+	let n = e.createElement("input");
+	return n.type = "checkbox", n.className = "wui-check", n.setAttribute("aria-label", t), n;
+};
+function gi(e = document) {
+	let t = e.createElement("th");
+	return t.className = X, t.appendChild(hi(e, pi)), t;
+}
+function _i(e = document) {
+	let t = e.createElement("td");
+	return t.className = X, t.appendChild(hi(e, mi)), t;
+}
+function vi(e = document) {
+	let t = e.createElement("td");
+	return t.className = X, t;
+}
+var yi = (e) => e.firstElementChild?.classList.contains(X);
+function bi(e) {
+	for (let t of e) yi(t) || t.insertBefore(_i(t.ownerDocument), t.firstChild);
+}
+function xi(e) {
+	let t = e.querySelector("thead tr");
+	if (!t) return null;
+	yi(t) || t.insertBefore(gi(e.ownerDocument), t.firstChild), bi(e.querySelectorAll("tbody tr"));
+	for (let t of e.querySelectorAll("tfoot tr")) yi(t) || t.insertBefore(vi(e.ownerDocument), t.firstChild);
+	return t.querySelector(`.${X} .wui-check`);
+}
+function Si(e) {
+	let t = e.querySelector(`thead .${X} .wui-check`), n = [...e.querySelectorAll("tbody tr .wui-check")], r = n.length, i = n.filter((e) => e.checked).length;
+	t && (t.checked = r > 0 && i === r, t.indeterminate = i > 0 && i < r);
+	for (let t of e.querySelectorAll("tbody tr")) t.classList.toggle("is-selected", !!t.querySelector(".wui-check")?.checked);
+	return {
+		selected: i,
+		total: r
+	};
 }
 //#endregion
 //#region src/themeTransition.js
-var At = [
+var Ci = [
 	"light",
 	"dark",
 	"auto"
-], jt = [
+], wi = [
 	"wave",
 	"circle",
 	"slide",
 	"blinds",
 	"fade",
 	"none"
-], Mt = "wave", Nt = "theme", Pt = {
+], Ti = "wave", Ei = "theme", Di = {
 	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";
+}, Oi = "wui-theme-switching", ki = "wui-theme-change", Ai = "wui-theme-toggle", ji = "(prefers-color-scheme: dark)", Mi = (e) => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(e).matches, Ni = (e) => Ci.includes(e);
+function Pi(e) {
+	return e === "dark" || e === "auto" && Mi(ji) ? "dark" : "light";
 }
-function Ht(e = Nt, { includeAuto: t = !1 } = {}) {
+function Fi(e = Ei, { includeAuto: t = !1 } = {}) {
 	let n = null;
 	try {
 		n = window.localStorage.getItem(e);
 	} catch {}
-	return !Bt(n) || n === "auto" && !t ? "light" : n;
+	return !Ni(n) || n === "auto" && !t ? "light" : n;
 }
-function Ut(e, t = Nt) {
+function Ii(e, t = Ei) {
 	try {
 		window.localStorage.setItem(t, e);
 	} catch {}
 }
-function Wt(e) {
+function Li(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 } }));
+	t.setAttribute("data-theme", e), t.setAttribute("data-bs-theme", Pi(e)), document.dispatchEvent(new CustomEvent(ki, { detail: { mode: e } }));
 }
-function Gt(e, { includeAuto: t = !1 } = {}) {
+function Ri(e, { includeAuto: t = !1 } = {}) {
 	return e === "light" ? "dark" : e === "dark" && t ? "auto" : "light";
 }
-function Kt(e) {
+function zi(e) {
 	if (typeof window > "u" || typeof window.matchMedia != "function") return () => {};
-	let t = window.matchMedia(Rt), n = () => e(t.matches ? "dark" : "light");
+	let t = window.matchMedia(ji), 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 = {
+var Bi = 60, Vi = (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`, Hi = {
 	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)];
+}, Ui = 6, Wi = (e, t, n, r, i) => {
+	let { amplitude: a, segments: o, cycles: s } = Hi, 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++) {
+}, Gi = (e, t, n, r) => {
+	let i = t / Ui, a = [];
+	for (let t = 0; t < Ui; 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 } = {}) {
+function Ki(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);
+	for (let r = 0; r <= Bi; r++) {
+		let s = r / Bi, c = Vi(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));
@@ -5475,7 +7248,7 @@ function $t(e, { width: t, height: n, to: r = "dark", origin: i } = {}) {
 				break;
 			}
 			case "blinds":
-				o.push({ clipPath: Qt(t, n, c, a) });
+				o.push({ clipPath: Gi(t, n, c, a) });
 				break;
 			case "fade":
 				o.push({
@@ -5484,20 +7257,20 @@ function $t(e, { width: t, height: n, to: r = "dark", origin: i } = {}) {
 				});
 				break;
 			case "none": return [];
-			default: o.push({ clipPath: Zt(t, n, c, s * Yt.ripples * 2 * Math.PI, a) });
+			default: o.push({ clipPath: Wi(t, n, c, s * Hi.ripples * 2 * Math.PI, a) });
 		}
 	}
 	return o;
 }
-function en(e, { effect: t = Mt, to: n, origin: r, duration: i, live: a } = {}) {
+function qi(e, { effect: t = Ti, 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);
+	if (t === "none" || s || Mi("(prefers-reduced-motion: reduce)") || typeof document.startViewTransition != "function" || typeof o.animate != "function") return e(), Promise.resolve(!1);
+	o.classList.add(Oi);
 	let c = a instanceof Element ? a : null;
-	c && (c.style.viewTransitionName = Lt);
-	let l = document.startViewTransition(e), u = i ?? Pt[t] ?? Pt.wave;
+	c && (c.style.viewTransitionName = Ai);
+	let l = document.startViewTransition(e), u = i ?? Di[t] ?? Di.wave;
 	return l.ready.then(() => {
-		let e = $t(t, {
+		let e = Ki(t, {
 			width: window.innerWidth,
 			height: window.innerHeight,
 			to: n,
@@ -5509,16 +7282,16 @@ function en(e, { effect: t = Mt, to: n, origin: r, duration: i, live: a } = {})
 			fill: "both",
 			pseudoElement: "::view-transition-new(root)"
 		});
-	}).catch(() => {}), l.finished.catch(() => {}).then(() => (o.classList.remove(Ft), c && (c.style.viewTransitionName = ""), !0));
+	}).catch(() => {}), l.finished.catch(() => {}).then(() => (o.classList.remove(Oi), c && (c.style.viewTransitionName = ""), !0));
 }
 //#endregion
 //#region src/index.js
 var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-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);
+function Ji() {
+	$("wui-select", we), $("wui-country-select", De), $("wui-phone", Gt), $("wui-datepicker", Me), $("wui-date-range", Ne), $("wui-dock", Pe), $("wui-image-crop", ct), $("wui-consent-banner", le), $("wui-slider", Kt), $("wui-sortable", tn), $("wui-timepicker", fn), $("wui-tree", An), $("wui-autocomplete", w), $("wui-command-palette", ne), $("wui-context-menu", Se), $("wui-multiselect", ht), $("wui-taginput", an), $("wui-otp", Dt), $("wui-status-icon", i), $("wui-wizard-step", Pn), $("wui-wizard", Mn);
 }
-tn();
+Ji();
 //#endregion
-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 };
+export { Fn as COPY_FEEDBACK_MS, pn as CSRF_META_NAME, Yn as CURRENCIES, Qn as DATE_PATTERNS, mn as DEFAULT_CSRF_HEADER, Ln as DEFAULT_IMAGE_ACCEPT, Rn as DEFAULT_MAX_SIZE_MB, ti as DEFAULT_PASSWORD_RULES, ni as DEFAULT_REQUIREMENTS_TITLE, Ti as DEFAULT_THEME_EFFECT, Ei as DEFAULT_THEME_STORAGE_KEY, Zn as DURATION_UNITS, er as EMPTY_VALUE, Jn as FORMAT_STYLES, hn as HTTP_KINDS, $n as IST_TIME_ZONE, Er as MASK_INPUT_TYPES, Nr as MASK_NAMES, Xn as MONEY_UNITS, pi as SELECT_ALL_LABEL, X as SELECT_CELL_CLASS, mi as SELECT_ROW_LABEL, r as STATUS_TONES, ki as THEME_CHANGE_EVENT, wi as THEME_EFFECTS, Di as THEME_EFFECT_DURATION, Ai as THEME_LIVE_NAME, Ci as THEME_MODES, Oi as THEME_SWITCHING_CLASS, W as WUI_HEADERS, w as WuiAutocomplete, ne as WuiCommandPalette, le as WuiConsentBanner, Se as WuiContextMenu, De as WuiCountrySelect, Me as WuiDatePicker, Ne as WuiDateRange, Pe as WuiDock, ht as WuiMultiSelect, Dt as WuiOtp, Gt as WuiPhone, we as WuiSelect, Kt as WuiSlider, tn as WuiSortable, i as WuiStatusIcon, an as WuiTagInput, fn as WuiTimePicker, An as WuiTree, Mn as WuiWizard, Pn as WuiWizardStep, Gn as acceptLabel, bi as addRowSelectCells, xi as addSelectColumn, Li as applyTheme, qr as attachInputMask, ii as buildPasswordRules, yn as classifyStatus, In as copyTextToClipboard, Sn as createRequestQueue, gi as createSelectHeaderCell, _i as createSelectRowCell, vi as createSelectSpacerCell, Ji as defineWeborityElements, ai as evaluatePassword, gr as formatCompact, mr as formatCurrency, xr as formatDate, vr as formatDuration, Br as formatMasked, pr as formatNumber, _r as formatPercent, Sr as formatValue, ui as getServerTable, fi as getShell, _ as glyphSvg, ei as initInputMasks, si as initRemoteModals, li as initServerTables, di as initShellParts, Un as isImageFile, Wn as isImageOnlyAccept, Fr as isMaskPattern, ci as loadRemoteModal, Ur as maskedPostValue, D as matchSegments, Kn as matchesAccept, Ri as nextTheme, oi as passwordSatisfies, zr as postedMasked, Rr as rawMasked, _n as readCsrf, Fi as readStoredTheme, Lr as resolveMask, Pi as resolveTheme, Ii as storeTheme, Si as syncSelectAll, Ki as themeKeyframes, yr as toInstant, qi as transitionTheme, qn as validateFile, zi as watchSystemTheme, xn as wuiFetch };