@webority/ui-elements 0.11.6 → 0.12.0

package/dist/ui-elements.js

@@ -527,7 +527,203 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, b = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), x = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), S = [
+}, b = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), x = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), S = "wui-consent-save", ee = "[data-consent-settings]", C = {
+	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",
+	essentialLabel: "Essential cookies",
+	essentialDescription: "Required for the site to work and stay secure. Always on.",
+	analyticsLabel: "Analytics cookies",
+	analyticsDescription: "Help us understand how visitors use the site.",
+	functionalLabel: "Functional cookies",
+	functionalDescription: "Remember choices you make, such as your preferences.",
+	marketingLabel: "Marketing cookies",
+	marketingDescription: "Measure how well our campaigns work.",
+	settingsLabel: "Cookie settings",
+	rejectLabel: "Reject all",
+	acceptLabel: "Accept all",
+	saveLabel: "Save preferences"
+}, w = [
+	"analytics",
+	"functional",
+	"marketing"
+], T = 0, E = class extends e {
+	static get observedAttributes() {
+		return [
+			"heading",
+			"description",
+			"policy-href",
+			"policy-label",
+			"analytics-description",
+			"functional-description",
+			"marketing-description"
+		];
+	}
+	constructor() {
+		super(), T += 1, this._uid = `wui-consent-${T}`, this._preferences = {
+			analytics: !1,
+			functional: !1,
+			marketing: !1
+		}, this._settings = !1, this._onDocumentClick = (e) => {
+			e.target instanceof Element && e.target.closest(ee) && (e.preventDefault(), this.open({
+				settings: !0,
+				focus: !0
+			}));
+		};
+	}
+	get position() {
+		return this.getAttribute("position") === "bottom-right" ? "bottom-right" : "bottom-left";
+	}
+	set position(e) {
+		this.setAttribute("position", String(e ?? "bottom-left"));
+	}
+	get heading() {
+		return this.getAttribute("heading") || C.heading;
+	}
+	set heading(e) {
+		this.setAttribute("heading", String(e ?? ""));
+	}
+	get description() {
+		return this.getAttribute("description") || C.description;
+	}
+	set description(e) {
+		this.setAttribute("description", String(e ?? ""));
+	}
+	get policyHref() {
+		return this.getAttribute("policy-href") || "";
+	}
+	set policyHref(e) {
+		this.setAttribute("policy-href", String(e ?? ""));
+	}
+	get policyLabel() {
+		return this.getAttribute("policy-label") || C.policyLabel;
+	}
+	set policyLabel(e) {
+		this.setAttribute("policy-label", String(e ?? ""));
+	}
+	get analyticsDescription() {
+		return this.getAttribute("analytics-description") || C.analyticsDescription;
+	}
+	set analyticsDescription(e) {
+		this.setAttribute("analytics-description", String(e ?? ""));
+	}
+	get functionalDescription() {
+		return this.getAttribute("functional-description") || C.functionalDescription;
+	}
+	set functionalDescription(e) {
+		this.setAttribute("functional-description", String(e ?? ""));
+	}
+	get marketingDescription() {
+		return this.getAttribute("marketing-description") || C.marketingDescription;
+	}
+	set marketingDescription(e) {
+		this.setAttribute("marketing-description", String(e ?? ""));
+	}
+	get preferences() {
+		return { ...this._preferences };
+	}
+	set preferences(e) {
+		this._preferences = {
+			analytics: e?.analytics === !0,
+			functional: e?.functional === !0,
+			marketing: e?.marketing === !0
+		}, this._applyPreferences();
+	}
+	get isOpen() {
+		return this.hasAttribute("open");
+	}
+	connectedCallback() {
+		this._rendered || this.render(), document.addEventListener("click", this._onDocumentClick);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this._onDocumentClick);
+	}
+	attributeChangedCallback() {
+		this._rendered && this.render();
+	}
+	render() {
+		let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${te(this.policyHref)}">${O(this.policyLabel)}</a>` : "";
+		this.innerHTML = `
+      <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">${O(this.heading)}</h2>
+        <p class="wui-consent-banner-description" id="${t}-description">${O(this.description)}${n}</p>
+        <div class="wui-consent-banner-settings" hidden>
+          ${D(t, "essential", C.essentialLabel, C.essentialDescription, !0)}
+          ${D(t, "analytics", C.analyticsLabel, this.analyticsDescription, !1)}
+          ${D(t, "functional", C.functionalLabel, this.functionalDescription, !1)}
+          ${D(t, "marketing", C.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">${C.settingsLabel}</button>
+          <button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${C.rejectLabel}</button>
+          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${C.acceptLabel}</button>
+          <button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${C.saveLabel}</button>
+        </div>
+      </div>`, this._rendered = !0, this._wire(), this._applyPreferences(), this._showSettings(this._settings), e && (this._panel().hidden = !1);
+	}
+	open({ settings: e = !1, focus: t = !1 } = {}) {
+		this._rendered || this.render(), this._applyPreferences(), this._showSettings(e), this._panel().hidden = !1, this.setAttribute("open", ""), t && (e ? this.querySelector(".wui-consent-banner-category input:not([disabled])") : this.querySelector(".wui-consent-banner-accept"))?.focus();
+	}
+	close() {
+		let e = this._panel();
+		e && (e.hidden = !0), this.removeAttribute("open"), this._showSettings(!1);
+	}
+	_panel() {
+		return this.querySelector(".wui-consent-banner-panel");
+	}
+	_wire() {
+		this.querySelector(".wui-consent-banner-accept")?.addEventListener("click", () => this._save({
+			analytics: !0,
+			functional: !0,
+			marketing: !0
+		})), this.querySelector(".wui-consent-banner-reject")?.addEventListener("click", () => this._save({
+			analytics: !1,
+			functional: !1,
+			marketing: !1
+		})), this.querySelector(".wui-consent-banner-save")?.addEventListener("click", () => this._save(this._switchValues())), this.querySelector(".wui-consent-banner-settings-toggle")?.addEventListener("click", () => this._showSettings(!this._settings));
+	}
+	_save(e) {
+		this._preferences = { ...e }, this.dispatchEvent(new CustomEvent(S, {
+			bubbles: !0,
+			composed: !0,
+			detail: { ...e }
+		})), this.close();
+	}
+	_switchValues() {
+		let e = {};
+		for (let t of w) e[t] = this.querySelector(`input[data-category="${t}"]`)?.checked === !0;
+		return e;
+	}
+	_applyPreferences() {
+		for (let e of w) {
+			let t = this.querySelector(`input[data-category="${e}"]`);
+			t && (t.checked = this._preferences[e]);
+		}
+	}
+	_showSettings(e) {
+		this._settings = e;
+		let t = this.querySelector(".wui-consent-banner-settings");
+		if (!t) return;
+		t.hidden = !e, this.querySelector(".wui-consent-banner-settings-toggle")?.setAttribute("aria-expanded", e ? "true" : "false");
+		let n = this.querySelector(".wui-consent-banner-save");
+		n && (n.hidden = !e);
+		for (let t of [".wui-consent-banner-reject", ".wui-consent-banner-accept"]) {
+			let n = this.querySelector(t);
+			n && (n.hidden = e);
+		}
+	}
+};
+function D(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}">${O(n)}</label>
+            </div>
+            <p class="wui-consent-banner-category-description">${O(r)}</p>
+          </div>`;
+}
+var O = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), te = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), k = [
 	"January",
 	"February",
 	"March",
@@ -540,7 +736,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	"October",
 	"November",
 	"December"
-], C = [
+], A = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -548,24 +744,24 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	"Th",
 	"Fr",
 	"Sa"
-], w = (e) => String(e).padStart(2, "0"), T = (e, t, n) => `${e}-${w(t + 1)}-${w(n)}`, E = (e) => {
+], j = (e) => String(e).padStart(2, "0"), M = (e, t, n) => `${e}-${j(t + 1)}-${j(n)}`, N = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, D = (e) => {
-	let t = E(e);
-	return t ? `${w(t.d)} ${S[t.m].slice(0, 3)} ${t.y}` : "";
-}, O = (e, t) => new Date(e, t + 1, 0).getDate(), k = (e, t) => {
+}, P = (e) => {
+	let t = N(e);
+	return t ? `${j(t.d)} ${k[t.m].slice(0, 3)} ${t.y}` : "";
+}, F = (e, t) => new Date(e, t + 1, 0).getDate(), I = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, ee = class extends e {
+}, ne = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -616,13 +812,13 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Enter Date", t = E(this._value);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = N(this._value);
 		t && (this._viewY = t.y, this._viewM = t.m);
 		let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="datepicker">
         <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${g(i)}"` : ""}${a ? ` aria-describedby="${g(a)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? D(this._value) : g(e)}</span>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? P(this._value) : g(e)}</span>
           ${p("calendar-dots")}
         </button>
         <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
@@ -634,11 +830,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	_syncTrigger() {
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = E(this._value);
-		t.textContent = n ? D(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = N(this._value);
+		t.textContent = n ? P(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_limits() {
-		let e = E(this.getAttribute("min")), t = E(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
+		let e = N(this.getAttribute("min")), t = N(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();
@@ -646,7 +842,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			},
 			monthDisabled: (e, t) => {
 				let i = new Date(e, t, 1).getTime();
-				return new Date(e, t, O(e, t)).getTime() < n || i > r;
+				return new Date(e, t, F(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -659,28 +855,28 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
 	}
 	_daysHtml() {
-		let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = O(this._viewY, this._viewM), r = E(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 = F(this._viewY, this._viewM), r = N(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 = T(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 = M(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 = k(this._viewY, this._viewM - 1), u = O(l.y, l.m);
+		}, c = "", l = I(this._viewY, this._viewM - 1), u = F(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 = k(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = I(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 m = C.map((t, n) => C[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
+		let m = A.map((t, n) => A[(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">${p("chevron-left")}</button>
-        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${S[this._viewM]} ${this._viewY}</button>
+        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${k[this._viewM]} ${this._viewY}</button>
         <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${p("chevron-right")}</button>
       </div>
       <div class="datepicker-weekdays">${m}</div>
@@ -691,14 +887,14 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
       </div>`;
 	}
 	_monthsHtml() {
-		let e = E(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
+		let e = N(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" : ""}>${S[i].slice(0, 3)}</button>`;
+			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${k[i].slice(0, 3)}</button>`;
 		}
 		return `
       <div class="datepicker-head">
@@ -709,7 +905,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
       <div class="datepicker-cells">${r}</div>`;
 	}
 	_yearsHtml() {
-		let e = E(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
+		let e = N(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",
@@ -734,21 +930,21 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		s(e, t, { clampHeight: !0 });
 	}
 	_setFocus(e, t, n, r) {
-		let { y: i, m: a } = k(e, t);
+		let { y: i, m: a } = I(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="${T(i, a, n)}"]`)?.focus();
+		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${M(i, a, n)}"]`)?.focus();
 	}
 	_onKey(e) {
 		if (this._mode !== "days") {
 			e.key === "Escape" && this._close();
 			return;
 		}
-		let t = this._focus || E(this._value) || {
+		let t = this._focus || N(this._value) || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
@@ -766,17 +962,17 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
 			case "PageUp": {
 				e.preventDefault();
-				let n = k(t.y, t.m - (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, O(n.y, n.m)), "slide-prev");
+				let n = I(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, F(n.y, n.m)), "slide-prev");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				let n = k(t.y, t.m + (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, O(n.y, n.m)), "slide-next");
+				let n = I(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, F(n.y, n.m)), "slide-next");
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = T(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 = M(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 				return;
 			case "Escape": return this._close();
 			default:
@@ -788,7 +984,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = /* @__PURE__ */ new Date(), i = E(this._value);
+			let r = /* @__PURE__ */ new Date(), i = N(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 : {
@@ -803,7 +999,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			let t = e.target.closest("[data-nav]");
 			if (t) {
 				this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
-				let e = k(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = I(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -842,7 +1038,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			}
 			if (e.target.closest("[data-today]")) {
 				let e = /* @__PURE__ */ new Date();
-				this.value = T(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				this.value = M(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
@@ -870,7 +1066,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, te = class extends e {
+}, re = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -929,13 +1125,13 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			text: e,
 			empty: !0
 		} : {
-			text: `${D(this._start) || "Start"} – ${D(this._end) || "End"}`,
+			text: `${P(this._start) || "Start"} – ${P(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 = E(this._start);
+		let e = N(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 = `
@@ -969,24 +1165,24 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "", r.disabled = this.hasAttribute("disabled");
 	}
 	_limits() {
-		let e = E(this.getAttribute("min")), t = E(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
+		let e = N(this.getAttribute("min")), t = N(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 = O(e, t), a = this._limits(), o = C.map((e, t) => C[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
-			let i = T(e, t, n), o = a(e, t, n);
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = F(e, t), a = this._limits(), o = A.map((e, t) => A[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = M(e, t, n), o = a(e, t, n);
 			return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
-		}, c = "", l = k(e, t - 1), u = O(l.y, l.m);
+		}, c = "", l = I(e, t - 1), u = F(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 = k(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = I(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">${S[t]} ${e}</div>
+        <div class="datepicker-month-label">${k[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -994,7 +1190,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = k(this._viewY, this._viewM + 1);
+		let t = I(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">${p("chevron-left")}</button>
@@ -1020,7 +1216,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
 		}
 		let i = e.querySelector("[data-range-hint]");
-		i && (i.textContent = this._start ? this._end ? `${D(this._start)} – ${D(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${P(this._start)} – ${P(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		s(e, t, { clampHeight: !0 });
@@ -1042,7 +1238,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = E(this._start);
+			let r = N(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -1055,7 +1251,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				let e = k(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = I(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -1085,7 +1281,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ne = class extends e {
+}, ie = class extends e {
 	static get observedAttributes() {
 		return [
 			"static",
@@ -1106,10 +1302,10 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		e === "static" && this.isConnected && this._wire();
 	}
 	_maxScale() {
-		return re(this.getAttribute("max-scale"), 1.6);
+		return ae(this.getAttribute("max-scale"), 1.6);
 	}
 	_radius() {
-		return re(this.getAttribute("radius"), 100);
+		return ae(this.getAttribute("radius"), 100);
 	}
 	_magnifyEnabled() {
 		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
@@ -1134,10 +1330,10 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	_teardown() {
 		this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
 	}
-}, re = (e, t) => {
+}, ae = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, A = "wui-feedback-submit", j = {
+}, L = "wui-feedback-submit", R = {
 	label: "Feedback",
 	heading: "Share feedback",
 	placeholder: "What's working, what isn't?",
@@ -1148,7 +1344,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	emptyError: "Please write a message before sending.",
 	failedError: "That didn't send. Please try again.",
 	thanks: "Thanks — we've got it."
-}, ie = 1e4, ae = 1600, oe = class extends e {
+}, oe = 1e4, se = 1600, ce = class extends e {
 	static get observedAttributes() {
 		return [
 			"position",
@@ -1170,19 +1366,19 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		this.setAttribute("position", String(e ?? "bottom-right"));
 	}
 	get label() {
-		return this.getAttribute("label") || j.label;
+		return this.getAttribute("label") || R.label;
 	}
 	set label(e) {
 		this.setAttribute("label", String(e ?? ""));
 	}
 	get heading() {
-		return this.getAttribute("heading") || j.heading;
+		return this.getAttribute("heading") || R.heading;
 	}
 	set heading(e) {
 		this.setAttribute("heading", String(e ?? ""));
 	}
 	get placeholder() {
-		return this.getAttribute("placeholder") || j.placeholder;
+		return this.getAttribute("placeholder") || R.placeholder;
 	}
 	set placeholder(e) {
 		this.setAttribute("placeholder", String(e ?? ""));
@@ -1197,10 +1393,10 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._open === !0;
 	}
 	addEventListener(e, t, n) {
-		e === A && (this._submitListeners += 1), super.addEventListener(e, t, n);
+		e === L && (this._submitListeners += 1), super.addEventListener(e, t, n);
 	}
 	removeEventListener(e, t, n) {
-		e === A && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
+		e === L && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
 	}
 	connectedCallback() {
 		this._rendered || this.render();
@@ -1216,31 +1412,31 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		this.innerHTML = `
       <button type="button" class="feedback-trigger" aria-expanded="false" aria-haspopup="dialog">
         <span class="feedback-trigger-icon" aria-hidden="true">${p("message-square", { size: 18 })}</span>
-        <span class="feedback-trigger-label">${se(this.label)}</span>
+        <span class="feedback-trigger-label">${le(this.label)}</span>
       </button>
-      <div class="feedback-panel" role="dialog" aria-label="${ce(this.heading)}" hidden>
+      <div class="feedback-panel" role="dialog" aria-label="${ue(this.heading)}" hidden>
         <div class="feedback-head">
-          <h2 class="feedback-heading">${se(this.heading)}</h2>
+          <h2 class="feedback-heading">${le(this.heading)}</h2>
           <button type="button" class="feedback-close" aria-label="Close">${p("x", { size: 16 })}</button>
         </div>
         <div class="feedback-body">
           <label class="feedback-field">
-            <span class="feedback-field-label">${j.messageLabel}</span>
-            <textarea class="feedback-message" rows="4" required placeholder="${ce(this.placeholder)}"></textarea>
+            <span class="feedback-field-label">${R.messageLabel}</span>
+            <textarea class="feedback-message" rows="4" required placeholder="${ue(this.placeholder)}"></textarea>
           </label>
           ${this.collectEmail ? `<label class="feedback-field">
-            <span class="feedback-field-label">${j.emailLabel}</span>
+            <span class="feedback-field-label">${R.emailLabel}</span>
             <input type="email" class="feedback-email" autocomplete="email" placeholder="you@example.com" />
           </label>` : ""}
           <p class="feedback-error" role="alert" hidden></p>
         </div>
         <div class="feedback-actions">
           <button type="button" class="feedback-cancel">Cancel</button>
-          <button type="button" class="feedback-submit">${j.submitLabel}</button>
+          <button type="button" class="feedback-submit">${R.submitLabel}</button>
         </div>
         <div class="feedback-thanks" hidden>
           <span class="feedback-thanks-icon" aria-hidden="true">${p("check-circle", { size: 20 })}</span>
-          <span class="feedback-thanks-text">${j.thanks}</span>
+          <span class="feedback-thanks-text">${R.thanks}</span>
         </div>
       </div>`, this._rendered = !0, this._wire();
 		let r = this._refs();
@@ -1278,18 +1474,18 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		let { thanks: e, error: t, submit: n, message: r, email: i } = this._refs();
 		this._setBusy(!1), t && (t.hidden = !0, t.textContent = ""), e && (e.hidden = !1), this.querySelector(".feedback-body")?.setAttribute("hidden", ""), this.querySelector(".feedback-actions")?.setAttribute("hidden", ""), n && (n.disabled = !0), this._thanksTimer = setTimeout(() => {
 			r && (r.value = ""), i && (i.value = ""), this._reset(), this.close();
-		}, ae);
+		}, se);
 	}
 	failed(e) {
 		this._clearTimers(), this._state = "error", this._setBusy(!1);
 		let { error: t, message: n } = this._refs();
-		t && (t.textContent = e || j.failedError, t.hidden = !1), n?.focus();
+		t && (t.textContent = e || R.failedError, t.hidden = !1), n?.focus();
 	}
 	_submit() {
 		if (this._state === "submitting") return;
 		let { message: e, email: t, error: n } = this._refs(), r = (e?.value ?? "").trim();
 		if (!r) {
-			n && (n.textContent = j.emptyError, n.hidden = !1), e?.focus();
+			n && (n.textContent = R.emptyError, n.hidden = !1), e?.focus();
 			return;
 		}
 		n && (n.hidden = !0, n.textContent = ""), this._state = "submitting", this._setBusy(!0);
@@ -1299,7 +1495,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			surface: this.getAttribute("surface") || "",
 			screen: this.getAttribute("screen") || ""
 		};
-		if (this.dispatchEvent(new CustomEvent(A, {
+		if (this.dispatchEvent(new CustomEvent(L, {
 			bubbles: !0,
 			composed: !0,
 			detail: i
@@ -1309,11 +1505,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		}
 		this._timer = setTimeout(() => {
 			this._state === "submitting" && this.failed();
-		}, ie);
+		}, oe);
 	}
 	_setBusy(e) {
 		let { submit: t } = this._refs();
-		t && (t.disabled = e, t.textContent = e ? j.sendingLabel : j.submitLabel, this.toggleAttribute("busy", e));
+		t && (t.disabled = e, t.textContent = e ? R.sendingLabel : R.submitLabel, this.toggleAttribute("busy", e));
 	}
 	_reset() {
 		this._clearTimers(), this._state = "idle", this._setBusy(!1);
@@ -1323,23 +1519,23 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	_clearTimers() {
 		this._timer &&= (clearTimeout(this._timer), 0), this._thanksTimer &&= (clearTimeout(this._thanksTimer), 0);
 	}
-}, se = (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;"), le = {
+}, le = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), de = {
 	enter: "Enter",
 	comma: ",",
 	space: " ",
 	tab: "Tab"
-}, ue = {
+}, fe = {
 	enter: "\n",
 	comma: ",",
 	space: " ",
 	tab: "	"
-}, de = (e) => le[e], fe = (e) => ue[e];
-function pe(e, t) {
+}, pe = (e) => de[e], me = (e) => fe[e];
+function he(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 M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends e {
+var z = (e, t) => t.some((t) => String(e ?? "").includes(t)), ge = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -1439,7 +1635,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 				[h]: !0,
 				selected: e.hasAttribute("selected")
 			};
-			for (let [n, r] of he) {
+			for (let [n, r] of _e) {
 				let i = e.getAttribute(n);
 				i && (t[r] = i);
 			}
@@ -1470,23 +1666,23 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
       <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 ? p(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="${F(o)}" aria-label="${F(this._accessibleName())}" aria-describedby="${F(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${H(o)}" aria-label="${H(this._accessibleName())}" aria-describedby="${H(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
           ${p("chevron-down", { className: "search-select-caret" })}
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${F(o)}" aria-multiselectable="true" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${H(o)}" aria-multiselectable="true" tabindex="-1" hidden>
           <div class="search-select-options"></div>
         </div>
       </div>
-      <div class="field-error wui-ms-custom-error" id="${F(e)}" aria-live="polite" hidden></div>`;
+      <div class="field-error wui-ms-custom-error" id="${H(e)}" aria-live="polite" hidden></div>`;
 		} else this.innerHTML = `
       <div class="search-select${a}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${F(o)}" aria-label="${F(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${H(o)}" aria-label="${H(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
           ${r ? p(r, { className: "search-select-icon" }) : ""}
           <div class="ms-chips" data-chips></div>
           ${p("chevron-down", { className: "search-select-caret" })}
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${F(o)}" aria-multiselectable="true" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${F(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${H(o)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${H(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -1496,7 +1692,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = 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="${F(e)}" aria-label="Remove ${F(I(this._labelFor(e)))}">${p("x")}</button></span>`).join("");
+		let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${H(e)}" aria-label="Remove ${H(Ce(this._labelFor(e)))}">${p("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();
@@ -1527,11 +1723,11 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 		i.textContent = `+${t.length - o}`;
 	}
 	_matches(e, t) {
-		return I(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
+		return Ce(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 || I(e.label).trim().toLowerCase() === t);
+		return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || Ce(e.label).trim().toLowerCase() === t);
 	}
 	_renderOptions(e) {
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
@@ -1540,9 +1736,9 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = 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 ge(e) ? ye(e, r, n) : `<button type="button" role="option" id="${F(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${F(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
+			return ve(e) ? xe(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">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
 		});
-		s && c.push(`<button type="button" role="option" id="${F(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${F(r)}" data-custom="true" aria-selected="false">Add “${g(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
+		s && c.push(`<button type="button" role="option" id="${H(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${H(r)}" data-custom="true" aria-selected="false">Add “${g(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");
@@ -1555,7 +1751,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 	_customRefusal(e) {
 		let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
 		if (n) {
-			let r = be(n);
+			let r = Se(n);
 			if (r && !r.test(e)) return t;
 		}
 		let r = this._validateCustom;
@@ -1606,35 +1802,35 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 			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 = "";
 		}, S = () => {
 			d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-		}, C = (e) => {
+		}, 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 = M(e, N) ? pe(e, N) : [e], i = [], a = "";
+		}, w = (e, { quiet: t = !1 } = {}) => {
+			let n = this._values.length, r = z(e, B) ? he(e, B) : [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) {
@@ -1645,7 +1841,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 			v() ? 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(h().indexOf(t));
@@ -1658,21 +1854,21 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 			getActive: () => this._active,
 			setActive: (e) => g(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) => {
@@ -1682,7 +1878,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 				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") {
@@ -1690,16 +1886,16 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 					this._navHandler.handler(e);
 					return;
 				}
-				(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), D(e);
+				(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), E(e);
 			}), o.addEventListener("paste", (e) => {
 				let t = e.clipboardData?.getData("text/plain") ?? "";
-				M(t, N) && (e.preventDefault(), T(`${o.value}${t}`));
+				z(t, B) && (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);
+				E(e);
 				return;
 			}
 			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
@@ -1718,35 +1914,35 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, N = [
+}, B = [
 	",",
 	";",
 	"\n",
 	"	"
-], he = [
+], _e = [
 	["description", "description"],
 	["avatar", "avatar"],
 	["initials", "initials"],
 	["disabled-hint", "disabledHint"]
-], ge = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), _e = (e) => {
+], ve = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), ye = (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 : "";
-}, ve = (e) => {
-	let t = _e(e.avatar);
-	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${F(t)}" alt="" />` : ""}</span>`;
-}, ye = (e, t, n) => {
+}, be = (e) => {
+	let t = ye(e.avatar);
+	return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${H(t)}" alt="" />` : ""}</span>`;
+}, xe = (e, t, n) => {
 	let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${g(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${g(e.disabledHint)}</span>` : "";
-	return `<button type="button" role="option" id="${F(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${F(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${i}</span>${a}${ve(e)}<span class="ms-check">${p("check")}</span></button>`;
-}, P = /* @__PURE__ */ new Map(), be = (e) => {
-	if (P.has(e)) return P.get(e);
+	return `<button type="button" role="option" id="${H(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${H(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${i}</span>${a}${be(e)}<span class="ms-check">${p("check")}</span></button>`;
+}, V = /* @__PURE__ */ new Map(), Se = (e) => {
+	if (V.has(e)) return V.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 P.set(e, t), t;
-}, F = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), I = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), xe = /[^0-9]/g, Se = /[^0-9a-zA-Z]/g, Ce = class extends e {
+	return V.set(e, t), t;
+}, H = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ce = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), we = /[^0-9]/g, Te = /[^0-9a-zA-Z]/g, Ee = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1777,7 +1973,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 		this._value = this._clean(e), d(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Se : xe, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Te : we, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -1868,7 +2064,7 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, L = [
+}, De = [
 	[
 		"AF",
 		"Afghanistan",
@@ -3094,11 +3290,11 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 		"Zimbabwe",
 		"263"
 	]
-], R = (e) => (L.find((t) => t[0] === e) || [
+], U = (e) => (De.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], we = {
+])[2], Oe = {
 	AD: ["Europe/Andorra"],
 	AE: ["Asia/Dubai"],
 	AF: ["Asia/Kabul"],
@@ -3500,13 +3696,13 @@ var M = (e, t) => t.some((t) => String(e ?? "").includes(t)), me = class extends
 	ZA: ["Africa/Johannesburg"],
 	ZM: ["Africa/Lusaka"],
 	ZW: ["Africa/Harare"]
-}, Te = new Set(L.map(([e]) => e)), Ee = /* @__PURE__ */ new Map();
-for (let [e, t] of Object.entries(we)) for (let n of t) Ee.set(n, e);
-function De(e) {
-	let t = Ee.get(e);
-	return t && Te.has(t) ? t : null;
+}, ke = new Set(De.map(([e]) => e)), Ae = /* @__PURE__ */ new Map();
+for (let [e, t] of Object.entries(Oe)) for (let n of t) Ae.set(n, e);
+function je(e) {
+	let t = Ae.get(e);
+	return t && ke.has(t) ? t : null;
 }
-function Oe(e) {
+function Me(e) {
 	if (!e) return null;
 	let t;
 	try {
@@ -3514,9 +3710,9 @@ function Oe(e) {
 	} catch {
 		return null;
 	}
-	return t && Te.has(t) ? t : null;
+	return t && ke.has(t) ? t : null;
 }
-function ke() {
+function Ne() {
 	let e;
 	try {
 		e = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -3524,77 +3720,77 @@ function ke() {
 		e = void 0;
 	}
 	let t = typeof navigator > "u" ? void 0 : navigator.language;
-	return De(e) || Oe(t) || "IN";
+	return je(e) || Me(t) || "IN";
 }
 //#endregion
 //#region src/WuiPhone.js
-var z = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, B = null, Ae = null;
-function je() {
-	return B ? Promise.resolve(B) : (Ae ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (B = {
+var Pe = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, W = null, Fe = null;
+function Ie() {
+	return W ? Promise.resolve(W) : (Fe ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (W = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		parsePhoneNumber: e.parsePhoneNumber,
 		examples: t.default || t
-	}, B)).catch(() => null), Ae);
+	}, W)).catch(() => null), Fe);
 }
-function Me(e, t) {
-	let n = `+${R(e)}`;
+function Le(e, t) {
+	let n = `+${U(e)}`;
 	return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
 }
-function V(e, t) {
-	if (!B || !t) return t;
+function G(e, t) {
+	if (!W || !t) return t;
 	try {
-		return Me(e, new B.AsYouType(e).input(`+${R(e)}${t}`)) || t;
+		return Le(e, new W.AsYouType(e).input(`+${U(e)}${t}`)) || t;
 	} catch {
 		return t;
 	}
 }
-function Ne(e, t) {
+function Re(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 H(e) {
-	if (!B) return null;
+function K(e) {
+	if (!W) return null;
 	try {
-		return Me(e, B.getExampleNumber(e, B.examples)?.formatInternational()) || null;
+		return Le(e, W.getExampleNumber(e, W.examples)?.formatInternational()) || null;
 	} catch {
 		return null;
 	}
 }
-function Pe(e) {
-	if (!B || !e) return null;
+function ze(e) {
+	if (!W || !e) return null;
 	try {
-		if (!B.isValidPhoneNumber(e)) return !1;
-		let t = B.parsePhoneNumber(e)?.getType?.();
+		if (!W.isValidPhoneNumber(e)) return !1;
+		let t = W.parsePhoneNumber(e)?.getType?.();
 		return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
 	} catch {
 		return null;
 	}
 }
-function Fe(e) {
-	if (!B) return null;
+function Be(e) {
+	if (!W) return null;
 	try {
-		let t = B.getExampleNumber(e, B.examples);
+		let t = W.getExampleNumber(e, W.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function Ie(e, t, n) {
+function Ve(e, t, n) {
 	try {
-		let r = B.parsePhoneNumber(t, e), i = r?.nationalNumber;
+		let r = W.parsePhoneNumber(t, e), i = r?.nationalNumber;
 		return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
 	} catch {
 		return null;
 	}
 }
-function Le(e) {
-	if (!B || !e?.trim().startsWith("+")) return null;
+function He(e) {
+	if (!W || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new B.AsYouType();
+		let t = new W.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -3605,7 +3801,7 @@ function Le(e) {
 		return null;
 	}
 }
-var Re = class extends e {
+var Ue = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3625,7 +3821,7 @@ var Re = class extends e {
 		} catch {
 			this._internals = null;
 		}
-		this._defaultCountry = ke(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
+		this._defaultCountry = Ne(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -3652,13 +3848,13 @@ var Re = class extends e {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return this._national ? `+${R(this._country)}${this._national}` : "";
+		return this._national ? `+${U(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = Le(t);
+		let t = String(e ?? "").trim(), n = He(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(R(this._country));
+			let e = t.replace(/[^0-9]/g, ""), n = String(U(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();
@@ -3674,25 +3870,25 @@ var Re = 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") || H(this._country) || "Enter phone number";
+		let e = this.getAttribute("placeholder") || K(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 = L.map(([e, n, r], i) => `<button type="button" role="option" id="${U(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${z(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
+		let n = De.map(([e, n, r], i) => `<button type="button" role="option" id="${q(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Pe(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="${U(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${z(this._country)}" data-flag aria-hidden="true"></span>
+          <button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${q(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="${Pe(this._country)}" data-flag aria-hidden="true"></span>
             ${p("chevron-down", { className: "phone-chevron" })}
-            <span class="phone-dial" data-dial>+${R(this._country)}</span>
+            <span class="phone-dial" data-dial>+${U(this._country)}</span>
           </button>
-          <div class="country-dropdown-menu" role="listbox" id="${U(t)}" tabindex="-1" hidden>
-            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${p("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${U(t)}" aria-autocomplete="list" /></div>
+          <div class="country-dropdown-menu" role="listbox" id="${q(t)}" tabindex="-1" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${p("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${q(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="${U(e)}" value="${U(V(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${U(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${U(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${q(e)}" value="${q(G(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${q(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${q(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, d(this, this.value), this._wire();
 	}
@@ -3723,12 +3919,12 @@ var Re = 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), u && (u.className = z(e)), d && (d.textContent = `+${R(e)}`);
+			this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className = Pe(e)), d && (d.textContent = `+${U(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 = H(e) || "Enter phone number"), o && this._national && (o.value = V(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
+			!this.getAttribute("placeholder") && o && (o.placeholder = K(e) || "Enter phone number"), o && this._national && (o.value = G(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
 		}, y = (t) => {
 			let n = this._visibleItems();
 			if (t.key === "ArrowDown") {
@@ -3762,7 +3958,7 @@ var Re = 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 = H(this._country);
+					let e = K(this._country);
 					b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
 				b.hidden = !e;
@@ -3770,24 +3966,24 @@ var Re = 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 = Fe(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 = Be(this._country);
 			if (i && r.length > i) {
-				let e = Ie(this._country, r, i);
+				let e = Ve(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 = V(this._country, this._national);
+			let a = G(this._country, this._national);
 			if (o.value !== a) {
 				o.value = a;
-				let e = Ne(a, Math.min(n, r.length));
+				let e = Re(a, Math.min(n, r.length));
 				o.setSelectionRange(e, e);
 			}
-			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Pe(this.value) === !0) && x(!1);
+			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || ze(this.value) === !0) && x(!1);
 		}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
-			x(this._national.length > 0 && Pe(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && ze(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), o.addEventListener("paste", (e) => {
-			let t = Le(e.clipboardData?.getData("text"));
-			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = V(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
+			let t = He(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = G(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();
@@ -3796,9 +3992,9 @@ var Re = class extends e {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this);
-		}, this._bindGlobal(), je().then((e) => {
-			if (!(!e || !o.isConnected) && (this._national && (o.value = V(this._country, this._national)), !this.getAttribute("placeholder"))) {
-				let e = H(this._country);
+		}, this._bindGlobal(), Ie().then((e) => {
+			if (!(!e || !o.isConnected) && (this._national && (o.value = G(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = K(this._country);
 				e && (o.placeholder = e);
 			}
 		}), this._syncMirror();
@@ -3809,7 +4005,7 @@ var Re = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, U = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ze = class extends e {
+}, q = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), We = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3898,19 +4094,19 @@ var Re = class extends e {
 		this._listboxId = u;
 		let f = e.map((e, t) => {
 			let n = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${W(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}">${v(e)}</button>`;
+			return `<button type="button" role="option" id="${J(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${J(e.value)}" aria-selected="${n}">${v(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="${W(u)}" aria-label="${W(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="${J(u)}" aria-label="${J(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
           ${a ? p(a, { className: "search-select-icon" }) : ""}
           ${o ? `<span class="search-select-prefix">${g(o)}</span>` : ""}
           <span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? v(l) : g(s)}</span>
           ${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${p("x")}</span>` : ""}
           ${p("chevron-down", { className: "search-select-caret" })}
         </button>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(u)}" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${W(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${J(u)}" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${J(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
           <div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, d(this, this._value), this._wire(), this._syncReset();
@@ -4015,7 +4211,7 @@ var Re = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Be = class extends e {
+}, J = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ge = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4055,19 +4251,19 @@ var Re = class extends e {
 		return this._value;
 	}
 	set value(e) {
-		this._value = this._snapToStep(this._clamp(G(e, this._value))), this._syncValue(), this._syncMirrors();
+		this._value = this._snapToStep(this._clamp(Y(e, this._value))), this._syncValue(), this._syncMirrors();
 	}
 	get start() {
 		return this._start;
 	}
 	set start(e) {
-		this._start = Math.min(this._snapToStep(this._clamp(G(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
+		this._start = Math.min(this._snapToStep(this._clamp(Y(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(G(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
+		this._end = Math.max(this._snapToStep(this._clamp(Y(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") {
@@ -4080,19 +4276,19 @@ var Re = class extends e {
 		this._isRange() ? this._resetRange() : this._resetSingle();
 	}
 	_updateFromAttribute(e) {
-		e === "value" ? this._value = this._snapToStep(this._clamp(G(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(G(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(G(this.getAttribute("end"), this._end))));
+		e === "value" ? this._value = this._snapToStep(this._clamp(Y(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(Y(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(Y(this.getAttribute("end"), this._end))));
 	}
 	_isRange() {
 		return this.hasAttribute("range");
 	}
 	_min() {
-		return G(this.getAttribute("min"), 0);
+		return Y(this.getAttribute("min"), 0);
 	}
 	_max() {
-		return G(this.getAttribute("max"), 100);
+		return Y(this.getAttribute("max"), 100);
 	}
 	_step() {
-		return G(this.getAttribute("step"), 1);
+		return Y(this.getAttribute("step"), 1);
 	}
 	_clamp(e) {
 		return Math.max(this._min(), Math.min(e, this._max()));
@@ -4157,7 +4353,7 @@ var Re = class extends e {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${Ve(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${Ke(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>` : ""}
@@ -4257,10 +4453,10 @@ var Re = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, G = (e, t) => {
+}, Y = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, Ve = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), He = class extends e {
+}, Ke = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), qe = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -4333,7 +4529,7 @@ var Re = class extends e {
 		d(this, this._values.join(",")), this.innerHTML = `
       <div class="search-select${t}">
         <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
-          <input type="text" class="ms-input" data-input aria-label="${K(this._accessibleName())}" placeholder="${K(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
+          <input type="text" class="ms-input" data-input aria-label="${X(this._accessibleName())}" placeholder="${X(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
           <div class="ms-chips" data-chips></div>
         </div>
       </div>`, this._rendered = !0, d(this, this._values.join(",")), this._renderControl(), this._wire();
@@ -4345,14 +4541,14 @@ var Re = class extends e {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${Ue(e)}</span><button type="button" class="chip-remove" data-remove="${K(e)}" aria-label="Remove ${K(e)}">${p("x")}</button></span>`).join("");
+			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${Je(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${p("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(de).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(pe).filter(Boolean)), s = () => {
 			d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}, c = (e) => {
 			let t = e.trim();
@@ -4384,9 +4580,9 @@ var Re = class extends e {
 			e.preventDefault();
 			let n = e.clipboardData.getData("text/plain"), a = [];
 			for (let e of r) {
-				let t = fe(e) ?? e;
-				if (M(n, [t])) {
-					a.push(...pe(n, [t]));
+				let t = me(e) ?? e;
+				if (z(n, [t])) {
+					a.push(...he(n, [t]));
 					break;
 				}
 			}
@@ -4414,18 +4610,18 @@ var Re = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, Ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), K = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), q = (e) => String(e).padStart(2, "0"), We = (e, t) => `${q(e)}:${q(t)}`, J = (e) => {
+}, Je = (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;"), Ye = (e) => String(e).padStart(2, "0"), Xe = (e, t) => `${Ye(e)}:${Ye(t)}`, Z = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, Y = (e, t = "24") => {
+}, Ze = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return We(e.h, e.m);
+	if (t === "24") return Xe(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
-	return `${n}:${q(e.m)} ${r}`;
-}, Ge = class extends e {
+	return `${n}:${Ye(e.m)} ${r}`;
+}, Qe = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -4472,11 +4668,11 @@ var Re = class extends e {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Select time", t = J(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 = Z(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="timepicker">
         <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? Y(t, n) : g(e)}</span>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? Ze(t, n) : g(e)}</span>
           ${p("clock")}
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -4488,14 +4684,14 @@ var Re = class extends e {
 	_syncTrigger() {
 		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = J(this._value), r = this.getAttribute("format") || "24";
-		t.textContent = n ? Y(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = Z(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? Ze(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 = J(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 = Z(t) || {
 			h: 0,
 			m: 0
-		}, i = J(n) || {
+		}, i = Z(n) || {
 			h: 23,
 			m: 59
 		}, a = [], o = r.h, s = r.m;
@@ -4508,10 +4704,10 @@ var Re = class extends e {
 	_renderOptions() {
 		let e = this.querySelector(".timepicker-pop");
 		if (!e) return;
-		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = J(this._value), i = this._focus, a = "";
+		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 = We(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\"" : ""}>${Y(o, t)}</button>`;
+			let o = n[e], s = Xe(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\"" : ""}>${Ze(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -4609,7 +4805,7 @@ var Re = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, Ke = "wui-wizard-step", qe = class extends e {
+}, $e = "wui-wizard-step", et = class extends e {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -4643,7 +4839,7 @@ var Re = class extends e {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${Ke}`)];
+		return [...this.querySelectorAll(`:scope > ${$e}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -4702,13 +4898,13 @@ var Re = class extends e {
 		return e.map((e, r) => {
 			let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
 			u = a === "done" ? p("check") : a === "error" ? p("alert-triangle") : a === "skipped" ? p("minus") : c ? p(c) : String(l);
-			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", m = 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}`, m ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
+			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", m = i || r < this._active, h = s ? `<span class="step-desc">${Q(s)}</span>` : "", g;
+			return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${h}`, m ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
 		}).join("");
 	}
 	_footerHtml(e) {
 		let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional") || this.hasAttribute("skippable"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
-		return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${p("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)}${p("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}>${p("arrow-left", { className: "me-2" })}${Q(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Q(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Q(o)}${p("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Q(c)}</button>`}</span>`;
 	}
 	_wire() {
 		this._teardown(), this._onHeaderClick = (e) => {
@@ -4776,7 +4972,7 @@ var Re = class extends e {
 	_reflectActive(e) {
 		this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
 	}
-}, X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Je = class extends e {
+}, Q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), tt = class extends e {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -4790,8 +4986,8 @@ var Re = class extends e {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, Ye = 2e3;
-async function Xe(e) {
+}, nt = 2e3;
+async function rt(e) {
 	try {
 		if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
 	} catch {}
@@ -4806,14 +5002,14 @@ async function Xe(e) {
 }
 //#endregion
 //#region src/fileValidation.js
-var Ze = "image/png,image/jpeg,image/webp", Qe = 5, $e = {
+var it = "image/png,image/jpeg,image/webp", at = 5, ot = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, et = {
+}, st = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -4827,7 +5023,7 @@ var Ze = "image/png,image/jpeg,image/webp", Qe = 5, $e = {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), tt = [
+}, ct = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), lt = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -4838,54 +5034,54 @@ var Ze = "image/png,image/jpeg,image/webp", Qe = 5, $e = {
 	".avif",
 	".heic"
 ];
-function nt(e) {
+function ut(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 tt.some((e) => r.endsWith(e));
+	return lt.some((e) => r.endsWith(e));
 }
-function rt(e) {
-	let t = Z(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? tt.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+function dt(e) {
+	let t = ct(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? lt.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function it(e) {
+function ft(e) {
 	let t = [];
-	for (let n of Z(e)) {
-		let e = et[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of ct(e)) {
+		let e = st[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 at(e, t) {
-	let n = Z(t);
+function pt(e, t) {
+	let n = ct(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 && ($e[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 && (ot[e] || []).some((e) => i.endsWith(e)));
 }
-function ot(e, t = {}) {
+function mt(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? Ze : t.accept, r = t.maxSizeMb || 5;
-	return at(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${it(n)} file.`;
+	let n = t.accept === void 0 ? it : t.accept, r = t.maxSizeMb || 5;
+	return pt(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${ft(n)} file.`;
 }
 //#endregion
 //#region src/passwordRules.js
-var Q = {
+var ht = {
 	minLength: 8,
 	uppercase: !0,
 	lowercase: !0,
 	digit: !0,
 	special: !0,
 	uniqueChars: 0
-}, st = "Password Requirements";
-function ct(e) {
-	return e === !0 || e == null ? { ...Q } : {
-		...Q,
+}, gt = "Password Requirements";
+function _t(e) {
+	return e === !0 || e == null ? { ...ht } : {
+		...ht,
 		...e
 	};
 }
-function lt(e) {
-	let t = ct(e), n = [];
+function vt(e) {
+	let t = _t(e), n = [];
 	if (t.minLength > 0 && n.push({
 		key: "length",
 		label: `At least ${t.minLength} characters long`,
@@ -4916,25 +5112,25 @@ function lt(e) {
 	}
 	return n;
 }
-function ut(e, t) {
+function yt(e, t) {
 	let n = e == null ? "" : String(e);
-	return lt(t).map((e) => ({
+	return vt(t).map((e) => ({
 		key: e.key,
 		label: e.label,
 		met: e.test(n)
 	}));
 }
-function dt(e, t) {
-	return ut(e, t).every((e) => e.met);
+function bt(e, t) {
+	return yt(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 ft() {
-	$("wui-select", ze), $("wui-phone", Re), $("wui-datepicker", ee), $("wui-date-range", te), $("wui-dock", ne), $("wui-feedback", oe), $("wui-slider", Be), $("wui-timepicker", Ge), $("wui-autocomplete", y), $("wui-multiselect", me), $("wui-taginput", He), $("wui-otp", Ce), $("wui-status-icon", r), $("wui-wizard-step", Je), $("wui-wizard", qe);
+function xt() {
+	$("wui-select", We), $("wui-phone", Ue), $("wui-datepicker", ne), $("wui-date-range", re), $("wui-dock", ie), $("wui-feedback", ce), $("wui-consent-banner", E), $("wui-slider", Ge), $("wui-timepicker", Qe), $("wui-autocomplete", y), $("wui-multiselect", ge), $("wui-taginput", qe), $("wui-otp", Ee), $("wui-status-icon", r), $("wui-wizard-step", tt), $("wui-wizard", et);
 }
-ft();
+xt();
 //#endregion
-export { Ye as COPY_FEEDBACK_MS, Ze as DEFAULT_IMAGE_ACCEPT, Qe as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, st as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, ee as WuiDatePicker, te as WuiDateRange, ne as WuiDock, oe as WuiFeedback, me as WuiMultiSelect, Ce as WuiOtp, Re as WuiPhone, ze as WuiSelect, Be as WuiSlider, r as WuiStatusIcon, He as WuiTagInput, Ge as WuiTimePicker, qe as WuiWizard, Je as WuiWizardStep, it as acceptLabel, lt as buildPasswordRules, Xe as copyTextToClipboard, ft as defineWeborityElements, ut as evaluatePassword, p as glyphSvg, nt as isImageFile, rt as isImageOnlyAccept, at as matchesAccept, dt as passwordSatisfies, ot as validateFile };
+export { nt as COPY_FEEDBACK_MS, it as DEFAULT_IMAGE_ACCEPT, at as DEFAULT_MAX_SIZE_MB, ht as DEFAULT_PASSWORD_RULES, gt as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, E as WuiConsentBanner, ne as WuiDatePicker, re as WuiDateRange, ie as WuiDock, ce as WuiFeedback, ge as WuiMultiSelect, Ee as WuiOtp, Ue as WuiPhone, We as WuiSelect, Ge as WuiSlider, r as WuiStatusIcon, qe as WuiTagInput, Qe as WuiTimePicker, et as WuiWizard, tt as WuiWizardStep, ft as acceptLabel, vt as buildPasswordRules, rt as copyTextToClipboard, xt as defineWeborityElements, yt as evaluatePassword, p as glyphSvg, ut as isImageFile, dt as isImageOnlyAccept, pt as matchesAccept, bt as passwordSatisfies, mt as validateFile };