panelset 1.0.8 → 1.2.0

package/dist/panelset-core.js

@@ -0,0 +1,1119 @@
+//#region src/js/functions/core.ts
+var e = class {
+	constructor() {
+		this._controller = new AbortController();
+	}
+	get signal() {
+		return this._controller.signal;
+	}
+	start() {
+		return this._controller.abort(), this._controller = new AbortController(), this._controller.signal;
+	}
+	static waitForTransition(e, t) {
+		return new Promise((n) => {
+			let r = getComputedStyle(e), i = (parseFloat(r.transitionDuration) || 0) + (parseFloat(r.transitionDelay) || 0);
+			if (i === 0) return n();
+			let a = !1, o = () => {
+				a || (a = !0, e.removeEventListener("transitionend", s), n());
+			}, s = (n) => {
+				n.target === e && (t && n.propertyName !== t || o());
+			};
+			e.addEventListener("transitionend", s), setTimeout(o, (i + .05) * 1e3);
+		});
+	}
+};
+//#endregion
+//#region src/js/functions/focus.ts
+function t(e, t, n) {
+	if (!t || t !== "input" && n && !(n.type.startsWith("key") || n instanceof MouseEvent && n.detail === 0)) return;
+	let r = (e) => {
+		setTimeout(() => e.focus(), 100);
+	};
+	if (t === !0) e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), r(e);
+	else if (t === "heading") {
+		let t = e.querySelector("h1, h2, h3, h4, h5, h6");
+		t && (t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1"), r(t));
+	} else if (t === "first") {
+		let t = e.querySelector("a,button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])");
+		t && r(t);
+	} else if (t === "input") {
+		let t = e.querySelector("input:not([type=hidden]):not([disabled]),select:not([disabled]),textarea:not([disabled])");
+		t && r(t);
+	} else typeof t == "function" && setTimeout(() => t(e), 100);
+}
+//#endregion
+//#region src/js/functions/persist.ts
+var n = () => {
+	let e = new URLSearchParams(location.search).get("panel");
+	return e ? e.split(",").filter(Boolean) : [];
+}, r = (e) => {
+	let t = new URL(location.href);
+	if (t.searchParams.delete("panel"), e.length) {
+		let n = t.search ? "&" : "?";
+		history.replaceState(null, "", `${t}${n}panel=${e.join(",")}`);
+	} else history.replaceState(null, "", t);
+}, i = (e) => `${location.pathname}::${e}`, a = (e) => localStorage.getItem(i(e)), o = (e, t) => localStorage.setItem(i(e), t);
+//#endregion
+//#region src/js/functions/config.ts
+function s(e, t) {
+	switch (t) {
+		case "string": return e;
+		case "boolean": return e !== "false";
+		case "number": return parseInt(e, 10);
+		case "json": try {
+			return JSON.parse(e);
+		} catch {
+			return e !== "false";
+		}
+	}
+}
+function c(e, t) {
+	let n = {};
+	for (let [r, i] of Object.entries(t)) {
+		let [t, a] = i, o = e[t];
+		o !== void 0 && (n[r] = s(o, a));
+	}
+	return n;
+}
+function l(e, t) {
+	let n = {};
+	for (let [r, i] of Object.entries(t)) {
+		let [t, a] = i, o = t.replace(/([A-Z])/g, "-$1").toLowerCase(), c = e.getAttribute(o);
+		c !== null && (n[r] = s(c, a));
+	}
+	return n;
+}
+//#endregion
+//#region src/js/functions/utils.ts
+function u(e, t, n, r) {
+	n && console.log(`[${e}] "${t.id || "no id"}" -`, r);
+}
+function d(e, t, n) {
+	let r = t.split(/\s+/).filter(Boolean);
+	if (!r.length) return;
+	let i = (e.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean), a = !1;
+	for (let e of r) {
+		let t = i.includes(e);
+		n && !t ? (i.push(e), a = !0) : !n && t && (i.splice(i.indexOf(e), 1), a = !0);
+	}
+	a && (i.length ? e.setAttribute("aria-describedby", i.join(" ")) : e.removeAttribute("aria-describedby"));
+}
+var f = !1;
+function p(e) {
+	!e || f || (f = !0, console.log("[Panel/PanelSet] Browser supports 'interpolate-size', which will be used for opening and closing."));
+}
+function m(e) {
+	e.waitUntil = (t) => {
+		e.promise = e.promise ? Promise.all([e.promise, t]) : t;
+	};
+}
+function h(e, t, n, r, i = {}) {
+	let a = i.once === !0;
+	e.addEventListener(t, (e) => {
+		let t = e, i = n(t.detail), { signal: o } = t.detail;
+		if (a && i.dataset.loaded === "true") return;
+		let s = r(i, o);
+		s && typeof s.then == "function" && t.detail.waitUntil(s.then(() => {
+			a && (i.dataset.loaded = "true");
+		}));
+	});
+}
+//#endregion
+//#region src/js/panelset.ts
+var g, _ = class i {
+	static init(e = {}, t = {}) {
+		let n, r;
+		typeof e == "string" ? (n = e, r = t) : (r = e, n = r.selector || "[data-panelset]");
+		let a = document.querySelectorAll(n), o = [];
+		return a.forEach((e) => {
+			try {
+				i._validateElement(e);
+			} catch (e) {
+				console.error(e.message);
+				return;
+			}
+			if (e.panelSet) {
+				o.push(e.panelSet);
+				return;
+			}
+			let t = new i(e, r);
+			o.push(t);
+		}), o;
+	}
+	constructor(t, s = {}) {
+		this.hasAsyncContent = !1, this._animShow = new e(), this._animOpenClose = new e(), this._isLoadingAsync = !1, this._activating = !1, this._switchDirection = null, this._returnFocusTarget = null, this._heightObserver = null, this._verbController = new AbortController(), this._parsePanelParam = () => {
+			let e = n();
+			return this.panels.find((t) => t.id && e.includes(t.id))?.id ?? null;
+		}, this._persistState = (e) => {
+			if (this.config.persist && this.element.id && o(`ps:${this.element.id}`, e), this.config.deepLink) this._updatePanelParam(e);
+			else {
+				let e = new Set(this.panels.map((e) => e.id).filter(Boolean)), t = n();
+				t.some((t) => e.has(t)) && r(t.filter((t) => !e.has(t)));
+			}
+		}, this._updatePanelParam = (e) => {
+			let t = new Set(this.panels.map((e) => e.id).filter(Boolean));
+			r([...n().filter((e) => !t.has(e)), e].filter(Boolean));
+		}, this._resolveInitialPanel = () => {
+			let e = this._parsePanelParam();
+			if (e) return e;
+			if (this.config.persist) {
+				let { id: e } = this.element;
+				if (!e) return null;
+				let t = a(`ps:${e}`);
+				return t && this.panels.some((e) => e.id === t) ? t : null;
+			}
+			return null;
+		}, this._onActivationEdge = (e) => {
+			let { atStart: t, atEnd: n } = e.detail;
+			this._reflectVerbEndState(t, n);
+		};
+		let l;
+		if (typeof t == "string") {
+			if (l = document.querySelector(t), !l) throw Error(`PanelSet: No element found for selector "${t}"`);
+		} else l = t;
+		if (this.element = l, i._validateElement(l), l.panelSet) return console.warn("PanelSet: already initialized"), l.panelSet;
+		l.panelSet = this, i._installVerbDelegation();
+		let u = c(l.dataset, i.attrs);
+		if (this.config = {
+			...i.defaults,
+			...s,
+			...u
+		}, this.panels = this._collectPanels(), this.panels.length === 0) {
+			this.panelWrapper = this.element.querySelector(":scope > .panel-wrapper") || this._autoWrapPanels(), this._log("Initialized empty (0 panels) — ready for addPanel()"), this._dispatch("ps:ready", {
+				container: this.element,
+				instance: this
+			}), this._initVerbButtons(), this._observeTrackHeight();
+			return;
+		}
+		let d = this._resolveInitialPanel();
+		this.activePanel = (d ? this.panels.find((e) => e.id === d) : null) ?? this.panels.find((e) => e.classList.contains("active")) ?? this.panels[0], this.panelWrapper = this.element.querySelector(":scope > .panel-wrapper") || this._autoWrapPanels(), this.pendingPanel = this.activePanel, this.config.align !== "start" && (this.element.dataset.panelsetAlign = this.config.align), this.config.closable && !this.element.classList.contains("is-open") && this.element.setAttribute("inert", ""), i._nativeInterpolateSize && p(this.config.debug), this._log(`Initialized (${this.panels.length} panels)`), this._dispatch("ps:ready", {
+			container: this.element,
+			instance: this
+		}), this._internalInit(), this._initVerbButtons(), this._observeTrackHeight();
+	}
+	_observeTrackHeight() {
+		let e = this.element.closest("[data-panelset-trackheight]");
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = e.clientWidth, n = 0;
+		this._heightObserver = new ResizeObserver(() => {
+			let r = e.clientWidth;
+			r !== t && (t = r, cancelAnimationFrame(n), n = requestAnimationFrame(() => this._updateHighestPanel()));
+		}), this._heightObserver.observe(e);
+	}
+	_log(e) {
+		u("PanelSet", this.element, this.config.debug, e);
+	}
+	get _isClosed() {
+		return this.config.closable && !this.element.classList.contains("is-open") && !this.element.classList.contains("is-opening");
+	}
+	static _validateElement(e) {
+		if (!e.hasAttribute("data-panelset") && !e.tagName.includes("-")) throw Error("PanelSet: element must have [data-panelset] or be a custom element");
+	}
+	_autoWrapPanels() {
+		let e = document.createElement("div");
+		return e.className = "panel-wrapper", this.panels.forEach((t) => e.appendChild(t)), this.element.appendChild(e), e;
+	}
+	_collectPanels() {
+		return Array.from(this.element.querySelectorAll("[role=\"tabpanel\"]")).filter((e) => e.closest("[data-panelset], ps-panelset, [data-panel], ps-panel") === this.element);
+	}
+	_internalInit() {
+		this.panels.forEach((e) => {
+			e.classList.remove("fade", "incoming", "outgoing", "levelup", "leveldown"), e === this.activePanel ? (e.hidden = !1, e.classList.add("active")) : (e.hidden = !0, e.classList.remove("active"));
+		}), this.element.style.height = "", this._updateHighestPanel(), this.config.manageTriggers && this._updateTabTriggers(this.activePanel), this.config.manageLabels && this._reflectLabels();
+	}
+	_dispatch(e, t) {
+		this.element.dispatchEvent(new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			cancelable: !1
+		}));
+	}
+	_getVerticalMetrics(e) {
+		if (!e) return 0;
+		let t = getComputedStyle(e);
+		return (parseFloat(t.paddingTop) || 0) + (parseFloat(t.paddingBottom) || 0) + (parseFloat(t.borderTopWidth) || 0) + (parseFloat(t.borderBottomWidth) || 0);
+	}
+	_measureHeight(e) {
+		let t = e.offsetHeight;
+		return t += this._getVerticalMetrics(this.panelWrapper), t += this._getVerticalMetrics(this.element), t;
+	}
+	_updateHighestPanel() {
+		if (this.element.hasAttribute("data-panelset-trackheight")) {
+			console.warn("PanelSet: data-panelset-trackheight on parent only");
+			return;
+		}
+		let e = this.element.closest("[data-panelset-trackheight]");
+		if (!e) return;
+		this.panels.forEach((e) => {
+			e.hidden = !0, e.classList.remove("active");
+		});
+		let t = 0;
+		this.panels.forEach((e) => {
+			e.hidden = !1, e.classList.add("active"), e.style.visibility = "hidden";
+			let n = this.element.offsetHeight;
+			n > t && (t = n), e.hidden = !0, e.classList.remove("active"), e.style.visibility = "";
+		}), this.activePanel && (this.activePanel.hidden = !1, this.activePanel.classList.add("active")), e.style.setProperty("--ps-max-height", `${t}px`), this._log(`Max container height: ${t}px`);
+	}
+	_updateTabTriggers(e) {
+		this.panels.forEach((t) => {
+			t.id && document.querySelectorAll(`[aria-controls="${t.id}"]`).forEach((n) => {
+				n.setAttribute("aria-selected", String(t === e));
+			});
+		});
+	}
+	_reflectLabels() {
+		this.panels.forEach((e) => {
+			if (!e.id || e.hasAttribute("aria-labelledby") || e.hasAttribute("aria-label")) return;
+			let t = Array.from(document.querySelectorAll(`[aria-controls="${e.id}"]`));
+			if (t.length === 0) return;
+			let n = t.filter((e) => e.getAttribute("role") === "tab"), r = n.length === 1 ? n[0] : t.length === 1 ? t[0] : null;
+			r && (r.id || (r.id = this._uniqueId(`${e.id}-tab`)), e.setAttribute("aria-labelledby", r.id));
+		});
+	}
+	_uniqueId(e) {
+		let t = e, n = 2;
+		for (; document.getElementById(t);) t = `${e}-${n++}`;
+		return t;
+	}
+	_setTriggersActivating(e) {
+		this.panels.forEach((t) => {
+			t.id && document.querySelectorAll(`[aria-controls="${t.id}"]`).forEach((t) => {
+				t.classList.toggle("is-activating", e);
+			});
+		});
+	}
+	_cleanupPanels(e) {
+		this.panels.forEach((t) => {
+			t.classList.remove("fade", "incoming", "outgoing", "levelup", "leveldown"), t === e ? (t.classList.add("active"), t.hidden = !1, t.removeAttribute("inert")) : (t.classList.remove("active"), t.hidden = !0);
+		}), this.element.style.height = "", this.element.classList.remove("is-transitioning"), this.activePanel = e, this.config.manageTriggers && this._updateTabTriggers(e);
+	}
+	_resolveAutoFocus(e, t) {
+		if (this.config.manageTriggers) {
+			let t = e?.getAttribute("data-auto-focus");
+			if (t != null) {
+				if (t === "true") return !0;
+				if (t === "false") return !1;
+				if (t === "heading" || t === "first" || t === "input") return t;
+			}
+		}
+		return t === void 0 ? this.config.autoFocus : t;
+	}
+	_handleAutoFocus(e, n, r) {
+		t(e, n, r);
+	}
+	_animateOpenClose(t, n, r) {
+		let a = t ? "opening" : "closing", o = `is-${t ? "closing" : "opening"}`, s = `is-${a}`;
+		this._log(t ? "Opening" : "Closing");
+		let c = this._animOpenClose.start(), l = this.element.classList.contains(o) ? this.element.offsetHeight : null, u = t ? null : this.element.offsetHeight;
+		this.element.classList.remove(o), t || this.element.classList.remove("is-open"), t && this.element.removeAttribute("inert");
+		let d = () => {
+			this.element.setAttribute("inert", "");
+			let e = r instanceof PointerEvent && r.pointerType !== "";
+			this.config.returnFocus && this._returnFocusTarget && !e && this._returnFocusTarget.focus();
+		};
+		if (n && this.config.transitions) if (this.element.classList.add(s), i._nativeInterpolateSize) t ? (this.element.style.height = l === null ? "0px" : `${l}px`, requestAnimationFrame(() => {
+			this.element.style.height = "", e.waitForTransition(this.element, "height").then(() => {
+				c.aborted || (this.panelWrapper ? e.waitForTransition(this.panelWrapper) : Promise.resolve()).then(() => {
+					c.aborted || (this.element.classList.remove(s), this.element.classList.add("is-open"), this.element.offsetHeight);
+				});
+			});
+		})) : (this.element.style.height = l === null ? `${u}px` : `${l}px`, requestAnimationFrame(() => {
+			this.element.style.height = "", e.waitForTransition(this.element, "height").then(() => {
+				c.aborted || (this.element.classList.remove(s), this.element.offsetHeight, d());
+			});
+		}));
+		else {
+			let n = t ? this._measureHeight(this.pendingPanel) : 0, r = l === null ? t ? this.element.offsetHeight : u ?? 0 : l;
+			this.element.style.height = `${r}px`, getComputedStyle(this.element).height, requestAnimationFrame(() => {
+				this.element.style.height = `${n}px`, e.waitForTransition(this.element).then(() => {
+					c.aborted || (this.element.style.height = "", this.element.classList.remove(s), t && this.element.classList.add("is-open"), this.element.offsetHeight, t || d());
+				});
+			});
+		}
+		else t ? this.element.classList.add("is-open") : (this.element.classList.remove("is-open"), d()), this.element.style.height = "";
+	}
+	getActive() {
+		return this.pendingPanel?.id || null;
+	}
+	refresh() {
+		let e = this.activePanel;
+		this.panels = this._collectPanels(), this.panels.length !== 0 && (this.activePanel = e && this.panels.includes(e) ? e : this.panels.find((e) => e.classList.contains("active")) ?? this.panels[0], this.pendingPanel = this.activePanel, this.panelWrapper = this.element.querySelector(":scope > .panel-wrapper") || this.panelWrapper, this._internalInit(), this._reflectEnds(), this._log(`Refreshed (${this.panels.length} panels)`));
+	}
+	addPanel(e, t) {
+		e.hasAttribute("role") || e.setAttribute("role", "tabpanel");
+		let n = null;
+		return t?.before ? n = this.panels.find((e) => e.id === t.before) ?? null : t?.after ? n = this.panels.find((e) => e.id === t.after)?.nextElementSibling ?? null : typeof t?.index == "number" && (n = this.panels[t.index] ?? null), (this.panelWrapper || this._autoWrapPanels()).insertBefore(e, n), this.refresh(), e;
+	}
+	removePanel(e) {
+		let t = this.panels.find((t) => t.id === e);
+		t && (t.remove(), this.refresh());
+	}
+	destroy() {
+		this._animShow.start(), this._animOpenClose.start(), this._heightObserver?.disconnect(), this._heightObserver = null, this._verbController.abort(), delete this.element.panelSet, this._log("Destroyed");
+	}
+	_edgeInfo(e) {
+		let t = this.panels.length, n = e ? this.panels.indexOf(e) : -1;
+		return {
+			index: n,
+			total: t,
+			atStart: n <= 0,
+			atEnd: n === t - 1
+		};
+	}
+	static _installVerbDelegation() {
+		i._verbDelegationInstalled || (i._verbDelegationInstalled = !0, document.addEventListener("click", i._onVerbClick));
+	}
+	static _resolveVerbSet(e, t) {
+		let n = e.getAttribute(`data-ps-${t}`);
+		return n ? document.querySelector(n) : e.closest("[data-panelset], ps-panelset");
+	}
+	_initVerbButtons() {
+		let { signal: e } = this._verbController;
+		this.element.addEventListener("ps:activationstart", this._onActivationEdge, { signal: e }), this.element.addEventListener("ps:activationcomplete", this._onActivationEdge, { signal: e }), this._reflectEnds();
+	}
+	_reflectEnds() {
+		let { atStart: e, atEnd: t } = this._edgeInfo(this.pendingPanel);
+		this._reflectVerbEndState(e, t);
+	}
+	_reflectVerbEndState(e, t) {
+		if (this.config.loop) return;
+		let n = this._verbButtonsFor("prev"), r = this._verbButtonsFor("next");
+		if (this.config.disabledMode !== "native") {
+			n.forEach((t) => this._applyVerbDisabled(t, e)), r.forEach((e) => this._applyVerbDisabled(e, t));
+			return;
+		}
+		e || n.forEach((e) => this._applyVerbDisabled(e, !1)), t || r.forEach((e) => this._applyVerbDisabled(e, !1)), e && this._disableVerbNative(n, t ? [] : r), t && this._disableVerbNative(r, e ? [] : n);
+	}
+	_applyVerbDisabled(e, t) {
+		this.config.disabledMode === "native" ? t ? e.setAttribute("disabled", "") : e.removeAttribute("disabled") : e.setAttribute("aria-disabled", String(t));
+		let n = e.getAttribute("data-ps-disabled-hint");
+		n && d(e, n, t);
+	}
+	_disableVerbNative(e, t) {
+		e.forEach((e) => {
+			!e.hasAttribute("disabled") && document.activeElement === e && (t.find((e) => !e.hasAttribute("disabled")) ?? this._verbFocusFallback())?.focus(), this._applyVerbDisabled(e, !0);
+		});
+	}
+	_verbFocusFallback() {
+		let e = this.pendingPanel ?? this.activePanel;
+		return e ? (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e) : null;
+	}
+	_verbButtonsFor(e) {
+		return Array.from(document.querySelectorAll(`[data-ps-${e}]`)).filter((t) => i._resolveVerbSet(t, e) === this.element);
+	}
+	next(e) {
+		this._step(1, e);
+	}
+	prev(e) {
+		this._step(-1, e);
+	}
+	_step(e, t) {
+		let n = this.panels.length;
+		if (n === 0) return;
+		let r = this.panels.indexOf(this.pendingPanel), i = (r === -1 ? 0 : r) + e, a = !1;
+		if (i < 0 || i >= n) {
+			if (!this.config.loop) return;
+			i = (i + n) % n, a = !0;
+		}
+		let o = this.panels[i];
+		o && o !== this.pendingPanel && this.show(o.id, a ? {
+			...t,
+			direction: e > 0 ? "forward" : "backward"
+		} : t);
+	}
+	open(t) {
+		let { event: n, transition: r = !0, autoFocus: i } = t || {};
+		if (!this.config.closable) {
+			this._log("Not closable");
+			return;
+		}
+		let a = this._isClosed, o = this.element.classList.contains("is-closing"), s = this.element.classList.contains("is-loading");
+		if (!a && !o || this.element.classList.contains("is-transitioning") && !s) return;
+		let c = n?.target instanceof HTMLElement ? n.target.closest("button, a, [role=\"tab\"]") ?? n.target : null, l = this._resolveAutoFocus(c, i);
+		c && (this._returnFocusTarget = c), this._animateOpenClose(!0, r), l !== !1 && l !== void 0 && this.pendingPanel && (r && this.config.transitions ? e.waitForTransition(this.element).then(() => {
+			this._handleAutoFocus(this.pendingPanel, l, n);
+		}) : this._handleAutoFocus(this.pendingPanel, l, n));
+	}
+	close(e) {
+		let { transition: t = !0, event: n } = e || {};
+		if (!this.config.closable) {
+			this._log("Not closable");
+			return;
+		}
+		let r = this._isClosed, i = this.element.classList.contains("is-closing"), a = this.element.classList.contains("is-opening"), o = this.element.classList.contains("is-loading");
+		(r || i) && !a || this.element.classList.contains("is-transitioning") && !o || this._animateOpenClose(!1, t, n);
+	}
+	toggle(e) {
+		let { event: t, transition: n = !0, autoFocus: r } = e || {}, i = this._isClosed, a = this.element.classList.contains("is-closing");
+		i || a ? this.open({
+			event: t,
+			transition: n,
+			autoFocus: r
+		}) : this.close({
+			transition: n,
+			event: t
+		});
+	}
+	onBeforeOpen(e, t = {}) {
+		this.hasAsyncContent = !0, h(this.element, "ps:beforeopen", (e) => e.targetPanel, e, t);
+	}
+	async show(t, n) {
+		if (this.config.interruptible === !1 && this._activating) return;
+		let { event: r, transition: i = !0, autoFocus: a, direction: o } = n || {}, s = r?.target instanceof HTMLElement ? r.target.closest("button, a, [role=\"tab\"]") ?? r.target : null, c = this._resolveAutoFocus(s, a), l = this.panels.find((e) => e.id === t);
+		if (!l) {
+			this._log(`Panel not found: ${t}`);
+			return;
+		}
+		let u = new CustomEvent("ps:beforeactivate", {
+			detail: {
+				panelId: t,
+				targetPanel: l,
+				outgoingPanel: this.activePanel ?? null,
+				trigger: s
+			},
+			bubbles: !0,
+			cancelable: !0
+		});
+		if (!this.element.dispatchEvent(u)) {
+			this._log(`Vetoed by ps:beforeactivate: ${t}`);
+			return;
+		}
+		let d = this._isClosed, f = this.element.classList.contains("is-closing"), p = this.element.classList.contains("is-loading");
+		if (l === this.pendingPanel) {
+			d || f ? this.open({
+				event: r,
+				transition: i,
+				autoFocus: c
+			}) : this.config.closable && this.config.closeOnTab && this.close({
+				transition: i,
+				event: r
+			});
+			return;
+		}
+		if ((this.element.classList.contains("is-opening") || f) && !p) return;
+		if (d) {
+			this.pendingPanel = l, this._cleanupPanels(l), this.open({
+				event: r,
+				transition: i,
+				autoFocus: c
+			});
+			return;
+		}
+		let h = this._activating;
+		this._activating = !0, this.config.manageTriggers && this.config.interruptible === !1 && this._setTriggersActivating(!0);
+		let g = this.pendingPanel, _ = g?.id;
+		this.pendingPanel = l;
+		let v = h && l === this.activePanel && g !== l;
+		this.config.manageTriggers && this._updateTabTriggers(l), this._persistState(t), this.element.classList.remove("is-loading"), !v && g && g !== this.activePanel && g !== l && (g.classList.remove("incoming", "outgoing", "levelup", "leveldown"), g.hidden || g.classList.remove("active"));
+		let y = this._isLoadingAsync, b = this._animShow.signal.aborted, x = this._animShow.start();
+		!b && y && _ && _ !== t && this._dispatch("ps:activationaborted", {
+			panelId: _,
+			trigger: s
+		}), this._isLoadingAsync = !1, this._log(`${g?.id || "none"} > ${t}`);
+		let S = {
+			panelId: t,
+			targetPanel: l,
+			outgoingPanel: g,
+			signal: x,
+			promise: null,
+			waitUntil() {}
+		};
+		m(S);
+		let C = new CustomEvent("ps:beforeopen", {
+			detail: S,
+			bubbles: !0,
+			cancelable: !1
+		});
+		this.element.dispatchEvent(C);
+		let w = S.promise;
+		if (w) {
+			this._isLoadingAsync = !0, this._log("Waiting for content..."), this.element.style.setProperty("--ps-loading-delay", `${this.config.loadingDelay}ms`), this.element.classList.add("is-loading");
+			let n = null, r = i !== !1 && this.config.transitions !== !1, a = r;
+			if (typeof this.config.transitions == "object" && (a = r && this.config.transitions.height !== !1), a) if (d) this.element.classList.add("is-open", "is-opening"), this.element.style.height = "0px", requestAnimationFrame(() => {
+				this.element.style.height = `${this.config.loadingHeight}px`;
+			}), n = e.waitForTransition(this.element, "height");
+			else {
+				let t = this.element.offsetHeight, r = Math.max(t, this.config.loadingHeight);
+				r > t && (this.element.style.height = `${t}px`, requestAnimationFrame(() => {
+					this.element.style.height = `${r}px`;
+				}), n = e.waitForTransition(this.element, "height"));
+			}
+			try {
+				if (await Promise.all([w, n].filter(Boolean)), x.aborted) {
+					this._log(`Aborted during load: ${t}`), this.element.classList.remove("is-loading"), this.element.style.removeProperty("--ps-loading-delay");
+					return;
+				}
+				this._log("Content loaded"), l.dataset.loaded === "true" && this._updateHighestPanel();
+			} catch (e) {
+				let t = e;
+				this._log(`Load failed: ${t.message}`), this.element.classList.remove("is-loading"), this.element.style.removeProperty("--ps-loading-delay"), t.name !== "AbortError" && console.error("Panel load error:", e), this._activating = !1, this.config.manageTriggers && this.config.interruptible === !1 && this._setTriggersActivating(!1);
+				return;
+			}
+			this.element.classList.remove("is-loading"), this.element.style.removeProperty("--ps-loading-delay"), this.element.classList.remove("is-opening");
+		}
+		if (x.aborted) {
+			this._log(`Aborted: ${t}`);
+			return;
+		}
+		let T = v ? g : this.activePanel;
+		this._dispatch("ps:activationstart", {
+			panelId: t,
+			trigger: s,
+			outgoingPanel: T,
+			...this._edgeInfo(l)
+		});
+		let E = i !== !1 && this.config.transitions !== !1, D = E, O = E;
+		typeof this.config.transitions == "object" && (D = E && this.config.transitions.panels !== !1, O = E && this.config.transitions.height !== !1), this.panels.forEach((e) => e.classList.toggle("fade", D));
+		let k = null;
+		if (v) k = this._switchDirection === "leveldown" ? "levelup" : "leveldown";
+		else if (this.config.levels && T && T !== l) if (o) k = o === "forward" ? "levelup" : "leveldown";
+		else {
+			let e = this.panels.indexOf(T), t = this.panels.indexOf(l);
+			e !== -1 && t !== -1 && e !== t && (k = t > e ? "levelup" : "leveldown");
+		}
+		this._switchDirection = k, this.panels.forEach((e) => e.classList.remove("outgoing", "levelup", "leveldown"));
+		let A = this.element.offsetHeight;
+		O && (this.element.style.height = `${A}px`), l.hidden = !1, l.setAttribute("inert", ""), l.classList.add("incoming"), k && l.classList.add(k), D && this.element.classList.add("is-transitioning"), T && T !== l && (T.classList.remove("active", "incoming"), T.classList.add("outgoing"), k && T.classList.add(k), T.hidden = !1, T.setAttribute("inert", "")), requestAnimationFrame(() => requestAnimationFrame(() => {
+			l.classList.add("active"), T && T !== l && T.classList.remove("incoming");
+			let n = this._measureHeight(l), i = A !== n;
+			O && (this.element.style.height = `${n}px`);
+			let a = [];
+			D && a.push(e.waitForTransition(l)), O && i && a.push(e.waitForTransition(this.element)), a.length || a.push(Promise.resolve()), Promise.all(a).then(() => {
+				if (x.aborted) {
+					this._log(`Interrupted: ${t}`);
+					return;
+				}
+				this._cleanupPanels(l), this._log(`✓ ${t}`), c !== !1 && c !== void 0 && this._handleAutoFocus(l, c, r), this._activating = !1, this.config.manageTriggers && this.config.interruptible === !1 && this._setTriggersActivating(!1), this._dispatch("ps:activationcomplete", {
+					panelId: t,
+					trigger: s,
+					outgoingPanel: T,
+					...this._edgeInfo(l)
+				});
+			});
+		}));
+	}
+};
+g = _, g.defaults = {
+	align: "start",
+	transitions: !0,
+	levels: !1,
+	loop: !1,
+	closable: !1,
+	closeOnTab: !1,
+	disabledMode: "aria",
+	loadingHeight: 150,
+	loadingDelay: 320,
+	returnFocus: !1,
+	autoFocus: !1,
+	persist: !1,
+	deepLink: !1,
+	interruptible: !0,
+	manageTriggers: !0,
+	manageLabels: !0,
+	debug: !1
+}, g._nativeInterpolateSize = typeof CSS < "u" && CSS.supports("interpolate-size: allow-keywords"), g._verbDelegationInstalled = !1, g.attrs = {
+	align: ["panelsetAlign", "string"],
+	transitions: ["transitions", "json"],
+	levels: ["psLevels", "boolean"],
+	loop: ["psLoop", "boolean"],
+	closable: ["closable", "boolean"],
+	closeOnTab: ["closeOnTab", "boolean"],
+	disabledMode: ["psDisabledMode", "string"],
+	loadingHeight: ["loadingHeight", "number"],
+	loadingDelay: ["loadingDelay", "number"],
+	autoFocus: ["autoFocus", "string"],
+	returnFocus: ["returnFocus", "boolean"],
+	persist: ["panelPersist", "boolean"],
+	deepLink: ["panelDeeplink", "boolean"],
+	interruptible: ["interruptible", "boolean"],
+	manageTriggers: ["manageTriggers", "boolean"],
+	manageLabels: ["manageLabels", "boolean"],
+	debug: ["debug", "boolean"]
+}, g._onVerbClick = (e) => {
+	let t = e.target;
+	if (!(t instanceof Element)) return;
+	let n = t.closest("[data-ps-next], [data-ps-prev], [data-ps-close]");
+	if (!n || n.getAttribute("aria-disabled") === "true") return;
+	let r = n.hasAttribute("data-ps-next") ? "next" : n.hasAttribute("data-ps-prev") ? "prev" : "close", i = g._resolveVerbSet(n, r), a = i?.panelSet;
+	if (!a) {
+		i && u("PanelSet", i, i.dataset.debug != null && i.dataset.debug !== "false", `data-ps-${r}: PanelSet is not initialised. Add a PanelSet.init().`);
+		return;
+	}
+	a[r]({ event: e });
+};
+//#endregion
+//#region src/js/functions/pinning.ts
+var v = (e) => {
+	let t = e.parentElement;
+	return t?.querySelector("[data-panel-body]") ? Array.from(t.children).find((e) => e instanceof HTMLElement && e.hasAttribute("data-panel-body")) ?? null : null;
+}, y = (e) => {
+	let t = Array.from(e.querySelectorAll("[data-panel-pin]"));
+	t.length && t.map((e) => ({
+		el: e,
+		pin: e.dataset.panelPin,
+		w: e.offsetWidth
+	})).forEach(({ el: e, pin: t, w: n }) => {
+		e.style.boxSizing = "border-box", e.style.width = `${n}px`, t === "end" && (e.style.marginLeft = `calc(100% - ${n}px)`);
+	});
+}, b = (e) => {
+	e.querySelectorAll("[data-panel-pin]").forEach((e) => {
+		e.style.boxSizing = "", e.style.width = "", e.style.marginLeft = "";
+	});
+}, x;
+function S(e, t) {
+	let { groupSelector: n, scopeSelector: r = n, itemSelector: i, filter: a } = t, o = (e, t) => {
+		if (e.closest(r) !== t) return !1;
+		let n = e.parentElement?.closest(i);
+		return !n || !t.contains(n);
+	}, s = e.closest(n);
+	return !s || !o(e, s) ? [] : [...s.querySelectorAll(i)].filter((t) => t !== e && o(t, s) && (a ? a(t) : !0));
+}
+var C = class i {
+	static init(e = "[data-panel]", t = {}) {
+		let n, r;
+		return typeof e == "string" ? (n = e, r = t) : (r = e, n = "[data-panel]"), Array.from(document.querySelectorAll(n)).filter((e) => !e.panel).filter((e) => !e.dataset.panel || e.dataset.panel === "data-panel").map((e) => new i(e, r));
+	}
+	constructor(t, s = {}) {
+		this._returnFocusTarget = null, this._tempCloseGroup = null, this._anim = new e(), this._listenerController = new AbortController(), this._activating = !1, this._parsePanelParam = () => {
+			let { id: e } = this.element;
+			return e ? n().includes(e) : !1;
+		}, this._updatePanelParam = (e) => {
+			let { id: t } = this.element;
+			if (!t) return;
+			let i = n();
+			r(e ? [...new Set([...i, t])] : i.filter((e) => e !== t));
+		}, this._resolveStateConfig = () => {
+			let e = (e) => this.element.hasAttribute(e) ? this.element.getAttribute(e) !== "false" : void 0, t = e("data-panel-persist"), n = e("data-panel-deeplink"), r, i, a = this.element.parentElement;
+			for (; a && !a.hasAttribute("data-panel");) {
+				if (a.hasAttribute("data-panel-group")) {
+					a.hasAttribute("data-panel-persist") && (r = a.getAttribute("data-panel-persist") !== "false"), a.hasAttribute("data-panel-deeplink") && (i = a.getAttribute("data-panel-deeplink") !== "false");
+					break;
+				}
+				a = a.parentElement;
+			}
+			return {
+				persist: t ?? r ?? this.config.persist,
+				deepLink: n ?? i ?? this.config.deepLink
+			};
+		}, this._persistState = (e) => {
+			if (!this.element.id) return;
+			let { persist: t, deepLink: n } = this._resolveStateConfig();
+			t && o(`panel:${this.element.id}`, e ? "open" : "closed"), n ? this._updatePanelParam(e) : !e && this._parsePanelParam() && this._updatePanelParam(!1);
+		}, this._resolveInitialState = () => {
+			let { id: e } = this.element;
+			if (!e) return !1;
+			if (this._parsePanelParam()) return !0;
+			let { persist: t } = this._resolveStateConfig();
+			return !!(t && a(`panel:${e}`) === "open");
+		}, this._cssProp = () => this.config.axis === "horizontal" ? "width" : "height";
+		let l = typeof t == "string" ? document.querySelector(t) : t;
+		if (!l) throw Error(`Panel: No element found for selector "${t}"`);
+		if (this.element = l, l.panel = this, !l.querySelector(":scope > .panel-wrapper")) {
+			let e = document.createElement("div");
+			e.className = "panel-wrapper", e.append(...Array.from(l.childNodes)), l.appendChild(e);
+		}
+		let u = c(l.dataset, i.attrs);
+		this.config = {
+			...i.defaults,
+			...s,
+			...u
+		}, this.config.axis === "horizontal" && (l.dataset.panelAxis = "horizontal"), this.config.align !== "start" && (l.dataset.panelAlign = this.config.align), this._wireImplicitTriggers(), this._bindTriggers(), this._resolveInitialState() || this.element.classList.contains("is-open") ? (this.element.classList.add("is-open"), this.element.removeAttribute("inert"), this._setTriggerState(!0), this.element.classList.add("is-restored"), requestAnimationFrame(() => requestAnimationFrame(() => this.element.classList.remove("is-restored"))), this._dispatch("panel:opened")) : this.element.setAttribute("inert", ""), i._nativeInterpolateSize && p(this.config.debug), this._log("Initialized");
+	}
+	_log(e) {
+		u("Panel", this.element, this.config.debug, e);
+	}
+	_wireImplicitTriggers() {
+		let e = (e) => e.hasAttribute("data-panel") || !!e.panel, t = (e) => {
+			this.element.id || (this.element.id = `panel-${++i._autoIdCounter}`), e.setAttribute("aria-controls", this.element.id), e.hasAttribute("aria-expanded") || e.setAttribute("aria-expanded", "false"), e.removeAttribute("data-panel-trigger");
+		}, n = (e) => e.hasAttribute("data-panel-trigger") ? e : /^H[1-6]$/.test(e.tagName) ? e.querySelector(":scope > [data-panel-trigger]") : null;
+		for (let r of ["previousElementSibling", "nextElementSibling"]) {
+			let i = this.element[r];
+			for (; i && !e(i);) {
+				let e = n(i);
+				if (e) {
+					t(e);
+					break;
+				}
+				i = i[r];
+			}
+		}
+	}
+	_bindTriggers() {
+		let e = this.element.id;
+		if (!e) return;
+		let { signal: t } = this._listenerController;
+		document.querySelectorAll(`[aria-controls="${e}"]`).forEach((e) => {
+			e.addEventListener("click", (t) => {
+				this._returnFocusTarget = e, this.toggle(t);
+			}, { signal: t });
+		}), this.element.querySelectorAll("[data-panel-close]").forEach((e) => {
+			e.closest("[data-panel]") === this.element && e.addEventListener("click", () => this.close(), { signal: t });
+		}), this.config.closeOnResize && window.addEventListener("resize", () => {
+			if (!this.isOpen || this.element.classList.contains("is-closing")) return;
+			let e = v(this.element);
+			e && b(e), this.close();
+		}, { signal: t });
+	}
+	_setTriggerState(e) {
+		let t = this.element.id;
+		t && document.querySelectorAll(`[aria-controls="${t}"]`).forEach((t) => t.setAttribute("aria-expanded", String(e)));
+	}
+	_cleanupTempClose() {
+		this._tempCloseGroup && (this._tempCloseGroup.style.removeProperty("--ps-tempclose-speed"), this._tempCloseGroup.style.removeProperty("--ps-tempclose-timing"), this._tempCloseGroup = null);
+	}
+	_closeGroupSiblings() {
+		let e = this.element.closest("[data-panel-group]"), t = e?.hasAttribute("data-panel-close-siblings") ?? !1;
+		if (!this.config.closeSiblings && !t) return;
+		let n = e ? S(this.element, {
+			groupSelector: "[data-panel-group]",
+			itemSelector: "[data-panel]",
+			filter: (e) => !!e.panel?.isOpen
+		}) : Array.from(this.element.parentElement?.children ?? []).filter((e) => e instanceof HTMLElement && e !== this.element && !!e.panel?.isOpen);
+		n.length && e && (e.style.setProperty("--ps-tempclose-speed", "var(--ps-open-speed)"), e.style.setProperty("--ps-tempclose-timing", "var(--ps-open-timing)"), this._tempCloseGroup = e), n.forEach((e) => {
+			e.panel._returnFocusTarget = null, e.panel.close();
+		});
+	}
+	_handleAutoFocus(e) {
+		this.config.autoFocus && t(this.element, this.config.autoFocus, e);
+	}
+	_dispatch(e) {
+		(e === "panel:opened" || e === "panel:closed") && (this._activating = !1);
+		let t = { trigger: this._returnFocusTarget };
+		this.element.dispatchEvent(new CustomEvent(e, {
+			detail: t,
+			bubbles: !0
+		}));
+	}
+	get isOpen() {
+		return this.element.classList.contains("is-open") || this.element.classList.contains("is-opening");
+	}
+	async open(e) {
+		if (this.isOpen && !this.element.classList.contains("is-closing") || this.config.interruptible === !1 && this._activating) return;
+		this._activating = !0;
+		let t = this._anim.start(), n = this._cssProp(), r = {
+			signal: t,
+			promise: null,
+			waitUntil() {},
+			trigger: this._returnFocusTarget
+		};
+		m(r), this.element.dispatchEvent(new CustomEvent("panel:beforeopen", {
+			detail: r,
+			bubbles: !0
+		})), r.promise ? await this._openAsync(t, n, r.promise, e) : this._openSync(t, n, e);
+	}
+	async _openAsync(t, n, r, a) {
+		let o = await Promise.race([r.then(() => !0), new Promise((e) => {
+			let n = setTimeout(() => e(!1), this.config.loadingDelay);
+			t.addEventListener("abort", () => clearTimeout(n));
+		})]).catch(() => !1);
+		if (t.aborted) return;
+		if (o) {
+			this._openSync(t, n, a);
+			return;
+		}
+		this.element.classList.remove("is-closing"), this.element.removeAttribute("inert"), this.element.classList.add("is-loading"), this.element.querySelector(":scope > .panel-wrapper")?.replaceChildren(), this.element.style.setProperty("--ps-loading-delay", "0ms"), this._setTriggerState(!0), this._persistState(!0), this._dispatch("panel:opening");
+		let s = v(this.element);
+		s && y(s);
+		let c;
+		this.config.transitions ? (this.element.classList.add("is-opening"), this.element.style[n] = "0px", getComputedStyle(this.element)[n], requestAnimationFrame(() => {
+			this.element.style[n] = `${this.config.loadingHeight}px`;
+		}), c = e.waitForTransition(this.element, n)) : this.element.style[n] = `${this.config.loadingHeight}px`;
+		try {
+			await Promise.all([r, c].filter(Boolean));
+		} catch {} finally {
+			this.element.classList.remove("is-loading"), this.element.style.removeProperty("--ps-loading-delay");
+		}
+		if (t.aborted) return;
+		let l = this.element.getBoundingClientRect(), u = n === "height" ? l.height : l.width;
+		if (this.element.style[n] = "", this.config.transitions) if (i._nativeInterpolateSize) e.waitForTransition(this.element, n).then(() => {
+			t.aborted || (this.element.classList.remove("is-opening"), this.element.classList.add("is-open"), this._dispatch("panel:opened"), this._log("Opened"), this._handleAutoFocus(a));
+		});
+		else {
+			this.element.style[n] = "auto";
+			let r = this.element.getBoundingClientRect(), i = n === "height" ? r.height : r.width;
+			this.element.style[n] = `${u}px`, getComputedStyle(this.element)[n], requestAnimationFrame(() => {
+				this.element.style[n] = `${i}px`, e.waitForTransition(this.element, n).then(() => {
+					t.aborted || (this.element.style[n] = "", this.element.classList.remove("is-opening"), this.element.classList.add("is-open"), this._dispatch("panel:opened"), this._log("Opened"), this._handleAutoFocus(a));
+				});
+			});
+		}
+		else this.element.classList.remove("is-opening"), this.element.classList.add("is-open"), this._dispatch("panel:opened"), this._log("Opened"), this._handleAutoFocus(a);
+	}
+	_openSync(t, n, r) {
+		let a = this.element.classList.contains("is-closing") ? this.element.getBoundingClientRect()[n === "height" ? "height" : "width"] : null;
+		this.element.classList.remove("is-closing"), this.element.removeAttribute("inert");
+		let o = v(this.element);
+		if (this.config.transitions) if (i._nativeInterpolateSize) this.element.classList.add("is-opening"), this.element.style[n] = a === null ? "0px" : `${a}px`, o && y(o), getComputedStyle(this.element)[n], this._setTriggerState(!0), this._persistState(!0), this._closeGroupSiblings(), this._dispatch("panel:opening"), requestAnimationFrame(() => {
+			this.element.style[n] = "", e.waitForTransition(this.element, n).then(() => {
+				t.aborted || (this.element.classList.remove("is-opening"), this.element.classList.add("is-open"), this._dispatch("panel:opened"), this._cleanupTempClose(), this._log("Opened"), this._handleAutoFocus(r));
+			});
+		});
+		else {
+			this._setTriggerState(!0), this._persistState(!0), this._closeGroupSiblings(), this._dispatch("panel:opening"), this.element.style[n] = "auto";
+			let i = this.element.getBoundingClientRect(), s = n === "height" ? i.height : i.width;
+			this.element.style[n] = a === null ? "0px" : `${a}px`, this.element.classList.add("is-opening"), o && y(o), getComputedStyle(this.element)[n], requestAnimationFrame(() => {
+				this.element.style[n] = `${s}px`, e.waitForTransition(this.element, n).then(() => {
+					t.aborted || (this.element.style[n] = "", this.element.classList.remove("is-opening"), this.element.classList.add("is-open"), this._dispatch("panel:opened"), this._cleanupTempClose(), this._log("Opened"), this._handleAutoFocus(r));
+				});
+			});
+		}
+		else this._setTriggerState(!0), this._persistState(!0), this._closeGroupSiblings(), this._dispatch("panel:opening"), this.element.classList.add("is-open"), this._dispatch("panel:opened"), this._cleanupTempClose(), this._log("Opened"), this._handleAutoFocus(r);
+	}
+	onBeforeOpen(e, t = {}) {
+		h(this.element, "panel:beforeopen", () => this.element, e, t);
+	}
+	close(t) {
+		if (!this.isOpen || this.config.interruptible === !1 && this._activating) return;
+		this._activating = !0, this.element.setAttribute("inert", ""), this._setTriggerState(!1);
+		let n = this._cssProp(), r = v(this.element), i = this._anim.start();
+		this._dispatch("panel:closing");
+		let a = () => {
+			this.element.classList.remove("is-closing", "is-open", "is-opening"), this.element.style[n] = "", r && b(r), this._persistState(!1), this._dispatch("panel:closed"), this._log("Closed");
+			let e = t instanceof PointerEvent && t.pointerType !== "";
+			this.config.returnFocus && this._returnFocusTarget && !e && this._returnFocusTarget.focus();
+		};
+		if (!this.config.transitions) {
+			a();
+			return;
+		}
+		let o = this.element.getBoundingClientRect(), s = n === "height" ? o.height : o.width;
+		this.element.style[n] = `${s}px`, this.element.classList.remove("is-opening", "is-open"), this.element.classList.add("is-closing"), getComputedStyle(this.element)[n], requestAnimationFrame(() => {
+			this.element.style[n] = "0px", e.waitForTransition(this.element, n).then(() => {
+				i.aborted || a();
+			});
+		});
+	}
+	toggle(e) {
+		this.element.classList.contains("is-closing") ? this.open(e) : this.isOpen ? this.close(e) : (e?.target && (this._returnFocusTarget = e.target.closest("button, a") ?? e.target), this.open(e));
+	}
+	destroy() {
+		this._anim.start(), this._listenerController.abort(), this.element.classList.remove("is-opening", "is-closing", "is-loading", "is-open"), this.element.style[this._cssProp()] = "", this.element.setAttribute("inert", ""), this._setTriggerState(!1);
+		let e = v(this.element);
+		e && b(e), delete this.element.panel, this._log("Destroyed");
+	}
+};
+x = C, x.defaults = {
+	axis: "vertical",
+	align: "start",
+	closeOnResize: !1,
+	transitions: !0,
+	autoFocus: !1,
+	returnFocus: !0,
+	closeSiblings: !1,
+	loadingDelay: 320,
+	loadingHeight: 150,
+	interruptible: !0,
+	persist: !1,
+	deepLink: !1,
+	debug: !1
+}, x.attrs = {
+	axis: ["panelAxis", "string"],
+	align: ["panelAlign", "string"],
+	autoFocus: ["panelAutoFocus", "string"],
+	closeOnResize: ["panelCloseOnResize", "boolean"],
+	transitions: ["panelTransitions", "boolean"],
+	returnFocus: ["panelReturnFocus", "boolean"],
+	closeSiblings: ["panelCloseSiblings", "boolean"],
+	loadingDelay: ["panelLoadingDelay", "number"],
+	loadingHeight: ["panelLoadingHeight", "number"],
+	interruptible: ["panelInterruptible", "boolean"],
+	persist: ["panelPersist", "boolean"],
+	deepLink: ["panelDeeplink", "boolean"],
+	debug: ["debug", "boolean"]
+}, x._nativeInterpolateSize = typeof CSS < "u" && CSS.supports("interpolate-size: allow-keywords"), x._autoIdCounter = 0;
+//#endregion
+//#region src/js/panelcontrol.ts
+var w, T = class e {
+	static init(t = "[data-panelcontrol]", n = {}) {
+		let r, i;
+		return typeof t == "string" ? (r = t, i = n) : (i = t, r = i.selector || "[data-panelcontrol]"), Array.from(document.querySelectorAll(r)).filter((e) => !e.panelControl).map((t) => new e(t, i));
+	}
+	constructor(t, n = {}) {
+		this._setEl = null, this._controller = new AbortController(), this._isTablist = !1, this._activationWired = !1, this._reflectCloseable = () => {
+			let e = this.panelSet, t = this.panelSetElement, n = !1;
+			if (e) n = !!(e.config.closable && e.config.closeOnTab);
+			else if (t) {
+				let e = t.dataset.closable != null || t.hasAttribute("closable"), r = t.dataset.closeOnTab != null || t.hasAttribute("close-on-tab");
+				n = e && r;
+			}
+			this.element.toggleAttribute("data-closeable", n);
+		}, this._enabled = (e) => e.getAttribute("aria-disabled") !== "true" && !e.hidden, this._onActivation = (e) => {
+			let t = this._tabs().find((t) => t.getAttribute("aria-controls") === e.detail?.panelId);
+			t && this._setRoving(t);
+		}, this._onKeydown = (e) => {
+			let t = this._tabs().filter(this._enabled);
+			if (!t.length) return;
+			let n = this.element.getAttribute("aria-orientation") === "vertical", r = n ? "ArrowDown" : "ArrowRight", i = n ? "ArrowUp" : "ArrowLeft", a = t.indexOf(document.activeElement), o;
+			switch (e.key) {
+				case r:
+					o = t[(a + 1) % t.length];
+					break;
+				case i:
+					o = t[(a - 1 + t.length) % t.length];
+					break;
+				case "Home":
+					o = t[0];
+					break;
+				case "End":
+					o = t[t.length - 1];
+					break;
+				case "Enter":
+				case " ":
+					a >= 0 && (e.preventDefault(), this._activate(t[a], e));
+					return;
+				default: return;
+			}
+			o && (e.preventDefault(), this._setRoving(o), o.focus(), this._autoActivate() && this._activate(o, e));
+		};
+		let r = typeof t == "string" ? document.querySelector(t) : t;
+		if (!r) throw Error(`PanelControl: No element found for selector "${t}"`);
+		if (this.element = r, r.panelControl) return console.warn("PanelControl: already initialized"), r.panelControl;
+		r.panelControl = this;
+		let i = c(r.dataset, e.attrs);
+		this.config = {
+			...e.defaults,
+			...n,
+			...i
+		}, this._isTablist = r.getAttribute("role") === "tablist", this._bindTriggers(), this._isTablist && this._setupKeyboard();
+		let a = this.panelSetElement;
+		this._log(`Initialized (${a ? "linked to a PanelSet" : "no PanelSet found yet"}${this._isTablist ? ", tablist keyboard nav" : ""})`);
+	}
+	get panelSetElement() {
+		if (!this._setEl) {
+			let e = this._resolvePanelSet();
+			e && (this._setEl = e, this._onElementResolved(e));
+		}
+		return this._setEl;
+	}
+	get panelSet() {
+		return this.panelSetElement?.panelSet;
+	}
+	show(e, t) {
+		this.panelSet?.show(e, t);
+	}
+	setTabState(e, t) {
+		let n = t === "disabled";
+		this.element.querySelectorAll(`[aria-controls="${e}"]`).forEach((e) => {
+			e.setAttribute("aria-disabled", String(n));
+			let t = e.getAttribute("data-pc-disabled-hint");
+			t && d(e, t, n), this._isTablist && n && (e.tabIndex = -1);
+		}), this._isTablist && n && this._ensureRovingStop();
+	}
+	_log(e) {
+		u("PanelControl", this.element, this.config.debug, e);
+	}
+	_resolvePanelSet() {
+		let e = this.element.getAttribute("data-panelcontrol");
+		if (e) return document.querySelector(e);
+		let t = this.element.querySelector("[aria-controls]")?.getAttribute("aria-controls");
+		return t ? document.getElementById(t)?.closest("[data-panelset], ps-panelset") ?? null : null;
+	}
+	_onElementResolved(e) {
+		let { signal: t } = this._controller;
+		this._isTablist && !this._activationWired && (e.addEventListener("ps:activationcomplete", this._onActivation, { signal: t }), this._activationWired = !0), this._reflectCloseable(), e.panelSet || e.addEventListener("ps:ready", this._reflectCloseable, {
+			once: !0,
+			signal: t
+		});
+	}
+	_bindTriggers() {
+		let { signal: e } = this._controller;
+		this.element.querySelectorAll("[aria-controls]").forEach((t) => {
+			t.addEventListener("click", (e) => {
+				this._activate(t, e);
+			}, { signal: e });
+		});
+	}
+	_activate(e, t) {
+		if (e.getAttribute("aria-disabled") === "true") return;
+		let n = e.getAttribute("aria-controls");
+		if (n) {
+			if (!this.panelSet) {
+				this._log(`Can’t activate '${n}': its PanelSet is not initialised. Add a PanelSet.init().`);
+				return;
+			}
+			this.panelSet.show(n, { event: t }), this._isTablist && this._setRoving(e);
+		}
+	}
+	_tabs() {
+		return Array.from(this.element.querySelectorAll("[role=\"tab\"]"));
+	}
+	_setRoving(e) {
+		this._tabs().forEach((t) => {
+			t.tabIndex = t === e ? 0 : -1;
+		});
+	}
+	_ensureRovingStop() {
+		let e = this._tabs();
+		if (e.some((e) => e.tabIndex === 0 && this._enabled(e))) return;
+		let t = e.find((e) => e.getAttribute("aria-selected") === "true" && this._enabled(e)) ?? e.find(this._enabled);
+		t && this._setRoving(t);
+	}
+	_setupKeyboard() {
+		let e = this._tabs();
+		if (!e.length) return;
+		let t = e.find((e) => e.getAttribute("aria-selected") === "true") ?? e[0];
+		this._setRoving(t), this.element.addEventListener("keydown", this._onKeydown, { signal: this._controller.signal });
+	}
+	_autoActivate() {
+		return this.config.activation === "auto" && !this._autoFocusInPlay() && !this.panelSet?.hasAsyncContent;
+	}
+	_autoFocusInPlay() {
+		let e = this.panelSet;
+		if (e && e.config.autoFocus !== !1) return !0;
+		let t = this.panelSetElement, n = t && (t.dataset.autoFocus ?? t.getAttribute("auto-focus"));
+		return n != null && n !== "false" ? !0 : this._tabs().some((e) => {
+			let t = e.getAttribute("data-auto-focus");
+			return t != null && t !== "false";
+		});
+	}
+	destroy() {
+		this._controller.abort(), delete this.element.panelControl, this._log("Destroyed");
+	}
+};
+w = T, w.defaults = {
+	activation: "manual",
+	debug: !1
+}, w.attrs = {
+	activation: ["activation", "string"],
+	debug: ["debug", "boolean"]
+};
+//#endregion
+//#region src/js/panel.element.ts
+var E = class extends HTMLElement {
+	connectedCallback() {
+		if (this.panel) return;
+		let e = l(this, C.attrs);
+		new C(this, e);
+	}
+	disconnectedCallback() {}
+}, D = class extends HTMLElement {
+	connectedCallback() {
+		if (this.panelSet) return;
+		let e = l(this, _.attrs);
+		new _(this, e);
+	}
+	disconnectedCallback() {}
+}, O = class extends HTMLElement {
+	connectedCallback() {
+		if (this.panelControl) return;
+		let e = l(this, T.attrs);
+		new T(this, e);
+	}
+	disconnectedCallback() {}
+};
+function k(e = "ps") {
+	let t = `${e}-panelcontrol`;
+	customElements.get(t) || customElements.define(t, O);
+}
+//#endregion
+//#region src/js/index.ts
+function A(e = "ps") {
+	let t = (e, t) => {
+		customElements.get(e) || customElements.define(e, t);
+	};
+	t(`${e}-panel`, E), t(`${e}-panelset`, D), t(`${e}-panelcontrol`, O);
+}
+//#endregion
+export { E as a, _ as c, D as i, O as n, T as o, k as r, C as s, A as t };
+
+//# sourceMappingURL=panelset-core.js.map