lintje 0.1.1

package/dist-elements/tag/form.js

@@ -0,0 +1,302 @@
+import { Bt as e, Gt as t, H as n, Ht as r, It as i, Kt as a, Lt as o, U as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+import { c as l, d as u, i as d, l as f, n as p, r as m, u as h } from "../chunks/controls-B1455oPG.js";
+import "./error-summary.js";
+import "./form-actions.js";
+//#region src/components/forms/form/form.css?inline
+var g = "/* Slotted children keep clear of the sticky top bar when the error summary scrolls to them. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n::slotted(*) { scroll-margin-top: var(--h-sticky); }\n/* A section that follows something gets the 12 px the field gap lacks (32 px in all). */\n::slotted(lintje-form-section:not(:first-child)) { margin-top: var(--space-3); }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n", _ = "lintje-draft:", v = 36e5, y = /* @__PURE__ */ new Set([
+	"text",
+	"search",
+	"email",
+	"tel",
+	"url",
+	"number",
+	"password",
+	"date",
+	"time"
+]);
+function b(e, t) {
+	e.localName.includes("-") || (t ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
+}
+var x = (e, t) => JSON.stringify(e) === JSON.stringify(t);
+function S(e, t, n = Date.now()) {
+	try {
+		let r = localStorage.getItem(_ + e);
+		if (!r) return null;
+		let i = JSON.parse(r);
+		return typeof i?.savedAt != "number" || n - i.savedAt > t * v ? (localStorage.removeItem(_ + e), null) : i;
+	} catch {
+		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) => {
+			let t = [], n = [];
+			for (let r of e) {
+				for (let e of r.addedNodes) t.push(...f(e));
+				for (let e of r.removedNodes) n.push(...f(e));
+			}
+			this.#_(t.filter((e) => this.contains(e)));
+			let r = new Set(l(this).map(d));
+			for (let e of n) {
+				let t = d(e);
+				!this.contains(e) && !r.has(t) && this.forget(t);
+			}
+		}), this.#s = new o(this, i), this.#c = new p("disabled"), this.#l = new p("stacked"), this.#u = (e) => {
+			let t = e.target;
+			if (t === this) return;
+			let n = d(t);
+			if (!n) return;
+			let r = e.detail;
+			x(h(t), r) || u(t, r), x(r, this.values[n]) ? delete this.#e[n] : this.#e[n] = r, this.#x(), this.#w(n, t), this.#b("dirty");
+		}, this.#d = (e) => {
+			e.target !== this && e.stopPropagation();
+		}, this.#f = (e) => {
+			let t = e.composedPath()[0], n = e.ctrlKey || e.metaKey;
+			if (n && e.key.toLowerCase() === "s") {
+				e.preventDefault(), this.#v(t), this.saveDraft();
+				return;
+			}
+			if (e.key !== "Enter" || e.shiftKey || e.altKey || e.defaultPrevented || e.isComposing) return;
+			let r = t instanceof HTMLInputElement && y.has(t.type), i = t instanceof HTMLTextAreaElement && n;
+			(r || i) && (e.preventDefault(), r && this.#v(t), this.submit());
+		}, this.#p = (e) => {
+			let t = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "lintje-button" && e.type === "submit");
+			t && this.contains(t) && (e.preventDefault(), this.submit());
+		}, this.#m = (e) => {
+			e.preventDefault(), e.returnValue = "";
+		}, this.#h = "", this.#E = [], this.#D = !1, this.#O = !1;
+	}
+	static {
+		this.styles = r(g);
+	}
+	static {
+		this.properties = {
+			values: { attribute: !1 },
+			errors: { attribute: !1 },
+			busy: {
+				type: Boolean,
+				reflect: !0
+			},
+			savedAt: {
+				type: String,
+				attribute: "saved-at"
+			},
+			draftKey: {
+				type: String,
+				attribute: "draft-key"
+			},
+			draftTtl: {
+				type: Number,
+				attribute: "draft-ttl"
+			},
+			dirty: {
+				type: Boolean,
+				reflect: !0
+			},
+			phase: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	#m;
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("lintje-change", this.#u), this.addEventListener("lintje-values-change", this.#d), this.addEventListener("keydown", this.#f), this.addEventListener("click", this.#p), this.#o.observe(this, {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	disconnectedCallback() {
+		this.#o.disconnect(), this.removeEventListener("lintje-change", this.#u), this.removeEventListener("lintje-values-change", this.#d), this.removeEventListener("keydown", this.#f), this.removeEventListener("click", this.#p), window.removeEventListener("beforeunload", this.#m), this.#c.release(), this.#l.release(), super.disconnectedCallback();
+	}
+	collect() {
+		let e = {
+			...this.values,
+			...this.#e
+		};
+		for (let t of l(this)) {
+			let n = d(t);
+			(!m(t) || !(n in e)) && (e[n] = h(t));
+		}
+		return e;
+	}
+	forget(e) {
+		let t = e in this.values;
+		if (t || e in this.#e) {
+			if (delete this.#e[e], t) {
+				let t = { ...this.values };
+				delete t[e], this.#i = !0, this.values = t;
+			}
+			this.#x(), this.#b(this.phase === "saved" && !Object.keys(this.#e).length ? "saved" : "dirty");
+		}
+	}
+	get restoredDraft() {
+		return this.#g(), this.#r ? structuredClone(this.#r.values) : null;
+	}
+	get restoredAt() {
+		return this.#g(), this.#r ? new Date(this.#r.savedAt) : null;
+	}
+	submit() {
+		this.busy || (this.#D = !0, this.emit("lintje-submit", { values: this.collect() }));
+	}
+	saved(e = /* @__PURE__ */ new Date()) {
+		this.#y(), this.savedAt = e.toISOString();
+	}
+	saveDraft() {
+		this.dirty && this.draftKey && (this.#x(), this.#h = (/* @__PURE__ */ new Date()).toISOString(), this.#b("draft"), this.requestUpdate());
+	}
+	discardDraft() {
+		this.#e = {}, this.#r = null, this.#S(), this.#C(), this.#b("");
+	}
+	#h;
+	#g() {
+		if (this.#t || !this.draftKey && !this.#n) return;
+		this.#t = !0;
+		let e = this.draftKey ? S(this.draftKey, this.draftTtl) : null;
+		e && (this.#e = { ...e.values }, this.#r = e);
+	}
+	#_(e) {
+		if (!e.length || !this.hasUpdated) return;
+		let t = {
+			...this.values,
+			...this.#e
+		};
+		for (let n of e) {
+			let e = d(n);
+			e in t && u(n, t[e]);
+		}
+		this.busy && this.#c.apply(e, !0), this.#s.matches && this.#l.apply(e.filter((e) => "stacked" in e), !0), this.errors && (this.#E = this.#T(), this.requestUpdate());
+	}
+	#v(e) {
+		(e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && e.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	#y() {
+		this.values = this.hasUpdated ? this.collect() : {
+			...this.values,
+			...this.#e
+		}, this.#e = {}, this.#r = null, this.#S(), this.errors = void 0, this.#b("saved");
+	}
+	#b(e) {
+		let t = Object.keys(this.#e).length > 0;
+		t !== this.dirty && (this.dirty = t, this.emit("lintje-dirty-change", t)), this.phase = e === "dirty" && !t ? "" : e;
+	}
+	#x() {
+		if (this.draftKey) try {
+			if (!Object.keys(this.#e).length) return this.#S();
+			let e = {
+				savedAt: Date.now(),
+				values: this.#e
+			};
+			localStorage.setItem(_ + this.draftKey, JSON.stringify(e));
+		} catch {}
+	}
+	#S() {
+		if (this.draftKey) try {
+			localStorage.removeItem(_ + this.draftKey);
+		} catch {}
+	}
+	#C() {
+		let e = {
+			...this.values,
+			...this.#e
+		};
+		for (let t of l(this)) {
+			let n = d(t);
+			n in e && u(t, e[n]);
+		}
+	}
+	#w(e, t) {
+		if (!this.errors?.fields[e]) return;
+		let n = { ...this.errors.fields };
+		delete n[e], "error" in t ? t.error = void 0 : b(t, !1), this.#O = !0, this.errors = {
+			...this.errors,
+			fields: n
+		};
+	}
+	#T() {
+		let e = this.errors?.fields ?? {}, t = [], n = /* @__PURE__ */ new Set();
+		for (let r of l(this)) {
+			let i = d(r), a = e[i];
+			if ("error" in r ? r.error = a || void 0 : b(r, !!a), a && !n.has(i)) {
+				n.add(i);
+				let e = r.label;
+				t.push({
+					field: i,
+					label: e || void 0,
+					message: a
+				});
+			}
+		}
+		for (let [r, i] of Object.entries(e)) i && !n.has(r) && t.push({ message: i });
+		return t;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.#n || (this.#n = !0, this.#g(), this.#b(Object.keys(this.#e).length ? "dirty" : "")), e.has("savedAt") && this.hasUpdated && this.savedAt && this.phase !== "saved" && this.#y(), e.has("errors") && (this.#E = this.#T()), e.has("busy") && this.busy && (this.#a = s(this) ? n() : null), e.has("dirty") && (this.dirty ? window.addEventListener("beforeunload", this.#m) : window.removeEventListener("beforeunload", this.#m));
+	}
+	#E;
+	#D;
+	#O;
+	get #k() {
+		return this.#E.length > 0 || !!this.errors?.form;
+	}
+	updated(e) {
+		if (super.updated(e), e.has("values") && !this.#i && this.#C(), this.#i = !1, e.has("busy") && (this.busy ? this.#c.apply(l(this), !0) : (this.#c.release(), this.#A())), this.#s.matches ? this.#l.apply(l(this).filter((e) => "stacked" in e), !0) : this.#l.release(), this.#M(), e.has("errors")) {
+			let e = !this.#O;
+			this.#O = !1, e && this.errors && this.#k && this.#j(this.errors);
+		}
+	}
+	#A() {
+		let e = this.#a;
+		this.#a = null, e && requestAnimationFrame(() => {
+			let t = n();
+			t && t !== document.body || e.isConnected && e.focus();
+		});
+	}
+	async #j(e) {
+		if (this.emit("lintje-invalid", e), !this.#D) return;
+		this.#D = !1;
+		let t = this.renderRoot.querySelector("lintje-error-summary");
+		t && (await t.updateComplete, t.focus());
+	}
+	#M() {
+		let e = this.busy ? "busy" : this.phase, t = this.phase === "draft" ? this.#h : this.savedAt ?? "";
+		for (let n of this.querySelectorAll("lintje-form-actions")) n.state = e, n.savedAt = t;
+	}
+	render() {
+		return a`<form
+      class="lintje-form"
+      novalidate
+      aria-busy=${this.busy ? "true" : t}
+      @submit=${(e) => {
+			e.preventDefault(), this.submit();
+		}}
+    >
+      <lintje-error-summary
+        class="lintje-form__summary"
+        retry="Opnieuw proberen"
+        ?hidden=${!this.#k}
+        .items=${this.#E}
+        .message=${this.errors?.form}
+        @lintje-retry=${(e) => {
+			e.stopPropagation(), this.submit();
+		}}
+      ></lintje-error-summary>
+      <slot></slot>
+    </form>`;
+	}
+};
+e("lintje-form", C);
+//#endregion
+export { _ as DRAFT_PREFIX, C as LintjeForm, S as readDraft };

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

@@ -0,0 +1 @@
+export * from '../types/components/content/gallery/gallery.js'

package/dist-elements/tag/gallery.js

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

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

@@ -0,0 +1 @@
+export * from '../types/primitives/grid-item/grid-item.js'

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

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

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

@@ -0,0 +1 @@
+export * from '../types/primitives/grid/grid.js'

package/dist-elements/tag/grid.js

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

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

@@ -0,0 +1 @@
+export * from '../types/components/frame/hero/hero.js'

package/dist-elements/tag/hero.js

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

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

@@ -0,0 +1 @@
+export * from '../types/components/content/highlight/highlight.js'

package/dist-elements/tag/highlight.js

@@ -0,0 +1,60 @@
+import { Bt as e, Ht as t, Kt as n, Z as r, zt as i } from "../chunks/base-rBLTcEIv.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",
+	term: "term",
+	match: "zoekresultaat"
+}, s = {
+	removed: "verwijderd",
+	added: "toegevoegd"
+}, c = class extends i {
+	constructor(...e) {
+		super(...e), this.kind = "match", this.current = !1;
+	}
+	static {
+		this.styles = t(a);
+	}
+	static {
+		this.properties = {
+			kind: {
+				type: String,
+				reflect: !0
+			},
+			current: {
+				type: Boolean,
+				reflect: !0
+			},
+			explanation: { type: String },
+			label: { type: String }
+		};
+	}
+	get isControl() {
+		return this.kind === "term" && !!this.explanation;
+	}
+	get classes() {
+		return r({
+			"lintje-highlight": !0,
+			[`lintje-highlight--${this.kind}`]: !0,
+			"lintje-highlight--control": this.isControl,
+			"is-current": this.kind === "match" && this.current
+		});
+	}
+	render() {
+		let e = this.kind;
+		if (e === "removed" || e === "added") {
+			let t = n`<span class="visually-hidden">${this.label || s[e]}: </span>`;
+			return e === "removed" ? n`<del class=${this.classes}>${t}<slot></slot></del>` : n`<ins class=${this.classes}>${t}<slot></slot></ins>`;
+		}
+		if (this.isControl) return n`<lintje-tooltip text=${this.explanation}
+        ><button type="button" class=${this.classes}><slot></slot></button
+      ></lintje-tooltip>`;
+		let t = e === "match" && this.current ? "huidig zoekresultaat" : o[e] ?? "markering";
+		return n`<mark class=${this.classes}
+      ><span class="visually-hidden">begin markering ${t}, </span><slot></slot
+      ><span class="visually-hidden">, einde markering</span></mark
+    >`;
+	}
+};
+e("lintje-highlight", c);
+//#endregion
+export { c as LintjeHighlight };

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

@@ -0,0 +1 @@
+export * from '../types/primitives/icon-button/icon-button.js'

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

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

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

@@ -0,0 +1 @@
+export * from '../types/icons/icon/icon.js'

package/dist-elements/tag/icon.js

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

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

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

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

@@ -0,0 +1,143 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, U as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import "./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 = {
+	queued: (e) => `${e} staat in de wachtrij.`,
+	busy: (e) => `${e} wordt verwerkt.`,
+	paused: (e) => `${e} is onderbroken.`,
+	done: (e) => `${e} is klaar.`,
+	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() : "";
+	return n ? `${t} ${n}${/[.!?]$/.test(n) ? "" : "."}` : t;
+}
+var u = {
+	queued: {
+		label: "Annuleren",
+		event: "lintje-job-cancel"
+	},
+	busy: {
+		label: "Annuleren",
+		event: "lintje-job-cancel"
+	},
+	paused: {
+		label: "Hervatten",
+		event: "lintje-job-resume"
+	},
+	error: {
+		label: "Opnieuw",
+		event: "lintje-job-retry"
+	},
+	cancelled: {
+		label: "Verwijderen",
+		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";
+	return {
+		id: e.id,
+		title: e.name,
+		clickable: !!e.href,
+		href: e.href,
+		sub: e.detail,
+		meta: e.meta,
+		icon: e.icon,
+		group: e.group,
+		status: t && i ? void 0 : s[e.state],
+		progress: n && (e.state === "busy" || e.state === "paused") ? e.progress : void 0,
+		action: r ? {
+			label: r.label,
+			value: r.event
+		} : void 0,
+		actions: i ? [{
+			value: "lintje-job-remove",
+			label: "Verwijderen"
+		}] : void 0
+	};
+}
+var f = class extends a {
+	constructor(...e) {
+		super(...e), this.jobs = [], this.headingLevel = 3, this.spoken = "", this.known = /* @__PURE__ */ new Map(), this.emptiedWithFocus = !1;
+	}
+	static {
+		this.styles = n(o);
+	}
+	static {
+		this.properties = {
+			jobs: { attribute: !1 },
+			headingLevel: {
+				type: Number,
+				attribute: "heading-level"
+			},
+			spoken: { state: !0 }
+		};
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), !e.has("jobs")) return;
+		let t = this.renderRoot.querySelector("lintje-list");
+		this.emptiedWithFocus = !this.jobs?.length && !!(t && i(t));
+		let n = this.known.size === 0, r = [], a = /* @__PURE__ */ new Map();
+		for (let e of this.jobs ?? []) {
+			a.set(e.id, e.state);
+			let t = this.known.get(e.id);
+			!n && t !== e.state && r.push(l(e));
+		}
+		this.known = a, r.length ? this.spoken = r.join(" ") : this.emptiedWithFocus && (this.spoken = "Er staan geen taken meer in de lijst.");
+	}
+	updated(e) {
+		if (super.updated(e), !this.emptiedWithFocus) return;
+		this.emptiedWithFocus = !1;
+		let t = this.renderRoot.querySelector("[role=\"status\"]");
+		t && (t.tabIndex = -1, t.focus());
+	}
+	onAction(e) {
+		e.stopPropagation();
+		let { id: t, value: n } = e.detail;
+		n.startsWith("lintje-job-") && this.emit(n, t);
+	}
+	onRowClick(e) {
+		e.stopPropagation(), e.preventDefault(), e.detail.href && this.followLink(e.detail.href);
+	}
+	render() {
+		let e = this.jobs ?? [];
+		return r`${e.length ? r`<lintje-list
+            class="lintje-job-list"
+            heading-level=${this.headingLevel}
+            .items=${e.map((t) => d(t, e.every((e) => e.state === "done")))}
+            @lintje-row-action=${this.onAction}
+            @lintje-row-click=${this.onRowClick}
+          ></lintje-list>` : t}
+      <p class="visually-hidden" role="status">${this.spoken}</p>`;
+	}
+};
+e("lintje-job-list", f);
+//#endregion
+export { f as LintjeJobList, d as jobRow, l as spokenState };