lintje 0.1.1

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

@@ -0,0 +1,1467 @@
+import { $ as e, Bt as t, G as n, Gt as r, H as i, Ht as a, Kt as o, Lt as s, S as c, U as l, Z as u, a as d, et as f, k as p, o as m, t as h, w as g } from "../chunks/base-rBLTcEIv.js";
+import { n as _, r as v } from "../chunks/focus-trap-w3vCamJ6.js";
+import "./menu-button.js";
+import { t as y } from "../chunks/input-jQVTln7H.js";
+import { t as b } from "./announcement.js";
+import "./drawer.js";
+import "./description-list.js";
+import { u as x } from "../chunks/date-format-B5DPGjAw.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-lFooAfD1.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";
+//#endregion
+//#region src/components/tables/data-table/editing.ts
+function re(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,
+			column: e.column
+		};
+		return null;
+	}
+	let a = t === "next" ? 1 : -1, o = n * r;
+	for (let t = e.row * r + e.column + a; t >= 0 && t < o; t += a) {
+		let e = {
+			row: Math.floor(t / r),
+			column: t % r
+		};
+		if (i(e.row, e.column)) return e;
+	}
+	return null;
+}
+function D(e) {
+	return `${e.id}\u001f${e.column}`;
+}
+function O(e) {
+	return e == null ? "" : String(e);
+}
+var ie = 0, k = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#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;
+	}
+	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));
+		for (let [e, t] of this.#n) {
+			if (this.#s.has(e)) continue;
+			this.#n.delete(e);
+			let n = this.#o.get(e);
+			n ? (this.#r.set(e, t), this.message = `Niet opgeslagen: ${n.message}`) : (this.#r.delete(e), this.message = "Opgeslagen");
+		}
+	}
+	mode(e, t) {
+		let n = D(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)
+		};
+		let i = this.#o.get(n);
+		return i && !this.#i.has(n) ? {
+			kind: "editor",
+			value: i.value ?? this.#r.get(n) ?? O(t),
+			error: i.message
+		} : this.editing && D(this.editing) === n ? {
+			kind: "editor",
+			value: O(t)
+		} : { kind: "rest" };
+	}
+	open(e, t) {
+		this.#c = t.closest("table"), this.editing = e, this.#l = {
+			key: D(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 = {
+			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({
+			id: e.id,
+			column: e.column,
+			value: t
+		})), this.editing = null, this.#l = {
+			key: a,
+			target: "cell"
+		}, r) {
+			let t = i.columns, n = re({
+				row: i.ids.indexOf(e.id),
+				column: t.findIndex((t) => t.key === e.column)
+			}, r, i.ids.length, t.length, (e, n) => this.editable({
+				id: i.ids[e] ?? "",
+				column: t[n]?.key ?? ""
+			}, t[n]));
+			if (n) {
+				let e = {
+					id: i.ids[n.row] ?? "",
+					column: t[n.column]?.key ?? ""
+				};
+				this.editing = e, this.#l = {
+					key: D(e),
+					target: "editor"
+				};
+			}
+		}
+		this.#e.requestUpdate();
+	}
+	editable(e, t) {
+		let n = D(e);
+		return !!t?.editor && !this.#n.has(n) && !this.#s.has(n);
+	}
+	restoreFocus(e) {
+		let t = this.#l;
+		if (!t) return;
+		this.#l = null;
+		let n = [...(this.#c?.isConnected ? this.#c : e).querySelectorAll("[data-cell]")].find((e) => e.dataset.cell === t.key);
+		if (!n) return;
+		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, s) {
+		let c = this.mode(e, n);
+		if (c.kind === "busy") return o`<span class="lintje-data-table__busy"
+        ><lintje-spinner size="16"></lintje-spinner><span>${c.value}</span></span
+      >`;
+		if (c.kind === "rest") return o`${i}${f("functioneel-bewerken", {
+			size: 14,
+			className: "lintje-data-table__edit-icon"
+		})}`;
+		let l = c.error ? `${this.#t}-${s.copy}-error-${s.ids.indexOf(e.id)}-${e.column}` : null, d = (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", s)) : t.key === "Tab" && (t.preventDefault(), this.commit(e, r.value, n, t.shiftKey ? "previous" : "next", s));
+		}, p = (t) => {
+			!c.error && this.editing && D(this.editing) === D(e) && this.commit(e, t.currentTarget.value, n, null, s);
+		}, m = u({
+			"lintje-data-table__editor": !0,
+			"focus-inset": !0,
+			"is-error": !!c.error
+		}), h = t.editor, g = h?.kind === "select" ? o`<select
+            class=${m}
+            aria-label=${a}
+            aria-invalid=${c.error ? "true" : r}
+            aria-describedby=${l ?? r}
+            @keydown=${d}
+            @blur=${p}
+          >
+            ${(h.options ?? []).map((e) => o`<option value=${e.value} ?selected=${e.value === c.value}>
+                  ${e.label ?? e.value}
+                </option>`)}
+          </select>` : o`<input
+            type="text"
+            class=${m}
+            inputmode=${h?.kind === "number" ? "decimal" : r}
+            placeholder=${h?.kind === "date" ? "dd-mm-jjjj" : r}
+            aria-label=${a}
+            aria-invalid=${c.error ? "true" : r}
+            aria-describedby=${l ?? r}
+            .value=${c.value}
+            @keydown=${d}
+            @blur=${p}
+          />`;
+		return o`${g}${c.error ? o`<span id=${l ?? r} class="lintje-data-table__edit-error">${c.error}</span>` : r}`;
+	}
+	cellClasses(e, t) {
+		let n = this.mode(e, t);
+		return {
+			"lintje-data-table__cell--editable": !0,
+			"is-editing": n.kind === "editor",
+			"is-busy": n.kind === "busy"
+		};
+	}
+	cellKeydown(e, t) {
+		t.target === t.currentTarget && (t.key === "Enter" || t.key === "F2") && (t.preventDefault(), t.stopPropagation(), this.open(e, t.currentTarget));
+	}
+	renderStatus() {
+		return o`<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) {
+	let r = e.indexOf(n), i = t == null ? -1 : e.indexOf(t);
+	if (r < 0) return [];
+	if (i < 0) return [n];
+	let [a, o] = i < r ? [i, r] : [r, i];
+	return e.slice(a, o + 1);
+}
+function ae(e, t) {
+	let n = new Set(e);
+	return [...e, ...t.filter((e) => !n.has(e))];
+}
+function j(e, t, n) {
+	return o`<lintje-menu-button
+    icon
+    variant="tertiary"
+    placement="bottom-end"
+    label=${`Acties voor ${t}`}
+    .items=${e}
+    @lintje-action=${(e) => {
+		e.stopPropagation(), n(e.detail);
+	}}
+  ></lintje-menu-button>`;
+}
+function oe(e, t, n, i, a) {
+	let s = n ? e.length > 0 ? o`<lintje-menu-button
+          label="Acties"
+          .items=${e}
+          @lintje-action=${(e) => {
+		e.stopPropagation(), i(e.detail);
+	}}
+        ></lintje-menu-button>` : r : e.map((e) => o`<lintje-button
+            variant=${e.danger ? "danger-secondary" : "secondary"}
+            size="compact"
+            icon=${e.icon ?? r}
+            ?disabled=${!!e.disabled}
+            @click=${() => i(e.value)}
+            >${e.label}</lintje-button
+          >`);
+	return o`<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>
+    ${s}
+    <lintje-button
+      class="lintje-data-table__selection-clear"
+      variant="tertiary"
+      size="compact"
+      @click=${a}
+      >Selectie opheffen</lintje-button
+    >
+  </div>`;
+}
+//#endregion
+//#region src/components/tables/data-table/filters.ts
+function M(e) {
+	return Array.isArray(e) ? e.length > 0 : typeof e == "string" && e.trim() !== "";
+}
+function N(e) {
+	return M(e) ? Array.isArray(e) ? e : e.trim() : null;
+}
+function se(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}’`;
+	return `${e.header}: ${n}`;
+}
+function P(e, t) {
+	let n = `Filter op ${e.header.toLocaleLowerCase("nl")}`;
+	return M(t) ? Array.isArray(t) ? `${n}, ${t.length} gekozen` : `${n}, ‘${t}’` : n;
+}
+function F(e, t, n) {
+	let [r, ...i] = e;
+	if (!r) return [];
+	let a = new Set(n), o = new Map((t ?? []).map((e, t) => [e, t]));
+	return [r, ...i.map((e, t) => ({
+		column: e,
+		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) {
+	let r = new Set(n);
+	return {
+		order: [e, ...t],
+		hidden: t.filter((e) => !r.has(e))
+	};
+}
+function L(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");
+		},
+		keydown: (e) => {
+			if (e.key !== "Tab" || e.defaultPrevented) return;
+			let n = v(e.currentTarget), r = n.indexOf(i());
+			(e.shiftKey ? r > 0 : r !== n.length - 1) || t(e.shiftKey ? "back" : "forward") && e.preventDefault();
+		}
+	};
+}
+function R(e, t, n, r) {
+	let i = M(t);
+	return o`<button
+      type="button"
+      class=${u({
+		"lintje-data-table__funnel": !0,
+		"is-filtered": i
+	})}
+      data-column=${e.key}
+      aria-label=${P(e, t)}
+      aria-haspopup="dialog"
+      aria-expanded=${n ? "true" : "false"}
+      @click=${(e) => r(e.currentTarget)}
+    >
+      ${f("functioneel-filters", { size: 14 })}
+    </button>`;
+}
+function z() {
+	return o`<span class="lintje-data-table__filter-dot" role="img" aria-label="Gefilterd"></span>`;
+}
+function B(e, t, n) {
+	if (e.filter?.kind === "text") return o`<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 o`<div class="lintje-data-table__filter-options">
+    ${(e.filter?.options ?? []).map((e) => o`<label class="lintje-choice lintje-data-table__filter-option">
+        <input
+          type="checkbox"
+          class="lintje-choice__input"
+          .checked=${i.has(e.value)}
+          @change=${(t) => {
+		let r = t.target.checked, a = [...i].filter((t) => t !== e.value);
+		n(r ? [...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 : o`<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 o`<lintje-popover
+    open
+    panel-role="dialog"
+    label=${P(t, null)}
+    .anchor=${e.anchor}
+    @focusout=${n.focusout}
+    @keydown=${n.keydown}
+    @lintje-close=${(t) => {
+		t.stopPropagation(), e.onClose();
+	}}
+  >
+    <div class="lintje-data-table__filter-panel">
+      <div class="lintje-data-table__filter-name">${t.header}</div>
+      ${B(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>
+      </div>
+    </div>
+  </lintje-popover>`;
+}
+function H(e) {
+	return o`<lintje-drawer
+    open
+    heading="Filters"
+    @lintje-close=${(t) => {
+		t.stopPropagation(), e.onClose();
+	}}
+  >
+    ${e.columns.map((t) => o`<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))}
+      </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 o`<div
+    class="lintje-data-table__toolbar ${i ? "lintje-data-table__toolbar--quiet" : ""}"
+  >
+    <div class="lintje-data-table__chips">
+      ${e.columns.length > 0 ? o`<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}
+      ${t.map((t) => {
+		let n = e.values[t.key];
+		return o`<span class="lintje-data-table__chip"
+          >${ce(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 })}
+          </button></span
+        >`;
+	})}
+      <span class="lintje-data-table__filter-total" role="status">${n}</span>
+    </div>
+  </div>`;
+}
+function W(e, t) {
+	return o`<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 le(e) {
+	let t = L(e.anchor, e.onLeave);
+	return o`<lintje-popover
+    open
+    panel-role="dialog"
+    label="Kolommen kiezen"
+    placement="bottom-end"
+    .anchor=${e.anchor}
+    @focusout=${t.focusout}
+    @keydown=${t.keydown}
+    @lintje-close=${(t) => {
+		t.stopPropagation(), e.onClose();
+	}}
+  >
+    <div class="lintje-data-table__filter-panel">
+      <div class="lintje-data-table__filter-name">Kolommen</div>
+      <p class="lintje-data-table__chooser-note">${e.first.header} staat altijd vooraan.</p>
+      <lintje-sortable-list
+        checkable
+        label="Volgorde en zichtbaarheid van de kolommen"
+        .items=${e.items}
+        @lintje-change=${(t) => {
+		t.stopPropagation(), e.onOrder(t.detail);
+	}}
+        @lintje-checked-change=${(t) => {
+		t.stopPropagation(), e.onChecked(t.detail);
+	}}
+      ></lintje-sortable-list>
+    </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) {
+	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;
+		t = e;
+	}
+	return document.scrollingElement;
+}
+var de = /* @__PURE__ */ new Set([
+	"number",
+	"percent",
+	"decimal",
+	"change",
+	"change-compact"
+]), fe = /* @__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 J(e, t) {
+	if (t == null) return null;
+	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 ? "+" : ""}${d(t, e.decimals ?? 0)}%` : e.format === "percent" ? m(t, e.decimals ?? 0) : e.format === "decimal" ? d(t, e.decimals ?? 1) : d(t, e.decimals ?? 0), e.unit ? `${n} ${e.unit}` : n;
+}
+function Y(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);
+	return {
+		outside: i,
+		tone: i ? "above-threshold" : a ? "caution" : "good",
+		label: i ? r ? "onder norm" : "boven norm" : a ? "dicht bij norm" : "binnen norm"
+	};
+}
+function X(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);
+	return r ? `${n} · ${r.label}` : n;
+}
+function pe(e, t) {
+	let n = e.status?.tones?.[t] ?? t;
+	return fe.has(n) ? n : null;
+}
+var me = (e) => `${e} ${e === 1 ? "rij" : "rijen"}`, Z = o`<span aria-hidden="true" class="lintje-data-table__muted">—</span
+  ><span class="visually-hidden">geen gegevens</span>`, Q = class {
+	#e;
+	#t;
+	#n;
+	constructor(e) {
+		this.start = !1, this.end = !1, this.#e = null, this.#t = null, this.measure = () => {
+			let e = this.#e;
+			if (!e) return;
+			let t = e.scrollLeft > 0, n = e.scrollLeft + e.clientWidth < e.scrollWidth - 1;
+			(this.start !== t || this.end !== n) && (this.start = t, this.end = n, this.#n());
+		}, this.watch = (e) => {
+			e !== this.#e && (this.disconnect(), e instanceof HTMLElement && (this.#e = e, this.measure(), e.addEventListener("scroll", this.measure, { passive: !0 }), this.#t = new ResizeObserver(this.measure), this.#t.observe(e), e.firstElementChild && this.#t.observe(e.firstElementChild)));
+		}, this.#n = e;
+	}
+	disconnect() {
+		this.#e?.removeEventListener("scroll", this.measure), this.#t?.disconnect(), this.#e = null, this.#t = null;
+	}
+}, $ = class extends w {
+	constructor(...e) {
+		super(...e), this.bare = !1, this.plain = !1, this.sort = null, this.checkedIds = [], this.page = 0, this.mobilePage = 0, this.#e = new s(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({
+			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();
+			});
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			p,
+			a(b),
+			a(g),
+			a(c),
+			a(y),
+			E,
+			a(ne)
+		];
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			bare: { type: Boolean },
+			plain: {
+				type: Boolean,
+				reflect: !0
+			},
+			sort: { state: !0 },
+			checkedIds: { state: !0 },
+			page: { state: !0 },
+			mobilePage: { state: !0 },
+			filterValues: { state: !0 },
+			filterDraft: { state: !0 },
+			columnOrder: { state: !0 },
+			hiddenKeys: { state: !0 },
+			panel: { state: !0 },
+			mobileOpen: { state: !0 },
+			liveMessage: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	#m;
+	#h;
+	createRenderRoot() {
+		let e = super.createRenderRoot();
+		return e.addEventListener("focusin", this.#v), 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();
+	}
+	expandChanged(e) {
+		e || this.#n.disconnect();
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), (e.has("data") || e.has("checkedIds")) && this.#g(), !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 ?? []);
+		n !== this.#i && (this.#i = n, this.checkedIds = this.data?.checkedIds ?? []);
+		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));
+	}
+	updated(e) {
+		super.updated(e), this.#s.restoreFocus(this.renderRoot), this.#_();
+	}
+	#g() {
+		if (this.#m = null, !l(this)) return;
+		let e = [...this.renderRoot.querySelectorAll(".lintje-data-table")].find(l);
+		if (!e) return;
+		let t = e.querySelector(":scope > .lintje-data-table__selection");
+		if (t && l(t)) {
+			this.#m = {
+				scope: e,
+				table: null,
+				row: -1,
+				stop: 0
+			};
+			return;
+		}
+		let n = [...e.querySelectorAll("table")].find(l), r = n ? [...n.querySelectorAll(K)] : [], i = r.findIndex(l);
+		if (!n || i === -1) return;
+		let a = v(r[i]).findIndex(l);
+		this.#m = {
+			scope: e,
+			table: n,
+			row: i,
+			stop: Math.max(0, a)
+		};
+	}
+	#_() {
+		let e = this.#m;
+		if (this.#m = null, !e?.scope.isConnected) return;
+		let t = i();
+		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;
+		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)];
+		}
+		(a ?? r ?? v(e.scope)[0])?.focus();
+	}
+	#v;
+	#y() {
+		let e = i();
+		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({
+				top: i ? r.bottom - n.top : r.top - n.bottom,
+				behavior: "instant"
+			});
+			return;
+		}
+	}
+	get columns() {
+		let e = this.data?.columns ?? [], [t, ...n] = e;
+		return !this.data?.openable || !t?.editor ? e : [{
+			...t,
+			editor: void 0
+		}, ...n];
+	}
+	get rows() {
+		return this.data?.rows ?? [];
+	}
+	rowKey(e) {
+		return String(e[this.data?.rowKey ?? "id"]);
+	}
+	rowDetail(e) {
+		let t = this.rowKey(e), n = this.columns[0], r = n ? e[n.key] : null, i = e.href;
+		return {
+			id: t,
+			label: r == null ? t : String(r),
+			href: typeof i == "string" && i !== "" ? i : void 0
+		};
+	}
+	get initialSort() {
+		return this.data?.defaultSort ?? {
+			key: this.columns[0]?.key ?? "",
+			direction: "asc"
+		};
+	}
+	get activeSort() {
+		return this.sort ?? this.initialSort;
+	}
+	sortValue(e, t) {
+		let n = t[e.key];
+		if (e.editor?.kind === "date") {
+			let e = x(String(n ?? ""));
+			return e.kind === "ok" ? e.iso : "";
+		}
+		return n ?? (q(e, this.rows) ? -Infinity : "");
+	}
+	get sortedRows() {
+		let e = this.activeSort, t = this.columns.find((t) => t.key === e.key);
+		if (!t) return this.rows;
+		let n = [...this.rows];
+		return n.sort((n, r) => {
+			let i = this.sortValue(t, n), a = this.sortValue(t, r), o = typeof i == "number" && typeof a == "number" ? i - a : String(i).localeCompare(String(a), "nl");
+			return e.direction === "asc" ? o : -o;
+		}), n;
+	}
+	toggleSort(e) {
+		if (e.sortable === !1) return;
+		let t = this.activeSort, n;
+		if (t.key !== e.key) {
+			let t = this.rows[0], r = t != null && typeof this.sortValue(e, t) == "number";
+			n = {
+				key: e.key,
+				direction: r ? "desc" : "asc"
+			};
+		} else n = {
+			key: e.key,
+			direction: t.direction === "asc" ? "desc" : "asc"
+		};
+		this.setSort(n);
+	}
+	setSort(e) {
+		let t = this.initialSort, n = e.key === t.key && e.direction === t.direction;
+		this.sort = n ? null : e, this.page = 0, this.mobilePage = 0, this.emit("lintje-sort-change", this.sort);
+		let r = this.columns.find((t) => t.key === e.key);
+		if (r) {
+			let t = e.direction === "asc" ? "oplopend" : "aflopend";
+			this.announce(`Gesorteerd op ${r.header.toLocaleLowerCase("nl")}, ${t}.`);
+		}
+	}
+	announce(e) {
+		this.liveMessage = "", cancelAnimationFrame(this.#a), this.#a = requestAnimationFrame(() => {
+			this.#a = 0, this.liveMessage = e;
+		});
+	}
+	setChecked(e) {
+		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);
+	}
+	get filterColumns() {
+		return this.columns.filter((e) => e.filter);
+	}
+	get uncheckable() {
+		return new Set(this.data?.uncheckableIds ?? []);
+	}
+	openPanel(e, t) {
+		this.#u = t, this.filterDraft = e.kind === "filter" ? { [e.column]: this.filterValues[e.column] ?? [] } : { ...this.filterValues }, this.panel = e, e.kind !== "sheet" && this.focusPanel(e);
+	}
+	async focusPanel(e) {
+		await this.updateComplete;
+		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();
+	}
+	closePanel(e, t = !0) {
+		if (e && this.panel !== e) return;
+		let n = this.#u;
+		this.panel = null, this.#u = null, n && t && _(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];
+		return s ? (this.closePanel(e, !1), s.focus(), !0) : !1;
+	}
+	applyFilters(e, t) {
+		this.#o = !0;
+		let n = { ...this.filterValues };
+		for (let r of e) {
+			let e = N(n[r]), i = t ? null : N(this.filterDraft[r]);
+			i ? n[r] = i : delete n[r], JSON.stringify(e) !== JSON.stringify(i) && this.emit("lintje-filter-change", {
+				column: r,
+				value: i
+			});
+		}
+		this.filterValues = n, this.page = 0, this.mobilePage = 0, this.closePanel();
+	}
+	async clearFilter(e, t) {
+		let n = l(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", {
+			column: e,
+			value: null
+		}), !n || !r) 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();
+	}
+	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);
+			this.#p = {
+				seen: t,
+				items: e.map((e) => ({
+					id: e.key,
+					label: e.header,
+					checked: !n.has(e.key)
+				}))
+			};
+		}
+		return this.#p.items;
+	}
+	changeColumns(e, t) {
+		let n = this.columns[0];
+		if (!n) return;
+		let r = I(n.key, e, t);
+		this.columnOrder = e, this.hiddenKeys = r.hidden, this.emit("lintje-columns-change", r);
+	}
+	render() {
+		let e = this.data;
+		if (!e) return r;
+		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 o`<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}
+      ?expandable=${!!e.expandable && t}
+      ?download=${!!e.download && t}
+      @lintje-tile-expand=${(e) => {
+			e.stopPropagation(), this.expand(!0);
+		}}
+      @lintje-tile-download=${(e) => {
+			e.stopPropagation(), this.csv();
+		}}
+    >
+      ${e.notice ? o`<lintje-announcement slot="notice" compact .data=${e.notice}></lintje-announcement>` : r}
+      ${this.content()}
+    </lintje-tile>
+
+    ${this.renderExpandModal(this.expanded && t ? this.table(this.#n) : r, {
+			heading: e.title,
+			subtitle: n,
+			footnote: e.footnote,
+			csv: e.download ? () => this.csv() : void 0
+		})}`;
+	}
+	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
+			});
+			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), s = n.slice(this.page * i, (this.page + 1) * i), c = Math.ceil(n.length / G), l = this.mobilePage * G, d = n.slice(l, l + G), f = this.#e.matches, p = e === this.#n === this.expanded;
+		return o`<div class=${u({
+			"lintje-data-table": !0,
+			"is-phone": f
+		})}>
+      ${this.toolbar(e)} ${f ? r : this.selectionBar(!1)}
+      <!-- Desktop table: scrolls sideways when it is wider than the tile -->
+      <div
+        class=${u({
+			"lintje-data-table__frame": !0,
+			"is-scrollable-start": e.start,
+			"is-scrollable-end": e.end
+		})}
+      >
+        <div class="lintje-data-table__scroller" ${h(e.watch)}>
+          ${this.fullTable(s, a, i, e)}
+        </div>
+      </div>
+
+      <!-- Mobile representation: two columns (C8) -->
+      ${this.mobileTable(d, c, e === this.#n ? "modal" : "tile")}
+      ${a > 1 ? this.pager("full", this.page, a, i, n.length, (e) => {
+			this.page = e;
+		}) : r}
+      ${c > 1 ? this.pager("mobile", this.mobilePage, c, G, n.length, (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>
+    </div>`;
+	}
+	toolbar(e) {
+		let t = this.sortMenu();
+		return this.filterColumns.length === 0 && t === r ? r : U({
+			columns: this.filterColumns,
+			values: this.filterValues,
+			shown: this.rows.length,
+			total: this.data.totalRows,
+			sortMenu: t,
+			onClearFilter: (e, t) => void this.clearFilter(e, t),
+			onOpenSheet: () => this.openPanel({
+				kind: "sheet",
+				edges: e
+			}, null)
+		});
+	}
+	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 = [
+			{ heading: "Sorteren op" },
+			...e.map((e) => ({
+				value: `column:${e.key}`,
+				label: e.header,
+				radio: !0,
+				checked: e.key === i.key
+			})),
+			{ heading: "Volgorde" },
+			{
+				value: "direction:asc",
+				label: "Oplopend",
+				radio: !0,
+				checked: i.direction === "asc"
+			},
+			{
+				value: "direction:desc",
+				label: "Aflopend",
+				radio: !0,
+				checked: i.direction === "desc"
+			}
+		];
+		return o`<lintje-menu-button
+      class="lintje-data-table__sort-menu"
+      label="Sorteren"
+      .items=${a}
+      @lintje-action=${(t) => {
+			t.stopPropagation();
+			let [n, r] = t.detail.split(/:(.*)/s), i = this.activeSort;
+			if (n === "direction") {
+				this.setSort({
+					key: i.key,
+					direction: r
+				});
+				return;
+			}
+			let a = e.find((e) => e.key === r);
+			a && a.key !== i.key && this.toggleSort(a);
+		}}
+    ></lintje-menu-button>`;
+	}
+	get mobileMeasure() {
+		let e = this.shown;
+		return e.find((e) => e.mobileMeasure) ?? e[1] ?? e[0];
+	}
+	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", {
+			ids: [...this.checkedIds],
+			action: e
+		}), () => this.setChecked([]));
+	}
+	panels(e) {
+		let t = this.panel;
+		if (!t || t.edges !== e) return r;
+		if (t.kind === "columns") {
+			let e = this.columns[0];
+			return e ? le({
+				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),
+				onClose: () => this.closePanel(t),
+				onLeave: (e) => this.leavePanel(t, e)
+			}) : r;
+		}
+		if (t.kind === "sheet") {
+			let e = this.filterColumns;
+			return H({
+				columns: e,
+				draft: this.filterDraft,
+				onDraft: (e, t) => {
+					this.filterDraft = {
+						...this.filterDraft,
+						[e]: t
+					};
+				},
+				onApply: () => this.applyFilters(e.map((e) => e.key), !1),
+				onClear: () => this.applyFilters(e.map((e) => e.key), !0),
+				onClose: () => this.closePanel(t)
+			});
+		}
+		let n = this.columns.find((e) => e.key === t.column);
+		return n ? V({
+			column: n,
+			anchor: this.#u,
+			draft: this.filterDraft[n.key],
+			onDraft: (e) => {
+				this.filterDraft = {
+					...this.filterDraft,
+					[n.key]: e
+				};
+			},
+			onApply: () => this.applyFilters([n.key], !1),
+			onClear: () => this.applyFilters([n.key], !0),
+			onClose: () => this.closePanel(t),
+			onLeave: (e) => this.leavePanel(t, e)
+		}) : r;
+	}
+	fullTable(e, t, n, i) {
+		let a = this.data, s = this.shown, c = !!a.selectable, l = !!a.clickable && !c, d = this.activeSort, f = new Set(this.checkedIds), p = a.rowActions?.length ? a.rowActions : null, m = !!a.columnChooser, h = !!p || m, g = {
+			ids: e.map((e) => this.rowKey(e)),
+			columns: s,
+			offset: this.page * n,
+			copy: i === this.#n ? "modal" : "tile"
+		};
+		return o`<table class="lintje-data-table__full">
+      <caption class="visually-hidden">${a.caption}</caption>
+      <thead>
+        <tr>
+          ${c ? o`<th
+                scope="col"
+                class="lintje-data-table__header-cell lintje-data-table__check-cell"
+              >
+                ${this.headerCheck()}
+              </th>` : r}
+          ${s.map((e) => {
+			let t = d.key === e.key, n = (e.align ?? (q(e, this.rows) ? "right" : "left")) === "right", a = !!e.filter && M(this.filterValues[e.key]), s = a ? z() : r, c = e.sortable === !1 ? e.filter ? o`<span class="lintje-data-table__header-label">${e.header}${s}</span>` : e.header : o`<button
+                    type="button"
+                    class="lintje-data-table__sort-button"
+                    @click=${() => this.toggleSort(e)}
+                  >
+                    <span class="lintje-data-table__sort-label">${e.header}</span>${s}
+                    <span class="lintje-data-table__sort-icon" aria-hidden="true"
+                      >${t ? d.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
+                    >
+                  </button>`;
+			return o`<th
+              scope="col"
+              class=${u({
+				"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 ? d.direction === "asc" ? "ascending" : "descending" : "none"}
+            >
+              ${e.filter ? o`<span class="lintje-data-table__header-inner"
+                      >${c}${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
+                    >` : c}
+            </th>`;
+		})}
+          ${h ? o`<th scope="col" class="lintje-data-table__header-cell lintje-data-table__action-cell">
+                  ${p ? o`<span class="visually-hidden">Acties</span>` : r}
+                  ${m ? W(this.panel?.kind === "columns", (e) => this.panel?.kind === "columns" ? this.closePanel() : this.openPanel({
+			kind: "columns",
+			edges: i
+		}, e)) : r}
+                </th>` : r}
+        </tr>
+      </thead>
+      <tbody>
+        ${e.map((e, t) => {
+			let n = this.rowKey(e), i = n === a.selectedId;
+			return o`<tr
+            class=${u({
+				"lintje-data-table__row": !0,
+				"is-clickable": l,
+				"is-selected": i,
+				"is-checked": f.has(n)
+			})}
+            tabindex=${l ? 0 : r}
+            aria-selected=${l ? i : r}
+            @click=${l ? () => this.emit("lintje-row-click", this.rowDetail(e)) : r}
+            @keydown=${l ? (t) => this.rowKeydown(t, e) : r}
+          >
+            ${c ? o`<td class="lintje-data-table__cell lintje-data-table__check-cell">
+                  ${this.rowCheck(e, n, f.has(n))}
+                </td>` : r}
+            ${s.map((n, r) => {
+				let i = n.truncate === !0, a = i ? this.truncatedCell(n, e[n.key]) : this.cell(n, e[n.key]), s = (n.align ?? (q(n, this.rows) ? "right" : "left")) === "right";
+				return n.editor ? this.editableCell(e, t, n, r === 0, s, a, g) : r === 0 ? o`<th
+                    scope="row"
+                    class=${u({
+					"lintje-data-table__cell": !0,
+					"lintje-data-table__name": !0,
+					"lintje-data-table__cell--truncate": i
+				})}
+                  >
+                    ${this.opener(e, a)}
+                  </th>` : o`<td
+                    class=${u({
+					"lintje-data-table__cell": !0,
+					"lintje-data-table__cell--align-right": s,
+					"lintje-data-table__cell--truncate": i
+				})}
+                  >
+                    ${a}
+                  </td>`;
+			})}
+            ${p ? o`<td
+                    class="lintje-data-table__cell lintje-data-table__action-cell"
+                    @click=${(e) => e.stopPropagation()}
+                    @keydown=${(e) => e.stopPropagation()}
+                  >
+                    ${j(p, this.rowDetail(e).label, (e) => this.emit("lintje-row-action", {
+				id: n,
+				action: e
+			}))}
+                  </td>` : m ? o`<td class="lintje-data-table__cell lintje-data-table__action-cell"></td>` : r}
+          </tr>`;
+		})}
+        <!-- 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 }, () => o`<tr
+                class="lintje-data-table__row lintje-data-table__row--filler"
+                aria-hidden="true"
+              >
+                <td
+                  class="lintje-data-table__cell"
+                  colspan=${s.length + +!!c + +!!h}
+                ></td>
+              </tr>`) : r}
+      </tbody>
+    </table>`;
+	}
+	editableCell(e, t, n, i, a, s, c) {
+		let l = this.#s, d = {
+			id: this.rowKey(e),
+			column: n.key
+		}, f = e[n.key] ?? null, p = l.mode(d, f).kind, m = u({
+			"lintje-data-table__cell": !0,
+			"lintje-data-table__name": i,
+			"lintje-data-table__cell--align-right": a,
+			"lintje-data-table__cell--truncate": n.truncate === !0,
+			"focus-inset": !0,
+			...l.cellClasses(d, f)
+		}), h = l.content(d, n, f, s, `${n.header} van rij ${c.offset + t + 1}`, c), g = (e) => {
+			l.editable(d, n) && l.cellKeydown(d, e);
+		}, _ = (e) => {
+			p === "rest" && l.editable(d, n) && l.open(d, e.currentTarget);
+		}, v = (e) => e.stopPropagation(), y = p === "editor" ? -1 : 0, b = D(d);
+		return i ? o`<th
+          scope="row"
+          class=${m}
+          tabindex=${y}
+          data-cell=${b}
+          aria-describedby=${p === "rest" ? l.hintId : r}
+          @keydown=${g}
+          @dblclick=${_}
+          @click=${v}
+        >
+          ${h}
+        </th>` : o`<td
+          class=${m}
+          tabindex=${y}
+          data-cell=${b}
+          aria-describedby=${p === "rest" ? l.hintId : r}
+          @keydown=${g}
+          @dblclick=${_}
+          @click=${v}
+        >
+          ${h}
+        </td>`;
+	}
+	mobileTable(e, t, n) {
+		let i = this.data, a = this.shown, s = !!i.selectable, c = !!i.clickable && !s, l = a[0], d = this.mobileMeasure, p = this.activeSort, m = new Set(this.checkedIds);
+		if (!l || !d) return o`<table class="lintje-data-table__mobile"></table>`;
+		let h = d.format === "change-compact" ? {
+			...d,
+			format: "change"
+		} : d, g = i.rowActions?.length ? i.rowActions : null, _ = a.filter((e) => e !== l && e !== d), v = !!g || _.length > 0, y = v ? 3 : 2, b = p.key === d.key, x = new Set(this.mobileOpen);
+		return o`<table class="lintje-data-table__mobile">
+      <caption class="visually-hidden">${i.caption}</caption>
+      <thead>
+        <tr>
+          <th
+            scope="col"
+            class="lintje-data-table__header-cell lintje-data-table__header-cell--mobile"
+          >
+            ${s ? o`<span class="lintje-data-table__mobile-check"
+                  >${this.headerCheck()}${l.header}</span
+                >` : l.header}
+          </th>
+          <th
+            scope="col"
+            class=${u({
+			"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": d.sortable !== !1,
+			"is-active": b
+		})}
+            aria-sort=${d.sortable === !1 ? r : b ? p.direction === "asc" ? "ascending" : "descending" : "none"}
+          >
+            ${d.sortable === !1 ? d.header : o`<button
+                  type="button"
+                  class="lintje-data-table__sort-button"
+                  @click=${() => this.toggleSort(d)}
+                >
+                  <span class="lintje-data-table__sort-label">${d.header}</span>
+                  <span class="lintje-data-table__sort-icon" aria-hidden="true"
+                    >${b ? p.direction === "asc" ? "▲" : "▼" : "▲▼"}</span
+                  >
+                </button>`}
+          </th>
+          ${v ? o`<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}
+        </tr>
+      </thead>
+      <tbody>
+        ${e.map((e) => {
+			let t = this.rowKey(e), a = this.rowDetail(e), p = this.mobileStatus(d, e), b = x.has(t) && _.length > 0, S = `lintje-data-table-${n}-detail-${t}`, C = o`<span class="lintje-data-table__mobile-name"
+              >${this.opener(e, this.cell(l, e[l.key]))}</span
+            >${this.subline(e)}`, w = t === i.selectedId;
+			return o`<tr
+              class=${u({
+				"lintje-data-table__mobile-row": !0,
+				"is-clickable": c,
+				"is-selected": w,
+				"is-checked": m.has(t),
+				"is-open": b
+			})}
+              tabindex=${c ? 0 : r}
+              aria-selected=${c ? w : r}
+              @click=${c ? () => this.emit("lintje-row-click", a) : r}
+              @keydown=${c ? (t) => this.rowKeydown(t, e) : r}
+            >
+              <th scope="row" class="lintje-data-table__mobile-cell">
+                ${s ? o`<span class="lintje-data-table__mobile-check">
+                      ${this.rowCheck(e, t, m.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"
+              >
+                <span class="lintje-data-table__mobile-measure"
+                  >${this.cell(h, e[d.key])}</span
+                >
+                ${p ? o`<span
+                      class="lintje-data-table__mobile-status lintje-data-table__mobile-status--${p.tone}"
+                      >${p.label}</span
+                    >` : r}
+              </td>
+              ${v ? o`<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 ? o`<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 ? o`<tr
+                    class="lintje-data-table__mobile-detail"
+                    id=${S}
+                    ?hidden=${!b}
+                  >
+                    <td class="lintje-data-table__mobile-cell" colspan=${y}>
+                      ${b ? o`<lintje-description-list
+                              .items=${_.map((t) => ({
+				label: t.header,
+				value: X(t, e[t.key])
+			}))}
+                            ></lintje-description-list>` : r}
+                    </td>
+                  </tr>` : r}`;
+		})}
+        <!-- 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 }, () => o`<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 ? o`<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>
+                  ${d.threshold ? o`<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];
+	}
+	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 s = this.data?.caption;
+		return o`<lintje-pagination
+      class="lintje-data-table__pagination lintje-data-table__pagination--${e}"
+      label=${s ? `Paginering ${s}` : "Paginering"}
+      .page=${t + 1}
+      .pageCount=${n}
+      .pageSize=${r}
+      .total=${i}
+      unit="rijen"
+      unit-one="rij"
+      @lintje-page-change=${(e) => {
+			e.stopPropagation(), a(e.detail.page - 1), this.announce(`Pagina ${e.detail.page} van ${n}`);
+		}}
+    ></lintje-pagination>`;
+	}
+	opener(e, t) {
+		return this.data?.openable ? o`<button
+      type="button"
+      class="lintje-data-table__open"
+      @click=${(t) => {
+			t.stopPropagation(), this.emit("lintje-row-open", this.rowDetail(e));
+		}}
+    >
+      ${t}
+    </button>` : t;
+	}
+	cell(e, t) {
+		if (t === 0 && e.zeroText != null) return o`<span class="lintje-data-table__muted">${e.zeroText}</span>`;
+		if (e.format === "status" && t != null) {
+			let n = pe(e, String(t));
+			if (n) return o`<lintje-status-dot
+          tone=${n}
+          label=${e.status?.labels?.[String(t)] ?? r}
+        ></lintje-status-dot>`;
+		}
+		let n = J(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" ? o`<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>` : o`<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", {
+			size: 14,
+			className: "lintje-threshold-cell__icon"
+		});
+		return o`<span class="lintje-threshold-cell lintje-threshold-cell--${i.tone}"
+      >${a}${n}<span class="visually-hidden"> · ${i.label}</span></span
+    >`;
+	}
+	truncatedCell(e, t) {
+		let n = X(e, t);
+		return n == null ? Z : o`<span class="lintje-data-table__cell-text" aria-hidden="true" title=${n}
+        >${this.cell(e, t)}</span
+      ><span class="visually-hidden">${n}</span>`;
+	}
+	get sublineColumns() {
+		return this.columns.filter((e) => e.mobileSubline);
+	}
+	get hasSubline() {
+		return !!this.data?.mobileSublineTemplate || this.sublineColumns.length > 0;
+	}
+	subline(e) {
+		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 : o`<span class="lintje-data-table__mobile-sub">${n}</span>`;
+	}
+	mobileStatus(e, t) {
+		if (!e.threshold) return null;
+		let n = Y(e, t[e.key]);
+		return n && {
+			label: n.label,
+			tone: n.outside ? "outside" : "within"
+		};
+	}
+	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(o`<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(o`<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)));
+			} else this.setChecked(e ? [...n, t] : n);
+			this.#d = t;
+		}, this.uncheckable.has(t));
+	}
+	checkbox(e, t, n, r, i = !1) {
+		return o`<label class="lintje-choice${i ? " is-disabled" : ""}">
+      <input
+        type="checkbox"
+        class="lintje-choice__input"
+        ?disabled=${i}
+        .checked=${t}
+        .indeterminate=${n && !t}
+        @change=${(e) => r(e.target.checked)}
+        @click=${(e) => {
+			e.stopPropagation(), this.#f = e.shiftKey;
+		}}
+      />
+      <span class="lintje-choice__box" aria-hidden="true"
+        ><span class="lintje-choice__mark">${n && !t ? "–" : "✓"}</span></span
+      >
+      <span class="lintje-choice__label">${e}</span>
+    </label>`;
+	}
+};
+t("lintje-data-table", $);
+//#endregion
+export { $ as LintjeDataTable };