lintje 0.2.0 → 0.3.0

package/dist-elements/tag/chart.js

@@ -1,32 +1,32 @@
-import { A as e, Bt as t, Gt as n, Ht as r, Jt as i, Lt as a, S as o, c as s, d as c, i as l, k as u, l as d, o as f, p, qt as m, r as h, s as g, ut as _, w as v } from "../chunks/base-Bg-IFOPG.js";
-import { t as y } from "./announcement.js";
+import { F as e, I as t, Kt as n, O as r, Yt as i, Zt as a, _ as o, bt as s, c, en as l, h as u, i as d, l as f, nn as p, o as m, p as h, r as g, rn as _, s as v, v as y, y as b } from "../chunks/base-CbmWxUig.js";
+import { t as x } from "./announcement.js";
 import "./segmented.js";
-import { a as b, c as x, d as S, i as C, n as w, o as T, s as E, t as D } from "../chunks/download-y528pIHP.js";
-import { C as O, E as k, S as A, T as j, _ as M, a as N, b as P, c as F, f as I, g as L, h as R, i as z, l as ee, n as B, o as V, p as te, r as H, s as ne, t as re, u as ie, v as U, w as W, x as G, y as K } from "../chunks/stagger-qGD3wmhg.js";
+import { a as S, c as C, i as w, n as T, t as E } from "../chunks/download-Ct9q2anY.js";
+import { C as D, E as O, S as k, T as A, _ as j, a as M, b as N, c as P, f as F, g as I, h as L, i as R, l as ee, n as z, o as B, p as V, r as H, s as te, t as ne, u as U, v as W, w as G, x as K, y as q } from "../chunks/stagger-BHoOgy0g.js";
 import "./data-table.js";
 //#region src/components/shared/charts/shared/plot-keys.ts
-var q = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), ae = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
-function oe(e) {
-	return `${e.title}: ${e.rows.map((e) => `${e.label} ${e.value}`.trim()).join(", ")}`;
+var J = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]), Y = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+function re(e) {
+	return [`${e.title}: ${e.rows.map((e) => `${e.label} ${e.value}`.trim()).join(", ")}`, ...(e.events ?? []).map((e) => `Gebeurtenis ${e.number}: ${e.label}`)].join(". ");
 }
-function J(e) {
+function X(e) {
 	try {
 		return e.matches(":focus-visible");
 	} catch {
 		return !0;
 	}
 }
-function Y(e, t, n) {
+function Z(e, t, n) {
 	let r = (t, r) => {
 		let i = n(r), a = t.closest("[data-tooltip-anchor]"), o = t.getBoundingClientRect(), s = a?.getBoundingClientRect() ?? o;
-		e.hoverIndex = r, e.status = oe(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
+		e.hoverIndex = r, e.status = re(i.content), e.showTooltipAt(o.left - s.left + i.x, o.top - s.top + i.y, i.content);
 	};
 	return {
 		keydown(n) {
 			if (n.target !== n.currentTarget || t === 0) return;
 			let i = e.hoverIndex ?? -1, a;
-			if (q.has(n.key)) a = Math.min(t - 1, i + 1);
-			else if (ae.has(n.key)) a = Math.max(0, i - 1);
+			if (J.has(n.key)) a = Math.min(t - 1, i + 1);
+			else if (Y.has(n.key)) a = Math.max(0, i - 1);
 			else if (n.key === "Home") a = 0;
 			else if (n.key === "End") a = t - 1;
 			else return;
@@ -34,168 +34,205 @@ function Y(e, t, n) {
 		},
 		focus(n) {
 			let i = n.currentTarget;
-			n.target === i && t !== 0 && J(i) && r(i, Math.min(e.hoverIndex ?? 0, t - 1));
+			n.target === i && t !== 0 && X(i) && r(i, Math.min(e.hoverIndex ?? 0, t - 1));
 		},
 		blur() {
 			(e.hoverIndex != null || e.status) && (e.hoverIndex = null, e.status = "", e.hideTooltip(), e.requestUpdate());
 		}
 	};
 }
-function X(e) {
-	return m`<p class="visually-hidden" role="status">${e.status}</p>`;
+function Q(e) {
+	return p`<p class="visually-hidden" role="status">${e.status}</p>`;
 }
 //#endregion
 //#region src/components/shared/charts/line-chart/line-chart.ts
+var $ = 18, ie = 4, ae = 8;
+function oe(e) {
+	let t = [];
+	return e.map((e) => {
+		let n = t.findIndex((t) => t.every((t) => Math.abs(t - e) >= 22));
+		return n === -1 && (n = t.push([]) - 1), t[n].push(e), n;
+	});
+}
 function se(e, t) {
-	let { controller: r, description: a } = t, { labels: o, axisTitle: s, unit: l, asOfIndex: u, asOfLabel: f, pendingHours: p = 0, fixedMax: h, small: _ = !1 } = e, v = r.id;
-	r.measure({
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, unit: o, asOfIndex: c, asOfLabel: u, pendingHours: d = 0, fixedMax: m, small: g = !1 } = e, y = (e.events ?? []).filter((e) => Number.isInteger(e.index) && e.index >= 0 && e.index < i.length).sort((e, t) => e.index - t.index).map((e, t) => ({
+		...e,
+		number: t + 1
+	})), b = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (_ ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let y = e.series.filter((e) => !e.comparison).length > 1, b = 0, x = e.series.map((e) => ({
+	let x = e.series.filter((e) => !e.comparison).length > 1, S = 0, C = e.series.map((e) => ({
 		...e,
-		color: I(e.color),
-		symbol: y && !e.comparison ? L(e.color) ? e.color : R[b++ % R.length] : void 0
-	})), S = x.filter((e) => !r.hiddenSeries.includes(e.label)), C = S.flatMap((e) => e.values).filter((e) => e != null), { max: w, ticks: T } = G(h ?? Math.max(...C, 1)), E = P(T, r.width, {
-		fontFamily: r.fontFamily,
-		minimum: Math.ceil(d(o[0] ?? "", r.fontFamily) / 2)
-	}), D = K(t, { left: E.width }), A = p > 6, N = u ?? o.length - 1, F = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", z = x.map((e) => ({
+		color: F(e.color),
+		symbol: x && !e.comparison ? I(e.color) ? e.color : L[S++ % L.length] : void 0
+	})), w = C.filter((e) => !n.hiddenSeries.includes(e.label)), T = w.flatMap((e) => e.values).filter((e) => e != null), { max: E, ticks: k } = K(m ?? Math.max(...T, 1)), M = N(k, n.width, {
+		fontFamily: n.fontFamily,
+		minimum: Math.ceil(f(i[0] ?? "", n.fontFamily) / 2)
+	}), P = q(t, { left: M.width }), R = y.map((e) => Math.min(P.width - $ / 2, Math.max($ / 2, A(e.index, i.length, P)))), z = oe(R), ne = z.length ? Math.max(...z) + 1 : 0, U = q(t, {
+		left: M.width,
+		...ne ? { top: ne * 22 + ae } : {}
+	}), W = (e) => ie + z[e] * 22, G = d > 6, J = c ?? i.length - 1, Y = (e) => e.comparison ? "var(--color-chart-secondary)" : e.color ?? "var(--color-chart-default)", re = C.map((e) => ({
 		label: e.label,
-		color: F(e),
+		color: Y(e),
 		shape: e.comparison ? "dashed" : "line",
 		symbol: e.symbol,
-		hidden: r.hiddenSeries.includes(e.label)
-	})), B = Math.max(1, Math.ceil(o.length / 8)), re = o.map((e, t) => ({
+		hidden: n.hiddenSeries.includes(e.label)
+	})), X = Math.max(1, Math.ceil(i.length / 8)), se = i.map((e, t) => ({
 		label: e,
-		x: j(t, o.length, D),
+		x: A(t, i.length, U),
 		i: t
-	})).filter((e) => e.i % B === 0);
-	function ie(e) {
+	})).filter((e) => e.i % X === 0);
+	function ce(e) {
+		let t = y.filter((t) => t.index === e);
 		return {
-			title: o[e],
-			rows: S.map((t) => ({
+			title: i[e],
+			rows: w.map((t) => ({
 				label: t.label,
-				value: t.values[e] == null ? "geen gegevens" : g(t.values[e]),
-				color: F(t)
-			}))
+				value: t.values[e] == null ? "geen gegevens" : v(t.values[e]),
+				color: Y(t)
+			})),
+			...t.length ? { events: t } : {}
 		};
 	}
-	let U = Y(r, o.length, (e) => {
-		let t = S.map((t) => t.values[e]).filter((e) => e != null);
+	let le = Z(n, i.length, (e) => {
+		let t = w.map((t) => t.values[e]).filter((e) => e != null);
 		return {
-			x: j(e, o.length, D),
-			y: t.length ? k(Math.max(...t), w, D) : D.top,
-			content: ie(e)
+			x: A(e, i.length, U),
+			y: t.length ? O(Math.max(...t), E, U) : U.top,
+			content: ce(e)
 		};
-	}), W = [
-		p > 0 ? (() => {
-			let e = j(N, o.length, D), t = A ? O(D) / (o.length - 1) : D.width - D.right - e;
-			return i`<rect x=${e} y=${D.top} width=${Math.max(0, t)}
-                           height=${D.height - D.top - D.bottom}
-                           fill="url(#hatch-${v})" />`;
-		})() : n,
-		i`<g class="lintje-chart__reveal">
-      ${S.map((e) => {
-			let t = F(e), r = e.comparison ? void 0 : te(t), a = [[]];
+	}), ue = [
+		d > 0 ? (() => {
+			let e = A(J, i.length, U), t = G ? D(U) / (i.length - 1) : U.width - U.right - e;
+			return _`<rect x=${e} y=${U.top} width=${Math.max(0, t)}
+                           height=${U.height - U.top - U.bottom}
+                           fill="url(#hatch-${b})" />`;
+		})() : l,
+		y.length ? _`<g>
+          ${y.map((e, t) => {
+			let n = A(e.index, i.length, U);
+			return _`<line class="lintje-chart__event-line" x1=${n} x2=${n}
+                             y1=${W(t) + $} y2=${U.height - U.bottom} />`;
+		})}
+          ${y.map((e, t) => _`
+              <rect class="lintje-chart__event-chip" x=${R[t] - $ / 2} y=${W(t)}
+                    width=${$} height=${$} />
+              <text class="lintje-chart__event-number" x=${R[t]} y=${W(t) + $ / 2}
+                    text-anchor="middle" dominant-baseline="central">${e.number}</text>
+            `)}
+        </g>` : l,
+		_`<g class="lintje-chart__reveal">
+      ${w.map((e) => {
+			let t = Y(e), n = e.comparison ? void 0 : V(t), r = [[]];
 			e.values.forEach((e, t) => {
-				e == null || A && t > N ? a[a.length - 1].length && a.push([]) : a[a.length - 1].push({
-					x: j(t, o.length, D),
-					y: k(e, w, D)
+				e == null || G && t > J ? r[r.length - 1].length && r.push([]) : r[r.length - 1].push({
+					x: A(t, i.length, U),
+					y: O(e, E, U)
 				});
 			});
-			let s = a.filter((e) => e.length > 0);
-			if (s.length === 0) return n;
-			let c = s[s.length - 1], l = c[c.length - 1], u = D.height - D.bottom;
-			return i`
+			let a = r.filter((e) => e.length > 0);
+			if (a.length === 0) return l;
+			let o = a[a.length - 1], s = o[o.length - 1], c = U.height - U.bottom;
+			return _`
           <g>
-            ${s.map((a) => {
-				let o = a.map((e) => `${e.x},${e.y}`).join(" ");
-				return i`
-                ${e.area && !e.comparison ? i`<polygon fill=${t} fill-opacity=".14"
-                                 points=${`${a[0].x},${u} ${o} ${a[a.length - 1].x},${u}`} />` : n}
-                ${r && a.length > 1 ? i`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${o} stroke=${r} />` : n}
-                ${a.length === 1 ? i`<circle cx=${a[0].x} cy=${a[0].y} r="2.5" fill=${t} />` : i`<polyline
+            ${a.map((r) => {
+				let i = r.map((e) => `${e.x},${e.y}`).join(" ");
+				return _`
+                ${e.area && !e.comparison ? _`<polygon fill=${t} fill-opacity=".14"
+                                 points=${`${r[0].x},${c} ${i} ${r[r.length - 1].x},${c}`} />` : l}
+                ${n && r.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing" points=${i} stroke=${n} />` : l}
+                ${r.length === 1 ? _`<circle cx=${r[0].x} cy=${r[0].y} r="2.5" fill=${t} />` : _`<polyline
                         class="lintje-chart__line"
-                        points=${o}
+                        points=${i}
                         stroke=${t}
-                        stroke-dasharray=${e.comparison ? "5 4" : n}
+                        stroke-dasharray=${e.comparison ? "5 4" : l}
                         opacity=${e.comparison ? .9 : 1} />`}
               `;
 			})}
             <!-- The line's own shape at its end; a 4 px point there at an early as-of time. -->
-            ${e.symbol ? i`<path class="lintje-chart__line-end" d=${M(e.symbol, 4.5, l.x, l.y)} fill=${t} />` : A && !e.comparison ? i`<circle cx=${l.x} cy=${l.y} r="4" fill=${t} />` : n}
+            ${e.symbol ? _`<path class="lintje-chart__line-end" d=${j(e.symbol, 4.5, s.x, s.y)} fill=${t} />` : G && !e.comparison ? _`<circle cx=${s.x} cy=${s.y} r="4" fill=${t} />` : l}
           </g>
         `;
 		})}
     </g>`,
-		A && f ? V({
-			area: D,
-			index: N,
-			count: o.length,
-			label: `peilmoment ${f}`,
-			pendingHours: p,
+		G && u ? B({
+			area: U,
+			index: J,
+			count: i.length,
+			label: `peilmoment ${u}`,
+			pendingHours: d,
 			lastValue: (() => {
-				let e = S.find((e) => !e.comparison)?.values[N];
-				return e == null ? void 0 : `${g(e)}${l ? ` ${l}` : ""}`;
+				let e = w.find((e) => !e.comparison)?.values[J];
+				return e == null ? void 0 : `${v(e)}${o ? ` ${o}` : ""}`;
 			})()
-		}) : n,
-		r.hoverIndex == null ? n : S.map((e) => {
-			let t = r.hoverIndex, a = e.values[t];
-			return a == null || A && t > N ? n : i`<circle class="lintje-chart__hover-point" r="4" fill=${F(e)}
-                             cx=${j(t, o.length, D)}
-                             cy=${k(a, w, D)} />`;
+		}) : l,
+		n.hoverIndex == null ? l : w.map((e) => {
+			let t = n.hoverIndex, r = e.values[t];
+			return r == null || G && t > J ? l : _`<circle class="lintje-chart__hover-point" r="4" fill=${Y(e)}
+                             cx=${A(t, i.length, U)}
+                             cy=${O(r, E, U)} />`;
 		}),
-		o.map((e, t) => {
-			let n = j(t, o.length, D), a = O(D) / Math.max(1, o.length - 1);
-			return i`
-        <rect x=${n - a / 2} y=${D.top} width=${a}
-              height=${D.height - D.top - D.bottom}
+		i.map((e, t) => {
+			let r = A(t, i.length, U), a = D(U) / Math.max(1, i.length - 1);
+			return _`
+        <rect x=${r - a / 2} y=${U.top} width=${a}
+              height=${U.height - U.top - U.bottom}
               fill="transparent"
-              @mousemove=${(e) => r.hoverAt(t, e, ie(t))}
-              @mouseleave=${() => r.hoverAt(null)} />
+              @mousemove=${(e) => n.hoverAt(t, e, ce(t))}
+              @mouseleave=${() => n.hoverAt(null)} />
       `;
 		})
 	];
-	return m`
-    <div class="lintje-chart-wrap ${_ ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e)}>
+	return p`
+    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
+         ${s({ "--lintje-event-size": `${$}px` })}
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
       ${ee({
-		items: z,
-		onToggle: (e) => r.toggleSeries(e)
+		items: re,
+		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${ne({
-		fontFamily: r.fontFamily,
-		id: v,
-		ticks: T,
-		max: w,
-		area: D,
-		formatTick: E.format,
-		axisTitle: s ?? l,
-		xLabels: re,
-		description: a,
-		keys: U
-	}, W)}
-      ${H(r)}
-      ${X(r)}
+      ${te({
+		fontFamily: n.fontFamily,
+		id: b,
+		ticks: k,
+		max: E,
+		area: U,
+		formatTick: M.format,
+		axisTitle: a ?? o,
+		xLabels: se,
+		description: y.length ? `${r} ${y.map((e) => `Gebeurtenis ${e.number}, ${i[e.index]}: ${e.label}.`).join(" ")}` : r,
+		keys: le
+	}, ue)}
+      ${y.length ? p`<ol class="lintje-chart-events" aria-label="Gebeurtenissen">
+              ${y.map((e) => p`<li class="lintje-chart-events__item">
+                  <span class="lintje-event-chip"><span class="lintje-event-chip__number">${e.number}</span></span>
+                  <span><span class="lintje-chart-events__category">${i[e.index]}</span> ·
+                    ${e.label}</span>
+                </li>`)}
+            </ol>` : l}
+      ${H(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/mark-select.ts
-var Z = {
+var ce = {
 	clickable: !1,
 	state: "",
-	markId: n,
-	role: n,
-	tabIndex: n,
-	pressed: n,
-	label: n,
-	click: n,
-	keydown: n
+	markId: l,
+	role: l,
+	tabIndex: l,
+	pressed: l,
+	label: l,
+	click: l,
+	keydown: l
 };
-function Q(e, t) {
+function le(e, t) {
 	let n = /* @__PURE__ */ new Set();
 	for (let e of t) e?.href && n.add(e.id);
 	let r = e.selectedId != null && n.has(e.selectedId) ? e.selectedId : null, i = () => {
@@ -212,8 +249,8 @@ function Q(e, t) {
 		active: r,
 		interactive: !!e.onSelect && n.size > 0,
 		of(t, n, i) {
-			if (!t?.href || !e.onSelect) return r == null ? Z : {
-				...Z,
+			if (!t?.href || !e.onSelect) return r == null ? ce : {
+				...ce,
 				state: "is-muted"
 			};
 			let o = t.id === r;
@@ -238,304 +275,304 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/components/shared/charts/bar-chart/bar-chart.ts
-var ce = [
+var ue = [
 	"var(--color-chart-tint-1)",
 	"var(--color-chart-tint-2)",
 	"var(--color-chart-tint-3)",
 	"var(--color-chart-tint-4)",
 	"var(--color-chart-tint-5)"
 ];
-function le(e, t) {
-	let { controller: r, description: a } = t, { labels: o, values: s, axisTitle: u, trend: d, dataLabels: p = !0, small: h = !1, links: v } = e, y = I(e.color) ?? "var(--color-chart-default)", b = r.id, x = Q(t, v ?? []);
-	r.measure({
+function de(e, t) {
+	let { controller: n, description: r } = t, { labels: i, values: a, axisTitle: o, trend: c, dataLabels: u = !0, small: f = !1, links: g } = e, y = F(e.color) ?? "var(--color-chart-default)", b = n.id, x = le(t, g ?? []);
+	n.measure({
 		width: !0,
-		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (f ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let S = s.filter((e) => e != null), { max: C, ticks: w } = G(Math.max(...S, 1)), T = P(w, r.width, { fontFamily: r.fontFamily }), E = K(t, { left: T.width }), D = E.height - E.bottom, { width: O, bandWidth: j } = A(0, o.length, E), M = p && s.every((e) => e == null || l(f(e, O), j - 4)), N = (e) => ({
-		title: o[e],
+	let S = a.filter((e) => e != null), { max: C, ticks: w } = K(Math.max(...S, 1)), T = N(w, n.width, { fontFamily: n.fontFamily }), E = q(t, { left: T.width }), D = E.height - E.bottom, { width: A, bandWidth: j } = k(0, i.length, E), M = u && a.every((e) => e == null || d(m(e, A), j - 4)), P = (e) => ({
+		title: i[e],
 		rows: [{
-			label: u ?? "Waarde",
-			value: s[e] == null ? "geen gegevens" : g(s[e]),
+			label: o ?? "Waarde",
+			value: a[e] == null ? "geen gegevens" : v(a[e]),
 			color: y
 		}]
-	}), F = Y(r, o.length, (e) => ({
-		x: A(e, o.length, E).center,
-		y: s[e] == null ? E.top : k(s[e], C, E),
-		content: N(e)
-	})), L = [s.map((e, t) => {
-		let a = A(t, o.length, E);
-		if (e == null) return i`<rect class="lintje-chart__missing" x=${a.x} y=${E.top} width=${a.width}
+	}), I = Z(n, i.length, (e) => ({
+		x: k(e, i.length, E).center,
+		y: a[e] == null ? E.top : O(a[e], C, E),
+		content: P(e)
+	})), L = [a.map((e, t) => {
+		let r = k(t, i.length, E);
+		if (e == null) return _`<rect class="lintje-chart__missing" x=${r.x} y=${E.top} width=${r.width}
                          height=${Math.max(0, D - E.top)} fill="url(#hatch-${b})"
-                         @mousemove=${(e) => r.showTooltip(e, N(t))}
-                         @mouseleave=${() => r.hideTooltip()} />`;
-		let s = k(e, C, E), c = x.of(v?.[t], o[t], `${o[t]}: ${g(e)}`);
-		return i`
-        <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
-           ${_(B(t, o.length))}
-           @mousemove=${(e) => r.showTooltip(e, N(t))}
-           @mouseleave=${() => r.hideTooltip()}>
-          <rect class="lintje-chart__bar lintje-chart__mark ${c.state}"
-                x=${a.x} y=${s} width=${a.width} height=${Math.max(0, D - s)} fill=${y}
-                data-mark-id=${c.markId} role=${c.role} tabindex=${c.tabIndex}
-                aria-pressed=${c.pressed} aria-label=${c.label}
-                @click=${c.click} @keydown=${c.keydown} />
-          ${M ? i`<text x=${a.center} y=${s - 5} text-anchor="middle" class="lintje-chart__data-label">
-                    ${f(e, a.width)}
-                  </text>` : n}
+                         @mousemove=${(e) => n.showTooltip(e, P(t))}
+                         @mouseleave=${() => n.hideTooltip()} />`;
+		let a = O(e, C, E), o = x.of(g?.[t], i[t], `${i[t]}: ${v(e)}`);
+		return _`
+        <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
+           ${s(z(t, i.length))}
+           @mousemove=${(e) => n.showTooltip(e, P(t))}
+           @mouseleave=${() => n.hideTooltip()}>
+          <rect class="lintje-chart__bar lintje-chart__mark ${o.state}"
+                x=${r.x} y=${a} width=${r.width} height=${Math.max(0, D - a)} fill=${y}
+                data-mark-id=${o.markId} role=${o.role} tabindex=${o.tabIndex}
+                aria-pressed=${o.pressed} aria-label=${o.label}
+                @click=${o.click} @keydown=${o.keydown} />
+          ${M ? _`<text x=${r.center} y=${a - 5} text-anchor="middle" class="lintje-chart__data-label">
+                    ${m(e, r.width)}
+                  </text>` : l}
         </g>
       `;
-	}), d ? i`<polyline
+	}), c ? _`<polyline
           fill="none" stroke="var(--color-chart-emphasis)" stroke-width="1.5" stroke-dasharray="5 4"
-          points=${d.map((e, t) => e == null ? null : `${A(t, o.length, E).center},${k(e, C, E)}`).filter(Boolean).join(" ")} />` : n];
-	return m`
-    <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || x.escape(e)}>
-      ${ne({
-		fontFamily: r.fontFamily,
+          points=${c.map((e, t) => e == null ? null : `${k(t, i.length, E).center},${O(e, C, E)}`).filter(Boolean).join(" ")} />` : l];
+	return p`
+    <div class="lintje-chart-wrap ${f ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || x.escape(e)}>
+      ${te({
+		fontFamily: n.fontFamily,
 		id: b,
 		ticks: w,
 		max: C,
 		area: E,
-		axisTitle: u,
-		description: a,
+		axisTitle: o,
+		description: r,
 		formatTick: T.format,
-		xLabels: o.map((e, t) => ({
+		xLabels: i.map((e, t) => ({
 			label: e,
-			x: A(t, o.length, E).center
+			x: k(t, i.length, E).center
 		})),
 		interactive: x.interactive,
-		keys: F
+		keys: I
 	}, L)}
-      ${H(r)}
-      ${X(r)}
+      ${H(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/horizontal-bar-chart/horizontal-bar-chart.ts
-function ue(e) {
+function fe(e) {
 	return e * 26 + 24;
 }
-function de(e, t) {
-	let { controller: r, description: a } = t, { rows: o, threshold: s, thresholdLabel: l, unit: u } = e, d = I(e.color) ?? "var(--color-chart-dark-yellow)", f = I(e.aboveThresholdColor) ?? "var(--color-chart-red)", p = r.id, h = o.map((e) => e.href ? {
+function pe(e, t) {
+	let { controller: n, description: r } = t, { rows: i, threshold: a, thresholdLabel: o, unit: c } = e, u = F(e.color) ?? "var(--color-chart-dark-yellow)", d = F(e.aboveThresholdColor) ?? "var(--color-chart-red)", f = n.id, m = i.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), v = Q(t, h), y = ue(o.length);
-	r.measure({
+	} : null), g = le(t, m), y = fe(i.length);
+	n.measure({
 		width: !0,
 		height: y
 	});
-	let b = r.width, x = W(o.map((e) => e.label), b, { fontFamily: r.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...o.map((e) => e.value), s ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, E = (e) => `${g(e)}${u ? ` ${u}` : ""}`, D = (e) => {
-		let t = o[e], n = s != null && t.value > s;
+	let b = n.width, x = G(i.map((e) => e.label), b, { fontFamily: n.fontFamily }), { labelEnd: S, barStart: C } = x, w = Math.max(...i.map((e) => e.value), a ?? 0) * 1.15, T = (e) => Math.max(40, b - C - 60) * e / w, E = (e) => `${v(e)}${c ? ` ${c}` : ""}`, D = (e) => {
+		let t = i[e], n = a != null && t.value > a;
 		return {
 			title: t.label,
 			rows: [{
 				label: "Waarde",
 				value: E(t.value),
-				color: n ? f : d
-			}, ...s == null ? [] : [{
+				color: n ? d : u
+			}, ...a == null ? [] : [{
 				label: "Norm",
-				value: E(s),
+				value: E(a),
 				color: "var(--color-chart-emphasis)"
 			}]]
 		};
-	}, O = Y(r, o.length, (e) => ({
-		x: C + T(o[e].value),
+	}, O = Z(n, i.length, (e) => ({
+		x: C + T(i[e].value),
 		y: e * 26 + 4,
 		content: D(e)
 	}));
-	return m`
-    <figure class="lintje-chart lintje-chart--rows" ${c(r.attach)} ?data-in-view=${r.inView}
+	return p`
+    <figure class="lintje-chart lintje-chart--rows" ${h(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor
-            @keydown=${(e) => r.dismiss(e) || v.escape(e)}>
-      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${z(v.interactive)}
-           aria-labelledby="${p}-desc" width=${b} height=${y}
-           ${_({
+            @keydown=${(e) => n.dismiss(e) || g.escape(e)}>
+      <svg viewBox="0 0 ${b} ${y}" class="lintje-chart__svg" role=${R(g.interactive)}
+           aria-labelledby="${f}-desc" width=${b} height=${y}
+           ${s({
 		height: `${y}px`,
-		...N(p)
+		...M(f)
 	})}
            tabindex="0" @keydown=${O.keydown} @focus=${O.focus} @blur=${O.blur}>
-        <desc id="${p}-desc">${a}</desc>
-        <defs>${F(p)}</defs>
-        ${s == null ? n : i`
-          <line x1=${C + T(s)} x2=${C + T(s)} y1=${4} y2=${o.length * 26 + 2}
+        <desc id="${f}-desc">${r}</desc>
+        <defs>${P(f)}</defs>
+        ${a == null ? l : _`
+          <line x1=${C + T(a)} x2=${C + T(a)} y1=${4} y2=${i.length * 26 + 2}
                 stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-          <text x=${C + T(s) + 6} y=${o.length * 26 + 16} class="lintje-chart__axis-label">
-            ${l ?? `norm ${g(s)}`}
+          <text x=${C + T(a) + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">
+            ${o ?? `norm ${v(a)}`}
           </text>
         `}
-        ${o.map((e, t) => {
-		let n = t * 26 + 4, a = s != null && e.value > s, c = T(e.value), l = v.of(h[t], e.label, `${e.label}: ${g(e.value)}${u ? ` ${u}` : ""}`);
-		return i`
-            <g class="lintje-chart__bar-row ${r.hoverIndex === t ? "is-hovered" : ""}"
-               @mousemove=${(e) => r.showTooltip(e, D(t))}
-               @mouseleave=${() => r.hideTooltip()}>
+        ${i.map((e, t) => {
+		let r = t * 26 + 4, o = a != null && e.value > a, l = T(e.value), f = g.of(m[t], e.label, `${e.label}: ${v(e.value)}${c ? ` ${c}` : ""}`);
+		return _`
+            <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
+               @mousemove=${(e) => n.showTooltip(e, D(t))}
+               @mouseleave=${() => n.hideTooltip()}>
               <!-- Hit area across the whole row, so the tooltip doesn't flicker between bars. -->
-              <rect x=${0} y=${n - 5} width=${b} height=${26} fill="transparent" />
-              <text x=${S} y=${n + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(e.label)}</text>
-              <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${l.state}"
-                    ${_(B(t, o.length))}
-                    x=${C} y=${n} width=${Math.max(0, c)} height=${16}
-                    fill=${a ? f : d}
-                    data-mark-id=${l.markId} role=${l.role} tabindex=${l.tabIndex}
-                    aria-pressed=${l.pressed} aria-label=${l.label}
-                    @click=${l.click} @keydown=${l.keydown} />
-              <text x=${C + c + 6} y=${n + 16 - 3} font-weight="700"
-                    class="lintje-chart__data-label ${s == null ? "" : "lintje-chart__data-label--halo"}">
-                ${g(e.value)}${u ? ` ${u}` : ""}
+              <rect x=${0} y=${r - 5} width=${b} height=${26} fill="transparent" />
+              <text x=${S} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${x.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal lintje-chart__mark ${f.state}"
+                    ${s(z(t, i.length))}
+                    x=${C} y=${r} width=${Math.max(0, l)} height=${16}
+                    fill=${o ? d : u}
+                    data-mark-id=${f.markId} role=${f.role} tabindex=${f.tabIndex}
+                    aria-pressed=${f.pressed} aria-label=${f.label}
+                    @click=${f.click} @keydown=${f.keydown} />
+              <text x=${C + l + 6} y=${r + 16 - 3} font-weight="700"
+                    class="lintje-chart__data-label ${a == null ? "" : "lintje-chart__data-label--halo"}">
+                ${v(e.value)}${c ? ` ${c}` : ""}
               </text>
             </g>
           `;
 	})}
       </svg>
-      ${H(r)}
-      ${X(r)}
+      ${H(n)}
+      ${Q(n)}
     </figure>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/target-progress-chart/target-progress-chart.ts
-function fe(e, t) {
-	let { controller: n, description: r } = t, { rows: a, target: o = 100 } = e, l = n.id, u = ue(a.length);
+function me(e, t) {
+	let { controller: n, description: r } = t, { rows: i, target: a = 100 } = e, o = n.id, l = fe(i.length);
 	n.measure({
 		width: !0,
-		height: u
+		height: l
 	});
-	let d = n.width, f = W(a.map((e) => e.label), d, { fontFamily: n.fontFamily }), { labelEnd: p, barStart: h } = f, g = (e) => Math.max(40, d - h - 70) * e / 110, v = h + g(o), y = (e) => e >= o ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
-		title: a[e].label,
+	let u = n.width, d = G(i.map((e) => e.label), u, { fontFamily: n.fontFamily }), { labelEnd: f, barStart: m } = d, g = (e) => Math.max(40, u - m - 70) * e / 110, v = m + g(a), y = (e) => e >= a ? "var(--color-chart-green)" : "var(--color-attention)", b = (e) => ({
+		title: i[e].label,
 		rows: [{
 			label: "Voortgang",
-			value: s(a[e].value),
-			color: y(a[e].value)
+			value: c(i[e].value),
+			color: y(i[e].value)
 		}, {
 			label: "Doel",
-			value: s(o),
+			value: c(a),
 			color: "var(--color-chart-emphasis)"
 		}]
-	}), x = Y(n, a.length, (e) => ({
-		x: h + g(a[e].value),
+	}), x = Z(n, i.length, (e) => ({
+		x: m + g(i[e].value),
 		y: e * 26 + 4,
 		content: b(e)
 	}));
-	return m`
-    <figure class="lintje-chart lintje-chart--rows" ${c(n.attach)} ?data-in-view=${n.inView}
+	return p`
+    <figure class="lintje-chart lintje-chart--rows" ${h(n.attach)} ?data-in-view=${n.inView}
             data-tooltip-anchor @keydown=${(e) => n.dismiss(e)}>
-      <svg viewBox="0 0 ${d} ${u}" class="lintje-chart__svg" role="img"
-           aria-labelledby="${l}-desc" width=${d} height=${u} ${_({ height: `${u}px` })}
+      <svg viewBox="0 0 ${u} ${l}" class="lintje-chart__svg" role="img"
+           aria-labelledby="${o}-desc" width=${u} height=${l} ${s({ height: `${l}px` })}
            tabindex="0" @keydown=${x.keydown} @focus=${x.focus} @blur=${x.blur}>
-        <desc id="${l}-desc">${r}</desc>
-        ${a.map((e, t) => {
-		let r = t * 26 + 4, c = g(e.value), l = y(e.value), u = h + c + 46 > d, m = e.value >= o ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
-		return i`
+        <desc id="${o}-desc">${r}</desc>
+        ${i.map((e, t) => {
+		let r = t * 26 + 4, o = g(e.value), l = y(e.value), p = m + o + 46 > u, h = e.value >= a ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+		return _`
             <g class="lintje-chart__bar-row ${n.hoverIndex === t ? "is-hovered" : ""}"
                @mousemove=${(e) => n.showTooltip(e, b(t))}
                @mouseleave=${() => n.hideTooltip()}>
-              <rect x=${0} y=${r - 5} width=${d} height=${26} fill="transparent" />
-              <text x=${p} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${f.fit(e.label)}</text>
-              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${_(B(t, a.length))}
-                    x=${h} y=${r} width=${Math.max(0, c)} height=${16} fill=${l} />
-              <text x=${u ? h + c - 6 : h + c + 6} y=${r + 16 - 3}
-                    text-anchor=${u ? "end" : "start"}
-                    class="lintje-chart__data-label ${u ? m : ""}" font-weight="700">${s(e.value)}</text>
+              <rect x=${0} y=${r - 5} width=${u} height=${26} fill="transparent" />
+              <text x=${f} y=${r + 16 - 3} text-anchor="end" class="lintje-chart__axis-label">${d.fit(e.label)}</text>
+              <rect class="lintje-chart__bar lintje-chart__bar--horizontal" ${s(z(t, i.length))}
+                    x=${m} y=${r} width=${Math.max(0, o)} height=${16} fill=${l} />
+              <text x=${p ? m + o - 6 : m + o + 6} y=${r + 16 - 3}
+                    text-anchor=${p ? "end" : "start"}
+                    class="lintje-chart__data-label ${p ? h : ""}" font-weight="700">${c(e.value)}</text>
             </g>
           `;
 	})}
-        <line x1=${v} x2=${v} y1=${0} y2=${a.length * 26 + 2}
+        <line x1=${v} x2=${v} y1=${0} y2=${i.length * 26 + 2}
               stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-        <text x=${v + 6} y=${a.length * 26 + 16} class="lintje-chart__axis-label">norm ${o}</text>
+        <text x=${v + 6} y=${i.length * 26 + 16} class="lintje-chart__axis-label">norm ${a}</text>
       </svg>
       ${H(n)}
-      ${X(n)}
+      ${Q(n)}
     </figure>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/grouped-bar-chart/grouped-bar-chart.ts
-function pe(e, t) {
-	let { controller: r, description: a } = t, { labels: o, axisTitle: s, small: u = !1 } = e, d = r.id;
-	r.measure({
+function he(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, small: o = !1 } = e, c = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (o ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let p = e.series.map((e) => ({
+	let u = e.series.map((e) => ({
 		...e,
-		color: I(e.color)
-	})), h = p.filter((e) => !r.hiddenSeries.includes(e.label)), v = Q(t, h.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = G(Math.max(...h.flatMap((e) => e.values), 1)), x = P(b, r.width, { fontFamily: r.fontFamily }), S = K(t, { left: x.width }), C = S.height - S.bottom, w = A(0, o.length, S).width / Math.max(1, h.length), T = h.every((e) => e.values.every((e) => l(f(e, w), w - 2))), E = p.map((e, t) => ({
+		color: F(e.color)
+	})), f = u.filter((e) => !n.hiddenSeries.includes(e.label)), g = le(t, f.flatMap((e) => e.links ?? [])), { max: y, ticks: b } = K(Math.max(...f.flatMap((e) => e.values), 1)), x = N(b, n.width, { fontFamily: n.fontFamily }), S = q(t, { left: x.width }), C = S.height - S.bottom, w = k(0, i.length, S).width / Math.max(1, f.length), T = f.every((e) => e.values.every((e) => d(m(e, w), w - 2))), E = u.map((e, t) => ({
 		label: e.label,
 		color: e.color ?? (t === 0 ? "var(--color-chart-default)" : "var(--color-chart-secondary)"),
 		shape: "square",
-		hidden: r.hiddenSeries.includes(e.label)
-	})), D = (e, t) => E[p.indexOf(e)]?.color ?? ce[t], O = (e) => ({
-		title: o[e],
-		rows: h.map((t, n) => ({
+		hidden: n.hiddenSeries.includes(e.label)
+	})), D = (e, t) => E[u.indexOf(e)]?.color ?? ue[t], A = (e) => ({
+		title: i[e],
+		rows: f.map((t, n) => ({
 			label: t.label,
-			value: g(t.values[e]),
+			value: v(t.values[e]),
 			color: D(t, n)
 		}))
-	}), j = Y(r, o.length, (e) => ({
-		x: A(e, o.length, S).center,
-		y: k(Math.max(0, ...h.map((t) => t.values[e])), y, S),
-		content: O(e)
-	})), M = o.map((e, t) => {
-		let a = A(t, o.length, S);
-		return i`
-      <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
-         ${_(B(t, o.length))}
-         @mousemove=${(e) => r.showTooltip(e, O(t))}
-         @mouseleave=${() => r.hideTooltip()}>
-        ${h.map((r, o) => {
-			let s = r.values[t], c = k(s, y, S), l = D(r, o), u = v.of(r.links?.[t], `${e} · ${r.label}`, `${e}, ${r.label}: ${g(s)}`);
-			return i`
+	}), j = Z(n, i.length, (e) => ({
+		x: k(e, i.length, S).center,
+		y: O(Math.max(0, ...f.map((t) => t.values[e])), y, S),
+		content: A(e)
+	})), M = i.map((e, t) => {
+		let r = k(t, i.length, S);
+		return _`
+      <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
+         ${s(z(t, i.length))}
+         @mousemove=${(e) => n.showTooltip(e, A(t))}
+         @mouseleave=${() => n.hideTooltip()}>
+        ${f.map((n, i) => {
+			let a = n.values[t], o = O(a, y, S), s = D(n, i), c = g.of(n.links?.[t], `${e} · ${n.label}`, `${e}, ${n.label}: ${v(a)}`);
+			return _`
             <g>
-              <rect class="lintje-chart__bar lintje-chart__mark ${u.state}"
-                    x=${a.x + o * w} y=${c} width=${w - 2}
-                    height=${Math.max(0, C - c)} fill=${l}
-                    data-mark-id=${u.markId} role=${u.role} tabindex=${u.tabIndex}
-                    aria-pressed=${u.pressed} aria-label=${u.label}
-                    @click=${u.click} @keydown=${u.keydown} />
-              ${T ? i`<text x=${a.x + o * w + (w - 2) / 2} y=${c - 4}
-                            text-anchor="middle" class="lintje-chart__data-label">${f(s, w)}</text>` : n}
+              <rect class="lintje-chart__bar lintje-chart__mark ${c.state}"
+                    x=${r.x + i * w} y=${o} width=${w - 2}
+                    height=${Math.max(0, C - o)} fill=${s}
+                    data-mark-id=${c.markId} role=${c.role} tabindex=${c.tabIndex}
+                    aria-pressed=${c.pressed} aria-label=${c.label}
+                    @click=${c.click} @keydown=${c.keydown} />
+              ${T ? _`<text x=${r.x + i * w + (w - 2) / 2} y=${o - 4}
+                            text-anchor="middle" class="lintje-chart__data-label">${m(a, w)}</text>` : l}
             </g>
           `;
 		})}
       </g>
     `;
 	});
-	return m`
-    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || v.escape(e)}>
+	return p`
+    <div class="lintje-chart-wrap ${o ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || g.escape(e)}>
       ${ee({
 		items: E,
-		onToggle: (e) => r.toggleSeries(e)
+		onToggle: (e) => n.toggleSeries(e)
 	})}
-      ${ne({
-		fontFamily: r.fontFamily,
-		id: d,
+      ${te({
+		fontFamily: n.fontFamily,
+		id: c,
 		ticks: b,
 		max: y,
 		area: S,
-		axisTitle: s,
-		description: a,
+		axisTitle: a,
+		description: r,
 		formatTick: x.format,
-		xLabels: o.map((e, t) => ({
+		xLabels: i.map((e, t) => ({
 			label: e,
-			x: A(t, o.length, S).center
+			x: k(t, i.length, S).center
 		})),
-		interactive: v.interactive,
+		interactive: g.interactive,
 		keys: j
 	}, M)}
-      ${H(r)}
-      ${X(r)}
+      ${H(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/tints.ts
-var $ = [
+var ge = [
 	[1],
 	[1, 4],
 	[
@@ -557,14 +594,14 @@ var $ = [
 		5
 	]
 ];
-function me(e, t) {
+function _e(e, t) {
 	if (e < 1) return [];
-	let n = $[Math.min(e, $.length) - 1];
-	return h(t) ? n.map((e) => e === 1 ? `var(--color-chart-${t})` : `var(--color-chart-${t}-tint-${e})`) : n.map((e) => `var(--color-chart-tint-${e})`);
+	let n = ge[Math.min(e, ge.length) - 1];
+	return g(t) ? n.map((e) => e === 1 ? `var(--color-chart-${t})` : `var(--color-chart-${t}-tint-${e})`) : n.map((e) => `var(--color-chart-tint-${e})`);
 }
 //#endregion
 //#region src/components/shared/charts/stacked-bar-chart/stacked-bar-chart.ts
-var he = /* @__PURE__ */ new Set([
+var ve = /* @__PURE__ */ new Set([
 	"sky-blue",
 	"red",
 	"green",
@@ -577,17 +614,17 @@ var he = /* @__PURE__ */ new Set([
 	"dark-blue",
 	"moss-green"
 ]);
-function ge(e, t) {
-	let { controller: r, description: a } = t, { labels: o, axisTitle: u, normalized: d = !1, totalOnTop: p = !0, small: h = !1 } = e, v = r.id;
-	r.measure({
+function ye(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, normalized: o = !1, totalOnTop: u = !0, small: f = !1 } = e, g = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (h ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (f ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
 	let y = e.series.map((e) => ({
 		...e,
-		color: I(e.color)
-	})), b = Q(t, y.flatMap((e) => e.links ?? [])), x = o.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), { max: S, ticks: C } = d ? {
+		color: F(e.color)
+	})), b = le(t, y.flatMap((e) => e.links ?? [])), x = i.map((e, t) => y.reduce((e, n) => e + n.values[t], 0)), { max: S, ticks: C } = o ? {
 		max: 100,
 		ticks: [
 			0,
@@ -596,103 +633,295 @@ function ge(e, t) {
 			75,
 			100
 		]
-	} : G(Math.max(...x, 1)), w = P(C, r.width, { fontFamily: r.fontFamily }), T = K(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: O } = A(0, o.length, T), j = p && !d && x.every((e) => l(f(e, O), O - 4)), M = me(y.length), N = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], F = (t) => {
+	} : K(Math.max(...x, 1)), w = N(C, n.width, { fontFamily: n.fontFamily }), T = q(t, { left: w.width }), E = T.height - T.bottom, { width: D, bandWidth: A } = k(0, i.length, T), j = u && !o && x.every((e) => d(m(e, A), A - 4)), M = _e(y.length), P = (e, t) => e.color ?? M[Math.min(t, M.length - 1)], I = (t) => {
 		let n = e.series[t].color;
-		return (n == null ? t === 0 : he.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
+		return (n == null ? t === 0 : ve.has(n)) ? "lintje-chart__data-label--inside" : "lintje-chart__data-label--inside-light";
 	}, L = (e) => ({
-		title: o[e],
+		title: i[e],
 		rows: y.map((t, n) => ({
 			label: t.label,
-			value: d ? s(t.values[e] / x[e] * 100) : g(t.values[e]),
-			color: N(t, n)
+			value: o ? c(t.values[e] / x[e] * 100) : v(t.values[e]),
+			color: P(t, n)
 		}))
-	}), R = Y(r, o.length, (e) => ({
-		x: A(e, o.length, T).center,
-		y: k(d ? S : x[e], S, T),
+	}), R = Z(n, i.length, (e) => ({
+		x: k(e, i.length, T).center,
+		y: O(o ? S : x[e], S, T),
 		content: L(e)
-	})), z = y.map((e, t) => ({
+	})), B = y.map((e, t) => ({
 		label: e.label,
-		color: N(e, t),
+		color: P(e, t),
 		shape: "square"
-	})), V = o.map((e, t) => {
-		let a = A(t, o.length, T), c = 0, u = y.map((e, n) => {
-			let r = e.values[t], i = d ? r / x[t] * 100 : r, a = k(c, S, T);
-			c += i;
-			let o = k(c, S, T);
+	})), V = i.map((e, t) => {
+		let r = k(t, i.length, T), a = 0, u = y.map((e, n) => {
+			let r = e.values[t], i = o ? r / x[t] * 100 : r, s = O(a, S, T);
+			a += i;
+			let c = O(a, S, T);
 			return {
 				row: e,
 				j: n,
 				value: i,
-				y1: o,
-				height: Math.max(0, a - o)
+				y1: c,
+				height: Math.max(0, s - c)
 			};
 		});
-		return i`
-      <g class="lintje-chart__bar-group ${r.hoverIndex === t ? "is-hovered" : ""}"
-         ${_(B(t, o.length))}
-         @mousemove=${(e) => r.showTooltip(e, L(t))}
-         @mouseleave=${() => r.hideTooltip()}>
+		return _`
+      <g class="lintje-chart__bar-group ${n.hoverIndex === t ? "is-hovered" : ""}"
+         ${s(z(t, i.length))}
+         @mousemove=${(e) => n.showTooltip(e, L(t))}
+         @mouseleave=${() => n.hideTooltip()}>
         <!-- The hit area under the whole column, so the tooltip also follows the empty
              space above the stack. It lies *under* the segments: on top it swallowed
              every click on a segment that drills. -->
-        <rect x=${a.x} y=${T.top} width=${a.width} height=${E - T.top} fill="transparent" />
+        <rect x=${r.x} y=${T.top} width=${r.width} height=${E - T.top} fill="transparent" />
         <!-- The segments in one group, so the column lifts on hover as a whole. -->
         <g class="lintje-chart__bar">
           ${u.map((n) => {
-			let r = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${g(n.row.values[t])}`);
-			return i`
-            <rect class="lintje-chart__mark lintje-chart__segment ${r.state}"
-                  x=${a.x} y=${n.y1} width=${a.width} height=${n.height}
-                  fill=${N(n.row, n.j)}
-                  data-mark-id=${r.markId} role=${r.role} tabindex=${r.tabIndex}
-                  aria-pressed=${r.pressed} aria-label=${r.label}
-                  @click=${r.click} @keydown=${r.keydown} />
+			let i = b.of(n.row.links?.[t], `${e} · ${n.row.label}`, `${e}, ${n.row.label}: ${v(n.row.values[t])}`);
+			return _`
+            <rect class="lintje-chart__mark lintje-chart__segment ${i.state}"
+                  x=${r.x} y=${n.y1} width=${r.width} height=${n.height}
+                  fill=${P(n.row, n.j)}
+                  data-mark-id=${i.markId} role=${i.role} tabindex=${i.tabIndex}
+                  aria-pressed=${i.pressed} aria-label=${i.label}
+                  @click=${i.click} @keydown=${i.keydown} />
           `;
 		})}
         </g>
         <!-- Percentages inside the segments when they are >= 16 px tall and fit the width. -->
-        ${d ? u.map((e) => e.height >= 16 && l(s(e.value), D - 4) ? i`<text x=${a.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
-                        class="lintje-chart__data-label ${F(e.j)}">${s(e.value)}</text>` : n) : n}
-        ${j ? i`<text x=${a.center} y=${k(x[t], S, T) - 5} text-anchor="middle"
-                      class="lintje-chart__data-label" font-weight="700">${f(x[t], a.bandWidth)}</text>` : n}
+        ${o ? u.map((e) => e.height >= 16 && d(c(e.value), D - 4) ? _`<text x=${r.center} y=${e.y1 + e.height / 2 + 4} text-anchor="middle"
+                        class="lintje-chart__data-label ${I(e.j)}">${c(e.value)}</text>` : l) : l}
+        ${j ? _`<text x=${r.center} y=${O(x[t], S, T) - 5} text-anchor="middle"
+                      class="lintje-chart__data-label" font-weight="700">${m(x[t], r.bandWidth)}</text>` : l}
       </g>
     `;
 	});
-	return m`
-    <div class="lintje-chart-wrap ${h ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || b.escape(e)}>
-      ${ee({ items: z })}
-      ${ne({
-		fontFamily: r.fontFamily,
-		id: v,
+	return p`
+    <div class="lintje-chart-wrap ${f ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || b.escape(e)}>
+      ${ee({ items: B })}
+      ${te({
+		fontFamily: n.fontFamily,
+		id: g,
 		ticks: C,
 		max: S,
 		area: T,
-		axisTitle: u,
-		description: a,
+		axisTitle: a,
+		description: r,
 		formatTick: w.format,
-		xLabels: o.map((e, t) => ({
+		xLabels: i.map((e, t) => ({
 			label: e,
-			x: A(t, o.length, T).center
+			x: k(t, i.length, T).center
 		})),
 		interactive: b.interactive,
 		keys: R
 	}, V)}
-      ${H(r)}
-      ${X(r)}
+      ${H(n)}
+      ${Q(n)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/stacked-area-chart/stacked-area-chart.ts
+var be = "geen gegevens", xe = /* @__PURE__ */ new WeakMap();
+function Se(e, t) {
+	return e.duration > 0 ? Math.min(1, (t - e.start) / e.duration) : 1;
+}
+function Ce(e, t) {
+	let n = Se(e, t);
+	if (n >= 1) return e.to;
+	let r = e.ease(n);
+	return e.to.map((t, n) => e.from[n] + (t - e.from[n]) * r);
+}
+function we(e, t, n) {
+	let r = performance.now(), i = xe.get(e);
+	if (!i || i.key !== t) {
+		let a = {
+			key: t,
+			from: n,
+			to: n,
+			start: r,
+			duration: 0,
+			ease: (e) => e,
+			element: i?.element,
+			attach: (e) => {
+				a.element = e;
+			}
+		};
+		return xe.set(e, a), n;
+	}
+	if (i.to.some((e, t) => e !== n[t])) {
+		let t = i.element, a = !t || b();
+		if (i.from = a ? n : Ce(i, r), i.to = n, i.start = r, i.duration = a ? 0 : o(t, "--dur-layer"), i.ease = t ? y(t, "--ease-in-motion") : (e) => e, i.frame == null && i.duration > 0) {
+			let t = i, n = () => {
+				t.frame = void 0;
+				let r = Se(t, performance.now()) >= 1;
+				e.requestUpdate(), r || (t.frame = requestAnimationFrame(n));
+			};
+			t.frame = requestAnimationFrame(n);
+		}
+	}
+	return Ce(i, r);
+}
+function Te(e, t) {
+	let { controller: n, description: r } = t, { labels: i, axisTitle: a, unit: o, small: s = !1 } = e, c = n.id, u = i.length;
+	n.measure({
+		width: !0,
+		height: t.height ?? (s ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!t.expanded && !t.mobile
+	});
+	let d = _e(e.series.length, e.color), m = e.series.map((e, t) => ({
+		...e,
+		color: d[Math.min(t, d.length - 1)],
+		hidden: n.hiddenSeries.includes(e.label)
+	})), g = m.filter((e) => !e.hidden), y = we(n, m.map((e) => e.label).join("\0"), m.map((e) => +!e.hidden)), b = y.some((e, t) => e !== +!m[t].hidden), x = xe.get(n), S = m.map(() => i.map(() => !1)), C = m.map(() => i.map(() => 0)), w = m.map(() => i.map(() => 0)), T = i.map(() => !1);
+	i.forEach((e, t) => {
+		let n = 0;
+		m.forEach((e, r) => {
+			if (y[r] === 0) return;
+			let i = e.values[t];
+			T[t] || i == null ? T[t] = !0 : (S[r][t] = !0, C[r][t] = n, n += i * y[r], w[r][t] = n);
+		});
+	});
+	let E = y.some((e) => e > 0), k = i.map((e, t) => m.map((e) => e.values[t]).filter((e) => e != null)).filter((e) => e.length > 0).map((e) => e.reduce((e, t) => e + t, 0)), { max: j, ticks: M } = K(Math.max(...k, 1)), P = N(M, n.width, {
+		fontFamily: n.fontFamily,
+		minimum: Math.ceil(f(i[0] ?? "", n.fontFamily) / 2)
+	}), F = q(t, { left: P.width }), I = F.height - F.bottom, L = (e) => A(e, u, F), R = (e) => O(e, j, F), z = (e) => {
+		let t = [];
+		return i.forEach((n, r) => {
+			if (!e(r)) return;
+			let i = t[t.length - 1];
+			i && i[i.length - 1] === r - 1 ? i.push(r) : t.push([r]);
+		}), t;
+	}, B = i.map((e, t) => {
+		let n = 0;
+		for (let e of g) {
+			let r = e.values[t];
+			if (r == null) return {
+				level: n,
+				complete: !1
+			};
+			n += r;
+		}
+		return {
+			level: n,
+			complete: g.length > 0
+		};
+	}), V = m.map((e) => ({
+		label: e.label,
+		color: e.color,
+		shape: "square",
+		hidden: e.hidden
+	})), ne = Math.max(1, Math.ceil(u / 8)), U = i.map((e, t) => ({
+		label: e,
+		x: L(t),
+		i: t
+	})).filter((e) => e.i % ne === 0), W = g.length < m.length ? "Totaal getoond" : "Totaal";
+	function G(e) {
+		return {
+			title: i[e],
+			rows: [...[...g].reverse().map((t) => ({
+				label: t.label,
+				value: t.values[e] == null ? be : v(t.values[e]),
+				color: t.color
+			})), ...g.length > 0 ? [{
+				label: W,
+				value: B[e].complete ? v(B[e].level) : be,
+				divider: !0
+			}] : []]
+		};
+	}
+	let J = Z(n, u, (e) => ({
+		x: L(e),
+		y: B[e].level > 0 ? R(B[e].level) : F.top,
+		content: G(e)
+	})), Y = (e) => {
+		let t = [0, 0];
+		return m.forEach((n, r) => {
+			S[r][e] && S[r][e + 1] && (t = [w[r][e], w[r][e + 1]]);
+		}), t;
+	}, re = (E ? z((e) => T[e]) : []).map((e) => {
+		let t = Math.max(0, e[0] - 1), r = Math.min(u - 1, e[e.length - 1] + 1), i = Array.from({ length: r - t }, (e, n) => t + n).map((e) => {
+			let [t, n] = Y(e);
+			return {
+				k: e,
+				left: R(t),
+				right: R(n)
+			};
+		}), a = L(t), o = L(r) - a, s = Math.min(I, ...i.flatMap((e) => [e.left, e.right]));
+		return {
+			segments: i,
+			from: a,
+			width: o,
+			ceiling: s,
+			fits: f(be, n.fontFamily) + 8 <= o && s - F.top >= 20
+		};
+	}), X = (e, t) => t.map((t) => `${L(t)},${R(e[t])}`), $ = [
+		re.map((e) => _`
+        ${e.segments.map((e) => _`<polygon fill="url(#hatch-${c})"
+            points=${`${L(e.k)},${F.top} ${L(e.k + 1)},${F.top} ${L(e.k + 1)},${e.right} ${L(e.k)},${e.left}`} />`)}
+        ${e.fits ? _`<text x=${e.from + e.width / 2} y=${(F.top + e.ceiling) / 2 + 4}
+                      text-anchor="middle"
+                      class="lintje-chart__as-of-note lintje-chart__data-label--halo">${be}</text>` : l}
+      `),
+		_`<g class="lintje-chart__reveal" ${h(x.attach)}>
+      ${m.map((e, t) => {
+			let n = z((e) => S[t][e]);
+			return _`<g>
+          ${n.map((n) => n.length === 1 ? _`<circle cx=${L(n[0])} cy=${R(w[t][n[0]])} r="2.5" fill=${e.color} />` : _`<polygon fill=${e.color}
+                      points=${[...X(w[t], n), ...X(C[t], n).reverse()].join(" ")} />`)}
+        </g>`;
+		})}
+      <!-- Between two parts a 1 px line in the surface: along each part's lower edge, not the floor. -->
+      ${m.map((e, t) => z((e) => S[t][e] && C[t][e] > 0).filter((e) => e.length > 1).map((e) => _`<polyline class="lintje-chart__segment" fill="none" points=${X(C[t], e).join(" ")} />`))}
+    </g>`,
+		n.hoverIndex != null && !b ? m.map((e, t) => S[t][n.hoverIndex] ? _`<circle class="lintje-chart__hover-point" r="4" fill=${e.color}
+                          cx=${L(n.hoverIndex)} cy=${R(w[t][n.hoverIndex])} />` : l) : l,
+		i.map((e, t) => {
+			let r = D(F) / Math.max(1, u - 1);
+			return _`
+        <rect x=${L(t) - r / 2} y=${F.top} width=${r}
+              height=${I - F.top}
+              fill="transparent"
+              @mousemove=${(e) => n.hoverAt(t, e, G(t))}
+              @mouseleave=${() => n.hoverAt(null)} />
+      `;
+		})
+	];
+	return p`
+    <div class="lintje-chart-wrap ${s ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${ee({
+		items: V,
+		onToggle: (e) => n.toggleSeries(e)
+	})}
+      ${te({
+		fontFamily: n.fontFamily,
+		id: c,
+		ticks: M,
+		max: j,
+		area: F,
+		formatTick: P.format,
+		axisTitle: a ?? o,
+		xLabels: U,
+		description: r,
+		keys: J
+	}, $)}
+      ${H(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/pie-chart/pie-chart.ts
-var _e = 5, ve = (e) => {
+var Ee = 5, De = (e) => {
 	let t = e.label.toLowerCase();
 	return t.startsWith("overig") || t === "rest";
-}, ye = (e) => !e.remainder && !ve(e);
-function be(e) {
-	let t = e.filter(ye).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && ve(e)), r = e.filter((e) => e.remainder);
-	if (t.length > _e) {
+}, Oe = (e) => !e.remainder && !De(e);
+function ke(e) {
+	let t = e.filter(Oe).sort((e, t) => t.value - e.value), n = e.filter((e) => !e.remainder && De(e)), r = e.filter((e) => e.remainder);
+	if (t.length > Ee) {
 		let e = t.splice(4).reduce((e, t) => e + t.value, 0);
 		if (n.length > 0) {
 			let [t] = n;
@@ -712,291 +941,291 @@ function be(e) {
 		...r
 	];
 }
-function xe(e, t) {
-	let { controller: r, description: a } = t, { donut: o = !1, centerValue: l, centerLabel: u, legendTable: d = !0, labelHeader: f = "Categorie" } = e, p = r.id, h = be(e.segments).map((e) => ({
+function Ae(e, t) {
+	let { controller: n, description: r } = t, { donut: i = !1, centerValue: a, centerLabel: o, legendTable: u = !0, labelHeader: d = "Categorie" } = e, f = n.id, m = ke(e.segments).map((e) => ({
 		...e,
-		color: I(e.color)
-	})), v = h.map((e) => e.href ? {
+		color: F(e.color)
+	})), g = m.map((e) => e.href ? {
 		id: e.id ?? e.label,
 		href: e.href
-	} : null), y = Q(t, v), b = (e) => {
-		let t = y.of(v[e], h[e].label, h[e].label).state;
+	} : null), y = le(t, g), b = (e) => {
+		let t = y.of(g[e], m[e].label, m[e].label).state;
 		return t.includes("is-selected") ? "is-selected" : t.includes("is-muted") ? "is-muted" : "";
 	}, x = !!t.expanded;
-	r.measure(x ? {
+	n.measure(x ? {
 		width: !0,
 		height: "--chart-h-main"
 	} : {});
-	let S = x ? Math.max(240, Math.min(560, r.height - 24)) : e.size ?? 200, C = h.reduce((e, t) => e + t.value, 0), w = S / 2, T = o ? w * .62 : 0, E = me(h.filter(ye).length, e.color), D = -1, O = h.map((e) => (ye(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : ve(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = h.map((e, t) => {
-		let n = e.value / C, r = k, i = k + n * 360;
-		k = i;
-		let a = +(n > .5), s = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = s(r, w), [u, d] = s(i, w);
+	let S = x ? Math.max(240, Math.min(560, n.height - 24)) : e.size ?? 200, C = m.reduce((e, t) => e + t.value, 0), w = S / 2, T = i ? w * .62 : 0, E = _e(m.filter(Oe).length, e.color), D = -1, O = m.map((e) => (Oe(e) && (D += 1), e.color ?? (e.remainder ? "var(--color-chart-remainder)" : De(e) ? "var(--color-chart-other)" : E[Math.min(D, E.length - 1)]))), k = -90, A = m.map((e, t) => {
+		let n = e.value / C, r = k, a = k + n * 360;
+		k = a;
+		let o = +(n > .5), s = (e, t) => [w + t * Math.cos(e * Math.PI / 180), w + t * Math.sin(e * Math.PI / 180)], [c, l] = s(r, w), [u, d] = s(a, w);
 		return {
 			segment: e,
 			i: t,
-			d: o ? (() => {
-				let [e, t] = s(i, T), [n, o] = s(r, T);
-				return `M ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} L ${e} ${t} A ${T} ${T} 0 ${a} 0 ${n} ${o} Z`;
-			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${a} 1 ${u} ${d} Z`,
+			d: i ? (() => {
+				let [e, t] = s(a, T), [n, i] = s(r, T);
+				return `M ${c} ${l} A ${w} ${w} 0 ${o} 1 ${u} ${d} L ${e} ${t} A ${T} ${T} 0 ${o} 0 ${n} ${i} Z`;
+			})() : `M ${w} ${w} L ${c} ${l} A ${w} ${w} 0 ${o} 1 ${u} ${d} Z`,
 			color: O[t]
 		};
-	}), j = r.hoverSegment, M = j == null ? void 0 : A[j], P = (e) => {
-		r.hoverSegment = e, r.requestUpdate();
+	}), j = n.hoverSegment, N = j == null ? void 0 : A[j], I = (e) => {
+		n.hoverSegment = e, n.requestUpdate();
 	};
-	return m`
-    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${c(r.attach)}
-         ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e) || y.escape(e)}>
-      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${z(y.interactive)}
-           class="lintje-pie-chart__svg" aria-labelledby="${p}-desc" ${_(N(p))}>
-        <desc id="${p}-desc">${a}</desc>
-        <defs>${F(p)}</defs>
-        ${A.map(({ segment: e, i: t, d: n, color: a }) => {
-		let o = y.of(v[t], e.label, `${e.label}: ${g(e.value)} · ${s(e.value / C * 100)}`);
-		return i`
-          <path d=${n} fill=${a}
-                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${j === t ? "is-hovered" : ""} ${o.state}"
-                ${_({ "transform-origin": `${w}px ${w}px` })}
-                data-mark-id=${o.markId} role=${o.role} tabindex=${o.tabIndex}
-                aria-pressed=${o.pressed} aria-label=${o.label}
-                @click=${o.click} @keydown=${o.keydown}
-                @mousemove=${(n) => {
-			P(t), r.showTooltip(n, {
+	return p`
+    <div class="lintje-pie-chart ${x ? "lintje-pie-chart--expanded" : ""}" ${h(n.attach)}
+         ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e) || y.escape(e)}>
+      <svg viewBox="0 0 ${S} ${S}" width=${S} height=${S} role=${R(y.interactive)}
+           class="lintje-pie-chart__svg" aria-labelledby="${f}-desc" ${s(M(f))}>
+        <desc id="${f}-desc">${r}</desc>
+        <defs>${P(f)}</defs>
+        ${A.map(({ segment: e, i: t, d: r, color: i }) => {
+		let a = y.of(g[t], e.label, `${e.label}: ${v(e.value)} · ${c(e.value / C * 100)}`);
+		return _`
+          <path d=${r} fill=${i}
+                class="lintje-pie-chart__segment lintje-chart__mark lintje-chart__segment ${j === t ? "is-hovered" : ""} ${a.state}"
+                ${s({ "transform-origin": `${w}px ${w}px` })}
+                data-mark-id=${a.markId} role=${a.role} tabindex=${a.tabIndex}
+                aria-pressed=${a.pressed} aria-label=${a.label}
+                @click=${a.click} @keydown=${a.keydown}
+                @mousemove=${(r) => {
+			I(t), n.showTooltip(r, {
 				title: e.label,
 				rows: [{
 					label: "Aantal",
-					value: `${g(e.value)} · ${s(e.value / C * 100)}`,
-					color: a
+					value: `${v(e.value)} · ${c(e.value / C * 100)}`,
+					color: i
 				}]
 			});
 		}}
                 @mouseleave=${() => {
-			r.hoverSegment = null, r.hideTooltip(), r.requestUpdate();
+			n.hoverSegment = null, n.hideTooltip(), n.requestUpdate();
 		}} />
         `;
 	})}
         <!-- The hovered segment once more on top, lifted with a light shadow: in place, the
              next segment would cover that shadow on one side (user test 13 Sep). -->
-        ${M ? i`<path d=${M.d} fill=${M.color} class="lintje-pie-chart__lift lintje-chart__segment"
-                      ${_({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : n}
-        ${o && l ? i`
-          <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${l}</text>
-          ${u ? i`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${u}</text>` : n}
-        ` : n}
+        ${N ? _`<path d=${N.d} fill=${N.color} class="lintje-pie-chart__lift lintje-chart__segment"
+                      ${s({ "transform-origin": `${w}px ${w}px` })} aria-hidden="true" />` : l}
+        ${i && a ? _`
+          <text x=${w} y=${w + 2} text-anchor="middle" class="lintje-pie-chart__center">${a}</text>
+          ${o ? _`<text x=${w} y=${w + 20} text-anchor="middle" class="lintje-chart__axis-label">${o}</text>` : l}
+        ` : l}
       </svg>
 
-      ${d ? m`
+      ${u ? p`
         <table class="lintje-pie-chart__table">
-          <caption class="visually-hidden">Legenda: ${a}</caption>
+          <caption class="visually-hidden">Legenda: ${r}</caption>
           <thead>
             <tr>
-              <th scope="col" class="lintje-pie-chart__column-label">${f}</th>
+              <th scope="col" class="lintje-pie-chart__column-label">${d}</th>
               <th scope="col" class="lintje-pie-chart__column-label lintje-pie-chart__column-label--numeric">aantal</th>
               <th scope="col" class="lintje-pie-chart__column-label lintje-pie-chart__column-label--numeric">%</th>
             </tr>
           </thead>
           <tbody>
-            ${h.map((e, t) => m`
+            ${m.map((e, t) => p`
               <tr class="lintje-pie-chart__row ${j === t ? "is-hovered" : ""} ${b(t)}"
-                  @mouseenter=${() => P(t)} @mouseleave=${() => P(null)}>
+                  @mouseenter=${() => I(t)} @mouseleave=${() => I(null)}>
                 <th scope="row" class="lintje-pie-chart__label">
-                  <span class="lintje-pie-chart__marker" ${_({ background: O[t] })}></span>${e.label}
+                  <span class="lintje-pie-chart__marker" ${s({ background: O[t] })}></span>${e.label}
                 </th>
-                <td class="lintje-pie-chart__value">${g(e.value)}</td>
-                <td class="lintje-pie-chart__value">${s(e.value / C * 100)}</td>
+                <td class="lintje-pie-chart__value">${v(e.value)}</td>
+                <td class="lintje-pie-chart__value">${c(e.value / C * 100)}</td>
               </tr>
             `)}
           </tbody>
           <tfoot>
             <tr>
               <th scope="row" class="lintje-pie-chart__total-label">Totaal</th>
-              <td class="lintje-pie-chart__total">${g(C)}</td>
+              <td class="lintje-pie-chart__total">${v(C)}</td>
               <td class="lintje-pie-chart__total"></td>
             </tr>
           </tfoot>
         </table>
-      ` : n}
-      ${H(r)}
+      ` : l}
+      ${H(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/dual-axis-chart/dual-axis-chart.ts
-function Se(e, t) {
-	let { controller: r, description: a } = t, { labels: o, threshold: s, thresholdLabel: l, small: u = !1, pendingHours: d = 0 } = e, f = {
+function je(e, t) {
+	let { controller: n, description: r } = t, { labels: i, threshold: a, thresholdLabel: o, small: c = !1, pendingHours: u = 0 } = e, d = {
 		...e.left,
-		color: I(e.left.color)
-	}, p = {
+		color: F(e.left.color)
+	}, f = {
 		...e.right,
-		color: I(e.right.color)
-	}, h = r.id;
-	r.measure({
+		color: F(e.right.color)
+	}, m = n.id;
+	n.measure({
 		width: !0,
-		height: t.height ?? (u ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (c ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let v = f.color ?? "var(--color-chart-default)", y = p.color ?? "var(--color-chart-dark-yellow)", b = G(Math.max(...f.values.filter((e) => e != null), 1)), x = G(Math.max(...p.values.filter((e) => e != null), s ?? 0, 1)), S = P(b.ticks, r.width, { fontFamily: r.fontFamily }), C = P(x.ticks, r.width, { fontFamily: r.fontFamily }), w = K(t, {
+	let g = d.color ?? "var(--color-chart-default)", y = f.color ?? "var(--color-chart-dark-yellow)", b = K(Math.max(...d.values.filter((e) => e != null), 1)), x = K(Math.max(...f.values.filter((e) => e != null), a ?? 0, 1)), S = N(b.ticks, n.width, { fontFamily: n.fontFamily }), C = N(x.ticks, n.width, { fontFamily: n.fontFamily }), w = q(t, {
 		left: S.width,
 		right: C.width
 	}), T = w.height - w.bottom, E = [
 		{
-			label: `${f.label} (linkeras)`,
-			color: v,
+			label: `${d.label} (linkeras)`,
+			color: g,
 			shape: "square"
 		},
 		{
-			label: `${p.label} (rechteras)`,
+			label: `${f.label} (rechteras)`,
 			color: y,
 			shape: "line"
 		},
-		...s == null ? [] : [{
-			label: l ?? `Norm ${s}`,
+		...a == null ? [] : [{
+			label: o ?? `Norm ${a}`,
 			color: "var(--color-chart-emphasis)",
 			shape: "dashed"
 		}]
-	], D = Math.max(1, Math.ceil(o.length / 8)), O = r.hoverIndex, j = te(y), M = [[]];
-	p.values.forEach((e, t) => {
-		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${A(t, o.length, w).center},${k(e, x.max, w)}`);
+	], D = Math.max(1, Math.ceil(i.length / 8)), A = n.hoverIndex, j = V(y), M = [[]];
+	f.values.forEach((e, t) => {
+		e == null ? M[M.length - 1].length && M.push([]) : M[M.length - 1].push(`${k(t, i.length, w).center},${O(e, x.max, w)}`);
 	});
-	let N = (e, t) => e == null ? "geen gegevens" : `${g(e)}${t ? ` ${t}` : ""}`, F = (e) => ({
-		title: o[e],
+	let P = (e, t) => e == null ? "geen gegevens" : `${v(e)}${t ? ` ${t}` : ""}`, I = (e) => ({
+		title: i[e],
 		rows: [{
-			label: f.label,
-			value: N(f.values[e], f.unit),
-			color: v
+			label: d.label,
+			value: P(d.values[e], d.unit),
+			color: g
 		}, {
-			label: p.label,
-			value: N(p.values[e], p.unit),
+			label: f.label,
+			value: P(f.values[e], f.unit),
 			color: y
 		}]
-	}), L = Y(r, o.length, (e) => ({
-		x: A(e, o.length, w).center,
-		y: Math.min(f.values[e] == null ? T : k(f.values[e], b.max, w), p.values[e] == null ? T : k(p.values[e], x.max, w)),
-		content: F(e)
+	}), L = Z(n, i.length, (e) => ({
+		x: k(e, i.length, w).center,
+		y: Math.min(d.values[e] == null ? T : O(d.values[e], b.max, w), f.values[e] == null ? T : O(f.values[e], x.max, w)),
+		content: I(e)
 	}));
-	return m`
-    <div class="lintje-chart-wrap ${u ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e)}>
+	return p`
+    <div class="lintje-chart-wrap ${c ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
       ${ee({ items: E })}
       <figure class="lintje-chart">
-        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${z(!1)}
-             aria-labelledby="${h}-desc" width=${w.width} height=${w.height}
+        <svg viewBox="0 0 ${w.width} ${w.height}" class="lintje-chart__svg" role=${R(!1)}
+             aria-labelledby="${m}-desc" width=${w.width} height=${w.height}
              tabindex="0" @keydown=${L.keydown} @focus=${L.focus} @blur=${L.blur}>
-          <desc id="${h}-desc">${a}</desc>
+          <desc id="${m}-desc">${r}</desc>
           <defs>
-            <pattern id="hatch-${h}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+            <pattern id="hatch-${m}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
               <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
             </pattern>
           </defs>
           <!-- Incomplete hours at the end: hatched, never drawn as zero. -->
-          ${d > 0 ? (() => {
-		let e = A(o.length - d, o.length, w);
-		return i`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
+          ${u > 0 ? (() => {
+		let e = k(i.length - u, i.length, w);
+		return _`<rect x=${e.x - (e.bandWidth - e.width) / 2} y=${w.top}
                              width=${w.width - w.right - e.x + (e.bandWidth - e.width) / 2}
-                             height=${T - w.top} fill="url(#hatch-${h})" />`;
-	})() : n}
+                             height=${T - w.top} fill="url(#hatch-${m})" />`;
+	})() : l}
 
           ${b.ticks.map((e) => {
-		let t = k(e, b.max, w), n = e === 0;
-		return i`
+		let t = O(e, b.max, w), n = e === 0;
+		return _`
               <g>
                 <line x1=${w.left} x2=${w.width - w.right} y1=${t} y2=${t}
                       stroke=${n ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
                       stroke-width=${n ? 1.5 : 1} />
-                <text x=${w.left - 8} y=${t + 4} text-anchor="end" class="lintje-chart__axis-label" fill=${v}>
+                <text x=${w.left - 8} y=${t + 4} text-anchor="end" class="lintje-chart__axis-label" fill=${g}>
                   ${S.format(e)}
                 </text>
               </g>
             `;
 	})}
-          ${x.ticks.map((e) => i`
-            <text x=${w.width - w.right + 8} y=${k(e, x.max, w) + 4}
+          ${x.ticks.map((e) => _`
+            <text x=${w.width - w.right + 8} y=${O(e, x.max, w) + 4}
                   class="lintje-chart__axis-label" fill=${"var(--color-chart-dark-yellow-text)"}>${C.format(e)}</text>
           `)}
 
           <!-- 2 px axis lines in the color of their series -->
-          <line x1=${w.left} x2=${w.left} y1=${w.top} y2=${T} stroke=${v} stroke-width="2" />
+          <line x1=${w.left} x2=${w.left} y1=${w.top} y2=${T} stroke=${g} stroke-width="2" />
           <line x1=${w.width - w.right} x2=${w.width - w.right} y1=${w.top} y2=${T}
                 stroke=${y} stroke-width="2" />
 
           <!-- Bars grow in one after another; the hit areas below sit on top, so hover comes
                from hoverIndex rather than :hover. -->
-          ${f.values.map((e, t) => {
-		let n = A(t, o.length, w);
-		if (e == null) return i`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
-                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${h})" />`;
-		let r = k(e, b.max, w);
-		return i`
-              <g class="lintje-chart__bar-group ${O === t ? "is-hovered" : ""}"
-                 ${_(B(t, o.length))}>
+          ${d.values.map((e, t) => {
+		let n = k(t, i.length, w);
+		if (e == null) return _`<rect class="lintje-chart__missing" x=${n.x} y=${w.top} width=${n.width}
+                               height=${Math.max(0, T - w.top)} fill="url(#hatch-${m})" />`;
+		let r = O(e, b.max, w);
+		return _`
+              <g class="lintje-chart__bar-group ${A === t ? "is-hovered" : ""}"
+                 ${s(z(t, i.length))}>
                 <rect class="lintje-chart__bar" x=${n.x} y=${r} width=${n.width}
-                      height=${Math.max(0, T - r)} fill=${v} />
+                      height=${Math.max(0, T - r)} fill=${g} />
               </g>
             `;
 	})}
 
-          ${s == null ? n : i`<line x1=${w.left} x2=${w.width - w.right}
-                        y1=${k(s, x.max, w)} y2=${k(s, x.max, w)}
+          ${a == null ? l : _`<line x1=${w.left} x2=${w.width - w.right}
+                        y1=${O(a, x.max, w)} y2=${O(a, x.max, w)}
                         stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="4 3" />`}
 
           <g class="lintje-chart__reveal">
             ${M.filter((e) => e.length > 0).map((e) => {
-		let t = e.join(" "), [r, a] = e[0].split(",");
-		return i`
-                  ${j && e.length > 1 ? i`<polyline class="lintje-chart__line lintje-chart__line--casing"
-                                    stroke=${j} points=${t} />` : n}
-                  ${e.length === 1 ? i`<circle cx=${r} cy=${a} r="2.5" fill=${y} />` : i`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
+		let t = e.join(" "), [n, r] = e[0].split(",");
+		return _`
+                  ${j && e.length > 1 ? _`<polyline class="lintje-chart__line lintje-chart__line--casing"
+                                    stroke=${j} points=${t} />` : l}
+                  ${e.length === 1 ? _`<circle cx=${n} cy=${r} r="2.5" fill=${y} />` : _`<polyline class="lintje-chart__line" stroke=${y} points=${t} />`}
                 `;
 	})}
           </g>
 
-          ${o.filter((e, t) => t % D === 0).map((e, t) => i`
-            <text x=${A(t * D, o.length, w).center} y=${w.height - 8}
+          ${i.filter((e, t) => t % D === 0).map((e, t) => _`
+            <text x=${k(t * D, i.length, w).center} y=${w.height - 8}
                   text-anchor="middle" class="lintje-chart__axis-label">${e}</text>
           `)}
 
           <!-- Hover point on the right-axis line; no point for a missing value. -->
-          ${O != null && p.values[O] != null ? i`<circle class="lintje-chart__hover-point" r="4" fill=${y}
-                          cx=${A(O, o.length, w).center}
-                          cy=${k(p.values[O], x.max, w)} />` : n}
-          ${o.map((e, t) => {
-		let n = A(t, o.length, w);
-		return i`
-              <rect x=${n.x} y=${w.top} width=${n.bandWidth} height=${T - w.top}
+          ${A != null && f.values[A] != null ? _`<circle class="lintje-chart__hover-point" r="4" fill=${y}
+                          cx=${k(A, i.length, w).center}
+                          cy=${O(f.values[A], x.max, w)} />` : l}
+          ${i.map((e, t) => {
+		let r = k(t, i.length, w);
+		return _`
+              <rect x=${r.x} y=${w.top} width=${r.bandWidth} height=${T - w.top}
                     fill="transparent"
-                    @mousemove=${(e) => r.hoverAt(t, e, F(t))}
-                    @mouseleave=${() => r.hoverAt(null)} />
+                    @mousemove=${(e) => n.hoverAt(t, e, I(t))}
+                    @mouseleave=${() => n.hoverAt(null)} />
             `;
 	})}
         </svg>
       </figure>
-      ${H(r)}
-      ${X(r)}
+      ${H(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/scatter-chart/scatter-chart.ts
-var Ce = 4.5, we = 5.5, Te = 44, Ee = 8, De = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom;
-function Oe(e, t, n, r) {
+var Me = 4.5, Ne = 5.5, Pe = 44, Fe = 8, Ie = (e, t) => e.left < t.right && t.left < e.right && e.top < t.bottom && t.top < e.bottom;
+function Le(e, t, n, r) {
 	let i = 5.5, a = [];
 	for (let [o, s] of e.entries()) {
 		if (!t.includes(s.label)) continue;
-		let c = d(s.label, r, 700), l = s.y - 9, u = l - 12, f = l + 3, p = [{
+		let c = f(s.label, r, 700), l = s.y - 9, u = l - 12, d = l + 3, p = [{
 			anchor: "end",
-			x: s.x - Ee,
-			left: s.x - Ee - c
+			x: s.x - Fe,
+			left: s.x - Fe - c
 		}, {
 			anchor: "start",
-			x: s.x + Ee,
-			left: s.x + Ee
+			x: s.x + Fe,
+			left: s.x + Fe
 		}].map((e) => ({
 			...e,
 			right: e.left + c,
 			top: u,
-			bottom: f
-		})).find((t) => t.left >= n.left && t.right <= n.width - n.right && t.top >= 0 && a.every((e) => !De(t, e)) && e.every((e, n) => n === o || !De(t, {
+			bottom: d
+		})).find((t) => t.left >= n.left && t.right <= n.width - n.right && t.top >= 0 && a.every((e) => !Ie(t, e)) && e.every((e, n) => n === o || !Ie(t, {
 			left: e.x - i,
 			right: e.x + i,
 			top: e.y - i,
@@ -1016,37 +1245,37 @@ function Oe(e, t, n, r) {
 		anchor: r
 	}));
 }
-var ke = (e) => e.charAt(0).toUpperCase() + e.slice(1), Ae = (e, t) => `${g(e)}${t ? ` ${t}` : ""}`;
-function je(e) {
-	let t = new Set(e.series.map((e) => e.color).filter(L)), n = R.filter((e) => !t.has(e)), r = 0;
+var Re = (e) => e.charAt(0).toUpperCase() + e.slice(1), ze = (e, t) => `${v(e)}${t ? ` ${t}` : ""}`;
+function Be(e) {
+	let t = new Set(e.series.map((e) => e.color).filter(I)), n = L.filter((e) => !t.has(e)), r = 0;
 	return e.series.map((e) => {
-		let t = L(e.color) ? e.color : n[r++ % n.length];
+		let t = I(e.color) ? e.color : n[r++ % n.length];
 		return {
-			color: I(e.color ?? t),
+			color: F(e.color ?? t),
 			symbol: t
 		};
 	});
 }
-function Me(t, r) {
-	let { controller: a, description: o } = r, { axisTitle: s, unit: l, xTitle: u, xUnit: d, threshold: f, thresholdLabel: h, small: v = !1 } = t, y = a.id;
-	a.measure({
+function Ve(e, n) {
+	let { controller: r, description: i } = n, { axisTitle: a, unit: o, xTitle: c, xUnit: d, threshold: f, thresholdLabel: m, small: g = !1 } = e, y = r.id;
+	r.measure({
 		width: !0,
-		height: r.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
-		fit: !!r.expanded && !r.mobile
+		height: n.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
+		fit: !!n.expanded && !n.mobile
 	});
-	let b = je(t), x = t.series.map((e, t) => ({
+	let b = Be(e), x = e.series.map((e, t) => ({
 		...e,
 		...b[t]
-	})), S = (e) => a.hiddenSeries.includes(e.label), C = x.flatMap((e, t) => e.points.map((n, r) => ({
+	})), S = (e) => r.hiddenSeries.includes(e.label), C = x.flatMap((e, t) => e.points.map((n, r) => ({
 		point: n,
 		row: e,
 		key: `${t}:${r}`
-	})).filter((e) => e.point.x != null && e.point.y != null)).sort((e, t) => e.point.x - t.point.x || e.point.y - t.point.y), w = C.filter(({ row: e }) => !S(e)), T = new Map(w.map((e, t) => [e.key, t])), E = G(Math.max(...w.map(({ point: e }) => e.x), 1), r.mobile ? 3 : 6), D = G(Math.max(...w.map(({ point: e }) => e.y), f ?? 0, 1)), A = P(D.ticks, a.width, { fontFamily: a.fontFamily }), j = K(r, {
+	})).filter((e) => e.point.x != null && e.point.y != null)).sort((e, t) => e.point.x - t.point.x || e.point.y - t.point.y), w = C.filter(({ row: e }) => !S(e)), T = new Map(w.map((e, t) => [e.key, t])), E = K(Math.max(...w.map(({ point: e }) => e.x), 1), n.mobile ? 3 : 6), k = K(Math.max(...w.map(({ point: e }) => e.y), f ?? 0, 1)), A = N(k.ticks, r.width, { fontFamily: r.fontFamily }), M = q(n, {
 		left: A.width,
-		bottom: Te
-	}), N = (e) => j.left + O(j) * e / E.max, F = E.ticks.map((e, t) => ({
-		label: g(e),
-		x: N(e),
+		bottom: Pe
+	}), P = (e) => M.left + D(M) * e / E.max, F = E.ticks.map((e, t) => ({
+		label: v(e),
+		x: P(e),
 		anchor: t === E.ticks.length - 1 ? "end" : "middle"
 	})), I = [...x.map((e) => ({
 		label: e.label,
@@ -1055,7 +1284,7 @@ function Me(t, r) {
 		symbol: e.symbol,
 		hidden: S(e)
 	})), ...f == null ? [] : [{
-		label: h ?? "Norm",
+		label: m ?? "Norm",
 		color: "var(--color-chart-emphasis)",
 		shape: "dashed",
 		fixed: !0
@@ -1072,131 +1301,131 @@ function Me(t, r) {
 					symbol: n.symbol
 				},
 				{
-					label: ke(u),
-					value: Ae(t.x, d)
+					label: Re(c),
+					value: ze(t.x, d)
 				},
 				{
-					label: ke(s),
-					value: Ae(t.y, l)
+					label: Re(a),
+					value: ze(t.y, o)
 				}
 			]
 		};
 	}
 	let R = (e) => ({
-		x: N(e.x),
-		y: k(e.y, D.max, j)
-	}), z = (e) => R(w[e].point), V = Y(a, w.length, (e) => ({
-		...z(e),
+		x: P(e.x),
+		y: O(e.y, k.max, M)
+	}), B = (e) => R(w[e].point), ne = Z(r, w.length, (e) => ({
+		...B(e),
 		content: L(e)
-	})), re = w.map(({ point: e, row: t }) => e.href ? {
+	})), U = w.map(({ point: e, row: t }) => e.href ? {
 		id: e.id ?? `${t.label} · ${e.label}`,
 		href: e.href
-	} : null), ie = Q(r, re), U = w.map(({ point: e }, t) => ie.of(re[t], e.label, oe(L(t)))), W = Oe(w.map((e, t) => ({
+	} : null), W = le(n, U), G = w.map(({ point: e }, t) => W.of(U[t], e.label, re(L(t)))), J = Le(w.map((e, t) => ({
 		label: e.point.label,
-		...z(t)
-	})), t.dataLabels ?? [], j, a.fontFamily), q = f == null ? 0 : k(f, D.max, j), ae = a.hoverIndex == null ? void 0 : w[a.hoverIndex], J = (t) => {
-		let n = t.target.closest?.("[data-point]");
+		...B(t)
+	})), e.dataLabels ?? [], M, r.fontFamily), Y = f == null ? 0 : O(f, k.max, M), X = r.hoverIndex == null ? void 0 : w[r.hoverIndex], $ = (e) => {
+		let n = e.target.closest?.("[data-point]");
 		if (n) return Number(n.getAttribute("data-point"));
-		let r = t.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? j.width / i.width : 1, o = (t.clientX - (i?.left ?? 0)) * a, s = (t.clientY - (i?.top ?? 0)) * a, c = e(r, "--h-target", 48) / 2, l = null, u = c;
+		let r = e.currentTarget, i = r.ownerSVGElement?.getBoundingClientRect(), a = i && i.width > 0 ? M.width / i.width : 1, o = (e.clientX - (i?.left ?? 0)) * a, s = (e.clientY - (i?.top ?? 0)) * a, c = t(r, "--h-target", 48) / 2, l = null, u = c;
 		return w.forEach((e, t) => {
-			let { x: n, y: r } = z(t), i = Math.hypot(n - o, r - s);
+			let { x: n, y: r } = B(t), i = Math.hypot(n - o, r - s);
 			i <= u && (l = t, u = i);
 		}), l;
-	}, se = (e) => {
-		let t = J(e);
-		t == null ? (a.hoverIndex != null || a.tooltip) && a.hoverAt(null) : a.hoverAt(t, e, L(t));
-	}, Z = (e) => {
-		let t = J(e), r = t == null ? null : U[t];
-		r?.clickable && r.click !== n && r.click();
-	}, ce = ae != null && U[a.hoverIndex]?.clickable, le = [f == null ? n : i`
+	}, ie = (e) => {
+		let t = $(e);
+		t == null ? (r.hoverIndex != null || r.tooltip) && r.hoverAt(null) : r.hoverAt(t, e, L(t));
+	}, ae = (e) => {
+		let t = $(e), n = t == null ? null : G[t];
+		n?.clickable && n.click !== l && n.click();
+	}, oe = X != null && G[r.hoverIndex]?.clickable, se = [f == null ? l : _`
         <g class="lintje-chart__reference">
-          <line x1=${j.left} x2=${j.width - j.right} y1=${q} y2=${q}
+          <line x1=${M.left} x2=${M.width - M.right} y1=${Y} y2=${Y}
                 stroke="var(--color-chart-emphasis)" stroke-width="1" stroke-dasharray="3 3" />
-          <text x=${j.left + 6} y=${q - 6}
+          <text x=${M.left + 6} y=${Y - 6}
                 class="lintje-chart__axis-label lintje-chart__axis-label--halo">
-            ${h ?? `norm ${Ae(f, l)}`}
+            ${m ?? `norm ${ze(f, o)}`}
           </text>
         </g>
-      `, i`<g @mousemove=${se} @mouseleave=${() => a.hoverAt(null)} @click=${Z}>
-      <rect class="lintje-chart__hit ${ce ? "is-clickable" : ""}"
-            x="0" y="0" width=${j.width} height=${j.height} />
+      `, _`<g @mousemove=${ie} @mouseleave=${() => r.hoverAt(null)} @click=${ae}>
+      <rect class="lintje-chart__hit ${oe ? "is-clickable" : ""}"
+            x="0" y="0" width=${M.width} height=${M.height} />
       <g>
-        ${p(C, (e) => e.key, ({ point: e, row: t, key: r }, a) => {
-		let { x: o, y: s } = R(e), c = te(t.color), l = T.get(r), u = l == null ? void 0 : U[l];
-		return i`
-              <path class="lintje-chart__point lintje-chart__mark ${c ? "" : "lintje-chart__segment"} ${u?.state ?? "is-hidden"}"
-                    ${_(B(a, C.length))}
-                    d=${M(t.symbol, Ce, o, s)} fill=${t.color}
-                    stroke=${c ?? n} stroke-width=${c ? 1 : n}
-                    data-point=${l ?? n}
-                    data-mark-id=${u?.markId ?? n} role=${u?.role ?? n}
-                    tabindex=${u?.tabIndex ?? n}
-                    aria-pressed=${u?.pressed ?? n} aria-label=${u?.label ?? n}
-                    @keydown=${u?.keydown ?? n} />
+        ${u(C, (e) => e.key, ({ point: e, row: t, key: n }, r) => {
+		let { x: i, y: a } = R(e), o = V(t.color), c = T.get(n), u = c == null ? void 0 : G[c];
+		return _`
+              <path class="lintje-chart__point lintje-chart__mark ${o ? "" : "lintje-chart__segment"} ${u?.state ?? "is-hidden"}"
+                    ${s(z(r, C.length))}
+                    d=${j(t.symbol, Me, i, a)} fill=${t.color}
+                    stroke=${o ?? l} stroke-width=${o ? 1 : l}
+                    data-point=${c ?? l}
+                    data-mark-id=${u?.markId ?? l} role=${u?.role ?? l}
+                    tabindex=${u?.tabIndex ?? l}
+                    aria-pressed=${u?.pressed ?? l} aria-label=${u?.label ?? l}
+                    @keydown=${u?.keydown ?? l} />
             `;
 	})}
       </g>
 
-      ${W.map((e) => i`
+      ${J.map((e) => _`
           <text x=${e.x} y=${e.y} text-anchor=${e.anchor}
                 class="lintje-chart__data-label lintje-chart__data-label--halo">${e.label}</text>
         `)}
 
       <!-- The point under the pointer or the keyboard, raised with a ring in the surface. -->
-      ${ae ? (() => {
-		let { x: e, y: t } = z(a.hoverIndex), r = te(ae.row.color), o = M(ae.row.symbol, we, e, t);
-		return i`
-            <path class="lintje-chart__hover-point" d=${o} fill=${ae.row.color} />
-            ${r ? i`<path class="lintje-chart__hover-casing" d=${o} stroke=${r} />` : n}
+      ${X ? (() => {
+		let { x: e, y: t } = B(r.hoverIndex), n = V(X.row.color), i = j(X.row.symbol, Ne, e, t);
+		return _`
+            <path class="lintje-chart__hover-point" d=${i} fill=${X.row.color} />
+            ${n ? _`<path class="lintje-chart__hover-casing" d=${i} stroke=${n} />` : l}
           `;
-	})() : n}
+	})() : l}
     </g>`];
-	return m`
-    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
-         ${c(a.attach)} ?data-in-view=${a.inView} data-tooltip-anchor
-         @keydown=${(e) => a.dismiss(e) || ie.escape(e)}>
+	return p`
+    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
+         ${h(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
+         @keydown=${(e) => r.dismiss(e) || W.escape(e)}>
       ${ee({
 		items: I,
-		onToggle: (e) => a.toggleSeries(e)
+		onToggle: (e) => r.toggleSeries(e)
 	})}
-      ${ne({
-		fontFamily: a.fontFamily,
+      ${te({
+		fontFamily: r.fontFamily,
 		id: y,
-		ticks: D.ticks,
-		max: D.max,
-		area: j,
+		ticks: k.ticks,
+		max: k.max,
+		area: M,
 		formatTick: A.format,
-		axisTitle: s,
+		axisTitle: a,
 		xLabels: F,
-		xTitle: u,
-		description: o,
-		interactive: ie.interactive,
-		keys: V
-	}, le)}
-      ${H(a)}
-      ${X(a)}
+		xTitle: c,
+		description: i,
+		interactive: W.interactive,
+		keys: ne
+	}, se)}
+      ${H(r)}
+      ${Q(r)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/heatmap-chart/heatmap-classes.ts
-var Ne = [
+var He = [
 	"var(--color-chart-seq-1)",
 	"var(--color-chart-seq-2)",
 	"var(--color-chart-seq-3)",
 	"var(--color-chart-seq-4)",
 	"var(--color-chart-seq-5)"
-], Pe = Ne.length, Fe = [
+], Ue = He.length, We = [
 	1,
 	2,
 	2.5,
 	5,
 	10
 ];
-function Ie(e, t) {
+function Ge(e, t) {
 	if (!(e > 0) || !Number.isFinite(e)) return 1;
 	let n = 10 ** Math.floor(Math.log10(e)), r = 0, i = Infinity;
-	for (let a of Fe) {
+	for (let a of We) {
 		let o = a * n;
 		if (t && !Number.isInteger(o)) continue;
 		let s = Math.abs(Math.log(o / e));
@@ -1204,29 +1433,29 @@ function Ie(e, t) {
 	}
 	return r || (t ? 1 : n);
 }
-function Le(e, t) {
+function Ke(e, t) {
 	let n = Math.max(0, Math.min(10, -Math.floor(Math.log10(t)) + 1));
 	return Number(e.toFixed(n));
 }
-function Re(e) {
+function qe(e) {
 	let t = [];
 	for (let n of e) for (let e of n ?? []) e != null && Number.isFinite(e) && t.push(e);
 	if (t.length === 0) return [];
 	let n = Math.min(...t), r = Math.max(...t);
 	if (n === r) return [];
-	let i = t.every(Number.isInteger), a = Ie((r - n) / Pe, i), o = Math.floor(n / a) * a, s = [];
-	for (let e = 1; e < Pe; e += 1) {
-		let t = Le(o + e * a, a);
+	let i = t.every(Number.isInteger), a = Ge((r - n) / Ue, i), o = Math.floor(n / a) * a, s = [];
+	for (let e = 1; e < Ue; e += 1) {
+		let t = Ke(o + e * a, a);
 		if (t > r) break;
 		s.push(t);
 	}
 	return s;
 }
-function ze(e, t, n = 0) {
-	let r = g(e, n), i = t?.trim() ?? "";
+function Je(e, t, n = 0) {
+	let r = v(e, n), i = t?.trim() ?? "";
 	return i ? i === "%" ? `${r}%` : `${r} ${i}` : r;
 }
-function Be(e) {
+function Ye(e) {
 	let t = 0;
 	for (let n of e) {
 		let e = String(n), r = e.indexOf(".");
@@ -1234,13 +1463,13 @@ function Be(e) {
 	}
 	return Math.min(t, 4);
 }
-function Ve(e, t = {}) {
-	let n = (t.bounds?.length ? t.bounds.slice(0, Pe - 1) : null) ?? Re(e), r = Be(n), i = (e) => ze(e, t.unit, r), a = (e) => g(e, r);
+function Xe(e, t = {}) {
+	let n = (t.bounds?.length ? t.bounds.slice(0, Ue - 1) : null) ?? qe(e), r = Ye(n), i = (e) => Je(e, t.unit, r), a = (e) => v(e, r);
 	if (n.length === 0) {
-		let e = Ne.length - 1;
+		let e = He.length - 1;
 		return [{
 			limit: Infinity,
-			color: Ne[e],
+			color: He[e],
 			label: "alle waarden",
 			ramp: e
 		}];
@@ -1248,106 +1477,106 @@ function Ve(e, t = {}) {
 	return [
 		{
 			limit: n[0],
-			color: Ne[0],
+			color: He[0],
 			label: `< ${i(n[0])}`,
 			ramp: 0
 		},
 		...n.slice(1).map((e, t) => ({
 			limit: e,
-			color: Ne[t + 1],
+			color: He[t + 1],
 			label: `${a(n[t])}–${i(e)}`,
 			ramp: t + 1
 		})),
 		{
 			limit: Infinity,
-			color: Ne[n.length],
+			color: He[n.length],
 			label: `≥ ${i(n[n.length - 1])}`,
 			ramp: n.length
 		}
 	];
 }
-function He(e, t) {
+function Ze(e, t) {
 	let n = e.findIndex((e) => t < e.limit);
 	return n === -1 ? e.length - 1 : n;
 }
 //#endregion
 //#region src/components/shared/charts/heatmap-chart/heatmap-chart.ts
-function Ue(e, t, n) {
+function Qe(e, t, n) {
 	return Array.from({ length: n }, (n, r) => Array.from({ length: t }, (t, n) => e?.[n]?.[r]));
 }
-function We(e) {
+function $e(e) {
 	if (e.mobile) return e.mobile;
 	let t = e.rowLabels.length, n = e.columnLabels.length;
 	if (!(n <= t)) return {
 		columnLabels: e.rowLabels,
 		rowLabels: e.columnLabels,
-		values: Ue(e.values, t, n),
-		links: e.links ? Ue(e.links, t, n) : void 0
+		values: Qe(e.values, t, n),
+		links: e.links ? Qe(e.links, t, n) : void 0
 	};
 }
-function Ge(e, t) {
-	let { controller: r, description: i, mobile: a = !1 } = t, o = a ? We(e) : void 0, s = o?.columnLabels ?? e.columnLabels, l = o?.rowLabels ?? e.rowLabels, u = o?.values ?? e.values, d = o ? o.links : e.links, f = o ? !0 : e.compact ?? !1, { unit: p } = e, h = Q(t, (d ?? []).flat()), v = Ve(u, {
+function et(e, t) {
+	let { controller: n, description: r, mobile: i = !1 } = t, a = i ? $e(e) : void 0, o = a?.columnLabels ?? e.columnLabels, c = a?.rowLabels ?? e.rowLabels, u = a?.values ?? e.values, d = a ? a.links : e.links, f = a ? !0 : e.compact ?? !1, { unit: m } = e, g = le(t, (d ?? []).flat()), _ = Xe(u, {
 		bounds: e.bounds,
-		unit: p
-	}), y = (e) => He(v, e);
-	r.measure({});
-	let b = r.selectedCell, x = r.dimmedClass;
-	return m`
-    <div class="lintje-heatmap" ${c(r.attach)} ?data-in-view=${r.inView}
-         data-tooltip-anchor @keydown=${h.escape}>
+		unit: m
+	}), y = (e) => Ze(_, e);
+	n.measure({});
+	let b = n.selectedCell, x = n.dimmedClass;
+	return p`
+    <div class="lintje-heatmap" ${h(n.attach)} ?data-in-view=${n.inView}
+         data-tooltip-anchor @keydown=${g.escape}>
       <table class="lintje-heatmap__grid ${f ? "is-compact" : ""}">
-        <caption class="visually-hidden">${i}</caption>
+        <caption class="visually-hidden">${r}</caption>
         <thead>
           <tr>
             <td></td>
-            ${s.map((e) => m`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
+            ${o.map((e) => p`<th scope="col" class="lintje-heatmap__column-label">${e}</th>`)}
           </tr>
         </thead>
         <tbody>
-          ${l.map((e, t) => m`
+          ${c.map((e, t) => p`
             <tr>
               <th scope="row" class="lintje-heatmap__row-label" title=${e}>
                 <span class="lintje-heatmap__row-label-text">${e}</span>
               </th>
-              ${s.map((n, i) => {
+              ${o.map((r, i) => {
 		let a = u[t]?.[i];
-		if (a == null) return m`
+		if (a == null) return p`
                     <td class="lintje-heatmap__slot">
                       <div class="lintje-heatmap__cell is-empty"
-                           title="${e} · ${s[i]}: geen meting">
+                           title="${e} · ${o[i]}: geen meting">
                         <span class="visually-hidden">geen meting</span>
                       </div>
                     </td>
                   `;
-		let o = y(a), c = h.of(d?.[t]?.[i], `${e} · ${s[i]}`), S = !c.clickable && b?.row === t && b?.column === i;
-		return m`
+		let l = y(a), h = g.of(d?.[t]?.[i], `${e} · ${o[i]}`), S = !h.clickable && b?.row === t && b?.column === i;
+		return p`
                   <td class="lintje-heatmap__slot">
                     <button
                       type="button"
-                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${v[o].ramp} ${S ? "is-selected" : ""} ${x != null && x !== o ? "is-dimmed" : ""} ${c.state}"
-                      data-mark-id=${c.markId}
-                      ${_({
-			"--lintje-cell": v[o].color,
-			...re(i, t, s.length, l.length)
+                      class="lintje-heatmap__cell lintje-heatmap__cell--class-${_[l].ramp} ${S ? "is-selected" : ""} ${x != null && x !== l ? "is-dimmed" : ""} ${h.state}"
+                      data-mark-id=${h.markId}
+                      ${s({
+			"--lintje-cell": _[l].color,
+			...ne(i, t, o.length, c.length)
 		})}
-                      @click=${c.clickable ? c.click : () => {
-			r.selectedCell = S ? null : {
+                      @click=${h.clickable ? h.click : () => {
+			n.selectedCell = S ? null : {
 				row: t,
 				column: i
-			}, r.requestUpdate();
+			}, n.requestUpdate();
 		}}
-                      @mousemove=${f ? void 0 : (t) => r.showTooltip(t, {
-			title: `${e} · ${s[i]}`,
+                      @mousemove=${f ? void 0 : (t) => n.showTooltip(t, {
+			title: `${e} · ${o[i]}`,
 			rows: [{
-				label: `klasse ${v[o].label}`,
-				value: ze(a, p),
-				color: v[o].color
+				label: `klasse ${_[l].label}`,
+				value: Je(a, m),
+				color: _[l].color
 			}]
 		})}
-                      @mouseleave=${f ? void 0 : () => r.hideTooltip()}
-                      aria-pressed=${c.clickable ? c.pressed : S}
-                      aria-label="${e} ${s[i]}: ${ze(a, p)}, klasse ${v[o].label}"
-                    >${g(a)}</button>
+                      @mouseleave=${f ? void 0 : () => n.hideTooltip()}
+                      aria-pressed=${h.clickable ? h.pressed : S}
+                      aria-label="${e} ${o[i]}: ${Je(a, m)}, klasse ${_[l].label}"
+                    >${v(a)}</button>
                   </td>
                 `;
 	})}
@@ -1357,223 +1586,225 @@ function Ge(e, t) {
       </table>
 
       <!-- Selected cell: a 48 px line with day, block, value, class. -->
-      ${b && u[b.row]?.[b.column] != null ? m`
+      ${b && u[b.row]?.[b.column] != null ? p`
         <p class="lintje-heatmap__selection">
-          <b>${l[b.row]} ${s[b.column]}</b> ·
-          ${ze(u[b.row][b.column], p)} · klasse
-          ${v[y(u[b.row][b.column])].label}
+          <b>${c[b.row]} ${o[b.column]}</b> ·
+          ${Je(u[b.row][b.column], m)} · klasse
+          ${_[y(u[b.row][b.column])].label}
         </p>
-      ` : n}
+      ` : l}
 
       <!-- Class legend: clickable, dims the other classes to .25. -->
       <ul class="lintje-heatmap__legend">
-        ${v.map((e, t) => m`
+        ${_.map((e, t) => p`
           <li>
             <button type="button" class="lintje-heatmap__legend-item ${x != null && x !== t ? "is-dimmed" : ""}"
                     @click=${() => {
-		r.dimmedClass = x === t ? null : t, r.requestUpdate();
+		n.dimmedClass = x === t ? null : t, n.requestUpdate();
 	}}
                     aria-pressed=${x === t}>
-              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${_({ background: e.color })}></span>
+              <span class="lintje-heatmap__swatch lintje-heatmap__swatch--class-${e.ramp}" ${s({ background: e.color })}></span>
               <span>${e.label}</span>
             </button>
           </li>
         `)}
       </ul>
-      ${H(r)}
+      ${H(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/histogram-chart/histogram-chart.ts
-var Ke = 16, qe = 56, Je = 8, Ye = 18;
-function Xe(e) {
-	return g(e, +!Number.isInteger(e));
+var tt = 16, nt = 56, rt = 8, it = 18;
+function at(e) {
+	return v(e, +!Number.isInteger(e));
 }
-function Ze(e, t) {
+function ot(e, t) {
 	let n = t ? ` ${t}` : "";
-	return e.to == null ? `${Xe(e.from)}${n} of meer` : `${Xe(e.from)} tot ${Xe(e.to)}${n}`;
+	return e.to == null ? `${at(e.from)}${n} of meer` : `${at(e.from)} tot ${at(e.to)}${n}`;
 }
-function Qe(e, t, n = "") {
+function st(e, t, n = "") {
 	let r = t.width, i = e.map((e) => {
-		let t = d(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
+		let t = f(e.text, n, e.bold ? 700 : 400), i = e.x + 6 + t <= r;
 		return {
 			x: i ? e.x + 6 : e.x - 6,
 			anchor: i ? "start" : "end",
 			left: i ? e.x + 6 : e.x - 6 - t,
 			right: i ? e.x + 6 + t : e.x - 6
 		};
-	}), a = i.length === 2 ? +(e[1].x >= e[0].x) : -1, o = i.length === 2 && i[0].left < i[1].right + Je && i[1].left < i[0].right + Je;
+	}), a = i.length === 2 ? +(e[1].x >= e[0].x) : -1, o = i.length === 2 && i[0].left < i[1].right + rt && i[1].left < i[0].right + rt;
 	return i.map((e, n) => ({
 		x: e.x,
-		y: t.top + 12 + (o && n === a ? Ye : 0),
+		y: t.top + 12 + (o && n === a ? it : 0),
 		anchor: e.anchor
 	}));
 }
-function $e(e, t) {
-	let { controller: r, description: a } = t, { bins: o, axisTitle: l, xTitle: u, unit: f, median: p, threshold: h, small: v = !1 } = e, y = e.label ?? "Aantal", b = I(e.color) ?? "var(--color-chart-default)", x = r.id, S = (e) => f ? `${e} ${f}` : e;
-	r.measure({
+function ct(e, t) {
+	let { controller: n, description: r } = t, { bins: i, axisTitle: a, xTitle: o, unit: u, median: d, threshold: m, small: g = !1 } = e, y = e.label ?? "Aantal", b = F(e.color) ?? "var(--color-chart-default)", x = n.id, S = (e) => u ? `${e} ${u}` : e;
+	n.measure({
 		width: !0,
-		height: t.height ?? (v ? "--chart-h-small" : "--chart-h-main"),
+		height: t.height ?? (g ? "--chart-h-small" : "--chart-h-main"),
 		fit: !!t.expanded && !t.mobile
 	});
-	let C = o.map((e) => e.count).filter((e) => e != null), w = C.length === o.length ? C.reduce((e, t) => e + t, 0) : null, { max: T, ticks: E } = G(Math.max(...C, 1)), D = P(E, r.width, { fontFamily: r.fontFamily }), O = K(t), A = K(t, {
+	let C = i.map((e) => e.count).filter((e) => e != null), w = C.length === i.length ? C.reduce((e, t) => e + t, 0) : null, { max: T, ticks: E } = K(Math.max(...C, 1)), D = N(E, n.width, { fontFamily: n.fontFamily }), k = q(t), A = q(t, {
 		left: D.width,
-		bottom: O.bottom + (u ? Ke : 0)
-	}), j = A.height - A.bottom, M = A.width - A.right, N = o[0]?.from ?? 0, F = o[o.length - 1], L = o.length > 1 ? o[o.length - 1].from - o[o.length - 2].from : 1, R = F ? F.to ?? F.from + L : 1, z = (e) => A.left + (e - N) / Math.max(R - N, 2 ** -52) * (M - A.left), V = o.map((e) => {
-		let t = z(e.from), n = z(e.to ?? R) - t;
+		bottom: k.bottom + (o ? tt : 0)
+	}), j = A.height - A.bottom, M = A.width - A.right, P = i[0]?.from ?? 0, I = i[i.length - 1], L = i.length > 1 ? i[i.length - 1].from - i[i.length - 2].from : 1, R = I ? I.to ?? I.from + L : 1, B = (e) => A.left + (e - P) / Math.max(R - P, 2 ** -52) * (M - A.left), V = i.map((e) => {
+		let t = B(e.from), n = B(e.to ?? R) - t;
 		return {
 			x: t,
 			width: n,
 			center: t + n / 2
 		};
-	}), te = (e) => {
-		let t = o[e].count;
+	}), ne = (e) => {
+		let t = i[e].count;
 		return {
-			title: Ze(o[e], f),
+			title: ot(i[e], u),
 			rows: [{
 				label: y,
-				value: t == null ? "geen gegevens" : g(t),
+				value: t == null ? "geen gegevens" : v(t),
 				color: b
 			}, ...t != null && w != null && w > 0 ? [{
 				label: "Aandeel",
-				value: s(t / w * 100, 1),
+				value: c(t / w * 100, 1),
 				color: b
 			}] : []]
 		};
-	}, re = Y(r, o.length, (e) => ({
+	}, W = Z(n, i.length, (e) => ({
 		x: V[e].center,
-		y: o[e].count == null ? A.top : k(o[e].count, T, A),
-		content: te(e)
-	})), U = F?.to == null && o.length > 0, W = [...o.slice(0, U ? -1 : void 0).map((e) => e.from), ...U ? [] : F ? [F.to] : []].map((e) => ({
-		label: Xe(e),
-		x: z(e)
-	})), q = U ? {
-		label: `${Xe(F.from)}+`,
+		y: i[e].count == null ? A.top : O(i[e].count, T, A),
+		content: ne(e)
+	})), G = I?.to == null && i.length > 0, J = [...i.slice(0, G ? -1 : void 0).map((e) => e.from), ...G ? [] : I ? [I.to] : []].map((e) => ({
+		label: at(e),
+		x: B(e)
+	})), Y = G ? {
+		label: `${at(I.from)}+`,
 		x: V[V.length - 1].center
-	} : null, ae = W.length > 1 ? (W[W.length - 1].x - W[0].x) / (W.length - 1) : 1, oe = Math.max(1, Math.ceil(qe / ae)), J = ie(W.filter((e, t) => t % oe === 0), r.fontFamily), se = (e, t) => Math.abs(t.x - e.x) < (d(e.label, r.fontFamily) + d(t.label, r.fontFamily)) / 2 + Je, Z = U ? q : W[W.length - 1];
-	Z && !J.includes(Z) && (J.length && se(J[J.length - 1], Z) && (J = J.slice(0, -1)), U || (J = [...J, Z]));
-	let Q = U ? F.from : R, ce = (e) => e != null && e >= N && e <= Q, le = [...ce(p) ? [{
-		x: z(p),
-		text: e.medianLabel ?? S(`mediaan ${Xe(p)}`),
+	} : null, re = J.length > 1 ? (J[J.length - 1].x - J[0].x) / (J.length - 1) : 1, X = Math.max(1, Math.ceil(nt / re)), $ = U(J.filter((e, t) => t % X === 0), n.fontFamily), ie = (e, t) => Math.abs(t.x - e.x) < (f(e.label, n.fontFamily) + f(t.label, n.fontFamily)) / 2 + rt, ae = G ? Y : J[J.length - 1];
+	ae && !$.includes(ae) && ($.length && ie($[$.length - 1], ae) && ($ = $.slice(0, -1)), G || ($ = [...$, ae]));
+	let oe = G ? I.from : R, se = (e) => e != null && e >= P && e <= oe, ce = [...se(d) ? [{
+		x: B(d),
+		text: e.medianLabel ?? S(`mediaan ${at(d)}`),
 		bold: !0,
 		dashed: !1
-	}] : [], ...ce(h) ? [{
-		x: z(h),
-		text: e.thresholdLabel ?? S(`norm ${Xe(h)}`),
+	}] : [], ...se(m) ? [{
+		x: B(m),
+		text: e.thresholdLabel ?? S(`norm ${at(m)}`),
 		bold: !1,
 		dashed: !0
-	}] : []], ue = Qe(le, A, r.fontFamily), de = (e) => e.charAt(0).toUpperCase() + e.slice(1), fe = [
+	}] : []], le = st(ce, A, n.fontFamily), ue = (e) => e.charAt(0).toUpperCase() + e.slice(1), de = [
 		{
 			label: y,
 			color: b,
 			shape: "square"
 		},
-		...ce(p) ? [{
-			label: de(e.medianLabel ?? "Mediaan"),
+		...se(d) ? [{
+			label: ue(e.medianLabel ?? "Mediaan"),
 			color: "var(--color-chart-emphasis)",
 			shape: "line"
 		}] : [],
-		...ce(h) ? [{
-			label: de(e.thresholdLabel ?? "Norm"),
+		...se(m) ? [{
+			label: ue(e.thresholdLabel ?? "Norm"),
 			color: "var(--color-chart-emphasis)",
 			shape: "dashed"
 		}] : []
-	], pe = (e) => {
-		let t = V[e], n = o[e].count;
-		if (n == null) return i`<rect class="lintje-chart__missing" x=${t.x} y=${A.top} width=${t.width}
+	], fe = (e) => {
+		let t = V[e], n = i[e].count;
+		if (n == null) return _`<rect class="lintje-chart__missing" x=${t.x} y=${A.top} width=${t.width}
                        height=${Math.max(0, j - A.top)} fill="url(#hatch-${x})" />`;
-		let r = k(n, T, A);
-		return i`
-      <g class="lintje-chart__bar-group" ${_(B(e, o.length))}>
+		let r = O(n, T, A);
+		return _`
+      <g class="lintje-chart__bar-group" ${s(z(e, i.length))}>
         <rect class="lintje-chart__bar lintje-chart__segment" x=${t.x} y=${r} width=${t.width}
               height=${Math.max(0, j - r)} fill=${b} />
       </g>
     `;
-	}, $ = r.hoverIndex, me = $ == null ? null : o[$]?.count, he = [
-		o.map((e, t) => pe(t)),
-		$ != null && me != null ? i`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
-                  x=${V[$].x} y=${k(me, T, A)} width=${V[$].width}
-                  height=${Math.max(0, j - k(me, T, A))} fill=${b} />` : n,
-		J.map((e) => i`
+	}, pe = n.hoverIndex, me = pe == null ? null : i[pe]?.count, he = [
+		i.map((e, t) => fe(t)),
+		pe != null && me != null ? _`<rect class="lintje-chart__bar lintje-chart__bar--lifted lintje-chart__segment"
+                  x=${V[pe].x} y=${O(me, T, A)} width=${V[pe].width}
+                  height=${Math.max(0, j - O(me, T, A))} fill=${b} />` : l,
+		$.map((e) => _`
         <line x1=${e.x} x2=${e.x} y1=${j} y2=${j + 4}
               stroke="var(--color-chart-zero)" stroke-width="1" />
         <text x=${e.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${e.label}</text>
       `),
-		q ? i`<text x=${q.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${q.label}</text>` : n,
-		le.map((e, t) => {
-			let r = ue[t];
-			return i`
+		Y ? _`<text x=${Y.x} y=${j + 20} text-anchor="middle" class="lintje-chart__axis-label">${Y.label}</text>` : l,
+		ce.map((e, t) => {
+			let n = le[t];
+			return _`
         <g class="lintje-chart__reference">
           <line x1=${e.x} x2=${e.x} y1=${A.top} y2=${j}
                 stroke="var(--color-chart-emphasis)" stroke-width=${e.dashed ? 1 : 1.5}
-                stroke-dasharray=${e.dashed ? "3 3" : n} />
-          <text x=${r.x} y=${r.y} text-anchor=${r.anchor}
+                stroke-dasharray=${e.dashed ? "3 3" : l} />
+          <text x=${n.x} y=${n.y} text-anchor=${n.anchor}
                 class=${e.bold ? "lintje-chart__data-label lintje-chart__data-label--halo" : "lintje-chart__axis-label lintje-chart__axis-label--halo"}>${e.text}</text>
         </g>
       `;
 		}),
-		V.map((e, t) => i`
+		V.map((e, t) => _`
         <rect x=${e.x} y=${A.top} width=${e.width} height=${Math.max(0, j - A.top)}
               fill="transparent"
-              @mousemove=${(e) => r.hoverAt(t, e, te(t))}
-              @mouseleave=${() => r.hoverAt(null)} />
+              @mousemove=${(e) => n.hoverAt(t, e, ne(t))}
+              @mouseleave=${() => n.hoverAt(null)} />
       `)
 	];
-	return m`
-    <div class="lintje-chart-wrap ${v ? "lintje-chart--small" : ""}"
-         ${c(r.attach)} ?data-in-view=${r.inView} data-tooltip-anchor
-         @keydown=${(e) => r.dismiss(e)}>
-      ${ee({ items: fe })}
-      ${ne({
-		fontFamily: r.fontFamily,
+	return p`
+    <div class="lintje-chart-wrap ${g ? "lintje-chart--small" : ""}"
+         ${h(n.attach)} ?data-in-view=${n.inView} data-tooltip-anchor
+         @keydown=${(e) => n.dismiss(e)}>
+      ${ee({ items: de })}
+      ${te({
+		fontFamily: n.fontFamily,
 		id: x,
 		ticks: E,
 		max: T,
 		area: A,
-		axisTitle: l,
-		xTitle: u,
-		description: a,
+		axisTitle: a,
+		xTitle: o,
+		description: r,
 		formatTick: D.format,
-		keys: re
+		keys: W
 	}, he)}
-      ${H(r)}
-      ${X(r)}
+      ${H(n)}
+      ${Q(n)}
     </div>
   `;
 }
 //#endregion
 //#region src/components/shared/charts/shared/render-chart.ts
-function et(e, t) {
+function lt(e, t) {
 	switch (e.kind) {
 		case "line": return se(e, t);
-		case "bar": return le(e, t);
-		case "horizontal-bar": return de(e, t);
-		case "target-progress": return fe(e, t);
-		case "grouped-bar": return pe(e, t);
-		case "stacked-bar": return ge(e, t);
-		case "pie": return xe(e, t);
-		case "dual-axis": return Se(e, t);
-		case "scatter": return Me(e, t);
-		case "heatmap": return Ge(e, t);
-		case "histogram": return $e(e, t);
+		case "bar": return de(e, t);
+		case "horizontal-bar": return pe(e, t);
+		case "target-progress": return me(e, t);
+		case "grouped-bar": return he(e, t);
+		case "stacked-bar": return ye(e, t);
+		case "stacked-area": return Te(e, t);
+		case "pie": return Ae(e, t);
+		case "dual-axis": return je(e, t);
+		case "scatter": return Ve(e, t);
+		case "heatmap": return et(e, t);
+		case "histogram": return ct(e, t);
 	}
 }
 //#endregion
 //#region src/components/charts/chart/chart.css?inline
-var tt = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart__view { flex: none; }\n\n/* Below 768 px it is a row of its own at the touch height. */\n@media (max-width: 767px) {\n  .lintje-chart__view { --h-control: var(--h-touch); width: 100%; }\n}\n", nt = ".lintje-chart__svg, .lintje-pie-chart__svg", rt = [{
+var ut = "/* ------------------------------------------------------------------------ */\n\n.lintje-chart__view { flex: none; }\n\n/* Below 768 px it is a row of its own at the touch height. */\n@media screen and (max-width: 767px) {\n  .lintje-chart__view { --h-control: var(--h-touch); width: 100%; }\n}\n", dt = ".lintje-chart__svg, .lintje-pie-chart__svg", ft = [{
 	value: "chart",
 	label: "Grafiek"
 }, {
 	value: "table",
 	label: "Tabel"
 }];
-function it(e) {
+function pt(e) {
 	return (e ?? "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "grafiek";
 }
-function at(e) {
+function mt(e) {
 	switch (e.kind) {
 		case "line":
+		case "stacked-area":
 		case "dual-axis":
 		case "scatter": return "line";
 		case "pie": return e.donut ? "donut" : "pie";
@@ -1581,18 +1812,29 @@ function at(e) {
 		default: return "bar";
 	}
 }
-function ot(e) {
+function ht(e) {
 	switch (e.kind) {
 		case "horizontal-bar":
-		case "target-progress": return e.rows.length ? `${ue(e.rows.length)}px` : void 0;
+		case "target-progress": return e.rows.length ? `${fe(e.rows.length)}px` : void 0;
 		case "pie":
 		case "heatmap": return;
 		default: return e.small ? "var(--chart-h-small)" : void 0;
 	}
 }
-function st(e) {
+function gt(e) {
 	switch (e.kind) {
-		case "line": return [["", ...e.series.map((e) => e.label)], ...e.labels.map((t, n) => [t, ...e.series.map((e) => e.values[n])])];
+		case "line": {
+			let t = e.events ?? [], n = (e) => t.filter((t) => t.index === e).map((e) => e.label).join("; ");
+			return [[
+				"",
+				...e.series.map((e) => e.label),
+				...t.length ? ["Gebeurtenis"] : []
+			], ...e.labels.map((r, i) => [
+				r,
+				...e.series.map((e) => e.values[i]),
+				...t.length ? [n(i)] : []
+			])];
+		}
 		case "bar": return [[
 			"",
 			e.axisTitle ?? "Waarde",
@@ -1614,6 +1856,18 @@ function st(e) {
 		])];
 		case "grouped-bar":
 		case "stacked-bar": return [["", ...e.series.map((e) => e.label)], ...e.labels.map((t, n) => [t, ...e.series.map((e) => e.values[n])])];
+		case "stacked-area": return [[
+			"",
+			...e.series.map((e) => e.label),
+			"Totaal"
+		], ...e.labels.map((t, n) => {
+			let r = e.series.map((e) => e.values[n]), i = r.some((e) => e == null) ? null : Number(r.reduce((e, t) => e + t, 0).toFixed(_t(r)));
+			return [
+				t,
+				...r,
+				i
+			];
+		})];
 		case "pie": return [["", "Aantal"], ...e.segments.map((e) => [e.label, e.value])];
 		case "dual-axis": {
 			let t = (e) => e.unit ? `${e.label} (${e.unit})` : e.label;
@@ -1653,7 +1907,7 @@ function st(e) {
 				t("Tot"),
 				"Aantal"
 			], ...e.bins.map((t) => [
-				Ze(t, e.unit),
+				ot(t, e.unit),
 				t.from,
 				t.to ?? "",
 				t.count
@@ -1661,15 +1915,15 @@ function st(e) {
 		}
 	}
 }
-function ct(e) {
+function _t(e) {
 	return e.reduce((e, t) => {
 		if (typeof t != "number" || Number.isInteger(t)) return e;
 		let n = String(t).split(".")[1] ?? "";
 		return Math.max(e, n.length);
 	}, 0);
 }
-function lt(e, t) {
-	let [n = [], ...r] = st(e), i = n.map((e, t) => {
+function vt(e, t) {
+	let [n = [], ...r] = gt(e), i = n.map((e, t) => {
 		let n = r.map((e) => e[t] ?? null);
 		return t === 0 || n.some((e) => typeof e == "string" && e !== "") ? {
 			key: `c${t}`,
@@ -1680,7 +1934,7 @@ function lt(e, t) {
 			key: `c${t}`,
 			header: String(e ?? ""),
 			format: "decimal",
-			decimals: ct(n),
+			decimals: _t(n),
 			align: "right",
 			sortable: !1
 		};
@@ -1700,18 +1954,17 @@ function lt(e, t) {
 		pageSize: Math.max(r.length, 1)
 	};
 }
-var ut = class extends S {
+var yt = class extends C {
 	constructor(...e) {
-		super(...e), this.view = "chart", this.#e = new U(() => this.requestUpdate()), this.#t = null, this.#n = new a(this);
+		super(...e), this.view = "chart", this.#e = new W(() => this.requestUpdate()), this.#t = null, this.#n = new n(this);
 	}
 	static {
 		this.styles = [
-			u,
-			r(y),
-			r(v),
-			r(o),
-			...C,
-			r(tt)
+			e,
+			a(x),
+			a(r),
+			...w,
+			a(ut)
 		];
 	}
 	static {
@@ -1740,36 +1993,40 @@ var ut = class extends S {
 	}
 	get downloadName() {
 		let e = this.data?.download;
-		return e === !1 ? null : e?.filename ?? it(this.data?.title);
+		return e === !1 ? null : e?.filename ?? pt(this.data?.title);
 	}
 	csv() {
 		let e = this.data, t = this.downloadName;
-		e && t !== null && D(t, st(e.chart));
+		e && t !== null && E(t, gt(e.chart));
 	}
 	png() {
 		let e = this.data;
 		if (!e) return;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(nt);
-		t && w(this.downloadName ?? it(e.title), t);
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile")?.querySelector(dt);
+		t && T(this.downloadName ?? pt(e.title), t);
 	}
 	expandChanged(e) {
-		e ? this.#t ??= new U(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
+		e ? this.#t ??= new W(() => this.requestUpdate()) : (this.#t?.detach(), this.#t = null);
 	}
 	render() {
 		let e = this.data;
-		if (!e) return n;
-		let t = this.ready, r = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, i = this.id ? `${this.id}-tile` : void 0, a = e.tableSwitch && t ? this.viewSwitch() : n, o = this.showsTable;
-		return m`<lintje-tile
-        id=${i ?? n}
-        span=${e.span ?? n}
-        heading=${e.title ?? n}
-        icon=${e.icon ?? n}
-        subtitle=${r ?? n}
-        intro=${e.intro ?? n}
-        footnote=${e.footnote ?? n}
+		if (!e) return l;
+		let t = this.ready, n = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, r = this.id ? `${this.id}-tile` : void 0, i = e.tableSwitch && t ? this.viewSwitch() : l, a = this.showsTable;
+		return p`<lintje-tile
+        id=${r ?? l}
+        span=${e.span ?? l}
+        heading=${e.title ?? l}
+        icon=${e.icon ?? l}
+        subtitle=${n ?? l}
+        intro=${e.intro ?? l}
+        footnote=${e.footnote ?? l}
         ?legend-below=${!!e.legendBelow}
         ?expandable=${this.expandable && t}
         ?download=${this.downloadName !== null && t}
+        state=${e.state ?? "ready"}
+        message=${e.message ?? l}
+        last-known=${e.lastKnown ?? l}
+        content-height=${ht(e.chart) ?? l}
         @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
 		}}
@@ -1777,53 +2034,51 @@ var ut = class extends S {
 			e.stopPropagation(), this.csv();
 		}}
       >
-        ${a}
-        ${e.notice ? m`<lintje-announcement
+        ${i}
+        ${e.notice ? p`<lintje-announcement
               slot="notice"
               compact
               .data=${e.notice}
-            ></lintje-announcement>` : n}
+            ></lintje-announcement>` : l}
         ${this.content()}
       </lintje-tile>
 
-      ${this.renderExpandModal(this.expanded ? o ? this.table() : this.#t ? et(e.chart, {
+      ${this.renderExpandModal(this.expanded ? a ? this.table() : this.#t ? lt(e.chart, {
 			...this.chartOptions(this.#t),
 			expanded: !0
-		}) : n : n, {
+		}) : l : l, {
 			heading: e.title,
-			subtitle: r,
+			subtitle: n,
 			footnote: e.footnote,
 			csv: () => this.csv(),
-			png: o ? void 0 : () => this.png()
+			png: a ? void 0 : () => this.png()
 		})}`;
 	}
 	content() {
-		let e = this.data, t = ot(e.chart);
+		let e = this.data;
 		switch (e.state ?? "ready") {
-			case "loading": return x({
-				kind: at(e.chart),
-				height: t
-			});
-			case "empty": return T(e.message, t);
-			case "error": return E({
-				message: e.message,
-				lastKnown: e.lastKnown,
-				height: t,
-				announcement: b
-			});
-			default: return this.showsTable ? this.table() : et(e.chart, this.chartOptions(this.#e));
+			case "loading": return p`<div slot="loading">
+          ${S({
+				kind: mt(e.chart),
+				height: ht(e.chart),
+				status: !1
+			})}
+        </div>`;
+			case "empty":
+			case "error": return l;
+			default: return this.showsTable ? this.table() : lt(e.chart, this.chartOptions(this.#e));
 		}
 	}
 	viewSwitch() {
 		let e = this.#n.matches;
-		return m`<lintje-segmented
+		return p`<lintje-segmented
       class="lintje-chart__view"
       slot=${e ? "notice" : "actions"}
       label="Weergave"
       hide-label
       ?stacked=${e}
       .value=${this.view}
-      .options=${rt}
+      .options=${ft}
       @lintje-change=${(e) => {
 			e.stopPropagation(), this.view = e.detail === "table" ? "table" : "chart";
 		}}
@@ -1831,15 +2086,15 @@ var ut = class extends S {
 	}
 	table() {
 		let e = this.data, t = e.title ? `${e.title}, als tabel` : "Grafiek als tabel";
-		return m`<lintje-data-table
+		return p`<lintje-data-table
       class="lintje-chart__table"
       bare
-      .data=${lt(e.chart, t)}
+      .data=${vt(e.chart, t)}
     ></lintje-data-table>`;
 	}
 	async focusMark(e) {
 		await this.updateComplete;
-		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile"), n = t?.querySelector(`[data-mark-id="${CSS.escape(e)}"]`) ?? t?.querySelector(`${nt}, .lintje-heatmap`);
+		let t = this.renderRoot.querySelector(this.expanded ? "lintje-modal" : "lintje-tile"), n = t?.querySelector(`[data-mark-id="${CSS.escape(e)}"]`) ?? t?.querySelector(`${dt}, .lintje-heatmap`);
 		n && !n.hasAttribute("tabindex") && n.setAttribute("tabindex", "-1"), n?.focus();
 	}
 	chartOptions(e) {
@@ -1863,6 +2118,6 @@ var ut = class extends S {
 		};
 	}
 };
-t("lintje-chart", ut);
+i("lintje-chart", yt);
 //#endregion
-export { ut as LintjeChart };
+export { yt as LintjeChart };