lintje 0.3.0 → 0.4.0

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

@@ -1,4 +1,4 @@
-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";
+import { Ct as e, I as t, Tt as n, bt as r, d as i, en as a, l as o, m as s, n as c, nn as l, p as u, rn as d, t as f, wt as p } from "./base-DRGvkF-r.js";
 //#region src/components/shared/charts/shared/scale.ts
 var m = {
 	width: 900,
@@ -9,16 +9,16 @@ 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) => o(e, n)))), a = Math.min(r, i);
+	let r = Math.min(320, Math.round(t * v)), i = Math.ceil(Math.max(0, ...e.map((e) => u(e, n)))), a = Math.min(r, i);
 	return {
 		labelEnd: a,
 		barStart: a + _,
-		fit: (e) => f(e, a, n)
+		fit: (e) => s(e, a, n)
 	};
 }
-function b(e, t, { minimum: n = g, fontFamily: i = "" } = {}) {
-	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)), {
+function b(e, t, { minimum: n = g, fontFamily: r = "" } = {}) {
+	let a = Math.min(96, Math.round(t * h)), s = (t) => Math.ceil(Math.max(0, ...e.map((e) => u(t(e), r))) + 8), c = i, l = s(c);
+	return l > a && (c = o, l = s(c)), {
 		width: Math.min(a, Math.max(n, l)),
 		format: c
 	};
@@ -68,7 +68,7 @@ function T(e, t = {}) {
 }
 var E = .35, D = 120, O = Array.from({ length: 21 }, (e, t) => t / 20), k = 0, A = class {
 	constructor(e) {
-		this.id = `lintje-chart-${++k}`, this.width = m.width, this.height = m.height, this.inView = !1, this.tooltip = null, this.hoverIndex = null, this.status = "", this.hiddenSeries = [], this.hiddenLayers = [], this.hoverSegment = null, this.selectedCell = null, this.dimmedClass = null, this.mapHint = null, this.mapHintTimer = null, this.mapSelection = null, this.mapTool = null, this.mapLastTool = null, this.mapMenuOpen = !1, this.mapMenuFocus = null, this.mapLegendOpen = !1, this.mapArea = null, this.hostArea = void 0, this.hostSelection = void 0, this.leaflet = null, this.leafletView = null, this.element = null, this.measuring = {}, this.resizeObserver = null, this.intersectionObserver = null, this.attach = (e) => {
+		this.id = `lintje-chart-${++k}`, this.width = m.width, this.height = m.height, this.inView = !1, this.tooltip = null, this.hoverIndex = null, this.status = "", this.hiddenSeries = [], this.emphasis = null, this.hiddenLayers = [], this.hoverSegment = null, this.selectedCell = null, this.dimmedClass = null, this.mapHint = null, this.mapHintTimer = null, this.mapSelection = null, this.mapTool = null, this.mapLastTool = null, this.mapMenuOpen = !1, this.mapMenuFocus = null, this.mapLegendOpen = !1, this.mapArea = null, this.hostArea = void 0, this.hostSelection = void 0, this.leaflet = null, this.leafletView = null, this.element = null, this.measuring = {}, this.resizeObserver = null, this.intersectionObserver = null, this.attach = (e) => {
 			e !== this.element && (this.unwatch(), e instanceof HTMLElement && (this.element = e, this.read(), this.watchSize(e), this.watchVisibility(e)));
 		}, this.onWindowKey = (e) => {
 			e.key === "Escape" && this.hideTooltip();
@@ -129,6 +129,9 @@ var E = .35, D = 120, O = Array.from({ length: 21 }, (e, t) => t / 20), k = 0, A
 	toggleLayer(e) {
 		this.hiddenLayers = this.hiddenLayers.includes(e) ? this.hiddenLayers.filter((t) => t !== e) : [...this.hiddenLayers, e], this.requestUpdate();
 	}
+	emphasise(e) {
+		this.emphasis !== e && (this.emphasis = e, this.requestUpdate());
+	}
 	toggleSeries(e) {
 		this.hiddenSeries = this.hiddenSeries.includes(e) ? this.hiddenSeries.filter((t) => t !== e) : [...this.hiddenSeries, e], this.requestUpdate();
 	}
@@ -158,7 +161,7 @@ var E = .35, D = 120, O = Array.from({ length: 21 }, (e, t) => t / 20), k = 0, A
 	enter() {
 		this.intersectionObserver?.disconnect(), this.intersectionObserver = null, !this.inView && (this.inView = !0, this.requestUpdate());
 	}
-}, j = d;
+}, j = f;
 function M(e) {
 	return typeof e == "string" && j.includes(e);
 }
@@ -281,7 +284,7 @@ function V(e, t, n = 0, r = 0) {
 //#endregion
 //#region src/components/shared/charts/shared/colors.ts
 var H = "var(--color-chart-default)", U = {
-	...Object.fromEntries(d.map((e) => [e, s(e)])),
+	...Object.fromEntries(f.map((e) => [e, c(e)])),
 	other: "var(--color-chart-other)",
 	remainder: "var(--color-chart-remainder)",
 	emphasis: "var(--color-chart-emphasis)"
@@ -299,32 +302,36 @@ function K(e) {
 //#region src/components/shared/charts/shared/axes.ts
 function q(e, t, n) {
 	let r = G(t);
-	return l`<path d=${V(e, 4.5, n, n)} fill="currentColor"
+	return d`<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) => 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)" })}
+function J({ items: e, onToggle: t, onEmphasis: n, position: i = "top" }) {
+	let o = (e) => () => n?.(e.key ?? e.label), s = () => n?.(null), c = (e) => l`
+    ${e.symbol && e.shape === "point" ? l`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
+                    ${r({ color: e.color ?? "var(--color-chart-default)" })}
                     aria-hidden="true" focusable="false">
             ${q(e.symbol, e.color, 7)}
-          </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)" })}
+          </svg>` : e.symbol ? l`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
+                    ${r({ 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>` : c`<span class="lintje-legend__marker lintje-legend__marker--${e.shape ?? "square"}"
-                     ${i({ color: e.color ?? "var(--color-chart-default)" })}
+          </svg>` : l`<span class="lintje-legend__marker lintje-legend__marker--${e.shape ?? "square"}"
+                     ${r({ color: e.color ?? "var(--color-chart-default)" })}
                      aria-hidden="true"></span>`}
     <span class="lintje-legend__label">${e.label}</span>
   `;
-	return c`
-    <ul class="lintje-legend lintje-legend--${n}">
-      ${e.map((e) => c`
+	return l`
+    <ul class="lintje-legend lintje-legend--${i}">
+      ${e.map((e) => l`
         <li class="lintje-legend__item ${e.hidden ? "is-hidden" : ""}">
-          ${t && !e.fixed ? c`<button type="button" class="lintje-legend__button"
+          ${t && !e.fixed ? l`<button type="button" class="lintje-legend__button"
                            @click=${() => t(e.key ?? e.label)}
-                           aria-pressed=${!e.hidden}>${r(e)}</button>` : r(e)}
+                           @mouseenter=${n ? o(e) : a}
+                           @mouseleave=${n ? s : a}
+                           @focus=${n ? o(e) : a}
+                           @blur=${n ? s : a}
+                           aria-pressed=${!e.hidden}>${c(e)}</button>` : c(e)}
         </li>
       `)}
     </ul>
@@ -334,7 +341,7 @@ function Y(e) {
 	return e ? "group" : "img";
 }
 function X(e) {
-	return l`
+	return d`
     <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 +362,7 @@ var ae = 8, oe = 20;
 function Q(e, t = "") {
 	if (e.length < 2) return e;
 	let n = e.map((e) => {
-		let n = o(e.label, t), r = e.anchor === "end" ? e.x - n : e.anchor === "start" ? e.x : e.x - n / 2;
+		let n = u(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 +377,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: 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`
+function se({ area: e = m, ticks: t, max: n, axisTitle: o, xLabels: s, xTitle: c, description: u, defs: f, zeroLine: p = !0, formatTick: h = i, id: g, height: _, fontFamily: v, interactive: y, keys: b }, x) {
+	return l`
     <figure class="lintje-chart">
-      ${r ? c`<figcaption class="lintje-chart__axis-title">${r}</figcaption>` : a}
+      ${o ? l`<figcaption class="lintje-chart__axis-title">${o}</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,7 +388,7 @@ function se({ area: e = m, ticks: t, max: n, axisTitle: r, xLabels: o, xTitle: s
         class="lintje-chart__svg"
         width=${e.width}
         height=${e.height}
-        ${i({
+        ${r({
 		height: `${_ ?? e.height}px`,
 		...Z(g)
 	})}
@@ -392,7 +399,7 @@ function se({ area: e = m, ticks: t, max: n, axisTitle: r, xLabels: o, xTitle: s
         @focus=${b?.focus}
         @blur=${b?.blur}
       >
-        <desc id="${g}-desc">${d}</desc>
+        <desc id="${g}-desc">${u}</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" />
@@ -404,7 +411,7 @@ function se({ area: e = m, ticks: t, max: n, axisTitle: r, xLabels: o, xTitle: s
         <!-- Grid + axis labels -->
         ${t.map((t) => {
 		let r = C(t, n, e), i = t === 0;
-		return l`
+		return d`
             <g>
               <line
                 x1=${e.left} x2=${e.width - e.right} y1=${r} y2=${r}
@@ -420,30 +427,30 @@ function se({ area: e = m, ticks: t, max: n, axisTitle: r, xLabels: o, xTitle: s
         ${x}
 
         <!-- x-axis labels -->
-        ${Q(o ?? [], v).map((t) => l`
+        ${Q(s ?? [], v).map((t) => d`
           <text x=${t.x} y=${e.height - e.bottom + oe} text-anchor=${t.anchor ?? "middle"} class="lintje-chart__axis-label">
             ${t.label}
           </text>
         `)}
-        ${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}
+        ${c ? d`<text x=${e.width - e.right} y=${e.height - e.bottom + 40} text-anchor="end"
+                      class="lintje-chart__x-title">${c}</text>` : a}
       </svg>
     </figure>
   `;
 }
 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`
+	let s = e.left + x(e) * t / (n - 1), c = o > 6, l = e.width - e.right - s, u = l > 140;
+	return c ? d`
     <g>
       <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 ? s + 6 : s - 6} y=${e.top + 12}
-            text-anchor=${d ? "start" : "end"} class="lintje-chart__as-of-label">
+      <text x=${u ? s + 6 : s - 6} y=${e.top + 12}
+            text-anchor=${u ? "start" : "end"} class="lintje-chart__as-of-label">
         ${r}
       </text>
-      ${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}
+      ${i ? d`<text x=${u ? s + 6 : s - 6} y=${e.top + 26}
+                    text-anchor=${u ? "start" : "end"} class="lintje-chart__axis-label">${i}</text>` : a}
+      <text x=${s + l / 2} y=${e.top + (e.height - e.top - e.bottom) / 2}
             text-anchor="middle" class="lintje-chart__as-of-note">
         nog geen gegevens · ${o} ${o === 1 ? "uur" : "uren"} volgen
       </text>
@@ -470,21 +477,22 @@ function $(e) {
 	let t = e.tooltip;
 	if (!t) return a;
 	let { content: n } = t;
-	return c`
+	return l`
     <div class="lintje-chart-tooltip" ${le(t)}>
       <p class="lintje-chart-tooltip__title">${n.title}</p>
-      ${n.rows.map((e) => c`
+      ${n.rows.map((e) => l`
         <p class="lintje-chart-tooltip__row ${e.divider ? "lintje-chart-tooltip__row--divider" : ""}">
           <span class="lintje-chart-tooltip__label">
-            ${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.symbol ? l`<svg class="lintje-chart-tooltip__marker lintje-chart-tooltip__marker--symbol"
+                            viewBox="0 0 14 14" ${r({ color: e.color })}
+                            aria-hidden="true" focusable="false">${q(e.symbol, e.color, 7)}</svg>` : e.marker ? l`<span class="lintje-chart-tooltip__marker lintje-chart-tooltip__marker--${e.marker}"
+                               ${r({ color: e.color })}></span>` : e.color ? l`<span class="lintje-chart-tooltip__marker" ${r({ background: e.color })}></span>` : a}
             ${e.label}
           </span>
           <span class="lintje-chart-tooltip__value">${e.value}</span>
         </p>
       `)}
-      ${n.events?.map((e) => c`
+      ${n.events?.map((e) => l`
         <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>

package/dist-elements/content.js

@@ -1,6 +1,7 @@
 import "./tag/prose.js";
 import "./tag/code.js";
 import "./tag/highlight.js";
+import "./tag/token-value.js";
 import "./tag/translator.js";
 import "./tag/audio-player.js";
 import "./tag/video-player.js";

package/dist-elements/core.js

@@ -1 +1 @@
-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";
+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-DRGvkF-r.js";