@webority/ui-elements 0.10.1 → 0.11.0

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 = [
+}, we = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2895,65 +3090,65 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], I = (e) => (de.find((t) => t[0] === e) || [
+], L = (e) => (we.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], R = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, z = null, Te = null;
+function Ee() {
+	return z ? Promise.resolve(z) : (Te ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (z = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		parsePhoneNumber: e.parsePhoneNumber,
 		examples: t.default || t
-	}, R)).catch(() => null), z);
+	}, z)).catch(() => null), Te);
 }
 function B(e, t) {
-	if (!R || !t) return t;
+	if (!z || !t) return t;
 	try {
-		return new R.AsYouType(e).input(t);
+		return new z.AsYouType(e).input(t);
 	} catch {
 		return t;
 	}
 }
-function pe(e, t) {
+function De(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;
+	if (!z) return null;
 	try {
-		return R.getExampleNumber(e, R.examples)?.formatNational() || null;
+		return z.getExampleNumber(e, z.examples)?.formatNational() || null;
 	} catch {
 		return null;
 	}
 }
-function H(e) {
-	if (!R || !e) return null;
+function Oe(e) {
+	if (!z || !e) return null;
 	try {
-		if (!R.isValidPhoneNumber(e)) return !1;
-		let t = R.parsePhoneNumber(e)?.getType?.();
+		if (!z.isValidPhoneNumber(e)) return !1;
+		let t = z.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 ke(e) {
+	if (!z) return null;
 	try {
-		let t = R.getExampleNumber(e, R.examples);
+		let t = z.getExampleNumber(e, z.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function he(e) {
-	if (!R || !e?.trim().startsWith("+")) return null;
+function H(e) {
+	if (!z || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new R.AsYouType();
+		let t = new z.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -2964,7 +3159,7 @@ function he(e) {
 		return null;
 	}
 }
-var ge = class extends e {
+var Ae = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3011,13 +3206,13 @@ var ge = class extends e {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return this._national ? `+${I(this._country)}${this._national}` : "";
+		return this._national ? `+${L(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = he(t);
+		let t = String(e ?? "").trim(), n = H(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(L(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();
@@ -3037,14 +3232,14 @@ var ge = class extends e {
 		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 = we.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="${R(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="${R(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>+${L(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>
@@ -3082,7 +3277,7 @@ 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 = R(e)), d && (d.textContent = `+${L(e)}`);
 			for (let t of this._itemEls()) {
 				let n = t.dataset.iso === e;
 				t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
@@ -3129,19 +3324,19 @@ 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 = ke(this._country);
 			i && r.length > i && (r = r.slice(0, i)), this._national = r;
 			let a = B(this._country, this._national);
 			if (o.value !== a) {
 				o.value = a;
-				let e = pe(a, Math.min(n, r.length));
+				let e = De(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 || Oe(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 && Oe(this.value) === !1), this.value !== this._committedValue && this._emitChange();
 		}), o.addEventListener("paste", (e) => {
-			let t = he(e.clipboardData?.getData("text"));
+			let t = H(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());
 		}), this._bindGlobal = () => {
 			this._teardownGlobals?.(), this._onDocClick = (e) => {
@@ -3151,7 +3346,7 @@ var ge = class extends e {
 			});
 		}, this._teardownGlobals = () => {
 			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this);
-		}, this._bindGlobal(), fe().then((e) => {
+		}, this._bindGlobal(), Ee().then((e) => {
 			if (!(!e || !o.isConnected) && (this._national && (o.value = B(this._country, this._national)), !this.getAttribute("placeholder"))) {
 				let e = V(this._country);
 				e && (o.placeholder = e);
@@ -3164,7 +3359,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;"), je = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3370,7 +3565,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;"), Me = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3512,7 +3707,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="${Ne(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 +3810,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 {
+}, Ne = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), Pe = class extends e {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -3700,16 +3895,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">${Fe(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 +3934,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 +3964,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) => {
+}, 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"), Ie = (e, t) => `${q(e)}:${q(t)}`, J = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
@@ -3779,10 +3972,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 Ie(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 {
+}, Le = class extends e {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3867,7 +4060,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 = Ie(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 +4159,7 @@ var ge = class extends e {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, we = "wui-wizard-step", Te = class extends e {
+}, Re = "wui-wizard-step", ze = class extends e {
 	static get observedAttributes() {
 		return [
 			"active",
@@ -4000,7 +4193,7 @@ var ge = class extends e {
 		this._beforeNext = typeof e == "function" ? e : null;
 	}
 	get _steps() {
-		return [...this.querySelectorAll(`:scope > ${we}`)];
+		return [...this.querySelectorAll(`:scope > ${Re}`)];
 	}
 	refresh() {
 		this._rendered && this._renderChrome();
@@ -4133,7 +4326,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;"), Be = class extends e {
 	static get observedAttributes() {
 		return [
 			"label",
@@ -4147,8 +4340,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) {
+}, Ve = 2e3;
+async function He(e) {
 	try {
 		if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
 	} catch {}
@@ -4163,14 +4356,14 @@ async function Oe(e) {
 }
 //#endregion
 //#region src/fileValidation.js
-var ke = "image/png,image/jpeg,image/webp", Ae = 5, je = {
+var Ue = "image/png,image/jpeg,image/webp", We = 5, Ge = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, Me = {
+}, Ke = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -4184,7 +4377,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), qe = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -4195,35 +4388,35 @@ var ke = "image/png,image/jpeg,image/webp", Ae = 5, je = {
 	".avif",
 	".heic"
 ];
-function Pe(e) {
+function Je(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 qe.some((e) => r.endsWith(e));
 }
-function Fe(e) {
+function Ye(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(".") ? qe.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function Ie(e) {
+function Xe(e) {
 	let t = [];
 	for (let n of Z(e)) {
-		let e = Me[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+		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 Le(e, t) {
+function Ze(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 && (Ge[e] || []).some((e) => i.endsWith(e)));
 }
-function Re(e, t = {}) {
+function Qe(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 ? Ue : t.accept, r = t.maxSizeMb || 5;
+	return Ze(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Xe(n)} file.`;
 }
 //#endregion
 //#region src/passwordRules.js
@@ -4234,15 +4427,15 @@ var Q = {
 	digit: !0,
 	special: !0,
 	uniqueChars: 0
-}, ze = "Password Requirements";
-function Be(e) {
+}, $e = "Password Requirements";
+function et(e) {
 	return e === !0 || e == null ? { ...Q } : {
 		...Q,
 		...e
 	};
 }
-function Ve(e) {
-	let t = Be(e), n = [];
+function tt(e) {
+	let t = et(e), n = [];
 	if (t.minLength > 0 && n.push({
 		key: "length",
 		label: `At least ${t.minLength} characters long`,
@@ -4273,25 +4466,25 @@ function Ve(e) {
 	}
 	return n;
 }
-function He(e, t) {
+function nt(e, t) {
 	let n = e == null ? "" : String(e);
-	return Ve(t).map((e) => ({
+	return tt(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 rt(e, t) {
+	return nt(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 it() {
+	$("wui-select", je), $("wui-phone", Ae), $("wui-datepicker", ee), $("wui-date-range", te), $("wui-dock", ne), $("wui-feedback", oe), $("wui-slider", Me), $("wui-timepicker", Le), $("wui-autocomplete", y), $("wui-multiselect", me), $("wui-taginput", Pe), $("wui-otp", Ce), $("wui-status-icon", r), $("wui-wizard-step", Be), $("wui-wizard", ze);
 }
-We();
+it();
 //#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 { Ve as COPY_FEEDBACK_MS, Ue as DEFAULT_IMAGE_ACCEPT, We as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, $e 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, Ae as WuiPhone, je as WuiSelect, Me as WuiSlider, r as WuiStatusIcon, Pe as WuiTagInput, Le as WuiTimePicker, ze as WuiWizard, Be as WuiWizardStep, Xe as acceptLabel, tt as buildPasswordRules, He as copyTextToClipboard, it as defineWeborityElements, nt as evaluatePassword, p as glyphSvg, Je as isImageFile, Ye as isImageOnlyAccept, Ze as matchesAccept, rt as passwordSatisfies, Qe as validateFile };