lintje 0.2.0 → 0.4.0

package/dist-elements/tag/user-menu.js

@@ -1,13 +1,13 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, I as a, Z as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, et as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-DRGvkF-r.js";
 import { n as u, nextRow as d, renderMenuEntries as f, t as p } from "./menu-button.js";
 //#region src/components/frame/user-menu/user-menu.css?inline
-var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigation bar; the menu is a fixed popover\n * and takes no space. `inline`, it is a block at the bottom of the mobile navigation.\n * `menu-button.css` is adopted beside this file: the rows are its `.lintje-menu__row`.\n */\n:host { display: inline-flex; flex: none; vertical-align: middle; }\n:host([inline]) { display: block; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The avatar and the chevron that says it opens a menu; at least `--h-touch` high. */\n.lintje-user-menu__trigger {\n  display: flex; align-items: center; justify-content: center;\n  gap: var(--space-2);\n  min-width: var(--h-touch); height: var(--lintje-tool-height, var(--h-touch));\n  padding: 0 var(--space-3);\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-user-menu__trigger:hover,\n.lintje-user-menu__trigger.is-open { background: var(--color-nav-hover); }\n\n.lintje-user-menu__avatar {\n  display: flex; align-items: center; justify-content: center;\n  flex: none;\n  width: 2rem; height: 2rem;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 0.875rem; font-weight: 700;\n}\n\n.lintje-user-menu__panel {\n  width: 17.5rem;\n  max-width: 100%;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-user-menu__who {\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-user-menu__names { min-width: 0; }\n.lintje-user-menu__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }\n.lintje-user-menu__role { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }\n\n.lintje-user-menu__group { display: flex; flex-direction: column; padding: var(--space-1) 0; }\n.lintje-user-menu__group--logout { border-top: 1px solid var(--color-border-default); }\n.lintje-user-menu__group:first-child.lintje-user-menu__group--logout { border-top: 0; }\n.lintje-user-menu__logout { display: flex; flex-direction: column; margin: 0; }\n.lintje-user-menu__logout-row { font-weight: 700; }\n\n.lintje-user-menu__version {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n\n.lintje-user-menu__panel.is-inline { width: 100%; color: var(--color-nav-text); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__who,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__group--logout,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version { border-color: var(--color-nav-line); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__who { padding: var(--space-4) var(--space-5); }\n/* Small text on the theme fill takes the menu's own ink: the sub tint is 3.82:1 on #01689B. */\n.lintje-user-menu__panel.is-inline .lintje-user-menu__role,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version,\n.lintje-user-menu__panel.is-inline .lintje-menu__hint { color: var(--color-nav-text); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version { padding: var(--space-2) var(--space-5); }\n.lintje-user-menu__panel.is-inline .lintje-menu__row {\n  height: var(--h-touch);\n  padding: 0 var(--space-5);\n  color: var(--color-nav-text);\n}\n.lintje-user-menu__panel.is-inline .lintje-menu__row:hover { background: var(--color-nav-hover); }\n.lintje-user-menu__panel.is-inline .lintje-menu__row.is-disabled,\n.lintje-user-menu__panel.is-inline .lintje-menu__row.is-disabled .lintje-menu__hint { color: var(--color-nav-disabled); }\n.lintje-user-menu__panel.is-inline .lintje-menu__separator { background: var(--color-nav-line); }\n\n/* On the theme fill the orange ring disappears: the on-theme ring, as the side menu. */\n.lintje-user-menu__trigger:focus-visible,\n.lintje-user-menu__panel.is-inline :focus-visible { outline-color: var(--color-focus-on-theme); }\n\n/* Forced colours: the open button keeps a Highlight edge, the avatar a CanvasText ring. */\n@media (forced-colors: active) {\n  .lintje-user-menu__trigger:focus-visible,\n  .lintje-user-menu__panel.is-inline :focus-visible { outline-color: Highlight; }\n  .lintje-user-menu__trigger.is-open:not(:focus-visible) { outline: 1px solid Highlight; outline-offset: -1px; }\n  .lintje-user-menu__avatar { border: 1px solid CanvasText; }\n}\n", h = 0, g = class extends l {
+var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigation bar; the menu is a fixed popover\n * and takes no space. `inline`, it is a block at the bottom of the mobile navigation.\n * `menu-button.css` is adopted beside this file: the rows are its `.lintje-menu__row`.\n */\n:host { display: inline-flex; flex: none; vertical-align: middle; }\n:host([inline]) { display: block; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The avatar and the chevron that says it opens a menu; at least `--h-touch` high. */\n.lintje-user-menu__trigger {\n  display: flex; align-items: center; justify-content: center;\n  gap: var(--space-2);\n  min-width: var(--h-touch); height: var(--lintje-tool-height, var(--h-touch));\n  padding: 0 var(--space-3);\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-user-menu__trigger:hover,\n.lintje-user-menu__trigger.is-open { background: var(--color-nav-hover); }\n\n.lintje-user-menu__avatar {\n  display: flex; align-items: center; justify-content: center;\n  flex: none;\n  width: 2rem; height: 2rem;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 0.875rem; font-weight: 700;\n}\n\n.lintje-user-menu__panel {\n  width: 17.5rem;\n  max-width: 100%;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-user-menu__who {\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-user-menu__names { min-width: 0; }\n.lintje-user-menu__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }\n.lintje-user-menu__role { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }\n\n.lintje-user-menu__group { display: flex; flex-direction: column; padding: var(--space-1) 0; }\n.lintje-user-menu__group--logout { border-top: 1px solid var(--color-border-default); }\n.lintje-user-menu__group:first-child.lintje-user-menu__group--logout { border-top: 0; }\n.lintje-user-menu__logout { display: flex; flex-direction: column; margin: 0; }\n.lintje-user-menu__logout-row { font-weight: 700; }\n\n.lintje-user-menu__version {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n\n.lintje-user-menu__panel.is-inline { width: 100%; color: var(--color-nav-text); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__who,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__group--logout,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version { border-color: var(--color-nav-line); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__who { padding: var(--space-4) var(--space-5); }\n/* Small text on the theme fill takes the menu's own ink: the sub tint is 3.82:1 on #01689B. */\n.lintje-user-menu__panel.is-inline .lintje-user-menu__role,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version,\n.lintje-user-menu__panel.is-inline .lintje-menu__hint { color: var(--color-nav-text); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version { padding: var(--space-2) var(--space-5); }\n.lintje-user-menu__panel.is-inline .lintje-menu__row {\n  height: var(--h-touch);\n  padding: 0 var(--space-5);\n  color: var(--color-nav-text);\n}\n.lintje-user-menu__panel.is-inline .lintje-menu__row:hover { background: var(--color-nav-hover); }\n.lintje-user-menu__panel.is-inline .lintje-menu__row.is-disabled,\n.lintje-user-menu__panel.is-inline .lintje-menu__row.is-disabled .lintje-menu__hint { color: var(--color-nav-disabled); }\n.lintje-user-menu__panel.is-inline .lintje-menu__separator { background: var(--color-nav-line); }\n\n/* On the theme fill the orange ring disappears: the on-theme ring, as the side menu. */\n.lintje-user-menu__trigger:focus-visible,\n.lintje-user-menu__panel.is-inline :focus-visible { outline-color: var(--color-focus-on-theme); }\n\n/* Forced colours: the open button keeps a Highlight edge, the avatar a CanvasText ring. */\n@media (forced-colors: active) {\n  .lintje-user-menu__trigger:focus-visible,\n  .lintje-user-menu__panel.is-inline :focus-visible { outline-color: Highlight; }\n  .lintje-user-menu__trigger.is-open:not(:focus-visible) { outline: 1px solid Highlight; outline-offset: -1px; }\n  .lintje-user-menu__avatar { border: 1px solid CanvasText; }\n}\n", h = 0, g = class extends t {
 	static {
 		this.styles = [
-			e,
-			i(u),
-			i(p),
-			i(m)
+			o,
+			r(u),
+			r(p),
+			r(m)
 		];
 	}
 	static {
@@ -58,7 +58,7 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
 	constructor() {
 		super(), this.items = [], this.csrf = "", this.inline = !1, this.open = !1, this.#e = `lintje-user-menu-${++h}`, this.#t = null, this.onFocusOut = (e) => {
 			let t = e.relatedTarget;
-			this.open && t && !n(t, this) && !n(this, t) && this.hide(!1);
+			this.open && t && !a(t, this) && !a(this, t) && this.hide(!1);
 		}, this.onTriggerKeydown = (e) => {
 			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.show(e.key === "ArrowDown" ? "first" : "last"));
 		}, this.onMenuKeydown = (e) => {
@@ -90,8 +90,8 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
 	onPopoverClose(e) {
 		e.stopPropagation(), this.hide(e.detail?.reason === "escape");
 	}
-	choose(e, t) {
-		e.disabled ? t.preventDefault() : (!e.href || a(t)) && (this.hide(!this.inline), this.emit("lintje-action", e.value), e.href && this.followLink(e.href, t));
+	choose(t, n) {
+		t.disabled ? n.preventDefault() : (!t.href || e(n)) && (this.hide(!this.inline), this.emit("lintje-action", t.value), t.href && this.followLink(t.href, n));
 	}
 	logout() {
 		this.hide(!this.inline), this.emit("lintje-logout");
@@ -103,41 +103,41 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
 		}
 	}
 	renderRow(e) {
-		let t = this.inline ? r : "menuitem", n = this.inline ? r : "-1", i = o({
+		let t = this.inline ? i : "menuitem", n = this.inline ? i : "-1", r = c({
 			"lintje-menu__row": !0,
 			"focus-inset": !0,
 			"is-danger": !!e.danger,
 			"is-disabled": !!e.disabled
-		}), a = c`${e.icon ? s(e.icon, {
+		}), a = s`${e.icon ? l(e.icon, {
 			size: 16,
 			className: "lintje-menu__icon"
-		}) : r}<span class="lintje-menu__label">${e.label}</span>${e.hint ? c`<span class="lintje-menu__hint">${e.hint}</span>` : r}`;
-		if (e.href && !e.disabled) return c`<a
-        class=${i}
+		}) : i}<span class="lintje-menu__label">${e.label}</span>${e.hint ? s`<span class="lintje-menu__hint">${e.hint}</span>` : i}`;
+		if (e.href && !e.disabled) return s`<a
+        class=${r}
         role=${t}
         tabindex=${n}
         href=${e.href}
         @click=${(t) => this.choose(e, t)}
         >${a}</a
       >`;
-		let l = c`<button
+		let o = s`<button
       type="button"
-      class=${i}
+      class=${r}
       role=${t}
       tabindex=${n}
-      aria-disabled=${e.disabled ? "true" : r}
+      aria-disabled=${e.disabled ? "true" : i}
       @click=${(t) => this.choose(e, t)}
     >
       ${a}
     </button>`;
-		return e.disabled && e.reason ? c`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${l}</lintje-tooltip>` : l;
+		return e.disabled && e.reason ? s`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${o}</lintje-tooltip>` : o;
 	}
 	renderLogout() {
-		let e = this.inline ? r : "menuitem", t = this.inline ? r : "-1", n = s("functioneel-uitloggen", {
+		let e = this.inline ? i : "menuitem", t = this.inline ? i : "-1", n = l("functioneel-uitloggen", {
 			size: 16,
 			className: "lintje-menu__icon"
-		}), i = c`${n}<span class="lintje-menu__label">Afmelden</span>`;
-		return this.logoutAction ? c`<form class="lintje-user-menu__logout" method="post" action=${this.logoutAction}>
+		}), r = s`${n}<span class="lintje-menu__label">Afmelden</span>`;
+		return this.logoutAction ? s`<form class="lintje-user-menu__logout" method="post" action=${this.logoutAction}>
         <input type="hidden" name="csrf_token" .value=${this.csrf} />
         <button
           type="submit"
@@ -145,53 +145,53 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
           role=${e}
           tabindex=${t}
         >
-          ${i}
+          ${r}
         </button>
-      </form>` : c`<button
+      </form>` : s`<button
       type="button"
       class="lintje-menu__row lintje-user-menu__logout-row focus-inset"
       role=${e}
       tabindex=${t}
       @click=${() => this.logout()}
     >
-      ${i}
+      ${r}
     </button>`;
 	}
 	renderContent() {
 		let e = this.user;
-		return c`<div
-      class=${o({
+		return s`<div
+      class=${c({
 			"lintje-user-menu__panel": !0,
 			"is-inline": this.inline
 		})}
       @keydown=${this.onMenuKeydown}
     >
-      ${e ? c`<div class="lintje-user-menu__who">
-            ${this.inline ? c`<span class="lintje-user-menu__avatar" aria-hidden="true">${e.initials}</span>` : r}
+      ${e ? s`<div class="lintje-user-menu__who">
+            ${this.inline ? s`<span class="lintje-user-menu__avatar" aria-hidden="true">${e.initials}</span>` : i}
             <div class="lintje-user-menu__names">
               <p class="lintje-user-menu__name">${e.name}</p>
-              ${e.role ? c`<p class="lintje-user-menu__role">${e.role}</p>` : r}
+              ${e.role ? s`<p class="lintje-user-menu__role">${e.role}</p>` : i}
             </div>
-          </div>` : r}
+          </div>` : i}
       <div
         class="lintje-user-menu__menu"
         role=${this.inline ? "group" : "menu"}
         aria-label=${e ? `Menu van ${e.name}` : "Gebruikersmenu"}
       >
-        ${this.items.length ? c`<div class="lintje-user-menu__group">
+        ${this.items.length ? s`<div class="lintje-user-menu__group">
               ${f(this.items, "lintje-user-menu", (e) => this.renderRow(e))}
-            </div>` : r}
+            </div>` : i}
         <div class="lintje-user-menu__group lintje-user-menu__group--logout">${this.renderLogout()}</div>
       </div>
-      ${this.version ? c`<p class="lintje-user-menu__version">Versie ${this.version}</p>` : r}
+      ${this.version ? s`<p class="lintje-user-menu__version">Versie ${this.version}</p>` : i}
     </div>`;
 	}
 	render() {
 		if (this.inline) return this.renderContent();
 		let e = this.user;
-		return c`<button
+		return s`<button
         type="button"
-        class=${o({
+        class=${c({
 			"lintje-user-menu__trigger": !0,
 			"is-open": this.open
 		})}
@@ -203,7 +203,7 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
         @keydown=${this.onTriggerKeydown}
       >
         <span class="lintje-user-menu__avatar" aria-hidden="true">${e?.initials ?? ""}</span>
-        ${s("functioneel-delta-omlaag", {
+        ${l("functioneel-delta-omlaag", {
 			size: 16,
 			rotate: this.open ? 180 : void 0
 		})}
@@ -217,6 +217,6 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
       >`;
 	}
 };
-t("lintje-user-menu", g);
+n("lintje-user-menu", g);
 //#endregion
 export { g as LintjeUserMenu };

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-DRGvkF-r.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-BApadXr8.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; }