lintje 0.2.0 → 0.3.0

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

@@ -1,26 +1,26 @@
-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 { Gt as e, Kt as t, L as n, Yt as r, Zt as i, bt as a, en as o, lt as s, nn as c, rt as l, st as u, ut as d } from "../chunks/base-CbmWxUig.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-DXOZEyEy.js";
+import { n as w, t as T } from "../chunks/player-B8QXJ0Z5.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 = {
+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 screen and (max-width: 767px) {\n  .lintje-audio-player__controls,\n  .lintje-audio-player__transport { gap: 0; }\n}\n", D = {
 	kind: "outage",
 	text: "De opname kan niet worden geladen.",
 	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 a(this, i), this.observer = null, this.observed = null, this.onRetry = () => {
+	constructor(...n) {
+		super(...n), 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 t(this, e), 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(l),
-			r(c),
-			r(T),
-			r(E)
+			s,
+			i(l),
+			i(n),
+			i(T),
+			i(E)
 		];
 	}
 	static {
@@ -101,20 +101,20 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	}
 	renderCursor() {
 		let e = this.hoverTime;
-		if (e === null) return n;
+		if (e === null) return o;
 		let t = C(this.segments ?? [], e);
-		return u`<span
+		return c`<span
       class="lintje-audio-player__cursor"
       aria-hidden="true"
-      ${d({ left: `${S(e, this.length) * 100}%` })}
+      ${a({ left: `${S(e, this.length) * 100}%` })}
       ><span class="lintje-audio-player__cursor-time"
         >${f(e)}${t ? ` · ${t}` : ""}</span
       ></span
     >`;
 	}
 	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), a = this.segments ?? [], s = this.colours, c = this.length;
-		return u`<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), o = this.segments ?? [], s = this.colours, l = this.length;
+		return c`<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(a, (t + .5) / r.length * c), l = n ? s.get(n) : void 0;
-			return u`<span
-          class=${o({
+			let n = C(o, (t + .5) / r.length * l), d = n ? s.get(n) : void 0;
+			return c`<span
+          class=${u({
 				"lintje-audio-player__peak": !0,
 				"is-played": t < i,
-				"has-speaker": !!l
+				"has-speaker": !!d
 			})}
-          ${d({
+          ${a({
 				height: `${Math.max(e, .08) * 100}%`,
-				"--lintje-speaker": O(l)
+				"--lintje-speaker": O(d)
 			})}
         ></span>`;
 		})}
       <span
         class="lintje-audio-player__head"
         aria-hidden="true"
-        ${d({ left: `${S(this.position, c) * 100}%` })}
+        ${a({ left: `${S(this.position, l) * 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 u`<div
+		return c`<div
       class="lintje-player__bar lintje-audio-player__bar"
       role="slider"
       tabindex="0"
@@ -179,15 +179,15 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       @pointermove=${this.onWaveMove}
       @pointerleave=${() => this.hoverTime = null}
     >
-      ${r.length === 0 ? u`<div
+      ${r.length === 0 ? c`<div
               class="lintje-player__bar-fill"
-              ${d({ width: `${t * 100}%` })}
-            ></div>` : r.map((e) => u`<span
-                  class=${o({
+              ${a({ width: `${t * 100}%` })}
+            ></div>` : r.map((e) => c`<span
+                  class=${u({
 			"lintje-audio-player__stretch": !0,
 			"is-played": e.played
 		})}
-                  ${d({
+                  ${a({
 			left: `${e.from * 100}%`,
 			width: `${(e.to - e.from) * 100}%`,
 			"--lintje-speaker": O(e.colour)
@@ -196,28 +196,28 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       <span
         class="lintje-audio-player__head"
         aria-hidden="true"
-        ${d({ left: `${t * 100}%` })}
+        ${a({ left: `${t * 100}%` })}
       ></span>
       ${this.renderCursor()}
     </div>`;
 	}
 	renderSlider() {
-		return this.failed ? u`<lintje-announcement compact class="lintje-audio-player__alert" .data=${D}>
+		return this.failed ? c`<lintje-announcement 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() : u`<lintje-skeleton
+      </lintje-announcement>` : this.ready ? this.hasPeaks ? this.renderWave() : this.renderTrack() : c`<lintje-skeleton
         class="lintje-audio-player__skeleton"
         height=${this.hasPeaks ? "48" : "6"}
       ></lintje-skeleton>`;
 	}
 	renderLegend() {
 		let e = this.colours;
-		if (e.size === 0 || this.noLegend) return n;
+		if (e.size === 0 || this.noLegend) return o;
 		let t = C(this.segments ?? [], this.position);
-		return u`<ul class="lintje-audio-player__legend" aria-label="Sprekers">
-      ${[...e].map(([e, r]) => u`<li
-            class=${o({
+		return c`<ul class="lintje-audio-player__legend" aria-label="Sprekers">
+      ${[...e].map(([e, n]) => c`<li
+            class=${u({
 			"lintje-audio-player__speaker": !0,
 			"is-current": e === t
 		})}
@@ -225,32 +225,32 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
             <span
               class="lintje-audio-player__swatch"
               aria-hidden="true"
-              ${d({ "--lintje-speaker": O(r) })}
+              ${a({ "--lintje-speaker": O(n) })}
             ></span>
             <span>${e}</span>
-            ${e === t ? u`<span class="lintje-audio-player__now">spreekt nu</span>` : n}
+            ${e === t ? c`<span class="lintje-audio-player__now">spreekt nu</span>` : o}
           </li>`)}
     </ul>`;
 	}
 	renderSkip(e) {
-		let t = `15 seconden ${e < 0 ? "terug" : "vooruit"}`, r = !this.ready;
-		return u`<button
+		let t = `15 seconden ${e < 0 ? "terug" : "vooruit"}`, n = !this.ready;
+		return c`<button
       type="button"
-      class=${o({
+      class=${u({
 			"lintje-icon-button": !0,
 			"lintje-icon-button--flat": !0,
 			"lintje-player__icon-button": !0,
 			"lintje-audio-player__skip": !0,
-			"is-disabled": r
+			"is-disabled": n
 		})}
       aria-label=${t}
       title=${t}
-      aria-disabled=${r ? "true" : n}
+      aria-disabled=${n ? "true" : o}
       @click=${() => {
-			r || this.skip(e * 15);
+			n || this.skip(e * 15);
 		}}
     >
-      ${s("functioneel-dubbel-delta-rechts", {
+      ${d("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 u`<div class="lintje-audio-player__transport">
+		return c`<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 u`<div class="lintje-audio-player__volume">
+		return c`<div class="lintje-audio-player__volume">
       ${this.renderMute()}
       <div
         class="lintje-audio-player__level"
@@ -285,7 +285,7 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
         @pointerdown=${this.onVolumePointerDown}
         @pointermove=${this.onVolumePointerMove}
       >
-        <div class="lintje-audio-player__level-fill" ${d({ width: `${t}%` })}></div>
+        <div class="lintje-audio-player__level-fill" ${a({ width: `${t}%` })}></div>
       </div>
     </div>`;
 	}
@@ -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 u`<lintje-menu-button
+		return c`<lintje-menu-button
       class="lintje-audio-player__speed"
       variant="flat"
       placement="bottom-end"
@@ -309,32 +309,32 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     ></lintje-menu-button>`;
 	}
 	renderTimes() {
-		return u`<div class="lintje-audio-player__times">
+		return c`<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 u`${this.renderLegend()} ${this.renderSlider()}
-      ${e && !this.failed ? this.renderTimes() : n}
+		return c`${this.renderLegend()} ${this.renderSlider()}
+      ${e && !this.failed ? this.renderTimes() : o}
       <div class="lintje-audio-player__controls">
         <div class="lintje-audio-player__start">
           ${e ? this.renderMute() : this.renderTime(!0)}
         </div>
         ${this.renderTransport()}
         <div class="lintje-audio-player__end">
-          ${e ? n : this.renderVolume()} ${this.renderSpeed(e)}
+          ${e ? o : this.renderVolume()} ${this.renderSpeed(e)}
         </div>
       </div>`;
 	}
 	renderCompact() {
-		return u`${this.renderLegend()} ${this.renderTransport()} ${this.renderSlider()}
+		return c`${this.renderLegend()} ${this.renderTransport()} ${this.renderSlider()}
     ${this.renderTime(!0)} ${this.renderVolume()} ${this.renderSpeed()}`;
 	}
 	render() {
 		let e = this.mobile.matches, t = this.compact && !e;
-		return u`<div
-      class=${o({
+		return c`<div
+      class=${u({
 			"lintje-audio-player": !0,
 			"lintje-audio-player--compact": t,
 			"lintje-audio-player--flush": this.flush
@@ -343,11 +343,11 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       aria-label=${this.name || "Opname"}
       @keydown=${this.onGroupKeydown}
     >
-      <audio class="lintje-player__media" preload="metadata" src=${this.src || n}></audio>
+      <audio class="lintje-player__media" preload="metadata" src=${this.src || o}></audio>
       ${t ? this.renderCompact() : this.renderFull(e)}
     </div>`;
 	}
 };
-t("lintje-audio-player", A);
+r("lintje-audio-player", A);
 //#endregion
 export { A as LintjeAudioPlayer };

package/dist-elements/tag/badge.js

@@ -1 +1 @@
-export { J as LintjeBadge, Y as badgeStyles, X as renderBadge } from "../chunks/base-Bg-IFOPG.js";
+export { it as LintjeBadge, at as badgeStyles, ot as renderBadge } from "../chunks/base-CbmWxUig.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, Lt as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, H as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, lt as s, nn as c, ut as l } from "../chunks/base-CbmWxUig.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;
@@ -13,12 +13,12 @@ function f(e) {
 		tail: e.slice(-2)
 	};
 }
-var p = class extends l {
-	constructor(...e) {
-		super(...e), this.items = [], this.label = "Kruimelpad", this.#e = new o(this, a);
+var p = class extends n {
+	constructor(...t) {
+		super(...t), this.items = [], this.label = "Kruimelpad", this.#e = new r(this, e);
 	}
 	static {
-		this.styles = [e, r(u)];
+		this.styles = [s, a(u)];
 	}
 	static {
 		this.properties = {
@@ -27,8 +27,8 @@ var p = class extends l {
 		};
 	}
 	#e;
-	follow(e, t) {
-		i(e) && this.followLink(t, e);
+	follow(e, n) {
+		t(e) && this.followLink(n, e);
 	}
 	renderCrumb(e, t) {
 		if (t) return c`<span class="lintje-breadcrumbs__current" aria-current="page">${e.label}</span>`;
@@ -57,7 +57,7 @@ var p = class extends l {
 	}
 	renderPhone() {
 		let e = this.items.at(-2);
-		if (!e?.href) return n;
+		if (!e?.href) return o;
 		let t = e.href;
 		return c`<nav class="lintje-breadcrumbs lintje-breadcrumbs--back" aria-label=${this.label}>
       <a
@@ -65,7 +65,7 @@ var p = class extends l {
         href=${t}
         @click=${(e) => this.follow(e, t)}
       >
-        ${s("functioneel-delta-rechts", {
+        ${l("functioneel-delta-rechts", {
 			size: 16,
 			flip: "horizontal"
 		})}${e.label}
@@ -73,18 +73,18 @@ var p = class extends l {
     </nav>`;
 	}
 	render() {
-		if (!this.items.length) return n;
+		if (!this.items.length) return o;
 		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)))), c`<nav class="lintje-breadcrumbs" aria-label=${this.label}>
+		let { head: e, folded: t, tail: n } = f(this.items), r = this.items.length - 1, i = e.map((e, t) => this.renderCrumb(e, t === r));
+		return t.length && (i.push(this.renderMenu(t)), n.forEach((e, t) => i.push(this.renderCrumb(e, t === n.length - 1)))), c`<nav class="lintje-breadcrumbs" aria-label=${this.label}>
       <ol class="lintje-breadcrumbs__list">
-        ${a.map((e, t) => c`<li class="lintje-breadcrumbs__item">
-              ${t ? c`<span class="lintje-breadcrumbs__separator" aria-hidden="true">›</span>` : n}${e}
+        ${i.map((e, t) => c`<li class="lintje-breadcrumbs__item">
+              ${t ? c`<span class="lintje-breadcrumbs__separator" aria-hidden="true">›</span>` : o}${e}
             </li>`)}
       </ol>
     </nav>`;
 	}
 };
-t("lintje-breadcrumbs", p);
+i("lintje-breadcrumbs", p);
 //#endregion
 export { p as LintjeBreadcrumbs, d as MAX_LEVELS, f as trail };

package/dist-elements/tag/button.js

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

package/dist-elements/tag/card-list.js

@@ -1,8 +1,8 @@
-import { Bt as e, Gt as t, Ht as n, qt as r, ut as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, bt as r, en as i, nn as a } from "../chunks/base-CbmWxUig.js";
 import "./empty-state.js";
 import "./card.js";
 //#region src/components/tables/card-list/card-list.css?inline
-var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-card-list {\n  --card-list-min: var(--w-card);\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  /* A column is never narrower than a card, nor narrower than its share of the most columns. */\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(\n      max(\n        min(100%, var(--card-list-min)),\n        calc((100% - (var(--card-list-columns) - 1) * var(--grid-gutter)) / var(--card-list-columns))\n      ),\n      1fr\n    )\n  );\n  gap: var(--grid-gutter);\n}\n:host([layout='horizontal']) .lintje-card-list { --card-list-min: var(--w-card-wide); }\n.lintje-card-list__item { min-width: 0; }\n\n@media (max-width: 767px) {\n  .lintje-card-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }\n}\n", s = class extends a {
+var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-card-list {\n  --card-list-min: var(--w-card);\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  /* A column is never narrower than a card, nor narrower than its share of the most columns. */\n  grid-template-columns: repeat(\n    auto-fill,\n    minmax(\n      max(\n        min(100%, var(--card-list-min)),\n        calc((100% - (var(--card-list-columns) - 1) * var(--grid-gutter)) / var(--card-list-columns))\n      ),\n      1fr\n    )\n  );\n  gap: var(--grid-gutter);\n}\n:host([layout='horizontal']) .lintje-card-list { --card-list-min: var(--w-card-wide); }\n.lintje-card-list__item { min-width: 0; }\n\n@media screen and (max-width: 767px) {\n  .lintje-card-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }\n}\n", s = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this.layout = "vertical", this.headingLevel = 3, this.compact = !1, this.loading = !1, this.loadingCount = 3, this.maxColumns = 3, this.emptyText = "Er is hier nog niets.", this.spoken = "", this.fillFrame = 0;
 	}
@@ -57,32 +57,32 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		});
 	}
 	render() {
-		return r`<span class="visually-hidden" role="status">${this.spoken}</span>${this.renderBody()}`;
+		return a`<span class="visually-hidden" role="status">${this.spoken}</span>${this.renderBody()}`;
 	}
 	renderBody() {
-		if (!this.loading && !this.items.length) return r`<lintje-empty-state compact text=${this.emptyText}
+		if (!this.loading && !this.items.length) return a`<lintje-empty-state compact text=${this.emptyText}
         ><slot name="empty"></slot
       ></lintje-empty-state>`;
-		let e = this.loading ? Array.from({ length: this.loadingCount }, () => r`<li class="lintje-card-list__item" aria-hidden="true">
+		let e = this.loading ? Array.from({ length: this.loadingCount }, () => a`<li class="lintje-card-list__item" aria-hidden="true">
             <lintje-card loading layout=${this.layout} ?compact=${this.compact}></lintje-card>
-          </li>`) : this.items.map((e) => r`<li class="lintje-card-list__item">
+          </li>`) : this.items.map((e) => a`<li class="lintje-card-list__item">
             <lintje-card
               .data=${e}
               layout=${this.layout}
               heading-level=${this.headingLevel}
               ?compact=${this.compact}
             ></lintje-card>
-          </li>`), n = Math.max(1, Math.min(this.maxColumns, this.layout === "horizontal" ? 2 : this.maxColumns));
-		return r`<ul
+          </li>`), t = Math.max(1, Math.min(this.maxColumns, this.layout === "horizontal" ? 2 : this.maxColumns));
+		return a`<ul
       class="lintje-card-list"
-      aria-label=${this.label ?? t}
-      aria-busy=${this.loading ? "true" : t}
-      ${i({ "--card-list-columns": n })}
+      aria-label=${this.label ?? i}
+      aria-busy=${this.loading ? "true" : i}
+      ${r({ "--card-list-columns": t })}
     >
       ${e}
     </ul>`;
 	}
 };
-e("lintje-card-list", s);
+t("lintje-card-list", s);
 //#endregion
 export { s as LintjeCardList };