lintje 0.2.0 → 0.3.0

package/dist-elements/tag/video-player.js

@@ -1,9 +1,9 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, j as o, q as s, qt as c } from "../chunks/base-Bg-IFOPG.js";
+import { L as e, Yt as t, Zt as n, en as r, lt as i, nn as a, rt as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
 import "./menu-button.js";
 import { n as l, o as u, p as d } from "../chunks/playback-DZJ_NMXv.js";
-import { n as f, t as p } from "../chunks/player-DXOZEyEy.js";
+import { n as f, t as p } from "../chunks/player-B8QXJ0Z5.js";
 //#region src/components/content/video-player/video-player.css?inline
-var m = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-video-player {\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n\n/* No surface token stays black in dark, so the surface takes the ink on a light fill. */\n.lintje-video-player__stage {\n  position: relative;\n  aspect-ratio: 16 / 9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-text-on-light-fill);\n  overflow: hidden;\n}\n.lintje-video-player__video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  background: var(--color-text-on-light-fill);\n}\n\n/* What stands on the picture has a white edge, so the fill keeps apart from the dark. */\n.lintje-video-player__big-play.lintje-button,\n.lintje-video-player__retry.lintje-button {\n  position: relative;\n  border: 2px solid var(--color-text-on-fill);\n}\n.lintje-video-player__big-play.lintje-button { width: 64px; height: 64px; padding: 0; }\n.lintje-video-player__big-play.lintje-button.is-disabled {\n  border-color: var(--color-text-on-fill);\n}\n\n/* A failed load says so where the picture would be: the announcement's light fill would float. */\n.lintje-video-player__failed {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-6);\n  text-align: center;\n  color: var(--color-text-on-fill);\n}\n.lintje-video-player__failed-mark {\n  width: var(--space-6);\n  height: var(--space-6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-error);\n  color: var(--color-text-inverse);\n}\n.lintje-video-player__failed-text { margin: 0; font: var(--text-ui); font-weight: 700; }\n\n.lintje-video-player__caption {\n  position: absolute;\n  left: var(--space-4);\n  right: var(--space-4);\n  bottom: var(--space-4);\n  text-align: center;\n  pointer-events: none;\n}\n.lintje-video-player__caption-text {\n  padding: 2px var(--space-2);\n  background: var(--color-text-on-light-fill);\n  color: var(--color-text-on-fill);\n  font: var(--text-body);\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n}\n\n/* Two lines at every width: the time beside the bar keeps the buttons on one line in a tile. */\n.lintje-video-player__controls {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-3) var(--space-2);\n}\n.lintje-video-player__timeline { display: flex; align-items: center; gap: var(--space-3); }\n.lintje-video-player__buttons { display: flex; align-items: center; gap: var(--space-1); }\n.lintje-video-player__speed {\n  flex: none;\n  padding: 0 var(--space-1);\n  background: var(--color-term-bg);\n  color: var(--color-accent-text);\n  font: var(--text-small);\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n/* The menu's trigger takes the 48 px of the player's other buttons. */\n.lintje-video-player__more { margin-left: auto; --h-icon-button: var(--h-touch); }\n\n.lintje-video-player:fullscreen { display: flex; flex-direction: column; border: 0; }\n.lintje-video-player:fullscreen .lintje-video-player__stage {\n  flex: 1 1 auto;\n  min-height: 0;\n  aspect-ratio: auto;\n}\n\n@media (max-width: 767px) {\n  .lintje-video-player { border-left: 0; border-right: 0; }\n}\n\n/* Forced colours drop the fills: the speed and the mark keep an outline. */\n@media (forced-colors: active) {\n  .lintje-video-player__speed,\n  .lintje-video-player__failed-mark { outline: 1px solid CanvasText; }\n}\n", h = "ondertiteling", g = "audiodescriptie";
+var m = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-video-player {\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n\n/* No surface token stays black in dark, so the surface takes the ink on a light fill. */\n.lintje-video-player__stage {\n  position: relative;\n  aspect-ratio: 16 / 9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-text-on-light-fill);\n  overflow: hidden;\n}\n.lintje-video-player__video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  background: var(--color-text-on-light-fill);\n}\n\n/* What stands on the picture has a white edge, so the fill keeps apart from the dark. */\n.lintje-video-player__big-play.lintje-button,\n.lintje-video-player__retry.lintje-button {\n  position: relative;\n  border: 2px solid var(--color-text-on-fill);\n}\n.lintje-video-player__big-play.lintje-button { width: 64px; height: 64px; padding: 0; }\n.lintje-video-player__big-play.lintje-button.is-disabled {\n  border-color: var(--color-text-on-fill);\n}\n\n/* A failed load says so where the picture would be: the announcement's light fill would float. */\n.lintje-video-player__failed {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-6);\n  text-align: center;\n  color: var(--color-text-on-fill);\n}\n.lintje-video-player__failed-mark {\n  width: var(--space-6);\n  height: var(--space-6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-error);\n  color: var(--color-text-inverse);\n}\n.lintje-video-player__failed-text { margin: 0; font: var(--text-ui); font-weight: 700; }\n\n.lintje-video-player__caption {\n  position: absolute;\n  left: var(--space-4);\n  right: var(--space-4);\n  bottom: var(--space-4);\n  text-align: center;\n  pointer-events: none;\n}\n.lintje-video-player__caption-text {\n  padding: 2px var(--space-2);\n  background: var(--color-text-on-light-fill);\n  color: var(--color-text-on-fill);\n  font: var(--text-body);\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n}\n\n/* Two lines at every width: the time beside the bar keeps the buttons on one line in a tile. */\n.lintje-video-player__controls {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-3) var(--space-2);\n}\n.lintje-video-player__timeline { display: flex; align-items: center; gap: var(--space-3); }\n.lintje-video-player__buttons { display: flex; align-items: center; gap: var(--space-1); }\n.lintje-video-player__speed {\n  flex: none;\n  padding: 0 var(--space-1);\n  background: var(--color-term-bg);\n  color: var(--color-accent-text);\n  font: var(--text-small);\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n/* The menu's trigger takes the 48 px of the player's other buttons. */\n.lintje-video-player__more { margin-left: auto; --h-icon-button: var(--h-touch); }\n\n.lintje-video-player:fullscreen { display: flex; flex-direction: column; border: 0; }\n.lintje-video-player:fullscreen .lintje-video-player__stage {\n  flex: 1 1 auto;\n  min-height: 0;\n  aspect-ratio: auto;\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-video-player { border-left: 0; border-right: 0; }\n}\n\n/* Forced colours drop the fills: the speed and the mark keep an outline. */\n@media (forced-colors: active) {\n  .lintje-video-player__speed,\n  .lintje-video-player__failed-mark { outline: 1px solid CanvasText; }\n}\n", h = "ondertiteling", g = "audiodescriptie";
 function _(e, t) {
 	return e.key.toLowerCase() !== t || e.ctrlKey || e.metaKey || e.altKey ? !1 : !e.composedPath().some((e) => ["INPUT", "TEXTAREA"].includes(e.tagName ?? ""));
 }
@@ -20,11 +20,11 @@ var v = class extends f {
 	}
 	static {
 		this.styles = [
-			e,
-			r(s),
-			r(o),
-			r(p),
-			r(m)
+			i,
+			n(o),
+			n(e),
+			n(p),
+			n(m)
 		];
 	}
 	static {
@@ -109,9 +109,9 @@ var v = class extends f {
 		_(e, "f") ? (e.preventDefault(), this.toggleFullscreen()) : _(e, "c") ? (e.preventDefault(), this.captions = !this.captions) : this.onGroupKeydown(e);
 	}
 	renderFailed() {
-		return c`<div class="lintje-video-player__failed" role="alert">
+		return a`<div class="lintje-video-player__failed" role="alert">
       <span class="lintje-video-player__failed-mark"
-        >${a("functioneel-waarschuwing", { size: 14 })}</span
+        >${c("functioneel-waarschuwing", { size: 14 })}</span
       >
       <p class="lintje-video-player__failed-text">De video kan niet worden geladen.</p>
       <button
@@ -119,16 +119,16 @@ var v = class extends f {
         class="lintje-button lintje-button--primary lintje-video-player__retry"
         @click=${this.onRetry}
       >
-        ${a("functioneel-refresh", { size: 20 })}
+        ${c("functioneel-refresh", { size: 20 })}
         <span class="lintje-button__label">Opnieuw proberen</span>
       </button>
     </div>`;
 	}
 	renderOverlay() {
 		if (this.failed) return this.renderFailed();
-		if (this.waiting) return c`<button
+		if (this.waiting) return a`<button
         type="button"
-        class=${i({
+        class=${s({
 			"lintje-button": !0,
 			"lintje-button--primary": !0,
 			"lintje-video-player__big-play": !0,
@@ -136,24 +136,24 @@ var v = class extends f {
 		})}
         aria-label="Afspelen"
         title="Afspelen"
-        aria-disabled=${this.ready ? n : "true"}
+        aria-disabled=${this.ready ? r : "true"}
         @click=${this.onBigPlay}
       >
-        ${a("multimedia-player-afspelen", { size: 28 })}
+        ${c("multimedia-player-afspelen", { size: 28 })}
       </button>`;
 		let e = this.captions ? this.caption : "";
-		return e ? c`<div class="lintje-video-player__caption">
+		return e ? a`<div class="lintje-video-player__caption">
           <span class="lintje-video-player__caption-text">${e}</span>
-        </div>` : n;
+        </div>` : r;
 	}
 	renderStage() {
-		return c`<div class="lintje-video-player__stage">
+		return a`<div class="lintje-video-player__stage">
       <video
         class="lintje-video-player__video"
         preload="metadata"
         playsinline
         .muted=${this.muted}
-        src=${this.source || n}
+        src=${this.source || r}
         @click=${() => this.toggle()}
       ></video>
       ${this.renderOverlay()}
@@ -166,12 +166,12 @@ var v = class extends f {
 		});
 	}
 	render() {
-		return c`<div class="lintje-video-player" role="group" aria-label=${this.name || "Video"} @keydown=${this.onKeydown}>
+		return a`<div class="lintje-video-player" role="group" aria-label=${this.name || "Video"} @keydown=${this.onKeydown}>
       ${this.renderStage()}
       <div class="lintje-video-player__controls">
         <div class="lintje-video-player__timeline">
           ${this.renderBar()} ${this.renderTime(!0)}
-          ${this.speed === 1 ? n : c`<span class="lintje-video-player__speed">${d(this.speed)}</span>`}
+          ${this.speed === 1 ? r : a`<span class="lintje-video-player__speed">${d(this.speed)}</span>`}
         </div>
         <div class="lintje-video-player__buttons">
           ${this.renderPlay()} ${this.renderMute()}

package/dist-elements/tokens.css

@@ -439,6 +439,7 @@
   --dur-badge: 300ms; /* @kind other */
   --dur-draw: 900ms; /* @kind other */
   --dur-data-label: 300ms; /* @kind other */
+  --dur-layer: 400ms; /* @kind other */
   --dur-skeleton: 1200ms; /* @kind other */
   --dur-wave: 600ms; /* @kind other */
 
@@ -742,108 +743,111 @@
    re-points the layer-2/3 names whose meaning changes; everything that merely follows a
    neutral is absent on purpose. Page and tiles are both #282828, the border separates them: the
    step below is the menu's, so it stays a band beside the page and under the logo bar.
+   Screen only: paper is always light, whatever the reader chose.
    ========================================================================= */
-[data-mode='dark'] {
-  --neutral-0: #282828;
-  --neutral-1: #1D1D1D;
-  --neutral-2: #333333;
-  --neutral-3: #4A4A4A;
-  --neutral-4: #7A7A7A;
-  --neutral-5: #B0B0B0;
-  --neutral-6: #FFFFFF;
-
-  /* The hover goes UP in dark: the light mix would put a near-black fill on the near-black page. */
-  --primary-hover: color-mix(in srgb, var(--primary), white 12%);
-
-  --color-bg-page: var(--neutral-0);
-  --color-bg-title: var(--neutral-0);
-  /* The hero's wash sits halfway between the menu (L 0.231) and the page (L 0.277), below the
-     page as in light: a panel or tab on it is lighter than its ground. */
-  --primary-wash: oklch(from var(--primary) 0.254 min(c, 0.02) h);
-
-  /* The filter zone must read as a band, so in dark it steps UP to neutral-2 (neutral-1 turned
-     the fields in it into light boxes). `--color-bg-inset` keeps neutral-1: "sunken". */
-  --color-bg-filter: var(--neutral-2);
-  --color-bg-inset: var(--neutral-1);
-
-  --color-text-inverse: var(--neutral-1);
-
-  /* Colour that must read by itself on #282828 becomes the tint; a FILL keeps the primary. */
-  --color-action-primary-border: var(--primary-tint);
-  --color-action-secondary-border: var(--primary-tint);
-  /* Danger hover: 8 % white is the most that keeps white text at 4.5:1 (4.56:1). The border and
-     the word lift the red as the primary's tints do, to 3:1 on #282828 and 4.5:1 on #333333,
-     the hover surface; the word's chroma cap keeps it inside sRGB. */
-  --color-action-danger-hover: color-mix(in srgb, var(--status-error), white 8%);
-  --color-action-danger-border: oklch(from var(--status-error) max(l, 0.58) c h);
-  --color-action-danger-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);
-  /* A status mark at 3:1 on its own tint. */
-  --color-attention-line: var(--status-attention);
-  --color-error-line: oklch(from var(--status-error) max(l, 0.6) c h);
-  --color-info-line: oklch(from var(--status-info) max(l, 0.58) c h);
-  --color-success-line: oklch(from var(--status-success) max(l, 0.57) c h);
-  /* A status word at 4.5:1 on #333333, lifted as the danger word is. */
-  --color-error-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);
-  --color-success-text: oklch(from var(--status-success) max(l, 0.68) min(c, 0.18) h);
-  /* A link is text: the text tint, not the line tint. The hover stays white. */
-  --color-link: var(--primary-tint-text);
-  --color-link-hover: var(--neutral-6);
-  --color-link-on-status: var(--neutral-6);
-  --color-accent-line: var(--primary-tint);
-  --color-accent-text: var(--primary-tint-text);
-
-  /* Lintblauw has too little contrast on the dark surface; the house style lightens it. */
-  --color-logo-ribbon: var(--ribbon-blue-dark);
-
-  /* The menu is neutral in dark: near-black, in the rail and in the bar alike, so in the top
-     layout it stays its own band under the logo bar. Hover and active are one step up, as they
-     are one fill in light; the edge is the text tint, as the line tint is 3:1 on neutral-0 only. */
-  --color-nav-bg: var(--neutral-1);
-  --color-nav-text: var(--neutral-6);
-  --color-nav-text-sub: var(--neutral-5);
-  --color-nav-hover: var(--neutral-2);
-  --color-nav-active: var(--neutral-2);
-  --color-nav-active-edge: var(--primary-tint-text);
-  --color-navbar-hover: var(--neutral-2);
-  --color-navbar-active: var(--neutral-2);
-  --color-navbar-active-edge: var(--primary-tint-text);
-  /* The open entry's word stands on the panel's surface: full text contrast, not the tint. */
-  --color-navbar-open-text: var(--color-text-primary);
-  /* The label is 16 px text: the tint is 3.0:1 and needs 4.5:1. The edge keeps the tint. */
-  --color-nav-active-text: var(--neutral-6);
-  /* The sheet is told from the page by its shadow and this quiet line; 1.66:1 is accepted here. */
-  --color-border-popover: var(--neutral-3);
-  --color-nav-line: var(--neutral-2);
-  --color-nav-disabled: var(--neutral-4);
-  /* The menu is neutral here, so its ring is the orange of every other surface. */
-  --color-focus-on-theme: var(--color-focus);
-  /* The choice edge keeps neutral-4 in dark: it already reaches 3:1 there (3.43:1 on #282828). */
-  --color-border-choice: var(--neutral-4);
-
-  /* A term's box is the subtle surface: behind a word on #282828 the dark wash would be a hole. */
-  --color-term-bg: var(--neutral-2);
-  --color-choice-active-bg: var(--neutral-2);
-  --color-hero-focus: var(--color-focus);
-  --color-term-line: var(--primary-tint-text);
-
-  /* Yellow as text works on the dark surface, so the dark gold is not needed. */
-  --color-chart-dark-yellow-text: var(--data-dark-yellow);
-  --color-map-water: var(--neutral-1);
-
-  --shadow-sticky: 0 2px 6px var(--alpha-black-40);
-  --shadow-popover: 0 4px 16px var(--alpha-black-55);
-  --shadow-nav: 2px 0 8px var(--alpha-black-40);
-  --shadow-chart-hover: 0 1px 4px var(--alpha-black-60);
-  --shadow-scroll-start: inset 12px 0 10px -10px var(--alpha-black-60);
-  --shadow-scroll-end: inset -12px 0 10px -10px var(--alpha-black-60);
-  --color-overlay-nav: var(--alpha-black-40);
+@media screen {
+  [data-mode='dark'] {
+    --neutral-0: #282828;
+    --neutral-1: #1D1D1D;
+    --neutral-2: #333333;
+    --neutral-3: #4A4A4A;
+    --neutral-4: #7A7A7A;
+    --neutral-5: #B0B0B0;
+    --neutral-6: #FFFFFF;
+
+    /* The hover goes UP in dark: the light mix would put a near-black fill on the near-black page. */
+    --primary-hover: color-mix(in srgb, var(--primary), white 12%);
+
+    --color-bg-page: var(--neutral-0);
+    --color-bg-title: var(--neutral-0);
+    /* The hero's wash sits halfway between the menu (L 0.231) and the page (L 0.277), below the
+       page as in light: a panel or tab on it is lighter than its ground. */
+    --primary-wash: oklch(from var(--primary) 0.254 min(c, 0.02) h);
+
+    /* The filter zone must read as a band, so in dark it steps UP to neutral-2 (neutral-1 turned
+       the fields in it into light boxes). `--color-bg-inset` keeps neutral-1: "sunken". */
+    --color-bg-filter: var(--neutral-2);
+    --color-bg-inset: var(--neutral-1);
+
+    --color-text-inverse: var(--neutral-1);
+
+    /* Colour that must read by itself on #282828 becomes the tint; a FILL keeps the primary. */
+    --color-action-primary-border: var(--primary-tint);
+    --color-action-secondary-border: var(--primary-tint);
+    /* Danger hover: 8 % white is the most that keeps white text at 4.5:1 (4.56:1). The border and
+       the word lift the red as the primary's tints do, to 3:1 on #282828 and 4.5:1 on #333333,
+       the hover surface; the word's chroma cap keeps it inside sRGB. */
+    --color-action-danger-hover: color-mix(in srgb, var(--status-error), white 8%);
+    --color-action-danger-border: oklch(from var(--status-error) max(l, 0.58) c h);
+    --color-action-danger-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);
+    /* A status mark at 3:1 on its own tint. */
+    --color-attention-line: var(--status-attention);
+    --color-error-line: oklch(from var(--status-error) max(l, 0.6) c h);
+    --color-info-line: oklch(from var(--status-info) max(l, 0.58) c h);
+    --color-success-line: oklch(from var(--status-success) max(l, 0.57) c h);
+    /* A status word at 4.5:1 on #333333, lifted as the danger word is. */
+    --color-error-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);
+    --color-success-text: oklch(from var(--status-success) max(l, 0.68) min(c, 0.18) h);
+    /* A link is text: the text tint, not the line tint. The hover stays white. */
+    --color-link: var(--primary-tint-text);
+    --color-link-hover: var(--neutral-6);
+    --color-link-on-status: var(--neutral-6);
+    --color-accent-line: var(--primary-tint);
+    --color-accent-text: var(--primary-tint-text);
+
+    /* Lintblauw has too little contrast on the dark surface; the house style lightens it. */
+    --color-logo-ribbon: var(--ribbon-blue-dark);
+
+    /* The menu is neutral in dark: near-black, in the rail and in the bar alike, so in the top
+       layout it stays its own band under the logo bar. Hover and active are one step up, as they
+       are one fill in light; the edge is the text tint, as the line tint is 3:1 on neutral-0 only. */
+    --color-nav-bg: var(--neutral-1);
+    --color-nav-text: var(--neutral-6);
+    --color-nav-text-sub: var(--neutral-5);
+    --color-nav-hover: var(--neutral-2);
+    --color-nav-active: var(--neutral-2);
+    --color-nav-active-edge: var(--primary-tint-text);
+    --color-navbar-hover: var(--neutral-2);
+    --color-navbar-active: var(--neutral-2);
+    --color-navbar-active-edge: var(--primary-tint-text);
+    /* The open entry's word stands on the panel's surface: full text contrast, not the tint. */
+    --color-navbar-open-text: var(--color-text-primary);
+    /* The label is 16 px text: the tint is 3.0:1 and needs 4.5:1. The edge keeps the tint. */
+    --color-nav-active-text: var(--neutral-6);
+    /* The sheet is told from the page by its shadow and this quiet line; 1.66:1 is accepted here. */
+    --color-border-popover: var(--neutral-3);
+    --color-nav-line: var(--neutral-2);
+    --color-nav-disabled: var(--neutral-4);
+    /* The menu is neutral here, so its ring is the orange of every other surface. */
+    --color-focus-on-theme: var(--color-focus);
+    /* The choice edge keeps neutral-4 in dark: it already reaches 3:1 there (3.43:1 on #282828). */
+    --color-border-choice: var(--neutral-4);
+
+    /* A term's box is the subtle surface: behind a word on #282828 the dark wash would be a hole. */
+    --color-term-bg: var(--neutral-2);
+    --color-choice-active-bg: var(--neutral-2);
+    --color-hero-focus: var(--color-focus);
+    --color-term-line: var(--primary-tint-text);
+
+    /* Yellow as text works on the dark surface, so the dark gold is not needed. */
+    --color-chart-dark-yellow-text: var(--data-dark-yellow);
+    --color-map-water: var(--neutral-1);
+
+    --shadow-sticky: 0 2px 6px var(--alpha-black-40);
+    --shadow-popover: 0 4px 16px var(--alpha-black-55);
+    --shadow-nav: 2px 0 8px var(--alpha-black-40);
+    --shadow-chart-hover: 0 1px 4px var(--alpha-black-60);
+    --shadow-scroll-start: inset 12px 0 10px -10px var(--alpha-black-60);
+    --shadow-scroll-end: inset -12px 0 10px -10px var(--alpha-black-60);
+    --color-overlay-nav: var(--alpha-black-40);
+  }
 }
 
 /* ============================================================================
    Below 768 px the gutter follows the page padding and every pointer target is the touch
-   floor.
+   floor. Screen only: a portrait page is narrower than 768 px and keeps the desktop form.
    ========================================================================= */
-@media (max-width: 767px) {
+@media screen and (max-width: 767px) {
   :root {
     --grid-gutter: 16px;
     --h-target: var(--h-touch);
@@ -852,3 +856,23 @@
     --w-ribbon: 2.5rem;
   }
 }
+
+/* ============================================================================
+   Paper — white under the content, since Lintje prints its own fills
+   (`print-color-adjust: exact` in base.css): a band in the page's grey would cost ink and
+   say nothing.
+   ========================================================================= */
+@media print {
+  :root {
+    /* The paper's margin is the page's edge: bars and content start at it, aligned. */
+    --page-pad-x: 0px;
+    --color-bg-page: var(--neutral-0);
+    --color-bg-title: var(--neutral-0);
+    --color-bg-filter: var(--neutral-0);
+  }
+}
+
+/* The sheet's own margin, so the content never runs to the paper's edge: room for the browser's
+   date, address and page number above and below, and a portrait sheet still wide enough for the
+   tablet's form. A custom property does not reach `@page`, so the value stands here. */
+@page { margin: 15mm 12mm; }

package/dist-elements/types/bundle/feedback.d.ts

@@ -3,6 +3,7 @@ import '../components/feedback/announcement/announcement.js';
 import '../components/feedback/toast/toast.js';
 import '../components/feedback/conflict-alert/conflict-alert.js';
 import '../components/feedback/empty-state/empty-state.js';
+import '../components/feedback/error-page/error-page.js';
 import '../primitives/badge/badge.js';
 import '../primitives/status-dot/status-dot.js';
 import '../primitives/spinner/spinner.js';

package/dist-elements/types/bundle/frame.d.ts

@@ -8,5 +8,3 @@ import '../components/frame/footer/footer.js';
 import '../components/frame/user-menu/user-menu.js';
 import '../components/frame/app-search/app-search.js';
 import '../components/frame/notifications/notifications.js';
-import '../components/frame/shortcuts/shortcuts.js';
-import '../components/frame/session-expiry/session-expiry.js';

package/dist-elements/types/bundle/inputs.d.ts

@@ -8,6 +8,7 @@ import '../components/inputs/combobox/combobox.js';
 import '../components/inputs/multiselect/multiselect.js';
 import '../components/inputs/tag-input/tag-input.js';
 import '../components/inputs/checkbox/checkbox.js';
+import '../components/inputs/checkbox-group/checkbox-group.js';
 import '../components/inputs/radio-group/radio-group.js';
 import '../components/inputs/toggle/toggle.js';
 import '../components/inputs/segmented/segmented.js';

package/dist-elements/types/bundle/overlays.d.ts

@@ -1,6 +1,6 @@
 /** The overlays category (Vensters en panelen): importing it defines its tags. */
 import '../components/overlays/modal/modal.js';
-import '../components/overlays/confirm-dialog/confirm-dialog.js';
+import '../components/overlays/dialog/dialog.js';
 import '../components/overlays/drawer/drawer.js';
 import '../primitives/popover/popover.js';
 import '../primitives/tooltip/tooltip.js';

package/dist-elements/types/components/actions/copy-button/copy-button.d.ts

@@ -1,12 +1,11 @@
 /**
- * `<lintje-copy-button>` — text to the clipboard, with a confirmation.
+ * `<lintje-copy-button>` — a button that copies text to the clipboard, and confirms it.
  *
- * Copies `text`, or the text of the element whose id is in `for` (same root, read on press).
- * Disabled with nothing to copy; a `for` target that appears later enables it. A second copy
- * empties the status first so a screen reader hears it again.
+ * It copies `text`, or the text of the element named in `for`, read on press. With nothing to
+ * copy it is disabled; a `for` target that appears later enables it.
  *
- * Events: `lintje-copy` (detail: the text) after a copy, `lintje-copy-error` (detail: the
- * text) when the browser refused.
+ * Events: `lintje-copy` `string` (the text copied), `lintje-copy-error` `string` (the browser
+ * refused).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -14,7 +13,7 @@ import '../../../primitives/button/button.js';
 import '../../../primitives/icon-button/icon-button.js';
 import '../../feedback/toast/toast.js';
 export declare class LintjeCopyButton extends LintjeElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     /** The string to copy. */
     text?: string;

package/dist-elements/types/components/actions/menu-button/menu-button.d.ts

@@ -1,20 +1,11 @@
 /**
  * `<lintje-menu-button>` — a button with a menu of actions.
  *
- * The trigger is a native `<button>` so `aria-haspopup`, `aria-expanded` and `aria-controls` sit
- * on the focused element; `aria-controls` names the popover because the `role="menu"` panel is
- * in the popover's shadow root. A disabled trigger is `aria-disabled`: it stays in the tab order
- * and refuses to open. Keys reach disabled rows too, so their `reason` tooltip shows on focus.
- * While `busyLabel` is set the trigger is disabled and the sentence stands beside it with a
- * spinner; the `role="status"` is always present so the sentence is read out when it appears.
+ * A disabled trigger stays in the tab order and refuses to open. The keys reach disabled rows
+ * too, so their `reason` tooltip shows on focus.
  *
- * `split` makes it two halves of one button, 1 px apart: the label does the usual action
- * (`action`), the arrow beside it opens the other ways to do it. Busy, a split button keeps its
- * size and colours: only its icon turns into the spinner, and the sentence is for the screen
- * reader.
- *
- * Events: `lintje-action` (the row's value, or `action` from a split button's own half),
- * `lintje-navigate` `{ href }` for a link row.
+ * Events: `lintje-action` `string` (the row's value, or `action` from a split button's own half),
+ * `lintje-navigate` `{ href }` (a link row).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -79,13 +70,20 @@ export declare class LintjeMenuButton extends LintjeElement {
     /** An icon file name before the label, saying what the label is a value of (the speed's "1×"). */
     leadingIcon: string;
     disabled: boolean;
-    /** An action is under way: the sentence beside the spinner. Empty when none is. */
+    /**
+     * An action is under way: the trigger is disabled and this sentence stands beside the spinner,
+     * read out when it appears. A split button keeps its size and colours: only its icon turns into
+     * the spinner, and the sentence is for the screen reader. Empty when none is.
+     */
     busyLabel: string;
     placement: 'bottom-start' | 'bottom-end' | 'top-end';
     items: MenuEntry[];
     /** Reflected, so a sheet around it can see a menu is open and leave Escape to it. */
     open: boolean;
-    /** The label is a button of its own, and the arrow beside it opens the menu. */
+    /**
+     * Two halves of one button, 1 px apart: the label does the usual action (`action`), the arrow
+     * beside it opens the other ways to do it.
+     */
     split: boolean;
     /** What a split button's own half sends as `lintje-action`. */
     action: string;

package/dist-elements/types/components/actions/qr-code/qr-code.d.ts

@@ -1,14 +1,11 @@
 /**
- * `<lintje-qr-code>` — a QR code a phone camera reads, with a button that copies it as an
- * image.
+ * `<lintje-qr-code>` — a QR code a phone camera reads, with a button that copies it as an image.
  *
- * The host sets `value`, the text the code holds, and the element makes the code. A host that
- * makes its own sets `src` instead: an image of only the dark modules, without a margin. The
- * element sets the code on a light quiet zone in every mode and theme, because many camera apps do
- * not read an inverted code.
+ * The element makes the code from `value`, or shows the host's own image in `src`. The code stands
+ * on a light quiet zone in every mode and theme, because many camera apps do not read an inverted
+ * code.
  *
- * Events: `lintje-copy` after the image is on the clipboard, `lintje-copy-error` when the
- * browser refused.
+ * Events: `lintje-copy` (the image is on the clipboard), `lintje-copy-error` (the browser refused).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -19,7 +16,10 @@ export declare function codeImage(text: string, colour: string): string;
 export declare class LintjeQrCode extends LintjeElement {
     static styles: import("lit").CSSResult;
     static properties: PropertyDeclarations;
-    /** URL or data URI of an image of the code the host made; it goes before `value`. */
+    /**
+     * URL or data URI of an image of the code the host made: only the dark modules, without a
+     * margin. It goes before `value`.
+     */
     src: string;
     /** The text the code holds, usually a link: the element makes the code. */
     value: string;

package/dist-elements/types/components/charts/chart/chart.d.ts

@@ -1,11 +1,11 @@
 /**
  * `<lintje-chart>` — a chart in its tile, with loading, empty and error states.
  *
- * Events: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked, and
- * `{id: null, label: null, href: clearHref}` when it is deselected. Expand and download stay here.
+ * Expand and download are handled here. The table view is the element's own state, built from the
+ * CSV rows; it never reaches the URL.
  *
- * Two controllers: the tile and the modal draw the same chart and must not share hover or width.
- * The table view is built from the CSV rows; it is element state, not URL state (rule 14).
+ * Events: `lintje-mark-select` `{ id, label, href }` (a mark with an `href` was clicked;
+ * deselected, `{ id: null, label: null, href: data.clearHref }`).
  */
 import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
@@ -32,6 +32,7 @@ export declare class LintjeChart extends LintjeContentTileElement {
     private png;
     protected expandChanged(open: boolean): void;
     protected render(): TemplateResult | typeof nothing;
+    /** The drawing, or the skeleton in its shape for the tile's `loading` slot; empty and error are the tile's. */
     private content;
     /** Header actions from 768 px; below that a row of its own in the `notice` slot. */
     private viewSwitch;

package/dist-elements/types/components/charts/kpi/kpi.d.ts

@@ -1,15 +1,14 @@
 /**
- * `<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`). Rich
- * values go in as properties. The value counts up from zero and the sparkline draws in once
- * 35 % of the tile is in view, and not under `prefers-reduced-motion`. A single figure can stand
- * on its scale (`gauge`): a half circle around the value or a bar under it, with the target
- * dashed; the trend or note says in words how the figure stands to the target. Events: none.
+ * `<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`).
+ *
+ * The value counts up from zero and the sparkline draws in once 35 % of the tile is in view; under
+ * `prefers-reduced-motion` both stand at once.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
 import '../../../primitives/status-dot/status-dot.js';
 import '../../../primitives/skeleton/skeleton.js';
-import type { KpiGauge, KpiItem, KpiSparkline, KpiState, KpiTrend, KpiVariable } from '../../../types.js';
+import type { KpiGauge, KpiItem, KpiSparkline, ContentStateKind, KpiTrend, KpiVariable } from '../../../types.js';
 type Point = [number, number];
 /** The points of each unbroken run of values: a `null` ends a run (rule 15). */
 export declare function sparklineRuns(values: (number | null)[], width: number, height: number): Point[][];
@@ -34,14 +33,21 @@ export declare class LintjeKpi extends LintjeGridItemElement {
     trend?: KpiTrend;
     /** The figure's recent values as a line with its area, under the figure. */
     sparkline?: KpiSparkline;
-    /** The single figure on its scale, as a half circle (`arc`) or a bar (`linear`); not with `items`. */
+    /**
+     * The single figure on its scale, as a half circle (`arc`) or a bar (`linear`), the target
+     * dashed; not with `items`. The trend or note says in words how the figure stands to the target.
+     */
     gauge?: KpiGauge;
     /** A line without an arrow, for when there is no direction. */
     note?: string;
     detail?: string;
     /** A data colour's name (`DataColor`); `coverage` is the gray one. */
     variable: KpiVariable;
-    state: KpiState;
+    state: ContentStateKind;
+    /** Explains an empty or failed result instead of the default message. */
+    message?: string;
+    /** The last known value and its date, shown below a failed result. */
+    lastKnown?: string;
     index: number;
     counting: (string | null)[];
     /** The sparkline draws in once the tile is in view, like the count. */
@@ -55,6 +61,8 @@ export declare class LintjeKpi extends LintjeGridItemElement {
     private get reduced();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Paper shows the value, never a figure halfway or the zero it counts up from. */
+    private finishCount;
     /** Measures the sparkline's box; the svg takes that size instead of stretching into it. */
     private observeSparkline;
     protected willUpdate(changed: PropertyValues<this>): void;

package/dist-elements/types/components/charts/kpi-row/kpi-row.d.ts

@@ -1,10 +1,4 @@
-/**
- * `<lintje-kpi-row>` — the KPI row: one grid, the KPIs staggered in from left to right.
- *
- * The grid and the KPIs share one shadow root, so `kpi-row.css` reaches the `<lintje-kpi>` hosts.
- * `dividers` is set as a property: a boolean attribute can't turn off a `true` default.
- * Events: none.
- */
+/** `<lintje-kpi-row>` — the KPI row: one grid, the KPIs staggered in from left to right. */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
 import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';

package/dist-elements/types/components/charts/note/note.d.ts

@@ -1,4 +1,4 @@
-/** `<lintje-note>` — the analyst's note ("Toelichting analist"). Events: none. */
+/** `<lintje-note>` — the analyst's note ("Toelichting analist"). */
 import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
 import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';