lintje 0.3.0 → 0.4.0

package/dist-elements/tag/data-table.js

@@ -1,13 +1,13 @@
-import { F as e, Kt as t, O as n, Q as r, Yt as i, Z as a, Zt as o, at as s, c, en as l, et as u, lt as d, nn as f, ot as p, p as m, rt as h, s as g, st as _, ut as v } from "../chunks/base-CbmWxUig.js";
-import { n as y, r as b } from "../chunks/focus-trap-BwOxE5BX.js";
+import { F as e, Kt as t, O as n, Q as r, Yt as i, Z as a, Zt as o, at as s, d as c, en as l, et as u, f as d, lt as f, nn as p, o as m, ot as h, rt as g, st as _, ut as v } from "../chunks/base-DRGvkF-r.js";
+import { n as y, r as b } from "../chunks/focus-trap-Dv8zu64A.js";
 import "./menu-button.js";
-import { t as x } from "../chunks/input-CRW_exv_.js";
+import { t as x } from "../chunks/input-lQTmOMOz.js";
 import { t as S } from "./announcement.js";
 import "./drawer.js";
 import "./empty-state.js";
 import "./description-list.js";
-import { d as C } from "../chunks/date-format-mHtZyBys.js";
-import { a as w, c as T, r as ee, t as E } from "../chunks/download-Ct9q2anY.js";
+import { d as C } from "../chunks/date-format-DxP9yfDp.js";
+import { a as w, c as T, r as ee, t as E } from "../chunks/download-C68kcwPj.js";
 import "./pagination.js";
 import "./sortable-list.js";
 //#region src/components/tables/data-table/data-table.css?inline
@@ -143,10 +143,10 @@ var ne = 0, re = class {
 	}
 	content(e, t, n, r, i, a) {
 		let o = this.mode(e, n);
-		if (o.kind === "busy") return f`<span class="lintje-data-table__busy"
+		if (o.kind === "busy") return p`<span class="lintje-data-table__busy"
         ><lintje-spinner size="16"></lintje-spinner><span>${o.value}</span></span
       >`;
-		if (o.kind === "rest") return f`${r}${v("functioneel-bewerken", {
+		if (o.kind === "rest") return p`${r}${v("functioneel-bewerken", {
 			size: 14,
 			className: "lintje-data-table__edit-icon"
 		})}`;
@@ -159,7 +159,7 @@ var ne = 0, re = class {
 			"lintje-data-table__editor": !0,
 			"focus-inset": !0,
 			"is-error": !!o.error
-		}), p = t.editor, m = p?.kind === "select" ? f`<select
+		}), f = t.editor, m = f?.kind === "select" ? p`<select
             class=${d}
             aria-label=${i}
             aria-invalid=${o.error ? "true" : l}
@@ -167,14 +167,14 @@ var ne = 0, re = class {
             @keydown=${c}
             @blur=${u}
           >
-            ${(p.options ?? []).map((e) => f`<option value=${e.value} ?selected=${e.value === o.value}>
+            ${(f.options ?? []).map((e) => p`<option value=${e.value} ?selected=${e.value === o.value}>
                   ${e.label ?? e.value}
                 </option>`)}
-          </select>` : f`<input
+          </select>` : p`<input
             type="text"
             class=${d}
-            inputmode=${p?.kind === "number" ? "decimal" : l}
-            placeholder=${p?.kind === "date" ? "dd-mm-jjjj" : l}
+            inputmode=${f?.kind === "number" ? "decimal" : l}
+            placeholder=${f?.kind === "date" ? "dd-mm-jjjj" : l}
             aria-label=${i}
             aria-invalid=${o.error ? "true" : l}
             aria-describedby=${s ?? l}
@@ -182,7 +182,7 @@ var ne = 0, re = class {
             @keydown=${c}
             @blur=${u}
           />`;
-		return f`${m}${o.error ? f`<span id=${s ?? l} class="lintje-data-table__edit-error">${o.error}</span>` : l}`;
+		return p`${m}${o.error ? p`<span id=${s ?? l} class="lintje-data-table__edit-error">${o.error}</span>` : l}`;
 	}
 	cellClasses(e, t) {
 		let n = this.mode(e, t);
@@ -196,7 +196,7 @@ var ne = 0, re = class {
 		t.target === t.currentTarget && (t.key === "Enter" || t.key === "F2") && (t.preventDefault(), t.stopPropagation(), this.open(e, t.currentTarget));
 	}
 	renderStatus() {
-		return f`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
+		return p`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
       ><span class="visually-hidden" role="status">${this.message}</span>`;
 	}
 };
@@ -214,7 +214,7 @@ function ae(e, t) {
 	return [...e, ...t.filter((e) => !n.has(e))];
 }
 function A(e, t, n) {
-	return f`<lintje-menu-button
+	return p`<lintje-menu-button
     icon
     variant="tertiary"
     placement="bottom-end"
@@ -226,13 +226,13 @@ function A(e, t, n) {
   ></lintje-menu-button>`;
 }
 function j(e, t, n, r, i) {
-	let a = n ? e.length > 0 ? f`<lintje-menu-button
+	let a = n ? e.length > 0 ? p`<lintje-menu-button
           label="Acties"
           .items=${e}
           @lintje-action=${(e) => {
 		e.stopPropagation(), r(e.detail);
 	}}
-        ></lintje-menu-button>` : l : e.map((e) => f`<lintje-button
+        ></lintje-menu-button>` : l : e.map((e) => p`<lintje-button
             variant=${e.danger ? "danger-secondary" : "secondary"}
             size="compact"
             icon=${e.icon ?? l}
@@ -240,7 +240,7 @@ function j(e, t, n, r, i) {
             @click=${() => r(e.value)}
             >${e.label}</lintje-button
           >`);
-	return f`<div
+	return p`<div
     class="lintje-data-table__selection ${n ? "lintje-data-table__selection--mobile" : ""}"
     role="toolbar"
     aria-label="Acties op de selectie"
@@ -307,7 +307,7 @@ function I(e, t) {
 }
 function le(e, t, n, r) {
 	let i = M(t);
-	return f`<button
+	return p`<button
       type="button"
       class=${_({
 		"lintje-data-table__funnel": !0,
@@ -323,7 +323,7 @@ function le(e, t, n, r) {
     </button>`;
 }
 function L(e, t, n) {
-	if (e.filter?.kind === "text") return f`<input
+	if (e.filter?.kind === "text") return p`<input
       type="search"
       class="lintje-data-table__filter-search"
       aria-label=${`Zoek in ${e.header.toLocaleLowerCase("nl")}`}
@@ -331,8 +331,8 @@ function L(e, t, n) {
       @input=${(e) => n(e.target.value)}
     />`;
 	let r = new Set(Array.isArray(t) ? t : []);
-	return f`<div class="lintje-data-table__filter-options">
-    ${(e.filter?.options ?? []).map((e) => f`<label class="lintje-choice lintje-data-table__filter-option">
+	return p`<div class="lintje-data-table__filter-options">
+    ${(e.filter?.options ?? []).map((e) => p`<label class="lintje-choice lintje-data-table__filter-option">
         <input
           type="checkbox"
           class="lintje-choice__input"
@@ -346,13 +346,13 @@ function L(e, t, n) {
           ><span class="lintje-choice__mark">✓</span></span
         >
         <span class="lintje-choice__label">${e.label ?? e.value}</span>
-        ${e.count == null ? l : f`<span class="lintje-data-table__filter-count">${e.count}</span>`}
+        ${e.count == null ? l : p`<span class="lintje-data-table__filter-count">${e.count}</span>`}
       </label>`)}
   </div>`;
 }
 function ue(e) {
 	let { column: t } = e, n = I(e.anchor, e.onLeave);
-	return f`<lintje-popover
+	return p`<lintje-popover
     open
     panel-role="dialog"
     label=${P(t, null)}
@@ -374,14 +374,14 @@ function ue(e) {
   </lintje-popover>`;
 }
 function R(e) {
-	return f`<lintje-drawer
+	return p`<lintje-drawer
     open
     heading="Filters"
     @lintje-close=${(t) => {
 		t.stopPropagation(), e.onClose();
 	}}
   >
-    ${e.columns.map((t) => f`<section class="lintje-data-table__filter-section">
+    ${e.columns.map((t) => p`<section class="lintje-data-table__filter-section">
         <div class="lintje-data-table__filter-name">${t.header}</div>
         ${L(t, e.draft[t.key], (n) => e.onDraft(t.key, n))}
       </section>`)}
@@ -391,11 +391,11 @@ function R(e) {
 }
 function z(e) {
 	let t = e.columns.filter((t) => M(e.values[t.key])), n = t.length === 0 && !e.chooser;
-	return f`<div
+	return p`<div
     class="lintje-data-table__toolbar ${n ? "lintje-data-table__toolbar--quiet" : ""}"
   >
     <div class="lintje-data-table__chips">
-      ${e.columns.length > 0 ? f`<lintje-button
+      ${e.columns.length > 0 ? p`<lintje-button
               class="lintje-data-table__sheet-button"
               variant="secondary"
               size="compact"
@@ -406,7 +406,7 @@ function z(e) {
       ${e.sortMenu ?? l}
       ${t.map((t) => {
 		let n = e.values[t.key];
-		return f`<span class="lintje-data-table__chip"
+		return p`<span class="lintje-data-table__chip"
           >${se(t, n)}<button
             type="button"
             class="lintje-data-table__chip-clear"
@@ -417,20 +417,20 @@ function z(e) {
           </button></span
         >`;
 	})}
-      ${t.length > 1 ? f`<button
+      ${t.length > 1 ? p`<button
               type="button"
               class="lintje-button lintje-button--tertiary lintje-button--compact lintje-data-table__clear-all"
               @click=${(t) => e.onClearAll(t.currentTarget)}
             >
               <span class="lintje-button__label">Filters wissen</span>
             </button>` : l}
-      ${e.count ? f`<span class="lintje-data-table__filter-total">${e.count}</span>` : l}
+      ${e.count ? p`<span class="lintje-data-table__filter-total">${e.count}</span>` : l}
     </div>
     ${e.chooser ?? l}
   </div>`;
 }
 function B(e, t) {
-	return f`<lintje-tooltip text="Kolommen kiezen" no-describe
+	return p`<lintje-tooltip text="Kolommen kiezen" no-describe
     ><button
       type="button"
       class="lintje-data-table__chooser-button"
@@ -445,7 +445,7 @@ function B(e, t) {
 }
 function V(e) {
 	let t = I(e.anchor, e.onLeave);
-	return f`<lintje-popover
+	return p`<lintje-popover
     open
     panel-role="dialog"
     label="Kolommen kiezen"
@@ -515,7 +515,7 @@ function G(e, t) {
 	if (t == null) return null;
 	if (e.format === "label") return e.labels?.[String(t)]?.label ?? String(t);
 	let n;
-	return n = typeof t == "string" || e.format === "text" ? String(t) : e.format === "change" || e.format === "change-compact" ? `${t > 0 ? "▲" : t < 0 ? "▼" : "●"} ${t > 0 ? "+" : ""}${g(t, e.decimals ?? 0)}%` : e.format === "percent" ? c(t, e.decimals ?? 0) : e.format === "decimal" ? g(t, e.decimals ?? 1) : g(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
+	return n = typeof t == "string" || e.format === "text" ? String(t) : e.format === "change" || e.format === "change-compact" ? `${t > 0 ? "▲" : t < 0 ? "▼" : "●"} ${t > 0 ? "+" : ""}${c(t, e.decimals ?? 0)}%` : e.format === "percent" ? d(t, e.decimals ?? 0) : e.format === "decimal" ? c(t, e.decimals ?? 1) : c(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
 }
 function K(e, t) {
 	let n = e.threshold;
@@ -538,7 +538,7 @@ function he(e, t) {
 	return me.has(n) ? n : null;
 }
 function J(e) {
-	return f`<span class="lintje-data-table__sort-icon" aria-hidden="true"
+	return p`<span class="lintje-data-table__sort-icon" aria-hidden="true"
     ><span class=${_({
 		"lintje-data-table__sort-up": !0,
 		"is-on": e === "asc",
@@ -564,7 +564,7 @@ function ge(e) {
 		unit: e.unit
 	};
 }
-var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
+var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
   ><span class="visually-hidden">geen gegevens</span>`, Q = class {
 	#e;
 	#t;
@@ -598,10 +598,10 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	static {
 		this.styles = [
-			d,
+			f,
 			s,
 			e,
-			o(h),
+			o(g),
 			o(S),
 			o(n),
 			o(x),
@@ -954,7 +954,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		if (this.bare) return this.table(this.#t);
 		if (this.plain) return this.content();
 		let t = (e.state ?? "ready") === "ready", n = this.#e.matches && e.mobileSubtitle ? e.mobileSubtitle : e.subtitle;
-		return f`<lintje-tile
+		return p`<lintje-tile
       class="lintje-data-table__tile"
       breakable
       id=${this.id ? `${this.id}-tile` : l}
@@ -976,7 +976,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			e.stopPropagation(), this.csv();
 		}}
     >
-      ${e.notice ? f`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : l}
+      ${e.notice ? p`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : l}
       ${this.content(!0)}
     </lintje-tile>
 
@@ -1000,12 +1000,12 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	content(e = !1) {
 		let t = this.data;
 		switch (t.state ?? "ready") {
-			case "loading": return e ? f`<div slot="loading">${w({
+			case "loading": return e ? p`<div slot="loading">${w({
 				kind: "table",
 				status: !1
 			})}</div>` : w({ kind: "table" });
-			case "empty": return e ? l : f`<lintje-empty-state compact status text=${t.message ?? l}></lintje-empty-state>`;
-			case "error": return e ? l : f`<lintje-announcement
+			case "empty": return e ? l : p`<lintje-empty-state compact status text=${t.message ?? l}></lintje-empty-state>`;
+			case "error": return e ? l : p`<lintje-announcement
               compact
               .data=${{
 				kind: "warning",
@@ -1017,14 +1017,14 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		}
 	}
 	table(e) {
-		let t = this.data, n = this.sortedRows, r = this.#e.matches, i = this.grouped, a = i ? this.groupsOf(n) : [], o = i ? a.length : n.length, s = i ? this.groupsPerPage : t.pageSize ?? 25, c = i ? this.groupsPerPage : H, u = Math.ceil(o / s), d = Math.ceil(o / c), p = a.slice(this.page * s, (this.page + 1) * s), h = a.slice(this.mobilePage * c, (this.mobilePage + 1) * c), g = new Set(this.collapsedGroups), v = i ? p.filter((e) => !g.has(e.key)).flatMap((e) => e.rows) : n.slice(this.page * s, (this.page + 1) * s), y = this.mobilePage * H, b = i ? [] : n.slice(y, y + H), x = !i && (r ? d : u) > 1, S = i ? {
+		let t = this.data, n = this.sortedRows, r = this.#e.matches, i = this.grouped, a = i ? this.groupsOf(n) : [], o = i ? a.length : n.length, s = i ? this.groupsPerPage : t.pageSize ?? 25, c = i ? this.groupsPerPage : H, u = Math.ceil(o / s), d = Math.ceil(o / c), f = a.slice(this.page * s, (this.page + 1) * s), h = a.slice(this.mobilePage * c, (this.mobilePage + 1) * c), g = new Set(this.collapsedGroups), v = i ? f.filter((e) => !g.has(e.key)).flatMap((e) => e.rows) : n.slice(this.page * s, (this.page + 1) * s), y = this.mobilePage * H, b = i ? [] : n.slice(y, y + H), x = !i && (r ? d : u) > 1, S = i ? {
 			many: "groepen",
 			one: "groep"
 		} : {
 			many: "rijen",
 			one: "rij"
 		}, C = e === this.#n === this.expanded, w = e === this.#n ? "modal" : "tile", T = e.start || e.end;
-		return f`<div class=${_({
+		return p`<div class=${_({
 			"lintje-data-table": !0,
 			"is-phone": r
 		})}>
@@ -1044,7 +1044,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
           role=${T ? "region" : l}
           aria-label=${T ? this.data?.caption ?? l : l}
         >
-          ${this.fullTable(v, u, s, e, i ? p : null)}
+          ${this.fullTable(v, u, s, e, i ? f : null)}
         </div>
       </div>
 
@@ -1066,7 +1066,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		return this.filterColumns.some((e) => M(this.filterValues[e.key])) && e != null ? `${this.rows.length} van ${Y(e)}` : "";
 	}
 	toolbar(e, t) {
-		let n = this.sortMenu(), r = this.groupToggle(), i = r === l ? void 0 : f`<div class="lintje-data-table__tools">${r}</div>`;
+		let n = this.sortMenu(), r = this.groupToggle(), i = r === l ? void 0 : p`<div class="lintje-data-table__tools">${r}</div>`;
 		return this.filterColumns.length === 0 && n === l && !i ? l : z({
 			columns: this.filterColumns,
 			values: this.filterValues,
@@ -1084,7 +1084,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	groupToggle() {
 		if (!this.grouped) return l;
 		let e = this.groupsOf(this.rows).map((e) => e.key), t = new Set(this.collapsedGroups), n = e.some((e) => !t.has(e));
-		return f`<button
+		return p`<button
       type="button"
       class="lintje-button lintje-button--tertiary lintje-button--compact lintje-data-table__group-all"
       @click=${() => {
@@ -1119,7 +1119,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 				checked: r.direction === "desc"
 			}
 		];
-		return f`<lintje-menu-button
+		return p`<lintje-menu-button
       class="lintje-data-table__sort-menu"
       label="Sorteren"
       .items=${i}
@@ -1200,28 +1200,28 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		}) : l;
 	}
 	fullTable(e, t, n, r, i) {
-		let a = this.data, o = this.shown, s = !!a.selectable, c = this.activeSort, u = a.rowActions?.length ? a.rowActions : null, d = this.detailColumns.length > 0, p = r === this.#n ? "modal" : "tile", m = i ? this.groupsOf(this.sortedRows).slice(0, this.page * n).reduce((e, t) => e + t.rows.length, 0) : this.page * n, h = {
+		let a = this.data, o = this.shown, s = !!a.selectable, c = this.activeSort, u = a.rowActions?.length ? a.rowActions : null, d = this.detailColumns.length > 0, f = r === this.#n ? "modal" : "tile", m = i ? this.groupsOf(this.sortedRows).slice(0, this.page * n).reduce((e, t) => e + t.rows.length, 0) : this.page * n, h = {
 			ids: e.map((e) => this.rowKey(e)),
 			columns: o,
 			offset: m,
-			copy: p
-		}, g = o.length + +!!s + +!!d + +!!this.actionColumn, _ = (e, t, n) => e.map((e, r) => this.fullRow(e, t + r, h, p, n));
-		return f`<table class="lintje-data-table__full">
+			copy: f
+		}, g = o.length + +!!s + +!!d + +!!this.actionColumn, _ = (e, t, n) => e.map((e, r) => this.fullRow(e, t + r, h, f, n));
+		return p`<table class="lintje-data-table__full">
       <caption class="visually-hidden">${a.caption}</caption>
       <thead>
         <tr>
-          ${s ? f`<th
+          ${s ? p`<th
                 scope="col"
                 class="lintje-data-table__header-cell lintje-data-table__check-cell"
               >
                 ${this.headerCheck()}
               </th>` : l}
-          ${d ? f`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__detail-cell">
+          ${d ? p`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__detail-cell">
                   <span class="visually-hidden">Details</span>
                 </th>` : l}
           ${o.map((e) => this.headerCell(e, c, r))}
-          ${this.actionColumn ? f`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
-                  ${u ? f`<span class="visually-hidden">Acties</span>` : l}
+          ${this.actionColumn ? p`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
+                  ${u ? p`<span class="visually-hidden">Acties</span>` : l}
                   ${a.columnChooser ? B(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
 			kind: "columns",
 			edges: r
@@ -1233,16 +1233,16 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			let e = 0;
 			return i.map((t) => {
 				let n = !this.collapsedGroups.includes(t.key), r = e;
-				return e += n ? t.rows.length : 0, f`<tbody class="lintje-data-table__group">
+				return e += n ? t.rows.length : 0, p`<tbody class="lintje-data-table__group">
                   ${this.groupRow(t, n)}
                   ${n ? _(t.rows, r, !0) : l}
                   ${n ? this.subtotalRow(t, o) : l}
                 </tbody>`;
 			});
-		})() : f`<tbody>
+		})() : p`<tbody>
               ${_(e, 0, !1)}
               <!-- A short last page keeps the height of a full one, so the page below doesn't jump. -->
-              ${t > 1 ? Array.from({ length: n - e.length }, () => f`<tr
+              ${t > 1 ? Array.from({ length: n - e.length }, () => p`<tr
                         class="lintje-data-table__row lintje-data-table__row--filler"
                         aria-hidden="true"
                       >
@@ -1255,13 +1255,13 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	sizerRow(e) {
 		let t = this.data, n = this.widestRow(e);
-		return f`<tbody class="lintje-data-table__sizer" aria-hidden="true">
+		return p`<tbody class="lintje-data-table__sizer" aria-hidden="true">
       <tr class=${_({ "lintje-data-table__row--in-group": this.grouped })}>
-        ${t.selectable ? f`<td class="lintje-data-table__cell lintje-data-table__check-cell"></td>` : l}
-        ${this.detailColumns.length > 0 ? f`<td class="lintje-data-table__cell lintje-data-table__detail-cell"></td>` : l}
+        ${t.selectable ? p`<td class="lintje-data-table__cell lintje-data-table__check-cell"></td>` : l}
+        ${this.detailColumns.length > 0 ? p`<td class="lintje-data-table__cell lintje-data-table__detail-cell"></td>` : l}
         ${e.map((e, t) => {
 			let r = n[e.key] ?? null;
-			return f`<td
+			return p`<td
             class=${_({
 				"lintje-data-table__cell": !0,
 				"lintje-data-table__name": t === 0,
@@ -1274,7 +1274,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
             </div>
           </td>`;
 		})}
-        ${this.actionColumn ? f`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
+        ${this.actionColumn ? p`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
       </tr>
     </tbody>`;
 	}
@@ -1296,7 +1296,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		}, r;
 	}
 	headerCell(e, t, n) {
-		let r = t.key === e.key, i = this.alignsRight(e), a = !!e.filter && M(this.filterValues[e.key]), o = e.sortable === !1 ? e.header : f`<button
+		let r = t.key === e.key, i = this.alignsRight(e), a = !!e.filter && M(this.filterValues[e.key]), o = e.sortable === !1 ? e.header : p`<button
             type="button"
             class="lintje-data-table__sort-button"
             @click=${() => this.toggleSort(e)}
@@ -1304,7 +1304,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
             <span class="lintje-data-table__sort-label">${e.header}</span>
             ${J(r ? t.direction : null)}
           </button>`;
-		return f`<th
+		return p`<th
       scope="col"
       class=${_({
 			"lintje-data-table__header-cell": !0,
@@ -1316,7 +1316,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		})}
       aria-sort=${r ? t.direction === "asc" ? "ascending" : "descending" : "none"}
     >
-      ${e.filter ? f`<span class="lintje-data-table__header-inner"
+      ${e.filter ? p`<span class="lintje-data-table__header-inner"
               >${o}${le(e, this.filterValues[e.key], this.panel?.kind === "filter" && this.panel.column === e.key, (t) => this.panel?.kind === "filter" && this.panel.column === e.key ? this.closePanel() : this.openPanel({
 			kind: "filter",
 			column: e.key,
@@ -1332,8 +1332,8 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		return (e.align ?? (W(e, this.rows) ? "right" : "left")) === "right";
 	}
 	fullRow(e, t, n, r, i) {
-		let a = this.data, o = this.shown, s = !!a.selectable, c = !!a.clickable && !s, u = a.rowActions?.length ? a.rowActions : null, d = this.detailColumns, p = this.rowKey(e), m = p === a.selectedId, h = this.checkedIds.includes(p), g = d.length > 0 && this.openRows.includes(p), v = `lintje-data-table-${r}-row-${p}`, y = o.length + +!!s + +(d.length > 0) + +!!this.actionColumn;
-		return f`<tr
+		let a = this.data, o = this.shown, s = !!a.selectable, c = !!a.clickable && !s, u = a.rowActions?.length ? a.rowActions : null, d = this.detailColumns, f = this.rowKey(e), m = f === a.selectedId, h = this.checkedIds.includes(f), g = d.length > 0 && this.openRows.includes(f), v = `lintje-data-table-${r}-row-${f}`, y = o.length + +!!s + +(d.length > 0) + +!!this.actionColumn;
+		return p`<tr
         class=${_({
 			"lintje-data-table__row": !0,
 			"lintje-data-table__row--in-group": i,
@@ -1347,10 +1347,10 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
         @click=${c ? () => this.emit("lintje-row-click", this.rowDetail(e)) : l}
         @keydown=${c ? (t) => this.rowKeydown(t, e) : l}
       >
-        ${s ? f`<td class="lintje-data-table__cell lintje-data-table__check-cell">
-              ${this.rowCheck(e, p, h)}
+        ${s ? p`<td class="lintje-data-table__cell lintje-data-table__check-cell">
+              ${this.rowCheck(e, f, h)}
             </td>` : l}
-        ${d.length > 0 ? f`<td
+        ${d.length > 0 ? p`<td
                 class="lintje-data-table__cell lintje-data-table__detail-cell"
                 @click=${(e) => e.stopPropagation()}
                 @keydown=${(e) => e.stopPropagation()}
@@ -1359,7 +1359,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
               </td>` : l}
         ${o.map((r, i) => {
 			let a = r.truncate === !0, o = a ? this.truncatedCell(r, e[r.key]) : this.cell(r, e[r.key]), s = this.alignsRight(r);
-			return r.editor ? this.editableCell(e, t, r, i === 0, s, o, n) : i === 0 ? f`<th
+			return r.editor ? this.editableCell(e, t, r, i === 0, s, o, n) : i === 0 ? p`<th
                 scope="row"
                 class=${_({
 				"lintje-data-table__cell": !0,
@@ -1368,7 +1368,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			})}
               >
                 ${this.opener(e, o)}
-              </th>` : f`<td
+              </th>` : p`<td
                 class=${_({
 				"lintje-data-table__cell": !0,
 				"lintje-data-table__cell--align-right": s,
@@ -1378,18 +1378,18 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
                 ${o}
               </td>`;
 		})}
-        ${u ? f`<td
+        ${u ? p`<td
                 class="lintje-data-table__cell lintje-data-table__action-cell"
                 @click=${(e) => e.stopPropagation()}
                 @keydown=${(e) => e.stopPropagation()}
               >
                 ${A(u, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
-			id: p,
+			id: f,
 			action: e
 		}))}
-              </td>` : this.actionColumn ? f`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
+              </td>` : this.actionColumn ? p`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
       </tr>
-      ${d.length > 0 ? f`<tr class="lintje-data-table__detail" id=${v} ?hidden=${!g}>
+      ${d.length > 0 ? p`<tr class="lintje-data-table__detail" id=${v} ?hidden=${!g}>
               <td class="lintje-data-table__detail-body" colspan=${y}>
                 ${g ? this.detailList(e, d, "grid") : l}
               </td>
@@ -1397,7 +1397,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	rowToggle(e, t, n, r) {
 		let { id: i, label: a } = this.rowDetail(e);
-		return f`<button
+		return p`<button
       type="button"
       class=${r}
       aria-label=${`Alle gegevens van ${a}`}
@@ -1413,7 +1413,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	detailList(e, t, n) {
 		let r = Math.ceil(t.length / 4);
-		return f`<lintje-description-list
+		return p`<lintje-description-list
       layout=${n}
       .columns=${Math.ceil(t.length / r)}
       .items=${t.map((t) => ({
@@ -1423,7 +1423,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
     ></lintje-description-list>`;
 	}
 	groupRow(e, t) {
-		let n = this.data, r = this.groupColumn, i = this.shown, a = +!!n.selectable + +(this.detailColumns.length > 0), o = n.groupTotals?.[e.key], s = e.rows.length, c = f`<button
+		let n = this.data, r = this.groupColumn, i = this.shown, a = +!!n.selectable + +(this.detailColumns.length > 0), o = n.groupTotals?.[e.key], s = e.rows.length, c = p`<button
       type="button"
       class="lintje-data-table__group-toggle"
       aria-expanded=${t ? "true" : "false"}
@@ -1436,11 +1436,11 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
       <span class="lintje-data-table__group-name">${this.cell(r, e.value)}</span>
       <span class="lintje-data-table__group-count">${s} ${s === 1 ? "rij" : "rijen"}</span>
     </button>`;
-		return f`<tr class="lintje-data-table__group-row">
-      ${a > 0 ? f`<td class="lintje-data-table__cell" colspan=${a}></td>` : l}
+		return p`<tr class="lintje-data-table__group-row">
+      ${a > 0 ? p`<td class="lintje-data-table__cell" colspan=${a}></td>` : l}
       <th scope="rowgroup" class="lintje-data-table__cell lintje-data-table__group-head">${c}</th>
       ${i.slice(1).map((e) => this.totalCell(e, t ? void 0 : o?.[e.key]))}
-      ${this.actionColumn ? f`<td class="lintje-data-table__cell"></td>` : l}
+      ${this.actionColumn ? p`<td class="lintje-data-table__cell"></td>` : l}
     </tr>`;
 	}
 	subtotalRow(e, t) {
@@ -1450,20 +1450,20 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		return this.sumRow("lintje-data-table__subtotal", `Subtotaal ${i}`, t, n);
 	}
 	totalsRow(e, t, n) {
-		return t ? f`<tfoot>${this.sumRow("lintje-data-table__total", n, e, t)}</tfoot>` : l;
+		return t ? p`<tfoot>${this.sumRow("lintje-data-table__total", n, e, t)}</tfoot>` : l;
 	}
 	sumRow(e, t, n, r) {
 		let i = +!!this.data.selectable + +(this.detailColumns.length > 0);
-		return f`<tr class=${e}>
-      ${i > 0 ? f`<td class="lintje-data-table__cell" colspan=${i}></td>` : l}
+		return p`<tr class=${e}>
+      ${i > 0 ? p`<td class="lintje-data-table__cell" colspan=${i}></td>` : l}
       <th scope="row" class="lintje-data-table__cell lintje-data-table__sum-label">${t}</th>
       ${n.slice(1).map((e) => this.totalCell(e, r[e.key]))}
-      ${this.actionColumn ? f`<td class="lintje-data-table__cell"></td>` : l}
+      ${this.actionColumn ? p`<td class="lintje-data-table__cell"></td>` : l}
     </tr>`;
 	}
 	totalCell(e, t) {
 		let n = t === void 0;
-		return f`<td
+		return p`<td
       class=${_({
 			"lintje-data-table__cell": !0,
 			"lintje-data-table__cell--align-right": this.alignsRight(e)
@@ -1476,7 +1476,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		let s = this.#s, c = {
 			id: this.rowKey(e),
 			column: n.key
-		}, u = e[n.key] ?? null, d = s.mode(c, u).kind, p = _({
+		}, u = e[n.key] ?? null, d = s.mode(c, u).kind, f = _({
 			"lintje-data-table__cell": !0,
 			"lintje-data-table__name": r,
 			"lintje-data-table__cell--align-right": i,
@@ -1488,9 +1488,9 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		}, g = (e) => {
 			d === "rest" && s.editable(c, n) && s.open(c, e.currentTarget);
 		}, v = (e) => e.stopPropagation(), y = d === "editor" ? -1 : 0, b = O(c);
-		return r ? f`<th
+		return r ? p`<th
           scope="row"
-          class=${p}
+          class=${f}
           tabindex=${y}
           data-cell=${b}
           aria-describedby=${d === "rest" ? s.hintId : l}
@@ -1499,8 +1499,8 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
           @click=${v}
         >
           ${m}
-        </th>` : f`<td
-          class=${p}
+        </th>` : p`<td
+          class=${f}
           tabindex=${y}
           data-cell=${b}
           aria-describedby=${d === "rest" ? s.hintId : l}
@@ -1513,9 +1513,9 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	mobileTable(e, t, n, r) {
 		let i = this.data, a = this.shown, o = !!i.selectable, s = a[0], c = this.mobileMeasure, u = this.activeSort;
-		if (!s || !c) return f`<table class="lintje-data-table__mobile"></table>`;
-		let d = i.rowActions?.length ? i.rowActions : null, p = [...a.filter((e) => e !== s && e !== c), ...this.detailColumns], m = !!d || p.length > 0, h = m ? 3 : 2, g = u.key === c.key;
-		return f`<table class="lintje-data-table__mobile">
+		if (!s || !c) return p`<table class="lintje-data-table__mobile"></table>`;
+		let d = i.rowActions?.length ? i.rowActions : null, f = [...a.filter((e) => e !== s && e !== c), ...this.detailColumns], m = !!d || f.length > 0, h = m ? 3 : 2, g = u.key === c.key;
+		return p`<table class="lintje-data-table__mobile">
       <caption class="visually-hidden">${i.caption}</caption>
       <thead>
         <tr>
@@ -1523,7 +1523,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
             scope="col"
             class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile"
           >
-            ${o ? f`<span class="lintje-data-table__mobile-check"
+            ${o ? p`<span class="lintje-data-table__mobile-check"
                   >${this.headerCheck()}${s.header}</span
                 >` : s.header}
           </th>
@@ -1538,7 +1538,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		})}
             aria-sort=${c.sortable === !1 ? l : g ? u.direction === "asc" ? "ascending" : "descending" : "none"}
           >
-            ${c.sortable === !1 ? c.header : f`<button
+            ${c.sortable === !1 ? c.header : p`<button
                   type="button"
                   class="lintje-data-table__sort-button"
                   @click=${() => this.toggleSort(c)}
@@ -1547,7 +1547,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
                   ${J(g ? u.direction : null)}
                 </button>`}
           </th>
-          ${m ? f`<th
+          ${m ? p`<th
                   scope="col"
                   class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile lintje-data-table__mobile-cell--actions"
                 >
@@ -1557,41 +1557,41 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
       </thead>
       ${r ? r.map((e) => {
 			let t = !this.collapsedGroups.includes(e.key);
-			return f`<tbody class="lintje-data-table__group">
+			return p`<tbody class="lintje-data-table__group">
                 ${this.mobileGroupRow(e, t, c, h)}
-                ${t ? e.rows.map((e) => this.mobileRow(e, n, p, m, h, c)) : l}
+                ${t ? e.rows.map((e) => this.mobileRow(e, n, f, m, h, c)) : l}
                 ${t && i.groupTotals?.[e.key] ? this.mobileSumRow("lintje-data-table__subtotal", `Subtotaal ${G(this.groupColumn, e.value) ?? "Zonder waarde"}`, i.groupTotals[e.key]?.[c.key], c, h) : l}
               </tbody>`;
-		}) : f`<tbody>
-              ${e.map((e) => this.mobileRow(e, n, p, m, h, c))}
+		}) : p`<tbody>
+              ${e.map((e) => this.mobileRow(e, n, f, m, h, c))}
               <!-- Empty rows with the same two lines per cell keep a short last page as tall as a full one. -->
-              ${t > 1 ? Array.from({ length: H - e.length }, () => f`<tr
+              ${t > 1 ? Array.from({ length: H - e.length }, () => p`<tr
                         class="lintje-data-table__mobile-row lintje-data-table__mobile-row--filler"
                         aria-hidden="true"
                       >
                         <td class="lintje-data-table__mobile-cell">
                           <span class="lintje-data-table__mobile-name">&nbsp;</span>
-                          ${this.hasSubline ? f`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : l}
+                          ${this.hasSubline ? p`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : l}
                         </td>
                         <td class="lintje-data-table__mobile-cell" colspan=${h - 1}>
                           <span class="lintje-data-table__mobile-measure">&nbsp;</span>
-                          ${c.threshold ? f`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : l}
+                          ${c.threshold ? p`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : l}
                         </td>
                       </tr>`) : l}
             </tbody>`}
-      ${i.totals ? f`<tfoot>
+      ${i.totals ? p`<tfoot>
               ${this.mobileSumRow("lintje-data-table__total", i.totalsLabel ?? "Totaal", i.totals[c.key], c, h)}
             </tfoot>` : l}
     </table>`;
 	}
 	mobileRow(e, t, n, r, i, a) {
-		let o = this.data, s = this.shown[0], c = !!o.selectable, u = !!o.clickable && !c, d = o.rowActions?.length ? o.rowActions : null, p = a.format === "change-compact" ? {
+		let o = this.data, s = this.shown[0], c = !!o.selectable, u = !!o.clickable && !c, d = o.rowActions?.length ? o.rowActions : null, f = a.format === "change-compact" ? {
 			...a,
 			format: "change"
-		} : a, m = this.rowKey(e), h = this.rowDetail(e), g = this.mobileStatus(a, e), v = n.length > 0 && this.openRows.includes(m), y = `lintje-data-table-${t}-detail-${m}`, b = f`<span class="lintje-data-table__mobile-name"
+		} : a, m = this.rowKey(e), h = this.rowDetail(e), g = this.mobileStatus(a, e), v = n.length > 0 && this.openRows.includes(m), y = `lintje-data-table-${t}-detail-${m}`, b = p`<span class="lintje-data-table__mobile-name"
         >${this.opener(e, this.cell(s, e[s.key]))}</span
       >${this.subline(e)}`, x = m === o.selectedId, S = this.checkedIds.includes(m);
-		return f`<tr
+		return p`<tr
         class=${_({
 			"lintje-data-table__mobile-row": !0,
 			"is-clickable": u,
@@ -1605,21 +1605,21 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
         @keydown=${u ? (t) => this.rowKeydown(t, e) : l}
       >
         <th scope="row" class="lintje-data-table__mobile-cell">
-          ${c ? f`<span class="lintje-data-table__mobile-check">
+          ${c ? p`<span class="lintje-data-table__mobile-check">
                 ${this.rowCheck(e, m, S)}
                 <span class="lintje-data-table__mobile-identity">${b}</span>
               </span>` : b}
         </th>
         <td class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right">
           <span class="lintje-data-table__mobile-measure"
-            >${this.cell(p, e[a.key])}</span
+            >${this.cell(f, e[a.key])}</span
           >
-          ${g ? f`<span
+          ${g ? p`<span
                 class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${g.tone}"
                 >${g.label}</span
               >` : l}
         </td>
-        ${r ? f`<td
+        ${r ? p`<td
                 class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--actions"
                 @click=${(e) => e.stopPropagation()}
                 @keydown=${(e) => e.stopPropagation()}
@@ -1633,7 +1633,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
                 </span>
               </td>` : l}
       </tr>
-      ${n.length > 0 ? f`<tr class="lintje-data-table__mobile-detail" id=${y} ?hidden=${!v}>
+      ${n.length > 0 ? p`<tr class="lintje-data-table__mobile-detail" id=${y} ?hidden=${!v}>
               <td class="lintje-data-table__mobile-cell" colspan=${i}>
                 ${v ? this.detailList(e, n, "row") : l}
               </td>
@@ -1641,7 +1641,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	mobileGroupRow(e, t, n, r) {
 		let i = this.groupColumn, a = this.data?.groupTotals?.[e.key]?.[n.key], o = e.rows.length;
-		return f`<tr class="lintje-data-table__group-row">
+		return p`<tr class="lintje-data-table__group-row">
       <th scope="rowgroup" class="lintje-data-table__mobile-cell lintje-data-table__group-head">
         <button
           type="button"
@@ -1658,18 +1658,18 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
         </button>
       </th>
       <td class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right">
-        ${!t && a !== void 0 ? f`<span class="lintje-data-table__mobile-measure">${this.totalContent(n, a)}</span>` : l}
+        ${!t && a !== void 0 ? p`<span class="lintje-data-table__mobile-measure">${this.totalContent(n, a)}</span>` : l}
       </td>
-      ${r > 2 ? f`<td class="lintje-data-table__mobile-cell"></td>` : l}
+      ${r > 2 ? p`<td class="lintje-data-table__mobile-cell"></td>` : l}
     </tr>`;
 	}
 	mobileSumRow(e, t, n, r, i) {
-		return f`<tr class=${e}>
+		return p`<tr class=${e}>
       <th scope="row" class="lintje-data-table__mobile-cell lintje-data-table__sum-label">${t}</th>
       <td class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right">
-        ${n === void 0 ? l : f`<span class="lintje-data-table__mobile-measure">${this.totalContent(r, n)}</span>`}
+        ${n === void 0 ? l : p`<span class="lintje-data-table__mobile-measure">${this.totalContent(r, n)}</span>`}
       </td>
-      ${i > 2 ? f`<td class="lintje-data-table__mobile-cell"></td>` : l}
+      ${i > 2 ? p`<td class="lintje-data-table__mobile-cell"></td>` : l}
     </tr>`;
 	}
 	totalContent(e, t) {
@@ -1677,14 +1677,14 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			...e,
 			threshold: void 0
 		};
-		return f`${r ? f`<span class="lintje-data-table__how">${r} </span>` : l}${this.cell(i, n)}`;
+		return p`${r ? p`<span class="lintje-data-table__how">${r} </span>` : l}${this.cell(i, n)}`;
 	}
 	rowKeydown(e, t) {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.emit("lintje-row-click", this.rowDetail(t)));
 	}
 	pager(e, t, n, r, i, a, o) {
 		let s = this.data?.caption, c = this.filteredCount ? this.data?.totalRows : void 0;
-		return f`<lintje-pagination
+		return p`<lintje-pagination
       class="lintje-data-table__pagination lintje-data-table__pagination--${e}"
       label=${s ? `Paginering ${s}` : "Paginering"}
       .page=${t + 1}
@@ -1700,7 +1700,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
     ></lintje-pagination>`;
 	}
 	opener(e, t) {
-		return this.data?.openable ? f`<button
+		return this.data?.openable ? p`<button
       type="button"
       class="lintje-data-table__open"
       @click=${(t) => {
@@ -1711,10 +1711,10 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
     </button>` : t;
 	}
 	cell(e, t) {
-		if (t === 0 && e.zeroText != null) return f`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
+		if (t === 0 && e.zeroText != null) return p`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
 		if (e.format === "label" && t != null) {
 			let n = e.labels?.[String(t)];
-			return n ? p({
+			return n ? h({
 				value: n.label,
 				tone: n.tone,
 				icon: n.icon,
@@ -1723,7 +1723,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		}
 		if (e.format === "status" && t != null) {
 			let n = he(e, String(t));
-			if (n) return f`<lintje-status-dot
+			if (n) return p`<lintje-status-dot
           tone=${n}
           label=${e.status?.labels?.[String(t)] ?? l}
         ></lintje-status-dot>`;
@@ -1732,11 +1732,11 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		if (n == null) return Z;
 		if ((e.format === "change" || e.format === "change-compact") && typeof t == "number") {
 			let r = t === 0 ? "flat" : t > 0 ? "up" : "down";
-			return e.format === "change-compact" ? f`<span
+			return e.format === "change-compact" ? p`<span
             class="lintje-data-table__change lintje-data-table__change--${r}"
             aria-hidden="true"
             >${t > 0 ? "▲" : t < 0 ? "▼" : "●"}</span
-          ><span class="visually-hidden">${n}</span>` : f`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
+          ><span class="visually-hidden">${n}</span>` : p`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
 		}
 		let r = K(e, t);
 		if (!r) return n;
@@ -1744,13 +1744,13 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			size: 14,
 			className: "lintje-threshold-cell__icon"
 		});
-		return f`<span class="lintje-threshold-cell lintje-threshold-cell--${r.tone}"
+		return p`<span class="lintje-threshold-cell lintje-threshold-cell--${r.tone}"
       >${i}${n}<span class="visually-hidden"> · ${r.label}</span></span
     >`;
 	}
 	truncatedCell(e, t) {
 		let n = q(e, t);
-		return n == null ? Z : f`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
+		return n == null ? Z : p`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
         >${this.cell(e, t)}</span
       ><span class="visually-hidden">${n}</span>`;
 	}
@@ -1765,7 +1765,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		return t ? n = t.replace(/\{(\w+)\}/g, (t, n) => {
 			let r = this.columns.find((e) => e.key === n), i = e[n];
 			return (r ? G(r, i) : i == null ? null : String(i)) ?? "—";
-		}) : this.sublineColumns.length > 0 && (n = this.sublineColumns.map((t) => G(t, e[t.key]) ?? "—").join(" · ")), n == null ? l : f`<span class="lintje-data-table__mobile-sub">${n}</span>`;
+		}) : this.sublineColumns.length > 0 && (n = this.sublineColumns.map((t) => G(t, e[t.key]) ?? "—").join(" · ")), n == null ? l : p`<span class="lintje-data-table__mobile-sub">${n}</span>`;
 	}
 	mobileStatus(e, t) {
 		if (!e.threshold) return null;
@@ -1777,11 +1777,11 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	headerCheck() {
 		let e = this.uncheckable, t = this.rows.filter((t) => !e.has(this.rowKey(t))), n = new Set(this.checkedIds), r = t.filter((e) => n.has(this.rowKey(e))).length;
-		return this.checkbox(f`<span class="visually-hidden">Alles selecteren</span>`, t.length > 0 && r === t.length, r > 0, (e) => this.setChecked(e ? t.map((e) => this.rowKey(e)) : []));
+		return this.checkbox(p`<span class="visually-hidden">Alles selecteren</span>`, t.length > 0 && r === t.length, r > 0, (e) => this.setChecked(e ? t.map((e) => this.rowKey(e)) : []));
 	}
 	rowCheck(e, t, n) {
 		let r = this.columns[0], i = r ? this.sortValue(r, e) : t;
-		return this.checkbox(f`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
+		return this.checkbox(p`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
 			let n = this.checkedIds.filter((e) => e !== t);
 			if (e && this.#f && this.data?.bulkActions) {
 				let e = this.uncheckable, n = this.sortedRows.map((e) => this.rowKey(e)).filter((t) => !e.has(t));
@@ -1791,7 +1791,7 @@ var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		}, this.uncheckable.has(t));
 	}
 	checkbox(e, t, n, r, i = !1) {
-		return f`<label class="lintje-choice${i ? " is-disabled" : ""}">
+		return p`<label class="lintje-choice${i ? " is-disabled" : ""}">
       <input
         type="checkbox"
         class="lintje-choice__input"