lintje 0.1.1

package/dist-elements/tag/kpi-row.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/charts/kpi-row/kpi-row.js'

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

@@ -0,0 +1,41 @@
+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 "./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 {
+	static {
+		this.styles = [a, n(s)];
+	}
+	static {
+		this.properties = { data: { attribute: !1 } };
+	}
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	render() {
+		let e = this.data?.kpis ?? [], n = this.data?.columns ?? 5;
+		return r`<div
+      class="lintje-grid lintje-grid--kpi-row"
+      ${o({ gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` })}
+    >
+      ${e.map((e, n) => r`<lintje-kpi
+          index=${n}
+          label=${e.label}
+          icon=${e.icon ?? t}
+          .value=${e.value}
+          .suffix=${e.suffix}
+          .items=${e.items}
+          .trend=${e.trend}
+          .note=${e.note}
+          .detail=${e.detail}
+          layout=${e.layout ?? "row"}
+          emphasis=${e.emphasis ?? "equal"}
+          .dividers=${e.dividers ?? !0}
+          variable=${e.variable ?? "sky-blue"}
+          state=${e.state ?? "ready"}
+        ></lintje-kpi>`)}
+    </div>`;
+	}
+};
+e("lintje-kpi-row", c);
+//#endregion
+export { c as LintjeKpiRow };

package/dist-elements/tag/kpi.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/charts/kpi/kpi.js'

package/dist-elements/tag/kpi.js

@@ -0,0 +1,216 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, O as a, Z as o, et as s, g as c, h as l, k as u, l as d, u as f, ut as p, w as m } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/charts/kpi/kpi.css?inline
+var h = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-kpi { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-kpi {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 4px solid var(--color-text-muted);\n  border-radius: var(--radius);\n  padding: var(--space-4) var(--space-5);\n  text-align: left;\n  animation: lintje-rise var(--dur-kpi) var(--ease-in-motion) both;\n}\n\n.lintje-kpi__label { font: var(--text-tile-title); color: var(--color-text-primary); }\n/* With an icon the KPI is a two-column grid: the glyph on the label's first line, everything else\n   over the full width. The icon stays in every state and takes the text colour. */\n.lintje-kpi--icon {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-content: start;\n}\n.lintje-kpi--icon > * { grid-column: 1 / -1; min-width: 0; }\n.lintje-kpi--icon > .lintje-kpi__icon {\n  grid-column: 1; grid-row: 1;\n  display: flex; align-items: center;\n  height: 1lh;\n  font: var(--text-tile-title);\n  color: var(--color-text-primary);\n}\n/* The gap is the glyph's own margin, not a `column-gap`: a name with no file draws nothing, and\n   a gap between tracks would indent the label beside an empty column. */\n.lintje-kpi--icon > .lintje-kpi__icon { margin-right: var(--space-2); }\n.lintje-kpi--icon > .lintje-kpi__icon:empty { display: none; }\n.lintje-kpi--icon > .lintje-kpi__label { grid-column: 2; grid-row: 1; }\n.lintje-kpi__value {\n  font: var(--text-kpi);\n  letter-spacing: var(--kpi-tracking);\n  /* After the shorthand, which resets it to normal. */\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-primary);\n}\n.lintje-kpi__suffix { font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }\n/* The final value is transparent but keeps the width, so the suffix does not move while counting. */\n.lintje-kpi__count { display: inline-grid; }\n.lintje-kpi__count-final,\n.lintje-kpi__count-live { grid-area: 1 / 1; }\n.lintje-kpi__count-final { opacity: 0; }\n.lintje-kpi__note { font: var(--text-small); color: var(--color-text-primary); }\n.lintje-kpi__note--error { display: flex; align-items: center; gap: 6px; }\n.lintje-kpi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-attention); flex: none; }\n.lintje-kpi__detail { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* The wrapper is the query container, so a row can stack in a narrow KPI without containing it. */\n.lintje-kpi__figures { container-type: inline-size; }\n.lintje-kpi__items { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-kpi__item {\n  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;\n  column-gap: var(--space-4); min-width: 0;\n}\n.lintje-kpi__item--comparison .lintje-kpi__value { color: var(--color-text-secondary); }\n.lintje-kpi__period { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-kpi__divider { display: block; height: 1px; background: var(--color-border-default); }\n.lintje-kpi__items--row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--space-4); }\n.lintje-kpi__items--row.lintje-kpi__items--divided { grid-auto-columns: minmax(0, 1fr) 1px; }\n.lintje-kpi__items--row .lintje-kpi__item { display: block; }\n.lintje-kpi__items--row .lintje-kpi__divider { height: auto; align-self: stretch; }\n@container (width < 318px) {\n  .lintje-kpi__items--row { display: flex; align-items: stretch; gap: var(--space-2); }\n  .lintje-kpi__items--row .lintje-kpi__item { display: flex; }\n  .lintje-kpi__items--row .lintje-kpi__divider { height: 1px; }\n}\n.lintje-kpi--primary .lintje-kpi__divider { margin-block: var(--space-1); }\n.lintje-kpi__secondary-value {\n  font: var(--text-kpi-secondary);\n  letter-spacing: var(--kpi-tracking);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-secondary);\n}\n\n.lintje-kpi__skeleton { display: flex; flex-direction: column; gap: var(--space-2); }\n\n@media (max-width: 767px) {\n  .lintje-kpi { padding: 12px 14px; gap: var(--space-1); }\n  .lintje-kpi__value { font: var(--text-kpi-mobile); font-variant-numeric: tabular-nums; }\n}\n@media (min-width: 1024px) and (max-width: 1439px) {\n  .lintje-kpi__value { font-size: 1.75rem; }\n}\n\n/* --- The 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/* Forced colours: the divider and the error dot are fills, which the browser drops. */\n@media (forced-colors: active) {\n  .lintje-kpi__divider,\n  .lintje-kpi__dot { forced-color-adjust: none; background: CanvasText; }\n}\n", g = {
+	...Object.fromEntries(d.map((e) => [e, f(e)])),
+	coverage: "var(--color-text-muted)"
+}, _ = {
+	up: "▲",
+	down: "▼",
+	flat: "●"
+}, v = .35, y = Array.from({ length: 21 }, (e, t) => t / 20);
+function b(e) {
+	let t = e === void 0 ? null : String(e), n = t?.match(/\d{1,3}(?:\.\d{3})+(?:,\d+)?|\d+(?:,\d+)?/);
+	if (t == null || !n || n.index == null) return null;
+	let r = n[0];
+	return {
+		before: t.slice(0, n.index),
+		after: t.slice(n.index + r.length),
+		target: Number(r.replace(/\./g, "").replace(",", ".")),
+		decimals: r.split(",")[1]?.length ?? 0,
+		grouped: r.includes(".")
+	};
+}
+function x(e, t) {
+	return e.before + t.toLocaleString("nl-NL", {
+		minimumFractionDigits: e.decimals,
+		maximumFractionDigits: e.decimals,
+		useGrouping: e.grouped
+	}) + e.after;
+}
+var S = class extends a {
+	constructor(...e) {
+		super(...e), this.label = "", this.layout = "row", this.emphasis = "equal", this.dividers = !0, this.variable = "sky-blue", this.state = "ready", this.index = 0, this.counting = [], this.#e = [], this.#t = "", this.#n = null, this.#r = 0, this.#i = !1, this.#a = !1;
+	}
+	static {
+		this.styles = [
+			u,
+			e,
+			r(m),
+			r(h)
+		];
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			icon: { type: String },
+			value: { type: String },
+			suffix: { type: String },
+			items: { attribute: !1 },
+			layout: { type: String },
+			emphasis: { type: String },
+			dividers: { type: Boolean },
+			trend: { attribute: !1 },
+			note: { type: String },
+			detail: { type: String },
+			variable: {
+				type: String,
+				reflect: !0
+			},
+			state: {
+				type: String,
+				reflect: !0
+			},
+			index: { type: Number },
+			counting: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	get figures() {
+		return this.items?.length ? this.items : null;
+	}
+	get reduced() {
+		return c();
+	}
+	connectedCallback() {
+		super.connectedCallback(), typeof IntersectionObserver > "u" ? this.#a = !0 : (this.#n = new IntersectionObserver(([e]) => {
+			let t = e.rootBounds?.height ?? window.innerHeight;
+			(e.intersectionRatio >= v || e.intersectionRect.height >= t * v) && (this.#a = !0, this.#n?.disconnect(), this.startCount());
+		}, { threshold: y }), this.#n.observe(this));
+	}
+	disconnectedCallback() {
+		this.#n?.disconnect(), cancelAnimationFrame(this.#r), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = this.state === "ready" ? this.figures ? this.figures.map((e) => e.value) : [this.value] : [], n = JSON.stringify(t);
+		n !== this.#t && (this.#t = n, this.#e = t.map(b), cancelAnimationFrame(this.#r), this.#i = !1, this.counting = this.reduced ? this.#e.map(() => null) : this.#e.map((e) => e ? x(e, 0) : null), this.#a && this.startCount());
+	}
+	startCount() {
+		if (this.#i || this.reduced || !this.#e.some(Boolean)) return;
+		this.#i = !0;
+		let e = l(this, "--dur-draw"), t = performance.now() + this.index * 40, n = (r) => {
+			let i = e > 0 ? Math.min(1, Math.max(0, (r - t) / e)) : 1;
+			if (i === 1) {
+				this.counting = this.#e.map(() => null);
+				return;
+			}
+			let a = 1 - (1 - i) ** 3;
+			this.counting = this.#e.map((e) => e ? x(e, e.target * a) : null), this.#r = requestAnimationFrame(n);
+		};
+		this.#r = requestAnimationFrame(n);
+	}
+	render() {
+		let e = this.figures, t = e != null && this.emphasis === "primary";
+		return i`<div
+      class=${o({
+			"lintje-kpi": !0,
+			"lintje-kpi--primary": t,
+			"lintje-kpi--icon": !!this.icon
+		})}
+      ${p({
+			borderTopColor: g[this.variable],
+			animationDelay: `${this.index * 40}ms`
+		})}
+    >
+      ${this.icon ? i`<span class="lintje-kpi__icon">${s(this.icon, { size: 20 })}</span>` : n}
+      <p class="lintje-kpi__label">${this.label}</p>
+      ${this.body(e, t)}
+    </div>`;
+	}
+	body(e, t) {
+		let r = this.state === "loading", a = this.state === "ready";
+		if (!e) return r ? i`<div class="lintje-kpi__skeleton">
+            <lintje-skeleton height="34" width="70%"></lintje-skeleton>
+            <lintje-skeleton height="13" width="90%"></lintje-skeleton>
+            <lintje-skeleton height="12" width="55%"></lintje-skeleton>
+          </div>` : i`${this.figure(0, {
+			value: this.value,
+			suffix: this.suffix
+		})}${this.lines(!0)}`;
+		if (t) {
+			let [t, ...o] = e, s = this.detail && (a || this.state === "empty");
+			return i`
+        ${r ? i`<lintje-skeleton height="34" width="70%"></lintje-skeleton>` : this.figure(0, t)}
+        ${r ? i`<lintje-skeleton height="13" width="90%"></lintje-skeleton>` : this.lines(!1)}
+        ${o.length > 0 && this.dividers ? i`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : n}
+        ${o.length > 0 ? this.itemList(o, !0, !1, 1) : n}
+        ${r ? i`<lintje-skeleton height="12" width="55%"></lintje-skeleton>` : s ? i`<p class="lintje-kpi__detail">${this.detail}</p>` : n}
+      `;
+		}
+		return i`
+      ${this.itemList(e, !1, this.dividers && e.length > 1, 0)}
+      ${r ? i`<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)}
+    `;
+	}
+	lines(e) {
+		let t = this.state === "ready";
+		return i`
+      ${t && this.trend ? this.trendLine(e) : n}
+      ${t && !this.trend && this.note ? i`<p class="lintje-kpi__note">${this.note}</p>` : n}
+      ${this.state === "empty" ? i`<p class="lintje-kpi__note">Geen gegevens</p>` : n}
+      ${this.state === "error" ? i`<p class="lintje-kpi__note lintje-kpi__note--error">
+            <span class="lintje-kpi__dot" aria-hidden="true"></span>Niet geladen
+          </p>` : n}
+      ${e && this.detail && (t && !this.trend || this.state === "empty") ? i`<p class="lintje-kpi__detail">${this.detail}</p>` : n}
+    `;
+	}
+	trendLine(e) {
+		let { direction: t, sentence: r, inverted: a = !1 } = this.trend, o = "neutral";
+		return t !== "flat" && (o = (a ? t === "down" : t === "up") ? "good" : "bad"), i`
+      <p class="lintje-trend"><span
+          class="lintje-trend__glyph lintje-trend__glyph--${o}"
+          aria-hidden="true"
+          >${_[t]}</span
+        >${o === "neutral" ? n : i`<span class="visually-hidden">${o === "good" ? "gunstig" : "ongunstig"}: </span>`}<span>${r}</span></p>
+      ${e && this.detail ? i`<p class="lintje-trend__detail">${this.detail}</p>` : n}
+    `;
+	}
+	itemList(e, t, r, a) {
+		let s = this.state === "loading";
+		return i`<div class="lintje-kpi__figures">
+      <div
+        class=${o({
+			"lintje-kpi__items": !0,
+			[`lintje-kpi__items--${t ? "row" : this.layout}`]: !0,
+			"lintje-kpi__items--divided": r
+		})}
+      >
+        ${e.map((e, c) => i`
+            ${c > 0 && r ? i`<span class="lintje-kpi__divider" aria-hidden="true"></span>` : n}
+            <div
+              class=${o({
+			"lintje-kpi__item": !0,
+			"lintje-kpi__item--comparison": !t && c > 0
+		})}
+            >
+              ${s ? i`<lintje-skeleton
+                    height=${t ? 20 : 34}
+                    width="70%"
+                  ></lintje-skeleton>` : this.figure(a + c, e, t)}
+              ${e.period ? i`<p class="lintje-kpi__period">${e.period}</p>` : n}
+            </div>
+          `)}
+      </div>
+    </div>`;
+	}
+	figure(e, t, r = !1) {
+		let a = this.state === "ready", o = this.counting[e] ?? null, s = this.emphasis === "primary" && e === 0 ? t.period : void 0, c = [a ? t.suffix : void 0, s].filter(Boolean).join(" · ");
+		return i`<p class=${r ? "lintje-kpi__secondary-value" : "lintje-kpi__value"}>
+      ${a ? o == null ? t.value : i`<span class="lintje-kpi__count">
+              <span class="lintje-kpi__count-final">${t.value}</span>
+              <span class="lintje-kpi__count-live" aria-hidden="true">${o}</span>
+            </span>` : "—"}${c ? i`<span class="lintje-kpi__suffix">${c}</span>` : n}
+    </p>`;
+	}
+};
+t("lintje-kpi", S);
+//#endregion
+export { S as LintjeKpi };

package/dist-elements/tag/level-meter.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/feedback/level-meter/level-meter.js'

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

@@ -0,0 +1,58 @@
+import { Bt as e, Ht as t, Kt as n, Z as r, ut as i, zt as a } from "../chunks/base-rBLTcEIv.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,
+	.8,
+	.55,
+	1,
+	.45,
+	.7,
+	.9,
+	.5,
+	.75,
+	.35
+];
+function c(e) {
+	return e < .05 ? "Stil" : e < .2 ? "Zacht" : "Goed";
+}
+var l = class extends a {
+	constructor(...e) {
+		super(...e), this.words = !0;
+	}
+	static {
+		this.styles = t(o);
+	}
+	static {
+		this.properties = {
+			level: { type: Number },
+			words: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	render() {
+		let e = this.level == null ? null : Math.min(1, Math.max(0, this.level)), t = e === null ? "Nog niet gemeten" : c(e), a = e === null || e < .05;
+		return n`<span
+      class=${r({
+			"lintje-level-meter": !0,
+			"is-quiet": a
+		})}
+      role="img"
+      aria-label=${`Geluid: ${t.toLowerCase()}`}
+    >
+      <span class="lintje-level-meter__bars" aria-hidden="true">
+        ${s.map((t) => n`<span
+              class="lintje-level-meter__bar"
+              ${i({ height: `${a ? 12 : Math.max(12, Math.round(t * e * 100))}%` })}
+            ></span>`)}
+      </span>
+      ${this.words ? n`<span class="lintje-level-meter__word" aria-hidden="true"
+            >${e === null ? "—" : t}</span
+          >` : ""}
+    </span>`;
+	}
+};
+e("lintje-level-meter", l);
+//#endregion
+export { l as LintjeLevelMeter, c as levelWord };

package/dist-elements/tag/list.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/tables/list/list.js'

package/dist-elements/tag/list.js

@@ -0,0 +1,281 @@
+import { $ as e, Bt as t, Gt as n, H as r, Ht as i, I as a, Kt as o, Lt as s, U as c, Z as l, et as u, p as d, ut as f, zt as p } from "../chunks/base-rBLTcEIv.js";
+import { n as m } from "../chunks/focus-trap-w3vCamJ6.js";
+import "./menu-button.js";
+import "./empty-state.js";
+import "./text-input.js";
+//#region src/components/tables/list/list.css?inline
+var h = "/* The action is a `lintje-menu-button`; here it is only shown or hidden, never restyled. */\n:host { display: block; min-width: 0; container-type: inline-size; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-list {\n  list-style: none; margin: 0; padding: 0;\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n}\n\n.lintje-list__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  grid-template-areas: 'main facts actions';\n  align-items: center;\n  column-gap: var(--space-3);\n  min-height: var(--h-target);\n  padding: 10px var(--lintje-inset, var(--space-3));\n  border-bottom: 1px solid var(--color-border-default);\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-list__row.has-icon {\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  grid-template-areas: 'icon main facts actions';\n}\n/* Renaming in place: the field and its two buttons take the whole row. */\n.lintje-list__row.is-renaming { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main'; }\n.lintje-list__rename { grid-area: main; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n/* The field is as low as the buttons under it: a name in a row, not a form. */\n.lintje-list__rename lintje-text-input { --h-control: var(--h-button-compact); }\n.lintje-list__rename-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }\n/* A data colour along the row says whose it is; the title beside it names it. */\n.lintje-list__row.has-swatch {\n  position: relative;\n  padding-left: calc(var(--lintje-inset, var(--space-3)) + var(--space-2));\n}\n.lintje-list__row.has-swatch::before {\n  content: '';\n  position: absolute;\n  top: var(--space-2);\n  bottom: var(--space-2);\n  left: 0;\n  width: var(--space-1);\n  background: var(--lintje-swatch);\n}\n.lintje-list__row:hover { background: var(--color-bg-subtle); }\n.lintje-list__row.is-static { cursor: auto; }\n.lintje-list__row.is-static:hover { background: none; }\n.lintje-list__row.is-selected {\n  background: var(--color-bg-selected);\n  box-shadow: inset 4px 0 0 var(--color-accent-line);\n}\n/* The ring goes inside the whole row: the outside would be cut off by the list's container. */\n.lintje-list__row:has(.lintje-list__title:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-list__title:focus-visible { outline: none; }\n\n.lintje-list__main {\n  grid-area: main;\n  display: flex; flex-direction: column;\n  min-width: 0;\n}\n/* One line, so every row is as high as the next, where a pointer finds the whole title in the\n   tooltip; below 768 px, without hover and under the keyboard's focus it wraps. Dark, not\n   the link colour: the row is the target, and a column of blue reads as a column of links. */\n.lintje-list__title {\n  align-self: flex-start;\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  font: var(--text-ui);\n  font-weight: 700;\n  color: var(--color-text-primary);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* A tooltip needs a pointer: with the keyboard on the title, or the focus in a row whose title is\n   no stop, the whole title stands in it. */\n.lintje-list__row:has(.lintje-list__title:focus-visible) .lintje-list__title,\n.lintje-list__row.is-static:focus-within .lintje-list__title { white-space: normal; overflow-wrap: anywhere; }\n.lintje-list__row:not(.is-static):hover .lintje-list__title,\n.lintje-list__title[href]:hover { text-decoration: underline; }\n.lintje-list__sub { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-list__progress { margin-top: var(--space-1); }\n.lintje-list__icon { grid-area: icon; color: var(--color-text-muted); }\n.lintje-list__facts { grid-area: facts; display: flex; align-items: center; gap: var(--space-3); }\n.lintje-list__meta {\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n  white-space: nowrap;\n}\n.lintje-list__actions { grid-area: actions; display: flex; align-items: center; gap: var(--space-1); }\n.lintje-list__link {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--h-target);\n  font: var(--text-ui);\n  font-weight: 700;\n  color: var(--color-link);\n  text-decoration: underline;\n}\n.lintje-list__link:hover { color: var(--color-link-hover); }\n\n/* A run's heading: the moment its rows share. The list under it draws no second top line. */\n.lintje-list__group {\n  padding: var(--space-2) var(--lintje-inset, var(--space-3));\n  border-top: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  background: var(--color-bg-subtle);\n  font: var(--text-meta);\n  font-weight: 700;\n  color: var(--color-text-muted);\n}\n.lintje-list__group + .lintje-list,\n.lintje-list + .lintje-list__group,\n.lintje-list + .lintje-list { border-top: 0; }\n\n@media (hover: hover) {\n  .lintje-list__action { opacity: 0; transition: opacity var(--dur-hover) var(--ease-in-motion); }\n  .lintje-list__row:hover .lintje-list__action,\n  .lintje-list__row:focus-within .lintje-list__action,\n  .lintje-list__action[open] { opacity: 1; }\n}\n\n@media (max-width: 767px) {\n  .lintje-list__row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-areas: 'main actions' 'facts actions';\n  }\n  .lintje-list__row.has-icon {\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    grid-template-areas: 'icon main actions' 'icon facts actions';\n  }\n  .lintje-list__icon { align-self: start; }\n  .lintje-list__facts { flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }\n  .lintje-list__meta { white-space: normal; }\n  .lintje-list__action { opacity: 1; }\n}\n\n/* A narrow column beside other content: the same two lines as on a phone. */\n@container (max-width: 32rem) {\n  .lintje-list__row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-areas: 'main actions' 'facts actions';\n  }\n  .lintje-list__row.has-icon {\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    grid-template-areas: 'icon main actions' 'icon facts actions';\n  }\n  .lintje-list__icon { align-self: start; }\n  .lintje-list__facts { flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); }\n  .lintje-list__meta { white-space: normal; }\n}\n\n/* Below 768 px (set from script) and without hover there is no tooltip: the title wraps. */\n.lintje-list__row.is-narrow .lintje-list__title { white-space: normal; overflow-wrap: anywhere; }\n@media (hover: none) {\n  .lintje-list__title { white-space: normal; overflow-wrap: anywhere; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-list__row,\n  .lintje-list__action { transition: none; }\n}\n\n/* Forced colours: the fill and inset bar are dropped. The bar becomes a real border (Canvas at\n   rest, Highlight when chosen), so choosing a row moves nothing. */\n@media (forced-colors: active) {\n  .lintje-list__row { border-left: 4px solid Canvas; }\n  .lintje-list__row.is-selected { border-left-color: Highlight; }\n}\n";
+//#endregion
+//#region src/components/tables/list/list.ts
+function g(e) {
+	let t = [];
+	for (let n of e) {
+		let e = n.group ?? "", r = t[t.length - 1];
+		r && r.label === e ? r.items.push(n) : t.push({
+			label: e,
+			items: [n]
+		});
+	}
+	return t;
+}
+var _ = class extends p {
+	constructor(...e) {
+		super(...e), this.#e = new s(this), this.items = [], this.emptyText = "Er is hier nog niets.", this.headingLevel = 3, this.held = null, this.renaming = null;
+	}
+	static {
+		this.styles = [e, i(h)];
+	}
+	#e;
+	static {
+		this.properties = {
+			items: { attribute: !1 },
+			selectedId: {
+				type: String,
+				attribute: "selected-id"
+			},
+			emptyText: {
+				type: String,
+				attribute: "empty-text"
+			},
+			label: { type: String },
+			headingLevel: {
+				type: Number,
+				attribute: "heading-level"
+			}
+		};
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.held = e.has("items") ? this.heldFocus(e.get("items") ?? []) : null;
+	}
+	rowElements() {
+		return [...this.renderRoot.querySelectorAll(".lintje-list__row")];
+	}
+	controls(e, t = !0) {
+		let n = e.querySelector("a.lintje-list__title, button.lintje-list__title"), r = [...e.querySelectorAll("[data-part=\"action\"]")];
+		return (t ? [n, ...r] : [...r, n]).filter((e) => e !== null);
+	}
+	heldFocus(e) {
+		let t = this.rowElements(), n = t.findIndex((e) => c(e)), r = t[n];
+		if (r?.classList.contains("is-renaming")) return {
+			items: e,
+			index: n,
+			control: r,
+			onTitle: !0,
+			renaming: !0
+		};
+		let i = r && this.controls(r).find((e) => c(e));
+		return !r || !i ? null : {
+			items: e,
+			index: n,
+			control: i,
+			onTitle: i.classList.contains("lintje-list__title")
+		};
+	}
+	landing(e) {
+		let t = this.rowElements(), n = (e) => t[this.items.findIndex((t) => t.id === e)], r = n(e.items[e.index]?.id) ?? (e.renaming ? t[e.index] : void 0);
+		if (r) {
+			let [t] = this.controls(r, e.onTitle);
+			if (t) return t;
+		}
+		let i = e.items.slice(e.index + 1), a = e.items.slice(0, e.index).reverse();
+		for (let e of [...i, ...a]) {
+			let t = n(e.id), [r] = t ? this.controls(t) : [];
+			if (r) return r;
+		}
+		let o = this.renderRoot.querySelector("lintje-empty-state, .lintje-list__group, ul.lintje-list");
+		return o && (o.tabIndex = -1), o;
+	}
+	async refocus(e) {
+		let t = this.landing(e);
+		if (!t) return;
+		await t.updateComplete;
+		let n = r();
+		n && n !== document.body && n.isConnected || m(t).focus();
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.held;
+		this.held = null, t && !(t.control.isConnected && c(t.control)) && !c(this) && this.refocus(t);
+		let n = this.items.find((e) => e.rename)?.id ?? null;
+		if (n === this.renaming || (this.renaming = n, !n)) return;
+		let r = this.renderRoot.querySelector(".lintje-list__rename lintje-text-input");
+		r?.updateComplete.then(() => {
+			let e = r.shadowRoot?.querySelector("input");
+			e?.focus(), e?.select();
+		});
+	}
+	saveRename(e) {
+		let t = this.renderRoot.querySelector(".lintje-list__rename lintje-text-input");
+		this.emit("lintje-row-rename", {
+			id: e.id,
+			value: String(t?.value ?? "").trim()
+		});
+	}
+	renderRename(e) {
+		return o`<li
+      class=${l({
+			"lintje-list__row": !0,
+			"is-static": !0,
+			"is-renaming": !0,
+			"has-swatch": !!e.swatch
+		})}
+      ${f({ "--lintje-swatch": e.swatch ? `var(--color-chart-${e.swatch})` : null })}
+    >
+      <div
+        class="lintje-list__rename"
+        @keydown=${(t) => {
+			let n = t.currentTarget.querySelector("lintje-text-input");
+			n && t.composedPath().includes(n) && (t.key === "Enter" ? (t.preventDefault(), this.saveRename(e)) : t.key === "Escape" && (t.preventDefault(), t.stopPropagation(), this.emit("lintje-row-rename-cancel", { id: e.id })));
+		}}
+      >
+        <lintje-text-input
+          label=${`Nieuwe naam voor ${e.title}`}
+          hide-label
+          value=${e.title}
+          error=${e.rename?.error || n}
+        ></lintje-text-input>
+        <div class="lintje-list__rename-actions">
+          <lintje-button variant="primary" size="compact" @click=${() => this.saveRename(e)}
+            >${e.rename?.save}</lintje-button
+          >
+          <lintje-button
+            variant="link"
+            size="compact"
+            @click=${() => this.emit("lintje-row-rename-cancel", { id: e.id })}
+            >Annuleren</lintje-button
+          >
+        </div>
+      </div>
+    </li>`;
+	}
+	detail(e) {
+		return e.href ? {
+			id: e.id,
+			label: e.title,
+			href: e.href
+		} : {
+			id: e.id,
+			label: e.title
+		};
+	}
+	onRowClick(e, t) {
+		let n = e.composedPath();
+		if (n.some((e) => e instanceof HTMLElement && e.dataset.part === "action")) return;
+		let r = t.href && n.some((e) => e instanceof HTMLAnchorElement);
+		(!r || a(e)) && (!this.emit("lintje-row-click", this.detail(t)) || !r) && e.preventDefault();
+	}
+	onAction(e, t) {
+		e.stopPropagation(), this.emit("lintje-row-action", {
+			id: t.id,
+			label: t.title,
+			value: e.detail
+		});
+	}
+	renderTitle(e) {
+		let t = e.id === this.selectedId ? "true" : n;
+		return e.href ? o`<a
+        class="lintje-list__title"
+        href=${e.href}
+        title=${e.title}
+        aria-current=${t}
+        >${e.title}</a
+      >` : e.clickable === !1 ? o`<span class="lintje-list__title" title=${e.title} aria-current=${t}
+        >${e.title}</span
+      >` : o`<button
+      type="button"
+      class="lintje-list__title"
+      title=${e.title}
+      aria-current=${t}
+    >
+      ${e.title}
+    </button>`;
+	}
+	renderAction(e) {
+		let t = e.action;
+		if (!t) return n;
+		let r = o`${t.label}<span class="visually-hidden"> ${e.title}</span>`;
+		return t.href ? o`<a class="lintje-list__link" data-part="action" href=${t.href}>${r}</a>` : o`<lintje-button
+      variant="link"
+      size="compact"
+      data-part="action"
+      @click=${() => this.emit("lintje-row-action", {
+			id: e.id,
+			label: e.title,
+			value: t.value
+		})}
+      >${r}</lintje-button
+    >`;
+	}
+	row(e) {
+		if (e.rename) return this.renderRename(e);
+		let t = e.id === this.selectedId, r = e.clickable !== !1, i = (e.actions?.length ?? 0) > 0, a = typeof e.progress == "number" && !Number.isNaN(e.progress);
+		return o`<li
+      class=${l({
+			"lintje-list__row": !0,
+			"is-selected": t,
+			"is-static": !r,
+			"has-icon": !!e.icon,
+			"has-actions": i,
+			"has-swatch": !!e.swatch,
+			"is-narrow": this.#e.matches
+		})}
+      ${f({ "--lintje-swatch": e.swatch ? `var(--color-chart-${e.swatch})` : null })}
+      @click=${r ? (t) => this.onRowClick(t, e) : n}
+    >
+      ${e.icon ? u(e.icon, {
+			size: 24,
+			className: "lintje-list__icon"
+		}) : n}
+      <div class="lintje-list__main">
+        ${this.renderTitle(e)}
+        ${e.sub ? o`<span class="lintje-list__sub">${e.sub}</span>` : n}
+        ${a ? o`<lintje-progress-bar
+                class="lintje-list__progress"
+                hide-label
+                label=${`Voortgang ${e.title}`}
+                .value=${e.progress}
+                tone=${e.status?.tone === "warning" ? "paused" : "run"}
+              ></lintje-progress-bar>` : n}
+      </div>
+      ${e.status || e.meta ? o`<div class="lintje-list__facts">
+              ${e.status ? o`<lintje-badge tone=${e.status.tone ?? "neutral"}>${e.status.label}</lintje-badge>` : n}
+              ${e.meta ? o`<span class="lintje-list__meta">${e.meta}</span>` : n}
+            </div>` : n}
+      ${e.action || i ? o`<div class="lintje-list__actions">
+              ${this.renderAction(e)}
+              ${i ? o`<lintje-menu-button
+                      class="lintje-list__action"
+                      data-part="action"
+                      icon
+                      placement="bottom-end"
+                      label=${`Acties voor ${e.title}`}
+                      .items=${e.actions ?? []}
+                      @lintje-action=${(t) => this.onAction(t, e)}
+                    ></lintje-menu-button>` : n}
+            </div>` : n}
+    </li>`;
+	}
+	renderRun(e, t, r) {
+		let i = d(e.items, (e) => e.id, (e) => this.row(e));
+		return e.label ? o`<div
+        class="lintje-list__group"
+        id="lintje-list-group-${t}"
+        role="heading"
+        aria-level=${this.headingLevel}
+        >${e.label}</div
+      >
+      <ul class="lintje-list" aria-labelledby="lintje-list-group-${t}">${i}</ul>` : o`<ul class="lintje-list" aria-label=${r ?? n}>${i}</ul>`;
+	}
+	render() {
+		if (!this.items.length) return o`<lintje-empty-state compact text=${this.emptyText}
+        ><slot name="empty"></slot
+      ></lintje-empty-state>`;
+		let e = g(this.items), [t] = e;
+		return e.length === 1 && t && !t.label ? this.renderRun(t, 0, this.label) : o`<div role="group" aria-label=${this.label ?? n}>
+      ${e.map((e, t) => this.renderRun(e, t))}
+    </div>`;
+	}
+};
+t("lintje-list", _);
+//#endregion
+export { _ as LintjeList, g as groupRuns };

package/dist-elements/tag/logo.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/actions/logo/logo.js'