@stimulus-plumbers/controllers 0.3.3 → 0.4.1

package/dist/stimulus-plumbers-controllers.es.js

@@ -33,7 +33,7 @@ var a = class {
 		if (!this.isActive) return;
 		this.isActive = !1, this.container.removeEventListener("keydown", this.handleKeyDown);
 		let e = this.options.returnFocus || this.previouslyFocused;
-		e && r(e) && e.focus();
+		e && r(e) && e.focus(), typeof this.options.onDeactivate == "function" && this.options.onDeactivate();
 	}
 	handleKeyDown = (e) => {
 		if (e.key === "Escape" && this.options.escapeDeactivates) {
@@ -46,26 +46,16 @@ var a = class {
 		let r = t[0], i = t[t.length - 1];
 		e.shiftKey && document.activeElement === r ? (e.preventDefault(), i.focus()) : !e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus());
 	};
-}, o = class {
-	constructor() {
-		this.savedElement = null;
-	}
-	save() {
-		this.savedElement = document.activeElement;
-	}
-	restore() {
-		this.savedElement && r(this.savedElement) && (this.savedElement.focus(), this.savedElement = null);
-	}
 };
 //#endregion
 //#region src/accessibility/keyboard.js
-function s(e, t) {
+function o(e, t) {
 	return e.key === t;
 }
-function c(e) {
+function s(e) {
 	return e.key === "Enter" || e.key === " ";
 }
-function l(e) {
+function c(e) {
 	return [
 		"ArrowUp",
 		"ArrowDown",
@@ -73,60 +63,135 @@ function l(e) {
 		"ArrowRight"
 	].includes(e.key);
 }
-function u(e) {
+function l(e) {
 	e.preventDefault(), e.stopPropagation();
 }
-var d = class {
-	constructor(e, t = 0) {
-		this.items = e, this.currentIndex = t, this.updateTabIndex();
+var u = class {
+	constructor(e, t = {}) {
+		this.items = Array.from(e), this.currentIndex = t.initialIndex ?? 0, this.orientation = t.orientation ?? "both", this.wrap = t.wrap ?? !0, this._handleKeyDown = this._handleKeyDown.bind(this), this._handleClick = this._handleClick.bind(this);
 	}
-	handleKeyDown(e) {
-		let t;
+	activate() {
+		return this.updateTabIndex(), this.items.forEach((e) => {
+			e.addEventListener("keydown", this._handleKeyDown), e.addEventListener("click", this._handleClick);
+		}), this;
+	}
+	deactivate() {
+		this.items.forEach((e) => {
+			e.removeEventListener("keydown", this._handleKeyDown), e.removeEventListener("click", this._handleClick);
+		});
+	}
+	updateItems(e) {
+		this.deactivate(), this.items = Array.from(e), this.currentIndex = Math.min(this.currentIndex, Math.max(0, this.items.length - 1)), this.activate();
+	}
+	setCurrentIndex(e) {
+		e >= 0 && e < this.items.length && (this.currentIndex = e, this.updateTabIndex(), this.items[e].focus());
+	}
+	updateTabIndex() {
+		this.items.forEach((e, t) => {
+			e.tabIndex = t === this.currentIndex ? 0 : -1;
+		});
+	}
+	_handleClick(e) {
+		let t = this.items.indexOf(e.currentTarget);
+		t !== -1 && (this.currentIndex = t, this.updateTabIndex());
+	}
+	_handleKeyDown(e) {
+		let t = this.items.indexOf(e.currentTarget);
+		t !== -1 && t !== this.currentIndex && (this.currentIndex = t, this.updateTabIndex());
+		let n = this.orientation === "horizontal" ? [] : ["ArrowUp", "ArrowDown"], r = this.orientation === "vertical" ? [] : ["ArrowLeft", "ArrowRight"];
+		if (![
+			...n,
+			...r,
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let i = t === -1 ? this.currentIndex : t, a;
 		switch (e.key) {
 			case "ArrowDown":
 			case "ArrowRight":
-				e.preventDefault(), t = (this.currentIndex + 1) % this.items.length;
+				a = this.wrap ? (i + 1) % this.items.length : Math.min(i + 1, this.items.length - 1);
 				break;
 			case "ArrowUp":
 			case "ArrowLeft":
-				e.preventDefault(), t = this.currentIndex === 0 ? this.items.length - 1 : this.currentIndex - 1;
+				a = this.wrap ? (i - 1 + this.items.length) % this.items.length : Math.max(i - 1, 0);
 				break;
 			case "Home":
-				e.preventDefault(), t = 0;
+				a = 0;
 				break;
 			case "End":
-				e.preventDefault(), t = this.items.length - 1;
+				a = this.items.length - 1;
 				break;
-			default: return;
 		}
-		this.setCurrentIndex(t);
+		this.setCurrentIndex(a);
 	}
-	setCurrentIndex(e) {
-		e >= 0 && e < this.items.length && (this.currentIndex = e, this.updateTabIndex(), this.items[e].focus());
+}, d = class {
+	constructor(e, t = {}) {
+		this.listbox = e, this.itemSelector = t.itemSelector ?? "[role=\"option\"]:not([aria-disabled=\"true\"]):not([hidden])", this.wrap = t.wrap ?? !1, this.orientation = t.orientation ?? "vertical";
 	}
-	updateTabIndex() {
-		this.items.forEach((e, t) => {
-			e.tabIndex = t === this.currentIndex ? 0 : -1;
-		});
+	get selectedItem() {
+		return this.listbox.querySelector(`${this.itemSelector}[aria-selected="true"]`) ?? null;
 	}
-	updateItems(e) {
-		this.items = e, this.currentIndex = Math.min(this.currentIndex, e.length - 1), this.updateTabIndex();
+	get currentIndex() {
+		return Array.from(this.listbox.querySelectorAll(this.itemSelector)).indexOf(this.selectedItem);
+	}
+	_selectItem(e) {
+		Array.from(this.listbox.querySelectorAll(this.itemSelector)).forEach((e) => e.setAttribute("aria-selected", "false")), e.setAttribute("aria-selected", "true"), e.scrollIntoView({ block: "nearest" });
+	}
+	step(e) {
+		let t = Array.from(this.listbox.querySelectorAll(this.itemSelector));
+		if (!t.length) return;
+		let n = this.listbox.querySelector(`${this.itemSelector}[aria-selected="true"]`), r = t.indexOf(n), i;
+		i = e > 0 ? this.wrap ? t[(r + 1) % t.length] : t[Math.min(r + 1, t.length - 1)] : this.wrap ? t[(r - 1 + t.length) % t.length] : t[Math.max(r - 1, 0)], !(!i || i === n) && this._selectItem(i);
+	}
+	handleKeyDown(e) {
+		let t = this.orientation === "horizontal" ? [] : ["ArrowUp", "ArrowDown"], n = this.orientation === "vertical" ? [] : ["ArrowLeft", "ArrowRight"];
+		if (![
+			...t,
+			...n,
+			"Home",
+			"End",
+			"Enter",
+			" "
+		].includes(e.key)) return;
+		e.preventDefault();
+		let r = Array.from(this.listbox.querySelectorAll(this.itemSelector));
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				this.step(1);
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				this.step(-1);
+				break;
+			case "Home":
+				r.length && this._selectItem(r[0]);
+				break;
+			case "End":
+				r.length && this._selectItem(r[r.length - 1]);
+				break;
+			case "Enter":
+			case " ":
+				this.listbox.querySelector(`${this.itemSelector}[aria-selected="true"]`)?.click();
+				break;
+		}
 	}
-}, f = (e, t, n) => {
+}, ee = (e, t, n) => {
 	let r = document.querySelector(`[data-live-region="${e}"]`);
 	return r || (r = document.createElement("div"), r.className = "sr-only", r.dataset.liveRegion = e, r.setAttribute("aria-live", e), r.setAttribute("aria-atomic", t.toString()), r.setAttribute("aria-relevant", n), document.body.appendChild(r)), r;
 };
-function p(e, t = {}) {
-	let { politeness: n = "polite", atomic: r = !0, relevant: i = "additions text" } = t, a = f(n, r, i);
+function f(e, t = {}) {
+	let { politeness: n = "polite", atomic: r = !0, relevant: i = "additions text" } = t, a = ee(n, r, i);
 	a.textContent = "", setTimeout(() => {
 		a.textContent = e;
 	}, 100);
 }
-var m = (e = "a11y") => `${e}-${Math.random().toString(36).substr(2, 9)}`, h = (e, t = "element") => e.id ||= m(t), g = (e, t, n) => {
+var p = (e = "a11y") => `${e}-${Math.random().toString(36).substr(2, 9)}`, m = (e, t = "element") => e.id ||= p(t), h = (e, t, n) => {
 	e.setAttribute(t, n.toString());
-}, ee = (e, t) => g(e, "aria-expanded", t), _ = (e, t) => g(e, "aria-pressed", t), v = (e, t) => g(e, "aria-checked", t);
-function te(e, t) {
-	g(e, "aria-disabled", t), t ? e.setAttribute("tabindex", "-1") : e.removeAttribute("tabindex");
+}, g = (e, t) => h(e, "aria-expanded", t), _ = (e, t) => h(e, "aria-pressed", t), te = (e, t) => h(e, "aria-checked", t), v = (e, t) => t ? e.setAttribute("hidden", "") : e.removeAttribute("hidden");
+function ne(e, t) {
+	h(e, "aria-disabled", t), t ? e.setAttribute("tabindex", "-1") : e.removeAttribute("tabindex");
 }
 var y = {
 	menu: "menu",
@@ -157,7 +222,7 @@ var C = (e, t) => {
 		e.hasAttribute(t) && e.removeAttribute(t);
 	});
 };
-function ne({ trigger: e, target: t, attributes: n = null }) {
+function re({ trigger: e, target: t, attributes: n = null }) {
 	!e || !t || (C(e, n || [
 		"aria-controls",
 		"aria-haspopup",
@@ -193,28 +258,28 @@ function T(e, t) {
 	for (let r = 0; r < t.length && n < e.length; r++) t[r] === e[n] && n++;
 	return n === e.length;
 }
-function re(e, t) {
+function ie(e, t) {
 	return t.includes(e);
 }
-function ie(e, t) {
+function ae(e, t) {
 	return t.startsWith(e);
 }
-function ae(e) {
-	return e === "contains" ? re : e === "prefix" ? ie : T;
+function oe(e) {
+	return e === "contains" ? ie : e === "prefix" ? ae : T;
 }
-function oe(e, t) {
+function se(e, t) {
 	return t === "textContent" ? e.textContent?.trim().toLowerCase() ?? "" : (e.getAttribute(t) ?? "").toLowerCase();
 }
 function E(e, t, n = {}) {
-	let { strategy: r = "fuzzy", matcher: i, fields: a = ["textContent"] } = n, o = typeof i == "function" ? i : ae(r), s = t.toLowerCase(), c = 0;
+	let { strategy: r = "fuzzy", matcher: i, fields: a = ["textContent"] } = n, o = typeof i == "function" ? i : oe(r), s = t.toLowerCase(), c = 0;
 	return e.querySelectorAll("[role=\"option\"]").forEach((e) => {
-		let t = a.some((t) => o(s, oe(e, t)));
+		let t = a.some((t) => o(s, se(e, t)));
 		e.hidden = !t, t && c++;
 	}), c;
 }
 //#endregion
 //#region src/plumbers/plumber/geometry.js
-var D = {
+var ce = {
 	get top() {
 		return "bottom";
 	},
@@ -228,7 +293,7 @@ var D = {
 		return "left";
 	}
 };
-function O({ x: e, y: t, width: n, height: r }) {
+function D({ x: e, y: t, width: n, height: r }) {
 	return {
 		x: e,
 		y: t,
@@ -240,39 +305,39 @@ function O({ x: e, y: t, width: n, height: r }) {
 		bottom: t + r
 	};
 }
-function k() {
-	return O({
+function O() {
+	return D({
 		x: 0,
 		y: 0,
 		width: window.innerWidth || document.documentElement.clientWidth,
 		height: window.innerHeight || document.documentElement.clientHeight
 	});
 }
-function se(e) {
+function le(e) {
 	if (!(e instanceof HTMLElement)) return !1;
-	let t = k(), n = e.getBoundingClientRect(), r = n.top <= t.height && n.top + n.height > 0, i = n.left <= t.width && n.left + n.width > 0;
+	let t = O(), n = e.getBoundingClientRect(), r = n.top <= t.height && n.top + n.height > 0, i = n.left <= t.width && n.left + n.width > 0;
 	return r && i;
 }
 //#endregion
 //#region src/plumbers/plumber/config.js
-var A = {
+var k = {
 	get visibleOnly() {
 		return !0;
 	},
 	hiddenClass: null
-}, ce = {
+}, ue = {
 	element: null,
 	visible: null,
 	dispatch: !0,
 	prefix: ""
-}, j = class {
+}, A = class {
 	constructor(e, t = {}) {
 		this.controller = e;
-		let { element: n, visible: r, dispatch: i, prefix: a } = Object.assign({}, ce, t);
-		this.element = n || e.element, this.visibleOnly = typeof r == "boolean" ? r : A.visibleOnly, this.visibleCallback = typeof r == "string" ? r : null, this.notify = !!i, this.prefix = typeof a == "string" && a ? a : e.identifier;
+		let { element: n, visible: r, dispatch: i, prefix: a } = Object.assign({}, ue, t);
+		this.element = n || e.element, this.visibleOnly = typeof r == "boolean" ? r : k.visibleOnly, this.visibleCallback = typeof r == "string" ? r : null, this.notify = !!i, this.prefix = typeof a == "string" && a ? a : e.identifier;
 	}
 	get visible() {
-		return this.element instanceof HTMLElement ? this.visibleOnly ? se(this.element) && this.isVisible(this.element) : !0 : !1;
+		return this.element instanceof HTMLElement ? this.visibleOnly ? le(this.element) && this.isVisible(this.element) : !0 : !1;
 	}
 	isVisible(e) {
 		if (this.visibleCallback) {
@@ -301,7 +366,7 @@ var A = {
 			return n instanceof Promise ? await n : n;
 		}
 	}
-}, le = {
+}, de = {
 	normalize(e) {
 		return typeof e == "string" ? e : "";
 	},
@@ -311,7 +376,7 @@ var A = {
 };
 //#endregion
 //#region src/plumbers/formatters/credit_card.js
-function ue(e) {
+function fe(e) {
 	let t = 0, n = !1;
 	for (let r = e.length - 1; r >= 0; r--) {
 		let i = parseInt(e[r], 10);
@@ -319,32 +384,32 @@ function ue(e) {
 	}
 	return t % 10 == 0;
 }
-var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
+var pe = /\D/g, me = /^\d{13,19}$/, he = /(.{4})(?=.)/g, ge = {
 	normalize(e) {
-		return typeof e == "string" ? e.replace(de, "") : "";
+		return typeof e == "string" ? e.replace(pe, "") : "";
 	},
 	validate(e) {
-		return typeof e != "string" || !fe.test(e) ? !1 : ue(e);
+		return typeof e != "string" || !me.test(e) ? !1 : fe(e);
 	},
 	format(e) {
-		return typeof e == "string" ? e.replace(pe, "$1 ") : "";
+		return typeof e == "string" ? e.replace(he, "$1 ") : "";
 	}
-}, M = { 1: 10 }, N = /\D/g, he = /^\+\d{7,15}$/, ge = {
+}, j = { 1: 10 }, M = /\D/g, _e = /^\+\d{7,15}$/, ve = {
 	normalize(e) {
 		if (typeof e != "string") return "";
-		let t = e.trimStart().startsWith("+"), n = e.replace(N, "");
+		let t = e.trimStart().startsWith("+"), n = e.replace(M, "");
 		return t ? `+${n}` : n;
 	},
 	validate(e) {
 		if (typeof e != "string") return !1;
-		if (he.test(e)) return !0;
-		let t = e.replace(N, "");
-		return Object.values(M).includes(t.length);
+		if (_e.test(e)) return !0;
+		let t = e.replace(M, "");
+		return Object.values(j).includes(t.length);
 	},
 	format(e) {
 		if (typeof e != "string") return "";
-		let t = e.replace(N, "");
-		for (let [e, n] of Object.entries(M)) {
+		let t = e.replace(M, "");
+		for (let [e, n] of Object.entries(j)) {
 			if (t.length === n) return `(${t.slice(0, 3)}) ${t.slice(3, 6)}-${t.slice(6)}`;
 			let r = n + e.length;
 			if (t.length === r && t.startsWith(e)) {
@@ -354,16 +419,16 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 		}
 		return e;
 	}
-}, _e = /[^\d.,-]/g, P = /^-?\d+(\.\d+)?$/, F = {
+}, ye = /[^\d.,-]/g, be = /^-?\d+(\.\d+)?$/, xe = {
 	normalize(e) {
 		if (typeof e != "string") return "";
-		let t = e.replace(_e, "");
+		let t = e.replace(ye, "");
 		if (!t) return "";
 		let n = t.lastIndexOf(","), r = t.lastIndexOf(".");
 		return n > -1 && r > -1 ? n > r ? t.replace(/\./g, "").replace(",", ".") : t.replace(/,/g, "") : n > -1 ? t.slice(n + 1).length <= 2 ? t.replace(",", ".") : t.replace(/,/g, "") : t;
 	},
 	validate(e) {
-		return typeof e == "string" ? P.test(e) : !1;
+		return typeof e == "string" ? be.test(e) : !1;
 	},
 	format(e, t = {}) {
 		if (typeof e != "string") return "";
@@ -383,18 +448,18 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 			return e;
 		}
 	}
-}, I = /^\d{4}-\d{2}-\d{2}$/, ve = /^(\d{1,4})[/\-.](\d{1,2})[/\-.](\d{1,4})$/, ye = /\D/g, L = {
+}, N = /^\d{4}-\d{2}-\d{2}$/, Se = /^(\d{1,4})[/\-.](\d{1,2})[/\-.](\d{1,4})$/, Ce = /\D/g, P = {
 	normalize(e) {
 		if (typeof e != "string") return "";
 		let t = e.trim();
-		if (I.test(t)) return t;
-		let n = t.match(ve);
+		if (N.test(t)) return t;
+		let n = t.match(Se);
 		if (n) {
 			let [, e, t, r] = n;
 			if (e.length === 4) return `${e}-${t.padStart(2, "0")}-${r.padStart(2, "0")}`;
 			if (r.length === 4) return `${r}-${e.padStart(2, "0")}-${t.padStart(2, "0")}`;
 		}
-		let r = t.replace(ye, "");
+		let r = t.replace(Ce, "");
 		if (r.length === 8) {
 			let e = parseInt(r.slice(0, 4), 10);
 			return e >= 1e3 && e <= 9999 ? `${r.slice(0, 4)}-${r.slice(4, 6)}-${r.slice(6, 8)}` : `${r.slice(4, 8)}-${r.slice(0, 2)}-${r.slice(2, 4)}`;
@@ -403,8 +468,8 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 	},
 	validate(e) {
 		if (typeof e != "string") return !1;
-		let t = L.normalize(e);
-		if (!I.test(t)) return !1;
+		let t = P.normalize(e);
+		if (!N.test(t)) return !1;
 		let n = /* @__PURE__ */ new Date(`${t}T00:00:00Z`);
 		return !isNaN(n.getTime()) && n.toISOString().startsWith(t);
 	},
@@ -424,11 +489,11 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 			return e;
 		}
 	}
-}, be = /^([01]?\d|2[0-3]):([0-5]\d)$/, R = {
+}, we = /^([01]?\d|2[0-3]):([0-5]\d)$/, F = {
 	normalize(e) {
 		if (typeof e != "string") return "";
 		let t = e.trim();
-		if (be.test(t)) {
+		if (we.test(t)) {
 			let [e, n] = t.split(":");
 			return `${String(parseInt(e, 10)).padStart(2, "0")}:${n}`;
 		}
@@ -440,7 +505,7 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 		return "";
 	},
 	validate(e) {
-		return R.normalize(e) !== "";
+		return F.normalize(e) !== "";
 	},
 	format(e, t = {}) {
 		if (typeof e != "string") return "";
@@ -451,32 +516,32 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 		let a = r < 12 ? "AM" : "PM";
 		return `${r % 12 || 12}:${i} ${a}`;
 	}
-}, z = {
+}, I = {
 	PLAIN: "plain",
 	CREDIT_CARD: "creditCard",
 	PHONE: "phone",
 	CURRENCY: "currency",
 	DATE: "date",
 	TIME: "time"
-}, B = new Map([
-	[z.PLAIN, le],
-	[z.CREDIT_CARD, me],
-	[z.PHONE, ge],
-	[z.CURRENCY, F],
-	[z.DATE, L],
-	[z.TIME, R]
-]), V = {
-	type: z.PLAIN,
+}, L = new Map([
+	[I.PLAIN, de],
+	[I.CREDIT_CARD, ge],
+	[I.PHONE, ve],
+	[I.CURRENCY, xe],
+	[I.DATE, P],
+	[I.TIME, F]
+]), R = {
+	type: I.PLAIN,
 	options: {}
-}, H = class extends j {
+}, z = class extends A {
 	static register(e, t) {
-		B.set(e, t);
+		L.set(e, t);
 	}
 	constructor(e, t = {}) {
-		super(e, t), this.type = t.type ?? V.type, this.options = t.options ?? V.options, this.enhance();
+		super(e, t), this.type = t.type ?? R.type, this.options = t.options ?? R.options, this.enhance();
 	}
 	enhance() {
-		let e = this, t = B.get(e.type) ?? B.get(z.PLAIN), n = {
+		let e = this, t = L.get(e.type) ?? L.get(I.PLAIN), n = {
 			normalize: (n) => t.normalize?.(n, e.options) ?? (typeof n == "string" ? n : ""),
 			validate: (n) => t.validate?.(n, e.options) ?? !0,
 			format: (n) => t.format?.(n, e.options) ?? (typeof n == "string" ? n : ""),
@@ -490,30 +555,30 @@ var de = /\D/g, fe = /^\d{13,19}$/, pe = /(.{4})(?=.)/g, me = {
 			configurable: !0
 		});
 	}
-}, U = (e, t) => new H(e, t), xe = /^\d{4}-\d{2}-\d{2}$/;
-function W(e) {
+}, B = (e, t) => new z(e, t), Te = /^\d{4}-\d{2}-\d{2}$/;
+function V(e) {
 	return e instanceof Date && !isNaN(e);
 }
-function G(...e) {
+function H(...e) {
 	if (e.length === 0) throw "Missing values to parse as date";
 	if (e.length === 1) {
 		let t = e[0];
 		if (!t) return;
-		if (typeof t == "string" && xe.test(t)) {
+		if (typeof t == "string" && Te.test(t)) {
 			let [e, n, r] = t.split("-").map(Number), i = new Date(e, n - 1, r);
-			if (W(i)) return i;
+			if (V(i)) return i;
 		} else {
 			let e = new Date(t);
-			if (W(e)) return e;
+			if (V(e)) return e;
 		}
 	} else {
 		let t = new Date(...e);
-		if (W(t)) return t;
+		if (V(t)) return t;
 	}
 }
 //#endregion
 //#region src/plumbers/calendar.js
-var K = 7, q = {
+var U = 7, Ee = 12, W = 10, G = {
 	locales: ["default"],
 	today: "",
 	day: null,
@@ -528,18 +593,18 @@ var K = 7, q = {
 	disabledYears: [],
 	firstDayOfWeek: 0,
 	onNavigated: "navigated"
-}, Se = class extends j {
+}, De = class extends A {
 	constructor(e, t = {}) {
 		super(e, t);
-		let n = Object.assign({}, q, t), { onNavigated: r, since: i, till: a, firstDayOfWeek: o } = n;
-		this.onNavigated = r, this.since = G(i), this.till = G(a), this.firstDayOfWeek = 0 <= o && o < 7 ? o : q.firstDayOfWeek;
+		let n = Object.assign({}, G, t), { onNavigated: r, since: i, till: a, firstDayOfWeek: o } = n;
+		this.onNavigated = r, this.since = H(i), this.till = H(a), this.firstDayOfWeek = 0 <= o && o < 7 ? o : G.firstDayOfWeek;
 		let { disabledDates: s, disabledWeekdays: c, disabledDays: l, disabledMonths: u, disabledYears: d } = n;
 		this.disabledDates = Array.isArray(s) ? s : [], this.disabledWeekdays = Array.isArray(c) ? c : [], this.disabledDays = Array.isArray(l) ? l : [], this.disabledMonths = Array.isArray(u) ? u : [], this.disabledYears = Array.isArray(d) ? d : [];
-		let { today: f, day: p, month: m, year: h } = n;
-		this.now = G(f) || /* @__PURE__ */ new Date(), typeof h == "number" && typeof m == "number" && typeof p == "number" ? this.current = G(h, m, p) : this.current = this.now, this.build(), this.enhance();
+		let { today: ee, day: f, month: p, year: m } = n;
+		this.now = H(ee) || /* @__PURE__ */ new Date(), typeof m == "number" && typeof p == "number" && typeof f == "number" ? this.current = H(m, p, f) : this.current = this.now, this.build(), this.enhance();
 	}
 	build() {
-		this.daysOfWeek = this.buildDaysOfWeek(), this.daysOfMonth = this.buildDaysOfMonth(), this.monthsOfYear = this.buildMonthsOfYear();
+		this.daysOfWeek = this.buildDaysOfWeek(), this.daysOfMonth = this.buildDaysOfMonth(), this.monthsOfYear = this.buildMonthsOfYear(), this.yearsOfDecade = this.buildYearsOfDecade();
 	}
 	buildDaysOfWeek() {
 		let e = new Intl.DateTimeFormat(this.localesValue, { weekday: "long" }), t = new Intl.DateTimeFormat(this.localesValue, { weekday: "short" }), n = /* @__PURE__ */ new Date("2024-10-06"), r = [];
@@ -572,7 +637,7 @@ var K = 7, q = {
 			let a = new Date(t, e, i);
 			n.push(r(a));
 		}
-		let s = n.length % K, c = s === 0 ? 0 : K - s;
+		let s = n.length % U, c = s === 0 ? 0 : U - s;
 		for (let i = 1; i <= c; i++) {
 			let a = new Date(t, e + 1, i);
 			n.push(r(a));
@@ -581,34 +646,47 @@ var K = 7, q = {
 	}
 	buildMonthsOfYear() {
 		let e = new Intl.DateTimeFormat(this.localesValue, { month: "long" }), t = new Intl.DateTimeFormat(this.localesValue, { month: "short" }), n = new Intl.DateTimeFormat(this.localesValue, { month: "numeric" }), r = [];
-		for (let i = 0; i < 12; i++) {
-			let a = new Date(this.year, i);
+		for (let i = 0; i < Ee; i++) {
+			let a = new Date(this.year, i), o = new Date(this.year, i, 1), s = new Date(this.year, i + 1, 0), c = t.format(a), l = e.format(a), u = this.since && s < this.since || this.till && o > this.till, d = this.disabledMonths.some((e) => i == e || c === e || l === e);
 			r.push({
 				date: a,
 				value: a.getMonth(),
-				long: e.format(a),
-				short: t.format(a),
-				numeric: n.format(a)
+				long: l,
+				short: c,
+				numeric: n.format(a),
+				disabled: u || d
 			});
 		}
 		return r;
 	}
+	buildYearsOfDecade() {
+		let e = Math.floor(this.year / W) * W, t = [];
+		for (let n = e - 1; n <= e + W; n++) {
+			let r = n < e || n > e + W - 1, i = this.since && n < this.since.getFullYear() || this.till && n > this.till.getFullYear(), a = this.disabledYears.some((e) => n == e);
+			t.push({
+				value: n,
+				current: n === this.year,
+				disabled: r || i || a
+			});
+		}
+		return t;
+	}
 	get today() {
 		return this.now;
 	}
 	set today(e) {
-		if (!W(e)) return;
+		if (!V(e)) return;
 		let t = this.month ?? e.getMonth(), n = this.year ?? e.getFullYear(), r = t == e.getMonth() && n == e.getFullYear() ? e.getDate() : 1;
 		this.now = new Date(n, t, r);
 	}
 	get current() {
-		return typeof this.year == "number" && typeof this.month == "number" && typeof this.day == "number" ? G(this.year, this.month, this.day) : null;
+		return typeof this.year == "number" && typeof this.month == "number" && typeof this.day == "number" ? H(this.year, this.month, this.day) : null;
 	}
 	set current(e) {
-		W(e) && (this.day = e.getDate(), this.month = e.getMonth(), this.year = e.getFullYear());
+		V(e) && (this.day = e.getDate(), this.month = e.getMonth(), this.year = e.getFullYear());
 	}
 	navigate = async (e) => {
-		if (!W(e)) return;
+		if (!V(e)) return;
 		let t = this.current, n = e.toISOString(), r = t.toISOString();
 		this.dispatch("navigate", { detail: {
 			from: r,
@@ -639,7 +717,7 @@ var K = 7, q = {
 		await this.navigate(n);
 	};
 	isDisabled = (e) => {
-		if (!W(e)) return !1;
+		if (!V(e)) return !1;
 		if (this.disabledDates.length) {
 			let t = e.getTime();
 			for (let e of this.disabledDates) if (t === new Date(e).getTime()) return !0;
@@ -669,7 +747,7 @@ var K = 7, q = {
 		return !1;
 	};
 	isWithinRange = (e) => {
-		if (!W(e)) return !1;
+		if (!V(e)) return !1;
 		let t = !0;
 		return this.since && (t &&= e >= this.since), this.till && (t &&= e <= this.till), t;
 	};
@@ -725,6 +803,9 @@ var K = 7, q = {
 				get monthsOfYear() {
 					return e.monthsOfYear;
 				},
+				get yearsOfDecade() {
+					return e.yearsOfDecade;
+				},
 				navigate: async (t) => await e.navigate(t),
 				step: async (t, n) => await e.step(t, n),
 				isDisabled: (t) => e.isDisabled(t),
@@ -732,18 +813,78 @@ var K = 7, q = {
 			};
 		} });
 	}
-}, Ce = (e, t) => new Se(e, t), J = {
+}, K = (e, t) => new De(e, t), Oe = class extends A {
+	constructor(e, t = {}) {
+		super(e, t), this.handle = this.handle.bind(this), this.onSelect = t.onSelect || null;
+	}
+	attach() {
+		this.element.addEventListener("click", this.handle);
+	}
+	detach() {
+		this.element.removeEventListener("click", this.handle);
+	}
+	handle(e) {
+		if (!(e.target instanceof HTMLElement)) return;
+		e.preventDefault();
+		let t = e.target instanceof HTMLTimeElement ? e.target.parentElement : e.target;
+		if (t.disabled || t.getAttribute("aria-disabled") === "true") return;
+		let n = e.target instanceof HTMLTimeElement ? e.target : e.target.querySelector("time");
+		if (!n) return;
+		let r = H(n.dateTime);
+		if (!r) return;
+		this.dispatch("selecting", { target: t });
+		let i = r.toISOString();
+		this.onSelect ? this.awaitCallback(this.onSelect, i) : this.dispatch("selected", { detail: {
+			epoch: r.getTime(),
+			iso: i
+		} });
+	}
+}, ke = class extends A {
+	constructor(e, t = {}) {
+		super(e, t), this.handle = this.handle.bind(this);
+	}
+	attach() {
+		this.element.addEventListener("click", this.handle);
+	}
+	detach() {
+		this.element.removeEventListener("click", this.handle);
+	}
+	handle(e) {
+		let t = e.target.closest("button[data-month]");
+		if (!t || t.disabled || t.getAttribute("aria-disabled") === "true") return;
+		e.preventDefault();
+		let n = parseInt(t.dataset.month, 10);
+		isNaN(n) || this.dispatch("selected", { detail: { month: n } });
+	}
+}, Ae = class extends A {
+	constructor(e, t = {}) {
+		super(e, t), this.handle = this.handle.bind(this);
+	}
+	attach() {
+		this.element.addEventListener("click", this.handle);
+	}
+	detach() {
+		this.element.removeEventListener("click", this.handle);
+	}
+	handle(e) {
+		let t = e.target.closest("button[data-year]");
+		if (!t || t.disabled || t.getAttribute("aria-disabled") === "true") return;
+		e.preventDefault();
+		let n = parseInt(t.dataset.year, 10);
+		isNaN(n) || this.dispatch("selected", { detail: { year: n } });
+	}
+}, q = (e, t) => new Oe(e, t), J = (e, t) => new ke(e, t), Y = (e, t) => new Ae(e, t), X = {
 	content: null,
 	url: "",
 	reload: "never",
 	stale: 3600,
 	onLoad: "canLoad",
 	onLoaded: "contentLoaded"
-}, we = class extends j {
+}, je = class extends A {
 	constructor(e, t = {}) {
 		super(e, t);
-		let n = Object.assign({}, J, t), { content: r, url: i, reload: a, stale: o } = n;
-		this.content = r, this.url = i, this.reload = typeof a == "string" ? a : J.reload, this.stale = typeof o == "number" ? o : J.stale;
+		let n = Object.assign({}, X, t), { content: r, url: i, reload: a, stale: o } = n;
+		this.content = r, this.url = i, this.reload = typeof a == "string" ? a : X.reload, this.stale = typeof o == "number" ? o : X.stale;
 		let { onLoad: s, onLoaded: c } = n;
 		this.onLoad = s, this.onLoaded = c, this._requestor = new w(), this.enhance();
 	}
@@ -752,7 +893,7 @@ var K = 7, q = {
 			case "never": return !1;
 			case "always": return !0;
 			default: {
-				let e = G(this.loadedAt);
+				let e = H(this.loadedAt);
 				return e && /* @__PURE__ */ new Date() - e > this.stale * 1e3;
 			}
 		}
@@ -778,7 +919,7 @@ var K = 7, q = {
 		let e = this;
 		Object.assign(this.controller, { load: e.load.bind(e) });
 	}
-}, Te = (e, t) => new we(e, t), Y = class extends j {
+}, Me = (e, t) => new je(e, t), Z = class extends A {
 	observe(e) {
 		this._handler = e, this.events.forEach((t) => window.addEventListener(t, e, !0));
 	}
@@ -791,21 +932,21 @@ var K = 7, q = {
 			e.unobserve(), t();
 		};
 	}
-}, Ee = {
+}, Ne = {
 	trigger: null,
 	events: ["click"],
 	onDismissed: "dismissed"
-}, De = class extends Y {
+}, Pe = class extends Z {
 	constructor(e, t = {}) {
 		super(e, t);
-		let { trigger: n, events: r, onDismissed: i } = Object.assign({}, Ee, t);
+		let { trigger: n, events: r, onDismissed: i } = Object.assign({}, Ne, t);
 		this.onDismissed = i, this.trigger = n || this.element, this.events = r, this.enhance(), this.observe(this.dismiss);
 	}
 	dismiss = async (e) => {
 		let { target: t } = e;
 		t instanceof HTMLElement && (this.element.contains(t) || this.visible && (this.dispatch("dismiss"), await this.awaitCallback(this.onDismissed, { target: this.trigger }), this.dispatch("dismissed")));
 	};
-}, X = (e, t) => new De(e, t), Oe = {
+}, Q = (e, t) => new Pe(e, t), Fe = {
 	anchor: null,
 	events: ["click"],
 	placement: "bottom",
@@ -813,10 +954,10 @@ var K = 7, q = {
 	onFlipped: "flipped",
 	ariaRole: null,
 	respectMotion: !0
-}, ke = class extends Y {
+}, Ie = class extends Z {
 	constructor(e, t = {}) {
 		super(e, t);
-		let { anchor: n, events: r, placement: i, alignment: a, onFlipped: o, ariaRole: s, respectMotion: c } = Object.assign({}, Oe, t);
+		let { anchor: n, events: r, placement: i, alignment: a, onFlipped: o, ariaRole: s, respectMotion: c } = Object.assign({}, Fe, t);
 		this.anchor = n, this.events = r, this.placement = i, this.alignment = a, this.onFlipped = o, this.ariaRole = s, this.respectMotion = c, this.prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.anchor && this.element && S({
 			trigger: this.anchor,
 			target: this.element,
@@ -835,7 +976,7 @@ var K = 7, q = {
 		}), this.dispatch("flipped", { detail: { placement: e } });
 	};
 	flippedRect(e, t) {
-		let n = this.quadrumRect(e, k()), r = [this.placement, D[this.placement]], i = {};
+		let n = this.quadrumRect(e, O()), r = [this.placement, ce[this.placement]], i = {};
 		for (; !Object.keys(i).length && r.length > 0;) {
 			let a = r.shift();
 			if (!this.biggerRectThan(n[a], t)) continue;
@@ -846,25 +987,25 @@ var K = 7, q = {
 	}
 	quadrumRect(e, t) {
 		return {
-			left: O({
+			left: D({
 				x: t.x,
 				y: t.y,
 				width: e.x - t.x,
 				height: t.height
 			}),
-			right: O({
+			right: D({
 				x: e.x + e.width,
 				y: t.y,
 				width: t.width - (e.x + e.width),
 				height: t.height
 			}),
-			top: O({
+			top: D({
 				x: t.x,
 				y: t.y,
 				width: t.width,
 				height: e.y - t.y
 			}),
-			bottom: O({
+			bottom: D({
 				x: t.x,
 				y: e.y + e.height,
 				width: t.width,
@@ -874,25 +1015,25 @@ var K = 7, q = {
 	}
 	quadrumPlacement(e, t, n) {
 		switch (t) {
-			case "top": return O({
+			case "top": return D({
 				x: n.x,
 				y: e.y - n.height,
 				width: n.width,
 				height: n.height
 			});
-			case "bottom": return O({
+			case "bottom": return D({
 				x: n.x,
 				y: e.y + e.height,
 				width: n.width,
 				height: n.height
 			});
-			case "left": return O({
+			case "left": return D({
 				x: e.x - n.width,
 				y: n.y,
 				width: n.width,
 				height: n.height
 			});
-			case "right": return O({
+			case "right": return D({
 				x: e.x + e.width,
 				y: n.y,
 				width: n.width,
@@ -906,7 +1047,7 @@ var K = 7, q = {
 			case "top":
 			case "bottom": {
 				let t = e.x;
-				return this.alignment === "center" ? t = e.x + e.width / 2 - n.width / 2 : this.alignment === "end" && (t = e.x + e.width - n.width), O({
+				return this.alignment === "center" ? t = e.x + e.width / 2 - n.width / 2 : this.alignment === "end" && (t = e.x + e.width - n.width), D({
 					x: t,
 					y: n.y,
 					width: n.width,
@@ -916,7 +1057,7 @@ var K = 7, q = {
 			case "left":
 			case "right": {
 				let t = e.y;
-				return this.alignment === "center" ? t = e.y + e.height / 2 - n.height / 2 : this.alignment === "end" && (t = e.y + e.height - n.height), O({
+				return this.alignment === "center" ? t = e.y + e.height / 2 - n.height / 2 : this.alignment === "end" && (t = e.y + e.height - n.height), D({
 					x: n.x,
 					y: t,
 					width: n.width,
@@ -932,7 +1073,7 @@ var K = 7, q = {
 	enhance() {
 		super.enhance(), this.controller.flip = this.flip;
 	}
-}, Ae = (e, t) => new ke(e, t), je = {
+}, Le = (e, t) => new Ie(e, t), Re = {
 	events: ["resize"],
 	boundaries: [
 		"top",
@@ -941,10 +1082,10 @@ var K = 7, q = {
 	],
 	onShifted: "shifted",
 	respectMotion: !0
-}, Me = class extends Y {
+}, ze = class extends Z {
 	constructor(e, t = {}) {
 		super(e, t);
-		let { onShifted: n, events: r, boundaries: i, respectMotion: a } = Object.assign({}, je, t);
+		let { onShifted: n, events: r, boundaries: i, respectMotion: a } = Object.assign({}, Re, t);
 		this.onShifted = n, this.events = r, this.boundaries = i, this.respectMotion = a, this.prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.enhance(), this.observe(this.shift);
 	}
 	shift = async () => {
@@ -954,14 +1095,14 @@ var K = 7, q = {
 		this.element.style.transition = this.respectMotion && this.prefersReducedMotion ? "none" : "", this.element.style.transform = `translate(${t}px, ${n}px)`, await this.awaitCallback(this.onShifted, e), this.dispatch("shifted", { detail: e });
 	};
 	overflowRect(e, t) {
-		let n = {}, r = k(), i = O({
+		let n = {}, r = O(), i = D({
 			x: e.x - t.x,
 			y: e.y - t.y,
 			width: e.width,
 			height: e.height
 		});
 		for (let e of this.boundaries) {
-			let t = this.directionDistance(i, e, r), a = D[e];
+			let t = this.directionDistance(i, e, r), a = ce[e];
 			t < 0 ? i[a] + t >= r[a] && !n[a] && (n[e] = t) : n[e] = "";
 		}
 		return n;
@@ -993,27 +1134,27 @@ var K = 7, q = {
 	enhance() {
 		super.enhance(), this.controller.shift = this.shift;
 	}
-}, Ne = (e, t) => new Me(e, t), Z = {
+}, Be = (e, t) => new ze(e, t), Ve = {
 	visibility: "visibility",
 	onShown: "shown",
 	onHidden: "hidden"
-}, Pe = class extends j {
+}, He = class extends A {
 	constructor(e, t = {}) {
-		let { visibility: n, onShown: r, onHidden: i, activator: a } = Object.assign({}, Z, t), o = typeof n == "string" ? n : Z.namespace, s = typeof t.visible == "string" ? t.visible : "isVisible";
+		let { visibility: n, onShown: r, onHidden: i, activator: a } = Object.assign({}, Ve, t), o = typeof n == "string" ? n : Ve.namespace, s = typeof t.visible == "string" ? t.visible : "isVisible";
 		(typeof t.visible != "boolean" || t.visible) && (t.visible = `${o}.${s}`), super(e, t), this.visibility = o, this.visibilityResolver = s, this.onShown = r, this.onHidden = i, this.activator = a instanceof HTMLElement ? a : null, this.enhance(), this.element instanceof HTMLElement && this.activate(this.isVisible(this.element));
 	}
 	isVisible(e) {
 		if (!(e instanceof HTMLElement)) return !1;
-		let t = A.hiddenClass;
+		let t = k.hiddenClass;
 		return t ? !e.classList.contains(t) : !e.hasAttribute("hidden");
 	}
 	toggle(e, t) {
 		if (!(e instanceof HTMLElement)) return;
-		let n = A.hiddenClass;
-		n ? t ? e.classList.remove(n) : e.classList.add(n) : t ? e.removeAttribute("hidden") : e.setAttribute("hidden", !0);
+		let n = k.hiddenClass;
+		n ? t ? e.classList.remove(n) : e.classList.add(n) : v(e, !t);
 	}
 	activate(e) {
-		this.activator && this.activator.setAttribute("aria-expanded", e ? "true" : "false");
+		this.activator && g(this.activator, e);
 	}
 	async show() {
 		!(this.element instanceof HTMLElement) || this.isVisible(this.element) || (this.dispatch("show"), this.toggle(this.element, !0), this.activate(!0), await this.awaitCallback(this.onShown, { target: this.element }), this.dispatch("shown"));
@@ -1032,14 +1173,118 @@ var K = 7, q = {
 			return t;
 		} });
 	}
-}, Q = (e, t) => new Pe(e, t), $ = class extends e {
+}, Ue = (e, t) => new He(e, t), We = 4, Ge = class extends e {
+	static targets = ["grid"];
+	static values = {
+		current: Number,
+		today: {
+			type: String,
+			default: ""
+		},
+		selected: {
+			type: String,
+			default: ""
+		},
+		since: {
+			type: String,
+			default: ""
+		},
+		till: {
+			type: String,
+			default: ""
+		}
+	};
+	initialize() {
+		this.selector = Y(this), K(this, {
+			today: this.todayValue,
+			year: this.currentValue || void 0,
+			since: this.sinceValue || null,
+			till: this.tillValue || null
+		});
+	}
+	connect() {
+		this.selector.attach(), this.navigated();
+	}
+	disconnect() {
+		this.selector.detach();
+	}
+	currentValueChanged() {
+		!this.calendar || !this.hasCurrentValue || this.calendar.navigate(this.currentDate);
+	}
+	selectedValueChanged() {
+		if (!this.hasGridTarget) return;
+		let e = H(this.selectedValue), t = e ? e.getFullYear() : null;
+		this.gridTarget.querySelectorAll("button[data-year]").forEach((e) => {
+			let n = parseInt(e.dataset.year, 10);
+			e.setAttribute("aria-selected", n === t ? "true" : "false");
+		});
+	}
+	navigate(e) {
+		this.currentValue = e.getFullYear();
+	}
+	step(e, t) {
+		return this.calendar.step(e, t);
+	}
+	navigated() {
+		this.drawGrid();
+	}
+	get currentDate() {
+		return new Date(this.currentValue, 0, 1);
+	}
+	drawGrid() {
+		if (!this.hasGridTarget) return;
+		let { yearsOfDecade: e } = this.calendar, t = this.calendar.today.getFullYear(), n = H(this.selectedValue), r = n ? n.getFullYear() : null, i = [];
+		for (let n of e) {
+			let e = document.createElement("button");
+			e.type = "button", e.textContent = n.value, e.dataset.year = n.value, e.setAttribute("role", "gridcell"), e.setAttribute("aria-selected", n.value === r ? "true" : "false"), n.value === t && e.setAttribute("aria-current", "year"), n.disabled && e.setAttribute("aria-disabled", "true"), i.push(e);
+		}
+		let a = document.createElement("div");
+		a.setAttribute("role", "rowgroup");
+		for (let e = 0; e < i.length; e += We) {
+			let t = document.createElement("div");
+			t.setAttribute("role", "row");
+			for (let n of i.slice(e, e + We)) t.appendChild(n);
+			a.appendChild(t);
+		}
+		this.gridTarget.replaceChildren(a);
+	}
+}, Ke = class extends e {
+	initialize() {
+		this.selector = Y(this);
+	}
+	connect() {
+		this.selector.attach();
+	}
+	disconnect() {
+		this.selector.detach();
+	}
+}, qe = class extends e {
 	static targets = ["daysOfWeek", "daysOfMonth"];
 	static classes = [
 		"dayOfWeek",
 		"dayOfMonth",
-		"week"
+		"dayOfOtherMonth",
+		"row"
 	];
 	static values = {
+		year: Number,
+		month: Number,
+		today: {
+			type: String,
+			default: ""
+		},
+		selected: {
+			type: String,
+			default: ""
+		},
+		since: {
+			type: String,
+			default: ""
+		},
+		till: {
+			type: String,
+			default: ""
+		},
 		locales: {
 			type: Array,
 			default: ["default"]
@@ -1055,41 +1300,60 @@ var K = 7, q = {
 		daysOfOtherMonth: {
 			type: Boolean,
 			default: !1
-		},
-		today: {
-			type: String,
-			default: ""
-		},
-		selected: {
-			type: String,
-			default: ""
 		}
 	};
 	initialize() {
-		Ce(this, { today: this.todayValue });
+		this.selector = q(this, { onSelect: "select" }), K(this, {
+			today: this.todayValue,
+			since: this.sinceValue || null,
+			till: this.tillValue || null
+		});
 	}
 	connect() {
-		this.draw();
+		this.selector.attach(), this.navigated();
 	}
-	navigated() {
-		this.draw();
+	disconnect() {
+		this.selector.detach();
+	}
+	yearValueChanged() {
+		!this.calendar || !this.hasYearValue || this._scheduleNavigate();
+	}
+	monthValueChanged() {
+		!this.calendar || !this.hasYearValue || this._scheduleNavigate();
+	}
+	_scheduleNavigate() {
+		this._navigatePending || (this._navigatePending = !0, queueMicrotask(async () => {
+			this._navigatePending = !1, await this.calendar.navigate(this.currentDate), this.navigated();
+		}));
 	}
 	selectedValueChanged() {
 		if (!this.hasDaysOfMonthTarget || (this.daysOfMonthTarget.querySelectorAll("[aria-selected]").forEach((e) => {
 			e.setAttribute("aria-selected", "false");
 		}), !this.selectedValue)) return;
-		let e = G(this.selectedValue);
+		let e = H(this.selectedValue);
 		if (!e) return;
 		let t = this.daysOfMonthTarget.querySelector(`time[datetime="${e.toISOString()}"]`);
-		t && t.closest("[aria-selected]").setAttribute("aria-selected", "true");
+		t && t.closest("[aria-selected]")?.setAttribute("aria-selected", "true");
 	}
-	onSelect(e) {
-		let t = e.detail?.iso;
-		t && (this.selectedValue = t);
+	navigate(e) {
+		this.yearValue = e.getFullYear(), this.monthValue = e.getMonth();
 	}
-	draw() {
+	step(e, t) {
+		return this.calendar.step(e, t);
+	}
+	select(e) {
+		let t = H(e);
+		t && (this.selectedValue = e, (t.getMonth() !== this.calendar.month || t.getFullYear() !== this.calendar.year) && this.calendar.navigate(t), this.dispatch("selected", { detail: {
+			epoch: t.getTime(),
+			iso: e
+		} }));
+	}
+	navigated() {
 		this.drawDaysOfWeek(), this.drawDaysOfMonth(), this.selectedValueChanged();
 	}
+	get currentDate() {
+		return new Date(this.yearValue, this.monthValue, 1);
+	}
 	createDayElement(e, { selectable: t = !1, disabled: n = !1 } = {}) {
 		let r = document.createElement(t ? "button" : "div");
 		return r.tabIndex = -1, e ? r.textContent = e : r.setAttribute("aria-hidden", "true"), n && (r instanceof HTMLButtonElement ? r.disabled = !0 : r.setAttribute("aria-disabled", "true")), r;
@@ -1102,50 +1366,135 @@ var K = 7, q = {
 			r.setAttribute("role", "columnheader"), r.title = n.long, this.hasDayOfWeekClass && r.classList.add(...this.dayOfWeekClasses), t.push(r);
 		}
 		let n = document.createElement("div");
-		n.setAttribute("role", "row"), this.hasWeekClass && n.classList.add(...this.weekClasses), n.replaceChildren(...t), this.daysOfWeekTarget.replaceChildren(n);
+		n.setAttribute("role", "row"), this.hasRowClass && n.classList.add(...this.rowClasses), n.replaceChildren(...t), this.daysOfWeekTarget.replaceChildren(n);
 	}
 	drawDaysOfMonth() {
 		if (!this.hasDaysOfMonthTarget) return;
 		let e = this.calendar.today, t = new Date(e.getFullYear(), e.getMonth(), e.getDate()).getTime(), n = [];
 		for (let e of this.calendar.daysOfMonth) {
-			let r = !e.current || this.calendar.isDisabled(e.date) || !this.calendar.isWithinRange(e.date), i = e.current || this.daysOfOtherMonthValue ? e.value : "", a = this.createDayElement(i, {
-				selectable: e.current,
-				disabled: r
+			let r = this.calendar.isDisabled(e.date) || !this.calendar.isWithinRange(e.date), i = !e.current && this.daysOfOtherMonthValue && !r, a = e.current || this.daysOfOtherMonthValue ? e.value : "", o = this.createDayElement(a, {
+				selectable: e.current || i,
+				disabled: e.current ? r : !i
 			});
-			t === e.date.getTime() && a.setAttribute("aria-current", "date"), (e.current || this.daysOfOtherMonthValue) && a.setAttribute("aria-selected", ""), this.hasDayOfMonthClass && a.classList.add(...this.dayOfMonthClasses);
-			let o = document.createElement("time");
-			o.dateTime = e.iso, a.appendChild(o), n.push(a);
+			t === e.date.getTime() && o.setAttribute("aria-current", "date"), (e.current || this.daysOfOtherMonthValue) && o.setAttribute("aria-selected", ""), !e.current && this.daysOfOtherMonthValue && this.hasDayOfOtherMonthClass ? o.classList.add(...this.dayOfOtherMonthClasses) : this.hasDayOfMonthClass && o.classList.add(...this.dayOfMonthClasses);
+			let s = document.createElement("time");
+			s.dateTime = e.iso, o.appendChild(s), n.push(o);
 		}
 		let r = [];
 		for (let e = 0; e < n.length; e += 7) {
 			let t = document.createElement("div");
-			t.setAttribute("role", "row"), this.hasWeekClass && t.classList.add(...this.weekClasses);
+			t.setAttribute("role", "row"), this.hasRowClass && t.classList.add(...this.rowClasses);
 			for (let r of n.slice(e, e + 7)) r.setAttribute("role", "gridcell"), t.appendChild(r);
 			r.push(t);
 		}
 		this.daysOfMonthTarget.replaceChildren(...r);
 	}
-}, Fe = class extends e {
-	onSelect(e) {
-		if (!(e.target instanceof HTMLElement)) return;
-		e.preventDefault();
-		let t = e.target instanceof HTMLTimeElement ? e.target.parentElement : e.target;
-		if (t.disabled || t.getAttribute("aria-disabled") === "true") return;
-		this.dispatch("selecting", { target: t });
-		let n = e.target instanceof HTMLTimeElement ? e.target : e.target.querySelector("time");
-		if (!n) return console.error(`unable to locate time element within ${t}`);
-		let r = G(n.dateTime);
-		if (!r) return console.error(`unable to parse ${n.dateTime} found within the time element`);
-		this.select(r.toISOString());
+}, Je = class extends e {
+	initialize() {
+		this.selector = q(this);
 	}
-	select(e) {
-		let t = G(e);
-		t && this.dispatch("selected", { detail: {
-			epoch: t.getTime(),
-			iso: e
-		} });
+	connect() {
+		this.selector.attach();
+	}
+	disconnect() {
+		this.selector.detach();
+	}
+}, Ye = 4, Xe = class extends e {
+	static targets = ["grid"];
+	static values = {
+		current: Number,
+		today: {
+			type: String,
+			default: ""
+		},
+		selected: {
+			type: String,
+			default: ""
+		},
+		since: {
+			type: String,
+			default: ""
+		},
+		till: {
+			type: String,
+			default: ""
+		},
+		locales: {
+			type: Array,
+			default: ["default"]
+		},
+		monthFormat: {
+			type: String,
+			default: "short"
+		}
+	};
+	initialize() {
+		this.selector = J(this), K(this, {
+			today: this.todayValue,
+			year: this.currentValue || void 0,
+			since: this.sinceValue || null,
+			till: this.tillValue || null
+		});
+	}
+	connect() {
+		this.selector.attach(), this.navigated();
+	}
+	disconnect() {
+		this.selector.detach();
+	}
+	currentValueChanged() {
+		!this.calendar || !this.hasCurrentValue || this.calendar.navigate(this.currentDate);
+	}
+	selectedValueChanged() {
+		if (!this.hasGridTarget) return;
+		let e = H(this.selectedValue);
+		this.gridTarget.querySelectorAll("button[data-month]").forEach((t) => {
+			let n = parseInt(t.dataset.month, 10) - 1;
+			t.setAttribute("aria-selected", e && e.getMonth() === n ? "true" : "false");
+		});
 	}
-}, Ie = class extends e {
+	navigate(e) {
+		this.currentValue = e.getFullYear();
+	}
+	step(e, t) {
+		return this.calendar.step(e, t);
+	}
+	navigated() {
+		this.drawGrid();
+	}
+	get currentDate() {
+		return new Date(this.currentValue, 0, 1);
+	}
+	drawGrid() {
+		if (!this.hasGridTarget) return;
+		let { year: e, monthsOfYear: t } = this.calendar, n = this.calendar.today, r = H(this.selectedValue), i = [], a = new Intl.DateTimeFormat(this.localesValue, { month: this.monthFormatValue });
+		for (let o of t) {
+			let t = document.createElement("button");
+			t.type = "button", t.textContent = a.format(o.date), t.dataset.month = o.value + 1, t.setAttribute("role", "gridcell");
+			let s = r && r.getMonth() === o.value;
+			t.setAttribute("aria-selected", s ? "true" : "false"), o.value === n.getMonth() && e === n.getFullYear() && t.setAttribute("aria-current", "month"), o.disabled && t.setAttribute("aria-disabled", "true"), i.push(t);
+		}
+		let o = document.createElement("div");
+		o.setAttribute("role", "rowgroup");
+		for (let e = 0; e < i.length; e += Ye) {
+			let t = document.createElement("div");
+			t.setAttribute("role", "row");
+			for (let n of i.slice(e, e + Ye)) t.appendChild(n);
+			o.appendChild(t);
+		}
+		this.gridTarget.replaceChildren(o);
+	}
+}, Ze = class extends e {
+	initialize() {
+		this.selector = J(this);
+	}
+	connect() {
+		this.selector.attach();
+	}
+	disconnect() {
+		this.selector.detach();
+	}
+}, Qe = class extends e {
 	static targets = ["source"];
 	static values = { contentType: {
 		type: String,
@@ -1175,17 +1524,30 @@ var K = 7, q = {
 			});
 		}
 	}
-}, Le = class extends e {
+}, $ = [
+	"month",
+	"year",
+	"decade"
+], $e = class extends e {
 	static targets = [
 		"previous",
 		"next",
 		"day",
 		"month",
-		"year"
+		"year",
+		"viewTitle"
+	];
+	static outlets = [
+		"calendar-month",
+		"calendar-year",
+		"calendar-decade"
 	];
-	static outlets = ["calendar-month"];
 	static values = {
 		date: String,
+		view: {
+			type: String,
+			default: "month"
+		},
 		locales: {
 			type: Array,
 			default: ["default"]
@@ -1208,17 +1570,33 @@ var K = 7, q = {
 	}
 	async calendarMonthOutletConnected() {
 		if (this.dateValue) {
-			let e = G(this.dateValue);
+			let e = H(this.dateValue);
 			e && await this.calendarMonthOutlet.calendar.navigate(e);
 		}
 		this.draw();
 	}
-	onSelect(e) {
+	onDaySelect(e) {
 		this.dateValue = e.detail.iso, this.draw(), this.dispatch("selected", {
 			detail: { value: e.detail.iso },
 			bubbles: !0
 		});
 	}
+	zoomOut() {
+		let e = $.indexOf(this.viewValue);
+		e < $.length - 1 && (this.viewValue = $[e + 1], this.draw());
+	}
+	async onMonthSelect(e) {
+		let { month: t } = e.detail;
+		if (!this.hasCalendarMonthOutlet) return;
+		let { year: n } = this.calendarMonthOutlet.calendar;
+		await this.calendarMonthOutlet.calendar.navigate(new Date(n, t - 1, 1)), this.viewValue = "month", this.draw();
+	}
+	async onYearSelect(e) {
+		let { year: t } = e.detail;
+		if (!this.hasCalendarMonthOutlet) return;
+		let { month: n } = this.calendarMonthOutlet.calendar;
+		await this.calendarMonthOutlet.calendar.navigate(new Date(t, n, 1)), this.hasCalendarYearOutlet && this.calendarYearOutlet.navigate(this.calendarMonthOutlet.calendar.current), this.viewValue = "year", this.draw();
+	}
 	previousTargetConnected(e) {
 		e.addEventListener("click", this.previous);
 	}
@@ -1226,7 +1604,7 @@ var K = 7, q = {
 		e.removeEventListener("click", this.previous);
 	}
 	async previous() {
-		await this.calendarMonthOutlet.calendar.step("month", -1), this.draw();
+		await this.calendarMonthOutlet.calendar.step(...this.stepArgs(-1)), this.syncOutletValues(), this.draw();
 	}
 	nextTargetConnected(e) {
 		e.addEventListener("click", this.next);
@@ -1235,10 +1613,10 @@ var K = 7, q = {
 		e.removeEventListener("click", this.next);
 	}
 	async next() {
-		await this.calendarMonthOutlet.calendar.step("month", 1), this.draw();
+		await this.calendarMonthOutlet.calendar.step(...this.stepArgs(1)), this.syncOutletValues(), this.draw();
 	}
 	draw() {
-		this.drawDay(), this.drawMonth(), this.drawYear();
+		this.drawDay(), this.drawMonth(), this.drawYear(), this.drawViewTitle(), this.drawView();
 	}
 	drawDay() {
 		if (!this.hasDayTarget || !this.hasCalendarMonthOutlet) return;
@@ -1255,7 +1633,39 @@ var K = 7, q = {
 		let { year: e } = this.calendarMonthOutlet.calendar;
 		this.yearTarget.textContent = new Intl.DateTimeFormat(this.localesValue, { year: this.yearFormatValue }).format(new Date(e, 0));
 	}
-}, Re = class extends e {
+	drawViewTitle() {
+		if (!this.hasViewTitleTarget || !this.hasCalendarMonthOutlet) return;
+		let { year: e, month: t } = this.calendarMonthOutlet.calendar;
+		this.viewTitleTarget.textContent = this.viewTitleLabel(e, t);
+	}
+	syncOutletValues() {
+		if (!this.hasCalendarMonthOutlet) return;
+		let { current: e } = this.calendarMonthOutlet.calendar;
+		e && (this.hasCalendarYearOutlet && this.calendarYearOutlet.navigate(e), this.hasCalendarDecadeOutlet && this.calendarDecadeOutlet.navigate(e));
+	}
+	stepArgs(e) {
+		return this.viewValue === "year" ? ["year", e] : this.viewValue === "decade" ? ["year", e * 10] : ["month", e];
+	}
+	viewTitleLabel(e, t) {
+		if (this.viewValue === "year") return String(e);
+		if (this.viewValue === "decade") {
+			let t = Math.floor(e / 10) * 10;
+			return `${t}–${t + 9}`;
+		}
+		return new Intl.DateTimeFormat(this.localesValue, {
+			month: "long",
+			year: "numeric"
+		}).format(new Date(e, t));
+	}
+	drawView() {
+		let e = this.viewValue === "month", t = this.viewValue === "year", n = this.viewValue === "decade";
+		if (this.hasCalendarMonthOutlet) {
+			let t = this.calendarMonthOutlet;
+			t.hasDaysOfWeekTarget && (t.daysOfWeekTarget.hidden = !e), t.hasDaysOfMonthTarget && (t.daysOfMonthTarget.hidden = !e);
+		}
+		this.hasCalendarYearOutlet && (this.calendarYearOutletElement.hidden = !t), this.hasCalendarDecadeOutlet && (this.calendarDecadeOutletElement.hidden = !n);
+	}
+}, et = class extends e {
 	static targets = [
 		"listbox",
 		"loading",
@@ -1278,6 +1688,12 @@ var K = 7, q = {
 	initialize() {
 		this._requestor = new w();
 	}
+	connect() {
+		this.hasListboxTarget && (this.listboxNav = new d(this.listboxTarget));
+	}
+	disconnect() {
+		this._requestor.cancel();
+	}
 	onSelect(e) {
 		let t = e.target.closest("[role=\"option\"]");
 		!t || t.getAttribute("aria-disabled") === "true" || this.select(t.dataset.value ?? "");
@@ -1292,24 +1708,7 @@ var K = 7, q = {
 		});
 	}
 	onNavigate(e) {
-		if ([
-			"ArrowUp",
-			"ArrowDown",
-			"Enter",
-			" "
-		].includes(e.key)) {
-			if (e.preventDefault(), e.key === "Enter" || e.key === " ") {
-				this.listboxTarget.querySelector("[aria-selected=\"true\"]")?.click();
-				return;
-			}
-			this.step(e.key === "ArrowDown" ? 1 : -1);
-		}
-	}
-	step(e) {
-		let t = [...this.listboxTarget.querySelectorAll("[role=\"option\"]:not([aria-disabled=\"true\"]):not([hidden])")];
-		if (!t.length) return;
-		let n = this.listboxTarget.querySelector("[aria-selected=\"true\"]"), r = t.indexOf(n), i = e > 0 ? t[Math.min(r + 1, t.length - 1)] : t[Math.max(r - 1, 0)];
-		!i || i === n || (t.forEach((e) => e.setAttribute("aria-selected", "false")), i.setAttribute("aria-selected", "true"), i.scrollIntoView({ block: "nearest" }));
+		this.listboxNav?.handleKeyDown(e);
 	}
 	filter(e) {
 		if (this.urlValue) {
@@ -1333,10 +1732,7 @@ var K = 7, q = {
 	setEmpty(e) {
 		this.hasEmptyTarget && (this.emptyTarget.hidden = !e);
 	}
-	disconnect() {
-		this._requestor.cancel();
-	}
-}, ze = class extends e {
+}, tt = class extends e {
 	static targets = [
 		"hour",
 		"minute",
@@ -1372,12 +1768,12 @@ var K = 7, q = {
 	selectedValue(e) {
 		return e?.querySelector("[aria-selected=\"true\"]")?.dataset.value ?? null;
 	}
-}, Be = class extends e {
+}, nt = class extends e {
 	static targets = ["trigger"];
 	connect() {
-		X(this, { trigger: this.hasTriggerTarget ? this.triggerTarget : null });
+		Q(this, { trigger: this.hasTriggerTarget ? this.triggerTarget : null });
 	}
-}, Ve = class extends e {
+}, rt = class extends e {
 	static targets = ["anchor", "reference"];
 	static values = {
 		placement: {
@@ -1402,7 +1798,7 @@ var K = 7, q = {
 			console.error("FlipperController requires an anchor target. Add data-flipper-target=\"anchor\" to your element.");
 			return;
 		}
-		Ae(this, {
+		Le(this, {
 			element: this.referenceTarget,
 			anchor: this.anchorTarget,
 			placement: this.placementValue,
@@ -1410,12 +1806,8 @@ var K = 7, q = {
 			ariaRole: this.roleValue
 		});
 	}
-}, He = class extends e {
-	static targets = [
-		"trigger",
-		"popover",
-		"input"
-	];
+}, it = class extends e {
+	static targets = ["trigger", "input"];
 	static values = {
 		value: String,
 		minLength: {
@@ -1424,32 +1816,8 @@ var K = 7, q = {
 		}
 	};
 	static outlets = ["combobox-dropdown"];
-	connect() {
-		X(this), this.hasPopoverTarget && Q(this, {
-			element: this.popoverTarget,
-			activator: this.hasTriggerTarget ? this.triggerTarget : null
-		});
-	}
-	async dismissed() {
-		await this.close();
-	}
-	async open() {
-		this.hasPopoverTarget && await this.visibility.show();
-	}
-	async close() {
-		this.hasPopoverTarget && await this.visibility.hide();
-	}
-	async toggle() {
-		this.visibility?.visible ? await this.close() : await this.open();
-	}
-	async shown() {
-		this.hasPopoverTarget && i(this.popoverTarget);
-	}
-	async hidden() {
-		this.hasTriggerTarget && this.triggerTarget.focus();
-	}
-	async onSelect(e) {
-		e.detail?.value !== void 0 && (this.valueValue = e.detail.value), await this.close();
+	onSelect(e) {
+		e.detail?.value !== void 0 && (this.valueValue = e.detail.value);
 	}
 	onInput(e) {
 		if (e.target !== this.triggerTarget) return;
@@ -1463,7 +1831,7 @@ var K = 7, q = {
 	valueValueChanged(e) {
 		this.hasInputTarget && (this.inputTarget.value = e), this.dispatch("changed", { detail: { value: e } });
 	}
-}, Ue = class extends e {
+}, at = class extends e {
 	static targets = ["input", "toggle"];
 	static values = {
 		format: {
@@ -1480,19 +1848,19 @@ var K = 7, q = {
 		}
 	};
 	connect() {
-		U(this, {
+		B(this, {
 			type: this.formatValue,
 			options: this.optionsValue
 		}), this.format(this.readValue()), this.drawToggle();
 	}
 	formatValueChanged() {
-		this.formatter && (U(this, {
+		this.formatter && (B(this, {
 			type: this.formatValue,
 			options: this.optionsValue
 		}), this.format(this.readValue()), this.drawToggle());
 	}
 	optionsValueChanged() {
-		this.formatter && (U(this, {
+		this.formatter && (B(this, {
 			type: this.formatValue,
 			options: this.optionsValue
 		}), this.format(this.readValue()));
@@ -1532,7 +1900,7 @@ var K = 7, q = {
 		let t = this.formatter.normalize(e), n = this.revealedValue || !this.formatter.maskable() ? this.formatter.format(t) : this.formatter.mask(t);
 		this.hasInputTarget && (this.inputTarget instanceof HTMLInputElement ? this.inputTarget.value = n : this.inputTarget.textContent = n), this.dispatch("formatted", { detail: { value: n } });
 	}
-}, We = class extends e {
+}, ot = class extends e {
 	static targets = ["input", "clear"];
 	initialize() {
 		this.onInput = this.draw.bind(this), this.onEscape = this.handleEscape.bind(this);
@@ -1555,7 +1923,7 @@ var K = 7, q = {
 	handleEscape(e) {
 		e.key === "Escape" && this.inputTarget.value !== "" && (e.preventDefault(), this.clear());
 	}
-}, Ge = class extends e {
+}, st = class extends e {
 	static targets = ["modal", "overlay"];
 	initialize() {
 		this.onCancel = this.close.bind(this);
@@ -1564,7 +1932,10 @@ var K = 7, q = {
 		this.hasModalTarget || console.error("ModalController requires a modal target. Add data-modal-target=\"modal\" to your element.");
 	}
 	modalTargetConnected(e) {
-		this.isNativeDialog = e instanceof HTMLDialogElement, this.isNativeDialog ? (e.addEventListener("cancel", this.onCancel), e.addEventListener("click", this.onBackdropClick)) : (this.focusTrap = new a(e, { escapeDeactivates: !0 }), X(this, { element: e }));
+		this.isNativeDialog = e instanceof HTMLDialogElement, this.isNativeDialog ? (e.addEventListener("cancel", this.onCancel), e.addEventListener("click", this.onBackdropClick)) : (this.focusTrap = new a(e, {
+			escapeDeactivates: !0,
+			onDeactivate: () => this.close()
+		}), Q(this, { element: e }));
 	}
 	modalTargetDisconnected(e) {
 		this.isNativeDialog && (e.removeEventListener("cancel", this.onCancel), e.removeEventListener("click", this.onBackdropClick));
@@ -1579,7 +1950,7 @@ var K = 7, q = {
 				let e = this.hasOverlayTarget ? this.overlayTarget : this.modalTarget;
 				e.hidden = !1, document.body.style.overflow = "hidden", this.focusTrap && this.focusTrap.activate();
 			}
-			p("Modal opened");
+			f("Modal opened");
 		}
 	}
 	close(e) {
@@ -1591,24 +1962,24 @@ var K = 7, q = {
 				let e = this.hasOverlayTarget ? this.overlayTarget : this.modalTarget;
 				e.hidden = !0, document.body.style.overflow = "", this.focusTrap && this.focusTrap.deactivate();
 			}
-			p("Modal closed");
+			f("Modal closed");
 		}
 	}
 	onBackdropClick = (e) => {
 		let t = this.modalTarget.getBoundingClientRect();
 		(e.clientY < t.top || e.clientY > t.bottom || e.clientX < t.left || e.clientX > t.right) && this.close();
 	};
-}, Ke = class extends e {
+}, ct = class extends e {
 	static targets = ["content"];
 	connect() {
-		Ne(this, { element: this.hasContentTarget ? this.contentTarget : null });
+		Be(this, { element: this.hasContentTarget ? this.contentTarget : null });
 	}
-}, qe = class extends e {
+}, lt = class extends e {
 	static targets = [
-		"content",
+		"trigger",
+		"panel",
 		"template",
-		"loader",
-		"activator"
+		"loader"
 	];
 	static classes = ["hidden"];
 	static values = {
@@ -1621,37 +1992,61 @@ var K = 7, q = {
 		staleAfter: {
 			type: Number,
 			default: 3600
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		announceOpen: {
+			type: String,
+			default: "Panel opened"
+		},
+		announceClose: {
+			type: String,
+			default: "Panel closed"
 		}
 	};
 	connect() {
-		Te(this, {
-			element: this.hasContentTarget ? this.contentTarget : null,
+		Me(this, {
+			element: this.hasPanelTarget ? this.panelTarget : null,
 			url: this.hasUrlValue ? this.urlValue : null
-		}), this.hasContentTarget && Q(this, {
-			element: this.contentTarget,
-			activator: this.hasActivatorTarget ? this.activatorTarget : null
-		}), this.hasLoaderTarget && Q(this, {
+		}), this.hasPanelTarget && (Ue(this, {
+			element: this.panelTarget,
+			activator: this.hasTriggerTarget ? this.triggerTarget : null
+		}), Q(this)), this.hasLoaderTarget && Ue(this, {
 			element: this.loaderTarget,
 			visibility: "contentLoaderVisibility"
 		});
 	}
-	async show() {
-		await this.visibility.show();
+	async dismissed() {
+		await this.close();
 	}
-	async hide() {
-		await this.visibility.hide();
+	async open() {
+		this.hasPanelTarget && await this.visibility.show();
+	}
+	async close() {
+		this.hasPanelTarget && await this.visibility.hide();
+	}
+	async toggle() {
+		this.visibility?.visible ? await this.close() : await this.open();
+	}
+	async closeOnSelect() {
+		this.closeOnSelectValue && await this.close();
 	}
 	async shown() {
-		await this.load();
+		await this.load(), this.hasPanelTarget && i(this.panelTarget), f(this.announceOpenValue);
+	}
+	async hidden() {
+		this.hasTriggerTarget && this.triggerTarget.focus(), f(this.announceCloseValue);
 	}
 	canLoad() {
-		return this.hasContentTarget && this.contentTarget.tagName.toLowerCase() === "turbo-frame" ? (this.hasUrlValue && this.contentTarget.setAttribute("src", this.urlValue), !1) : !0;
+		return this.hasPanelTarget && this.panelTarget.tagName.toLowerCase() === "turbo-frame" ? (this.hasUrlValue && this.panelTarget.setAttribute("src", this.urlValue), !1) : !0;
 	}
 	async contentLoading() {
 		this.hasLoaderTarget && await this.contentLoaderVisibility.show();
 	}
 	async contentLoaded({ content: e }) {
-		this.hasContentTarget && this.contentTarget.replaceChildren(this.getContentNode(e)), this.hasLoaderTarget && await this.contentLoaderVisibility.hide();
+		this.hasPanelTarget && this.panelTarget.replaceChildren(this.getContentNode(e)), this.hasLoaderTarget && await this.contentLoaderVisibility.hide();
 	}
 	getContentNode(e) {
 		if (typeof e == "string") {
@@ -1663,6 +2058,63 @@ var K = 7, q = {
 	contentLoader() {
 		if (this.hasTemplateTarget) return this.templateTarget instanceof HTMLTemplateElement ? this.templateTarget.content : this.templateTarget.innerHTML;
 	}
+}, ut = class extends e {
+	static targets = [
+		"trigger",
+		"detail",
+		"time"
+	];
+	static values = { dateFormat: {
+		type: Object,
+		default: {}
+	} };
+	connect() {
+		this.rovingTabIndex = new u(this.triggerTargets, { orientation: "vertical" }), this.rovingTabIndex.activate();
+	}
+	disconnect() {
+		this.rovingTabIndex?.deactivate(), this.rovingTabIndex = null;
+	}
+	toggle(e) {
+		let t = e.currentTarget;
+		t.getAttribute("aria-expanded") === "true" ? this.collapseItem(t) : this.expandItem(t);
+	}
+	expand(e) {
+		this.expandItem(e.currentTarget);
+	}
+	collapse(e) {
+		this.collapseItem(e.currentTarget);
+	}
+	expandItem(e) {
+		let t = this.detailTargets.find((t) => t.id === e.getAttribute("aria-controls")) ?? null;
+		this.dispatch("expand", { detail: {
+			trigger: e,
+			detail: t
+		} }), g(e, !0), t && (v(t, !1), f(`${e.textContent.trim()} expanded`)), this.dispatch("expanded", { detail: {
+			trigger: e,
+			detail: t
+		} });
+	}
+	collapseItem(e) {
+		let t = this.detailTargets.find((t) => t.id === e.getAttribute("aria-controls")) ?? null;
+		this.dispatch("collapse", { detail: {
+			trigger: e,
+			detail: t
+		} }), g(e, !1), t && (v(t, !0), f(`${e.textContent.trim()} collapsed`)), this.dispatch("collapsed", { detail: {
+			trigger: e,
+			detail: t
+		} });
+	}
+	triggerTargetConnected(e) {
+		e.hasAttribute("aria-expanded") || e.setAttribute("aria-expanded", "false"), this.rovingTabIndex?.updateItems(this.triggerTargets);
+	}
+	triggerTargetDisconnected() {
+		this.rovingTabIndex?.updateItems(this.triggerTargets);
+	}
+	timeTargetConnected(e) {
+		if (!Object.keys(this.dateFormatValue).length || e.textContent.trim()) return;
+		let t = P.format(e.getAttribute("datetime"), this.dateFormatValue);
+		t && (e.textContent = t);
+	}
 };
 //#endregion
-export { y as ARIA_HASPOPUP_VALUES, $ as CalendarMonthController, Fe as CalendarMonthObserverController, Ie as ClipboardController, Le as ComboboxDateController, Re as ComboboxDropdownController, ze as ComboboxTimeController, Be as DismisserController, t as FOCUSABLE_SELECTOR, z as FORMATTER_TYPES, Ve as FlipperController, o as FocusRestoration, a as FocusTrap, H as Formatter, We as InputClearableController, He as InputComboboxController, Ue as InputFormatterController, Ge as ModalController, Ke as PannerController, qe as PopoverController, w as Requestor, d as RovingTabIndex, p as announce, S as connectTriggerToTarget, ne as disconnectTriggerFromTarget, h as ensureId, E as filterOptions, i as focusFirst, T as fuzzyMatcher, m as generateId, n as getFocusableElements, c as isActivationKey, l as isArrowKey, s as isKey, r as isVisible, u as preventDefault, g as setAriaState, v as setChecked, te as setDisabled, ee as setExpanded, _ as setPressed };
+export { y as ARIA_HASPOPUP_VALUES, Ge as CalendarDecadeController, Ke as CalendarDecadeSelectorController, qe as CalendarMonthController, Je as CalendarMonthSelectorController, Xe as CalendarYearController, Ze as CalendarYearSelectorController, Qe as ClipboardController, $e as ComboboxDateController, et as ComboboxDropdownController, tt as ComboboxTimeController, nt as DismisserController, t as FOCUSABLE_SELECTOR, I as FORMATTER_TYPES, rt as FlipperController, a as FocusTrap, z as Formatter, ot as InputClearableController, it as InputComboboxController, at as InputFormatterController, d as ListboxNavigation, st as ModalController, ct as PannerController, lt as PopoverController, w as Requestor, u as RovingTabIndex, ut as TimelineController, f as announce, S as connectTriggerToTarget, re as disconnectTriggerFromTarget, m as ensureId, E as filterOptions, i as focusFirst, T as fuzzyMatcher, p as generateId, n as getFocusableElements, s as isActivationKey, c as isArrowKey, o as isKey, r as isVisible, l as preventDefault, h as setAriaState, te as setChecked, ne as setDisabled, g as setExpanded, v as setHidden, _ as setPressed };