@webority/ui-elements 0.10.1 → 0.11.1

package/dist/ui-elements.js

@@ -866,7 +866,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, A = class extends e {
+}, te = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1081,7 +1081,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, te = class extends e {
+}, ne = class extends e {
 	static get observedAttributes() {
 		return [
 			"static",
@@ -1102,10 +1102,10 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		e === "static" && this.isConnected && this._wire();
 	}
 	_maxScale() {
-		return ne(this.getAttribute("max-scale"), 1.6);
+		return re(this.getAttribute("max-scale"), 1.6);
 	}
 	_radius() {
-		return ne(this.getAttribute("radius"), 100);
+		return re(this.getAttribute("radius"), 100);
 	}
 	_magnifyEnabled() {
 		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
@@ -1130,10 +1130,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();
 	}
-}, ne = (e, t) => {
+}, re = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, j = "wui-feedback-submit", M = {
+}, A = "wui-feedback-submit", j = {
 	label: "Feedback",
 	heading: "Share feedback",
 	placeholder: "What's working, what isn't?",
@@ -1144,7 +1144,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."
-}, re = 1e4, ie = 1600, N = class extends e {
+}, ie = 1e4, ae = 1600, oe = class extends e {
 	static get observedAttributes() {
 		return [
 			"position",
@@ -1166,19 +1166,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") || M.label;
+		return this.getAttribute("label") || j.label;
 	}
 	set label(e) {
 		this.setAttribute("label", String(e ?? ""));
 	}
 	get heading() {
-		return this.getAttribute("heading") || M.heading;
+		return this.getAttribute("heading") || j.heading;
 	}
 	set heading(e) {
 		this.setAttribute("heading", String(e ?? ""));
 	}
 	get placeholder() {
-		return this.getAttribute("placeholder") || M.placeholder;
+		return this.getAttribute("placeholder") || j.placeholder;
 	}
 	set placeholder(e) {
 		this.setAttribute("placeholder", String(e ?? ""));
@@ -1193,10 +1193,10 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._open === !0;
 	}
 	addEventListener(e, t, n) {
-		e === j && (this._submitListeners += 1), super.addEventListener(e, t, n);
+		e === A && (this._submitListeners += 1), super.addEventListener(e, t, n);
 	}
 	removeEventListener(e, t, n) {
-		e === j && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
+		e === A && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
 	}
 	connectedCallback() {
 		this._rendered || this.render();
@@ -1212,31 +1212,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">${ae(this.label)}</span>
+        <span class="feedback-trigger-label">${se(this.label)}</span>
       </button>
-      <div class="feedback-panel" role="dialog" aria-label="${oe(this.heading)}" hidden>
+      <div class="feedback-panel" role="dialog" aria-label="${ce(this.heading)}" hidden>
         <div class="feedback-head">
-          <h2 class="feedback-heading">${ae(this.heading)}</h2>
+          <h2 class="feedback-heading">${se(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">${M.messageLabel}</span>
-            <textarea class="feedback-message" rows="4" required placeholder="${oe(this.placeholder)}"></textarea>
+            <span class="feedback-field-label">${j.messageLabel}</span>
+            <textarea class="feedback-message" rows="4" required placeholder="${ce(this.placeholder)}"></textarea>
           </label>
           ${this.collectEmail ? `<label class="feedback-field">
-            <span class="feedback-field-label">${M.emailLabel}</span>
+            <span class="feedback-field-label">${j.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">${M.submitLabel}</button>
+          <button type="button" class="feedback-submit">${j.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">${M.thanks}</span>
+          <span class="feedback-thanks-text">${j.thanks}</span>
         </div>
       </div>`, this._rendered = !0, this._wire();
 		let r = this._refs();
@@ -1274,18 +1274,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();
-		}, ie);
+		}, ae);
 	}
 	failed(e) {
 		this._clearTimers(), this._state = "error", this._setBusy(!1);
 		let { error: t, message: n } = this._refs();
-		t && (t.textContent = e || M.failedError, t.hidden = !1), n?.focus();
+		t && (t.textContent = e || j.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 = M.emptyError, n.hidden = !1), e?.focus();
+			n && (n.textContent = j.emptyError, n.hidden = !1), e?.focus();
 			return;
 		}
 		n && (n.hidden = !0, n.textContent = ""), this._state = "submitting", this._setBusy(!0);
@@ -1295,7 +1295,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(j, {
+		if (this.dispatchEvent(new CustomEvent(A, {
 			bubbles: !0,
 			composed: !0,
 			detail: i
@@ -1305,11 +1305,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		}
 		this._timer = setTimeout(() => {
 			this._state === "submitting" && this.failed();
-		}, re);
+		}, ie);
 	}
 	_setBusy(e) {
 		let { submit: t } = this._refs();
-		t && (t.disabled = e, t.textContent = e ? M.sendingLabel : M.submitLabel, this.toggleAttribute("busy", e));
+		t && (t.disabled = e, t.textContent = e ? j.sendingLabel : j.submitLabel, this.toggleAttribute("busy", e));
 	}
 	_reset() {
 		this._clearTimers(), this._state = "idle", this._setBusy(!1);
@@ -1319,7 +1319,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);
 	}
-}, ae = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), oe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), se = class extends e {
+}, 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 = {
+	enter: "Enter",
+	comma: ",",
+	space: " ",
+	tab: "Tab"
+}, ue = {
+	enter: "\n",
+	comma: ",",
+	space: " ",
+	tab: "	"
+}, de = (e) => le[e], fe = (e) => ue[e];
+function pe(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 {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -1334,11 +1350,14 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 			"size",
 			"collapse-chips",
 			"aria-label",
-			"aria-invalid"
+			"aria-invalid",
+			"allow-custom",
+			"custom-pattern",
+			"custom-invalid-message"
 		];
 	}
 	constructor() {
-		super(), this._values = [], this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null;
+		super(), this._values = [], this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null, this._customError = "";
 		try {
 			this._internals = this.attachInternals();
 		} catch {
@@ -1362,44 +1381,66 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	formResetCallback() {
 		this.values = (this._defaultValues || []).slice();
+		let e = this.querySelector("[data-input]");
+		e && (e.value = ""), this._setCustomError("");
 	}
 	attributeChangedCallback(e) {
 		if (e === "aria-invalid") {
 			this._syncInvalid();
 			return;
 		}
-		this._rendered && this.render();
+		e === "custom-pattern" || e === "custom-invalid-message" || this._rendered && this.render();
 	}
 	_syncInvalid() {
 		let e = this.querySelector(".search-select-control");
-		e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
+		e && (this.hasAttribute("aria-invalid") || this._customError ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
 	}
 	get values() {
 		return this._values.slice();
 	}
 	set values(e) {
-		if (this._values = Array.isArray(e) ? e.map(String) : [], d(this, this._values.join(",")), this._rendered) {
-			this._renderControl();
-			let e = this.querySelector(".search-select-input");
-			this._renderOptions(e ? e.value : "");
-		}
+		this._values = Array.isArray(e) ? e.map(String) : [], d(this, this._values.join(",")), this._rendered && (this._renderControl(), this._renderOptions(this._query()));
 	}
 	set options(e) {
-		this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
+		if (this._optionsProp = Array.isArray(e) ? e : null, this._rendered && this._allowCustom) {
+			this._renderControl(), this._renderOptions(this._query());
+			return;
+		}
+		this.isConnected && this.render();
 	}
 	get options() {
 		return this._readOptions();
 	}
+	get validateCustom() {
+		return this._validateCustom ?? null;
+	}
+	set validateCustom(e) {
+		this._validateCustom = typeof e == "function" ? e : null;
+	}
+	get _allowCustom() {
+		return this.hasAttribute("allow-custom");
+	}
+	_query() {
+		let e = this.querySelector(this._allowCustom ? "[data-input]" : ".search-select-input");
+		return e ? e.value : "";
+	}
 	_snapshotDeclared() {
 		if (this._declared) return;
 		let e = [...this.querySelectorAll(":scope > wui-option")];
-		e.length && (this._declared = e.map((e) => ({
-			value: e.getAttribute("value") ?? e.textContent.trim(),
-			label: e.innerHTML,
-			icon: e.getAttribute("icon") || void 0,
-			[h]: !0,
-			selected: e.hasAttribute("selected")
-		})));
+		e.length && (this._declared = e.map((e) => {
+			let t = {
+				value: e.getAttribute("value") ?? e.textContent.trim(),
+				label: e.innerHTML,
+				icon: e.getAttribute("icon") || void 0,
+				[h]: !0,
+				selected: e.hasAttribute("selected")
+			};
+			for (let [n, r] of he) {
+				let i = e.getAttribute(n);
+				i && (t[r] = i);
+			}
+			return e.hasAttribute("disabled") && (t.disabled = !0), t;
+		}));
 	}
 	_readOptions() {
 		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
@@ -1414,32 +1455,54 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	render() {
 		this._snapshotDeclared();
-		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…", n = this.getAttribute("icon"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "";
+		let e = this._allowCustom, t = this.hasAttribute("searchable") && !e, n = this.getAttribute("search-placeholder") || "Search…", r = this.getAttribute("icon"), i = this.getAttribute("size"), a = i === "sm" ? " search-select-sm" : i === "lg" ? " search-select-lg" : "";
 		d(this, this._values.join(",")), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
-		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="${P(a)}" aria-label="${P(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
-          ${n ? p(n, { className: "search-select-icon" }) : ""}
+		let o = `${this.id}-listbox`;
+		this._listboxId = o;
+		let s = this.hasAttribute("disabled");
+		if (e) {
+			let e = `${this.id}-custom-error`;
+			this.innerHTML = `
+      <div class="search-select${a}">
+        <div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : ""}>
+          ${r ? 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>
+          ${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-options"></div>
+        </div>
+      </div>
+      <div class="field-error wui-ms-custom-error" id="${F(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\""}>
+          ${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="${P(a)}" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${P(t)}" 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="${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-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
-      </div>`, this._rendered = !0, d(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
+      </div>`;
+		this._rendered = !0, this._customError = "", d(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
 	}
 	_renderControl() {
 		let e = this.querySelector("[data-chips]");
 		if (!e) return;
-		let t = this.getAttribute("placeholder") || "Select…";
+		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("");
+		if (n) {
+			for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
+			n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
+			return;
+		}
 		if (!this._values.length) {
 			e.innerHTML = `<span class="search-select-placeholder">${g(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="${P(e)}" aria-label="Remove ${P(F(this._labelFor(e)))}">${p("x")}</button></span>`).join(""), this._collapseChips();
+		e.innerHTML = r, this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -1451,7 +1514,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		let n = e.clientWidth, r = (e) => e.offsetLeft + e.offsetWidth;
 		if (r(t[t.length - 1]) <= n) return;
 		let i = document.createElement("span");
-		i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, e.appendChild(i);
+		i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, t[t.length - 1].after(i);
 		let a = i.offsetWidth + 6, o = 0;
 		for (let e of t) if (r(e) <= n - a) o += 1;
 		else break;
@@ -1459,85 +1522,189 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		for (let e = o; e < t.length; e += 1) t[e].style.display = "none";
 		i.textContent = `+${t.length - o}`;
 	}
+	_matches(e, t) {
+		return I(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);
+	}
 	_renderOptions(e) {
 		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) => F(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="${P(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${P(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
-		}).join(""), n && (n.hidden = i.length > 0), this._active = -1, this.querySelector(".search-select-control")?.removeAttribute("aria-activedescendant"), this._reanchor?.();
+		let r = (e || "").trim(), i = r.toLowerCase(), a = this._readOptions();
+		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>`;
+		});
+		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?.();
+	}
+	_combobox() {
+		return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
+	}
+	_setCustomError(e) {
+		this._customError = e || "";
+		let t = this.querySelector(".wui-ms-custom-error"), n = this.querySelector("[data-input]");
+		t && (t.textContent = this._customError, t.hidden = !this._customError), n && (this._customError ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid")), this._syncInvalid();
+	}
+	_customRefusal(e) {
+		let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
+		if (n) {
+			let r = be(n);
+			if (r && !r.test(e)) return t;
+		}
+		let r = this._validateCustom;
+		if (r) {
+			let n = r(e);
+			return n === !0 ? "" : typeof n == "string" && n ? n : t;
+		}
+		return "";
+	}
+	_commitTyped(e) {
+		let t = e.trim().replace(/,+$/, "").trim();
+		if (!t) return "";
+		let n = this._optionNamed(t), r;
+		if (n) {
+			if (n.disabled) return n.disabledHint || this.getAttribute("custom-invalid-message") || "That option is not available.";
+			r = String(n.value);
+		} else {
+			let e = this._customRefusal(t);
+			if (e) return e;
+			r = t;
+		}
+		let i = r.toLowerCase();
+		return this._values.some((e) => e.toLowerCase() === i) || (this._values = [...this._values, r]), "";
 	}
 	_wire() {
 		this._teardown();
-		let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), i = this.querySelector(".search-select-options");
+		let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), i = this.querySelector(".search-select-options"), a = this._allowCustom, o = a ? this.querySelector("[data-input]") : null, l = o || e;
 		if (!e || !t) return;
-		let a = () => this.hasAttribute("disabled"), o = () => s(e, t, { matchWidth: !0 }), l = () => [...this.querySelectorAll(".search-select-option")], u = () => l().filter((e) => !e.hidden), f = (t) => {
-			let n = u();
-			this._active = t;
-			for (let e of l()) e.classList.remove("is-active");
-			t >= 0 && n[t] ? (n[t].classList.add("is-active"), n[t].scrollIntoView({ block: "nearest" }), e.setAttribute("aria-activedescendant", n[t].id)) : e.removeAttribute("aria-activedescendant");
-		}, p = () => !t.hidden, h = () => {
-			a() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), o(), n && (n.value = "", this._renderOptions(""), n.focus()));
-		}, g = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), f(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
-		}, _ = () => {
+		let u = () => this.hasAttribute("disabled"), f = () => s(e, t, { matchWidth: !0 }), p = () => [...this.querySelectorAll(".search-select-option")], h = () => p().filter((e) => !e.hidden), g = (e) => {
+			let t = h();
+			this._active = e;
+			for (let e of p()) e.classList.remove("is-active");
+			e >= 0 && t[e] ? (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }), l.setAttribute("aria-activedescendant", t[e].id)) : l.removeAttribute("aria-activedescendant");
+		}, _ = !1, v = () => a ? _ : !t.hidden, y = () => {
+			let n = _ && p().length > 0, r = t.hidden;
+			t.hidden = !n, l.setAttribute("aria-expanded", String(n)), e.classList.toggle("open", n), n && r && f();
+		};
+		this._syncCustomMenu = a ? y : null;
+		let b = () => {
+			if (!u()) {
+				if (a) {
+					_ = !0, y();
+					return;
+				}
+				t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), f(), n && (n.value = "", this._renderOptions(""), n.focus());
+			}
+		}, x = () => {
+			a ? (_ = !1, y()) : (t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open")), g(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
+		}, S = () => {
 			d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-		}, v = (e) => {
+		}, C = (e) => {
 			let t = String(e);
-			this._values.includes(t) ? this._values = this._values.filter((e) => e !== t) : this._values = [...this._values, t], this._renderControl(), this._renderOptions(n ? n.value : ""), _();
-		}, y = (e) => {
-			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), _();
+			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) => {
+			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 = "";
+			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) => {
+			if (!(!e || e.getAttribute("aria-disabled") === "true")) {
+				if (e.dataset.custom === "true") {
+					T(e.dataset.value);
+					return;
+				}
+				C(e.dataset.value), o?.value && (o.value = "", this._setCustomError(""), this._renderOptions(""));
+			}
 		};
 		e.addEventListener("click", (e) => {
-			if (a()) return;
+			if (u()) return;
 			let t = e.target.closest("[data-remove]");
 			if (t) {
-				e.stopPropagation(), y(t.dataset.remove);
+				e.stopPropagation(), w(t.dataset.remove), o?.focus();
+				return;
+			}
+			if (o) {
+				let t = v();
+				e.target !== o && o.focus(), e.target === o || !t ? b() : x();
 				return;
 			}
-			p() ? g() : h();
+			v() ? x() : b();
 		}), i.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && (v(t.dataset.value), n?.focus());
+			t && (E(t), (o || n)?.focus());
 		}), i.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && f(u().indexOf(t));
-		}), i.addEventListener("mouseleave", () => f(-1)), n?.addEventListener("input", () => {
-			this._renderOptions(n.value), r && (r.hidden = !n.value), f(-1);
+			t && g(h().indexOf(t));
+		}), i.addEventListener("mouseleave", () => g(-1)), i.addEventListener("error", (e) => {
+			e.target?.classList?.contains("avatar-img") && e.target.remove();
+		}, !0), n?.addEventListener("input", () => {
+			this._renderOptions(n.value), r && (r.hidden = !n.value), g(-1);
 		}), this._navHandler = m({
-			getVisibleOptions: u,
+			getVisibleOptions: h,
 			getActive: () => this._active,
-			setActive: (e) => f(e),
+			setActive: (e) => g(e),
 			onEnter: (e) => {
-				e && v(e.dataset.value);
+				e ? E(e) : o?.value.trim() && T(o.value);
 			},
 			onEscape: () => {
-				this._navHandler.clearTypeahead(), g(), e.focus();
+				this._navHandler.clearTypeahead(), x(), o || e.focus();
 			}
 		});
-		let b = (e) => {
-			if (e.key === "Backspace" && !n?.value && this._values.length) {
-				y(this._values[this._values.length - 1]);
+		let D = (e) => {
+			let t = o || n;
+			if (e.key === "Backspace" && !t?.value && this._values.length) {
+				w(this._values[this._values.length - 1]);
 				return;
 			}
 			this._navHandler.handler(e);
 		};
-		n?.addEventListener("keydown", b), r?.addEventListener("click", () => {
+		if (n?.addEventListener("keydown", D), r?.addEventListener("click", () => {
 			n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
-		}), e.addEventListener("keydown", (e) => {
-			if (p()) {
-				b(e);
+		}), o) {
+			let t = (e) => {
+				e.target !== o && e.preventDefault();
+			};
+			i.addEventListener("mousedown", t), e.addEventListener("mousedown", t), o.addEventListener("focus", () => b()), o.addEventListener("input", () => {
+				this._customError && this._setCustomError(""), this._renderOptions(o.value), b();
+			}), o.addEventListener("keydown", (e) => {
+				if (e.key === "," && o.value.trim()) {
+					e.preventDefault(), T(o.value);
+					return;
+				}
+				if (e.key === "Enter") {
+					if (this._active < 0 && !o.value.trim()) return;
+					this._navHandler.handler(e);
+					return;
+				}
+				(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), D(e);
+			}), o.addEventListener("paste", (e) => {
+				let t = e.clipboardData?.getData("text/plain") ?? "";
+				M(t, N) && (e.preventDefault(), T(`${o.value}${t}`));
+			}), o.addEventListener("blur", (e) => {
+				e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && T(o.value, { quiet: !0 }), x());
+			});
+		} else e.addEventListener("keydown", (e) => {
+			if (v()) {
+				D(e);
 				return;
 			}
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
-		}), this._bindGlobal = () => {
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
+		});
+		this._bindGlobal = () => {
 			this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
-				p() && !this.contains(e.target) && g();
+				v() && !this.contains(e.target) && x();
 			}, document.addEventListener("click", this._onDocClick), c(this, () => {
-				p() && o();
+				v() && f();
 			});
 		}, this._bindGlobal();
 	}
@@ -1547,7 +1714,35 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, P = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), F = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ce = /[^0-9]/g, le = /[^0-9a-zA-Z]/g, ue = class extends e {
+}, N = [
+	",",
+	";",
+	"\n",
+	"	"
+], he = [
+	["description", "description"],
+	["avatar", "avatar"],
+	["initials", "initials"],
+	["disabled-hint", "disabledHint"]
+], ge = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), _e = (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) => {
+	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);
+	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 {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1578,7 +1773,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		this._value = this._clean(e), d(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? le : ce, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Se : xe, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -1669,7 +1864,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, de = [
+}, L = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2895,65 +3090,481 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], I = (e) => (de.find((t) => t[0] === e) || [
+], R = (e) => (L.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], L = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, R = null, z = null;
-function fe() {
-	return R ? Promise.resolve(R) : (z ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (R = {
+])[2], we = {
+	AD: ["Europe/Andorra"],
+	AE: ["Asia/Dubai"],
+	AF: ["Asia/Kabul"],
+	AG: ["America/Antigua"],
+	AI: ["America/Anguilla"],
+	AL: ["Europe/Tirane"],
+	AM: ["Asia/Yerevan"],
+	AO: ["Africa/Luanda"],
+	AR: [
+		"America/Argentina/Buenos_Aires",
+		"America/Argentina/Catamarca",
+		"America/Argentina/Cordoba",
+		"America/Argentina/Jujuy",
+		"America/Argentina/La_Rioja",
+		"America/Argentina/Mendoza",
+		"America/Argentina/Rio_Gallegos",
+		"America/Argentina/Salta",
+		"America/Argentina/San_Juan",
+		"America/Argentina/San_Luis",
+		"America/Argentina/Tucuman",
+		"America/Argentina/Ushuaia",
+		"America/Buenos_Aires",
+		"America/Catamarca",
+		"America/Cordoba",
+		"America/Jujuy",
+		"America/Mendoza"
+	],
+	AS: [
+		"Pacific/Pago_Pago",
+		"Pacific/Samoa",
+		"US/Samoa"
+	],
+	AT: ["Europe/Vienna"],
+	AU: [
+		"Antarctica/Macquarie",
+		"Australia/Adelaide",
+		"Australia/Brisbane",
+		"Australia/Broken_Hill",
+		"Australia/Darwin",
+		"Australia/Eucla",
+		"Australia/Hobart",
+		"Australia/LHI",
+		"Australia/Lindeman",
+		"Australia/Lord_Howe",
+		"Australia/Melbourne",
+		"Australia/NSW",
+		"Australia/North",
+		"Australia/Perth",
+		"Australia/Queensland",
+		"Australia/South",
+		"Australia/Sydney",
+		"Australia/Tasmania",
+		"Australia/Victoria",
+		"Australia/West",
+		"Australia/Yancowinna"
+	],
+	AW: ["America/Aruba"],
+	AX: ["Europe/Mariehamn"],
+	AZ: ["Asia/Baku"],
+	BA: ["Europe/Sarajevo"],
+	BB: ["America/Barbados"],
+	BD: ["Asia/Dacca", "Asia/Dhaka"],
+	BE: ["Europe/Brussels"],
+	BF: ["Africa/Ouagadougou"],
+	BG: ["Europe/Sofia"],
+	BH: ["Asia/Bahrain"],
+	BI: ["Africa/Bujumbura"],
+	BJ: ["Africa/Porto-Novo"],
+	BL: ["America/St_Barthelemy"],
+	BM: ["Atlantic/Bermuda"],
+	BN: ["Asia/Brunei"],
+	BO: ["America/La_Paz"],
+	BQ: ["America/Kralendijk"],
+	BR: [
+		"America/Araguaina",
+		"America/Bahia",
+		"America/Belem",
+		"America/Boa_Vista",
+		"America/Campo_Grande",
+		"America/Cuiaba",
+		"America/Eirunepe",
+		"America/Fortaleza",
+		"America/Maceio",
+		"America/Manaus",
+		"America/Noronha",
+		"America/Porto_Velho",
+		"America/Recife",
+		"America/Rio_Branco",
+		"America/Santarem",
+		"America/Sao_Paulo",
+		"Brazil/DeNoronha",
+		"Brazil/East",
+		"Brazil/West"
+	],
+	BS: ["America/Nassau"],
+	BT: ["Asia/Thimbu", "Asia/Thimphu"],
+	BW: ["Africa/Gaborone"],
+	BY: ["Europe/Minsk"],
+	BZ: ["America/Belize"],
+	CA: /* @__PURE__ */ "America/Atikokan.America/Blanc-Sablon.America/Cambridge_Bay.America/Creston.America/Dawson.America/Dawson_Creek.America/Edmonton.America/Fort_Nelson.America/Glace_Bay.America/Goose_Bay.America/Halifax.America/Inuvik.America/Iqaluit.America/Moncton.America/Rankin_Inlet.America/Regina.America/Resolute.America/St_Johns.America/Swift_Current.America/Toronto.America/Vancouver.America/Whitehorse.America/Winnipeg.Canada/Atlantic.Canada/Central.Canada/Eastern.Canada/Mountain.Canada/Newfoundland.Canada/Pacific.Canada/Saskatchewan.Canada/Yukon".split("."),
+	CC: ["Indian/Cocos"],
+	CD: ["Africa/Kinshasa", "Africa/Lubumbashi"],
+	CF: ["Africa/Bangui"],
+	CG: ["Africa/Brazzaville"],
+	CH: ["Europe/Zurich"],
+	CI: ["Africa/Abidjan"],
+	CK: ["Pacific/Rarotonga"],
+	CL: [
+		"America/Coyhaique",
+		"America/Punta_Arenas",
+		"America/Santiago",
+		"Chile/Continental",
+		"Chile/EasterIsland",
+		"Pacific/Easter"
+	],
+	CM: ["Africa/Douala"],
+	CN: ["Asia/Shanghai", "Asia/Urumqi"],
+	CO: ["America/Bogota"],
+	CR: ["America/Costa_Rica"],
+	CU: ["America/Havana"],
+	CV: ["Atlantic/Cape_Verde"],
+	CW: ["America/Curacao"],
+	CX: ["Indian/Christmas"],
+	CY: [
+		"Asia/Famagusta",
+		"Asia/Nicosia",
+		"Europe/Nicosia"
+	],
+	CZ: ["Europe/Prague"],
+	DE: ["Europe/Berlin", "Europe/Busingen"],
+	DJ: ["Africa/Djibouti"],
+	DK: ["Europe/Copenhagen"],
+	DM: ["America/Dominica"],
+	DO: ["America/Santo_Domingo"],
+	DZ: ["Africa/Algiers"],
+	EC: ["America/Guayaquil", "Pacific/Galapagos"],
+	EE: ["Europe/Tallinn"],
+	EG: ["Africa/Cairo"],
+	EH: ["Africa/El_Aaiun"],
+	ER: ["Africa/Asmara", "Africa/Asmera"],
+	ES: [
+		"Africa/Ceuta",
+		"Atlantic/Canary",
+		"Europe/Madrid"
+	],
+	ET: ["Africa/Addis_Ababa"],
+	FI: ["Europe/Helsinki"],
+	FJ: ["Pacific/Fiji"],
+	FK: ["Atlantic/Stanley"],
+	FM: [
+		"Pacific/Chuuk",
+		"Pacific/Kosrae",
+		"Pacific/Pohnpei",
+		"Pacific/Ponape",
+		"Pacific/Truk"
+	],
+	FO: ["Atlantic/Faeroe", "Atlantic/Faroe"],
+	FR: ["Europe/Paris"],
+	GA: ["Africa/Libreville"],
+	GB: ["Europe/London"],
+	GD: ["America/Grenada"],
+	GE: ["Asia/Tbilisi"],
+	GF: ["America/Cayenne"],
+	GG: ["Europe/Guernsey"],
+	GH: ["Africa/Accra"],
+	GI: ["Europe/Gibraltar"],
+	GL: [
+		"America/Danmarkshavn",
+		"America/Godthab",
+		"America/Nuuk",
+		"America/Scoresbysund",
+		"America/Thule"
+	],
+	GM: ["Africa/Banjul"],
+	GN: ["Africa/Conakry"],
+	GP: ["America/Guadeloupe"],
+	GQ: ["Africa/Malabo"],
+	GR: ["Europe/Athens"],
+	GT: ["America/Guatemala"],
+	GU: ["Pacific/Guam"],
+	GW: ["Africa/Bissau"],
+	GY: ["America/Guyana"],
+	HK: ["Asia/Hong_Kong"],
+	HN: ["America/Tegucigalpa"],
+	HR: ["Europe/Zagreb"],
+	HT: ["America/Port-au-Prince"],
+	HU: ["Europe/Budapest"],
+	ID: [
+		"Asia/Jakarta",
+		"Asia/Jayapura",
+		"Asia/Makassar",
+		"Asia/Pontianak",
+		"Asia/Ujung_Pandang"
+	],
+	IE: ["Europe/Dublin"],
+	IL: ["Asia/Jerusalem"],
+	IM: ["Europe/Isle_of_Man"],
+	IN: ["Asia/Calcutta", "Asia/Kolkata"],
+	IO: ["Indian/Chagos"],
+	IQ: ["Asia/Baghdad"],
+	IR: ["Asia/Tehran"],
+	IS: ["Atlantic/Reykjavik"],
+	IT: ["Europe/Rome"],
+	JE: ["Europe/Jersey"],
+	JM: ["America/Jamaica"],
+	JO: ["Asia/Amman"],
+	JP: ["Asia/Tokyo"],
+	KE: ["Africa/Nairobi"],
+	KG: ["Asia/Bishkek"],
+	KH: ["Asia/Phnom_Penh"],
+	KI: [
+		"Pacific/Kanton",
+		"Pacific/Kiritimati",
+		"Pacific/Tarawa"
+	],
+	KM: ["Indian/Comoro"],
+	KN: ["America/St_Kitts"],
+	KP: ["Asia/Pyongyang"],
+	KR: ["Asia/Seoul"],
+	KW: ["Asia/Kuwait"],
+	KY: ["America/Cayman"],
+	KZ: [
+		"Asia/Almaty",
+		"Asia/Aqtau",
+		"Asia/Aqtobe",
+		"Asia/Atyrau",
+		"Asia/Oral",
+		"Asia/Qostanay",
+		"Asia/Qyzylorda"
+	],
+	LA: ["Asia/Vientiane"],
+	LB: ["Asia/Beirut"],
+	LC: ["America/St_Lucia"],
+	LI: ["Europe/Vaduz"],
+	LK: ["Asia/Colombo"],
+	LR: ["Africa/Monrovia"],
+	LS: ["Africa/Maseru"],
+	LT: ["Europe/Vilnius"],
+	LU: ["Europe/Luxembourg"],
+	LV: ["Europe/Riga"],
+	LY: ["Africa/Tripoli"],
+	MA: ["Africa/Casablanca"],
+	MC: ["Europe/Monaco"],
+	MD: ["Europe/Chisinau"],
+	ME: ["Europe/Podgorica"],
+	MF: ["America/Marigot"],
+	MG: ["Indian/Antananarivo"],
+	MH: ["Pacific/Kwajalein", "Pacific/Majuro"],
+	MK: ["Europe/Skopje"],
+	ML: ["Africa/Bamako"],
+	MM: ["Asia/Rangoon", "Asia/Yangon"],
+	MN: [
+		"Asia/Hovd",
+		"Asia/Ulaanbaatar",
+		"Asia/Ulan_Bator"
+	],
+	MO: ["Asia/Macao", "Asia/Macau"],
+	MP: ["Pacific/Saipan"],
+	MQ: ["America/Martinique"],
+	MR: ["Africa/Nouakchott"],
+	MS: ["America/Montserrat"],
+	MT: ["Europe/Malta"],
+	MU: ["Indian/Mauritius"],
+	MV: ["Indian/Maldives"],
+	MW: ["Africa/Blantyre"],
+	MX: [
+		"America/Bahia_Banderas",
+		"America/Cancun",
+		"America/Chihuahua",
+		"America/Ciudad_Juarez",
+		"America/Hermosillo",
+		"America/Matamoros",
+		"America/Mazatlan",
+		"America/Merida",
+		"America/Mexico_City",
+		"America/Monterrey",
+		"America/Ojinaga",
+		"America/Tijuana",
+		"Mexico/BajaNorte",
+		"Mexico/BajaSur",
+		"Mexico/General"
+	],
+	MY: ["Asia/Kuala_Lumpur", "Asia/Kuching"],
+	MZ: ["Africa/Maputo"],
+	NA: ["Africa/Windhoek"],
+	NC: ["Pacific/Noumea"],
+	NE: ["Africa/Niamey"],
+	NF: ["Pacific/Norfolk"],
+	NG: ["Africa/Lagos"],
+	NI: ["America/Managua"],
+	NL: ["Europe/Amsterdam"],
+	NO: ["Europe/Oslo"],
+	NP: ["Asia/Kathmandu", "Asia/Katmandu"],
+	NR: ["Pacific/Nauru"],
+	NU: ["Pacific/Niue"],
+	NZ: ["Pacific/Auckland", "Pacific/Chatham"],
+	OM: ["Asia/Muscat"],
+	PA: ["America/Panama"],
+	PE: ["America/Lima"],
+	PF: [
+		"Pacific/Gambier",
+		"Pacific/Marquesas",
+		"Pacific/Tahiti"
+	],
+	PG: ["Pacific/Bougainville", "Pacific/Port_Moresby"],
+	PH: ["Asia/Manila"],
+	PK: ["Asia/Karachi"],
+	PL: ["Europe/Warsaw"],
+	PM: ["America/Miquelon"],
+	PR: ["America/Puerto_Rico"],
+	PS: ["Asia/Gaza", "Asia/Hebron"],
+	PT: [
+		"Atlantic/Azores",
+		"Atlantic/Madeira",
+		"Europe/Lisbon"
+	],
+	PW: ["Pacific/Palau"],
+	PY: ["America/Asuncion"],
+	QA: ["Asia/Qatar"],
+	RE: ["Indian/Reunion"],
+	RO: ["Europe/Bucharest"],
+	RS: ["Europe/Belgrade"],
+	RU: /* @__PURE__ */ "Asia/Anadyr.Asia/Barnaul.Asia/Chita.Asia/Irkutsk.Asia/Kamchatka.Asia/Khandyga.Asia/Krasnoyarsk.Asia/Magadan.Asia/Novokuznetsk.Asia/Novosibirsk.Asia/Omsk.Asia/Sakhalin.Asia/Srednekolymsk.Asia/Tomsk.Asia/Ust-Nera.Asia/Vladivostok.Asia/Yakutsk.Asia/Yekaterinburg.Europe/Astrakhan.Europe/Kaliningrad.Europe/Kirov.Europe/Moscow.Europe/Samara.Europe/Saratov.Europe/Ulyanovsk.Europe/Volgograd".split("."),
+	RW: ["Africa/Kigali"],
+	SA: ["Asia/Riyadh"],
+	SB: ["Pacific/Guadalcanal"],
+	SC: ["Indian/Mahe"],
+	SD: ["Africa/Khartoum"],
+	SE: ["Europe/Stockholm"],
+	SG: ["Asia/Singapore"],
+	SH: ["Atlantic/St_Helena"],
+	SI: ["Europe/Ljubljana"],
+	SJ: ["Arctic/Longyearbyen"],
+	SK: ["Europe/Bratislava"],
+	SL: ["Africa/Freetown"],
+	SM: ["Europe/San_Marino"],
+	SN: ["Africa/Dakar"],
+	SO: ["Africa/Mogadishu"],
+	SR: ["America/Paramaribo"],
+	SS: ["Africa/Juba"],
+	ST: ["Africa/Sao_Tome"],
+	SV: ["America/El_Salvador"],
+	SX: ["America/Lower_Princes"],
+	SY: ["Asia/Damascus"],
+	SZ: ["Africa/Mbabane"],
+	TC: ["America/Grand_Turk"],
+	TD: ["Africa/Ndjamena"],
+	TG: ["Africa/Lome"],
+	TH: ["Asia/Bangkok"],
+	TJ: ["Asia/Dushanbe"],
+	TK: ["Pacific/Fakaofo"],
+	TL: ["Asia/Dili"],
+	TM: ["Asia/Ashgabat", "Asia/Ashkhabad"],
+	TN: ["Africa/Tunis"],
+	TO: ["Pacific/Tongatapu"],
+	TR: ["Asia/Istanbul", "Europe/Istanbul"],
+	TT: ["America/Port_of_Spain"],
+	TV: ["Pacific/Funafuti"],
+	TW: ["Asia/Taipei"],
+	TZ: ["Africa/Dar_es_Salaam"],
+	UA: [
+		"Europe/Kiev",
+		"Europe/Kyiv",
+		"Europe/Simferopol"
+	],
+	UG: ["Africa/Kampala"],
+	US: /* @__PURE__ */ "America/Adak.America/Anchorage.America/Boise.America/Chicago.America/Denver.America/Detroit.America/Indiana/Indianapolis.America/Indiana/Knox.America/Indiana/Marengo.America/Indiana/Petersburg.America/Indiana/Tell_City.America/Indiana/Vevay.America/Indiana/Vincennes.America/Indiana/Winamac.America/Indianapolis.America/Juneau.America/Kentucky/Louisville.America/Kentucky/Monticello.America/Knox_IN.America/Los_Angeles.America/Louisville.America/Menominee.America/Metlakatla.America/New_York.America/Nome.America/North_Dakota/Beulah.America/North_Dakota/Center.America/North_Dakota/New_Salem.America/Phoenix.America/Sitka.America/Yakutat.Pacific/Honolulu.US/Alaska.US/Aleutian.US/Arizona.US/Central.US/East-Indiana.US/Eastern.US/Hawaii.US/Indiana-Starke.US/Michigan.US/Mountain.US/Pacific".split("."),
+	UY: ["America/Montevideo"],
+	UZ: ["Asia/Samarkand", "Asia/Tashkent"],
+	VA: ["Europe/Vatican"],
+	VC: ["America/St_Vincent"],
+	VE: ["America/Caracas"],
+	VG: ["America/Tortola"],
+	VI: ["America/St_Thomas", "America/Virgin"],
+	VN: ["Asia/Ho_Chi_Minh", "Asia/Saigon"],
+	VU: ["Pacific/Efate"],
+	WF: ["Pacific/Wallis"],
+	WS: ["Pacific/Apia"],
+	YE: ["Asia/Aden"],
+	YT: ["Indian/Mayotte"],
+	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;
+}
+function Oe(e) {
+	if (!e) return null;
+	let t;
+	try {
+		t = new Intl.Locale(e).region;
+	} catch {
+		return null;
+	}
+	return t && Te.has(t) ? t : null;
+}
+function ke() {
+	let e;
+	try {
+		e = Intl.DateTimeFormat().resolvedOptions().timeZone;
+	} catch {
+		e = void 0;
+	}
+	let t = typeof navigator > "u" ? void 0 : navigator.language;
+	return De(e) || Oe(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 = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		parsePhoneNumber: e.parsePhoneNumber,
 		examples: t.default || t
-	}, R)).catch(() => null), z);
+	}, B)).catch(() => null), Ae);
+}
+function Me(e, t) {
+	let n = `+${R(e)}`;
+	return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
 }
-function B(e, t) {
-	if (!R || !t) return t;
+function V(e, t) {
+	if (!B || !t) return t;
 	try {
-		return new R.AsYouType(e).input(t);
+		return Me(e, new B.AsYouType(e).input(`+${R(e)}${t}`)) || t;
 	} catch {
 		return t;
 	}
 }
-function pe(e, t) {
+function Ne(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 V(e) {
-	if (!R) return null;
+function H(e) {
+	if (!B) return null;
 	try {
-		return R.getExampleNumber(e, R.examples)?.formatNational() || null;
+		return Me(e, B.getExampleNumber(e, B.examples)?.formatInternational()) || null;
 	} catch {
 		return null;
 	}
 }
-function H(e) {
-	if (!R || !e) return null;
+function Pe(e) {
+	if (!B || !e) return null;
 	try {
-		if (!R.isValidPhoneNumber(e)) return !1;
-		let t = R.parsePhoneNumber(e)?.getType?.();
+		if (!B.isValidPhoneNumber(e)) return !1;
+		let t = B.parsePhoneNumber(e)?.getType?.();
 		return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
 	} catch {
 		return null;
 	}
 }
-function me(e) {
-	if (!R) return null;
+function Fe(e) {
+	if (!B) return null;
 	try {
-		let t = R.getExampleNumber(e, R.examples);
+		let t = B.getExampleNumber(e, B.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function he(e) {
-	if (!R || !e?.trim().startsWith("+")) return null;
+function Ie(e) {
+	if (!B || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new R.AsYouType();
+		let t = new B.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -2964,7 +3575,7 @@ function he(e) {
 		return null;
 	}
 }
-var ge = class extends e {
+var Le = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2984,7 +3595,7 @@ var ge = class extends e {
 		} catch {
 			this._internals = null;
 		}
-		this._country = "IN", this._national = "", this._active = -1, this._committedValue = "";
+		this._defaultCountry = ke(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -3004,20 +3615,20 @@ var ge = class extends e {
 				t && (n == null ? t.removeAttribute(e) : t.setAttribute(e, n));
 				return;
 			}
-			e === "country" && (this._country = n || "IN", this._suppressCountryRender) || this.render();
+			e === "country" && (this._country = n || this._defaultCountry, this._suppressCountryRender) || this.render();
 		}
 	}
 	formResetCallback() {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return this._national ? `+${I(this._country)}${this._national}` : "";
+		return this._national ? `+${R(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = he(t);
+		let t = String(e ?? "").trim(), n = Ie(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(I(this._country));
+			let e = t.replace(/[^0-9]/g, ""), n = String(R(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();
@@ -3033,25 +3644,25 @@ var ge = 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") || V(this._country) || "Enter phone number";
+		let e = this.getAttribute("placeholder") || H(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 = de.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="${L(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
+		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("");
 		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="${L(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${z(this._country)}" data-flag aria-hidden="true"></span>
             ${p("chevron-down", { className: "phone-chevron" })}
-            <span class="phone-dial" data-dial>+${I(this._country)}</span>
+            <span class="phone-dial" data-dial>+${R(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-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(B(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="${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" : ""} />
       </div>
       <div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, d(this, this.value), this._wire();
 	}
@@ -3082,12 +3693,12 @@ var ge = 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 = L(e)), d && (d.textContent = `+${I(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)}`);
 			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 = V(e) || "Enter phone number"), o && this._national && (o.value = B(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
+			!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();
 		}, y = (t) => {
 			let n = this._visibleItems();
 			if (t.key === "ArrowDown") {
@@ -3121,7 +3732,7 @@ var ge = 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 = V(this._country);
+					let e = H(this._country);
 					b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
 				b.hidden = !e;
@@ -3129,20 +3740,20 @@ var ge = 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 = me(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 = Fe(this._country);
 			i && r.length > i && (r = r.slice(0, i)), this._national = r;
-			let a = B(this._country, this._national);
+			let a = V(this._country, this._national);
 			if (o.value !== a) {
 				o.value = a;
-				let e = pe(a, Math.min(n, r.length));
+				let e = Ne(a, Math.min(n, r.length));
 				o.setSelectionRange(e, e);
 			}
-			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || H(this.value) === !0) && x(!1);
+			this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Pe(this.value) === !0) && x(!1);
 		}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
-			x(this._national.length > 0 && H(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+			x(this._national.length > 0 && Pe(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), o.addEventListener("paste", (e) => {
-			let t = he(e.clipboardData?.getData("text"));
-			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = B(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
+			let t = Ie(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());
 		}), this._bindGlobal = () => {
 			this._teardownGlobals?.(), this._onDocClick = (e) => {
 				f() && !this.contains(e.target) && g();
@@ -3151,9 +3762,9 @@ var ge = class extends e {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this);
-		}, this._bindGlobal(), fe().then((e) => {
-			if (!(!e || !o.isConnected) && (this._national && (o.value = B(this._country, this._national)), !this.getAttribute("placeholder"))) {
-				let e = V(this._country);
+		}, 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);
 				e && (o.placeholder = e);
 			}
 		}), this._syncMirror();
@@ -3164,7 +3775,7 @@ var ge = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, U = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), _e = class extends e {
+}, U = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Re = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3370,7 +3981,7 @@ var ge = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ve = class extends e {
+}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ze = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3512,7 +4123,7 @@ var ge = class extends e {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${ye(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${Be(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>` : ""}
@@ -3615,7 +4226,7 @@ var ge = class extends e {
 }, G = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, ye = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), be = class extends e {
+}, Be = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Ve = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -3700,16 +4311,14 @@ var ge = class extends e {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${xe(e)}</span><button type="button" class="chip-remove" data-remove="${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">${He(e)}</span><button type="button" class="chip-remove" data-remove="${K(e)}" aria-label="Remove ${K(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 = /* @__PURE__ */ new Set();
-		for (let e of r) e === "enter" ? o.add("Enter") : e === "comma" ? o.add(",") : e === "space" ? o.add(" ") : e === "tab" && o.add("Tab");
-		let 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(de).filter(Boolean)), s = () => {
 			d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}, c = (e) => {
 			let t = e.trim();
@@ -3741,9 +4350,9 @@ var ge = class extends e {
 			e.preventDefault();
 			let n = e.clipboardData.getData("text/plain"), a = [];
 			for (let e of r) {
-				let t = e;
-				if (t === "enter" ? t = "\n" : t === "comma" ? t = "," : t === "space" ? t = " " : t === "tab" && (t = "	"), n.includes(t)) {
-					a.push(...n.split(t).map((e) => e.trim()).filter((e) => e));
+				let t = fe(e) ?? e;
+				if (M(n, [t])) {
+					a.push(...pe(n, [t]));
 					break;
 				}
 			}
@@ -3771,7 +4380,7 @@ var ge = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, xe = (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"), Se = (e, t) => `${q(e)}:${q(t)}`, J = (e) => {
+}, He = (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"), Ue = (e, t) => `${q(e)}:${q(t)}`, J = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
@@ -3779,10 +4388,10 @@ var ge = class extends e {
 	} : null;
 }, Y = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return Se(e.h, e.m);
+	if (t === "24") return Ue(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
 	return `${n}:${q(e.m)} ${r}`;
-}, Ce = class extends e {
+}, We = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3867,7 +4476,7 @@ var ge = class extends e {
 		if (!e) return;
 		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = J(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			let o = n[e], s = Se(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
+			let o = n[e], s = Ue(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>`;
 		}
 		e.innerHTML = a, this._focusActive();
@@ -3966,7 +4575,7 @@ var ge = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, we = "wui-wizard-step", Te = class extends e {
+}, Ge = "wui-wizard-step", Ke = class extends e {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -4000,7 +4609,7 @@ var ge = class extends e {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${we}`)];
+		return [...this.querySelectorAll(`:scope > ${Ge}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -4133,7 +4742,7 @@ var ge = 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;"), Ee = class extends e {
+}, X = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), qe = class extends e {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -4147,8 +4756,8 @@ var ge = class extends e {
 		let e = this.closest("wui-wizard");
 		e && typeof e.refresh == "function" && e.refresh();
 	}
-}, De = 2e3;
-async function Oe(e) {
+}, Je = 2e3;
+async function Ye(e) {
 	try {
 		if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
 	} catch {}
@@ -4163,14 +4772,14 @@ async function Oe(e) {
 }
 //#endregion
 //#region src/fileValidation.js
-var ke = "image/png,image/jpeg,image/webp", Ae = 5, je = {
+var Xe = "image/png,image/jpeg,image/webp", Ze = 5, Qe = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, Me = {
+}, $e = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -4184,7 +4793,7 @@ var ke = "image/png,image/jpeg,image/webp", Ae = 5, je = {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Ne = [
+}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), et = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -4195,35 +4804,35 @@ var ke = "image/png,image/jpeg,image/webp", Ae = 5, je = {
 	".avif",
 	".heic"
 ];
-function Pe(e) {
+function tt(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 Ne.some((e) => r.endsWith(e));
+	return et.some((e) => r.endsWith(e));
 }
-function Fe(e) {
+function nt(e) {
 	let t = Z(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? Ne.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+	return t.length ? t.every((e) => e.startsWith(".") ? et.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function Ie(e) {
+function rt(e) {
 	let t = [];
 	for (let n of Z(e)) {
-		let e = Me[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+		let e = $e[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 Le(e, t) {
+function it(e, t) {
 	let n = Z(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 && (je[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 && (Qe[e] || []).some((e) => i.endsWith(e)));
 }
-function Re(e, t = {}) {
+function at(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? ke : t.accept, r = t.maxSizeMb || 5;
-	return Le(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Ie(n)} file.`;
+	let n = t.accept === void 0 ? Xe : t.accept, r = t.maxSizeMb || 5;
+	return it(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${rt(n)} file.`;
 }
 //#endregion
 //#region src/passwordRules.js
@@ -4234,15 +4843,15 @@ var Q = {
 	digit: !0,
 	special: !0,
 	uniqueChars: 0
-}, ze = "Password Requirements";
-function Be(e) {
+}, ot = "Password Requirements";
+function st(e) {
 	return e === !0 || e == null ? { ...Q } : {
 		...Q,
 		...e
 	};
 }
-function Ve(e) {
-	let t = Be(e), n = [];
+function ct(e) {
+	let t = st(e), n = [];
 	if (t.minLength > 0 && n.push({
 		key: "length",
 		label: `At least ${t.minLength} characters long`,
@@ -4273,25 +4882,25 @@ function Ve(e) {
 	}
 	return n;
 }
-function He(e, t) {
+function lt(e, t) {
 	let n = e == null ? "" : String(e);
-	return Ve(t).map((e) => ({
+	return ct(t).map((e) => ({
 		key: e.key,
 		label: e.label,
 		met: e.test(n)
 	}));
 }
-function Ue(e, t) {
-	return He(e, t).every((e) => e.met);
+function ut(e, t) {
+	return lt(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 We() {
-	$("wui-select", _e), $("wui-phone", ge), $("wui-datepicker", ee), $("wui-date-range", A), $("wui-dock", te), $("wui-feedback", N), $("wui-slider", ve), $("wui-timepicker", Ce), $("wui-autocomplete", y), $("wui-multiselect", se), $("wui-taginput", be), $("wui-otp", ue), $("wui-status-icon", r), $("wui-wizard-step", Ee), $("wui-wizard", Te);
+function dt() {
+	$("wui-select", Re), $("wui-phone", Le), $("wui-datepicker", ee), $("wui-date-range", te), $("wui-dock", ne), $("wui-feedback", oe), $("wui-slider", ze), $("wui-timepicker", We), $("wui-autocomplete", y), $("wui-multiselect", me), $("wui-taginput", Ve), $("wui-otp", Ce), $("wui-status-icon", r), $("wui-wizard-step", qe), $("wui-wizard", Ke);
 }
-We();
+dt();
 //#endregion
-export { De as COPY_FEEDBACK_MS, ke as DEFAULT_IMAGE_ACCEPT, Ae as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, ze as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, ee as WuiDatePicker, A as WuiDateRange, te as WuiDock, N as WuiFeedback, se as WuiMultiSelect, ue as WuiOtp, ge as WuiPhone, _e as WuiSelect, ve as WuiSlider, r as WuiStatusIcon, be as WuiTagInput, Ce as WuiTimePicker, Te as WuiWizard, Ee as WuiWizardStep, Ie as acceptLabel, Ve as buildPasswordRules, Oe as copyTextToClipboard, We as defineWeborityElements, He as evaluatePassword, p as glyphSvg, Pe as isImageFile, Fe as isImageOnlyAccept, Le as matchesAccept, Ue as passwordSatisfies, Re as validateFile };
+export { Je as COPY_FEEDBACK_MS, Xe as DEFAULT_IMAGE_ACCEPT, Ze as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, ot 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, Le as WuiPhone, Re as WuiSelect, ze as WuiSlider, r as WuiStatusIcon, Ve as WuiTagInput, We as WuiTimePicker, Ke as WuiWizard, qe as WuiWizardStep, rt as acceptLabel, ct as buildPasswordRules, Ye as copyTextToClipboard, dt as defineWeborityElements, lt as evaluatePassword, p as glyphSvg, tt as isImageFile, nt as isImageOnlyAccept, it as matchesAccept, ut as passwordSatisfies, at as validateFile };