lintje 0.2.0 → 0.3.0

package/dist-elements/chunks/{player-DXOZEyEy.js → player-B8QXJ0Z5.js}

@@ -1,4 +1,4 @@
-import { Gt as e, U as t, Z as n, et as r, qt as i, ut as a, zt as o } from "./base-Bg-IFOPG.js";
+import { Jt as e, Q as t, bt as n, en as r, nn as i, st as a, ut as o } from "./base-CbmWxUig.js";
 import { a as s, h as c, i as l, l as u, m as d, s as f, t as p } from "./playback-DZJ_NMXv.js";
 //#region src/components/content/audio-player/player.ts
 var m = /* @__PURE__ */ new Set([
@@ -7,7 +7,7 @@ var m = /* @__PURE__ */ new Set([
 	"INPUT",
 	"TEXTAREA",
 	"A"
-]), h = class extends o {
+]), h = class extends e {
 	constructor(...e) {
 		super(...e), this.src = "", this.name = "", this.position = 0, this.heard = 0, this.playing = !1, this.ready = !1, this.failed = !1, this.mediaDuration = NaN, this.speed = 1, this.pendingSeek = null, this.limit = new p(), this.listening = null, this.onMetadata = () => {
 			let e = this.media;
@@ -132,41 +132,41 @@ var m = /* @__PURE__ */ new Set([
 		this.ready && t.hasPointerCapture?.(e.pointerId) && this.seekFromPointer(e);
 	}
 	renderPlay() {
-		let t = this.playing ? "Pauzeren" : "Afspelen", a = !this.ready;
+		let e = this.playing ? "Pauzeren" : "Afspelen", t = !this.ready;
 		return i`<button
       type="button"
-      class=${n({
+      class=${a({
 			"lintje-button": !0,
 			"lintje-button--primary": !0,
 			"lintje-player__play": !0,
-			"is-disabled": a
+			"is-disabled": t
 		})}
-      aria-label=${t}
-      title=${t}
-      aria-disabled=${a ? "true" : e}
+      aria-label=${e}
+      title=${e}
+      aria-disabled=${t ? "true" : r}
       @click=${() => {
-			a || this.toggle();
+			t || this.toggle();
 		}}
     >
-      ${r(this.playing ? "multimedia-player-pauze" : "multimedia-player-afspelen", { size: 20 })}
+      ${o(this.playing ? "multimedia-player-pauze" : "multimedia-player-afspelen", { size: 20 })}
     </button>`;
 	}
-	renderIconButton(t, n, a, o = {}) {
-		let s = o.disabled ?? !this.ready;
+	renderIconButton(e, t, n, a = {}) {
+		let s = a.disabled ?? !this.ready;
 		return i`<button
       type="button"
-      class="lintje-icon-button lintje-icon-button--flat lintje-player__icon-button ${s ? "is-disabled" : ""} ${o.className ?? ""}"
-      aria-label=${n}
-      title=${n}
-      aria-pressed=${o.pressed === void 0 ? e : String(o.pressed)}
-      aria-disabled=${s ? "true" : e}
+      class="lintje-icon-button lintje-icon-button--flat lintje-player__icon-button ${s ? "is-disabled" : ""} ${a.className ?? ""}"
+      aria-label=${t}
+      title=${t}
+      aria-pressed=${a.pressed === void 0 ? r : String(a.pressed)}
+      aria-disabled=${s ? "true" : r}
       @click=${() => {
-			s || a();
+			s || n();
 		}}
     >
-      ${r(t, {
+      ${o(e, {
 			size: 20,
-			flip: o.flip ? "horizontal" : void 0
+			flip: a.flip ? "horizontal" : void 0
 		})}
     </button>`;
 	}
@@ -174,9 +174,9 @@ var m = /* @__PURE__ */ new Set([
 		return c(this.heard, this.length);
 	}
 	renderBar() {
-		let t = this.length, r = f(this.position, t) * 100;
+		let e = this.length, t = f(this.position, e) * 100;
 		return i`<div
-      class=${n({
+      class=${a({
 			"lintje-player__bar": !0,
 			"is-disabled": !this.ready
 		})}
@@ -184,16 +184,16 @@ var m = /* @__PURE__ */ new Set([
       tabindex=${this.ready ? "0" : "-1"}
       aria-label="Positie"
       aria-valuemin="0"
-      aria-valuemax=${Math.round(t)}
+      aria-valuemax=${Math.round(e)}
       aria-valuenow=${Math.round(this.heard)}
       aria-valuetext=${this.sliderLabel()}
-      aria-disabled=${this.ready ? e : "true"}
+      aria-disabled=${this.ready ? r : "true"}
       @keydown=${this.onSliderKeydown}
       @pointerdown=${this.onSliderPointerDown}
       @pointermove=${this.onSliderPointerMove}
     >
-      <div class="lintje-player__bar-fill" ${a({ width: `${r}%` })}></div>
-      <div class="lintje-player__bar-handle" ${a({ left: `${r}%` })}></div>
+      <div class="lintje-player__bar-fill" ${n({ width: `${t}%` })}></div>
+      <div class="lintje-player__bar-handle" ${n({ left: `${t}%` })}></div>
     </div>`;
 	}
 	renderTime(e) {

package/dist-elements/chunks/{sentence-BI3lwEuT.js → sentence-B19AyZBS.js}

@@ -1,11 +1,11 @@
-import { Gt as e, et as t, qt as n } from "./base-Bg-IFOPG.js";
+import { en as e, nn as t, ut as n } from "./base-CbmWxUig.js";
 //#region src/components/filters/shared/sentence.ts
 function r(r, i = !0) {
-	return n`${i ? t("lichaam-oog", {
+	return t`${i ? n("lichaam-oog", {
 		size: 16,
 		className: "lintje-filter-summary__icon"
 	}) : e}<span class="lintje-filter-summary__text"
-      >${r.map((e) => e.emphasis ? n`<b>${e.text}</b>` : n`<span>${e.text}</span>`)}</span
+      >${r.map((e) => e.emphasis ? t`<b>${e.text}</b>` : t`<span>${e.text}</span>`)}</span
     >`;
 }
 function i(e) {

package/dist-elements/chunks/{stagger-qGD3wmhg.js → stagger-BHoOgy0g.js}

@@ -1,4 +1,4 @@
-import { A as e, Gt as t, Jt as n, a as r, ht as i, l as a, mt as o, n as s, pt as c, qt as l, s as u, t as d, u as f, ut as p } from "./base-Bg-IFOPG.js";
+import { Ct as e, I as t, Tt as n, a as r, bt as i, en as a, l as o, n as s, nn as c, rn as l, s as u, t as d, u as f, wt as p } from "./base-CbmWxUig.js";
 //#region src/components/shared/charts/shared/scale.ts
 var m = {
 	width: 900,
@@ -9,17 +9,17 @@ var m = {
 	bottom: 28
 }, h = .25, g = 16, _ = 10, v = .3;
 function y(e, t, { fontFamily: n = "" } = {}) {
-	let r = Math.min(320, Math.round(t * v)), i = Math.ceil(Math.max(0, ...e.map((e) => a(e, n)))), o = Math.min(r, i);
+	let r = Math.min(320, Math.round(t * v)), i = Math.ceil(Math.max(0, ...e.map((e) => o(e, n)))), a = Math.min(r, i);
 	return {
-		labelEnd: o,
-		barStart: o + _,
-		fit: (e) => f(e, o, n)
+		labelEnd: a,
+		barStart: a + _,
+		fit: (e) => f(e, a, n)
 	};
 }
 function b(e, t, { minimum: n = g, fontFamily: i = "" } = {}) {
-	let o = Math.min(96, Math.round(t * h)), s = (t) => Math.ceil(Math.max(0, ...e.map((e) => a(t(e), i))) + 8), c = u, l = s(c);
-	return l > o && (c = r, l = s(c)), {
-		width: Math.min(o, Math.max(n, l)),
+	let a = Math.min(96, Math.round(t * h)), s = (t) => Math.ceil(Math.max(0, ...e.map((e) => o(t(e), i))) + 8), c = u, l = s(c);
+	return l > a && (c = r, l = s(c)), {
+		width: Math.min(a, Math.max(n, l)),
 		format: c
 	};
 }
@@ -133,13 +133,13 @@ var E = .35, D = 120, O = Array.from({ length: 21 }, (e, t) => t / 20), k = 0, A
 		this.hiddenSeries = this.hiddenSeries.includes(e) ? this.hiddenSeries.filter((t) => t !== e) : [...this.hiddenSeries, e], this.requestUpdate();
 	}
 	read() {
-		let t = this.element;
-		if (!t) return;
-		this.measuring.width && (this.width = Math.max(160, Math.round(t.getBoundingClientRect().width)));
+		let e = this.element;
+		if (!e) return;
+		this.measuring.width && (this.width = Math.max(160, Math.round(e.getBoundingClientRect().width)));
 		let n = this.measuring.height;
 		if (typeof n == "number") this.height = n;
 		else if (typeof n == "string") {
-			let r = Math.round(e(t, n, 0));
+			let r = Math.round(t(e, n, 0));
 			r && (this.height = this.measuring.fit ? Math.max(D, r - this.extras()) : r);
 		}
 	}
@@ -297,32 +297,32 @@ function K(e) {
 }
 //#endregion
 //#region src/components/shared/charts/shared/axes.ts
-function q(e, r, i) {
-	let a = G(r);
-	return n`<path d=${V(e, 4.5, i, i)} fill="currentColor"
-                   stroke=${a ?? t} stroke-width=${a ? 1 : t} />`;
+function q(e, t, n) {
+	let r = G(t);
+	return l`<path d=${V(e, 4.5, n, n)} fill="currentColor"
+                   stroke=${r ?? a} stroke-width=${r ? 1 : a} />`;
 }
 function J({ items: e, onToggle: t, position: n = "top" }) {
-	let r = (e) => l`
-    ${e.symbol && e.shape === "point" ? l`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
-                    ${p({ color: e.color ?? "var(--color-chart-default)" })}
+	let r = (e) => c`
+    ${e.symbol && e.shape === "point" ? c`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
+                    ${i({ color: e.color ?? "var(--color-chart-default)" })}
                     aria-hidden="true" focusable="false">
             ${q(e.symbol, e.color, 7)}
-          </svg>` : e.symbol ? l`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
-                    ${p({ color: e.color ?? "var(--color-chart-default)" })}
+          </svg>` : e.symbol ? c`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
+                    ${i({ color: e.color ?? "var(--color-chart-default)" })}
                     aria-hidden="true" focusable="false">
             <line x1="0" x2="14" y1="7" y2="7" stroke="currentColor" stroke-width="3" />
             <path d=${V(e.symbol, 4, 7, 7)} fill="currentColor" />
-          </svg>` : l`<span class="lintje-legend__marker lintje-legend__marker--${e.shape ?? "square"}"
-                     ${p({ color: e.color ?? "var(--color-chart-default)" })}
+          </svg>` : c`<span class="lintje-legend__marker lintje-legend__marker--${e.shape ?? "square"}"
+                     ${i({ color: e.color ?? "var(--color-chart-default)" })}
                      aria-hidden="true"></span>`}
     <span class="lintje-legend__label">${e.label}</span>
   `;
-	return l`
+	return c`
     <ul class="lintje-legend lintje-legend--${n}">
-      ${e.map((e) => l`
+      ${e.map((e) => c`
         <li class="lintje-legend__item ${e.hidden ? "is-hidden" : ""}">
-          ${t && !e.fixed ? l`<button type="button" class="lintje-legend__button"
+          ${t && !e.fixed ? c`<button type="button" class="lintje-legend__button"
                            @click=${() => t(e.key ?? e.label)}
                            aria-pressed=${!e.hidden}>${r(e)}</button>` : r(e)}
         </li>
@@ -334,7 +334,7 @@ function Y(e) {
 	return e ? "group" : "img";
 }
 function X(e) {
-	return n`
+	return l`
     <filter id="focus-${e}" filterUnits="userSpaceOnUse" x="-10%" y="-10%" width="120%" height="120%"
             color-interpolation-filters="sRGB">
       <feComponentTransfer in="SourceAlpha" result="shape"><feFuncA type="linear" slope="100" /></feComponentTransfer>
@@ -355,7 +355,7 @@ var ae = 8, oe = 20;
 function Q(e, t = "") {
 	if (e.length < 2) return e;
 	let n = e.map((e) => {
-		let n = a(e.label, t), r = e.anchor === "end" ? e.x - n : e.anchor === "start" ? e.x : e.x - n / 2;
+		let n = o(e.label, t), r = e.anchor === "end" ? e.x - n : e.anchor === "start" ? e.x : e.x - n / 2;
 		return {
 			left: r,
 			right: r + n
@@ -370,10 +370,10 @@ function Q(e, t = "") {
 	for (; i < e.length && !r(i);) i += 1;
 	return i === 1 ? e : e.filter((e, t) => t % i === 0);
 }
-function se({ area: e = m, ticks: r, max: i, axisTitle: a, xLabels: o, xTitle: s, description: c, defs: d, zeroLine: f = !0, formatTick: h = u, id: g, height: _, fontFamily: v, interactive: y, keys: b }, x) {
-	return l`
+function se({ area: e = m, ticks: t, max: n, axisTitle: r, xLabels: o, xTitle: s, description: d, defs: f, zeroLine: p = !0, formatTick: h = u, id: g, height: _, fontFamily: v, interactive: y, keys: b }, x) {
+	return c`
     <figure class="lintje-chart">
-      ${a ? l`<figcaption class="lintje-chart__axis-title">${a}</figcaption>` : t}
+      ${r ? c`<figcaption class="lintje-chart__axis-title">${r}</figcaption>` : a}
       <!-- The viewBox is set 1:1 to the measured pixels, so 12 px axis text really is
            12 px — however narrow the tile is. -->
       <svg
@@ -381,35 +381,35 @@ function se({ area: e = m, ticks: r, max: i, axisTitle: a, xLabels: o, xTitle: s
         class="lintje-chart__svg"
         width=${e.width}
         height=${e.height}
-        ${p({
+        ${i({
 		height: `${_ ?? e.height}px`,
 		...Z(g)
 	})}
         role=${Y(y)}
         aria-labelledby="${g}-desc"
-        tabindex=${b ? 0 : t}
+        tabindex=${b ? 0 : a}
         @keydown=${b?.keydown}
         @focus=${b?.focus}
         @blur=${b?.blur}
       >
-        <desc id="${g}-desc">${c}</desc>
+        <desc id="${g}-desc">${d}</desc>
         <defs>
           <pattern id="hatch-${g}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
             <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
           </pattern>
           ${X(g)}
-          ${d}
+          ${f}
         </defs>
 
         <!-- Grid + axis labels -->
-        ${r.map((t) => {
-		let r = C(t, i, e), a = t === 0;
-		return n`
+        ${t.map((t) => {
+		let r = C(t, n, e), i = t === 0;
+		return l`
             <g>
               <line
                 x1=${e.left} x2=${e.width - e.right} y1=${r} y2=${r}
-                stroke=${a && f ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
-                stroke-width=${a && f ? 1.5 : 1} />
+                stroke=${i && p ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
+                stroke-width=${i && p ? 1.5 : 1} />
               <text x=${e.left - 8} y=${r + 4} text-anchor="end" class="lintje-chart__axis-label">
                 ${h(t)}
               </text>
@@ -420,70 +420,76 @@ function se({ area: e = m, ticks: r, max: i, axisTitle: a, xLabels: o, xTitle: s
         ${x}
 
         <!-- x-axis labels -->
-        ${Q(o ?? [], v).map((t) => n`
+        ${Q(o ?? [], v).map((t) => l`
           <text x=${t.x} y=${e.height - e.bottom + oe} text-anchor=${t.anchor ?? "middle"} class="lintje-chart__axis-label">
             ${t.label}
           </text>
         `)}
-        ${s ? n`<text x=${e.width - e.right} y=${e.height - e.bottom + 40} text-anchor="end"
-                      class="lintje-chart__x-title">${s}</text>` : t}
+        ${s ? l`<text x=${e.width - e.right} y=${e.height - e.bottom + 40} text-anchor="end"
+                      class="lintje-chart__x-title">${s}</text>` : a}
       </svg>
     </figure>
   `;
 }
-function ce({ area: e = m, index: r, count: i, label: a, lastValue: o, pendingHours: s }) {
-	let c = e.left + x(e) * r / (i - 1), l = s > 6, u = e.width - e.right - c, d = u > 140;
-	return l ? n`
+function ce({ area: e = m, index: t, count: n, label: r, lastValue: i, pendingHours: o }) {
+	let s = e.left + x(e) * t / (n - 1), c = o > 6, u = e.width - e.right - s, d = u > 140;
+	return c ? l`
     <g>
-      <line x1=${c} x2=${c} y1=${e.top} y2=${e.height - e.bottom}
+      <line x1=${s} x2=${s} y1=${e.top} y2=${e.height - e.bottom}
             stroke="var(--color-text-primary)" stroke-width="1.5" stroke-dasharray="4 3" />
-      <text x=${d ? c + 6 : c - 6} y=${e.top + 12}
+      <text x=${d ? s + 6 : s - 6} y=${e.top + 12}
             text-anchor=${d ? "start" : "end"} class="lintje-chart__as-of-label">
-        ${a}
+        ${r}
       </text>
-      ${o ? n`<text x=${d ? c + 6 : c - 6} y=${e.top + 26}
-                    text-anchor=${d ? "start" : "end"} class="lintje-chart__axis-label">${o}</text>` : t}
-      <text x=${c + u / 2} y=${e.top + (e.height - e.top - e.bottom) / 2}
+      ${i ? l`<text x=${d ? s + 6 : s - 6} y=${e.top + 26}
+                    text-anchor=${d ? "start" : "end"} class="lintje-chart__axis-label">${i}</text>` : a}
+      <text x=${s + u / 2} y=${e.top + (e.height - e.top - e.bottom) / 2}
             text-anchor="middle" class="lintje-chart__as-of-note">
-        nog geen gegevens · ${s} ${s === 1 ? "uur" : "uren"} volgen
+        nog geen gegevens · ${o} ${o === 1 ? "uur" : "uren"} volgen
       </text>
     </g>
-  ` : t;
+  ` : a;
 }
-var le = c(class extends o {
+var le = e(class extends p {
 	constructor(e) {
-		if (super(e), e.type !== i.ELEMENT) throw Error("placeTooltip only works on an element");
+		if (super(e), e.type !== n.ELEMENT) throw Error("placeTooltip only works on an element");
 	}
 	render(e) {
-		return t;
+		return a;
 	}
-	update(e, [n]) {
-		let r = e.element;
-		return r.style.top = `${Math.max(0, n.y - 12)}px`, requestAnimationFrame(() => {
-			if (!r.isConnected) return;
-			let e = r.parentElement?.clientWidth ?? Infinity;
-			r.style.left = `${Math.max(0, Math.min(n.x + 12, e - r.offsetWidth - 8))}px`;
-		}), t;
+	update(e, [t]) {
+		let n = e.element;
+		return n.style.top = `${Math.max(0, t.y - 12)}px`, requestAnimationFrame(() => {
+			if (!n.isConnected) return;
+			let e = n.parentElement?.clientWidth ?? Infinity;
+			n.style.left = `${Math.max(0, Math.min(t.x + 12, e - n.offsetWidth - 8))}px`;
+		}), a;
 	}
 });
 function $(e) {
-	let n = e.tooltip;
-	if (!n) return t;
-	let { content: r } = n;
-	return l`
-    <div class="lintje-chart-tooltip" ${le(n)}>
-      <p class="lintje-chart-tooltip__title">${r.title}</p>
-      ${r.rows.map((e) => l`
-        <p class="lintje-chart-tooltip__row">
+	let t = e.tooltip;
+	if (!t) return a;
+	let { content: n } = t;
+	return c`
+    <div class="lintje-chart-tooltip" ${le(t)}>
+      <p class="lintje-chart-tooltip__title">${n.title}</p>
+      ${n.rows.map((e) => c`
+        <p class="lintje-chart-tooltip__row ${e.divider ? "lintje-chart-tooltip__row--divider" : ""}">
           <span class="lintje-chart-tooltip__label">
-            ${e.symbol ? l`<svg class="lintje-chart-tooltip__marker lintje-chart-tooltip__marker--symbol"
-                            viewBox="0 0 14 14" ${p({ color: e.color })}
-                            aria-hidden="true" focusable="false">${q(e.symbol, e.color, 7)}</svg>` : e.color ? l`<span class="lintje-chart-tooltip__marker" ${p({ background: e.color })}></span>` : t}
+            ${e.symbol ? c`<svg class="lintje-chart-tooltip__marker lintje-chart-tooltip__marker--symbol"
+                            viewBox="0 0 14 14" ${i({ color: e.color })}
+                            aria-hidden="true" focusable="false">${q(e.symbol, e.color, 7)}</svg>` : e.color ? c`<span class="lintje-chart-tooltip__marker" ${i({ background: e.color })}></span>` : a}
             ${e.label}
           </span>
           <span class="lintje-chart-tooltip__value">${e.value}</span>
         </p>
       `)}
+      ${n.events?.map((e) => c`
+        <p class="lintje-chart-tooltip__event">
+          <span class="lintje-event-chip"><span class="lintje-event-chip__number">${e.number}</span></span>
+          <span>${e.label}</span>
+        </p>
+      `)}
     </div>
   `;
 }

package/dist-elements/core.js

@@ -1 +1 @@
-export { Tt as FrameStateController, gt as ICONS, Xt as LINTJE_VERSION, zt as LintjeElement, It as MOBILE, Lt as MediaController, Rt as WIDE, _t as ariaKeyShortcuts, Vt as baseStyles, vt as characterKeys, Bt as define, Dt as getFrameState, Q as iconGlyph, nt as iconIsMissing, rt as iconSource, $ as iconStyles, bt as isTypingTarget, xt as keyLabels, it as loadIcon, at as loadedIcon, ot as loadedIconNames, Nt as lockScroll, st as onIconChange, St as registerShortcut, et as renderIcon, Pt as scrollRoot, Ct as setCharacterKeys, Ot as setFrameState, Ft as setHostConfig, lt as setIconSource, kt as setScrolled, At as setTitleHidden, Ht as shadowCss, wt as shortcuts, jt as subscribeToFrameState, Ut as toShadowCss, Wt as tokenStyles } from "./chunks/base-Bg-IFOPG.js";
+export { Pt as FrameStateController, Et as ICONS, an as LINTJE_VERSION, Jt as LintjeElement, Gt as MOBILE, Kt as MediaController, qt as WIDE, Dt as ariaKeyShortcuts, Xt as baseStyles, Ot as characterKeys, Yt as define, It as getFrameState, ct as iconGlyph, ft as iconIsMissing, pt as iconSource, lt as iconStyles, kt as isTypingTarget, At as keyLabels, mt as loadIcon, ht as loadedIcon, gt as loadedIconNames, Ht as lockScroll, _t as onIconChange, jt as registerShortcut, ut as renderIcon, Ut as scrollRoot, Mt as setCharacterKeys, Lt as setFrameState, Wt as setHostConfig, yt as setIconSource, Rt as setScrolled, zt as setTitleHidden, Zt as shadowCss, Nt as shortcuts, Bt as subscribeToFrameState, Qt as toShadowCss, $t as tokenStyles } from "./chunks/base-CbmWxUig.js";