@webority/ui-elements 0.34.0 → 0.35.0

package/dist/WuiDatePicker-DkNbc-z7.js

@@ -0,0 +1,325 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t, r as n, t as r } from "./anchorOverlay-DluGZ8ef.js";
+import { t as i } from "./formMirror-jGf5M4gk.js";
+import { t as a } from "./iconGlyphs.g-Cpg1BUHm.js";
+import { n as o } from "./optionLabel-Dn-I7zyp.js";
+import { a as s, i as c, n as l, o as u, r as d, s as f, t as p } from "./calendarMath-BAF2Jkg_.js";
+//#region src/WuiDatePicker.js
+var m = class extends e {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"value",
+			"min",
+			"max",
+			"placeholder",
+			"disabled",
+			"first-day",
+			"size",
+			"aria-label",
+			"aria-describedby",
+			"aria-invalid"
+		];
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._value = "";
+		let e = new Date(2e3, 0, 1);
+		this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "aria-invalid") {
+			this._syncInvalid();
+			return;
+		}
+		this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
+	}
+	_syncInvalid() {
+		let e = this.querySelector(".datepicker-trigger");
+		e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
+	}
+	formResetCallback() {
+		this.value = this._defaultValue || "";
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		this._value = e || "", i(this, this._value), this._syncTrigger();
+	}
+	_firstDay() {
+		let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
+		return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
+	}
+	render() {
+		this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = u(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" : "", c = this.getAttribute("aria-label"), l = this.getAttribute("aria-describedby");
+		this.innerHTML = `
+      <div class="datepicker">
+        <button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${c ? ` aria-label="${o(c)}"` : ""}${l ? ` aria-describedby="${o(l)}"` : ""}>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? s(this._value) : o(e)}</span>
+          ${a("calendar-dots")}
+        </button>
+        <div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
+      </div>`, this._rendered = !0, i(this, this._value), this._wire();
+	}
+	_syncFormValue() {
+		i(this, this._value);
+	}
+	_syncTrigger() {
+		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
+		if (!t) return;
+		let n = u(this._value);
+		t.textContent = n ? s(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
+	}
+	_limits() {
+		let e = u(this.getAttribute("min")), t = u(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, c(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 = c(this._viewY, this._viewM), r = u(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: o } = this._limits(), s = this._focus || r || {
+			y: this._viewY,
+			m: this._viewM,
+			d: 1
+		}, m = (e, t, n, a) => {
+			let c = f(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 = s.y === e && s.m === t && s.d === n, p = o(e, t, n);
+			return `<button type="button" class="${[
+				"datepicker-day",
+				a ? "is-outside" : "",
+				u ? "is-today" : "",
+				l ? "is-selected" : ""
+			].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !p ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${p ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
+		}, h = "", g = d(this._viewY, this._viewM - 1), _ = c(g.y, g.m);
+		for (let e = t - 1; e >= 0; e--) h += m(g.y, g.m, _ - e, !0);
+		for (let e = 1; e <= n; e++) h += m(this._viewY, this._viewM, e, !1);
+		let v = d(this._viewY, this._viewM + 1), y = (7 - (t + n) % 7) % 7;
+		for (let e = 1; e <= y; e++) h += m(v.y, v.m, e, !0);
+		let b = o(i.getFullYear(), i.getMonth(), i.getDate()), x = l.map((t, n) => l[(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">${a("chevron-left")}</button>
+        <button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${p[this._viewM]} ${this._viewY}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${a("chevron-right")}</button>
+      </div>
+      <div class="datepicker-weekdays">${x}</div>
+      <div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${h}</div>
+      <div class="datepicker-foot">
+        <button type="button" class="datepicker-link" data-today${b ? " disabled" : ""}>Today</button>
+        <button type="button" class="datepicker-link" data-clear>Clear</button>
+      </div>`;
+	}
+	_monthsHtml() {
+		let e = u(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" : ""}>${p[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">${a("chevron-left")}</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">${a("chevron-right")}</button>
+      </div>
+      <div class="datepicker-cells">${r}</div>`;
+	}
+	_yearsHtml() {
+		let e = u(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">${a("chevron-left")}</button>
+        <span class="datepicker-month">${r + 1} to ${r + 10}</span>
+        <button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${a("chevron-right")}</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) {
+		r(e, t, { clampHeight: !0 });
+	}
+	_setFocus(e, t, n, r) {
+		let { y: i, m: a } = d(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="${f(i, a, n)}"]`)?.focus();
+	}
+	_onKey(e) {
+		if (this._mode !== "days") {
+			e.key === "Escape" && this._close();
+			return;
+		}
+		let t = this._focus || u(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 = d(t.y, t.m - (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, c(n.y, n.m)), "slide-prev");
+			}
+			case "PageDown": {
+				e.preventDefault();
+				let n = d(t.y, t.m + (e.shiftKey ? 12 : 1));
+				return this._setFocus(n.y, n.m, Math.min(t.d, c(n.y, n.m)), "slide-next");
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = f(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
+				return;
+			case "Escape": return this._close();
+			default:
+		}
+	}
+	_wire() {
+		this._teardown();
+		let e = this.querySelector(".datepicker-trigger"), r = this.querySelector(".datepicker-pop"), i = this.querySelector(".datepicker");
+		if (!e || !r) return;
+		let a = () => !r.hidden, o = () => {
+			a() && this._position(e, r);
+		};
+		this._open = () => {
+			let n = /* @__PURE__ */ new Date(), a = u(this._value);
+			(a || !this._viewNavigated) && (this._viewY = n.getFullYear(), this._viewM = n.getMonth()), this._mode = "days";
+			let s = n.getFullYear() === this._viewY && n.getMonth() === this._viewM, c = a && a.y === this._viewY && a.m === this._viewM;
+			this._focus = c ? a : {
+				y: this._viewY,
+				m: this._viewM,
+				d: s ? n.getDate() : 1
+			}, this._renderView(), r.hidden = !1, i?.classList.add("open"), this._position(e, r), t(this, o), e.setAttribute("aria-expanded", "true"), r.querySelector("[tabindex=\"0\"]")?.focus();
+		}, this._close = () => {
+			r.hidden = !0, i?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), n(this), e.focus();
+		}, e.addEventListener("click", () => a() ? this._close() : this._open()), r.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 = d(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();
+				if (this._limits().dayDisabled(e.getFullYear(), e.getMonth(), e.getDate())) return;
+				this.value = f(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				return;
+			}
+			if (e.target.closest("[data-clear]")) {
+				this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+				return;
+			}
+			let s = e.target.closest(".datepicker-day[data-iso]");
+			s && !s.disabled && (this.value = s.dataset.iso, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
+		}), this._onKeyBound = (e) => {
+			a() && this._onKey(e);
+		}, r.addEventListener("keydown", this._onKeyBound), this._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				let t = this._popClick;
+				this._popClick = !1, a() && !t && !this.contains(e.target) && this._close();
+			}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
+				a() && e.key === "Escape" && this._close();
+			}, document.addEventListener("keydown", this._onDocKey), a() && t(this, o);
+		}, this._bindGlobal(), this._syncFormValue();
+	}
+	_teardown() {
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), n(this);
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+};
+//#endregion
+export { m as t };

package/dist/WuiDateRange-BocnVO6L.js

@@ -0,0 +1,233 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+import { n as t, r as n, t as r } from "./anchorOverlay-DluGZ8ef.js";
+import { t as i } from "./iconGlyphs.g-Cpg1BUHm.js";
+import { n as a } from "./optionLabel-Dn-I7zyp.js";
+import { a as o, i as s, n as c, o as l, r as u, s as d, t as f } from "./calendarMath-BAF2Jkg_.js";
+//#region src/WuiDateRange.js
+var p = class extends e {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"start",
+			"end",
+			"min",
+			"max",
+			"placeholder",
+			"disabled",
+			"first-day",
+			"size",
+			"aria-label",
+			"aria-describedby",
+			"name",
+			"start-name",
+			"end-name",
+			"aria-invalid"
+		];
+	}
+	constructor() {
+		super();
+		try {
+			this._internals = this.attachInternals();
+		} catch {
+			this._internals = null;
+		}
+		this._start = "", this._end = "", this._hover = "";
+		let e = new Date(2e3, 0, 1);
+		this._viewY = e.getFullYear(), this._viewM = e.getMonth();
+	}
+	connectedCallback() {
+		if (!this._rendered) {
+			this.render();
+			return;
+		}
+		this._bindGlobal?.();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (e === "aria-invalid") {
+			this._syncInvalid();
+			return;
+		}
+		this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
+	}
+	_syncInvalid() {
+		let e = this.querySelector(".daterange-trigger");
+		e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
+	}
+	get value() {
+		return {
+			start: this._start,
+			end: this._end
+		};
+	}
+	set value(e) {
+		this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors();
+	}
+	_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 to End";
+		return !this._start && !this._end ? {
+			text: e,
+			empty: !0
+		} : {
+			text: `${o(this._start) || "Start"} to ${o(this._end) || "End"}`,
+			empty: !1
+		};
+	}
+	render() {
+		this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || "", this._start = this._defaultStart || this._start, this._end = this._defaultEnd || this._end);
+		let e = l(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: o } = this._label(), s = this.getAttribute("aria-label"), c = this.getAttribute("aria-describedby");
+		this.innerHTML = `
+      <div class="daterange">
+        <button type="button" class="input daterange-trigger${n}${o ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${s ? ` aria-label="${a(s)}"` : ""}${c ? ` aria-describedby="${a(c)}"` : ""}>
+          <span data-range-label class="${o ? "search-select-placeholder" : ""}">${a(r)}</span>
+          ${i("calendar")}
+        </button>
+        <div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
+      </div>`, this._rendered = !0, this._syncMirrors(), this._wire();
+	}
+	formResetCallback() {
+		this.value = {
+			start: this._defaultStart || "",
+			end: this._defaultEnd || ""
+		};
+	}
+	_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 || "", r.disabled = this.hasAttribute("disabled");
+	}
+	_limits() {
+		let e = l(this.getAttribute("min")), t = l(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 = s(e, t), a = this._limits(), o = c.map((e, t) => c[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), l = (e, t, n, r) => {
+			let i = d(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>`;
+		}, p = "", m = u(e, t - 1), h = s(m.y, m.m);
+		for (let e = r - 1; e >= 0; e--) p += l(m.y, m.m, h - e, !0);
+		for (let n = 1; n <= i; n++) p += l(e, t, n, !1);
+		let g = u(e, t + 1), _ = (7 - (r + i) % 7) % 7;
+		for (let e = 1; e <= _; e++) p += l(g.y, g.m, e, !0);
+		return `
+      <div class="daterange-cal">
+        <div class="datepicker-month-label">${f[t]} ${e}</div>
+        <div class="datepicker-weekdays">${o}</div>
+        <div class="datepicker-grid" role="grid">${p}</div>
+      </div>`;
+	}
+	_renderView() {
+		let e = this.querySelector(".daterange-pop");
+		if (!e) return;
+		let t = u(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("chevron-left")}</button>
+        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${i("chevron-right")}</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 ? `${o(this._start)} to ${o(this._end)}` : "Pick an end date" : "Pick a start date");
+	}
+	_position(e, t) {
+		r(e, t, { clampHeight: !0 });
+	}
+	_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._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+			return;
+		}
+		this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
+	}
+	_wire() {
+		this._teardown();
+		let e = this.querySelector(".daterange-trigger"), r = this.querySelector(".daterange-pop"), i = this.querySelector(".daterange");
+		if (!e || !r) return;
+		let a = () => !r.hidden, o = () => {
+			a() && this._position(e, r);
+		};
+		this._open = () => {
+			let n = l(this._start);
+			if (n) this._viewY = n.y, this._viewM = n.m;
+			else {
+				let e = /* @__PURE__ */ new Date();
+				this._viewY = e.getFullYear(), this._viewM = e.getMonth();
+			}
+			this._renderView(), r.hidden = !1, i?.classList.add("open"), this._position(e, r), t(this, o), e.setAttribute("aria-expanded", "true");
+		}, this._close = () => {
+			r.hidden = !0, this._hover = "", i?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), n(this);
+		}, e.addEventListener("click", () => a() ? this._close() : this._open()), r.addEventListener("click", (e) => {
+			this._popClick = !0;
+			let t = e.target.closest("[data-nav]");
+			if (t) {
+				let e = u(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._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._pick(n.dataset.iso);
+		}), r.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._bindGlobal = () => {
+			this._teardown(), this._onDocClick = (e) => {
+				let t = this._popClick;
+				this._popClick = !1, a() && !t && !this.contains(e.target) && this._close();
+			}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
+				a() && e.key === "Escape" && this._close();
+			}, document.addEventListener("keydown", this._onDocKey), a() && t(this, o);
+		}, this._bindGlobal(), this._syncMirrors();
+	}
+	_teardown() {
+		this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), n(this);
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+};
+//#endregion
+export { p as t };

package/dist/WuiDock-BSDY9g8Q.js

@@ -0,0 +1,57 @@
+import { t as e } from "./elementBase-Bg1xpvup.js";
+//#region src/WuiDock.js
+var t = class extends e {
+	static get observedAttributes() {
+		return [
+			"static",
+			"max-scale",
+			"radius"
+		];
+	}
+	constructor() {
+		super(), this._pointerMoveListener = null, this._pointerLeaveListener = null, this._frame = 0, this._pointerX = 0;
+	}
+	connectedCallback() {
+		this._wire();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	attributeChangedCallback(e, t, n) {
+		e === "static" && this.isConnected && this._wire();
+	}
+	_maxScale() {
+		return n(this.getAttribute("max-scale"), 1.6);
+	}
+	_radius() {
+		return n(this.getAttribute("radius"), 100);
+	}
+	_magnifyEnabled() {
+		return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
+	}
+	_applyMagnification() {
+		this._frame = 0;
+		let e = this._maxScale(), t = this._radius();
+		for (let n of this.querySelectorAll(".dock-item")) {
+			let r = n.getBoundingClientRect(), i = Math.abs(this._pointerX - (r.left + r.width / 2)), a = Math.max(0, 1 - i / t), o = 1 + (e - 1) * a;
+			n.style.setProperty("--wui-dock-mag", o.toFixed(3));
+		}
+	}
+	_resetMagnification() {
+		this._frame &&= (cancelAnimationFrame(this._frame), 0);
+		for (let e of this.querySelectorAll(".dock-item")) e.style.removeProperty("--wui-dock-mag");
+	}
+	_wire() {
+		this._teardown(), this._magnifyEnabled() && (this._pointerMoveListener = (e) => {
+			this._pointerX = e.clientX, this._frame ||= requestAnimationFrame(() => this._applyMagnification());
+		}, this._pointerLeaveListener = () => this._resetMagnification(), this.addEventListener("pointermove", this._pointerMoveListener), this.addEventListener("pointerleave", this._pointerLeaveListener));
+	}
+	_teardown() {
+		this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
+	}
+}, n = (e, t) => {
+	let n = Number.parseFloat(e);
+	return Number.isFinite(n) ? n : t;
+};
+//#endregion
+export { t };