lintje 0.1.1

package/dist-elements/tag/document-viewer.js

@@ -0,0 +1,256 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, j as s, ut as c, zt as l } from "../chunks/base-rBLTcEIv.js";
+import "./empty-state.js";
+//#region src/components/content/document-viewer/document-viewer.css?inline
+var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-document-viewer {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n\n.lintje-document-viewer__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-1) var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n}\n.lintje-document-viewer__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 700;\n}\n.lintje-document-viewer__group { display: flex; align-items: center; gap: var(--space-1); }\n.lintje-document-viewer__button { height: var(--h-button); min-width: var(--h-button); }\n.lintje-document-viewer__figure { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.lintje-document-viewer__zoom { min-width: 7ch; text-align: center; }\n\n.lintje-document-viewer__view {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--space-6);\n  background: var(--color-bg-subtle);\n  touch-action: pan-x pan-y pinch-zoom;\n}\n\n/* Auto margins centre the page; a wider page scrolls to its left edge instead of being cut. */\n.lintje-document-viewer__page {\n  margin: 0 auto;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-document-viewer__page.is-fit { width: 100%; }\n.lintje-document-viewer__page.is-loading {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n}\n.lintje-document-viewer__image { display: block; width: 100%; height: auto; }\n\n.lintje-document-viewer__skeleton {\n  display: block;\n  width: 100%;\n  max-width: 420px;\n  margin: 0 auto;\n  aspect-ratio: 210 / 297;\n}\n\n@media (max-width: 767px) {\n  .lintje-document-viewer__name { flex-basis: 100%; }\n  .lintje-document-viewer__view { padding: var(--space-2) 0; }\n}\n", d = 50, f = 400, p = 25;
+function m(e) {
+	if (e === "fit" || e == null || e === "") return "fit";
+	let t = Number(String(e).replace("%", ""));
+	return Number.isFinite(t) ? Math.max(50, Math.min(400, t)) : "fit";
+}
+function h(e, t, n) {
+	let r = e === "fit" ? n : e, i = t > 0 ? Math.floor(r / 25) * 25 + 25 : Math.ceil(r / 25) * 25 - 25;
+	return Math.max(50, Math.min(400, i));
+}
+function g(e, t) {
+	return e === "fit" ? t ? `${t}%` : "" : `${e}%`;
+}
+function _(e, t) {
+	return t <= 0 || !Number.isFinite(e) ? 1 : Math.max(1, Math.min(t, Math.round(e)));
+}
+function v(e, t) {
+	return `Pagina ${e} van ${Math.max(t, 1)}`;
+}
+var y = class extends l {
+	constructor(...e) {
+		super(...e), this.pages = [], this.src = "", this.name = "", this.page = 1, this.zoom = "fit", this.loaded = !1, this.failed = !1, this.naturalWidth = 0, this.fitPercent = 100, this.said = "", this.shown = null;
+	}
+	static {
+		this.styles = [
+			e,
+			r(s),
+			r(u)
+		];
+	}
+	static {
+		this.properties = {
+			pages: { attribute: !1 },
+			texts: { attribute: !1 },
+			src: { type: String },
+			name: { type: String },
+			page: {
+				type: Number,
+				reflect: !0
+			},
+			zoom: {
+				reflect: !0,
+				converter: {
+					fromAttribute: m,
+					toAttribute: (e) => String(e)
+				}
+			},
+			loaded: { state: !0 },
+			failed: { state: !0 },
+			naturalWidth: { state: !0 },
+			fitPercent: { state: !0 },
+			said: { state: !0 }
+		};
+	}
+	get urls() {
+		return this.pages && this.pages.length > 0 ? this.pages : this.src ? [this.src] : [];
+	}
+	get count() {
+		return this.urls.length;
+	}
+	get url() {
+		return this.urls[_(this.page, this.count) - 1] ?? "";
+	}
+	goTo(e) {
+		let t = _(e, this.count);
+		t !== this.page && (this.page = t, this.said = v(t, this.count), this.emit("lintje-page-change", t));
+	}
+	setZoom(e) {
+		e !== this.zoom && (this.zoom = e, this.said = e === "fit" ? "Zoom passend" : `Zoom ${e}%`, this.emit("lintje-zoom-change", e));
+	}
+	zoomBy(e) {
+		this.setZoom(h(this.zoom, e, this.fitPercent));
+	}
+	download() {
+		this.emit("lintje-download");
+	}
+	measureFit() {
+		let e = this.renderRoot.querySelector(".lintje-document-viewer__view");
+		if (!e || !this.naturalWidth) return;
+		let t = getComputedStyle(e), n = e.clientWidth - parseFloat(t.paddingLeft || "0") - parseFloat(t.paddingRight || "0");
+		n > 0 && (this.fitPercent = Math.round(n / this.naturalWidth * 100));
+	}
+	onLoad(e) {
+		let t = e.currentTarget;
+		this.naturalWidth = t.naturalWidth, this.loaded = !0, this.failed = !1, this.measureFit();
+	}
+	onError() {
+		this.failed = !0, this.loaded = !1;
+	}
+	onKeydown(e) {
+		if (e.ctrlKey || e.metaKey || e.altKey) return;
+		let t = e.composedPath()[0];
+		if (t?.tagName === "INPUT" || t?.tagName === "TEXTAREA" || this.scrollsItself(e)) return;
+		let n = !0;
+		switch (e.key) {
+			case "PageDown":
+				this.goTo(this.page + 1);
+				break;
+			case "PageUp":
+				this.goTo(this.page - 1);
+				break;
+			case "Home":
+				this.goTo(1);
+				break;
+			case "End":
+				this.goTo(this.count);
+				break;
+			case "+":
+			case "=":
+				this.zoomBy(1);
+				break;
+			case "-":
+				this.zoomBy(-1);
+				break;
+			default: n = !1;
+		}
+		n && e.preventDefault();
+	}
+	scrollsItself(e) {
+		let t = this.renderRoot.querySelector(".lintje-document-viewer__view");
+		if (!t || !e.composedPath().includes(t)) return !1;
+		let n = t.scrollTop > 0, r = t.scrollTop + t.clientHeight < t.scrollHeight - 1;
+		switch (e.key) {
+			case "PageUp":
+			case "Home": return n;
+			case "PageDown":
+			case "End": return r;
+			default: return !1;
+		}
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("zoom")) {
+			let e = m(this.zoom);
+			e !== this.zoom && (this.zoom = e);
+		}
+		let t = _(this.page, this.count);
+		t !== this.page && (this.page = t);
+		let n = this.url;
+		n !== this.shown && (this.shown = n, this.loaded = !1, this.failed = !1);
+	}
+	renderButton(e, t, r, s = {}) {
+		let c = s.disabled ?? !1;
+		return i`<button
+      type="button"
+      class=${a({
+			"lintje-icon-button": !0,
+			"lintje-icon-button--flat": !0,
+			"lintje-document-viewer__button": !0,
+			"is-disabled": c
+		})}
+      aria-label=${t}
+      title=${t}
+      aria-disabled=${c ? "true" : n}
+      @click=${() => {
+			c || r();
+		}}
+    >
+      ${o(e, {
+			size: 18,
+			flip: s.flip ? "horizontal" : void 0
+		})}
+    </button>`;
+	}
+	renderToolbar() {
+		let e = this.count, t = _(this.page, e), n = this.zoom, r = n === "fit" ? this.fitPercent : n;
+		return i`<div class="lintje-document-viewer__toolbar" role="toolbar" aria-label="Document">
+      <div class="lintje-document-viewer__name">${this.name}</div>
+      <div class="lintje-document-viewer__group">
+        ${this.renderButton("functioneel-delta-rechts", "Vorige pagina", () => this.goTo(t - 1), {
+			flip: !0,
+			disabled: t <= 1
+		})}
+        <span class="lintje-document-viewer__figure">${v(t, e)}</span>
+        ${this.renderButton("functioneel-delta-rechts", "Volgende pagina", () => this.goTo(t + 1), { disabled: t >= e })}
+      </div>
+      <div class="lintje-document-viewer__group">
+        ${this.renderButton("functioneel-vergrootglas-minus", "Uitzoomen", () => this.zoomBy(-1), { disabled: r <= 50 })}
+        <span class="lintje-document-viewer__figure lintje-document-viewer__zoom"
+          >${g(n, this.naturalWidth ? this.fitPercent : void 0)}</span
+        >
+        ${this.renderButton("functioneel-vergrootglas-plus", "Inzoomen", () => this.zoomBy(1), { disabled: r >= 400 })}
+        <button
+          type="button"
+          class="lintje-icon-button lintje-icon-button--flat lintje-icon-button--text lintje-document-viewer__button"
+          aria-pressed=${String(n === "fit")}
+          @click=${() => this.setZoom("fit")}
+        >
+          <span class="lintje-icon-button__label">Passend</span>
+        </button>
+        ${this.renderButton("functioneel-downloaden", "Downloaden", () => this.download(), { disabled: e === 0 })}
+      </div>
+    </div>`;
+	}
+	renderPage() {
+		if (this.count === 0) return i`<lintje-empty-state
+        class="lintje-document-viewer__empty"
+        icon="op-kantoor-document-blanco"
+        heading="Er is geen document om te tonen"
+      ></lintje-empty-state>`;
+		if (this.failed) return i`<lintje-empty-state
+        class="lintje-document-viewer__failed"
+        icon="op-kantoor-document-blanco"
+        heading="Het document kan niet worden getoond"
+        text="Download het bestand om het te bekijken."
+      >
+        <lintje-button
+          variant="primary"
+          icon="functioneel-downloaden"
+          @click=${() => this.download()}
+          >Downloaden</lintje-button
+        >
+      </lintje-empty-state>`;
+		let e = this.count, t = _(this.page, e), r = this.url, o = this.zoom, s = o === "fit" || !this.naturalWidth ? null : `${this.naturalWidth * o / 100}px`;
+		return i`${this.loaded ? n : i`<lintje-skeleton class="lintje-document-viewer__skeleton" height="auto"></lintje-skeleton>`}
+      <div
+        class=${a({
+			"lintje-document-viewer__page": !0,
+			"is-fit": o === "fit",
+			"is-loading": !this.loaded
+		})}
+        role="img"
+        aria-label=${`${v(t, e)}${this.name ? ` van ${this.name}` : ""}`}
+        ${c({ width: s })}
+      >
+        ${r ? i`<img
+                class="lintje-document-viewer__image"
+                src=${r}
+                alt=""
+                @load=${this.onLoad}
+                @error=${this.onError}
+              />` : n}
+      </div>
+      ${this.texts?.[t - 1] ? i`<div class="visually-hidden lintje-document-viewer__text">
+              ${this.texts[t - 1]}
+            </div>` : n}`;
+	}
+	render() {
+		return i`<div class="lintje-document-viewer" @keydown=${this.onKeydown}>
+      ${this.renderToolbar()}
+      <span class="visually-hidden" role="status">${this.said}</span>
+      <div
+        class="lintje-document-viewer__view"
+        role="region"
+        tabindex="0"
+        aria-label=${this.name || "Document"}>
+        ${this.renderPage()}
+      </div>
+    </div>`;
+	}
+};
+t("lintje-document-viewer", y);
+//#endregion
+export { y as LintjeDocumentViewer, f as ZOOM_MAX, d as ZOOM_MIN, p as ZOOM_STEP, _ as clampPage, v as pageLabel, m as parseZoom, h as stepZoom, g as zoomLabel };

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

@@ -0,0 +1 @@
+export * from '../types/components/overlays/drawer/drawer.js'

package/dist-elements/tag/drawer.js

@@ -0,0 +1,110 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Nt as a, et as o, zt as s } from "../chunks/base-rBLTcEIv.js";
+import { r as c, t as l } from "../chunks/focus-trap-w3vCamJ6.js";
+import { t as u } from "../chunks/dialog-close-u75fVEw4.js";
+//#region src/components/overlays/drawer/drawer.css?inline
+var d = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The modal's z-index: above the shell's menu. */\n.lintje-drawer__scrim {\n  position: fixed; inset: 0; z-index: 80;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-drawer {\n  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;\n  width: min(480px, 100vw);\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-left: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-drawer-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-drawer:focus { outline: none; }\n\n.lintje-drawer__header {\n  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);\n  padding: var(--space-5) var(--space-6);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-drawer__heading { min-width: 0; }\n.lintje-drawer__title { font: var(--text-h2); }\n.lintje-drawer__subtitle { font: var(--text-small); color: var(--color-text-muted); margin-top: var(--space-1); }\n/* No hover while the close button is unavailable. */\n.lintje-drawer__close:not([aria-disabled='true']):hover { color: var(--color-text-primary); }\n\n.lintje-drawer__body {\n  flex: 1; min-height: 0; overflow-y: auto;\n  padding: var(--space-5) var(--space-6);\n  display: flex; flex-direction: column; gap: var(--space-4);\n}\n\n.lintje-drawer__footer {\n  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2);\n  padding: var(--space-3) var(--space-6);\n  border-top: 1px solid var(--color-border-default);\n}\n\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-drawer-in {\n  from { transform: translateX(100%); }\n  to   { transform: none; }\n}\n\n@media (max-width: 767px) {\n  .lintje-drawer {\n    inset: 0;\n    width: 100%;\n    border-left: 0;\n    animation-name: lintje-sheet-in;\n  }\n  .lintje-drawer__header,\n  .lintje-drawer__body,\n  .lintje-drawer__footer { padding-left: var(--space-4); padding-right: var(--space-4); }\n}\n", f = "input:not([type=\"hidden\"]), select, textarea", p = "Zijpaneel", m = class extends s {
+	constructor(...e) {
+		super(...e), this.open = !1, this.heading = "", this.busy = !1, this.footerSlotted = !1, this.#e = null, this.#t = new l(), this.#n = (e) => {
+			e.key === "Escape" && this.#t.isTopmost() && this.close("escape");
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			r(u),
+			r(d)
+		];
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			heading: { type: String },
+			subtitle: { type: String },
+			busy: {
+				type: Boolean,
+				reflect: !0
+			},
+			footerSlotted: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	close(e) {
+		this.busy || this.emit("lintje-close", { reason: e });
+	}
+	get panel() {
+		return this.renderRoot.querySelector(".lintje-drawer");
+	}
+	onFooterSlotChange(e) {
+		let t = e.target.assignedNodes({ flatten: !0 });
+		this.footerSlotted = t.some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("open") && this.open && (this.footerSlotted = this.querySelector(":scope > [slot=\"footer\"]") !== null);
+	}
+	disconnectedCallback() {
+		this.#i(), super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), this.open && !this.#e ? this.#r() : !this.open && this.#e && this.#i();
+	}
+	focusFirst() {
+		let e = this.panel;
+		if (!e) return;
+		let t = this.renderRoot.querySelector(".lintje-drawer__body"), n = t ? c(t).find((e) => e.matches(f)) : void 0, r = this.renderRoot.querySelector(".lintje-drawer__close");
+		(n ?? r ?? e).focus();
+	}
+	#r() {
+		this.#e = a(), document.addEventListener("keydown", this.#n);
+		let e = this.panel;
+		e && this.#t.activate(e, { focus: !1 });
+		let t = Array.from(this.querySelectorAll("*"), (e) => "updateComplete" in e ? e.updateComplete : null).filter((e) => e !== null);
+		Promise.all(t).then(() => {
+			this.open && this.#t.isTopmost() && this.focusFirst();
+		});
+	}
+	#i() {
+		this.#e && (document.removeEventListener("keydown", this.#n), this.#e(), this.#e = null, this.#t.deactivate());
+	}
+	render() {
+		if (!this.open) return n;
+		let e = this.heading.trim() !== "";
+		return i`<div class="lintje-drawer__scrim" @click=${() => this.close("scrim")}></div>
+      <div
+        class="lintje-drawer"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${e ? "lintje-drawer-title" : n}
+        aria-label=${e ? n : p}
+        aria-busy=${this.busy ? "true" : n}
+        tabindex="-1"
+      >
+        <header class="lintje-drawer__header">
+          <div class="lintje-drawer__heading">
+            ${e ? i`<h2 id="lintje-drawer-title" class="lintje-drawer__title">${this.heading}</h2>` : n}
+            ${this.subtitle ? i`<p class="lintje-drawer__subtitle">${this.subtitle}</p>` : n}
+          </div>
+          <button
+            type="button"
+            class="lintje-dialog-close lintje-drawer__close"
+            aria-label="Sluiten"
+            aria-disabled=${this.busy ? "true" : n}
+            @click=${() => this.close("button")}
+          >
+            ${o("functioneel-kruis", { size: 16 })}
+          </button>
+        </header>
+        <div class="lintje-drawer__body"><slot></slot></div>
+        <footer class="lintje-drawer__footer" ?hidden=${!this.footerSlotted}>
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </footer>
+      </div>`;
+	}
+};
+t("lintje-drawer", m);
+//#endregion
+export { m as LintjeDrawer };

package/dist-elements/tag/empty-state.d.ts

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

package/dist-elements/tag/empty-state.js

@@ -0,0 +1,69 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, et as a, zt as o } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/feedback/empty-state/empty-state.css?inline
+var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-empty-state {\n  display: flex; flex-direction: column; align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-8) var(--space-4);\n  text-align: center;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-empty-state__icon { color: var(--color-text-muted); }\n.lintje-empty-state__heading {\n  margin: var(--space-1) 0 0;\n  font: var(--text-tile-title);\n  color: var(--color-text-primary);\n}\n.lintje-empty-state__text {\n  max-width: 280px;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n.lintje-empty-state__action { margin-top: var(--space-2); }\n\n.lintje-empty-state--compact {\n  display: block;\n  padding: var(--space-4);\n  text-align: left;\n  color: var(--color-text-muted);\n}\n\n/* Phone: the action runs the full width. */\n@media (max-width: 767px) {\n  .lintje-empty-state:not(.lintje-empty-state--compact) .lintje-empty-state__action {\n    align-self: stretch;\n  }\n}\n", c = class extends o {
+	constructor(...e) {
+		super(...e), this.compact = !1, this.level = 3, this.status = !1, this.slotted = !1, this.filled = !1, this.#e = 0;
+	}
+	static {
+		this.styles = [e, r(s)];
+	}
+	static {
+		this.properties = {
+			heading: { type: String },
+			text: { type: String },
+			icon: { type: String },
+			compact: {
+				type: Boolean,
+				reflect: !0
+			},
+			level: { type: Number },
+			status: { type: Boolean },
+			slotted: { state: !0 },
+			filled: { state: !0 }
+		};
+	}
+	#e;
+	disconnectedCallback() {
+		this.#e && cancelAnimationFrame(this.#e), this.#e = 0, super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), !(!this.status || this.filled || this.#e) && (this.#e = requestAnimationFrame(() => {
+			this.#e = 0, this.filled = !0;
+		}));
+	}
+	onSlotChange(e) {
+		let t = e.target.assignedNodes({ flatten: !0 });
+		this.slotted = t.some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
+	}
+	renderHeading() {
+		if (!this.heading) return n;
+		let e = this.heading;
+		switch (this.level) {
+			case 2: return i`<h2 class="lintje-empty-state__heading">${e}</h2>`;
+			case 4: return i`<h4 class="lintje-empty-state__heading">${e}</h4>`;
+			case 5: return i`<h5 class="lintje-empty-state__heading">${e}</h5>`;
+			case 6: return i`<h6 class="lintje-empty-state__heading">${e}</h6>`;
+			default: return i`<h3 class="lintje-empty-state__heading">${e}</h3>`;
+		}
+	}
+	render() {
+		let e = this.status ? "status" : n, t = this.status && !this.filled;
+		return this.compact ? i`<div class="lintje-empty-state lintje-empty-state--compact" role=${e}>
+        ${t ? n : i`${this.text ?? n} <slot></slot>`}
+      </div>` : i`<div class="lintje-empty-state" role=${e}>${t ? n : this.content()}</div>`;
+	}
+	content() {
+		return i`${this.icon ? a(this.icon, {
+			size: 40,
+			className: "lintje-empty-state__icon"
+		}) : n}
+      ${this.renderHeading()}
+      ${this.text ? i`<p class="lintje-empty-state__text">${this.text}</p>` : n}
+      <div class="lintje-empty-state__action" ?hidden=${!this.slotted}>
+        <slot @slotchange=${this.onSlotChange}></slot>
+      </div>`;
+	}
+};
+t("lintje-empty-state", c);
+//#endregion
+export { c as LintjeEmptyState };

package/dist-elements/tag/error-summary.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/forms/error-summary/error-summary.js'

package/dist-elements/tag/error-summary.js

@@ -0,0 +1,86 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, et as a, zt as o } from "../chunks/base-rBLTcEIv.js";
+import { c as s, i as c, o as l } from "../chunks/controls-B1455oPG.js";
+//#region src/components/forms/error-summary/error-summary.css?inline
+var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The frame takes the focus after a failed attempt and keeps its own red under the ring. */\n.lintje-error-summary {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 2px solid var(--color-error);\n  border-radius: var(--radius);\n}\n.lintje-error-summary__icon {\n  flex: none;\n  margin-top: 2px;\n  color: var(--color-error);\n}\n.lintje-error-summary__body { min-width: 0; }\n.lintje-error-summary__heading {\n  margin: 0 0 var(--space-1);\n  font: var(--text-tile-title);\n}\n\n.lintje-error-summary__list {\n  margin: 0;\n  padding-left: var(--space-5);\n  list-style: disc;\n  font: var(--text-ui);\n}\n.lintje-error-summary__link {\n  color: var(--color-link);\n  text-decoration: underline;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-error-summary__link:hover { color: var(--color-link-hover); }\n\n.lintje-error-summary__message {\n  margin: 0;\n  font: var(--text-ui);\n}\n\n@media (max-width: 767px) {\n  .lintje-error-summary { padding: var(--space-3) var(--space-4); }\n}\n";
+//#endregion
+//#region src/components/forms/error-summary/error-summary.ts
+function d(e) {
+	return `Controleer ${e} ${e === 1 ? "veld" : "velden"}`;
+}
+function f(e, t) {
+	return s(e).find((e) => c(e) === t) ?? e.querySelector(`[id="${t.replace(/["\\]/g, "\\$&")}"]`);
+}
+var p = (e) => e.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in e;
+function m(e, t) {
+	let n = e.getRootNode();
+	for (; p(n);) {
+		let e = f(n, t) ?? f(n.host, t);
+		if (e) return e;
+		n = n.host.getRootNode();
+	}
+	return n.nodeType === Node.DOCUMENT_NODE ? f(n, t) : null;
+}
+var h = class extends o {
+	constructor(...e) {
+		super(...e), this.items = [];
+	}
+	static {
+		this.styles = [e, r(u)];
+	}
+	static {
+		this.properties = {
+			items: { attribute: !1 },
+			message: { type: String },
+			heading: { type: String },
+			retry: { type: String }
+		};
+	}
+	get hasErrors() {
+		return this.items.length > 0 || !!this.message;
+	}
+	focus(e) {
+		this.renderRoot.querySelector(".lintje-error-summary")?.focus(e);
+	}
+	goTo(e, t) {
+		e.preventDefault();
+		let n = t.field ? m(this, t.field) : null;
+		n && (n.scrollIntoView?.({ block: "center" }), l(n, { preventScroll: !0 }));
+	}
+	render() {
+		if (!this.hasErrors) return n;
+		let e = this.heading ?? (this.items.length ? d(this.items.length) : "Opslaan is niet gelukt");
+		return i`<div
+      class="lintje-error-summary"
+      role="alert"
+      aria-labelledby="lintje-error-summary-heading"
+      tabindex="-1"
+    >
+      ${a("functioneel-waarschuwing", {
+			size: 20,
+			className: "lintje-error-summary__icon"
+		})}
+      <div class="lintje-error-summary__body">
+        <h3 id="lintje-error-summary-heading" class="lintje-error-summary__heading">${e}</h3>
+        ${this.items.length ? i`<ul class="lintje-error-summary__list">
+              ${this.items.map((e) => i`<li class="lintje-error-summary__item">
+                    ${e.field ? i`<a
+                          class="lintje-error-summary__link"
+                          href="#${e.field}"
+                          @click=${(t) => this.goTo(t, e)}
+                          >${e.label ? `${e.label}: ${e.message}` : e.message}</a
+                        >` : e.message}
+                  </li>`)}
+            </ul>` : n}
+        ${this.message ? i`<p class="lintje-error-summary__message">
+              ${this.message}
+              ${this.retry ? i`<lintje-button variant="link" @click=${() => this.emit("lintje-retry")}
+                    >${this.retry}</lintje-button
+                  >` : n}
+            </p>` : n}
+      </div>
+    </div>`;
+	}
+};
+t("lintje-error-summary", h);
+//#endregion
+export { h as LintjeErrorSummary, m as findField, d as summaryHeading };

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

@@ -0,0 +1 @@
+export * from '../types/components/layout/expander/expander.js'

package/dist-elements/tag/expander.js

@@ -0,0 +1,71 @@
+import { $ as e, Bt as t, Ht as n, Kt as r, O as i, Z as a } from "../chunks/base-rBLTcEIv.js";
+import { i as o, n as s, r as c, t as l } from "../chunks/disclosure-CHasOudX.js";
+import { t as u } from "../chunks/disclosure-Z7Ny17sS.js";
+//#region src/components/layout/expander/expander.ts
+var d = class extends i {
+	constructor(...e) {
+		super(...e), this.heading = "", this.open = !1, this.flat = !1, this.leading = !1, this.columns = !1, this.#e = o(), this.#t = new l(this);
+	}
+	static {
+		this.styles = [e, n(u)];
+	}
+	static {
+		this.properties = {
+			heading: { type: String },
+			subtitle: { type: String },
+			icon: { type: String },
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			flat: {
+				type: Boolean,
+				reflect: !0
+			},
+			leading: {
+				type: Boolean,
+				reflect: !0
+			},
+			columns: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	#e;
+	#t;
+	updated(e) {
+		super.updated(e), this.#t.observe(this.open, this.renderRoot.querySelector(".lintje-disclosure__body"));
+	}
+	render() {
+		return r`<section
+      class=${a({
+			"lintje-disclosure": !0,
+			"lintje-expander": !0,
+			"lintje-expander--flat": this.flat,
+			"lintje-disclosure--leading": this.leading || this.columns,
+			"lintje-expander--columns": this.columns,
+			"is-open": this.open,
+			"is-settled": this.#t.settled
+		})}
+    >
+      <div class="lintje-expander__top">
+        ${c({
+			bodyId: this.#e,
+			open: this.open,
+			title: this.heading,
+			subtitle: this.subtitle,
+			icon: this.icon,
+			leading: this.leading || this.columns,
+			toggle: () => {
+				this.open = !this.open, this.emit("lintje-toggle", this.open);
+			}
+		})}<slot name="actions" class="lintje-expander__actions"></slot>
+      </div>
+      ${s(this.#e, r`<slot></slot>`, "lintje-expander__content")}
+    </section>`;
+	}
+};
+t("lintje-expander", d);
+//#endregion
+export { d as LintjeExpander };

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

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

package/dist-elements/tag/explainer.js

@@ -0,0 +1,64 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, O as a, Z as o, k as s } from "../chunks/base-rBLTcEIv.js";
+import { i as c, n as l, r as u, t as d } from "../chunks/disclosure-CHasOudX.js";
+import { t as f } from "../chunks/disclosure-Z7Ny17sS.js";
+//#region src/components/charts/explainer/explainer.css?inline
+var p = "/* The disclosure itself is `shared/disclosure.css`, adopted next to this sheet (rule 2). */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-explainer {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-explainer__list {\n  display: grid;\n  grid-template-columns: minmax(0, max-content) minmax(0, 72ch);\n  column-gap: var(--space-5);\n  row-gap: var(--space-3);\n  font: var(--text-body);\n}\n.lintje-explainer__term { grid-column: 1; font-weight: 700; color: var(--color-text-primary); }\n.lintje-explainer__description { grid-column: 2; margin: 0; color: var(--color-text-secondary); }\n\n@media (max-width: 767px) {\n  .lintje-explainer__list { display: block; }\n  .lintje-explainer__description { margin-top: 2px; }\n  .lintje-explainer__description + .lintje-explainer__term { margin-top: var(--space-3); }\n}\n", m = class extends a {
+	constructor(...e) {
+		super(...e), this.span = 12, this.open = !0, this.#e = null, this.#t = c(), this.#n = new d(this);
+	}
+	static {
+		this.styles = [
+			e,
+			s,
+			r(f),
+			r(p)
+		];
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			open: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = this.data?.defaultOpen;
+		t !== this.#e && (this.#e = t, this.open = t ?? !0);
+	}
+	updated(e) {
+		super.updated(e), this.#n.observe(this.open, this.renderRoot.querySelector(".lintje-disclosure__body"));
+	}
+	render() {
+		let e = this.data;
+		return e ? i`<section
+      class=${o({
+			"lintje-disclosure": !0,
+			"lintje-explainer": !0,
+			"is-open": this.open,
+			"is-settled": this.#n.settled
+		})}
+    >
+      ${u({
+			bodyId: this.#t,
+			open: this.open,
+			title: e.title,
+			toggle: () => {
+				this.open = !this.open;
+			}
+		})}
+      ${l(this.#t, i`<dl class="lintje-explainer__list">
+          ${e.items.map((e) => i`<dt class="lintje-explainer__term">${e.term}</dt>
+              <dd class="lintje-explainer__description">${e.description}</dd>`)}
+        </dl>`)}
+    </section>` : n;
+	}
+};
+t("lintje-explainer", m);
+//#endregion
+export { m as LintjeExplainer };