@webority/ui-elements 0.9.10 → 0.9.12

package/dist/ui-elements.js

@@ -1123,7 +1123,193 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 }, re = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, ie = class extends HTMLElement {
+}, k = "wui-feedback-submit", A = {
+	label: "Feedback",
+	heading: "Share feedback",
+	placeholder: "What's working, what isn't?",
+	emailLabel: "Email (optional)",
+	submitLabel: "Send feedback",
+	sendingLabel: "Sending…",
+	messageLabel: "Your message",
+	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, j = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"position",
+			"label",
+			"heading",
+			"placeholder",
+			"collect-email",
+			"surface",
+			"screen"
+		];
+	}
+	constructor() {
+		super(), this._state = "idle", this._submitListeners = 0, this._timer = 0, this._thanksTimer = 0;
+	}
+	get position() {
+		return this.getAttribute("position") === "bottom-left" ? "bottom-left" : "bottom-right";
+	}
+	set position(e) {
+		this.setAttribute("position", String(e ?? "bottom-right"));
+	}
+	get label() {
+		return this.getAttribute("label") || A.label;
+	}
+	set label(e) {
+		this.setAttribute("label", String(e ?? ""));
+	}
+	get heading() {
+		return this.getAttribute("heading") || A.heading;
+	}
+	set heading(e) {
+		this.setAttribute("heading", String(e ?? ""));
+	}
+	get placeholder() {
+		return this.getAttribute("placeholder") || A.placeholder;
+	}
+	set placeholder(e) {
+		this.setAttribute("placeholder", String(e ?? ""));
+	}
+	get collectEmail() {
+		return this.hasAttribute("collect-email");
+	}
+	set collectEmail(e) {
+		e ? this.setAttribute("collect-email", "") : this.removeAttribute("collect-email");
+	}
+	get isOpen() {
+		return this._open === !0;
+	}
+	addEventListener(e, t, n) {
+		e === k && (this._submitListeners += 1), super.addEventListener(e, t, n);
+	}
+	removeEventListener(e, t, n) {
+		e === k && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
+	}
+	connectedCallback() {
+		this._rendered || this.render();
+	}
+	disconnectedCallback() {
+		this._clearTimers();
+	}
+	attributeChangedCallback(e, t, n) {
+		this._rendered && e !== "position" && this.render();
+	}
+	render() {
+		let e = this._open === !0, t = this._refs().message?.value ?? "", n = this._refs().email?.value ?? "";
+		this.innerHTML = `
+      <button type="button" class="feedback-trigger" aria-expanded="false" aria-haspopup="dialog">
+        <span class="feedback-trigger-icon" aria-hidden="true">${f("message-square", { size: 18 })}</span>
+        <span class="feedback-trigger-label">${oe(this.label)}</span>
+      </button>
+      <div class="feedback-panel" role="dialog" aria-label="${se(this.heading)}" hidden>
+        <div class="feedback-head">
+          <h2 class="feedback-heading">${oe(this.heading)}</h2>
+          <button type="button" class="feedback-close" aria-label="Close">${f("x", { size: 16 })}</button>
+        </div>
+        <div class="feedback-body">
+          <label class="feedback-field">
+            <span class="feedback-field-label">${A.messageLabel}</span>
+            <textarea class="feedback-message" rows="4" required placeholder="${se(this.placeholder)}"></textarea>
+          </label>
+          ${this.collectEmail ? `<label class="feedback-field">
+            <span class="feedback-field-label">${A.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">${A.submitLabel}</button>
+        </div>
+        <div class="feedback-thanks" hidden>
+          <span class="feedback-thanks-icon" aria-hidden="true">${f("check-circle", { size: 20 })}</span>
+          <span class="feedback-thanks-text">${A.thanks}</span>
+        </div>
+      </div>`, this._rendered = !0, this._wire();
+		let r = this._refs();
+		r.message && (r.message.value = t), r.email && (r.email.value = n), e && this.open({ focus: !1 });
+	}
+	_refs() {
+		return {
+			trigger: this.querySelector(".feedback-trigger"),
+			panel: this.querySelector(".feedback-panel"),
+			close: this.querySelector(".feedback-close"),
+			cancel: this.querySelector(".feedback-cancel"),
+			submit: this.querySelector(".feedback-submit"),
+			message: this.querySelector(".feedback-message"),
+			email: this.querySelector(".feedback-email"),
+			error: this.querySelector(".feedback-error"),
+			thanks: this.querySelector(".feedback-thanks")
+		};
+	}
+	_wire() {
+		let { trigger: e, close: t, cancel: n, submit: r } = this._refs();
+		e?.addEventListener("click", () => this.isOpen ? this.close() : this.open()), t?.addEventListener("click", () => this.close()), n?.addEventListener("click", () => this.close()), r?.addEventListener("click", () => this._submit()), this._onKeyDown || (this._onKeyDown = (e) => {
+			e.key === "Escape" && this.isOpen && (e.stopPropagation(), this.close());
+		}, this.addEventListener("keydown", this._onKeyDown));
+	}
+	open({ focus: e = !0 } = {}) {
+		let { panel: t, trigger: n, message: r } = this._refs();
+		t && (this._open = !0, t.hidden = !1, this.setAttribute("open", ""), n?.setAttribute("aria-expanded", "true"), e && r?.focus());
+	}
+	close() {
+		let { panel: e, trigger: t } = this._refs();
+		e && (this._open = !1, e.hidden = !0, this.removeAttribute("open"), t?.setAttribute("aria-expanded", "false"), t?.focus());
+	}
+	submitted() {
+		this._clearTimers(), this._state = "done";
+		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);
+	}
+	failed(e) {
+		this._clearTimers(), this._state = "error", this._setBusy(!1);
+		let { error: t, message: n } = this._refs();
+		t && (t.textContent = e || A.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 = A.emptyError, n.hidden = !1), e?.focus();
+			return;
+		}
+		n && (n.hidden = !0, n.textContent = ""), this._state = "submitting", this._setBusy(!0);
+		let i = {
+			message: r,
+			email: (t?.value ?? "").trim(),
+			surface: this.getAttribute("surface") || "",
+			screen: this.getAttribute("screen") || ""
+		};
+		if (this.dispatchEvent(new CustomEvent(k, {
+			bubbles: !0,
+			composed: !0,
+			detail: i
+		})), this._submitListeners === 0) {
+			this._reset();
+			return;
+		}
+		this._timer = setTimeout(() => {
+			this._state === "submitting" && this.failed();
+		}, ie);
+	}
+	_setBusy(e) {
+		let { submit: t } = this._refs();
+		t && (t.disabled = e, t.textContent = e ? A.sendingLabel : A.submitLabel, this.toggleAttribute("busy", e));
+	}
+	_reset() {
+		this._clearTimers(), this._state = "idle", this._setBusy(!1);
+		let { thanks: e, submit: t } = this._refs();
+		e && (e.hidden = !0), this.querySelector(".feedback-body")?.removeAttribute("hidden"), this.querySelector(".feedback-actions")?.removeAttribute("hidden"), t && (t.disabled = !1);
+	}
+	_clearTimers() {
+		this._timer &&= (clearTimeout(this._timer), 0), this._thanksTimer &&= (clearTimeout(this._thanksTimer), 0);
+	}
+}, oe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), se = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ce = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -1223,13 +1409,13 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 		let a = `${this.id}-listbox`;
 		this._listboxId = a, this.innerHTML = `
       <div class="search-select${i}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${k(a)}" aria-label="${k(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${M(a)}" aria-label="${M(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
           ${n ? f(n, { className: "search-select-icon" }) : ""}
           <div class="ms-chips" data-chips></div>
           ${f("chevron-down", { className: "search-select-caret" })}
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${k(a)}" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search">${f("search")}<input class="search-select-input" placeholder="${k(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${f("x")}</button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${M(a)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${e ? `<div class="search-select-search">${f("search")}<input class="search-select-input" placeholder="${M(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${f("x")}</button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -1243,7 +1429,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 			e.innerHTML = `<span class="search-select-placeholder">${h(t)}</span>`;
 			return;
 		}
-		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${k(e)}" aria-label="Remove ${k(A(this._labelFor(e)))}">${f("x")}</button></span>`).join(""), this._collapseChips();
+		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${M(e)}" aria-label="Remove ${M(le(this._labelFor(e)))}">${f("x")}</button></span>`).join(""), this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -1267,11 +1453,11 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
 		if (!t) return;
 		let r = (e || "").trim().toLowerCase(), i = this._readOptions();
-		r && (i = i.filter((e) => A(e.label).toLowerCase().includes(r)));
+		r && (i = i.filter((e) => le(e.label).toLowerCase().includes(r)));
 		let a = this._listboxId || `${this.id || "wui-multiselect"}-listbox`;
 		t.innerHTML = i.map((e, t) => {
 			let n = this._values.includes(String(e.value));
-			return `<button type="button" role="option" id="${k(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${k(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${_(e)}</span><span class="ms-check">${f("check")}</span></button>`;
+			return `<button type="button" role="option" id="${M(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${M(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${_(e)}</span><span class="ms-check">${f("check")}</span></button>`;
 		}).join(""), n && (n.hidden = i.length > 0), this._active = -1, this.querySelector(".search-select-control")?.removeAttribute("aria-activedescendant"), this._reanchor?.();
 	}
 	_wire() {
@@ -1351,7 +1537,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, k = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), A = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ae = /[^0-9]/g, oe = /[^0-9a-zA-Z]/g, j = class extends HTMLElement {
+}, M = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), le = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ue = /[^0-9]/g, de = /[^0-9a-zA-Z]/g, fe = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1382,7 +1568,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 		this._value = this._clean(e), u(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? oe : ae, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? de : ue, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -1473,7 +1659,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, se = [
+}, pe = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2699,56 +2885,56 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], M = (e) => (se.find((t) => t[0] === e) || [
+], N = (e) => (pe.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], N = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, P = null, ce = null;
-function le() {
-	return P ? Promise.resolve(P) : (ce ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (P = {
+])[2], P = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, F = null, I = null;
+function me() {
+	return F ? Promise.resolve(F) : (I ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (F = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		examples: t.default || t
-	}, P)).catch(() => null), ce);
+	}, F)).catch(() => null), I);
 }
-function F(e, t) {
-	if (!P || !t) return t;
+function L(e, t) {
+	if (!F || !t) return t;
 	try {
-		return new P.AsYouType(e).input(t);
+		return new F.AsYouType(e).input(t);
 	} catch {
 		return t;
 	}
 }
-function I(e) {
-	if (!P) return null;
+function R(e) {
+	if (!F) return null;
 	try {
-		return P.getExampleNumber(e, P.examples)?.formatNational() || null;
+		return F.getExampleNumber(e, F.examples)?.formatNational() || null;
 	} catch {
 		return null;
 	}
 }
-function L(e) {
-	if (!P || !e) return null;
+function z(e) {
+	if (!F || !e) return null;
 	try {
-		return P.isValidPhoneNumber(e);
+		return F.isValidPhoneNumber(e);
 	} catch {
 		return null;
 	}
 }
-function ue(e) {
-	if (!P) return null;
+function he(e) {
+	if (!F) return null;
 	try {
-		let t = P.getExampleNumber(e, P.examples);
+		let t = F.getExampleNumber(e, F.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function R(e) {
-	if (!P || !e?.trim().startsWith("+")) return null;
+function B(e) {
+	if (!F || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new P.AsYouType();
+		let t = new F.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -2759,7 +2945,7 @@ function R(e) {
 		return null;
 	}
 }
-var z = class extends HTMLElement {
+var V = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2806,13 +2992,13 @@ var z = class extends HTMLElement {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return this._national ? `+${M(this._country)}${this._national}` : "";
+		return this._national ? `+${N(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = R(t);
+		let t = String(e ?? "").trim(), n = B(t);
 		if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
 		else if (t.startsWith("+")) {
-			let e = t.replace(/[^0-9]/g, ""), n = String(M(this._country));
+			let e = t.replace(/[^0-9]/g, ""), n = String(N(this._country));
 			n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
 		} else this._national = t.replace(/[^0-9]/g, "");
 		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
@@ -2828,25 +3014,25 @@ var z = class extends HTMLElement {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._country = this.getAttribute("country") || this._country;
-		let e = this.getAttribute("placeholder") || I(this._country) || "Enter phone number";
+		let e = this.getAttribute("placeholder") || R(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 = se.map(([e, n, r], i) => `<button type="button" role="option" id="${B(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${N(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
+		let n = pe.map(([e, n, r], i) => `<button type="button" role="option" id="${H(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${P(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="${B(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${N(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="${H(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="${P(this._country)}" data-flag aria-hidden="true"></span>
             ${f("chevron-down", { className: "phone-chevron" })}
-            <span class="phone-dial" data-dial>+${M(this._country)}</span>
+            <span class="phone-dial" data-dial>+${N(this._country)}</span>
           </button>
-          <div class="country-dropdown-menu" role="listbox" id="${B(t)}" tabindex="-1" hidden>
-            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${f("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${B(t)}" aria-autocomplete="list" /></div>
+          <div class="country-dropdown-menu" role="listbox" id="${H(t)}" tabindex="-1" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${f("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${H(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="${B(e)}" value="${B(F(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${B(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${B(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${H(e)}" value="${H(L(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${H(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${H(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
       </div>
       <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, u(this, this.value), this._wire();
 	}
@@ -2877,12 +3063,12 @@ var z = class extends HTMLElement {
 			}
 			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 = N(e)), d && (d.textContent = `+${M(e)}`);
+			this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className = P(e)), d && (d.textContent = `+${N(e)}`);
 			for (let t of this._itemEls()) {
 				let n = t.dataset.iso === e;
 				t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
 			}
-			!this.getAttribute("placeholder") && l && (l.placeholder = I(e) || "Enter phone number"), l && this._national && (l.value = F(e, this._national)), g(), this._syncMirror(), this._emitChange(), l?.focus();
+			!this.getAttribute("placeholder") && l && (l.placeholder = R(e) || "Enter phone number"), l && this._national && (l.value = L(e, this._national)), g(), this._syncMirror(), this._emitChange(), l?.focus();
 		}, y = (t) => {
 			let n = this._visibleItems();
 			if (t.key === "ArrowDown") {
@@ -2916,7 +3102,7 @@ var z = class extends HTMLElement {
 		let b = this.querySelector("[data-phone-error]"), x = (e) => {
 			if (l.classList.toggle("is-invalid", e), e ? l.setAttribute("aria-invalid", "true") : l.removeAttribute("aria-invalid"), b) {
 				if (e) {
-					let e = I(this._country);
+					let e = R(this._country);
 					b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
 				b.hidden = !e;
@@ -2924,15 +3110,15 @@ var z = class extends HTMLElement {
 		};
 		l.addEventListener("input", (e) => {
 			e.stopPropagation();
-			let t = l.value.replace(/[^0-9]/g, ""), n = ue(this._country);
+			let t = l.value.replace(/[^0-9]/g, ""), n = he(this._country);
 			n && t.length > n && (t = t.slice(0, n)), this._national = t;
-			let r = F(this._country, this._national);
-			l.value !== r && (l.value = r), this._syncMirror(), this._emitInput(), l.classList.contains("is-invalid") && (!this._national || L(this.value) === !0) && x(!1);
+			let r = L(this._country, this._national);
+			l.value !== r && (l.value = r), this._syncMirror(), this._emitInput(), l.classList.contains("is-invalid") && (!this._national || z(this.value) === !0) && x(!1);
 		}), l.addEventListener("change", (e) => e.stopPropagation()), l.addEventListener("blur", () => {
-			x(this._national.length > 0 && L(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && z(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), l.addEventListener("paste", (e) => {
-			let t = R(e.clipboardData?.getData("text"));
-			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? l.value = F(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
+			let t = B(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? l.value = L(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();
@@ -2941,9 +3127,9 @@ var z = class extends HTMLElement {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), c(this);
-		}, this._bindGlobal(), le().then((e) => {
-			if (!(!e || !l.isConnected) && (this._national && (l.value = F(this._country, this._national)), !this.getAttribute("placeholder"))) {
-				let e = I(this._country);
+		}, this._bindGlobal(), me().then((e) => {
+			if (!(!e || !l.isConnected) && (this._national && (l.value = L(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = R(this._country);
 				e && (l.placeholder = e);
 			}
 		}), this._syncMirror();
@@ -2954,7 +3140,7 @@ var z = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, B = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), V = class extends HTMLElement {
+}, H = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ge = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3043,19 +3229,19 @@ var z = class extends HTMLElement {
 		this._listboxId = d;
 		let p = e.map((e, t) => {
 			let n = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${H(`${d}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${H(e.value)}" aria-selected="${n}">${_(e)}</button>`;
+			return `<button type="button" role="option" id="${U(`${d}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${U(e.value)}" aria-selected="${n}">${_(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="${H(d)}" aria-label="${H(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="${U(d)}" aria-label="${U(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
           ${a ? f(a, { className: "search-select-icon" }) : ""}
           ${o ? `<span class="search-select-prefix">${h(o)}</span>` : ""}
           <span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? _(l) : h(s)}</span>
           ${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${f("x")}</span>` : ""}
           ${f("chevron-down", { className: "search-select-caret" })}
         </button>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${H(d)}" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search">${f("search")}<input class="search-select-input" placeholder="${H(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${f("x")}</button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${U(d)}" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search">${f("search")}<input class="search-select-input" placeholder="${U(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${f("x")}</button></div>` : ""}
           <div class="search-select-options">${p}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, u(this, this._value), this._wire(), this._syncReset();
@@ -3160,7 +3346,7 @@ var z = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, H = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), U = class extends HTMLElement {
+}, U = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), _e = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3302,7 +3488,7 @@ var z = class extends HTMLElement {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${de(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${ve(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>` : ""}
@@ -3405,7 +3591,7 @@ var z = class extends HTMLElement {
 }, W = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, de = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), G = class extends HTMLElement {
+}, ve = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ye = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -3478,7 +3664,7 @@ var z = class extends HTMLElement {
 		u(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="${G(this._accessibleName())}" placeholder="${G(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
           <div class="ms-chips" data-chips></div>
         </div>
       </div>`, this._rendered = !0, u(this, this._values.join(",")), this._renderControl(), this._wire();
@@ -3490,7 +3676,7 @@ var z = class extends HTMLElement {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${fe(e)}</span><button type="button" class="chip-remove" data-remove="${K(e)}" aria-label="Remove ${K(e)}">${f("x")}</button></span>`).join("");
+			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${be(e)}</span><button type="button" class="chip-remove" data-remove="${G(e)}" aria-label="Remove ${G(e)}">${f("x")}</button></span>`).join("");
 		}
 	}
 	_wire() {
@@ -3561,18 +3747,18 @@ var z = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, fe = (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"), pe = (e, t) => `${q(e)}:${q(t)}`, J = (e) => {
+}, be = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), G = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = (e) => String(e).padStart(2, "0"), xe = (e, t) => `${K(e)}:${K(t)}`, q = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, Y = (e, t = "24") => {
+}, J = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return pe(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}`;
-}, me = class extends HTMLElement {
+	return `${n}:${K(e.m)} ${r}`;
+}, Se = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3619,11 +3805,11 @@ var z = class extends HTMLElement {
 	}
 	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 = q(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="${h(a)}"` : ""}${o ? ` aria-describedby="${h(o)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? Y(t, n) : h(e)}</span>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? J(t, n) : h(e)}</span>
           ${f("clock")}
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -3635,14 +3821,14 @@ var z = class extends HTMLElement {
 	_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 = q(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? J(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 = q(t) || {
 			h: 0,
 			m: 0
-		}, i = J(n) || {
+		}, i = q(n) || {
 			h: 23,
 			m: 59
 		}, a = [], o = r.h, s = r.m;
@@ -3655,10 +3841,10 @@ var z = class extends HTMLElement {
 	_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 = q(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			let o = n[e], s = pe(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\"" : ""}>${J(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -3756,7 +3942,7 @@ var z = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, he = "wui-wizard-step", ge = class extends HTMLElement {
+}, Ce = "wui-wizard-step", we = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -3790,7 +3976,7 @@ var z = class extends HTMLElement {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${he}`)];
+		return [...this.querySelectorAll(`:scope > ${Ce}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -3849,13 +4035,13 @@ var z = class extends HTMLElement {
 		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" ? f("check") : a === "error" ? f("alert-triangle") : a === "skipped" ? f("minus") : c ? f(c) : String(l);
-			let d = a === "pending" ? "step" : `step ${a}`, p = 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}"${p}>${g}</button>` : `<div class="${d}"${p}>${g}</div>`;
+			let d = a === "pending" ? "step" : `step ${a}`, p = a === "active" ? " aria-current=\"step\"" : "", m = i || r < this._active, h = s ? `<span class="step-desc">${Y(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">${Y(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Y(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Y(o)}</span>${h}`, m ? `<button type="button" class="${d}" data-step="${r}"${p}>${g}</button>` : `<div class="${d}"${p}>${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}>${f("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)}${f("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}>${f("arrow-left", { className: "me-2" })}${Y(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Y(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Y(o)}${f("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Y(c)}</button>`}</span>`;
 	}
 	_wire() {
 		this._teardown(), this._onHeaderClick = (e) => {
@@ -3923,7 +4109,7 @@ var z = class extends HTMLElement {
 	_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;"), _e = class extends HTMLElement {
+}, Y = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Te = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -3937,14 +4123,14 @@ var z = class extends HTMLElement {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, ve = "image/png,image/jpeg,image/webp", ye = 5, be = {
+}, Ee = "image/png,image/jpeg,image/webp", De = 5, Oe = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, xe = {
+}, ke = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -3958,7 +4144,7 @@ var z = class extends HTMLElement {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Q = [
+}, X = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Z = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -3969,44 +4155,103 @@ var z = class extends HTMLElement {
 	".avif",
 	".heic"
 ];
-function Se(e) {
+function Ae(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 Q.some((e) => r.endsWith(e));
+	return Z.some((e) => r.endsWith(e));
 }
-function Ce(e) {
-	let t = Z(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? Q.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+function je(e) {
+	let t = X(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? Z.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function we(e) {
+function Me(e) {
 	let t = [];
-	for (let n of Z(e)) {
-		let e = xe[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of X(e)) {
+		let e = ke[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 Te(e, t) {
-	let n = Z(t);
+function Ne(e, t) {
+	let n = X(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 && (be[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 && (Oe[e] || []).some((e) => i.endsWith(e)));
 }
-function Ee(e, t = {}) {
+function Pe(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? ve : t.accept, r = t.maxSizeMb || 5;
-	return Te(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${we(n)} file.`;
+	let n = t.accept === void 0 ? Ee : t.accept, r = t.maxSizeMb || 5;
+	return Ne(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Me(n)} file.`;
+}
+//#endregion
+//#region src/passwordRules.js
+var Q = {
+	minLength: 8,
+	uppercase: !0,
+	lowercase: !0,
+	digit: !0,
+	special: !0,
+	uniqueChars: 0
+}, Fe = "Password Requirements";
+function Ie(e) {
+	return e === !0 || e == null ? { ...Q } : {
+		...Q,
+		...e
+	};
+}
+function Le(e) {
+	let t = Ie(e), n = [];
+	if (t.minLength > 0 && n.push({
+		key: "length",
+		label: `At least ${t.minLength} characters long`,
+		test: (e) => e.length >= t.minLength
+	}), t.uppercase && n.push({
+		key: "uppercase",
+		label: "At least one uppercase letter",
+		test: (e) => /[A-Z]/.test(e)
+	}), t.lowercase && n.push({
+		key: "lowercase",
+		label: "At least one lowercase letter",
+		test: (e) => /[a-z]/.test(e)
+	}), t.digit && n.push({
+		key: "digit",
+		label: "At least one digit",
+		test: (e) => /[0-9]/.test(e)
+	}), t.special && n.push({
+		key: "special",
+		label: "At least one special character",
+		test: (e) => /[^A-Za-z0-9]/.test(e)
+	}), t.uniqueChars > 0) {
+		let e = t.uniqueChars;
+		n.push({
+			key: "unique",
+			label: `At least ${e} unique character${e > 1 ? "s" : ""}`,
+			test: (t) => new Set(t).size >= e
+		});
+	}
+	return n;
+}
+function Re(e, t) {
+	let n = e == null ? "" : String(e);
+	return Le(t).map((e) => ({
+		key: e.key,
+		label: e.label,
+		met: e.test(n)
+	}));
+}
+function ze(e, t) {
+	return Re(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 De() {
-	$("wui-select", V), $("wui-phone", z), $("wui-datepicker", ee), $("wui-date-range", te), $("wui-dock", ne), $("wui-slider", U), $("wui-timepicker", me), $("wui-autocomplete", v), $("wui-multiselect", ie), $("wui-taginput", G), $("wui-otp", j), $("wui-status-icon", n), $("wui-wizard-step", _e), $("wui-wizard", ge);
+function Be() {
+	$("wui-select", ge), $("wui-phone", V), $("wui-datepicker", ee), $("wui-date-range", te), $("wui-dock", ne), $("wui-feedback", j), $("wui-slider", _e), $("wui-timepicker", Se), $("wui-autocomplete", v), $("wui-multiselect", ce), $("wui-taginput", ye), $("wui-otp", fe), $("wui-status-icon", n), $("wui-wizard-step", Te), $("wui-wizard", we);
 }
-De();
+Be();
 //#endregion
-export { ve as DEFAULT_IMAGE_ACCEPT, ye as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, v as WuiAutocomplete, ee as WuiDatePicker, te as WuiDateRange, ne as WuiDock, ie as WuiMultiSelect, j as WuiOtp, z as WuiPhone, V as WuiSelect, U as WuiSlider, n as WuiStatusIcon, G as WuiTagInput, me as WuiTimePicker, ge as WuiWizard, _e as WuiWizardStep, we as acceptLabel, De as defineWeborityElements, Se as isImageFile, Ce as isImageOnlyAccept, Te as matchesAccept, Ee as validateFile };
+export { Ee as DEFAULT_IMAGE_ACCEPT, De as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, Fe as DEFAULT_REQUIREMENTS_TITLE, t as STATUS_TONES, v as WuiAutocomplete, ee as WuiDatePicker, te as WuiDateRange, ne as WuiDock, j as WuiFeedback, ce as WuiMultiSelect, fe as WuiOtp, V as WuiPhone, ge as WuiSelect, _e as WuiSlider, n as WuiStatusIcon, ye as WuiTagInput, Se as WuiTimePicker, we as WuiWizard, Te as WuiWizardStep, Me as acceptLabel, Le as buildPasswordRules, Be as defineWeborityElements, Re as evaluatePassword, Ae as isImageFile, je as isImageOnlyAccept, Ne as matchesAccept, ze as passwordSatisfies, Pe as validateFile };