lintje 0.2.0 → 0.3.0

package/dist-elements/tag/list.js

@@ -1,10 +1,10 @@
-import { $ as e, Bt as t, Gt as n, H as r, Ht as i, I as a, Lt as o, U as s, Z as c, et as l, p as u, qt as d, ut as f, zt as p } from "../chunks/base-Bg-IFOPG.js";
-import { n as m } from "../chunks/focus-trap-9BnE-xWv.js";
+import { H as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, bt as s, en as c, h as l, lt as u, nn as d, st as f, ut as p } from "../chunks/base-CbmWxUig.js";
+import { n as m } from "../chunks/focus-trap-BwOxE5BX.js";
 import "./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";
+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 screen and (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) {
@@ -18,12 +18,12 @@ function g(e) {
 	}
 	return t;
 }
-var _ = class extends p {
+var _ = class extends t {
 	constructor(...e) {
-		super(...e), this.#e = new o(this), this.items = [], this.emptyText = "Er is hier nog niets.", this.headingLevel = 3, this.held = null, this.renaming = null;
+		super(...e), this.#e = new n(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)];
+		this.styles = [u, o(h)];
 	}
 	#e;
 	static {
@@ -55,20 +55,20 @@ var _ = class extends p {
 		return (t ? [n, ...r] : [...r, n]).filter((e) => e !== null);
 	}
 	heldFocus(e) {
-		let t = this.rowElements(), n = t.findIndex((e) => s(e)), r = t[n];
-		if (r?.classList.contains("is-renaming")) return {
+		let t = this.rowElements(), n = t.findIndex((e) => r(e)), i = t[n];
+		if (i?.classList.contains("is-renaming")) return {
 			items: e,
 			index: n,
-			control: r,
+			control: i,
 			onTitle: !0,
 			renaming: !0
 		};
-		let i = r && this.controls(r).find((e) => s(e));
-		return !r || !i ? null : {
+		let a = i && this.controls(i).find((e) => r(e));
+		return !i || !a ? null : {
 			items: e,
 			index: n,
-			control: i,
-			onTitle: i.classList.contains("lintje-list__title")
+			control: a,
+			onTitle: a.classList.contains("lintje-list__title")
 		};
 	}
 	landing(e) {
@@ -89,18 +89,18 @@ var _ = class extends p {
 		let t = this.landing(e);
 		if (!t) return;
 		await t.updateComplete;
-		let n = r();
+		let n = a();
 		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 && s(t.control)) && !s(this) && this.refocus(t);
+		this.held = null, t && !(t.control.isConnected && r(t.control)) && !r(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");
+		let i = this.renderRoot.querySelector(".lintje-list__rename lintje-text-input");
+		i?.updateComplete.then(() => {
+			let e = i.shadowRoot?.querySelector("input");
 			e?.focus(), e?.select();
 		});
 	}
@@ -113,13 +113,13 @@ var _ = class extends p {
 	}
 	renderRename(e) {
 		return d`<li
-      class=${c({
+      class=${f({
 			"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 })}
+      ${s({ "--lintje-swatch": e.swatch ? `var(--color-chart-${e.swatch})` : null })}
     >
       <div
         class="lintje-list__rename"
@@ -132,7 +132,7 @@ var _ = class extends p {
           label=${`Nieuwe naam voor ${e.title}`}
           hide-label
           value=${e.title}
-          error=${e.rename?.error || n}
+          error=${e.rename?.error || c}
         ></lintje-text-input>
         <div class="lintje-list__rename-actions">
           <lintje-button variant="primary" size="compact" @click=${() => this.saveRename(e)}
@@ -158,11 +158,11 @@ var _ = class extends p {
 			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();
+	onRowClick(t, n) {
+		let r = t.composedPath();
+		if (r.some((e) => e instanceof HTMLElement && e.dataset.part === "action")) return;
+		let i = n.href && r.some((e) => e instanceof HTMLAnchorElement);
+		(!i || e(t)) && (!this.emit("lintje-row-click", this.detail(n)) || !i) && t.preventDefault();
 	}
 	onAction(e, t) {
 		e.stopPropagation(), this.emit("lintje-row-action", {
@@ -172,7 +172,7 @@ var _ = class extends p {
 		});
 	}
 	renderTitle(e) {
-		let t = e.id === this.selectedId ? "true" : n;
+		let t = e.id === this.selectedId ? "true" : c;
 		return e.href ? d`<a
         class="lintje-list__title"
         href=${e.href}
@@ -192,9 +192,9 @@ var _ = class extends p {
 	}
 	renderAction(e) {
 		let t = e.action;
-		if (!t) return n;
-		let r = d`${t.label}<span class="visually-hidden"> ${e.title}</span>`;
-		return t.href ? d`<a class="lintje-list__link" data-part="action" href=${t.href}>${r}</a>` : d`<lintje-button
+		if (!t) return c;
+		let n = d`${t.label}<span class="visually-hidden"> ${e.title}</span>`;
+		return t.href ? d`<a class="lintje-list__link" data-part="action" href=${t.href}>${n}</a>` : d`<lintje-button
       variant="link"
       size="compact"
       data-part="action"
@@ -203,47 +203,47 @@ var _ = class extends p {
 			label: e.title,
 			value: t.value
 		})}
-      >${r}</lintje-button
+      >${n}</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);
+		let t = e.id === this.selectedId, n = e.clickable !== !1, r = (e.actions?.length ?? 0) > 0, i = typeof e.progress == "number" && !Number.isNaN(e.progress);
 		return d`<li
-      class=${c({
+      class=${f({
 			"lintje-list__row": !0,
 			"is-selected": t,
-			"is-static": !r,
+			"is-static": !n,
 			"has-icon": !!e.icon,
-			"has-actions": i,
+			"has-actions": r,
 			"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}
+      ${s({ "--lintje-swatch": e.swatch ? `var(--color-chart-${e.swatch})` : null })}
+      @click=${n ? (t) => this.onRowClick(t, e) : c}
     >
-      ${e.icon ? l(e.icon, {
+      ${e.icon ? p(e.icon, {
 			size: 24,
 			className: "lintje-list__icon"
-		}) : n}
+		}) : c}
       <div class="lintje-list__main">
         ${this.renderTitle(e)}
-        ${e.sub ? d`<span class="lintje-list__sub">${e.sub}</span>` : n}
-        ${a ? d`<lintje-progress-bar
+        ${e.sub ? d`<span class="lintje-list__sub">${e.sub}</span>` : c}
+        ${i ? d`<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}
+                state=${e.status?.tone === "warning" ? "paused" : "busy"}
+              ></lintje-progress-bar>` : c}
       </div>
       ${e.status || e.meta ? d`<div class="lintje-list__facts">
-              ${e.status ? d`<lintje-badge tone=${e.status.tone ?? "neutral"}>${e.status.label}</lintje-badge>` : n}
-              ${e.meta ? d`<span class="lintje-list__meta">${e.meta}</span>` : n}
-            </div>` : n}
-      ${e.action || i ? d`<div class="lintje-list__actions">
+              ${e.status ? d`<lintje-badge tone=${e.status.tone ?? "neutral"}>${e.status.label}</lintje-badge>` : c}
+              ${e.meta ? d`<span class="lintje-list__meta">${e.meta}</span>` : c}
+            </div>` : c}
+      ${e.action || r ? d`<div class="lintje-list__actions">
               ${this.renderAction(e)}
-              ${i ? d`<lintje-menu-button
+              ${r ? d`<lintje-menu-button
                       class="lintje-list__action"
                       data-part="action"
                       icon
@@ -251,12 +251,12 @@ var _ = class extends p {
                       label=${`Acties voor ${e.title}`}
                       .items=${e.actions ?? []}
                       @lintje-action=${(t) => this.onAction(t, e)}
-                    ></lintje-menu-button>` : n}
-            </div>` : n}
+                    ></lintje-menu-button>` : c}
+            </div>` : c}
     </li>`;
 	}
-	renderRun(e, t, r) {
-		let i = u(e.items, (e) => e.id, (e) => this.row(e));
+	renderRun(e, t, n) {
+		let r = l(e.items, (e) => e.id, (e) => this.row(e));
 		return e.label ? d`<div
         class="lintje-list__group"
         id="lintje-list-group-${t}"
@@ -264,18 +264,18 @@ var _ = class extends p {
         aria-level=${this.headingLevel}
         >${e.label}</div
       >
-      <ul class="lintje-list" aria-labelledby="lintje-list-group-${t}">${i}</ul>` : d`<ul class="lintje-list" aria-label=${r ?? n}>${i}</ul>`;
+      <ul class="lintje-list" aria-labelledby="lintje-list-group-${t}">${r}</ul>` : d`<ul class="lintje-list" aria-label=${n ?? c}>${r}</ul>`;
 	}
 	render() {
 		if (!this.items.length) return d`<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) : d`<div role="group" aria-label=${this.label ?? n}>
+		return e.length === 1 && t && !t.label ? this.renderRun(t, 0, this.label) : d`<div role="group" aria-label=${this.label ?? c}>
       ${e.map((e, t) => this.renderRun(e, t))}
     </div>`;
 	}
 };
-t("lintje-list", _);
+i("lintje-list", _);
 //#endregion
 export { _ as LintjeList, g as groupRuns };

package/dist-elements/tag/logo.js

@@ -1,10 +1,10 @@
-import { Bt as e, Gt as t, Ht as n, Jt as r, Q as i, ct as a, dt as o, qt as s, st as c, ut as l, zt as u } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, _t as r, bt as i, ct as a, en as o, nn as s, rn as c, vt as l, xt as u } from "../chunks/base-CbmWxUig.js";
 //#region src/components/actions/logo/logo.css?inline
-var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the drawing fills it. */\n:host {\n  display: block;\n  flex: none;\n}\n:host([hidden]) { display: none; }\n.lintje-logo { display: block; }\n/* The emblem file's lintblauw ribbon; in dark it takes the house style's lighter tint. */\n.lintje-logo [fill='#154273' i] { fill: var(--color-logo-ribbon); }\n/* The frame is the window on the drawing; it narrows to the ribbon on the menu's duration. */\n.lintje-logo__frame {\n  display: block;\n  overflow: hidden;\n  transition: width var(--dur-rail, 180ms) var(--ease-in-motion, ease);\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-logo__frame { transition: none; }\n}\n\n/* The name hangs outside the drawing's box, so the ribbon keeps its place whatever the name's\n   length. Its left is set inline, in px, from the ribbon's width. */\n.lintje-logo__lockup { position: relative; display: block; }\n.lintje-logo__name {\n  position: absolute;\n  top: 55%;\n  display: flex;\n  flex-direction: column;\n  margin-left: var(--space-3);\n  width: max-content;\n  max-width: 20rem;\n  font: 700 1rem/1.2 var(--font-ui);\n  color: inherit;\n}\n.lintje-logo__byline { font-weight: 400; font-style: italic; }\n@media (max-width: 767px) {\n  .lintje-logo__name { max-width: 9rem; font-size: 0.875rem; }\n}\n", f = {
+var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the drawing fills it. */\n:host {\n  display: block;\n  flex: none;\n}\n:host([hidden]) { display: none; }\n.lintje-logo { display: block; }\n/* The emblem file's lintblauw ribbon; in dark it takes the house style's lighter tint. */\n.lintje-logo [fill='#154273' i] { fill: var(--color-logo-ribbon); }\n/* The frame is the window on the drawing; it narrows to the ribbon on the menu's duration. */\n.lintje-logo__frame {\n  display: block;\n  overflow: hidden;\n  transition: width var(--dur-rail, 180ms) var(--ease-in-motion, ease);\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-logo__frame { transition: none; }\n}\n\n/* The name hangs outside the drawing's box, so the ribbon keeps its place whatever the name's\n   length. Its left is set inline, in px, from the ribbon's width. */\n.lintje-logo__lockup { position: relative; display: block; }\n.lintje-logo__name {\n  position: absolute;\n  top: 55%;\n  display: flex;\n  flex-direction: column;\n  margin-left: var(--space-3);\n  width: max-content;\n  max-width: 20rem;\n  font: 700 1rem/1.2 var(--font-ui);\n  color: inherit;\n}\n.lintje-logo__byline { font-weight: 400; font-style: italic; }\n@media screen and (max-width: 767px) {\n  .lintje-logo__name { max-width: 9rem; font-size: 0.875rem; }\n}\n", f = {
 	x: 154,
 	width: 38,
 	height: 75
-}, p = 192, m = "0 0 346 75", h = 346, g = class extends u {
+}, p = 192, m = "0 0 346 75", h = 346, g = class extends e {
 	constructor(...e) {
 		super(...e), this.width = 44, this.alt = "", this.open = !1, this.full = !1, this.#e = null;
 	}
@@ -24,82 +24,82 @@ var d = "/* The emblem's own box: `display: block; flex: none` on `:host`, the d
 	}
 	#e;
 	connectedCallback() {
-		super.connectedCallback(), this.#e = c(() => this.requestUpdate());
+		super.connectedCallback(), this.#e = r(() => this.requestUpdate());
 	}
 	disconnectedCallback() {
 		this.#e?.(), this.#e = null, super.disconnectedCallback();
 	}
-	#t(e, n) {
+	#t(e, t) {
 		return !(this.full || this.open) || !this.alt ? e : s`<span class="lintje-logo__lockup">
       ${e}
       <span
         class="lintje-logo__name"
         aria-hidden="true"
-        ${l({ left: `${n}px` })}
-        ><span class="lintje-logo__name-line">${this.alt}</span>${this.byline ? s`<span class="lintje-logo__byline">${this.byline}</span>` : t}</span
+        ${i({ left: `${t}px` })}
+        ><span class="lintje-logo__name-line">${this.alt}</span>${this.byline ? s`<span class="lintje-logo__byline">${this.byline}</span>` : o}</span
       >
     </span>`;
 	}
 	render() {
-		let e = this.width / f.width, n = Math.round(f.height * e), c = Math.round(p * e), u = Math.round(h * e), d = this.full ? u : this.open ? c : this.width;
+		let e = this.width / f.width, t = Math.round(f.height * e), n = Math.round(p * e), r = Math.round(h * e), d = this.full ? r : this.open ? n : this.width;
 		if (this.src) return s`<img
         class="lintje-logo"
         src=${this.src}
         alt=${this.alt}
         width=${this.width}
-        height=${n}
+        height=${t}
       />`;
-		let g = this.name, _ = i(g);
-		if (!_) return g && a(g), s`<span
+		let g = this.name, _ = a(g);
+		if (!_) return g && l(g), s`<span
         class="lintje-logo lintje-logo--pending"
-        ${l({
+        ${i({
 			width: `${d}px`,
-			height: `${n}px`
+			height: `${t}px`
 		})}
-        role=${g && this.alt ? "img" : t}
-        aria-label=${g && this.alt ? this.alt : t}
+        role=${g && this.alt ? "img" : o}
+        aria-label=${g && this.alt ? this.alt : o}
       ></span>`;
 		if (_.viewBox !== m) {
-			let [, , e, n] = _.viewBox.split(/\s+/).map(Number);
+			let [, , e, t] = _.viewBox.split(/\s+/).map(Number);
 			return this.#t(s`<svg
           class="lintje-logo"
           xmlns="http://www.w3.org/2000/svg"
           width=${this.width}
-          height=${Math.round(this.width * n / e)}
+          height=${Math.round(this.width * t / e)}
           viewBox=${_.viewBox}
-          role=${this.alt ? "img" : t}
-          aria-hidden=${this.alt ? t : "true"}
-          aria-label=${this.alt || t}
+          role=${this.alt ? "img" : o}
+          aria-hidden=${this.alt ? o : "true"}
+          aria-label=${this.alt || o}
           fill=${_.attributes.fill ?? "currentColor"}
         >
-          ${r`${o(_.body)}`}
+          ${c`${u(_.body)}`}
         </svg>`, this.width);
 		}
 		let v = s`<span
       class="lintje-logo__frame"
-      ${l({
+      ${i({
 			width: `${d}px`,
-			height: `${n}px`
+			height: `${t}px`
 		})}
     >
       <svg
         class="lintje-logo"
         xmlns="http://www.w3.org/2000/svg"
-        width=${this.full ? u : c}
-        height=${n}
+        width=${this.full ? r : n}
+        height=${t}
         viewBox=${this.full ? m : `${f.x} 0 ${p} ${f.height}`}
         preserveAspectRatio="xMinYMin meet"
-        role=${this.alt ? "img" : t}
-        aria-hidden=${this.alt ? t : "true"}
-        aria-label=${this.alt || t}
+        role=${this.alt ? "img" : o}
+        aria-hidden=${this.alt ? o : "true"}
+        aria-label=${this.alt || o}
         fill=${_.attributes.fill ?? "currentColor"}
       >
-        ${r`${o(_.body)}`}
+        ${c`${u(_.body)}`}
       </svg>
     </span>`, y = this.full ? Math.round((f.x + f.width) * e) : this.width;
 		return this.#t(v, y);
 	}
 };
-e("lintje-logo", g);
+t("lintje-logo", g);
 //#endregion
 export { g as LintjeLogo };