lintje 0.1.1 → 0.2.0

package/dist-elements/tag/filter-zone.js

@@ -1,5 +1,5 @@
-import { $ as e, A as t, Bt as n, Gt as r, Ht as i, It as a, Kt as o, Lt as s, Pt as c, U as l, Z as u, et as d, zt as f } from "../chunks/base-rBLTcEIv.js";
-import { t as p } from "../chunks/sentence-CLNJOeXz.js";
+import { $ as e, A as t, Bt as n, Gt as r, Ht as i, It as a, Lt as o, Pt as s, U as c, Z as l, et as u, qt as d, zt as f } from "../chunks/base-Bg-IFOPG.js";
+import { t as p } from "../chunks/sentence-BI3lwEuT.js";
 function m(e) {
 	return e.open;
 }
@@ -30,9 +30,9 @@ function g(e) {
 //#region src/components/filters/filter-zone/filter-zone.css?inline
 var _ = "/*\n * The filter zone's own box: header, controls row, sentence and summary bar. Rules that reach\n * into a control live in `filter-layout.css`, adopted by the elements that own the controls.\n */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-bar {\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-bar__header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  height: var(--h-contextbar);\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n  /* An inset shadow, not a border: a border would shift the toggle half a pixel off the\n     summary bar's. */\n  box-shadow: inset 0 -1px 0 var(--color-border-filter);\n}\n.lintje-filter-bar__title { font-size: 1rem; font-weight: 700; }\n.lintje-filter-bar__hint  { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-filter-bar__spacer   { flex: 1; }\n\n.lintje-filter-bar__counter {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-small); color: var(--color-text-primary);\n}\n.lintje-filter-bar__dot {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--color-attention); flex: none;\n}\n.lintje-filter-bar__reset {\n  display: flex; align-items: center;\n  min-height: var(--h-target);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-link); text-decoration: underline;\n  margin: 0 var(--space-2);\n}\n\n/* --- Opening and closing -------------------------------------------------- */\n/* `0fr -> 1fr` transitions to the content height without measuring it in JS. The body stays\n   in the DOM, so the fade is a transition, not a keyframe. */\n.lintje-filter-bar__body {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-filter-bar.is-open .lintje-filter-bar__body { grid-template-rows: 1fr; }\n\n.lintje-filter-bar__body-inner {\n  min-height: 0;\n  overflow: hidden;\n  opacity: 0;\n  /* Closed, out of the tab order and the accessibility tree; hiding waits for the collapse. */\n  visibility: hidden;\n  transition:\n    opacity var(--dur-collapse) var(--ease-in-motion),\n    visibility 0s linear var(--dur-collapse);\n}\n.lintje-filter-bar.is-open .lintje-filter-bar__body-inner {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity var(--dur-collapse) var(--ease-in-motion), visibility 0s;\n}\n/* Standing open, nothing clips: popovers hang out of the zone. */\n.lintje-filter-bar.is-settled .lintje-filter-bar__body-inner { overflow: visible; }\n\n.lintje-filter-bar__header,\n.lintje-summary-bar {\n  animation: lintje-fade-in var(--dur-collapse) var(--ease-in-motion);\n}\n\n/* Aligned at the top: what a control carries below its box (the range's ticks) hangs below the\n   line instead of pushing its neighbours down. */\n.lintje-filter-bar__controls {\n  display: flex;\n  gap: var(--grid-gutter);\n  padding: 14px calc(var(--space-6) + var(--page-gutter)) 18px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 1440px) {\n  .lintje-filter-bar__controls { flex-wrap: nowrap; }\n}\n@media (min-width: 768px) and (max-width: 1023px) {\n  .lintje-filter-bar__controls { display: grid; grid-template-columns: 1fr 1fr; }\n}\n\n.lintje-filter-bar__summary {\n  display: flex; align-items: center; gap: 10px;\n  padding: 0 calc(var(--space-6) + var(--page-gutter)) 14px;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n/* --- Collapsed summary bar (48 px) -------------------------------------- */\n.lintje-summary-bar {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  height: var(--h-contextbar);\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n.lintje-summary-bar__sentence {\n  display: flex; align-items: center; gap: 10px;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  min-width: 0;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  text-align: left;\n  padding: 0 6px; margin: 0 -6px;\n  height: 100%;\n}\n.lintje-summary-bar__sentence:hover { background: var(--color-bg-subtle); }\n.lintje-summary-bar__sentence .lintje-filter-summary__text { overflow: hidden; text-overflow: ellipsis; }\n.lintje-summary-bar__spacer { flex: 1; }\n.lintje-summary-bar__counter {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-small); color: var(--color-text-muted); flex: none;\n}\n.lintje-summary-bar__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--color-attention); flex: none;\n}\n.lintje-summary-bar__reset {\n  display: flex; align-items: center;\n  min-height: var(--h-target);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-link); text-decoration: underline;\n  margin: 0 var(--space-2);\n}\n/* --- The one filter toggle ----------------------------------------------- */\n/* Last in the row in both states, so the second click lands on the toggle again. */\n.lintje-filter-toggle {\n  position: relative;\n  display: flex; align-items: center; gap: var(--space-2);\n  height: var(--h-button-compact);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-border-strong);\n  background: transparent;\n  font-size: 0.875rem; font-weight: 400;\n  color: var(--color-text-primary);\n  flex: none;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-filter-toggle:hover { background: var(--color-bg-subtle); }\n/* A transparent hit area above and below reaches the full target height. */\n.lintje-filter-toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-filter-toggle__chevron {\n  transform-origin: 50% 50%;\n  transition: transform var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-filter-toggle.is-expanded .lintje-filter-toggle__chevron { transform: rotate(180deg); }\n\n/* Before the filter bar: 1 px tall for the observer, -1 px margin so layout is unchanged. */\n.lintje-filter-bar__sentinel { height: 1px; margin-bottom: -1px; }\n/* Scrolled: the collapsed zone sticks below the top bar. */\n.lintje-filter-bar.is-sticky {\n  position: sticky;\n  top: var(--h-topbar);\n  z-index: 19;\n  box-shadow: inset 0 -1px 0 var(--color-border-filter), var(--shadow-sticky);\n  /* Stuck, the top bar's line is the separator; this one goes transparent, keeping its pixel. */\n  border-top-color: transparent;\n}\n\n/* Stuck and expanded: the zone unfolds where it stands; the z-index stays under the menu's 30. */\n.lintje-filter-bar.is-stuck-open {\n  max-height: calc(100vh - var(--h-topbar));\n}\n/* Only when the panel does not fit (`LintjeFilterZone` measures it): scrolling clips popovers. */\n.lintje-filter-bar.is-stuck-open.is-scrollable { overflow-y: auto; }\n\n/* --- Mobile -------------------------------------------------------------- */\n.lintje-filter-bar--mobile {\n  border-bottom: 1px solid var(--color-border-default);\n  padding: var(--space-3) var(--space-4);\n  box-shadow: var(--shadow-sticky);\n  position: sticky;\n  top: var(--h-mobile-header);\n  z-index: 19;\n}\n.lintje-filter-bar__mobile-summary {\n  display: flex; align-items: flex-start; gap: 10px;\n  font: var(--text-ui); line-height: 1.4;\n}\n.lintje-filter-bar__mobile-summary .lintje-filter-summary__icon { margin-top: 2px; }\n\n/* --- Pinned instead of sticky ---------------------------------------------- */\n.lintje-filter-bar--fixed.is-sticky {\n  position: fixed;\n  left: var(--lintje-shell-left, 0px);\n  right: 0;\n}\n.lintje-filter-bar__placeholder { height: var(--h-contextbar); }\n\n/* --- More than four filters ------------------------------------------------ */\n/* The one-line rule from 1440 px fits four controls; more wrap. */\n.lintje-filter-bar--wrap .lintje-filter-bar__controls { flex-wrap: wrap; }\n\n\n@media print {\n  .lintje-filter-bar.is-sticky, .lintje-filter-bar--fixed.is-sticky { position: static; box-shadow: none; }\n  .lintje-filter-toggle, .lintje-filter-bar__reset, .lintje-filter-bar__counter { display: none; }\n}\n\n/* Forced colours drop the fill and the inset shadow, so the row takes a real border. */\n@media (forced-colors: active) {\n  .lintje-filter-bar__header { border-bottom: 1px solid CanvasText; }\n}\n", v = class extends f {
 	constructor(...e) {
-		super(...e), this.total = 0, this.modified = 0, this.open = !1, this.scrolled = !1, this.settled = !0, this.scrollable = !1, this.stick = "sticky", this.sentence = [], this.mobile = new s(this, a), this.observer = null, this.observed = void 0, this.wasExpanded = void 0, this.onResize = () => this.measureOverflow(), this.#e = !1, this.#t = 0, this.#n = null, this.onPageScroll = () => {
+		super(...e), this.total = 0, this.modified = 0, this.open = !1, this.scrolled = !1, this.settled = !0, this.scrollable = !1, this.stick = "sticky", this.sentence = [], this.mobile = new o(this, a), this.observer = null, this.observed = void 0, this.wasExpanded = void 0, this.onResize = () => this.measureOverflow(), this.#e = !1, this.#t = 0, this.#n = null, this.onPageScroll = () => {
 			let e = this.renderRoot.querySelector(".lintje-filter-bar__body");
-			e && l(e) || this.act({
+			e && c(e) || this.act({
 				type: "page-scrolled",
 				distance: this.pageScroll() - this.#t
 			});
@@ -83,10 +83,10 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 	willUpdate(e) {
 		if (super.willUpdate(e), !e.has("open") && !e.has("modified")) return;
 		let t = this.renderRoot.querySelector(".lintje-filter-bar__header, .lintje-summary-bar");
-		this.#e = this.#e || t != null && l(t);
+		this.#e = this.#e || t != null && c(t);
 	}
 	updated(e) {
-		this.#e && (this.#e = !1, l(this) || this.renderRoot.querySelector(".lintje-filter-toggle")?.focus());
+		this.#e && (this.#e = !1, c(this) || this.renderRoot.querySelector(".lintje-filter-toggle")?.focus());
 		let n = !this.mobile.matches && m(this.state);
 		if (n !== this.wasExpanded) {
 			let e = this.wasExpanded === void 0;
@@ -110,7 +110,7 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 	}
 	canPin() {
 		if (this.stick !== "fixed" || this.scrolled) return !0;
-		let e = this.renderRoot.querySelector(".lintje-filter-bar__sentinel"), n = this.renderRoot.querySelector(".lintje-filter-bar"), r = c(), i = r && r !== document.scrollingElement ? r : document.scrollingElement;
+		let e = this.renderRoot.querySelector(".lintje-filter-bar__sentinel"), n = this.renderRoot.querySelector(".lintje-filter-bar"), r = s(), i = r && r !== document.scrollingElement ? r : document.scrollingElement;
 		if (!e || !n || !i) return !0;
 		let a = t(e, "--h-topbar", 56);
 		return g({
@@ -133,28 +133,28 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 	#t;
 	#n;
 	pageScroll() {
-		let e = c();
+		let e = s();
 		return e && e !== document.scrollingElement ? e.scrollTop : window.scrollY;
 	}
 	watchPageScroll(e) {
 		if (this.#n?.removeEventListener("scroll", this.onPageScroll), this.#n = null, !e || this.mobile.matches) return;
-		let t = c();
+		let t = s();
 		this.#n = t && t !== document.scrollingElement ? t : window, this.#t = this.pageScroll(), this.#n.addEventListener("scroll", this.onPageScroll, { passive: !0 });
 	}
 	render() {
-		if (this.mobile.matches) return o`<div class="lintje-filter-bar lintje-filter-bar--mobile">
+		if (this.mobile.matches) return d`<div class="lintje-filter-bar lintje-filter-bar--mobile">
         <p class="lintje-filter-bar__mobile-summary">${p(this.sentence)}</p>
       </div>`;
 		let e = m(this.state), t = this.scrolled && this.stick === "fixed";
-		return o`
+		return d`
       <!-- The sentinel sits before the zone, not after it. After the zone it moves along
            when the zone collapses (461 -> 334 px), so when scrolling back up the threshold
            releases 127 px later than it triggered. Before the zone it stays put, and the
            threshold triggers the moment the bar touches the top bar. -->
       <div class="lintje-filter-bar__sentinel" aria-hidden="true"></div>
-      ${t ? o`<div class="lintje-filter-bar__placeholder" aria-hidden="true"></div>` : r}
+      ${t ? d`<div class="lintje-filter-bar__placeholder" aria-hidden="true"></div>` : r}
       <div
-        class=${u({
+        class=${l({
 			"lintje-filter-bar": !0,
 			"is-open": e,
 			"is-settled": e && this.settled,
@@ -180,13 +180,13 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
     `;
 	}
 	renderHeader() {
-		return o`
+		return d`
       <div class="lintje-filter-bar__header">
-        ${d("functioneel-filters", { size: 16 })}
+        ${u("functioneel-filters", { size: 16 })}
         <span class="lintje-filter-bar__title">Filters</span>
         <span class="lintje-filter-bar__hint">gelden voor alle cijfers op deze pagina</span>
         <span class="lintje-filter-bar__spacer"></span>
-        ${this.modified > 0 ? o`<span class="lintje-filter-bar__counter">
+        ${this.modified > 0 ? d`<span class="lintje-filter-bar__counter">
                 <span class="lintje-filter-bar__dot"></span>
                 ${this.modified} van ${this.total} afwijkend
               </span>
@@ -202,7 +202,7 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
     `;
 	}
 	renderSummaryBar() {
-		return o`<div
+		return d`<div
       class="lintje-summary-bar"
       @click=${(e) => {
 			e.target.closest("button") || this.act({ type: "expand" });
@@ -218,7 +218,7 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
         ${p(this.sentence)}
       </button>
       <span class="lintje-summary-bar__spacer"></span>
-      ${this.modified > 0 ? o`<span class="lintje-summary-bar__counter">
+      ${this.modified > 0 ? d`<span class="lintje-summary-bar__counter">
             <span class="lintje-summary-bar__dot"></span>
             ${this.modified} afwijkend ·
             <button
@@ -233,9 +233,9 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
     </div>`;
 	}
 	renderToggle(e) {
-		return o`<button
+		return d`<button
       type="button"
-      class=${u({
+      class=${l({
 			"lintje-filter-toggle": !0,
 			"is-expanded": e
 		})}
@@ -245,7 +245,7 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
       @click=${() => this.act({ type: e ? "collapse" : "expand" })}
     >
       Filters
-      ${d("functioneel-delta-omlaag", {
+      ${u("functioneel-delta-omlaag", {
 			size: 16,
 			className: "lintje-filter-toggle__chevron"
 		})}

package/dist-elements/tag/footer.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, I as r, Kt as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, I as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/frame/footer/footer.css?inline
 var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-footer {\n  background: var(--color-footer-bg);\n  color: var(--color-footer-text);\n  font: var(--text-ui);\n}\n.lintje-footer :focus-visible { outline-color: var(--color-footer-focus); }\n\n/* The text keeps to the content column, as the bars above the page do. */\n.lintje-footer__inner {\n  display: flex; flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-10) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-8);\n}\n\n.lintje-footer__tagline { margin: 0; font: var(--text-h2); }\n\n.lintje-footer__columns {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-footer-column)), 1fr));\n  gap: var(--space-8) var(--grid-gutter);\n}\n.lintje-footer__column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-footer__heading {\n  margin: 0;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n}\n.lintje-footer__list,\n.lintje-footer__meta { list-style: none; margin: 0; padding: 0; }\n.lintje-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-footer__link,\n.lintje-footer__meta-link {\n  display: inline-flex; align-items: center;\n  min-height: var(--h-touch);\n  color: inherit;\n  text-decoration: none;\n}\n/* A list of text links keeps the house style's rhythm: a line high, 12 px apart. */\n.lintje-footer__link { min-height: var(--h-target-text); }\n.lintje-footer__link:hover,\n.lintje-footer__meta-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }\n\n/* The links every page carries, apart from the columns by a line. */\n.lintje-footer__bottom {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-6);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--color-footer-line);\n}\n.lintje-footer__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }\n.lintje-footer__meta-link { font: var(--text-small); }\n/* The full text colour: a muted one would fall under 4.5:1 on the theme's fill. */\n.lintje-footer__note { margin: 0; font: var(--text-small); }\n\n@media (max-width: 767px) {\n  .lintje-footer__inner { padding-top: var(--space-8); }\n  .lintje-footer__columns { grid-template-columns: minmax(0, 1fr); }\n}\n", s = class extends a {
 	static {

package/dist-elements/tag/form-actions.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Kt as a, Lt as o, Pt as s, et as c, zt as l } from "../chunks/base-rBLTcEIv.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Lt as a, Pt as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
 import { n as u, t as d } from "../chunks/controls-B1455oPG.js";
 //#region src/components/forms/form-actions/form-actions.css?inline
 var f = "/* The host is the sticky box. z-index 20: above the form, below the shell's menu (30) and popovers (46). */\n:host {\n  display: block;\n  min-width: 0;\n  position: sticky;\n  bottom: 0;\n  z-index: 20;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 2px solid var(--color-accent-line);\n}\n\n/* The words carry the state; the dot and the check only support it (rule 13). */\n.lintje-form-actions__status {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-actions__dot {\n  flex: none;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-attention);\n}\n.lintje-form-actions__check {\n  flex: none;\n  color: var(--color-success);\n}\n\n.lintje-form-actions__buttons {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n\n/* Phone: the bar sets `block` on each button, so it fills its row. */\n@media (max-width: 767px) {\n  .lintje-form-actions {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .lintje-form-actions__buttons {\n    flex-direction: column-reverse;\n    margin-left: 0;\n  }\n}\n\n/* Forced colours: the dot is a fill only, which the palette drops; it keeps its drawing. */\n@media (forced-colors: active) {\n  .lintje-form-actions__dot { forced-color-adjust: none; background: CanvasText; }\n}\n", p = "Wijzigingen nog niet opgeslagen", m = "Bezig met opslaan";
@@ -17,7 +17,7 @@ function v() {
 		_ && (_.element.style.scrollPaddingBottom = _.before), _ = null;
 		return;
 	}
-	let t = s();
+	let t = o();
 	t && (_?.element !== t && (_ && (_.element.style.scrollPaddingBottom = _.before), _ = {
 		element: t,
 		before: t.style.scrollPaddingBottom
@@ -25,7 +25,7 @@ function v() {
 }
 var y = class extends l {
 	constructor(...e) {
-		super(...e), this.state = "", this.#e = new o(this, i), this.#t = new u("busy"), this.#n = new u("disabled"), this.#r = new d("block"), this.#i = null;
+		super(...e), this.state = "", this.#e = new a(this, i), this.#t = new u("busy"), this.#n = new u("disabled"), this.#r = new d("block"), this.#i = null;
 	}
 	static {
 		this.styles = [e, r(f)];
@@ -75,12 +75,12 @@ var y = class extends l {
 	renderStatus() {
 		let e = h(this.savedAt);
 		switch (this.state) {
-			case "dirty": return a`<span class="lintje-form-actions__dot" aria-hidden="true"></span>${p}`;
-			case "busy": return a`${m}`;
+			case "dirty": return c`<span class="lintje-form-actions__dot" aria-hidden="true"></span>${p}`;
+			case "busy": return c`${m}`;
 			case "saved":
 			case "draft": {
 				let t = this.state === "draft" ? "Concept opgeslagen" : "Opgeslagen";
-				return a`${c("functioneel-vinkje", {
+				return c`${s("functioneel-vinkje", {
 					size: 16,
 					className: "lintje-form-actions__check"
 				})}${e ? `${t} om ${e}` : t}`;
@@ -89,7 +89,7 @@ var y = class extends l {
 		}
 	}
 	render() {
-		return a`<div class="lintje-form-actions">
+		return c`<div class="lintje-form-actions">
       <div class="lintje-form-actions__status" role="status">${this.renderStatus()}</div>
       <div class="lintje-form-actions__buttons">
         <slot @slotchange=${() => this.#a()}></slot>

package/dist-elements/tag/form-section.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
 import { a as o, n as s } from "../chunks/controls-B1455oPG.js";
 //#region src/components/forms/form-section/form-section.css?inline
 var c = "/* Slotted children keep clear of the sticky top bar when the error summary scrolls to them. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n::slotted(*) { scroll-margin-top: var(--h-sticky); }\n\n/* ------------------------------------------------------------------------ */\n\n/* The legend floats at full width so it lays out as a block, not on the fieldset's border. */\n.lintje-form-section {\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  border: 0;\n}\n.lintje-form-section__legend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  font: var(--text-h2);\n  color: var(--color-text-primary);\n}\n.lintje-form-section__description {\n  clear: both;\n  padding-top: var(--space-2);\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-section__fields {\n  clear: both;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding-top: var(--space-5);\n}\n\n/* Setting rows read as a list: a line between two of them. */\n.lintje-form-section__fields ::slotted([layout='row']:not(:first-child)) {\n  padding-top: var(--space-5);\n  border-top: 1px solid var(--color-border-default);\n}\n\n.lintje-form-section--tile {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-form-section--tile .lintje-form-section__legend { font: var(--text-tile-title); }\n/* The heading takes the legend's look; it is there for the outline, not to restyle. */\n.lintje-form-section__heading { margin: 0; font: inherit; color: inherit; }\n", l = class extends a {
@@ -33,8 +33,8 @@ var c = "/* Slotted children keep clear of the sticky top bar when the error sum
 		this.disabled ? this.#e.apply(o(this), !0) : this.#e.release();
 	}
 	render() {
-		return r`<fieldset
-      class=${i({
+		return i`<fieldset
+      class=${r({
 			"lintje-form-section": !0,
 			"lintje-form-section--tile": this.variant === "tile"
 		})}

package/dist-elements/tag/form.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, H as n, Ht as r, It as i, Kt as a, Lt as o, U as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, H as n, Ht as r, It as i, Lt as a, U as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
 import { c as l, d as u, i as d, l as f, n as p, r as m, u as h } from "../chunks/controls-B1455oPG.js";
 import "./error-summary.js";
 import "./form-actions.js";
@@ -42,7 +42,7 @@ var C = class extends c {
 				let t = d(e);
 				!this.contains(e) && !r.has(t) && this.forget(t);
 			}
-		}), this.#s = new o(this, i), this.#c = new p("disabled"), this.#l = new p("stacked"), this.#u = (e) => {
+		}), this.#s = new a(this, i), this.#c = new p("disabled"), this.#l = new p("stacked"), this.#u = (e) => {
 			let t = e.target;
 			if (t === this) return;
 			let n = d(t);
@@ -243,7 +243,7 @@ var C = class extends c {
 		return t;
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.#n || (this.#n = !0, this.#g(), this.#b(Object.keys(this.#e).length ? "dirty" : "")), e.has("savedAt") && this.hasUpdated && this.savedAt && this.phase !== "saved" && this.#y(), e.has("errors") && (this.#E = this.#T()), e.has("busy") && this.busy && (this.#a = s(this) ? n() : null), e.has("dirty") && (this.dirty ? window.addEventListener("beforeunload", this.#m) : window.removeEventListener("beforeunload", this.#m));
+		super.willUpdate(e), this.#n || (this.#n = !0, this.#g(), this.#b(Object.keys(this.#e).length ? "dirty" : "")), e.has("savedAt") && this.hasUpdated && this.savedAt && this.phase !== "saved" && this.#y(), e.has("errors") && (this.#E = this.#T()), e.has("busy") && this.busy && (this.#a = o(this) ? n() : null), e.has("dirty") && (this.dirty ? window.addEventListener("beforeunload", this.#m) : window.removeEventListener("beforeunload", this.#m));
 	}
 	#E;
 	#D;
@@ -275,7 +275,7 @@ var C = class extends c {
 		for (let n of this.querySelectorAll("lintje-form-actions")) n.state = e, n.savedAt = t;
 	}
 	render() {
-		return a`<form
+		return s`<form
       class="lintje-form"
       novalidate
       aria-busy=${this.busy ? "true" : t}

package/dist-elements/tag/gallery.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/content/gallery/gallery.css?inline
 var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-gallery { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-gallery__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }\n/* A screen whole, on the subtle surface: a screenshot is never cropped. */\n.lintje-gallery__image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: contain;\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  box-sizing: border-box;\n}\n.lintje-gallery__caption { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-gallery__thumbs {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--w-gallery-thumb), 1fr));\n  gap: var(--space-2);\n}\n.lintje-gallery__thumb {\n  display: block;\n  width: 100%;\n  padding: 0;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-subtle);\n  cursor: pointer;\n}\n.lintje-gallery__thumb:hover { border-color: var(--color-border-heavy); }\n/* The chosen one carries the selected edge, and aria-current says it in words. */\n.lintje-gallery__thumb.is-selected { outline: 2px solid var(--color-accent-line); outline-offset: -2px; }\n.lintje-gallery__thumb:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }\n.lintje-gallery__thumb-image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: cover;\n  object-position: top left;\n}\n\n@media (forced-colors: active) {\n  .lintje-gallery__thumb.is-selected { outline-color: Highlight; }\n}\n", s = class extends a {
 	constructor(...e) {
@@ -28,16 +28,16 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		let e = this.items;
 		if (!e.length) return t;
 		let n = this.shown, a = e[n];
-		return r`<div class="lintje-gallery">
+		return i`<div class="lintje-gallery">
       <figure class="lintje-gallery__figure">
         <img class="lintje-gallery__image" src=${a.src} alt=${a.alt} />
-        ${a.caption ? r`<figcaption class="lintje-gallery__caption">${a.caption}</figcaption>` : t}
+        ${a.caption ? i`<figcaption class="lintje-gallery__caption">${a.caption}</figcaption>` : t}
       </figure>
-      ${e.length > 1 ? r`<ul class="lintje-gallery__thumbs" aria-label=${this.label}>
-              ${e.map((a, o) => r`<li>
+      ${e.length > 1 ? i`<ul class="lintje-gallery__thumbs" aria-label=${this.label}>
+              ${e.map((a, o) => i`<li>
                   <button
                     type="button"
-                    class=${i({
+                    class=${r({
 			"lintje-gallery__thumb": !0,
 			"is-selected": o === n
 		})}

package/dist-elements/tag/grid-item.js

@@ -1 +1 @@
-export { y as LintjeGridItem } from "../chunks/base-rBLTcEIv.js";
+export { y as LintjeGridItem } from "../chunks/base-Bg-IFOPG.js";

package/dist-elements/tag/grid.js

@@ -1 +1 @@
-export { b as LintjeGrid } from "../chunks/base-rBLTcEIv.js";
+export { b as LintjeGrid } from "../chunks/base-Bg-IFOPG.js";

package/dist-elements/tag/hero.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Kt as a, Z as o, et as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+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";
 //#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 {
 	constructor(...e) {
@@ -31,8 +31,8 @@ var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		this.href && i(e) && this.followLink(this.href, e);
 	}
 	render() {
-		return a`<div
-      class=${o({
+		return s`<div
+      class=${a({
 			"lintje-hero": !0,
 			"has-overlap": this.hasOverlap,
 			"has-aside": this.hasAside,
@@ -44,11 +44,11 @@ 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 ? a`<p class="lintje-hero__description">${this.description}</p>` : n}
+            ${this.description ? s`<p class="lintje-hero__description">${this.description}</p>` : n}
           </div>
           <slot></slot>
-          ${this.action && this.href ? a`<a class="lintje-hero__action" href=${this.href} @click=${this.onAction}
-                >${this.action}${s("functioneel-delta-rechts", { size: 16 })}</a
+          ${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}
         </div>
         <div class="lintje-hero__aside">

package/dist-elements/tag/highlight.js

@@ -1,4 +1,4 @@
-import { Bt as e, Ht as t, Kt as n, Z as r, zt as i } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Ht as t, Z as n, qt as r, zt as i } from "../chunks/base-Bg-IFOPG.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",
@@ -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 r({
+		return n({
 			"lintje-highlight": !0,
 			[`lintje-highlight--${this.kind}`]: !0,
 			"lintje-highlight--control": this.isControl,
@@ -42,14 +42,14 @@ var a = ":host { display: inline; }\n:host([hidden]) { display: none; }\n\n/* --
 	render() {
 		let e = this.kind;
 		if (e === "removed" || e === "added") {
-			let t = n`<span class="visually-hidden">${this.label || s[e]}: </span>`;
-			return e === "removed" ? n`<del class=${this.classes}>${t}<slot></slot></del>` : n`<ins class=${this.classes}>${t}<slot></slot></ins>`;
+			let t = r`<span class="visually-hidden">${this.label || s[e]}: </span>`;
+			return e === "removed" ? r`<del class=${this.classes}>${t}<slot></slot></del>` : r`<ins class=${this.classes}>${t}<slot></slot></ins>`;
 		}
-		if (this.isControl) return n`<lintje-tooltip text=${this.explanation}
+		if (this.isControl) return r`<lintje-tooltip text=${this.explanation}
         ><button type="button" class=${this.classes}><slot></slot></button
       ></lintje-tooltip>`;
 		let t = e === "match" && this.current ? "huidig zoekresultaat" : o[e] ?? "markering";
-		return n`<mark class=${this.classes}
+		return r`<mark class=${this.classes}
       ><span class="visually-hidden">begin markering ${t}, </span><slot></slot
       ><span class="visually-hidden">, einde markering</span></mark
     >`;

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

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

package/dist-elements/tag/icon.js

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

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

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, U as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+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 "./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 = {
@@ -103,14 +103,14 @@ 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 && i(t));
-		let n = this.known.size === 0, r = [], a = /* @__PURE__ */ new Map();
+		this.emptiedWithFocus = !this.jobs?.length && !!(t && r(t));
+		let n = 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 && r.push(l(e));
+			!n && t !== e.state && i.push(l(e));
 		}
-		this.known = a, r.length ? this.spoken = r.join(" ") : this.emptiedWithFocus && (this.spoken = "Er staan geen taken meer in de lijst.");
+		this.known = a, i.length ? this.spoken = i.join(" ") : this.emptiedWithFocus && (this.spoken = "Er staan geen taken meer in de lijst.");
 	}
 	updated(e) {
 		if (super.updated(e), !this.emptiedWithFocus) return;
@@ -128,7 +128,7 @@ var f = class extends a {
 	}
 	render() {
 		let e = this.jobs ?? [];
-		return r`${e.length ? r`<lintje-list
+		return i`${e.length ? i`<lintje-list
             class="lintje-job-list"
             heading-level=${this.headingLevel}
             .items=${e.map((t) => d(t, e.every((e) => e.state === "done")))}

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

@@ -1,9 +1,9 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, O as i, k as a, ut as o } from "../chunks/base-rBLTcEIv.js";
+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 "./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 i {
+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 {
 	static {
-		this.styles = [a, n(s)];
+		this.styles = [i, n(s)];
 	}
 	static {
 		this.properties = { data: { attribute: !1 } };
@@ -13,11 +13,11 @@ var s = "/* The KPIs render in this root, so these rules reach the items directl
 	}
 	render() {
 		let e = this.data?.kpis ?? [], n = this.data?.columns ?? 5;
-		return r`<div
+		return a`<div
       class="lintje-grid lintje-grid--kpi-row"
       ${o({ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` })}
     >
-      ${e.map((e, n) => r`<lintje-kpi
+      ${e.map((e, n) => a`<lintje-kpi
           index=${n}
           label=${e.label}
           icon=${e.icon ?? t}
@@ -25,6 +25,8 @@ var s = "/* The KPIs render in this root, so these rules reach the items directl
           .suffix=${e.suffix}
           .items=${e.items}
           .trend=${e.trend}
+          .sparkline=${e.sparkline}
+          .gauge=${e.gauge}
           .note=${e.note}
           .detail=${e.detail}
           layout=${e.layout ?? "row"}