lintje 0.1.1 → 0.2.0

package/dist-elements/map.js

@@ -1 +1 @@
-import "./tag/map-tile.js";
+import "./tag/map.js";

package/dist-elements/overlays.js

@@ -1,4 +1,4 @@
-import "./chunks/base-rBLTcEIv.js";
+import "./chunks/base-Bg-IFOPG.js";
 import "./tag/modal.js";
 import "./tag/confirm-dialog.js";
 import "./tag/drawer.js";

package/dist-elements/tag/activity-log.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/tables/activity-log/activity-log.css?inline
 var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-activity-log {\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-activity-log__heading {\n  margin: 0 0 var(--space-3);\n  font: var(--text-tile-title);\n}\n.lintje-activity-log__list { list-style: none; margin: 0; padding: 0; }\n\n.lintje-activity-log__entry { display: flex; gap: var(--space-3); }\n.lintje-activity-log__rail {\n  flex: 0 0 10px;\n  display: flex; flex-direction: column; align-items: center;\n}\n/* The square sits on the sentence's first line; this stub joins it to the square above. */\n.lintje-activity-log__rail::before {\n  content: '';\n  flex: 0 0 6px;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__rail::before { visibility: hidden; }\n.lintje-activity-log__mark {\n  flex: none;\n  width: 10px; height: 10px;\n  background: var(--color-border-heavy);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: var(--color-accent-line); }\n.lintje-activity-log__line {\n  flex: 1 1 auto;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-last .lintje-activity-log__line { visibility: hidden; }\n\n.lintje-activity-log__body { min-width: 0; padding-bottom: var(--space-4); }\n.lintje-activity-log__entry.is-last .lintje-activity-log__body { padding-bottom: 0; }\n.lintje-activity-log__what { margin: 0; }\n.lintje-activity-log__who { font-weight: 700; }\n.lintje-activity-log__when {\n  display: block;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-activity-log__more { margin-top: var(--space-3); }\n\n/* Forced colours drop fills, so the rail is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-activity-log__rail::before,\n  .lintje-activity-log__mark,\n  .lintje-activity-log__line { forced-color-adjust: none; background: CanvasText; }\n  .lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: Highlight; }\n}\n", s = 10, c = class extends a {
 	constructor(...e) {
@@ -25,16 +25,16 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		if (!this.heading) return t;
 		let e = this.heading, n = "lintje-activity-log-heading";
 		switch (this.level) {
-			case 2: return r`<h2 id=${n} class="lintje-activity-log__heading">${e}</h2>`;
-			case 4: return r`<h4 id=${n} class="lintje-activity-log__heading">${e}</h4>`;
-			case 5: return r`<h5 id=${n} class="lintje-activity-log__heading">${e}</h5>`;
-			case 6: return r`<h6 id=${n} class="lintje-activity-log__heading">${e}</h6>`;
-			default: return r`<h3 id=${n} class="lintje-activity-log__heading">${e}</h3>`;
+			case 2: return i`<h2 id=${n} class="lintje-activity-log__heading">${e}</h2>`;
+			case 4: return i`<h4 id=${n} class="lintje-activity-log__heading">${e}</h4>`;
+			case 5: return i`<h5 id=${n} class="lintje-activity-log__heading">${e}</h5>`;
+			case 6: return i`<h6 id=${n} class="lintje-activity-log__heading">${e}</h6>`;
+			default: return i`<h3 id=${n} class="lintje-activity-log__heading">${e}</h3>`;
 		}
 	}
 	entry(e, t, n) {
-		return r`<li
-      class=${i({
+		return i`<li
+      class=${r({
 			"lintje-activity-log__entry": !0,
 			"is-newest": t === 0,
 			"is-last": n
@@ -48,13 +48,13 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
         <p class="lintje-activity-log__what">
           <strong class="lintje-activity-log__who">${e.who}</strong> ${e.what}
         </p>
-        ${e.at ? r`<time class="lintje-activity-log__when" datetime=${e.at}>${e.when}</time>` : r`<span class="lintje-activity-log__when">${e.when}</span>`}
+        ${e.at ? i`<time class="lintje-activity-log__when" datetime=${e.at}>${e.when}</time>` : i`<span class="lintje-activity-log__when">${e.when}</span>`}
       </div>
     </li>`;
 	}
 	render() {
 		let e = this.entries.slice(0, Math.max(0, this.limit)), n = this.entries.length - e.length;
-		return r`<section class="lintje-activity-log">
+		return i`<section class="lintje-activity-log">
       ${this.renderHeading()}
       <ol
         class="lintje-activity-log__list"
@@ -62,7 +62,7 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       >
         ${e.map((t, n) => this.entry(t, n, n === e.length - 1))}
       </ol>
-      ${n > 0 ? r`<lintje-button
+      ${n > 0 ? i`<lintje-button
               class="lintje-activity-log__more"
               variant="link"
               @click=${() => void this.showMore()}

package/dist-elements/tag/ai-label.js

@@ -1,10 +1,10 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, X as a, Y as o, et as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, X as i, Y as a, et as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/feedback/ai-label/ai-label.css?inline
 var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-ai-label {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n/* Unlike other badges this one may wrap: a long name would run past a 390 px screen. */\n.lintje-ai-label__box {\n  max-width: 100%;\n  height: auto;\n  min-height: 1.5rem;\n  line-height: 1.25;\n  white-space: normal;\n}\n.lintje-ai-label__badge { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-ai-label__icon { flex: none; }\n.lintje-ai-label__hint { font: var(--text-meta); color: var(--color-text-muted); }\n", u = "Controleer de tekst voor je hem gebruikt", d = class extends c {
 	static {
 		this.styles = [
 			e,
-			o,
+			a,
 			r(l)
 		];
 	}
@@ -18,18 +18,18 @@ var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		};
 	}
 	render() {
-		let e = !!this.checkedBy, t = this.hint ?? (e ? "" : u), r = i`<span class="lintje-ai-label__badge"
-      >${s(e ? "functioneel-vinkje" : "gereedschap-half-tandwiel-half-brein", {
+		let e = !!this.checkedBy, t = this.hint ?? (e ? "" : u), r = s`<span class="lintje-ai-label__badge"
+      >${o(e ? "functioneel-vinkje" : "gereedschap-half-tandwiel-half-brein", {
 			size: 14,
 			className: "lintje-ai-label__icon"
 		})}<span>${e ? `Gecontroleerd door ${this.checkedBy}` : "Gemaakt door AI"}</span></span
     >`;
-		return i`<span class="lintje-ai-label">
-      ${a({
+		return s`<span class="lintje-ai-label">
+      ${i({
 			value: r,
 			tone: "neutral",
 			className: "lintje-ai-label__box"
-		})}${t ? i`<span class="lintje-ai-label__hint">${t}</span>` : n}
+		})}${t ? s`<span class="lintje-ai-label__hint">${t}</span>` : n}
     </span>`;
 	}
 };

package/dist-elements/tag/announcement.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, H as r, Ht as i, Kt as a, O as o, S as s, U as c, et as l, k as u } from "../chunks/base-rBLTcEIv.js";
-import { r as d } from "../chunks/focus-trap-w3vCamJ6.js";
+import { $ as e, Bt as t, Gt as n, H as r, Ht as i, O as a, S as o, U as s, et as c, k as l, qt as u } from "../chunks/base-Bg-IFOPG.js";
+import { r as d } from "../chunks/focus-trap-9BnE-xWv.js";
 //#region src/components/shared/view-tile.css?inline
 var f = "/*\n * A view element around a tile: the tile fills the host, so the footnote\n * (`margin-top: auto`) reaches the bottom of the grid cell.\n * `display: block` because a standalone custom element is inline.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) {\n  display: none;\n}\n/* `min-height: inherit`: a held host has a min-height and no height, so `100%` resolves to auto. */\nlintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n", p = {
 	warning: "functioneel-waarschuwing",
@@ -16,16 +16,16 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
 	outage: "Storing",
 	info: "Informatie",
 	ok: "Gelukt"
-}, g = (e) => `lintje-announcement-dismissed:${e}`, _ = class extends o {
+}, g = (e) => `lintje-announcement-dismissed:${e}`, _ = class extends a {
 	constructor(...e) {
 		super(...e), this.compact = !1, this.dismissed = null, this.filled = null, this.fillFrame = 0;
 	}
 	static {
 		this.styles = [
 			e,
-			u,
+			l,
 			i(f),
-			i(s)
+			i(o)
 		];
 	}
 	static {
@@ -75,7 +75,7 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
 		return e.slice(t + 1).find(n) ?? e.slice(0, t).reverse().find(n) ?? null;
 	}
 	async close() {
-		let e = c(this) ? this.neighbour() : null, t = this.data?.announcementId;
+		let e = s(this) ? this.neighbour() : null, t = this.data?.announcementId;
 		if (t) try {
 			localStorage.setItem(g(t), "1");
 		} catch {}
@@ -93,7 +93,7 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
 		let e = this.data;
 		if (!e || this.isDismissed) return n;
 		let t = this.block(e), r = e.tile;
-		return r ? a`<lintje-tile
+		return r ? u`<lintje-tile
       id=${this.id ? `${this.id}-tile` : n}
       span=${r.span ?? n}
       heading=${r.title ?? n}
@@ -105,25 +105,25 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
     >` : t;
 	}
 	block(e) {
-		let t = e.kind ?? "warning", r = !!e.dismissible && t !== "outage", i = e.live === !0, o = i && this.filled !== this.identity;
-		return a`<div
+		let t = e.kind ?? "warning", r = !!e.dismissible && t !== "outage", i = e.live === !0, a = i && this.filled !== this.identity;
+		return u`<div
       class="lintje-announcement lintje-announcement--${t} ${this.compact ? "is-compact" : ""}"
       role=${i ? m[t] ?? n : n}
     >
-      ${o ? n : this.content(e, t, r)}
+      ${a ? n : this.content(e, t, r)}
     </div>`;
 	}
 	content(e, t, r) {
-		let i = a`<span class="visually-hidden">${h[t] ?? ""}: </span>`;
-		return a`<span class="lintje-announcement__icon" aria-hidden="true"
-        >${p[t] ? l(p[t], { size: 16 }) : n}</span
+		let i = u`<span class="visually-hidden">${h[t] ?? ""}: </span>`;
+		return u`<span class="lintje-announcement__icon" aria-hidden="true"
+        >${p[t] ? c(p[t], { size: 16 }) : n}</span
       >
       <div class="lintje-announcement__body">
         <div class="lintje-announcement__content">
-          ${e.title ? a`<p class="lintje-announcement__title">${i}${e.title}</p>` : n}
-          ${e.text ? a`<p class="lintje-announcement__text">${e.title ? n : i}${e.text}</p>` : n}
-          ${e.meta || e.link ? a`<p class="lintje-announcement__meta">
-                ${e.meta ?? n}${e.meta && e.link ? " · " : n}${e.link ? a`<a class="lintje-announcement__link" href=${e.link.href}
+          ${e.title ? u`<p class="lintje-announcement__title">${i}${e.title}</p>` : n}
+          ${e.text ? u`<p class="lintje-announcement__text">${e.title ? n : i}${e.text}</p>` : n}
+          ${e.meta || e.link ? u`<p class="lintje-announcement__meta">
+                ${e.meta ?? n}${e.meta && e.link ? " · " : n}${e.link ? u`<a class="lintje-announcement__link" href=${e.link.href}
                       >${e.link.label}</a
                     >` : n}
               </p>` : n}
@@ -131,13 +131,13 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
         <slot name="action" class="lintje-announcement__action"></slot>
       </div>
       <slot name="media" class="lintje-announcement__media"></slot>
-      ${r ? a`<button
+      ${r ? u`<button
             type="button"
             class="lintje-announcement__close"
             aria-label="Mededeling sluiten"
             @click=${() => void this.close()}
           >
-            ${l("functioneel-kruis", { size: 16 })}
+            ${c("functioneel-kruis", { size: 16 })}
           </button>` : n}`;
 	}
 };

package/dist-elements/tag/app-search.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Kt as o, Lt as s, Nt as c, St as l, Z as u, et as d, zt as f } from "../chunks/base-rBLTcEIv.js";
-import { t as p } from "../chunks/focus-trap-w3vCamJ6.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Lt as o, Nt as s, St as c, Z as l, et as u, qt as d, zt as f } from "../chunks/base-Bg-IFOPG.js";
+import { t as p } from "../chunks/focus-trap-9BnE-xWv.js";
 import { t as m } from "../chunks/dialog-close-u75fVEw4.js";
 import { t as h } from "../chunks/key-CuuOw1KE.js";
 import { t as g } from "../chunks/debounce-JXnLMCcF.js";
@@ -20,7 +20,7 @@ function x(e, t, n) {
 }
 var S = class extends f {
 	constructor(...e) {
-		super(...e), this.open = !1, this.label = "Zoeken", this.query = "", this.loading = !1, this.groups = [], this.active = -1, this.#e = new s(this, a), this.#t = new g(this, 200), this.#n = `lintje-app-search-${++y}`, this.#r = null, this.#i = null, this.#a = new p(), this.#o = (e) => {
+		super(...e), this.open = !1, this.label = "Zoeken", this.query = "", this.loading = !1, this.groups = [], this.active = -1, this.#e = new o(this, a), this.#t = new g(this, 200), this.#n = `lintje-app-search-${++y}`, this.#r = null, this.#i = null, this.#a = new p(), this.#o = (e) => {
 			e.key === "Escape" && this.#a.isTopmost() && this.close("escape");
 		};
 	}
@@ -65,7 +65,7 @@ var S = class extends f {
 	}
 	#o;
 	connectedCallback() {
-		super.connectedCallback(), this.#r = l({
+		super.connectedCallback(), this.#r = c({
 			keys: "/",
 			description: "Zoeken",
 			handler: () => {
@@ -86,7 +86,7 @@ var S = class extends f {
 		super.updated(e), this.open && !this.#i ? this.#s() : !this.open && this.#i && this.#c(), e.has("active") && this.active >= 0 && this.renderRoot.querySelector(`#${this.optionId(this.active)}`)?.scrollIntoView?.({ block: "nearest" });
 	}
 	#s() {
-		this.#i = c(), document.addEventListener("keydown", this.#o);
+		this.#i = s(), document.addEventListener("keydown", this.#o);
 		let e = this.renderRoot.querySelector(".lintje-app-search");
 		e && this.#a.activate(e, { focus: this.input ?? !0 });
 	}
@@ -121,38 +121,38 @@ var S = class extends f {
 	}
 	renderLabel(e) {
 		let t = b(e, this.query);
-		return t ? o`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}` : o`${e}`;
+		return t ? d`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}` : d`${e}`;
 	}
 	renderOption(e, t) {
-		let r = t === this.active, i = u({
+		let r = t === this.active, i = l({
 			"lintje-app-search__option": !0,
 			"is-active": r
-		}), a = o`<span class="lintje-app-search__label">${this.renderLabel(e.label)}</span>${e.meta ? o`<span class="lintje-app-search__meta">${e.meta}</span>` : n}`, s = (t) => this.choose(e, t);
-		return e.href ? o`<a
+		}), a = d`<span class="lintje-app-search__label">${this.renderLabel(e.label)}</span>${e.meta ? d`<span class="lintje-app-search__meta">${e.meta}</span>` : n}`, o = (t) => this.choose(e, t);
+		return e.href ? d`<a
           id=${this.optionId(t)}
           class=${i}
           role="option"
           aria-selected=${String(r)}
           tabindex="-1"
           href=${e.href}
-          @click=${s}
+          @click=${o}
           >${a}</a
-        >` : o`<div
+        >` : d`<div
           id=${this.optionId(t)}
           class=${i}
           role="option"
           aria-selected=${String(r)}
-          @click=${s}
+          @click=${o}
         >
           ${a}
         </div>`;
 	}
 	renderResults() {
 		let e = 0, t = `${this.#n}-list`, r = this.results.length, i = this.query.trim();
-		return o`
-      ${this.loading ? o`<div class="lintje-app-search__busy">
+		return d`
+      ${this.loading ? d`<div class="lintje-app-search__busy">
             <lintje-spinner label="Zoeken"></lintje-spinner>
-          </div>` : !r && i ? o`<p class="lintje-app-search__empty">Geen resultaten voor “${i}”</p>` : n}
+          </div>` : !r && i ? d`<p class="lintje-app-search__empty">Geen resultaten voor “${i}”</p>` : n}
       <div
         id=${t}
         class="lintje-app-search__list"
@@ -163,7 +163,7 @@ var S = class extends f {
         ${this.groups.map((t, r) => {
 			if (!t.items.length) return n;
 			let i = `${this.#n}-group-${r}`;
-			return o`<div class="lintje-app-search__group" role="group" aria-labelledby=${i}>
+			return d`<div class="lintje-app-search__group" role="group" aria-labelledby=${i}>
             <div id=${i} class="lintje-app-search__heading">${t.label}</div>
             ${t.items.map((t) => this.renderOption(t, e++))}
           </div>`;
@@ -174,7 +174,7 @@ var S = class extends f {
 	render() {
 		if (!this.open) return n;
 		let e = `${this.#n}-list`, t = this.results.length, r = !this.loading && t > 0;
-		return o`<div class="lintje-app-search__scrim" @click=${() => this.close("scrim")}>
+		return d`<div class="lintje-app-search__scrim" @click=${() => this.close("scrim")}>
       <div
         class="lintje-app-search"
         role="dialog"
@@ -183,7 +183,7 @@ var S = class extends f {
         tabindex="-1"
         @click=${(e) => e.stopPropagation()}
       >
-        ${this.#e.matches ? o`<div class="lintje-app-search__header">
+        ${this.#e.matches ? d`<div class="lintje-app-search__header">
                 <h2 class="lintje-app-search__title">Zoeken</h2>
                 <button
                   type="button"
@@ -191,11 +191,11 @@ var S = class extends f {
                   aria-label="Zoeken sluiten"
                   @click=${() => this.close("button")}
                 >
-                  ${d("functioneel-kruis", { size: 16 })}
+                  ${u("functioneel-kruis", { size: 16 })}
                 </button>
               </div>` : n}
         <div class="lintje-app-search__field">
-          ${d("functioneel-zoek", {
+          ${u("functioneel-zoek", {
 			size: 20,
 			className: "lintje-app-search__icon"
 		})}
@@ -225,7 +225,7 @@ var S = class extends f {
         <p class="visually-hidden" aria-live="polite">
           ${x(t, this.query, this.loading)}
         </p>
-        ${this.#e.matches ? n : o`<p class="lintje-app-search__keys">
+        ${this.#e.matches ? n : d`<p class="lintje-app-search__keys">
                 <span class="lintje-app-search__hint"
                   ><kbd class="lintje-key">↑</kbd><kbd class="lintje-key">↓</kbd> kiezen</span
                 >

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

@@ -1,8 +1,8 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Kt as a, Lt as o, Z as s, et as c, j as l, q as u, ut as d } from "../chunks/base-rBLTcEIv.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Lt as a, Z as o, et as s, j as c, q as l, qt as u, ut as d } from "../chunks/base-Bg-IFOPG.js";
 import "./menu-button.js";
 import "./announcement.js";
 import { a as f, c as p, d as m, f as h, g, h as _, m as v, n as y, p as b, r as x, s as S, u as C } from "../chunks/playback-DZJ_NMXv.js";
-import { n as w, t as T } from "../chunks/player-Bq9YGnpt.js";
+import { n as w, t as T } from "../chunks/player-DXOZEyEy.js";
 //#region src/components/content/audio-player/audio-player.css?inline
 var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-audio-player {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-4);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n.lintje-audio-player--compact {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-2) var(--space-3);\n}\n\n/* Flush: the bar the page draws is the frame; the content keeps its own rhythm. */\n.lintje-audio-player--flush { padding-inline: 0; border: 0; background: none; }\n\n/* Play stands in the middle of the row, whatever stands beside it; on a narrow row the sides\n   keep their content and the middle gives way a little. */\n.lintje-audio-player__controls {\n  display: grid;\n  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);\n  align-items: center;\n  gap: var(--space-2);\n}\n.lintje-audio-player__start { display: flex; align-items: center; min-width: 0; }\n/* The speed keeps its distance from the volume bar, so it does not read as the bar's value. */\n.lintje-audio-player__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }\n.lintje-audio-player__transport { display: flex; align-items: center; gap: var(--space-2); flex: none; }\n.lintje-audio-player--compact .lintje-audio-player__transport { gap: var(--space-1); }\n\n/* The set has no 15-second icon: the step stands under the arrows as text. */\n.lintje-audio-player__skip { flex-direction: column; }\n.lintje-audio-player__step { font: var(--text-axis); font-weight: 700; }\n\n.lintje-audio-player__times {\n  display: flex;\n  justify-content: space-between;\n  margin-top: calc(-1 * var(--space-2));\n  font: var(--text-small);\n  font-variant-numeric: tabular-nums;\n}\n\n.lintje-audio-player__legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font: var(--text-small);\n}\n.lintje-audio-player--compact .lintje-audio-player__legend { flex-basis: 100%; }\n.lintje-audio-player__speaker { display: flex; align-items: center; gap: var(--space-2); }\n.lintje-audio-player__speaker.is-current { font-weight: 700; }\n.lintje-audio-player__swatch { width: var(--space-3); height: var(--space-3); flex: none; }\n.lintje-audio-player__now { font-weight: 400; color: var(--color-text-muted); }\n\n.lintje-audio-player__wave {\n  position: relative;\n  flex: none;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-1);\n  overflow: visible;\n  cursor: pointer;\n  touch-action: none;\n}\n.lintje-audio-player__peak {\n  flex: 0 1 4px;\n  min-height: 2px;\n  background: var(--color-border-heavy);\n  pointer-events: none;\n}\n.lintje-audio-player__peak.is-played { background: var(--color-accent-line); }\n\n/* The bar thickens under the pointer into its own margin, so nothing around it moves; its hit\n   area (`player.css`) stays 48 px. */\n.lintje-audio-player__bar {\n  flex: none;\n  transition: height var(--dur-hover) var(--ease-in-motion), margin var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-audio-player__bar:hover { height: var(--space-2); margin-block: calc((6px - var(--space-2)) / 2); }\n.lintje-audio-player__stretch { position: absolute; top: 0; bottom: 0; pointer-events: none; }\n.lintje-audio-player__head {\n  position: absolute;\n  top: 50%;\n  width: var(--space-1);\n  height: var(--space-4);\n  transform: translate(-50%, -50%);\n  background: var(--color-text-primary);\n  pointer-events: none;\n}\n\n/* One colour per speaker (`--lintje-speaker`, set per bar); what is still to come is quieter. */\n.lintje-audio-player__peak.has-speaker,\n.lintje-audio-player__stretch,\n.lintje-audio-player__swatch { background: var(--lintje-speaker); }\n.lintje-audio-player__peak.has-speaker:not(.is-played),\n.lintje-audio-player__stretch:not(.is-played) { opacity: 0.4; }\n\n.lintje-audio-player__cursor {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--color-text-primary);\n  pointer-events: none;\n}\n.lintje-audio-player__bar .lintje-audio-player__cursor { top: calc(-1 * var(--space-2)); bottom: calc(-1 * var(--space-2)); }\n.lintje-audio-player__cursor-time {\n  position: absolute;\n  bottom: calc(100% + var(--space-1));\n  left: 50%;\n  transform: translateX(-50%);\n  padding: var(--space-1) var(--space-2);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-small);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  color: var(--color-text-primary);\n}\n\n.lintje-audio-player__volume { display: flex; align-items: center; gap: var(--space-1); flex: none; }\n/* A transparent area above and below the line takes the pointer, as on the position bar. */\n.lintje-audio-player__level {\n  position: relative;\n  width: calc(2 * var(--space-10));\n  height: 6px;\n  background: var(--color-border-default);\n  cursor: pointer;\n  touch-action: none;\n}\n.lintje-audio-player__level::before {\n  content: '';\n  position: absolute;\n  inset: calc((100% - var(--h-target)) / 2) 0;\n}\n.lintje-audio-player__level-fill { height: 100%; background: var(--color-accent-line); pointer-events: none; }\n\n.lintje-audio-player__skeleton,\n.lintje-audio-player__alert { flex: none; }\n/* On one line the slider takes the room the buttons leave. */\n.lintje-audio-player--compact .lintje-audio-player__wave,\n.lintje-audio-player--compact .lintje-audio-player__bar,\n.lintje-audio-player--compact .lintje-audio-player__skeleton,\n.lintje-audio-player--compact .lintje-audio-player__alert { flex: 1 1 240px; min-width: 0; }\n.lintje-audio-player__speed { flex: none; }\n\n/* Forced colours drop fills; the bars keep their drawing in system colours. */\n@media (forced-colors: active) {\n  .lintje-audio-player__peak,\n  .lintje-audio-player__stretch,\n  .lintje-audio-player__swatch,\n  .lintje-audio-player__head,\n  .lintje-audio-player__cursor,\n  .lintje-audio-player__level,\n  .lintje-audio-player__level-fill { forced-color-adjust: none; background: CanvasText; }\n  .lintje-audio-player__peak.is-played,\n  .lintje-audio-player__stretch.is-played,\n  .lintje-audio-player__level-fill { background: Highlight; }\n}\n\n/* A phone of 320 px still fits mute, the three buttons and the speed: each keeps its 48 px. */\n@media (max-width: 767px) {\n  .lintje-audio-player__controls,\n  .lintje-audio-player__transport { gap: 0; }\n}\n", D = {
 	kind: "outage",
@@ -10,15 +10,15 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	live: !0
 }, O = (e) => e ? `var(--color-chart-${e})` : null, k = .5, A = class extends w {
 	constructor(...e) {
-		super(...e), this.segments = [], this.noLegend = !1, this.compact = !1, this.flush = !1, this.hoverTime = null, this.waveWidth = 0, this.volume = 1, this.muted = !1, this.mediaSelector = "audio", this.mobile = new o(this, i), this.observer = null, this.observed = null, this.onRetry = () => {
+		super(...e), this.segments = [], this.noLegend = !1, this.compact = !1, this.flush = !1, this.hoverTime = null, this.waveWidth = 0, this.volume = 1, this.muted = !1, this.mediaSelector = "audio", this.mobile = new a(this, i), this.observer = null, this.observed = null, this.onRetry = () => {
 			this.retry(), this.updateComplete.then(() => this.renderRoot.querySelector(".lintje-player__play")?.focus());
 		};
 	}
 	static {
 		this.styles = [
 			e,
-			r(u),
 			r(l),
+			r(c),
 			r(T),
 			r(E)
 		];
@@ -103,7 +103,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		let e = this.hoverTime;
 		if (e === null) return n;
 		let t = C(this.segments ?? [], e);
-		return a`<span
+		return u`<span
       class="lintje-audio-player__cursor"
       aria-hidden="true"
       ${d({ left: `${S(e, this.length) * 100}%` })}
@@ -113,8 +113,8 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     >`;
 	}
 	renderWave() {
-		let e = this.peaks ?? [], t = typeof ResizeObserver < "u" && this.waveWidth === 0, n = this.waveWidth > 0 ? x(this.waveWidth) : t ? 0 : e.length, r = p(e, n), i = Math.round(S(this.position, this.length) * r.length), o = this.segments ?? [], c = this.colours, l = this.length;
-		return a`<div
+		let e = this.peaks ?? [], t = typeof ResizeObserver < "u" && this.waveWidth === 0, n = this.waveWidth > 0 ? x(this.waveWidth) : t ? 0 : e.length, r = p(e, n), i = Math.round(S(this.position, this.length) * r.length), a = this.segments ?? [], s = this.colours, c = this.length;
+		return u`<div
       class="lintje-audio-player__wave"
       role="slider"
       tabindex="0"
@@ -129,23 +129,23 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       @pointerleave=${() => this.hoverTime = null}
     >
       ${r.map((e, t) => {
-			let n = C(o, (t + .5) / r.length * l), u = n ? c.get(n) : void 0;
-			return a`<span
-          class=${s({
+			let n = C(a, (t + .5) / r.length * c), l = n ? s.get(n) : void 0;
+			return u`<span
+          class=${o({
 				"lintje-audio-player__peak": !0,
 				"is-played": t < i,
-				"has-speaker": !!u
+				"has-speaker": !!l
 			})}
           ${d({
 				height: `${Math.max(e, .08) * 100}%`,
-				"--lintje-speaker": O(u)
+				"--lintje-speaker": O(l)
 			})}
         ></span>`;
 		})}
       <span
         class="lintje-audio-player__head"
         aria-hidden="true"
-        ${d({ left: `${S(this.position, l) * 100}%` })}
+        ${d({ left: `${S(this.position, c) * 100}%` })}
       ></span>
       ${this.renderCursor()}
     </div>`;
@@ -165,7 +165,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 				played: !1
 			}].filter((e) => e.to > e.from);
 		});
-		return a`<div
+		return u`<div
       class="lintje-player__bar lintje-audio-player__bar"
       role="slider"
       tabindex="0"
@@ -179,11 +179,11 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       @pointermove=${this.onWaveMove}
       @pointerleave=${() => this.hoverTime = null}
     >
-      ${r.length === 0 ? a`<div
+      ${r.length === 0 ? u`<div
               class="lintje-player__bar-fill"
               ${d({ width: `${t * 100}%` })}
-            ></div>` : r.map((e) => a`<span
-                  class=${s({
+            ></div>` : r.map((e) => u`<span
+                  class=${o({
 			"lintje-audio-player__stretch": !0,
 			"is-played": e.played
 		})}
@@ -202,11 +202,11 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     </div>`;
 	}
 	renderSlider() {
-		return this.failed ? a`<lintje-announcement compact class="lintje-audio-player__alert" .data=${D}>
+		return this.failed ? u`<lintje-announcement compact class="lintje-audio-player__alert" .data=${D}>
         <lintje-button slot="action" variant="link" @click=${this.onRetry}
           >Opnieuw proberen</lintje-button
         >
-      </lintje-announcement>` : this.ready ? this.hasPeaks ? this.renderWave() : this.renderTrack() : a`<lintje-skeleton
+      </lintje-announcement>` : this.ready ? this.hasPeaks ? this.renderWave() : this.renderTrack() : u`<lintje-skeleton
         class="lintje-audio-player__skeleton"
         height=${this.hasPeaks ? "48" : "6"}
       ></lintje-skeleton>`;
@@ -215,9 +215,9 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		let e = this.colours;
 		if (e.size === 0 || this.noLegend) return n;
 		let t = C(this.segments ?? [], this.position);
-		return a`<ul class="lintje-audio-player__legend" aria-label="Sprekers">
-      ${[...e].map(([e, r]) => a`<li
-            class=${s({
+		return u`<ul class="lintje-audio-player__legend" aria-label="Sprekers">
+      ${[...e].map(([e, r]) => u`<li
+            class=${o({
 			"lintje-audio-player__speaker": !0,
 			"is-current": e === t
 		})}
@@ -228,15 +228,15 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
               ${d({ "--lintje-speaker": O(r) })}
             ></span>
             <span>${e}</span>
-            ${e === t ? a`<span class="lintje-audio-player__now">spreekt nu</span>` : n}
+            ${e === t ? u`<span class="lintje-audio-player__now">spreekt nu</span>` : n}
           </li>`)}
     </ul>`;
 	}
 	renderSkip(e) {
 		let t = `15 seconden ${e < 0 ? "terug" : "vooruit"}`, r = !this.ready;
-		return a`<button
+		return u`<button
       type="button"
-      class=${s({
+      class=${o({
 			"lintje-icon-button": !0,
 			"lintje-icon-button--flat": !0,
 			"lintje-player__icon-button": !0,
@@ -250,7 +250,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 			r || this.skip(e * 15);
 		}}
     >
-      ${c("functioneel-dubbel-delta-rechts", {
+      ${s("functioneel-dubbel-delta-rechts", {
 			size: 20,
 			flip: e < 0 ? "horizontal" : void 0
 		})}
@@ -258,7 +258,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     </button>`;
 	}
 	renderTransport() {
-		return a`<div class="lintje-audio-player__transport">
+		return u`<div class="lintje-audio-player__transport">
       ${this.renderSkip(-1)} ${this.renderPlay()} ${this.renderSkip(1)}
     </div>`;
 	}
@@ -270,7 +270,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	}
 	renderVolume() {
 		let e = this.muted ? 0 : this.volume, t = Math.round(e * 100);
-		return a`<div class="lintje-audio-player__volume">
+		return u`<div class="lintje-audio-player__volume">
       ${this.renderMute()}
       <div
         class="lintje-audio-player__level"
@@ -296,7 +296,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 			checked: e.value === this.speed,
 			radio: !0
 		})), n = b(this.speed);
-		return a`<lintje-menu-button
+		return u`<lintje-menu-button
       class="lintje-audio-player__speed"
       variant="flat"
       placement="bottom-end"
@@ -309,13 +309,13 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     ></lintje-menu-button>`;
 	}
 	renderTimes() {
-		return a`<div class="lintje-audio-player__times">
+		return u`<div class="lintje-audio-player__times">
       <strong class="lintje-player__position">${f(this.position)}</strong>
       <span class="lintje-player__duration">${f(this.length)}</span>
     </div>`;
 	}
 	renderFull(e) {
-		return a`${this.renderLegend()} ${this.renderSlider()}
+		return u`${this.renderLegend()} ${this.renderSlider()}
       ${e && !this.failed ? this.renderTimes() : n}
       <div class="lintje-audio-player__controls">
         <div class="lintje-audio-player__start">
@@ -328,13 +328,13 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       </div>`;
 	}
 	renderCompact() {
-		return a`${this.renderLegend()} ${this.renderTransport()} ${this.renderSlider()}
+		return u`${this.renderLegend()} ${this.renderTransport()} ${this.renderSlider()}
     ${this.renderTime(!0)} ${this.renderVolume()} ${this.renderSpeed()}`;
 	}
 	render() {
 		let e = this.mobile.matches, t = this.compact && !e;
-		return a`<div
-      class=${s({
+		return u`<div
+      class=${o({
 			"lintje-audio-player": !0,
 			"lintje-audio-player--compact": t,
 			"lintje-audio-player--flush": this.flush

package/dist-elements/tag/badge.js

@@ -1 +1 @@
-export { J as LintjeBadge, Y as badgeStyles, X as renderBadge } from "../chunks/base-rBLTcEIv.js";
+export { J as LintjeBadge, Y as badgeStyles, X as renderBadge } from "../chunks/base-Bg-IFOPG.js";

package/dist-elements/tag/breadcrumbs.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Kt as o, Lt as s, et as c, zt as l } from "../chunks/base-rBLTcEIv.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Lt as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
 import "./menu-button.js";
 //#region src/components/frame/breadcrumbs/breadcrumbs.css?inline
 var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-breadcrumbs { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-breadcrumbs__list {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2);\n}\n.lintje-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }\n\n/* A transparent hit area reaches the target height up and down; sideways stands other content. */\n.lintje-breadcrumbs__link {\n  position: relative;\n  color: var(--color-link);\n  text-decoration: underline;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-breadcrumbs__link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-breadcrumbs__link:hover { color: var(--color-link-hover); }\n.lintje-breadcrumbs__current { color: var(--color-text-primary); }\n\n/* Below 768 px only the way back stays. */\n.lintje-breadcrumbs__back {\n  display: inline-flex; align-items: center; gap: var(--space-1);\n  min-height: var(--h-touch);\n  font: var(--text-ui);\n  font-weight: 700;\n  color: var(--color-link);\n  text-decoration: none;\n}\n.lintje-breadcrumbs__back:hover { color: var(--color-link-hover); }\n", d = 4;
@@ -15,7 +15,7 @@ function f(e) {
 }
 var p = class extends l {
 	constructor(...e) {
-		super(...e), this.items = [], this.label = "Kruimelpad", this.#e = new s(this, a);
+		super(...e), this.items = [], this.label = "Kruimelpad", this.#e = new o(this, a);
 	}
 	static {
 		this.styles = [e, r(u)];
@@ -31,10 +31,10 @@ var p = class extends l {
 		i(e) && this.followLink(t, e);
 	}
 	renderCrumb(e, t) {
-		if (t) return o`<span class="lintje-breadcrumbs__current" aria-current="page">${e.label}</span>`;
-		if (!e.href) return o`<span class="lintje-breadcrumbs__text">${e.label}</span>`;
+		if (t) return c`<span class="lintje-breadcrumbs__current" aria-current="page">${e.label}</span>`;
+		if (!e.href) return c`<span class="lintje-breadcrumbs__text">${e.label}</span>`;
 		let n = e.href;
-		return o`<a
+		return c`<a
       class="lintje-breadcrumbs__link"
       href=${n}
       @click=${(e) => this.follow(e, n)}
@@ -48,7 +48,7 @@ var p = class extends l {
 			href: e.href,
 			disabled: !e.href
 		}));
-		return o`<lintje-menu-button
+		return c`<lintje-menu-button
       variant="ellipsis"
       label="Tussenliggende niveaus tonen"
       .items=${t}
@@ -59,13 +59,13 @@ var p = class extends l {
 		let e = this.items.at(-2);
 		if (!e?.href) return n;
 		let t = e.href;
-		return o`<nav class="lintje-breadcrumbs lintje-breadcrumbs--back" aria-label=${this.label}>
+		return c`<nav class="lintje-breadcrumbs lintje-breadcrumbs--back" aria-label=${this.label}>
       <a
         class="lintje-breadcrumbs__back"
         href=${t}
         @click=${(e) => this.follow(e, t)}
       >
-        ${c("functioneel-delta-rechts", {
+        ${s("functioneel-delta-rechts", {
 			size: 16,
 			flip: "horizontal"
 		})}${e.label}
@@ -76,10 +76,10 @@ var p = class extends l {
 		if (!this.items.length) return n;
 		if (this.#e.matches) return this.renderPhone();
 		let { head: e, folded: t, tail: r } = f(this.items), i = this.items.length - 1, a = e.map((e, t) => this.renderCrumb(e, t === i));
-		return t.length && (a.push(this.renderMenu(t)), r.forEach((e, t) => a.push(this.renderCrumb(e, t === r.length - 1)))), o`<nav class="lintje-breadcrumbs" aria-label=${this.label}>
+		return t.length && (a.push(this.renderMenu(t)), r.forEach((e, t) => a.push(this.renderCrumb(e, t === r.length - 1)))), c`<nav class="lintje-breadcrumbs" aria-label=${this.label}>
       <ol class="lintje-breadcrumbs__list">
-        ${a.map((e, t) => o`<li class="lintje-breadcrumbs__item">
-              ${t ? o`<span class="lintje-breadcrumbs__separator" aria-hidden="true">›</span>` : n}${e}
+        ${a.map((e, t) => c`<li class="lintje-breadcrumbs__item">
+              ${t ? c`<span class="lintje-breadcrumbs__separator" aria-hidden="true">›</span>` : n}${e}
             </li>`)}
       </ol>
     </nav>`;

package/dist-elements/tag/button.js

@@ -1 +1 @@
-export { K as LintjeButton } from "../chunks/base-rBLTcEIv.js";
+export { K as LintjeButton } from "../chunks/base-Bg-IFOPG.js";