lintje 0.2.0 → 0.3.0

package/dist-elements/tag/dialog.js

@@ -0,0 +1,144 @@
+import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, en as a, lt as o, nn as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { n as l, r as u } from "../chunks/focus-trap-BwOxE5BX.js";
+import { t as d } from "../chunks/dialog-close-u75fVEw4.js";
+import { n as f, t as p } from "../chunks/controls-DxmnDSBr.js";
+import { t as m } from "../chunks/dialog-DChINFxD.js";
+//#region src/components/overlays/dialog/dialog.css?inline
+var h = "/* `display: contents` keeps the host out of its parent's flex or grid layout. */\n:host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Covers the whole viewport, above the shell's menu (z-index 30). */\n.lintje-dialog__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-6);\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-dialog {\n  width: min(440px, 100%);\n  max-height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-6);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n:host([wide]) .lintje-dialog { width: min(calc(15 * var(--space-10)), 100%); }\n/* The window takes focus only in an alert or when the trap pulls stray focus back; no ring. */\n.lintje-dialog:focus { outline: none; }\n\n.lintje-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n.lintje-dialog__heading { font: var(--text-h2); }\n/* The close button reaches into the padding, so it does not make the heading's line taller. */\n.lintje-dialog__close { margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; }\n.lintje-dialog__close:hover { color: var(--color-text-primary); }\n\n/* A long form scrolls here; the padding keeps a field's focus ring inside the scroll box. */\n.lintje-dialog__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  margin: calc(var(--focus-width) * -1) calc(var(--space-6) * -1);\n  padding: var(--focus-width) var(--space-6);\n  font: var(--text-body);\n}\n\n.lintje-dialog__footer {\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  margin-top: var(--space-3);\n}\n.lintje-dialog__footer[hidden] { display: none; }\n.lintje-dialog__note { font: var(--text-ui); }\n.lintje-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n\n/* Phone: the buttons stack, the last (the answer) on top and the safe one at the bottom. */\n@media screen and (max-width: 767px) {\n  .lintje-dialog__scrim { padding: var(--space-4); }\n  .lintje-dialog { width: 100%; }\n  .lintje-dialog__footer { flex-direction: column; align-items: stretch; }\n  .lintje-dialog__actions { flex-direction: column-reverse; margin-left: 0; }\n}\n", g = "input:not([type=\"hidden\"], [type=\"checkbox\"], [type=\"radio\"]), select, textarea, [contenteditable]";
+function _(e) {
+	return e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
+}
+var v = class extends t {
+	constructor(...t) {
+		super(...t), this.open = !1, this.heading = "", this.alert = !1, this.persistent = !1, this.wide = !1, this.busy = !1, this.footerSlotted = !1, this.#e = new n(this, e), this.#t = new m(() => this.ask("escape")), this.#n = new f("busy"), this.#r = new f("disabled"), this.#i = new p("block");
+	}
+	static {
+		this.styles = [
+			o,
+			i(d),
+			i(h)
+		];
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			heading: { type: String },
+			alert: {
+				type: Boolean,
+				reflect: !0
+			},
+			persistent: {
+				type: Boolean,
+				reflect: !0
+			},
+			wide: {
+				type: Boolean,
+				reflect: !0
+			},
+			busy: {
+				type: Boolean,
+				reflect: !0
+			},
+			footerSlotted: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	ask(e) {
+		this.busy || this.persistent && e !== "button" || this.emit("lintje-close", { reason: e });
+	}
+	get frame() {
+		return this.renderRoot.querySelector(".lintje-dialog");
+	}
+	get buttons() {
+		return Array.from(this.querySelectorAll(":scope > [slot=\"actions\"]"));
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("open") && this.open && (this.footerSlotted = this.querySelector(":scope > [slot=\"footer\"], :scope > [slot=\"actions\"]") !== null);
+	}
+	disconnectedCallback() {
+		this.#s(), super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), this.open && !this.#t.held ? this.#a() : !this.open && this.#t.held && this.#s(), this.#c();
+	}
+	#a() {
+		let e = this.frame;
+		if (!e) return;
+		this.#t.hold(e);
+		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.#o();
+		});
+	}
+	#o() {
+		let e = this.frame;
+		if (!e) return;
+		let t = this.querySelector("[autofocus]");
+		if (t) return l(t).focus();
+		if (this.alert) return e.focus();
+		let n = this.renderRoot.querySelector(".lintje-dialog__body"), r = n ? u(n).find((e) => e.matches(g)) : void 0, i = this.renderRoot.querySelector(".lintje-dialog__close");
+		(r ?? i ?? e).focus();
+	}
+	#s() {
+		this.#t.release(), this.#n.release(), this.#r.release(), this.#i.release();
+	}
+	#c() {
+		if (!this.open) return;
+		let e = this.buttons;
+		if (this.busy) {
+			let t = e.filter((e) => ["primary", "danger"].includes(e.getAttribute("variant") ?? "")).at(-1) ?? e.at(-1);
+			this.#n.apply(t ? [t] : [], !0), this.#r.apply(e.filter((e) => e !== t), !0);
+		} else this.#n.release(), this.#r.release();
+		this.#e.matches ? this.#i.apply(e, !0) : this.#i.release();
+	}
+	onSlotChange() {
+		let e = this.renderRoot.querySelectorAll("slot[name]");
+		this.footerSlotted = Array.from(e).some(_), this.#c();
+	}
+	render() {
+		return this.open ? s`<div class="lintje-dialog__scrim" @click=${() => this.ask("scrim")}>
+      <div
+        class="lintje-dialog"
+        role=${this.alert ? "alertdialog" : "dialog"}
+        aria-modal="true"
+        aria-labelledby="lintje-dialog-heading"
+        aria-describedby=${this.alert ? "lintje-dialog-text" : a}
+        aria-busy=${this.busy ? "true" : a}
+        tabindex="-1"
+        @click=${(e) => e.stopPropagation()}
+      >
+        <header class="lintje-dialog__header">
+          <h2 id="lintje-dialog-heading" class="lintje-dialog__heading">${this.heading}</h2>
+          ${this.alert ? a : s`<button
+                type="button"
+                class="lintje-dialog-close lintje-dialog__close"
+                aria-label="Sluiten"
+                aria-disabled=${this.busy ? "true" : a}
+                @click=${() => this.ask("button")}
+              >
+                ${c("functioneel-kruis", { size: 16 })}
+              </button>`}
+        </header>
+        <div id="lintje-dialog-text" class="lintje-dialog__body"><slot></slot></div>
+        <div class="lintje-dialog__footer" ?hidden=${!this.footerSlotted}>
+          <div class="lintje-dialog__note">
+            <slot name="footer" @slotchange=${this.onSlotChange}></slot>
+          </div>
+          <div class="lintje-dialog__actions">
+            <slot name="actions" @slotchange=${this.onSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    </div>` : a;
+	}
+};
+r("lintje-dialog", v);
+//#endregion
+export { v as LintjeDialog };

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

@@ -1,7 +1,7 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, j as o, qt as s, ut as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, L as t, Yt as n, Zt as r, bt as i, en as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.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;
+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 screen and (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("%", ""));
@@ -20,14 +20,14 @@ function _(e, t) {
 function v(e, t) {
 	return `Pagina ${e} van ${Math.max(t, 1)}`;
 }
-var y = class extends l {
+var y = class extends e {
 	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(o),
+			o,
+			r(t),
 			r(u)
 		];
 	}
@@ -141,26 +141,26 @@ var y = class extends l {
 		let n = this.url;
 		n !== this.shown && (this.shown = n, this.loaded = !1, this.failed = !1);
 	}
-	renderButton(e, t, r, o = {}) {
-		let c = o.disabled ?? !1;
+	renderButton(e, t, n, r = {}) {
+		let i = r.disabled ?? !1;
 		return s`<button
       type="button"
-      class=${i({
+      class=${c({
 			"lintje-icon-button": !0,
 			"lintje-icon-button--flat": !0,
 			"lintje-document-viewer__button": !0,
-			"is-disabled": c
+			"is-disabled": i
 		})}
       aria-label=${t}
       title=${t}
-      aria-disabled=${c ? "true" : n}
+      aria-disabled=${i ? "true" : a}
       @click=${() => {
-			c || r();
+			i || n();
 		}}
     >
-      ${a(e, {
+      ${l(e, {
 			size: 18,
-			flip: o.flip ? "horizontal" : void 0
+			flip: r.flip ? "horizontal" : void 0
 		})}
     </button>`;
 	}
@@ -213,29 +213,29 @@ var y = class extends l {
           >Downloaden</lintje-button
         >
       </lintje-empty-state>`;
-		let e = this.count, t = _(this.page, e), r = this.url, a = this.zoom, o = a === "fit" || !this.naturalWidth ? null : `${this.naturalWidth * a / 100}px`;
-		return s`${this.loaded ? n : s`<lintje-skeleton class="lintje-document-viewer__skeleton" height="auto"></lintje-skeleton>`}
+		let e = this.count, t = _(this.page, e), n = this.url, r = this.zoom, o = r === "fit" || !this.naturalWidth ? null : `${this.naturalWidth * r / 100}px`;
+		return s`${this.loaded ? a : s`<lintje-skeleton class="lintje-document-viewer__skeleton" height="auto"></lintje-skeleton>`}
       <div
-        class=${i({
+        class=${c({
 			"lintje-document-viewer__page": !0,
-			"is-fit": a === "fit",
+			"is-fit": r === "fit",
 			"is-loading": !this.loaded
 		})}
         role="img"
         aria-label=${`${v(t, e)}${this.name ? ` van ${this.name}` : ""}`}
-        ${c({ width: o })}
+        ${i({ width: o })}
       >
-        ${r ? s`<img
+        ${n ? s`<img
                 class="lintje-document-viewer__image"
-                src=${r}
+                src=${n}
                 alt=""
                 @load=${this.onLoad}
                 @error=${this.onError}
-              />` : n}
+              />` : a}
       </div>
       ${this.texts?.[t - 1] ? s`<div class="visually-hidden lintje-document-viewer__text">
               ${this.texts[t - 1]}
-            </div>` : n}`;
+            </div>` : a}`;
 	}
 	render() {
 		return s`<div class="lintje-document-viewer" @keydown=${this.onKeydown}>
@@ -251,6 +251,6 @@ var y = class extends l {
     </div>`;
 	}
 };
-t("lintje-document-viewer", y);
+n("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.js

@@ -1,18 +1,17 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Nt as i, et as a, qt as o, zt as s } from "../chunks/base-Bg-IFOPG.js";
-import { r as c, t as l } from "../chunks/focus-trap-9BnE-xWv.js";
-import { t as u } from "../chunks/dialog-close-u75fVEw4.js";
+import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CbmWxUig.js";
+import { r as s } from "../chunks/focus-trap-BwOxE5BX.js";
+import { t as c } from "../chunks/dialog-close-u75fVEw4.js";
+import { t as l } from "../chunks/dialog-DChINFxD.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 {
+var u = ":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 screen and (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", d = "input:not([type=\"hidden\"]), select, textarea", f = "Zijpaneel", p = class extends e {
 	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");
-		};
+		super(...e), this.open = !1, this.heading = "", this.busy = !1, this.footerSlotted = !1, this.#e = new l(() => this.close("escape"));
 	}
 	static {
 		this.styles = [
-			e,
-			r(u),
-			r(d)
+			i,
+			n(c),
+			n(u)
 		];
 	}
 	static {
@@ -31,8 +30,6 @@ var d = ":host { display: contents; }\n\n/* ------------------------------------
 		};
 	}
 	#e;
-	#t;
-	#n;
 	close(e) {
 		this.busy || this.emit("lintje-close", { reason: e });
 	}
@@ -47,55 +44,54 @@ var d = ":host { display: contents; }\n\n/* ------------------------------------
 		super.willUpdate(e), e.has("open") && this.open && (this.footerSlotted = this.querySelector(":scope > [slot=\"footer\"]") !== null);
 	}
 	disconnectedCallback() {
-		this.#i(), super.disconnectedCallback();
+		this.#n(), super.disconnectedCallback();
 	}
 	updated(e) {
-		super.updated(e), this.open && !this.#e ? this.#r() : !this.open && this.#e && this.#i();
+		super.updated(e), this.open && !this.#e.held ? this.#t() : !this.open && this.#e.held && this.#n();
 	}
 	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");
+		let t = this.renderRoot.querySelector(".lintje-drawer__body"), n = t ? s(t).find((e) => e.matches(d)) : void 0, r = this.renderRoot.querySelector(".lintje-drawer__close");
 		(n ?? r ?? e).focus();
 	}
-	#r() {
-		this.#e = i(), document.addEventListener("keydown", this.#n);
+	#t() {
 		let e = this.panel;
-		e && this.#t.activate(e, { focus: !1 });
+		e && this.#e.hold(e);
 		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();
+			this.open && this.#e.isTopmost() && this.focusFirst();
 		});
 	}
-	#i() {
-		this.#e && (document.removeEventListener("keydown", this.#n), this.#e(), this.#e = null, this.#t.deactivate());
+	#n() {
+		this.#e.release();
 	}
 	render() {
-		if (!this.open) return n;
+		if (!this.open) return r;
 		let e = this.heading.trim() !== "";
-		return o`<div class="lintje-drawer__scrim" @click=${() => this.close("scrim")}></div>
+		return a`<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}
+        aria-labelledby=${e ? "lintje-drawer-title" : r}
+        aria-label=${e ? r : f}
+        aria-busy=${this.busy ? "true" : r}
         tabindex="-1"
       >
         <header class="lintje-drawer__header">
           <div class="lintje-drawer__heading">
-            ${e ? o`<h2 id="lintje-drawer-title" class="lintje-drawer__title">${this.heading}</h2>` : n}
-            ${this.subtitle ? o`<p class="lintje-drawer__subtitle">${this.subtitle}</p>` : n}
+            ${e ? a`<h2 id="lintje-drawer-title" class="lintje-drawer__title">${this.heading}</h2>` : r}
+            ${this.subtitle ? a`<p class="lintje-drawer__subtitle">${this.subtitle}</p>` : r}
           </div>
           <button
             type="button"
             class="lintje-dialog-close lintje-drawer__close"
             aria-label="Sluiten"
-            aria-disabled=${this.busy ? "true" : n}
+            aria-disabled=${this.busy ? "true" : r}
             @click=${() => this.close("button")}
           >
-            ${a("functioneel-kruis", { size: 16 })}
+            ${o("functioneel-kruis", { size: 16 })}
           </button>
         </header>
         <div class="lintje-drawer__body"><slot></slot></div>
@@ -105,6 +101,6 @@ var d = ":host { display: contents; }\n\n/* ------------------------------------
       </div>`;
 	}
 };
-t("lintje-drawer", m);
+t("lintje-drawer", p);
 //#endregion
-export { m as LintjeDrawer };
+export { p as LintjeDrawer };

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

@@ -1,11 +1,15 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, et as i, qt as a, zt as o } from "../chunks/base-Bg-IFOPG.js";
+import { E as e, Jt as t, T as n, Yt as r, Zt as i, lt as a, nn as o } from "../chunks/base-CbmWxUig.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 {
+var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n", c = class extends t {
 	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)];
+		this.styles = [
+			a,
+			i(s),
+			n
+		];
 	}
 	static {
 		this.properties = {
@@ -35,35 +39,20 @@ var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		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 a`<h2 class="lintje-empty-state__heading">${e}</h2>`;
-			case 4: return a`<h4 class="lintje-empty-state__heading">${e}</h4>`;
-			case 5: return a`<h5 class="lintje-empty-state__heading">${e}</h5>`;
-			case 6: return a`<h6 class="lintje-empty-state__heading">${e}</h6>`;
-			default: return a`<h3 class="lintje-empty-state__heading">${e}</h3>`;
-		}
-	}
 	render() {
-		let e = this.status ? "status" : n, t = this.status && !this.filled;
-		return this.compact ? a`<div class="lintje-empty-state lintje-empty-state--compact" role=${e}>
-        ${t ? n : a`${this.text ?? n} <slot></slot>`}
-      </div>` : a`<div class="lintje-empty-state" role=${e}>${t ? n : this.content()}</div>`;
-	}
-	content() {
-		return a`${this.icon ? i(this.icon, {
-			size: 40,
-			className: "lintje-empty-state__icon"
-		}) : n}
-      ${this.renderHeading()}
-      ${this.text ? a`<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>`;
+		return e({
+			heading: this.heading,
+			text: this.text,
+			icon: this.icon,
+			level: this.level,
+			compact: this.compact,
+			status: this.status,
+			filled: this.filled,
+			action: o`<slot @slotchange=${this.onSlotChange}></slot>`,
+			actionShown: this.slotted
+		});
 	}
 };
-t("lintje-empty-state", c);
+r("lintje-empty-state", c);
 //#endregion
 export { c as LintjeEmptyState };

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

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

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

@@ -0,0 +1,109 @@
+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-CbmWxUig.js";
+import "./copy-button.js";
+import "./description-list.js";
+//#region src/components/feedback/error-page/error-page.css?inline
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-error-page {\n  display: flex; flex-direction: column;\n  gap: var(--space-6);\n  max-width: var(--w-text);\n  padding: var(--space-10) 0;\n  font: var(--text-body);\n  color: var(--color-text-primary);\n}\n.lintje-error-page__head { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-error-page__code {\n  display: flex; align-items: center; gap: var(--space-2);\n  margin: 0;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-error-page__mark--error { color: var(--color-error-line); }\n.lintje-error-page__heading {\n  margin: 0;\n  font: var(--text-h1);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n.lintje-error-page__text { margin: 0; }\n.lintje-error-page__reference {\n  display: flex; flex-direction: column; align-items: flex-start;\n  gap: var(--space-3);\n}\n.lintje-error-page__pairs { align-self: stretch; }\n\n.lintje-error-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }\n.lintje-error-page__actions.is-empty { display: none; }\n\n.lintje-error-page__links { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-error-page__links-heading { margin: 0; font: var(--text-h2); }\n.lintje-error-page__list {\n  margin: 0; padding: 0;\n  list-style: none;\n  border-top: 1px solid var(--color-border-default);\n}\n.lintje-error-page__item { border-bottom: 1px solid var(--color-border-default); }\n.lintje-error-page__link {\n  display: flex; align-items: center; gap: var(--space-2);\n  min-height: var(--h-target);\n  color: var(--color-link);\n  text-decoration: none;\n}\n.lintje-error-page__link:hover { color: var(--color-link-hover); text-decoration: underline; }\n\n@media screen and (max-width: 767px) {\n  .lintje-error-page { padding: var(--space-8) 0; }\n  .lintje-error-page__heading { font: var(--text-h1-mobile); }\n  .lintje-error-page__actions { flex-direction: column; align-items: stretch; }\n}\n";
+//#endregion
+//#region src/components/feedback/error-page/error-page.ts
+function u(e) {
+	let t = Number(e);
+	return t === 401 || t === 403 ? {
+		icon: "gebruiksvoorwerpen-hangslot-dicht",
+		tone: "lock"
+	} : t >= 500 && t < 600 ? {
+		icon: "functioneel-foutmelding",
+		tone: "error"
+	} : null;
+}
+var d = class extends t {
+	constructor(...e) {
+		super(...e), this.level = 2, this.links = [], this.hasActions = !1;
+	}
+	static {
+		this.styles = [a, r(l)];
+	}
+	static {
+		this.properties = {
+			code: { type: String },
+			heading: { type: String },
+			text: { type: String },
+			level: { type: Number },
+			links: { attribute: !1 },
+			reference: { type: String },
+			occurred: { type: String },
+			hasActions: { state: !0 }
+		};
+	}
+	follow(t, n) {
+		e(t) && this.followLink(n, t);
+	}
+	renderCode() {
+		if (!this.code) return i;
+		let e = u(this.code);
+		return o`<p class="lintje-error-page__code">
+      ${e ? c(e.icon, {
+			size: 16,
+			className: `lintje-error-page__mark lintje-error-page__mark--${e.tone}`
+		}) : i}Foutcode ${this.code}
+    </p>`;
+	}
+	renderHeading() {
+		return this.heading ? this.level === 1 ? o`<h1 class="lintje-error-page__heading">${this.heading}</h1>` : o`<h2 class="lintje-error-page__heading">${this.heading}</h2>` : i;
+	}
+	renderReference() {
+		if (!this.reference) return i;
+		let e = [{
+			label: "Referentie",
+			value: this.reference
+		}];
+		return this.occurred && e.push({
+			label: "Tijdstip",
+			value: this.occurred
+		}), o`<div class="lintje-error-page__reference">
+      <lintje-description-list
+        class="lintje-error-page__pairs"
+        .items=${e}
+      ></lintje-description-list>
+      <lintje-copy-button text=${this.reference}></lintje-copy-button>
+    </div>`;
+	}
+	renderLinks() {
+		if (this.links.length === 0) return i;
+		let e = "Verder naar";
+		return o`<nav class="lintje-error-page__links" aria-labelledby="links-heading">
+      ${this.level === 1 ? o`<h2 id="links-heading" class="lintje-error-page__links-heading">${e}</h2>` : o`<h3 id="links-heading" class="lintje-error-page__links-heading">${e}</h3>`}
+      <ul class="lintje-error-page__list">
+        ${this.links.map((e) => o`<li class="lintje-error-page__item">
+            <a
+              class="lintje-error-page__link"
+              href=${e.href}
+              @click=${(t) => this.follow(t, e.href)}
+              >${c("functioneel-delta-rechts", { size: 16 })}${e.label}</a
+            >
+          </li>`)}
+      </ul>
+    </nav>`;
+	}
+	render() {
+		return o`<div class="lintje-error-page">
+      <div class="lintje-error-page__head">${this.renderCode()}${this.renderHeading()}</div>
+      ${this.text ? o`<p class="lintje-error-page__text">${this.text}</p>` : i}
+      <slot></slot>
+      ${this.renderReference()}
+      <slot
+        name="actions"
+        class=${s({
+			"lintje-error-page__actions": !0,
+			"is-empty": !this.hasActions
+		})}
+        @slotchange=${(e) => {
+			this.hasActions = e.target.assignedElements().length > 0;
+		}}
+      ></slot>
+      ${this.renderLinks()}
+    </div>`;
+	}
+};
+n("lintje-error-page", d);
+//#endregion
+export { d as LintjeErrorPage };

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

@@ -1,7 +1,7 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, et as i, qt as a, zt as o } from "../chunks/base-Bg-IFOPG.js";
-import { c as s, i as c, o as l } from "../chunks/controls-B1455oPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CbmWxUig.js";
+import { c as s, i as c, o as l } from "../chunks/controls-DxmnDSBr.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";
+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 screen and (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) {
@@ -20,12 +20,12 @@ function m(e, t) {
 	}
 	return n.nodeType === Node.DOCUMENT_NODE ? f(n, t) : null;
 }
-var h = class extends o {
+var h = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [];
 	}
 	static {
-		this.styles = [e, r(u)];
+		this.styles = [i, n(u)];
 	}
 	static {
 		this.properties = {
@@ -47,7 +47,7 @@ var h = class extends o {
 		n && (n.scrollIntoView?.({ block: "center" }), l(n, { preventScroll: !0 }));
 	}
 	render() {
-		if (!this.hasErrors) return n;
+		if (!this.hasErrors) return r;
 		let e = this.heading ?? (this.items.length ? d(this.items.length) : "Opslaan is niet gelukt");
 		return a`<div
       class="lintje-error-summary"
@@ -55,7 +55,7 @@ var h = class extends o {
       aria-labelledby="lintje-error-summary-heading"
       tabindex="-1"
     >
-      ${i("functioneel-waarschuwing", {
+      ${o("functioneel-waarschuwing", {
 			size: 20,
 			className: "lintje-error-summary__icon"
 		})}
@@ -70,13 +70,13 @@ var h = class extends o {
                           >${e.label ? `${e.label}: ${e.message}` : e.message}</a
                         >` : e.message}
                   </li>`)}
-            </ul>` : n}
+            </ul>` : r}
         ${this.message ? a`<p class="lintje-error-summary__message">
               ${this.message}
               ${this.retry ? a`<lintje-button variant="link" @click=${() => this.emit("lintje-retry")}
                     >${this.retry}</lintje-button
-                  >` : n}
-            </p>` : n}
+                  >` : r}
+            </p>` : r}
       </div>
     </div>`;
 	}