@webority/ui-elements 0.14.0 → 0.15.0

package/dist/ui-elements.js

@@ -542,7 +542,154 @@ 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 = {
+}, C = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), w = (e) => String(e ?? "").replace(/<[^>]*>/g, "");
+//#endregion
+//#region src/textMatch.js
+function T(e, t) {
+	let n = String(e ?? ""), r = String(t ?? "").trim();
+	if (!r || !n) return [{
+		text: n,
+		match: !1
+	}];
+	let i = n.toLowerCase(), a = r.toLowerCase();
+	if (i.length !== n.length) return [{
+		text: n,
+		match: !1
+	}];
+	let o = [], s = 0, c = i.indexOf(a, s);
+	for (; c !== -1;) c > s && o.push({
+		text: n.slice(s, c),
+		match: !1
+	}), o.push({
+		text: n.slice(c, c + a.length),
+		match: !0
+	}), s = c + a.length, c = i.indexOf(a, s);
+	return s < n.length && o.push({
+		text: n.slice(s),
+		match: !1
+	}), o;
+}
+//#endregion
+//#region src/WuiCommandPalette.js
+var E = "[role=\"option\"]", D = "No results", ee = class extends e {
+	static get observedAttributes() {
+		return [
+			"filter",
+			"highlight",
+			"empty-text"
+		];
+	}
+	constructor() {
+		super(), this._activeId = null, this._lastQuery = null, this._onKeyDown = (e) => this._handleKeyDown(e), this._onClick = (e) => {
+			let t = this._optionFrom(e.target);
+			t && this._select(t);
+		}, this._onMouseDown = (e) => {
+			this._optionFrom(e.target) && e.preventDefault();
+		}, this._onMouseMove = (e) => {
+			let t = this._optionFrom(e.target);
+			t && t.id !== this._activeId && this._setActive(t, !1);
+		}, this._onInput = (e) => {
+			!this.hasAttribute("filter") || e.target !== this._input() || (this._applyFilter(), this.refresh());
+		};
+	}
+	connectedCallback() {
+		this._teardown(), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("click", this._onClick), this.addEventListener("mousedown", this._onMouseDown), this.addEventListener("mousemove", this._onMouseMove), this.addEventListener("input", this._onInput), this.hasAttribute("filter") && this._applyFilter(), this.refresh();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	attributeChangedCallback() {
+		this.isConnected && (this.hasAttribute("filter") && this._applyFilter(), this.refresh());
+	}
+	get filter() {
+		return this.hasAttribute("filter");
+	}
+	set filter(e) {
+		this.toggleAttribute("filter", !!e);
+	}
+	get highlight() {
+		return this.getAttribute("highlight") !== "false";
+	}
+	set highlight(e) {
+		this.setAttribute("highlight", e ? "true" : "false");
+	}
+	get emptyText() {
+		return this.getAttribute("empty-text") ?? D;
+	}
+	set emptyText(e) {
+		this.setAttribute("empty-text", String(e ?? ""));
+	}
+	refresh() {
+		let e = this._input(), t = e ? e.value : "", n = t !== this._lastQuery;
+		this._lastQuery = t;
+		let r = this._visibleOptions(), i = n ? null : r.find((e) => e.id === this._activeId);
+		this._setActive(i ?? r[0] ?? null, n);
+	}
+	_input() {
+		return this.querySelector("[role=\"combobox\"]");
+	}
+	_optionFrom(e) {
+		let t = e?.closest?.(E);
+		return t && this.contains(t) && !this._isHidden(t) ? t : null;
+	}
+	_isHidden(e) {
+		return e.hidden || !!e.closest("[role=\"group\"]")?.hidden;
+	}
+	_visibleOptions() {
+		return [...this.querySelectorAll(E)].filter((e) => !this._isHidden(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");
+		let n = this._input();
+		n && (e ? n.setAttribute("aria-activedescendant", e.id) : n.removeAttribute("aria-activedescendant")), e && t && e.scrollIntoView({ block: "nearest" });
+	}
+	_move(e) {
+		let t = this._visibleOptions();
+		if (!t.length) return;
+		let n = t.findIndex((e) => e.id === this._activeId), r = n < 0 ? e > 0 ? 0 : t.length - 1 : (n + e + t.length) % t.length;
+		this._setActive(t[r], !0);
+	}
+	_handleKeyDown(e) {
+		if (e.target === this._input()) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), this._move(e.key === "ArrowDown" ? 1 : -1);
+			else if (e.key === "Enter" && !e.isComposing) {
+				let t = this._visibleOptions().find((e) => e.id === this._activeId);
+				if (!t) return;
+				e.preventDefault(), this._select(t);
+			}
+		}
+	}
+	_select(e) {
+		this.dispatchEvent(new CustomEvent("wui-command-palette:select", {
+			bubbles: !0,
+			cancelable: !0,
+			detail: {
+				key: e.dataset.key ?? null,
+				groupKey: e.dataset.groupKey ?? null,
+				id: e.id
+			}
+		})) && e.dataset.href && this._navigate(e.dataset.href);
+	}
+	_navigate(e) {
+		window.location.assign(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)) {
+			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(""));
+		}
+		for (let e of this.querySelectorAll("[role=\"group\"]")) e.hidden = ![...e.querySelectorAll(E)].some((e) => !e.hidden);
+		let a = this.querySelector("[role=\"listbox\"]");
+		a && (a.hidden = i === 0);
+		let o = this.querySelector(".wui-cmd-empty");
+		o && (o.textContent = n && i === 0 ? this.emptyText : "");
+	}
+	_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 = {
 	"--color-primary": "#4F46E5",
 	"--color-primary-hover": "#4338CA",
 	"--color-text": "#071437",
@@ -552,21 +699,21 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 	"--wui-radius-lg": "14px",
 	"--wui-shadow-overlay-lg": "0 24px 60px -16px rgba(7, 20, 55, 0.28)",
 	"--wui-z-fixed": "1030"
-}, E = (e) => `var(${e}, ${T[e]})`, D = `
+}, O = (e) => `var(${e}, ${te[e]})`, ne = `
 :host {
     all: initial;
     position: fixed;
     bottom: 20px;
     left: 20px;
     right: auto;
-    z-index: ${E("--wui-z-fixed")};
+    z-index: ${O("--wui-z-fixed")};
     display: block;
     width: 420px;
     max-width: calc(100vw - 40px);
     font-family: inherit;
     font-size: 16px;
     line-height: 1.5;
-    color: ${E("--color-text")};
+    color: ${O("--color-text")};
 }
 :host([position="bottom-right"]) {
     right: 20px;
@@ -584,10 +731,10 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 
 .wui-consent-banner-panel {
     padding: 20px;
-    background: ${E("--color-surface")};
-    border: 1px solid ${E("--color-border")};
-    border-radius: ${E("--wui-radius-lg")};
-    box-shadow: ${E("--wui-shadow-overlay-lg")};
+    background: ${O("--color-surface")};
+    border: 1px solid ${O("--color-border")};
+    border-radius: ${O("--wui-radius-lg")};
+    box-shadow: ${O("--wui-shadow-overlay-lg")};
     text-align: start;
     pointer-events: auto;
 }
@@ -596,16 +743,16 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
-    color: ${E("--color-text")};
+    color: ${O("--color-text")};
 }
 .wui-consent-banner-description {
     margin: 0 0 16px;
     font-size: 14px;
     line-height: 1.5;
-    color: ${E("--color-text-muted")};
+    color: ${O("--color-text-muted")};
 }
 .wui-consent-banner-policy {
-    color: ${E("--color-primary")};
+    color: ${O("--color-primary")};
     font-weight: 500;
 }
 
@@ -616,15 +763,15 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
     margin: 0 0 16px;
     padding: 12px 0;
     overflow-y: auto;
-    border-top: 1px solid ${E("--color-border")};
-    border-bottom: 1px solid ${E("--color-border")};
+    border-top: 1px solid ${O("--color-border")};
+    border-bottom: 1px solid ${O("--color-border")};
 }
 .wui-consent-banner-category-description {
     margin: 2px 0 0;
     padding-inline-start: 2.5em;
     font-size: 12px;
     line-height: 1.4;
-    color: ${E("--color-text-muted")};
+    color: ${O("--color-text-muted")};
 }
 
 .form-check {
@@ -642,20 +789,20 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
     margin: 0;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 2em;
-    background: ${E("--color-surface")} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat;
+    background: ${O("--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: ${E("--color-primary")};
-    background: ${E("--color-primary")} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat;
+    border-color: ${O("--color-primary")};
+    background: ${O("--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 ${E("--color-primary")};
+    outline: 2px solid ${O("--color-primary")};
     outline-offset: 2px;
 }
 .form-check-label {
@@ -684,33 +831,33 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
     cursor: pointer;
 }
 .btn:focus-visible {
-    outline: 2px solid ${E("--color-primary")};
+    outline: 2px solid ${O("--color-primary")};
     outline-offset: 2px;
 }
 .btn-primary {
-    background: ${E("--color-primary")};
-    border-color: ${E("--color-primary")};
+    background: ${O("--color-primary")};
+    border-color: ${O("--color-primary")};
     color: #fff;
 }
 .btn-primary:hover {
-    background: ${E("--color-primary-hover")};
-    border-color: ${E("--color-primary-hover")};
+    background: ${O("--color-primary-hover")};
+    border-color: ${O("--color-primary-hover")};
 }
 .btn-outline-secondary {
-    border-color: ${E("--color-text-muted")};
-    color: ${E("--color-text-muted")};
+    border-color: ${O("--color-text-muted")};
+    color: ${O("--color-text-muted")};
 }
 .btn-outline-secondary:hover {
-    background: ${E("--color-text-muted")};
+    background: ${O("--color-text-muted")};
     color: #fff;
 }
 .btn-link {
     font-weight: 400;
-    color: ${E("--color-primary")};
+    color: ${O("--color-primary")};
     text-decoration: underline;
 }
 .btn-link:hover {
-    color: ${E("--color-primary-hover")};
+    color: ${O("--color-primary-hover")};
 }
 .wui-consent-banner-settings-toggle {
     margin-inline-end: auto;
@@ -730,7 +877,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
         max-width: none;
     }
 }
-`, ee = "wui-consent-save", te = "[data-consent-settings]", O = {
+`, re = "wui-consent-save", ie = "[data-consent-settings]", k = {
 	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",
@@ -746,11 +893,11 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 	rejectLabel: "Reject all",
 	acceptLabel: "Accept all",
 	saveLabel: "Save preferences"
-}, ne = [
+}, ae = [
 	"analytics",
 	"functional",
 	"marketing"
-], re = 0, ie = class extends e {
+], oe = 0, se = class extends e {
 	static get observedAttributes() {
 		return [
 			"heading",
@@ -763,12 +910,12 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		];
 	}
 	constructor() {
-		super(), re += 1, this._uid = `wui-consent-${re}`, this._preferences = {
+		super(), oe += 1, this._uid = `wui-consent-${oe}`, this._preferences = {
 			analytics: !1,
 			functional: !1,
 			marketing: !1
 		}, this._settings = !1, this._onDocumentClick = (e) => {
-			e.target instanceof Element && e.target.closest(te) && (e.preventDefault(), this.open({
+			e.target instanceof Element && e.target.closest(ie) && (e.preventDefault(), this.open({
 				settings: !0,
 				focus: !0
 			}));
@@ -787,13 +934,13 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		this.toggleAttribute("standalone", e === !0 || e === "" || e === "true");
 	}
 	get heading() {
-		return this.getAttribute("heading") || O.heading;
+		return this.getAttribute("heading") || k.heading;
 	}
 	set heading(e) {
 		this.setAttribute("heading", String(e ?? ""));
 	}
 	get description() {
-		return this.getAttribute("description") || O.description;
+		return this.getAttribute("description") || k.description;
 	}
 	set description(e) {
 		this.setAttribute("description", String(e ?? ""));
@@ -805,25 +952,25 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		this.setAttribute("policy-href", String(e ?? ""));
 	}
 	get policyLabel() {
-		return this.getAttribute("policy-label") || O.policyLabel;
+		return this.getAttribute("policy-label") || k.policyLabel;
 	}
 	set policyLabel(e) {
 		this.setAttribute("policy-label", String(e ?? ""));
 	}
 	get analyticsDescription() {
-		return this.getAttribute("analytics-description") || O.analyticsDescription;
+		return this.getAttribute("analytics-description") || k.analyticsDescription;
 	}
 	set analyticsDescription(e) {
 		this.setAttribute("analytics-description", String(e ?? ""));
 	}
 	get functionalDescription() {
-		return this.getAttribute("functional-description") || O.functionalDescription;
+		return this.getAttribute("functional-description") || k.functionalDescription;
 	}
 	set functionalDescription(e) {
 		this.setAttribute("functional-description", String(e ?? ""));
 	}
 	get marketingDescription() {
-		return this.getAttribute("marketing-description") || O.marketingDescription;
+		return this.getAttribute("marketing-description") || k.marketingDescription;
 	}
 	set marketingDescription(e) {
 		this.setAttribute("marketing-description", String(e ?? ""));
@@ -851,22 +998,22 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered && this.render();
 	}
 	render() {
-		let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${ae(this.policyHref)}">${A(this.policyLabel)}</a>` : "", r = this._root();
-		r.innerHTML = `${r === this ? "" : `<style>${D}</style>`}
+		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>`}
       <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">${A(this.heading)}</h2>
-        <p class="wui-consent-banner-description" id="${t}-description">${A(this.description)}${n}</p>
+        <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>
         <div class="wui-consent-banner-settings" hidden>
-          ${k(t, "essential", O.essentialLabel, O.essentialDescription, !0)}
-          ${k(t, "analytics", O.analyticsLabel, this.analyticsDescription, !1)}
-          ${k(t, "functional", O.functionalLabel, this.functionalDescription, !1)}
-          ${k(t, "marketing", O.marketingLabel, this.marketingDescription, !1)}
+          ${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)}
         </div>
         <div class="wui-consent-banner-actions">
-          <button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${O.settingsLabel}</button>
-          <button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${O.rejectLabel}</button>
-          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${O.acceptLabel}</button>
-          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${O.saveLabel}</button>
+          <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>
         </div>
       </div>`, this._rendered = !0, this._wire(), this._applyPreferences(), this._showSettings(this._settings), e && (this._panel().hidden = !1);
 	}
@@ -896,7 +1043,7 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		})), 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(ee, {
+		this._preferences = { ...e }, this.dispatchEvent(new CustomEvent(re, {
 			bubbles: !0,
 			composed: !0,
 			detail: { ...e }
@@ -904,11 +1051,11 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	_switchValues() {
 		let e = {};
-		for (let t of ne) e[t] = this._root().querySelector(`input[data-category="${t}"]`)?.checked === !0;
+		for (let t of ae) e[t] = this._root().querySelector(`input[data-category="${t}"]`)?.checked === !0;
 		return e;
 	}
 	_applyPreferences() {
-		for (let e of ne) {
+		for (let e of ae) {
 			let t = this._root().querySelector(`input[data-category="${e}"]`);
 			t && (t.checked = this._preferences[e]);
 		}
@@ -926,17 +1073,17 @@ var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&am
 		}
 	}
 };
-function k(e, t, n, r, i) {
+function A(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}">${A(n)}</label>
+              <label class="form-check-label" for="${a}">${j(n)}</label>
             </div>
-            <p class="wui-consent-banner-category-description">${A(r)}</p>
+            <p class="wui-consent-banner-category-description">${j(r)}</p>
           </div>`;
 }
-var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ae = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), j = [
+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 = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2162,11 +2309,11 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		"Zimbabwe",
 		"263"
 	]
-], M = (e) => (j.find((t) => t[0] === e) || [
+], N = (e) => (M.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], N = class extends e {
+])[2], P = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2255,19 +2402,19 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		this._listboxId = u;
 		let d = e.map((e, t) => {
 			let n = String(e.value) === String(this._value);
-			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}">${x(e)}</button>`;
+			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>`;
 		}).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="${P(u)}" aria-label="${P(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
+        <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>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${P(u)}" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search">${m("search")}<input class="search-select-input" placeholder="${P(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="${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-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();
@@ -2372,29 +2519,29 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, P = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), oe = (e) => {
+}, F = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), le = (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;
-}, se = (e) => {
-	let t = oe(e);
-	return j.filter(([e]) => !t || t.has(e)).map(([e, t]) => ({
+}, ue = (e) => {
+	let t = le(e);
+	return M.filter(([e]) => !t || t.has(e)).map(([e, t]) => ({
 		value: e,
 		label: t,
 		flag: e
 	}));
-}, ce = class extends N {
+}, de = class extends P {
 	static get observedAttributes() {
-		return [...N.observedAttributes, "countries"];
+		return [...P.observedAttributes, "countries"];
 	}
 	_readOptions() {
 		let e = this.getAttribute("countries");
 		return this._countryCache?.attr !== e && (this._countryCache = {
 			attr: e,
-			options: se(e)
+			options: ue(e)
 		}), this._countryCache.options;
 	}
-}, F = [
+}, I = [
 	"January",
 	"February",
 	"March",
@@ -2407,7 +2554,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	"October",
 	"November",
 	"December"
-], I = [
+], L = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -2415,24 +2562,24 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	"Th",
 	"Fr",
 	"Sa"
-], L = (e) => String(e).padStart(2, "0"), R = (e, t, n) => `${e}-${L(t + 1)}-${L(n)}`, z = (e) => {
+], R = (e) => String(e).padStart(2, "0"), z = (e, t, n) => `${e}-${R(t + 1)}-${R(n)}`, B = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, B = (e) => {
-	let t = z(e);
-	return t ? `${L(t.d)} ${F[t.m].slice(0, 3)} ${t.y}` : "";
-}, V = (e, t) => new Date(e, t + 1, 0).getDate(), H = (e, t) => {
+}, V = (e) => {
+	let t = B(e);
+	return t ? `${R(t.d)} ${I[t.m].slice(0, 3)} ${t.y}` : "";
+}, H = (e, t) => new Date(e, t + 1, 0).getDate(), U = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, le = class extends e {
+}, fe = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2492,13 +2639,13 @@ var A = (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 = z(this._value);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = B(this._value);
 		t && (this._viewY = t.y, this._viewM = t.m);
 		let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="datepicker">
         <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("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 ? B(this._value) : _(e)}</span>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? V(this._value) : _(e)}</span>
           ${m("calendar-dots")}
         </button>
         <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
@@ -2510,11 +2657,11 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	_syncTrigger() {
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = z(this._value);
-		t.textContent = n ? B(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = B(this._value);
+		t.textContent = n ? V(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_limits() {
-		let e = z(this.getAttribute("min")), t = z(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 = B(this.getAttribute("min")), t = B(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
 		return {
 			dayDisabled: (e, t, i) => {
 				let a = new Date(e, t, i).getTime();
@@ -2522,7 +2669,7 @@ var A = (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, V(e, t)).getTime() < n || i > r;
+				return new Date(e, t, H(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -2535,28 +2682,28 @@ var A = (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 = V(this._viewY, this._viewM), r = z(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 = H(this._viewY, this._viewM), r = B(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
 		}, s = (e, t, n, s) => {
-			let c = R(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 = z(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
 			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 = H(this._viewY, this._viewM - 1), u = V(l.y, l.m);
+		}, c = "", l = U(this._viewY, this._viewM - 1), u = H(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 = H(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = U(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()), h = L.map((t, n) => L[(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">${F[this._viewM]} ${this._viewY}</button>
+        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${I[this._viewM]} ${this._viewY}</button>
         <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${m("chevron-right")}</button>
       </div>
       <div class="datepicker-weekdays">${h}</div>
@@ -2567,14 +2714,14 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
       </div>`;
 	}
 	_monthsHtml() {
-		let e = z(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
+		let e = B(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" : ""}>${F[i].slice(0, 3)}</button>`;
+			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${I[i].slice(0, 3)}</button>`;
 		}
 		return `
       <div class="datepicker-head">
@@ -2585,7 +2732,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
       <div class="datepicker-cells">${r}</div>`;
 	}
 	_yearsHtml() {
-		let e = z(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
+		let e = B(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",
@@ -2610,21 +2757,21 @@ var A = (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 } = H(e, t);
+		let { y: i, m: a } = U(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="${R(i, a, n)}"]`)?.focus();
+		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${z(i, a, n)}"]`)?.focus();
 	}
 	_onKey(e) {
 		if (this._mode !== "days") {
 			e.key === "Escape" && this._close();
 			return;
 		}
-		let t = this._focus || z(this._value) || {
+		let t = this._focus || B(this._value) || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
@@ -2642,17 +2789,17 @@ var A = (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 = H(t.y, t.m - (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, V(n.y, n.m)), "slide-prev");
+				let n = U(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, H(n.y, n.m)), "slide-prev");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				let n = H(t.y, t.m + (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, V(n.y, n.m)), "slide-next");
+				let n = U(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, H(n.y, n.m)), "slide-next");
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = R(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 = z(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 				return;
 			case "Escape": return this._close();
 			default:
@@ -2664,7 +2811,7 @@ var A = (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 = z(this._value);
+			let r = /* @__PURE__ */ new Date(), i = B(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 : {
@@ -2679,7 +2826,7 @@ var A = (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 = H(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = U(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -2719,7 +2866,7 @@ var A = (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 = R(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				this.value = z(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
@@ -2747,7 +2894,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ue = class extends e {
+}, pe = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2815,13 +2962,13 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			text: e,
 			empty: !0
 		} : {
-			text: `${B(this._start) || "Start"} – ${B(this._end) || "End"}`,
+			text: `${V(this._start) || "Start"} – ${V(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 = z(this._start);
+		let e = B(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 = `
@@ -2855,24 +3002,24 @@ var A = (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 = z(this.getAttribute("min")), t = z(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 = B(this.getAttribute("min")), t = B(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
 		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 = V(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 = R(e, t, n), o = a(e, t, n);
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = H(e, t), a = this._limits(), o = L.map((e, t) => L[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = z(e, t, n), o = a(e, t, n);
 			return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
-		}, c = "", l = H(e, t - 1), u = V(l.y, l.m);
+		}, c = "", l = U(e, t - 1), u = H(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 = H(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = U(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">${F[t]} ${e}</div>
+        <div class="datepicker-month-label">${I[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -2880,7 +3027,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = H(this._viewY, this._viewM + 1);
+		let t = U(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>
@@ -2906,7 +3053,7 @@ var A = (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 ? `${B(this._start)} – ${B(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${V(this._start)} – ${V(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		c(e, t, { clampHeight: !0 });
@@ -2928,7 +3075,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = z(this._start);
+			let r = B(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -2941,7 +3088,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				let e = H(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = U(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -2971,7 +3118,7 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, de = class extends e {
+}, me = class extends e {
 	static get observedAttributes() {
 		return [
 			"static",
@@ -2992,10 +3139,10 @@ var A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").repl
 		e === "static" && this.isConnected && this._wire();
 	}
 	_maxScale() {
-		return fe(this.getAttribute("max-scale"), 1.6);
+		return he(this.getAttribute("max-scale"), 1.6);
 	}
 	_radius() {
-		return fe(this.getAttribute("radius"), 100);
+		return he(this.getAttribute("radius"), 100);
 	}
 	_magnifyEnabled() {
 		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
@@ -3020,26 +3167,26 @@ var A = (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();
 	}
-}, fe = (e, t) => {
+}, he = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, pe = {
+}, ge = {
 	enter: "Enter",
 	comma: ",",
 	space: " ",
 	tab: "Tab"
-}, me = {
+}, _e = {
 	enter: "\n",
 	comma: ",",
 	space: " ",
 	tab: "	"
-}, he = (e) => pe[e], ge = (e) => me[e];
-function _e(e, t) {
+}, ve = (e) => ge[e], ye = (e) => _e[e];
+function be(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 U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends e {
+var xe = (e, t) => t.some((t) => String(e ?? "").includes(t)), Se = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -3139,7 +3286,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 				[g]: !0,
 				selected: e.hasAttribute("selected")
 			};
-			for (let [n, r] of be) {
+			for (let [n, r] of we) {
 				let i = e.getAttribute(n);
 				i && (t[r] = i);
 			}
@@ -3196,7 +3343,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 	_renderControl() {
 		let e = this.querySelector("[data-chips]");
 		if (!e) return;
-		let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${W(e)}" aria-label="Remove ${W(De(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="${W(e)}" aria-label="Remove ${W(je(this._labelFor(e)))}">${m("x")}</button></span>`).join("");
 		if (n) {
 			for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
 			n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
@@ -3227,11 +3374,11 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 		i.textContent = `+${t.length - o}`;
 	}
 	_matches(e, t) {
-		return De(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
+		return je(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 || De(e.label).trim().toLowerCase() === t);
+		return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || je(e.label).trim().toLowerCase() === t);
 	}
 	_renderOptions(e) {
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
@@ -3240,7 +3387,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 		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 xe(e) ? we(e, r, n) : `<button type="button" role="option" id="${W(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${x(e)}</span><span class="ms-check">${m("check")}</span></button>`;
+			return Te(e) ? Oe(e, r, n) : `<button type="button" role="option" id="${W(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${x(e)}</span><span class="ms-check">${m("check")}</span></button>`;
 		});
 		s && c.push(`<button type="button" role="option" id="${W(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${W(r)}" data-custom="true" aria-selected="false">Add “${_(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
 	}
@@ -3255,7 +3402,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 	_customRefusal(e) {
 		let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
 		if (n) {
-			let r = Ee(n);
+			let r = Ae(n);
 			if (r && !r.test(e)) return t;
 		}
 		let r = this._validateCustom;
@@ -3315,7 +3462,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 		}, w = (e) => {
 			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), S();
 		}, T = (e, { quiet: t = !1 } = {}) => {
-			let n = this._values.length, r = U(e, ye) ? _e(e, ye) : [e], i = [], a = "";
+			let n = this._values.length, r = xe(e, Ce) ? be(e, Ce) : [e], i = [], a = "";
 			for (let e of r) {
 				let t = this._commitTyped(e);
 				t && (i.push(e.trim()), a ||= t);
@@ -3393,7 +3540,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 				(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), D(e);
 			}), o.addEventListener("paste", (e) => {
 				let t = e.clipboardData?.getData("text/plain") ?? "";
-				U(t, ye) && (e.preventDefault(), T(`${o.value}${t}`));
+				xe(t, Ce) && (e.preventDefault(), T(`${o.value}${t}`));
 			}), o.addEventListener("blur", (e) => {
 				e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && T(o.value, { quiet: !0 }), x());
 			});
@@ -3418,35 +3565,35 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, ye = [
+}, Ce = [
 	",",
 	";",
 	"\n",
 	"	"
-], be = [
+], we = [
 	["description", "description"],
 	["avatar", "avatar"],
 	["initials", "initials"],
 	["disabled-hint", "disabledHint"]
-], xe = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Se = (e) => {
+], Te = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Ee = (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 : "";
-}, Ce = (e) => {
-	let t = Se(e.avatar);
+}, De = (e) => {
+	let t = Ee(e.avatar);
 	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${_(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${W(t)}" alt="" />` : ""}</span>`;
-}, we = (e, t, n) => {
+}, Oe = (e, t, n) => {
 	let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${_(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${_(e.disabledHint)}</span>` : "";
-	return `<button type="button" role="option" id="${W(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${x(e)}</span>${i}</span>${a}${Ce(e)}<span class="ms-check">${m("check")}</span></button>`;
-}, Te = /* @__PURE__ */ new Map(), Ee = (e) => {
-	if (Te.has(e)) return Te.get(e);
+	return `<button type="button" role="option" id="${W(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${x(e)}</span>${i}</span>${a}${De(e)}<span class="ms-check">${m("check")}</span></button>`;
+}, ke = /* @__PURE__ */ new Map(), Ae = (e) => {
+	if (ke.has(e)) return ke.get(e);
 	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 Te.set(e, t), t;
-}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), De = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Oe = /[^0-9]/g, ke = /[^0-9a-zA-Z]/g, Ae = class extends e {
+	return ke.set(e, t), t;
+}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), je = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Me = /[^0-9]/g, Ne = /[^0-9a-zA-Z]/g, Pe = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3477,7 +3624,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 		this._value = this._clean(e), f(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ke : Oe, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Ne : Me, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -3568,7 +3715,7 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, je = {
+}, Fe = {
 	AD: ["Europe/Andorra"],
 	AE: ["Asia/Dubai"],
 	AF: ["Asia/Kabul"],
@@ -3970,13 +4117,13 @@ var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends
 	ZA: ["Africa/Johannesburg"],
 	ZM: ["Africa/Lusaka"],
 	ZW: ["Africa/Harare"]
-}, Me = new Set(j.map(([e]) => e)), Ne = /* @__PURE__ */ new Map();
-for (let [e, t] of Object.entries(je)) for (let n of t) Ne.set(n, e);
-function Pe(e) {
-	let t = Ne.get(e);
-	return t && Me.has(t) ? t : null;
+}, Ie = new Set(M.map(([e]) => e)), Le = /* @__PURE__ */ new Map();
+for (let [e, t] of Object.entries(Fe)) for (let n of t) Le.set(n, e);
+function Re(e) {
+	let t = Le.get(e);
+	return t && Ie.has(t) ? t : null;
 }
-function Fe(e) {
+function ze(e) {
 	if (!e) return null;
 	let t;
 	try {
@@ -3984,9 +4131,9 @@ function Fe(e) {
 	} catch {
 		return null;
 	}
-	return t && Me.has(t) ? t : null;
+	return t && Ie.has(t) ? t : null;
 }
-function Ie() {
+function Be() {
 	let e;
 	try {
 		e = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -3994,33 +4141,33 @@ function Ie() {
 		e = void 0;
 	}
 	let t = typeof navigator > "u" ? void 0 : navigator.language;
-	return Pe(e) || Fe(t) || "IN";
+	return Re(e) || ze(t) || "IN";
 }
 //#endregion
 //#region src/WuiPhone.js
-var Le = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, G = null, Re = null;
-function ze() {
-	return G ? Promise.resolve(G) : (Re ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (G = {
+var Ve = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, G = null, He = null;
+function Ue() {
+	return G ? Promise.resolve(G) : (He ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (G = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		parsePhoneNumber: e.parsePhoneNumber,
 		examples: t.default || t
-	}, G)).catch(() => null), Re);
+	}, G)).catch(() => null), He);
 }
-function Be(e, t) {
-	let n = `+${M(e)}`;
+function We(e, t) {
+	let n = `+${N(e)}`;
 	return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
 }
 function K(e, t) {
 	if (!G || !t) return t;
 	try {
-		return Be(e, new G.AsYouType(e).input(`+${M(e)}${t}`)) || t;
+		return We(e, new G.AsYouType(e).input(`+${N(e)}${t}`)) || t;
 	} catch {
 		return t;
 	}
 }
-function Ve(e, t) {
+function Ge(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;
@@ -4029,12 +4176,12 @@ function Ve(e, t) {
 function q(e) {
 	if (!G) return null;
 	try {
-		return Be(e, G.getExampleNumber(e, G.examples)?.formatInternational()) || null;
+		return We(e, G.getExampleNumber(e, G.examples)?.formatInternational()) || null;
 	} catch {
 		return null;
 	}
 }
-function He(e) {
+function Ke(e) {
 	if (!G || !e) return null;
 	try {
 		if (!G.isValidPhoneNumber(e)) return !1;
@@ -4044,7 +4191,7 @@ function He(e) {
 		return null;
 	}
 }
-function Ue(e) {
+function qe(e) {
 	if (!G) return null;
 	try {
 		let t = G.getExampleNumber(e, G.examples);
@@ -4053,7 +4200,7 @@ function Ue(e) {
 		return null;
 	}
 }
-function We(e, t, n) {
+function Je(e, t, n) {
 	try {
 		let r = G.parsePhoneNumber(t, e), i = r?.nationalNumber;
 		return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
@@ -4061,7 +4208,7 @@ function We(e, t, n) {
 		return null;
 	}
 }
-function Ge(e) {
+function Ye(e) {
 	if (!G || !e?.trim().startsWith("+")) return null;
 	try {
 		let t = new G.AsYouType();
@@ -4075,7 +4222,7 @@ function Ge(e) {
 		return null;
 	}
 }
-var Ke = class extends e {
+var Xe = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4095,7 +4242,7 @@ var Ke = class extends e {
 		} catch {
 			this._internals = null;
 		}
-		this._defaultCountry = Ie(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
+		this._defaultCountry = Be(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -4122,13 +4269,13 @@ var Ke = class extends e {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return this._national ? `+${M(this._country)}${this._national}` : "";
+		return this._national ? `+${N(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = Ge(t);
+		let t = String(e ?? "").trim(), n = Ye(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(M(this._country));
+			let e = t.replace(/[^0-9]/g, ""), n = String(N(this._country));
 			n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
 		} else this._national = t.replace(/[^0-9]/g, "");
 		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
@@ -4148,14 +4295,14 @@ var Ke = class extends e {
 		this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
 		let t = `${this.id}-listbox`;
 		this._listboxId = t;
-		let n = j.map(([e, n, r], i) => `<button type="button" role="option" id="${J(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Le(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
+		let n = M.map(([e, n, r], i) => `<button type="button" role="option" id="${J(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Ve(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
           <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${J(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${Le(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${Ve(this._country)}" data-flag aria-hidden="true"></span>
             ${m("chevron-down", { className: "phone-chevron" })}
-            <span class="phone-dial" data-dial>+${M(this._country)}</span>
+            <span class="phone-dial" data-dial>+${N(this._country)}</span>
           </button>
           <div class="country-dropdown-menu" role="listbox" id="${J(t)}" tabindex="-1" hidden>
             <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${m("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${J(t)}" aria-autocomplete="list" /></div>
@@ -4193,7 +4340,7 @@ var Ke = 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 = Le(e)), d && (d.textContent = `+${M(e)}`);
+			this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), s && (s.className = Ve(e)), d && (d.textContent = `+${N(e)}`);
 			for (let t of this._itemEls()) {
 				let n = t.dataset.iso === e;
 				t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
@@ -4240,23 +4387,23 @@ var Ke = 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 = Ue(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 = qe(this._country);
 			if (i && r.length > i) {
-				let e = We(this._country, r, i);
+				let e = Je(this._country, r, i);
 				e ? (n = Math.max(0, n - (r.length - e.length)), r = e) : r = r.slice(0, i);
 			}
 			this._national = r;
 			let a = K(this._country, this._national);
 			if (o.value !== a) {
 				o.value = a;
-				let e = Ve(a, Math.min(n, r.length));
+				let e = Ge(a, Math.min(n, r.length));
 				o.setSelectionRange(e, e);
 			}
-			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || He(this.value) === !0) && x(!1);
+			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Ke(this.value) === !0) && x(!1);
 		}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
-			x(this._national.length > 0 && He(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && Ke(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), o.addEventListener("paste", (e) => {
-			let t = Ge(e.clipboardData?.getData("text"));
+			let t = Ye(e.clipboardData?.getData("text"));
 			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = K(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
 		}), this._bindGlobal = () => {
 			this._teardownGlobals?.(), this._onDocClick = (e) => {
@@ -4266,7 +4413,7 @@ var Ke = class extends e {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this);
-		}, this._bindGlobal(), ze().then((e) => {
+		}, this._bindGlobal(), Ue().then((e) => {
 			if (!(!e || !o.isConnected) && (this._national && (o.value = K(this._country, this._national)), !this.getAttribute("placeholder"))) {
 				let e = q(this._country);
 				e && (o.placeholder = e);
@@ -4279,7 +4426,7 @@ var Ke = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, J = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), qe = class extends e {
+}, J = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ze = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4424,7 +4571,7 @@ var Ke = class extends e {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${Je(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${Qe(this.getAttribute("aria-label") || "Value")}"
           ></button>
         `}
         ${this.hasAttribute("show-value") ? n ? `<span class="slider-value">${this._formatValue(this._start)} – ${this._formatValue(this._end)}</span>` : `<span class="slider-value">${this._formatValue(this._value)}</span>` : ""}
@@ -4529,7 +4676,7 @@ var Ke = class extends e {
 }, Y = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, Je = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ye = class extends e {
+}, Qe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), $e = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -4614,14 +4761,14 @@ var Ke = class extends e {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${Xe(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${m("x")}</button></span>`).join("");
+			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${et(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${m("x")}</button></span>`).join("");
 		}
 	}
 	_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(he).filter(Boolean)), s = () => {
+		let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(ve).filter(Boolean)), s = () => {
 			f(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}, c = (e) => {
 			let t = e.trim();
@@ -4653,9 +4800,9 @@ var Ke = class extends e {
 			e.preventDefault();
 			let n = e.clipboardData.getData("text/plain"), a = [];
 			for (let e of r) {
-				let t = ge(e) ?? e;
-				if (U(n, [t])) {
-					a.push(..._e(n, [t]));
+				let t = ye(e) ?? e;
+				if (xe(n, [t])) {
+					a.push(...be(n, [t]));
 					break;
 				}
 			}
@@ -4683,18 +4830,18 @@ var Ke = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, Xe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ze = (e) => String(e).padStart(2, "0"), Qe = (e, t) => `${Ze(e)}:${Ze(t)}`, Z = (e) => {
+}, et = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), tt = (e) => String(e).padStart(2, "0"), nt = (e, t) => `${tt(e)}:${tt(t)}`, Z = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, $e = (e, t = "24") => {
+}, rt = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return Qe(e.h, e.m);
+	if (t === "24") return nt(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
-	return `${n}:${Ze(e.m)} ${r}`;
-}, et = class extends e {
+	return `${n}:${tt(e.m)} ${r}`;
+}, it = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4754,7 +4901,7 @@ var Ke = class extends e {
 		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 ? $e(t, n) : _(e)}</span>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? rt(t, n) : _(e)}</span>
           ${m("clock")}
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -4767,7 +4914,7 @@ var Ke = class extends e {
 		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
 		let n = Z(this._value), r = this.getAttribute("format") || "24";
-		t.textContent = n ? $e(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		t.textContent = n ? rt(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_buildTimes() {
 		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = Z(t) || {
@@ -4788,8 +4935,8 @@ var Ke = class extends e {
 		if (!e) return;
 		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Z(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			let o = n[e], s = Qe(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\"" : ""}>${$e(o, t)}</button>`;
+			let o = n[e], s = nt(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
+			a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${rt(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -4887,7 +5034,7 @@ var Ke = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, tt = "wui-wizard-step", nt = class extends e {
+}, at = "wui-wizard-step", ot = class extends e {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -4921,7 +5068,7 @@ var Ke = class extends e {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${tt}`)];
+		return [...this.querySelectorAll(`:scope > ${at}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -4960,7 +5107,7 @@ var Ke = class extends e {
 	}
 	_reconcileSteps() {
 		let e = this._steps, t = this._known;
-		if (this._known = e, rt(e, t)) return e;
+		if (this._known = e, st(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];
@@ -4980,7 +5127,7 @@ var Ke = 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]) && rt(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
+		(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && st(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
 	}
 	_syncPanels(e) {
 		e.forEach((e, t) => {
@@ -5084,7 +5231,7 @@ var Ke = class extends e {
 	_reflectActive(e) {
 		this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
 	}
-}, rt = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), it = class extends e {
+}, st = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ct = class extends e {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -5098,8 +5245,8 @@ var Ke = class extends e {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, at = 2e3;
-async function ot(e) {
+}, lt = 2e3;
+async function ut(e) {
 	try {
 		if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
 	} catch {}
@@ -5114,14 +5261,14 @@ async function ot(e) {
 }
 //#endregion
 //#region src/fileValidation.js
-var st = "image/png,image/jpeg,image/webp", ct = 5, lt = {
+var dt = "image/png,image/jpeg,image/webp", ft = 5, pt = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, ut = {
+}, mt = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -5135,7 +5282,7 @@ var st = "image/png,image/jpeg,image/webp", ct = 5, lt = {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, dt = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ft = [
+}, ht = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), gt = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -5146,54 +5293,54 @@ var st = "image/png,image/jpeg,image/webp", ct = 5, lt = {
 	".avif",
 	".heic"
 ];
-function pt(e) {
+function _t(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 ft.some((e) => r.endsWith(e));
+	return gt.some((e) => r.endsWith(e));
 }
-function mt(e) {
-	let t = dt(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? ft.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+function vt(e) {
+	let t = ht(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? gt.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function ht(e) {
+function yt(e) {
 	let t = [];
-	for (let n of dt(e)) {
-		let e = ut[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of ht(e)) {
+		let e = mt[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 gt(e, t) {
-	let n = dt(t);
+function bt(e, t) {
+	let n = ht(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 && (lt[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 && (pt[e] || []).some((e) => i.endsWith(e)));
 }
-function _t(e, t = {}) {
+function xt(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? st : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
-	return gt(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${ht(n)} file.`;
+	let n = t.accept === void 0 ? dt : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
+	return bt(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${yt(n)} file.`;
 }
 //#endregion
 //#region src/passwordRules.js
-var vt = {
+var St = {
 	minLength: 8,
 	uppercase: !0,
 	lowercase: !0,
 	digit: !0,
 	special: !0,
 	uniqueChars: 0
-}, yt = "Password Requirements";
-function bt(e) {
-	return e === !0 || e == null ? { ...vt } : {
-		...vt,
+}, Ct = "Password Requirements";
+function wt(e) {
+	return e === !0 || e == null ? { ...St } : {
+		...St,
 		...e
 	};
 }
-function xt(e) {
-	let t = bt(e), n = [];
+function Tt(e) {
+	let t = wt(e), n = [];
 	if (t.minLength > 0 && n.push({
 		key: "length",
 		label: `At least ${t.minLength} characters long`,
@@ -5224,25 +5371,25 @@ function xt(e) {
 	}
 	return n;
 }
-function St(e, t) {
+function Et(e, t) {
 	let n = e == null ? "" : String(e);
-	return xt(t).map((e) => ({
+	return Tt(t).map((e) => ({
 		key: e.key,
 		label: e.label,
 		met: e.test(n)
 	}));
 }
-function Ct(e, t) {
-	return St(e, t).every((e) => e.met);
+function Dt(e, t) {
+	return Et(e, t).every((e) => e.met);
 }
 //#endregion
 //#region src/index.js
 var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function wt() {
-	$("wui-select", N), $("wui-country-select", ce), $("wui-phone", Ke), $("wui-datepicker", le), $("wui-date-range", ue), $("wui-dock", de), $("wui-consent-banner", ie), $("wui-slider", qe), $("wui-timepicker", et), $("wui-autocomplete", S), $("wui-multiselect", ve), $("wui-taginput", Ye), $("wui-otp", Ae), $("wui-status-icon", i), $("wui-wizard-step", it), $("wui-wizard", nt);
+function Ot() {
+	$("wui-select", P), $("wui-country-select", de), $("wui-phone", Xe), $("wui-datepicker", fe), $("wui-date-range", pe), $("wui-dock", me), $("wui-consent-banner", se), $("wui-slider", Ze), $("wui-timepicker", it), $("wui-autocomplete", S), $("wui-command-palette", ee), $("wui-multiselect", Se), $("wui-taginput", $e), $("wui-otp", Pe), $("wui-status-icon", i), $("wui-wizard-step", ct), $("wui-wizard", ot);
 }
-wt();
+Ot();
 //#endregion
-export { at as COPY_FEEDBACK_MS, st as DEFAULT_IMAGE_ACCEPT, ct as DEFAULT_MAX_SIZE_MB, vt as DEFAULT_PASSWORD_RULES, yt as DEFAULT_REQUIREMENTS_TITLE, r as STATUS_TONES, S as WuiAutocomplete, ie as WuiConsentBanner, ce as WuiCountrySelect, le as WuiDatePicker, ue as WuiDateRange, de as WuiDock, ve as WuiMultiSelect, Ae as WuiOtp, Ke as WuiPhone, N as WuiSelect, qe as WuiSlider, i as WuiStatusIcon, Ye as WuiTagInput, et as WuiTimePicker, nt as WuiWizard, it as WuiWizardStep, ht as acceptLabel, xt as buildPasswordRules, ot as copyTextToClipboard, wt as defineWeborityElements, St as evaluatePassword, m as glyphSvg, pt as isImageFile, mt as isImageOnlyAccept, gt as matchesAccept, Ct as passwordSatisfies, _t as validateFile };
+export { lt as COPY_FEEDBACK_MS, dt as DEFAULT_IMAGE_ACCEPT, ft as DEFAULT_MAX_SIZE_MB, St as DEFAULT_PASSWORD_RULES, Ct as DEFAULT_REQUIREMENTS_TITLE, r as STATUS_TONES, S as WuiAutocomplete, ee as WuiCommandPalette, se as WuiConsentBanner, de as WuiCountrySelect, fe as WuiDatePicker, pe as WuiDateRange, me as WuiDock, Se as WuiMultiSelect, Pe as WuiOtp, Xe as WuiPhone, P as WuiSelect, Ze as WuiSlider, i as WuiStatusIcon, $e as WuiTagInput, it as WuiTimePicker, ot as WuiWizard, ct as WuiWizardStep, yt as acceptLabel, Tt as buildPasswordRules, ut as copyTextToClipboard, Ot as defineWeborityElements, Et as evaluatePassword, m as glyphSvg, _t as isImageFile, vt as isImageOnlyAccept, T as matchSegments, bt as matchesAccept, Dt as passwordSatisfies, xt as validateFile };