lintje 0.2.0 → 0.4.0

package/dist-elements/overlays.js

@@ -1,5 +1,5 @@
-import "./chunks/base-Bg-IFOPG.js";
+import "./chunks/base-DRGvkF-r.js";
 import "./tag/modal.js";
-import "./tag/confirm-dialog.js";
+import "./tag/dialog.js";
 import "./tag/drawer.js";
 import "./tag/toggletip.js";

package/dist-elements/skills/lintje/SKILL.md

@@ -84,6 +84,6 @@ De pagina is klaar als:
 De handleidingen staan in `<naslag>/guides/`: `start.md` (een eerste pagina en wat een formulier
 post), `loading.md` (laden en iconen), `events.md` (elk event en zijn
 antwoord), `theming.md` (thema, modus, embleem), `dashboard.md` (filters en de URL),
-`icons.md` (eigen iconen). Lees de handleiding van het onderwerp voordat je eraan begint. De
+`icons.md` (eigen iconen), `page-contents.md` (een inhoudsopgave naast een lange tekst). Lees de handleiding van het onderwerp voordat je eraan begint. De
 styleguide (`https://h11t-labs.github.io/lintje/examples/styleguide/`) toont elke tag in zijn
 toestanden.

package/dist-elements/tables.js

@@ -1,5 +1,5 @@
-import "./tag/list.js";
 import "./tag/description-list.js";
+import "./tag/list.js";
 import "./tag/pagination.js";
 import "./tag/sortable-list.js";
 import "./tag/data-table.js";

package/dist-elements/tag/activity-log.js

@@ -1,6 +1,6 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/tables/activity-log/activity-log.css?inline
-var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-activity-log {\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-activity-log__heading {\n  margin: 0 0 var(--space-3);\n  font: var(--text-tile-title);\n}\n.lintje-activity-log__list { list-style: none; margin: 0; padding: 0; }\n\n.lintje-activity-log__entry { display: flex; gap: var(--space-3); }\n.lintje-activity-log__rail {\n  flex: 0 0 10px;\n  display: flex; flex-direction: column; align-items: center;\n}\n/* The square sits on the sentence's first line; this stub joins it to the square above. */\n.lintje-activity-log__rail::before {\n  content: '';\n  flex: 0 0 6px;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__rail::before { visibility: hidden; }\n.lintje-activity-log__mark {\n  flex: none;\n  width: 10px; height: 10px;\n  background: var(--color-border-heavy);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: var(--color-accent-line); }\n.lintje-activity-log__line {\n  flex: 1 1 auto;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-last .lintje-activity-log__line { visibility: hidden; }\n\n.lintje-activity-log__body { min-width: 0; padding-bottom: var(--space-4); }\n.lintje-activity-log__entry.is-last .lintje-activity-log__body { padding-bottom: 0; }\n.lintje-activity-log__what { margin: 0; }\n.lintje-activity-log__who { font-weight: 700; }\n.lintje-activity-log__when {\n  display: block;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-activity-log__more { margin-top: var(--space-3); }\n\n/* Forced colours drop fills, so the rail is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-activity-log__rail::before,\n  .lintje-activity-log__mark,\n  .lintje-activity-log__line { forced-color-adjust: none; background: CanvasText; }\n  .lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: Highlight; }\n}\n", s = 10, c = class extends a {
+var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-activity-log {\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-activity-log__heading {\n  margin: 0 0 var(--space-3);\n  font: var(--text-tile-title);\n}\n.lintje-activity-log__list { list-style: none; margin: 0; padding: 0; }\n\n.lintje-activity-log__entry { display: flex; gap: var(--space-3); }\n.lintje-activity-log__rail {\n  flex: 0 0 10px;\n  display: flex; flex-direction: column; align-items: center;\n}\n/* The square sits on the sentence's first line; this stub joins it to the square above. */\n.lintje-activity-log__rail::before {\n  content: '';\n  flex: 0 0 6px;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__rail::before { visibility: hidden; }\n.lintje-activity-log__mark {\n  flex: none;\n  width: 10px; height: 10px;\n  background: var(--color-border-heavy);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: var(--color-accent-line); }\n.lintje-activity-log__line {\n  flex: 1 1 auto;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-last .lintje-activity-log__line { visibility: hidden; }\n\n.lintje-activity-log__body { min-width: 0; padding-bottom: var(--space-4); }\n.lintje-activity-log__entry.is-last .lintje-activity-log__body { padding-bottom: 0; }\n.lintje-activity-log__what { margin: 0; }\n.lintje-activity-log__who { font-weight: 700; }\n.lintje-activity-log__when {\n  display: block;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-activity-log__more { margin-top: var(--space-3); }\n\n/* Forced colours drop fills, so the rail is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-activity-log__rail::before,\n  .lintje-activity-log__mark,\n  .lintje-activity-log__line { forced-color-adjust: none; background: CanvasText; }\n  .lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: Highlight; }\n}\n", s = 10, c = class extends e {
 	constructor(...e) {
 		super(...e), this.entries = [], this.level = 3, this.limit = s;
 	}
@@ -22,19 +22,19 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		t && (t.tabIndex = -1, t.focus());
 	}
 	renderHeading() {
-		if (!this.heading) return t;
-		let e = this.heading, n = "lintje-activity-log-heading";
+		if (!this.heading) return r;
+		let e = this.heading, t = "lintje-activity-log-heading";
 		switch (this.level) {
-			case 2: return i`<h2 id=${n} class="lintje-activity-log__heading">${e}</h2>`;
-			case 4: return i`<h4 id=${n} class="lintje-activity-log__heading">${e}</h4>`;
-			case 5: return i`<h5 id=${n} class="lintje-activity-log__heading">${e}</h5>`;
-			case 6: return i`<h6 id=${n} class="lintje-activity-log__heading">${e}</h6>`;
-			default: return i`<h3 id=${n} class="lintje-activity-log__heading">${e}</h3>`;
+			case 2: return i`<h2 id=${t} class="lintje-activity-log__heading">${e}</h2>`;
+			case 4: return i`<h4 id=${t} class="lintje-activity-log__heading">${e}</h4>`;
+			case 5: return i`<h5 id=${t} class="lintje-activity-log__heading">${e}</h5>`;
+			case 6: return i`<h6 id=${t} class="lintje-activity-log__heading">${e}</h6>`;
+			default: return i`<h3 id=${t} class="lintje-activity-log__heading">${e}</h3>`;
 		}
 	}
 	entry(e, t, n) {
 		return i`<li
-      class=${r({
+      class=${a({
 			"lintje-activity-log__entry": !0,
 			"is-newest": t === 0,
 			"is-last": n
@@ -53,24 +53,24 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     </li>`;
 	}
 	render() {
-		let e = this.entries.slice(0, Math.max(0, this.limit)), n = this.entries.length - e.length;
+		let e = this.entries.slice(0, Math.max(0, this.limit)), t = this.entries.length - e.length;
 		return i`<section class="lintje-activity-log">
       ${this.renderHeading()}
       <ol
         class="lintje-activity-log__list"
-        aria-labelledby=${this.heading ? "lintje-activity-log-heading" : t}
+        aria-labelledby=${this.heading ? "lintje-activity-log-heading" : r}
       >
         ${e.map((t, n) => this.entry(t, n, n === e.length - 1))}
       </ol>
-      ${n > 0 ? i`<lintje-button
+      ${t > 0 ? i`<lintje-button
               class="lintje-activity-log__more"
               variant="link"
               @click=${() => void this.showMore()}
               >Toon eerdere</lintje-button
-            >` : t}
+            >` : r}
     </section>`;
 	}
 };
-e("lintje-activity-log", c);
+t("lintje-activity-log", c);
 //#endregion
 export { c as LintjeActivityLog };

package/dist-elements/tag/ai-label.js

@@ -1,11 +1,11 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, X as i, Y as a, et as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, at as r, en as i, lt as a, nn as o, ot as s, ut as c } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/feedback/ai-label/ai-label.css?inline
-var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-ai-label {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n/* Unlike other badges this one may wrap: a long name would run past a 390 px screen. */\n.lintje-ai-label__box {\n  max-width: 100%;\n  height: auto;\n  min-height: 1.5rem;\n  line-height: 1.25;\n  white-space: normal;\n}\n.lintje-ai-label__badge { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-ai-label__icon { flex: none; }\n.lintje-ai-label__hint { font: var(--text-meta); color: var(--color-text-muted); }\n", u = "Controleer de tekst voor je hem gebruikt", d = class extends c {
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-ai-label {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n/* Unlike other badges this one may wrap: a long name would run past a 390 px screen. */\n.lintje-ai-label__box {\n  max-width: 100%;\n  height: auto;\n  min-height: 1.5rem;\n  line-height: 1.25;\n  white-space: normal;\n}\n.lintje-ai-label__badge { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-ai-label__icon { flex: none; }\n.lintje-ai-label__hint { font: var(--text-meta); color: var(--color-text-muted); }\n", u = "Controleer de tekst voor je hem gebruikt", d = class extends e {
 	static {
 		this.styles = [
-			e,
 			a,
-			r(l)
+			r,
+			n(l)
 		];
 	}
 	static {
@@ -18,18 +18,18 @@ var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		};
 	}
 	render() {
-		let e = !!this.checkedBy, t = this.hint ?? (e ? "" : u), r = s`<span class="lintje-ai-label__badge"
-      >${o(e ? "functioneel-vinkje" : "gereedschap-half-tandwiel-half-brein", {
+		let e = !!this.checkedBy, t = this.hint ?? (e ? "" : u), n = o`<span class="lintje-ai-label__badge"
+      >${c(e ? "functioneel-vinkje" : "gereedschap-half-tandwiel-half-brein", {
 			size: 14,
 			className: "lintje-ai-label__icon"
 		})}<span>${e ? `Gecontroleerd door ${this.checkedBy}` : "Gemaakt door AI"}</span></span
     >`;
-		return s`<span class="lintje-ai-label">
-      ${i({
-			value: r,
+		return o`<span class="lintje-ai-label">
+      ${s({
+			value: n,
 			tone: "neutral",
 			className: "lintje-ai-label__box"
-		})}${t ? s`<span class="lintje-ai-label__hint">${t}</span>` : n}
+		})}${t ? o`<span class="lintje-ai-label__hint">${t}</span>` : i}
     </span>`;
 	}
 };

package/dist-elements/tag/announcement.js

@@ -1,40 +1,21 @@
-import { $ as e, Bt as t, Gt as n, H as r, Ht as i, O as a, S as o, U as s, et as c, k as l, qt as u } from "../chunks/base-Bg-IFOPG.js";
-import { r as d } from "../chunks/focus-trap-9BnE-xWv.js";
+import { F as e, M as t, N as n, P as r, Q as i, Yt as a, Z as o, Zt as s, en as c, lt as l, nn as u } from "../chunks/base-DRGvkF-r.js";
+import { r as d } from "../chunks/focus-trap-Dv8zu64A.js";
 //#region src/components/shared/view-tile.css?inline
-var f = "/*\n * A view element around a tile: the tile fills the host, so the footnote\n * (`margin-top: auto`) reaches the bottom of the grid cell.\n * `display: block` because a standalone custom element is inline.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) {\n  display: none;\n}\n/* `min-height: inherit`: a held host has a min-height and no height, so `100%` resolves to auto. */\nlintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n", p = {
-	warning: "functioneel-waarschuwing",
-	outage: "functioneel-foutmelding",
-	info: "functioneel-info",
-	ok: "functioneel-cirkel-vinkje"
-}, m = {
-	warning: "status",
-	outage: "alert",
-	info: "status",
-	ok: "status"
-}, h = {
-	warning: "Waarschuwing",
-	outage: "Storing",
-	info: "Informatie",
-	ok: "Gelukt"
-}, g = (e) => `lintje-announcement-dismissed:${e}`, _ = class extends a {
+var f = "/*\n * A view element around a tile: the tile fills the host, so the footnote\n * (`margin-top: auto`) reaches the bottom of the grid cell.\n * `display: block` because a standalone custom element is inline.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) {\n  display: none;\n}\n/* The grid cell moves to the next sheet whole; a tile split between its title and its drawing\n   reads as two. */\n@media print {\n  :host { break-inside: avoid; }\n}\n/* `min-height: inherit`: a held host has a min-height and no height, so `100%` resolves to auto. */\nlintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n", p = (e) => `lintje-announcement-dismissed:${e}`, m = class extends r {
 	constructor(...e) {
-		super(...e), this.compact = !1, this.dismissed = null, this.filled = null, this.fillFrame = 0;
+		super(...e), this.dismissed = null, this.filled = null, this.fillFrame = 0;
 	}
 	static {
 		this.styles = [
-			e,
 			l,
-			i(f),
-			i(o)
+			e,
+			s(f),
+			t
 		];
 	}
 	static {
 		this.properties = {
 			data: { attribute: !1 },
-			compact: {
-				type: Boolean,
-				reflect: !0
-			},
 			dismissed: { state: !0 },
 			filled: { state: !0 }
 		};
@@ -56,7 +37,7 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
 		if (this.dismissed === this.identity) return !0;
 		if (!e.announcementId) return !1;
 		try {
-			return localStorage.getItem(g(e.announcementId)) === "1";
+			return localStorage.getItem(p(e.announcementId)) === "1";
 		} catch {
 			return !1;
 		}
@@ -69,15 +50,15 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
 		return !1;
 	}
 	neighbour() {
-		let e = d(document.body), t = e.indexOf(r());
+		let e = d(document.body), t = e.indexOf(o());
 		if (t === -1) return null;
 		let n = (e) => !this.holds(e);
 		return e.slice(t + 1).find(n) ?? e.slice(0, t).reverse().find(n) ?? null;
 	}
 	async close() {
-		let e = s(this) ? this.neighbour() : null, t = this.data?.announcementId;
+		let e = i(this) ? this.neighbour() : null, t = this.data?.announcementId;
 		if (t) try {
-			localStorage.setItem(g(t), "1");
+			localStorage.setItem(p(t), "1");
 		} catch {}
 		this.dismissed = this.identity, e && (await this.updateComplete, e.focus());
 	}
@@ -91,56 +72,35 @@ var f = "/*\n * A view element around a tile: the tile fills the host, so the fo
 	}
 	render() {
 		let e = this.data;
-		if (!e || this.isDismissed) return n;
-		let t = this.block(e), r = e.tile;
-		return r ? u`<lintje-tile
-      id=${this.id ? `${this.id}-tile` : n}
-      span=${r.span ?? n}
-      heading=${r.title ?? n}
-      icon=${r.icon ?? n}
-      subtitle=${r.subtitle ?? n}
-      intro=${r.intro ?? n}
-      footnote=${r.footnote ?? n}
+		if (!e || this.isDismissed) return c;
+		let t = this.block(e), n = e.tile;
+		return n ? u`<lintje-tile
+      id=${this.id ? `${this.id}-tile` : c}
+      span=${n.span ?? c}
+      heading=${n.title ?? c}
+      icon=${n.icon ?? c}
+      subtitle=${n.subtitle ?? c}
+      intro=${n.intro ?? c}
+      footnote=${n.footnote ?? c}
       >${t}</lintje-tile
     >` : t;
 	}
 	block(e) {
-		let t = e.kind ?? "warning", r = !!e.dismissible && t !== "outage", i = e.live === !0, a = i && this.filled !== this.identity;
-		return u`<div
-      class="lintje-announcement lintje-announcement--${t} ${this.compact ? "is-compact" : ""}"
-      role=${i ? m[t] ?? n : n}
-    >
-      ${a ? n : this.content(e, t, r)}
-    </div>`;
-	}
-	content(e, t, r) {
-		let i = u`<span class="visually-hidden">${h[t] ?? ""}: </span>`;
-		return u`<span class="lintje-announcement__icon" aria-hidden="true"
-        >${p[t] ? c(p[t], { size: 16 }) : n}</span
-      >
-      <div class="lintje-announcement__body">
-        <div class="lintje-announcement__content">
-          ${e.title ? u`<p class="lintje-announcement__title">${i}${e.title}</p>` : n}
-          ${e.text ? u`<p class="lintje-announcement__text">${e.title ? n : i}${e.text}</p>` : n}
-          ${e.meta || e.link ? u`<p class="lintje-announcement__meta">
-                ${e.meta ?? n}${e.meta && e.link ? " · " : n}${e.link ? u`<a class="lintje-announcement__link" href=${e.link.href}
-                      >${e.link.label}</a
-                    >` : n}
-              </p>` : n}
-        </div>
-        <slot name="action" class="lintje-announcement__action"></slot>
-      </div>
-      <slot name="media" class="lintje-announcement__media"></slot>
-      ${r ? u`<button
-            type="button"
-            class="lintje-announcement__close"
-            aria-label="Mededeling sluiten"
-            @click=${() => void this.close()}
-          >
-            ${c("functioneel-kruis", { size: 16 })}
-          </button>` : n}`;
+		let t = e.kind ?? "warning", r = !!e.dismissible && t !== "outage", i = e.live === !0;
+		return n({
+			kind: t,
+			title: e.title,
+			text: e.text,
+			meta: e.meta,
+			link: e.link,
+			live: i,
+			filled: this.filled === this.identity,
+			action: u`<slot name="action" class="lintje-announcement__action"></slot>`,
+			media: u`<slot name="media" class="lintje-announcement__media"></slot>`,
+			onClose: r ? () => void this.close() : void 0
+		});
 	}
 };
-t("lintje-announcement", _);
+a("lintje-announcement", m);
 //#endregion
-export { _ as LintjeAnnouncement, f as t };
+export { m as LintjeAnnouncement, f as t };

package/dist-elements/tag/app-search.js

@@ -1,10 +1,10 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Lt as o, Nt as s, St as c, Z as l, et as u, qt as d, zt as f } from "../chunks/base-Bg-IFOPG.js";
-import { t as p } from "../chunks/focus-trap-9BnE-xWv.js";
+import { Gt as e, H as t, Ht as n, Jt as r, Kt as i, Yt as a, Zt as o, en as s, jt as c, lt as l, nn as u, st as d, ut as f } from "../chunks/base-DRGvkF-r.js";
+import { t as p } from "../chunks/focus-trap-Dv8zu64A.js";
 import { t as m } from "../chunks/dialog-close-u75fVEw4.js";
 import { t as h } from "../chunks/key-CuuOw1KE.js";
 import { t as g } from "../chunks/debounce-JXnLMCcF.js";
 //#region src/components/frame/app-search/app-search.css?inline
-var _ = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-app-search__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: calc(var(--space-10) * 2) var(--space-6) 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-app-search {\n  display: flex;\n  flex-direction: column;\n  width: min(560px, 100%);\n  max-height: 100%;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-ui);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n/* The window takes focus only when the trap pulls stray focus back; the field draws the ring. */\n.lintje-app-search:focus { outline: none; }\n\n.lintje-app-search__field {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: var(--space-3);\n  background: var(--color-bg-filter);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__icon {\n  position: absolute;\n  left: calc(var(--space-3) * 2);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n/* A field like every other, so its focus ring has room inside the band. */\n.lintje-app-search__input {\n  flex: 1;\n  min-width: 0;\n  height: var(--h-control);\n  /* Clears the glyph. */\n  padding: 0 var(--space-3) 0 calc(var(--space-3) + 20px + var(--space-3));\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n}\n.lintje-app-search__input::-webkit-search-cancel-button { display: none; }\n\n.lintje-app-search__results {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: var(--space-3) 0 var(--space-2);\n}\n\n.lintje-app-search__heading {\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__group:first-child .lintje-app-search__heading { padding-top: 0; }\n\n.lintje-app-search__option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--h-control);\n  padding: 0 var(--space-4);\n  color: var(--color-text-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-app-search__option + .lintje-app-search__option { border-top: 1px solid var(--color-border-default); }\n.lintje-app-search__option:hover { background: var(--color-bg-subtle); }\n/* The chosen row has the virtual focus (`aria-activedescendant`), so it draws the focus ring,\n   inside; the fill alone is too faint to find. */\n.lintje-app-search__option.is-active {\n  background: var(--color-bg-selected);\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-app-search__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-app-search__match { font-weight: 700; }\n.lintje-app-search__meta { flex: none; color: var(--color-text-muted); }\n\n.lintje-app-search__busy { display: flex; align-items: center; justify-content: center; padding: var(--space-4); color: var(--color-text-muted); }\n.lintje-app-search__empty { margin: 0; padding: var(--space-4); text-align: center; color: var(--color-text-muted); }\n\n.lintje-app-search__keys {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: none;\n  gap: var(--space-1) var(--space-6);\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__hint { display: inline-flex; align-items: center; gap: var(--space-1); }\n\n.lintje-app-search__close:hover { color: var(--color-text-primary); }\n\n/* Phone: a sheet from below, as \"Weergave\", \"Delen\" and the filters open, with their head. Its\n   height stays as the results change, and the field stands high, above the keyboard. */\n.lintje-app-search__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  flex: none;\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n@media (max-width: 767px) {\n  .lintje-app-search__scrim { align-items: flex-end; padding: 0; }\n  .lintje-app-search {\n    width: 100%;\n    height: 88vh;\n    border: 0;\n    border-top: 1px solid var(--color-border-strong);\n    box-shadow: none;\n    animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n  }\n  .lintje-app-search__input { height: var(--h-touch); }\n  .lintje-app-search__option { min-height: var(--h-touch); }\n}\n\n/* Forced colours drop the fill; the ring takes Highlight. */\n@media (forced-colors: active) {\n  .lintje-app-search__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }\n}\n", v = 200, y = 0;
+var _ = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-app-search__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: calc(var(--space-10) * 2) var(--space-6) 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-app-search {\n  display: flex;\n  flex-direction: column;\n  width: min(560px, 100%);\n  max-height: 100%;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-ui);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n/* The window takes focus only when the trap pulls stray focus back; the field draws the ring. */\n.lintje-app-search:focus { outline: none; }\n\n.lintje-app-search__field {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: var(--space-3);\n  background: var(--color-bg-filter);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__icon {\n  position: absolute;\n  left: calc(var(--space-3) * 2);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n/* A field like every other, so its focus ring has room inside the band. */\n.lintje-app-search__input {\n  flex: 1;\n  min-width: 0;\n  height: var(--h-control);\n  /* Clears the glyph. */\n  padding: 0 var(--space-3) 0 calc(var(--space-3) + 20px + var(--space-3));\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n}\n.lintje-app-search__input::-webkit-search-cancel-button { display: none; }\n\n.lintje-app-search__results {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: var(--space-3) 0 var(--space-2);\n}\n\n.lintje-app-search__heading {\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__group:first-child .lintje-app-search__heading { padding-top: 0; }\n\n.lintje-app-search__option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--h-control);\n  padding: 0 var(--space-4);\n  color: var(--color-text-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-app-search__option + .lintje-app-search__option { border-top: 1px solid var(--color-border-default); }\n.lintje-app-search__option:hover { background: var(--color-bg-subtle); }\n/* The chosen row has the virtual focus (`aria-activedescendant`), so it draws the focus ring,\n   inside; the fill alone is too faint to find. */\n.lintje-app-search__option.is-active {\n  background: var(--color-bg-selected);\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-app-search__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-app-search__match { font-weight: 700; }\n.lintje-app-search__meta { flex: none; color: var(--color-text-muted); }\n\n.lintje-app-search__busy { display: flex; align-items: center; justify-content: center; padding: var(--space-4); color: var(--color-text-muted); }\n.lintje-app-search__empty { margin: 0; padding: var(--space-4); text-align: center; color: var(--color-text-muted); }\n\n.lintje-app-search__keys {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: none;\n  gap: var(--space-1) var(--space-6);\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__hint { display: inline-flex; align-items: center; gap: var(--space-1); }\n\n.lintje-app-search__close:hover { color: var(--color-text-primary); }\n\n/* Phone: a sheet from below, as \"Weergave\", \"Delen\" and the filters open, with their head. Its\n   height stays as the results change, and the field stands high, above the keyboard. */\n.lintje-app-search__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  flex: none;\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n@media screen and (max-width: 767px) {\n  .lintje-app-search__scrim { align-items: flex-end; padding: 0; }\n  .lintje-app-search {\n    width: 100%;\n    height: 88vh;\n    border: 0;\n    border-top: 1px solid var(--color-border-strong);\n    box-shadow: none;\n    animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n  }\n  .lintje-app-search__input { height: var(--h-touch); }\n  .lintje-app-search__option { min-height: var(--h-touch); }\n}\n\n/* Forced colours drop the fill; the ring takes Highlight. */\n@media (forced-colors: active) {\n  .lintje-app-search__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }\n}\n", v = 200, y = 0;
 function b(e, t) {
 	let n = t.trim();
 	if (!n) return null;
@@ -18,18 +18,18 @@ function b(e, t) {
 function x(e, t, n) {
 	return n ? "" : e === 0 ? t.trim() ? `Geen resultaten voor “${t.trim()}”` : "" : e === 1 ? "1 resultaat" : `${e} resultaten`;
 }
-var S = class extends f {
-	constructor(...e) {
-		super(...e), this.open = !1, this.label = "Zoeken", this.query = "", this.loading = !1, this.groups = [], this.active = -1, this.#e = new o(this, a), this.#t = new g(this, 200), this.#n = `lintje-app-search-${++y}`, this.#r = null, this.#i = null, this.#a = new p(), this.#o = (e) => {
+var S = class extends r {
+	constructor(...t) {
+		super(...t), this.open = !1, this.label = "Zoeken", this.query = "", this.loading = !1, this.groups = [], this.active = -1, this.#e = new i(this, e), this.#t = new g(this, 200), this.#n = `lintje-app-search-${++y}`, this.#r = null, this.#i = null, this.#a = new p(), this.#o = (e) => {
 			e.key === "Escape" && this.#a.isTopmost() && this.close("escape");
 		};
 	}
 	static {
 		this.styles = [
-			e,
-			r(m),
-			r(h),
-			r(_)
+			l,
+			o(m),
+			o(h),
+			o(_)
 		];
 	}
 	static {
@@ -86,7 +86,7 @@ var S = class extends f {
 		super.updated(e), this.open && !this.#i ? this.#s() : !this.open && this.#i && this.#c(), e.has("active") && this.active >= 0 && this.renderRoot.querySelector(`#${this.optionId(this.active)}`)?.scrollIntoView?.({ block: "nearest" });
 	}
 	#s() {
-		this.#i = s(), document.addEventListener("keydown", this.#o);
+		this.#i = n(), document.addEventListener("keydown", this.#o);
 		let e = this.renderRoot.querySelector(".lintje-app-search");
 		e && this.#a.activate(e, { focus: this.input ?? !0 });
 	}
@@ -112,59 +112,59 @@ var S = class extends f {
 			}
 		}
 	}
-	choose(e, t) {
+	choose(e, n) {
 		if (e.href) {
-			if (t && !i(t)) return;
-			this.followLink(e.href, t);
+			if (n && !t(n)) return;
+			this.followLink(e.href, n);
 		} else this.emit("lintje-action", e.id);
 		this.close("choice");
 	}
 	renderLabel(e) {
 		let t = b(e, this.query);
-		return t ? d`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}` : d`${e}`;
+		return t ? u`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}` : u`${e}`;
 	}
 	renderOption(e, t) {
-		let r = t === this.active, i = l({
+		let n = t === this.active, r = d({
 			"lintje-app-search__option": !0,
-			"is-active": r
-		}), a = d`<span class="lintje-app-search__label">${this.renderLabel(e.label)}</span>${e.meta ? d`<span class="lintje-app-search__meta">${e.meta}</span>` : n}`, o = (t) => this.choose(e, t);
-		return e.href ? d`<a
+			"is-active": n
+		}), i = u`<span class="lintje-app-search__label">${this.renderLabel(e.label)}</span>${e.meta ? u`<span class="lintje-app-search__meta">${e.meta}</span>` : s}`, a = (t) => this.choose(e, t);
+		return e.href ? u`<a
           id=${this.optionId(t)}
-          class=${i}
+          class=${r}
           role="option"
-          aria-selected=${String(r)}
+          aria-selected=${String(n)}
           tabindex="-1"
           href=${e.href}
-          @click=${o}
-          >${a}</a
-        >` : d`<div
+          @click=${a}
+          >${i}</a
+        >` : u`<div
           id=${this.optionId(t)}
-          class=${i}
+          class=${r}
           role="option"
-          aria-selected=${String(r)}
-          @click=${o}
+          aria-selected=${String(n)}
+          @click=${a}
         >
-          ${a}
+          ${i}
         </div>`;
 	}
 	renderResults() {
-		let e = 0, t = `${this.#n}-list`, r = this.results.length, i = this.query.trim();
-		return d`
-      ${this.loading ? d`<div class="lintje-app-search__busy">
+		let e = 0, t = `${this.#n}-list`, n = this.results.length, r = this.query.trim();
+		return u`
+      ${this.loading ? u`<div class="lintje-app-search__busy">
             <lintje-spinner label="Zoeken"></lintje-spinner>
-          </div>` : !r && i ? d`<p class="lintje-app-search__empty">Geen resultaten voor “${i}”</p>` : n}
+          </div>` : !n && r ? u`<p class="lintje-app-search__empty">Geen resultaten voor “${r}”</p>` : s}
       <div
         id=${t}
         class="lintje-app-search__list"
         role="listbox"
         aria-label="Resultaten"
-        ?hidden=${this.loading || !r}
+        ?hidden=${this.loading || !n}
       >
-        ${this.groups.map((t, r) => {
-			if (!t.items.length) return n;
-			let i = `${this.#n}-group-${r}`;
-			return d`<div class="lintje-app-search__group" role="group" aria-labelledby=${i}>
-            <div id=${i} class="lintje-app-search__heading">${t.label}</div>
+        ${this.groups.map((t, n) => {
+			if (!t.items.length) return s;
+			let r = `${this.#n}-group-${n}`;
+			return u`<div class="lintje-app-search__group" role="group" aria-labelledby=${r}>
+            <div id=${r} class="lintje-app-search__heading">${t.label}</div>
             ${t.items.map((t) => this.renderOption(t, e++))}
           </div>`;
 		})}
@@ -172,9 +172,9 @@ var S = class extends f {
     `;
 	}
 	render() {
-		if (!this.open) return n;
-		let e = `${this.#n}-list`, t = this.results.length, r = !this.loading && t > 0;
-		return d`<div class="lintje-app-search__scrim" @click=${() => this.close("scrim")}>
+		if (!this.open) return s;
+		let e = `${this.#n}-list`, t = this.results.length, n = !this.loading && t > 0;
+		return u`<div class="lintje-app-search__scrim" @click=${() => this.close("scrim")}>
       <div
         class="lintje-app-search"
         role="dialog"
@@ -183,7 +183,7 @@ var S = class extends f {
         tabindex="-1"
         @click=${(e) => e.stopPropagation()}
       >
-        ${this.#e.matches ? d`<div class="lintje-app-search__header">
+        ${this.#e.matches ? u`<div class="lintje-app-search__header">
                 <h2 class="lintje-app-search__title">Zoeken</h2>
                 <button
                   type="button"
@@ -191,11 +191,11 @@ var S = class extends f {
                   aria-label="Zoeken sluiten"
                   @click=${() => this.close("button")}
                 >
-                  ${u("functioneel-kruis", { size: 16 })}
+                  ${f("functioneel-kruis", { size: 16 })}
                 </button>
-              </div>` : n}
+              </div>` : s}
         <div class="lintje-app-search__field">
-          ${u("functioneel-zoek", {
+          ${f("functioneel-zoek", {
 			size: 20,
 			className: "lintje-app-search__icon"
 		})}
@@ -207,9 +207,9 @@ var S = class extends f {
             spellcheck="false"
             aria-label=${this.label}
             aria-autocomplete="list"
-            aria-expanded=${String(r)}
+            aria-expanded=${String(n)}
             aria-controls=${e}
-            aria-activedescendant=${r && this.active >= 0 ? this.optionId(this.active) : n}
+            aria-activedescendant=${n && this.active >= 0 ? this.optionId(this.active) : s}
             .value=${this.query}
             @input=${this.onInput}
             @keydown=${this.onFieldKeydown}
@@ -225,7 +225,7 @@ var S = class extends f {
         <p class="visually-hidden" aria-live="polite">
           ${x(t, this.query, this.loading)}
         </p>
-        ${this.#e.matches ? n : d`<p class="lintje-app-search__keys">
+        ${this.#e.matches ? s : u`<p class="lintje-app-search__keys">
                 <span class="lintje-app-search__hint"
                   ><kbd class="lintje-key">↑</kbd><kbd class="lintje-key">↓</kbd> kiezen</span
                 >
@@ -236,6 +236,6 @@ var S = class extends f {
     </div>`;
 	}
 };
-t("lintje-app-search", S);
+a("lintje-app-search", S);
 //#endregion
 export { S as LintjeAppSearch, v as SEARCH_DELAY, x as resultsMessage, b as splitMatch };