lintje 0.3.0 → 0.5.0

package/dist-elements/tag/kpi.js

@@ -1,6 +1,6 @@
-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, lt as l, n as u, nn as d, p as f, rn as p, s as m, st as h, t as g, ut as _, y as v } from "../chunks/base-CbmWxUig.js";
+import { F as e, O as t, P as n, Yt as r, Zt as i, _ as a, bt as o, en as s, f 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-CVKIPSLx.js";
 //#region src/components/charts/kpi/kpi.css?inline
-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;
+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 runs from beside the target's label to just under the bar. */\n.lintje-gauge__plot { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }\n.lintje-gauge__bar {\n  position: relative;\n  height: var(--space-4);\n  margin-bottom: 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: 0;\n  bottom: 0;\n  border-left: 1px dashed var(--color-chart-emphasis);\n}\n.lintje-gauge__target,\n.lintje-gauge__scale {\n  font: var(--text-axis);\n  color: var(--color-chart-axis);\n}\n.lintje-gauge__target-label { display: block; width: max-content; white-space: nowrap; }\n.lintje-gauge__target-label--start { padding-left: var(--space-2); }\n.lintje-gauge__target-label--end { padding-right: var(--space-2); transform: translateX(-100%); }\n.lintje-gauge__scale { display: flex; justify-content: space-between; }\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 {
@@ -14,18 +14,18 @@ function D(e, t) {
 	return [e * Math.cos(n), -e * Math.sin(n)];
 }
 function O(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}`;
+	let { gauge: n, value: r } = e, i = n.target == null ? "" : `, ${n.targetLabel ?? "doel"} ${c(n.target)}`;
+	return `${r == null || !e.ready ? "" : `${c(r)} `}op een schaal van ${c(t.min)} tot ${c(t.max)}${i}`;
 }
 function k(e) {
-	return `${e.targetLabel ?? "doel"} ${m(e.target)}`;
+	return `${e.targetLabel ?? "doel"} ${c(e.target)}`;
 }
 function A(e, t) {
 	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), s = i && r != null && a.share(r) > 0 ? a.share(r) : null, l = s == null ? null : D(b, s), u = !e.loading && n.target != null, f = u ? a.share(n.target) : 0, [g, _] = D(S, f), [v, y] = D(C, f), [A, j] = D(w, f), M = Math.cos(Math.PI * (1 - f)), N = M > .3 ? "start" : M < -.3 ? "end" : "middle", P = (e) => `${(e + T) / 168 * 100}%`;
-	return d`<div class="lintje-gauge__frame"><div
+	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,
@@ -37,58 +37,60 @@ function j(e, t) {
       <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} />
-      ${l ? p`<path class="lintje-gauge__arc-fill" pathLength="1"
-                d="M ${-64} 0 A ${b} ${b} 0 0 1 ${l[0].toFixed(2)} ${l[1].toFixed(2)}"
-                stroke-width=${x} ${o({ stroke: e.color })} />` : c}
-      ${u ? p`<line class="lintje-gauge__tick" x1=${g.toFixed(2)} y1=${_.toFixed(2)}
-                x2=${v.toFixed(2)} y2=${y.toFixed(2)} />` : c}
+      ${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 })} />` : s}
+      ${d ? m`<line class="lintje-gauge__tick" x1=${g.toFixed(2)} y1=${_.toFixed(2)}
+                x2=${v.toFixed(2)} y2=${y.toFixed(2)} />` : s}
     </svg>
     <span class="lintje-gauge__label lintje-gauge__label--limit" aria-hidden="true"
           ${o({
 		left: P(-64),
 		top: "100%"
-	})}>${m(a.min)}</span>
+	})}>${c(a.min)}</span>
     <span class="lintje-gauge__label lintje-gauge__label--limit" aria-hidden="true"
           ${o({
 		left: P(b),
 		top: "100%"
-	})}>${m(a.max)}</span>
-    ${u ? d`<span class="lintje-gauge__label lintje-gauge__label--target lintje-gauge__label--${N}"
+	})}>${c(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 + T) / T * 100}%`)(j)
-	})}>${k(n)}</span>` : c}
+	})}>${k(n)}</span>` : s}
   </div></div>`;
 }
 function M(e, t) {
-	let { gauge: n, value: r, ready: i } = e, a = E(n), s = i && r != null ? a.share(r) : null, l = !e.loading && n.target != null, u = l ? a.share(n.target) : 0, f = u > .8 ? "end" : u < .2 ? "start" : "middle";
-	return d`${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 < .5 ? "start" : "end";
+	return f`${t}
     <div class=${h({
 		"lintje-gauge": !0,
 		"lintje-gauge--linear": !0,
 		"is-drawn": e.drawn
 	})}
          role="img" aria-label=${O(e, a)}>
-      <div class="lintje-gauge__bar">
-        ${s == null ? c : d`<div class="lintje-gauge__bar-fill"
-                ${o({
-		width: `${s * 100}%`,
+      <div class="lintje-gauge__plot">
+        ${n.target == null ? s : f`<div class="lintje-gauge__target">${u ? f`<span class="lintje-gauge__target-label lintje-gauge__target-label--${p}"
+                      ${o({ marginLeft: `${d * 100}%` })}>${k(n)}</span>` : f`&nbsp;`}</div>`}
+        <div class="lintje-gauge__bar">
+          ${l == null ? s : f`<div class="lintje-gauge__bar-fill"
+                  ${o({
+		width: `${l * 100}%`,
 		background: e.color
 	})}></div>`}
-        ${l ? d`<span class="lintje-gauge__mark" ${o({ left: `${u * 100}%` })}></span>` : c}
+        </div>
+        ${u ? f`<span class="lintje-gauge__mark" ${o({ left: `${d * 100}%` })}></span>` : s}
       </div>
       <div class="lintje-gauge__scale">
-        <span>${m(a.min)}</span>
-        ${l ? d`<span class="lintje-gauge__scale-target lintje-gauge__scale-target--${f}"
-                ${o({ left: `${u * 100}%` })}>${k(n)}</span>` : c}
-        <span>${m(a.max)}</span>
+        <span>${c(a.min)}</span>
+        <span>${c(a.max)}</span>
       </div>
     </div>`;
 }
 //#endregion
 //#region src/components/charts/kpi/kpi.ts
 var N = {
-	...Object.fromEntries(g.map((e) => [e, u(e)])),
+	...Object.fromEntries(g.map((e) => [e, d(e)])),
 	coverage: "var(--color-text-muted)"
 }, P = {
 	width: 200,
@@ -148,7 +150,7 @@ var W = class extends n {
 	static {
 		this.styles = [
 			e,
-			l,
+			u,
 			i(t),
 			i(y)
 		];
@@ -202,7 +204,7 @@ var W = class extends n {
 		return v();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#s = s(() => this.finishCount()), 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 >= B || e.intersectionRect.height >= t * B) && (this.#o = !0, this.drawn = !0, this.#r?.disconnect(), this.startCount());
 		}, { threshold: V }), this.#r.observe(this));
@@ -234,7 +236,7 @@ var W = class extends n {
 	}
 	render() {
 		let e = this.figures, t = e != null && this.emphasis === "primary";
-		return d`<div
+		return f`<div
       class=${h({
 			"lintje-kpi": !0,
 			"lintje-kpi--primary": t,
@@ -246,7 +248,7 @@ var W = class extends n {
 			"--kpi-index": this.index
 		})}
     >
-      ${this.icon ? d`<span class="lintje-kpi__icon">${_(this.icon, { size: 20 })}</span>` : c}
+      ${this.icon ? f`<span class="lintje-kpi__icon">${_(this.icon, { size: 20 })}</span>` : s}
       <p class="lintje-kpi__label">${this.label}</p>
       ${this.body(e, t)}
     </div>`;
@@ -254,48 +256,48 @@ var W = class extends n {
 	body(e, t) {
 		let n = this.state === "loading", r = this.state === "ready";
 		if (!e && this.gauge) return this.gauged(this.gauge);
-		if (!e) return n ? d`<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>` : d`${this.figure(0, {
+          </div>` : f`${this.figure(0, {
 			value: this.value,
 			suffix: this.suffix
 		})}${this.renderSparkline()}${this.lines(!0)}`;
 		if (t) {
 			let [t, ...i] = e, a = this.detail && (r || this.state === "empty");
-			return d`
-        ${n ? d`<lintje-skeleton height="34" width="70%"></lintje-skeleton>` : this.figure(0, t)}
+			return f`
+        ${n ? f`<lintje-skeleton height="34" width="70%"></lintje-skeleton>` : this.figure(0, t)}
         ${this.renderSparkline()}
-        ${n ? d`<lintje-skeleton height="13" width="90%"></lintje-skeleton>` : this.lines(!1)}
-        ${i.length > 0 && this.dividers ? d`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : c}
-        ${i.length > 0 ? this.itemList(i, !0, !1, 1) : c}
-        ${n ? d`<lintje-skeleton height="12" width="55%"></lintje-skeleton>` : a ? d`<p class="lintje-kpi__detail">${this.detail}</p>` : c}
+        ${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>` : s}
+        ${i.length > 0 ? this.itemList(i, !0, !1, 1) : s}
+        ${n ? f`<lintje-skeleton height="12" width="55%"></lintje-skeleton>` : a ? f`<p class="lintje-kpi__detail">${this.detail}</p>` : s}
       `;
 		}
-		return d`
+		return f`
       ${this.itemList(e, !1, this.dividers && e.length > 1, 0)}
       ${this.renderSparkline()}
-      ${n ? d`<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 c;
-		if (this.state === "loading") return d`<div class="lintje-kpi__sparkline lintje-kpi__sparkline--loading">
+		if (!this.sparkline) return s;
+		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 c;
+		if (this.state !== "ready") return s;
 		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 d`<div
+		return f`<div
       class=${h({
 			"lintje-kpi__sparkline": !0,
 			"is-drawn": this.drawn
 		})}
-      ${f(this.observeSparkline)}
+      ${p(this.observeSparkline)}
       ${o({ color: N[this.variable] })}
     >
       <svg
@@ -309,7 +311,7 @@ var W = class extends n {
         <desc>${this.sparkline.description}</desc>
         <g class="lintje-kpi__sparkline-plot">
           ${n.map((e) => this.run(e, t))}
-          ${r ? p`<circle class="lintje-kpi__sparkline-end" cx=${r[0].toFixed(1)} cy=${r[1].toFixed(1)} r=${I} />` : c}
+          ${r ? m`<circle class="lintje-kpi__sparkline-end" cx=${r[0].toFixed(1)} cy=${r[1].toFixed(1)} r=${I} />` : s}
         </g>
       </svg>
     </div>`;
@@ -317,10 +319,10 @@ var W = class extends n {
 	run(e, t) {
 		if (e.length === 1) {
 			let [[t, n]] = e;
-			return p`<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 p`
+		return m`
       <polygon
         class="lintje-kpi__sparkline-area"
         points=${`${n[0].toFixed(1)},${t} ${R(e)} ${r[0].toFixed(1)},${t}`}
@@ -329,11 +331,11 @@ var W = class extends n {
     `;
 	}
 	gauged(e) {
-		let t = this.state === "loading", n = e.value === void 0 ? H(this.value)?.target ?? null : e.value, r = t ? d`<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 d`
+		return f`
       ${A({
 			gauge: e,
 			value: n,
@@ -343,7 +345,7 @@ var W = class extends n {
 			color: N[this.variable]
 		}, r)}
       ${this.renderSparkline()}
-      ${t ? d`<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)}
@@ -351,30 +353,30 @@ var W = class extends n {
 	}
 	lines(e) {
 		let t = this.state === "ready";
-		return d`
-      ${t && this.trend ? this.trendLine(e) : c}
-      ${t && !this.trend && this.note ? d`<p class="lintje-kpi__note">${this.note}</p>` : c}
-      ${this.state === "empty" ? d`<p class="lintje-kpi__note">${this.message ?? "Geen gegevens"}</p>` : c}
-      ${this.state === "error" ? d`<p class="lintje-kpi__note lintje-kpi__note--error">
+		return f`
+      ${t && this.trend ? this.trendLine(e) : s}
+      ${t && !this.trend && this.note ? f`<p class="lintje-kpi__note">${this.note}</p>` : s}
+      ${this.state === "empty" ? f`<p class="lintje-kpi__note">${this.message ?? "Geen gegevens"}</p>` : s}
+      ${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 ? d`<p class="lintje-kpi__last-known">${this.lastKnown}</p>` : c}` : c}
-      ${e && this.detail && (t && !this.trend || this.state === "empty") ? d`<p class="lintje-kpi__detail">${this.detail}</p>` : c}
+          </p>${this.lastKnown ? f`<p class="lintje-kpi__last-known">${this.lastKnown}</p>` : s}` : s}
+      ${e && this.detail && (t && !this.trend || this.state === "empty") ? f`<p class="lintje-kpi__detail">${this.detail}</p>` : s}
     `;
 	}
 	trendLine(e) {
 		let { direction: t, sentence: n, inverted: r = !1 } = this.trend, i = "neutral";
-		return t !== "flat" && (i = (r ? t === "down" : t === "up") ? "good" : "bad"), d`
+		return t !== "flat" && (i = (r ? t === "down" : t === "up") ? "good" : "bad"), f`
       <p class="lintje-trend"><span
           class="lintje-trend__glyph lintje-trend__glyph--${i}"
           aria-hidden="true"
           >${z[t]}</span
-        >${i === "neutral" ? c : d`<span class="visually-hidden">${i === "good" ? "gunstig" : "ongunstig"}: </span>`}<span>${n}</span></p>
-      ${e && this.detail ? d`<p class="lintje-trend__detail">${this.detail}</p>` : c}
+        >${i === "neutral" ? s : 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>` : s}
     `;
 	}
 	itemList(e, t, n, r) {
 		let i = this.state === "loading";
-		return d`<div class="lintje-kpi__figures">
+		return f`<div class="lintje-kpi__figures">
       <div
         class=${h({
 			"lintje-kpi__items": !0,
@@ -382,19 +384,19 @@ var W = class extends n {
 			"lintje-kpi__items--divided": n
 		})}
       >
-        ${e.map((e, a) => d`
-            ${a > 0 && n ? d`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : c}
+        ${e.map((e, a) => f`
+            ${a > 0 && n ? f`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : s}
             <div
               class=${h({
 			"lintje-kpi__item": !0,
 			"lintje-kpi__item--comparison": !t && a > 0
 		})}
             >
-              ${i ? d`<lintje-skeleton
+              ${i ? f`<lintje-skeleton
                     height=${t ? 20 : 34}
                     width="70%"
                   ></lintje-skeleton>` : this.figure(r + a, e, t)}
-              ${e.period ? d`<p class="lintje-kpi__period">${e.period}</p>` : c}
+              ${e.period ? f`<p class="lintje-kpi__period">${e.period}</p>` : s}
             </div>
           `)}
       </div>
@@ -402,11 +404,11 @@ var W = class extends n {
 	}
 	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 d`<p class=${n ? "lintje-kpi__secondary-value" : "lintje-kpi__value"}>
-      ${r ? i == null ? t.value : d`<span class="lintje-kpi__count">
+		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">${i}</span>
-            </span>` : "—"}${o ? d`<span class="lintje-kpi__suffix">${o}</span>` : c}
+            </span>` : "—"}${o ? f`<span class="lintje-kpi__suffix">${o}</span>` : s}
     </p>`;
 	}
 };

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

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, bt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, bt as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.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,

package/dist-elements/tag/list.js

@@ -1,5 +1,5 @@
-import { H as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, bt as s, en as c, h as l, lt as u, nn as d, st as f, ut as p } from "../chunks/base-CbmWxUig.js";
-import { n as m } from "../chunks/focus-trap-BwOxE5BX.js";
+import { H as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, bt as s, en as c, g as l, lt as u, nn as d, st as f, ut as p } from "../chunks/base-CVKIPSLx.js";
+import { n as m } from "../chunks/focus-trap-rje9Oz19.js";
 import "./menu-button.js";
 import "./empty-state.js";
 import "./text-input.js";

package/dist-elements/tag/log-viewer.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/content/log-viewer/log-viewer.js'