lintje 0.3.0 → 0.4.0

package/dist-elements/tag/map.js

@@ -1,8 +1,8 @@
-import { F as e, Kt as t, O as n, Yt as r, Zt as i, a, bt as o, en as s, f as c, h as l, in as u, lt as d, nn as f, p, q as m, rn as h, s as g, tn as _, ut as v, y } from "../chunks/base-CbmWxUig.js";
+import { F as e, Kt as t, O as n, Yt as r, Zt as i, a, bt as o, d as s, en as c, h as l, in as u, l as d, lt as f, nn as p, o as m, q as h, rn as g, tn as _, ut as v, y } from "../chunks/base-DRGvkF-r.js";
 import { n as ee, nextRow as te } from "./menu-button.js";
 import { t as ne } from "./announcement.js";
-import { a as re, c as ie, i as b, n as x, o as ae, s as S, t as oe } from "../chunks/download-Ct9q2anY.js";
-import { _ as C, d as se, l as w, m as ce, n as T, r as E, v as D } from "../chunks/stagger-BHoOgy0g.js";
+import { a as re, c as ie, i as b, n as x, o as ae, s as S, t as oe } from "../chunks/download-C68kcwPj.js";
+import { _ as C, d as se, l as w, m as ce, n as T, r as E, v as D } from "../chunks/stagger-BB_gcxBI.js";
 //#region \0rolldown/runtime.js
 var O = Object.create, k = Object.defineProperty, A = Object.getOwnPropertyDescriptor, j = Object.getOwnPropertyNames, M = Object.getPrototypeOf, N = Object.prototype.hasOwnProperty, le = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), ue = (e, t, n, r) => {
 	if (t && typeof t == "object" || typeof t == "function") for (var i = j(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !N.call(e, s) && s !== n && k(e, s, {
@@ -20756,7 +20756,7 @@ function Ye(e) {
 }
 var z = (e, t) => `${e.toFixed(2)} ${t.toFixed(2)}`;
 function B(e, t) {
-	return t.tiled ? [] : e.map((e) => h`<path d=${e.d} class="lintje-map-chart__land" fill="var(--color-map-land)" />`);
+	return t.tiled ? [] : e.map((e) => g`<path d=${e.d} class="lintje-map-chart__land" fill="var(--color-map-land)" />`);
 }
 function Xe(e, t) {
 	return e.map(([e, n], r) => {
@@ -20765,15 +20765,15 @@ function Xe(e, t) {
 	}).join("") + "Z";
 }
 function Ze(e, t, n, r) {
-	let { id: i, controller: a, select: o, project: c } = t, u = new Map(n.map((e) => [e.id, e.d])), d = (t) => e.variant === "choropleth" ? u.get(t.id) : He(t) ? Xe(t.polygon, c) : void 0, f = e.values.filter((e) => d(e));
-	return l(f, (e) => e.id, (n) => {
-		let c = d(n), l = n.value == null, u = l ? "var(--color-chart-hatch)" : Be[Ve(n.value, e.max)], f = l ? "geen gegevens" : R(g(n.value), e.unit);
-		return h`
+	let { id: i, controller: a, select: o, project: u } = t, d = new Map(n.map((e) => [e.id, e.d])), f = (t) => e.variant === "choropleth" ? d.get(t.id) : He(t) ? Xe(t.polygon, u) : void 0, p = e.values.filter((e) => f(e));
+	return l(p, (e) => e.id, (n) => {
+		let l = f(n), u = n.value == null, d = u ? "var(--color-chart-hatch)" : Be[Ve(n.value, e.max)], p = u ? "geen gegevens" : R(s(n.value), e.unit);
+		return g`
       <g class="lintje-map-chart__polygon is-clickable ${Ke(t, n.id, r)}"
          data-mark-id=${n.id}
-         role="button" tabindex=${r ? -1 : 0} aria-hidden=${r ? "true" : s}
+         role="button" tabindex=${r ? -1 : 0} aria-hidden=${r ? "true" : c}
          aria-pressed=${String(Ge(t, n.id))}
-         aria-label=${`${n.label}: ${f}${n.detail ? `, ${n.detail}` : ""}`}
+         aria-label=${`${n.label}: ${p}${n.detail ? `, ${n.detail}` : ""}`}
          @click=${(e) => {
 			qe(e), o(n);
 		}}
@@ -20782,40 +20782,40 @@ function Ze(e, t, n, r) {
 			title: `${n.label}${n.detail ? ` · ${n.detail}` : ""}`,
 			rows: [{
 				label: e.unit,
-				value: l ? "geen gegevens" : g(n.value),
-				color: u
+				value: u ? "geen gegevens" : s(n.value),
+				color: d
 			}]
 		})}
          @mouseleave=${() => a.hideTooltip()}
          @keydown=${Je(o, n)}>
-        <path d=${c} class="lintje-map-chart__polygon-ring" />
-        <path d=${c}
-              class="lintje-map-chart__polygon-shape ${l ? "lintje-map-chart__polygon-shape--empty" : "lintje-map-chart__polygon-shape--data"}"
-              fill=${l ? s : u} />
-        ${l ? h`<path d=${c} class="lintje-map-chart__polygon-hatch" fill="url(#map-hatch-${i})" />` : s}
+        <path d=${l} class="lintje-map-chart__polygon-ring" />
+        <path d=${l}
+              class="lintje-map-chart__polygon-shape ${u ? "lintje-map-chart__polygon-shape--empty" : "lintje-map-chart__polygon-shape--data"}"
+              fill=${u ? c : d} />
+        ${u ? g`<path d=${l} class="lintje-map-chart__polygon-hatch" fill="url(#map-hatch-${i})" />` : c}
       </g>
     `;
 	});
 }
 function Qe(e, t, n) {
-	let { controller: r, select: i, project: a } = t, c = e.destination;
-	if (!c) return s;
-	let u = e.values.filter((e) => e.lon != null && e.value != null), d = Ye(u), [f, p] = a(c.lon, c.lat);
-	return h`
+	let { controller: r, select: i, project: a } = t, u = e.destination;
+	if (!u) return c;
+	let d = e.values.filter((e) => e.lon != null && e.value != null), f = Ye(d), [p, m] = a(u.lon, u.lat);
+	return g`
     <g class="lintje-map-chart__flows">
-      ${l(u, (e) => e.id, (l) => {
-		let [u, m] = a(l.lon, l.lat), _ = (u + f) / 2, v = (m + p) / 2 - Math.hypot(f - u, p - m) * .18, y = 1 + l.value / e.max * 7, ee = `${l.label} → ${c.label}`;
-		return h`
+      ${l(d, (e) => e.id, (l) => {
+		let [d, h] = a(l.lon, l.lat), _ = (d + p) / 2, v = (h + m) / 2 - Math.hypot(p - d, m - h) * .18, y = 1 + l.value / e.max * 7, ee = `${l.label} → ${u.label}`;
+		return g`
         <path
-          d=${`M${z(u, m)}Q${z(_, v)} ${z(f, p)}`}
+          d=${`M${z(d, h)}Q${z(_, v)} ${z(p, m)}`}
           pathLength="1"
-          ${o(d(l))}
+          ${o(f(l))}
           class="lintje-map-chart__flow is-clickable ${Ke(t, l.id, n)}"
           stroke-width=${y}
           data-mark-id=${l.id}
-          role="button" tabindex=${n ? -1 : 0} aria-hidden=${n ? "true" : s}
+          role="button" tabindex=${n ? -1 : 0} aria-hidden=${n ? "true" : c}
           aria-pressed=${String(Ge(t, l.id))}
-          aria-label=${`${ee}: ${R(g(l.value), e.unit)}${l.detail ? `, ${l.detail}` : ""}`}
+          aria-label=${`${ee}: ${R(s(l.value), e.unit)}${l.detail ? `, ${l.detail}` : ""}`}
           @keydown=${Je(i, l)}
           @click=${(e) => {
 			qe(e), i(l);
@@ -20825,29 +20825,29 @@ function Qe(e, t, n) {
 			title: `${ee}${l.detail ? ` · ${l.detail}` : ""}`,
 			rows: [{
 				label: e.unit,
-				value: g(l.value),
+				value: s(l.value),
 				color: se
 			}]
 		})}
           @mouseleave=${() => r.hideTooltip()} />
       `;
 	})}
-      <g class="lintje-map-chart__symbol" data-at=${z(f, p)}>
+      <g class="lintje-map-chart__symbol" data-at=${z(p, m)}>
         <circle r="5" class="lintje-map-chart__destination" />
       </g>
     </g>
   `;
 }
 function $e(e, t, n) {
-	let { id: r, controller: i, select: a, project: c, hidden: u } = t, d = e.values.filter((e) => e.lon != null), f = (t) => n || !!(t.series && u.has(We(e, t.series))), p = Ye(d);
-	return l(d, (e) => e.id, (n) => {
-		let [l, u] = c(n.lon, n.lat), d = e.variant === "points" && n.value != null ? Ue(n.value, e.max) : 6, m = ce(n.series), _ = n.series && e.seriesLabels?.[n.series] || void 0, v = n.value == null ? "geen gegevens" : R(g(n.value), e.unit), y = C(n.series, d);
-		return h`
-      <g ${o(p(n))}
-         class="lintje-map-chart__point lintje-map-chart__symbol ${Ke(t, n.id, f(n))}"
-         data-at=${z(l, u)}
+	let { id: r, controller: i, select: a, project: u, hidden: d } = t, f = e.values.filter((e) => e.lon != null), p = (t) => n || !!(t.series && d.has(We(e, t.series))), m = Ye(f);
+	return l(f, (e) => e.id, (n) => {
+		let [l, d] = u(n.lon, n.lat), f = e.variant === "points" && n.value != null ? Ue(n.value, e.max) : 6, h = ce(n.series), _ = n.series && e.seriesLabels?.[n.series] || void 0, v = n.value == null ? "geen gegevens" : R(s(n.value), e.unit), y = C(n.series, f);
+		return g`
+      <g ${o(m(n))}
+         class="lintje-map-chart__point lintje-map-chart__symbol ${Ke(t, n.id, p(n))}"
+         data-at=${z(l, d)}
          data-mark-id=${n.id}
-         role="button" tabindex=${f(n) ? -1 : 0} aria-hidden=${f(n) ? "true" : s}
+         role="button" tabindex=${p(n) ? -1 : 0} aria-hidden=${p(n) ? "true" : c}
          aria-pressed=${String(Ge(t, n.id))}
          aria-label=${`${n.label}: ${v}${_ ? `, ${_}` : ""}`}
          @click=${(e) => {
@@ -20858,8 +20858,8 @@ function $e(e, t, n) {
 			title: _ ? `${n.label} · ${_}` : n.label,
 			rows: [{
 				label: e.unit,
-				value: n.value == null ? "geen gegevens" : g(n.value),
-				color: m ?? "var(--color-chart-default)"
+				value: n.value == null ? "geen gegevens" : s(n.value),
+				color: h ?? "var(--color-chart-default)"
 			}]
 		})}
          @mouseleave=${() => i.hideTooltip()}
@@ -20869,9 +20869,9 @@ function $e(e, t, n) {
         <g class="lintje-map-chart__point-figure">
           <path d=${y} class="lintje-map-chart__point-ring" />
           <path d=${y}
-                class="lintje-map-chart__point-shape ${n.value == null ? "lintje-map-chart__point-shape--empty" : m ? "lintje-map-chart__point-shape--series" : ""}"
-                ${o({ "--lintje-series": m })} />
-          ${n.value == null ? h`<path d=${y} class="lintje-map-chart__point-hatch" fill="url(#map-hatch-${r})" />` : s}
+                class="lintje-map-chart__point-shape ${n.value == null ? "lintje-map-chart__point-shape--empty" : h ? "lintje-map-chart__point-shape--series" : ""}"
+                ${o({ "--lintje-series": h })} />
+          ${n.value == null ? g`<path d=${y} class="lintje-map-chart__point-hatch" fill="url(#map-hatch-${r})" />` : c}
         </g>
       </g>
     `;
@@ -20888,29 +20888,29 @@ function et([e, t], n, r = 72) {
 	return c;
 }
 function tt(e, t, n = !1) {
-	if (!e) return s;
+	if (!e) return c;
 	let r = `lintje-map-chart__region ${n ? "lintje-map-chart__region--draft" : ""}`;
 	if (e.kind === "circle") {
 		let [n, i] = t(...e.centre), a = e.radiusKm > 0 ? et(e.centre, e.radiusKm).map(([e, n], r) => {
 			let [i, a] = t(e, n);
 			return `${r ? "L" : "M"}${z(i, a)}`;
 		}).join("") + "Z" : "";
-		return h`
-      ${a ? h`<path class=${r} d=${a} />` : s}
+		return g`
+      ${a ? g`<path class=${r} d=${a} />` : c}
       <g class="lintje-map-chart__symbol" data-at=${z(n, i)}>
         <circle class="lintje-map-chart__region-centre" r="4" />
       </g>
     `;
 	}
-	if (e.ring.length < 2) return s;
+	if (e.ring.length < 2) return c;
 	let i = e.ring.map(([e, n], r) => {
 		let [i, a] = t(e, n);
 		return `${r ? "L" : "M"}${z(i, a)}`;
 	}).join("") + (n && !De(e.ring) ? "" : "Z");
-	return h`<path class=${r} d=${i} />`;
+	return g`<path class=${r} d=${i} />`;
 }
 function nt(e, t, n, r = null) {
-	return h`
+	return g`
     <defs>
       <pattern id="map-hatch-${n.id}" class="lintje-map-chart__hatch" width="6" height="6"
                patternUnits="userSpaceOnUse">
@@ -21024,7 +21024,12 @@ var gt = class {
 	}
 	#v() {
 		let e = this.#t;
-		e && e.clientWidth && e.clientHeight && (this.#n ? (this.#n.invalidateSize({ animate: !1 }), this.#T()) : this.#_ && this.#b(this.#_));
+		if (e && e.clientWidth && e.clientHeight) {
+			if (this.#n) {
+				if (this.#p && !this.#l && matchMedia("print").matches) return this.print(!0);
+				this.#n.invalidateSize({ animate: !1 }), this.#T();
+			} else this.#_ && this.#b(this.#_);
+		}
 	}
 	zoomIn() {
 		this.#n?.zoomIn();
@@ -21053,6 +21058,7 @@ var gt = class {
 		let t = this.#n;
 		if (!t || !this.#p) return;
 		if (e) {
+			if (this.#l) return;
 			let e = t.getBounds();
 			this.#l = {
 				centre: t.getCenter(),
@@ -21273,7 +21279,7 @@ var gt = class {
 	}
 	#W;
 	#G() {
-		this.#s = null, this.#o && _(s, this.#o), cancelAnimationFrame(this.#J), this.#X(null);
+		this.#s = null, this.#o && _(c, this.#o), cancelAnimationFrame(this.#J), this.#X(null);
 	}
 	#K() {
 		return [this.#a, this.#o].flatMap((e) => e ? [...e.querySelectorAll(".lintje-map-chart__symbol")] : []);
@@ -21331,21 +21337,21 @@ function _t(e) {
 	].map((t) => e * t / 5);
 }
 function vt(e) {
-	return Math.abs(e) >= 1e4 ? a(e) : g(e, +!Number.isInteger(e));
+	return Math.abs(e) >= 1e4 ? d(e) : s(e, +!Number.isInteger(e));
 }
 function yt(e, t) {
 	let { max: n, unit: r } = e;
-	if (!t) return f`<span class="lintje-map-legend__key">
+	if (!t) return p`<span class="lintje-map-legend__key">
       <span class="lintje-map-legend__figure">0</span>
-      <span class="lintje-map-legend__ramp">${Be.map((e) => f`<i ${o({ background: e })}></i>`)}</span>
-      <span class="lintje-map-legend__figure">${R(a(n), r)}</span>
+      <span class="lintje-map-legend__ramp">${Be.map((e) => p`<i ${o({ background: e })}></i>`)}</span>
+      <span class="lintje-map-legend__figure">${R(d(n), r)}</span>
     </span>`;
-	let i = _t(n), s = Be.map((e, t) => ({
+	let i = _t(n), a = Be.map((e, t) => ({
 		label: R(`${vt(i[t])} – ${vt(i[t + 1])}`, t === 4 ? r : ""),
 		color: e,
 		fixed: !0
 	}));
-	return f`<span class="lintje-map-legend__key lintje-map-legend__classes">${w({ items: s })}</span>`;
+	return p`<span class="lintje-map-legend__key lintje-map-legend__classes">${w({ items: a })}</span>`;
 }
 function bt(e, t) {
 	let n = Math.sqrt(Math.max(e, 1) * t), r = t / 4;
@@ -21360,33 +21366,33 @@ function bt(e, t) {
 	return r;
 }
 function V(e, t) {
-	let { min: n, max: r, unit: i } = e, o = R(`${a(n)} – ${a(r)}`, i);
-	if (!t || n >= r) return f`<span class="lintje-map-legend__key">
+	let { min: n, max: r, unit: i } = e, a = R(`${d(n)} – ${d(r)}`, i);
+	if (!t || n >= r) return p`<span class="lintje-map-legend__key">
       <svg class="lintje-map-legend__sizes" width="49" height="22" aria-hidden="true">
         <circle cx="4" cy="11" r="3" /><circle cx="17.5" cy="11" r="6.5" /><circle cx="38" cy="11" r="10" />
       </svg>
-      <span class="lintje-map-legend__figure">${o}</span>
+      <span class="lintje-map-legend__figure">${a}</span>
     </span>`;
-	let s = bt(n, r), c = [
+	let o = bt(n, r), s = [
 		14,
 		31,
 		46
-	], l = [
+	], c = [
 		r,
-		s,
+		o,
 		n
 	].map((e, t) => {
 		let n = Ue(e, r);
 		return {
 			r: n,
 			top: 46 - 2 * n,
-			line: c[t],
-			label: R(a(e), t === 0 ? i : "")
+			line: s[t],
+			label: R(d(e), t === 0 ? i : "")
 		};
 	});
-	return f`<span class="lintje-map-legend__key">
+	return p`<span class="lintje-map-legend__key">
     <svg class="lintje-map-legend__sizes lintje-map-legend__sizes--nested" width="150" height="48" aria-hidden="true">
-      ${l.map(({ r: e, top: t, line: n, label: r }) => h`
+      ${c.map(({ r: e, top: t, line: n, label: r }) => g`
         <circle cx="19" cy=${46 - e} r=${e} />
         <line x1="19" y1=${t} x2="48" y2=${n - 4} />
         <text x="52" y=${n}>${r}</text>`)}
@@ -21395,9 +21401,9 @@ function V(e, t) {
 }
 function H(e) {
 	let { min: t, max: n, unit: r } = e;
-	return f`<span class="lintje-map-legend__key">
+	return p`<span class="lintje-map-legend__key">
     <svg class="lintje-map-legend__wedge" width="58" height="12" aria-hidden="true"><path d="M0 5.5 L58 2 L58 10 L0 6.5 Z" /></svg>
-    <span class="lintje-map-legend__figure">${R(`${a(t)} – ${a(n)}`, r)}</span>
+    <span class="lintje-map-legend__figure">${R(`${d(t)} – ${d(n)}`, r)}</span>
   </span>`;
 }
 function xt(e, t) {
@@ -21425,8 +21431,8 @@ function St(e, t) {
 	}), n;
 }
 function Ct(e) {
-	let { drawings: t, hiddenLayers: n, hiddenSeries: r, expanded: i, mobile: a, open: o } = e, c = !i && !o && t.length > 3, l = c ? t.slice(0, 3) : t, u = ["lintje-map-legend", a ? "lintje-map-legend--narrow" : ""].join(" ");
-	return f`
+	let { drawings: t, hiddenLayers: n, hiddenSeries: r, expanded: i, mobile: a, open: o } = e, s = !i && !o && t.length > 3, l = s ? t.slice(0, 3) : t, u = ["lintje-map-legend", a ? "lintje-map-legend--narrow" : ""].join(" ");
+	return p`
     <div class=${u} role="group" aria-label="Legenda">
       ${l.map((t) => {
 		let a = n.includes(t.index), o = St(t, r).map((e) => a ? {
@@ -21434,7 +21440,7 @@ function Ct(e) {
 			hidden: !0,
 			fixed: !0
 		} : e);
-		return f`
+		return p`
           <button type="button" class="lintje-map-legend__layer ${a ? "is-off" : ""}"
                   aria-pressed=${!a} @click=${() => e.onLayer(t.index)}>
             <span class="lintje-map-legend__box" aria-hidden="true">${v("functioneel-vinkje", { size: 10 })}</span>
@@ -21442,21 +21448,21 @@ function Ct(e) {
           </button>
           <div class="lintje-map-legend__keys ${a ? "is-off" : ""}">
             ${xt(t, i)}
-            ${o.length > 0 ? f`<span class="lintje-map-legend__rule" aria-hidden="true"></span>${w({
+            ${o.length > 0 ? p`<span class="lintje-map-legend__rule" aria-hidden="true"></span>${w({
 			items: o,
 			onToggle: e.onSeries
-		})}` : s}
+		})}` : c}
           </div>
         `;
 	})}
-      ${!i && t.length > 3 ? f`<button type="button" class="lintje-map-legend__more" aria-expanded=${!c}
-                   @click=${() => e.onOpen(c)}>
-              ${c ? `Nog ${t.length - 3} ${t.length - 3 == 1 ? "laag" : "lagen"}` : "Minder lagen"}
+      ${!i && t.length > 3 ? p`<button type="button" class="lintje-map-legend__more" aria-expanded=${!s}
+                   @click=${() => e.onOpen(s)}>
+              ${s ? `Nog ${t.length - 3} ${t.length - 3 == 1 ? "laag" : "lagen"}` : "Minder lagen"}
               ${v("functioneel-delta-omlaag", {
 		size: 12,
-		rotate: c ? void 0 : 180
+		rotate: s ? void 0 : 180
 	})}
-            </button>` : s}
+            </button>` : c}
     </div>
   `;
 }
@@ -21525,13 +21531,13 @@ function K(e) {
 }
 function At(e) {
 	let t = e >= 1e3, n = t ? e / 1e3 : e;
-	return `${g(n, +!Number.isInteger(n))} ${t ? "km" : "m"}`;
+	return `${s(n, +!Number.isInteger(n))} ${t ? "km" : "m"}`;
 }
 function jt(e) {
-	return e.kind === "circle" ? `binnen ${g(Math.round(e.radiusKm * 10) / 10)} km` : De(e.ring) ? "binnen de rechthoek" : "binnen de getekende lijn";
+	return e.kind === "circle" ? `binnen ${s(Math.round(e.radiusKm * 10) / 10)} km` : De(e.ring) ? "binnen de rechthoek" : "binnen de getekende lijn";
 }
 function Mt(e, t) {
-	let { controller: n, description: r = e.description, mobile: i = !1, onSelect: a, onClear: c, onLayerChange: l, onArea: u } = t, { unit: d = "aantal", selectedId: h = null, selectedArea: _ = null, layers: y, layer: ee, basemap: ne, selectLabel: re = "Zet als bereik" } = e, ie = !!t.expanded, b = {
+	let { controller: n, description: r = e.description, mobile: i = !1, onSelect: a, onClear: l, onLayerChange: u, onArea: d } = t, { unit: f = "aantal", selectedId: g = null, selectedArea: _ = null, layers: y, layer: ee, basemap: ne, selectLabel: re = "Zet als bereik" } = e, ie = !!t.expanded, b = {
 		...U,
 		...e.controls
 	}, x = W.filter((e) => b[e.tool]);
@@ -21540,29 +21546,29 @@ function Mt(e, t) {
 		height: "--chart-h-main",
 		fit: !i
 	} : {});
-	let oe = ie ? n.height : t.height ?? e.height ?? (i ? wt.mobile : wt.desktop), se = be(e, d);
-	n.hostSelection !== h && (n.hostSelection = h, n.mapSelection = h);
+	let oe = ie ? n.height : t.height ?? e.height ?? (i ? wt.mobile : wt.desktop), se = be(e, f);
+	n.hostSelection !== g && (n.hostSelection = g, n.mapSelection = g);
 	let w = JSON.stringify(_);
 	n.hostArea !== w && (n.hostArea = w, n.mapArea = _);
 	let T = x.length > 0 ? n.mapArea : null, D = T ? ze(T, se, e.geo) : [], O = n.mapSelection, k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map();
 	for (let e of se) for (let t of e.values) k.set(t.id, t), A.set(t.id, e);
 	let j = O ? k.get(O) : void 0, M = j ? A.get(j.id) : void 0, N = (e) => e.series && A.get(e.id)?.seriesLabels?.[e.series] || void 0, le = n.hiddenLayers, ue = n.hiddenSeries, P = () => {
 		let e = n.mapSelection;
-		e != null && (n.mapSelection = null, c?.(e), n.requestUpdate());
+		e != null && (n.mapSelection = null, l?.(e), n.requestUpdate());
 	}, de = () => {
-		n.mapArea && (n.mapArea = null, u?.(null, []), n.requestUpdate());
+		n.mapArea && (n.mapArea = null, d?.(null, []), n.requestUpdate());
 	}, fe = (e) => {
 		if (e.id === O) return P();
 		n.mapSelection = e.id, a?.(e), n.requestUpdate();
 	}, pe = (t) => {
-		n.mapArea = t, u?.(t, ze(t, se, e.geo)), n.requestUpdate();
+		n.mapArea = t, d?.(t, ze(t, se, e.geo)), n.requestUpdate();
 	}, me = (e) => {
 		n.mapTool = e, e && (n.mapLastTool = e), n.requestUpdate();
 	};
 	if (j && M && (j.series && ue.includes(We(M, j.series)) || le.includes(M.index))) return P(), Mt(e, t);
 	let he = n.leaflet ??= new gt(n);
 	he.sync(e, {
-		unit: d,
+		unit: f,
 		active: O,
 		hidden: ue,
 		hiddenLayers: le,
@@ -21611,31 +21617,31 @@ function Mt(e, t) {
 	}, De = (e) => {
 		Ce(!0), me(e);
 	}, Oe = () => {
-		if (x.length === 0 || !F) return s;
-		let e = ge.length > 0 ? "lintje-map-chart__tip--first" : "", t = n.mapTool === F.tool, r = x.length > 1, i = n.mapMenuOpen, a = t ? "Stop met selecteren" : r ? "Selecteren" : F.label, o = t || !r ? F.name : "functioneel-selectie", c = m(o, f`<span class="lintje-map-chart__tool-icon">${S(o, t || !r ? F.text : "Kies")}</span>`);
-		return f`
+		if (x.length === 0 || !F) return c;
+		let e = ge.length > 0 ? "lintje-map-chart__tip--first" : "", t = n.mapTool === F.tool, r = x.length > 1, i = n.mapMenuOpen, a = t ? "Stop met selecteren" : r ? "Selecteren" : F.label, o = t || !r ? F.name : "functioneel-selectie", s = h(o, p`<span class="lintje-map-chart__tool-icon">${S(o, t || !r ? F.text : "Kies")}</span>`);
+		return p`
       <lintje-tooltip class="lintje-map-chart__tip ${e}" text=${a} placement="left" no-describe>
         <button type="button"
                 class="lintje-map-chart__zoom-button lintje-map-chart__tool ${r ? "lintje-map-chart__tool--menu" : ""} ${t ? "is-active" : ""}"
                 aria-label=${a} aria-pressed=${t}
-                aria-haspopup=${r && !t ? "menu" : s} aria-expanded=${r && !t ? String(i) : s}
-                aria-controls=${r && !t ? ye : s}
+                aria-haspopup=${r && !t ? "menu" : c} aria-expanded=${r && !t ? String(i) : c}
+                aria-controls=${r && !t ? ye : c}
                 @click=${() => {
 			t ? me(null) : r ? xe(!i, "checked") : me(F.tool);
 		}}
                 @keydown=${(e) => {
 			!r || t || e.key !== "ArrowDown" && e.key !== "ArrowUp" || (e.preventDefault(), xe(!0, e.key === "ArrowDown" ? "first" : "last"));
-		}}>${c}</button>
+		}}>${s}</button>
       </lintje-tooltip>
-      ${r ? ke(i) : s}
+      ${r ? ke(i) : c}
     `;
-	}, ke = (e) => f`
+	}, ke = (e) => p`
       <lintje-popover id=${ye} panel-role="menu" label="Andere vorm" placement="left-start" ?open=${e}
                       @lintje-close=${(e) => {
 		e.stopPropagation(), Ce(e.detail?.reason === "escape");
 	}}>
-        ${e ? f`<div class="lintje-menu lintje-map-chart__menu" ${p(Ee)} @keydown=${Te}>
-            ${I.map((e) => f`
+        ${e ? p`<div class="lintje-menu lintje-map-chart__menu" ${m(Ee)} @keydown=${Te}>
+            ${I.map((e) => p`
               <button type="button" class="lintje-menu__row focus-inset" role="menuitemradio" tabindex="-1"
                       aria-checked=${String(e.checked)}
                       @click=${() => De(e.value)}>
@@ -21647,13 +21653,13 @@ function Mt(e, t) {
                 ${e.checked ? v("functioneel-vinkje", {
 		size: 16,
 		className: "lintje-menu__check"
-	}) : s}
+	}) : c}
               </button>`)}
-          </div>` : s}
+          </div>` : c}
       </lintje-popover>
   `, Ae = () => {
 		let e = i ? "lintje-map-chart__selection--below" : "";
-		return j ? f`
+		return j ? p`
         <div class="lintje-map-chart__selection ${e}">
           <span class="lintje-map-chart__selection-title">Geselecteerd</span>
           <!-- The way out of a selection that is always there, for mouse and
@@ -21662,37 +21668,37 @@ function Mt(e, t) {
                   aria-label="Selectie opheffen"
                   @click=${() => P()}>${v("functioneel-kruis", { size: 14 })}</button>
           <b>${j.label}</b>
-          ${N(j) ? f`<span class="lintje-map-chart__selection-series">
+          ${N(j) ? p`<span class="lintje-map-chart__selection-series">
                 <svg class="lintje-map-chart__series-swatch" viewBox="0 0 14 14" aria-hidden="true" focusable="false">
                   <path d=${C(j.series, 5.5, 7, 7)} fill=${ce(j.series) ?? "currentColor"} />
                 </svg>${N(j)}
-              </span>` : s}
+              </span>` : c}
           <span class="lintje-map-chart__selection-value">
-            ${j.value == null ? "geen gegevens" : R(g(j.value), M?.unit ?? d)}${j.detail ? ` · ${j.detail}` : ""}
+            ${j.value == null ? "geen gegevens" : R(s(j.value), M?.unit ?? f)}${j.detail ? ` · ${j.detail}` : ""}
           </span>
           <!-- Only when the mark carries a URL the host minted: without one
                the link had nowhere to go and did nothing. -->
-          ${a && j.href ? f`
+          ${a && j.href ? p`
             <button type="button" class="lintje-map-chart__set-scope"
                     @click=${() => a(j)}>
               ${re} ${v("functioneel-locatiemarker", { size: 14 })}
             </button>
-          ` : s}
+          ` : c}
         </div>
-      ` : T ? f`
+      ` : T ? p`
         <div class="lintje-map-chart__selection ${e}">
           <span class="lintje-map-chart__selection-title">Geselecteerd</span>
           <button type="button" class="lintje-map-chart__selection-close"
                   aria-label="Selectie opheffen"
                   @click=${() => de()}>${v("functioneel-kruis", { size: 14 })}</button>
-          <b>${D.length === 0 ? "Niets" : D.length === 1 ? "1 op de kaart" : `${g(D.length)} op de kaart`}</b>
+          <b>${D.length === 0 ? "Niets" : D.length === 1 ? "1 op de kaart" : `${s(D.length)} op de kaart`}</b>
           <span class="lintje-map-chart__selection-value">${jt(T)}</span>
         </div>
-      ` : s;
+      ` : c;
 	}, je = n.mapHint ? n.mapHint : n.mapTool ? Tt[n.mapTool][i ? "short" : "full"] : null;
-	return f`
+	return p`
     <div class="lintje-map-chart ${i ? "lintje-map-chart--mobile" : ""} ${ne ? "lintje-map-chart--basemap" : ""}"
-         ${p(n.attach)} ?data-in-view=${n.inView}
+         ${m(n.attach)} ?data-in-view=${n.inView}
          @keydown=${(e) => {
 		if (e.key === "Escape") {
 			if (n.mapTool) n.mapTool = null;
@@ -21714,7 +21720,7 @@ function Mt(e, t) {
 		onOpen: (e) => {
 			n.mapLegendOpen = e, n.requestUpdate();
 		}
-	}) : s}
+	}) : c}
       <div class="lintje-map-chart__area" ${o({ height: `${oe}px` })} data-tooltip-anchor
            @wheel=${{
 		handleEvent: (e) => {
@@ -21726,27 +21732,27 @@ function Mt(e, t) {
 		passive: !1
 	}}>
         <p class="visually-hidden">${r}</p>
-        <div class="lintje-map-chart__leaflet" ${p(he.attach)}></div>
+        <div class="lintje-map-chart__leaflet" ${m(he.attach)}></div>
         ${E(n)}
 
         <!-- Layer switcher top left. -->
-        ${y && y.length > 1 ? f`
+        ${y && y.length > 1 ? p`
           <div class="lintje-map-chart__layers" role="group" aria-label="Kaartlaag">
-            ${y.map((e) => f`
+            ${y.map((e) => p`
               <button type="button"
                       class="lintje-map-chart__layer ${e.value === ee ? "is-active" : ""}"
                       aria-pressed=${e.value === ee}
-                      @click=${() => l?.(e.value)}>${e.label}</button>
+                      @click=${() => u?.(e.value)}>${e.label}</button>
             `)}
           </div>
-        ` : s}
+        ` : c}
 
-        ${je ? f`<p class="lintje-map-chart__hint" role="status">${je}</p>` : s}
+        ${je ? p`<p class="lintje-map-chart__hint" role="status">${je}</p>` : c}
 
         <!-- Zoom, reset and the drawing tools top right, those the host keeps. -->
-        ${ge.length + x.length > 0 ? f`
+        ${ge.length + x.length > 0 ? p`
         <div class="lintje-map-chart__zoom">
-          ${ge.map((e) => f`
+          ${ge.map((e) => p`
             <lintje-tooltip class="lintje-map-chart__tip" text=${e.label} placement="left" no-describe>
               <button type="button" class="lintje-map-chart__zoom-button" aria-label=${e.label}
                       @click=${() => ve(e.action)}>${S(e.name, e.text, 16, "flip" in e ? e.flip : void 0)}</button>
@@ -21754,18 +21760,18 @@ function Mt(e, t) {
           `)}
           ${Oe()}
         </div>
-        ` : s}
+        ` : c}
 
         <!-- The scale bottom right: a round distance, and a bracket as long as it on the map. -->
-        ${_e ? f`<div class="lintje-map-chart__scale-bar" aria-hidden="true">
+        ${_e ? p`<div class="lintje-map-chart__scale-bar" aria-hidden="true">
           <span>${At(_e.metres)}</span>
           <span class="lintje-map-chart__scale-line" ${o({ width: `${_e.width}px` })}></span>
-        </div>` : s}
+        </div>` : c}
 
         <!-- What was chosen, bottom left; on a phone under the map. -->
-        ${i ? s : Ae()}
+        ${i ? c : Ae()}
       </div>
-      ${i ? Ae() : s}
+      ${i ? Ae() : c}
     </div>
   `;
 }
@@ -21781,7 +21787,7 @@ var It = u(Nt), Lt = [
 	u(ee),
 	u(Ft(Pt)),
 	It,
-	d
+	f
 ], Rt = class extends ie {
 	static {
 		this.styles = [
@@ -21807,7 +21813,7 @@ var It = u(Nt), Lt = [
 		return this.data ?? void 0;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#i = c((e) => {
+		super.connectedCallback(), this.#i = a((e) => {
 			this.#e.leaflet?.print(e), this.isUpdatePending && this.performUpdate();
 		});
 	}
@@ -21842,22 +21848,22 @@ var It = u(Nt), Lt = [
 	}
 	render() {
 		let e = this.data;
-		if (!e) return s;
+		if (!e) return c;
 		let t = (e.state ?? "ready") === "ready", n = this.#n.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle, r = e.height ?? (this.#n.matches ? wt.mobile : wt.desktop);
-		return f`<lintje-tile
-      id=${this.id ? `${this.id}-tile` : s}
-      span=${e.span ?? s}
-      heading=${e.title ?? s}
-      icon=${e.icon ?? s}
-      subtitle=${n ?? s}
-      intro=${e.intro ?? s}
-      footnote=${e.footnote ?? s}
+		return p`<lintje-tile
+      id=${this.id ? `${this.id}-tile` : c}
+      span=${e.span ?? c}
+      heading=${e.title ?? c}
+      icon=${e.icon ?? c}
+      subtitle=${n ?? c}
+      intro=${e.intro ?? c}
+      footnote=${e.footnote ?? c}
       ?legend-below=${!!e.legendBelow}
       ?expandable=${!!e.expandable && t}
       ?download=${!!e.download && t}
       state=${e.state ?? "ready"}
-      message=${e.message ?? s}
-      last-known=${e.lastKnown ?? s}
+      message=${e.message ?? c}
+      last-known=${e.lastKnown ?? c}
       content-height=${`${r}px`}
       @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
@@ -21866,14 +21872,14 @@ var It = u(Nt), Lt = [
 			e.stopPropagation(), this.csv();
 		}}
     >
-      ${e.notice ? f`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : s}
+      ${e.notice ? p`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : c}
       ${this.content(`${r}px`)}
     </lintje-tile>
 
     ${this.renderExpandModal(this.expanded && this.#t ? Mt({
 			...e,
 			layer: this.layer
-		}, this.mapOptions(this.#t, !0)) : s, {
+		}, this.mapOptions(this.#t, !0)) : c, {
 			heading: e.title,
 			subtitle: n,
 			footnote: e.footnote,
@@ -21884,13 +21890,13 @@ var It = u(Nt), Lt = [
 	content(e) {
 		let t = this.data;
 		switch (t.state ?? "ready") {
-			case "loading": return f`<div slot="loading">${re({
+			case "loading": return p`<div slot="loading">${re({
 				kind: "map",
 				height: e,
 				status: !1
 			})}</div>`;
 			case "empty":
-			case "error": return s;
+			case "error": return c;
 			default: return Mt({
 				...t,
 				layer: this.layer