@martinomagnifico/tablechart 1.0.5 → 1.0.7

package/dist/tablechart-shared.mjs

@@ -10,6 +10,7 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-value", r = "tablec
 	shape: "straight",
 	legend: !1,
 	tooltip: "auto",
+	tooltipparent: null,
 	table: "never",
 	totallabel: "Total",
 	controls: !0,
@@ -1202,9 +1203,13 @@ var Te = (e) => e.map((e) => ({
 		]), i;
 	};
 	return r.append(i("previous"), i("next")), r;
-}, We = (e, t, n, r = 10, i = 8, a = 12) => {
-	let { offsetWidth: o, offsetHeight: s } = e, { clientWidth: c, clientHeight: l } = document.documentElement, u = n.top - i, d = l - n.bottom - i, f = s + r <= u ? !0 : s + r <= d ? !1 : u >= d, p = f ? n.top - r - s : n.bottom + r, m = n.left + n.width / 2, h = Math.max(i, Math.min(m - o / 2, c - o - i));
-	e.style.left = `${h}px`, e.style.top = `${Math.max(i, Math.min(p, l - s - i))}px`, e.dataset.side = f ? "top" : "bottom", t.style.left = `${Math.max(a, Math.min(m - h, o - a))}px`;
+}, We = (e, t, n, r = {
+	x: 0,
+	y: 0,
+	scale: 1
+}, i = 2, a = 8, o = 12) => {
+	let s = e.getBoundingClientRect(), c = s.width, l = s.height, u = Number.parseFloat(getComputedStyle(e).borderLeftWidth) || 0, d = t.getBoundingClientRect().height / 2 + (i - u) * r.scale, f = o * r.scale, { clientWidth: p, clientHeight: m } = document.documentElement, h = n.top - a, g = m - n.bottom - a, _ = l + d <= h ? !0 : l + d <= g ? !1 : h >= g, v = _ ? n.top - d - l : n.bottom + d, y = n.left + n.width / 2, b = Math.max(a, Math.min(y - c / 2, p - c - a));
+	e.style.left = `${(b - r.x) / r.scale}px`, e.style.top = `${(Math.max(a, Math.min(v, m - l - a)) - r.y) / r.scale}px`, e.dataset.side = _ ? "top" : "bottom", t.style.left = `${Math.max(f, Math.min(y - b, c - f)) / r.scale - u}px`;
 }, Ge = "tablechart-tooltip", Ke = [
 	"--tablechart-surface",
 	"--tablechart-tooltip-surface",
@@ -1215,34 +1220,49 @@ var Te = (e) => e.map((e) => ({
 	"--tablechart-tooltip-shadow"
 ], Z = null, qe, Je, Q = null, Ye = null, Xe = 0, $ = () => {
 	clearTimeout(Xe), Z && Q && (Z.hidden = !0, Q = null, Ye = null);
-}, Ze = () => {
+}, Ze = !1, Qe = !0, $e = NaN, et = NaN, tt = !1, nt = () => {
+	if (tt) return;
+	tt = !0, document.addEventListener("pointermove", (e) => {
+		e.pointerType === "mouse" && (Qe = e.screenX !== $e || e.screenY !== et, $e = e.screenX, et = e.screenY, Qe && (Ze = !1));
+	}, {
+		capture: !0,
+		passive: !0
+	});
+	let e = () => {
+		Ze = !0, $();
+	};
+	document.addEventListener("keydown", e, !0), window.addEventListener("scroll", e, {
+		capture: !0,
+		passive: !0
+	});
+}, rt = (e, t) => t / Number.parseFloat(getComputedStyle(e).width) || 1, it = (e) => {
+	let t = e.tooltipparent;
+	return (typeof t == "string" ? document.querySelector(t) : t) ?? document.body;
+}, at = () => {
 	clearTimeout(Xe), Xe = window.setTimeout($, 120);
-}, Qe = () => {
+}, ot = () => {
 	let e = document.createElement("div");
-	return e.className = Ge, e.setAttribute("aria-hidden", "true"), e.hidden = !0, qe = document.createElement("div"), Je = document.createElement("div"), Je.className = `${Ge}-arrow`, e.append(qe, Je), document.body.append(e), e.addEventListener("pointerenter", () => clearTimeout(Xe)), e.addEventListener("pointerleave", (e) => e.pointerType === "mouse" && Ze()), document.addEventListener("keydown", (e) => e.key === "Escape" && $()), document.addEventListener("pointerdown", (t) => {
+	return e.className = Ge, e.setAttribute("aria-hidden", "true"), e.hidden = !0, qe = document.createElement("div"), Je = document.createElement("div"), Je.className = `${Ge}-arrow`, e.append(qe, Je), document.body.append(e), e.addEventListener("pointerenter", () => clearTimeout(Xe)), e.addEventListener("pointerleave", (e) => e.pointerType === "mouse" && at()), document.addEventListener("pointerdown", (t) => {
 		let n = t.target;
 		Q && !Q.plot.contains(n) && !e.contains(n) && $();
-	}), window.addEventListener("scroll", $, {
-		capture: !0,
-		passive: !0
 	}), window.addEventListener("resize", $), e;
-}, $e = (e, t) => {
+}, st = (e, t) => {
 	let n = t ? t.style.getPropertyValue("--step") : "x";
 	return n === "" || Number(n) < e.step;
-}, et = (e, t) => {
+}, ct = (e, t) => {
 	let n = e.svg.querySelector(`[data-series="${t + 1}"]:not(.tablechart-hole)`);
 	if (!n) return;
 	let r = getComputedStyle(n);
 	return r.fill && r.fill !== "none" ? r.fill : r.stroke;
-}, tt = (e, t, n) => {
+}, lt = (e, t, n) => {
 	let r = e.series.length > 1, i = [];
 	for (let [n, a] of e.seriesValues.entries()) {
-		if (!$e(e, a[t])) continue;
+		if (!st(e, a[t])) continue;
 		let o = r ? e.figure.querySelector(`.tablechart-name[data-series="${n + 1}"]`) : null;
 		i.push({
 			name: r ? o?.textContent ?? e.series[n].name : "",
 			value: a[t].textContent ?? "",
-			colour: r ? et(e, n) : void 0,
+			colour: r ? ct(e, n) : void 0,
 			sample: o ? {
 				marker: o.dataset.marker ?? null,
 				open: o.hasAttribute("data-open"),
@@ -1252,11 +1272,11 @@ var Te = (e) => e.map((e) => ({
 		});
 	}
 	let a = e.totals[t];
-	return i.length > 1 && $e(e, a) && i.push({
+	return i.length > 1 && st(e, a) && i.push({
 		name: n.totallabel,
 		value: a.textContent ?? ""
 	}), i;
-}, nt = (e, t) => {
+}, ut = (e, t) => {
 	if (e.type.centre && e.values[t]) return e.values[t].getBoundingClientRect();
 	let n = e.svg.querySelectorAll(`[data-row="${t + 1}"]:not(.tablechart-connector, .tablechart-leader)`), r = null;
 	for (let e of n) {
@@ -1271,11 +1291,11 @@ var Te = (e) => e.map((e) => ({
 		100
 	];
 	return new DOMRect(i.left + i.width * a / 100, i.top + i.height * o / 100, i.width * s / 100, i.height * c / 100);
-}, rt = (e, t, n) => {
+}, dt = (e, t, n) => {
 	if (clearTimeout(Xe), Q === e && Ye === t) return;
-	let r = (e.type.tooltip ?? tt)(e, t, n);
+	let r = (e.type.tooltip ?? lt)(e, t, n);
 	if (!r.length) return $();
-	Q && Q !== e && $(), Z ?? (Z = Qe());
+	Q && Q !== e && $(), Z ?? (Z = ot());
 	let i = (e, t, n, r = !1, i) => {
 		let a = document.createElement("div");
 		if (a.className = `${Ge}-line`, n) {
@@ -1296,13 +1316,21 @@ var Te = (e) => e.map((e) => ({
 		let t = s.getPropertyValue(e).trim();
 		t ? Z.style.setProperty(e, t) : Z.style.removeProperty(e);
 	}
-	Z.style.setProperty("--_color", s.color), Z.style.colorScheme = s.colorScheme, Z.style.fontFamily = s.fontFamily, Z.style.fontSize = s.fontSize, Q = e, Ye = t, Z.hidden = !1, Z.style.left = "0px", We(Z, Je, nt(e, t));
-}, it = (e, t, n = !1) => {
+	Z.style.setProperty("--_color", s.color), Z.style.colorScheme = s.colorScheme, Z.style.fontFamily = s.fontFamily;
+	let c = it(n);
+	Z.parentElement !== c && c.append(Z), Q = e, Ye = t, Z.hidden = !1, Z.style.left = "0px", Z.style.top = "0px";
+	let l = Z.getBoundingClientRect(), u = {
+		x: l.left,
+		y: l.top,
+		scale: rt(Z, l.width)
+	}, d = rt(e.plot, e.plot.getBoundingClientRect().width);
+	Z.style.fontSize = `${Number.parseFloat(s.fontSize) * d / u.scale}px`, We(Z, Je, ut(e, t), u);
+}, ft = (e, t, n = !1) => {
 	let { plot: r } = e;
-	r.setAttribute("data-hover", "");
+	r.setAttribute("data-hover", ""), nt();
 	let i = (t) => {
 		if (e.rowAt) {
-			let n = r.getBoundingClientRect(), i = n.width / r.offsetWidth || 1;
+			let n = r.getBoundingClientRect(), i = rt(r, n.width);
 			return e.rowAt((t.clientX - n.left) / i, (t.clientY - n.top) / i);
 		}
 		let n = t.target.closest?.("[data-row]")?.getAttribute("data-row");
@@ -1312,11 +1340,13 @@ var Te = (e) => e.map((e) => ({
 		else if (t.getAttribute("data-row") === String(e + 1)) return !0;
 		return !1;
 	}, s = null, c = (a) => {
+		if (a.type === "pointerdown") Ze = !1;
+		else if (a.pointerType === "mouse" && (!Qe || Ze)) return;
 		if (!r.classList.contains("is-placed") || !e.figure.classList.contains("is-shown")) return;
 		if (n && !e.figure.hasAttribute("data-left-out")) return Q === e ? $() : void 0;
 		let c = i(a);
-		if (s = c, c === null || o(c)) return Q === e ? Ze() : void 0;
-		rt(e, c, t);
+		if (s = c, c === null || o(c)) return Q === e ? at() : void 0;
+		dt(e, c, t);
 	}, l = (t) => {
 		let n = t.target;
 		return e.svg.contains(n) && n.hasAttribute("data-row") ? n : null;
@@ -1330,42 +1360,42 @@ var Te = (e) => e.map((e) => ({
 		if (!r) return;
 		a.delete(r);
 		let i = Number(r.getAttribute("data-row")) - 1;
-		s === i && !o(i) && rt(e, i, t);
+		s === i && !o(i) && !Ze && dt(e, i, t);
 	};
 	e.svg.addEventListener("transitionend", u), e.svg.addEventListener("transitioncancel", u), r.addEventListener("pointermove", c), r.addEventListener("pointerdown", c), r.addEventListener("pointerleave", (t) => {
-		t.pointerType === "mouse" && (s = null, Q === e && Ze());
+		t.pointerType === "mouse" && (s = null, Q === e && at());
 	});
-}, at = (e) => {
+}, pt = (e) => {
 	Q === e && $();
-}, ot = {
+}, mt = {
 	area: Oe,
 	bar: pe,
 	column: me,
 	donut: _e,
 	line: De,
 	waterfall: je
-}, st = {
+}, ht = {
 	"axis-break": M,
 	trend: te,
 	bracket: H
-}, ct = Object.keys(st), lt = (e) => {
+}, gt = Object.keys(ht), _t = (e) => {
 	let t = "";
 	for (let n = e.previousSibling; n && (t = (n.textContent ?? "") + t, !t.trim()); n = n.previousSibling);
 	return t.trim();
-}, ut = [
+}, vt = [
 	"straight",
 	"step",
 	"smooth"
-], dt = (e, t) => {
+], yt = (e, t) => {
 	let n = e.dataset.chartShape;
-	return n && ut.includes(n) ? n : ut.includes(t.shape) ? t.shape : "straight";
-}, ft = (e) => {
+	return n && vt.includes(n) ? n : vt.includes(t.shape) ? t.shape : "straight";
+}, bt = (e) => {
 	for (let t of e.querySelectorAll("br")) {
-		if (t.previousElementSibling?.classList.contains("tablechart-sr") || /[.!?:;,…]$/.test(lt(t))) continue;
+		if (t.previousElementSibling?.classList.contains("tablechart-sr") || /[.!?:;,…]$/.test(_t(t))) continue;
 		let e = document.createElement("span");
 		e.className = p, e.textContent = ". ", t.before(e);
 	}
-}, pt = (e, t, n) => {
+}, xt = (e, t, n) => {
 	let r = e.querySelector("table");
 	if (!r) return null;
 	let i = r.querySelector("tfoot [data-chart-total]");
@@ -1376,22 +1406,22 @@ var Te = (e) => e.map((e) => ({
 	s && n.langattribute && o.setAttribute(n.langattribute, `${s}-total`);
 	let c = a.insertCell();
 	return c.setAttribute("data-chart-total", ""), c.dataset.value = t.dataset.value ?? "0", a.prepend(o), c;
-}, mt = 0, ht = (e) => {
+}, St = 0, Ct = (e) => {
 	let t = e.querySelector(":scope > figcaption");
 	if (!t) return;
-	ft(t);
+	bt(t);
 	let n = (e) => e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby"), r = (e) => {
-		t.id || (t.id = `tablechart-caption-${++mt}`), e.setAttribute("aria-labelledby", t.id);
+		t.id || (t.id = `tablechart-caption-${++St}`), e.setAttribute("aria-labelledby", t.id);
 	};
 	e.tagName === "FIGURE" && !n(e) && r(e);
 	let i = e.querySelector("table");
 	i && !n(i) && !i.querySelector(":scope > caption") && r(i);
-}, gt = (r, i, a = null) => {
-	let o = a ?? (r.getAttribute("data-chart") || "column"), s = ot[o];
-	if (!s) return console.warn(`[${e}] Unknown chart type "${o}". Known types: ${Object.keys(ot).join(", ")}.`), r.setAttribute("data-chart-empty", ""), null;
+}, wt = (r, i, a = null) => {
+	let o = a ?? (r.getAttribute("data-chart") || "column"), s = mt[o];
+	if (!s) return console.warn(`[${e}] Unknown chart type "${o}". Known types: ${Object.keys(mt).join(", ")}.`), r.setAttribute("data-chart-empty", ""), null;
 	let l = Ne(r, i.langattribute);
-	if (!l.length) return console.warn(`[${e}] A chart has no rows in its table, so there is nothing to draw.`), r.setAttribute("data-chart-empty", ""), null;
-	ht(r);
+	if (!l.length) return console.warn(r.querySelector("table") ? `[${e}] A chart has no rows in its table, so there is nothing to draw.` : `[${e}] A chart has no table, so there is nothing to draw.`, r), r.setAttribute("data-chart-empty", ""), null;
+	Ct(r);
 	let d = Ie(r, l, i.langattribute);
 	d.length > 1 && !s.series && (console.warn(`[${e}] A ${o} chart uses only the first of its ${d.length} value columns.`), d = d.slice(0, 1));
 	let f = d.length > 1;
@@ -1419,7 +1449,7 @@ var Te = (e) => e.map((e) => ({
 		let n = E("tablechart-name", D ?? h);
 		D && (n.dataset.place = "legend");
 		let a = s.legend ?? s.swatch;
-		if (a && (n.dataset.swatch = a), n.textContent = e.name, !a && dt(r, i) !== "step") {
+		if (a && (n.dataset.swatch = a), n.textContent = e.name, !a && yt(r, i) !== "step") {
 			let e = ye(d, t);
 			n.dataset.marker = e.shape, n.toggleAttribute("data-open", e.open);
 		}
@@ -1429,7 +1459,7 @@ var Te = (e) => e.map((e) => ({
 		let e = l.find((e) => e.isTotal), t = e ? e.value : l.reduce((e, t) => e + Math.abs(t.value), 0);
 		k.dataset.value = String(t), e && (k.dataset.decimals = String(P(e.number)));
 	}
-	let A = k && !l.some((e) => e.isTotal) ? pt(r, k, i) : null, j = s.categories === "beside", M = document.createElement("div");
+	let A = k && !l.some((e) => e.isTotal) ? xt(r, k, i) : null, j = s.categories === "beside", M = document.createElement("div");
 	M.className = "tablechart-categories", M.setAttribute("aria-hidden", "true"), M.inert = !0, j ? M.dataset.place = "beside" : s.centre && (M.dataset.place = "key"), M.style.setProperty("--_columns", String(l.length));
 	let F = 0;
 	for (let [e, t] of l.entries()) {
@@ -1449,7 +1479,7 @@ var Te = (e) => e.map((e) => ({
 		hint: L && `${L}-step`
 	}, i.langattribute) : null;
 	R && r.appendChild(R);
-	let z = r.getAttribute("data-chart-table"), B = z && vt.includes(z) ? z : i.table;
+	let z = r.getAttribute("data-chart-table"), B = z && Et.includes(z) ? z : i.table;
 	if (B === "never") r.removeAttribute("data-table");
 	else {
 		r.setAttribute("data-table", B);
@@ -1457,8 +1487,8 @@ var Te = (e) => e.map((e) => ({
 		e && r.append(e);
 	}
 	let V = Array.from(r.querySelectorAll("[data-annotation]")).map((t) => {
-		let n = t.getAttribute("data-annotation"), r = st[n];
-		if (!r) return console.warn(`[${e}] Unknown annotation "${n}". Known annotations: ${Object.keys(st).join(", ")}.`), null;
+		let n = t.getAttribute("data-annotation"), r = ht[n];
+		if (!r) return console.warn(`[${e}] Unknown annotation "${n}". Known annotations: ${Object.keys(ht).join(", ")}.`), null;
 		let i = Number.parseInt(t.getAttribute("data-series") ?? "1", 10), a = i >= 1 && i <= d.length ? i - 1 : 0;
 		return i !== a + 1 && console.warn(`[${e}] An annotation reads line ${i}, which is not there; it reads line 1.`), {
 			spec: t,
@@ -1468,7 +1498,7 @@ var Te = (e) => e.map((e) => ({
 			after: l.length
 		};
 	}).filter((e) => e !== null);
-	i.animate && r.setAttribute("data-animate", bt(r, o, i, !!I));
+	i.animate && r.setAttribute("data-animate", Ot(r, o, i, !!I));
 	let H = {
 		figure: r,
 		plot: h,
@@ -1498,31 +1528,31 @@ var Te = (e) => e.map((e) => ({
 		t && He(H, H.step + (t === "next" ? 1 : -1));
 	}), He(H, 0, !0);
 	let U = r.getAttribute("data-chart-tooltip") ?? r.getAttribute("data-chart-hover"), ee = U === "false" ? !1 : U === "auto" ? "auto" : U !== null || i.hover !== !1 && i.tooltip;
-	return ee && it(H, i, ee === "auto"), Tt(H, i), H;
-}, _t = {
+	return ee && ft(H, i, ee === "auto"), Nt(H, i), H;
+}, Tt = {
 	grow: "grow",
 	sweep: "sweep"
-}, vt = [
+}, Et = [
 	"never",
 	"auto",
 	"print",
 	"always"
-], yt = {
-	..._t,
+], Dt = {
+	...Tt,
 	up: "grow",
 	across: "sweep"
-}, bt = (e, t, n, r) => {
-	let i = t === "line" || t === "area", a = i ? yt : _t, o = a[e.getAttribute("data-chart-animate") ?? ""] ?? a[String(n.animate)];
+}, Ot = (e, t, n, r) => {
+	let i = t === "line" || t === "area", a = i ? Dt : Tt, o = a[e.getAttribute("data-chart-animate") ?? ""] ?? a[String(n.animate)];
 	return i ? r ? "sweep" : o ?? "sweep" : t === "donut" || t === "waterfall" ? o ?? "grow" : "grow";
-}, xt = (e) => {
+}, kt = (e) => {
 	let t = getComputedStyle(e), n = (t.getPropertyValue("--tablechart-value-align") || t.getPropertyValue("--tablechart-inside-align")).trim();
 	return n === "start" || n === "center" || n === "end" ? n : null;
-}, St = (e, t, n, r) => {
+}, At = (e, t, n, r) => {
 	let i = getComputedStyle(e), a = (i.getPropertyValue(n).trim() || r).match(/^(\d+(?:\.\d+)?)(px|%|em|rem)$/);
 	if (!a) return null;
 	let o = Number(a[1]);
 	return a[2] === "%" ? o / 100 * _ : o * (a[2] === "em" ? Number.parseFloat(i.fontSize) : a[2] === "rem" ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : 1) * t;
-}, Ct = (e, t) => St(e, t, "--tablechart-bar-max", "60px") ?? Infinity, wt = (t, n) => {
+}, jt = (e, t) => At(e, t, "--tablechart-bar-max", "60px") ?? Infinity, Mt = (t, n) => {
 	let { plot: r, svg: i, rows: a, type: o, values: s, series: c, seriesValues: u, names: d, annotations: p } = t, m = r.clientWidth;
 	if (!m) return !1;
 	let h = _ / m, g = Number.parseFloat(t.figure.dataset.chartAspect ?? ""), v = _ * (g > 0 ? g : o.aspect ?? n.aspect);
@@ -1535,7 +1565,7 @@ var Te = (e) => e.map((e) => ({
 		...t.categories,
 		...p.map((e) => e.badge)
 	]);
-	let y = (s[0] ? W(s[0]).height : 0) * h, b = p[0]?.badge ? W(p[0].badge).height * h : 0, x = Math.max(v, St(t.figure, h, "--tablechart-min-height", "200px") ?? 0, o.minHeight?.({
+	let y = (s[0] ? W(s[0]).height : 0) * h, b = p[0]?.badge ? W(p[0].badge).height * h : 0, x = Math.max(v, At(t.figure, h, "--tablechart-min-height", "200px") ?? 0, o.minHeight?.({
 		labelHeight: y,
 		nameHeight: Math.max(0, N(t.categories.map((e) => W(e).height))) * h,
 		unit: h,
@@ -1587,7 +1617,7 @@ var Te = (e) => e.map((e) => ({
 			share: s
 		} : console.warn(`[${e}] This kind of chart cannot break its scale.`);
 	}
-	let H = V ? V.gap : null, U = (V && St(t.figure, h, "--tablechart-break-gap", "")) ?? 13, G = x - M, te = F - I || 1, ne = (e) => G - (e - I) / te * P;
+	let H = V ? V.gap : null, U = (V && At(t.figure, h, "--tablechart-break-gap", "")) ?? 13, G = x - M, te = F - I || 1, ne = (e) => G - (e - I) / te * P;
 	if (V) {
 		let { lo: e, hi: t, gap: n, share: r } = V, i = P * r, a = (P - i - U) / (e + (F - t)), o = i / (t - e);
 		ne = (r) => r <= e ? G - r * a : r <= n ? G - e * a - (r - e) * o : r <= t ? G - e * a - (r - e) * o - U : G - e * a - i - U - (r - t) * a;
@@ -1613,8 +1643,8 @@ var Te = (e) => e.map((e) => ({
 		segments: T,
 		cx: oe,
 		y: ne,
-		barWidth: Math.min(K * n.barfill, Ct(t.figure, h)),
-		barMax: Ct(t.figure, h),
+		barWidth: Math.min(K * n.barfill, jt(t.figure, h)),
+		barMax: jt(t.figure, h),
 		height: x,
 		unit: h,
 		labelHeight: y,
@@ -1622,12 +1652,12 @@ var Te = (e) => e.map((e) => ({
 		after: a.length,
 		note: 0,
 		labels: t.figure.dataset.chartLabels === "inside" || t.figure.dataset.chartLabels !== "outside" && n.labels === "inside" ? "inside" : "outside",
-		insideAlign: xt(t.figure),
+		insideAlign: kt(t.figure),
 		breakAt: H,
 		squeeze: V,
 		breakGap: U,
 		stacked: t.stacked,
-		shape: dt(t.figure, n),
+		shape: yt(t.figure, n),
 		totals: t.totals,
 		svg: i,
 		plot: r,
@@ -1694,7 +1724,7 @@ var Te = (e) => e.map((e) => ({
 		return t.some((e) => pe(e) && Number(e.dataset.row) <= n && n <= Number(e.dataset.rowEnd ?? e.dataset.row));
 	};
 	return t.figure.toggleAttribute("data-left-out", [...u, t.totals].some((e) => e.some((t) => !fe(t) && !pe(t) && !me(t, e)))), !0;
-}, Tt = (e, t) => {
+}, Nt = (e, t) => {
 	let n = [
 		...e.seriesValues.flat(),
 		...e.totals,
@@ -1712,29 +1742,29 @@ var Te = (e) => e.map((e) => ({
 			e.className = "tablechart-minus", e.textContent = o, r.prepend(e);
 		}
 	}
-}, Et = (e) => {
-	at(e), e.plot.remove(), e.categories[0]?.parentElement?.remove(), e.figure.querySelector(`:scope > .${c}`)?.remove(), e.controls?.remove();
-}, Dt = (e, t) => {
+}, Pt = (e) => {
+	pt(e), e.plot.remove(), e.categories[0]?.parentElement?.remove(), e.figure.querySelector(`:scope > .${c}`)?.remove(), e.controls?.remove();
+}, Ft = (e, t) => {
 	e.figure.classList.toggle(m, t);
-}, Ot = (e) => e === "id" || e === "style" || e.startsWith("data-chart"), kt = /^\s*(?:Table)?:\s+/, At = (e) => e?.tagName === "P" && kt.test(e.textContent ?? ""), jt = (e) => {
+}, It = (e) => e === "id" || e === "style" || e.startsWith("data-chart"), Lt = /^\s*(?:Table)?:\s+/, Rt = (e) => e?.tagName === "P" && Lt.test(e.textContent ?? ""), zt = (e) => {
 	let t = document.createElement("figcaption");
 	for (let { name: n, value: r } of Array.from(e.attributes)) t.setAttribute(n, r);
 	let n = e.firstChild;
-	n?.nodeType === Node.TEXT_NODE && (n.textContent = (n.textContent ?? "").replace(kt, ""), n.textContent || n.remove());
+	n?.nodeType === Node.TEXT_NODE && (n.textContent = (n.textContent ?? "").replace(Lt, ""), n.textContent || n.remove());
 	let r = Array.from(e.childNodes), i = r.findIndex((e) => e.nodeName === "BR");
 	if (t.append(...i === -1 ? r : r.slice(0, i + 1)), i !== -1 && i < r.length - 1) {
 		let e = document.createElement("span");
 		e.append(...r.slice(i + 1)), t.append(e);
 	}
 	return e.remove(), t;
-}, Mt = /^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/, Nt = (e) => {
-	let t = Vt(e);
+}, Bt = /^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/, Vt = (e) => {
+	let t = Yt(e);
 	return t?.tagName === "P" ? t : e;
-}, Pt = (e) => {
-	let t = Nt(e).firstChild;
+}, Ht = (e) => {
+	let t = Vt(e).firstChild;
 	if (t?.nodeType !== Node.TEXT_NODE) return null;
-	let n = Mt.exec(t.textContent ?? "");
-	if (!n || !ct.includes(n[1]) || !n[3] && t.nextSibling) return null;
+	let n = Bt.exec(t.textContent ?? "");
+	if (!n || !gt.includes(n[1]) || !n[3] && t.nextSibling) return null;
 	let r = n[2].trim().split(/\s+/).filter(Boolean).map((e) => e.split("="));
 	return {
 		name: n[1],
@@ -1742,11 +1772,11 @@ var Te = (e) => e.map((e) => ({
 		text: t,
 		length: n[0].length
 	};
-}, Ft = (e) => {
+}, Ut = (e) => {
 	if (e?.tagName !== "UL" && e?.tagName !== "OL") return null;
-	let t = Array.from(e.children), n = t.map((e) => e.hasAttribute("data-annotation") ? null : Pt(e));
+	let t = Array.from(e.children), n = t.map((e) => e.hasAttribute("data-annotation") ? null : Ht(e));
 	return !t.length || t.some((e, t) => !n[t] && !e.hasAttribute("data-annotation")) ? null : (t.forEach((e, t) => {
-		let r = n[t], i = Nt(e);
+		let r = n[t], i = Vt(e);
 		if (i !== e && i.replaceWith(...i.childNodes), r) {
 			e.setAttribute("data-annotation", r.name);
 			for (let [t, n] of r.options) e.setAttribute(`data-${t}`, n);
@@ -1757,18 +1787,18 @@ var Te = (e) => e.map((e) => ({
 			t === 0 && e instanceof HTMLElement && e.matches("em, i") ? (n.className = "tablechart-caption", n.append(...e.childNodes), e.replaceWith(n)) : e.nodeType === Node.TEXT_NODE && (n.textContent = (e.textContent ?? "").trim(), e.replaceWith(n));
 		});
 	}), e.classList.add("chart-annotations"), e);
-}, It = (e, t) => {
-	for (let { name: n, value: r } of Array.from(e.attributes)) (n === "class" || Ot(n)) && (t.setAttribute(n, r), e.removeAttribute(n));
-}, Lt = (e) => e.map((e) => {
-	let t = e.closest("p"), n = At(t) ? t : e;
+}, Wt = (e, t) => {
+	for (let { name: n, value: r } of Array.from(e.attributes)) (n === "class" || It(n)) && (t.setAttribute(n, r), e.removeAttribute(n));
+}, Gt = (e) => e.map((e) => {
+	let t = e.closest("p"), n = Rt(t) ? t : e;
 	if (n.tagName !== "TABLE" && n.tagName !== "P") return n;
-	let r = document.createElement("div");
-	It(e, r), e.classList.length || e.removeAttribute("class");
-	let i = n.tagName === "TABLE" ? n : null, a = n.previousElementSibling, o = n.nextElementSibling, s = i ? At(a) ? a : At(o) ? o : null : n;
+	let r = document.createElement("figure");
+	Wt(e, r), e.classList.length || e.removeAttribute("class");
+	let i = n.tagName === "TABLE" ? n : null, a = n.previousElementSibling, o = n.nextElementSibling, s = i ? Rt(a) ? a : Rt(o) ? o : null : n;
 	i && s === o && (o = o?.nextElementSibling ?? null);
-	let c = o?.classList.contains("chart-annotations") ? o : Ft(o);
-	return n.replaceWith(r), s && r.append(jt(s)), i && r.append(i), c && r.append(c), X?.log?.(`A ${i ? "table" : "caption"} with chart attributes was wrapped in a figure of its own`), r;
-}), Rt = (e, t, n, r = document.createElement("table")) => {
+	let c = o?.classList.contains("chart-annotations") ? o : Ut(o);
+	return n.replaceWith(r), s && r.append(zt(s)), i && r.append(i), c && r.append(c), X?.log?.(`A ${i ? "table" : "caption"} with chart attributes was wrapped in a figure of its own`), r;
+}), Kt = (e, t, n, r = document.createElement("table")) => {
 	for (let e of r.querySelectorAll(":scope > tbody, :scope > tfoot, :scope > tr")) e.remove();
 	if (!r.tHead && (t.length || n)) {
 		let e = r.createTHead().insertRow(), i = document.createElement("th");
@@ -1788,7 +1818,7 @@ var Te = (e) => e.map((e) => ({
 		for (let n of t.values ?? [t.value ?? null]) e.insertCell().textContent = n === null ? "" : String(n);
 	}
 	return r;
-}, zt = (e) => {
+}, qt = (e) => {
 	if (!e || typeof e != "object") return;
 	let t = Object.entries(e), n = (e) => e === null || typeof e == "string" || typeof e == "number";
 	if (t.length && t.every(([, e]) => n(e) || Array.isArray(e) && e.every(n))) return t.map(([e, t]) => Array.isArray(t) ? {
@@ -1798,16 +1828,16 @@ var Te = (e) => e.map((e) => ({
 		label: e,
 		value: t
 	});
-}, Bt = async (t) => {
+}, Jt = async (t) => {
 	await Promise.all(t.filter((e) => e.hasAttribute("data-chart-src")).map(async (t) => {
 		let n = t.getAttribute("data-chart-src"), r = Array.from(t.querySelectorAll("table")).find((e) => e.tHead) ?? null;
 		for (let e of t.querySelectorAll("table")) e !== r && e.remove();
 		try {
 			let e = await fetch(n);
 			if (!e.ok) throw Error(`${e.status} ${e.statusText}`);
-			let i = await e.json(), a = Array.isArray(i) ? i : i?.rows ? Array.isArray(i.rows) ? i.rows : zt(i.rows) : zt(i);
+			let i = await e.json(), a = Array.isArray(i) ? i : i?.rows ? Array.isArray(i.rows) ? i.rows : qt(i.rows) : qt(i);
 			if (!Array.isArray(a)) throw Error("no rows in it: a list of rows, an object with rows, or names with their values");
-			let o = Rt(a, Array.isArray(i?.series) ? i.series.map(String) : [], typeof i?.label == "string" ? i.label : "", r ?? void 0);
+			let o = Kt(a, Array.isArray(i?.series) ? i.series.map(String) : [], typeof i?.label == "string" ? i.label : "", r ?? void 0);
 			if (!r) {
 				let e = t.querySelector(":scope > figcaption");
 				e ? e.after(o) : t.prepend(o);
@@ -1818,10 +1848,10 @@ var Te = (e) => e.map((e) => ({
 			console.warn(`[${e}] Could not read the chart data in "${n}": ${t.message}.` + (r ? " A page opened as a file cannot fetch files; open it from a server." : ""));
 		}
 	}));
-}, Vt = (e) => {
+}, Yt = (e) => {
 	let t = Array.from(e.childNodes).filter((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim());
 	return t.length === 1 && t[0] instanceof HTMLElement ? t[0] : null;
-}, Ht = "strong, b, span.total", Ut = (e) => {
+}, Xt = "strong, b, span.total", Zt = (e) => {
 	for (let t of e) {
 		for (let e of t.querySelectorAll("tbody tr")) {
 			let t = e.cells[0];
@@ -1829,16 +1859,16 @@ var Te = (e) => e.map((e) => ({
 			let n = document.createElement("th");
 			for (let { name: e, value: r } of Array.from(t.attributes)) n.setAttribute(e, r);
 			n.append(...t.childNodes), t.replaceWith(n);
-			for (let t = Vt(n); t?.matches(Ht); t = Vt(n)) e.dataset.kind = "total", t.replaceWith(...t.childNodes);
+			for (let t = Yt(n); t?.matches(Xt); t = Yt(n)) e.dataset.kind = "total", t.replaceWith(...t.childNodes);
 		}
 		let e = Array.from(t.querySelector("thead tr:last-child")?.children ?? []);
-		for (let t of e.slice(1)) for (let e = Vt(t); e?.matches(Ht); e = Vt(t)) t.setAttribute("data-kind", "focus"), e.replaceWith(...e.childNodes);
+		for (let t of e.slice(1)) for (let e = Yt(t); e?.matches(Xt); e = Yt(t)) t.setAttribute("data-kind", "focus"), e.replaceWith(...e.childNodes);
 	}
-}, Wt = "data-chart-made", Gt = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, Kt = (e) => new Promise((t) => setTimeout(t, e)), qt = (e, t) => {
+}, Qt = "data-chart-made", $t = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, en = (e) => new Promise((t) => setTimeout(t, e)), tn = (e, t) => {
 	let n = Number.parseFloat(e.dataset.chartEntrance ?? ""), r = Number.isFinite(n) ? n : t.entrance;
 	return Math.min(Math.max(r, 0), 1);
-}, Jt = async (e, t) => {
-	if (Gt()) return;
+}, nn = async (e, t) => {
+	if ($t()) return;
 	await new Promise(requestAnimationFrame);
 	let n = e.getAnimations().filter((e) => e instanceof CSSAnimation);
 	for (let t = e.parentElement; t && t !== document.body; t = t.parentElement) n.push(...t.getAnimations());
@@ -1849,11 +1879,11 @@ var Te = (e) => e.map((e) => ({
 		let a = Number(n.delay ?? 0) + i * t;
 		r = Math.max(r, a - Number(e.currentTime ?? 0));
 	}
-	r > 0 && await Kt(r);
-}, Yt = (e) => {
+	r > 0 && await en(r);
+}, rn = (e) => {
 	for (let t = e; t && t !== document.body; t = t.parentElement) if (getComputedStyle(t).opacity === "0") return t;
 	return null;
-}, Xt = (e) => new Promise((t) => {
+}, an = (e) => new Promise((t) => {
 	let n = ["animationstart", "transitionrun"], r = () => {
 		for (let e of n) document.removeEventListener(e, i, !0);
 		a.disconnect(), t();
@@ -1867,41 +1897,41 @@ var Te = (e) => e.map((e) => ({
 		attributes: !0,
 		attributeFilter: ["class", "style"]
 	});
-}), Zt = /* @__PURE__ */ new Set(), Qt = null, $t = (e) => {
-	Zt.add(e), !Qt && (Qt = new MutationObserver(() => {
-		for (let e of Zt) e.relabel();
+}), on = /* @__PURE__ */ new Set(), sn = null, cn = (e) => {
+	on.add(e), !sn && (sn = new MutationObserver(() => {
+		for (let e of on) e.relabel();
 		requestAnimationFrame(() => requestAnimationFrame(() => {
-			for (let e of Zt) e.refresh();
+			for (let e of on) e.refresh();
 		}));
-	}), Qt.observe(document.documentElement, {
+	}), sn.observe(document.documentElement, {
 		attributes: !0,
 		attributeFilter: ["lang"]
 	}));
-}, en = (e) => {
-	Zt.delete(e), !Zt.size && Qt && (Qt.disconnect(), Qt = null);
-}, tn = ["column", "bar"], nn = (e) => {
+}, ln = (e) => {
+	on.delete(e), !on.size && sn && (sn.disconnect(), sn = null);
+}, un = ["column", "bar"], dn = (e) => {
 	let t = e.getAttribute("data-chart") || "column";
-	if (!tn.includes(t)) return null;
+	if (!un.includes(t)) return null;
 	let n = getComputedStyle(e).getPropertyValue("--tablechart-type").trim();
-	return tn.includes(n) ? n : t;
-}, rn = (e, t) => {
-	let n = e, r = nn(n.figure), i = null, a = !1, o = !1, s = async () => {
-		if (!t.animate) return Dt(n, !0);
+	return un.includes(n) ? n : t;
+}, fn = (e, t) => {
+	let n = e, r = dn(n.figure), i = null, a = !1, o = !1, s = async () => {
+		if (!t.animate) return Ft(n, !0);
 		let e = n.figure.classList.contains("is-shown");
 		if (a && i !== null && !e && !o) {
 			o = !0;
-			let e = Gt() ? null : Yt(n.figure);
-			e && await Xt(e), await Jt(n.figure, qt(n.figure, t)), o = !1, (a || !t.replay) && Dt(n, !0);
-		} else !a && t.replay && e && Dt(n, !1);
+			let e = $t() ? null : rn(n.figure);
+			e && await an(e), await nn(n.figure, tn(n.figure, t)), o = !1, (a || !t.replay) && Ft(n, !0);
+		} else !a && t.replay && e && Ft(n, !1);
 	}, c = () => {
-		let e = nn(n.figure);
+		let e = dn(n.figure);
 		if (!e || e === r) return;
-		let a = X.timed("Building", n.figure, () => gt(n.figure, t, e));
-		a && (Et(n), He(a, n.step, !0), n = a, r = e, i = null);
+		let a = X.timed("Building", n.figure, () => wt(n.figure, t, e));
+		a && (Pt(n), He(a, n.step, !0), n = a, r = e, i = null);
 	}, l = () => {
 		c();
 		let e = n.plot.clientWidth;
-		e && e !== i && X.timed("Layout", n.figure, () => wt(n, t)) && (i = e, s());
+		e && e !== i && X.timed("Layout", n.figure, () => Mt(n, t)) && (i = e, s());
 	}, u = !1, d = new ResizeObserver(() => {
 		u || (u = !0, requestAnimationFrame(() => {
 			u = !1, l();
@@ -1909,14 +1939,14 @@ var Te = (e) => e.map((e) => ({
 	}), f = new IntersectionObserver((e) => {
 		for (let t of e) a = t.isIntersecting, s();
 	}, { threshold: t.threshold }), p = () => {
-		n.figure.classList.add(h), Dt(n, !0), n.figure.offsetWidth;
+		n.figure.classList.add(h), Ft(n, !0), n.figure.offsetWidth;
 	}, m = () => n.figure.classList.remove(h), g = () => {
 		i = null, l();
 	}, _ = {
-		relabel: () => Tt(n, t),
+		relabel: () => Nt(n, t),
 		refresh: g
 	};
-	c(), l(), d.observe(n.figure), f.observe(n.figure), window.addEventListener("beforeprint", p), window.addEventListener("afterprint", m), $t(_);
+	c(), l(), d.observe(n.figure), f.observe(n.figure), window.addEventListener("beforeprint", p), window.addEventListener("afterprint", m), cn(_);
 	let v = {
 		figure: n.figure,
 		refresh: g,
@@ -1930,26 +1960,29 @@ var Te = (e) => e.map((e) => ({
 			return n.plan?.count ?? 0;
 		},
 		destroy() {
-			d.disconnect(), f.disconnect(), window.removeEventListener("beforeprint", p), window.removeEventListener("afterprint", m), en(_), at(n), n.figure.tablechart === v && delete n.figure.tablechart;
+			d.disconnect(), f.disconnect(), window.removeEventListener("beforeprint", p), window.removeEventListener("afterprint", m), ln(_), pt(n), n.figure.tablechart === v && delete n.figure.tablechart;
 		}
 	};
 	return n.figure.tablechart = v, v;
-}, an = async (e, t) => {
-	let n = Lt(e.filter((e) => !e.hasAttribute(Wt)));
-	return await Bt(n), Ut(n), Le(n, t.langattribute), n;
-}, on = (e, t) => {
-	let n = X.timed("Building", e, () => gt(e, t));
-	return n ? (e.setAttribute(Wt, ""), rn(n, t)) : null;
-}, sn = async (e, t = {}) => {
+}, pn = !1, mn = (t) => {
+	let n = t.find((e) => e.tagName !== "FIGURE");
+	!pn && n && (pn = !0, console.warn(`[${e}] A chart is a <${n.tagName.toLowerCase()}>. Use a <figure> with a <figcaption>, so the chart has a title, also for screen readers.`, n));
+}, hn = async (e, t) => {
+	let n = Gt(e.filter((e) => !e.hasAttribute(Qt)));
+	return mn(n), await Jt(n), Zt(n), Le(n, t.langattribute), n;
+}, gn = (e, t) => {
+	let n = X.timed("Building", e, () => wt(e, t));
+	return n ? (e.setAttribute(Qt, ""), fn(n, t)) : null;
+}, _n = async (e, t = {}) => {
 	if (e.tablechart) return e.tablechart;
 	let n = {
 		...v,
 		...t
 	};
 	n.debug && (X.enabled = !0);
-	let [r] = await an([e], n);
-	return r ? on(r, n) : null;
-}, cn = [
+	let [r] = await hn([e], n);
+	return r ? gn(r, n) : null;
+}, vn = [
 	["--tablechart-duration", "--tablechart-animation-element-duration"],
 	["--tablechart-stagger", "--tablechart-animation-stagger, a share of the element time"],
 	["--tablechart-easing", "--tablechart-animation-ease"],
@@ -1972,32 +2005,32 @@ var Te = (e) => e.map((e) => ({
 	["--tablechart-key-size", "--tablechart-legend-key-size"],
 	["--tablechart-controls-justify", "--tablechart-control-justify"],
 	["--tablechart-controls-gap", "--tablechart-control-gap"]
-], ln = {
+], yn = {
 	up: "grow",
 	across: "sweep"
-}, un = !1, dn = (t, n) => {
-	if (un) return;
+}, bn = !1, xn = (t, n) => {
+	if (bn) return;
 	let r = (e) => {
-		let t = ln[String(e)];
+		let t = yn[String(e)];
 		return t ? [`"${e}" is now "${t}"`] : [];
 	}, i = new Set(r(n.animate));
 	n.hover !== void 0 && i.add("the \"hover\" option is now \"tooltip\"");
 	for (let e of t) {
 		e.hasAttribute("data-chart-hover") && i.add("data-chart-hover is now data-chart-tooltip");
 		let t = getComputedStyle(e);
-		for (let [e, n] of cn) t.getPropertyValue(e).trim() && i.add(`${e} is now ${n}`);
+		for (let [e, n] of vn) t.getPropertyValue(e).trim() && i.add(`${e} is now ${n}`);
 		for (let t of r(e.getAttribute("data-chart-animate"))) i.add(t);
 	}
-	i.size && (un = !0, console.warn(`[${e}] ${[...i].join("; ")}. The old names work until the next minor version.`));
-}, fn = async (e = {}, t = document) => {
+	i.size && (bn = !0, console.warn(`[${e}] ${[...i].join("; ")}. The old names work until the next minor version.`));
+}, Sn = async (e = {}, t = document) => {
 	let n = {
 		...v,
 		...e
 	};
 	n.debug && (X.enabled = !0);
-	let r = await an(Array.from(t.querySelectorAll(n.selector)), n);
-	dn(r, n);
-	let i = r.map((e) => on(e, n)).filter((e) => e !== null);
+	let r = await hn(Array.from(t.querySelectorAll(n.selector)), n);
+	xn(r, n);
+	let i = r.map((e) => gn(e, n)).filter((e) => e !== null);
 	return X.log(`Made ${i.length} chart(s).`), {
 		charts: i,
 		refresh: () => {
@@ -2009,4 +2042,4 @@ var Te = (e) => e.map((e) => ({
 	};
 };
 //#endregion
-export { h as _, Lt as a, v as b, gt as c, Dt as d, Et as f, t as g, f as h, an as i, wt as l, Le as m, qt as n, Bt as o, He as p, fn as r, Ut as s, sn as t, Tt as u, g as v, m as y };
+export { h as _, Gt as a, v as b, wt as c, Ft as d, Pt as f, t as g, f as h, hn as i, Mt as l, Le as m, tn as n, Jt as o, He as p, Sn as r, Zt as s, _n as t, Nt as u, g as v, m as y };