lintje 0.5.0 → 0.6.0

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

@@ -1,120 +1,11 @@
-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-CVKIPSLx.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-DDDWUevR.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 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(...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 = [
-			s,
-			i(l),
-			i(n),
-			i(T),
-			i(E)
-		];
-	}
-	static {
-		this.properties = {
-			peaks: { attribute: !1 },
-			segments: { attribute: !1 },
-			noLegend: {
-				type: Boolean,
-				attribute: "no-legend"
-			},
-			compact: {
-				type: Boolean,
-				reflect: !0
-			},
-			flush: {
-				type: Boolean,
-				reflect: !0
-			},
-			hoverTime: { state: !0 },
-			waveWidth: { state: !0 },
-			volume: { state: !0 },
-			muted: { state: !0 }
-		};
-	}
-	get hasPeaks() {
-		return !!(this.peaks && this.peaks.length > 0);
-	}
-	get colours() {
-		return m(this.segments ?? []);
-	}
-	disconnectedCallback() {
-		this.observer?.disconnect(), this.observer = null, this.observed = null, super.disconnectedCallback();
-	}
-	updated(e) {
-		super.updated(e);
-		let t = this.renderRoot.querySelector(".lintje-audio-player__wave");
-		t !== this.observed && (this.observer?.disconnect(), this.observed = t, t && typeof ResizeObserver < "u" && (this.observer = new ResizeObserver((e) => {
-			let t = Math.round(e[0]?.contentRect.width ?? 0);
-			t !== this.waveWidth && (this.waveWidth = t);
-		}), this.observer.observe(t)));
-	}
-	sliderLabel() {
-		let e = C(this.segments ?? [], this.heard), t = _(this.heard, this.length);
-		return e ? `${t}, ${e}` : t;
-	}
-	setVolume(e) {
-		this.volume = e, this.muted = e === 0, this.applyVolume();
-	}
-	toggleMute() {
-		this.muted && this.volume === 0 && (this.volume = k), this.muted = !this.muted, this.applyVolume();
-	}
-	applyVolume() {
-		let e = this.media;
-		e && (e.volume = this.volume, e.muted = this.muted);
-	}
-	onWaveMove(e) {
-		let t = e.currentTarget.getBoundingClientRect();
-		this.hoverTime = this.ready ? v(e.clientX, t.left, t.width, this.length) : null, this.onSliderPointerMove(e);
-	}
-	volumeFromPointer(e) {
-		let t = e.currentTarget.getBoundingClientRect();
-		this.setVolume(Math.round(v(e.clientX, t.left, t.width, 1) * 100) / 100);
-	}
-	onVolumePointerDown(e) {
-		if (e.button !== 0) return;
-		let t = e.currentTarget;
-		t.setPointerCapture?.(e.pointerId), t.focus(), this.volumeFromPointer(e);
-	}
-	onVolumePointerMove(e) {
-		e.currentTarget.hasPointerCapture?.(e.pointerId) && this.volumeFromPointer(e);
-	}
-	onVolumeKeydown(e) {
-		let t = g(e.key, this.muted ? 0 : this.volume);
-		t !== null && (e.preventDefault(), this.setVolume(t));
-	}
-	onSpeedMenu(e) {
-		e.stopPropagation(), this.setSpeed(Number(e.detail));
-	}
-	renderCursor() {
-		let e = this.hoverTime;
-		if (e === null) return o;
-		let t = C(this.segments ?? [], e);
-		return c`<span
+import{$t as e,Jt as t,L as n,St as r,Zt as i,at as a,dt as o,ft as s,in as c,lt as l,nn as u,qt as d}from"../chunks/base-DuuwEY22.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-gEUDw038.js";import{n as w,t as T}from"../chunks/player-Dh7ZHcMF.js";var E=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-audio-player{gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border-default);background:var(--color-bg-surface);color:var(--color-text-primary);flex-direction:column;display:flex}.lintje-audio-player--compact{align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-2) var(--space-3);flex-flow:wrap}.lintje-audio-player--flush{background:0 0;border:0;padding-inline:0}.lintje-audio-player__controls{align-items:center;gap:var(--space-2);grid-template-columns:minmax(min-content,1fr) auto minmax(min-content,1fr);display:grid}.lintje-audio-player__start{align-items:center;min-width:0;display:flex}.lintje-audio-player__end{justify-content:flex-end;align-items:center;gap:var(--space-4);display:flex}.lintje-audio-player__transport{align-items:center;gap:var(--space-2);flex:none;display:flex}.lintje-audio-player--compact .lintje-audio-player__transport{gap:var(--space-1)}.lintje-audio-player__skip{flex-direction:column}.lintje-audio-player__step{font:var(--text-axis);font-weight:700}.lintje-audio-player__times{margin-top:calc(-1 * var(--space-2));font:var(--text-small);font-variant-numeric:tabular-nums;justify-content:space-between;display:flex}.lintje-audio-player__legend{gap:var(--space-1) var(--space-5);font:var(--text-small);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.lintje-audio-player--compact .lintje-audio-player__legend{flex-basis:100%}.lintje-audio-player__speaker{align-items:center;gap:var(--space-2);display:flex}.lintje-audio-player__speaker.is-current{font-weight:700}.lintje-audio-player__swatch{width:var(--space-3);height:var(--space-3);flex:none}.lintje-audio-player__now{color:var(--color-text-muted);font-weight:400}.lintje-audio-player__wave{justify-content:space-between;align-items:center;gap:var(--space-1);cursor:pointer;touch-action:none;flex:none;height:48px;display:flex;position:relative;overflow:visible}.lintje-audio-player__peak{background:var(--color-border-heavy);pointer-events:none;flex:0 4px;min-height:2px}.lintje-audio-player__peak.is-played{background:var(--color-accent-line)}.lintje-audio-player__bar{transition:height var(--dur-hover) var(--ease-in-motion), margin var(--dur-hover) var(--ease-in-motion);flex:none}.lintje-audio-player__bar:hover{height:var(--space-2);margin-block:calc((6px - var(--space-2)) / 2)}.lintje-audio-player__stretch{pointer-events:none;position:absolute;top:0;bottom:0}.lintje-audio-player__head{width:var(--space-1);height:var(--space-4);background:var(--color-text-primary);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.lintje-audio-player__peak.has-speaker,.lintje-audio-player__stretch,.lintje-audio-player__swatch{background:var(--lintje-speaker)}.lintje-audio-player__peak.has-speaker:not(.is-played),.lintje-audio-player__stretch:not(.is-played){opacity:.4}.lintje-audio-player__cursor{background:var(--color-text-primary);pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.lintje-audio-player__bar .lintje-audio-player__cursor{top:calc(-1 * var(--space-2));bottom:calc(-1 * var(--space-2))}.lintje-audio-player__cursor-time{bottom:calc(100% + var(--space-1));padding:var(--space-1) var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border-popover);box-shadow:var(--shadow-popover);font:var(--text-small);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-text-primary);position:absolute;left:50%;transform:translate(-50%)}.lintje-audio-player__volume{align-items:center;gap:var(--space-1);flex:none;display:flex}.lintje-audio-player__level{width:calc(2 * var(--space-10));background:var(--color-border-default);cursor:pointer;touch-action:none;height:6px;position:relative}.lintje-audio-player__level:before{content:"";inset:calc((100% - var(--h-target)) / 2) 0;position:absolute}.lintje-audio-player__level-fill{background:var(--color-accent-line);pointer-events:none;height:100%}.lintje-audio-player__skeleton,.lintje-audio-player__alert{flex:none}.lintje-audio-player--compact .lintje-audio-player__wave,.lintje-audio-player--compact .lintje-audio-player__bar,.lintje-audio-player--compact .lintje-audio-player__skeleton,.lintje-audio-player--compact .lintje-audio-player__alert{flex:240px;min-width:0}.lintje-audio-player__speed{flex:none}@media (forced-colors:active){.lintje-audio-player__peak,.lintje-audio-player__stretch,.lintje-audio-player__swatch,.lintje-audio-player__head,.lintje-audio-player__cursor,.lintje-audio-player__level,.lintje-audio-player__level-fill{forced-color-adjust:none;background:canvastext}.lintje-audio-player__peak.is-played,.lintje-audio-player__stretch.is-played,.lintje-audio-player__level-fill{background:highlight}}@media screen and (width<=767px){.lintje-audio-player__controls,.lintje-audio-player__transport{gap:0}}`,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 t(this,d),this.observer=null,this.observed=null,this.onRetry=()=>{this.retry(),this.updateComplete.then(()=>this.renderRoot.querySelector(`.lintje-player__play`)?.focus())}}static{this.styles=[o,e(a),e(n),e(T),e(E)]}static{this.properties={peaks:{attribute:!1},segments:{attribute:!1},noLegend:{type:Boolean,attribute:`no-legend`},compact:{type:Boolean,reflect:!0},flush:{type:Boolean,reflect:!0},hoverTime:{state:!0},waveWidth:{state:!0},volume:{state:!0},muted:{state:!0}}}get hasPeaks(){return!!(this.peaks&&this.peaks.length>0)}get colours(){return m(this.segments??[])}disconnectedCallback(){this.observer?.disconnect(),this.observer=null,this.observed=null,super.disconnectedCallback()}updated(e){super.updated(e);let t=this.renderRoot.querySelector(`.lintje-audio-player__wave`);t!==this.observed&&(this.observer?.disconnect(),this.observed=t,t&&typeof ResizeObserver<`u`&&(this.observer=new ResizeObserver(e=>{let t=Math.round(e[0]?.contentRect.width??0);t!==this.waveWidth&&(this.waveWidth=t)}),this.observer.observe(t)))}sliderLabel(){let e=C(this.segments??[],this.heard),t=_(this.heard,this.length);return e?`${t}, ${e}`:t}setVolume(e){this.volume=e,this.muted=e===0,this.applyVolume()}toggleMute(){this.muted&&this.volume===0&&(this.volume=k),this.muted=!this.muted,this.applyVolume()}applyVolume(){let e=this.media;e&&(e.volume=this.volume,e.muted=this.muted)}onWaveMove(e){let t=e.currentTarget.getBoundingClientRect();this.hoverTime=this.ready?v(e.clientX,t.left,t.width,this.length):null,this.onSliderPointerMove(e)}volumeFromPointer(e){let t=e.currentTarget.getBoundingClientRect();this.setVolume(Math.round(v(e.clientX,t.left,t.width,1)*100)/100)}onVolumePointerDown(e){if(e.button!==0)return;let t=e.currentTarget;t.setPointerCapture?.(e.pointerId),t.focus(),this.volumeFromPointer(e)}onVolumePointerMove(e){e.currentTarget.hasPointerCapture?.(e.pointerId)&&this.volumeFromPointer(e)}onVolumeKeydown(e){let t=g(e.key,this.muted?0:this.volume);t!==null&&(e.preventDefault(),this.setVolume(t))}onSpeedMenu(e){e.stopPropagation(),this.setSpeed(Number(e.detail))}renderCursor(){let e=this.hoverTime;if(e===null)return u;let t=C(this.segments??[],e);return c`<span
       class="lintje-audio-player__cursor"
       aria-hidden="true"
-      ${a({ left: `${S(e, this.length) * 100}%` })}
+      ${r({left:`${S(e,this.length)*100}%`})}
       ><span class="lintje-audio-player__cursor-time"
-        >${f(e)}${t ? ` · ${t}` : ""}</span
+        >${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), o = this.segments ?? [], s = this.colours, l = this.length;
-		return c`<div
+    >`}renderWave(){let e=this.peaks??[],t=typeof ResizeObserver<`u`&&this.waveWidth===0,n=this.waveWidth>0?x(this.waveWidth):t?0:e.length,i=p(e,n),a=Math.round(S(this.position,this.length)*i.length),o=this.segments??[],s=this.colours,u=this.length;return c`<div
       class="lintje-audio-player__wave"
       role="slider"
       tabindex="0"
@@ -126,46 +17,19 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       @keydown=${this.onSliderKeydown}
       @pointerdown=${this.onSliderPointerDown}
       @pointermove=${this.onWaveMove}
-      @pointerleave=${() => this.hoverTime = null}
+      @pointerleave=${()=>this.hoverTime=null}
     >
-      ${r.map((e, t) => {
-			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": !!d
-			})}
-          ${a({
-				height: `${Math.max(e, .08) * 100}%`,
-				"--lintje-speaker": O(d)
-			})}
-        ></span>`;
-		})}
+      ${i.map((e,t)=>{let n=C(o,(t+.5)/i.length*u),d=n?s.get(n):void 0;return c`<span
+          class=${l({"lintje-audio-player__peak":!0,"is-played":t<a,"has-speaker":!!d})}
+          ${r({height:`${Math.max(e,.08)*100}%`,"--lintje-speaker":O(d)})}
+        ></span>`})}
       <span
         class="lintje-audio-player__head"
         aria-hidden="true"
-        ${a({ left: `${S(this.position, l) * 100}%` })}
+        ${r({left:`${S(this.position,u)*100}%`})}
       ></span>
       ${this.renderCursor()}
-    </div>`;
-	}
-	renderTrack() {
-		let e = this.length, t = S(this.position, e), n = this.colours, r = h(this.segments ?? [], e).flatMap((e) => {
-			let r = n.get(e.speaker), i = Math.min(Math.max(t, e.from), e.to);
-			return [{
-				from: e.from,
-				to: i,
-				colour: r,
-				played: !0
-			}, {
-				from: i,
-				to: e.to,
-				colour: r,
-				played: !1
-			}].filter((e) => e.to > e.from);
-		});
-		return c`<div
+    </div>`}renderTrack(){let e=this.length,t=S(this.position,e),n=this.colours,i=h(this.segments??[],e).flatMap(e=>{let r=n.get(e.speaker),i=Math.min(Math.max(t,e.from),e.to);return[{from:e.from,to:i,colour:r,played:!0},{from:i,to:e.to,colour:r,played:!1}].filter(e=>e.to>e.from)});return c`<div
       class="lintje-player__bar lintje-audio-player__bar"
       role="slider"
       tabindex="0"
@@ -177,100 +41,53 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       @keydown=${this.onSliderKeydown}
       @pointerdown=${this.onSliderPointerDown}
       @pointermove=${this.onWaveMove}
-      @pointerleave=${() => this.hoverTime = null}
+      @pointerleave=${()=>this.hoverTime=null}
     >
-      ${r.length === 0 ? c`<div
+      ${i.length===0?c`<div
               class="lintje-player__bar-fill"
-              ${a({ width: `${t * 100}%` })}
-            ></div>` : r.map((e) => c`<span
-                  class=${u({
-			"lintje-audio-player__stretch": !0,
-			"is-played": e.played
-		})}
-                  ${a({
-			left: `${e.from * 100}%`,
-			width: `${(e.to - e.from) * 100}%`,
-			"--lintje-speaker": O(e.colour)
-		})}
+              ${r({width:`${t*100}%`})}
+            ></div>`:i.map(e=>c`<span
+                  class=${l({"lintje-audio-player__stretch":!0,"is-played":e.played})}
+                  ${r({left:`${e.from*100}%`,width:`${(e.to-e.from)*100}%`,"--lintje-speaker":O(e.colour)})}
                 ></span>`)}
       <span
         class="lintje-audio-player__head"
         aria-hidden="true"
-        ${a({ left: `${t * 100}%` })}
+        ${r({left:`${t*100}%`})}
       ></span>
       ${this.renderCursor()}
-    </div>`;
-	}
-	renderSlider() {
-		return this.failed ? c`<lintje-announcement class="lintje-audio-player__alert" .data=${D}>
+    </div>`}renderSlider(){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() : c`<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 o;
-		let t = C(this.segments ?? [], this.position);
-		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
-		})}
+        height=${this.hasPeaks?`48`:`6`}
+      ></lintje-skeleton>`}renderLegend(){let e=this.colours;if(e.size===0||this.noLegend)return u;let t=C(this.segments??[],this.position);return c`<ul class="lintje-audio-player__legend" aria-label="Sprekers">
+      ${[...e].map(([e,n])=>c`<li
+            class=${l({"lintje-audio-player__speaker":!0,"is-current":e===t})}
           >
             <span
               class="lintje-audio-player__swatch"
               aria-hidden="true"
-              ${a({ "--lintje-speaker": O(n) })}
+              ${r({"--lintje-speaker":O(n)})}
             ></span>
             <span>${e}</span>
-            ${e === t ? c`<span class="lintje-audio-player__now">spreekt nu</span>` : o}
+            ${e===t?c`<span class="lintje-audio-player__now">spreekt nu</span>`:u}
           </li>`)}
-    </ul>`;
-	}
-	renderSkip(e) {
-		let t = `15 seconden ${e < 0 ? "terug" : "vooruit"}`, n = !this.ready;
-		return c`<button
+    </ul>`}renderSkip(e){let t=`15 seconden ${e<0?`terug`:`vooruit`}`,n=!this.ready;return c`<button
       type="button"
-      class=${u({
-			"lintje-icon-button": !0,
-			"lintje-icon-button--flat": !0,
-			"lintje-player__icon-button": !0,
-			"lintje-audio-player__skip": !0,
-			"is-disabled": n
-		})}
+      class=${l({"lintje-icon-button":!0,"lintje-icon-button--flat":!0,"lintje-player__icon-button":!0,"lintje-audio-player__skip":!0,"is-disabled":n})}
       aria-label=${t}
       title=${t}
-      aria-disabled=${n ? "true" : o}
-      @click=${() => {
-			n || this.skip(e * 15);
-		}}
+      aria-disabled=${n?`true`:u}
+      @click=${()=>{n||this.skip(e*15)}}
     >
-      ${d("functioneel-dubbel-delta-rechts", {
-			size: 20,
-			flip: e < 0 ? "horizontal" : void 0
-		})}
+      ${s(`functioneel-dubbel-delta-rechts`,{size:20,flip:e<0?`horizontal`:void 0})}
       <span class="lintje-audio-player__step" aria-hidden="true">${15}</span>
-    </button>`;
-	}
-	renderTransport() {
-		return c`<div class="lintje-audio-player__transport">
+    </button>`}renderTransport(){return c`<div class="lintje-audio-player__transport">
       ${this.renderSkip(-1)} ${this.renderPlay()} ${this.renderSkip(1)}
-    </div>`;
-	}
-	renderMute() {
-		return this.renderIconButton(this.muted ? "functioneel-geluid-uit" : "functioneel-geluid-aan", "Geluid dempen", () => this.toggleMute(), {
-			disabled: !1,
-			pressed: this.muted
-		});
-	}
-	renderVolume() {
-		let e = this.muted ? 0 : this.volume, t = Math.round(e * 100);
-		return c`<div class="lintje-audio-player__volume">
+    </div>`}renderMute(){return this.renderIconButton(this.muted?`functioneel-geluid-uit`:`functioneel-geluid-aan`,`Geluid dempen`,()=>this.toggleMute(),{disabled:!1,pressed:this.muted})}renderVolume(){let e=this.muted?0:this.volume,t=Math.round(e*100);return c`<div class="lintje-audio-player__volume">
       ${this.renderMute()}
       <div
         class="lintje-audio-player__level"
@@ -280,74 +97,43 @@ var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow=${t}
-        aria-valuetext=${this.muted ? "Gedempt" : `${t} procent`}
+        aria-valuetext=${this.muted?`Gedempt`:`${t} procent`}
         @keydown=${this.onVolumeKeydown}
         @pointerdown=${this.onVolumePointerDown}
         @pointermove=${this.onVolumePointerMove}
       >
-        <div class="lintje-audio-player__level-fill" ${a({ width: `${t}%` })}></div>
+        <div class="lintje-audio-player__level-fill" ${r({width:`${t}%`})}></div>
       </div>
-    </div>`;
-	}
-	renderSpeed(e = !1) {
-		let t = y.map((e) => ({
-			value: String(e.value),
-			label: e.label,
-			checked: e.value === this.speed,
-			radio: !0
-		})), n = b(this.speed);
-		return c`<lintje-menu-button
+    </div>`}renderSpeed(e=!1){let t=y.map(e=>({value:String(e.value),label:e.label,checked:e.value===this.speed,radio:!0})),n=b(this.speed);return c`<lintje-menu-button
       class="lintje-audio-player__speed"
       variant="flat"
       placement="bottom-end"
-      leading-icon=${e ? "" : "multimedia-player-vooruitspoelen"}
+      leading-icon=${e?``:`multimedia-player-vooruitspoelen`}
       label=${n}
       accessible-label=${`Afspeelsnelheid ${n}`}
       ?disabled=${!this.ready}
       .items=${t}
       @lintje-action=${this.onSpeedMenu}
-    ></lintje-menu-button>`;
-	}
-	renderTimes() {
-		return c`<div class="lintje-audio-player__times">
+    ></lintje-menu-button>`}renderTimes(){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 c`${this.renderLegend()} ${this.renderSlider()}
-      ${e && !this.failed ? this.renderTimes() : o}
+    </div>`}renderFull(e){return c`${this.renderLegend()} ${this.renderSlider()}
+      ${e&&!this.failed?this.renderTimes():u}
       <div class="lintje-audio-player__controls">
         <div class="lintje-audio-player__start">
-          ${e ? this.renderMute() : this.renderTime(!0)}
+          ${e?this.renderMute():this.renderTime(!0)}
         </div>
         ${this.renderTransport()}
         <div class="lintje-audio-player__end">
-          ${e ? o : this.renderVolume()} ${this.renderSpeed(e)}
+          ${e?u:this.renderVolume()} ${this.renderSpeed(e)}
         </div>
-      </div>`;
-	}
-	renderCompact() {
-		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 c`<div
-      class=${u({
-			"lintje-audio-player": !0,
-			"lintje-audio-player--compact": t,
-			"lintje-audio-player--flush": this.flush
-		})}
+      </div>`}renderCompact(){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 c`<div
+      class=${l({"lintje-audio-player":!0,"lintje-audio-player--compact":t,"lintje-audio-player--flush":this.flush})}
       role="group"
-      aria-label=${this.name || "Opname"}
+      aria-label=${this.name||`Opname`}
       @keydown=${this.onGroupKeydown}
     >
-      <audio class="lintje-player__media" preload="metadata" src=${this.src || o}></audio>
-      ${t ? this.renderCompact() : this.renderFull(e)}
-    </div>`;
-	}
-};
-r("lintje-audio-player", A);
-//#endregion
-export { A as LintjeAudioPlayer };
+      <audio class="lintje-player__media" preload="metadata" src=${this.src||u}></audio>
+      ${t?this.renderCompact():this.renderFull(e)}
+    </div>`}};i(`lintje-audio-player`,A);export{A as LintjeAudioPlayer};

package/dist-elements/tag/badge.js

@@ -1 +1 @@
-export { it as LintjeBadge, at as badgeStyles, ot as renderBadge } from "../chunks/base-CVKIPSLx.js";
+export{ot as LintjeBadge,st as badgeStyles,ct as renderBadge}from"../chunks/base-DuuwEY22.js";

package/dist-elements/tag/breadcrumbs.js

@@ -1,90 +1,25 @@
-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-CVKIPSLx.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;
-function f(e) {
-	return e.length <= 4 ? {
-		head: e,
-		folded: [],
-		tail: []
-	} : {
-		head: e.slice(0, 1),
-		folded: e.slice(1, -2),
-		tail: e.slice(-2)
-	};
-}
-var p = class extends n {
-	constructor(...t) {
-		super(...t), this.items = [], this.label = "Kruimelpad", this.#e = new r(this, e);
-	}
-	static {
-		this.styles = [s, a(u)];
-	}
-	static {
-		this.properties = {
-			items: { attribute: !1 },
-			label: { type: String }
-		};
-	}
-	#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>`;
-		if (!e.href) return c`<span class="lintje-breadcrumbs__text">${e.label}</span>`;
-		let n = e.href;
-		return c`<a
+import{$t as e,Jt as t,U as n,Xt as r,Zt as i,dt as a,ft as o,in as s,nn as c,qt as l}from"../chunks/base-DuuwEY22.js";import"./menu-button.js";var u=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-breadcrumbs{font:var(--text-small);color:var(--color-text-muted)}.lintje-breadcrumbs__list{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.lintje-breadcrumbs__item{align-items:center;gap:var(--space-2);min-width:0;display:inline-flex}.lintje-breadcrumbs__link{color:var(--color-link);transition:color var(--dur-hover) var(--ease-in-motion);text-decoration:underline;position:relative}.lintje-breadcrumbs__link:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-breadcrumbs__link:hover{color:var(--color-link-hover)}.lintje-breadcrumbs__current{color:var(--color-text-primary)}.lintje-breadcrumbs__back{align-items:center;gap:var(--space-1);min-height:var(--h-touch);font:var(--text-ui);color:var(--color-link);font-weight:700;text-decoration:none;display:inline-flex}.lintje-breadcrumbs__back:hover{color:var(--color-link-hover)}`,d=4;function f(e){return e.length<=4?{head:e,folded:[],tail:[]}:{head:e.slice(0,1),folded:e.slice(1,-2),tail:e.slice(-2)}}var p=class extends r{constructor(...e){super(...e),this.items=[],this.label=`Kruimelpad`,this.#e=new t(this,l)}static{this.styles=[a,e(u)]}static{this.properties={items:{attribute:!1},label:{type:String}}}#e;follow(e,t){n(e)&&this.followLink(t,e)}renderCrumb(e,t){if(t)return s`<span class="lintje-breadcrumbs__current" aria-current="page">${e.label}</span>`;if(!e.href)return s`<span class="lintje-breadcrumbs__text">${e.label}</span>`;let n=e.href;return s`<a
       class="lintje-breadcrumbs__link"
       href=${n}
-      @click=${(e) => this.follow(e, n)}
+      @click=${e=>this.follow(e,n)}
       >${e.label}</a
-    >`;
-	}
-	renderMenu(e) {
-		let t = e.map((e, t) => ({
-			value: String(t),
-			label: e.label,
-			href: e.href,
-			disabled: !e.href
-		}));
-		return c`<lintje-menu-button
+    >`}renderMenu(e){let t=e.map((e,t)=>({value:String(t),label:e.label,href:e.href,disabled:!e.href}));return s`<lintje-menu-button
       variant="ellipsis"
       label="Tussenliggende niveaus tonen"
       .items=${t}
-      @lintje-action=${(e) => e.stopPropagation()}
-    ></lintje-menu-button>`;
-	}
-	renderPhone() {
-		let e = this.items.at(-2);
-		if (!e?.href) return o;
-		let t = e.href;
-		return c`<nav class="lintje-breadcrumbs lintje-breadcrumbs--back" aria-label=${this.label}>
+      @lintje-action=${e=>e.stopPropagation()}
+    ></lintje-menu-button>`}renderPhone(){let e=this.items.at(-2);if(!e?.href)return c;let t=e.href;return s`<nav class="lintje-breadcrumbs lintje-breadcrumbs--back" aria-label=${this.label}>
       <a
         class="lintje-breadcrumbs__back"
         href=${t}
-        @click=${(e) => this.follow(e, t)}
+        @click=${e=>this.follow(e,t)}
       >
-        ${l("functioneel-delta-rechts", {
-			size: 16,
-			flip: "horizontal"
-		})}${e.label}
+        ${o(`functioneel-delta-rechts`,{size:16,flip:`horizontal`})}${e.label}
       </a>
-    </nav>`;
-	}
-	render() {
-		if (!this.items.length) return o;
-		if (this.#e.matches) return this.renderPhone();
-		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}>
+    </nav>`}render(){if(!this.items.length)return c;if(this.#e.matches)return this.renderPhone();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)))),s`<nav class="lintje-breadcrumbs" aria-label=${this.label}>
       <ol class="lintje-breadcrumbs__list">
-        ${i.map((e, t) => c`<li class="lintje-breadcrumbs__item">
-              ${t ? c`<span class="lintje-breadcrumbs__separator" aria-hidden="true">›</span>` : o}${e}
+        ${i.map((e,t)=>s`<li class="lintje-breadcrumbs__item">
+              ${t?s`<span class="lintje-breadcrumbs__separator" aria-hidden="true">›</span>`:c}${e}
             </li>`)}
       </ol>
-    </nav>`;
-	}
-};
-i("lintje-breadcrumbs", p);
-//#endregion
-export { p as LintjeBreadcrumbs, d as MAX_LEVELS, f as trail };
+    </nav>`}};i(`lintje-breadcrumbs`,p);export{p as LintjeBreadcrumbs,d as MAX_LEVELS,f as trail};

package/dist-elements/tag/button.js

@@ -1 +1 @@
-export { tt as LintjeButton } from "../chunks/base-CVKIPSLx.js";
+export{rt as LintjeButton}from"../chunks/base-DuuwEY22.js";

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

@@ -1,88 +1,19 @@
-import { Jt as e, Yt as t, Zt as n, bt as r, en as i, nn as a } from "../chunks/base-CVKIPSLx.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 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;
-	}
-	static {
-		this.styles = n(o);
-	}
-	static {
-		this.properties = {
-			items: { attribute: !1 },
-			label: { type: String },
-			layout: {
-				type: String,
-				reflect: !0
-			},
-			headingLevel: {
-				type: Number,
-				attribute: "heading-level"
-			},
-			compact: {
-				type: Boolean,
-				reflect: !0
-			},
-			loading: {
-				type: Boolean,
-				reflect: !0
-			},
-			loadingCount: {
-				type: Number,
-				attribute: "loading-count"
-			},
-			maxColumns: {
-				type: Number,
-				attribute: "max-columns"
-			},
-			emptyText: {
-				type: String,
-				attribute: "empty-text"
-			},
-			spoken: { state: !0 }
-		};
-	}
-	disconnectedCallback() {
-		cancelAnimationFrame(this.fillFrame), this.fillFrame = 0, super.disconnectedCallback();
-	}
-	updated(e) {
-		if (super.updated(e), !e.has("loading")) return;
-		let t = e.get("loading");
-		if (!this.loading && !t) return;
-		let n = this.items.length, r = this.loading ? "Gegevens laden…" : n ? `Gegevens geladen: ${n} ${n === 1 ? "item" : "items"}.` : `Gegevens geladen. ${this.emptyText}`;
-		cancelAnimationFrame(this.fillFrame), this.fillFrame = requestAnimationFrame(() => {
-			this.fillFrame = 0, this.spoken = r;
-		});
-	}
-	render() {
-		return a`<span class="visually-hidden" role="status">${this.spoken}</span>${this.renderBody()}`;
-	}
-	renderBody() {
-		if (!this.loading && !this.items.length) return a`<lintje-empty-state compact text=${this.emptyText}
+import{$t as e,St as t,Xt as n,Zt as r,in as i,nn as a}from"../chunks/base-DuuwEY22.js";import{t as o}from"../chunks/live-message-CYZ-Ch7D.js";import"./empty-state.js";import"./card.js";var s=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-card-list{--card-list-min:var(--w-card);grid-template-columns:repeat(auto-fill, minmax(max(min(100%, var(--card-list-min)), calc((100% - (var(--card-list-columns) - 1) * var(--grid-gutter)) / var(--card-list-columns))), 1fr));gap:var(--grid-gutter);margin:0;padding:0;list-style:none;display:grid}:host([layout=horizontal]) .lintje-card-list{--card-list-min:var(--w-card-wide)}.lintje-card-list__item{min-width:0}@media screen and (width<=767px){.lintje-card-list{gap:var(--space-4);grid-template-columns:minmax(0,1fr)}}`,c=class extends n{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.#e=new o(this)}static{this.styles=e(s)}static{this.properties={items:{attribute:!1},label:{type:String},layout:{type:String,reflect:!0},headingLevel:{type:Number,attribute:`heading-level`},compact:{type:Boolean,reflect:!0},loading:{type:Boolean,reflect:!0},loadingCount:{type:Number,attribute:`loading-count`},maxColumns:{type:Number,attribute:`max-columns`},emptyText:{type:String,attribute:`empty-text`}}}#e;willUpdate(e){if(super.willUpdate(e),!e.has(`loading`))return;let t=e.get(`loading`);if(!this.loading&&!t)return;let n=this.items.length,r=this.loading?`Gegevens laden…`:n?`Gegevens geladen: ${n} ${n===1?`item`:`items`}.`:`Gegevens geladen. ${this.emptyText}`;this.#e.say(r)}render(){return i`<span class="visually-hidden" role="status">${this.#e.text}</span>${this.renderBody()}`}renderBody(){if(!this.loading&&!this.items.length)return i`<lintje-empty-state compact text=${this.emptyText}
         ><slot name="empty"></slot
-      ></lintje-empty-state>`;
-		let e = this.loading ? Array.from({ length: this.loadingCount }, () => a`<li class="lintje-card-list__item" aria-hidden="true">
+      ></lintje-empty-state>`;let e=this.loading?Array.from({length:this.loadingCount},()=>i`<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) => a`<li class="lintje-card-list__item">
+          </li>`):this.items.map(e=>i`<li class="lintje-card-list__item">
             <lintje-card
               .data=${e}
               layout=${this.layout}
               heading-level=${this.headingLevel}
               ?compact=${this.compact}
             ></lintje-card>
-          </li>`), t = Math.max(1, Math.min(this.maxColumns, this.layout === "horizontal" ? 2 : this.maxColumns));
-		return a`<ul
+          </li>`),n=Math.max(1,Math.min(this.maxColumns,this.layout===`horizontal`?2:this.maxColumns));return i`<ul
       class="lintje-card-list"
-      aria-label=${this.label ?? i}
-      aria-busy=${this.loading ? "true" : i}
-      ${r({ "--card-list-columns": t })}
+      aria-label=${this.label??a}
+      aria-busy=${this.loading?`true`:a}
+      ${t({"--card-list-columns":n})}
     >
       ${e}
-    </ul>`;
-	}
-};
-t("lintje-card-list", s);
-//#endregion
-export { s as LintjeCardList };
+    </ul>`}};r(`lintje-card-list`,c);export{c as LintjeCardList};