lintje 0.2.0 → 0.3.0

package/dist-elements/tag/hero.js

@@ -1,11 +1,11 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Z as a, et as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
 //#region src/components/frame/hero/hero.css?inline
-var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The side padding is the content column's, taken of the full width the band stands in. */\n.lintje-hero__band {\n  padding: calc(var(--space-10) + var(--space-4)) calc(var(--page-pad-x) + var(--page-gutter))\n    calc(var(--space-10) + var(--space-2));\n  background: var(--color-hero-bg);\n  color: var(--color-hero-text);\n}\n/* With an aside the text keeps its column and the picture takes the room to its right. */\n.lintje-hero.has-aside .lintje-hero__band {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n}\n.lintje-hero.has-overlap .lintje-hero__band {\n  padding-bottom: calc(var(--space-10) + var(--space-2) + var(--hero-overlap));\n}\n.lintje-hero__band :focus-visible { outline-color: var(--color-hero-focus); }\n\n.lintje-hero__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);\n}\n\n.lintje-hero__aside {\n  flex: 0 1 var(--w-hero-aside);\n  min-width: 0;\n  display: flex; justify-content: flex-end;\n}\n.lintje-hero__aside ::slotted(*) { max-width: 100%; }\n/* A picture keeps its proportions when the column narrows it. */\n.lintje-hero__aside ::slotted(img) { height: auto; }\n.lintje-hero:not(.has-aside) .lintje-hero__aside { display: none; }\n\n/* Below 1024 px the text needs the room; the picture only supports it. */\n@media (max-width: 1023px) {\n  .lintje-hero.has-aside .lintje-hero__band { display: block; }\n  .lintje-hero__aside { display: none; }\n  .lintje-hero__panel { margin-top: var(--space-8); }\n}\n\n/* Content beside the text takes the other half from 1024 px; below it, it follows the text. */\n.lintje-hero:not(.has-panel) .lintje-hero__panel { display: none; }\n.lintje-hero__panel { display: flex; flex-direction: column; min-width: 0; }\n.lintje-hero__panel ::slotted(*) { flex: 1 1 auto; }\n.lintje-hero.has-panel .lintje-hero__aside { display: none; }\n@media (min-width: 1024px) {\n  .lintje-hero.has-panel .lintje-hero__band {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    align-items: stretch;\n    gap: var(--space-10);\n  }\n}\n.lintje-hero__heading { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-hero__title { margin: 0; font: var(--text-h1-display); }\n.lintje-hero__description {\n  margin: 0;\n  max-width: var(--w-text);\n  font-size: 1.25rem;\n  line-height: 1.4;\n  text-wrap: pretty;\n}\n\n.lintje-hero__action {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--h-touch);\n  color: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n}\n.lintje-hero__action:hover { text-decoration-thickness: 2px; }\n\n/* Pulled up by the room the band keeps for it; without content it takes no space. */\n.lintje-hero__overlap {\n  position: relative;\n  margin-top: calc(-1 * var(--hero-overlap));\n  padding: 0 calc(var(--page-pad-x) + var(--page-gutter));\n}\n.lintje-hero:not(.has-overlap) .lintje-hero__overlap { display: none; }\n\n@media (max-width: 767px) {\n  .lintje-hero__band { padding-top: var(--space-8); padding-bottom: var(--space-8); }\n  .lintje-hero.has-overlap .lintje-hero__band {\n    padding-bottom: calc(var(--space-8) + var(--hero-overlap));\n  }\n  .lintje-hero__title { font: var(--text-h1); }\n  .lintje-hero__description { font-size: 1.125rem; }\n}\n", u = class extends c {
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The side padding is the content column's, taken of the full width the band stands in. */\n.lintje-hero__band {\n  padding: calc(var(--space-10) + var(--space-4)) calc(var(--page-pad-x) + var(--page-gutter))\n    calc(var(--space-10) + var(--space-2));\n  background: var(--color-hero-bg);\n  color: var(--color-hero-text);\n}\n/* With an aside the text keeps its column and the picture takes the room to its right. */\n.lintje-hero.has-aside .lintje-hero__band {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n}\n.lintje-hero.has-overlap .lintje-hero__band {\n  padding-bottom: calc(var(--space-10) + var(--space-2) + var(--hero-overlap));\n}\n.lintje-hero__band :focus-visible { outline-color: var(--color-hero-focus); }\n\n.lintje-hero__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);\n}\n\n.lintje-hero__aside {\n  flex: 0 1 var(--w-hero-aside);\n  min-width: 0;\n  display: flex; justify-content: flex-end;\n}\n.lintje-hero__aside ::slotted(*) { max-width: 100%; }\n/* A picture keeps its proportions when the column narrows it. */\n.lintje-hero__aside ::slotted(img) { height: auto; }\n.lintje-hero:not(.has-aside) .lintje-hero__aside { display: none; }\n\n/* Below 1024 px the text needs the room; the picture only supports it. */\n@media (max-width: 1023px) {\n  .lintje-hero.has-aside .lintje-hero__band { display: block; }\n  .lintje-hero__aside { display: none; }\n  .lintje-hero__panel { margin-top: var(--space-8); }\n}\n\n/* Content beside the text takes the other half from 1024 px; below it, it follows the text. */\n.lintje-hero:not(.has-panel) .lintje-hero__panel { display: none; }\n.lintje-hero__panel { display: flex; flex-direction: column; min-width: 0; }\n.lintje-hero__panel ::slotted(*) { flex: 1 1 auto; }\n.lintje-hero.has-panel .lintje-hero__aside { display: none; }\n@media (min-width: 1024px) {\n  .lintje-hero.has-panel .lintje-hero__band {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    align-items: stretch;\n    gap: var(--space-10);\n  }\n}\n.lintje-hero__heading { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-hero__title { margin: 0; font: var(--text-h1-display); }\n.lintje-hero__description {\n  margin: 0;\n  max-width: var(--w-text);\n  font-size: 1.25rem;\n  line-height: 1.4;\n  text-wrap: pretty;\n}\n\n.lintje-hero__action {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--h-touch);\n  color: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n}\n.lintje-hero__action:hover { text-decoration-thickness: 2px; }\n\n/* Pulled up by the room the band keeps for it; without content it takes no space. */\n.lintje-hero__overlap {\n  position: relative;\n  margin-top: calc(-1 * var(--hero-overlap));\n  padding: 0 calc(var(--page-pad-x) + var(--page-gutter));\n}\n.lintje-hero:not(.has-overlap) .lintje-hero__overlap { display: none; }\n\n@media screen and (max-width: 767px) {\n  .lintje-hero__band { padding-top: var(--space-8); padding-bottom: var(--space-8); }\n  .lintje-hero.has-overlap .lintje-hero__band {\n    padding-bottom: calc(var(--space-8) + var(--hero-overlap));\n  }\n  .lintje-hero__title { font: var(--text-h1); }\n  .lintje-hero__description { font-size: 1.125rem; }\n}\n", u = class extends t {
 	constructor(...e) {
 		super(...e), this.heading = "", this.hasOverlap = !1, this.hasAside = !1, this.hasPanel = !1;
 	}
 	static {
-		this.styles = [e, r(l)];
+		this.styles = [a, r(l)];
 	}
 	static {
 		this.properties = {
@@ -27,12 +27,12 @@ var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	onPanelChange(e) {
 		this.hasPanel = e.target.assignedElements().length > 0;
 	}
-	onAction(e) {
-		this.href && i(e) && this.followLink(this.href, e);
+	onAction(t) {
+		this.href && e(t) && this.followLink(this.href, t);
 	}
 	render() {
-		return s`<div
-      class=${a({
+		return o`<div
+      class=${s({
 			"lintje-hero": !0,
 			"has-overlap": this.hasOverlap,
 			"has-aside": this.hasAside,
@@ -44,12 +44,12 @@ var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
           <slot name="status"></slot>
           <div class="lintje-hero__heading">
             <h2 class="lintje-hero__title">${this.heading}</h2>
-            ${this.description ? s`<p class="lintje-hero__description">${this.description}</p>` : n}
+            ${this.description ? o`<p class="lintje-hero__description">${this.description}</p>` : i}
           </div>
           <slot></slot>
-          ${this.action && this.href ? s`<a class="lintje-hero__action" href=${this.href} @click=${this.onAction}
-                >${this.action}${o("functioneel-delta-rechts", { size: 16 })}</a
-              >` : n}
+          ${this.action && this.href ? o`<a class="lintje-hero__action" href=${this.href} @click=${this.onAction}
+                >${this.action}${c("functioneel-delta-rechts", { size: 16 })}</a
+              >` : i}
         </div>
         <div class="lintje-hero__aside">
           <slot name="aside" @slotchange=${this.onAsideChange}></slot>
@@ -64,6 +64,6 @@ var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     </div>`;
 	}
 };
-t("lintje-hero", u);
+n("lintje-hero", u);
 //#endregion
 export { u as LintjeHero };

package/dist-elements/tag/highlight.js

@@ -1,4 +1,4 @@
-import { Bt as e, Ht as t, Z as n, qt as r, zt as i } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, nn as r, st as i } from "../chunks/base-CbmWxUig.js";
 //#region src/components/content/highlight/highlight.css?inline
 var a = ":host { display: inline; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `clone`: a marking that wraps paints its fill and line on every line it covers. */\n.lintje-highlight {\n  font: inherit;\n  color: var(--color-text-primary);\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.lintje-highlight--uncertain {\n  background: var(--color-attention-bg);\n  border-bottom: 2px dotted var(--color-attention);\n}\n\n.lintje-highlight--term {\n  background: var(--color-bg-selected);\n  border: 0;\n  border-bottom: 2px solid var(--color-accent-line);\n  padding: 0;\n}\n.lintje-highlight--control { cursor: help; }\n.lintje-highlight--control:hover { background: var(--color-bg-subtle); }\n\n.lintje-highlight--match {\n  background: var(--color-warning);\n  color: var(--color-text-on-light-fill);\n}\n.lintje-highlight--match.is-current { outline: 2px solid var(--color-text-primary); }\n\n.lintje-highlight--removed {\n  background: var(--color-error-bg);\n  text-decoration: line-through;\n}\n.lintje-highlight--added {\n  background: var(--color-success-bg);\n  text-decoration: underline;\n}\n\n/* Forced colours: a match is only a fill, so it takes the system's marking colours. */\n@media (forced-colors: active) {\n  .lintje-highlight--match { forced-color-adjust: none; background: Mark; color: MarkText; }\n  .lintje-highlight--match.is-current { outline-color: CanvasText; }\n}\n", o = {
 	uncertain: "lage zekerheid",
@@ -7,12 +7,12 @@ var a = ":host { display: inline; }\n:host([hidden]) { display: none; }\n\n/* --
 }, s = {
 	removed: "verwijderd",
 	added: "toegevoegd"
-}, c = class extends i {
+}, c = class extends e {
 	constructor(...e) {
 		super(...e), this.kind = "match", this.current = !1;
 	}
 	static {
-		this.styles = t(a);
+		this.styles = n(a);
 	}
 	static {
 		this.properties = {
@@ -32,7 +32,7 @@ var a = ":host { display: inline; }\n:host([hidden]) { display: none; }\n\n/* --
 		return this.kind === "term" && !!this.explanation;
 	}
 	get classes() {
-		return n({
+		return i({
 			"lintje-highlight": !0,
 			[`lintje-highlight--${this.kind}`]: !0,
 			"lintje-highlight--control": this.isControl,
@@ -55,6 +55,6 @@ var a = ":host { display: inline; }\n:host([hidden]) { display: none; }\n\n/* --
     >`;
 	}
 };
-e("lintje-highlight", c);
+t("lintje-highlight", c);
 //#endregion
 export { c as LintjeHighlight };

package/dist-elements/tag/icon-button.js

@@ -1 +1 @@
-export { D as LintjeIconButton } from "../chunks/base-Bg-IFOPG.js";
+export { j as LintjeIconButton } from "../chunks/base-CbmWxUig.js";

package/dist-elements/tag/icon.js

@@ -1 +1 @@
-export { gt as ICONS, _ as ICON_NAMES, v as LintjeIcon } from "../chunks/base-Bg-IFOPG.js";
+export { Et as ICONS, b as ICON_NAMES, x as LintjeIcon } from "../chunks/base-CbmWxUig.js";

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

@@ -1,32 +1,10 @@
-import { Bt as e, Gt as t, Ht as n, U as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Q as t, X as n, Y as r, Yt as i, Zt as a, en as o, nn as s } from "../chunks/base-CbmWxUig.js";
 import "./list.js";
 //#region src/components/feedback/job-list/job-list.css?inline
-var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The rows are the work list's (`lintje-list`); the job list adds no look of its own. */\n.lintje-job-list { display: block; }\n", s = {
-	queued: {
-		label: "Wachtrij",
-		tone: "neutral"
-	},
-	busy: {
-		label: "Bezig",
-		tone: "busy"
-	},
-	paused: {
-		label: "Onderbroken",
-		tone: "warning"
-	},
-	done: {
-		label: "Klaar",
-		tone: "success"
-	},
-	error: {
-		label: "Mislukt",
-		tone: "error"
-	},
-	cancelled: {
-		label: "Geannuleerd",
-		tone: "subtle"
-	}
-}, c = {
+var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The rows are the work list's (`lintje-list`); the job list adds no look of its own. */\n.lintje-job-list { display: block; }\n", l = Object.fromEntries(Object.keys(r).map((e) => [e, {
+	label: r[e],
+	tone: n[e]
+}])), u = {
 	queued: (e) => `${e} staat in de wachtrij.`,
 	busy: (e) => `${e} wordt verwerkt.`,
 	paused: (e) => `${e} is onderbroken.`,
@@ -34,11 +12,11 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	error: (e) => `${e} is mislukt.`,
 	cancelled: (e) => `${e} is geannuleerd.`
 };
-function l(e) {
-	let t = c[e.state](e.name), n = e.state === "error" ? e.detail?.trim() : "";
+function d(e) {
+	let t = u[e.state](e.name), n = e.state === "error" ? e.detail?.trim() : "";
 	return n ? `${t} ${n}${/[.!?]$/.test(n) ? "" : "."}` : t;
 }
-var u = {
+var f = {
 	queued: {
 		label: "Annuleren",
 		event: "lintje-job-cancel"
@@ -60,8 +38,8 @@ var u = {
 		event: "lintje-job-remove"
 	}
 };
-function d(e, t = !1) {
-	let n = typeof e.progress == "number" && !Number.isNaN(e.progress), r = u[e.state], i = e.state === "done";
+function p(e, t = !1) {
+	let n = typeof e.progress == "number" && !Number.isNaN(e.progress), r = f[e.state], i = e.state === "done";
 	return {
 		id: e.id,
 		title: e.name,
@@ -71,7 +49,7 @@ function d(e, t = !1) {
 		meta: e.meta,
 		icon: e.icon,
 		group: e.group,
-		status: t && i ? void 0 : s[e.state],
+		status: t && i ? void 0 : l[e.state],
 		progress: n && (e.state === "busy" || e.state === "paused") ? e.progress : void 0,
 		action: r ? {
 			label: r.label,
@@ -83,12 +61,12 @@ function d(e, t = !1) {
 		}] : void 0
 	};
 }
-var f = class extends a {
+var m = class extends e {
 	constructor(...e) {
 		super(...e), this.jobs = [], this.headingLevel = 3, this.spoken = "", this.known = /* @__PURE__ */ new Map(), this.emptiedWithFocus = !1;
 	}
 	static {
-		this.styles = n(o);
+		this.styles = a(c);
 	}
 	static {
 		this.properties = {
@@ -102,13 +80,13 @@ var f = class extends a {
 	}
 	willUpdate(e) {
 		if (super.willUpdate(e), !e.has("jobs")) return;
-		let t = this.renderRoot.querySelector("lintje-list");
-		this.emptiedWithFocus = !this.jobs?.length && !!(t && r(t));
-		let n = this.known.size === 0, i = [], a = /* @__PURE__ */ new Map();
+		let n = this.renderRoot.querySelector("lintje-list");
+		this.emptiedWithFocus = !this.jobs?.length && !!(n && t(n));
+		let r = this.known.size === 0, i = [], a = /* @__PURE__ */ new Map();
 		for (let e of this.jobs ?? []) {
 			a.set(e.id, e.state);
 			let t = this.known.get(e.id);
-			!n && t !== e.state && i.push(l(e));
+			!r && t !== e.state && i.push(d(e));
 		}
 		this.known = a, i.length ? this.spoken = i.join(" ") : this.emptiedWithFocus && (this.spoken = "Er staan geen taken meer in de lijst.");
 	}
@@ -128,16 +106,16 @@ var f = class extends a {
 	}
 	render() {
 		let e = this.jobs ?? [];
-		return i`${e.length ? i`<lintje-list
+		return s`${e.length ? s`<lintje-list
             class="lintje-job-list"
             heading-level=${this.headingLevel}
-            .items=${e.map((t) => d(t, e.every((e) => e.state === "done")))}
+            .items=${e.map((t) => p(t, e.every((e) => e.state === "done")))}
             @lintje-row-action=${this.onAction}
             @lintje-row-click=${this.onRowClick}
-          ></lintje-list>` : t}
+          ></lintje-list>` : o}
       <p class="visually-hidden" role="status">${this.spoken}</p>`;
 	}
 };
-e("lintje-job-list", f);
+i("lintje-job-list", m);
 //#endregion
-export { f as LintjeJobList, d as jobRow, l as spokenState };
+export { m as LintjeJobList, p as jobRow, d as spokenState };

package/dist-elements/tag/kpi-row.js

@@ -1,9 +1,9 @@
-import { Bt as e, Gt as t, Ht as n, O as r, k as i, qt as a, ut as o } from "../chunks/base-Bg-IFOPG.js";
+import { F as e, P as t, Yt as n, Zt as r, bt as i, en as a, nn as o } from "../chunks/base-CbmWxUig.js";
 import "./kpi.js";
 //#region src/components/charts/kpi-row/kpi-row.css?inline
-var s = "/* The KPIs render in this root, so these rules reach the items directly (no `::slotted()`). */\n:host { display: block; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-grid {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-gutter);\n  align-items: stretch;\n  /* A view's held `min-height` is taken by the grid too, so the items fill the held box. */\n  min-height: inherit;\n}\n\n/* Lower bound 768 on purpose: the one-column rule below it has lower specificity. */\n@media (min-width: 768px) and (max-width: 1023px) {\n  .lintje-grid > [style*='span 4']  { grid-column: span 6 !important; }\n  .lintje-grid > [style*='span 8']  { grid-column: span 12 !important; }\n}\n/* Grid sets grid-template-columns inline, so only !important beats it. */\n@media (max-width: 767px) {\n  .lintje-grid { grid-template-columns: minmax(0, 1fr) !important; }\n  .lintje-grid > * { grid-column: span 1 !important; }\n}\n\n/* After the fallback rules above, so at equal specificity this wins on source order. */\n@media (min-width: 768px) and (max-width: 1023px) {\n  .lintje-grid--kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }\n  .lintje-grid--kpi-row > * { grid-column: span 1 !important; }\n}\n@media (max-width: 767px) {\n  .lintje-grid--kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }\n  .lintje-grid--kpi-row > * { grid-column: span 1 !important; }\n}\n", c = class extends r {
+var s = "/* The KPIs render in this root, so these rules reach the items directly (no `::slotted()`). */\n:host { display: block; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-grid {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-gutter);\n  align-items: stretch;\n  /* A view's held `min-height` is taken by the grid too, so the items fill the held box. */\n  min-height: inherit;\n}\n\n/* Lower bound 768 on purpose: the one-column rule below it has lower specificity. */\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  .lintje-grid > [style*='span 4']  { grid-column: span 6 !important; }\n  .lintje-grid > [style*='span 8']  { grid-column: span 12 !important; }\n}\n/* Grid sets grid-template-columns inline, so only !important beats it. */\n@media screen and (max-width: 767px) {\n  .lintje-grid { grid-template-columns: minmax(0, 1fr) !important; }\n  .lintje-grid > * { grid-column: span 1 !important; }\n}\n\n/* After the fallback rules above, so at equal specificity this wins on source order. */\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  .lintje-grid--kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }\n  .lintje-grid--kpi-row > * { grid-column: span 1 !important; }\n}\n@media screen and (max-width: 767px) {\n  .lintje-grid--kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }\n  .lintje-grid--kpi-row > * { grid-column: span 1 !important; }\n}\n", c = class extends t {
 	static {
-		this.styles = [i, n(s)];
+		this.styles = [e, r(s)];
 	}
 	static {
 		this.properties = { data: { attribute: !1 } };
@@ -12,15 +12,15 @@ var s = "/* The KPIs render in this root, so these rules reach the items directl
 		return this.data ?? void 0;
 	}
 	render() {
-		let e = this.data?.kpis ?? [], n = this.data?.columns ?? 5;
-		return a`<div
+		let e = this.data?.kpis ?? [], t = this.data?.columns ?? 5;
+		return o`<div
       class="lintje-grid lintje-grid--kpi-row"
-      ${o({ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` })}
+      ${i({ gridTemplateColumns: `repeat(${t}, minmax(0, 1fr))` })}
     >
-      ${e.map((e, n) => a`<lintje-kpi
-          index=${n}
+      ${e.map((e, t) => o`<lintje-kpi
+          index=${t}
           label=${e.label}
-          icon=${e.icon ?? t}
+          icon=${e.icon ?? a}
           .value=${e.value}
           .suffix=${e.suffix}
           .items=${e.items}
@@ -34,10 +34,12 @@ var s = "/* The KPIs render in this root, so these rules reach the items directl
           .dividers=${e.dividers ?? !0}
           variable=${e.variable ?? "sky-blue"}
           state=${e.state ?? "ready"}
+          .message=${e.message}
+          .lastKnown=${e.lastKnown}
         ></lintje-kpi>`)}
     </div>`;
 	}
 };
-e("lintje-kpi-row", c);
+n("lintje-kpi-row", c);
 //#endregion
 export { c as LintjeKpiRow };