lintje 0.2.0 → 0.4.0

package/dist-elements/tag/form.js

@@ -1,5 +1,5 @@
-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 { Gt as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, nn as c } from "../chunks/base-DRGvkF-r.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-_4ac1Lpz.js";
 import "./error-summary.js";
 import "./form-actions.js";
 //#region src/components/forms/form/form.css?inline
@@ -28,9 +28,9 @@ function S(e, t, n = Date.now()) {
 		return null;
 	}
 }
-var C = class extends c {
-	constructor(...e) {
-		super(...e), this.values = {}, this.busy = !1, this.draftTtl = 24, this.dirty = !1, this.phase = "", this.#e = {}, this.#t = !1, this.#n = !1, this.#r = null, this.#i = !1, this.#a = null, this.#o = new MutationObserver((e) => {
+var C = class extends t {
+	constructor(...t) {
+		super(...t), this.values = {}, this.busy = !1, this.draftTtl = 24, this.dirty = !1, this.phase = "", this.#e = {}, this.#t = !1, this.#n = !1, this.#r = null, this.#i = !1, this.#a = null, this.#o = new MutationObserver((e) => {
 			let t = [], n = [];
 			for (let r of e) {
 				for (let e of r.addedNodes) t.push(...f(e));
@@ -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 a(this, i), this.#c = new p("disabled"), this.#l = new p("stacked"), this.#u = (e) => {
+		}), this.#s = new n(this, e), 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);
@@ -68,7 +68,7 @@ var C = class extends c {
 		}, this.#h = "", this.#E = [], this.#D = !1, this.#O = !1;
 	}
 	static {
-		this.styles = r(g);
+		this.styles = o(g);
 	}
 	static {
 		this.properties = {
@@ -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 = o(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 = r(this) ? a() : null), e.has("dirty") && (this.dirty ? window.addEventListener("beforeunload", this.#m) : window.removeEventListener("beforeunload", this.#m));
 	}
 	#E;
 	#D;
@@ -260,7 +260,7 @@ var C = class extends c {
 	#A() {
 		let e = this.#a;
 		this.#a = null, e && requestAnimationFrame(() => {
-			let t = n();
+			let t = a();
 			t && t !== document.body || e.isConnected && e.focus();
 		});
 	}
@@ -275,10 +275,10 @@ var C = class extends c {
 		for (let n of this.querySelectorAll("lintje-form-actions")) n.state = e, n.savedAt = t;
 	}
 	render() {
-		return s`<form
+		return c`<form
       class="lintje-form"
       novalidate
-      aria-busy=${this.busy ? "true" : t}
+      aria-busy=${this.busy ? "true" : s}
       @submit=${(e) => {
 			e.preventDefault(), this.submit();
 		}}
@@ -297,6 +297,6 @@ var C = class extends c {
     </form>`;
 	}
 };
-e("lintje-form", C);
+i("lintje-form", C);
 //#endregion
 export { _ as DRAFT_PREFIX, C as LintjeForm, S as readDraft };

package/dist-elements/tag/gallery.js

@@ -1,6 +1,6 @@
-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 { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.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 {
+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 e {
 	constructor(...e) {
 		super(...e), this.items = [], this.selected = 0, this.label = "Afbeeldingen", this.spoken = "";
 	}
@@ -26,35 +26,35 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	}
 	render() {
 		let e = this.items;
-		if (!e.length) return t;
-		let n = this.shown, a = e[n];
+		if (!e.length) return r;
+		let t = this.shown, n = e[t];
 		return i`<div class="lintje-gallery">
       <figure class="lintje-gallery__figure">
-        <img class="lintje-gallery__image" src=${a.src} alt=${a.alt} />
-        ${a.caption ? i`<figcaption class="lintje-gallery__caption">${a.caption}</figcaption>` : t}
+        <img class="lintje-gallery__image" src=${n.src} alt=${n.alt} />
+        ${n.caption ? i`<figcaption class="lintje-gallery__caption">${n.caption}</figcaption>` : r}
       </figure>
       ${e.length > 1 ? i`<ul class="lintje-gallery__thumbs" aria-label=${this.label}>
-              ${e.map((a, o) => i`<li>
+              ${e.map((n, o) => i`<li>
                   <button
                     type="button"
-                    class=${r({
+                    class=${a({
 			"lintje-gallery__thumb": !0,
-			"is-selected": o === n
+			"is-selected": o === t
 		})}
-                    aria-current=${o === n ? "true" : t}
+                    aria-current=${o === t ? "true" : r}
                     @click=${() => this.choose(o)}
                   >
-                    <img class="lintje-gallery__thumb-image" src=${a.src} alt="" />
+                    <img class="lintje-gallery__thumb-image" src=${n.src} alt="" />
                     <span class="visually-hidden"
-                      >Afbeelding ${o + 1} van ${e.length}: ${a.caption || a.alt}</span
+                      >Afbeelding ${o + 1} van ${e.length}: ${n.caption || n.alt}</span
                     >
                   </button>
                 </li>`)}
             </ul>
-              <span class="visually-hidden" role="status">${this.spoken}</span>` : t}
+              <span class="visually-hidden" role="status">${this.spoken}</span>` : r}
     </div>`;
 	}
 };
-e("lintje-gallery", s);
+t("lintje-gallery", s);
 //#endregion
 export { s as LintjeGallery };

package/dist-elements/tag/grid-item.d.ts

@@ -1 +1 @@
-export * from '../types/primitives/grid-item/grid-item.js'
+export * from '../types/components/layout/grid-item/grid-item.js'

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

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

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

@@ -1 +1 @@
-export * from '../types/primitives/grid/grid.js'
+export * from '../types/components/layout/grid/grid.js'

package/dist-elements/tag/grid.js

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

package/dist-elements/tag/hero.js

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

package/dist-elements/tag/highlight.js

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

package/dist-elements/tag/icon-button.d.ts

@@ -1 +1 @@
-export * from '../types/primitives/icon-button/icon-button.js'
+export * from '../types/components/actions/icon-button/icon-button.js'

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

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

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

@@ -1 +1 @@
-export * from '../types/icons/icon/icon.js'
+export * from '../types/components/actions/icon/icon.js'

package/dist-elements/tag/icon.js

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

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

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

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

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