lintje 0.4.0 → 0.5.0

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

@@ -1,17 +1,18 @@
-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 { F as e, Kt as t, O as n, Q as r, Yt as i, Z as a, Zt as o, at as s, en as c, et as l, f as u, lt as d, nn as f, o as p, ot as m, p as h, rt as g, st as _, ut as v } from "../chunks/base-CVKIPSLx.js";
+import { n as y, r as b } from "../chunks/focus-trap-rje9Oz19.js";
 import "./menu-button.js";
 import { t as x } from "../chunks/input-lQTmOMOz.js";
 import { t as S } from "./announcement.js";
 import "./drawer.js";
+import { i as C, t as w } from "../chunks/download-D7ZarlMZ.js";
 import "./empty-state.js";
 import "./description-list.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 { d as T } from "../chunks/date-format-DxP9yfDp.js";
+import { r as E, t as D } from "../chunks/chart-styles-JK4clSyA.js";
 import "./pagination.js";
 import "./sortable-list.js";
 //#region src/components/tables/data-table/data-table.css?inline
-var D = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n/* On the page there is no tile padding to bleed into below 768 px: the rows keep the page's edge. */\n:host([plain]) { --tile-pad-x: 0px; }\n/* A table breaks between its rows on paper, so it starts where the page has room. */\n@media print { :host { break-inside: auto; } }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-data-table { min-width: 0; }\n\n.lintje-data-table__full { width: 100%; border-collapse: collapse; font: var(--text-table); }\n.lintje-data-table__mobile { display: none; width: 100%; border-collapse: collapse; font: var(--text-table); }\n\n/* A shadow marks each side where columns are hidden; it sits on the frame so it doesn't scroll. */\n.lintje-data-table__frame { position: relative; }\n.lintje-data-table__frame::before,\n.lintje-data-table__frame::after {\n  content: '';\n  position: absolute;\n  top: 0; bottom: 0;\n  width: var(--space-4);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-data-table__frame::before { left: 0; box-shadow: var(--shadow-scroll-start); }\n.lintje-data-table__frame::after { right: 0; box-shadow: var(--shadow-scroll-end); }\n.lintje-data-table__frame.is-scrollable-start::before,\n.lintje-data-table__frame.is-scrollable-end::after { opacity: 1; }\n/* Positioned, so an absolute visually hidden label is clipped with its cell. */\n.lintje-data-table__scroller { position: relative; overflow-x: auto; }\n.lintje-data-table__scroller:focus-visible { outline-offset: -3px; }\n/* A styled scrollbar is a classic one: it doesn't hide between scrolls like an overlay one. */\n.lintje-data-table__scroller::-webkit-scrollbar { height: 8px; }\n.lintje-data-table__scroller::-webkit-scrollbar-track { background: var(--color-bg-subtle); }\n.lintje-data-table__scroller::-webkit-scrollbar-thumb { background: var(--color-border-heavy); }\n@supports not selector(::-webkit-scrollbar) {\n  .lintje-data-table__scroller { scrollbar-width: thin; scrollbar-color: var(--color-border-heavy) var(--color-bg-subtle); }\n}\n\n.lintje-data-table__header-cell,\n.lintje-data-table__name,\n.lintje-data-table__mobile-cell { text-align: left; }\n\n.lintje-data-table__header-cell {\n  font: var(--text-table-head);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n  background: var(--color-bg-surface);\n  padding: 10px var(--space-3);\n  border-bottom: 2px solid var(--color-border-heavy);\n}\n/* The sorted column: its label is text (4.5:1), the rule under it a line (3:1). */\n.lintje-data-table__header-cell.is-active {\n  color: var(--color-accent-text);\n  border-bottom-color: var(--color-accent-line);\n}\n/* The button takes the cell's padding, so the whole cell sorts. */\n.lintje-data-table__header-cell--sortable { padding: 0; }\n.lintje-data-table__sort-button {\n  display: flex; align-items: center; gap: 6px;\n  width: 100%;\n  min-height: var(--h-target);\n  padding: 0 var(--space-3);\n  font: inherit; color: inherit; text-align: inherit;\n  /* A button resets these; the header's label style must reach the label. */\n  text-transform: inherit; letter-spacing: inherit;\n}\n.lintje-data-table__header-cell--align-right .lintje-data-table__sort-button { justify-content: flex-end; }\n/* Tracking also follows the last letter; it widened the table 1 px past its tile at 1024 px.\n   Giving that trailing step back keeps the gap at 6 px. */\n.lintje-data-table__sort-label { margin-inline-end: calc(var(--label-tracking) * -1); }\n.lintje-data-table__sort-button:hover { background: var(--color-bg-subtle); }\n/* The scroller clips the ring, so it sits inside the cell. */\n.lintje-data-table__sort-button:focus-visible { outline-offset: -3px; }\n/* The arrows are a glyph, outside the type scale, one above the other in a box that never changes\n   width. A head says only what holds now: the sorted column shows its one arrow, and another\n   column both under the pointer or the focus. A hidden arrow keeps its place. */\n.lintje-data-table__sort-icon {\n  display: inline-flex; flex-direction: column; flex: none;\n  font-size: 8px; line-height: 1;\n  color: var(--color-text-muted);\n  visibility: hidden;\n}\n.lintje-data-table__sort-button:hover .lintje-data-table__sort-icon,\n.lintje-data-table__sort-button:focus-visible .lintje-data-table__sort-icon,\n.lintje-data-table__header-cell.is-active .lintje-data-table__sort-icon { visibility: visible; }\n.lintje-data-table__sort-icon > .is-off { visibility: hidden; }\n.lintje-data-table__sort-icon > .is-on { color: var(--color-accent-text); }\n\n.lintje-data-table__row { border-bottom: 1px solid var(--color-border-default); }\n/* Filler rows keep a short last page as tall as a full one. */\n.lintje-data-table__row--filler { border-bottom-color: transparent; }\n/* A row is one line: no cell wraps, not even at a hyphen (\"04-10-2026\"). */\n.lintje-data-table__cell {\n  padding: 0 var(--space-3);\n  height: var(--h-table-row);\n  font-weight: 400;\n  color: var(--color-text-primary);\n  white-space: nowrap;\n}\n.lintje-data-table__name { font-weight: 700 !important; }\n/* The name that opens its row is dark, as in the work list: a column of blue reads as a column of\n   links and outweighs the figures beside it. The pointer and the focus show the line. */\n.lintje-data-table__open {\n  padding: 0;\n  font: inherit; text-align: inherit;\n  color: var(--color-text-primary);\n  text-decoration: none;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-data-table__open:hover,\n.lintje-data-table__open:focus-visible { color: var(--color-link); text-decoration: underline; }\n.lintje-data-table__header-cell--align-right,\n.lintje-data-table__cell--align-right,\n.lintje-data-table__mobile-cell--align-right { text-align: right !important; }\n.lintje-data-table__cell--align-right { font-variant-numeric: tabular-nums; }\n/* A `truncate` column: `width: 1%` keeps the auto layout from handing it surplus width, so it is as\n   wide as its longest value up to the cap, and a longer value ends in an ellipsis (the heatmap's\n   label column does the same). */\n.lintje-data-table__cell--truncate { width: 1%; }\n.lintje-data-table__cell-text { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }\n/* The `title` needs a pointer: under the keyboard's focus and without hover the value wraps whole. */\n.lintje-data-table__row:focus-visible .lintje-data-table__cell-text,\n.lintje-data-table__row:has(:focus-visible) .lintje-data-table__cell-text { white-space: normal; overflow-wrap: anywhere; }\n@media (hover: none) {\n  .lintje-data-table__cell-text { white-space: normal; overflow-wrap: anywhere; }\n}\n\n.lintje-data-table__row.is-clickable { cursor: pointer; }\n.lintje-data-table__row.is-clickable:hover,\n.lintje-data-table__mobile-row.is-clickable:hover { background: var(--color-bg-subtle); }\n/* Selected and hover share a surface; the 4 px edge is the only carrier, so it must stay visible. */\n.lintje-data-table__row.is-selected,\n.lintje-data-table__mobile-row.is-selected {\n  background: var(--color-bg-selected);\n  box-shadow: inset 4px 0 0 var(--color-accent-line);\n}\n/* A checked row takes the selected background without the bar: the bar means drilldown. */\n.lintje-data-table__check-cell { width: 24px; padding-right: var(--space-3); }\n.lintje-data-table__header-cell.lintje-data-table__check-cell { padding-block: 0; }\n.lintje-data-table__check-cell .lintje-choice,\n.lintje-data-table__mobile-check .lintje-choice { gap: 0; }\n.lintje-data-table__mobile-check { display: flex; align-items: center; gap: var(--space-3); }\n.lintje-data-table__mobile-identity { min-width: 0; }\n.lintje-data-table__row.is-checked,\n.lintje-data-table__mobile-row.is-checked { background: var(--color-bg-selected); }\n.lintje-data-table__row:focus-visible,\n.lintje-data-table__mobile-row:focus-visible { outline-offset: -3px; }\n\n.lintje-threshold-cell {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--space-1);\n  min-width: 44px;\n  padding: 4px var(--space-2);\n  font-weight: 700;\n}\n.lintje-threshold-cell__icon { flex: none; }\n.lintje-threshold-cell--good       { background: transparent; }\n/* At most one fill in a row: a caution is its glyph and weight, only a crossed threshold fills. */\n.lintje-threshold-cell--caution     { background: transparent; }\n.lintje-threshold-cell--caution .lintje-threshold-cell__icon { color: var(--color-attention-line); }\n.lintje-threshold-cell--above-threshold { background: var(--color-error); color: var(--color-text-on-fill); }\n\n.lintje-data-table__muted { color: var(--color-text-muted); }\n\n/* Tones are modifiers, not inline colours: the host's `style-src 'self'` drops `style`. */\n.lintje-data-table__change { font-weight: 700; }\n.lintje-data-table__change--flat { color: var(--color-text-muted); }\n.lintje-data-table__change--up   { color: var(--color-success-text); }\n.lintje-data-table__change--down { color: var(--color-error-text); }\n\n/* Each representation has its own pager; the phone's is hidden on desktop. */\n.lintje-data-table__pagination { padding-top: var(--space-3); }\n.lintje-data-table__pagination--mobile { display: none; }\n\n/* --- Editing a cell (editing.ts) ------------------------------------------ */\n/* The pencil sits at the end of the text, at the start for a number. */\n.lintje-data-table__cell--editable { position: relative; }\n.lintje-data-table__cell--editable:hover { background: var(--color-bg-subtle); }\n.lintje-data-table__edit-icon {\n  position: absolute;\n  top: 50%; right: var(--space-1);\n  translate: 0 -50%;\n  color: var(--color-text-muted);\n  visibility: hidden;\n}\n.lintje-data-table__cell--align-right .lintje-data-table__edit-icon { right: auto; left: var(--space-1); }\n.lintje-data-table__cell--editable:hover .lintje-data-table__edit-icon { visibility: visible; }\n.lintje-data-table__cell--editable.is-editing { padding: 2px; vertical-align: top; }\n.lintje-data-table__cell--editable.is-editing:hover { background: transparent; }\n.lintje-data-table__editor {\n  display: block;\n  width: 100%; height: var(--h-control);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-table);\n  font-weight: 400;\n  text-align: inherit;\n}\n.lintje-data-table__cell--align-right .lintje-data-table__editor { font-variant-numeric: tabular-nums; }\n.lintje-data-table__editor::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-data-table__editor.is-error { border: 2px solid var(--color-error); }\n.lintje-data-table__edit-error {\n  display: block;\n  padding: 2px var(--space-2) var(--space-1);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-error-text);\n  text-align: left;\n}\n.lintje-data-table__busy {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  color: var(--color-text-muted);\n}\n\n/* --- Row actions and the selection bar (actions.ts) ------------------------ */\n.lintje-data-table__action-cell { width: var(--h-icon-button); text-align: right; }\n/* The chooser's tooltip is a sentence, not a column label: it does not take the head's capitals. */\n.lintje-data-table__action-cell lintje-tooltip { text-transform: none; letter-spacing: normal; font-weight: 400; }\n.lintje-data-table__selection {\n  position: sticky; top: var(--h-sticky); z-index: 1;\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-bg-selected);\n  border-top: 2px solid var(--color-accent-line);\n  font: var(--text-table);\n  color: var(--color-text-primary);\n}\n.lintje-data-table__selection-count { font-weight: 700; }\n.lintje-data-table__selection-clear { margin-left: auto; }\n\n/* --- Filters and the column chooser (filters.ts) ---------------------------- */\n.lintje-data-table__toolbar {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  padding-bottom: var(--space-3);\n}\n.lintje-data-table__toolbar--quiet,\n.lintje-data-table__sheet-button,\n.lintje-data-table__sort-menu { display: none; }\n.lintje-data-table__chips {\n  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);\n  font: var(--text-small);\n}\n.lintje-data-table__chip {\n  display: inline-flex; align-items: center; gap: var(--space-1);\n  height: var(--h-chip);\n  padding: 0 var(--space-1) 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n  white-space: nowrap;\n}\n/* A transparent hit area reaches the target height up and down; sideways stands other content. */\n.lintje-data-table__chip-clear {\n  position: relative;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-data-table__chip-clear::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-data-table__chip-clear:hover { color: var(--color-text-primary); }\n.lintje-data-table__filter-total { color: var(--color-text-muted); }\n/* The table's own controls, at the toolbar's end, each with its word. */\n.lintje-data-table__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }\n.lintje-data-table__chooser-reset { align-self: flex-start; }\n\n.lintje-data-table__header-cell--filterable { padding-block: 0; }\n.lintje-data-table__header-inner {\n  display: flex; align-items: center; gap: var(--space-2);\n  min-height: var(--h-control);\n}\n.lintje-data-table__header-cell--sortable .lintje-data-table__header-inner { padding-right: var(--space-2); }\n.lintje-data-table__header-inner .lintje-data-table__sort-button { flex: 1; min-width: 0; }\n/* A filtered column carries one mark, its filled funnel; the chips above say it in words. */\n/* A transparent hit area reaches the target height up and down; on its left stands the sort button. */\n.lintje-data-table__funnel {\n  position: relative;\n  width: var(--h-chip); height: var(--h-chip); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  margin-left: auto;\n  border: 1px solid transparent;\n  color: var(--color-text-muted);\n}\n.lintje-data-table__funnel::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-data-table__funnel:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }\n/* As wide as the row menus beside or under them, so their icons line up. */\n.lintje-data-table__chooser-button,\n.lintje-data-table__detail-toggle,\n.lintje-data-table__mobile-toggle {\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  margin-left: auto;\n  border: 1px solid transparent;\n  color: var(--color-text-muted);\n}\n.lintje-data-table__chooser-button:hover,\n.lintje-data-table__chooser-button[aria-expanded='true'],\n.lintje-data-table__detail-toggle:hover,\n.lintje-data-table__mobile-toggle:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }\n.lintje-data-table__funnel.is-filtered {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n}\n\n.lintje-data-table__filter-panel {\n  display: flex; flex-direction: column; gap: var(--space-3);\n  width: 260px; max-width: 100%;\n  padding: var(--space-4);\n  font: var(--text-table);\n  color: var(--color-text-primary);\n}\n.lintje-data-table__filter-name { font-size: 0.875rem; font-weight: 700; }\n.lintje-data-table__filter-options { display: flex; flex-direction: column; }\n.lintje-data-table__filter-option { min-height: var(--h-option); }\n.lintje-data-table__filter-count { margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }\n.lintje-data-table__filter-search {\n  width: 100%; height: var(--h-control);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n}\n.lintje-data-table__filter-search::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n/* \"Wissen\" clears the field; it draws no cross of its own. */\n.lintje-data-table__filter-search::-webkit-search-cancel-button,\n.lintje-data-table__filter-search::-webkit-search-decoration { appearance: none; }\n.lintje-data-table__filter-actions {\n  display: flex; justify-content: flex-end; gap: var(--space-2);\n  padding-top: var(--space-1);\n}\n.lintje-data-table__filter-section {\n  display: flex; flex-direction: column; gap: var(--space-2);\n  margin-bottom: var(--space-6);\n}\n.lintje-data-table__chooser-note { font: var(--text-small); color: var(--color-text-muted); }\n\n/* The sizer: each column's widest value, with no height, so a sort or a page never moves a column. */\n.lintje-data-table__sizer .lintje-data-table__cell { height: 0; padding-block: 0; border: 0; }\n.lintje-data-table__sizer-box { height: 0; overflow: hidden; visibility: hidden; }\n\n/* --- A row's detail, groups and totals ------------------------------------- */\n.lintje-data-table__detail-cell { width: var(--h-icon-button); padding: 0; }\n.lintje-data-table__row.is-open { background: var(--color-bg-subtle); border-bottom-color: transparent; }\n.lintje-data-table__detail { border-bottom: 1px solid var(--color-border-default); }\n.lintje-data-table__detail-body { padding: 0 var(--space-3) var(--space-4) calc(var(--h-icon-button) + var(--space-3)); background: var(--color-bg-subtle); }\n\n/* A group's heading spans the name's column; collapsed, its other cells hold the subtotals. */\n.lintje-data-table__group-row { border-bottom: 1px solid var(--color-border-default); }\n.lintje-data-table__group-head { padding: 0; }\n.lintje-data-table__group-toggle {\n  display: flex; align-items: center; gap: var(--space-2);\n  width: 100%;\n  min-height: var(--h-table-row);\n  padding: 0 var(--space-3);\n  font: inherit; font-weight: 700; color: var(--color-text-primary); text-align: left;\n}\n.lintje-data-table__group-toggle:hover { background: var(--color-bg-subtle); }\n.lintje-data-table__group-toggle:focus-visible { outline-offset: -3px; }\n.lintje-data-table__group-count { font-weight: 400; font-size: 0.875rem; color: var(--color-text-muted); }\n.lintje-data-table__group-row .lintje-data-table__cell { font-weight: 700; }\n/* Rows in a group stand in from its heading, by the chevron's width and gap. */\n.lintje-data-table__row--in-group > .lintje-data-table__name { padding-left: calc(var(--space-3) + var(--space-4) + var(--space-2)); }\n\n/* A total is the host's: bold, over a heavy line, never sticky. The word before it says how. */\n.lintje-data-table__total > *,\n.lintje-data-table__subtotal > * { font-weight: 700; }\n.lintje-data-table__total { border-top: 2px solid var(--color-border-heavy); }\n.lintje-data-table__subtotal { border-top: 1px solid var(--color-border-heavy); border-bottom: 1px solid var(--color-border-default); }\n.lintje-data-table__sum-label { text-align: left; }\n.lintje-data-table__subtotal > .lintje-data-table__sum-label { font-weight: 400; color: var(--color-text-muted); }\n.lintje-data-table__full .lintje-data-table__subtotal > .lintje-data-table__sum-label { padding-left: calc(var(--space-3) + var(--space-4) + var(--space-2)); }\n.lintje-data-table__how { font-weight: 400; font-size: 0.875rem; color: var(--color-text-muted); }\n\n/* --- Below 768 px the representation switches ---------------------------- */\n/* Below 768 px, from the media controller's `is-phone`: WebKit does not re-apply a shadow root's\n   media query after a resize, and the script already decides by MOBILE. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__toolbar { padding: 0 var(--tile-pad-x) var(--space-3); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__toolbar--quiet { display: flex; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__sheet-button,\n:where(.lintje-data-table.is-phone) .lintje-data-table__sort-menu { display: inline-flex; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__selection--mobile { top: auto; bottom: 0; margin-top: var(--space-3); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__frame { display: none; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile { display: table; }\n.lintje-data-table:where(.is-phone) { margin: 0 calc(var(--tile-pad-x) * -1); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile { padding: 10px var(--tile-pad-x); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile.lintje-data-table__header-cell--sortable { padding: 0; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile .lintje-data-table__sort-button { padding: 0 var(--tile-pad-x); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-row { border-bottom: 1px solid var(--color-border-default); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-row--filler,\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-row.is-open { border-bottom-color: transparent; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-detail { border-bottom: 1px solid var(--color-border-default); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-detail > .lintje-data-table__mobile-cell { padding-top: 0; }\n/* The toggle and the row menu sit at the row's end, on the name's first line. Two classes, so the\n   cell padding below does not give the column its start back. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-cell.lintje-data-table__mobile-cell--actions,\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile.lintje-data-table__mobile-cell--actions { width: 1%; padding-inline-start: 0; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-actions { display: flex; align-items: center; justify-content: flex-end; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-cell {\n  padding: var(--space-2) var(--tile-pad-x);\n  vertical-align: top;\n  font-weight: 400;\n}\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-name { display: block; font-size: 0.875rem; font-weight: 700; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-sub { display: block; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 2px; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-measure { display: block; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-status { display: block; font-size: 0.875rem; margin-top: 2px; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-status--within { color: var(--color-text-muted); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-status--outside { color: var(--color-error-text); font-weight: 700; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__pagination--full { display: none; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__pagination--mobile { display: block; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__pagination { padding: var(--space-3) var(--tile-pad-x) 0; }\n/* The phone shows two columns and lists the rest under a row: there is nothing to choose. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-row .lintje-data-table__mobile-cell { padding-block: 0; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-toggle { padding: 0; min-height: var(--h-target); }\n/* On a phone the name and the count run as text, so a long name wraps instead of widening the table. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-toggle { display: block; padding-block: var(--space-3); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-toggle .lintje-icon { vertical-align: -2px; margin-inline-end: var(--space-2); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-count { margin-inline-start: var(--space-2); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-row .lintje-data-table__mobile-cell--align-right { vertical-align: middle; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__total { border-top: 2px solid var(--color-border-heavy); }\n\n/* Paper: every column on the sheet, a row never split, and no control. Values wrap rather than\n   run off the edge. What the columns are filtered on stays, as the chips. */\n@media print {\n  /* Its own height, not the cell's: a tile split over two sheets measures its rows again. */\n  .lintje-data-table__tile { height: auto; }\n  /* Chromium repeats a head on the next sheet without its words, so the head stands once. */\n  .lintje-data-table__full thead { display: table-row-group; }\n  .lintje-data-table__scroller { overflow: visible; }\n  .lintje-data-table__frame::before,\n  .lintje-data-table__frame::after { display: none; }\n  .lintje-data-table__cell { white-space: normal; height: auto; padding-block: var(--space-2); }\n  .lintje-data-table__cell-text { max-width: none; white-space: normal; }\n  .lintje-data-table__row { break-inside: avoid; }\n  /* The count belongs to the rows above it, not alone on a sheet of its own. */\n  .lintje-data-table__pagination { break-before: avoid; }\n  .lintje-data-table__row--filler,\n  .lintje-data-table__check-cell,\n  .lintje-data-table__action-cell,\n  .lintje-data-table__sort-icon,\n  .lintje-data-table__funnel,\n  .lintje-data-table__tools,\n  .lintje-data-table__clear-all,\n  .lintje-data-table__detail-cell,\n  .lintje-data-table__chip-clear,\n  .lintje-data-table__selection,\n  .lintje-data-table__edit-icon { display: none; }\n  .lintje-data-table__open { color: inherit; text-decoration: none; }\n}\n\n/* Forced colours drop the selected row's fill and inset bar. A real 4 px border on the first\n   cell (Canvas at rest, Highlight when selected) replaces the bar without moving a column. */\n@media (forced-colors: active) {\n  .lintje-data-table__row > :first-child,\n  .lintje-data-table__mobile-row > :first-child { border-left: 4px solid Canvas; }\n  .lintje-data-table__row.is-selected > :first-child,\n  .lintje-data-table__mobile-row.is-selected > :first-child { border-left-color: Highlight; }\n  .lintje-data-table__header-cell.is-active { border-bottom-color: Highlight; }\n  .lintje-data-table__funnel.is-filtered { border-color: Highlight; }\n}\n";
+var ee = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n/* On the page there is no tile padding to bleed into below 768 px: the rows keep the page's edge. */\n:host([plain]) { --tile-pad-x: 0px; }\n/* A table breaks between its rows on paper, so it starts where the page has room. */\n@media print { :host { break-inside: auto; } }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-data-table { min-width: 0; }\n\n.lintje-data-table__full { width: 100%; border-collapse: collapse; font: var(--text-table); }\n.lintje-data-table__mobile { display: none; width: 100%; border-collapse: collapse; font: var(--text-table); }\n\n/* A shadow marks each side where columns are hidden; it sits on the frame so it doesn't scroll. */\n.lintje-data-table__frame { position: relative; }\n.lintje-data-table__frame::before,\n.lintje-data-table__frame::after {\n  content: '';\n  position: absolute;\n  top: 0; bottom: 0;\n  width: var(--space-4);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-data-table__frame::before { left: 0; box-shadow: var(--shadow-scroll-start); }\n.lintje-data-table__frame::after { right: 0; box-shadow: var(--shadow-scroll-end); }\n.lintje-data-table__frame.is-scrollable-start::before,\n.lintje-data-table__frame.is-scrollable-end::after { opacity: 1; }\n/* Positioned, so an absolute visually hidden label is clipped with its cell. */\n.lintje-data-table__scroller { position: relative; overflow-x: auto; }\n.lintje-data-table__scroller:focus-visible { outline-offset: -3px; }\n/* A styled scrollbar is a classic one: it doesn't hide between scrolls like an overlay one. */\n.lintje-data-table__scroller::-webkit-scrollbar { height: 8px; }\n.lintje-data-table__scroller::-webkit-scrollbar-track { background: var(--color-bg-subtle); }\n.lintje-data-table__scroller::-webkit-scrollbar-thumb { background: var(--color-border-heavy); }\n@supports not selector(::-webkit-scrollbar) {\n  .lintje-data-table__scroller { scrollbar-width: thin; scrollbar-color: var(--color-border-heavy) var(--color-bg-subtle); }\n}\n\n.lintje-data-table__header-cell,\n.lintje-data-table__name,\n.lintje-data-table__mobile-cell { text-align: left; }\n\n.lintje-data-table__header-cell {\n  font: var(--text-table-head);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n  background: var(--color-bg-surface);\n  padding: 10px var(--space-3);\n  border-bottom: 2px solid var(--color-border-heavy);\n}\n/* The sorted column: its label is text (4.5:1), the rule under it a line (3:1). */\n.lintje-data-table__header-cell.is-active {\n  color: var(--color-accent-text);\n  border-bottom-color: var(--color-accent-line);\n}\n/* The button takes the cell's padding, so the whole cell sorts. */\n.lintje-data-table__header-cell--sortable { padding: 0; }\n.lintje-data-table__sort-button {\n  display: flex; align-items: center; gap: 6px;\n  width: 100%;\n  min-height: var(--h-target);\n  padding: 0 var(--space-3);\n  font: inherit; color: inherit; text-align: inherit;\n  /* A button resets these; the header's label style must reach the label. */\n  text-transform: inherit; letter-spacing: inherit;\n}\n.lintje-data-table__header-cell--align-right .lintje-data-table__sort-button { justify-content: flex-end; }\n/* Tracking also follows the last letter; it widened the table 1 px past its tile at 1024 px.\n   Giving that trailing step back keeps the gap at 6 px. */\n.lintje-data-table__sort-label { margin-inline-end: calc(var(--label-tracking) * -1); }\n.lintje-data-table__sort-button:hover { background: var(--color-bg-subtle); }\n/* The scroller clips the ring, so it sits inside the cell. */\n.lintje-data-table__sort-button:focus-visible { outline-offset: -3px; }\n/* The arrows are a glyph, outside the type scale, one above the other in a box that never changes\n   width. A head says only what holds now: the sorted column shows its one arrow, and another\n   column both under the pointer or the focus. A hidden arrow keeps its place. */\n.lintje-data-table__sort-icon {\n  display: inline-flex; flex-direction: column; flex: none;\n  font-size: 8px; line-height: 1;\n  color: var(--color-text-muted);\n  visibility: hidden;\n}\n.lintje-data-table__sort-button:hover .lintje-data-table__sort-icon,\n.lintje-data-table__sort-button:focus-visible .lintje-data-table__sort-icon,\n.lintje-data-table__header-cell.is-active .lintje-data-table__sort-icon { visibility: visible; }\n.lintje-data-table__sort-icon > .is-off { visibility: hidden; }\n.lintje-data-table__sort-icon > .is-on { color: var(--color-accent-text); }\n\n.lintje-data-table__row { border-bottom: 1px solid var(--color-border-default); }\n/* Filler rows keep a short last page as tall as a full one. */\n.lintje-data-table__row--filler { border-bottom-color: transparent; }\n/* A row is one line: no cell wraps, not even at a hyphen (\"04-10-2026\"). */\n.lintje-data-table__cell {\n  padding: 0 var(--space-3);\n  height: var(--h-table-row);\n  font-weight: 400;\n  color: var(--color-text-primary);\n  white-space: nowrap;\n}\n.lintje-data-table__name { font-weight: 700 !important; }\n/* The name that opens its row is dark, as in the work list: a column of blue reads as a column of\n   links and outweighs the figures beside it. The pointer and the focus show the line. */\n.lintje-data-table__open {\n  padding: 0;\n  font: inherit; text-align: inherit;\n  color: var(--color-text-primary);\n  text-decoration: none;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-data-table__open:hover,\n.lintje-data-table__open:focus-visible { color: var(--color-link); text-decoration: underline; }\n.lintje-data-table__header-cell--align-right,\n.lintje-data-table__cell--align-right,\n.lintje-data-table__mobile-cell--align-right { text-align: right !important; }\n.lintje-data-table__cell--align-right { font-variant-numeric: tabular-nums; }\n/* A `truncate` column: `width: 1%` keeps the auto layout from handing it surplus width, so it is as\n   wide as its longest value up to the cap, and a longer value ends in an ellipsis (the heatmap's\n   label column does the same). */\n.lintje-data-table__cell--truncate { width: 1%; }\n.lintje-data-table__cell-text { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }\n/* The `title` needs a pointer: under the keyboard's focus and without hover the value wraps whole. */\n.lintje-data-table__row:focus-visible .lintje-data-table__cell-text,\n.lintje-data-table__row:has(:focus-visible) .lintje-data-table__cell-text { white-space: normal; overflow-wrap: anywhere; }\n@media (hover: none) {\n  .lintje-data-table__cell-text { white-space: normal; overflow-wrap: anywhere; }\n}\n\n.lintje-data-table__row.is-clickable { cursor: pointer; }\n.lintje-data-table__row.is-clickable:hover,\n.lintje-data-table__mobile-row.is-clickable:hover { background: var(--color-bg-subtle); }\n/* Selected and hover share a surface; the 4 px edge is the only carrier, so it must stay visible. */\n.lintje-data-table__row.is-selected,\n.lintje-data-table__mobile-row.is-selected {\n  background: var(--color-bg-selected);\n  box-shadow: inset 4px 0 0 var(--color-accent-line);\n}\n/* A checked row takes the selected background without the bar: the bar means drilldown. */\n.lintje-data-table__check-cell { width: 24px; padding-right: var(--space-3); }\n.lintje-data-table__header-cell.lintje-data-table__check-cell { padding-block: 0; }\n.lintje-data-table__check-cell .lintje-choice,\n.lintje-data-table__mobile-check .lintje-choice { gap: 0; }\n.lintje-data-table__mobile-check { display: flex; align-items: center; gap: var(--space-3); }\n.lintje-data-table__mobile-identity { min-width: 0; }\n.lintje-data-table__row.is-checked,\n.lintje-data-table__mobile-row.is-checked { background: var(--color-bg-selected); }\n.lintje-data-table__row:focus-visible,\n.lintje-data-table__mobile-row:focus-visible { outline-offset: -3px; }\n\n.lintje-threshold-cell {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--space-1);\n  min-width: 44px;\n  padding: 4px var(--space-2);\n  font-weight: 700;\n}\n.lintje-threshold-cell__icon { flex: none; }\n.lintje-threshold-cell--good       { background: transparent; }\n/* At most one fill in a row: a caution is its glyph and weight, only a crossed threshold fills. */\n.lintje-threshold-cell--caution     { background: transparent; }\n.lintje-threshold-cell--caution .lintje-threshold-cell__icon { color: var(--color-attention-line); }\n.lintje-threshold-cell--above-threshold { background: var(--color-error); color: var(--color-text-on-fill); }\n\n.lintje-data-table__muted { color: var(--color-text-muted); }\n\n/* Tones are modifiers, not inline colours: the host's `style-src 'self'` drops `style`. */\n.lintje-data-table__change { font-weight: 700; }\n.lintje-data-table__change--flat { color: var(--color-text-muted); }\n.lintje-data-table__change--up   { color: var(--color-success-text); }\n.lintje-data-table__change--down { color: var(--color-error-text); }\n\n/* Each representation has its own pager; the phone's is hidden on desktop. */\n.lintje-data-table__pagination { padding-top: var(--space-3); }\n.lintje-data-table__pagination--mobile { display: none; }\n\n/* --- Editing a cell (editing.ts) ------------------------------------------ */\n/* The pencil sits at the end of the text, at the start for a number. */\n.lintje-data-table__cell--editable { position: relative; }\n.lintje-data-table__cell--editable:hover { background: var(--color-bg-subtle); }\n.lintje-data-table__edit-icon {\n  position: absolute;\n  top: 50%; right: var(--space-1);\n  translate: 0 -50%;\n  color: var(--color-text-muted);\n  visibility: hidden;\n}\n.lintje-data-table__cell--align-right .lintje-data-table__edit-icon { right: auto; left: var(--space-1); }\n.lintje-data-table__cell--editable:hover .lintje-data-table__edit-icon { visibility: visible; }\n.lintje-data-table__cell--editable.is-editing { padding: 2px; vertical-align: top; }\n.lintje-data-table__cell--editable.is-editing:hover { background: transparent; }\n.lintje-data-table__editor {\n  display: block;\n  width: 100%; height: var(--h-control);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-table);\n  font-weight: 400;\n  text-align: inherit;\n}\n.lintje-data-table__cell--align-right .lintje-data-table__editor { font-variant-numeric: tabular-nums; }\n.lintje-data-table__editor::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-data-table__editor.is-error { border: 2px solid var(--color-error); }\n.lintje-data-table__edit-error {\n  display: block;\n  padding: 2px var(--space-2) var(--space-1);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-error-text);\n  text-align: left;\n}\n.lintje-data-table__busy {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  color: var(--color-text-muted);\n}\n\n/* --- Row actions and the selection bar (actions.ts) ------------------------ */\n.lintje-data-table__action-cell { width: var(--h-icon-button); text-align: right; }\n/* The chooser's tooltip is a sentence, not a column label: it does not take the head's capitals. */\n.lintje-data-table__action-cell lintje-tooltip { text-transform: none; letter-spacing: normal; font-weight: 400; }\n.lintje-data-table__selection {\n  position: sticky; top: var(--h-sticky); z-index: 1;\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-bg-selected);\n  border-top: 2px solid var(--color-accent-line);\n  font: var(--text-table);\n  color: var(--color-text-primary);\n}\n.lintje-data-table__selection-count { font-weight: 700; }\n.lintje-data-table__selection-clear { margin-left: auto; }\n\n/* --- Filters and the column chooser (filters.ts) ---------------------------- */\n.lintje-data-table__toolbar {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  padding-bottom: var(--space-3);\n}\n.lintje-data-table__toolbar--quiet,\n.lintje-data-table__sheet-button,\n.lintje-data-table__sort-menu { display: none; }\n.lintje-data-table__chips {\n  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);\n  font: var(--text-small);\n}\n.lintje-data-table__chip {\n  display: inline-flex; align-items: center; gap: var(--space-1);\n  height: var(--h-chip);\n  padding: 0 var(--space-1) 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n  white-space: nowrap;\n}\n/* A transparent hit area reaches the target height up and down; sideways stands other content. */\n.lintje-data-table__chip-clear {\n  position: relative;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-data-table__chip-clear::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-data-table__chip-clear:hover { color: var(--color-text-primary); }\n.lintje-data-table__filter-total { color: var(--color-text-muted); }\n/* The table's own controls, at the toolbar's end, each with its word. */\n.lintje-data-table__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }\n.lintje-data-table__chooser-reset { align-self: flex-start; }\n\n.lintje-data-table__header-cell--filterable { padding-block: 0; }\n.lintje-data-table__header-inner {\n  display: flex; align-items: center; gap: var(--space-2);\n  min-height: var(--h-control);\n}\n.lintje-data-table__header-cell--sortable .lintje-data-table__header-inner { padding-right: var(--space-2); }\n.lintje-data-table__header-inner .lintje-data-table__sort-button { flex: 1; min-width: 0; }\n/* A filtered column carries one mark, its filled funnel; the chips above say it in words. */\n/* A transparent hit area reaches the target height up and down; on its left stands the sort button. */\n.lintje-data-table__funnel {\n  position: relative;\n  width: var(--h-chip); height: var(--h-chip); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  margin-left: auto;\n  border: 1px solid transparent;\n  color: var(--color-text-muted);\n}\n.lintje-data-table__funnel::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-data-table__funnel:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }\n/* As wide as the row menus beside or under them, so their icons line up. */\n.lintje-data-table__chooser-button,\n.lintje-data-table__detail-toggle,\n.lintje-data-table__mobile-toggle {\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  margin-left: auto;\n  border: 1px solid transparent;\n  color: var(--color-text-muted);\n}\n.lintje-data-table__chooser-button:hover,\n.lintje-data-table__chooser-button[aria-expanded='true'],\n.lintje-data-table__detail-toggle:hover,\n.lintje-data-table__mobile-toggle:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }\n.lintje-data-table__funnel.is-filtered {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n}\n\n.lintje-data-table__filter-panel {\n  display: flex; flex-direction: column; gap: var(--space-3);\n  width: 260px; max-width: 100%;\n  padding: var(--space-4);\n  font: var(--text-table);\n  color: var(--color-text-primary);\n}\n.lintje-data-table__filter-name { font-size: 0.875rem; font-weight: 700; }\n.lintje-data-table__filter-options { display: flex; flex-direction: column; }\n.lintje-data-table__filter-option { min-height: var(--h-option); }\n.lintje-data-table__filter-count { margin-left: auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }\n.lintje-data-table__filter-search {\n  width: 100%; height: var(--h-control);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n}\n.lintje-data-table__filter-search::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n/* \"Wissen\" clears the field; it draws no cross of its own. */\n.lintje-data-table__filter-search::-webkit-search-cancel-button,\n.lintje-data-table__filter-search::-webkit-search-decoration { appearance: none; }\n.lintje-data-table__filter-actions {\n  display: flex; justify-content: flex-end; gap: var(--space-2);\n  padding-top: var(--space-1);\n}\n.lintje-data-table__filter-section {\n  display: flex; flex-direction: column; gap: var(--space-2);\n  margin-bottom: var(--space-6);\n}\n.lintje-data-table__chooser-note { font: var(--text-small); color: var(--color-text-muted); }\n\n/* The sizer: each column's widest value, with no height, so a sort or a page never moves a column. */\n.lintje-data-table__sizer .lintje-data-table__cell { height: 0; padding-block: 0; border: 0; }\n.lintje-data-table__sizer-box { height: 0; overflow: hidden; visibility: hidden; }\n\n/* --- A row's detail, groups and totals ------------------------------------- */\n.lintje-data-table__detail-cell { width: var(--h-icon-button); padding: 0; }\n.lintje-data-table__row.is-open { background: var(--color-bg-subtle); border-bottom-color: transparent; }\n.lintje-data-table__detail { border-bottom: 1px solid var(--color-border-default); }\n.lintje-data-table__detail-body { padding: 0 var(--space-3) var(--space-4) calc(var(--h-icon-button) + var(--space-3)); background: var(--color-bg-subtle); }\n\n/* A group's heading spans the name's column; collapsed, its other cells hold the subtotals. */\n.lintje-data-table__group-row { border-bottom: 1px solid var(--color-border-default); }\n.lintje-data-table__group-head { padding: 0; }\n.lintje-data-table__group-toggle {\n  display: flex; align-items: center; gap: var(--space-2);\n  width: 100%;\n  min-height: var(--h-table-row);\n  padding: 0 var(--space-3);\n  font: inherit; font-weight: 700; color: var(--color-text-primary); text-align: left;\n}\n.lintje-data-table__group-toggle:hover { background: var(--color-bg-subtle); }\n.lintje-data-table__group-toggle:focus-visible { outline-offset: -3px; }\n.lintje-data-table__group-count { font-weight: 400; font-size: 0.875rem; color: var(--color-text-muted); }\n.lintje-data-table__group-row .lintje-data-table__cell { font-weight: 700; }\n/* Rows in a group stand in from its heading, by the chevron's width and gap. */\n.lintje-data-table__row--in-group > .lintje-data-table__name { padding-left: calc(var(--space-3) + var(--space-4) + var(--space-2)); }\n\n/* A total is the host's: bold, over a heavy line, never sticky. The word before it says how. */\n.lintje-data-table__total > *,\n.lintje-data-table__subtotal > * { font-weight: 700; }\n.lintje-data-table__total { border-top: 2px solid var(--color-border-heavy); }\n.lintje-data-table__subtotal { border-top: 1px solid var(--color-border-heavy); border-bottom: 1px solid var(--color-border-default); }\n.lintje-data-table__sum-label { text-align: left; }\n.lintje-data-table__subtotal > .lintje-data-table__sum-label { font-weight: 400; color: var(--color-text-muted); }\n.lintje-data-table__full .lintje-data-table__subtotal > .lintje-data-table__sum-label { padding-left: calc(var(--space-3) + var(--space-4) + var(--space-2)); }\n.lintje-data-table__how { font-weight: 400; font-size: 0.875rem; color: var(--color-text-muted); }\n\n/* --- Below 768 px the representation switches ---------------------------- */\n/* Below 768 px, from the media controller's `is-phone`: WebKit does not re-apply a shadow root's\n   media query after a resize, and the script already decides by MOBILE. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__toolbar { padding: 0 var(--tile-pad-x) var(--space-3); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__toolbar--quiet { display: flex; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__sheet-button,\n:where(.lintje-data-table.is-phone) .lintje-data-table__sort-menu { display: inline-flex; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__selection--mobile { top: auto; bottom: 0; margin-top: var(--space-3); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__frame { display: none; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile { display: table; }\n.lintje-data-table:where(.is-phone) { margin: 0 calc(var(--tile-pad-x) * -1); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile { padding: 10px var(--tile-pad-x); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile.lintje-data-table__header-cell--sortable { padding: 0; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile .lintje-data-table__sort-button { padding: 0 var(--tile-pad-x); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-row { border-bottom: 1px solid var(--color-border-default); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-row--filler,\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-row.is-open { border-bottom-color: transparent; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-detail { border-bottom: 1px solid var(--color-border-default); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-detail > .lintje-data-table__mobile-cell { padding-top: 0; }\n/* The toggle and the row menu sit at the row's end, on the name's first line. Two classes, so the\n   cell padding below does not give the column its start back. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-cell.lintje-data-table__mobile-cell--actions,\n:where(.lintje-data-table.is-phone) .lintje-data-table__header-cell--mobile.lintje-data-table__mobile-cell--actions { width: 1%; padding-inline-start: 0; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-actions { display: flex; align-items: center; justify-content: flex-end; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-cell {\n  padding: var(--space-2) var(--tile-pad-x);\n  vertical-align: top;\n  font-weight: 400;\n}\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-name { display: block; font-size: 0.875rem; font-weight: 700; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-sub { display: block; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 2px; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-measure { display: block; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-status { display: block; font-size: 0.875rem; margin-top: 2px; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-status--within { color: var(--color-text-muted); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__mobile-status--outside { color: var(--color-error-text); font-weight: 700; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__pagination--full { display: none; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__pagination--mobile { display: block; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__pagination { padding: var(--space-3) var(--tile-pad-x) 0; }\n/* The phone shows two columns and lists the rest under a row: there is nothing to choose. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-row .lintje-data-table__mobile-cell { padding-block: 0; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-toggle { padding: 0; min-height: var(--h-target); }\n/* On a phone the name and the count run as text, so a long name wraps instead of widening the table. */\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-toggle { display: block; padding-block: var(--space-3); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-toggle .lintje-icon { vertical-align: -2px; margin-inline-end: var(--space-2); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-count { margin-inline-start: var(--space-2); }\n:where(.lintje-data-table.is-phone) .lintje-data-table__group-row .lintje-data-table__mobile-cell--align-right { vertical-align: middle; }\n:where(.lintje-data-table.is-phone) .lintje-data-table__total { border-top: 2px solid var(--color-border-heavy); }\n\n/* Paper: every column on the sheet, a row never split, and no control. Values wrap rather than\n   run off the edge. What the columns are filtered on stays, as the chips. */\n@media print {\n  /* Its own height, not the cell's: a tile split over two sheets measures its rows again. */\n  .lintje-data-table__tile { height: auto; }\n  /* Chromium repeats a head on the next sheet without its words, so the head stands once. */\n  .lintje-data-table__full thead { display: table-row-group; }\n  .lintje-data-table__scroller { overflow: visible; }\n  .lintje-data-table__frame::before,\n  .lintje-data-table__frame::after { display: none; }\n  .lintje-data-table__cell { white-space: normal; height: auto; padding-block: var(--space-2); }\n  .lintje-data-table__cell-text { max-width: none; white-space: normal; }\n  .lintje-data-table__row { break-inside: avoid; }\n  /* The count belongs to the rows above it, not alone on a sheet of its own. */\n  .lintje-data-table__pagination { break-before: avoid; }\n  .lintje-data-table__row--filler,\n  .lintje-data-table__check-cell,\n  .lintje-data-table__action-cell,\n  .lintje-data-table__sort-icon,\n  .lintje-data-table__funnel,\n  .lintje-data-table__tools,\n  .lintje-data-table__clear-all,\n  .lintje-data-table__detail-cell,\n  .lintje-data-table__chip-clear,\n  .lintje-data-table__selection,\n  .lintje-data-table__edit-icon { display: none; }\n  .lintje-data-table__open { color: inherit; text-decoration: none; }\n}\n\n/* Forced colours drop the selected row's fill and inset bar. A real 4 px border on the first\n   cell (Canvas at rest, Highlight when selected) replaces the bar without moving a column. */\n@media (forced-colors: active) {\n  .lintje-data-table__row > :first-child,\n  .lintje-data-table__mobile-row > :first-child { border-left: 4px solid Canvas; }\n  .lintje-data-table__row.is-selected > :first-child,\n  .lintje-data-table__mobile-row.is-selected > :first-child { border-left-color: Highlight; }\n  .lintje-data-table__header-cell.is-active { border-bottom-color: Highlight; }\n  .lintje-data-table__funnel.is-filtered { border-color: Highlight; }\n}\n";
 //#endregion
 //#region src/components/tables/data-table/editing.ts
 function te(e, t, n, r, i) {
@@ -143,14 +144,14 @@ var ne = 0, re = class {
 	}
 	content(e, t, n, r, i, a) {
 		let o = this.mode(e, n);
-		if (o.kind === "busy") return p`<span class="lintje-data-table__busy"
+		if (o.kind === "busy") return f`<span class="lintje-data-table__busy"
         ><lintje-spinner size="16"></lintje-spinner><span>${o.value}</span></span
       >`;
-		if (o.kind === "rest") return p`${r}${v("functioneel-bewerken", {
+		if (o.kind === "rest") return f`${r}${v("functioneel-bewerken", {
 			size: 14,
 			className: "lintje-data-table__edit-icon"
 		})}`;
-		let s = o.error ? `${this.#t}-${a.copy}-error-${a.ids.indexOf(e.id)}-${e.column}` : null, c = (t) => {
+		let s = o.error ? `${this.#t}-${a.copy}-error-${a.ids.indexOf(e.id)}-${e.column}` : null, l = (t) => {
 			let r = t.currentTarget;
 			t.stopPropagation(), t.key === "Escape" ? (t.preventDefault(), this.cancel(e)) : t.key === "Enter" ? (t.preventDefault(), this.commit(e, r.value, n, "down", a)) : t.key === "Tab" && (t.preventDefault(), this.commit(e, r.value, n, t.shiftKey ? "previous" : "next", a));
 		}, u = (t) => {
@@ -159,30 +160,30 @@ var ne = 0, re = class {
 			"lintje-data-table__editor": !0,
 			"focus-inset": !0,
 			"is-error": !!o.error
-		}), f = t.editor, m = f?.kind === "select" ? p`<select
+		}), p = t.editor, m = p?.kind === "select" ? f`<select
             class=${d}
             aria-label=${i}
-            aria-invalid=${o.error ? "true" : l}
-            aria-describedby=${s ?? l}
-            @keydown=${c}
+            aria-invalid=${o.error ? "true" : c}
+            aria-describedby=${s ?? c}
+            @keydown=${l}
             @blur=${u}
           >
-            ${(f.options ?? []).map((e) => p`<option value=${e.value} ?selected=${e.value === o.value}>
+            ${(p.options ?? []).map((e) => f`<option value=${e.value} ?selected=${e.value === o.value}>
                   ${e.label ?? e.value}
                 </option>`)}
-          </select>` : p`<input
+          </select>` : f`<input
             type="text"
             class=${d}
-            inputmode=${f?.kind === "number" ? "decimal" : l}
-            placeholder=${f?.kind === "date" ? "dd-mm-jjjj" : l}
+            inputmode=${p?.kind === "number" ? "decimal" : c}
+            placeholder=${p?.kind === "date" ? "dd-mm-jjjj" : c}
             aria-label=${i}
-            aria-invalid=${o.error ? "true" : l}
-            aria-describedby=${s ?? l}
+            aria-invalid=${o.error ? "true" : c}
+            aria-describedby=${s ?? c}
             .value=${o.value}
-            @keydown=${c}
+            @keydown=${l}
             @blur=${u}
           />`;
-		return p`${m}${o.error ? p`<span id=${s ?? l} class="lintje-data-table__edit-error">${o.error}</span>` : l}`;
+		return f`${m}${o.error ? f`<span id=${s ?? c} class="lintje-data-table__edit-error">${o.error}</span>` : c}`;
 	}
 	cellClasses(e, t) {
 		let n = this.mode(e, t);
@@ -196,7 +197,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 p`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
+		return f`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
       ><span class="visually-hidden" role="status">${this.message}</span>`;
 	}
 };
@@ -209,12 +210,12 @@ function ie(e, t, n) {
 	let [a, o] = i < r ? [i, r] : [r, i];
 	return e.slice(a, o + 1);
 }
-function ae(e, t) {
+function A(e, t) {
 	let n = new Set(e);
 	return [...e, ...t.filter((e) => !n.has(e))];
 }
-function A(e, t, n) {
-	return p`<lintje-menu-button
+function j(e, t, n) {
+	return f`<lintje-menu-button
     icon
     variant="tertiary"
     placement="bottom-end"
@@ -225,22 +226,22 @@ function A(e, t, n) {
 	}}
   ></lintje-menu-button>`;
 }
-function j(e, t, n, r, i) {
-	let a = n ? e.length > 0 ? p`<lintje-menu-button
+function ae(e, t, n, r, i) {
+	let a = n ? e.length > 0 ? f`<lintje-menu-button
           label="Acties"
           .items=${e}
           @lintje-action=${(e) => {
 		e.stopPropagation(), r(e.detail);
 	}}
-        ></lintje-menu-button>` : l : e.map((e) => p`<lintje-button
+        ></lintje-menu-button>` : c : e.map((e) => f`<lintje-button
             variant=${e.danger ? "danger-secondary" : "secondary"}
             size="compact"
-            icon=${e.icon ?? l}
+            icon=${e.icon ?? c}
             ?disabled=${!!e.disabled}
             @click=${() => r(e.value)}
             >${e.label}</lintje-button
           >`);
-	return p`<div
+	return f`<div
     class="lintje-data-table__selection ${n ? "lintje-data-table__selection--mobile" : ""}"
     role="toolbar"
     aria-label="Acties op de selectie"
@@ -268,15 +269,15 @@ function N(e) {
 function oe(e, t) {
 	return e.filter?.options?.find((e) => e.value === t)?.label ?? t;
 }
-function se(e, t) {
+function P(e, t) {
 	let n = Array.isArray(t) ? t.map((t) => oe(e, t)).join(", ") : `‘${t}’`;
 	return `${e.header}: ${n}`;
 }
-function P(e, t) {
+function F(e, t) {
 	let n = `Filter op ${e.header.toLocaleLowerCase("nl")}`;
 	return M(t) ? Array.isArray(t) ? `${n}, ${t.length} gekozen` : `${n}, ‘${t}’` : n;
 }
-function F(e, t, n) {
+function I(e, t, n) {
 	let [r, ...i] = e;
 	if (!r) return [];
 	let a = new Set(n), o = new Map((t ?? []).map((e, t) => [e, t]));
@@ -285,18 +286,18 @@ function F(e, t, n) {
 		index: t
 	})).sort((e, t) => (o.get(e.column.key) ?? o.size + e.index) - (o.get(t.column.key) ?? o.size + t.index)).map((e) => e.column).filter((e) => !a.has(e.key))];
 }
-function ce(e, t, n) {
+function se(e, t, n) {
 	let r = new Set(n);
 	return {
 		order: [e, ...t],
 		hidden: t.filter((e) => !r.has(e))
 	};
 }
-function I(e, t) {
+function L(e, t) {
 	return {
 		focusout: (n) => {
 			let r = n.relatedTarget, i = n.currentTarget, a = i.getRootNode().host;
-			!r || r === e || i.contains(r) || u(a, r) || t("away");
+			!r || r === e || i.contains(r) || l(a, r) || t("away");
 		},
 		keydown: (e) => {
 			if (e.key !== "Tab" || e.defaultPrevented) return;
@@ -305,16 +306,16 @@ function I(e, t) {
 		}
 	};
 }
-function le(e, t, n, r) {
+function ce(e, t, n, r) {
 	let i = M(t);
-	return p`<button
+	return f`<button
       type="button"
       class=${_({
 		"lintje-data-table__funnel": !0,
 		"is-filtered": i
 	})}
       data-column=${e.key}
-      aria-label=${P(e, t)}
+      aria-label=${F(e, t)}
       aria-haspopup="dialog"
       aria-expanded=${n ? "true" : "false"}
       @click=${(e) => r(e.currentTarget)}
@@ -322,8 +323,8 @@ function le(e, t, n, r) {
       ${v("functioneel-trechter", { size: 14 })}
     </button>`;
 }
-function L(e, t, n) {
-	if (e.filter?.kind === "text") return p`<input
+function R(e, t, n) {
+	if (e.filter?.kind === "text") return f`<input
       type="search"
       class="lintje-data-table__filter-search"
       aria-label=${`Zoek in ${e.header.toLocaleLowerCase("nl")}`}
@@ -331,8 +332,8 @@ function L(e, t, n) {
       @input=${(e) => n(e.target.value)}
     />`;
 	let r = new Set(Array.isArray(t) ? t : []);
-	return p`<div class="lintje-data-table__filter-options">
-    ${(e.filter?.options ?? []).map((e) => p`<label class="lintje-choice lintje-data-table__filter-option">
+	return f`<div class="lintje-data-table__filter-options">
+    ${(e.filter?.options ?? []).map((e) => f`<label class="lintje-choice lintje-data-table__filter-option">
         <input
           type="checkbox"
           class="lintje-choice__input"
@@ -346,16 +347,16 @@ 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 : p`<span class="lintje-data-table__filter-count">${e.count}</span>`}
+        ${e.count == null ? c : f`<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 p`<lintje-popover
+function le(e) {
+	let { column: t } = e, n = L(e.anchor, e.onLeave);
+	return f`<lintje-popover
     open
     panel-role="dialog"
-    label=${P(t, null)}
+    label=${F(t, null)}
     .anchor=${e.anchor}
     @focusout=${n.focusout}
     @keydown=${n.keydown}
@@ -365,7 +366,7 @@ function ue(e) {
   >
     <div class="lintje-data-table__filter-panel">
       <div class="lintje-data-table__filter-name">${t.header}</div>
-      ${L(t, e.draft, e.onDraft)}
+      ${R(t, e.draft, e.onDraft)}
       <div class="lintje-data-table__filter-actions">
         <lintje-button variant="tertiary" size="compact" @click=${e.onClear}>Wissen</lintje-button>
         <lintje-button variant="primary" size="compact" @click=${e.onApply}>Toepassen</lintje-button>
@@ -373,17 +374,17 @@ function ue(e) {
     </div>
   </lintje-popover>`;
 }
-function R(e) {
-	return p`<lintje-drawer
+function ue(e) {
+	return f`<lintje-drawer
     open
     heading="Filters"
     @lintje-close=${(t) => {
 		t.stopPropagation(), e.onClose();
 	}}
   >
-    ${e.columns.map((t) => p`<section class="lintje-data-table__filter-section">
+    ${e.columns.map((t) => f`<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))}
+        ${R(t, e.draft[t.key], (n) => e.onDraft(t.key, n))}
       </section>`)}
     <lintje-button slot="footer" variant="tertiary" @click=${e.onClear}>Wissen</lintje-button>
     <lintje-button slot="footer" variant="primary" @click=${e.onApply}>Toepassen</lintje-button>
@@ -391,46 +392,46 @@ function R(e) {
 }
 function z(e) {
 	let t = e.columns.filter((t) => M(e.values[t.key])), n = t.length === 0 && !e.chooser;
-	return p`<div
+	return f`<div
     class="lintje-data-table__toolbar ${n ? "lintje-data-table__toolbar--quiet" : ""}"
   >
     <div class="lintje-data-table__chips">
-      ${e.columns.length > 0 ? p`<lintje-button
+      ${e.columns.length > 0 ? f`<lintje-button
               class="lintje-data-table__sheet-button"
               variant="secondary"
               size="compact"
               icon="functioneel-filters"
               @click=${e.onOpenSheet}
               >Filters</lintje-button
-            >` : l}
-      ${e.sortMenu ?? l}
+            >` : c}
+      ${e.sortMenu ?? c}
       ${t.map((t) => {
 		let n = e.values[t.key];
-		return p`<span class="lintje-data-table__chip"
-          >${se(t, n)}<button
+		return f`<span class="lintje-data-table__chip"
+          >${P(t, n)}<button
             type="button"
             class="lintje-data-table__chip-clear"
-            aria-label=${`${P(t, null)} wissen`}
+            aria-label=${`${F(t, null)} wissen`}
             @click=${(n) => e.onClearFilter(t.key, n.currentTarget)}
           >
             ${v("functioneel-kruis", { size: 12 })}
           </button></span
         >`;
 	})}
-      ${t.length > 1 ? p`<button
+      ${t.length > 1 ? f`<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 ? p`<span class="lintje-data-table__filter-total">${e.count}</span>` : l}
+            </button>` : c}
+      ${e.count ? f`<span class="lintje-data-table__filter-total">${e.count}</span>` : c}
     </div>
-    ${e.chooser ?? l}
+    ${e.chooser ?? c}
   </div>`;
 }
 function B(e, t) {
-	return p`<lintje-tooltip text="Kolommen kiezen" no-describe
+	return f`<lintje-tooltip text="Kolommen kiezen" no-describe
     ><button
       type="button"
       class="lintje-data-table__chooser-button"
@@ -444,8 +445,8 @@ function B(e, t) {
   >`;
 }
 function V(e) {
-	let t = I(e.anchor, e.onLeave);
-	return p`<lintje-popover
+	let t = L(e.anchor, e.onLeave);
+	return f`<lintje-popover
     open
     panel-role="dialog"
     label="Kolommen kiezen"
@@ -515,7 +516,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 ? "+" : ""}${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;
+	return n = typeof t == "string" || e.format === "text" ? String(t) : e.format === "change" || e.format === "change-compact" ? `${t > 0 ? "▲" : t < 0 ? "▼" : "●"} ${t > 0 ? "+" : ""}${u(t, e.decimals ?? 0)}%` : e.format === "percent" ? h(t, e.decimals ?? 0) : e.format === "decimal" ? u(t, e.decimals ?? 1) : u(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
 }
 function K(e, t) {
 	let n = e.threshold;
@@ -538,7 +539,7 @@ function he(e, t) {
 	return me.has(n) ? n : null;
 }
 function J(e) {
-	return p`<span class="lintje-data-table__sort-icon" aria-hidden="true"
+	return f`<span class="lintje-data-table__sort-icon" aria-hidden="true"
     ><span class=${_({
 		"lintje-data-table__sort-up": !0,
 		"is-on": e === "asc",
@@ -564,7 +565,7 @@ function ge(e) {
 		unit: e.unit
 	};
 }
-var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
+var Z = f`<span aria-hidden="true" class="lintje-data-table__muted">—</span
   ><span class="visually-hidden">geen gegevens</span>`, Q = class {
 	#e;
 	#t;
@@ -582,7 +583,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	disconnect() {
 		this.#e?.removeEventListener("scroll", this.measure), this.#t?.disconnect(), this.#e = null, this.#t = null;
 	}
-}, $ = class extends T {
+}, $ = class extends C {
 	constructor(...e) {
 		super(...e), this.bare = !1, this.plain = !1, this.sort = null, this.checkedIds = [], this.page = 0, this.mobilePage = 0, this.#e = new t(this), this.#t = new Q(() => this.requestUpdate()), this.#n = new Q(() => this.requestUpdate()), this.#r = JSON.stringify(null), this.#i = JSON.stringify([]), this.filterValues = {}, this.filterDraft = {}, this.columnOrder = null, this.hiddenKeys = [], this.panel = null, this.openRows = [], this.collapsedGroups = [], this.liveMessage = "", this.#a = 0, this.#o = !1, this.#s = new re({
 			requestUpdate: () => this.requestUpdate(),
@@ -598,15 +599,15 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	static {
 		this.styles = [
-			f,
+			d,
 			s,
 			e,
 			o(g),
 			o(S),
 			o(n),
 			o(x),
-			ee,
-			o(D)
+			D,
+			o(ee)
 		];
 	}
 	static {
@@ -804,7 +805,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		let n = t[e.key];
 		if (e.format === "label" && n != null) return G(e, n) ?? "";
 		if (e.editor?.kind === "date") {
-			let e = C(String(n ?? ""));
+			let e = T(String(n ?? ""));
 			return e.kind === "ok" ? e.iso : "";
 		}
 		return n ?? (W(e, this.rows) ? -Infinity : "");
@@ -851,7 +852,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		this.checkedIds = e, this.emit("lintje-checked-change", e), this.data?.bulkActions && this.announce(e.length > 0 ? `${e.length} geselecteerd` : "Selectie opgeheven");
 	}
 	get shown() {
-		let e = this.groupColumn, t = !this.data?.columnChooser && this.hiddenKeys.length === 0 ? this.columns : F(this.columns, this.columnOrder, this.hiddenKeys);
+		let e = this.groupColumn, t = !this.data?.columnChooser && this.hiddenKeys.length === 0 ? this.columns : I(this.columns, this.columnOrder, this.hiddenKeys);
 		return e ? t.filter((t) => t !== e) : t;
 	}
 	get filterColumns() {
@@ -905,7 +906,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		o && y(o).focus();
 	}
 	chooserItems() {
-		let e = this.groupColumn, [, ...t] = F(this.columns, this.columnOrder, []).filter((t) => t !== e), n = JSON.stringify([t.map((e) => e.key), this.hiddenKeys]);
+		let e = this.groupColumn, [, ...t] = I(this.columns, this.columnOrder, []).filter((t) => t !== e), n = JSON.stringify([t.map((e) => e.key), this.hiddenKeys]);
 		if (n !== this.#p.seen) {
 			let e = new Set(this.hiddenKeys);
 			this.#p = {
@@ -922,7 +923,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	changeColumns(e, t) {
 		let n = this.columns[0];
 		if (!n) return;
-		let r = ce(n.key, e, t);
+		let r = se(n.key, e, t);
 		this.columnOrder = e, this.hiddenKeys = r.hidden, this.emit("lintje-columns-change", r);
 	}
 	get columnsAreDefault() {
@@ -950,25 +951,25 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	render() {
 		let e = this.data;
-		if (!e) return l;
+		if (!e) return c;
 		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 p`<lintje-tile
+		return f`<lintje-tile
       class="lintje-data-table__tile"
       breakable
-      id=${this.id ? `${this.id}-tile` : l}
-      span=${e.span ?? l}
-      heading=${e.title ?? l}
-      icon=${e.icon ?? l}
-      subtitle=${n ?? l}
-      intro=${e.intro ?? l}
-      footnote=${e.footnote ?? l}
+      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}
       ?expandable=${!!e.expandable && t}
       ?download=${!!e.download && t}
       state=${e.state ?? "ready"}
-      message=${e.message ?? l}
-      last-known=${e.lastKnown ?? l}
+      message=${e.message ?? c}
+      last-known=${e.lastKnown ?? c}
       @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
 		}}
@@ -976,11 +977,11 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			e.stopPropagation(), this.csv();
 		}}
     >
-      ${e.notice ? p`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : l}
+      ${e.notice ? f`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : c}
       ${this.content(!0)}
     </lintje-tile>
 
-    ${this.renderExpandModal(this.expanded && t ? this.table(this.#n) : l, {
+    ${this.renderExpandModal(this.expanded && t ? this.table(this.#n) : c, {
 			heading: e.title,
 			subtitle: n,
 			footnote: e.footnote,
@@ -991,7 +992,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		let e = this.data;
 		if (!e?.download) return;
 		let t = (e, t) => e.format === "label" && t != null ? G(e, t) : t, n = e.totals;
-		E(e.download.filename, [
+		w(e.download.filename, [
 			e.columns.map((e) => e.header),
 			...e.rows.map((n) => e.columns.map((e) => t(e, n[e.key]))),
 			...n ? [e.columns.map((r, i) => i === 0 ? e.totalsLabel ?? "Totaal" : t(r, X(n[r.key]).value))] : []
@@ -1000,12 +1001,12 @@ var Z = p`<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 ? p`<div slot="loading">${w({
+			case "loading": return e ? f`<div slot="loading">${E({
 				kind: "table",
 				status: !1
-			})}</div>` : w({ kind: "table" });
-			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
+			})}</div>` : E({ kind: "table" });
+			case "empty": return e ? c : f`<lintje-empty-state compact status text=${t.message ?? c}></lintje-empty-state>`;
+			case "error": return e ? c : f`<lintje-announcement
               compact
               .data=${{
 				kind: "warning",
@@ -1017,18 +1018,18 @@ var Z = p`<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), 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 ? {
+		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, l = i ? this.groupsPerPage : H, u = Math.ceil(o / s), d = Math.ceil(o / l), m = a.slice(this.page * s, (this.page + 1) * s), h = a.slice(this.mobilePage * l, (this.mobilePage + 1) * l), g = new Set(this.collapsedGroups), v = i ? m.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 p`<div class=${_({
+		return f`<div class=${_({
 			"lintje-data-table": !0,
 			"is-phone": r
 		})}>
-      ${this.toolbar(e, x)} ${r ? l : this.selectionBar(!1)}
+      ${this.toolbar(e, x)} ${r ? c : this.selectionBar(!1)}
       <!-- Desktop table: scrolls sideways when it is wider than the tile -->
       <div
         class=${_({
@@ -1039,12 +1040,12 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
       >
         <div
           class="lintje-data-table__scroller"
-          ${m(e.watch)}
-          tabindex=${T ? 0 : l}
-          role=${T ? "region" : l}
-          aria-label=${T ? this.data?.caption ?? l : l}
+          ${p(e.watch)}
+          tabindex=${T ? 0 : c}
+          role=${T ? "region" : c}
+          aria-label=${T ? this.data?.caption ?? c : c}
         >
-          ${this.fullTable(v, u, s, e, i ? f : null)}
+          ${this.fullTable(v, u, s, e, i ? m : null)}
         </div>
       </div>
 
@@ -1052,12 +1053,12 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
       ${this.mobileTable(b, d, w, i ? h : null)}
       ${u > 1 ? this.pager("full", this.page, u, s, o, S, (e) => {
 			this.page = e;
-		}) : l}
-      ${d > 1 ? this.pager("mobile", this.mobilePage, d, c, o, S, (e) => {
+		}) : c}
+      ${d > 1 ? this.pager("mobile", this.mobilePage, d, l, o, S, (e) => {
 			this.mobilePage = e;
-		}) : l}
-      ${r ? this.selectionBar(!0) : l} ${this.panels(e)}
-      ${C && this.columns.some((e) => e.editor) ? this.#s.renderStatus() : l}
+		}) : c}
+      ${r ? this.selectionBar(!0) : c} ${this.panels(e)}
+      ${C && this.columns.some((e) => e.editor) ? this.#s.renderStatus() : c}
       <span class="visually-hidden" role="status">${C ? this.liveMessage : ""}</span>
     </div>`;
 	}
@@ -1066,8 +1067,8 @@ var Z = p`<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 : p`<div class="lintje-data-table__tools">${r}</div>`;
-		return this.filterColumns.length === 0 && n === l && !i ? l : z({
+		let n = this.sortMenu(), r = this.groupToggle(), i = r === c ? void 0 : f`<div class="lintje-data-table__tools">${r}</div>`;
+		return this.filterColumns.length === 0 && n === c && !i ? c : z({
 			columns: this.filterColumns,
 			values: this.filterValues,
 			count: t ? "" : this.filteredCount,
@@ -1082,9 +1083,9 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		});
 	}
 	groupToggle() {
-		if (!this.grouped) return l;
+		if (!this.grouped) return c;
 		let e = this.groupsOf(this.rows).map((e) => e.key), t = new Set(this.collapsedGroups), n = e.some((e) => !t.has(e));
-		return p`<button
+		return f`<button
       type="button"
       class="lintje-button lintje-button--tertiary lintje-button--compact lintje-data-table__group-all"
       @click=${() => {
@@ -1096,7 +1097,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	sortMenu() {
 		let e = this.shown.filter((e) => e.sortable !== !1), [t] = this.shown, n = this.mobileMeasure;
-		if (!e.some((e) => e !== t && e !== n)) return l;
+		if (!e.some((e) => e !== t && e !== n)) return c;
 		let r = this.activeSort, i = [
 			{ heading: "Sorteren op" },
 			...e.map((e) => ({
@@ -1119,7 +1120,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 				checked: r.direction === "desc"
 			}
 		];
-		return p`<lintje-menu-button
+		return f`<lintje-menu-button
       class="lintje-data-table__sort-menu"
       label="Sorteren"
       .items=${i}
@@ -1144,14 +1145,14 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	selectionBar(e) {
 		let t = this.data;
-		return !t.selectable || !t.bulkActions || this.checkedIds.length === 0 ? l : j(t.bulkActions, this.checkedIds.length, e, (e) => this.emit("lintje-bulk-action", {
+		return !t.selectable || !t.bulkActions || this.checkedIds.length === 0 ? c : ae(t.bulkActions, this.checkedIds.length, e, (e) => this.emit("lintje-bulk-action", {
 			ids: [...this.checkedIds],
 			action: e
 		}), () => this.setChecked([]));
 	}
 	panels(e) {
 		let t = this.panel;
-		if (!t || t.edges !== e) return l;
+		if (!t || t.edges !== e) return c;
 		if (t.kind === "columns") {
 			let e = this.columns[0];
 			return e ? V({
@@ -1164,11 +1165,11 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 				isDefault: this.columnsAreDefault,
 				onClose: () => this.closePanel(t),
 				onLeave: (e) => this.leavePanel(t, e)
-			}) : l;
+			}) : c;
 		}
 		if (t.kind === "sheet") {
 			let e = this.filterColumns;
-			return R({
+			return ue({
 				columns: e,
 				draft: this.filterDraft,
 				onDraft: (e, t) => {
@@ -1183,7 +1184,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			});
 		}
 		let n = this.columns.find((e) => e.key === t.column);
-		return n ? ue({
+		return n ? le({
 			column: n,
 			anchor: this.#u,
 			draft: this.filterDraft[n.key],
@@ -1197,57 +1198,57 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			onClear: () => this.applyFilters([n.key], !0),
 			onClose: () => this.closePanel(t),
 			onLeave: (e) => this.leavePanel(t, e)
-		}) : l;
+		}) : c;
 	}
 	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, 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 = {
+		let a = this.data, o = this.shown, s = !!a.selectable, l = 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 = {
 			ids: e.map((e) => this.rowKey(e)),
 			columns: o,
 			offset: m,
-			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">
+			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">
       <caption class="visually-hidden">${a.caption}</caption>
       <thead>
         <tr>
-          ${s ? p`<th
+          ${s ? f`<th
                 scope="col"
                 class="lintje-data-table__header-cell lintje-data-table__check-cell"
               >
                 ${this.headerCheck()}
-              </th>` : l}
-          ${d ? p`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__detail-cell">
+              </th>` : c}
+          ${d ? f`<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 ? p`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
-                  ${u ? p`<span class="visually-hidden">Acties</span>` : l}
+                </th>` : c}
+          ${o.map((e) => this.headerCell(e, l, 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>` : c}
                   ${a.columnChooser ? B(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
 			kind: "columns",
 			edges: r
-		}, e)) : l}
-                </th>` : l}
+		}, e)) : c}
+                </th>` : c}
         </tr>
       </thead>
       ${i ? (() => {
 			let e = 0;
 			return i.map((t) => {
 				let n = !this.collapsedGroups.includes(t.key), r = e;
-				return e += n ? t.rows.length : 0, p`<tbody class="lintje-data-table__group">
+				return e += n ? t.rows.length : 0, f`<tbody class="lintje-data-table__group">
                   ${this.groupRow(t, n)}
-                  ${n ? _(t.rows, r, !0) : l}
-                  ${n ? this.subtotalRow(t, o) : l}
+                  ${n ? _(t.rows, r, !0) : c}
+                  ${n ? this.subtotalRow(t, o) : c}
                 </tbody>`;
 			});
-		})() : p`<tbody>
+		})() : f`<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 }, () => p`<tr
+              ${t > 1 ? Array.from({ length: n - e.length }, () => f`<tr
                         class="lintje-data-table__row lintje-data-table__row--filler"
                         aria-hidden="true"
                       >
                         <td class="lintje-data-table__cell" colspan=${g}></td>
-                      </tr>`) : l}
+                      </tr>`) : c}
             </tbody>`}
       ${this.sizerRow(o)}
       ${this.totalsRow(o, a.totals, a.totalsLabel ?? "Totaal")}
@@ -1255,13 +1256,13 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	sizerRow(e) {
 		let t = this.data, n = this.widestRow(e);
-		return p`<tbody class="lintje-data-table__sizer" aria-hidden="true">
+		return f`<tbody class="lintje-data-table__sizer" aria-hidden="true">
       <tr class=${_({ "lintje-data-table__row--in-group": this.grouped })}>
-        ${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}
+        ${t.selectable ? f`<td class="lintje-data-table__cell lintje-data-table__check-cell"></td>` : c}
+        ${this.detailColumns.length > 0 ? f`<td class="lintje-data-table__cell lintje-data-table__detail-cell"></td>` : c}
         ${e.map((e, t) => {
 			let r = n[e.key] ?? null;
-			return p`<td
+			return f`<td
             class=${_({
 				"lintje-data-table__cell": !0,
 				"lintje-data-table__name": t === 0,
@@ -1274,7 +1275,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
             </div>
           </td>`;
 		})}
-        ${this.actionColumn ? p`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
+        ${this.actionColumn ? f`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : c}
       </tr>
     </tbody>`;
 	}
@@ -1296,7 +1297,7 @@ var Z = p`<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 : p`<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 : f`<button
             type="button"
             class="lintje-data-table__sort-button"
             @click=${() => this.toggleSort(e)}
@@ -1304,7 +1305,7 @@ var Z = p`<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 p`<th
+		return f`<th
       scope="col"
       class=${_({
 			"lintje-data-table__header-cell": !0,
@@ -1316,8 +1317,8 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 		})}
       aria-sort=${r ? t.direction === "asc" ? "ascending" : "descending" : "none"}
     >
-      ${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({
+      ${e.filter ? f`<span class="lintje-data-table__header-inner"
+              >${o}${ce(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,
 			edges: n
@@ -1332,34 +1333,34 @@ var Z = p`<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, 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
+		let a = this.data, o = this.shown, s = !!a.selectable, l = !!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
         class=${_({
 			"lintje-data-table__row": !0,
 			"lintje-data-table__row--in-group": i,
-			"is-clickable": c,
+			"is-clickable": l,
 			"is-selected": m,
 			"is-checked": h,
 			"is-open": g
 		})}
-        tabindex=${c ? 0 : l}
-        aria-selected=${c ? m : l}
-        @click=${c ? () => this.emit("lintje-row-click", this.rowDetail(e)) : l}
-        @keydown=${c ? (t) => this.rowKeydown(t, e) : l}
+        tabindex=${l ? 0 : c}
+        aria-selected=${l ? m : c}
+        @click=${l ? () => this.emit("lintje-row-click", this.rowDetail(e)) : c}
+        @keydown=${l ? (t) => this.rowKeydown(t, e) : c}
       >
-        ${s ? p`<td class="lintje-data-table__cell lintje-data-table__check-cell">
-              ${this.rowCheck(e, f, h)}
-            </td>` : l}
-        ${d.length > 0 ? p`<td
+        ${s ? f`<td class="lintje-data-table__cell lintje-data-table__check-cell">
+              ${this.rowCheck(e, p, h)}
+            </td>` : c}
+        ${d.length > 0 ? f`<td
                 class="lintje-data-table__cell lintje-data-table__detail-cell"
                 @click=${(e) => e.stopPropagation()}
                 @keydown=${(e) => e.stopPropagation()}
               >
                 ${this.rowToggle(e, g, v, "lintje-data-table__detail-toggle")}
-              </td>` : l}
+              </td>` : c}
         ${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 ? p`<th
+			return r.editor ? this.editableCell(e, t, r, i === 0, s, o, n) : i === 0 ? f`<th
                 scope="row"
                 class=${_({
 				"lintje-data-table__cell": !0,
@@ -1368,7 +1369,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			})}
               >
                 ${this.opener(e, o)}
-              </th>` : p`<td
+              </th>` : f`<td
                 class=${_({
 				"lintje-data-table__cell": !0,
 				"lintje-data-table__cell--align-right": s,
@@ -1378,26 +1379,26 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
                 ${o}
               </td>`;
 		})}
-        ${u ? p`<td
+        ${u ? f`<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: f,
+                ${j(u, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
+			id: p,
 			action: e
 		}))}
-              </td>` : this.actionColumn ? p`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
+              </td>` : this.actionColumn ? f`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : c}
       </tr>
-      ${d.length > 0 ? p`<tr class="lintje-data-table__detail" id=${v} ?hidden=${!g}>
+      ${d.length > 0 ? f`<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}
+                ${g ? this.detailList(e, d, "grid") : c}
               </td>
-            </tr>` : l}`;
+            </tr>` : c}`;
 	}
 	rowToggle(e, t, n, r) {
 		let { id: i, label: a } = this.rowDetail(e);
-		return p`<button
+		return f`<button
       type="button"
       class=${r}
       aria-label=${`Alle gegevens van ${a}`}
@@ -1413,7 +1414,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 	}
 	detailList(e, t, n) {
 		let r = Math.ceil(t.length / 4);
-		return p`<lintje-description-list
+		return f`<lintje-description-list
       layout=${n}
       .columns=${Math.ceil(t.length / r)}
       .items=${t.map((t) => ({
@@ -1423,7 +1424,7 @@ var Z = p`<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 = p`<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, l = f`<button
       type="button"
       class="lintje-data-table__group-toggle"
       aria-expanded=${t ? "true" : "false"}
@@ -1436,74 +1437,74 @@ var Z = p`<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 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>
+		return f`<tr class="lintje-data-table__group-row">
+      ${a > 0 ? f`<td class="lintje-data-table__cell" colspan=${a}></td>` : c}
+      <th scope="rowgroup" class="lintje-data-table__cell lintje-data-table__group-head">${l}</th>
       ${i.slice(1).map((e) => this.totalCell(e, t ? void 0 : o?.[e.key]))}
-      ${this.actionColumn ? p`<td class="lintje-data-table__cell"></td>` : l}
+      ${this.actionColumn ? f`<td class="lintje-data-table__cell"></td>` : c}
     </tr>`;
 	}
 	subtotalRow(e, t) {
 		let n = this.data?.groupTotals?.[e.key];
-		if (!n) return l;
+		if (!n) return c;
 		let r = this.groupColumn, i = G(r, e.value) ?? "Zonder waarde";
 		return this.sumRow("lintje-data-table__subtotal", `Subtotaal ${i}`, t, n);
 	}
 	totalsRow(e, t, n) {
-		return t ? p`<tfoot>${this.sumRow("lintje-data-table__total", n, e, t)}</tfoot>` : l;
+		return t ? f`<tfoot>${this.sumRow("lintje-data-table__total", n, e, t)}</tfoot>` : c;
 	}
 	sumRow(e, t, n, r) {
 		let i = +!!this.data.selectable + +(this.detailColumns.length > 0);
-		return p`<tr class=${e}>
-      ${i > 0 ? p`<td class="lintje-data-table__cell" colspan=${i}></td>` : l}
+		return f`<tr class=${e}>
+      ${i > 0 ? f`<td class="lintje-data-table__cell" colspan=${i}></td>` : c}
       <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 ? p`<td class="lintje-data-table__cell"></td>` : l}
+      ${this.actionColumn ? f`<td class="lintje-data-table__cell"></td>` : c}
     </tr>`;
 	}
 	totalCell(e, t) {
 		let n = t === void 0;
-		return p`<td
+		return f`<td
       class=${_({
 			"lintje-data-table__cell": !0,
 			"lintje-data-table__cell--align-right": this.alignsRight(e)
 		})}
     >
-      ${n ? l : this.totalContent(e, t)}
+      ${n ? c : this.totalContent(e, t)}
     </td>`;
 	}
 	editableCell(e, t, n, r, i, a, o) {
-		let s = this.#s, c = {
+		let s = this.#s, l = {
 			id: this.rowKey(e),
 			column: n.key
-		}, u = e[n.key] ?? null, d = s.mode(c, u).kind, f = _({
+		}, u = e[n.key] ?? null, d = s.mode(l, u).kind, p = _({
 			"lintje-data-table__cell": !0,
 			"lintje-data-table__name": r,
 			"lintje-data-table__cell--align-right": i,
 			"lintje-data-table__cell--truncate": n.truncate === !0,
 			"focus-inset": !0,
-			...s.cellClasses(c, u)
-		}), m = s.content(c, n, u, a, `${n.header} van rij ${o.offset + t + 1}`, o), h = (e) => {
-			s.editable(c, n) && s.cellKeydown(c, e);
+			...s.cellClasses(l, u)
+		}), m = s.content(l, n, u, a, `${n.header} van rij ${o.offset + t + 1}`, o), h = (e) => {
+			s.editable(l, n) && s.cellKeydown(l, e);
 		}, 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 ? p`<th
+			d === "rest" && s.editable(l, n) && s.open(l, e.currentTarget);
+		}, v = (e) => e.stopPropagation(), y = d === "editor" ? -1 : 0, b = O(l);
+		return r ? f`<th
           scope="row"
-          class=${f}
+          class=${p}
           tabindex=${y}
           data-cell=${b}
-          aria-describedby=${d === "rest" ? s.hintId : l}
+          aria-describedby=${d === "rest" ? s.hintId : c}
           @keydown=${h}
           @dblclick=${g}
           @click=${v}
         >
           ${m}
-        </th>` : p`<td
-          class=${f}
+        </th>` : f`<td
+          class=${p}
           tabindex=${y}
           data-cell=${b}
-          aria-describedby=${d === "rest" ? s.hintId : l}
+          aria-describedby=${d === "rest" ? s.hintId : c}
           @keydown=${h}
           @dblclick=${g}
           @click=${v}
@@ -1512,10 +1513,10 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
         </td>`;
 	}
 	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 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">
+		let i = this.data, a = this.shown, o = !!i.selectable, s = a[0], l = this.mobileMeasure, u = this.activeSort;
+		if (!s || !l) return f`<table class="lintje-data-table__mobile"></table>`;
+		let d = i.rowActions?.length ? i.rowActions : null, p = [...a.filter((e) => e !== s && e !== l), ...this.detailColumns], m = !!d || p.length > 0, h = m ? 3 : 2, g = u.key === l.key;
+		return f`<table class="lintje-data-table__mobile">
       <caption class="visually-hidden">${i.caption}</caption>
       <thead>
         <tr>
@@ -1523,7 +1524,7 @@ var Z = p`<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 ? p`<span class="lintje-data-table__mobile-check"
+            ${o ? f`<span class="lintje-data-table__mobile-check"
                   >${this.headerCheck()}${s.header}</span
                 >` : s.header}
           </th>
@@ -1533,65 +1534,65 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			"lintje-data-table__header-cell": !0,
 			"lintje-data-table__header-cell--mobile": !0,
 			"lintje-data-table__header-cell--align-right": !0,
-			"lintje-data-table__header-cell--sortable": c.sortable !== !1,
+			"lintje-data-table__header-cell--sortable": l.sortable !== !1,
 			"is-active": g
 		})}
-            aria-sort=${c.sortable === !1 ? l : g ? u.direction === "asc" ? "ascending" : "descending" : "none"}
+            aria-sort=${l.sortable === !1 ? c : g ? u.direction === "asc" ? "ascending" : "descending" : "none"}
           >
-            ${c.sortable === !1 ? c.header : p`<button
+            ${l.sortable === !1 ? l.header : f`<button
                   type="button"
                   class="lintje-data-table__sort-button"
-                  @click=${() => this.toggleSort(c)}
+                  @click=${() => this.toggleSort(l)}
                 >
-                  <span class="lintje-data-table__sort-label">${c.header}</span>
+                  <span class="lintje-data-table__sort-label">${l.header}</span>
                   ${J(g ? u.direction : null)}
                 </button>`}
           </th>
-          ${m ? p`<th
+          ${m ? f`<th
                   scope="col"
                   class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile lintje-data-table__mobile-cell--actions"
                 >
                   <span class="visually-hidden">${d ? "Acties" : "Meer gegevens"}</span>
-                </th>` : l}
+                </th>` : c}
         </tr>
       </thead>
       ${r ? r.map((e) => {
 			let t = !this.collapsedGroups.includes(e.key);
-			return p`<tbody class="lintje-data-table__group">
-                ${this.mobileGroupRow(e, t, c, h)}
-                ${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}
+			return f`<tbody class="lintje-data-table__group">
+                ${this.mobileGroupRow(e, t, l, h)}
+                ${t ? e.rows.map((e) => this.mobileRow(e, n, p, m, h, l)) : c}
+                ${t && i.groupTotals?.[e.key] ? this.mobileSumRow("lintje-data-table__subtotal", `Subtotaal ${G(this.groupColumn, e.value) ?? "Zonder waarde"}`, i.groupTotals[e.key]?.[l.key], l, h) : c}
               </tbody>`;
-		}) : p`<tbody>
-              ${e.map((e) => this.mobileRow(e, n, f, m, h, c))}
+		}) : f`<tbody>
+              ${e.map((e) => this.mobileRow(e, n, p, m, h, l))}
               <!-- 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 }, () => p`<tr
+              ${t > 1 ? Array.from({ length: H - e.length }, () => f`<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 ? p`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : l}
+                          ${this.hasSubline ? f`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : c}
                         </td>
                         <td class="lintje-data-table__mobile-cell" colspan=${h - 1}>
                           <span class="lintje-data-table__mobile-measure">&nbsp;</span>
-                          ${c.threshold ? p`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : l}
+                          ${l.threshold ? f`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : c}
                         </td>
-                      </tr>`) : l}
+                      </tr>`) : c}
             </tbody>`}
-      ${i.totals ? p`<tfoot>
-              ${this.mobileSumRow("lintje-data-table__total", i.totalsLabel ?? "Totaal", i.totals[c.key], c, h)}
-            </tfoot>` : l}
+      ${i.totals ? f`<tfoot>
+              ${this.mobileSumRow("lintje-data-table__total", i.totalsLabel ?? "Totaal", i.totals[l.key], l, h)}
+            </tfoot>` : c}
     </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, f = a.format === "change-compact" ? {
+		let o = this.data, s = this.shown[0], l = !!o.selectable, u = !!o.clickable && !l, d = o.rowActions?.length ? o.rowActions : null, p = 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 = p`<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 = f`<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 p`<tr
+		return f`<tr
         class=${_({
 			"lintje-data-table__mobile-row": !0,
 			"is-clickable": u,
@@ -1599,49 +1600,49 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			"is-checked": S,
 			"is-open": v
 		})}
-        tabindex=${u ? 0 : l}
-        aria-selected=${u ? x : l}
-        @click=${u ? () => this.emit("lintje-row-click", h) : l}
-        @keydown=${u ? (t) => this.rowKeydown(t, e) : l}
+        tabindex=${u ? 0 : c}
+        aria-selected=${u ? x : c}
+        @click=${u ? () => this.emit("lintje-row-click", h) : c}
+        @keydown=${u ? (t) => this.rowKeydown(t, e) : c}
       >
         <th scope="row" class="lintje-data-table__mobile-cell">
-          ${c ? p`<span class="lintje-data-table__mobile-check">
+          ${l ? f`<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(f, e[a.key])}</span
+            >${this.cell(p, e[a.key])}</span
           >
-          ${g ? p`<span
+          ${g ? f`<span
                 class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${g.tone}"
                 >${g.label}</span
-              >` : l}
+              >` : c}
         </td>
-        ${r ? p`<td
+        ${r ? f`<td
                 class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--actions"
                 @click=${(e) => e.stopPropagation()}
                 @keydown=${(e) => e.stopPropagation()}
               >
                 <span class="lintje-data-table__mobile-actions">
-                  ${n.length > 0 ? this.rowToggle(e, v, y, "lintje-data-table__mobile-toggle") : l}
-                  ${d ? A(d, h.label, (e) => this.emit("lintje-row-action", {
+                  ${n.length > 0 ? this.rowToggle(e, v, y, "lintje-data-table__mobile-toggle") : c}
+                  ${d ? j(d, h.label, (e) => this.emit("lintje-row-action", {
 			id: m,
 			action: e
-		})) : l}
+		})) : c}
                 </span>
-              </td>` : l}
+              </td>` : c}
       </tr>
-      ${n.length > 0 ? p`<tr class="lintje-data-table__mobile-detail" id=${y} ?hidden=${!v}>
+      ${n.length > 0 ? f`<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}
+                ${v ? this.detailList(e, n, "row") : c}
               </td>
-            </tr>` : l}`;
+            </tr>` : c}`;
 	}
 	mobileGroupRow(e, t, n, r) {
 		let i = this.groupColumn, a = this.data?.groupTotals?.[e.key]?.[n.key], o = e.rows.length;
-		return p`<tr class="lintje-data-table__group-row">
+		return f`<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 +1659,18 @@ var Z = p`<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 ? p`<span class="lintje-data-table__mobile-measure">${this.totalContent(n, a)}</span>` : l}
+        ${!t && a !== void 0 ? f`<span class="lintje-data-table__mobile-measure">${this.totalContent(n, a)}</span>` : c}
       </td>
-      ${r > 2 ? p`<td class="lintje-data-table__mobile-cell"></td>` : l}
+      ${r > 2 ? f`<td class="lintje-data-table__mobile-cell"></td>` : c}
     </tr>`;
 	}
 	mobileSumRow(e, t, n, r, i) {
-		return p`<tr class=${e}>
+		return f`<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 : p`<span class="lintje-data-table__mobile-measure">${this.totalContent(r, n)}</span>`}
+        ${n === void 0 ? c : f`<span class="lintje-data-table__mobile-measure">${this.totalContent(r, n)}</span>`}
       </td>
-      ${i > 2 ? p`<td class="lintje-data-table__mobile-cell"></td>` : l}
+      ${i > 2 ? f`<td class="lintje-data-table__mobile-cell"></td>` : c}
     </tr>`;
 	}
 	totalContent(e, t) {
@@ -1677,14 +1678,14 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
 			...e,
 			threshold: void 0
 		};
-		return p`${r ? p`<span class="lintje-data-table__how">${r} </span>` : l}${this.cell(i, n)}`;
+		return f`${r ? f`<span class="lintje-data-table__how">${r} </span>` : c}${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 p`<lintje-pagination
+		return f`<lintje-pagination
       class="lintje-data-table__pagination lintje-data-table__pagination--${e}"
       label=${s ? `Paginering ${s}` : "Paginering"}
       .page=${t + 1}
@@ -1700,7 +1701,7 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
     ></lintje-pagination>`;
 	}
 	opener(e, t) {
-		return this.data?.openable ? p`<button
+		return this.data?.openable ? f`<button
       type="button"
       class="lintje-data-table__open"
       @click=${(t) => {
@@ -1711,10 +1712,10 @@ var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
     </button>` : t;
 	}
 	cell(e, t) {
-		if (t === 0 && e.zeroText != null) return p`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
+		if (t === 0 && e.zeroText != null) return f`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
 		if (e.format === "label" && t != null) {
 			let n = e.labels?.[String(t)];
-			return n ? h({
+			return n ? m({
 				value: n.label,
 				tone: n.tone,
 				icon: n.icon,
@@ -1723,34 +1724,34 @@ var Z = p`<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 p`<lintje-status-dot
+			if (n) return f`<lintje-status-dot
           tone=${n}
-          label=${e.status?.labels?.[String(t)] ?? l}
+          label=${e.status?.labels?.[String(t)] ?? c}
         ></lintje-status-dot>`;
 		}
 		let n = G(e, t);
 		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" ? p`<span
+			return e.format === "change-compact" ? f`<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>` : p`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
+          ><span class="visually-hidden">${n}</span>` : f`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
 		}
 		let r = K(e, t);
 		if (!r) return n;
-		let i = r.tone === "good" ? l : v(r.tone === "caution" ? "functioneel-waarschuwing" : "functioneel-foutmelding", {
+		let i = r.tone === "good" ? c : v(r.tone === "caution" ? "functioneel-waarschuwing" : "functioneel-foutmelding", {
 			size: 14,
 			className: "lintje-threshold-cell__icon"
 		});
-		return p`<span class="lintje-threshold-cell lintje-threshold-cell--${r.tone}"
+		return f`<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 : p`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
+		return n == null ? Z : f`<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 +1766,7 @@ var Z = p`<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 : p`<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 ? c : f`<span class="lintje-data-table__mobile-sub">${n}</span>`;
 	}
 	mobileStatus(e, t) {
 		if (!e.threshold) return null;
@@ -1777,21 +1778,21 @@ var Z = p`<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(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)) : []));
+		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)) : []));
 	}
 	rowCheck(e, t, n) {
 		let r = this.columns[0], i = r ? this.sortValue(r, e) : t;
-		return this.checkbox(p`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
+		return this.checkbox(f`<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));
-				this.setChecked(ae(this.checkedIds, ie(n, this.#d, t)));
+				this.setChecked(A(this.checkedIds, ie(n, this.#d, t)));
 			} else this.setChecked(e ? [...n, t] : n);
 			this.#d = t;
 		}, this.uncheckable.has(t));
 	}
 	checkbox(e, t, n, r, i = !1) {
-		return p`<label class="lintje-choice${i ? " is-disabled" : ""}">
+		return f`<label class="lintje-choice${i ? " is-disabled" : ""}">
       <input
         type="checkbox"
         class="lintje-choice__input"