@webority/ui-elements 0.6.10 → 0.6.12

package/dist/ui-elements.js

@@ -27,22 +27,36 @@ function i(e, t, n = {}) {
 	let c = t.offsetWidth, l = Math.min(i.left, window.innerWidth - c - r);
 	t.style.left = `${Math.max(r, l)}px`;
 }
+function a(e, t) {
+	o(e), e._reanchor = t, window.addEventListener("resize", e._reanchor), window.addEventListener("scroll", e._reanchor, !0);
+}
+function o(e) {
+	e?._reanchor && (window.removeEventListener("resize", e._reanchor), window.removeEventListener("scroll", e._reanchor, !0), e._reanchor = null);
+}
 //#endregion
 //#region src/formMirror.js
-var a = "data-wui-mirror";
-function o(e, t) {
-	let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${a}]`);
+var s = "data-wui-mirror";
+function c(e, t) {
+	let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${s}]`);
 	if (!n) {
 		r?.remove();
 		return;
 	}
-	r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(a, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
+	r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(s, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
 	for (let t of e.attributes) t.name.startsWith("data-val") && r.setAttribute(t.name, t.value);
 	r.disabled = e.hasAttribute("disabled");
 }
 //#endregion
 //#region src/optionLabel.js
-var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), l = (e) => e?.[s] ? String(e.label ?? "") : c(e == null ? "" : e.label), u = class extends HTMLElement {
+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) => {
+	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) => {
+	if (e == null) return "";
+	let t = e[l] ? String(e.label ?? "") : u(e.label), n = d(e.icon);
+	return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
+}, p = class extends HTMLElement {
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
@@ -54,6 +68,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			"min-chars",
 			"debounce",
 			"remote",
+			"size",
 			"aria-label"
 		];
 	}
@@ -70,9 +85,9 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._value;
 	}
 	set value(e) {
-		this._value = e == null ? "" : String(e), o(this, this._value);
+		this._value = e == null ? "" : String(e), c(this, this._value);
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		t && (this._label = f(t.label)), this._syncInput();
+		t && (this._label = h(t.label)), this._syncInput();
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
@@ -102,7 +117,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
-			[s]: !0,
+			icon: e.getAttribute("icon") || void 0,
+			[l]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -111,11 +127,11 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	render() {
 		this._snapshotDeclared();
-		let e = this.getAttribute("placeholder") || "Search…";
+		let e = this.getAttribute("placeholder") || "Search…", t = this.getAttribute("size"), n = t === "sm" ? " search-select-sm" : t === "lg" ? " search-select-lg" : "";
 		this.innerHTML = `
-      <div class="search-select">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${d(this._accessibleName())}">
-          <input class="search-select-input search-select-ac-input" placeholder="${d(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
+      <div class="search-select${n}">
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" 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" : ""} />
           <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>
@@ -124,7 +140,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
           <div class="search-select-empty" hidden>No matches</div>
           <div class="search-select-hint" hidden>Type to search…</div>
         </div>
-      </div>`, this._rendered = !0, o(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
+      </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
 	}
 	_refs() {
 		return {
@@ -153,9 +169,9 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		let t = this._refs();
 		if (!t.optionsWrap) return;
 		let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
-		!this._remote && n && (r = r.filter((e) => f(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
+		!this._remote && n && (r = r.filter((e) => h(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
 			let t = String(e.value) === String(this._value);
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${d(e.value)}" aria-selected="${t}">${l(e)}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${t}">${f(e)}</button>`;
 		}).join(""), this._active = -1;
 		let i = n.length < this._minChars;
 		t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
@@ -168,16 +184,16 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			this._active = e;
 			for (let e of this._optionEls()) e.classList.remove("is-active");
 			e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
-		}, a = () => !e.menu.hidden, s = () => {
+		}, o = () => !e.menu.hidden, s = () => {
 			e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
-		}, c = () => {
+		}, l = () => {
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
-		}, l = (t) => {
-			this._value = t.dataset.value, this._label = f(t.innerHTML), o(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), c(), e.input.focus();
+		}, u = (t) => {
+			this._value = t.dataset.value, this._label = h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), l(), e.input.focus();
 		};
 		e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
 			let t = e.input.value;
-			if (e.clear && (e.clear.hidden = !t), a() || s(), this._remote) {
+			if (e.clear && (e.clear.hidden = !t), o() || s(), this._remote) {
 				if (this._renderOptions(t), t.trim().length < this._minChars) return;
 				clearTimeout(this._timer), this._timer = setTimeout(() => {
 					this.dispatchEvent(new CustomEvent("search", {
@@ -188,25 +204,25 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			} else this._renderOptions(t);
 		}), e.input.addEventListener("keydown", (e) => {
 			let t = n();
-			e.key === "ArrowDown" ? (e.preventDefault(), a() || s(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), l(t[this._active])) : e.key === "Escape" && c();
+			e.key === "ArrowDown" ? (e.preventDefault(), o() || s(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), u(t[this._active])) : e.key === "Escape" && l();
 		}), 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 && r(this._optionEls().indexOf(t));
-		}), e.clear?.addEventListener("click", () => {
-			this._value = "", this._label = "", o(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
+		}), e.optionsWrap.addEventListener("mouseleave", () => r(-1)), e.clear?.addEventListener("click", () => {
+			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._onDocClick = (e) => {
-			a() && !this.contains(e.target) && c();
-		}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
-			a() && t();
+			o() && !this.contains(e.target) && l();
+		}, document.addEventListener("click", this._onDocClick), a(this, () => {
+			o() && t();
 		});
 	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), clearTimeout(this._timer);
 	}
-}, d = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), f = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), p = [
+}, m = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), h = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), g = [
 	"January",
 	"February",
 	"March",
@@ -219,7 +235,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	"October",
 	"November",
 	"December"
-], m = [
+], _ = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -227,121 +243,532 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	"Th",
 	"Fr",
 	"Sa"
-], h = (e) => String(e).padStart(2, "0"), g = (e, t, n) => `${e}-${h(t + 1)}-${h(n)}`, _ = (e) => {
+], v = (e) => String(e).padStart(2, "0"), y = (e, t, n) => `${e}-${v(t + 1)}-${v(n)}`, b = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, v = (e) => {
-	let t = _(e);
-	return t ? `${h(t.d)} ${p[t.m].slice(0, 3)} ${t.y}` : "";
-}, y = class extends HTMLElement {
+}, 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) => {
+	for (; t < 0;) t += 12, --e;
+	for (; t > 11;) t -= 12, e += 1;
+	return {
+		y: e,
+		m: t
+	};
+}, w = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
 			"min",
 			"max",
 			"placeholder",
-			"disabled"
+			"disabled",
+			"first-day",
+			"size"
 		];
 	}
 	constructor() {
 		super(), this._value = "";
 		let e = new Date(2e3, 0, 1);
-		this._viewY = e.getFullYear(), this._viewM = e.getMonth();
+		this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
 	}
 	connectedCallback() {
 		this._rendered || this.render();
 	}
 	attributeChangedCallback(e, t, n) {
-		this._rendered && (e === "value" ? (this._value = n || "", this._syncTrigger()) : this.render());
+		this._rendered && (e === "value" ? (this._value = n || "", this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
 	}
 	get value() {
 		return this._value;
 	}
 	set value(e) {
-		this._value = e || "", o(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		this._value = e || "", c(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	_firstDay() {
+		let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
+		return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
 	}
 	render() {
 		this._value = this.getAttribute("value") || this._value;
-		let e = this.getAttribute("placeholder") || "Enter Date", t = _(this._value);
-		t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
+		let e = this.getAttribute("placeholder") || "Enter Date", t = b(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" : "";
+		this.innerHTML = `
       <div class="datepicker">
-        <button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? v(this._value) : e}</span>
+        <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? x(this._value) : e}</span>
           <i class="bi bi-calendar3" aria-hidden="true"></i>
         </button>
-        <div class="datepicker-pop" role="dialog" hidden></div>
-      </div>`, this._rendered = !0, o(this, this._value), this._wire();
+        <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
+      </div>`, this._rendered = !0, c(this, this._value), this._wire();
 	}
 	_syncFormValue() {
-		o(this, this._value);
+		c(this, this._value);
 	}
 	_syncTrigger() {
-		let e = this.querySelector("[data-trigger-label]");
-		if (!e) return;
-		let t = _(this._value);
-		e.textContent = t ? v(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
-	}
-	_renderMonth() {
-		let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(), r = _(this._value), i = _(this.getAttribute("min")), a = _(this.getAttribute("max")), o = (e, t, n) => {
-			let r = new Date(e, t, n).getTime();
-			return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
-		}, s = "";
-		for (let e = 0; e < t; e++) s += "<span class=\"datepicker-day is-outside\"></span>";
-		for (let e = 1; e <= n; e++) {
-			let t = g(this._viewY, this._viewM, e), n = r && r.y === this._viewY && r.m === this._viewM && r.d === e, i = o(this._viewY, this._viewM, e);
-			s += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
-		}
-		e.innerHTML = `
+		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);
+	}
+	_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;
+		return {
+			dayDisabled: (e, t, i) => {
+				let a = new Date(e, t, i).getTime();
+				return a < n || a > r;
+			},
+			monthDisabled: (e, t) => {
+				let i = new Date(e, t, 1).getTime();
+				return new Date(e, t, S(e, t)).getTime() < n || i > r;
+			},
+			yearDisabled: (e) => {
+				let t = new Date(e, 0, 1).getTime();
+				return new Date(e, 11, 31).getTime() < n || t > r;
+			}
+		};
+	}
+	_renderView() {
+		let e = this.querySelector(".datepicker-pop");
+		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 || {
+			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);
+			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);
+		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;
+		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("");
+		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>
-        <span class="datepicker-month">${p[this._viewM]} ${this._viewY}</span>
+        <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-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">${m.map((e) => `<span>${e}</span>`).join("")}</div>
-      <div class="datepicker-grid">${s}</div>
-      <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
+      <div class="datepicker-weekdays">${p}</div>
+      <div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${c}</div>
+      <div class="datepicker-foot">
+        <button type="button" class="datepicker-link" data-today>Today</button>
+        <button type="button" class="datepicker-link" data-clear>Clear</button>
+      </div>`;
+	}
+	_monthsHtml() {
+		let e = b(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>`;
+		}
+		return `
+      <div class="datepicker-head">
+        <button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
+        <button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
+      </div>
+      <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 = "";
+		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",
+				c ? "is-today" : "",
+				s ? "is-selected" : ""
+			].filter(Boolean).join(" ");
+			i += `<button type="button" class="${u}" data-year="${o}"${l ? " disabled" : ""}>${o}</button>`;
+		}
+		return `
+      <div class="datepicker-head">
+        <button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
+        <span class="datepicker-month">${r + 1} – ${r + 10}</span>
+        <button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
+      </div>
+      <div class="datepicker-cells">${i}</div>`;
+	}
+	_focusActive() {
+		let e = this.querySelector(".datepicker-pop"), t = e?.querySelector("[tabindex=\"0\"]") || e?.querySelector(".is-selected") || e?.querySelector(".datepicker-day:not(:disabled), .datepicker-cell:not(:disabled)");
+		t && e.contains(document.activeElement) && t.focus();
 	}
 	_position(e, t) {
 		i(e, t);
 	}
+	_setFocus(e, t, n, r) {
+		let { y: i, m: a } = C(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();
+	}
+	_onKey(e) {
+		if (this._mode !== "days") {
+			e.key === "Escape" && this._close();
+			return;
+		}
+		let t = this._focus || b(this._value) || {
+			y: this._viewY,
+			m: this._viewM,
+			d: 1
+		}, n = (n, r) => {
+			e.preventDefault();
+			let i = new Date(t.y, t.m, t.d + n);
+			this._setFocus(i.getFullYear(), i.getMonth(), i.getDate(), r);
+		};
+		switch (e.key) {
+			case "ArrowLeft": return n(-1, "slide-prev");
+			case "ArrowRight": return n(1, "slide-next");
+			case "ArrowUp": return n(-7, "slide-prev");
+			case "ArrowDown": return n(7, "slide-next");
+			case "Home": return n(-((new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7), "slide-prev");
+			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");
+			}
+			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");
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = y(t.y, t.m, t.d), this._close());
+				return;
+			case "Escape": return this._close();
+			default:
+		}
+	}
 	_wire() {
-		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
+		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop"), n = this.querySelector(".datepicker");
 		if (!e || !t) return;
-		let n = () => !t.hidden, r = () => {
-			if (!_(this._value) && !this._viewNavigated) {
+		let r = () => !t.hidden;
+		this._open = () => {
+			if (!b(this._value) && !this._viewNavigated) {
 				let e = /* @__PURE__ */ new Date();
 				this._viewY = e.getFullYear(), this._viewM = e.getMonth();
 			}
-			this._renderMonth(), t.hidden = !1, this._position(e, t), e.setAttribute("aria-expanded", "true");
-		}, i = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false");
+			let r = b(this._value), i = /* @__PURE__ */ new Date();
+			this._mode = "days", this._focus = r || {
+				y: this._viewY,
+				m: this._viewM,
+				d: i.getFullYear() === this._viewY && i.getMonth() === this._viewM ? i.getDate() : 1
+			}, this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true"), t.querySelector("[tabindex=\"0\"]")?.focus();
+		}, this._close = () => {
+			t.hidden = !0, n?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), e.focus();
+		}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
+			this._popClick = !0;
+			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));
+				this._viewY = e.y, this._viewM = e.m, this._focus = {
+					y: e.y,
+					m: e.m,
+					d: 1
+				}, this._renderView(), this._slide = "";
+				return;
+			}
+			let n = e.target.closest("[data-nav-year]");
+			if (n) {
+				this._viewY += Number(n.dataset.navYear), this._renderView();
+				return;
+			}
+			let r = e.target.closest("[data-nav-decade]");
+			if (r) {
+				this._viewY += Number(r.dataset.navDecade) * 10, this._renderView();
+				return;
+			}
+			let i = e.target.closest("[data-view]");
+			if (i) {
+				this._mode = i.dataset.view, this._renderView();
+				return;
+			}
+			let a = e.target.closest("[data-month]");
+			if (a && !a.disabled) {
+				this._viewNavigated = !0, this._viewM = Number(a.dataset.month), this._mode = "days", this._focus = {
+					y: this._viewY,
+					m: this._viewM,
+					d: 1
+				}, this._renderView();
+				return;
+			}
+			let o = e.target.closest("[data-year]");
+			if (o && !o.disabled) {
+				this._viewNavigated = !0, this._viewY = Number(o.dataset.year), this._mode = "months", this._renderView();
+				return;
+			}
+			if (e.target.closest("[data-today]")) {
+				let e = /* @__PURE__ */ new Date();
+				this.value = y(e.getFullYear(), e.getMonth(), e.getDate()), this._close();
+				return;
+			}
+			if (e.target.closest("[data-clear]")) {
+				this.value = "", this._close();
+				return;
+			}
+			let s = e.target.closest(".datepicker-day[data-iso]");
+			s && !s.disabled && (this.value = s.dataset.iso, this._close());
+		}), this._onKeyBound = (e) => {
+			r() && this._onKey(e);
+		}, t.addEventListener("keydown", this._onKeyBound), this._onDocClick = (e) => {
+			let t = this._popClick;
+			this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
+		}, document.addEventListener("click", this._onDocClick), a(this, () => {
+			r() && this._position(e, t);
+		}), this._syncFormValue();
+	}
+	disconnectedCallback() {
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
+	}
+}, T = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+], E = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+], D = (e) => String(e).padStart(2, "0"), O = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, k = (e) => {
+	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
+	return t ? {
+		y: +t[1],
+		m: t[2] - 1,
+		d: +t[3]
+	} : null;
+}, A = (e) => {
+	let t = k(e);
+	return t ? `${D(t.d)} ${T[t.m].slice(0, 3)} ${t.y}` : "";
+}, j = (e, t) => new Date(e, t + 1, 0).getDate(), M = (e, t) => {
+	for (; t < 0;) t += 12, --e;
+	for (; t > 11;) t -= 12, e += 1;
+	return {
+		y: e,
+		m: t
+	};
+}, N = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"start",
+			"end",
+			"min",
+			"max",
+			"placeholder",
+			"disabled",
+			"first-day",
+			"size"
+		];
+	}
+	constructor() {
+		super(), this._start = "", this._end = "", this._hover = "";
+		let e = new Date(2e3, 0, 1);
+		this._viewY = e.getFullYear(), this._viewM = e.getMonth();
+	}
+	connectedCallback() {
+		this._rendered || this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
+	}
+	get value() {
+		return {
+			start: this._start,
+			end: this._end
 		};
-		e.addEventListener("click", () => n() ? i() : r()), t.addEventListener("click", (e) => {
+	}
+	set value(e) {
+		this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	_firstDay() {
+		let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
+		return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
+	}
+	_label() {
+		let e = this.getAttribute("placeholder") || "Start – End";
+		return !this._start && !this._end ? {
+			text: e,
+			empty: !0
+		} : {
+			text: `${A(this._start) || "Start"} – ${A(this._end) || "End"}`,
+			empty: !1
+		};
+	}
+	render() {
+		this._start = this.getAttribute("start") || this._start, this._end = this.getAttribute("end") || this._end;
+		let e = k(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();
+		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" : ""}>
+          <span data-range-label class="${i ? "search-select-placeholder" : ""}">${r}</span>
+          <i class="bi bi-calendar-range" aria-hidden="true"></i>
+        </button>
+        <div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
+      </div>`, this._rendered = !0, this._syncMirrors(), this._wire();
+	}
+	_syncTrigger() {
+		let e = this.querySelector(".daterange-trigger"), t = this.querySelector("[data-range-label]");
+		if (!t) return;
+		let { text: n, empty: r } = this._label();
+		t.textContent = n, t.classList.toggle("search-select-placeholder", r), e?.classList.toggle("has-value", !r);
+	}
+	_syncMirrors() {
+		let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
+		this._mirror("start", e, this._start), this._mirror("end", t, this._end);
+	}
+	_mirror(e, t, n) {
+		if (!t) return;
+		let r = this.querySelector(`input[type="hidden"][data-range-mirror="${e}"]`);
+		r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "";
+	}
+	_limits() {
+		let e = k(this.getAttribute("min")), t = k(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 = j(e, t), a = this._limits(), o = E.map((e, t) => E[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
+			let i = O(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 = M(e, t - 1), u = j(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 = M(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">${T[t]} ${e}</div>
+        <div class="datepicker-weekdays">${o}</div>
+        <div class="datepicker-grid" role="grid">${c}</div>
+      </div>`;
+	}
+	_renderView() {
+		let e = this.querySelector(".daterange-pop");
+		if (!e) return;
+		let t = M(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>
+        <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="daterange-cals">
+        ${this._monthHtml(this._viewY, this._viewM)}
+        ${this._monthHtml(t.y, t.m)}
+      </div>
+      <div class="datepicker-foot">
+        <span class="daterange-hint" data-range-hint></span>
+        <button type="button" class="datepicker-link" data-clear>Clear</button>
+      </div>`, this._paint();
+	}
+	_paint() {
+		let e = this.querySelector(".daterange-pop");
+		if (!e) return;
+		let t = this._start ? new Date(this._start).getTime() : null, n = this._end;
+		t && !this._end && this._hover && new Date(this._hover).getTime() >= t && (n = this._hover);
+		let r = n ? new Date(n).getTime() : null;
+		for (let n of e.querySelectorAll(".datepicker-day[data-iso]")) {
+			let e = new Date(n.dataset.iso).getTime(), i = t != null && e === t, a = r != null && e === r, o = t != null && r != null && e > t && e < r;
+			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 ? `${A(this._start)} – ${A(this._end)}` : "Pick an end date" : "Pick a start date");
+	}
+	_position(e, t) {
+		i(e, t);
+	}
+	_pick(e) {
+		if (!this._start || this._start && this._end) {
+			this._start = e, this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._paint();
+			return;
+		}
+		if (new Date(e).getTime() < new Date(this._start).getTime()) {
+			this._start = e, this._paint();
+			return;
+		}
+		this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+	}
+	_wire() {
+		let e = this.querySelector(".daterange-trigger"), t = this.querySelector(".daterange-pop"), n = this.querySelector(".daterange");
+		if (!e || !t) return;
+		let r = () => !t.hidden;
+		this._open = () => {
+			let r = k(this._start);
+			if (r) this._viewY = r.y, this._viewM = r.m;
+			else {
+				let e = /* @__PURE__ */ new Date();
+				this._viewY = e.getFullYear(), this._viewM = e.getMonth();
+			}
+			this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true");
+		}, this._close = () => {
+			t.hidden = !0, this._hover = "", n?.classList.remove("open"), e.setAttribute("aria-expanded", "false");
+		}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
+			this._popClick = !0;
 			let t = e.target.closest("[data-nav]");
 			if (t) {
-				this._viewNavigated = !0, this._viewM += Number(t.dataset.nav), this._viewM < 0 ? (this._viewM = 11, --this._viewY) : this._viewM > 11 && (this._viewM = 0, this._viewY += 1), this._renderMonth();
+				let e = M(this._viewY, this._viewM + Number(t.dataset.nav));
+				this._viewY = e.y, this._viewM = e.m, this._renderView();
 				return;
 			}
 			if (e.target.closest("[data-clear]")) {
-				this.value = "", i();
+				this._start = "", this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._renderView(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 				return;
 			}
 			let n = e.target.closest(".datepicker-day[data-iso]");
-			n && !n.disabled && (this.value = n.dataset.iso, i());
+			n && !n.disabled && this._pick(n.dataset.iso);
+		}), t.addEventListener("mouseover", (e) => {
+			let t = e.target.closest(".datepicker-day[data-iso]");
+			t && this._start && !this._end && (this._hover = t.dataset.iso, this._paint());
 		}), this._onDocClick = (e) => {
-			n() && !this.contains(e.target) && i();
+			let t = this._popClick;
+			this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
 		}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
-			n() && e.key === "Escape" && i();
-		}, document.addEventListener("keydown", this._onDocKey), this._syncFormValue();
+			r() && e.key === "Escape" && this._close();
+		}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
+			r() && this._position(e, t);
+		}), this._syncMirrors();
 	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
 	}
-}, b = class extends HTMLElement {
+}, P = class extends HTMLElement {
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
@@ -351,6 +778,9 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			"search-placeholder",
 			"searchable",
 			"disabled",
+			"icon",
+			"size",
+			"collapse-chips",
 			"aria-label"
 		];
 	}
@@ -373,7 +803,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._values.slice();
 	}
 	set values(e) {
-		this._values = Array.isArray(e) ? e.map(String) : [], o(this, this._values.join(",")), this._rendered && this._renderControl();
+		this._values = Array.isArray(e) ? e.map(String) : [], c(this, this._values.join(",")), this._rendered && this._renderControl();
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
@@ -387,7 +817,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
-			[s]: !0,
+			icon: e.getAttribute("icon") || void 0,
+			[l]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -400,101 +831,122 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	_labelHtmlFor(e) {
 		let t = this._readOptions().find((t) => String(t.value) === String(e));
-		return t ? l(t) : c(e);
+		return t ? f(t) : u(e);
 	}
 	render() {
 		this._snapshotDeclared();
-		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
-		o(this, this._values.join(",")), this.innerHTML = `
-      <div class="search-select">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${x(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…", n = this.getAttribute("icon"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "";
+		c(this, this._values.join(",")), 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-label="${F(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          ${n ? `<i class="bi bi-${F(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" 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="${x(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>` : ""}
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${F(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>
-      </div>`, this._rendered = !0, o(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
+      </div>`, this._rendered = !0, c(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
 	}
 	_renderControl() {
 		let e = this.querySelector("[data-chips]");
 		if (!e) return;
 		let t = this.getAttribute("placeholder") || "Select…";
 		if (!this._values.length) {
-			e.innerHTML = `<span class="search-select-placeholder">${c(t)}</span>`;
+			e.innerHTML = `<span class="search-select-placeholder">${u(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="${x(e)}" aria-label="Remove"><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">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${F(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
+	}
+	_collapseChips() {
+		let e = this.querySelector("[data-chips]");
+		if (!e || !this.hasAttribute("collapse-chips") || !this._values.length) return;
+		e.querySelector(".chip-more")?.remove();
+		let t = [...e.querySelectorAll(":scope > .chip:not(.chip-more)")];
+		for (let e of t) e.style.display = "";
+		if (!t.length) return;
+		let n = e.clientWidth, r = (e) => e.offsetLeft + e.offsetWidth;
+		if (r(t[t.length - 1]) <= n) return;
+		let i = document.createElement("span");
+		i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, e.appendChild(i);
+		let a = i.offsetWidth + 6, o = 0;
+		for (let e of t) if (r(e) <= n - a) o += 1;
+		else break;
+		o < 1 && (o = 1);
+		for (let e = o; e < t.length; e += 1) t[e].style.display = "none";
+		i.textContent = `+${t.length - o}`;
 	}
 	_renderOptions(e) {
 		let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
 		if (!t) return;
 		let r = (e || "").trim().toLowerCase(), i = this._readOptions();
-		r && (i = i.filter((e) => S(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
+		r && (i = i.filter((e) => ee(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
 			let t = this._values.includes(String(e.value));
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${x(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${l(e)}</span></button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${F(e.value)}" aria-selected="${t}"><span class="ms-opt-label">${f(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;
 	}
 	_wire() {
-		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"), a = this.querySelector(".search-select-options");
+		let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), o = this.querySelector(".search-select-options");
 		if (!e || !t) return;
-		let s = () => this.hasAttribute("disabled"), c = () => i(e, t, { matchWidth: !0 }), l = () => [...this.querySelectorAll(".search-select-option")], u = () => l().filter((e) => !e.hidden), d = (e) => {
-			let t = u();
+		let s = () => this.hasAttribute("disabled");
+		!this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this));
+		let l = () => i(e, t, { matchWidth: !0 }), u = () => [...this.querySelectorAll(".search-select-option")], d = () => u().filter((e) => !e.hidden), f = (e) => {
+			let t = d();
 			this._active = e;
-			for (let e of l()) e.classList.remove("is-active");
+			for (let e of u()) e.classList.remove("is-active");
 			e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
-		}, f = () => !t.hidden, p = () => {
-			s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), c(), n && (n.value = "", this._renderOptions(""), n.focus()));
-		}, m = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), d(-1);
+		}, 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 = () => {
-			o(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-		}, g = (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 : ""), h();
+			t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), f(-1);
+		}, g = () => {
+			c(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}, _ = (e) => {
-			this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), h();
+			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();
 		};
 		e.addEventListener("click", (e) => {
 			let t = e.target.closest("[data-remove]");
 			if (t) {
-				e.stopPropagation(), _(t.dataset.remove);
+				e.stopPropagation(), v(t.dataset.remove);
 				return;
 			}
-			f() ? m() : p();
-		}), a.addEventListener("click", (e) => {
+			p() ? h() : m();
+		}), o.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && (g(t.dataset.value), n?.focus());
-		}), a.addEventListener("mousemove", (e) => {
+			t && (_(t.dataset.value), n?.focus());
+		}), o.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && d(u().indexOf(t));
-		}), n?.addEventListener("input", () => {
-			this._renderOptions(n.value), r && (r.hidden = !n.value), d(-1);
+			t && f(d().indexOf(t));
+		}), o.addEventListener("mouseleave", () => f(-1)), n?.addEventListener("input", () => {
+			this._renderOptions(n.value), r && (r.hidden = !n.value), f(-1);
 		});
-		let v = (t) => {
-			let r = u();
-			t.key === "ArrowDown" ? (t.preventDefault(), d(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), d(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && g(r[this._active].dataset.value)) : t.key === "Escape" ? (m(), e.focus()) : t.key === "Backspace" && !n.value && this._values.length && _(this._values[this._values.length - 1]);
+		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]);
 		};
-		n?.addEventListener("keydown", v), r?.addEventListener("click", () => {
+		n?.addEventListener("keydown", y), r?.addEventListener("click", () => {
 			n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
 		}), e.addEventListener("keydown", (e) => {
-			if (f()) {
-				v(e);
+			if (p()) {
+				y(e);
 				return;
 			}
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), p());
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
 		}), this._onDocClick = (e) => {
-			f() && !this.contains(e.target) && m();
-		}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
-			f() && c();
+			p() && !this.contains(e.target) && h();
+		}, document.addEventListener("click", this._onDocClick), a(this, () => {
+			p() && l();
 		});
 	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick);
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), this._ro?.disconnect(), this._ro = null;
 	}
-}, x = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), S = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), C = /[^0-9]/g, w = /[^0-9a-zA-Z]/g, T = class extends HTMLElement {
+}, F = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), ee = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), I = /[^0-9]/g, L = /[^0-9a-zA-Z]/g, R = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -521,16 +973,16 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._value ?? "";
 	}
 	set value(e) {
-		this._value = this._clean(e), o(this, this._value), this._paint();
+		this._value = this._clean(e), c(this, this._value), this._paint();
 	}
 	_clean(e) {
-		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? w : C, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? L : I, "").slice(0, this.length);
 	}
 	connectedCallback() {
 		this._rendered || this.render();
 	}
 	attributeChangedCallback(e, t, n) {
-		this._rendered && (e === "value" ? (this._value = this._clean(n), o(this, this._value), this._paint()) : this.render());
+		this._rendered && (e === "value" ? (this._value = this._clean(n), c(this, this._value), this._paint()) : this.render());
 	}
 	render() {
 		this._value = this._clean(this.getAttribute("value") ?? this._value);
@@ -548,7 +1000,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
           spellcheck="false"
           ${n ? "disabled" : ""} />
         <div class="otp-slots" aria-hidden="true">${r}</div>
-      </div>`, this._rendered = !0, o(this, this._value), this._wire(), this._paint();
+      </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._paint();
 	}
 	_refs() {
 		return {
@@ -570,7 +1022,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		if (!e) return;
 		let t = (e) => {
 			let t = this._clean(e), n = t !== this._value;
-			this._value = t, o(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
+			this._value = t, c(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
 				bubbles: !0,
 				detail: t
 			}));
@@ -590,7 +1042,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			document.activeElement === e && this._paint();
 		});
 	}
-}, E = [
+}, z = [
 	[
 		"AF",
 		"Afghanistan",
@@ -1816,11 +2268,11 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], D = (e) => (E.find((t) => t[0] === e) || [
+], B = (e) => (z.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], O = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, k = class extends HTMLElement {
+])[2], V = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, H = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -1839,36 +2291,36 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
 	}
 	get value() {
-		return `+${D(this._country)}${this._national}`;
+		return `+${B(this._country)}${this._national}`;
 	}
 	set value(e) {
 		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
 	}
 	_commit() {
-		o(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		c(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 	}
 	render() {
 		let e = this.getAttribute("placeholder") || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
-		let t = E.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${O(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		let t = z.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${V(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</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="${O(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${V(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>+${D(this._country)}</span>
+            <span class="phone-dial" data-dial>+${B(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>
         </div>
-        <input type="tel" class="input" placeholder="${A(e)}" value="${A(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
-      </div>`, this._rendered = !0, o(this, this.value), this._wire();
+        <input type="tel" class="input" placeholder="${U(e)}" value="${U(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+      </div>`, this._rendered = !0, c(this, this.value), this._wire();
 	}
 	_wire() {
-		let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), i = this.querySelector(".country-empty"), a = this.querySelector("input[type=tel]"), s = this.querySelector("[data-flag]"), c = this.querySelector("[data-dial]");
+		let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), i = this.querySelector(".country-empty"), a = this.querySelector("input[type=tel]"), o = this.querySelector("[data-flag]"), s = this.querySelector("[data-dial]");
 		if (!e || !t) return;
 		let l = () => !t.hidden, u = () => {
 			let n = e.getBoundingClientRect(), r = t.offsetWidth || 320, i = t.offsetHeight || 320, a = window.innerHeight - n.bottom, o = a < i + 6 && n.top > a ? n.top - i - 6 : n.bottom + 6, s = Math.min(Math.max(8, n.left), Math.max(8, window.innerWidth - r - 8));
@@ -1889,7 +2341,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			}
 			i && (i.hidden = n > 0);
 		}, m = (e) => {
-			this._country = e, this.setAttribute("country", e), s && (s.className = O(e)), c && (c.textContent = `+${D(e)}`);
+			this._country = e, this.setAttribute("country", e), o && (o.className = V(e)), s && (s.textContent = `+${B(e)}`);
 			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
 			f(), this._commit();
 		};
@@ -1900,12 +2352,12 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
 		}), this._onDocClick = (e) => {
 			l() && !this.contains(e.target) && f();
-		}, document.addEventListener("click", this._onDocClick), o(this, this.value);
+		}, document.addEventListener("click", this._onDocClick), c(this, this.value);
 	}
 	disconnectedCallback() {
 		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, A = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), j = class extends HTMLElement {
+}, U = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), W = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -1916,6 +2368,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			"compact",
 			"size",
 			"clearable",
+			"icon",
+			"prefix",
 			"aria-label"
 		];
 	}
@@ -1935,7 +2389,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._value;
 	}
 	set value(e) {
-		this._value = e == null ? "" : String(e), o(this, this._value), this._syncSelected(), this._syncReset();
+		this._value = e == null ? "" : String(e), c(this, this._value), this._syncSelected(), this._syncReset();
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
@@ -1949,7 +2403,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
-			[s]: !0,
+			icon: e.getAttribute("icon") || void 0,
+			[l]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -1958,24 +2413,26 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	render() {
 		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("placeholder") || "Select...", s = 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)), o(this, this._value);
-		let d = e.map((e) => {
+		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);
+		let p = e.map((e) => {
 			let t = String(e.value) === String(this._value);
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${M(e.value)}" aria-selected="${t}">${l(e)}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${G(e.value)}" aria-selected="${t}">${f(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-label="${M(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span class="${u ? "" : "search-select-placeholder"}" data-label>${u ? l(u) : c(a)}</span>
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${G(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          ${a ? `<i class="bi bi-${G(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>
           ${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" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${M(s)}" 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">${d}<div class="search-select-empty" hidden>No matches</div></div>
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${G(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">${p}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
-      </div>`, this._rendered = !0, o(this, this._value), this._wire(), this._syncReset();
+      </div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
 	}
 	_refs() {
 		return {
@@ -2001,7 +2458,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 			let t = e.dataset.value === String(this._value);
 			e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
 		}
-		e && (e.innerHTML = t ? l(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
+		e && (e.innerHTML = t ? f(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
 	}
 	_syncReset() {
 		let { reset: e } = this._refs();
@@ -2010,7 +2467,12 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	_wire() {
 		let e = this._refs();
 		if (!e.control || !e.menu) return;
-		let t = () => i(e.control, e.menu, { matchWidth: !0 }), n = (e) => {
+		let t = () => {
+			if (this.hasAttribute("compact")) {
+				let t = e.control.getBoundingClientRect();
+				e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px", i(e.control, e.menu);
+			} else i(e.control, e.menu, { matchWidth: !0 });
+		}, n = (e) => {
 			let t = this._visible();
 			this._active = e;
 			for (let e of this._optionEls()) e.classList.remove("is-active");
@@ -2022,51 +2484,51 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 				e.hidden = !t, t && (r += 1);
 			}
 			e.empty && (e.empty.hidden = r > 0), e.clear && (e.clear.hidden = !n);
-		}, a = () => !e.menu.hidden, o = () => {
+		}, o = () => !e.menu.hidden, s = () => {
 			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")));
-		}, s = () => {
+		}, c = () => {
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
-		}, c = (t) => {
-			this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.control.focus();
 		}, 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] && c(r[this._active])) : t.key === "Escape" && (s(), e.control.focus());
+			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());
 		};
 		e.reset?.addEventListener("click", (t) => {
 			t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
-		}), e.control.addEventListener("click", () => a() ? s() : o()), e.control.addEventListener("keydown", (e) => {
-			if (a()) {
-				l(e);
+		}), e.control.addEventListener("click", () => o() ? c() : s()), e.control.addEventListener("keydown", (e) => {
+			if (o()) {
+				u(e);
 				return;
 			}
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), o());
+			(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 && c(t);
+			t && l(t);
 		}), e.optionsWrap.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && n(this._visible().indexOf(t));
 		}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
 			r(e.search.value), n(-1);
-		}), e.search?.addEventListener("keydown", l), e.clear?.addEventListener("click", () => {
+		}), e.search?.addEventListener("keydown", u), e.clear?.addEventListener("click", () => {
 			e.search.value = "", r(""), e.search.focus();
-		}), e.menu.addEventListener("keydown", l), this._onDocClick = (e) => {
-			a() && !this.contains(e.target) && s();
-		}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
-			a() && t();
+		}), e.menu.addEventListener("keydown", u), this._onDocClick = (e) => {
+			o() && !this.contains(e.target) && c();
+		}, document.addEventListener("click", this._onDocClick), a(this, () => {
+			o() && t();
 		});
 	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick);
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
 	}
-}, M = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), N = "image/png,image/jpeg,image/webp", P = 5, F = {
+}, G = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = "image/png,image/jpeg,image/webp", te = 5, q = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, I = {
+}, J = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -2080,34 +2542,34 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, L = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
-function R(e) {
+}, Y = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+function X(e) {
 	let t = [];
-	for (let n of L(e)) {
-		let e = I[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of Y(e)) {
+		let e = J[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 z(e, t) {
-	let n = L(t);
+function Z(e, t) {
+	let n = Y(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 && (F[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 && (q[e] || []).some((e) => i.endsWith(e)));
 }
-function B(e, t = {}) {
+function ne(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? N : t.accept, r = t.maxSizeMb || 5;
-	return z(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${R(n)} file.`;
+	let n = t.accept === void 0 ? K : t.accept, r = t.maxSizeMb || 5;
+	return Z(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${X(n)} file.`;
 }
 //#endregion
 //#region src/index.js
-var V = (e, t) => {
+var Q = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function H() {
-	V("wui-select", j), V("wui-phone", k), V("wui-datepicker", y), V("wui-autocomplete", u), V("wui-multiselect", b), V("wui-otp", T), V("wui-status-icon", n);
+function $() {
+	Q("wui-select", W), Q("wui-phone", H), Q("wui-datepicker", w), Q("wui-date-range", N), Q("wui-autocomplete", p), Q("wui-multiselect", P), Q("wui-otp", R), Q("wui-status-icon", n);
 }
-H();
+$();
 //#endregion
-export { N as DEFAULT_IMAGE_ACCEPT, P as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, u as WuiAutocomplete, y as WuiDatePicker, b as WuiMultiSelect, T as WuiOtp, k as WuiPhone, j as WuiSelect, n as WuiStatusIcon, R as acceptLabel, H as defineWeborityElements, z as matchesAccept, B as validateFile };
+export { K as DEFAULT_IMAGE_ACCEPT, te as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, N as WuiDateRange, P as WuiMultiSelect, R as WuiOtp, H as WuiPhone, W as WuiSelect, n as WuiStatusIcon, X as acceptLabel, $ as defineWeborityElements, Z as matchesAccept, ne as validateFile };