lintje 0.2.0 → 0.4.0

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

@@ -1,19 +1,20 @@
-import { $ as e, Bt as t, G as n, Gt as r, H as i, Ht as a, Lt as o, S as s, U as c, Z as l, c as u, d, et as f, k as p, qt as m, s as h, w as g } from "../chunks/base-Bg-IFOPG.js";
-import { n as _, r as v } from "../chunks/focus-trap-9BnE-xWv.js";
+import { F as e, Kt as t, O as n, Q as r, Yt as i, Z as a, Zt as o, at as s, d as c, en as l, et as u, f as d, lt as f, nn as p, o as m, ot as h, rt as g, st as _, ut as v } from "../chunks/base-DRGvkF-r.js";
+import { n as y, r as b } from "../chunks/focus-trap-Dv8zu64A.js";
 import "./menu-button.js";
-import { t as y } from "../chunks/input-BtuNFSWk.js";
-import { t as b } from "./announcement.js";
+import { t as x } from "../chunks/input-lQTmOMOz.js";
+import { t as S } from "./announcement.js";
 import "./drawer.js";
+import "./empty-state.js";
 import "./description-list.js";
-import { d as x } from "../chunks/date-format-mHtZyBys.js";
-import { a as S, c as C, d as w, o as T, r as E, s as ee, t as te } from "../chunks/download-y528pIHP.js";
+import { d as C } from "../chunks/date-format-DxP9yfDp.js";
+import { a as w, c as T, r as ee, t as E } from "../chunks/download-C68kcwPj.js";
 import "./pagination.js";
 import "./sortable-list.js";
 //#region src/components/tables/data-table/data-table.css?inline
-var ne = ":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\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/* 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. */\n.lintje-data-table__sort-icon { font-size: 10px; color: var(--color-text-muted); }\n.lintje-data-table__header-cell.is-active .lintje-data-table__sort-icon { 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: a link's colour and line, the cell's weight and size. */\n.lintje-data-table__open {\n  padding: 0;\n  font: inherit; text-align: inherit;\n  color: var(--color-link);\n  text-decoration: underline;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-data-table__open:hover { color: var(--color-link-hover); }\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.lintje-threshold-cell--caution     { background: var(--color-warning); color: var(--color-text-on-light-fill); }\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.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\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.lintje-data-table__header-cell.is-filtered {\n  background: var(--color-bg-subtle);\n  color: var(--color-accent-text);\n}\n.lintje-data-table__header-label { display: inline-flex; align-items: center; gap: 6px; }\n.lintje-data-table__filter-dot {\n  display: inline-block;\n  width: 6px; height: 6px; flex: none;\n  border-radius: 50%;\n  background: var(--color-attention);\n}\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 under it, so their icons line up. The phone row's toggle is the same. */\n.lintje-data-table__chooser-button,\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__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/* --- 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. */\n:where(.lintje-data-table.is-phone) .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\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 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";
 //#endregion
 //#region src/components/tables/data-table/editing.ts
-function re(e, t, n, r, i) {
+function te(e, t, n, r, i) {
 	if (t === "down") {
 		for (let t = e.row + 1; t < n; t++) if (i(t, e.column)) return {
 			row: t,
@@ -31,13 +32,13 @@ function re(e, t, n, r, i) {
 	}
 	return null;
 }
-function D(e) {
+function O(e) {
 	return `${e.id}\u001f${e.column}`;
 }
-function O(e) {
+function k(e) {
 	return e == null ? "" : String(e);
 }
-var ie = 0, k = class {
+var ne = 0, re = class {
 	#e;
 	#t;
 	#n;
@@ -49,14 +50,14 @@ var ie = 0, k = class {
 	#c;
 	#l;
 	constructor(e) {
-		this.editing = null, this.message = "", this.#t = `lintje-data-table-${++ie}`, this.#n = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#i = /* @__PURE__ */ new Set(), this.#a = JSON.stringify([]), this.#o = /* @__PURE__ */ new Map(), this.#s = /* @__PURE__ */ new Set(), this.#c = null, this.#l = null, this.#e = e;
+		this.editing = null, this.message = "", this.#t = `lintje-data-table-${++ne}`, this.#n = /* @__PURE__ */ new Map(), this.#r = /* @__PURE__ */ new Map(), this.#i = /* @__PURE__ */ new Set(), this.#a = JSON.stringify([]), this.#o = /* @__PURE__ */ new Map(), this.#s = /* @__PURE__ */ new Set(), this.#c = null, this.#l = null, this.#e = e;
 	}
 	get hintId() {
 		return `${this.#t}-hint`;
 	}
 	sync(e) {
 		let t = e?.cellErrors ?? [], n = JSON.stringify(t);
-		n !== this.#a && (this.#a = n, this.#i.clear()), this.#o = new Map(t.map((e) => [D(e), e])), this.#s = new Set((e?.busyCells ?? []).map(D));
+		n !== this.#a && (this.#a = n, this.#i.clear()), this.#o = new Map(t.map((e) => [O(e), e])), this.#s = new Set((e?.busyCells ?? []).map(O));
 		for (let [e, t] of this.#n) {
 			if (this.#s.has(e)) continue;
 			this.#n.delete(e);
@@ -65,41 +66,41 @@ var ie = 0, k = class {
 		}
 	}
 	mode(e, t) {
-		let n = D(e), r = this.#n.get(n);
+		let n = O(e), r = this.#n.get(n);
 		if (r !== void 0) return {
 			kind: "busy",
 			value: r
 		};
 		if (this.#s.has(n)) return {
 			kind: "busy",
-			value: O(t)
+			value: k(t)
 		};
 		let i = this.#o.get(n);
 		return i && !this.#i.has(n) ? {
 			kind: "editor",
-			value: i.value ?? this.#r.get(n) ?? O(t),
+			value: i.value ?? this.#r.get(n) ?? k(t),
 			error: i.message
-		} : this.editing && D(this.editing) === n ? {
+		} : this.editing && O(this.editing) === n ? {
 			kind: "editor",
-			value: O(t)
+			value: k(t)
 		} : { kind: "rest" };
 	}
 	open(e, t) {
 		this.#c = t.closest("table"), this.editing = e, this.#l = {
-			key: D(e),
+			key: O(e),
 			target: "editor"
 		}, this.#e.requestUpdate();
 	}
 	cancel(e) {
-		let t = D(e);
-		this.#o.has(t) && this.#i.add(t), this.#r.delete(t), this.editing && D(this.editing) === t && (this.editing = null), this.#l = {
+		let t = O(e);
+		this.#o.has(t) && this.#i.add(t), this.#r.delete(t), this.editing && O(this.editing) === t && (this.editing = null), this.#l = {
 			key: t,
 			target: "cell"
 		}, this.#e.requestUpdate();
 	}
 	commit(e, t, n, r, i) {
-		let a = D(e), o = this.#o.has(a) && !this.#i.has(a);
-		if ((o || t !== O(n)) && (o && this.#i.add(a), this.#n.set(a, t), this.message = "Wordt opgeslagen", this.#e.editCell({
+		let a = O(e), o = this.#o.has(a) && !this.#i.has(a);
+		if ((o || t !== k(n)) && (o && this.#i.add(a), this.#n.set(a, t), this.message = "Wordt opgeslagen", this.#e.editCell({
 			id: e.id,
 			column: e.column,
 			value: t
@@ -107,7 +108,7 @@ var ie = 0, k = class {
 			key: a,
 			target: "cell"
 		}, r) {
-			let t = i.columns, n = re({
+			let t = i.columns, n = te({
 				row: i.ids.indexOf(e.id),
 				column: t.findIndex((t) => t.key === e.column)
 			}, r, i.ids.length, t.length, (e, n) => this.editable({
@@ -120,7 +121,7 @@ var ie = 0, k = class {
 					column: t[n.column]?.key ?? ""
 				};
 				this.editing = e, this.#l = {
-					key: D(e),
+					key: O(e),
 					target: "editor"
 				};
 			}
@@ -128,7 +129,7 @@ var ie = 0, k = class {
 		this.#e.requestUpdate();
 	}
 	editable(e, t) {
-		let n = D(e);
+		let n = O(e);
 		return !!t?.editor && !this.#n.has(n) && !this.#s.has(n);
 	}
 	restoreFocus(e) {
@@ -140,48 +141,48 @@ var ie = 0, k = class {
 		let r = n.querySelector(".lintje-data-table__editor");
 		t.target === "editor" && r ? (r.focus(), r instanceof HTMLInputElement && r.select()) : n.focus();
 	}
-	content(e, t, n, i, a, o) {
-		let s = this.mode(e, n);
-		if (s.kind === "busy") return m`<span class="lintje-data-table__busy"
-        ><lintje-spinner size="16"></lintje-spinner><span>${s.value}</span></span
+	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"
+        ><lintje-spinner size="16"></lintje-spinner><span>${o.value}</span></span
       >`;
-		if (s.kind === "rest") return m`${i}${f("functioneel-bewerken", {
+		if (o.kind === "rest") return p`${r}${v("functioneel-bewerken", {
 			size: 14,
 			className: "lintje-data-table__edit-icon"
 		})}`;
-		let c = s.error ? `${this.#t}-${o.copy}-error-${o.ids.indexOf(e.id)}-${e.column}` : null, u = (t) => {
+		let s = o.error ? `${this.#t}-${a.copy}-error-${a.ids.indexOf(e.id)}-${e.column}` : null, c = (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", o)) : t.key === "Tab" && (t.preventDefault(), this.commit(e, r.value, n, t.shiftKey ? "previous" : "next", o));
-		}, d = (t) => {
-			!s.error && this.editing && D(this.editing) === D(e) && this.commit(e, t.currentTarget.value, n, null, o);
-		}, p = l({
+			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) => {
+			!o.error && this.editing && O(this.editing) === O(e) && this.commit(e, t.currentTarget.value, n, null, a);
+		}, d = _({
 			"lintje-data-table__editor": !0,
 			"focus-inset": !0,
-			"is-error": !!s.error
-		}), h = t.editor, g = h?.kind === "select" ? m`<select
-            class=${p}
-            aria-label=${a}
-            aria-invalid=${s.error ? "true" : r}
-            aria-describedby=${c ?? r}
-            @keydown=${u}
-            @blur=${d}
+			"is-error": !!o.error
+		}), f = t.editor, m = f?.kind === "select" ? p`<select
+            class=${d}
+            aria-label=${i}
+            aria-invalid=${o.error ? "true" : l}
+            aria-describedby=${s ?? l}
+            @keydown=${c}
+            @blur=${u}
           >
-            ${(h.options ?? []).map((e) => m`<option value=${e.value} ?selected=${e.value === s.value}>
+            ${(f.options ?? []).map((e) => p`<option value=${e.value} ?selected=${e.value === o.value}>
                   ${e.label ?? e.value}
                 </option>`)}
-          </select>` : m`<input
+          </select>` : p`<input
             type="text"
-            class=${p}
-            inputmode=${h?.kind === "number" ? "decimal" : r}
-            placeholder=${h?.kind === "date" ? "dd-mm-jjjj" : r}
-            aria-label=${a}
-            aria-invalid=${s.error ? "true" : r}
-            aria-describedby=${c ?? r}
-            .value=${s.value}
-            @keydown=${u}
-            @blur=${d}
+            class=${d}
+            inputmode=${f?.kind === "number" ? "decimal" : l}
+            placeholder=${f?.kind === "date" ? "dd-mm-jjjj" : l}
+            aria-label=${i}
+            aria-invalid=${o.error ? "true" : l}
+            aria-describedby=${s ?? l}
+            .value=${o.value}
+            @keydown=${c}
+            @blur=${u}
           />`;
-		return m`${g}${s.error ? m`<span id=${c ?? r} class="lintje-data-table__edit-error">${s.error}</span>` : r}`;
+		return p`${m}${o.error ? p`<span id=${s ?? l} class="lintje-data-table__edit-error">${o.error}</span>` : l}`;
 	}
 	cellClasses(e, t) {
 		let n = this.mode(e, t);
@@ -195,13 +196,13 @@ var ie = 0, k = class {
 		t.target === t.currentTarget && (t.key === "Enter" || t.key === "F2") && (t.preventDefault(), t.stopPropagation(), this.open(e, t.currentTarget));
 	}
 	renderStatus() {
-		return m`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
+		return p`<span id=${this.hintId} class="visually-hidden">Bewerkbaar met Enter of F2</span
       ><span class="visually-hidden" role="status">${this.message}</span>`;
 	}
 };
 //#endregion
 //#region src/components/tables/data-table/actions.ts
-function A(e, t, n) {
+function ie(e, t, n) {
 	let r = e.indexOf(n), i = t == null ? -1 : e.indexOf(t);
 	if (r < 0) return [];
 	if (i < 0) return [n];
@@ -212,8 +213,8 @@ function ae(e, t) {
 	let n = new Set(e);
 	return [...e, ...t.filter((e) => !n.has(e))];
 }
-function j(e, t, n) {
-	return m`<lintje-menu-button
+function A(e, t, n) {
+	return p`<lintje-menu-button
     icon
     variant="tertiary"
     placement="bottom-end"
@@ -224,34 +225,34 @@ function j(e, t, n) {
 	}}
   ></lintje-menu-button>`;
 }
-function oe(e, t, n, i, a) {
-	let o = n ? e.length > 0 ? m`<lintje-menu-button
+function j(e, t, n, r, i) {
+	let a = n ? e.length > 0 ? p`<lintje-menu-button
           label="Acties"
           .items=${e}
           @lintje-action=${(e) => {
-		e.stopPropagation(), i(e.detail);
+		e.stopPropagation(), r(e.detail);
 	}}
-        ></lintje-menu-button>` : r : e.map((e) => m`<lintje-button
+        ></lintje-menu-button>` : l : e.map((e) => p`<lintje-button
             variant=${e.danger ? "danger-secondary" : "secondary"}
             size="compact"
-            icon=${e.icon ?? r}
+            icon=${e.icon ?? l}
             ?disabled=${!!e.disabled}
-            @click=${() => i(e.value)}
+            @click=${() => r(e.value)}
             >${e.label}</lintje-button
           >`);
-	return m`<div
+	return p`<div
     class="lintje-data-table__selection ${n ? "lintje-data-table__selection--mobile" : ""}"
     role="toolbar"
     aria-label="Acties op de selectie"
   >
     <!-- The table's own status region reads the count: one inserted with its bar would not be. -->
     <strong class="lintje-data-table__selection-count">${t} geselecteerd</strong>
-    ${o}
+    ${a}
     <lintje-button
       class="lintje-data-table__selection-clear"
       variant="tertiary"
       size="compact"
-      @click=${a}
+      @click=${i}
       >Selectie opheffen</lintje-button
     >
   </div>`;
@@ -264,11 +265,11 @@ function M(e) {
 function N(e) {
 	return M(e) ? Array.isArray(e) ? e : e.trim() : null;
 }
-function se(e, t) {
+function oe(e, t) {
 	return e.filter?.options?.find((e) => e.value === t)?.label ?? t;
 }
-function ce(e, t) {
-	let n = Array.isArray(t) ? t.map((t) => se(e, t)).join(", ") : `‘${t}’`;
+function se(e, t) {
+	let n = Array.isArray(t) ? t.map((t) => oe(e, t)).join(", ") : `‘${t}’`;
 	return `${e.header}: ${n}`;
 }
 function P(e, t) {
@@ -284,31 +285,31 @@ 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 I(e, t, n) {
+function ce(e, t, n) {
 	let r = new Set(n);
 	return {
 		order: [e, ...t],
 		hidden: t.filter((e) => !r.has(e))
 	};
 }
-function L(e, t) {
+function I(e, t) {
 	return {
-		focusout: (r) => {
-			let i = r.relatedTarget, a = r.currentTarget, o = a.getRootNode().host;
-			!i || i === e || a.contains(i) || n(o, i) || t("away");
+		focusout: (n) => {
+			let r = n.relatedTarget, i = n.currentTarget, a = i.getRootNode().host;
+			!r || r === e || i.contains(r) || u(a, r) || t("away");
 		},
 		keydown: (e) => {
 			if (e.key !== "Tab" || e.defaultPrevented) return;
-			let n = v(e.currentTarget), r = n.indexOf(i());
+			let n = b(e.currentTarget), r = n.indexOf(a());
 			(e.shiftKey ? r > 0 : r !== n.length - 1) || t(e.shiftKey ? "back" : "forward") && e.preventDefault();
 		}
 	};
 }
-function R(e, t, n, r) {
+function le(e, t, n, r) {
 	let i = M(t);
-	return m`<button
+	return p`<button
       type="button"
-      class=${l({
+      class=${_({
 		"lintje-data-table__funnel": !0,
 		"is-filtered": i
 	})}
@@ -318,43 +319,40 @@ function R(e, t, n, r) {
       aria-expanded=${n ? "true" : "false"}
       @click=${(e) => r(e.currentTarget)}
     >
-      ${f("functioneel-filters", { size: 14 })}
+      ${v("functioneel-trechter", { size: 14 })}
     </button>`;
 }
-function z() {
-	return m`<span class="lintje-data-table__filter-dot" role="img" aria-label="Gefilterd"></span>`;
-}
-function B(e, t, n) {
-	if (e.filter?.kind === "text") return m`<input
+function L(e, t, n) {
+	if (e.filter?.kind === "text") return p`<input
       type="search"
       class="lintje-data-table__filter-search"
       aria-label=${`Zoek in ${e.header.toLocaleLowerCase("nl")}`}
       .value=${typeof t == "string" ? t : ""}
       @input=${(e) => n(e.target.value)}
     />`;
-	let i = new Set(Array.isArray(t) ? t : []);
-	return m`<div class="lintje-data-table__filter-options">
-    ${(e.filter?.options ?? []).map((e) => m`<label class="lintje-choice lintje-data-table__filter-option">
+	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">
         <input
           type="checkbox"
           class="lintje-choice__input"
-          .checked=${i.has(e.value)}
+          .checked=${r.has(e.value)}
           @change=${(t) => {
-		let r = t.target.checked, a = [...i].filter((t) => t !== e.value);
-		n(r ? [...a, e.value] : a);
+		let i = t.target.checked, a = [...r].filter((t) => t !== e.value);
+		n(i ? [...a, e.value] : a);
 	}}
         />
         <span class="lintje-choice__box" aria-hidden="true"
           ><span class="lintje-choice__mark">✓</span></span
         >
         <span class="lintje-choice__label">${e.label ?? e.value}</span>
-        ${e.count == null ? r : m`<span class="lintje-data-table__filter-count">${e.count}</span>`}
+        ${e.count == null ? l : p`<span class="lintje-data-table__filter-count">${e.count}</span>`}
       </label>`)}
   </div>`;
 }
-function V(e) {
-	let { column: t } = e, n = L(e.anchor, e.onLeave);
-	return m`<lintje-popover
+function ue(e) {
+	let { column: t } = e, n = I(e.anchor, e.onLeave);
+	return p`<lintje-popover
     open
     panel-role="dialog"
     label=${P(t, null)}
@@ -367,7 +365,7 @@ function V(e) {
   >
     <div class="lintje-data-table__filter-panel">
       <div class="lintje-data-table__filter-name">${t.header}</div>
-      ${B(t, e.draft, e.onDraft)}
+      ${L(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>
@@ -375,70 +373,79 @@ function V(e) {
     </div>
   </lintje-popover>`;
 }
-function H(e) {
-	return m`<lintje-drawer
+function R(e) {
+	return p`<lintje-drawer
     open
     heading="Filters"
     @lintje-close=${(t) => {
 		t.stopPropagation(), e.onClose();
 	}}
   >
-    ${e.columns.map((t) => m`<section class="lintje-data-table__filter-section">
+    ${e.columns.map((t) => p`<section class="lintje-data-table__filter-section">
         <div class="lintje-data-table__filter-name">${t.header}</div>
-        ${B(t, e.draft[t.key], (n) => e.onDraft(t.key, n))}
+        ${L(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>
   </lintje-drawer>`;
 }
-function U(e) {
-	let t = e.columns.filter((t) => M(e.values[t.key])), n = t.length > 0 && e.total != null ? `${e.shown} van ${e.total} rijen` : "", i = t.length === 0;
-	return m`<div
-    class="lintje-data-table__toolbar ${i ? "lintje-data-table__toolbar--quiet" : ""}"
+function z(e) {
+	let t = e.columns.filter((t) => M(e.values[t.key])), n = t.length === 0 && !e.chooser;
+	return p`<div
+    class="lintje-data-table__toolbar ${n ? "lintje-data-table__toolbar--quiet" : ""}"
   >
     <div class="lintje-data-table__chips">
-      ${e.columns.length > 0 ? m`<lintje-button
+      ${e.columns.length > 0 ? p`<lintje-button
               class="lintje-data-table__sheet-button"
               variant="secondary"
               size="compact"
               icon="functioneel-filters"
               @click=${e.onOpenSheet}
               >Filters</lintje-button
-            >` : r}
-      ${e.sortMenu ?? r}
+            >` : l}
+      ${e.sortMenu ?? l}
       ${t.map((t) => {
 		let n = e.values[t.key];
-		return m`<span class="lintje-data-table__chip"
-          >${ce(t, n)}<button
+		return p`<span class="lintje-data-table__chip"
+          >${se(t, n)}<button
             type="button"
             class="lintje-data-table__chip-clear"
             aria-label=${`${P(t, null)} wissen`}
             @click=${(n) => e.onClearFilter(t.key, n.currentTarget)}
           >
-            ${f("functioneel-kruis", { size: 12 })}
+            ${v("functioneel-kruis", { size: 12 })}
           </button></span
         >`;
 	})}
-      <span class="lintje-data-table__filter-total" role="status">${n}</span>
+      ${t.length > 1 ? p`<button
+              type="button"
+              class="lintje-button lintje-button--tertiary lintje-button--compact lintje-data-table__clear-all"
+              @click=${(t) => e.onClearAll(t.currentTarget)}
+            >
+              <span class="lintje-button__label">Filters wissen</span>
+            </button>` : l}
+      ${e.count ? p`<span class="lintje-data-table__filter-total">${e.count}</span>` : l}
     </div>
+    ${e.chooser ?? l}
   </div>`;
 }
-function W(e, t) {
-	return m`<button
-    type="button"
-    class="lintje-data-table__chooser-button"
-    aria-label="Kolommen kiezen"
-    title="Kolommen kiezen"
-    aria-haspopup="dialog"
-    aria-expanded=${e ? "true" : "false"}
-    @click=${(e) => t(e.currentTarget)}
-  >
-    ${f("functioneel-instellingen", { size: 16 })}
-  </button>`;
+function B(e, t) {
+	return p`<lintje-tooltip text="Kolommen kiezen" no-describe
+    ><button
+      type="button"
+      class="lintje-data-table__chooser-button"
+      aria-label="Kolommen kiezen"
+      aria-haspopup="dialog"
+      aria-expanded=${e ? "true" : "false"}
+      @click=${(e) => t(e.currentTarget)}
+    >
+      ${v("functioneel-kolommen", { size: 18 })}
+    </button></lintje-tooltip
+  >`;
 }
-function le(e) {
-	let t = L(e.anchor, e.onLeave);
-	return m`<lintje-popover
+function V(e) {
+	let t = I(e.anchor, e.onLeave);
+	return p`<lintje-popover
     open
     panel-role="dialog"
     label="Kolommen kiezen"
@@ -464,13 +471,24 @@ function le(e) {
 		t.stopPropagation(), e.onChecked(t.detail);
 	}}
       ></lintje-sortable-list>
+      <lintje-button
+        class="lintje-data-table__chooser-reset"
+        variant="tertiary"
+        size="compact"
+        ?disabled=${e.isDefault}
+        reason="Elke kolom staat al, in de standaardvolgorde."
+        @click=${() => {
+		e.isDefault || e.onReset();
+	}}
+        >Terugzetten naar standaard</lintje-button
+      >
     </div>
   </lintje-popover>`;
 }
 //#endregion
 //#region src/components/tables/data-table/data-table.ts
-var G = 5, K = ":scope > tbody > .lintje-data-table__row:not(.lintje-data-table__row--filler), :scope > tbody > .lintje-data-table__mobile-row:not(.lintje-data-table__mobile-row--filler)";
-function ue(e) {
+var H = 5, de = 5, U = ":scope > tbody > .lintje-data-table__row:not(.lintje-data-table__row--filler), :scope > tbody > .lintje-data-table__mobile-row:not(.lintje-data-table__mobile-row--filler)";
+function fe(e) {
 	for (let t = e; t;) {
 		let e = (t instanceof Element ? t.assignedSlot : null) ?? t.parentNode ?? (t instanceof ShadowRoot ? t.host : null);
 		if (e instanceof Element && e !== document.documentElement && e !== document.body && /auto|scroll|hidden/.test(getComputedStyle(e).overflowY)) return e;
@@ -478,27 +496,28 @@ function ue(e) {
 	}
 	return document.scrollingElement;
 }
-var de = /* @__PURE__ */ new Set([
+var pe = /* @__PURE__ */ new Set([
 	"number",
 	"percent",
 	"decimal",
 	"change",
 	"change-compact"
-]), fe = /* @__PURE__ */ new Set([
+]), me = /* @__PURE__ */ new Set([
 	"complete",
 	"delayed",
 	"outage",
 	"no-data"
 ]);
-function q(e, t) {
-	return e.format ? de.has(e.format) : typeof t.find((t) => t[e.key] != null)?.[e.key] == "number";
+function W(e, t) {
+	return e.format ? pe.has(e.format) : typeof t.find((t) => t[e.key] != null)?.[e.key] == "number";
 }
-function J(e, t) {
+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 ? "+" : ""}${h(t, e.decimals ?? 0)}%` : e.format === "percent" ? u(t, e.decimals ?? 0) : e.format === "decimal" ? h(t, e.decimals ?? 1) : h(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
+	return n = typeof t == "string" || e.format === "text" ? String(t) : e.format === "change" || e.format === "change-compact" ? `${t > 0 ? "▲" : t < 0 ? "▼" : "●"} ${t > 0 ? "+" : ""}${c(t, e.decimals ?? 0)}%` : e.format === "percent" ? d(t, e.decimals ?? 0) : e.format === "decimal" ? c(t, e.decimals ?? 1) : c(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
 }
-function Y(e, t) {
+function K(e, t) {
 	let n = e.threshold;
 	if (!n || typeof t != "number") return null;
 	let r = n.direction === "below-is-bad", i = r ? t < n.value : t > n.value, a = !i && n.caution != null && (r ? t <= n.caution : t >= n.caution);
@@ -508,17 +527,44 @@ function Y(e, t) {
 		label: i ? r ? "onder norm" : "boven norm" : a ? "dicht bij norm" : "binnen norm"
 	};
 }
-function X(e, t) {
+function q(e, t) {
 	if (t === 0 && e.zeroText != null) return e.zeroText;
 	if (e.format === "status" && t != null) return e.status?.labels?.[String(t)] ?? String(t);
-	let n = J(e, t), r = n == null ? null : Y(e, t);
+	let n = G(e, t), r = n == null ? null : K(e, t);
 	return r ? `${n} · ${r.label}` : n;
 }
-function pe(e, t) {
+function he(e, t) {
 	let n = e.status?.tones?.[t] ?? t;
-	return fe.has(n) ? n : null;
+	return me.has(n) ? n : null;
 }
-var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="true" class="lintje-data-table__muted">—</span
+function J(e) {
+	return p`<span class="lintje-data-table__sort-icon" aria-hidden="true"
+    ><span class=${_({
+		"lintje-data-table__sort-up": !0,
+		"is-on": e === "asc",
+		"is-off": e === "desc"
+	})}>▲</span
+    ><span class=${_({
+		"lintje-data-table__sort-down": !0,
+		"is-on": e === "desc",
+		"is-off": e === "asc"
+	})}>▼</span
+  ></span>`;
+}
+var Y = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`;
+function X(e) {
+	return typeof e == "object" && e ? e : { value: e ?? null };
+}
+function ge(e) {
+	return {
+		key: e.key,
+		header: e.label,
+		format: e.format,
+		decimals: e.decimals,
+		unit: e.unit
+	};
+}
+var Z = p`<span aria-hidden="true" class="lintje-data-table__muted">—</span
   ><span class="visually-hidden">geen gegevens</span>`, Q = class {
 	#e;
 	#t;
@@ -536,30 +582,31 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	disconnect() {
 		this.#e?.removeEventListener("scroll", this.measure), this.#t?.disconnect(), this.#e = null, this.#t = null;
 	}
-}, $ = class extends w {
+}, $ = class extends T {
 	constructor(...e) {
-		super(...e), this.bare = !1, this.plain = !1, this.sort = null, this.checkedIds = [], this.page = 0, this.mobilePage = 0, this.#e = new o(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.mobileOpen = [], this.liveMessage = "", this.#a = 0, this.#o = !1, this.#s = new k({
+		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(),
 			editCell: (e) => this.emit("lintje-cell-edit", e)
 		}), this.#c = JSON.stringify({}), this.#l = "", this.#u = null, this.#d = null, this.#f = !1, this.#p = {
 			seen: "",
 			items: []
-		}, this.#m = null, this.#h = 0, this.#v = () => {
-			cancelAnimationFrame(this.#h), this.#h = requestAnimationFrame(() => {
-				this.#h = 0, this.#y();
+		}, this.#m = null, this.#h = null, this.#g = 0, this.#y = () => {
+			cancelAnimationFrame(this.#g), this.#g = requestAnimationFrame(() => {
+				this.#g = 0, this.#b();
 			});
 		};
 	}
 	static {
 		this.styles = [
+			f,
+			s,
 			e,
-			p,
-			a(b),
-			a(g),
-			a(s),
-			a(y),
-			E,
-			a(ne)
+			o(g),
+			o(S),
+			o(n),
+			o(x),
+			ee,
+			o(D)
 		];
 	}
 	static {
@@ -579,7 +626,8 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 			columnOrder: { state: !0 },
 			hiddenKeys: { state: !0 },
 			panel: { state: !0 },
-			mobileOpen: { state: !0 },
+			openRows: { state: !0 },
+			collapsedGroups: { state: !0 },
 			liveMessage: { state: !0 }
 		};
 	}
@@ -599,21 +647,22 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	#p;
 	#m;
 	#h;
+	#g;
 	createRenderRoot() {
 		let e = super.createRenderRoot();
-		return e.addEventListener("focusin", this.#v), e;
+		return e.addEventListener("focusin", this.#y), e;
 	}
 	get dataSettings() {
 		return this.data ?? void 0;
 	}
 	disconnectedCallback() {
-		cancelAnimationFrame(this.#a), this.#a = 0, cancelAnimationFrame(this.#h), this.#h = 0, this.#t.disconnect(), this.#n.disconnect(), super.disconnectedCallback();
+		cancelAnimationFrame(this.#a), this.#a = 0, cancelAnimationFrame(this.#g), this.#g = 0, this.#t.disconnect(), this.#n.disconnect(), super.disconnectedCallback();
 	}
 	expandChanged(e) {
 		e || this.#n.disconnect();
 	}
 	willUpdate(e) {
-		if (super.willUpdate(e), (e.has("data") || e.has("checkedIds")) && this.#g(), !e.has("data")) return;
+		if (super.willUpdate(e), (e.has("data") || e.has("checkedIds")) && this.#_(), !e.has("data")) return;
 		let t = JSON.stringify(this.data?.sort ?? null);
 		t !== this.#r && (this.#r = t, this.sort = this.data?.sort ?? null);
 		let n = JSON.stringify(this.data?.checkedIds ?? []);
@@ -621,19 +670,25 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 		let r = JSON.stringify(this.data?.filters ?? {});
 		r !== this.#c && (this.#c = r, this.filterValues = { ...this.data?.filters });
 		let i = JSON.stringify([this.data?.columns.map((e) => e.key) ?? [], this.data?.hiddenColumns ?? []]);
-		i !== this.#l && (this.#l = i, this.columnOrder = null, this.hiddenKeys = this.data?.hiddenColumns ?? []), this.#s.sync(this.data), this.#o && (this.#o = !1, this.data?.totalRows ?? this.announce(me(this.rows.length)));
-		let a = this.rows.length, o = (e) => Math.max(0, Math.ceil(a / e) - 1);
-		this.page = Math.min(this.page, o(this.data?.pageSize ?? 25)), this.mobilePage = Math.min(this.mobilePage, o(G));
+		if (i !== this.#l && (this.#l = i, this.columnOrder = null, this.hiddenKeys = this.data?.hiddenColumns ?? []), this.#s.sync(this.data), this.#o) {
+			this.#o = !1;
+			let e = this.data?.totalRows;
+			this.announce(e == null ? Y(this.rows.length) : `${this.rows.length} van ${Y(e)}`);
+		}
+		let a = this.grouped, o = a ? this.groupsOf(this.rows).length : this.rows.length, s = (e) => Math.max(0, Math.ceil(o / e) - 1);
+		this.page = Math.min(this.page, s(a ? this.groupsPerPage : this.data?.pageSize ?? 25)), this.mobilePage = Math.min(this.mobilePage, s(a ? this.groupsPerPage : H));
+		let c = new Set(this.rows.map((e) => this.rowKey(e)));
+		this.openRows.some((e) => !c.has(e)) && (this.openRows = this.openRows.filter((e) => c.has(e)));
 	}
 	updated(e) {
-		super.updated(e), this.#s.restoreFocus(this.renderRoot), this.#_();
+		super.updated(e), this.#s.restoreFocus(this.renderRoot), this.#v();
 	}
-	#g() {
-		if (this.#m = null, !c(this)) return;
-		let e = [...this.renderRoot.querySelectorAll(".lintje-data-table")].find(c);
+	#_() {
+		if (this.#m = null, !r(this)) return;
+		let e = [...this.renderRoot.querySelectorAll(".lintje-data-table")].find(r);
 		if (!e) return;
 		let t = e.querySelector(":scope > .lintje-data-table__selection");
-		if (t && c(t)) {
+		if (t && r(t)) {
 			this.#m = {
 				scope: e,
 				table: null,
@@ -642,38 +697,38 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 			};
 			return;
 		}
-		let n = [...e.querySelectorAll("table")].find(c), r = n ? [...n.querySelectorAll(K)] : [], i = r.findIndex(c);
-		if (!n || i === -1) return;
-		let a = v(r[i]).findIndex(c);
+		let n = [...e.querySelectorAll("table")].find(r), i = n ? [...n.querySelectorAll(U)] : [], a = i.findIndex(r);
+		if (!n || a === -1) return;
+		let o = b(i[a]).findIndex(r);
 		this.#m = {
 			scope: e,
 			table: n,
-			row: i,
-			stop: Math.max(0, a)
+			row: a,
+			stop: Math.max(0, o)
 		};
 	}
-	#_() {
+	#v() {
 		let e = this.#m;
 		if (this.#m = null, !e?.scope.isConnected) return;
-		let t = i();
+		let t = a();
 		if (t && t !== document.body) return;
-		let n = this.#e.matches ? ".lintje-data-table__mobile" : ".lintje-data-table__full", r = e.scope.querySelector(`${n} thead .lintje-choice__input`), a;
+		let n = this.#e.matches ? ".lintje-data-table__mobile" : ".lintje-data-table__full", r = e.scope.querySelector(`${n} thead .lintje-choice__input`), i;
 		if (e.table?.isConnected) {
-			let t = [...e.table.querySelectorAll(K)], n = t[Math.min(e.row, t.length - 1)], r = n ? v(n) : [];
-			a = r[Math.min(e.stop, r.length - 1)];
+			let t = [...e.table.querySelectorAll(U)], n = t[Math.min(e.row, t.length - 1)], r = n ? b(n) : [];
+			i = r[Math.min(e.stop, r.length - 1)];
 		}
-		(a ?? r ?? v(e.scope)[0])?.focus();
+		(i ?? r ?? b(e.scope)[0])?.focus();
 	}
-	#v;
-	#y() {
-		let e = i();
+	#y;
+	#b() {
+		let e = a();
 		for (; e && e.getRootNode() !== this.renderRoot;) e = e.getRootNode().host ?? null;
 		if (e) for (let t of this.renderRoot.querySelectorAll(".lintje-data-table__selection")) {
 			if (!t.parentElement?.contains(e) || t.contains(e)) continue;
 			let n = t.getBoundingClientRect(), r = (e.closest("td, th") ?? e).getBoundingClientRect();
 			if (r.bottom <= n.top || r.top >= n.bottom) return;
 			let i = t.classList.contains("lintje-data-table__selection--mobile");
-			ue(t)?.scrollBy({
+			fe(t)?.scrollBy({
 				top: i ? r.bottom - n.top : r.top - n.bottom,
 				behavior: "instant"
 			});
@@ -690,6 +745,41 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	get rows() {
 		return this.data?.rows ?? [];
 	}
+	get groupColumn() {
+		let e = this.data?.groupBy;
+		return e ? this.columns.find((t) => t.key === e) : void 0;
+	}
+	get grouped() {
+		return !!this.groupColumn;
+	}
+	get groupsPerPage() {
+		return this.data?.groupsPerPage ?? de;
+	}
+	groupsOf(e) {
+		let t = this.groupColumn;
+		if (!t) return [];
+		let n = /* @__PURE__ */ new Map();
+		for (let e of this.rows) {
+			let r = e[t.key] ?? null, i = String(r);
+			n.has(i) || n.set(i, {
+				key: i,
+				value: r,
+				rows: []
+			});
+		}
+		for (let r of e) n.get(String(r[t.key] ?? null))?.rows.push(r);
+		return [...n.values()];
+	}
+	toggleGroup(e) {
+		this.collapsedGroups = this.collapsedGroups.includes(e) ? this.collapsedGroups.filter((t) => t !== e) : [...this.collapsedGroups, e];
+	}
+	get detailColumns() {
+		let e = new Set(this.shown), t = this.groupColumn;
+		return [...this.columns.filter((n) => !e.has(n) && n !== t), ...(this.data?.detailFields ?? []).map(ge)];
+	}
+	toggleRow(e) {
+		this.openRows = this.openRows.includes(e) ? this.openRows.filter((t) => t !== e) : [...this.openRows, e];
+	}
 	rowKey(e) {
 		return String(e[this.data?.rowKey ?? "id"]);
 	}
@@ -712,11 +802,12 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	}
 	sortValue(e, t) {
 		let n = t[e.key];
+		if (e.format === "label" && n != null) return G(e, n) ?? "";
 		if (e.editor?.kind === "date") {
-			let e = x(String(n ?? ""));
+			let e = C(String(n ?? ""));
 			return e.kind === "ok" ? e.iso : "";
 		}
-		return n ?? (q(e, this.rows) ? -Infinity : "");
+		return n ?? (W(e, this.rows) ? -Infinity : "");
 	}
 	get sortedRows() {
 		let e = this.activeSort, t = this.columns.find((t) => t.key === e.key);
@@ -760,7 +851,8 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 		this.checkedIds = e, this.emit("lintje-checked-change", e), this.data?.bulkActions && this.announce(e.length > 0 ? `${e.length} geselecteerd` : "Selectie opgeheven");
 	}
 	get shown() {
-		return !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 : F(this.columns, this.columnOrder, this.hiddenKeys);
+		return e ? t.filter((t) => t !== e) : t;
 	}
 	get filterColumns() {
 		return this.columns.filter((e) => e.filter);
@@ -776,18 +868,18 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 		let t = this.#u?.closest(".lintje-data-table")?.querySelector("lintje-popover");
 		if (this.panel !== e || !t) return;
 		let n = [t, ...t.querySelectorAll("*")];
-		await Promise.all(n.map((e) => e.updateComplete)), this.panel === e && v(t)[0]?.focus();
+		await Promise.all(n.map((e) => e.updateComplete)), this.panel === e && b(t)[0]?.focus();
 	}
 	closePanel(e, t = !0) {
 		if (e && this.panel !== e) return;
 		let n = this.#u;
-		this.panel = null, this.#u = null, n && t && _(n).focus();
+		this.panel = null, this.#u = null, n && t && y(n).focus();
 	}
 	leavePanel(e, t) {
 		if (this.panel !== e) return !0;
 		let n = this.#u, r = n?.closest(".lintje-data-table");
 		if (t !== "forward" || !n || !r) return this.closePanel(e, t === "back"), !0;
-		let i = r.querySelector("lintje-popover"), a = new Set(i ? v(i) : []), o = v(r).filter((e) => !a.has(e)), s = o[o.indexOf(_(n)) + 1];
+		let i = r.querySelector("lintje-popover"), a = new Set(i ? b(i) : []), o = b(r).filter((e) => !a.has(e)), s = o[o.indexOf(y(n)) + 1];
 		return s ? (this.closePanel(e, !1), s.focus(), !0) : !1;
 	}
 	applyFilters(e, t) {
@@ -803,25 +895,25 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 		this.filterValues = n, this.page = 0, this.mobilePage = 0, this.closePanel();
 	}
 	async clearFilter(e, t) {
-		let n = c(t), r = t.closest(".lintje-data-table"), i = { ...this.filterValues };
-		if (delete i[e], this.filterValues = i, this.page = 0, this.mobilePage = 0, this.#o = !0, this.emit("lintje-filter-change", {
+		let n = r(t), i = t.closest(".lintje-data-table"), a = { ...this.filterValues };
+		if (delete a[e], this.filterValues = a, this.page = 0, this.mobilePage = 0, this.#o = !0, this.emit("lintje-filter-change", {
 			column: e,
 			value: null
-		}), !n || !r) return;
+		}), !n || !i) return;
 		await this.updateComplete;
-		let a = r.querySelector(".lintje-data-table__chip-clear") ?? (this.#e.matches ? r.querySelector(".lintje-data-table__sheet-button") : r.querySelector(`.lintje-data-table__funnel[data-column="${e}"]`));
-		a && _(a).focus();
+		let o = i.querySelector(".lintje-data-table__chip-clear") ?? (this.#e.matches ? i.querySelector(".lintje-data-table__sheet-button") : i.querySelector(`.lintje-data-table__funnel[data-column="${e}"]`));
+		o && y(o).focus();
 	}
 	chooserItems() {
-		let [, ...e] = F(this.columns, this.columnOrder, []), t = JSON.stringify([e.map((e) => e.key), this.hiddenKeys]);
-		if (t !== this.#p.seen) {
-			let n = new Set(this.hiddenKeys);
+		let e = this.groupColumn, [, ...t] = F(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 = {
-				seen: t,
-				items: e.map((e) => ({
-					id: e.key,
-					label: e.header,
-					checked: !n.has(e.key)
+				seen: n,
+				items: t.map((t) => ({
+					id: t.key,
+					label: t.header,
+					checked: !e.has(t.key)
 				}))
 			};
 		}
@@ -830,25 +922,53 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	changeColumns(e, t) {
 		let n = this.columns[0];
 		if (!n) return;
-		let r = I(n.key, e, t);
+		let r = ce(n.key, e, t);
 		this.columnOrder = e, this.hiddenKeys = r.hidden, this.emit("lintje-columns-change", r);
 	}
+	get columnsAreDefault() {
+		let [, ...e] = this.columns, t = this.columnOrder ?? e.map((e) => e.key);
+		return this.hiddenKeys.length === 0 && t.every((t, n) => t === e[n]?.key);
+	}
+	resetColumns() {
+		let [, ...e] = this.columns, t = e.map((e) => e.key);
+		this.changeColumns(t, t), this.#p = {
+			seen: "",
+			items: []
+		};
+	}
+	async clearAllFilters(e) {
+		let t = r(e), n = e.closest(".lintje-data-table"), i = Object.keys(this.filterValues).filter((e) => M(this.filterValues[e]));
+		this.filterValues = {}, this.page = 0, this.mobilePage = 0, this.#o = !0;
+		for (let e of i) this.emit("lintje-filter-change", {
+			column: e,
+			value: null
+		});
+		if (!t || !n) return;
+		await this.updateComplete;
+		let a = this.#e.matches ? n.querySelector(".lintje-data-table__sheet-button") : n.querySelector(".lintje-data-table__funnel");
+		a && y(a).focus();
+	}
 	render() {
 		let e = this.data;
-		if (!e) return r;
+		if (!e) return l;
 		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 m`<lintje-tile
-      id=${this.id ? `${this.id}-tile` : r}
-      span=${e.span ?? r}
-      heading=${e.title ?? r}
-      icon=${e.icon ?? r}
-      subtitle=${n ?? r}
-      intro=${e.intro ?? r}
-      footnote=${e.footnote ?? r}
+		return p`<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}
       ?expandable=${!!e.expandable && t}
       ?download=${!!e.download && t}
+      state=${e.state ?? "ready"}
+      message=${e.message ?? l}
+      last-known=${e.lastKnown ?? l}
       @lintje-tile-expand=${(e) => {
 			e.stopPropagation(), this.expand(!0);
 		}}
@@ -856,11 +976,11 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 			e.stopPropagation(), this.csv();
 		}}
     >
-      ${e.notice ? m`<lintje-announcement slot="notice" compact .data=${e.notice}></lintje-announcement>` : r}
-      ${this.content()}
+      ${e.notice ? p`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : l}
+      ${this.content(!0)}
     </lintje-tile>
 
-    ${this.renderExpandModal(this.expanded && t ? this.table(this.#n) : r, {
+    ${this.renderExpandModal(this.expanded && t ? this.table(this.#n) : l, {
 			heading: e.title,
 			subtitle: n,
 			footnote: e.footnote,
@@ -869,98 +989,140 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	}
 	csv() {
 		let e = this.data;
-		e?.download && te(e.download.filename, [e.columns.map((e) => e.header), ...e.rows.map((t) => e.columns.map((e) => t[e.key]))]);
-	}
-	content() {
-		let e = this.data;
-		switch (e.state ?? "ready") {
-			case "loading": return C({ kind: "table" });
-			case "empty": return T(e.message);
-			case "error": return ee({
-				message: e.message,
-				lastKnown: e.lastKnown,
-				announcement: S
-			});
+		if (!e?.download) return;
+		let t = (e, t) => e.format === "label" && t != null ? G(e, t) : t, n = e.totals;
+		E(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))] : []
+		]);
+	}
+	content(e = !1) {
+		let t = this.data;
+		switch (t.state ?? "ready") {
+			case "loading": return e ? p`<div slot="loading">${w({
+				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
+              compact
+              .data=${{
+				kind: "warning",
+				text: t.message ?? "",
+				live: !0
+			}}
+            ></lintje-announcement>`;
 			default: return this.table(this.#t);
 		}
 	}
 	table(e) {
-		let t = this.data, n = this.sortedRows, i = t.pageSize ?? 25, a = Math.ceil(n.length / i), o = n.slice(this.page * i, (this.page + 1) * i), s = Math.ceil(n.length / G), c = this.mobilePage * G, u = n.slice(c, c + G), f = this.#e.matches, p = e === this.#n === this.expanded;
-		return m`<div class=${l({
+		let t = this.data, n = this.sortedRows, r = this.#e.matches, i = this.grouped, a = i ? this.groupsOf(n) : [], o = i ? a.length : n.length, s = i ? this.groupsPerPage : t.pageSize ?? 25, c = i ? this.groupsPerPage : H, u = Math.ceil(o / s), d = Math.ceil(o / c), f = a.slice(this.page * s, (this.page + 1) * s), h = a.slice(this.mobilePage * c, (this.mobilePage + 1) * c), g = new Set(this.collapsedGroups), v = i ? f.filter((e) => !g.has(e.key)).flatMap((e) => e.rows) : n.slice(this.page * s, (this.page + 1) * s), y = this.mobilePage * H, b = i ? [] : n.slice(y, y + H), x = !i && (r ? d : u) > 1, S = i ? {
+			many: "groepen",
+			one: "groep"
+		} : {
+			many: "rijen",
+			one: "rij"
+		}, C = e === this.#n === this.expanded, w = e === this.#n ? "modal" : "tile", T = e.start || e.end;
+		return p`<div class=${_({
 			"lintje-data-table": !0,
-			"is-phone": f
+			"is-phone": r
 		})}>
-      ${this.toolbar(e)} ${f ? r : this.selectionBar(!1)}
+      ${this.toolbar(e, x)} ${r ? l : this.selectionBar(!1)}
       <!-- Desktop table: scrolls sideways when it is wider than the tile -->
       <div
-        class=${l({
+        class=${_({
 			"lintje-data-table__frame": !0,
 			"is-scrollable-start": e.start,
 			"is-scrollable-end": e.end
 		})}
       >
-        <div class="lintje-data-table__scroller" ${d(e.watch)}>
-          ${this.fullTable(o, a, i, e)}
+        <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}
+        >
+          ${this.fullTable(v, u, s, e, i ? f : null)}
         </div>
       </div>
 
       <!-- Mobile representation: two columns (C8) -->
-      ${this.mobileTable(u, s, e === this.#n ? "modal" : "tile")}
-      ${a > 1 ? this.pager("full", this.page, a, i, n.length, (e) => {
+      ${this.mobileTable(b, d, w, i ? h : null)}
+      ${u > 1 ? this.pager("full", this.page, u, s, o, S, (e) => {
 			this.page = e;
-		}) : r}
-      ${s > 1 ? this.pager("mobile", this.mobilePage, s, G, n.length, (e) => {
+		}) : l}
+      ${d > 1 ? this.pager("mobile", this.mobilePage, d, c, o, S, (e) => {
 			this.mobilePage = e;
-		}) : r}
-      ${f ? this.selectionBar(!0) : r} ${this.panels(e)}
-      ${p && this.columns.some((e) => e.editor) ? this.#s.renderStatus() : r}
-      <span class="visually-hidden" role="status">${p ? this.liveMessage : ""}</span>
+		}) : l}
+      ${r ? this.selectionBar(!0) : l} ${this.panels(e)}
+      ${C && this.columns.some((e) => e.editor) ? this.#s.renderStatus() : l}
+      <span class="visually-hidden" role="status">${C ? this.liveMessage : ""}</span>
     </div>`;
 	}
-	toolbar(e) {
-		let t = this.sortMenu();
-		return this.filterColumns.length === 0 && t === r ? r : U({
+	get filteredCount() {
+		let e = this.data?.totalRows;
+		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({
 			columns: this.filterColumns,
 			values: this.filterValues,
-			shown: this.rows.length,
-			total: this.data.totalRows,
-			sortMenu: t,
+			count: t ? "" : this.filteredCount,
+			sortMenu: n,
+			chooser: i,
 			onClearFilter: (e, t) => void this.clearFilter(e, t),
+			onClearAll: (e) => void this.clearAllFilters(e),
 			onOpenSheet: () => this.openPanel({
 				kind: "sheet",
 				edges: e
 			}, null)
 		});
 	}
+	groupToggle() {
+		if (!this.grouped) return l;
+		let e = this.groupsOf(this.rows).map((e) => e.key), t = new Set(this.collapsedGroups), n = e.some((e) => !t.has(e));
+		return p`<button
+      type="button"
+      class="lintje-button lintje-button--tertiary lintje-button--compact lintje-data-table__group-all"
+      @click=${() => {
+			this.collapsedGroups = n ? e : [], this.announce(n ? "Alle groepen ingeklapt" : "Alle groepen uitgeklapt");
+		}}
+    >
+      <span class="lintje-button__label">${n ? "Alles inklappen" : "Alles uitklappen"}</span>
+    </button>`;
+	}
 	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 r;
-		let i = this.activeSort, a = [
+		if (!e.some((e) => e !== t && e !== n)) return l;
+		let r = this.activeSort, i = [
 			{ heading: "Sorteren op" },
 			...e.map((e) => ({
 				value: `column:${e.key}`,
 				label: e.header,
 				radio: !0,
-				checked: e.key === i.key
+				checked: e.key === r.key
 			})),
 			{ heading: "Volgorde" },
 			{
 				value: "direction:asc",
 				label: "Oplopend",
 				radio: !0,
-				checked: i.direction === "asc"
+				checked: r.direction === "asc"
 			},
 			{
 				value: "direction:desc",
 				label: "Aflopend",
 				radio: !0,
-				checked: i.direction === "desc"
+				checked: r.direction === "desc"
 			}
 		];
-		return m`<lintje-menu-button
+		return p`<lintje-menu-button
       class="lintje-data-table__sort-menu"
       label="Sorteren"
-      .items=${a}
+      .items=${i}
       @lintje-action=${(t) => {
 			t.stopPropagation();
 			let [n, r] = t.detail.split(/:(.*)/s), i = this.activeSort;
@@ -982,29 +1144,31 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	}
 	selectionBar(e) {
 		let t = this.data;
-		return !t.selectable || !t.bulkActions || this.checkedIds.length === 0 ? r : oe(t.bulkActions, this.checkedIds.length, e, (e) => this.emit("lintje-bulk-action", {
+		return !t.selectable || !t.bulkActions || this.checkedIds.length === 0 ? l : j(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 r;
+		if (!t || t.edges !== e) return l;
 		if (t.kind === "columns") {
 			let e = this.columns[0];
-			return e ? le({
+			return e ? V({
 				first: e,
 				items: this.chooserItems(),
 				anchor: this.#u,
 				onOrder: (e) => this.changeColumns(e, e.filter((e) => !this.hiddenKeys.includes(e))),
 				onChecked: (e) => this.changeColumns(this.chooserItems().map((e) => e.id), e),
+				onReset: () => this.resetColumns(),
+				isDefault: this.columnsAreDefault,
 				onClose: () => this.closePanel(t),
 				onLeave: (e) => this.leavePanel(t, e)
-			}) : r;
+			}) : l;
 		}
 		if (t.kind === "sheet") {
 			let e = this.filterColumns;
-			return H({
+			return R({
 				columns: e,
 				draft: this.filterDraft,
 				onDraft: (e, t) => {
@@ -1019,7 +1183,7 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 			});
 		}
 		let n = this.columns.find((e) => e.key === t.column);
-		return n ? V({
+		return n ? ue({
 			column: n,
 			anchor: this.#u,
 			draft: this.filterDraft[n.key],
@@ -1033,177 +1197,325 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 			onClear: () => this.applyFilters([n.key], !0),
 			onClose: () => this.closePanel(t),
 			onLeave: (e) => this.leavePanel(t, e)
-		}) : r;
+		}) : l;
 	}
-	fullTable(e, t, n, i) {
-		let a = this.data, o = this.shown, s = !!a.selectable, c = !!a.clickable && !s, u = this.activeSort, d = new Set(this.checkedIds), f = a.rowActions?.length ? a.rowActions : null, p = !!a.columnChooser, h = !!f || p, g = {
+	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 = {
 			ids: e.map((e) => this.rowKey(e)),
 			columns: o,
-			offset: this.page * n,
-			copy: i === this.#n ? "modal" : "tile"
-		};
-		return m`<table class="lintje-data-table__full">
+			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">
       <caption class="visually-hidden">${a.caption}</caption>
       <thead>
         <tr>
-          ${s ? m`<th
+          ${s ? p`<th
                 scope="col"
                 class="lintje-data-table__header-cell lintje-data-table__check-cell"
               >
                 ${this.headerCheck()}
-              </th>` : r}
-          ${o.map((e) => {
-			let t = u.key === e.key, n = (e.align ?? (q(e, this.rows) ? "right" : "left")) === "right", a = !!e.filter && M(this.filterValues[e.key]), o = a ? z() : r, s = e.sortable === !1 ? e.filter ? m`<span class="lintje-data-table__header-label">${e.header}${o}</span>` : e.header : m`<button
-                    type="button"
-                    class="lintje-data-table__sort-button"
-                    @click=${() => this.toggleSort(e)}
-                  >
-                    <span class="lintje-data-table__sort-label">${e.header}</span>${o}
-                    <span class="lintje-data-table__sort-icon" aria-hidden="true"
-                      >${t ? u.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
-                    >
-                  </button>`;
-			return m`<th
-              scope="col"
-              class=${l({
-				"lintje-data-table__header-cell": !0,
-				"lintje-data-table__header-cell--align-right": n,
-				"lintje-data-table__header-cell--sortable": e.sortable !== !1,
-				"lintje-data-table__header-cell--filterable": !!e.filter,
-				"is-active": t,
-				"is-filtered": a
-			})}
-              aria-sort=${t ? u.direction === "asc" ? "ascending" : "descending" : "none"}
-            >
-              ${e.filter ? m`<span class="lintje-data-table__header-inner"
-                      >${s}${R(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: i
-			}, t))}</span
-                    >` : s}
-            </th>`;
-		})}
-          ${h ? m`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
-                  ${f ? m`<span class="visually-hidden">Acties</span>` : r}
-                  ${p ? W(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
+              </th>` : l}
+          ${d ? p`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__detail-cell">
+                  <span class="visually-hidden">Details</span>
+                </th>` : l}
+          ${o.map((e) => this.headerCell(e, c, r))}
+          ${this.actionColumn ? p`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
+                  ${u ? p`<span class="visually-hidden">Acties</span>` : l}
+                  ${a.columnChooser ? B(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
 			kind: "columns",
-			edges: i
-		}, e)) : r}
-                </th>` : r}
+			edges: r
+		}, e)) : l}
+                </th>` : l}
         </tr>
       </thead>
-      <tbody>
+      ${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">
+                  ${this.groupRow(t, n)}
+                  ${n ? _(t.rows, r, !0) : l}
+                  ${n ? this.subtotalRow(t, o) : l}
+                </tbody>`;
+			});
+		})() : p`<tbody>
+              ${_(e, 0, !1)}
+              <!-- A short last page keeps the height of a full one, so the page below doesn't jump. -->
+              ${t > 1 ? Array.from({ length: n - e.length }, () => p`<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}
+            </tbody>`}
+      ${this.sizerRow(o)}
+      ${this.totalsRow(o, a.totals, a.totalsLabel ?? "Totaal")}
+    </table>`;
+	}
+	sizerRow(e) {
+		let t = this.data, n = this.widestRow(e);
+		return p`<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}
         ${e.map((e, t) => {
-			let n = this.rowKey(e), i = n === a.selectedId;
-			return m`<tr
-            class=${l({
-				"lintje-data-table__row": !0,
-				"is-clickable": c,
-				"is-selected": i,
-				"is-checked": d.has(n)
+			let r = n[e.key] ?? null;
+			return p`<td
+            class=${_({
+				"lintje-data-table__cell": !0,
+				"lintje-data-table__name": t === 0,
+				"lintje-data-table__cell--align-right": this.alignsRight(e),
+				"lintje-data-table__cell--truncate": e.truncate === !0
 			})}
-            tabindex=${c ? 0 : r}
-            aria-selected=${c ? i : r}
-            @click=${c ? () => this.emit("lintje-row-click", this.rowDetail(e)) : r}
-            @keydown=${c ? (t) => this.rowKeydown(t, e) : r}
           >
-            ${s ? m`<td class="lintje-data-table__cell lintje-data-table__check-cell">
-                  ${this.rowCheck(e, n, d.has(n))}
-                </td>` : r}
-            ${o.map((n, r) => {
-				let i = n.truncate === !0, a = i ? this.truncatedCell(n, e[n.key]) : this.cell(n, e[n.key]), o = (n.align ?? (q(n, this.rows) ? "right" : "left")) === "right";
-				return n.editor ? this.editableCell(e, t, n, r === 0, o, a, g) : r === 0 ? m`<th
-                    scope="row"
-                    class=${l({
-					"lintje-data-table__cell": !0,
-					"lintje-data-table__name": !0,
-					"lintje-data-table__cell--truncate": i
-				})}
-                  >
-                    ${this.opener(e, a)}
-                  </th>` : m`<td
-                    class=${l({
-					"lintje-data-table__cell": !0,
-					"lintje-data-table__cell--align-right": o,
-					"lintje-data-table__cell--truncate": i
-				})}
-                  >
-                    ${a}
-                  </td>`;
+            <div class="lintje-data-table__sizer-box">
+              ${e.truncate ? this.truncatedCell(e, r) : this.cell(e, r)}
+            </div>
+          </td>`;
+		})}
+        ${this.actionColumn ? p`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
+      </tr>
+    </tbody>`;
+	}
+	widestRow(e) {
+		let t = e.map((e) => e.key).join(" "), n = this.#h;
+		if (n && n.data === this.data && n.key === t) return n.row;
+		let r = {};
+		for (let t of e) {
+			let e = -1;
+			for (let n of this.rows) {
+				let i = n[t.key] ?? null, a = (q(t, i) ?? "").length;
+				a > e && (e = a, r[t.key] = i);
+			}
+		}
+		return this.#h = {
+			data: this.data,
+			key: t,
+			row: r
+		}, 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
+            type="button"
+            class="lintje-data-table__sort-button"
+            @click=${() => this.toggleSort(e)}
+          >
+            <span class="lintje-data-table__sort-label">${e.header}</span>
+            ${J(r ? t.direction : null)}
+          </button>`;
+		return p`<th
+      scope="col"
+      class=${_({
+			"lintje-data-table__header-cell": !0,
+			"lintje-data-table__header-cell--align-right": i,
+			"lintje-data-table__header-cell--sortable": e.sortable !== !1,
+			"lintje-data-table__header-cell--filterable": !!e.filter,
+			"is-active": r,
+			"is-filtered": a
+		})}
+      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({
+			kind: "filter",
+			column: e.key,
+			edges: n
+		}, t))}</span
+            >` : o}
+    </th>`;
+	}
+	get actionColumn() {
+		return !!this.data?.rowActions?.length || !!this.data?.columnChooser;
+	}
+	alignsRight(e) {
+		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
+        class=${_({
+			"lintje-data-table__row": !0,
+			"lintje-data-table__row--in-group": i,
+			"is-clickable": c,
+			"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}
+      >
+        ${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
+                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}
+        ${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
+                scope="row"
+                class=${_({
+				"lintje-data-table__cell": !0,
+				"lintje-data-table__name": !0,
+				"lintje-data-table__cell--truncate": a
+			})}
+              >
+                ${this.opener(e, o)}
+              </th>` : p`<td
+                class=${_({
+				"lintje-data-table__cell": !0,
+				"lintje-data-table__cell--align-right": s,
+				"lintje-data-table__cell--truncate": a
 			})}
-            ${f ? m`<td
-                    class="lintje-data-table__cell lintje-data-table__action-cell"
-                    @click=${(e) => e.stopPropagation()}
-                    @keydown=${(e) => e.stopPropagation()}
-                  >
-                    ${j(f, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
-				id: n,
-				action: e
-			}))}
-                  </td>` : p ? m`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : r}
-          </tr>`;
+              >
+                ${o}
+              </td>`;
 		})}
-        <!-- 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 }, () => m`<tr
-                class="lintje-data-table__row lintje-data-table__row--filler"
-                aria-hidden="true"
+        ${u ? p`<td
+                class="lintje-data-table__cell lintje-data-table__action-cell"
+                @click=${(e) => e.stopPropagation()}
+                @keydown=${(e) => e.stopPropagation()}
               >
-                <td
-                  class="lintje-data-table__cell"
-                  colspan=${o.length + +!!s + +!!h}
-                ></td>
-              </tr>`) : r}
-      </tbody>
-    </table>`;
+                ${A(u, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
+			id: f,
+			action: e
+		}))}
+              </td>` : this.actionColumn ? p`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : l}
+      </tr>
+      ${d.length > 0 ? p`<tr class="lintje-data-table__detail" id=${v} ?hidden=${!g}>
+              <td class="lintje-data-table__detail-body" colspan=${y}>
+                ${g ? this.detailList(e, d, "grid") : l}
+              </td>
+            </tr>` : l}`;
 	}
-	editableCell(e, t, n, i, a, o, s) {
-		let c = this.#s, u = {
+	rowToggle(e, t, n, r) {
+		let { id: i, label: a } = this.rowDetail(e);
+		return p`<button
+      type="button"
+      class=${r}
+      aria-label=${`Alle gegevens van ${a}`}
+      aria-expanded=${t ? "true" : "false"}
+      aria-controls=${n}
+      @click=${() => this.toggleRow(i)}
+    >
+      ${v("functioneel-delta-omlaag", {
+			size: 16,
+			rotate: t ? 180 : void 0
+		})}
+    </button>`;
+	}
+	detailList(e, t, n) {
+		let r = Math.ceil(t.length / 4);
+		return p`<lintje-description-list
+      layout=${n}
+      .columns=${Math.ceil(t.length / r)}
+      .items=${t.map((t) => ({
+			label: t.header,
+			value: q(t, e[t.key])
+		}))}
+    ></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
+      type="button"
+      class="lintje-data-table__group-toggle"
+      aria-expanded=${t ? "true" : "false"}
+      @click=${() => this.toggleGroup(e.key)}
+    >
+      ${v("functioneel-delta-omlaag", {
+			size: 16,
+			rotate: t ? void 0 : 270
+		})}
+      <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>
+      ${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}
+    </tr>`;
+	}
+	subtotalRow(e, t) {
+		let n = this.data?.groupTotals?.[e.key];
+		if (!n) return l;
+		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;
+	}
+	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}
+      <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}
+    </tr>`;
+	}
+	totalCell(e, t) {
+		let n = t === void 0;
+		return p`<td
+      class=${_({
+			"lintje-data-table__cell": !0,
+			"lintje-data-table__cell--align-right": this.alignsRight(e)
+		})}
+    >
+      ${n ? l : this.totalContent(e, t)}
+    </td>`;
+	}
+	editableCell(e, t, n, r, i, a, o) {
+		let s = this.#s, c = {
 			id: this.rowKey(e),
 			column: n.key
-		}, d = e[n.key] ?? null, f = c.mode(u, d).kind, p = l({
+		}, u = e[n.key] ?? null, d = s.mode(c, u).kind, f = _({
 			"lintje-data-table__cell": !0,
-			"lintje-data-table__name": i,
-			"lintje-data-table__cell--align-right": a,
+			"lintje-data-table__name": r,
+			"lintje-data-table__cell--align-right": i,
 			"lintje-data-table__cell--truncate": n.truncate === !0,
 			"focus-inset": !0,
-			...c.cellClasses(u, d)
-		}), h = c.content(u, n, d, o, `${n.header} van rij ${s.offset + t + 1}`, s), g = (e) => {
-			c.editable(u, n) && c.cellKeydown(u, e);
-		}, _ = (e) => {
-			f === "rest" && c.editable(u, n) && c.open(u, e.currentTarget);
-		}, v = (e) => e.stopPropagation(), y = f === "editor" ? -1 : 0, b = D(u);
-		return i ? m`<th
+			...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);
+		}, 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
           scope="row"
-          class=${p}
+          class=${f}
           tabindex=${y}
           data-cell=${b}
-          aria-describedby=${f === "rest" ? c.hintId : r}
-          @keydown=${g}
-          @dblclick=${_}
+          aria-describedby=${d === "rest" ? s.hintId : l}
+          @keydown=${h}
+          @dblclick=${g}
           @click=${v}
         >
-          ${h}
-        </th>` : m`<td
-          class=${p}
+          ${m}
+        </th>` : p`<td
+          class=${f}
           tabindex=${y}
           data-cell=${b}
-          aria-describedby=${f === "rest" ? c.hintId : r}
-          @keydown=${g}
-          @dblclick=${_}
+          aria-describedby=${d === "rest" ? s.hintId : l}
+          @keydown=${h}
+          @dblclick=${g}
           @click=${v}
         >
-          ${h}
+          ${m}
         </td>`;
 	}
-	mobileTable(e, t, n) {
-		let i = this.data, a = this.shown, o = !!i.selectable, s = !!i.clickable && !o, c = a[0], u = this.mobileMeasure, d = this.activeSort, p = new Set(this.checkedIds);
-		if (!c || !u) return m`<table class="lintje-data-table__mobile"></table>`;
-		let h = u.format === "change-compact" ? {
-			...u,
-			format: "change"
-		} : u, g = i.rowActions?.length ? i.rowActions : null, _ = a.filter((e) => e !== c && e !== u), v = !!g || _.length > 0, y = v ? 3 : 2, b = d.key === u.key, x = new Set(this.mobileOpen);
-		return m`<table class="lintje-data-table__mobile">
+	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">
       <caption class="visually-hidden">${i.caption}</caption>
       <thead>
         <tr>
@@ -1211,157 +1523,184 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
             scope="col"
             class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile"
           >
-            ${o ? m`<span class="lintje-data-table__mobile-check"
-                  >${this.headerCheck()}${c.header}</span
-                >` : c.header}
+            ${o ? p`<span class="lintje-data-table__mobile-check"
+                  >${this.headerCheck()}${s.header}</span
+                >` : s.header}
           </th>
           <th
             scope="col"
-            class=${l({
+            class=${_({
 			"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": u.sortable !== !1,
-			"is-active": b
+			"lintje-data-table__header-cell--sortable": c.sortable !== !1,
+			"is-active": g
 		})}
-            aria-sort=${u.sortable === !1 ? r : b ? d.direction === "asc" ? "ascending" : "descending" : "none"}
+            aria-sort=${c.sortable === !1 ? l : g ? u.direction === "asc" ? "ascending" : "descending" : "none"}
           >
-            ${u.sortable === !1 ? u.header : m`<button
+            ${c.sortable === !1 ? c.header : p`<button
                   type="button"
                   class="lintje-data-table__sort-button"
-                  @click=${() => this.toggleSort(u)}
+                  @click=${() => this.toggleSort(c)}
                 >
-                  <span class="lintje-data-table__sort-label">${u.header}</span>
-                  <span class="lintje-data-table__sort-icon" aria-hidden="true"
-                    >${b ? d.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
-                  >
+                  <span class="lintje-data-table__sort-label">${c.header}</span>
+                  ${J(g ? u.direction : null)}
                 </button>`}
           </th>
-          ${v ? m`<th
+          ${m ? p`<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">${g ? "Acties" : "Meer gegevens"}</span>
-                </th>` : r}
+                  <span class="visually-hidden">${d ? "Acties" : "Meer gegevens"}</span>
+                </th>` : l}
         </tr>
       </thead>
-      <tbody>
-        ${e.map((e) => {
-			let t = this.rowKey(e), a = this.rowDetail(e), d = this.mobileStatus(u, e), b = x.has(t) && _.length > 0, S = `lintje-data-table-${n}-detail-${t}`, C = m`<span class="lintje-data-table__mobile-name"
-              >${this.opener(e, this.cell(c, e[c.key]))}</span
-            >${this.subline(e)}`, w = t === i.selectedId;
-			return m`<tr
-              class=${l({
-				"lintje-data-table__mobile-row": !0,
-				"is-clickable": s,
-				"is-selected": w,
-				"is-checked": p.has(t),
-				"is-open": b
-			})}
-              tabindex=${s ? 0 : r}
-              aria-selected=${s ? w : r}
-              @click=${s ? () => this.emit("lintje-row-click", a) : r}
-              @keydown=${s ? (t) => this.rowKeydown(t, e) : r}
-            >
-              <th scope="row" class="lintje-data-table__mobile-cell">
-                ${o ? m`<span class="lintje-data-table__mobile-check">
-                      ${this.rowCheck(e, t, p.has(t))}
-                      <span class="lintje-data-table__mobile-identity">${C}</span>
-                    </span>` : C}
-              </th>
-              <td
-                class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right"
+      ${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}
+              </tbody>`;
+		}) : p`<tbody>
+              ${e.map((e) => this.mobileRow(e, n, f, m, h, c))}
+              <!-- Empty rows with the same two lines per cell keep a short last page as tall as a full one. -->
+              ${t > 1 ? Array.from({ length: H - e.length }, () => p`<tr
+                        class="lintje-data-table__mobile-row lintje-data-table__mobile-row--filler"
+                        aria-hidden="true"
+                      >
+                        <td class="lintje-data-table__mobile-cell">
+                          <span class="lintje-data-table__mobile-name">&nbsp;</span>
+                          ${this.hasSubline ? p`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : l}
+                        </td>
+                        <td class="lintje-data-table__mobile-cell" colspan=${h - 1}>
+                          <span class="lintje-data-table__mobile-measure">&nbsp;</span>
+                          ${c.threshold ? p`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : l}
+                        </td>
+                      </tr>`) : l}
+            </tbody>`}
+      ${i.totals ? p`<tfoot>
+              ${this.mobileSumRow("lintje-data-table__total", i.totalsLabel ?? "Totaal", i.totals[c.key], c, h)}
+            </tfoot>` : l}
+    </table>`;
+	}
+	mobileRow(e, t, n, r, i, a) {
+		let o = this.data, s = this.shown[0], c = !!o.selectable, u = !!o.clickable && !c, d = o.rowActions?.length ? o.rowActions : null, f = a.format === "change-compact" ? {
+			...a,
+			format: "change"
+		} : a, m = this.rowKey(e), h = this.rowDetail(e), g = this.mobileStatus(a, e), v = n.length > 0 && this.openRows.includes(m), y = `lintje-data-table-${t}-detail-${m}`, b = p`<span class="lintje-data-table__mobile-name"
+        >${this.opener(e, this.cell(s, e[s.key]))}</span
+      >${this.subline(e)}`, x = m === o.selectedId, S = this.checkedIds.includes(m);
+		return p`<tr
+        class=${_({
+			"lintje-data-table__mobile-row": !0,
+			"is-clickable": u,
+			"is-selected": x,
+			"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}
+      >
+        <th scope="row" class="lintje-data-table__mobile-cell">
+          ${c ? p`<span class="lintje-data-table__mobile-check">
+                ${this.rowCheck(e, m, S)}
+                <span class="lintje-data-table__mobile-identity">${b}</span>
+              </span>` : b}
+        </th>
+        <td class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right">
+          <span class="lintje-data-table__mobile-measure"
+            >${this.cell(f, e[a.key])}</span
+          >
+          ${g ? p`<span
+                class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${g.tone}"
+                >${g.label}</span
+              >` : l}
+        </td>
+        ${r ? p`<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-measure"
-                  >${this.cell(h, e[u.key])}</span
-                >
-                ${d ? m`<span
-                      class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${d.tone}"
-                      >${d.label}</span
-                    >` : r}
+                <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", {
+			id: m,
+			action: e
+		})) : l}
+                </span>
+              </td>` : l}
+      </tr>
+      ${n.length > 0 ? p`<tr class="lintje-data-table__mobile-detail" id=${y} ?hidden=${!v}>
+              <td class="lintje-data-table__mobile-cell" colspan=${i}>
+                ${v ? this.detailList(e, n, "row") : l}
               </td>
-              ${v ? m`<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">
-                        ${_.length > 0 ? m`<button
-                                type="button"
-                                class="lintje-data-table__mobile-toggle"
-                                aria-label=${`Alle gegevens van ${a.label}`}
-                                aria-expanded=${b ? "true" : "false"}
-                                aria-controls=${S}
-                                @click=${() => this.toggleMobileRow(t)}
-                              >
-                                ${f("functioneel-delta-omlaag", {
-				size: 16,
-				rotate: b ? 180 : void 0
-			})}
-                              </button>` : r}
-                        ${g ? j(g, a.label, (e) => this.emit("lintje-row-action", {
-				id: t,
-				action: e
-			})) : r}
-                      </span>
-                    </td>` : r}
-            </tr>
-            ${_.length > 0 ? m`<tr
-                    class="lintje-data-table__mobile-detail"
-                    id=${S}
-                    ?hidden=${!b}
-                  >
-                    <td class="lintje-data-table__mobile-cell" colspan=${y}>
-                      ${b ? m`<lintje-description-list
-                              .items=${_.map((t) => ({
-				label: t.header,
-				value: X(t, e[t.key])
-			}))}
-                            ></lintje-description-list>` : r}
-                    </td>
-                  </tr>` : r}`;
+            </tr>` : l}`;
+	}
+	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">
+      <th scope="rowgroup" class="lintje-data-table__mobile-cell lintje-data-table__group-head">
+        <button
+          type="button"
+          class="lintje-data-table__group-toggle"
+          aria-expanded=${t ? "true" : "false"}
+          @click=${() => this.toggleGroup(e.key)}
+        >
+          ${v("functioneel-delta-omlaag", {
+			size: 16,
+			rotate: t ? void 0 : 270
 		})}
-        <!-- 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: G - e.length }, () => m`<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 ? m`<span class="lintje-data-table__mobile-sub">&nbsp;</span>` : r}
-                </td>
-                <td class="lintje-data-table__mobile-cell" colspan=${y - 1}>
-                  <span class="lintje-data-table__mobile-measure">&nbsp;</span>
-                  ${u.threshold ? m`<span class="lintje-data-table__mobile-status">&nbsp;</span>` : r}
-                </td>
-              </tr>`) : r}
-      </tbody>
-    </table>`;
-	}
-	toggleMobileRow(e) {
-		this.mobileOpen = this.mobileOpen.includes(e) ? this.mobileOpen.filter((t) => t !== e) : [...this.mobileOpen, e];
+          <span class="lintje-data-table__group-name">${this.cell(i, e.value)}</span>
+          <span class="lintje-data-table__group-count">${o} ${o === 1 ? "rij" : "rijen"}</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}
+      </td>
+      ${r > 2 ? p`<td class="lintje-data-table__mobile-cell"></td>` : l}
+    </tr>`;
+	}
+	mobileSumRow(e, t, n, r, i) {
+		return p`<tr class=${e}>
+      <th scope="row" class="lintje-data-table__mobile-cell lintje-data-table__sum-label">${t}</th>
+      <td class="lintje-data-table__mobile-cell lintje-data-table__mobile-cell--align-right">
+        ${n === void 0 ? l : p`<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}
+    </tr>`;
+	}
+	totalContent(e, t) {
+		let { value: n, how: r } = X(t), i = {
+			...e,
+			threshold: void 0
+		};
+		return p`${r ? p`<span class="lintje-data-table__how">${r} </span>` : l}${this.cell(i, n)}`;
 	}
 	rowKeydown(e, t) {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.emit("lintje-row-click", this.rowDetail(t)));
 	}
-	pager(e, t, n, r, i, a) {
-		let o = this.data?.caption;
-		return m`<lintje-pagination
+	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
       class="lintje-data-table__pagination lintje-data-table__pagination--${e}"
-      label=${o ? `Paginering ${o}` : "Paginering"}
+      label=${s ? `Paginering ${s}` : "Paginering"}
       .page=${t + 1}
       .pageCount=${n}
       .pageSize=${r}
       .total=${i}
-      unit="rijen"
-      unit-one="rij"
+      .filteredFrom=${this.grouped ? void 0 : c}
+      unit=${a.many}
+      unit-one=${a.one}
       @lintje-page-change=${(e) => {
-			e.stopPropagation(), a(e.detail.page - 1), this.announce(`Pagina ${e.detail.page} van ${n}`);
+			e.stopPropagation(), o(e.detail.page - 1), this.announce(`Pagina ${e.detail.page} van ${n}`);
 		}}
     ></lintje-pagination>`;
 	}
 	opener(e, t) {
-		return this.data?.openable ? m`<button
+		return this.data?.openable ? p`<button
       type="button"
       class="lintje-data-table__open"
       @click=${(t) => {
@@ -1372,37 +1711,46 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
     </button>` : t;
 	}
 	cell(e, t) {
-		if (t === 0 && e.zeroText != null) return m`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
+		if (t === 0 && e.zeroText != null) return p`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
+		if (e.format === "label" && t != null) {
+			let n = e.labels?.[String(t)];
+			return n ? h({
+				value: n.label,
+				tone: n.tone,
+				icon: n.icon,
+				className: "lintje-data-table__label"
+			}) : String(t);
+		}
 		if (e.format === "status" && t != null) {
-			let n = pe(e, String(t));
-			if (n) return m`<lintje-status-dot
+			let n = he(e, String(t));
+			if (n) return p`<lintje-status-dot
           tone=${n}
-          label=${e.status?.labels?.[String(t)] ?? r}
+          label=${e.status?.labels?.[String(t)] ?? l}
         ></lintje-status-dot>`;
 		}
-		let n = J(e, t);
+		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" ? m`<span
+			return e.format === "change-compact" ? p`<span
             class="lintje-data-table__change lintje-data-table__change--${r}"
             aria-hidden="true"
             >${t > 0 ? "▲" : t < 0 ? "▼" : "●"}</span
-          ><span class="visually-hidden">${n}</span>` : m`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
+          ><span class="visually-hidden">${n}</span>` : p`<span class="lintje-data-table__change lintje-data-table__change--${r}">${n}</span>`;
 		}
-		let i = Y(e, t);
-		if (!i) return n;
-		let a = i.tone === "good" ? r : f(i.tone === "caution" ? "functioneel-waarschuwing" : "functioneel-foutmelding", {
+		let r = K(e, t);
+		if (!r) return n;
+		let i = r.tone === "good" ? l : v(r.tone === "caution" ? "functioneel-waarschuwing" : "functioneel-foutmelding", {
 			size: 14,
 			className: "lintje-threshold-cell__icon"
 		});
-		return m`<span class="lintje-threshold-cell lintje-threshold-cell--${i.tone}"
-      >${a}${n}<span class="visually-hidden"> · ${i.label}</span></span
+		return p`<span class="lintje-threshold-cell lintje-threshold-cell--${r.tone}"
+      >${i}${n}<span class="visually-hidden"> · ${r.label}</span></span
     >`;
 	}
 	truncatedCell(e, t) {
-		let n = X(e, t);
-		return n == null ? Z : m`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
+		let n = q(e, t);
+		return n == null ? Z : p`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
         >${this.cell(e, t)}</span
       ><span class="visually-hidden">${n}</span>`;
 	}
@@ -1416,12 +1764,12 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 		let t = this.data?.mobileSublineTemplate, n = null;
 		return t ? n = t.replace(/\{(\w+)\}/g, (t, n) => {
 			let r = this.columns.find((e) => e.key === n), i = e[n];
-			return (r ? J(r, i) : i == null ? null : String(i)) ?? "—";
-		}) : this.sublineColumns.length > 0 && (n = this.sublineColumns.map((t) => J(t, e[t.key]) ?? "—").join(" · ")), n == null ? r : m`<span class="lintje-data-table__mobile-sub">${n}</span>`;
+			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>`;
 	}
 	mobileStatus(e, t) {
 		if (!e.threshold) return null;
-		let n = Y(e, t[e.key]);
+		let n = K(e, t[e.key]);
 		return n && {
 			label: n.label,
 			tone: n.outside ? "outside" : "within"
@@ -1429,21 +1777,21 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
 	}
 	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(m`<span class="visually-hidden">Alles selecteren</span>`, t.length > 0 && r === t.length, r > 0, (e) => this.setChecked(e ? t.map((e) => this.rowKey(e)) : []));
+		return this.checkbox(p`<span class="visually-hidden">Alles selecteren</span>`, t.length > 0 && r === t.length, r > 0, (e) => this.setChecked(e ? t.map((e) => this.rowKey(e)) : []));
 	}
 	rowCheck(e, t, n) {
 		let r = this.columns[0], i = r ? this.sortValue(r, e) : t;
-		return this.checkbox(m`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
+		return this.checkbox(p`<span class="visually-hidden">${`${i} selecteren`}</span>`, n, !1, (e) => {
 			let n = this.checkedIds.filter((e) => e !== t);
 			if (e && this.#f && this.data?.bulkActions) {
 				let e = this.uncheckable, n = this.sortedRows.map((e) => this.rowKey(e)).filter((t) => !e.has(t));
-				this.setChecked(ae(this.checkedIds, A(n, this.#d, t)));
+				this.setChecked(ae(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 m`<label class="lintje-choice${i ? " is-disabled" : ""}">
+		return p`<label class="lintje-choice${i ? " is-disabled" : ""}">
       <input
         type="checkbox"
         class="lintje-choice__input"
@@ -1462,6 +1810,6 @@ var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = m`<span aria-hidden="tr
     </label>`;
 	}
 };
-t("lintje-data-table", $);
+i("lintje-data-table", $);
 //#endregion
 export { $ as LintjeDataTable };