@webority/ui-elements 0.7.7 → 0.7.9

package/dist/ui-elements.js

@@ -48,16 +48,47 @@ function c(e, t) {
 	r.disabled = e.hasAttribute("disabled");
 }
 //#endregion
+//#region src/listboxKeyNav.js
+function l(e) {
+	let { getVisibleOptions: t, getActive: n, setActive: r, onEnter: i, onEscape: a, onTypeahead: o, typeaheadMs: s = 500 } = e, c = "", l = null, u = () => {
+		clearTimeout(l), l = null, c = "";
+	};
+	return {
+		handler: (e) => {
+			let d = t(), f = n(), p = e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA";
+			if (e.key === "ArrowDown") e.preventDefault(), r(Math.min(f + 1, d.length - 1));
+			else if (e.key === "ArrowUp") e.preventDefault(), r(Math.max(f - 1, 0));
+			else if (e.key === "Home" && !p) e.preventDefault(), d.length && r(0);
+			else if (e.key === "End" && !p) e.preventDefault(), d.length && r(d.length - 1);
+			else if (e.key === "PageDown" && !p) {
+				if (e.preventDefault(), !d.length) return;
+				r(Math.min((f < 0 ? 0 : f) + 8, d.length - 1));
+			} else if (e.key === "PageUp" && !p) {
+				if (e.preventDefault(), !d.length) return;
+				r(Math.max((f < 0 ? 0 : f) - 8, 0));
+			} else if (e.key === "Enter") i && (e.preventDefault(), i(d[f], d));
+			else if (e.key === "Escape") a && a();
+			else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.target?.tagName !== "INPUT" && e.target?.tagName !== "TEXTAREA") {
+				e.preventDefault(), clearTimeout(l), c += e.key.toLowerCase(), l = setTimeout(u, s);
+				let t = d.findIndex((e) => e.textContent.trim().toLowerCase().startsWith(c));
+				t >= 0 && (r(t), o && o(e.key, t, d));
+			}
+		},
+		clearTypeahead: u,
+		teardown: u
+	};
+}
+//#endregion
 //#region src/optionLabel.js
-var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), d = (e) => {
+var u = Symbol("wui.trustedHtml"), d = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), f = (e) => {
 	if (!e) return "";
 	let t = String(e).toLowerCase().replace(/[^a-z0-9-]/g, "");
 	return t ? `<i class="bi bi-${t}" aria-hidden="true"></i>` : "";
-}, f = (e) => {
+}, p = (e) => {
 	if (e == null) return "";
-	let t = e[l] ? String(e.label ?? "") : u(e.label), n = d(e.icon);
+	let t = e[u] ? String(e.label ?? "") : d(e.label), n = f(e.icon);
 	return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
-}, p = class extends HTMLElement {
+}, m = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -76,7 +107,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		];
 	}
 	constructor() {
-		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null, this._reqSeq = 0, this._pendingSearch = null;
+		super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null, this._reqSeq = 0, this._pendingSearch = null, this._typeahead = "", this._typeaheadTimer = null;
 		try {
 			this._internals = this.attachInternals();
 		} catch {
@@ -109,12 +140,12 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	set value(e) {
 		this._value = e == null ? "" : String(e), c(this, this._value);
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		this._label = t ? h(t.label) : "", this._syncInput(), this._renderOptions("");
+		this._label = t ? g(t.label) : "", this._syncInput(), this._renderOptions("");
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : [];
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		t && (this._label = h(t.label)), this._renderOptions(), this._syncInput();
+		t && (this._label = g(t.label)), this._renderOptions(), this._syncInput();
 	}
 	get options() {
 		return this._readOptions();
@@ -133,7 +164,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	_matchesKnownOption(e) {
 		let t = e.toLowerCase();
-		return this._readOptions().some((e) => h(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
+		return this._readOptions().some((e) => g(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
 	}
 	get _minChars() {
 		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
@@ -151,7 +182,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
 			icon: e.getAttribute("icon") || void 0,
-			[l]: !0,
+			[u]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -165,12 +196,12 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let r = `${this.id}-listbox`;
 		this._listboxId = r, this.innerHTML = `
       <div class="search-select${n}">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${m(r)}" aria-label="${m(this._accessibleName())}">
-          <input class="search-select-input search-select-ac-input" placeholder="${m(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${h(r)}" aria-label="${h(this._accessibleName())}">
+          <input class="search-select-input search-select-ac-input" placeholder="${h(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
           <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
           <button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${m(r)}" tabindex="-1" hidden>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${h(r)}" tabindex="-1" hidden>
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
           <div class="search-select-hint" hidden>Type to search…</div>
@@ -204,7 +235,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this._refs();
 		if (!t.optionsWrap) return;
 		let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
-		!this._remote && r && (i = i.filter((e) => h(e.label).toLowerCase().includes(r)));
+		!this._remote && r && (i = i.filter((e) => g(e.label).toLowerCase().includes(r)));
 		let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
 			value: a,
 			custom: !0
@@ -212,11 +243,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		t.optionsWrap.innerHTML = o.map((e, t) => {
 			let n = `${s}-opt-${t}`;
 			if (e.custom) {
-				let t = `Add “${u(e.value)}”`;
-				return `<button type="button" role="option" id="${m(n)}" class="search-select-option search-select-option-custom" data-value="${m(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
+				let t = `Add “${d(e.value)}”`;
+				return `<button type="button" role="option" id="${h(n)}" class="search-select-option search-select-option-custom" data-value="${h(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
 			}
 			let r = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${m(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${r}">${f(e)}</button>`;
+			return `<button type="button" role="option" id="${h(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${h(e.value)}" aria-selected="${r}">${p(e)}</button>`;
 		}).join(""), this._active = -1, t.control?.removeAttribute("aria-activedescendant");
 		let c = r.length < this._minChars;
 		t.hint && (t.hint.hidden = !(this._remote && c && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && c);
@@ -232,21 +263,20 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			t >= 0 && r[t] ? (r[t].classList.add("is-active"), r[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", r[t].id)) : e.control.removeAttribute("aria-activedescendant");
 		}, o = () => !e.menu.hidden, s = () => {
 			e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
-		}, l = () => {
-			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
-		}, u = (t) => {
+		}, u = () => {
+			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", this._syncInput();
+		}, d = (t) => {
 			let n = t.dataset.custom === "true";
-			this._value = t.dataset.value, this._label = n ? t.dataset.value : h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
+			this._value = t.dataset.value, this._label = n ? t.dataset.value : g(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
 				bubbles: !0,
 				detail: { isCustom: n }
-			})), l(), e.input.focus();
-		}, d = (t) => {
+			})), u(), e.input.focus();
+		}, f = (t) => {
 			this._value = t, this._label = t, c(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
 				bubbles: !0,
 				detail: { isCustom: !0 }
-			})), l();
-		};
-		e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
+			})), u();
+		}, p = () => {
 			let t = e.input.value;
 			if (e.clear && (e.clear.hidden = !t), o() || s(), this._remote) {
 				if (this._renderOptions(t), clearTimeout(this._timer), t.trim().length < this._minChars) {
@@ -259,24 +289,43 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 					seq: e
 				}, this._timer = setTimeout(() => this._fireSearch(t, e), this._debounceMs);
 			} else this._renderOptions(t);
-		}), e.input.addEventListener("keydown", (t) => {
-			let i = n();
-			if (t.key === "ArrowDown") t.preventDefault(), o() || s(), r(Math.min(this._active + 1, i.length - 1));
-			else if (t.key === "ArrowUp") t.preventDefault(), r(Math.max(this._active - 1, 0));
-			else if (t.key === "Enter") {
-				if (i[this._active]) t.preventDefault(), u(i[this._active]);
+		};
+		this._navHandler = l({
+			getVisibleOptions: n,
+			getActive: () => this._active,
+			setActive: (e) => r(e),
+			onEnter: (t, n) => {
+				if (n[this._active]) d(n[this._active]);
 				else if (this._allowCustom) {
-					let n = e.input.value.trim();
-					n && !this._matchesKnownOption(n) && (t.preventDefault(), d(n));
+					let t = e.input.value.trim();
+					t && !this._matchesKnownOption(t) && f(t);
 				}
-			} else t.key === "Escape" && l();
-		}), e.input.addEventListener("blur", (t) => {
+			},
+			onEscape: () => {
+				this._navHandler.clearTypeahead(), u();
+			}
+		});
+		let m = (e) => {
+			let t = e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA";
+			if (e.key === "ArrowDown") {
+				e.preventDefault(), o() || s();
+				let t = n();
+				r(Math.min(this._active + 1, t.length - 1));
+				return;
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault(), r(Math.max(this._active - 1, 0));
+				return;
+			} else if ((e.key === "Home" || e.key === "End" || e.key === "PageDown" || e.key === "PageUp") && (!o() || t)) return;
+			else if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey || !o() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA") && (!o() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA")) return;
+			this._navHandler.handler(e);
+		};
+		e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", p), e.input.addEventListener("keydown", m), e.menu.addEventListener("keydown", m), e.input.addEventListener("blur", (t) => {
 			if (!this._allowCustom || t.relatedTarget && this.contains(t.relatedTarget)) return;
 			let n = e.input.value.trim();
-			!n || n === this._label || this._matchesKnownOption(n) || d(n);
+			!n || n === this._label || this._matchesKnownOption(n) || f(n);
 		}), e.optionsWrap.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && u(t);
+			t && d(t);
 		}), e.optionsWrap.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && r(this._optionEls().indexOf(t));
@@ -284,7 +333,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			this._value = "", this._label = "", c(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
 		}), this._bindGlobal = () => {
 			this._teardown(), this._onDocClick = (e) => {
-				o() && !this.contains(e.target) && l();
+				o() && !this.contains(e.target) && u();
 			}, document.addEventListener("click", this._onDocClick), a(this, () => {
 				o() && t();
 			});
@@ -300,12 +349,12 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		}));
 	}
 	_teardown() {
-		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this), clearTimeout(this._timer);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this), clearTimeout(this._timer), this._navHandler?.teardown();
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, m = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), h = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), g = [
+}, h = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), g = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), _ = [
 	"January",
 	"February",
 	"March",
@@ -318,7 +367,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	"October",
 	"November",
 	"December"
-], _ = [
+], v = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -326,24 +375,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	"Th",
 	"Fr",
 	"Sa"
-], v = (e) => String(e).padStart(2, "0"), y = (e, t, n) => `${e}-${v(t + 1)}-${v(n)}`, b = (e) => {
+], y = (e) => String(e).padStart(2, "0"), b = (e, t, n) => `${e}-${y(t + 1)}-${y(n)}`, x = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, x = (e) => {
-	let t = b(e);
-	return t ? `${v(t.d)} ${g[t.m].slice(0, 3)} ${t.y}` : "";
-}, S = (e, t) => new Date(e, t + 1, 0).getDate(), C = (e, t) => {
+}, S = (e) => {
+	let t = x(e);
+	return t ? `${y(t.d)} ${_[t.m].slice(0, 3)} ${t.y}` : "";
+}, C = (e, t) => new Date(e, t + 1, 0).getDate(), w = (e, t) => {
 	for (; t < 0;) t += 12, --e;
 	for (; t > 11;) t -= 12, e += 1;
 	return {
 		y: e,
 		m: t
 	};
-}, w = class extends HTMLElement {
+}, T = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -394,13 +443,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Enter Date", t = b(this._value);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = x(this._value);
 		t && (this._viewY = t.y, this._viewM = t.m);
 		let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="datepicker">
-        <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${u(i)}"` : ""}${a ? ` aria-describedby="${u(a)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? x(this._value) : u(e)}</span>
+        <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${d(i)}"` : ""}${a ? ` aria-describedby="${d(a)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? S(this._value) : d(e)}</span>
           <i class="bi bi-calendar3" aria-hidden="true"></i>
         </button>
         <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
@@ -412,11 +461,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_syncTrigger() {
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = b(this._value);
-		t.textContent = n ? x(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = x(this._value);
+		t.textContent = n ? S(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_limits() {
-		let e = b(this.getAttribute("min")), t = b(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
+		let e = x(this.getAttribute("min")), t = x(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
 		return {
 			dayDisabled: (e, t, i) => {
 				let a = new Date(e, t, i).getTime();
@@ -424,7 +473,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			},
 			monthDisabled: (e, t) => {
 				let i = new Date(e, t, 1).getTime();
-				return new Date(e, t, S(e, t)).getTime() < n || i > r;
+				return new Date(e, t, C(e, t)).getTime() < n || i > r;
 			},
 			yearDisabled: (e) => {
 				let t = new Date(e, 0, 1).getTime();
@@ -437,28 +486,28 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
 	}
 	_daysHtml() {
-		let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = S(this._viewY, this._viewM), r = b(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
+		let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = C(this._viewY, this._viewM), r = x(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
 		}, s = (e, t, n, s) => {
-			let c = y(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
+			let c = b(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
 			return `<button type="button" class="${[
 				"datepicker-day",
 				s ? "is-outside" : "",
 				u ? "is-today" : "",
 				l ? "is-selected" : ""
 			].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
-		}, c = "", l = C(this._viewY, this._viewM - 1), u = S(l.y, l.m);
+		}, c = "", l = w(this._viewY, this._viewM - 1), u = C(l.y, l.m);
 		for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
 		for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
-		let d = C(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
+		let d = w(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
 		for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
-		let p = _.map((t, n) => _[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
+		let p = v.map((t, n) => v[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
 		return `
       <div class="datepicker-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
-        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${g[this._viewM]} ${this._viewY}</button>
+        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${_[this._viewM]} ${this._viewY}</button>
         <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
       </div>
       <div class="datepicker-weekdays">${p}</div>
@@ -469,14 +518,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
       </div>`;
 	}
 	_monthsHtml() {
-		let e = b(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
+		let e = x(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
 		for (let i = 0; i < 12; i++) {
 			let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
 				"datepicker-cell",
 				o ? "is-today" : "",
 				a ? "is-selected" : ""
 			].filter(Boolean).join(" ");
-			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${g[i].slice(0, 3)}</button>`;
+			r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${_[i].slice(0, 3)}</button>`;
 		}
 		return `
       <div class="datepicker-head">
@@ -487,7 +536,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
       <div class="datepicker-cells">${r}</div>`;
 	}
 	_yearsHtml() {
-		let e = b(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
+		let e = x(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
 		for (let a = 0; a < 12; a++) {
 			let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
 				"datepicker-cell",
@@ -512,21 +561,21 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		i(e, t);
 	}
 	_setFocus(e, t, n, r) {
-		let { y: i, m: a } = C(e, t);
+		let { y: i, m: a } = w(e, t);
 		this._focus = {
 			y: i,
 			m: a,
 			d: n
 		};
 		let o = i !== this._viewY || a !== this._viewM;
-		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${y(i, a, n)}"]`)?.focus();
+		this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${b(i, a, n)}"]`)?.focus();
 	}
 	_onKey(e) {
 		if (this._mode !== "days") {
 			e.key === "Escape" && this._close();
 			return;
 		}
-		let t = this._focus || b(this._value) || {
+		let t = this._focus || x(this._value) || {
 			y: this._viewY,
 			m: this._viewM,
 			d: 1
@@ -544,17 +593,17 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
 			case "PageUp": {
 				e.preventDefault();
-				let n = C(t.y, t.m - (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, S(n.y, n.m)), "slide-prev");
+				let n = w(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, C(n.y, n.m)), "slide-prev");
 			}
 			case "PageDown": {
 				e.preventDefault();
-				let n = C(t.y, t.m + (e.shiftKey ? 12 : 1));
-				return this._setFocus(n.y, n.m, Math.min(t.d, S(n.y, n.m)), "slide-next");
+				let n = w(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, C(n.y, n.m)), "slide-next");
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = y(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
+				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = b(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
 				return;
 			case "Escape": return this._close();
 			default:
@@ -566,11 +615,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			if (!b(this._value) && !this._viewNavigated) {
+			if (!x(this._value) && !this._viewNavigated) {
 				let e = /* @__PURE__ */ new Date();
 				this._viewY = e.getFullYear(), this._viewM = e.getMonth();
 			}
-			let r = b(this._value), i = /* @__PURE__ */ new Date();
+			let r = x(this._value), i = /* @__PURE__ */ new Date();
 			this._mode = "days", this._focus = r || {
 				y: this._viewY,
 				m: this._viewM,
@@ -583,7 +632,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			let t = e.target.closest("[data-nav]");
 			if (t) {
 				this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
-				let e = C(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = w(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._focus = {
 					y: e.y,
 					m: e.m,
@@ -622,7 +671,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			}
 			if (e.target.closest("[data-today]")) {
 				let e = /* @__PURE__ */ new Date();
-				this.value = y(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				this.value = b(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
@@ -650,45 +699,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ee = [
-	"January",
-	"February",
-	"March",
-	"April",
-	"May",
-	"June",
-	"July",
-	"August",
-	"September",
-	"October",
-	"November",
-	"December"
-], te = [
-	"Su",
-	"Mo",
-	"Tu",
-	"We",
-	"Th",
-	"Fr",
-	"Sa"
-], T = (e) => String(e).padStart(2, "0"), ne = (e, t, n) => `${e}-${T(t + 1)}-${T(n)}`, E = (e) => {
-	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
-	return t ? {
-		y: +t[1],
-		m: t[2] - 1,
-		d: +t[3]
-	} : null;
-}, D = (e) => {
-	let t = E(e);
-	return t ? `${T(t.d)} ${ee[t.m].slice(0, 3)} ${t.y}` : "";
-}, O = (e, t) => new Date(e, t + 1, 0).getDate(), k = (e, t) => {
-	for (; t < 0;) t += 12, --e;
-	for (; t > 11;) t -= 12, e += 1;
-	return {
-		y: e,
-		m: t
-	};
-}, re = class extends HTMLElement {
+}, ee = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -747,19 +758,19 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			text: e,
 			empty: !0
 		} : {
-			text: `${D(this._start) || "Start"} – ${D(this._end) || "End"}`,
+			text: `${S(this._start) || "Start"} – ${S(this._end) || "End"}`,
 			empty: !1
 		};
 	}
 	render() {
 		this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || "", this._start = this._defaultStart || this._start, this._end = this._defaultEnd || this._end);
-		let e = E(this._start);
+		let e = x(this._start);
 		e && (this._viewY = e.y, this._viewM = e.m);
 		let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label(), a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="daterange">
-        <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${u(a)}"` : ""}${o ? ` aria-describedby="${u(o)}"` : ""}>
-          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${u(r)}</span>
+        <button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${d(a)}"` : ""}${o ? ` aria-describedby="${d(o)}"` : ""}>
+          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${d(r)}</span>
           <i class="bi bi-calendar-range" aria-hidden="true"></i>
         </button>
         <div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
@@ -787,24 +798,24 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "", r.disabled = this.hasAttribute("disabled");
 	}
 	_limits() {
-		let e = E(this.getAttribute("min")), t = E(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
+		let e = x(this.getAttribute("min")), t = x(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
 		return (e, t, i) => {
 			let a = new Date(e, t, i).getTime();
 			return a < n || a > r;
 		};
 	}
 	_monthHtml(e, t) {
-		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = O(e, t), a = this._limits(), o = te.map((e, t) => te[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
-			let i = ne(e, t, n), o = a(e, t, n);
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = C(e, t), a = this._limits(), o = v.map((e, t) => v[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = b(e, t, n), o = a(e, t, n);
 			return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
-		}, c = "", l = k(e, t - 1), u = O(l.y, l.m);
+		}, c = "", l = w(e, t - 1), u = C(l.y, l.m);
 		for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
 		for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
-		let d = k(e, t + 1), f = (7 - (r + i) % 7) % 7;
+		let d = w(e, t + 1), f = (7 - (r + i) % 7) % 7;
 		for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
 		return `
       <div class="daterange-cal">
-        <div class="datepicker-month-label">${ee[t]} ${e}</div>
+        <div class="datepicker-month-label">${_[t]} ${e}</div>
         <div class="datepicker-weekdays">${o}</div>
         <div class="datepicker-grid" role="grid">${c}</div>
       </div>`;
@@ -812,7 +823,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	_renderView() {
 		let e = this.querySelector(".daterange-pop");
 		if (!e) return;
-		let t = k(this._viewY, this._viewM + 1);
+		let t = w(this._viewY, this._viewM + 1);
 		e.innerHTML = `
       <div class="daterange-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
@@ -838,7 +849,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
 		}
 		let i = e.querySelector("[data-range-hint]");
-		i && (i.textContent = this._start ? this._end ? `${D(this._start)} – ${D(this._end)}` : "Pick an end date" : "Pick a start date");
+		i && (i.textContent = this._start ? this._end ? `${S(this._start)} – ${S(this._end)}` : "Pick an end date" : "Pick a start date");
 	}
 	_position(e, t) {
 		i(e, t);
@@ -860,7 +871,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e || !t) return;
 		let r = () => !t.hidden;
 		this._open = () => {
-			let r = E(this._start);
+			let r = x(this._start);
 			if (r) this._viewY = r.y, this._viewM = r.m;
 			else {
 				let e = /* @__PURE__ */ new Date();
@@ -873,7 +884,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				let e = k(this._viewY, this._viewM + Number(t.dataset.nav));
+				let e = w(this._viewY, this._viewM + Number(t.dataset.nav));
 				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
@@ -903,7 +914,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, ie = class extends HTMLElement {
+}, E = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
@@ -921,7 +932,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		];
 	}
 	constructor() {
-		super(), this._values = [], this._optionsProp = null, this._active = -1;
+		super(), this._values = [], this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null;
 		try {
 			this._internals = this.attachInternals();
 		} catch {
@@ -972,7 +983,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
 			icon: e.getAttribute("icon") || void 0,
-			[l]: !0,
+			[u]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -985,7 +996,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	_labelHtmlFor(e) {
 		let t = this._readOptions().find((t) => String(t.value) === String(e));
-		return t ? f(t) : u(e);
+		return t ? p(t) : d(e);
 	}
 	render() {
 		this._snapshotDeclared();
@@ -994,13 +1005,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let a = `${this.id}-listbox`;
 		this._listboxId = a, this.innerHTML = `
       <div class="search-select${i}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${A(a)}" aria-label="${A(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
-          ${n ? `<i class="bi bi-${A(n)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${D(a)}" aria-label="${D(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
+          ${n ? `<i class="bi bi-${D(n)} search-select-icon" aria-hidden="true"></i>` : ""}
           <div class="ms-chips" data-chips></div>
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${A(a)}" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${A(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${D(a)}" aria-multiselectable="true" tabindex="-1" hidden>
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${D(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -1011,10 +1022,10 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e) return;
 		let t = this.getAttribute("placeholder") || "Select…";
 		if (!this._values.length) {
-			e.innerHTML = `<span class="search-select-placeholder">${u(t)}</span>`;
+			e.innerHTML = `<span class="search-select-placeholder">${d(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="${A(e)}" aria-label="Remove ${A(ae(this._labelFor(e)))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
+		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${D(e)}" aria-label="Remove ${D(O(this._labelFor(e)))}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
 	}
 	_collapseChips() {
 		let e = this.querySelector("[data-chips]");
@@ -1038,78 +1049,91 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
 		if (!t) return;
 		let r = (e || "").trim().toLowerCase(), i = this._readOptions();
-		r && (i = i.filter((e) => ae(e.label).toLowerCase().includes(r)));
+		r && (i = i.filter((e) => O(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="${A(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${A(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${f(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
+			return `<button type="button" role="option" id="${D(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${D(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${p(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
 		}).join(""), n && (n.hidden = i.length > 0), this._active = -1, this.querySelector(".search-select-control")?.removeAttribute("aria-activedescendant");
 	}
 	_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"), o = this.querySelector(".search-select-options");
 		if (!e || !t) return;
-		let s = () => this.hasAttribute("disabled"), l = () => i(e, t, { matchWidth: !0 }), u = () => [...this.querySelectorAll(".search-select-option")], d = () => u().filter((e) => !e.hidden), f = (t) => {
-			let n = d();
+		let s = () => this.hasAttribute("disabled"), u = () => i(e, t, { matchWidth: !0 }), d = () => [...this.querySelectorAll(".search-select-option")], f = () => d().filter((e) => !e.hidden), p = (t) => {
+			let n = f();
 			this._active = t;
-			for (let e of u()) e.classList.remove("is-active");
+			for (let e of d()) 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, m = () => {
-			s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), l(), n && (n.value = "", this._renderOptions(""), n.focus()));
-		}, h = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), f(-1);
+		}, m = () => !t.hidden, h = () => {
+			s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), u(), n && (n.value = "", this._renderOptions(""), n.focus()));
 		}, g = () => {
+			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), p(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
+		}, _ = () => {
 			c(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-		}, _ = (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 : ""), g();
 		}, v = (e) => {
-			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), g();
+			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 : ""), _();
 		};
 		e.addEventListener("click", (e) => {
 			if (s()) return;
 			let t = e.target.closest("[data-remove]");
 			if (t) {
-				e.stopPropagation(), v(t.dataset.remove);
+				e.stopPropagation(), y(t.dataset.remove);
 				return;
 			}
-			p() ? h() : m();
+			m() ? g() : h();
 		}), o.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && (_(t.dataset.value), n?.focus());
+			t && (v(t.dataset.value), n?.focus());
 		}), o.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && f(d().indexOf(t));
-		}), o.addEventListener("mouseleave", () => f(-1)), n?.addEventListener("input", () => {
-			this._renderOptions(n.value), r && (r.hidden = !n.value), f(-1);
+			t && p(f().indexOf(t));
+		}), o.addEventListener("mouseleave", () => p(-1)), n?.addEventListener("input", () => {
+			this._renderOptions(n.value), r && (r.hidden = !n.value), p(-1);
+		}), this._navHandler = l({
+			getVisibleOptions: f,
+			getActive: () => this._active,
+			setActive: (e) => p(e),
+			onEnter: (e) => {
+				e && v(e.dataset.value);
+			},
+			onEscape: () => {
+				this._navHandler.clearTypeahead(), g(), e.focus();
+			}
 		});
-		let y = (t) => {
-			let r = d();
-			t.key === "ArrowDown" ? (t.preventDefault(), f(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), f(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && _(r[this._active].dataset.value)) : t.key === "Escape" ? (h(), e.focus()) : t.key === "Backspace" && !n?.value && this._values.length && v(this._values[this._values.length - 1]);
+		let b = (e) => {
+			if (e.key === "Backspace" && !n?.value && this._values.length) {
+				y(this._values[this._values.length - 1]);
+				return;
+			}
+			this._navHandler.handler(e);
 		};
-		n?.addEventListener("keydown", y), r?.addEventListener("click", () => {
+		n?.addEventListener("keydown", b), r?.addEventListener("click", () => {
 			n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
 		}), e.addEventListener("keydown", (e) => {
-			if (p()) {
-				y(e);
+			if (m()) {
+				b(e);
 				return;
 			}
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
 		}), 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) && h();
+				m() && !this.contains(e.target) && g();
 			}, document.addEventListener("click", this._onDocClick), a(this, () => {
-				p() && l();
+				m() && u();
 			});
 		}, this._bindGlobal();
 	}
 	_teardown() {
-		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this), this._navHandler?.teardown();
 	}
 	disconnectedCallback() {
 		this._teardown(), this._ro?.disconnect(), this._ro = null;
 	}
-}, A = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ae = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), oe = /[^0-9]/g, se = /[^0-9a-zA-Z]/g, j = class extends HTMLElement {
+}, D = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), O = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), te = /[^0-9]/g, ne = /[^0-9a-zA-Z]/g, k = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1140,7 +1164,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._value = this._clean(e), c(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? se : oe, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ne : te, "").slice(0, this.length);
 	}
 	constructor() {
 		super();
@@ -1220,7 +1244,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
 	}
-}, M = [
+}, re = [
 	[
 		"AF",
 		"Afghanistan",
@@ -2446,56 +2470,56 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], N = (e) => (M.find((t) => t[0] === e) || [
+], A = (e) => (re.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], P = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, F = null, I = null;
-function ce() {
-	return F ? Promise.resolve(F) : (I ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (F = {
+])[2], j = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, M = null, N = null;
+function ie() {
+	return M ? Promise.resolve(M) : (N ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (M = {
 		AsYouType: e.AsYouType,
 		getExampleNumber: e.getExampleNumber,
 		isValidPhoneNumber: e.isValidPhoneNumber,
 		examples: t.default || t
-	}, F)).catch(() => null), I);
+	}, M)).catch(() => null), N);
 }
-function L(e, t) {
-	if (!F || !t) return t;
+function P(e, t) {
+	if (!M || !t) return t;
 	try {
-		return new F.AsYouType(e).input(t);
+		return new M.AsYouType(e).input(t);
 	} catch {
 		return t;
 	}
 }
-function R(e) {
-	if (!F) return null;
+function F(e) {
+	if (!M) return null;
 	try {
-		return F.getExampleNumber(e, F.examples)?.formatNational() || null;
+		return M.getExampleNumber(e, M.examples)?.formatNational() || null;
 	} catch {
 		return null;
 	}
 }
-function z(e) {
-	if (!F || !e) return null;
+function ae(e) {
+	if (!M || !e) return null;
 	try {
-		return F.isValidPhoneNumber(e);
+		return M.isValidPhoneNumber(e);
 	} catch {
 		return null;
 	}
 }
-function le(e) {
-	if (!F) return null;
+function oe(e) {
+	if (!M) return null;
 	try {
-		let t = F.getExampleNumber(e, F.examples);
+		let t = M.getExampleNumber(e, M.examples);
 		return t?.nationalNumber ? t.nationalNumber.length : null;
 	} catch {
 		return null;
 	}
 }
-function B(e) {
-	if (!F || !e?.trim().startsWith("+")) return null;
+function I(e) {
+	if (!M || !e?.trim().startsWith("+")) return null;
 	try {
-		let t = new F.AsYouType();
+		let t = new M.AsYouType();
 		t.input(e.trim());
 		let n = t.getCountry();
 		return n ? {
@@ -2506,7 +2530,7 @@ function B(e) {
 		return null;
 	}
 }
-var V = class extends HTMLElement {
+var L = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2526,124 +2550,175 @@ var V = class extends HTMLElement {
 		} catch {
 			this._internals = null;
 		}
-		this._country = "IN", this._national = "";
+		this._country = "IN", this._national = "", this._active = -1, this._committedValue = "";
 	}
 	connectedCallback() {
-		this._rendered || this.render();
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "value") {
 			this.value = n;
 			return;
 		}
-		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
+		this._rendered && (e === "country" && (this._country = n || "IN", this._suppressCountryRender) || this.render());
 	}
 	formResetCallback() {
 		this.value = this._defaultValue || "";
 	}
 	get value() {
-		return this._national ? `+${N(this._country)}${this._national}` : "";
+		return this._national ? `+${A(this._country)}${this._national}` : "";
 	}
 	set value(e) {
-		let t = String(e ?? "").trim(), n = B(t);
+		let t = String(e ?? "").trim(), n = I(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(N(this._country));
+			let e = t.replace(/[^0-9]/g, ""), n = String(A(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._syncMirror();
+		n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
 	}
 	_syncMirror() {
 		c(this, this.value);
 	}
+	_emitInput() {
+		this.dispatchEvent(new Event("input", { bubbles: !0 }));
+	}
+	_emitChange() {
+		this._committedValue = this.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
 	render() {
-		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "");
-		let e = this.getAttribute("placeholder") || R(this._country) || "Enter phone number";
-		this._country = this.getAttribute("country") || this._country;
-		let t = M.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${P(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._country = this.getAttribute("country") || this._country;
+		let e = this.getAttribute("placeholder") || F(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 = re.map(([e, n, r], i) => `<button type="button" role="option" id="${R(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${j(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-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${P(this._country)}" data-flag aria-hidden="true"></span>
+          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false" aria-controls="${R(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="${j(this._country)}" data-flag aria-hidden="true"></span>
             <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
-            <span class="phone-dial" data-dial>+${N(this._country)}</span>
+            <span class="phone-dial" data-dial>+${A(this._country)}</span>
           </button>
-          <div class="country-dropdown-menu" role="listbox" hidden>
-            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
-            <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
+          <div class="country-dropdown-menu" role="listbox" id="${R(t)}" tabindex="-1" hidden>
+            <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${R(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="${H(e)}" value="${H(L(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${H(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${H(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${R(e)}" value="${R(P(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${R(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${R(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, c(this, this.value), this._wire();
 	}
+	_itemEls() {
+		return [...this.querySelectorAll(".country-dropdown-item")];
+	}
+	_visibleItems() {
+		return this._itemEls().filter((e) => !e.hidden);
+	}
 	_wire() {
 		this._teardown();
-		let e = this.querySelector(".country-toggle"), t = this.querySelector(".phone-input-wrap"), n = this.querySelector(".country-dropdown-menu"), r = this.querySelector(".dropdown-search-input"), i = this.querySelector(".country-list-scroll"), a = this.querySelector(".country-empty"), o = this.querySelector("input[type=tel]"), s = this.querySelector("[data-flag]"), c = this.querySelector("[data-dial]");
+		let e = this.querySelector(".country-toggle"), t = this.querySelector(".phone-input-wrap"), n = this.querySelector(".country-dropdown-menu"), r = this.querySelector(".dropdown-search-input"), s = this.querySelector(".country-list-scroll"), c = this.querySelector(".country-empty"), l = this.querySelector("input[type=tel]"), u = this.querySelector("[data-flag]"), d = this.querySelector("[data-dial]");
 		if (!e || !n) return;
-		let l = () => !n.hidden, u = () => {
-			let r = (t || e).getBoundingClientRect(), i = n.offsetWidth || 320, a = n.offsetHeight || 320, o = window.innerHeight - r.bottom, s = o < a + 6 && r.top > o ? r.top - a - 6 : r.bottom + 6, c = Math.min(Math.max(8, r.left), Math.max(8, window.innerWidth - i - 8));
-			n.style.top = `${Math.max(8, s)}px`, n.style.left = `${c}px`;
-		}, d = () => {
-			n.hidden = !1, e.setAttribute("aria-expanded", "true"), r.value = "", p(""), u(), r.focus();
-		}, f = () => {
-			n.hidden = !0, e.setAttribute("aria-expanded", "false");
-		};
-		this._reposition = () => {
-			l() && u();
-		}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
-		let p = (e) => {
+		let f = () => !n.hidden, p = () => i(t || e, n), m = (e) => {
+			let t = this._visibleItems();
+			this._active = e;
+			for (let e of this._itemEls()) e.classList.remove("is-active");
+			e >= 0 && t[e] ? (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }), r?.setAttribute("aria-activedescendant", t[e].id)) : r?.removeAttribute("aria-activedescendant");
+		}, h = () => {
+			n.hidden = !1, e.setAttribute("aria-expanded", "true"), r.value = "", _(""), p(), r.focus(), m(this._visibleItems().findIndex((e) => e.classList.contains("selected")));
+		}, g = () => {
+			n.hidden = !0, e.setAttribute("aria-expanded", "false"), m(-1);
+		}, _ = (e) => {
 			let t = e.trim().toLowerCase(), n = 0;
-			for (let e of i.querySelectorAll(".country-dropdown-item")) {
+			for (let e of this._itemEls()) {
 				let r = !t || e.textContent.toLowerCase().includes(t);
 				e.hidden = !r, r && (n += 1);
 			}
-			a && (a.hidden = n > 0);
-		}, m = (e) => {
-			this._country = e, this.setAttribute("country", e), s && (s.className = P(e)), c && (c.textContent = `+${N(e)}`);
-			for (let t of i.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
-			f(), this._syncMirror(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+			c && (c.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 = j(e)), d && (d.textContent = `+${A(e)}`);
+			for (let t of this._itemEls()) {
+				let n = t.dataset.iso === e;
+				t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
+			}
+			!this.getAttribute("placeholder") && l && (l.placeholder = F(e) || "Enter phone number"), l && this._national && (l.value = P(e, this._national)), g(), this._syncMirror(), this._emitChange(), l?.focus();
+		}, y = (t) => {
+			let n = this._visibleItems();
+			if (t.key === "ArrowDown") {
+				if (t.preventDefault(), !f()) {
+					h();
+					return;
+				}
+				m(Math.min(this._active + 1, n.length - 1));
+			} else if (t.key === "ArrowUp") {
+				if (t.preventDefault(), !f()) return;
+				m(Math.max(this._active - 1, 0));
+			} else t.key === "Enter" ? (t.preventDefault(), f() && n[this._active] && v(n[this._active].dataset.iso)) : t.key === "Escape" && f() && (t.preventDefault(), g(), e.focus());
 		};
-		e.addEventListener("click", () => l() ? f() : d()), r.addEventListener("input", () => p(r.value)), i.addEventListener("click", (e) => {
+		e.addEventListener("click", () => f() ? g() : h()), e.addEventListener("keydown", (e) => {
+			if (f()) {
+				y(e);
+				return;
+			}
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
+		}), r.addEventListener("input", () => {
+			_(r.value);
+			let e = this._visibleItems();
+			m(e.length ? 0 : -1);
+		}), s.addEventListener("click", (e) => {
 			let t = e.target.closest(".country-dropdown-item");
-			t && m(t.dataset.iso);
-		});
-		let h = this.querySelector("[data-phone-error]"), g = (e) => {
-			if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), h) {
+			t && v(t.dataset.iso);
+		}), s.addEventListener("mousemove", (e) => {
+			let t = e.target.closest(".country-dropdown-item");
+			t && m(this._visibleItems().indexOf(t));
+		}), s.addEventListener("mouseleave", () => m(-1)), n.addEventListener("keydown", y);
+		let b = this.querySelector("[data-phone-error]"), x = (e) => {
+			if (l.classList.toggle("is-invalid", e), e ? l.setAttribute("aria-invalid", "true") : l.removeAttribute("aria-invalid"), b) {
 				if (e) {
-					let e = R(this._country);
-					h.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
+					let e = F(this._country);
+					b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
 				}
-				h.hidden = !e;
+				b.hidden = !e;
 			}
 		};
-		o.addEventListener("input", () => {
-			let e = o.value.replace(/[^0-9]/g, ""), t = le(this._country);
-			t && e.length > t && (e = e.slice(0, t)), this._national = e;
-			let n = L(this._country, this._national);
-			o.value !== n && (o.value = n), this._syncMirror(), this.dispatchEvent(new Event("change", { bubbles: !0 })), o.classList.contains("is-invalid") && (!this._national || z(this.value) === !0) && g(!1);
-		}), o.addEventListener("blur", () => {
-			g(this._national.length > 0 && z(this.value) === !1);
-		}), o.addEventListener("paste", (e) => {
-			let t = B(e.clipboardData?.getData("text"));
-			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = L(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.querySelector("input[type=tel]")?.focus());
-		}), this._onDocClick = (e) => {
-			l() && !this.contains(e.target) && f();
-		}, document.addEventListener("click", this._onDocClick), ce().then((e) => {
-			if (!(!e || !o) && (this._national && (o.value = L(this._country, this._national)), !this.getAttribute("placeholder"))) {
-				let e = R(this._country);
-				e && (o.placeholder = e);
+		l.addEventListener("input", (e) => {
+			e.stopPropagation();
+			let t = l.value.replace(/[^0-9]/g, ""), n = oe(this._country);
+			n && t.length > n && (t = t.slice(0, n)), this._national = t;
+			let r = P(this._country, this._national);
+			l.value !== r && (l.value = r), this._syncMirror(), this._emitInput(), l.classList.contains("is-invalid") && (!this._national || ae(this.value) === !0) && x(!1);
+		}), l.addEventListener("change", (e) => e.stopPropagation()), l.addEventListener("blur", () => {
+			x(this._national.length > 0 && ae(this.value) === !1), this.value !== this._committedValue && this._emitChange();
+		}), l.addEventListener("paste", (e) => {
+			let t = I(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? l.value = P(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();
+			}, document.addEventListener("click", this._onDocClick), a(this, () => {
+				f() && p();
+			});
+		}, this._teardownGlobals = () => {
+			this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this);
+		}, this._bindGlobal(), ie().then((e) => {
+			if (!(!e || !l.isConnected) && (this._national && (l.value = P(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = F(this._country);
+				e && (l.placeholder = e);
 			}
 		}), this._syncMirror();
 	}
 	_teardown() {
-		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
+		this._teardownGlobals?.();
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, H = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), U = class extends HTMLElement {
+}, R = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), z = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2670,7 +2745,7 @@ var V = class extends HTMLElement {
 		} catch {
 			this._internals = null;
 		}
-		this._value = "", this._optionsProp = null, this._active = -1;
+		this._value = "", this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null;
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -2708,7 +2783,7 @@ var V = class extends HTMLElement {
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
 			icon: e.getAttribute("icon") || void 0,
-			[l]: !0,
+			[u]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -2717,25 +2792,25 @@ var V = class extends HTMLElement {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._snapshotDeclared();
-		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", l = this.getAttribute("search-placeholder") || "Search...", d = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
-		d && (this._value = String(d.value)), c(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
-		let p = `${this.id}-listbox`;
-		this._listboxId = p;
+		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", l = this.getAttribute("search-placeholder") || "Search...", u = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
+		u && (this._value = String(u.value)), c(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
+		let f = `${this.id}-listbox`;
+		this._listboxId = f;
 		let m = e.map((e, t) => {
 			let n = String(e.value) === String(this._value);
-			return `<button type="button" role="option" id="${W(`${p}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}">${f(e)}</button>`;
+			return `<button type="button" role="option" id="${B(`${f}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${B(e.value)}" aria-selected="${n}">${p(e)}</button>`;
 		}).join("");
 		this.innerHTML = `
       <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(p)}" aria-label="${W(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          ${a ? `<i class="bi bi-${W(a)} search-select-icon" aria-hidden="true"></i>` : ""}
-          ${o ? `<span class="search-select-prefix">${u(o)}</span>` : ""}
-          <span class="${d ? "" : "search-select-placeholder"}" data-label>${d ? f(d) : u(s)}</span>
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${B(f)}" aria-label="${B(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          ${a ? `<i class="bi bi-${B(a)} search-select-icon" aria-hidden="true"></i>` : ""}
+          ${o ? `<span class="search-select-prefix">${d(o)}</span>` : ""}
+          <span class="${u ? "" : "search-select-placeholder"}" data-label>${u ? p(u) : d(s)}</span>
           ${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </button>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(p)}" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${W(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${B(f)}" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${B(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
           <div class="search-select-options">${m}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
@@ -2764,7 +2839,7 @@ var V = class extends HTMLElement {
 			let t = e.dataset.value === String(this._value);
 			e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
 		}
-		e && (e.innerHTML = t ? f(t) : u(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
+		e && (e.innerHTML = t ? p(t) : d(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
 	}
 	_syncReset() {
 		let { reset: e } = this._refs();
@@ -2795,23 +2870,30 @@ var V = class extends HTMLElement {
 			e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), e.search && (e.search.value = "", r(""), e.search.focus()), n(this._optionEls().findIndex((e) => e.classList.contains("selected")));
 		}, c = () => {
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
-		}, l = (t) => {
-			this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), c(), e.control.focus();
 		}, u = (t) => {
-			let r = this._visible();
-			t.key === "ArrowDown" ? (t.preventDefault(), n(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), n(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && l(r[this._active])) : t.key === "Escape" && (c(), e.control.focus());
+			this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), c(), e.control.focus();
 		};
-		e.reset?.addEventListener("click", (t) => {
+		this._navHandler = l({
+			getVisibleOptions: () => this._visible(),
+			getActive: () => this._active,
+			setActive: (e) => n(e),
+			onEnter: (e) => {
+				e && u(e);
+			},
+			onEscape: () => {
+				this._navHandler.clearTypeahead(), c(), e.control.focus();
+			}
+		}), e.reset?.addEventListener("click", (t) => {
 			t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
 		}), e.control.addEventListener("click", () => o() ? c() : s()), e.control.addEventListener("keydown", (e) => {
 			if (o()) {
-				u(e);
+				this._navHandler.handler(e);
 				return;
 			}
 			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), s());
 		}), e.optionsWrap.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && l(t);
+			t && u(t);
 		}), e.optionsWrap.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && n(this._visible().indexOf(t));
@@ -2819,7 +2901,7 @@ var V = class extends HTMLElement {
 			r(e.search.value), n(-1);
 		}), e.clear?.addEventListener("click", () => {
 			e.search.value = "", r(""), e.search.focus();
-		}), e.menu.addEventListener("keydown", u), this._bindGlobal = () => {
+		}), e.menu.addEventListener("keydown", this._navHandler.handler), this._bindGlobal = () => {
 			this._teardown(), this._onDocClick = (e) => {
 				o() && !this.contains(e.target) && c();
 			}, document.addEventListener("click", this._onDocClick), a(this, () => {
@@ -2828,12 +2910,12 @@ var V = class extends HTMLElement {
 		}, this._bindGlobal();
 	}
 	_teardown() {
-		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), o(this), this._navHandler?.teardown();
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), G = class extends HTMLElement {
+}, B = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), V = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -2873,19 +2955,19 @@ var V = class extends HTMLElement {
 		return this._value;
 	}
 	set value(e) {
-		this._value = this._snapToStep(this._clamp(K(e, this._value))), this._syncValue(), this._syncMirrors();
+		this._value = this._snapToStep(this._clamp(H(e, this._value))), this._syncValue(), this._syncMirrors();
 	}
 	get start() {
 		return this._start;
 	}
 	set start(e) {
-		this._start = Math.min(this._snapToStep(this._clamp(K(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
+		this._start = Math.min(this._snapToStep(this._clamp(H(e, this._start))), this._end), this._syncValue(), this._syncMirrors();
 	}
 	get end() {
 		return this._end;
 	}
 	set end(e) {
-		this._end = Math.max(this._snapToStep(this._clamp(K(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
+		this._end = Math.max(this._snapToStep(this._clamp(H(e, this._end))), this._start), this._syncValue(), this._syncMirrors();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (e === "value" || e === "start" || e === "end" || e === "min" || e === "max" || e === "step") {
@@ -2898,19 +2980,19 @@ var V = class extends HTMLElement {
 		this._isRange() ? this._resetRange() : this._resetSingle();
 	}
 	_updateFromAttribute(e) {
-		e === "value" ? this._value = this._snapToStep(this._clamp(K(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(K(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(K(this.getAttribute("end"), this._end))));
+		e === "value" ? this._value = this._snapToStep(this._clamp(H(this.getAttribute("value"), this._value))) : e === "start" ? this._start = this._snapToStep(this._clamp(H(this.getAttribute("start"), this._start))) : e === "end" && (this._end = this._snapToStep(this._clamp(H(this.getAttribute("end"), this._end))));
 	}
 	_isRange() {
 		return this.hasAttribute("range");
 	}
 	_min() {
-		return K(this.getAttribute("min"), 0);
+		return H(this.getAttribute("min"), 0);
 	}
 	_max() {
-		return K(this.getAttribute("max"), 100);
+		return H(this.getAttribute("max"), 100);
 	}
 	_step() {
-		return K(this.getAttribute("step"), 1);
+		return H(this.getAttribute("step"), 1);
 	}
 	_clamp(e) {
 		return Math.max(this._min(), Math.min(e, this._max()));
@@ -2975,7 +3057,7 @@ var V = class extends HTMLElement {
             aria-valuenow="${this._value}"
             aria-valuetext="${this._formatValue(this._value)}"
             ${a ? "disabled" : ""}
-            aria-label="${ue(this.getAttribute("aria-label") || "Value")}"
+            aria-label="${se(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>` : ""}
@@ -3075,10 +3157,10 @@ var V = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, K = (e, t) => {
+}, H = (e, t) => {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? n : t;
-}, ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), de = class extends HTMLElement {
+}, se = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), U = class extends HTMLElement {
 	static formAssociated = !0;
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
@@ -3142,8 +3224,8 @@ var V = class extends HTMLElement {
 		c(this, this._values.join(",")), this.innerHTML = `
       <div class="search-select${t}">
         <div class="input search-select-control search-select-multi"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          <input type="text" class="ms-input" data-input aria-label="${W(this._accessibleName())}" placeholder="${W(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
           <div class="ms-chips" data-chips></div>
-          <input type="text" class="ms-input" data-input aria-label="${q(this._accessibleName())}" placeholder="${q(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
         </div>
       </div>`, this._rendered = !0, c(this, this._values.join(",")), this._renderControl(), this._wire();
 	}
@@ -3154,7 +3236,7 @@ var V = class extends HTMLElement {
 				e.innerHTML = "";
 				return;
 			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${fe(e)}</span><button type="button" class="chip-remove" data-remove="${q(e)}" aria-label="Remove ${q(e)}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
+			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${ce(e)}</span><button type="button" class="chip-remove" data-remove="${W(e)}" aria-label="Remove ${W(e)}"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
 		}
 	}
 	_wire() {
@@ -3225,18 +3307,18 @@ var V = class extends HTMLElement {
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, fe = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), q = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), J = (e) => String(e).padStart(2, "0"), pe = (e, t) => `${J(e)}:${J(t)}`, Y = (e) => {
+}, ce = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), W = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), G = (e) => String(e).padStart(2, "0"), K = (e, t) => `${G(e)}:${G(t)}`, q = (e) => {
 	let t = /^(\d{2}):(\d{2})$/.exec(e || "");
 	return t ? {
 		h: +t[1],
 		m: +t[2]
 	} : null;
-}, X = (e, t = "24") => {
+}, J = (e, t = "24") => {
 	if (!e) return "";
-	if (t === "24") return pe(e.h, e.m);
+	if (t === "24") return K(e.h, e.m);
 	let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
-	return `${n}:${J(e.m)} ${r}`;
-}, me = class extends HTMLElement {
+	return `${n}:${G(e.m)} ${r}`;
+}, Y = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -3260,7 +3342,7 @@ var V = class extends HTMLElement {
 		} catch {
 			this._internals = null;
 		}
-		this._value = "", this._focus = null;
+		this._value = "", this._focus = null, this._typeahead = "", this._typeaheadTimer = null;
 	}
 	connectedCallback() {
 		if (!this._rendered) {
@@ -3283,11 +3365,11 @@ var V = class extends HTMLElement {
 	}
 	render() {
 		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
-		let e = this.getAttribute("placeholder") || "Select time", t = Y(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
+		let e = this.getAttribute("placeholder") || "Select time", t = q(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
 		this.innerHTML = `
       <div class="timepicker">
-        <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${u(a)}"` : ""}${o ? ` aria-describedby="${u(o)}"` : ""}>
-          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? X(t, n) : u(e)}</span>
+        <button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${d(a)}"` : ""}${o ? ` aria-describedby="${d(o)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? J(t, n) : d(e)}</span>
           <i class="bi bi-clock" aria-hidden="true"></i>
         </button>
         <div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
@@ -3299,14 +3381,14 @@ var V = class extends HTMLElement {
 	_syncTrigger() {
 		let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
 		if (!t) return;
-		let n = Y(this._value), r = this.getAttribute("format") || "24";
-		t.textContent = n ? X(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
+		let n = q(this._value), r = this.getAttribute("format") || "24";
+		t.textContent = n ? J(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
 	}
 	_buildTimes() {
-		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = Y(t) || {
+		let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = q(t) || {
 			h: 0,
 			m: 0
-		}, i = Y(n) || {
+		}, i = q(n) || {
 			h: 23,
 			m: 59
 		}, a = [], o = r.h, s = r.m;
@@ -3319,10 +3401,10 @@ var V = class extends HTMLElement {
 	_renderOptions() {
 		let e = this.querySelector(".timepicker-pop");
 		if (!e) return;
-		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Y(this._value), i = this._focus, a = "";
+		let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = q(this._value), i = this._focus, a = "";
 		for (let e = 0; e < n.length; e++) {
-			let o = n[e], s = pe(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
-			a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${X(o, t)}</button>`;
+			let o = n[e], s = K(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
+			a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${J(o, t)}</button>`;
 		}
 		e.innerHTML = a, this._focusActive();
 	}
@@ -3348,6 +3430,26 @@ var V = class extends HTMLElement {
 				this._focus = n, this._renderOptions();
 				break;
 			}
+			case "Home":
+				if (e.preventDefault(), !t.length) return;
+				this._focus = 0, this._renderOptions();
+				break;
+			case "End":
+				if (e.preventDefault(), !t.length) return;
+				this._focus = t.length - 1, this._renderOptions();
+				break;
+			case "PageUp": {
+				if (e.preventDefault(), !t.length) return;
+				let n = this._focus == null || this._focus < 0 ? 0 : this._focus;
+				this._focus = Math.max(n - 8, 0), this._renderOptions();
+				break;
+			}
+			case "PageDown": {
+				if (e.preventDefault(), !t.length) return;
+				let n = this._focus == null || this._focus < 0 ? 0 : this._focus;
+				this._focus = Math.min(n + 8, t.length - 1), this._renderOptions();
+				break;
+			}
 			case "Enter":
 			case " ":
 				e.preventDefault(), t[this._focus] && (this.value = t[this._focus].dataset.hm, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
@@ -3355,7 +3457,13 @@ var V = class extends HTMLElement {
 			case "Escape":
 				this._close();
 				break;
-			default:
+			default: if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+				e.preventDefault(), clearTimeout(this._typeaheadTimer), this._typeahead += e.key.toLowerCase(), this._typeaheadTimer = setTimeout(() => {
+					this._typeahead = "", this._typeaheadTimer = null;
+				}, 500);
+				let n = t.findIndex((e) => e.textContent.trim().toLowerCase().startsWith(this._typeahead));
+				n >= 0 && (this._focus = n, this._renderOptions());
+			}
 		}
 	}
 	_wire() {
@@ -3368,7 +3476,7 @@ var V = class extends HTMLElement {
 			let n = t.querySelector(".is-selected");
 			n ? this._focus = [...t.querySelectorAll(".timepicker-option")].indexOf(n) : this._focus = 0, this._renderOptions(), t.querySelector("[tabindex=\"0\"]")?.focus();
 		}, this._close = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.focus();
+			t.hidden = !0, e.setAttribute("aria-expanded", "false"), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", e.focus();
 		}, e.addEventListener("click", () => n() ? this._close() : this._open()), e.addEventListener("keydown", (e) => {
 			(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), n() || this._open());
 		}), t.addEventListener("click", (e) => {
@@ -3389,19 +3497,199 @@ var V = class extends HTMLElement {
 		}, this._bindGlobal(), this._syncFormValue();
 	}
 	_teardown() {
-		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), o(this);
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), o(this), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+}, le = "wui-wizard-step", X = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"active",
+			"variant",
+			"orientation",
+			"non-linear",
+			"hide-stepper",
+			"disabled",
+			"label",
+			"back-label",
+			"next-label",
+			"skip-label",
+			"finish-label"
+		];
+	}
+	constructor() {
+		super(), this._active = 0, this._skipped = /* @__PURE__ */ new Set(), this._invalid = /* @__PURE__ */ new Set(), this._finished = !1, this._rendered = !1, this._reflecting = !1, this._beforeNext = null, this._header = null, this._footer = null;
+	}
+	get active() {
+		return this._active;
+	}
+	set active(e) {
+		let t = Number.parseInt(e, 10);
+		Number.isFinite(t) && this._go(t, "set");
+	}
+	get beforeNext() {
+		return this._beforeNext;
+	}
+	set beforeNext(e) {
+		this._beforeNext = typeof e == "function" ? e : null;
+	}
+	get _steps() {
+		return [...this.querySelectorAll(`:scope > ${le}`)];
+	}
+	refresh() {
+		this._rendered && this._renderChrome();
+	}
+	connectedCallback() {
+		if (this._rendered) this._wire();
+		else {
+			let e = Number.parseInt(this.getAttribute("active"), 10);
+			this._active = Number.isFinite(e) && e >= 0 ? e : 0, this.render();
+		}
 	}
 	disconnectedCallback() {
 		this._teardown();
 	}
-}, he = "image/png,image/jpeg,image/webp", ge = 5, _e = {
+	attributeChangedCallback(e, t, n) {
+		if (!(!this._rendered || this._reflecting)) {
+			if (e === "active") {
+				let e = Number.parseInt(n, 10);
+				Number.isFinite(e) && e !== this._active && this._go(e, "set");
+				return;
+			}
+			this._renderChrome();
+		}
+	}
+	render() {
+		let e = this._steps;
+		this._header || (this._header = document.createElement("nav"), this._header.className = "stepper wizard-stepper", this._footer = document.createElement("div"), this._footer.className = "form-actions wizard-footer form-actions-between", e.length ? (this.insertBefore(this._header, e[0]), e[e.length - 1].after(this._footer)) : (this.prepend(this._header), this.append(this._footer))), this._renderChrome(), this._rendered = !0, this._wire();
+	}
+	_renderChrome() {
+		let e = this._steps;
+		this._clampActive(e), this._syncPanels(e), this._header.innerHTML = this._headerHtml(e), this._footer.innerHTML = this._footerHtml(e), this._header.hidden = this.hasAttribute("hide-stepper");
+	}
+	_clampActive(e) {
+		let t = Math.max(0, e.length - 1);
+		this._active > t && (this._active = t), this._active < 0 && (this._active = 0);
+	}
+	_syncPanels(e) {
+		e.forEach((e, t) => {
+			let n = t === this._active;
+			e.classList.add("wizard-panel"), e.hidden = !n, e.setAttribute("role", "tabpanel"), e.setAttribute("aria-hidden", n ? "false" : "true");
+		});
+	}
+	_stepStatus(e, t) {
+		return e.getAttribute("status") || (this._invalid.has(t) ? "error" : this._finished ? "done" : t === this._active ? "active" : t < this._active ? this._skipped.has(t) ? "skipped" : "done" : "pending");
+	}
+	_headerHtml(e) {
+		let t = this.getAttribute("variant") === "journey", n = this.getAttribute("variant") === "icons", r = this.getAttribute("orientation") === "vertical";
+		this._header.className = [
+			"stepper",
+			"wizard-stepper",
+			t && "stepper-journey",
+			n && "stepper-icons",
+			r && "stepper-vertical"
+		].filter(Boolean).join(" "), this._header.setAttribute("aria-label", this.getAttribute("label") || "Progress");
+		let i = this.hasAttribute("non-linear");
+		return e.map((e, r) => {
+			let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
+			u = a === "done" ? "<i class=\"bi bi-check-lg\" aria-hidden=\"true\"></i>" : a === "error" ? "<i class=\"bi bi-exclamation-triangle\" aria-hidden=\"true\"></i>" : a === "skipped" ? "<i class=\"bi bi-dash-lg\" aria-hidden=\"true\"></i>" : c ? `<i class="bi bi-${ue(c)}" aria-hidden="true"></i>` : String(l);
+			let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", p = i || r < this._active, m = s ? `<span class="step-desc">${Z(s)}</span>` : "", h;
+			return h = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Z(o)}</span>${m}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Z(o)}</span>${m}` : `<span class="step-circle">${u}</span><span class="step-label">${Z(o)}</span>${m}`, p ? `<button type="button" class="${d}" data-step="${r}"${f}>${h}</button>` : `<div class="${d}"${f}>${h}</div>`;
+		}).join("");
+	}
+	_footerHtml(e) {
+		let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
+		return `${t > 0 ? `<button type="button" class="btn btn-ghost" data-nav="back"${r}>${Z(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Z(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Z(o)}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Z(c)}</button>`}</span>`;
+	}
+	_wire() {
+		this._teardown(), this._onHeaderClick = (e) => {
+			let t = e.target.closest("[data-step]");
+			t && this.contains(t) && this._stepTo(Number.parseInt(t.dataset.step, 10));
+		}, this._onFooterClick = (e) => {
+			let t = e.target.closest("[data-nav]");
+			if (!t || !this.contains(t) || this.hasAttribute("disabled")) return;
+			let n = t.dataset.nav;
+			n === "back" ? this._back() : n === "skip" ? this._skip() : n === "next" ? this._next() : n === "finish" && this._finish();
+		}, this._header.addEventListener("click", this._onHeaderClick), this._footer.addEventListener("click", this._onFooterClick);
+	}
+	_teardown() {
+		this._header && this._onHeaderClick && this._header.removeEventListener("click", this._onHeaderClick), this._footer && this._onFooterClick && this._footer.removeEventListener("click", this._onFooterClick);
+	}
+	_stepTo(e) {
+		this.hasAttribute("disabled") || !this.hasAttribute("non-linear") && e >= this._active || this._go(e, "step");
+	}
+	_back() {
+		this._active > 0 && this._go(this._active - 1, "back");
+	}
+	async _next() {
+		let e = this._active, t = this._steps;
+		if (!this.dispatchEvent(new CustomEvent("wui-wizard:beforechange", {
+			detail: {
+				index: e,
+				next: e + 1,
+				reason: "next"
+			},
+			cancelable: !0
+		}))) return this._flagInvalid(e);
+		if (this._beforeNext) {
+			let t;
+			try {
+				t = await this._beforeNext(e);
+			} catch {
+				t = !1;
+			}
+			if (t === !1) return this._flagInvalid(e);
+		}
+		if (this._invalid.delete(e), this._skipped.delete(e), e >= t.length - 1) return this._finish();
+		this._go(e + 1, "next");
+	}
+	_skip() {
+		let e = this._active, t = this._steps;
+		if (t[e]?.hasAttribute("optional")) {
+			if (this._invalid.delete(e), this._skipped.add(e), this.dispatchEvent(new CustomEvent("wui-wizard:skip", { detail: { index: e } })), e >= t.length - 1) return this._finish();
+			this._go(e + 1, "skip");
+		}
+	}
+	_flagInvalid(e) {
+		this._invalid.add(e), this._renderChrome(), this.dispatchEvent(new CustomEvent("wui-wizard:invalid", { detail: { index: e } }));
+	}
+	_finish() {
+		this._invalid.delete(this._active), this._finished = !0, this._renderChrome(), this.dispatchEvent(new CustomEvent("wui-wizard:finish", { detail: { index: this._active } }));
+	}
+	_go(e, t) {
+		let n = this._steps, r = Math.max(0, n.length - 1), i = Math.min(Math.max(e, 0), r), a = this._active;
+		this._finished = !1, this._invalid.delete(a), this._active = i, this._reflectActive(i), this._renderChrome(), t !== "silent" && i !== a && this.dispatchEvent(new CustomEvent("wui-wizard:change", { detail: {
+			index: i,
+			previous: a,
+			reason: t
+		} }));
+	}
+	_reflectActive(e) {
+		this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
+	}
+}, Z = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), ue = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), de = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"description",
+			"optional",
+			"icon",
+			"status"
+		];
+	}
+	attributeChangedCallback() {
+		let e = this.closest("wui-wizard");
+		e && typeof e.refresh == "function" && e.refresh();
+	}
+}, fe = "image/png,image/jpeg,image/webp", pe = 5, me = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, ve = {
+}, he = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -3415,7 +3703,7 @@ var V = class extends HTMLElement {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ye = [
+}, Q = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ge = [
 	".png",
 	".jpg",
 	".jpeg",
@@ -3426,44 +3714,44 @@ var V = class extends HTMLElement {
 	".avif",
 	".heic"
 ];
-function be(e) {
+function _e(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 ye.some((e) => r.endsWith(e));
+	return ge.some((e) => r.endsWith(e));
 }
-function xe(e) {
-	let t = Z(e);
-	return t.length ? t.every((e) => e.startsWith(".") ? ye.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
+function ve(e) {
+	let t = Q(e);
+	return t.length ? t.every((e) => e.startsWith(".") ? ge.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
 }
-function Se(e) {
+function ye(e) {
 	let t = [];
-	for (let n of Z(e)) {
-		let e = ve[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of Q(e)) {
+		let e = he[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 Ce(e, t) {
-	let n = Z(t);
+function be(e, t) {
+	let n = Q(t);
 	if (!n.length) return !0;
 	let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
-	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (_e[e] || []).some((e) => i.endsWith(e)));
+	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (me[e] || []).some((e) => i.endsWith(e)));
 }
-function we(e, t = {}) {
+function xe(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? he : t.accept, r = t.maxSizeMb || 5;
-	return Ce(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Se(n)} file.`;
+	let n = t.accept === void 0 ? fe : t.accept, r = t.maxSizeMb || 5;
+	return be(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${ye(n)} file.`;
 }
 //#endregion
 //#region src/index.js
-var Q = (e, t) => {
+var $ = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function $() {
-	Q("wui-select", U), Q("wui-phone", V), Q("wui-datepicker", w), Q("wui-date-range", re), Q("wui-slider", G), Q("wui-timepicker", me), Q("wui-autocomplete", p), Q("wui-multiselect", ie), Q("wui-taginput", de), Q("wui-otp", j), Q("wui-status-icon", n);
+function Se() {
+	$("wui-select", z), $("wui-phone", L), $("wui-datepicker", T), $("wui-date-range", ee), $("wui-slider", V), $("wui-timepicker", Y), $("wui-autocomplete", m), $("wui-multiselect", E), $("wui-taginput", U), $("wui-otp", k), $("wui-status-icon", n), $("wui-wizard-step", de), $("wui-wizard", X);
 }
-$();
+Se();
 //#endregion
-export { he as DEFAULT_IMAGE_ACCEPT, ge as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, re as WuiDateRange, ie as WuiMultiSelect, j as WuiOtp, V as WuiPhone, U as WuiSelect, G as WuiSlider, n as WuiStatusIcon, de as WuiTagInput, me as WuiTimePicker, Se as acceptLabel, $ as defineWeborityElements, be as isImageFile, xe as isImageOnlyAccept, Ce as matchesAccept, we as validateFile };
+export { fe as DEFAULT_IMAGE_ACCEPT, pe as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, m as WuiAutocomplete, T as WuiDatePicker, ee as WuiDateRange, E as WuiMultiSelect, k as WuiOtp, L as WuiPhone, z as WuiSelect, V as WuiSlider, n as WuiStatusIcon, U as WuiTagInput, Y as WuiTimePicker, X as WuiWizard, de as WuiWizardStep, ye as acceptLabel, Se as defineWeborityElements, _e as isImageFile, ve as isImageOnlyAccept, be as matchesAccept, xe as validateFile };