@webority/ui-elements 0.6.11 → 0.6.13

package/dist/ui-elements.js

@@ -253,26 +253,35 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 }, x = (e) => {
 	let t = b(e);
 	return t ? `${v(t.d)} ${g[t.m].slice(0, 3)} ${t.y}` : "";
-}, S = class extends HTMLElement {
+}, 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;
@@ -280,86 +289,486 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	set value(e) {
 		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 = b(this._value);
-		t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
+		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" : ""}>
+        <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 class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
       </div>`, this._rendered = !0, c(this, this._value), this._wire();
 	}
 	_syncFormValue() {
 		c(this, this._value);
 	}
 	_syncTrigger() {
-		let e = this.querySelector("[data-trigger-label]");
-		if (!e) return;
-		let t = b(this._value);
-		e.textContent = t ? x(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 = b(this._value), i = b(this.getAttribute("min")), a = b(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 = y(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">${g[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">${_.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 = () => {
+		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"), ee = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, O = (e) => {
+	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
+	return t ? {
+		y: +t[1],
+		m: t[2] - 1,
+		d: +t[3]
+	} : null;
+}, k = (e) => {
+	let t = O(e);
+	return t ? `${D(t.d)} ${T[t.m].slice(0, 3)} ${t.y}` : "";
+}, A = (e, t) => new Date(e, t + 1, 0).getDate(), j = (e, t) => {
+	for (; t < 0;) t += 12, --e;
+	for (; t > 11;) t -= 12, e += 1;
+	return {
+		y: e,
+		m: t
+	};
+}, M = 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
+		};
+	}
+	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: `${k(this._start) || "Start"} – ${k(this._end) || "End"}`,
+			empty: !1
+		};
+	}
+	render() {
+		this._start = this.getAttribute("start") || this._start, this._end = this.getAttribute("end") || this._end;
+		let e = O(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 = O(this.getAttribute("min")), t = O(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;
 		};
-		e.addEventListener("click", () => n() ? i() : r()), t.addEventListener("click", (e) => {
+	}
+	_monthHtml(e, t) {
+		let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = A(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 = ee(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 = j(e, t - 1), u = A(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 = j(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 = j(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 ? `${k(this._start)} – ${k(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 = O(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 = j(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();
+			r() && e.key === "Escape" && this._close();
 		}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
-			n() && this._position(e, t);
-		}), this._syncFormValue();
+			r() && this._position(e, t);
+		}), this._syncMirrors();
 	}
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
 	}
-}, C = class extends HTMLElement {
+}, N = class extends HTMLElement {
 	_accessibleName() {
 		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
 	}
@@ -429,13 +838,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		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="${w(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
-          ${n ? `<i class="bi bi-${w(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-label="${P(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          ${n ? `<i class="bi bi-${P(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="${w(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="${P(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>
@@ -449,7 +858,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			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="${w(e)}" aria-label="Remove"><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="${P(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]");
@@ -473,9 +882,9 @@ 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) => T(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
+		r && (i = i.filter((e) => te(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="${w(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>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${P(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() {
@@ -537,7 +946,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), this._ro?.disconnect(), this._ro = null;
 	}
-}, w = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), T = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), E = /[^0-9]/g, D = /[^0-9a-zA-Z]/g, O = class extends HTMLElement {
+}, P = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), te = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ne = /[^0-9]/g, re = /[^0-9a-zA-Z]/g, F = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -567,7 +976,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" ? D : E, "").slice(0, this.length);
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? re : ne, "").slice(0, this.length);
 	}
 	connectedCallback() {
 		this._rendered || this.render();
@@ -633,7 +1042,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 			document.activeElement === e && this._paint();
 		});
 	}
-}, k = [
+}, I = [
 	[
 		"AF",
 		"Afghanistan",
@@ -1859,11 +2268,67 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], A = (e) => (k.find((t) => t[0] === e) || [
+], L = (e) => (I.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], j = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, M = class extends HTMLElement {
+])[2], R = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, z = null, B = null;
+function ie() {
+	return z ? Promise.resolve(z) : (B ||= Promise.all([import("./libphonenumber-js-BcNT8oq0.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (z = {
+		AsYouType: e.AsYouType,
+		getExampleNumber: e.getExampleNumber,
+		isValidPhoneNumber: e.isValidPhoneNumber,
+		examples: t.default || t
+	}, z)).catch(() => null), B);
+}
+function V(e, t) {
+	if (!z || !t) return t;
+	try {
+		return new z.AsYouType(e).input(t);
+	} catch {
+		return t;
+	}
+}
+function H(e) {
+	if (!z) return null;
+	try {
+		return z.getExampleNumber(e, z.examples)?.formatNational() || null;
+	} catch {
+		return null;
+	}
+}
+function U(e) {
+	if (!z || !e) return null;
+	try {
+		return z.isValidPhoneNumber(e);
+	} catch {
+		return null;
+	}
+}
+function ae(e) {
+	if (!z) return null;
+	try {
+		let t = z.getExampleNumber(e, z.examples);
+		return t?.nationalNumber ? t.nationalNumber.length : null;
+	} catch {
+		return null;
+	}
+}
+function oe(e) {
+	if (!z || !e?.trim().startsWith("+")) return null;
+	try {
+		let t = new z.AsYouType();
+		t.input(e.trim());
+		let n = t.getCountry();
+		return n ? {
+			country: n,
+			national: t.getNationalNumber() || ""
+		} : null;
+	} catch {
+		return null;
+	}
+}
+var W = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -1882,7 +2347,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
 	}
 	get value() {
-		return `+${A(this._country)}${this._national}`;
+		return `+${L(this._country)}${this._national}`;
 	}
 	set value(e) {
 		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
@@ -1891,64 +2356,88 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		c(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 	}
 	render() {
-		let e = this.getAttribute("placeholder") || "Enter phone number";
+		let e = this.getAttribute("placeholder") || H(this._country) || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
-		let t = k.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${j(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		let t = I.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${R(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="${j(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${R(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>+${A(this._country)}</span>
+            <span class="phone-dial" data-dial>+${L(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="${N(e)}" value="${N(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
-      </div>`, this._rendered = !0, c(this, this.value), this._wire();
+        <input type="tel" class="input" placeholder="${G(e)}" value="${G(V(this._country, this._national))}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+      </div>
+      <div class="field-error" data-phone-error hidden></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]"), 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));
-			t.style.top = `${Math.max(8, o)}px`, t.style.left = `${s}px`;
-		}, d = () => {
-			t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", p(""), u(), n.focus();
+		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]"), l = this.querySelector("[data-dial]");
+		if (!e || !n) return;
+		let u = () => !n.hidden, d = () => {
+			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`;
 		}, f = () => {
-			t.hidden = !0, e.setAttribute("aria-expanded", "false");
+			n.hidden = !1, e.setAttribute("aria-expanded", "true"), r.value = "", m(""), d(), r.focus();
+		}, p = () => {
+			n.hidden = !0, e.setAttribute("aria-expanded", "false");
 		};
 		this._reposition = () => {
-			l() && u();
+			u() && d();
 		}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
-		let p = (e) => {
+		let m = (e) => {
 			let t = e.trim().toLowerCase(), n = 0;
-			for (let e of r.querySelectorAll(".country-dropdown-item")) {
+			for (let e of i.querySelectorAll(".country-dropdown-item")) {
 				let r = !t || e.textContent.toLowerCase().includes(t);
 				e.hidden = !r, r && (n += 1);
 			}
-			i && (i.hidden = n > 0);
-		}, m = (e) => {
-			this._country = e, this.setAttribute("country", e), o && (o.className = j(e)), s && (s.textContent = `+${A(e)}`);
-			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
-			f(), this._commit();
+			a && (a.hidden = n > 0);
+		}, h = (e) => {
+			this._country = e, this.setAttribute("country", e), s && (s.className = R(e)), l && (l.textContent = `+${L(e)}`);
+			for (let t of i.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
+			p(), this._commit();
 		};
-		e.addEventListener("click", () => l() ? f() : d()), n.addEventListener("input", () => p(n.value)), r.addEventListener("click", (e) => {
+		e.addEventListener("click", () => u() ? p() : f()), r.addEventListener("input", () => m(r.value)), i.addEventListener("click", (e) => {
 			let t = e.target.closest(".country-dropdown-item");
-			t && m(t.dataset.iso);
-		}), a.addEventListener("input", () => {
-			this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
+			t && h(t.dataset.iso);
+		});
+		let g = this.querySelector("[data-phone-error]"), _ = (e) => {
+			if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), g) {
+				if (e) {
+					let e = H(this._country);
+					g.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
+				}
+				g.hidden = !e;
+			}
+		};
+		o.addEventListener("input", () => {
+			let e = o.value.replace(/[^0-9]/g, ""), t = ae(this._country);
+			t && e.length > t && (e = e.slice(0, t)), this._national = e;
+			let n = V(this._country, this._national);
+			o.value !== n && (o.value = n), this._commit(), o.classList.contains("is-invalid") && (!this._national || U(this.value) === !0) && _(!1);
+		}), o.addEventListener("blur", () => {
+			_(this._national.length > 0 && U(this.value) === !1);
+		}), o.addEventListener("paste", (e) => {
+			let t = oe(e.clipboardData?.getData("text"));
+			t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = V(this._country, this._national) : this.setAttribute("country", t.country), this._commit(), this.querySelector("input[type=tel]")?.focus());
 		}), this._onDocClick = (e) => {
-			l() && !this.contains(e.target) && f();
-		}, document.addEventListener("click", this._onDocClick), c(this, this.value);
+			u() && !this.contains(e.target) && p();
+		}, document.addEventListener("click", this._onDocClick), ie().then((e) => {
+			if (!(!e || !o) && (this._national && (o.value = V(this._country, this._national)), !this.getAttribute("placeholder"))) {
+				let e = H(this._country);
+				e && (o.placeholder = e);
+			}
+		}), 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);
 	}
-}, N = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), P = class extends HTMLElement {
+}, G = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), K = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -2008,19 +2497,19 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 		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="${F(e.value)}" aria-selected="${t}">${f(e)}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${q(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="${F(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          ${a ? `<i class="bi bi-${F(a)} search-select-icon" aria-hidden="true"></i>` : ""}
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${q(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          ${a ? `<i class="bi bi-${q(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="${F(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>` : ""}
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${q(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, c(this, this._value), this._wire(), this._syncReset();
@@ -2112,14 +2601,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
 	}
-}, F = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), I = "image/png,image/jpeg,image/webp", L = 5, R = {
+}, q = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), J = "image/png,image/jpeg,image/webp", se = 5, ce = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, z = {
+}, le = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -2133,34 +2622,34 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, B = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
-function V(e) {
+}, Y = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+function X(e) {
 	let t = [];
-	for (let n of B(e)) {
-		let e = z[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of Y(e)) {
+		let e = le[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 H(e, t) {
-	let n = B(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 && (R[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 && (ce[e] || []).some((e) => i.endsWith(e)));
 }
-function U(e, t = {}) {
+function ue(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? I : t.accept, r = t.maxSizeMb || 5;
-	return H(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${V(n)} file.`;
+	let n = t.accept === void 0 ? J : 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 W = (e, t) => {
+var Q = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function G() {
-	W("wui-select", P), W("wui-phone", M), W("wui-datepicker", S), W("wui-autocomplete", p), W("wui-multiselect", C), W("wui-otp", O), W("wui-status-icon", n);
+function $() {
+	Q("wui-select", K), Q("wui-phone", W), Q("wui-datepicker", w), Q("wui-date-range", M), Q("wui-autocomplete", p), Q("wui-multiselect", N), Q("wui-otp", F), Q("wui-status-icon", n);
 }
-G();
+$();
 //#endregion
-export { I as DEFAULT_IMAGE_ACCEPT, L as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, S as WuiDatePicker, C as WuiMultiSelect, O as WuiOtp, M as WuiPhone, P as WuiSelect, n as WuiStatusIcon, V as acceptLabel, G as defineWeborityElements, H as matchesAccept, U as validateFile };
+export { J as DEFAULT_IMAGE_ACCEPT, se as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, M as WuiDateRange, N as WuiMultiSelect, F as WuiOtp, W as WuiPhone, K as WuiSelect, n as WuiStatusIcon, X as acceptLabel, $ as defineWeborityElements, Z as matchesAccept, ue as validateFile };