@martinomagnifico/tablechart 0.1.2 → 1.0.0

package/dist/tablechart-shared.mjs

@@ -1,5 +1,5 @@
 //#region src/js/config.ts
-var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "tablechart-value", i = "tablechart-bar", a = "tablechart-piece", o = "tablechart-rule", s = "tablechart-connector", c = "tablechart-line", l = "tablechart-head", u = "tablechart-badge", d = "tablechart-caption", f = "tablechart-slice", p = "tablechart-divide", m = "tablechart-series", h = "tablechart-area", g = "tablechart-area-fill", _ = "tablechart-name", v = "tablechart-legend", y = "tablechart-point", b = "tablechart-hole", x = "tablechart-centre", S = "tablechart-leader", C = "tablechart-break", w = "is-placed", T = "tablechart-pointer", E = "tablechart-sr", D = "is-shown", O = "tablechart-queued", k = 1e3, A = {
+var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "tablechart-value", i = "tablechart-bar", a = "tablechart-piece", o = "tablechart-rule", s = "tablechart-connector", c = "tablechart-line", l = "tablechart-head", u = "tablechart-badge", d = "tablechart-caption", f = "tablechart-slice", p = "tablechart-divide", m = "tablechart-series", h = "tablechart-area", g = "tablechart-area-fill", _ = "tablechart-name", v = "tablechart-legend", y = "tablechart-point", b = "tablechart-hole", x = "tablechart-centre", S = "tablechart-leader", C = "tablechart-break", w = "is-placed", T = "tablechart-pointer", E = "tablechart-sr", D = "tablechart-minus", O = "is-shown", k = "tablechart-queued", A = "tablechart-controls", j = 1e3, M = {
 	selector: "[data-chart]",
 	aspect: .38,
 	barfill: .58,
@@ -8,28 +8,33 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	entrance: .5,
 	labels: "outside",
 	shape: "straight",
+	closing: "down",
 	legend: !1,
 	hover: !0,
 	totallabel: "Total",
+	controls: !0,
+	previouslabel: "Previous",
+	nextlabel: "Next",
+	stephint: "step of the chart",
 	threshold: .5,
 	replay: !1,
 	langattribute: "data-i18n"
-}, j = (e, t) => `${e}:${t}`, M = "http://www.w3.org/2000/svg", N = (e, t = {}) => {
-	let n = document.createElementNS(M, e);
+}, N = (e, t) => `${e}:${t}`, P = "http://www.w3.org/2000/svg", F = (e, t = {}) => {
+	let n = document.createElementNS(P, e);
 	for (let e in t) n.setAttribute(e, String(t[e]));
 	return n;
-}, P = (e, t) => [e, ...t.classes].join(" "), F = (e, t) => {
+}, I = (e, t) => [e, ...t.classes].join(" "), L = (e, t) => {
 	let n = document.createElement("span");
 	return n.className = e, n.inert = !0, t.appendChild(n), n;
-}, I = (e, t, n, r, i) => {
+}, R = (e, t, n, r, i) => {
 	e.style.left = `${t / r * 100}%`, e.style.top = `${n / i * 100}%`;
-}, L = 0, ee = (e, t, n, r) => {
+}, z = 0, B = (e, t, n, r) => {
 	if (!t.length) return;
-	let i = `tablechart-cut-${++L}`, a = N("mask", {
+	let i = `tablechart-cut-${++z}`, a = F("mask", {
 		id: i,
 		maskUnits: "userSpaceOnUse"
 	});
-	a.appendChild(N("rect", {
+	a.appendChild(F("rect", {
 		x: -n,
 		y: -r,
 		width: n * 3,
@@ -38,63 +43,93 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	}));
 	for (let e of t) e.setAttribute("fill", "black"), a.appendChild(e);
 	let o = e.querySelector(":scope > defs");
-	o || (o = N("defs"), e.prepend(o)), o.appendChild(a);
-	let s = N("g", { mask: `url(#${i})` });
+	o || (o = F("defs"), e.prepend(o)), o.appendChild(a);
+	let s = F("g", { mask: `url(#${i})` });
 	for (let t of Array.from(e.childNodes)) t !== o && s.appendChild(t);
 	e.appendChild(s);
-}, R = 0, z = {
+}, ee = 0, V = (e) => Array.from(e.querySelectorAll(`.${i}`)).map((e) => {
+	let t = e.tagName === "rect" ? [e] : Array.from(e.querySelectorAll("rect")), n = (e, t) => Number(e.getAttribute(t)), r = Math.min(...t.map((e) => n(e, "x"))), i = Math.min(...t.map((e) => n(e, "y"))), a = Math.max(...t.map((e) => n(e, "x") + n(e, "width"))), o = Math.max(...t.map((e) => n(e, "y") + n(e, "height")));
+	return {
+		row: Number(e.dataset.row),
+		x: r,
+		y: i,
+		width: a - r,
+		height: o - i,
+		sideways: e.dataset.grow === "right"
+	};
+}), H = {
 	create: () => null,
 	draw(e, t, n) {
-		let { segments: r, cx: i, y: a, barWidth: o, svg: s, breakAt: c } = n;
-		if (c === null) return;
-		let l = a(c), u = o + o * .09 * 2, d = e.getAttribute("data-mark") === "zigzag", f = u * .3, p = (e, t) => {
-			let n = e - u / 2;
-			if (!d) return [[n, t + f / 2], [n + u, t - f / 2]];
-			let r = u / 6, i = [[n, t]];
-			for (let e = 0; e < 6; e++) i.push([n + r * (e + 1), t + (e % 2 == 0 ? -3.38 : 3.38)]);
-			return i;
-		}, m = (e, t = !1) => e.map(([e, t], n) => `${n === 0 ? "M" : "L"} ${e.toFixed(1)} ${t.toFixed(1)}`).join(" ") + (t ? " Z" : ""), h = `tablechart-break-${++R}`, g = N("mask", {
-			id: h,
+		let { rows: r, y: i, svg: a, breakAt: o } = n;
+		if (o === null) return;
+		let s = e.getAttribute("data-mark") === "zigzag", c = (e, t) => {
+			let n = e.sideways ? e.height : e.width, r = n * .09, i = n + r * 2, a = i * .3, o = i * .06;
+			if (e.sideways) {
+				let n = e.y - r;
+				if (!s) return [[t - a / 2, n], [t + a / 2, n + i]];
+				let c = i / 3;
+				return [
+					[t - o, n],
+					[t + o, n + c],
+					[t - o, n + 2 * c],
+					[t + o, n + i]
+				];
+			}
+			let c = e.x - r;
+			if (!s) return [[c, t + a / 2], [c + i, t - a / 2]];
+			let l = i / 3;
+			return [
+				[c, t + o],
+				[c + l, t - o],
+				[c + 2 * l, t + o],
+				[c + i, t - o]
+			];
+		}, l = (e, t = !1) => e.map(([e, t], n) => `${n === 0 ? "M" : "L"} ${e.toFixed(1)} ${t.toFixed(1)}`).join(" ") + (t ? " Z" : ""), u = `tablechart-break-${++ee}`, d = F("mask", {
+			id: u,
 			maskUnits: "userSpaceOnUse"
 		});
-		g.appendChild(N("rect", {
-			x: -k,
+		d.appendChild(F("rect", {
+			x: -j,
 			y: -n.height,
-			width: k * 3,
+			width: j * 3,
 			height: n.height * 3,
 			fill: "white"
 		}));
-		let _ = [];
-		for (let [e, t] of r.entries()) {
-			if (Math.min(t.from, t.to) >= c || Math.max(t.from, t.to) <= c) continue;
-			let r = i(e), a = p(r, l - 13), o = p(r, l);
-			g.appendChild(N("path", {
-				d: m([...a, ...o.slice().reverse()], !0),
+		let f = [], p = i(o);
+		for (let e of V(a)) {
+			let t = e.sideways ? n.breakX : p;
+			if (t === void 0 || !(e.sideways ? e.x < t && e.x + e.width > t : e.y < p && e.y + e.height > p)) continue;
+			let [i, o] = e.sideways ? [c(e, t), c(e, t + n.breakGap)] : [c(e, p - n.breakGap), c(e, p)];
+			d.appendChild(F("path", {
+				d: l([...i, ...o.slice().reverse()], !0),
 				fill: "black"
-			})), _.push(a, o);
-			let u = j("--after", t.slot);
-			for (let e of [a, o]) s.appendChild(N("path", {
+			})), f.push(i, o);
+			let s = N("--after", r[e.row - 1]?.slot ?? 0);
+			for (let e of [i, o]) a.appendChild(F("path", {
 				class: C,
 				"data-part": "edge",
 				"data-note": n.note,
-				d: m(e),
-				style: u
+				d: l(e),
+				style: s
 			}));
 		}
-		if (!_.length) return;
-		let v = Array.from(s.querySelectorAll(`.${C}`)), y = N("g", { mask: `url(#${h})` });
-		for (let e of Array.from(s.childNodes)) v.includes(e) || y.appendChild(e);
-		let b = N("defs");
-		b.appendChild(g), s.prepend(b, y);
+		if (!f.length) return;
+		let m = Array.from(a.querySelectorAll(`.${C}`)), h = F("g", { mask: `url(#${u})` });
+		for (let e of Array.from(a.childNodes)) m.includes(e) || h.appendChild(e);
+		let g = F("defs");
+		g.appendChild(d), a.prepend(g, h);
 	}
-}, B = (e) => {
+}, U = (e) => {
 	let t = -Infinity;
 	for (let n of e) t = Math.max(t, n);
 	return t;
-}, V = (e) => (e.split(/[.,]/)[1] || "").length, H = (e, t, n) => new Intl.NumberFormat(n || document.documentElement.lang || void 0, {
-	minimumFractionDigits: t,
-	maximumFractionDigits: t
-}).format(e), U = (e) => Number.parseFloat((e.match(/-?[\d.,]+/) || ["NaN"])[0].replace(",", ".")), W = (e, t) => {
+}, W = (e) => (e.split(/[.,]/)[1] || "").length, te = (e, t) => new Intl.NumberFormat(t || document.documentElement.lang || void 0, {
+	minimumFractionDigits: e,
+	maximumFractionDigits: e
+}), G = (e, t, n) => {
+	let r = te(t, n).formatToParts(e), i = r[0]?.type === "minusSign" ? r[0].value : "";
+	return [i, r.slice(+!!i).map((e) => e.value).join("")];
+}, K = (e) => Number.parseFloat((e.match(/-?[\d.,]+/) || ["NaN"])[0].replace(",", ".")), q = (e, t) => {
 	let n = document.createElement("span");
 	if (n.className = u, n.inert = !0, e.childElementCount > 0) for (let t of Array.from(e.children)) n.appendChild(t.cloneNode(!0));
 	else {
@@ -103,54 +138,54 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 		t && n.setAttribute("data-i18n", t);
 	}
 	return t.appendChild(n), n;
-}, G = (t, n, r, i) => {
-	let a = U(t?.textContent || ""), o = Number.isNaN(a) ? !0 : Math.abs(n - a) <= .5, s = {
+}, J = (t, n, r, i) => {
+	let a = K(t?.textContent || ""), o = Number.isNaN(a) ? !0 : Math.abs(n - a) <= .5, s = {
 		label: r,
 		computed: n,
 		stated: a,
 		agrees: o
 	};
 	i.checks.push(s), o || console.warn(`[${e}] An annotation reads ${a}%, but ${r} is ${n.toFixed(1)}%. The chart shows what you wrote; this is only a check.`);
-}, te = (e, t) => (t - e) / Math.abs(e) * 100, K = (e, t) => {
+}, ne = (e, t) => (t - e) / Math.abs(e) * 100, re = (e, t) => {
 	let n = (t, n) => {
 		let r = Number.parseInt(e.getAttribute(t) ?? "", 10);
 		return Number.isFinite(r) ? r - 1 : n;
 	};
 	return [n("data-from", 0), n("data-to", t - 1)];
-}, ne = {
-	create: W,
+}, ie = {
+	create: q,
 	draw(t, n, r) {
-		let { rows: i, cx: a, y: o, unit: s, labelHeight: u, badgeHeight: d, height: f, svg: p, after: m } = r, [h, g] = K(t, i.length), _ = i[h], v = i[g];
+		let { rows: i, cx: a, y: o, unit: s, labelHeight: u, badgeHeight: d, height: f, svg: p, after: m } = r, [h, g] = re(t, i.length), _ = i[h], v = i[g];
 		if (!_ || !v) {
 			console.warn(`[${e}] A bracket points at a row that is not there (row ${h + 1} to ${g + 1}, of ${i.length}).`);
 			return;
 		}
 		let y = 7 * s, b = 4 * s, x = a(h), S = a(g), C = Math.min(o(_.value), o(v.value)) - u - b - d * .9, w = (e) => o(e) - u - b, T = `M ${x} ${w(_.value)} L ${x} ${C} L ${S} ${C} L ${S} ${w(v.value) - y}`, E = (w(_.value) - C + Math.abs(S - x) + (w(v.value) - y - C)) / s + 1;
-		p.appendChild(N("path", {
+		p.appendChild(F("path", {
 			class: c,
 			"data-note": r.note,
 			d: T,
-			style: `--len:${E.toFixed(1)}; ${j("--after", m)}`
+			style: `--len:${E.toFixed(1)}; ${N("--after", m)}`
 		}));
 		let D = w(v.value);
-		p.appendChild(N("polygon", {
+		p.appendChild(F("polygon", {
 			class: l,
 			"data-note": r.note,
 			points: `${S},${D} ${S - y * .45},${D - y} ${S + y * .45},${D - y}`,
-			style: j("--after", m)
-		})), n && (I(n, (x + S) / 2, C, k, f), n.style.setProperty("--after", String(m))), G(n, te(_.value, v.value), `${_.value} to ${v.value}`, r);
+			style: N("--after", m)
+		})), n && (R(n, (x + S) / 2, C, j, f), n.style.setProperty("--after", String(m))), J(n, ne(_.value, v.value), `${_.value} to ${v.value}`, r);
 	}
-}, q = /* @__PURE__ */ new WeakMap(), re = (e) => {
+}, ae = /* @__PURE__ */ new WeakMap(), oe = (e) => {
 	let t = [...e].filter((e) => !!e), n = t.map((e) => ({
 		width: e.offsetWidth,
 		height: e.offsetHeight
 	}));
-	t.forEach((e, t) => q.set(e, n[t]));
-}, J = (e) => q.get(e) ?? {
+	t.forEach((e, t) => ae.set(e, n[t]));
+}, Y = (e) => ae.get(e) ?? {
 	width: e.offsetWidth,
 	height: e.offsetHeight
-}, ie = (e, t, n) => ((t / e) ** (1 / n) - 1) * 100, ae = {
-	create: W,
+}, se = (e, t, n) => ((t / e) ** (1 / n) - 1) * 100, ce = {
+	create: q,
 	draw(e, t, n) {
 		let { rows: r, cx: i, y: a, unit: o, labelHeight: s, height: u, svg: d, values: f, after: p } = n, m = r[0], h = r[r.length - 1];
 		if (!m || !h) return;
@@ -161,55 +196,59 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 		}), b -= C, S -= C;
 		let w = x - y, T = S - b, E = Math.hypot(w, T) || 1, D = w / E, O = T / E;
 		y -= D * _, b -= O * _, x += D * _, S += O * _;
-		let A = Number.parseFloat(e.getAttribute("data-at") || "0.5");
+		let k = Number.parseFloat(e.getAttribute("data-at") || "0.5");
 		if (t) {
-			let e = y + (x - y) * A, n = b + (S - b) * A, c = J(t).width * o / 2, l = n + J(t).height * o / 2 + 8 * o, u = 0;
+			let e = y + (x - y) * k, n = b + (S - b) * k, c = Y(t).width * o / 2, l = n + Y(t).height * o / 2 + 8 * o, u = 0;
 			r.forEach((t, n) => {
-				let r = (f[n] ? J(f[n]).width : 0) * o / 2;
+				let r = (f[n] ? Y(f[n]).width : 0) * o / 2;
 				if (Math.abs(i(n) - e) >= c + r) return;
 				let d = a(t.value) - 7 * o - s;
 				u = Math.max(u, l - d);
 			}), b -= u, S -= u;
 		}
-		let M = x - D * v, P = S - O * v, F = Math.hypot(M - y, P - b) / o + 1;
-		d.appendChild(N("line", {
+		let A = x - D * v, M = S - O * v, P = Math.hypot(A - y, M - b) / o + 1;
+		d.appendChild(F("line", {
 			class: c,
 			"data-note": n.note,
 			x1: y,
 			y1: b,
-			x2: M,
-			y2: P,
-			style: `--len:${F.toFixed(1)}; ${j("--after", p)}`
+			x2: A,
+			y2: M,
+			style: `--len:${P.toFixed(1)}; ${N("--after", p)}`
 		}));
-		let L = -O, ee = D, R = v * .42;
-		d.appendChild(N("polygon", {
+		let I = -O, L = D, z = v * .42;
+		d.appendChild(F("polygon", {
 			class: l,
 			"data-note": n.note,
 			points: [
 				`${x},${S}`,
-				`${M + L * R},${P + ee * R}`,
-				`${M - L * R},${P - ee * R}`
+				`${A + I * z},${M + L * z}`,
+				`${A - I * z},${M - L * z}`
 			].join(" "),
-			style: j("--after", p)
-		})), t && (I(t, y + (x - y) * A, b + (S - b) * A, k, u), t.style.setProperty("--after", String(p)));
-		let z = Number.parseFloat(e.getAttribute("data-years") || "");
-		!Number.isNaN(z) && z > 0 && G(t, ie(m.value, h.value, z), `${m.value} to ${h.value} over ${z} years`, n);
+			style: N("--after", p)
+		})), t && (R(t, y + (x - y) * k, b + (S - b) * k, j, u), t.style.setProperty("--after", String(p)));
+		let B = Number.parseFloat(e.getAttribute("data-years") || "");
+		!Number.isNaN(B) && B > 0 && J(t, se(m.value, h.value, B), `${m.value} to ${h.value} over ${B} years`, n);
 	}
-}, oe = (e, t, n) => {
+}, le = (e, t, n, r, i) => {
+	if (!r) return e / t * n;
+	let { lo: a, hi: o, gap: s, share: c } = r, l = n * c, u = (n - l - i) / (a + (t - o)), d = l / (o - a);
+	return e <= a ? e * u : e <= s ? a * u + (e - a) * d : e <= o ? a * u + (e - a) * d + i : a * u + l + i + (e - o) * u;
+}, ue = (e, t, n) => {
 	let r = .15, i = Math.min(e * .7 / (t + (t - 1) * r), n), a = t * i + (t - 1) * i * r;
 	return {
 		size: i,
 		gap: i * r,
 		offset: (e) => -a / 2 + e * i * 1.15
 	};
-}, se = (e, t, n) => {
+}, de = (e, t, n) => {
 	let r = e.series[n], i = e.series.some((e) => e.focus) && !r.focus;
 	return {
 		"data-series": n + 1,
 		...i && { "data-muted": "" },
-		style: `--n:${n}; --m:${+!!i}; --palette:var(--tablechart-color-${n + 1}); ${j("--i", t.slot)}`
+		style: `--n:${n}; --m:${+!!i}; --palette:var(--tablechart-color-${n + 1}); ${N("--i", t.slot)}`
 	};
-}, Y = (e, t) => {
+}, fe = (e, t) => {
 	let n = 0;
 	return Array.from({ length: t }, (t, r) => {
 		let i = e.cells[r] ?? e.cells[0], a = n;
@@ -219,26 +258,26 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 			cell: i
 		};
 	});
-}, ce = (e, t) => Y(e, t).at(-1)?.to ?? 0, le = (e, t, n) => {
+}, pe = (e, t) => fe(e, t).at(-1)?.to ?? 0, me = (e, t, n) => {
 	let r = t.series.some((e) => e.focus);
 	e.style.setProperty("--n", String(n)), e.style.setProperty("--m", r && !t.series[n].focus ? "1" : "0"), e.style.setProperty("--palette", `var(--tablechart-color-${n + 1})`);
-}, ue = (e, t, n, r = {}) => {
-	let o = N("g", {
-		class: P(i, t),
+}, he = (e, t, n, r = {}) => {
+	let o = F("g", {
+		class: I(i, t),
 		"data-kind": "bar",
 		"data-row": n + 1,
 		...r,
 		"data-stack": "",
-		style: j("--i", t.slot)
+		style: N("--i", t.slot)
 	});
 	return e.svg.appendChild(o), (n, r) => {
-		o.appendChild(N("rect", {
+		o.appendChild(F("rect", {
 			...r,
-			class: P(a, t),
-			...se(e, t, n)
+			class: I(a, t),
+			...de(e, t, n)
 		}));
 	};
-}, de = 6, fe = (e, t, n) => e.some((e) => J(e).width * n > t - de * n), pe = (e, t, n) => t >= J(e).height * n * 1.6, me = (e, t, n) => t >= J(e).width * n * 1.5, he = (e, t, n, r, i = .7) => {
+}, ge = 6, _e = (e, t, n) => e.some((e) => Y(e).width * n > t - ge * n), ve = (e, t, n) => t >= Y(e).height * n * 1.6, ye = (e, t, n) => t >= Y(e).width * n * 1.5, be = (e, t, n, r, i = .7) => {
 	e.style.setProperty(r, "1");
 	let a = 1;
 	for (let e of t) {
@@ -247,10 +286,10 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	}
 	let o = a >= i ? a : 0;
 	return e.style.setProperty(r, String(o || i)), o;
-}, ge = (e, t) => (e.sort((e, t) => e.y - t.y), e.forEach((n, r) => {
+}, xe = (e, t) => (e.sort((e, t) => e.y - t.y), e.forEach((n, r) => {
 	let i = e[r - 1];
 	i && n.y < i.y + t && (n.y = i.y + t);
-}), e), _e = {
+}), e), Se = {
 	segments: (e) => e.map((e) => ({
 		...e,
 		from: 0,
@@ -261,6 +300,7 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	legend: "box",
 	stackable: !0,
 	totals: !0,
+	breakable: !0,
 	aspect: .5,
 	minHeight: ({ labelHeight: e, nameHeight: t, rows: n, series: r, stacked: i }) => {
 		let a = e * 1.1, o = r > 1 && !i ? a * (r + .15 * (r - 1)) / .7 : a / .58;
@@ -269,35 +309,35 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	categories: "beside",
 	headroom: () => 0,
 	draw(e) {
-		let { segments: t, height: n, unit: r, svg: a, values: s, categories: c, config: l, barMax: u } = e, d = e.series.length > 1, f = Math.max(B(c.map((e) => J(e).width * r)), 0), p = Math.min(f + 10 * r, k * .42), m = k - 4 * r, h = e.stacked ? Math.max(B(e.rows.map((t) => ce(t, e.series.length))), 0) || 1 : Math.max(B(e.rows.flatMap((t) => t.cells.slice(0, e.series.length).map((e) => Math.abs(e.value)))), 0) || 1, g = (e) => J(e).width * r, _ = (e) => e.length ? B(e.map(g)) + 9 * r : 0, v = e.stacked ? _(e.totals) : d ? _(e.seriesValues.flat()) : 0;
+		let { segments: t, height: n, unit: r, svg: a, values: s, categories: c, config: l, barMax: u } = e, d = e.series.length > 1, f = Math.max(U(c.map((e) => Y(e).width * r)), 0), p = Math.min(f + 10 * r, j * .42), m = j - 4 * r, h = e.stacked ? Math.max(U(e.rows.map((t) => pe(t, e.series.length))), 0) || 1 : Math.max(U(e.rows.flatMap((t) => t.cells.slice(0, e.series.length).map((e) => Math.abs(e.value)))), 0) || 1, g = Math.max(h, e.squeeze?.hi ?? 0), _ = (t, n) => le(Math.abs(t), g, n, e.squeeze, e.breakGap), v = n / t.length, y = (e) => (e + .5) * v, b = Math.min(v * l.barfill, u), x = ue(v, e.series.length, u), S = s[0] ?? e.totals[0], C = S ? Y(S).height * r * .56 : 0, w = Math.max(((d && !e.stacked ? x.size : b) - C) / 2, 5 * r), T = (e) => Y(e).width * r, E = (e) => e.length ? U(e.map(T)) + w + 4 * r : 0, D = e.stacked ? E(e.totals) : d ? E(e.seriesValues.flat()) : 0;
 		if (!d) for (let e = 0; e < 3; e++) {
-			let e = m - p - v, n = _(t.map((e, t) => ({
+			let e = m - p - D, n = E(t.map((e, t) => ({
 				seg: e,
 				label: s[t]
-			})).filter(({ seg: t, label: n }) => !me(n, Math.abs(t.value) / h * e, r)).map(({ label: e }) => e));
-			if (n <= v) break;
-			v = n;
+			})).filter(({ seg: t, label: n }) => !ye(n, _(t.value, e), r)).map(({ label: e }) => e));
+			if (n <= D) break;
+			D = n;
 		}
-		let y = m - p - v, b = (e) => p + Math.abs(e) / h * y, x = n / t.length, S = (e) => (e + .5) * x, C = Math.min(x * l.barfill, u);
-		if (e.stacked) {
+		let O = m - p - D, k = (e) => p + _(e, O);
+		if (e.squeeze && (e.breakX = k(e.squeeze.gap)), e.stacked) {
 			e.rows.forEach((t, i) => {
-				let a = ue(e, t, i, { "data-grow": "right" }), o = S(i) - C / 2, s = Y(t, e.series.length);
+				let a = he(e, t, i, { "data-grow": "right" }), o = y(i) - b / 2, s = fe(t, e.series.length);
 				s.forEach(({ from: t, to: s, cell: c }, l) => {
 					let u = e.seriesValues[l][i];
 					if (u.dataset.place = "none", c.missing || s === t) return;
-					let d = b(t), f = b(s);
+					let d = k(t), f = k(s);
 					a(l, {
 						x: d,
 						y: o,
 						width: Math.max(f - d, 1),
-						height: C
-					}), u.dataset.place = "inside", u.toggleAttribute("data-left-out", !me(u, f - d, r) || J(u).height * r > C), le(u, e, l), I(u, (d + f) / 2, S(i), k, n);
+						height: b
+					}), u.dataset.place = "inside", u.toggleAttribute("data-left-out", !ye(u, f - d, r) || Y(u).height * r > b), me(u, e, l), R(u, (d + f) / 2, y(i), j, n);
 				});
 				let l = e.totals[i];
-				l && (l.dataset.place = "after", I(l, b(s.at(-1)?.to ?? 0) + 5 * r, S(i), k, n));
+				l && (l.dataset.place = "after", R(l, k(s.at(-1)?.to ?? 0) + w, y(i), j, n));
 				let u = c[i];
-				u && I(u, p - 8 * r, S(i), k, n);
-			}), a.appendChild(N("line", {
+				u && R(u, p - 8 * r, y(i), j, n);
+			}), a.appendChild(F("line", {
 				class: o,
 				x1: p,
 				x2: p,
@@ -307,35 +347,34 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 			return;
 		}
 		if (d) {
-			let t = oe(x, e.series.length, u);
 			e.plot.dataset.grouped = "";
-			let s = e.seriesValues.flat().filter((e) => e.dataset.missing === void 0), l = he(e.plot, s, (e) => ({
-				size: J(e).height * r,
-				room: t.size + t.gap * .5
+			let t = e.seriesValues.flat().filter((e) => e.dataset.missing === void 0), s = be(e.plot, t, (e) => ({
+				size: Y(e).height * r,
+				room: x.size + x.gap * .5
 			}), "--tablechart-fit");
-			e.rows.forEach((o, s) => {
-				e.series.forEach((c, u) => {
-					let d = o.cells[u] ?? o.cells[0], f = e.seriesValues[u][s];
-					if (d.missing) {
-						f.dataset.place = "none";
+			e.rows.forEach((t, o) => {
+				e.series.forEach((r, c) => {
+					let l = t.cells[c] ?? t.cells[0], u = e.seriesValues[c][o];
+					if (l.missing) {
+						u.dataset.place = "none";
 						return;
 					}
-					let m = b(d.value), h = S(s) + t.offset(u);
-					a.appendChild(N("rect", {
-						class: P(i, o),
+					let d = k(l.value), f = y(o) + x.offset(c);
+					a.appendChild(F("rect", {
+						class: I(i, t),
 						"data-kind": "bar",
-						"data-row": s + 1,
+						"data-row": o + 1,
 						"data-grow": "right",
 						x: p,
-						y: h,
-						width: Math.max(m - p, 1),
-						height: t.size,
-						...se(e, o, u)
-					})), f.dataset.place = "after", f.toggleAttribute("data-left-out", !l), I(f, m + 5 * r, h + t.size / 2, k, n);
+						y: f,
+						width: Math.max(d - p, 1),
+						height: x.size,
+						...de(e, t, c)
+					})), u.dataset.place = "after", u.toggleAttribute("data-left-out", !s), R(u, d + w, f + x.size / 2, j, n);
 				});
-				let u = c[s];
-				u && I(u, p - 8 * r, S(s), k, n);
-			}), a.appendChild(N("line", {
+				let l = c[o];
+				l && R(l, p - 8 * r, y(o), j, n);
+			}), a.appendChild(F("line", {
 				class: o,
 				x1: p,
 				x2: p,
@@ -344,24 +383,25 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 			}));
 			return;
 		}
-		t.forEach((e, t) => {
-			let o = b(e.value), l = S(t);
-			a.appendChild(N("rect", {
-				class: P(i, e),
-				"data-kind": e.kind,
-				"data-row": t + 1,
+		let A = t.map((e, t) => ye(s[t], k(e.value) - p, r));
+		t.forEach((t, o) => {
+			let l = k(t.value), u = y(o);
+			a.appendChild(F("rect", {
+				class: I(i, t),
+				"data-kind": t.kind,
+				"data-row": o + 1,
 				"data-grow": "right",
 				x: p,
-				y: l - C / 2,
-				width: Math.max(o - p, 1),
-				height: C,
-				style: j("--i", e.slot)
+				y: u - b / 2,
+				width: Math.max(l - p, 1),
+				height: b,
+				style: N("--i", t.slot)
 			}));
-			let u = s[t], d = me(u, o - p, r);
-			u.dataset.place = d ? "inside" : "after", u.dataset.kind = e.kind, I(u, d ? o - 6 * r - J(u).width * r / 2 : o + 5 * r, l, k, n);
-			let f = c[t];
-			f && I(f, p - 8 * r, l, k, n);
-		}), a.appendChild(N("line", {
+			let d = s[o], f = Math.max(Math.min(w, l - p - T(d) - 6 * r), 6 * r);
+			d.dataset.place = A[o] ? "inside" : "after", d.dataset.kind = t.kind, R(d, A[o] ? e.insideAlign === "center" ? (p + l) / 2 : e.insideAlign === "start" ? p + f + T(d) / 2 : l - f - T(d) / 2 : l + w, u, j, n);
+			let m = c[o];
+			m && R(m, p - 8 * r, u, j, n);
+		}), a.appendChild(F("line", {
 			class: o,
 			x1: p,
 			x2: p,
@@ -369,7 +409,7 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 			y2: n
 		}));
 	}
-}, ve = {
+}, Ce = {
 	segments: (e) => e.map((e) => ({
 		...e,
 		from: 0,
@@ -383,11 +423,11 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	breakable: !0,
 	headroom: ({ labelHeight: e, badgeHeight: t, hasAnnotations: n, unit: r }) => e + 4 * r + (n ? t * 1.6 : 0),
 	draw(e) {
-		let { segments: t, cx: n, y: r, barWidth: a, height: s, unit: c, svg: l, values: u, labels: d } = e, f = r(0);
+		let { segments: t, cx: n, y: r, barWidth: a, height: s, unit: c, svg: l, values: u, labels: d, insideAlign: f } = e, p = r(0);
 		if (e.stacked) {
 			e.rows.forEach((t, i) => {
-				let o = ue(e, t, i), l = n(i) - a / 2;
-				Y(t, e.series.length).forEach(({ from: t, to: u, cell: d }, f) => {
+				let o = he(e, t, i), l = n(i) - a / 2;
+				fe(t, e.series.length).forEach(({ from: t, to: u, cell: d }, f) => {
 					let p = e.seriesValues[f][i];
 					if (p.dataset.place = "none", d.missing || u === t) return;
 					let m = r(u), h = r(t);
@@ -396,82 +436,83 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 						y: m,
 						width: a,
 						height: Math.max(h - m, 1)
-					}), p.dataset.place = "inside", p.toggleAttribute("data-left-out", !pe(p, h - m, c) || J(p).width * c > a - 4 * c), le(p, e, f), I(p, n(i), (m + h) / 2, k, s);
+					}), p.dataset.place = "inside", p.toggleAttribute("data-left-out", !ve(p, h - m, c) || Y(p).width * c > a - 4 * c), me(p, e, f), R(p, n(i), (m + h) / 2, j, s);
 				});
-				let u = e.totals[i], d = Y(t, e.series.length).at(-1)?.to ?? 0;
-				u && (u.dataset.place = "outside", I(u, n(i), r(d) - 4 * c, k, s));
-			}), l.appendChild(N("line", {
+				let u = e.totals[i], d = fe(t, e.series.length).at(-1)?.to ?? 0;
+				u && (u.dataset.place = "outside", R(u, n(i), r(d) - 4 * c, j, s));
+			}), l.appendChild(F("line", {
 				class: o,
 				x1: 0,
-				x2: k,
-				y1: f,
-				y2: f
+				x2: j,
+				y1: p,
+				y2: p
 			}));
 			return;
 		}
 		if (e.series.length > 1) {
-			let t = oe(n(1) - n(0) || n(0) * 2, e.series.length, e.barMax);
+			let t = ue(n(1) - n(0) || n(0) * 2, e.series.length, e.barMax);
 			e.plot.dataset.grouped = "";
-			let a = e.seriesValues.flat().filter((e) => e.dataset.missing === void 0), u = he(e.plot, a, (e) => ({
-				size: J(e).width * c,
+			let a = e.seriesValues.flat().filter((e) => e.dataset.missing === void 0), u = be(e.plot, a, (e) => ({
+				size: Y(e).width * c,
 				room: t.size + t.gap * .5
 			}), "--tablechart-fit");
 			e.rows.forEach((a, o) => {
-				e.series.forEach((d, p) => {
-					let m = a.cells[p] ?? a.cells[0], h = e.seriesValues[p][o], g = n(o) + t.offset(p);
+				e.series.forEach((d, f) => {
+					let m = a.cells[f] ?? a.cells[0], h = e.seriesValues[f][o], g = n(o) + t.offset(f);
 					if (m.missing) {
 						h.dataset.place = "none";
 						return;
 					}
 					let _ = r(m.value);
-					l.appendChild(N("rect", {
-						class: P(i, a),
+					l.appendChild(F("rect", {
+						class: I(i, a),
 						"data-kind": "bar",
 						"data-row": o + 1,
 						x: g,
 						y: _,
 						width: t.size,
-						height: Math.max(f - _, 1),
-						...se(e, a, p)
-					})), h.dataset.place = "outside", h.toggleAttribute("data-left-out", !u), I(h, g + t.size / 2, _ - 4 * c, k, s);
+						height: Math.max(p - _, 1),
+						...de(e, a, f)
+					})), h.dataset.place = "outside", h.toggleAttribute("data-left-out", !u), R(h, g + t.size / 2, _ - 4 * c, j, s);
 				});
-			}), l.appendChild(N("line", {
+			}), l.appendChild(F("line", {
 				class: o,
 				x1: 0,
-				x2: k,
-				y1: f,
-				y2: f
+				x2: j,
+				y1: p,
+				y2: p
 			}));
 			return;
 		}
-		let p = fe(u, a, c);
+		let m = _e(u, a, c), h = t.map((e, t) => d === "inside" && !m && !e.missing && ve(u[t], p - r(e.value), c)), g = u[0] ? Y(u[0]).height * c * .56 : 0, _ = Infinity;
+		for (let [e, t] of u.entries()) h[e] && (_ = Math.min(_, (a - Y(t).width * c) / 2));
 		t.forEach((e, t) => {
 			let o = r(e.value);
 			if (e.missing) {
-				I(u[t], n(t), f - 4 * c, k, s), u[t].dataset.place = "outside";
+				R(u[t], n(t), p - 4 * c, j, s), u[t].dataset.place = "outside";
 				return;
 			}
-			l.appendChild(N("rect", {
-				class: P(i, e),
+			l.appendChild(F("rect", {
+				class: I(i, e),
 				"data-kind": e.kind,
 				"data-row": t + 1,
 				x: n(t) - a / 2,
 				y: o,
 				width: a,
-				height: Math.max(f - o, 1),
-				style: j("--i", e.slot)
+				height: Math.max(p - o, 1),
+				style: N("--i", e.slot)
 			}));
-			let m = f - o, h = d === "inside" && !p && pe(u[t], m, c);
-			I(u[t], n(t), h ? o + m / 2 : o - 4 * c, k, s), u[t].dataset.place = h ? "inside" : "outside";
-		}), l.appendChild(N("line", {
+			let d = Math.min(_, (p - o - g) / 2), m = f === "center" ? (o + p) / 2 : f === "start" ? p - d - g / 2 : o + d + g / 2;
+			R(u[t], n(t), h[t] ? m : o - 4 * c, j, s), u[t].dataset.place = h[t] ? "inside" : "outside";
+		}), l.appendChild(F("line", {
 			class: o,
 			x1: 0,
-			x2: k,
-			y1: f,
-			y2: f
+			x2: j,
+			y1: p,
+			y2: p
 		}));
 	}
-}, ye = 0, be = (e) => e.filter((e) => !e.isTotal), xe = {
+}, we = 0, Te = (e) => e.filter((e) => !e.isTotal), Ee = {
 	aspect: .66,
 	centre: !0,
 	headroom: () => 0,
@@ -482,9 +523,9 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 		kind: "bar"
 	})),
 	draw({ rows: e, height: t, unit: n, labelHeight: r, svg: i, values: a, config: o, centre: s }) {
-		let c = k / 2, l = t / 2, u = be(e).reduce((e, t) => e + Math.abs(t.value), 0);
+		let c = j / 2, l = t / 2, u = Te(e).reduce((e, t) => e + Math.abs(t.value), 0);
 		if (!u) return;
-		let d = r * 1.2 + 10 * n, m = Math.max(Math.min(k, t) / 2 - d, 10), h = m * o.ringfill, g = m - h / 2, _ = 2 * Math.PI * g, v = [], y = 0, b = 0;
+		let d = r * 1.2 + 10 * n, m = Math.max(Math.min(j, t) / 2 - d, 10), h = m * o.ringfill, g = m - h / 2, _ = 2 * Math.PI * g, v = [], y = 0, b = 0;
 		if (e.forEach((e, o) => {
 			let s = a[o];
 			if (e.isTotal) {
@@ -492,8 +533,8 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 				return;
 			}
 			let d = Math.abs(e.value) / u * _, p = y / _ * 2 * Math.PI - Math.PI / 2;
-			v.push(p), i.appendChild(N("circle", {
-				class: P(f, e),
+			v.push(p), i.appendChild(F("circle", {
+				class: I(f, e),
 				"data-slice": b + 1,
 				"data-row": o + 1,
 				cx: c,
@@ -503,60 +544,60 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 				transform: `rotate(-90 ${c} ${l})`,
 				"stroke-dasharray": `${d.toFixed(1)} ${(_ - d).toFixed(1)}`,
 				"stroke-dashoffset": (-y).toFixed(1),
-				style: `--n:${b}; --palette:var(--tablechart-color-${b + 1}); --arc:${d.toFixed(1)}; --circ:${_.toFixed(1)}; ${j("--i", e.slot)}`
+				style: `--n:${b}; --palette:var(--tablechart-color-${b + 1}); --arc:${d.toFixed(1)}; --circ:${_.toFixed(1)}; ${N("--i", e.slot)}`
 			}));
 			let x = p + d / _ * Math.PI, C = Math.cos(x), w = Math.sin(x);
-			i.appendChild(N("line", {
+			i.appendChild(F("line", {
 				class: S,
 				x1: c + C * (m + 2 * n),
 				y1: l + w * (m + 2 * n),
 				x2: c + C * (m + 7 * n),
 				y2: l + w * (m + 7 * n),
 				"data-row": o + 1,
-				style: j("--i", e.slot)
+				style: N("--i", e.slot)
 			}));
-			let T = m + 9 * n, E = J(s).width * n / 2;
-			I(s, c + C * (T + Math.abs(C) * E), l + w * (T + Math.abs(w) * r * .7), k, t), s.dataset.place = "around", y += d, b += 1;
+			let T = m + 9 * n, E = Y(s).width * n / 2;
+			R(s, c + C * (T + Math.abs(C) * E), l + w * (T + Math.abs(w) * r * .7), j, t), s.dataset.place = "around", y += d, b += 1;
 		}), v.length > 1) {
-			let e = g - h / 2 - 1, n = g + h / 2 + 1, r = `tablechart-slices-${++ye}`, a = N("mask", {
+			let e = g - h / 2 - 1, n = g + h / 2 + 1, r = `tablechart-slices-${++we}`, a = F("mask", {
 				id: r,
 				maskUnits: "userSpaceOnUse"
 			});
-			a.appendChild(N("rect", {
+			a.appendChild(F("rect", {
 				x: 0,
 				y: 0,
-				width: k,
+				width: j,
 				height: t,
 				fill: "white"
 			}));
-			for (let t of v) a.appendChild(N("line", {
+			for (let t of v) a.appendChild(F("line", {
 				class: p,
 				x1: c + Math.cos(t) * e,
 				y1: l + Math.sin(t) * e,
 				x2: c + Math.cos(t) * n,
 				y2: l + Math.sin(t) * n
 			}));
-			let o = N("g", { mask: `url(#${r})` });
+			let o = F("g", { mask: `url(#${r})` });
 			for (let e of Array.from(i.querySelectorAll(`.${f}`))) o.appendChild(e);
-			let s = N("defs");
+			let s = F("defs");
 			s.appendChild(a), i.prepend(s, o);
 		}
-		s && I(s, c, l, k, t);
+		s && R(s, c, l, j, t);
 	}
-}, Se = [
+}, De = [
 	"circle",
 	"square",
 	"diamond"
-], Ce = (e, t) => {
-	let n = e[t]?.marker?.toLowerCase().split(/\s+/) ?? [], r = Se.find((e) => n.includes(e));
+], Oe = (e, t) => {
+	let n = e[t]?.marker?.toLowerCase().split(/\s+/) ?? [], r = De.find((e) => n.includes(e));
 	return {
-		shape: r ?? Se[Math.floor(t / 2) % Se.length],
+		shape: r ?? De[Math.floor(t / 2) % De.length],
 		open: n.includes("open") || !n.includes("filled") && !r && t % 2 == 1
 	};
-}, we = (e, t, n, r, i = {}) => {
+}, ke = (e, t, n, r, i = {}) => {
 	if (e === "square") {
 		let e = r * .88;
-		return N("rect", {
+		return F("rect", {
 			x: t - e,
 			y: n - e,
 			width: e * 2,
@@ -566,19 +607,19 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-categories", r = "t
 	}
 	if (e === "diamond") {
 		let e = r * 1.2;
-		return N("polygon", {
+		return F("polygon", {
 			points: `${t},${n - e} ${t + e},${n} ${t},${n + e} ${t - e},${n}`,
 			...i
 		});
 	}
-	return N("circle", {
+	return F("circle", {
 		cx: t,
 		cy: n,
 		r,
 		...i
 	});
 }, X = (e) => Number(e.toFixed(2));
-function Te(e, t) {
+function Ae(e, t) {
 	let n = e.length;
 	if (n < 2) return e.map(() => 0);
 	let r = (n) => (t[n + 1] - t[n]) / (e[n + 1] - e[n] || 1), i = Array(n).fill(0);
@@ -595,28 +636,17 @@ function Te(e, t) {
 	};
 	return i[0] = a(0, 1, i[1]), i[n - 1] = a(n - 2, n - 1, i[n - 2]), i;
 }
-function Ee(e, t, n, r) {
+function je(e, t, n, r) {
 	let i = (t[0] - e[0]) / 3;
 	return [[e[0] + i, e[1] + n * i], [t[0] - i, t[1] - r * i]];
 }
-function De(e, t, n, r) {
-	let [i, a] = Ee(e, t, n, r), o = ([e, t]) => `${X(e)},${X(t)}`;
+function Me(e, t, n, r) {
+	let [i, a] = je(e, t, n, r), o = ([e, t]) => `${X(e)},${X(t)}`;
 	return `C${o(i)} ${o(a)} ${o(t)}`;
 }
-function Oe(e, t, n, r, i = 24) {
-	let [a, o] = Ee(e, t, n, r), s = (n) => {
-		let r = 1 - n, i = (e, t, i, a) => r * r * r * e + 3 * r * r * n * t + 3 * r * n * n * i + n * n * n * a;
-		return [i(e[0], a[0], o[0], t[0]), i(e[1], a[1], o[1], t[1])];
-	}, c = 0, l = e;
-	for (let e = 1; e <= i; e++) {
-		let t = s(e / i);
-		c += Math.hypot(t[0] - l[0], t[1] - l[1]), l = t;
-	}
-	return c;
-}
-function ke(e, t, n) {
+function Ne(e, t, n) {
 	let r = Array(e).fill(0), i = [], a = () => {
-		Te(i.map((e) => n(e)[0]), i.map((e) => n(e)[1])).forEach((e, t) => {
+		Ae(i.map((e) => n(e)[0]), i.map((e) => n(e)[1])).forEach((e, t) => {
 			r[i[t]] = e;
 		}), i = [];
 	};
@@ -625,14 +655,13 @@ function ke(e, t, n) {
 }
 //#endregion
 //#region src/js/charts/line.ts
-var Ae = (e) => e.map((e) => ({
+var Pe = (e) => e.map((e) => ({
 	...e,
 	from: 0,
 	to: e.value,
 	kind: "bar"
-})), je = (e) => ({
-	segments: Ae,
-	breakable: !0,
+})), Fe = (e) => ({
+	segments: Pe,
 	series: !0,
 	stackable: !0,
 	swatch: e ? "box" : void 0,
@@ -641,7 +670,7 @@ var Ae = (e) => e.map((e) => ({
 	draw(t) {
 		let { rows: n, series: r, seriesValues: i, names: a, cx: s, y: c, height: l, unit: u, labelHeight: d, svg: f, stacked: p } = t, _ = t.shape === "step", v = t.shape === "smooth", x = r.length > 1, S = r.some((e) => e.focus), C = n.length - 1, w = c(0), T = n.length > 1 ? s(1) - s(0) : s(0) * 2;
 		f.style.setProperty("--tablechart-base", `${X(w)}px`);
-		let E = (e) => `--rise:${X(w - e)}px; `, D = (e, t) => n[t]?.cells[e] ?? n[t]?.cells[0], O = (e, t) => !D(e, t) || !!D(e, t)?.missing, A = n.map((e) => p ? Y(e, r.length) : null), j = (e, t) => A[t]?.[e].to ?? D(e, t)?.value ?? 0, M = (e, t) => A[t]?.[e].from ?? 0, P = (e, t) => [s(t), c(j(e, t))], F = r.map((e, t) => {
+		let E = (e) => `--rise:${X(w - e)}px; `, D = (e, t) => n[t]?.cells[e] ?? n[t]?.cells[0], O = (e, t) => !D(e, t) || !!D(e, t)?.missing, k = n.map((e) => p ? fe(e, r.length) : null), A = (e, t) => k[t]?.[e].to ?? D(e, t)?.value ?? 0, M = (e, t) => k[t]?.[e].from ?? 0, N = (e, t) => [s(t), c(A(e, t))], P = r.map((e, t) => {
 			if (!x) return {
 				attrs: {},
 				ink: ""
@@ -654,172 +683,135 @@ var Ae = (e) => e.map((e) => ({
 				},
 				ink: `--n:${t}; --m:${+!!n}; --palette:var(--tablechart-color-${t + 1}); `
 			};
-		}), L = Math.min(C, 6), R = C > 0 ? L / (_ ? n.length : C) : 1, z = (e) => e * R, B = (e) => `--i:${X(z(e))}`, V = (e) => `--i:${X(z(e) + 1)}; --d:${X(z(e + 1) - z(e))}`, H = (e) => n.map((t, n) => ({
-			i: n,
-			next: n < C && !O(e, n + 1)
-		})).filter(({ i: t, next: n }) => !O(e, t) && (_ || n)), U = v ? r.map((e, t) => ke(n.length, (e) => O(t, e), (e) => P(t, e))) : [], W = v && e ? r.map((e, t) => ke(n.length, (e) => O(t, e), (e) => [s(e), c(M(t, e))])) : [], G = (e) => {
-			let t = N("g", {
+		}), I = Math.min(C, 6), L = C > 0 ? I / (_ ? n.length : C) : 1, z = (e) => e * L, ee = (e) => `--i:${X(z(e))}`, V = (e) => {
+			let t = [], r = -1;
+			return n.forEach((n, i) => {
+				O(e, i) || (r < 0 && (r = i), (i === C || O(e, i + 1)) && ((_ || i > r) && t.push([r, i]), r = -1));
+			}), t;
+		}, H = (e, t) => `--i:${X(z(e) + 1)}; --d:${X(z(_ ? t + 1 : t) - z(e))}`, U = (e, t) => ({
+			"data-from": e + 1,
+			"data-to": t + 1,
+			..._ && { "data-flat": "" }
+		}), W = v ? r.map((e, t) => Ne(n.length, (e) => O(t, e), (e) => N(t, e))) : [], te = v && e ? r.map((e, t) => Ne(n.length, (e) => O(t, e), (e) => [s(e), c(M(t, e))])) : [], G = (e, t, n) => {
+			let r = [];
+			return e.forEach(([i, a], o) => {
+				_ ? (r.push(`H${X(i + n * T / 2)}`), o < e.length - 1 && r.push(`V${X(e[o + 1][1])}`)) : o > 0 && r.push(t ? Me(e[o - 1], [i, a], t[o - 1], t[o]) : `L${X(i)},${X(a)}`);
+			}), r;
+		}, K = (e, t, r, i) => n.slice(t, r + 1).map((n, r) => [s(t + r), c(i(e, t + r))]), q = (e, t, n, r) => v ? e[t].slice(n, r + 1) : null, J = (e) => s(e) - (_ ? T / 2 : 0), ne = (e) => s(e) + (_ ? T / 2 : 0), re = (e) => {
+			let t = F("g", {
 				class: h,
-				...F[e].attrs,
+				...P[e].attrs,
 				...p && { "data-stacked": "" },
-				style: F[e].ink
-			}), n = H(e), r = N("g", {
+				style: P[e].ink
+			}), n = V(e), r = F("g", {
 				class: g,
-				style: `--rows:${X(L + 1)}; ${n.length ? V(n[0].i) : ""}`
+				style: `--rows:${X(I + 1)}; ${n.length ? H(...n[0]) : ""}`
 			});
 			t.appendChild(r);
-			for (let { i: t, next: i } of n) {
-				let n = _ ? s(t) - T / 2 : s(t), a = _ ? s(t) + T / 2 : s(t + 1), [o, l] = [c(j(e, t)), c(M(e, t))], [d, f] = _ ? [o, l] : [c(j(e, t + 1)), c(M(e, t + 1))], p = _ ? t + 1 : t + 2, m = _ ? i : t + 1 < C && !O(e, t + 2), h = m ? 1.5 * u : 0, g = (e, t, r, i, o) => {
-					if (!m) return t;
-					if (v) return t + i * h;
-					if (_) return o(t, r);
-					let c = (t - e) / (a - n), l = (r - t) / (s(p) - a);
-					return o(t + c * h, t + l * h);
-				}, y = g(o, d, c(j(e, p)), U[e]?.[t + 1], Math.max), b = g(l, f, c(M(e, p)), W[e]?.[t + 1], Math.min);
-				y >= b && (h = 0);
-				let x = h ? [`L${X(a + h)},${X(y)}`, `L${X(a + h)},${X(b)}`] : [];
-				if (v) {
-					let i = [
-						`M${X(n)},${X(l)}`,
-						`L${X(n)},${X(o)}`,
-						De([n, o], [a, d], U[e][t], U[e][t + 1]),
-						...x,
-						`L${X(a)},${X(f)}`,
-						De([a, f], [n, l], W[e][t + 1], W[e][t]),
-						"Z"
-					].join(" ");
-					r.appendChild(N("path", {
-						d: i,
-						"data-row": t + 2,
-						style: V(t)
-					}));
-					continue;
-				}
-				let S = _ ? [
-					[n, l],
-					[n, o],
-					[a, o],
-					[a, y],
-					[a + h, y],
-					[a + h, b],
-					[a, b],
-					[a, l]
-				] : [
-					[n, l],
-					[n, o],
-					[a, d],
-					[a + h, y],
-					[a + h, b],
-					[a, f]
-				];
-				r.appendChild(N("polygon", {
-					points: S.map((e) => e.join(",")).join(" "),
-					"data-row": (_ ? t : t + 1) + 1,
-					style: V(t)
+			for (let [t, i] of n) {
+				let n = K(e, t, i, A), a = K(e, t, i, M), o = q(te, e, t, i)?.reverse() ?? null, s = [
+					`M${X(J(t))},${X(a[0][1])}`,
+					`L${X(J(t))},${X(n[0][1])}`,
+					...G(n, q(W, e, t, i), 1),
+					`L${X(ne(i))},${X(a[a.length - 1][1])}`,
+					...G(a.reverse(), o, -1),
+					"Z"
+				].join(" ");
+				r.appendChild(F("path", {
+					d: s,
+					...U(t, i),
+					style: H(t, i)
 				}));
 			}
 			f.appendChild(t);
-		}, te = (e) => {
-			let t = r[e], n = 0, i = (r, i, a, o) => {
-				f.appendChild(N(r.d ? "path" : "polyline", {
+		}, ie = (e) => {
+			let t = r[e];
+			for (let [n, r] of V(e)) {
+				let i = K(e, n, r, A), a = [`M${X(J(n))},${X(i[0][1])}`, ...G(i, q(W, e, n, r), 1)].join(" ");
+				f.appendChild(F("path", {
 					class: m,
-					...F[e].attrs,
-					...r,
+					...P[e].attrs,
+					d: a,
 					...t.line && { "data-line": t.line },
-					"data-row": a,
-					style: `${F[e].ink}--len:${i.toFixed(1)}; --along:${(-n).toFixed(1)}; ${o}`
-				})), n += i - 1;
-			}, a = (e, t) => 1 + Math.hypot(t[0] - e[0], t[1] - e[1]) / u, o = (e, t) => ({ points: `${e.join(",")} ${t.join(",")}` });
-			for (let { i: t, next: n } of H(e)) if (v) {
-				let [n, r] = [P(e, t), P(e, t + 1)], [a, o] = [U[e][t], U[e][t + 1]];
-				i({ d: `M${X(n[0])},${X(n[1])} ${De(n, r, a, o)}` }, 1 + Oe(n, r, a, o) / u, t + 2, V(t));
-			} else if (_) {
-				let r = c(j(e, t)), [l, u] = [[s(t) - T / 2, r], [s(t) + T / 2, r]];
-				i(o(l, u), a(l, u), t + 1, V(t));
-				let d = c(j(e, t + 1));
-				if (n && d !== r) {
-					let e = [u[0], d];
-					i(o(u, e), a(u, e), t + 2, `--i:${X(z(t + 1) + 1)}; --d:0.25`);
-				}
-			} else {
-				let [n, r] = [P(e, t), P(e, t + 1)];
-				i(o(n, r), a(n, r), t + 2, V(t));
+					...U(n, r),
+					style: `${P[e].ink}${H(n, r)}`
+				}));
 			}
 		};
-		e && r.forEach((e, t) => G(t)), r.forEach((e, t) => te(t)), _ || (() => {
-			let e = r.map((e, t) => x ? Ce(r, t) : {
+		e && r.forEach((e, t) => re(t)), r.forEach((e, t) => ie(t)), _ || (() => {
+			let e = r.map((e, t) => x ? Oe(r, t) : {
 				shape: "circle",
 				open: !1
 			}), t = (t, n, r) => {
-				let [i, a] = P(t, n);
-				return we(e[t].shape, i, a, 4 * u, {
+				let [i, a] = N(t, n);
+				return ke(e[t].shape, i, a, 4 * u, {
 					...r,
-					style: `${r.style ?? ""}${E(a)}${B(n)}`
+					style: `${r.style ?? ""}${E(a)}${ee(n)}`
 				});
 			}, i = (e) => n.map((e, t) => t).filter((t) => !O(e, t));
-			ee(f, r.flatMap((n, r) => e[r].open ? i(r).map((e) => t(r, e, {
+			B(f, r.flatMap((n, r) => e[r].open ? i(r).map((e) => t(r, e, {
 				class: b,
 				"data-row": e + 1,
 				...x && { "data-series": r + 1 }
-			})) : []), k, l), r.forEach((n, r) => {
+			})) : []), j, l), r.forEach((n, r) => {
 				for (let n of i(r)) f.appendChild(t(r, n, {
 					class: y,
-					...F[r].attrs,
+					...P[r].attrs,
 					"data-marker": e[r].shape,
 					...e[r].open && { "data-open": "" },
 					"data-row": n + 1,
-					style: F[r].ink
+					style: P[r].ink
 				}));
 			});
 		})();
-		let K = (e, t) => {
+		let ae = (e, t) => {
 			let n = t;
 			for (; n < C && !O(e, n + 1) && D(e, n + 1)?.value === D(e, t)?.value;) n++;
 			return n;
-		}, ne = (t, n) => {
+		}, oe = (t, n) => {
 			let i = D(t, n);
 			if (!i || i.missing || _ && n > 0 && !O(t, n - 1) && D(t, n - 1)?.value === i.value || S && !r[t].focus) return "none";
 			if (p) return "middle";
 			if (!x || S || r.length > 2) return "above";
 			let a = D(1 - t, n);
-			return !a || a.missing || i.value > a.value || i.value === a.value && t === 0 || e && P(t, n)[1] + 7 * u + d > w ? "above" : "below";
-		}, q = (e, t) => !p && !_ ? x && !S && r.length > 2 : J(i[e][t]).width * u > (_ ? K(e, t) - t + 1 : 1) * T - 4 * u ? !0 : p && c(M(e, t)) - c(j(e, t)) < d * 1.2;
+			return !a || a.missing || i.value > a.value || i.value === a.value && t === 0 || e && N(t, n)[1] + 7 * u + d > w ? "above" : "below";
+		}, se = (e, t) => !p && !_ ? x && !S && r.length > 2 : Y(i[e][t]).width * u > (_ ? ae(e, t) - t + 1 : 1) * T - 4 * u ? !0 : p && c(M(e, t)) - c(A(e, t)) < d * 1.2;
 		i.forEach((e, t) => {
 			e.forEach((e, n) => {
 				e.style.setProperty("--i", String(X(_ ? (z(n) + z(n + 1)) / 2 : z(n))));
-				let r = ne(t, n);
-				if (e.dataset.place = r === "above" ? "outside" : r, e.toggleAttribute("data-left-out", r !== "none" && q(t, n)), _ && r !== "none" ? e.dataset.rowEnd = String(K(t, n) + 1) : delete e.dataset.rowEnd, r === "none") return;
-				let i = J(e).width * u / 2 + 4 * u, a = s(n);
-				_ ? a = (s(n) + s(K(t, n))) / 2 : r === "middle" && n === 0 ? a += i : r === "middle" && n === C && (a -= i);
-				let o = c(j(t, n)), d = {
+				let r = oe(t, n);
+				if (e.dataset.place = r === "above" ? "outside" : r, e.toggleAttribute("data-left-out", r !== "none" && se(t, n)), _ && r !== "none" ? e.dataset.rowEnd = String(ae(t, n) + 1) : delete e.dataset.rowEnd, r === "none") return;
+				let i = Y(e).width * u / 2 + 4 * u, a = s(n);
+				_ ? a = (s(n) + s(ae(t, n))) / 2 : r === "middle" && n === 0 ? a += i : r === "middle" && n === C && (a -= i);
+				let o = c(A(t, n)), d = {
 					middle: (c(M(t, n)) - o) / 2,
 					above: -7 * u,
 					below: 7 * u
 				};
-				I(e, a, o + d[r], k, l);
+				R(e, a, o + d[r], j, l);
 			});
 		});
-		let re = a.map((e, t) => {
+		let ce = a.map((e, t) => {
 			let n = C;
 			for (; n > 0 && O(t, n);) n--;
-			let [r, i] = P(t, n);
+			let [r, i] = N(t, n);
 			return {
 				name: e,
 				x: (_ ? r + T / 2 : r) + 10 * u,
 				y: p ? (i + c(M(t, n))) / 2 : i
 			};
-		}), ie = (a[0] ? J(a[0]).height : 0) * u;
-		for (let e of ge(re, ie)) I(e.name, e.x, e.y, k, l);
-		let ae = !e && !p && r.length === 2 && !S ? l - 2 * u : w;
-		f.appendChild(N("line", {
+		}), le = (a[0] ? Y(a[0]).height : 0) * u;
+		for (let e of xe(ce, le)) R(e.name, e.x, e.y, j, l);
+		let ue = !e && !p && r.length === 2 && !S ? l - 2 * u : w;
+		f.appendChild(F("line", {
 			class: o,
 			x1: 0,
 			x2: s(C) + s(0),
-			y1: ae,
-			y2: ae
+			y1: ue,
+			y2: ue
 		}));
 	}
-}), Me = je(!1), Ne = je(!0), Pe = {
+}), Ie = Fe(!1), Le = Fe(!0), Re = {
 	segments: (e) => {
 		let t = 0;
 		return e.map((e) => {
@@ -840,44 +832,53 @@ var Ae = (e) => e.map((e) => ({
 	},
 	breakable: !0,
 	headroom: ({ labelHeight: e, badgeHeight: t, hasAnnotations: n, unit: r }) => e + 6 * r + (n ? t * 1.6 : 0),
-	draw({ segments: e, cx: t, y: n, barWidth: r, height: a, unit: c, svg: l, values: u, breakAt: d }) {
-		let f = n(0), p = fe(u, r, c);
+	draw({ segments: e, cx: t, y: n, barWidth: r, height: a, unit: c, svg: l, values: u, breakAt: d, closing: f, insideAlign: p }) {
+		let m = n(0), h = _e(u, r, c), g = p ?? "center", _ = e.map((t, r) => {
+			let i = n(Math.max(t.from, t.to)), a = Math.abs(n(t.from) - n(t.to)), o = d !== null && Math.min(t.from, t.to) < d && Math.max(t.from, t.to) > d;
+			return {
+				top: i,
+				length: a,
+				down: t.kind === "down" || t.kind === "total" && r > 0 && r === e.length - 1 && f === "down",
+				inside: !o && !h && ve(u[r], a, c)
+			};
+		}), v = u[0] ? Y(u[0]).height * c * .56 : 0, y = Infinity;
+		for (let [e, t] of _.entries()) t.inside && (y = Math.min(y, (r - Y(u[e]).width * c) / 2));
 		e.forEach((i, a) => {
 			let o = e[a + 1];
 			if (!o) return;
 			let c = n(i.to), u = t(a) + r / 2, d = t(a + 1) - r / 2;
-			l.appendChild(N("line", {
+			l.appendChild(F("line", {
 				class: s,
 				x1: u,
 				x2: d,
 				y1: c,
 				y2: c,
 				"data-row": a + 2,
-				style: j("--i", o.slot)
+				style: N("--i", o.slot)
 			}));
-		}), e.forEach((e, o) => {
-			let s = n(Math.max(e.from, e.to)), f = Math.abs(n(e.from) - n(e.to));
-			l.appendChild(N("rect", {
-				class: P(i, e),
+		}), e.forEach((e, n) => {
+			let { top: o, length: s, down: d, inside: f } = _[n];
+			l.appendChild(F("rect", {
+				class: I(i, e),
 				"data-kind": e.kind,
-				"data-row": o + 1,
-				"data-grow": e.kind === "down" ? "down" : "up",
-				x: t(o) - r / 2,
-				y: s,
+				"data-row": n + 1,
+				"data-grow": d ? "down" : "up",
+				x: t(n) - r / 2,
+				y: o,
 				width: r,
-				height: Math.max(f, 1),
-				style: j("--i", e.slot)
+				height: Math.max(s, 1),
+				style: N("--i", e.slot)
 			}));
-			let m = u[o], h = !(d !== null && Math.min(e.from, e.to) < d && Math.max(e.from, e.to) > d) && !p && pe(m, f, c);
-			m.dataset.place = h ? "inside" : "outside", m.dataset.kind = e.kind;
-			let g = h ? s + f / 2 : e.kind === "down" ? s + f + J(m).height * c + 3 * c : s - 3 * c;
-			I(m, t(o), g, k, a);
-		}), l.appendChild(N("line", {
+			let p = u[n], m = Math.min(y, (s - v) / 2), h = o + m + v / 2, b = o + s - m - v / 2, x = g === "center" ? o + s / 2 : g === "end" === d ? b : h;
+			p.dataset.place = f ? "inside" : "outside", p.dataset.kind = e.kind;
+			let S = f ? x : e.kind === "down" ? o + s + Y(p).height * c + 3 * c : o - 3 * c;
+			R(p, t(n), S, j, a);
+		}), l.appendChild(F("line", {
 			class: o,
 			x1: 0,
-			x2: k,
-			y1: f,
-			y2: f
+			x2: j,
+			y1: m,
+			y2: m
 		}));
 	}
 }, Z = {
@@ -890,7 +891,7 @@ var Ae = (e) => e.map((e) => ({
 		let i = performance.now(), a = r(), o = performance.now() - i, s = n.querySelectorAll("tbody tr").length;
 		return o > 50 ? console.warn(`[${e}] ${t} took ${o.toFixed(1)} ms for ${s} rows, more than 50 ms.`, n) : Z.log(`${t} took ${o.toFixed(1)} ms for ${s} rows.`, n), a;
 	}
-}, Fe = (e) => {
+}, ze = (e) => {
 	let t = (e?.textContent || "").trim(), n = t.match(/^(.*?)(-?\d+(?:[.,]\d+)?)(.*)$/);
 	return {
 		raw: t,
@@ -900,9 +901,9 @@ var Ae = (e) => e.map((e) => ({
 		missing: !n,
 		value: n ? Number.parseFloat(n[2].replace(",", ".")) : 0
 	};
-}, Ie = (e, t = "data-i18n") => Array.from(e.querySelectorAll("tbody tr")).map((e, n) => {
-	let r = e.querySelector("th"), i = Array.from(e.querySelectorAll("td")).map(Fe);
-	return i.length || i.push(Fe(null)), {
+}, Be = (e, t = "data-i18n") => Array.from(e.querySelectorAll("tbody tr")).map((e, n) => {
+	let r = e.querySelector("th"), i = Array.from(e.querySelectorAll("td")).map(ze);
+	return i.length || i.push(ze(null)), {
 		...i[0],
 		label: (r?.textContent || "").trim(),
 		key: t && r?.getAttribute(t) || null,
@@ -911,8 +912,8 @@ var Ae = (e) => e.map((e) => ({
 		isTotal: e.getAttribute("data-kind") === "total",
 		slot: n
 	};
-}), Le = (e) => Array.from(e.querySelector("thead tr:last-child")?.children ?? []).slice(1), Re = (e) => e === "dashed" || e === "dotted" ? e : null, ze = (e, t, n = "data-i18n") => {
-	let r = Le(e), i = Math.max(1, B(t.map((e) => e.cells.length)));
+}), Ve = (e) => Array.from(e.querySelector("thead tr:last-child")?.children ?? []).slice(1), He = (e) => e === "dashed" || e === "dotted" ? e : null, Ue = (e, t, n = "data-i18n") => {
+	let r = Ve(e), i = Math.max(1, U(t.map((e) => e.cells.length)));
 	return Array.from({ length: i }, (e, t) => {
 		let i = r[t];
 		return {
@@ -920,10 +921,10 @@ var Ae = (e) => e.map((e) => ({
 			key: n && i?.getAttribute(n) || null,
 			focus: i?.getAttribute("data-kind") === "focus",
 			marker: i?.getAttribute("data-marker") ?? null,
-			line: Re(i?.getAttribute("data-line"))
+			line: He(i?.getAttribute("data-line"))
 		};
 	});
-}, Be = (t, n) => {
+}, We = (t, n) => {
 	if (!n) return;
 	let r = /* @__PURE__ */ new Map();
 	for (let i of t) {
@@ -936,40 +937,164 @@ var Ae = (e) => e.map((e) => ({
 		i.querySelectorAll("tbody th").forEach((e, r) => {
 			e.getAttribute(n) || e.setAttribute(n, `${t}-row${r + 1}`);
 		});
-		let a = Le(i);
+		let a = Ve(i);
 		a.length > 1 && a.forEach((e, r) => {
 			e.getAttribute(n) || e.setAttribute(n, `${t}-col${r + 1}`);
 		}), Z?.log?.(`Keys for "${t}" written onto ${i.querySelectorAll("tbody th").length} rows`);
 	}
-}, Ve = {
-	area: Ne,
-	bar: _e,
-	column: ve,
-	donut: xe,
-	line: Me,
-	waterfall: Pe
-}, He = {
-	"axis-break": z,
-	trend: ae,
-	bracket: ne
-}, Ue = Object.keys(He), We = (e) => {
+}, Ge = [
+	"axis-break",
+	"trend",
+	"bracket"
+], Ke = (e) => {
+	let t = e.hasAttribute("data-fragment"), n = Array.from(e.querySelectorAll("tbody tr")), r = Array.from(e.querySelector("thead tr:last-child")?.children ?? []).slice(1), i = Array.from(e.querySelectorAll("[data-annotation]")).filter((e) => Ge.includes(e.getAttribute("data-annotation") ?? "")), a = (e) => e.hasAttribute("data-fragment");
+	if (!t && !n.some(a) && !r.some(a) && !i.some(a)) return null;
+	let o = [], s = /* @__PURE__ */ new Map(), c = [], l = (e) => {
+		let t = e === null ? void 0 : s.get(e);
+		return t === void 0 && (t = o.length, o.push(e), c.push(0), e !== null && s.set(e, t)), t;
+	}, u = 0, d = n.map((e) => {
+		if (!t && !a(e)) return {
+			step: null,
+			slot: u++
+		};
+		let n = l(e.getAttribute("data-fragment-index"));
+		return {
+			step: n,
+			slot: c[n]++
+		};
+	}), f = r.map((e) => ({ step: a(e) ? l(e.getAttribute("data-fragment-index")) : null }));
+	return {
+		rows: d,
+		series: f,
+		notes: i.map((e) => {
+			let t = (t, n) => {
+				let r = Number.parseInt(e.getAttribute(t) ?? "", 10);
+				return Number.isFinite(r) ? r - 1 : n;
+			}, [n, r] = e.getAttribute("data-annotation") === "bracket" ? [t("data-from", 0), t("data-to", d.length - 1)] : [0, d.length - 1], i = null;
+			for (let e = Math.min(n, r); e <= Math.max(n, r); e++) {
+				let t = d[e]?.step ?? null;
+				t !== null && (i === null || t > i) && (i = t);
+			}
+			let o = f[t("data-series", 0)]?.step ?? null;
+			o !== null && (i === null || o > i) && (i = o), a(e) && (i = l(e.getAttribute("data-fragment-index")));
+			let s = i === null ? d.length : d.filter((e) => e.step === i).length;
+			return {
+				step: i,
+				after: s
+			};
+		}),
+		count: o.length,
+		indexes: o
+	};
+}, qe = (e) => {
+	let t = e.plan;
+	if (!t) return;
+	let n = (t) => t === null || e.step - t >= 1;
+	for (let r of e.figure.querySelectorAll("[data-from]")) {
+		let e = Number(r.dataset.from) - 1, i = Number(r.dataset.to) - 1, a = r.closest("[data-series]")?.dataset.series, o = a ? t.series[Number(a) - 1] : void 0, s = e - 1;
+		if (o && o.step !== null) s = n(o.step) ? i : e - 1;
+		else for (; s < i && n(t.rows[s + 1]?.step ?? null);) s++;
+		let c = r.hasAttribute("data-flat") ? (s - e + 1) / (i - e + 1) : i > e ? Math.max(0, s - e) / (i - e) : 0;
+		r.style.setProperty("--reveal", String(c));
+	}
+}, Je = (e) => {
+	let t = e.plan;
+	if (!t) return;
+	let n = t.rows.length - 1, r = (e, t, n, r) => {
+		e.style.setProperty(n, String(r)), e.style.removeProperty("--d"), t === null ? e.style.removeProperty("--step") : e.style.setProperty("--step", String(t));
+	};
+	for (let i of e.figure.querySelectorAll("[data-row], [data-series], [data-note]")) {
+		if (i.closest("table, .tablechart-controls") || i.hasAttribute("data-from")) continue;
+		let e = Number(i.dataset.note);
+		if (e > 0) {
+			let n = t.notes[e - 1];
+			n && r(i, n.step, "--after", n.after);
+			continue;
+		}
+		let a = i.dataset.row ? Number(i.dataset.row) - 1 : n;
+		if (i.classList.contains("tablechart-connector")) {
+			let e = t.rows[a - 1], n = t.rows[a];
+			if (e && n) {
+				let t = (e.step ?? -1) > (n.step ?? -1);
+				r(i, t ? e.step : n.step, "--i", t ? e.slot + 1 : n.slot);
+			}
+			continue;
+		}
+		let o = i.dataset.series ? t.series[Number(i.dataset.series) - 1] : void 0;
+		o && o.step !== null ? r(i, o.step, "--i", a) : t.rows[a] && r(i, t.rows[a].step, "--i", t.rows[a].slot);
+	}
+	qe(e);
+}, Q = (e, t, n = !1) => {
+	let r = e.plan;
+	if (!r) return;
+	let i = Math.min(Math.max(Math.round(t), 0), r.count), a = i !== e.step;
+	e.step = i, e.figure.style.setProperty("--tablechart-step", String(i)), qe(e);
+	let [o, s] = e.controls?.querySelectorAll("button") ?? [];
+	o && (o.disabled = i === 0), s && (s.disabled = i === r.count), a && !n && e.figure.dispatchEvent(new CustomEvent("tablechart:step", {
+		bubbles: !0,
+		detail: {
+			step: i,
+			steps: r.count
+		}
+	}));
+}, Ye = (e, t, n) => {
+	let r = document.createElement("div");
+	r.className = A;
+	let i = (r) => {
+		let i = document.createElement("button");
+		i.type = "button", i.className = `tablechart-${r}`, i.dataset.go = r;
+		let a = document.createElement("span");
+		a.className = "tablechart-control-icon", a.setAttribute("aria-hidden", "true");
+		let o = F("svg", {
+			viewBox: "0 0 16 16",
+			focusable: "false"
+		});
+		o.appendChild(F("path", { d: r === "next" ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5" })), a.appendChild(o);
+		let s = document.createElement("span");
+		s.className = "tablechart-control-label", s.textContent = e[r];
+		let c = t[r];
+		c && n && s.setAttribute(n, c);
+		let l = document.createElement("span");
+		return l.className = E, l.textContent = e.hint, t.hint && n && l.setAttribute(n, t.hint), i.append(...r === "next" ? [
+			s,
+			l,
+			a
+		] : [
+			a,
+			s,
+			l
+		]), i;
+	};
+	return r.append(i("previous"), i("next")), r;
+}, Xe = {
+	area: Le,
+	bar: Se,
+	column: Ce,
+	donut: Ee,
+	line: Ie,
+	waterfall: Re
+}, Ze = {
+	"axis-break": H,
+	trend: ce,
+	bracket: ie
+}, Qe = Object.keys(Ze), $e = (e) => {
 	let t = "";
 	for (let n = e.previousSibling; n && (t = (n.textContent ?? "") + t, !t.trim()); n = n.previousSibling);
 	return t.trim();
-}, Ge = [
+}, et = [
 	"straight",
 	"step",
 	"smooth"
-], Ke = (e, t) => {
+], tt = (e, t) => {
 	let n = e.dataset.chartShape;
-	return n && Ge.includes(n) ? n : Ge.includes(t.shape) ? t.shape : "straight";
-}, qe = (e) => {
+	return n && et.includes(n) ? n : et.includes(t.shape) ? t.shape : "straight";
+}, nt = (e) => {
 	for (let t of e.querySelectorAll("br")) {
-		if (t.previousElementSibling?.classList.contains("tablechart-sr") || /[.!?:;,…]$/.test(We(t))) continue;
+		if (t.previousElementSibling?.classList.contains("tablechart-sr") || /[.!?:;,…]$/.test($e(t))) continue;
 		let e = document.createElement("span");
 		e.className = E, e.textContent = ". ", t.before(e);
 	}
-}, Je = (e, t, n) => {
+}, rt = (e, t, n) => {
 	let r = e.querySelector("table");
 	if (!r) return null;
 	let i = r.querySelector("tfoot [data-chart-total]");
@@ -980,23 +1105,23 @@ var Ae = (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;
-}, Ye = 0, Xe = (e) => {
+}, it = 0, at = (e) => {
 	let t = e.querySelector(":scope > figcaption");
 	if (!t) return;
-	qe(t);
+	nt(t);
 	let n = (e) => e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby"), r = (e) => {
-		t.id || (t.id = `tablechart-caption-${++Ye}`), e.setAttribute("aria-labelledby", t.id);
+		t.id || (t.id = `tablechart-caption-${++it}`), 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);
-}, Ze = (i, a, o = null) => {
-	let s = o ?? (i.getAttribute("data-chart") || "column"), c = Ve[s];
-	if (!c) return console.warn(`[${e}] Unknown chart type "${s}". Known types: ${Object.keys(Ve).join(", ")}.`), i.setAttribute("data-chart-empty", ""), null;
-	let l = Ie(i, a.langattribute);
+}, ot = (i, a, o = null) => {
+	let s = o ?? (i.getAttribute("data-chart") || "column"), c = Xe[s];
+	if (!c) return console.warn(`[${e}] Unknown chart type "${s}". Known types: ${Object.keys(Xe).join(", ")}.`), i.setAttribute("data-chart-empty", ""), null;
+	let l = Be(i, a.langattribute);
 	if (!l.length) return console.warn(`[${e}] A chart has no rows in its table, so there is nothing to draw.`), i.setAttribute("data-chart-empty", ""), null;
-	Xe(i);
-	let u = ze(i, l, a.langattribute);
+	at(i);
+	let u = Ue(i, l, a.langattribute);
 	u.length > 1 && !c.series && (console.warn(`[${e}] A ${s} chart draws one series; only the first of the table's ${u.length} value columns is used.`), u = u.slice(0, 1));
 	let d = u.length > 1;
 	d && i.style.setProperty("--tablechart-series-count", String(u.length));
@@ -1006,46 +1131,58 @@ var Ae = (e) => e.map((e) => ({
 	p && l.some((e) => e.cells.slice(0, u.length).some((e) => e.value < 0)) && console.warn(`[${e}] A stacked chart has a value below zero. It takes no room in the stack.`);
 	let m = document.createElement("div");
 	m.className = t, m.setAttribute("aria-hidden", "true");
-	let h = N("svg", {
+	let h = F("svg", {
 		role: "presentation",
 		focusable: "false"
 	});
 	m.appendChild(h), i.appendChild(m);
-	let g = c.centre ? l.filter((e) => !e.isTotal) : l, y = Math.max(0, B(g.flatMap((e) => e.cells.slice(0, u.length).map((e) => V(e.number))))), b = u.map((e, t) => l.map((e, n) => {
-		let i = e.cells[t] ?? e.cells[0], a = F(r, m);
+	let g = c.centre ? l.filter((e) => !e.isTotal) : l, y = Math.max(0, U(g.flatMap((e) => e.cells.slice(0, u.length).map((e) => W(e.number))))), b = u.map((e, t) => l.map((e, n) => {
+		let i = e.cells[t] ?? e.cells[0], a = L(r, m);
 		return a.classList.add(...e.classes), a.dataset.value = String(i.value), i.prefix && (a.dataset.prefix = i.prefix), i.suffix && (a.dataset.suffix = i.suffix), i.missing && (a.dataset.missing = i.raw), d && (a.dataset.series = String(t + 1)), a.dataset.row = String(n + 1), a.style.setProperty("--i", String(e.slot)), a;
 	})), S = b[0], C = p && c.totals ? l.map((e, t) => {
-		let n = F(r, m);
-		n.classList.add(...e.classes), n.dataset.kind = "total", n.dataset.row = String(t + 1), n.dataset.value = String(ce(e, u.length));
+		let n = L(r, m);
+		n.classList.add(...e.classes), n.dataset.kind = "total", n.dataset.row = String(t + 1), n.dataset.value = String(pe(e, u.length));
 		let i = e.cells[0];
 		return i.prefix && (n.dataset.prefix = i.prefix), i.suffix && (n.dataset.suffix = i.suffix), n.style.setProperty("--i", String(e.slot)), n;
 	}) : [], w = l[l.length - 1], T = u.some((e) => e.focus), E = i.getAttribute("data-chart-legend"), D = d && (E === null ? a.legend || c.legend !== void 0 : E !== "false") ? document.createElement("div") : null;
 	D && (D.className = v, D.setAttribute("aria-hidden", "true"), D.inert = !0);
 	let O = d ? u.map((e, t) => {
-		let n = F(_, D ?? m);
+		let n = L(_, D ?? m);
 		D && (n.dataset.place = "legend");
 		let r = c.legend ?? c.swatch;
-		if (r && (n.dataset.swatch = r), n.textContent = e.name, !r && Ke(i, a) !== "step") {
-			let e = Ce(u, t);
+		if (r && (n.dataset.swatch = r), n.textContent = e.name, !r && tt(i, a) !== "step") {
+			let e = Oe(u, t);
 			n.dataset.marker = e.shape, n.toggleAttribute("data-open", e.open);
 		}
 		return e.line && !r && (n.dataset.line = e.line), e.key && a.langattribute && n.setAttribute(a.langattribute, e.key), n.dataset.series = String(t + 1), n.style.setProperty("--n", String(t)), n.style.setProperty("--palette", `var(--tablechart-color-${t + 1})`), n.style.setProperty("--m", T && !e.focus ? "1" : "0"), n.style.setProperty("--i", String(w.slot)), n;
-	}) : [], k = c.centre ? F(x, m) : null;
+	}) : [], k = c.centre ? L(x, m) : null;
 	if (k) {
 		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(V(e.number)));
+		k.dataset.value = String(t), e && (k.dataset.decimals = String(W(e.number)));
 	}
-	let A = k && !l.some((e) => e.isTotal) ? Je(i, k, a) : null, j = c.categories === "beside", M = document.createElement("div");
+	let A = k && !l.some((e) => e.isTotal) ? rt(i, k, a) : null, j = c.categories === "beside", M = document.createElement("div");
 	M.className = n, M.setAttribute("aria-hidden", "true"), M.inert = !0, j ? M.dataset.place = "beside" : c.centre && (M.dataset.place = "key"), M.style.setProperty("--tablechart-columns", String(l.length));
-	let P = 0;
-	for (let e of l) {
-		let t = document.createElement("span");
-		t.classList.add(...e.classes), t.textContent = e.label, e.key && a.langattribute && t.setAttribute(a.langattribute, e.key), c.centre && (t.dataset.kind = e.isTotal ? "total" : "slice", e.isTotal || (t.dataset.slice = String(P + 1), t.style.setProperty("--n", String(P)), t.style.setProperty("--palette", `var(--tablechart-color-${P + 1})`), P += 1)), t.style.setProperty("--i", String(e.slot)), t.dataset.row = String(l.indexOf(e) + 1), M.appendChild(t);
+	let N = 0;
+	for (let [e, t] of l.entries()) {
+		let n = document.createElement("span");
+		n.classList.add(...t.classes), n.textContent = t.label, t.key && a.langattribute && n.setAttribute(a.langattribute, t.key), c.centre && (n.dataset.kind = t.isTotal ? "total" : "slice", t.isTotal || (n.dataset.slice = String(N + 1), n.style.setProperty("--n", String(N)), n.style.setProperty("--palette", `var(--tablechart-color-${N + 1})`), N += 1)), n.style.setProperty("--i", String(t.slot)), n.dataset.row = String(e + 1), M.appendChild(n);
 	}
 	(j ? m : i).appendChild(M), D && i.appendChild(D);
-	let I = Array.from(i.querySelectorAll("[data-annotation]")).map((t) => {
-		let n = t.getAttribute("data-annotation"), r = He[n];
-		if (!r) return console.warn(`[${e}] Unknown annotation "${n}". Known annotations: ${Object.keys(He).join(", ")}.`), null;
+	let P = a.animate ? Ke(i) : null;
+	P && (i.setAttribute("data-steps", ""), i.setAttribute("data-chart-animate", "across"));
+	let I = i.getAttribute("data-chart-keys"), R = P && a.controls ? Ye({
+		previous: a.previouslabel,
+		next: a.nextlabel,
+		hint: a.stephint
+	}, {
+		previous: I && `${I}-previous`,
+		next: I && `${I}-next`,
+		hint: I && `${I}-step`
+	}, a.langattribute) : null;
+	R && i.appendChild(R);
+	let z = Array.from(i.querySelectorAll("[data-annotation]")).map((t) => {
+		let n = t.getAttribute("data-annotation"), r = Ze[n];
+		if (!r) return console.warn(`[${e}] Unknown annotation "${n}". Known annotations: ${Object.keys(Ze).join(", ")}.`), null;
 		let i = Number.parseInt(t.getAttribute("data-series") ?? "1", 10), a = i >= 1 && i <= u.length ? i - 1 : 0;
 		return i !== a + 1 && console.warn(`[${e}] An annotation reads line ${i}, which the chart does not have; it reads the first.`), {
 			spec: t,
@@ -1059,7 +1196,7 @@ var Ae = (e) => e.map((e) => ({
 		let e = i.getAttribute("data-chart-animate"), t = (e === "up" || e === "across" ? e : a.animate) === "up" && (s === "line" || s === "area");
 		i.setAttribute("data-animate", t ? "up" : "");
 	}
-	let L = {
+	let B = {
 		figure: i,
 		plot: m,
 		svg: h,
@@ -1077,37 +1214,46 @@ var Ae = (e) => e.map((e) => ({
 		totalCell: A,
 		rowAt: null,
 		rowBox: null,
-		annotations: I,
-		checks: []
+		annotations: z,
+		checks: [],
+		plan: P,
+		step: 0,
+		controls: R
 	};
-	return a.hover && i.getAttribute("data-chart-hover") !== "false" && rt(L), tt(L, a), L;
-}, Qe = (e, t, n, r) => {
+	return R?.addEventListener("click", (e) => {
+		let t = e.target.closest("button")?.dataset.go;
+		t && Q(B, B.step + (t === "next" ? 1 : -1));
+	}), Q(B, 0, !0), a.hover && i.getAttribute("data-chart-hover") !== "false" && mt(B), dt(B, a), B;
+}, st = (e) => {
+	let t = getComputedStyle(e).getPropertyValue("--tablechart-inside-align").trim();
+	return t === "start" || t === "center" || t === "end" ? t : null;
+}, ct = (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 * k : o * (a[2] === "em" ? Number.parseFloat(i.fontSize) : a[2] === "rem" ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : 1) * t;
-}, $e = (e, t) => Qe(e, t, "--tablechart-bar-max", "60px") ?? Infinity, et = (t, n) => {
+	return a[2] === "%" ? o / 100 * j : o * (a[2] === "em" ? Number.parseFloat(i.fontSize) : a[2] === "rem" ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : 1) * t;
+}, lt = (e, t) => ct(e, t, "--tablechart-bar-max", "60px") ?? Infinity, ut = (t, n) => {
 	let { plot: r, svg: i, rows: a, type: o, values: s, series: c, seriesValues: l, names: u, annotations: d } = t, f = r.clientWidth;
 	if (!f) return !1;
-	let p = k / f, m = Number.parseFloat(t.figure.dataset.chartAspect ?? ""), h = k * (m > 0 ? m : o.aspect ?? n.aspect);
+	let p = j / f, m = Number.parseFloat(t.figure.dataset.chartAspect ?? ""), h = j * (m > 0 ? m : o.aspect ?? n.aspect);
 	r.classList.add(w);
 	for (let e of [...l.flat(), ...t.totals]) delete e.dataset.place;
-	r.style.removeProperty("--tablechart-fit"), re([
+	r.style.removeProperty("--tablechart-fit"), oe([
 		...l.flat(),
 		...t.totals,
 		...u,
 		...t.categories,
 		...d.map((e) => e.badge)
 	]);
-	let g = (s[0] ? J(s[0]).height : 0) * p, _ = d[0]?.badge ? J(d[0].badge).height * p : 0, v = Math.max(h, Qe(t.figure, p, "--tablechart-min-height", "200px") ?? 0, o.minHeight?.({
+	let g = (s[0] ? Y(s[0]).height : 0) * p, _ = d[0]?.badge ? Y(d[0].badge).height * p : 0, v = Math.max(h, ct(t.figure, p, "--tablechart-min-height", "200px") ?? 0, o.minHeight?.({
 		labelHeight: g,
-		nameHeight: Math.max(0, B(t.categories.map((e) => J(e).height))) * p,
+		nameHeight: Math.max(0, U(t.categories.map((e) => Y(e).height))) * p,
 		unit: p,
 		rows: a.length,
 		series: c.length,
 		stacked: t.stacked
 	}) ?? 0), y = t.stacked ? a.map((e) => {
-		let t = ce(e, c.length);
+		let t = pe(e, c.length);
 		return {
 			...e,
 			value: t,
@@ -1132,53 +1278,53 @@ var Ae = (e) => e.map((e) => ({
 		series: c.length,
 		focused: c.some((e) => e.focus),
 		stacked: t.stacked
-	}, C = o.headroom?.(S) ?? g, T = 2 * p + (o.footroom?.(S) ?? 0), E = C, D = t.stacked ? Math.max(B(y.map((e) => e.value)), 0) : Math.max(B(x.flatMap((e) => [
+	}, C = o.headroom?.(S) ?? g, T = 2 * p + (o.footroom?.(S) ?? 0), E = C, D = t.stacked ? Math.max(U(y.map((e) => e.value)), 0) : Math.max(U(x.flatMap((e) => [
 		e.from,
 		e.to,
 		e.value
-	])), B(a.flatMap((e) => e.cells.slice(0, c.length).map((e) => e.value)))), O = v - E - T, A = D * 1.02, j = d.find((e) => e.spec.getAttribute("data-annotation") === "axis-break")?.spec, M = (e) => {
-		let t = Number.parseFloat(j?.getAttribute(e) ?? "");
+	])), U(a.flatMap((e) => e.cells.slice(0, c.length).map((e) => e.value)))), O = v - E - T, k = D * 1.02, A = d.find((e) => e.spec.getAttribute("data-annotation") === "axis-break")?.spec, M = (e) => {
+		let t = Number.parseFloat(A?.getAttribute(e) ?? "");
 		return Number.isFinite(t) ? t : null;
-	}, P = M("data-from") ?? M("data-at"), F = M("data-to"), I = null;
-	if (j && (P !== null || F !== null)) {
-		let t = P ?? 0, n = F ?? A, r = F === null ? t : P === null ? n : (t + n) / 2, i = j.getAttribute("data-size"), a = i?.match(/^\s*(\d+(?:\.\d+)?)\s*%\s*$/);
+	}, N = M("data-from") ?? M("data-at"), P = M("data-to"), I = null;
+	if (A && (N !== null || P !== null)) {
+		let t = N ?? 0, n = P ?? k, r = P === null ? t : N === null ? n : (t + n) / 2, i = A.getAttribute("data-size"), a = i?.match(/^\s*(\d+(?:\.\d+)?)\s*%\s*$/);
 		i !== null && !a && console.warn(`[${e}] data-size="${i}" is not a percentage, such as 30%. Using the default.`);
-		let s = Math.min(Math.max(a ? Number(a[1]) / 100 : F === null ? .22 : .3, .05), .8), c = x.filter((e) => (e.kind === "up" || e.kind === "down") && Math.max(e.from, e.to) > t && Math.min(e.from, e.to) < n);
-		o.breakable ? t < 0 || n <= t || n > A || t === 0 && n === A ? console.warn(`[${e}] A break from ${t} to ${n} does not fit a scale that runs from 0 to ${D}.`) : c.length ? console.warn(`[${e}] A break from ${t} to ${n} would cut a step that floats. Keep it below or above the steps.`) : I = {
+		let s = Math.min(Math.max(a ? Number(a[1]) / 100 : P === null ? .22 : .3, .05), .8), c = x.filter((e) => (e.kind === "up" || e.kind === "down") && Math.max(e.from, e.to) > t && Math.min(e.from, e.to) < n);
+		o.breakable ? t < 0 || n <= t || n > k || t === 0 && n === k ? console.warn(`[${e}] A break from ${t} to ${n} does not fit a scale that runs from 0 to ${D}.`) : c.length ? console.warn(`[${e}] A break from ${t} to ${n} would cut a step that floats. Keep it below or above the steps.`) : I = {
 			lo: t,
 			hi: n,
 			gap: r,
 			share: s
 		} : console.warn(`[${e}] This kind of chart cannot break its scale.`);
 	}
-	let L = I ? I.gap : null, R = v - T, z = (e) => R - e / A * O;
+	let L = I ? I.gap : null, R = (I && ct(t.figure, p, "--tablechart-break-gap", "")) ?? 13, z = v - T, ee = (e) => z - e / k * O;
 	if (I) {
-		let { lo: e, hi: t, gap: n, share: r } = I, i = O * r, a = (O - i - 13) / (e + (A - t)), o = i / (t - e);
-		z = (r) => r <= e ? R - r * a : r <= n ? R - e * a - (r - e) * o : r <= t ? R - e * a - (r - e) * o - 13 : R - e * a - i - 13 - (r - t) * a;
+		let { lo: e, hi: t, gap: n, share: r } = I, i = O * r, a = (O - i - R) / (e + (k - t)), o = i / (t - e);
+		ee = (r) => r <= e ? z - r * a : r <= n ? z - e * a - (r - e) * o : r <= t ? z - e * a - (r - e) * o - R : z - e * a - i - R - (r - t) * a;
 	}
-	let V = u.length ? B(u.map((e) => J(e).width)) * p + 12 * p : 0, H = t.categories[0]?.parentElement;
-	H && (H.style.paddingRight = V ? `${V / k * 100}%` : "");
-	let U = (k - V) / a.length, W = (e) => (e + .5) * U, G = (e) => e >= 0 && e < a.length ? e : null;
-	t.rowAt = o.centre ? null : o.categories === "beside" ? (e, t) => G(Math.floor(t * p / (v / a.length))) : (e) => G(Math.floor(e * p / U));
-	let te = U / k * 100, K = 100 / a.length;
+	let V = u.length ? U(u.map((e) => Y(e).width)) * p + 12 * p : 0, H = t.categories[0]?.parentElement;
+	H && (H.style.paddingRight = V ? `${V / j * 100}%` : "");
+	let W = (j - V) / a.length, te = (e) => (e + .5) * W, G = (e) => e >= 0 && e < a.length ? e : null;
+	t.rowAt = o.centre ? null : o.categories === "beside" ? (e, t) => G(Math.floor(t * p / (v / a.length))) : (e) => G(Math.floor(e * p / W));
+	let K = W / j * 100, q = 100 / a.length;
 	t.rowBox = o.categories === "beside" ? (e) => [
 		0,
-		e * K,
+		e * q,
 		100,
-		K
+		q
 	] : (e) => [
-		e * te,
+		e * K,
 		0,
-		te,
+		K,
 		100
-	], i.setAttribute("viewBox", `0 0 ${k} ${v}`), i.textContent = "", t.checks = [];
-	let ne = {
+	], i.setAttribute("viewBox", `0 0 ${j} ${v}`), i.textContent = "", t.checks = [];
+	let J = {
 		rows: a,
 		segments: x,
-		cx: W,
-		y: z,
-		barWidth: Math.min(U * n.barfill, $e(t.figure, p)),
-		barMax: $e(t.figure, p),
+		cx: te,
+		y: ee,
+		barWidth: Math.min(W * n.barfill, lt(t.figure, p)),
+		barMax: lt(t.figure, p),
 		height: v,
 		unit: p,
 		labelHeight: g,
@@ -1186,9 +1332,13 @@ var Ae = (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",
+		closing: (t.figure.dataset.chartClosing ?? n.closing) === "up" ? "up" : "down",
+		insideAlign: st(t.figure),
 		breakAt: L,
+		squeeze: I,
+		breakGap: R,
 		stacked: t.stacked,
-		shape: Ke(t.figure, n),
+		shape: tt(t.figure, n),
 		totals: t.totals,
 		svg: i,
 		plot: r,
@@ -1201,12 +1351,7 @@ var Ae = (e) => e.map((e) => ({
 		config: n,
 		checks: t.checks
 	};
-	o.draw(ne);
-	let q = t.categories[0]?.parentElement;
-	q && o.categories !== "beside" && !o.centre && he(q, t.categories.filter((e) => e.offsetParent !== null), (e) => ({
-		size: e.scrollWidth,
-		room: e.clientWidth
-	}), "--tablechart-name-fit");
+	o.draw(J);
 	for (let [e, n] of d.entries()) {
 		n.badge?.setAttribute("data-note", String(e + 1));
 		let r = n.series, i = (e) => ({
@@ -1214,7 +1359,7 @@ var Ae = (e) => e.map((e) => ({
 			...e.cells[r] ?? e.cells[0]
 		});
 		n.type.draw(n.spec, n.badge, {
-			...ne,
+			...J,
 			...t.stacked && {
 				rows: y,
 				...t.totals.length && { values: t.totals }
@@ -1234,10 +1379,15 @@ var Ae = (e) => e.map((e) => ({
 			note: e + 1
 		});
 	}
-	return ee(i, d.flatMap(({ badge: e }) => {
+	Je(t);
+	let ne = t.categories[0]?.parentElement;
+	return ne && o.categories !== "beside" && !o.centre && be(ne, t.categories.filter((e) => e.offsetParent !== null), (e) => ({
+		size: e.scrollWidth,
+		room: e.clientWidth
+	}), "--tablechart-name-fit"), B(i, d.flatMap(({ badge: e }) => {
 		if (!(e instanceof HTMLElement) || !e.offsetWidth) return [];
-		let t = e.offsetWidth * p, n = e.offsetHeight * p, r = Number.parseFloat(e.style.left) / 100 * k, i = Number.parseFloat(e.style.top) / 100 * v, a = getComputedStyle(e).borderTopLeftRadius, o = a.endsWith("%") ? Number.parseFloat(a) / 100 : null, s = (Number.parseFloat(a) || 0) * p;
-		return [N("rect", {
+		let t = e.offsetWidth * p, n = e.offsetHeight * p, r = Number.parseFloat(e.style.left) / 100 * j, i = Number.parseFloat(e.style.top) / 100 * v, a = getComputedStyle(e).borderTopLeftRadius, o = a.endsWith("%") ? Number.parseFloat(a) / 100 : null, s = (Number.parseFloat(a) || 0) * p;
+		return [F("rect", {
 			class: b,
 			"data-for": "badge",
 			"data-note": e.dataset.note ?? "",
@@ -1247,10 +1397,10 @@ var Ae = (e) => e.map((e) => ({
 			height: n,
 			rx: o === null ? s : t * o,
 			ry: o === null ? s : n * o,
-			style: ["--after"].map((t) => e.style.getPropertyValue(t) && `${t}:${e.style.getPropertyValue(t)}`).filter(Boolean).join("; ")
+			style: ["--after", "--step"].map((t) => e.style.getPropertyValue(t) && `${t}:${e.style.getPropertyValue(t)}`).filter(Boolean).join("; ")
 		})];
-	}), k, v), !0;
-}, tt = (e, t) => {
+	}), j, v), !0;
+}, dt = (e, t) => {
 	let n = [
 		...e.seriesValues.flat(),
 		...e.totals,
@@ -1262,13 +1412,17 @@ var Ae = (e) => e.map((e) => ({
 			r.textContent = n;
 			continue;
 		}
-		r.textContent = i + H(Number.parseFloat(r.dataset.value || "0"), r.dataset.decimals ? Number(r.dataset.decimals) : e.decimals, t.locale) + a;
+		let [o, s] = G(Number.parseFloat(r.dataset.value || "0"), r.dataset.decimals ? Number(r.dataset.decimals) : e.decimals, t.locale);
+		if (r.textContent = i + (i ? o : "") + s + a, o && !i) {
+			let e = document.createElement("span");
+			e.className = D, e.textContent = o, r.prepend(e);
+		}
 	}
-}, nt = (e) => {
-	e.plot.remove(), e.categories[0]?.parentElement?.remove(), e.figure.querySelector(`:scope > .${v}`)?.remove();
-}, Q = (e, t) => {
-	e.figure.classList.toggle(D, t), t || e.plot.removeAttribute("data-pointed");
-}, rt = (e) => {
+}, ft = (e) => {
+	e.plot.remove(), e.categories[0]?.parentElement?.remove(), e.figure.querySelector(`:scope > .${v}`)?.remove(), e.controls?.remove();
+}, pt = (e, t) => {
+	e.figure.classList.toggle(O, t), t || e.plot.removeAttribute("data-pointed");
+}, mt = (e) => {
 	let { plot: t } = e, n = () => [...e.seriesValues.flat(), ...e.totals], r = (e, t) => {
 		let n = Number(e.dataset.row), r = Number(e.dataset.rowEnd ?? n);
 		return t >= n && t <= r;
@@ -1303,25 +1457,25 @@ var Ae = (e) => e.map((e) => ({
 	}), document.addEventListener("pointerdown", (e) => {
 		t.contains(e.target) || a();
 	});
-}, it = (e) => e === "id" || e === "style" || e.startsWith("data-chart"), at = /^\s*(?:Table)?:\s+/, ot = (e) => e?.tagName === "P" && at.test(e.textContent ?? ""), st = (e) => {
+}, ht = (e) => e === "id" || e === "style" || e.startsWith("data-chart"), gt = /^\s*(?:Table)?:\s+/, _t = (e) => e?.tagName === "P" && gt.test(e.textContent ?? ""), vt = (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(at, ""), n.textContent || n.remove());
+	n?.nodeType === Node.TEXT_NODE && (n.textContent = (n.textContent ?? "").replace(gt, ""), 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;
-}, ct = /^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/, lt = (e) => {
-	let t = gt(e);
+}, yt = /^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/, bt = (e) => {
+	let t = Dt(e);
 	return t?.tagName === "P" ? t : e;
-}, ut = (e) => {
-	let t = lt(e).firstChild;
+}, xt = (e) => {
+	let t = bt(e).firstChild;
 	if (t?.nodeType !== Node.TEXT_NODE) return null;
-	let n = ct.exec(t.textContent ?? "");
-	if (!n || !Ue.includes(n[1]) || !n[3] && t.nextSibling) return null;
+	let n = yt.exec(t.textContent ?? "");
+	if (!n || !Qe.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],
@@ -1329,11 +1483,11 @@ var Ae = (e) => e.map((e) => ({
 		text: t,
 		length: n[0].length
 	};
-}, dt = (e) => {
+}, St = (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 : ut(e));
+	let t = Array.from(e.children), n = t.map((e) => e.hasAttribute("data-annotation") ? null : xt(e));
 	return !t.length || t.some((e, t) => !n[t] && !e.hasAttribute("data-annotation")) ? null : (t.forEach((e, t) => {
-		let r = n[t], i = lt(e);
+		let r = n[t], i = bt(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);
@@ -1344,18 +1498,18 @@ var Ae = (e) => e.map((e) => ({
 			t === 0 && e instanceof HTMLElement && e.matches("em, i") ? (n.className = d, 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);
-}, ft = (e, t) => {
-	for (let { name: n, value: r } of Array.from(e.attributes)) (n === "class" || it(n)) && (t.setAttribute(n, r), e.removeAttribute(n));
-}, pt = (e) => e.map((e) => {
-	let t = e.closest("p"), n = ot(t) ? t : e;
+}, Ct = (e, t) => {
+	for (let { name: n, value: r } of Array.from(e.attributes)) (n === "class" || ht(n)) && (t.setAttribute(n, r), e.removeAttribute(n));
+}, wt = (e) => e.map((e) => {
+	let t = e.closest("p"), n = _t(t) ? t : e;
 	if (n.tagName !== "TABLE" && n.tagName !== "P") return n;
 	let r = document.createElement("div");
-	ft(e, r), e.classList.length || e.removeAttribute("class");
-	let i = n.tagName === "TABLE" ? n : null, a = n.previousElementSibling, o = n.nextElementSibling, s = i ? ot(a) ? a : ot(o) ? o : null : n;
+	Ct(e, r), e.classList.length || e.removeAttribute("class");
+	let i = n.tagName === "TABLE" ? n : null, a = n.previousElementSibling, o = n.nextElementSibling, s = i ? _t(a) ? a : _t(o) ? o : null : n;
 	i && s === o && (o = o?.nextElementSibling ?? null);
-	let c = o?.classList.contains("chart-annotations") ? o : dt(o);
-	return n.replaceWith(r), s && r.append(st(s)), i && r.append(i), c && r.append(c), Z?.log?.(`A ${i ? "table" : "caption"} with chart attributes was wrapped in a figure of its own`), r;
-}), mt = (e, t = []) => {
+	let c = o?.classList.contains("chart-annotations") ? o : St(o);
+	return n.replaceWith(r), s && r.append(vt(s)), i && r.append(i), c && r.append(c), Z?.log?.(`A ${i ? "table" : "caption"} with chart attributes was wrapped in a figure of its own`), r;
+}), Tt = (e, t = []) => {
 	let n = document.createElement("table");
 	if (t.length) {
 		let e = n.createTHead().insertRow();
@@ -1374,7 +1528,7 @@ var Ae = (e) => e.map((e) => ({
 		for (let n of t.values ?? [t.value ?? null]) e.insertCell().textContent = n === null ? "" : String(n);
 	}
 	return n;
-}, ht = async (t) => {
+}, Et = async (t) => {
 	await Promise.all(t.filter((e) => e.hasAttribute("data-chart-src")).map(async (t) => {
 		let n = t.getAttribute("data-chart-src");
 		for (let e of t.querySelectorAll("table")) e.remove();
@@ -1383,17 +1537,17 @@ var Ae = (e) => e.map((e) => ({
 			if (!e.ok) throw Error(`${e.status} ${e.statusText}`);
 			let r = await e.json(), i = Array.isArray(r) ? r : r?.rows;
 			if (!Array.isArray(i)) throw Error("no array of rows in it");
-			let a = Array.isArray(r?.series) ? r.series.map(String) : [], o = t.querySelector(":scope > figcaption"), s = mt(i, a);
+			let a = Array.isArray(r?.series) ? r.series.map(String) : [], o = t.querySelector(":scope > figcaption"), s = Tt(i, a);
 			o ? o.after(s) : t.prepend(s), Z?.log?.(`Read ${i.length} rows from "${n}"`);
 		} catch (t) {
 			let r = window.location.protocol === "file:";
 			console.warn(`[${e}] Could not read the chart data in "${n}": ${t.message}.` + (r ? " A page opened from the file system cannot fetch files; open the page from a server instead." : ""));
 		}
 	}));
-}, gt = (e) => {
+}, Dt = (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;
-}, _t = "strong, b, span.total", vt = (e) => {
+}, Ot = "strong, b, span.total", kt = (e) => {
 	for (let t of e) {
 		for (let e of t.querySelectorAll("tbody tr")) {
 			let t = e.cells[0];
@@ -1401,16 +1555,16 @@ var Ae = (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 = gt(n); t?.matches(_t); t = gt(n)) e.dataset.kind = "total", t.replaceWith(...t.childNodes);
+			for (let t = Dt(n); t?.matches(Ot); t = Dt(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 = gt(t); e?.matches(_t); e = gt(t)) t.setAttribute("data-kind", "focus"), e.replaceWith(...e.childNodes);
+		for (let t of e.slice(1)) for (let e = Dt(t); e?.matches(Ot); e = Dt(t)) t.setAttribute("data-kind", "focus"), e.replaceWith(...e.childNodes);
 	}
-}, yt = "data-chart-made", bt = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, xt = (e) => new Promise((t) => setTimeout(t, e)), St = (e, t) => {
+}, At = "data-chart-made", jt = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, Mt = (e) => new Promise((t) => setTimeout(t, e)), Nt = (e, t) => {
 	let n = Number.parseFloat(e.dataset.chartEntrance ?? ""), r = Number.isFinite(n) ? n : t.entrance;
 	return Math.min(Math.max(r, 0), 1);
-}, Ct = async (e, t) => {
-	if (bt()) return;
+}, Pt = async (e, t) => {
+	if (jt()) 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());
@@ -1421,11 +1575,11 @@ var Ae = (e) => e.map((e) => ({
 		let a = Number(n.delay ?? 0) + i * t;
 		r = Math.max(r, a - Number(e.currentTime ?? 0));
 	}
-	r > 0 && await xt(r);
-}, wt = (e) => {
+	r > 0 && await Mt(r);
+}, Ft = (e) => {
 	for (let t = e; t && t !== document.body; t = t.parentElement) if (getComputedStyle(t).opacity === "0") return t;
 	return null;
-}, Tt = (e) => new Promise((t) => {
+}, It = (e) => new Promise((t) => {
 	let n = ["animationstart", "transitionrun"], r = () => {
 		for (let e of n) document.removeEventListener(e, i, !0);
 		a.disconnect(), t();
@@ -1439,84 +1593,93 @@ var Ae = (e) => e.map((e) => ({
 		attributes: !0,
 		attributeFilter: ["class", "style"]
 	});
-}), Et = /* @__PURE__ */ new Set(), $ = null, Dt = (e) => {
-	Et.add(e), !$ && ($ = new MutationObserver(() => {
-		for (let e of Et) e.relabel();
+}), Lt = /* @__PURE__ */ new Set(), $ = null, Rt = (e) => {
+	Lt.add(e), !$ && ($ = new MutationObserver(() => {
+		for (let e of Lt) e.relabel();
 		requestAnimationFrame(() => requestAnimationFrame(() => {
-			for (let e of Et) e.refresh();
+			for (let e of Lt) e.refresh();
 		}));
 	}), $.observe(document.documentElement, {
 		attributes: !0,
 		attributeFilter: ["lang"]
 	}));
-}, Ot = (e) => {
-	Et.delete(e), !(Et.size || !$) && ($.disconnect(), $ = null);
-}, kt = ["column", "bar"], At = (e) => {
+}, zt = (e) => {
+	Lt.delete(e), !(Lt.size || !$) && ($.disconnect(), $ = null);
+}, Bt = ["column", "bar"], Vt = (e) => {
 	let t = e.getAttribute("data-chart") || "column";
-	if (!kt.includes(t)) return null;
+	if (!Bt.includes(t)) return null;
 	let n = getComputedStyle(e).getPropertyValue("--tablechart-type").trim();
-	return kt.includes(n) ? n : t;
-}, jt = (e, t) => {
-	let n = e, r = At(n.figure), i = null, a = !1, o = !1, s = async () => {
-		if (!t.animate) return Q(n, !0);
+	return Bt.includes(n) ? n : t;
+}, Ht = (e, t) => {
+	let n = e, r = Vt(n.figure), i = null, a = !1, o = !1, s = async () => {
+		if (!t.animate) return pt(n, !0);
 		let e = n.figure.classList.contains("is-shown");
 		if (a && i !== null && !e && !o) {
 			o = !0;
-			let e = bt() ? null : wt(n.figure);
-			e && await Tt(e), await Ct(n.figure, St(n.figure, t)), o = !1, (a || !t.replay) && Q(n, !0);
-		} else !a && t.replay && e && Q(n, !1);
+			let e = jt() ? null : Ft(n.figure);
+			e && await It(e), await Pt(n.figure, Nt(n.figure, t)), o = !1, (a || !t.replay) && pt(n, !0);
+		} else !a && t.replay && e && pt(n, !1);
 	}, c = () => {
-		let e = At(n.figure);
+		let e = Vt(n.figure);
 		if (!e || e === r) return;
-		let a = Z.timed("Building", n.figure, () => Ze(n.figure, t, e));
-		a && (nt(n), n = a, r = e, i = null);
+		let a = Z.timed("Building", n.figure, () => ot(n.figure, t, e));
+		a && (ft(n), Q(a, n.step, !0), n = a, r = e, i = null);
 	}, l = () => {
 		c();
 		let e = n.plot.clientWidth;
-		!e || e === i || Z.timed("Layout", n.figure, () => et(n, t)) && (i = e, s());
+		!e || e === i || Z.timed("Layout", n.figure, () => ut(n, t)) && (i = e, s());
 	}, u = !1, d = new ResizeObserver(() => {
 		u || (u = !0, requestAnimationFrame(() => {
 			u = !1, l();
 		}));
 	}), f = new IntersectionObserver((e) => {
 		for (let t of e) a = t.isIntersecting, s();
-	}, { threshold: t.threshold }), p = () => Q(n, !0), m = () => {
+	}, { threshold: t.threshold }), p = () => pt(n, !0), m = () => {
 		i = null, l();
 	}, h = {
-		relabel: () => tt(n, t),
+		relabel: () => dt(n, t),
 		refresh: m
 	};
-	c(), l(), d.observe(n.figure), f.observe(n.figure), window.addEventListener("beforeprint", p), Dt(h);
+	c(), l(), d.observe(n.figure), f.observe(n.figure), window.addEventListener("beforeprint", p), Rt(h);
 	let g = {
 		figure: n.figure,
 		refresh: m,
+		next: () => Q(n, n.step + 1),
+		previous: () => Q(n, n.step - 1),
+		stepTo: (e) => Q(n, e),
+		get step() {
+			return n.step;
+		},
+		get steps() {
+			return n.plan?.count ?? 0;
+		},
 		destroy() {
-			d.disconnect(), f.disconnect(), window.removeEventListener("beforeprint", p), Ot(h), n.figure.tablechart === g && delete n.figure.tablechart;
+			d.disconnect(), f.disconnect(), window.removeEventListener("beforeprint", p), zt(h), n.figure.tablechart === g && delete n.figure.tablechart;
 		}
 	};
 	return n.figure.tablechart = g, g;
-}, Mt = async (e, t) => {
-	let n = pt(e.filter((e) => !e.hasAttribute(yt)));
-	return await ht(n), vt(n), Be(n, t.langattribute), n;
-}, Nt = (e, t) => {
-	let n = Z.timed("Building", e, () => Ze(e, t));
-	return n ? (e.setAttribute(yt, ""), jt(n, t)) : null;
-}, Pt = async (e, t = {}) => {
+}, Ut = async (e, t) => {
+	let n = wt(e.filter((e) => !e.hasAttribute(At)));
+	return await Et(n), kt(n), We(n, t.langattribute), n;
+}, Wt = (e, t) => {
+	let n = Z.timed("Building", e, () => ot(e, t));
+	return n ? (e.setAttribute(At, ""), Ht(n, t)) : null;
+}, Gt = async (e, t = {}) => {
 	if (e.tablechart) return e.tablechart;
 	let n = {
-		...A,
+		...M,
 		...t
 	};
 	n.debug && (Z.enabled = !0);
-	let [r] = await Mt([e], n);
-	return r ? Nt(r, n) : null;
-}, Ft = async (e = {}, t = document) => {
+	let [r] = await Ut([e], n);
+	return r ? Wt(r, n) : null;
+}, Kt = async (e = {}, t = document) => {
 	let n = {
-		...A,
+		...M,
 		...e
 	};
 	n.debug && (Z.enabled = !0);
-	let r = (await Mt(Array.from(t.querySelectorAll(n.selector)), n)).map((e) => Nt(e, n)).filter((e) => e !== null);
+	let r = (await Ut(Array.from(t.querySelectorAll(n.selector)), n)).map((e) => Wt(e, n)).filter((e) => e !== null);
 	return Z.log(`Made ${r.length} chart(s).`), {
 		charts: r,
 		refresh: () => {
@@ -1528,4 +1691,4 @@ var Ae = (e) => e.map((e) => ({
 	};
 };
 //#endregion
-export { D as _, pt as a, Ze as c, Q as d, nt as f, O as g, t as h, Mt as i, et as l, w as m, St as n, ht as o, Be as p, Ft as r, vt as s, Pt as t, tt as u, A as v };
+export { k as _, wt as a, ot as c, pt as d, ft as f, t as g, w as h, Ut as i, ut as l, We as m, Nt as n, Et as o, Q as p, Kt as r, kt as s, Gt as t, dt as u, O as v, M as y };