lintje 0.2.0 → 0.4.0

package/dist-elements/tag/kpi.js

@@ -1,7 +1,7 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Jt as i, O as a, Z as o, d as s, et as c, g as l, h as u, k as d, n as f, qt as p, s as m, t as h, ut as g, w as _ } from "../chunks/base-Bg-IFOPG.js";
+import { F as e, O as t, P as n, Yt as r, Zt as i, _ as a, bt as o, d as s, en as c, i as l, lt as u, n as d, nn as f, o as p, rn as m, st as h, t as g, ut as _, y as v } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/charts/kpi/kpi.css?inline
-var v = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-kpi { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-kpi {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 4px solid var(--color-text-muted);\n  border-radius: var(--radius);\n  padding: var(--space-4) var(--space-5);\n  text-align: left;\n  animation: lintje-rise var(--dur-kpi) var(--ease-in-motion) both;\n}\n\n.lintje-kpi__label { font: var(--text-tile-title); color: var(--color-text-primary); }\n/* With an icon the KPI is a two-column grid: the glyph on the label's first line, everything else\n   over the full width. The icon stays in every state and takes the text colour. */\n.lintje-kpi--icon {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-content: start;\n}\n.lintje-kpi--icon > * { grid-column: 1 / -1; min-width: 0; }\n.lintje-kpi--icon > .lintje-kpi__icon {\n  grid-column: 1; grid-row: 1;\n  display: flex; align-items: center;\n  height: 1lh;\n  font: var(--text-tile-title);\n  color: var(--color-text-primary);\n}\n/* The gap is the glyph's own margin, not a `column-gap`: a name with no file draws nothing, and\n   a gap between tracks would indent the label beside an empty column. */\n.lintje-kpi--icon > .lintje-kpi__icon { margin-right: var(--space-2); }\n.lintje-kpi--icon > .lintje-kpi__icon:empty { display: none; }\n.lintje-kpi--icon > .lintje-kpi__label { grid-column: 2; grid-row: 1; }\n.lintje-kpi__value {\n  font: var(--text-kpi);\n  letter-spacing: var(--kpi-tracking);\n  /* After the shorthand, which resets it to normal. */\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-primary);\n}\n.lintje-kpi__suffix { font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }\n/* The final value is transparent but keeps the width, so the suffix does not move while counting. */\n.lintje-kpi__count { display: inline-grid; }\n.lintje-kpi__count-final,\n.lintje-kpi__count-live { grid-area: 1 / 1; }\n.lintje-kpi__count-final { opacity: 0; }\n.lintje-kpi__note { font: var(--text-small); color: var(--color-text-primary); }\n.lintje-kpi__note--error { display: flex; align-items: center; gap: 6px; }\n.lintje-kpi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-attention); flex: none; }\n.lintje-kpi__detail { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* The wrapper is the query container, so a row can stack in a narrow KPI without containing it. */\n.lintje-kpi__figures { container-type: inline-size; }\n.lintje-kpi__items { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-kpi__item {\n  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;\n  column-gap: var(--space-4); min-width: 0;\n}\n.lintje-kpi__item--comparison .lintje-kpi__value { color: var(--color-text-secondary); }\n.lintje-kpi__period { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-kpi__divider { display: block; height: 1px; background: var(--color-border-default); }\n.lintje-kpi__items--row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--space-4); }\n.lintje-kpi__items--row.lintje-kpi__items--divided { grid-auto-columns: minmax(0, 1fr) 1px; }\n.lintje-kpi__items--row .lintje-kpi__item { display: block; }\n.lintje-kpi__items--row .lintje-kpi__divider { height: auto; align-self: stretch; }\n@container (width < 318px) {\n  .lintje-kpi__items--row { display: flex; align-items: stretch; gap: var(--space-2); }\n  .lintje-kpi__items--row .lintje-kpi__item { display: flex; }\n  .lintje-kpi__items--row .lintje-kpi__divider { height: 1px; }\n}\n.lintje-kpi--primary .lintje-kpi__divider { margin-block: var(--space-1); }\n.lintje-kpi__secondary-value {\n  font: var(--text-kpi-secondary);\n  letter-spacing: var(--kpi-tracking);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-secondary);\n}\n\n.lintje-kpi__skeleton { display: flex; flex-direction: column; gap: var(--space-2); }\n\n@media (max-width: 767px) {\n  .lintje-kpi { padding: 12px 14px; gap: var(--space-1); }\n  .lintje-kpi__value { font: var(--text-kpi-mobile); font-variant-numeric: tabular-nums; }\n}\n@media (min-width: 1024px) and (max-width: 1439px) {\n  .lintje-kpi__value { font-size: 1.75rem; }\n}\n\n/* --- The sparkline ------------------------------------------------------------ */\n/* The box is measured and the svg takes that size, so nothing stretches. `color` is the\n   variable's token, set inline; the area is that colour at the line chart's opacity. */\n.lintje-kpi__sparkline { display: block; width: 100%; height: var(--h-sparkline); }\n.lintje-kpi__sparkline-svg { display: block; overflow: visible; }\n.lintje-kpi__sparkline-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }\n.lintje-kpi__sparkline-area { fill: currentColor; fill-opacity: 0.14; }\n.lintje-kpi__sparkline-point { fill: currentColor; }\n/* The end point parts from the line with a ring in the surface. */\n.lintje-kpi__sparkline-end { fill: currentColor; stroke: var(--color-bg-surface); stroke-width: 2; }\n/* Uncovered from left to right once the tile is in view, like the count, and hidden before;\n   reduced motion leaves nothing out, so there it simply stands. */\n@media (prefers-reduced-motion: no-preference) {\n  .lintje-kpi__sparkline-plot { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }\n  .lintje-kpi__sparkline.is-drawn .lintje-kpi__sparkline-plot {\n    clip-path: inset(-8px);\n    animation: lintje-kpi-reveal var(--dur-draw) var(--ease-in-motion) backwards;\n    animation-delay: calc(var(--dur-kpi) + 40ms * var(--kpi-index, 0));\n  }\n}\n@keyframes lintje-kpi-reveal {\n  from { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }\n  to   { clip-path: inset(-8px); }\n}\n\n/* --- The trend line -------------------------------------------------------- */\n.lintje-trend {\n  display: flex;\n  gap: var(--space-2);\n  align-items: flex-start;\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n.lintje-trend__glyph { font-size: 1rem; font-weight: 700; line-height: 1.2; flex: none; }\n.lintje-trend__glyph--good     { color: var(--color-success); }\n.lintje-trend__glyph--bad   { color: var(--color-error); }\n.lintje-trend__glyph--neutral { color: var(--color-text-muted); }\n.lintje-trend__detail { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* --- The gauge ------------------------------------------------------------ */\n/* Room above for a target near the top and below for the ends' numbers; the arc never grows past\n   its drawn size, so the band keeps its weight beside the text. */\n.lintje-gauge--arc {\n  position: relative;\n  width: min(100%, 168px);\n  aspect-ratio: 2;\n  margin-block: var(--space-4);\n}\n.lintje-gauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }\n.lintje-gauge--arc .lintje-kpi__value,\n.lintje-gauge__skeleton {\n  position: absolute;\n  left: 0; right: 0; bottom: 0;\n  margin-inline: auto;\n  text-align: center;\n}\n.lintje-gauge__track { fill: none; stroke: var(--color-chart-remainder); }\n.lintje-gauge__arc-fill {\n  fill: none;\n  stroke-dasharray: 1;\n  animation: lintje-gauge-sweep var(--dur-draw) var(--ease-in-motion) both paused;\n}\n.lintje-gauge__tick { stroke: var(--color-chart-emphasis); stroke-width: 1; stroke-dasharray: 3 3; }\n.lintje-gauge__label {\n  position: absolute;\n  font: var(--text-axis);\n  color: var(--color-chart-axis);\n  white-space: nowrap;\n}\n.lintje-gauge__label--limit { transform: translateX(-50%); }\n.lintje-gauge__label--middle { transform: translate(-50%, -100%); }\n.lintje-gauge__label--start { transform: translateY(-50%); }\n.lintje-gauge__label--end { transform: translate(-100%, -50%); }\n/* A tile narrower than the arc and a side label puts the target's label on its own line under the\n   ends' numbers, where it cannot leave the tile or meet them. A tile narrower still takes the\n   smaller figure, so the value stays inside the band. */\n.lintje-gauge__frame { container-type: inline-size; }\n@container (width < 232px) {\n  .lintje-gauge--arc { margin-bottom: var(--space-8); }\n  .lintje-gauge__label--target {\n    left: 50% !important;\n    top: calc(100% + var(--space-4)) !important;\n    transform: translateX(-50%);\n  }\n}\n@container (width < 160px) {\n  .lintje-gauge--arc .lintje-kpi__value { font: var(--text-kpi-secondary); font-variant-numeric: tabular-nums; }\n  .lintje-gauge--arc .lintje-kpi__suffix { font-size: 1rem; margin-left: 2px; }\n}\n\n\n.lintje-gauge--linear { display: flex; flex-direction: column; gap: var(--space-1); }\n/* The mark stands out over the bar, so the bar leaves it room above and below. */\n.lintje-gauge__bar {\n  position: relative;\n  height: var(--space-4);\n  margin-block: var(--space-1);\n  background: var(--color-chart-remainder);\n}\n.lintje-gauge__bar-fill {\n  height: 100%;\n  transform-origin: 0 50%;\n  animation: lintje-gauge-grow var(--dur-draw) var(--ease-in-motion) both paused;\n}\n.lintje-gauge__mark {\n  position: absolute;\n  top: calc(-1 * var(--space-1));\n  bottom: calc(-1 * var(--space-1));\n  border-left: 1px dashed var(--color-chart-emphasis);\n}\n.lintje-gauge__scale {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  font: var(--text-axis);\n  color: var(--color-chart-axis);\n}\n.lintje-gauge__scale-target { position: absolute; top: 0; white-space: nowrap; }\n.lintje-gauge__scale-target--middle { transform: translateX(-50%); }\n.lintje-gauge__scale-target--end { transform: translateX(-100%); }\n\n.lintje-gauge.is-drawn .lintje-gauge__arc-fill,\n.lintje-gauge.is-drawn .lintje-gauge__bar-fill { animation-play-state: running; }\n@keyframes lintje-gauge-sweep { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n@keyframes lintje-gauge-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n@media (prefers-reduced-motion: reduce) {\n  .lintje-gauge__arc-fill,\n  .lintje-gauge__bar-fill { animation: none; }\n}\n\n/* Forced colours: the divider, the error dot and the gauge's fills are fills, which the browser\n   drops. */\n@media (forced-colors: active) {\n  .lintje-kpi__divider,\n  .lintje-kpi__dot { forced-color-adjust: none; background: CanvasText; }\n  .lintje-kpi__sparkline-line { stroke: CanvasText; }\n  .lintje-kpi__sparkline-area { fill: none; }\n  .lintje-kpi__sparkline-point,\n  .lintje-kpi__sparkline-end { fill: CanvasText; stroke: Canvas; }\n  .lintje-gauge__bar { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }\n  .lintje-gauge__bar-fill { forced-color-adjust: none; background: Highlight !important; }\n  .lintje-gauge__svg { forced-color-adjust: none; }\n  .lintje-gauge__track { stroke: GrayText; }\n  .lintje-gauge__arc-fill { stroke: Highlight !important; }\n  .lintje-gauge__tick { stroke: CanvasText; }\n  .lintje-gauge__mark { border-color: CanvasText; }\n}\n", y = 64, b = 24, x = y - b / 2 - 6, S = 82, C = 86, w = 84;
-function T(e) {
+var y = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media print { :host { break-inside: avoid; } }\n.lintje-kpi { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-kpi {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 4px solid var(--color-text-muted);\n  border-radius: var(--radius);\n  padding: var(--space-4) var(--space-5);\n  text-align: left;\n  animation: lintje-rise var(--dur-kpi) var(--ease-in-motion) both;\n}\n\n.lintje-kpi__label { font: var(--text-tile-title); color: var(--color-text-primary); }\n/* With an icon the KPI is a two-column grid: the glyph on the label's first line, everything else\n   over the full width. The icon stays in every state and takes the text colour. */\n.lintje-kpi--icon {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-content: start;\n}\n.lintje-kpi--icon > * { grid-column: 1 / -1; min-width: 0; }\n.lintje-kpi--icon > .lintje-kpi__icon {\n  grid-column: 1; grid-row: 1;\n  display: flex; align-items: center;\n  height: 1lh;\n  font: var(--text-tile-title);\n  color: var(--color-text-primary);\n}\n/* The gap is the glyph's own margin, not a `column-gap`: a name with no file draws nothing, and\n   a gap between tracks would indent the label beside an empty column. */\n.lintje-kpi--icon > .lintje-kpi__icon { margin-right: var(--space-2); }\n.lintje-kpi--icon > .lintje-kpi__icon:empty { display: none; }\n.lintje-kpi--icon > .lintje-kpi__label { grid-column: 2; grid-row: 1; }\n.lintje-kpi__value {\n  font: var(--text-kpi);\n  letter-spacing: var(--kpi-tracking);\n  /* After the shorthand, which resets it to normal. */\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-primary);\n}\n.lintje-kpi__suffix { font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }\n/* The final value is transparent but keeps the width, so the suffix does not move while counting. */\n.lintje-kpi__count { display: inline-grid; }\n.lintje-kpi__count-final,\n.lintje-kpi__count-live { grid-area: 1 / 1; }\n.lintje-kpi__count-final { opacity: 0; }\n.lintje-kpi__note { font: var(--text-small); color: var(--color-text-primary); }\n.lintje-kpi__note--error { display: flex; align-items: center; gap: 6px; }\n.lintje-kpi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-attention); flex: none; }\n.lintje-kpi__detail { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* The wrapper is the query container, so a row can stack in a narrow KPI without containing it. */\n.lintje-kpi__figures { container-type: inline-size; }\n.lintje-kpi__items { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-kpi__item {\n  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;\n  column-gap: var(--space-4); min-width: 0;\n}\n.lintje-kpi__item--comparison .lintje-kpi__value { color: var(--color-text-secondary); }\n.lintje-kpi__period { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-kpi__divider { display: block; height: 1px; background: var(--color-border-default); }\n.lintje-kpi__items--row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--space-4); }\n.lintje-kpi__items--row.lintje-kpi__items--divided { grid-auto-columns: minmax(0, 1fr) 1px; }\n.lintje-kpi__items--row .lintje-kpi__item { display: block; }\n.lintje-kpi__items--row .lintje-kpi__divider { height: auto; align-self: stretch; }\n@container (width < 318px) {\n  .lintje-kpi__items--row { display: flex; align-items: stretch; gap: var(--space-2); }\n  .lintje-kpi__items--row .lintje-kpi__item { display: flex; }\n  .lintje-kpi__items--row .lintje-kpi__divider { height: 1px; }\n}\n.lintje-kpi--primary .lintje-kpi__divider { margin-block: var(--space-1); }\n.lintje-kpi__secondary-value {\n  font: var(--text-kpi-secondary);\n  letter-spacing: var(--kpi-tracking);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-secondary);\n}\n\n.lintje-kpi__skeleton { display: flex; flex-direction: column; gap: var(--space-2); }\n\n@media screen and (max-width: 767px) {\n  .lintje-kpi { padding: 12px 14px; gap: var(--space-1); }\n  .lintje-kpi__value { font: var(--text-kpi-mobile); font-variant-numeric: tabular-nums; }\n}\n@media (min-width: 1024px) and (max-width: 1439px) {\n  .lintje-kpi__value { font-size: 1.75rem; }\n}\n\n/* --- The sparkline ------------------------------------------------------------ */\n/* The box is measured and the svg takes that size, so nothing stretches. `color` is the\n   variable's token, set inline; the area is that colour at the line chart's opacity. */\n.lintje-kpi__sparkline { display: block; width: 100%; height: var(--h-sparkline); }\n.lintje-kpi__sparkline-svg { display: block; overflow: visible; }\n.lintje-kpi__sparkline-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }\n.lintje-kpi__sparkline-area { fill: currentColor; fill-opacity: 0.14; }\n.lintje-kpi__sparkline-point { fill: currentColor; }\n/* The end point parts from the line with a ring in the surface. */\n.lintje-kpi__sparkline-end { fill: currentColor; stroke: var(--color-bg-surface); stroke-width: 2; }\n/* Uncovered from left to right once the tile is in view, like the count, and hidden before;\n   reduced motion leaves nothing out, so there it simply stands. */\n@media (prefers-reduced-motion: no-preference) {\n  .lintje-kpi__sparkline-plot { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }\n  .lintje-kpi__sparkline.is-drawn .lintje-kpi__sparkline-plot {\n    clip-path: inset(-8px);\n    animation: lintje-kpi-reveal var(--dur-draw) var(--ease-in-motion) backwards;\n    animation-delay: calc(var(--dur-kpi) + 40ms * var(--kpi-index, 0));\n  }\n}\n@keyframes lintje-kpi-reveal {\n  from { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }\n  to   { clip-path: inset(-8px); }\n}\n\n/* --- The trend line -------------------------------------------------------- */\n.lintje-trend {\n  display: flex;\n  gap: var(--space-2);\n  align-items: flex-start;\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n.lintje-trend__glyph { font-size: 1rem; font-weight: 700; line-height: 1.2; flex: none; }\n.lintje-trend__glyph--good     { color: var(--color-success); }\n.lintje-trend__glyph--bad   { color: var(--color-error); }\n.lintje-trend__glyph--neutral { color: var(--color-text-muted); }\n.lintje-trend__detail { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* --- The gauge ------------------------------------------------------------ */\n/* Room above for a target near the top and below for the ends' numbers; the arc never grows past\n   its drawn size, so the band keeps its weight beside the text. */\n.lintje-gauge--arc {\n  position: relative;\n  width: min(100%, 168px);\n  aspect-ratio: 2;\n  margin-block: var(--space-4);\n}\n.lintje-gauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }\n.lintje-gauge--arc .lintje-kpi__value,\n.lintje-gauge__skeleton {\n  position: absolute;\n  left: 0; right: 0; bottom: 0;\n  margin-inline: auto;\n  text-align: center;\n}\n.lintje-gauge__track { fill: none; stroke: var(--color-chart-remainder); }\n.lintje-gauge__arc-fill {\n  fill: none;\n  stroke-dasharray: 1;\n  animation: lintje-gauge-sweep var(--dur-draw) var(--ease-in-motion) both paused;\n}\n.lintje-gauge__tick { stroke: var(--color-chart-emphasis); stroke-width: 1; stroke-dasharray: 3 3; }\n.lintje-gauge__label {\n  position: absolute;\n  font: var(--text-axis);\n  color: var(--color-chart-axis);\n  white-space: nowrap;\n}\n.lintje-gauge__label--limit { transform: translateX(-50%); }\n.lintje-gauge__label--middle { transform: translate(-50%, -100%); }\n.lintje-gauge__label--start { transform: translateY(-50%); }\n.lintje-gauge__label--end { transform: translate(-100%, -50%); }\n/* A tile narrower than the arc and a side label puts the target's label on its own line under the\n   ends' numbers, where it cannot leave the tile or meet them. A tile narrower still takes the\n   smaller figure, so the value stays inside the band. */\n.lintje-gauge__frame { container-type: inline-size; }\n@container (width < 232px) {\n  .lintje-gauge--arc { margin-bottom: var(--space-8); }\n  .lintje-gauge__label--target {\n    left: 50% !important;\n    top: calc(100% + var(--space-4)) !important;\n    transform: translateX(-50%);\n  }\n}\n@container (width < 160px) {\n  .lintje-gauge--arc .lintje-kpi__value { font: var(--text-kpi-secondary); font-variant-numeric: tabular-nums; }\n  .lintje-gauge--arc .lintje-kpi__suffix { font-size: 1rem; margin-left: 2px; }\n}\n\n\n.lintje-gauge--linear { display: flex; flex-direction: column; gap: var(--space-1); }\n/* The mark stands out over the bar, so the bar leaves it room above and below. */\n.lintje-gauge__bar {\n  position: relative;\n  height: var(--space-4);\n  margin-block: var(--space-1);\n  background: var(--color-chart-remainder);\n}\n.lintje-gauge__bar-fill {\n  height: 100%;\n  transform-origin: 0 50%;\n  animation: lintje-gauge-grow var(--dur-draw) var(--ease-in-motion) both paused;\n}\n.lintje-gauge__mark {\n  position: absolute;\n  top: calc(-1 * var(--space-1));\n  bottom: calc(-1 * var(--space-1));\n  border-left: 1px dashed var(--color-chart-emphasis);\n}\n.lintje-gauge__scale {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  font: var(--text-axis);\n  color: var(--color-chart-axis);\n}\n.lintje-gauge__scale-target { position: absolute; top: 0; white-space: nowrap; }\n.lintje-gauge__scale-target--middle { transform: translateX(-50%); }\n.lintje-gauge__scale-target--end { transform: translateX(-100%); }\n\n.lintje-gauge.is-drawn .lintje-gauge__arc-fill,\n.lintje-gauge.is-drawn .lintje-gauge__bar-fill { animation-play-state: running; }\n@keyframes lintje-gauge-sweep { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n@keyframes lintje-gauge-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n@media (prefers-reduced-motion: reduce) {\n  .lintje-gauge__arc-fill,\n  .lintje-gauge__bar-fill { animation: none; }\n}\n\n/* Forced colours: the divider, the error dot and the gauge's fills are fills, which the browser\n   drops. */\n@media (forced-colors: active) {\n  .lintje-kpi__divider,\n  .lintje-kpi__dot { forced-color-adjust: none; background: CanvasText; }\n  .lintje-kpi__sparkline-line { stroke: CanvasText; }\n  .lintje-kpi__sparkline-area { fill: none; }\n  .lintje-kpi__sparkline-point,\n  .lintje-kpi__sparkline-end { fill: CanvasText; stroke: Canvas; }\n  .lintje-gauge__bar { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }\n  .lintje-gauge__bar-fill { forced-color-adjust: none; background: Highlight !important; }\n  .lintje-gauge__svg { forced-color-adjust: none; }\n  .lintje-gauge__track { stroke: GrayText; }\n  .lintje-gauge__arc-fill { stroke: Highlight !important; }\n  .lintje-gauge__tick { stroke: CanvasText; }\n  .lintje-gauge__mark { border-color: CanvasText; }\n}\n\n.lintje-kpi__last-known { font: var(--text-small); color: var(--color-text-muted); }\n", b = 64, x = 24, S = b - x / 2 - 6, C = 82, w = 86, T = 84;
+function E(e) {
 	let t = e.min ?? 0, n = e.max > t ? e.max : t + 1;
 	return {
 		min: t,
@@ -9,92 +9,92 @@ function T(e) {
 		share: (e) => Math.max(0, Math.min(1, (e - t) / (n - t)))
 	};
 }
-function E(e, t) {
+function D(e, t) {
 	let n = Math.PI * (1 - t);
 	return [e * Math.cos(n), -e * Math.sin(n)];
 }
-function D(e, t) {
-	let { gauge: n, value: r } = e, i = n.target == null ? "" : `, ${n.targetLabel ?? "doel"} ${m(n.target)}`;
-	return `${r == null || !e.ready ? "" : `${m(r)} `}op een schaal van ${m(t.min)} tot ${m(t.max)}${i}`;
-}
-function O(e) {
-	return `${e.targetLabel ?? "doel"} ${m(e.target)}`;
+function O(e, t) {
+	let { gauge: n, value: r } = e, i = n.target == null ? "" : `, ${n.targetLabel ?? "doel"} ${s(n.target)}`;
+	return `${r == null || !e.ready ? "" : `${s(r)} `}op een schaal van ${s(t.min)} tot ${s(t.max)}${i}`;
 }
-function k(e, t) {
-	return e.gauge.shape === "linear" ? j(e, t) : A(e, t);
+function k(e) {
+	return `${e.targetLabel ?? "doel"} ${s(e.target)}`;
 }
 function A(e, t) {
-	let { gauge: r, value: a, ready: s } = e, c = T(r), l = s && a != null && c.share(a) > 0 ? c.share(a) : null, u = l == null ? null : E(y, l), d = !e.loading && r.target != null, f = d ? c.share(r.target) : 0, [h, _] = E(x, f), [v, k] = E(S, f), [A, j] = E(C, f), M = Math.cos(Math.PI * (1 - f)), N = M > .3 ? "start" : M < -.3 ? "end" : "middle", P = (e) => `${(e + w) / 168 * 100}%`;
-	return p`<div class="lintje-gauge__frame"><div
-    class=${o({
+	return e.gauge.shape === "linear" ? M(e, t) : j(e, t);
+}
+function j(e, t) {
+	let { gauge: n, value: r, ready: i } = e, a = E(n), l = i && r != null && a.share(r) > 0 ? a.share(r) : null, u = l == null ? null : D(b, l), d = !e.loading && n.target != null, p = d ? a.share(n.target) : 0, [g, _] = D(S, p), [v, y] = D(C, p), [A, j] = D(w, p), M = Math.cos(Math.PI * (1 - p)), N = M > .3 ? "start" : M < -.3 ? "end" : "middle", P = (e) => `${(e + T) / 168 * 100}%`;
+	return f`<div class="lintje-gauge__frame"><div
+    class=${h({
 		"lintje-gauge": !0,
 		"lintje-gauge--arc": !0,
 		"is-drawn": e.drawn
 	})}>
     ${t}
-    <svg class="lintje-gauge__svg" viewBox="${-84} ${-84} ${168} ${w}" role="img"
-         aria-label=${D(e, c)}>
-      <desc>${D(e, c)}</desc>
-      <path class="lintje-gauge__track" d="M ${-64} 0 A ${y} ${y} 0 0 1 ${y} 0"
-            stroke-width=${b} />
-      ${u ? i`<path class="lintje-gauge__arc-fill" pathLength="1"
-                d="M ${-64} 0 A ${y} ${y} 0 0 1 ${u[0].toFixed(2)} ${u[1].toFixed(2)}"
-                stroke-width=${b} ${g({ stroke: e.color })} />` : n}
-      ${d ? i`<line class="lintje-gauge__tick" x1=${h.toFixed(2)} y1=${_.toFixed(2)}
-                x2=${v.toFixed(2)} y2=${k.toFixed(2)} />` : n}
+    <svg class="lintje-gauge__svg" viewBox="${-84} ${-84} ${168} ${T}" role="img"
+         aria-label=${O(e, a)}>
+      <desc>${O(e, a)}</desc>
+      <path class="lintje-gauge__track" d="M ${-64} 0 A ${b} ${b} 0 0 1 ${b} 0"
+            stroke-width=${x} />
+      ${u ? m`<path class="lintje-gauge__arc-fill" pathLength="1"
+                d="M ${-64} 0 A ${b} ${b} 0 0 1 ${u[0].toFixed(2)} ${u[1].toFixed(2)}"
+                stroke-width=${x} ${o({ stroke: e.color })} />` : c}
+      ${d ? m`<line class="lintje-gauge__tick" x1=${g.toFixed(2)} y1=${_.toFixed(2)}
+                x2=${v.toFixed(2)} y2=${y.toFixed(2)} />` : c}
     </svg>
     <span class="lintje-gauge__label lintje-gauge__label--limit" aria-hidden="true"
-          ${g({
+          ${o({
 		left: P(-64),
 		top: "100%"
-	})}>${m(c.min)}</span>
+	})}>${s(a.min)}</span>
     <span class="lintje-gauge__label lintje-gauge__label--limit" aria-hidden="true"
-          ${g({
-		left: P(y),
+          ${o({
+		left: P(b),
 		top: "100%"
-	})}>${m(c.max)}</span>
-    ${d ? p`<span class="lintje-gauge__label lintje-gauge__label--target lintje-gauge__label--${N}"
-              aria-hidden="true" ${g({
+	})}>${s(a.max)}</span>
+    ${d ? f`<span class="lintje-gauge__label lintje-gauge__label--target lintje-gauge__label--${N}"
+              aria-hidden="true" ${o({
 		left: P(A),
-		top: ((e) => `${(e + w) / w * 100}%`)(j)
-	})}>${O(r)}</span>` : n}
+		top: ((e) => `${(e + T) / T * 100}%`)(j)
+	})}>${k(n)}</span>` : c}
   </div></div>`;
 }
-function j(e, t) {
-	let { gauge: r, value: i, ready: a } = e, s = T(r), c = a && i != null ? s.share(i) : null, l = !e.loading && r.target != null, u = l ? s.share(r.target) : 0, d = u > .8 ? "end" : u < .2 ? "start" : "middle";
-	return p`${t}
-    <div class=${o({
+function M(e, t) {
+	let { gauge: n, value: r, ready: i } = e, a = E(n), l = i && r != null ? a.share(r) : null, u = !e.loading && n.target != null, d = u ? a.share(n.target) : 0, p = d > .8 ? "end" : d < .2 ? "start" : "middle";
+	return f`${t}
+    <div class=${h({
 		"lintje-gauge": !0,
 		"lintje-gauge--linear": !0,
 		"is-drawn": e.drawn
 	})}
-         role="img" aria-label=${D(e, s)}>
+         role="img" aria-label=${O(e, a)}>
       <div class="lintje-gauge__bar">
-        ${c == null ? n : p`<div class="lintje-gauge__bar-fill"
-                ${g({
-		width: `${c * 100}%`,
+        ${l == null ? c : f`<div class="lintje-gauge__bar-fill"
+                ${o({
+		width: `${l * 100}%`,
 		background: e.color
 	})}></div>`}
-        ${l ? p`<span class="lintje-gauge__mark" ${g({ left: `${u * 100}%` })}></span>` : n}
+        ${u ? f`<span class="lintje-gauge__mark" ${o({ left: `${d * 100}%` })}></span>` : c}
       </div>
       <div class="lintje-gauge__scale">
-        <span>${m(s.min)}</span>
-        ${l ? p`<span class="lintje-gauge__scale-target lintje-gauge__scale-target--${d}"
-                ${g({ left: `${u * 100}%` })}>${O(r)}</span>` : n}
-        <span>${m(s.max)}</span>
+        <span>${s(a.min)}</span>
+        ${u ? f`<span class="lintje-gauge__scale-target lintje-gauge__scale-target--${p}"
+                ${o({ left: `${d * 100}%` })}>${k(n)}</span>` : c}
+        <span>${s(a.max)}</span>
       </div>
     </div>`;
 }
 //#endregion
 //#region src/components/charts/kpi/kpi.ts
-var M = {
-	...Object.fromEntries(h.map((e) => [e, f(e)])),
+var N = {
+	...Object.fromEntries(g.map((e) => [e, d(e)])),
 	coverage: "var(--color-text-muted)"
-}, N = {
+}, P = {
 	width: 200,
 	height: 32
-}, P = 4, F = 3.5;
-function I(e, t, n) {
+}, F = 4, I = 3.5;
+function L(e, t, n) {
 	let r = e.filter((e) => e != null);
 	if (r.length < 2) return [];
 	let i = Math.min(...r), a = Math.max(...r) - i || 1, o = (t - 8) / (e.length - 1), s = [], c = [];
@@ -103,16 +103,16 @@ function I(e, t, n) {
 			c.length && s.push(c), c = [];
 			return;
 		}
-		let r = P + t * o, l = P + (1 - (e - i) / a) * (n - 8);
+		let r = F + t * o, l = F + (1 - (e - i) / a) * (n - 8);
 		c.push([r, l]);
 	}), c.length && s.push(c), s;
 }
-var L = (e) => e.map(([e, t]) => `${e.toFixed(1)},${t.toFixed(1)}`).join(" "), R = {
+var R = (e) => e.map(([e, t]) => `${e.toFixed(1)},${t.toFixed(1)}`).join(" "), z = {
 	up: "▲",
 	down: "▼",
 	flat: "●"
-}, z = .35, B = Array.from({ length: 21 }, (e, t) => t / 20);
-function V(e) {
+}, B = .35, V = Array.from({ length: 21 }, (e, t) => t / 20);
+function H(e) {
 	let t = e === void 0 ? null : String(e), n = t?.match(/\d{1,3}(?:\.\d{3})+(?:,\d+)?|\d+(?:,\d+)?/);
 	if (t == null || !n || n.index == null) return null;
 	let r = n[0];
@@ -124,16 +124,16 @@ function V(e) {
 		grouped: r.includes(".")
 	};
 }
-function H(e, t) {
+function U(e, t) {
 	return e.before + t.toLocaleString("nl-NL", {
 		minimumFractionDigits: e.decimals,
 		maximumFractionDigits: e.decimals,
 		useGrouping: e.grouped
 	}) + e.after;
 }
-var U = class extends a {
+var W = class extends n {
 	constructor(...e) {
-		super(...e), this.label = "", this.layout = "row", this.emphasis = "equal", this.dividers = !0, this.variable = "sky-blue", this.state = "ready", this.index = 0, this.counting = [], this.drawn = !1, this.sparklineBox = N, this.#e = [], this.#t = null, this.#n = "", this.#r = null, this.#i = 0, this.#a = !1, this.#o = !1, this.observeSparkline = (e) => {
+		super(...e), this.label = "", this.layout = "row", this.emphasis = "equal", this.dividers = !0, this.variable = "sky-blue", this.state = "ready", this.index = 0, this.counting = [], this.drawn = !1, this.sparklineBox = P, this.#e = [], this.#t = null, this.#n = "", this.#r = null, this.#i = 0, this.#a = !1, this.#o = !1, this.#s = null, this.observeSparkline = (e) => {
 			this.#t?.disconnect(), this.#t = null, e && typeof ResizeObserver < "u" && (this.#t = new ResizeObserver(([e]) => {
 				let { width: t, height: n } = e.contentRect;
 				if (!t || !n) return;
@@ -147,10 +147,10 @@ var U = class extends a {
 	}
 	static {
 		this.styles = [
-			d,
 			e,
-			r(_),
-			r(v)
+			u,
+			i(t),
+			i(y)
 		];
 	}
 	static {
@@ -176,6 +176,11 @@ var U = class extends a {
 				type: String,
 				reflect: !0
 			},
+			message: { type: String },
+			lastKnown: {
+				type: String,
+				attribute: "last-known"
+			},
 			index: { type: Number },
 			counting: { state: !0 },
 			drawn: { state: !0 },
@@ -189,105 +194,109 @@ var U = class extends a {
 	#i;
 	#a;
 	#o;
+	#s;
 	get figures() {
 		return this.items?.length ? this.items : null;
 	}
 	get reduced() {
-		return l();
+		return v();
 	}
 	connectedCallback() {
-		super.connectedCallback(), typeof IntersectionObserver > "u" ? (this.#o = !0, this.drawn = !0) : (this.#r = new IntersectionObserver(([e]) => {
+		super.connectedCallback(), this.#s = l(() => this.finishCount()), typeof IntersectionObserver > "u" ? (this.#o = !0, this.drawn = !0) : (this.#r = new IntersectionObserver(([e]) => {
 			let t = e.rootBounds?.height ?? window.innerHeight;
-			(e.intersectionRatio >= z || e.intersectionRect.height >= t * z) && (this.#o = !0, this.drawn = !0, this.#r?.disconnect(), this.startCount());
-		}, { threshold: B }), this.#r.observe(this));
+			(e.intersectionRatio >= B || e.intersectionRect.height >= t * B) && (this.#o = !0, this.drawn = !0, this.#r?.disconnect(), this.startCount());
+		}, { threshold: V }), this.#r.observe(this));
 	}
 	disconnectedCallback() {
-		this.#r?.disconnect(), this.#t?.disconnect(), this.#t = null, cancelAnimationFrame(this.#i), super.disconnectedCallback();
+		this.#r?.disconnect(), this.#s?.(), this.#t?.disconnect(), this.#t = null, cancelAnimationFrame(this.#i), super.disconnectedCallback();
+	}
+	finishCount() {
+		this.#r?.disconnect(), cancelAnimationFrame(this.#i), this.#o = !0, this.#a = !0, !this.counting.every((e) => e === null) && (this.counting = this.#e.map(() => null), this.performUpdate());
 	}
 	willUpdate(e) {
 		super.willUpdate(e);
 		let t = this.state === "ready" ? this.figures ? this.figures.map((e) => e.value) : [this.value] : [], n = JSON.stringify(t);
-		n !== this.#n && (this.#n = n, this.#e = t.map(V), cancelAnimationFrame(this.#i), this.#a = !1, this.counting = this.reduced ? this.#e.map(() => null) : this.#e.map((e) => e ? H(e, 0) : null), this.#o && this.startCount());
+		n !== this.#n && (this.#n = n, this.#e = t.map(H), cancelAnimationFrame(this.#i), this.#a = !1, this.counting = this.reduced ? this.#e.map(() => null) : this.#e.map((e) => e ? U(e, 0) : null), this.#o && this.startCount());
 	}
 	startCount() {
 		if (this.#a || this.reduced || !this.#e.some(Boolean)) return;
 		this.#a = !0;
-		let e = u(this, "--dur-draw"), t = performance.now() + this.index * 40, n = (r) => {
+		let e = a(this, "--dur-draw"), t = performance.now() + this.index * 40, n = (r) => {
 			let i = e > 0 ? Math.min(1, Math.max(0, (r - t) / e)) : 1;
 			if (i === 1) {
 				this.counting = this.#e.map(() => null);
 				return;
 			}
 			let a = 1 - (1 - i) ** 3;
-			this.counting = this.#e.map((e) => e ? H(e, e.target * a) : null), this.#i = requestAnimationFrame(n);
+			this.counting = this.#e.map((e) => e ? U(e, e.target * a) : null), this.#i = requestAnimationFrame(n);
 		};
 		this.#i = requestAnimationFrame(n);
 	}
 	render() {
 		let e = this.figures, t = e != null && this.emphasis === "primary";
-		return p`<div
-      class=${o({
+		return f`<div
+      class=${h({
 			"lintje-kpi": !0,
 			"lintje-kpi--primary": t,
 			"lintje-kpi--icon": !!this.icon
 		})}
-      ${g({
-			borderTopColor: M[this.variable],
+      ${o({
+			borderTopColor: N[this.variable],
 			animationDelay: `${this.index * 40}ms`,
 			"--kpi-index": this.index
 		})}
     >
-      ${this.icon ? p`<span class="lintje-kpi__icon">${c(this.icon, { size: 20 })}</span>` : n}
+      ${this.icon ? f`<span class="lintje-kpi__icon">${_(this.icon, { size: 20 })}</span>` : c}
       <p class="lintje-kpi__label">${this.label}</p>
       ${this.body(e, t)}
     </div>`;
 	}
 	body(e, t) {
-		let r = this.state === "loading", i = this.state === "ready";
+		let n = this.state === "loading", r = this.state === "ready";
 		if (!e && this.gauge) return this.gauged(this.gauge);
-		if (!e) return r ? p`<div class="lintje-kpi__skeleton">
+		if (!e) return n ? f`<div class="lintje-kpi__skeleton">
             <lintje-skeleton height="34" width="70%"></lintje-skeleton>
             ${this.renderSparkline()}
             <lintje-skeleton height="13" width="90%"></lintje-skeleton>
             <lintje-skeleton height="12" width="55%"></lintje-skeleton>
-          </div>` : p`${this.figure(0, {
+          </div>` : f`${this.figure(0, {
 			value: this.value,
 			suffix: this.suffix
 		})}${this.renderSparkline()}${this.lines(!0)}`;
 		if (t) {
-			let [t, ...a] = e, o = this.detail && (i || this.state === "empty");
-			return p`
-        ${r ? p`<lintje-skeleton height="34" width="70%"></lintje-skeleton>` : this.figure(0, t)}
+			let [t, ...i] = e, a = this.detail && (r || this.state === "empty");
+			return f`
+        ${n ? f`<lintje-skeleton height="34" width="70%"></lintje-skeleton>` : this.figure(0, t)}
         ${this.renderSparkline()}
-        ${r ? p`<lintje-skeleton height="13" width="90%"></lintje-skeleton>` : this.lines(!1)}
-        ${a.length > 0 && this.dividers ? p`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : n}
-        ${a.length > 0 ? this.itemList(a, !0, !1, 1) : n}
-        ${r ? p`<lintje-skeleton height="12" width="55%"></lintje-skeleton>` : o ? p`<p class="lintje-kpi__detail">${this.detail}</p>` : n}
+        ${n ? f`<lintje-skeleton height="13" width="90%"></lintje-skeleton>` : this.lines(!1)}
+        ${i.length > 0 && this.dividers ? f`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : c}
+        ${i.length > 0 ? this.itemList(i, !0, !1, 1) : c}
+        ${n ? f`<lintje-skeleton height="12" width="55%"></lintje-skeleton>` : a ? f`<p class="lintje-kpi__detail">${this.detail}</p>` : c}
       `;
 		}
-		return p`
+		return f`
       ${this.itemList(e, !1, this.dividers && e.length > 1, 0)}
       ${this.renderSparkline()}
-      ${r ? p`<div class="lintje-kpi__skeleton">
+      ${n ? f`<div class="lintje-kpi__skeleton">
             <lintje-skeleton height="13" width="90%"></lintje-skeleton>
             <lintje-skeleton height="12" width="55%"></lintje-skeleton>
           </div>` : this.lines(!0)}
     `;
 	}
 	renderSparkline() {
-		if (!this.sparkline) return n;
-		if (this.state === "loading") return p`<div class="lintje-kpi__sparkline lintje-kpi__sparkline--loading">
+		if (!this.sparkline) return c;
+		if (this.state === "loading") return f`<div class="lintje-kpi__sparkline lintje-kpi__sparkline--loading">
         <lintje-skeleton height="100%"></lintje-skeleton>
       </div>`;
-		if (this.state !== "ready") return n;
-		let { width: e, height: t } = this.sparklineBox, r = I(this.sparkline.values, e, t), a = this.sparkline.values.at(-1) == null ? void 0 : r.at(-1)?.at(-1);
-		return p`<div
-      class=${o({
+		if (this.state !== "ready") return c;
+		let { width: e, height: t } = this.sparklineBox, n = L(this.sparkline.values, e, t), r = this.sparkline.values.at(-1) == null ? void 0 : n.at(-1)?.at(-1);
+		return f`<div
+      class=${h({
 			"lintje-kpi__sparkline": !0,
 			"is-drawn": this.drawn
 		})}
-      ${s(this.observeSparkline)}
-      ${g({ color: M[this.variable] })}
+      ${p(this.observeSparkline)}
+      ${o({ color: N[this.variable] })}
     >
       <svg
         class="lintje-kpi__sparkline-svg"
@@ -299,8 +308,8 @@ var U = class extends a {
       >
         <desc>${this.sparkline.description}</desc>
         <g class="lintje-kpi__sparkline-plot">
-          ${r.map((e) => this.run(e, t))}
-          ${a ? i`<circle class="lintje-kpi__sparkline-end" cx=${a[0].toFixed(1)} cy=${a[1].toFixed(1)} r=${F} />` : n}
+          ${n.map((e) => this.run(e, t))}
+          ${r ? m`<circle class="lintje-kpi__sparkline-end" cx=${r[0].toFixed(1)} cy=${r[1].toFixed(1)} r=${I} />` : c}
         </g>
       </svg>
     </div>`;
@@ -308,33 +317,33 @@ var U = class extends a {
 	run(e, t) {
 		if (e.length === 1) {
 			let [[t, n]] = e;
-			return i`<circle class="lintje-kpi__sparkline-point" cx=${t.toFixed(1)} cy=${n.toFixed(1)} r="2" />`;
+			return m`<circle class="lintje-kpi__sparkline-point" cx=${t.toFixed(1)} cy=${n.toFixed(1)} r="2" />`;
 		}
 		let [n] = e, r = e[e.length - 1];
-		return i`
+		return m`
       <polygon
         class="lintje-kpi__sparkline-area"
-        points=${`${n[0].toFixed(1)},${t} ${L(e)} ${r[0].toFixed(1)},${t}`}
+        points=${`${n[0].toFixed(1)},${t} ${R(e)} ${r[0].toFixed(1)},${t}`}
       />
-      <polyline class="lintje-kpi__sparkline-line" points=${L(e)} />
+      <polyline class="lintje-kpi__sparkline-line" points=${R(e)} />
     `;
 	}
 	gauged(e) {
-		let t = this.state === "loading", n = e.value === void 0 ? V(this.value)?.target ?? null : e.value, r = t ? p`<lintje-skeleton class="lintje-gauge__skeleton" height="34" width="40%"></lintje-skeleton>` : this.figure(0, {
+		let t = this.state === "loading", n = e.value === void 0 ? H(this.value)?.target ?? null : e.value, r = t ? f`<lintje-skeleton class="lintje-gauge__skeleton" height="34" width="40%"></lintje-skeleton>` : this.figure(0, {
 			value: this.value,
 			suffix: this.suffix
 		});
-		return p`
-      ${k({
+		return f`
+      ${A({
 			gauge: e,
 			value: n,
 			ready: this.state === "ready",
 			loading: t,
 			drawn: this.drawn || this.reduced,
-			color: M[this.variable]
+			color: N[this.variable]
 		}, r)}
       ${this.renderSparkline()}
-      ${t ? p`<div class="lintje-kpi__skeleton">
+      ${t ? f`<div class="lintje-kpi__skeleton">
             <lintje-skeleton height="13" width="90%"></lintje-skeleton>
             <lintje-skeleton height="12" width="55%"></lintje-skeleton>
           </div>` : this.lines(!0)}
@@ -342,65 +351,65 @@ var U = class extends a {
 	}
 	lines(e) {
 		let t = this.state === "ready";
-		return p`
-      ${t && this.trend ? this.trendLine(e) : n}
-      ${t && !this.trend && this.note ? p`<p class="lintje-kpi__note">${this.note}</p>` : n}
-      ${this.state === "empty" ? p`<p class="lintje-kpi__note">Geen gegevens</p>` : n}
-      ${this.state === "error" ? p`<p class="lintje-kpi__note lintje-kpi__note--error">
-            <span class="lintje-kpi__dot" aria-hidden="true"></span>Niet geladen
-          </p>` : n}
-      ${e && this.detail && (t && !this.trend || this.state === "empty") ? p`<p class="lintje-kpi__detail">${this.detail}</p>` : n}
+		return f`
+      ${t && this.trend ? this.trendLine(e) : c}
+      ${t && !this.trend && this.note ? f`<p class="lintje-kpi__note">${this.note}</p>` : c}
+      ${this.state === "empty" ? f`<p class="lintje-kpi__note">${this.message ?? "Geen gegevens"}</p>` : c}
+      ${this.state === "error" ? f`<p class="lintje-kpi__note lintje-kpi__note--error">
+            <span class="lintje-kpi__dot" aria-hidden="true"></span>${this.message ?? "Niet geladen"}
+          </p>${this.lastKnown ? f`<p class="lintje-kpi__last-known">${this.lastKnown}</p>` : c}` : c}
+      ${e && this.detail && (t && !this.trend || this.state === "empty") ? f`<p class="lintje-kpi__detail">${this.detail}</p>` : c}
     `;
 	}
 	trendLine(e) {
-		let { direction: t, sentence: r, inverted: i = !1 } = this.trend, a = "neutral";
-		return t !== "flat" && (a = (i ? t === "down" : t === "up") ? "good" : "bad"), p`
+		let { direction: t, sentence: n, inverted: r = !1 } = this.trend, i = "neutral";
+		return t !== "flat" && (i = (r ? t === "down" : t === "up") ? "good" : "bad"), f`
       <p class="lintje-trend"><span
-          class="lintje-trend__glyph lintje-trend__glyph--${a}"
+          class="lintje-trend__glyph lintje-trend__glyph--${i}"
           aria-hidden="true"
-          >${R[t]}</span
-        >${a === "neutral" ? n : p`<span class="visually-hidden">${a === "good" ? "gunstig" : "ongunstig"}: </span>`}<span>${r}</span></p>
-      ${e && this.detail ? p`<p class="lintje-trend__detail">${this.detail}</p>` : n}
+          >${z[t]}</span
+        >${i === "neutral" ? c : f`<span class="visually-hidden">${i === "good" ? "gunstig" : "ongunstig"}: </span>`}<span>${n}</span></p>
+      ${e && this.detail ? f`<p class="lintje-trend__detail">${this.detail}</p>` : c}
     `;
 	}
-	itemList(e, t, r, i) {
-		let a = this.state === "loading";
-		return p`<div class="lintje-kpi__figures">
+	itemList(e, t, n, r) {
+		let i = this.state === "loading";
+		return f`<div class="lintje-kpi__figures">
       <div
-        class=${o({
+        class=${h({
 			"lintje-kpi__items": !0,
 			[`lintje-kpi__items--${t ? "row" : this.layout}`]: !0,
-			"lintje-kpi__items--divided": r
+			"lintje-kpi__items--divided": n
 		})}
       >
-        ${e.map((e, s) => p`
-            ${s > 0 && r ? p`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : n}
+        ${e.map((e, a) => f`
+            ${a > 0 && n ? f`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : c}
             <div
-              class=${o({
+              class=${h({
 			"lintje-kpi__item": !0,
-			"lintje-kpi__item--comparison": !t && s > 0
+			"lintje-kpi__item--comparison": !t && a > 0
 		})}
             >
-              ${a ? p`<lintje-skeleton
+              ${i ? f`<lintje-skeleton
                     height=${t ? 20 : 34}
                     width="70%"
-                  ></lintje-skeleton>` : this.figure(i + s, e, t)}
-              ${e.period ? p`<p class="lintje-kpi__period">${e.period}</p>` : n}
+                  ></lintje-skeleton>` : this.figure(r + a, e, t)}
+              ${e.period ? f`<p class="lintje-kpi__period">${e.period}</p>` : c}
             </div>
           `)}
       </div>
     </div>`;
 	}
-	figure(e, t, r = !1) {
-		let i = this.state === "ready", a = this.counting[e] ?? null, o = this.emphasis === "primary" && e === 0 ? t.period : void 0, s = [i ? t.suffix : void 0, o].filter(Boolean).join(" · ");
-		return p`<p class=${r ? "lintje-kpi__secondary-value" : "lintje-kpi__value"}>
-      ${i ? a == null ? t.value : p`<span class="lintje-kpi__count">
+	figure(e, t, n = !1) {
+		let r = this.state === "ready", i = this.counting[e] ?? null, a = this.emphasis === "primary" && e === 0 ? t.period : void 0, o = [r ? t.suffix : void 0, a].filter(Boolean).join(" · ");
+		return f`<p class=${n ? "lintje-kpi__secondary-value" : "lintje-kpi__value"}>
+      ${r ? i == null ? t.value : f`<span class="lintje-kpi__count">
               <span class="lintje-kpi__count-final">${t.value}</span>
-              <span class="lintje-kpi__count-live" aria-hidden="true">${a}</span>
-            </span>` : "—"}${s ? p`<span class="lintje-kpi__suffix">${s}</span>` : n}
+              <span class="lintje-kpi__count-live" aria-hidden="true">${i}</span>
+            </span>` : "—"}${o ? f`<span class="lintje-kpi__suffix">${o}</span>` : c}
     </p>`;
 	}
 };
-t("lintje-kpi", U);
+r("lintje-kpi", W);
 //#endregion
-export { U as LintjeKpi, I as sparklineRuns };
+export { W as LintjeKpi, L as sparklineRuns };

package/dist-elements/tag/level-meter.js

@@ -1,4 +1,4 @@
-import { Bt as e, Ht as t, Z 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, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/feedback/level-meter/level-meter.css?inline
 var o = ":host { display: inline-flex; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-level-meter {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text-primary);\n  font: var(--text-ui);\n  font-weight: 700;\n}\n.lintje-level-meter__bars {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  height: var(--space-6);\n}\n/* Centred bars read as a voice; their height is the sound. */\n.lintje-level-meter__bar {\n  width: 4px;\n  background: var(--color-accent-line);\n  transition: height var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-level-meter.is-quiet .lintje-level-meter__bar { background: var(--color-border-strong); }\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-level-meter__bar { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .lintje-level-meter__bar { background: CanvasText; }\n}\n", s = [
 	.4,
@@ -15,12 +15,12 @@ var o = ":host { display: inline-flex; min-width: 0; }\n:host([hidden]) { displa
 function c(e) {
 	return e < .05 ? "Stil" : e < .2 ? "Zacht" : "Goed";
 }
-var l = class extends a {
+var l = class extends e {
 	constructor(...e) {
 		super(...e), this.words = !0;
 	}
 	static {
-		this.styles = t(o);
+		this.styles = n(o);
 	}
 	static {
 		this.properties = {
@@ -32,27 +32,27 @@ var l = class extends a {
 		};
 	}
 	render() {
-		let e = this.level == null ? null : Math.min(1, Math.max(0, this.level)), t = e === null ? "Nog niet gemeten" : c(e), a = e === null || e < .05;
-		return r`<span
-      class=${n({
+		let e = this.level == null ? null : Math.min(1, Math.max(0, this.level)), t = e === null ? "Nog niet gemeten" : c(e), n = e === null || e < .05;
+		return i`<span
+      class=${a({
 			"lintje-level-meter": !0,
-			"is-quiet": a
+			"is-quiet": n
 		})}
       role="img"
       aria-label=${`Geluid: ${t.toLowerCase()}`}
     >
       <span class="lintje-level-meter__bars" aria-hidden="true">
-        ${s.map((t) => r`<span
+        ${s.map((t) => i`<span
               class="lintje-level-meter__bar"
-              ${i({ height: `${a ? 12 : Math.max(12, Math.round(t * e * 100))}%` })}
+              ${r({ height: `${n ? 12 : Math.max(12, Math.round(t * e * 100))}%` })}
             ></span>`)}
       </span>
-      ${this.words ? r`<span class="lintje-level-meter__word" aria-hidden="true"
+      ${this.words ? i`<span class="lintje-level-meter__word" aria-hidden="true"
             >${e === null ? "—" : t}</span
           >` : ""}
     </span>`;
 	}
 };
-e("lintje-level-meter", l);
+t("lintje-level-meter", l);
 //#endregion
 export { l as LintjeLevelMeter, c as levelWord };