lintje 0.1.1 → 0.2.0

package/dist-elements/tag/shell.js

@@ -1,6 +1,6 @@
-import { $ as e, A as t, Bt as n, Gt as r, H as i, Ht as a, I as o, It as s, Kt as c, Lt as l, Nt as u, Ot as d, Pt as f, Rt as ee, Tt as te, U as p, W as m, X as h, Y as ne, Z as g, et as _, zt as v } from "../chunks/base-rBLTcEIv.js";
+import { $ as e, A as t, Bt as n, Gt as r, H as i, Ht as a, I as o, It as s, Lt as c, Nt as l, Ot as u, Pt as d, Rt as ee, Tt as te, U as f, W as p, X as m, Y as ne, Z as h, et as g, qt as _, zt as v } from "../chunks/base-Bg-IFOPG.js";
 import "./logo.js";
-import { n as y, r as re, t as b } from "../chunks/focus-trap-w3vCamJ6.js";
+import { n as y, r as re, t as b } from "../chunks/focus-trap-9BnE-xWv.js";
 import "./toast.js";
 import "./qr-code.js";
 import { t as ie } from "../chunks/dialog-close-u75fVEw4.js";
@@ -14,7 +14,7 @@ var x = {
 	phone: 40
 };
 function oe(e) {
-	let { logo: t, emblem: n, ribbon: i, environment: a, home: s } = e, l = c`<lintje-logo
+	let { logo: t, emblem: n, ribbon: i, environment: a, home: s } = e, c = _`<lintje-logo
     full
     width=${i}
     src=${t ?? r}
@@ -22,8 +22,8 @@ function oe(e) {
     alt=${n?.label ?? r}
     byline=${n?.byline ?? r}
   ></lintje-logo>`;
-	return c`<div class="lintje-logobar">
-    ${s ? c`<a
+	return _`<div class="lintje-logobar">
+    ${s ? _`<a
           class="lintje-logobar__home focus-inset"
           href=${s.href}
           aria-label="Naar de startpagina"
@@ -31,9 +31,9 @@ function oe(e) {
           @click=${(e) => {
 		o(e) && s.onNavigate(e);
 	}}
-          >${l}</a
-        >` : l}
-    ${a ? c`<p class="lintje-logobar__environment" title=${a}>
+          >${c}</a
+        >` : c}
+    ${a ? _`<p class="lintje-logobar__environment" title=${a}>
           <span class="lintje-logobar__environment-label">${a}</span>
           <span class="lintje-logobar__environment-short" aria-hidden="true"
             >${a.slice(0, 3)}</span
@@ -43,7 +43,7 @@ function oe(e) {
 }
 var S = (e) => !!e.href && !e.noAccess;
 function C(e) {
-	return c`<span class="visually-hidden"
+	return _`<span class="visually-hidden"
     >${e.noAccess ? ", geen toegang" : ", niet beschikbaar"}</span
   >`;
 }
@@ -52,7 +52,7 @@ function w(e, t, n) {
 }
 function se(e) {
 	let t = e.badge;
-	return t ? h({
+	return t ? m({
 		value: t.value,
 		variant: t.tone === "new" ? "label" : t.tone === "action" ? "unread" : "count",
 		label: t.label,
@@ -60,12 +60,12 @@ function se(e) {
 	}) : r;
 }
 function ce(e, t) {
-	if (!S(t)) return c`<span class="lintje-navbar__entry is-unavailable" aria-disabled="true"
+	if (!S(t)) return _`<span class="lintje-navbar__entry is-unavailable" aria-disabled="true"
       >${t.label}${C(t)}</span
     >`;
 	let n = !!t.active;
-	return c`<a
-    class=${g({
+	return _`<a
+    class=${h({
 		"lintje-navbar__entry": !0,
 		"focus-inset": !0,
 		"is-active": n
@@ -77,23 +77,23 @@ function ce(e, t) {
   >`;
 }
 function le(e, t) {
-	let n = c`${_(t.icon, {
+	let n = _`${g(t.icon, {
 		size: 20,
 		src: t.iconSrc
 	})}
     <span class="lintje-navbar__page-text">
       <span class="lintje-navbar__label">${t.label}</span>
-      ${t.metric ? c`<span class="lintje-navbar__metric"
+      ${t.metric ? _`<span class="lintje-navbar__metric"
               ><span class="lintje-navbar__metric-value">${t.metric.value}</span> ${t.metric.label}</span
             >` : r}
     </span>
-    ${t.noAccess ? _("gebruiksvoorwerpen-hangslot-dicht", {
+    ${t.noAccess ? g("gebruiksvoorwerpen-hangslot-dicht", {
 		size: 16,
 		label: "Geen toegang"
 	}) : S(t) ? r : C(t)}
     ${se(t)}`;
-	if (!S(t)) return c`<span
-      class=${g({
+	if (!S(t)) return _`<span
+      class=${h({
 		"lintje-navbar__page": !0,
 		"is-unavailable": !0,
 		"is-no-access": !!t.noAccess
@@ -102,8 +102,8 @@ function le(e, t) {
       >${n}</span
     >`;
 	let i = !!t.active;
-	return c`<a
-    class=${g({
+	return _`<a
+    class=${h({
 		"lintje-navbar__page": !0,
 		"is-active": i
 	})}
@@ -114,38 +114,38 @@ function le(e, t) {
   >`;
 }
 function T(e, t, n, i, a, o, s = {}) {
-	let l = e.open === t, u = t === -1, d = `${n}-entry`;
-	return c`<div class="lintje-navbar__group">
+	let c = e.open === t, l = t === -1, u = `${n}-entry`;
+	return _`<div class="lintje-navbar__group">
     <button
       type="button"
-      id=${d}
-      class=${g({
+      id=${u}
+      class=${h({
 		"lintje-navbar__entry": !0,
 		"lintje-navbar__entry--group": !0,
 		"focus-inset": !0,
 		"is-active": a,
-		"is-open": l,
+		"is-open": c,
 		...s
 	})}
-      aria-expanded=${String(l)}
+      aria-expanded=${String(c)}
       aria-controls=${n}
       @click=${(n) => {
-		e.onOpen(l && (u || n.detail === 0) ? null : t);
+		e.onOpen(c && (l || n.detail === 0) ? null : t);
 	}}
-      @mouseenter=${u ? r : () => e.onOpen(t)}
+      @mouseenter=${l ? r : () => e.onOpen(t)}
     >
-      ${u ? l ? c`<span class="lintje-navbar__label">Sluiten</span>${_("functioneel-kruis", { size: 16 })}` : c`${_("functioneel-menu", { size: 16 })}<span class="lintje-navbar__label">${i}</span>` : c`<span class="lintje-navbar__label">${i}</span>
-              ${_("functioneel-delta-omlaag", {
+      ${l ? c ? _`<span class="lintje-navbar__label">Sluiten</span>${g("functioneel-kruis", { size: 16 })}` : _`${g("functioneel-menu", { size: 16 })}<span class="lintje-navbar__label">${i}</span>` : _`<span class="lintje-navbar__label">${i}</span>
+              ${g("functioneel-delta-omlaag", {
 		size: 16,
-		rotate: l ? 180 : void 0
+		rotate: c ? 180 : void 0
 	})}`}
     </button>
-    ${l ? c`<div id=${n} class="lintje-navbar__submenu">${o(d)}</div>` : r}
+    ${c ? _`<div id=${n} class="lintje-navbar__submenu">${o(u)}</div>` : r}
   </div>`;
 }
 function E(e, t, n) {
-	return c`<ul class="lintje-navbar__pages" aria-labelledby=${n}>
-    ${t.map((t) => c`<li class="lintje-navbar__item">${le(e, t)}</li>`)}
+	return _`<ul class="lintje-navbar__pages" aria-labelledby=${n}>
+    ${t.map((t) => _`<li class="lintje-navbar__item">${le(e, t)}</li>`)}
   </ul>`;
 }
 var ue = (e) => e.some((e) => S(e) && !!e.active);
@@ -154,24 +154,24 @@ function de(e, t, n) {
 }
 function fe(e) {
 	let t = `${e.id}-menu`, n = e.groups.filter((e) => !e.heading).flatMap((e) => e.items);
-	return T(e, -1, t, "Menu", !1, (i) => c`${n.length ? E(e, n, i) : r}
+	return T(e, -1, t, "Menu", !1, (i) => _`${n.length ? E(e, n, i) : r}
       ${e.groups.map((n, i) => {
 		if (!n.heading) return r;
 		let a = `${t}-heading-${i}`;
-		return c`<p id=${a} class="lintje-navbar__heading">${n.heading}</p>
+		return _`<p id=${a} class="lintje-navbar__heading">${n.heading}</p>
           ${E(e, n.items, a)}`;
 	})}`, { "lintje-navbar__entry--menu": !0 });
 }
 function pe(e) {
 	let t = !!e.collapsed;
-	return c`<div class="lintje-navbar" @mouseleave=${() => {
+	return _`<div class="lintje-navbar" @mouseleave=${() => {
 		e.open !== -1 && e.onOpen(null);
 	}}>
     <div class="lintje-navbar__start">
       ${e.start ?? r}
       <nav class="lintje-navbar__entries" aria-label="Hoofdnavigatie">
         <div
-          class=${g({
+          class=${h({
 		"lintje-navbar__list": !0,
 		"is-hidden": t
 	})}
@@ -183,7 +183,7 @@ function pe(e) {
         ${t ? fe(e) : r}
       </nav>
     </div>
-    ${e.end ? c`<div class="lintje-navbar__end">${e.end}</div>` : r}
+    ${e.end ? _`<div class="lintje-navbar__end">${e.end}</div>` : r}
   </div>`;
 }
 var me = class {
@@ -194,8 +194,8 @@ var me = class {
 		this.host = e, this.collapsed = !1, this.#t = null, this.#n = [], this.#i = (e) => {
 			if (e.key !== "Escape" || this.host.openGroup === null) return;
 			let t = this.#r;
-			if (t && !m(t)) return;
-			let n = this.host.renderRoot.querySelector(".lintje-navbar__entry[aria-expanded=\"true\"]"), r = n?.parentElement, i = r ? p(r) : !1;
+			if (t && !p(t)) return;
+			let n = this.host.renderRoot.querySelector(".lintje-navbar__entry[aria-expanded=\"true\"]"), r = n?.parentElement, i = r ? f(r) : !1;
 			this.host.openGroup = null, i && n?.focus();
 		}, this.#a = (e) => {
 			if (this.host.openGroup === null) return;
@@ -205,7 +205,7 @@ var me = class {
 			if (this.host.openGroup === null) return;
 			let t = e.relatedTarget, n = this.#r;
 			t && n && !n.contains(t) && (this.host.openGroup = null);
-		}, e.addController(this), this.#e = new l(e, s);
+		}, e.addController(this), this.#e = new c(e, s);
 	}
 	get #r() {
 		return this.host.renderRoot.querySelector(".lintje-navbar");
@@ -248,13 +248,13 @@ var me = class {
 	}
 };
 function he(e) {
-	return e ? c`<div class="lintje-header-scrim" aria-hidden="true"></div>` : r;
+	return e ? _`<div class="lintje-header-scrim" aria-hidden="true"></div>` : r;
 }
 //#endregion
 //#region src/components/frame/shell/navigation.ts
 var D = "Menu vastzetten";
 function ge(e) {
-	let t = _(e ? "kantoor-label" : "kantoor-label-outline", { size: 16 });
+	let t = g(e ? "functioneel-punaise" : "functioneel-punaise-outline", { size: 16 });
 	return t === r ? {
 		content: "Vastzetten",
 		asText: !0
@@ -270,7 +270,7 @@ function O(e, t) {
 		return !1;
 	}
 }
-var k = (e) => p(e) && O(i(), ":focus-visible");
+var k = (e) => f(e) && O(i(), ":focus-visible");
 function _e(e, t) {
 	return {
 		mouseenter: () => {
@@ -343,42 +343,42 @@ var ve = class {
 	}
 };
 function A(e) {
-	let t = _("gebruiksvoorwerpen-hangslot-dicht", {
+	let t = g("gebruiksvoorwerpen-hangslot-dicht", {
 		size: 16,
 		label: "Geen toegang"
 	});
-	return t === r ? c`<span class=${e}>geen toegang</span>` : t;
+	return t === r ? _`<span class=${e}>geen toegang</span>` : t;
 }
 var j = (e) => `v${e.replace(/^v/, "")}`, M = (e) => e.label ?? "Vragen of feedback";
 function N(e, t, n, i) {
-	let a = e.data, s = c`<lintje-logo
+	let a = e.data, s = _`<lintje-logo
     width=${n}
     src=${a?.logo ?? r}
     name=${a?.emblem?.name ?? r}
     alt=${a?.emblem?.label ?? r}
-  ></lintje-logo>`, l = a?.home;
-	return l ? c`<a
-    href=${l}
+  ></lintje-logo>`, c = a?.home;
+	return c ? _`<a
+    href=${c}
     class=${t}
     aria-label="Naar de startpagina"
     title="Naar de startpagina"
     @click=${(t) => {
-		o(t) && (i?.(), e.follow(l, t));
+		o(t) && (i?.(), e.follow(c, t));
 	}}
     >${s}</a
-  >` : c`<span class=${t}>${s}</span>`;
+  >` : _`<span class=${t}>${s}</span>`;
 }
 function P(e, t, n) {
-	let i = S(t), a = !i, s = c`
-    ${_(t.icon, {
+	let i = S(t), a = !i, s = _`
+    ${g(t.icon, {
 		size: 20,
 		src: t.iconSrc
 	})}
-    ${n ? c`<span class="lintje-nav__label">${t.label}</span>` : c`<span class="visually-hidden">${t.label}</span>`}
-    ${n && t.metric ? c`<span class="lintje-nav__metric">${t.metric.value}</span>` : r}
+    ${n ? _`<span class="lintje-nav__label">${t.label}</span>` : _`<span class="visually-hidden">${t.label}</span>`}
+    ${n && t.metric ? _`<span class="lintje-nav__metric">${t.metric.value}</span>` : r}
     ${t.noAccess && n ? A("lintje-nav__metric") : r}
     ${!i && !(t.noAccess && n) ? C(t) : r}
-    ${t.badge ? h({
+    ${t.badge ? m({
 		value: t.badge.value,
 		variant: t.badge.tone === "new" ? "label" : "unread",
 		surface: t.badge.tone === "action" && !a ? void 0 : "nav",
@@ -387,9 +387,9 @@ function P(e, t, n) {
 		className: `lintje-nav__badge lintje-nav__badge--${t.badge.tone}`
 	}) : r}
   `;
-	return i ? c`<a
+	return i ? _`<a
       href=${t.href}
-      class=${g({
+      class=${h({
 		"lintje-nav__item": !0,
 		"is-active": !!t.active
 	})}
@@ -398,8 +398,8 @@ function P(e, t, n) {
 		o(n) && e.follow(t.href, n);
 	}}
       >${s}</a
-    >` : c`<span
-    class=${g({
+    >` : _`<span
+    class=${h({
 		"lintje-nav__item": !0,
 		"is-no-page": !t.noAccess,
 		"is-no-access": !!t.noAccess
@@ -410,31 +410,31 @@ function P(e, t, n) {
   >`;
 }
 function F(e, t) {
-	let n = e.data, i = n?.menu ?? "pinned", a = e.wide.matches, o = i === "unpinned" || !a, s = !o || e.railExpanded, l = ge(i === "pinned"), u = _e(e, o);
-	return c`
+	let n = e.data, i = n?.menu ?? "pinned", a = e.wide.matches, o = i === "unpinned" || !a, s = !o || e.railExpanded, c = ge(i === "pinned"), l = _e(e, o);
+	return _`
     <nav
-      class=${g({
+      class=${h({
 		"lintje-nav": !0,
 		"lintje-nav--rail": o,
 		"is-expanded": e.railExpanded
 	})}
       aria-label="Hoofdnavigatie"
-      @mouseenter=${u.mouseenter}
-      @mouseleave=${u.mouseleave}
-      @focusin=${u.focusin}
-      @focusout=${u.focusout}
-      @keydown=${u.keydown}
+      @mouseenter=${l.mouseenter}
+      @mouseleave=${l.mouseleave}
+      @focusin=${l.focusin}
+      @focusout=${l.focusout}
+      @keydown=${l.keydown}
     >
       <div class="lintje-nav__header">
         ${N(e, "lintje-nav__home", 44)}
-        ${s && a ? c`<button
+        ${s && a ? _`<button
               type="button"
-              class=${g({
+              class=${h({
 		"lintje-nav__pin": !0,
-		"lintje-nav__pin--text": l.asText
+		"lintje-nav__pin--text": c.asText
 	})}
               aria-pressed=${i === "pinned"}
-              aria-label=${l.asText ? r : D}
+              aria-label=${c.asText ? r : D}
               title=${D}
               @click=${(t) => {
 		e.changeView({ menu: i === "pinned" ? "unpinned" : "pinned" });
@@ -442,19 +442,19 @@ function F(e, t) {
 		(!n || !k(n)) && (e.railExpanded = !1);
 	}}
             >
-              ${l.content}
+              ${c.content}
             </button>` : r}
       </div>
 
       <div class="lintje-nav__list" @scroll=${e.navScrollbar.draw}>
-        ${t.map((t, n) => c`<div
+        ${t.map((t, n) => _`<div
             class="lintje-nav__group"
             role=${t.heading ? "group" : r}
             aria-labelledby=${t.heading ? `lintje-nav-group-${n}` : r}
           >
             <!-- One element in both states, with a fixed height: the text heading when
                  expanded, a line in the same spot in the rail. -->
-            ${t.heading ? c`<p class="lintje-nav__section-heading" id=${`lintje-nav-group-${n}`}>
+            ${t.heading ? _`<p class="lintje-nav__section-heading" id=${`lintje-nav-group-${n}`}>
                   <span class="lintje-nav__section-label">${t.heading}</span>
                   <span class="lintje-nav__separator" aria-hidden="true"></span>
                 </p>` : r}
@@ -468,7 +468,7 @@ function F(e, t) {
         @pointerdown=${e.navScrollbar.grab}
       ></span>
 
-      ${n?.environment ? c`<p class="lintje-nav__environment" title=${n.environment}>
+      ${n?.environment ? _`<p class="lintje-nav__environment" title=${n.environment}>
             <!-- Both texts always in the DOM, like the headings: the short one for the rail. -->
             <span class="lintje-nav__environment-label">${n.environment}</span>
             <span class="lintje-nav__environment-short" aria-hidden="true"
@@ -476,19 +476,19 @@ function F(e, t) {
             >
           </p>` : r}
       ${ye(e, s)}
-      ${n?.user ? c`<div class="lintje-nav__footer">
+      ${n?.user ? _`<div class="lintje-nav__footer">
             <span class="lintje-nav__avatar">${n.user.initials}</span>
             <!-- Always in the DOM; the rail hides it with opacity. -->
             <span class="lintje-nav__user">
               <b>${n.user.name}</b>
-              ${n.user.role ? c`<span class="lintje-nav__role">${n.user.role}</span>` : r}
+              ${n.user.role ? _`<span class="lintje-nav__role">${n.user.role}</span>` : r}
             </span>
             ${n.logout ? be(n.logout, "lintje-nav__logout-button", s) : r}
           </div>` : r}
     </nav>
     <!-- Darkens the page while the rail lies over it expanded; purely visual. -->
-    ${o ? c`<div
-          class=${g({
+    ${o ? _`<div
+          class=${h({
 		"lintje-nav__scrim": !0,
 		"is-visible": e.railExpanded
 	})}
@@ -500,25 +500,25 @@ function ye(e, t) {
 	let n = e.data, i = n?.version ? j(n.version) : null;
 	if (n?.feedback) {
 		let e = M(n.feedback);
-		return c`<a class="lintje-nav__item lintje-nav__feedback" href=${n.feedback.href}>
-      ${_("functioneel-mail", {
+		return _`<a class="lintje-nav__item lintje-nav__feedback" href=${n.feedback.href}>
+      ${g("functioneel-mail", {
 			size: 20,
 			label: t ? void 0 : e
 		})}
-      ${t ? c`<span class="lintje-nav__label">${e}</span>` : r}
-      ${t && i ? c`<span class="lintje-nav__metric lintje-nav__version">${i}</span>` : r}
+      ${t ? _`<span class="lintje-nav__label">${e}</span>` : r}
+      ${t && i ? _`<span class="lintje-nav__metric lintje-nav__version">${i}</span>` : r}
     </a>`;
 	}
-	return i ? c`<p class="lintje-nav__version-row">
-    ${t ? c`<span class="lintje-nav__metric lintje-nav__version">${i}</span>` : r}
+	return i ? _`<p class="lintje-nav__version-row">
+    ${t ? _`<span class="lintje-nav__metric lintje-nav__version">${i}</span>` : r}
   </p>` : r;
 }
 function be(e, t, n) {
-	let i = "Afmelden", a = _("functioneel-uitloggen", { size: 18 });
-	return c`<form class="lintje-nav__logout" method="post" action=${e.href} ?hidden=${!n}>
+	let i = "Afmelden", a = g("functioneel-uitloggen", { size: 18 });
+	return _`<form class="lintje-nav__logout" method="post" action=${e.href} ?hidden=${!n}>
     <input type="hidden" name="csrf_token" value=${e.token} />
     <button type="submit" class=${t} aria-label=${i} title=${i}>
-      ${a === r ? c`<span class="lintje-nav__logout-text">${i}</span>` : a}
+      ${a === r ? _`<span class="lintje-nav__logout-text">${i}</span>` : a}
     </button>
   </form>`;
 }
@@ -542,7 +542,7 @@ var xe = [
 	}
 ];
 function I(e, t, n) {
-	return e.mobile.matches ? c`<div class="lintje-share__header">
+	return e.mobile.matches ? _`<div class="lintje-share__header">
     <h2 class="lintje-share__title" id="lintje-sheet-title">${t}</h2>
     <button
       type="button"
@@ -550,7 +550,7 @@ function I(e, t, n) {
       aria-label="${t} sluiten"
       @click=${n}
     >
-      ${_("functioneel-kruis", { size: 16 })}
+      ${g("functioneel-kruis", { size: 16 })}
     </button>
   </div>` : r;
 }
@@ -558,19 +558,19 @@ function Se(e) {
 	return [e?.pageName, e?.name].filter(Boolean).join(" – ");
 }
 function L(e) {
-	let t = _(e, { size: 16 });
-	return t === r ? c`<span class="lintje-share__gap" aria-hidden="true"></span>` : t;
+	let t = g(e, { size: 16 });
+	return t === r ? _`<span class="lintje-share__gap" aria-hidden="true"></span>` : t;
 }
 function Ce(e) {
 	let t = e.data, n = e.store.state.titleHidden;
-	return c`<header class="lintje-top-bar">
+	return _`<header class="lintje-top-bar">
     <div class="lintje-top-bar__name">
       <div class="lintje-top-bar__words">
         <!-- The page's one h1. Below 768 px this bar is display: none and the mobile header
              carries it instead. -->
-        ${t?.name ? c`<h1 class="lintje-top-bar__dashboard">${t.name}</h1>` : r}
-        ${t?.pageName ? c`<span
-              class=${g({
+        ${t?.name ? _`<h1 class="lintje-top-bar__dashboard">${t.name}</h1>` : r}
+        ${t?.pageName ? _`<span
+              class=${h({
 		"lintje-top-bar__page": !0,
 		"is-visible": n
 	})}
@@ -581,13 +581,13 @@ function Ce(e) {
     </div>
 
     <div class="lintje-top-bar__actions">
-      ${e.toolsCompact ? c`${e.renderSearch()}${e.renderNotifications()}${H(e)}` : we(e)}
+      ${e.toolsCompact ? _`${e.renderSearch()}${e.renderNotifications()}${H(e)}` : we(e)}
     </div>
   </header>`;
 }
 function we(e) {
 	let t = e.data;
-	return c`${t?.search ? c`<lintje-button
+	return _`${t?.search ? _`<lintje-button
           variant="tertiary"
           size="chrome"
           icon="functioneel-zoek"
@@ -595,7 +595,7 @@ function we(e) {
           @click=${() => e.askSearch()}
           >Zoeken <kbd class="lintje-key lintje-top-bar__key" aria-hidden="true">/</kbd></lintje-button
         >` : r}${e.renderNotifications()}
-      ${t?.view ? c`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
+      ${t?.view ? _`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
             <lintje-button
               class="lintje-view__button"
               variant="tertiary"
@@ -608,7 +608,7 @@ function we(e) {
             >
             ${e.viewOpen ? U(e, t.view) : r}
           </div>` : r}
-      ${t?.share ? c`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
+      ${t?.share ? _`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
             <lintje-button
               class="lintje-share__button"
               variant="tertiary"
@@ -633,10 +633,10 @@ function B(e, t) {
 	!n || e.mobile.matches || r.contains(n) || (r.classList.contains("lintje-view") ? e.viewOpen = !1 : e.shareOpen = !1);
 }
 function V(e, t, n, i, a) {
-	let o = _(t, { size: 20 });
-	return c`<button
+	let o = g(t, { size: 20 });
+	return _`<button
     type="button"
-    class=${g({
+    class=${h({
 		"lintje-shell__tool": !0,
 		"lintje-shell__tool--text": o === r,
 		[n]: !0
@@ -651,10 +651,10 @@ function V(e, t, n, i, a) {
 }
 function H(e) {
 	let t = e.data;
-	return c`${t?.view ? c`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
+	return _`${t?.view ? _`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
           ${V("Weergave", "functioneel-darkmode", "lintje-view__button", e.viewOpen, () => R(e))}
           ${e.viewOpen ? U(e, t.view) : r}
-        </div>` : r}${t?.share ? c`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
+        </div>` : r}${t?.share ? _`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
           ${V("Delen", "functioneel-delen", "lintje-share__button", e.shareOpen, () => z(e))}
           ${e.shareOpen ? K(e) : r}
         </div>` : r}`;
@@ -663,7 +663,7 @@ function U(e, t) {
 	let n = () => {
 		e.viewOpen = !1;
 	}, i = e.mobile.matches;
-	return c`
+	return _`
     <div class="lintje-share__scrim" @click=${n}></div>
     <div
       class="lintje-view__popover"
@@ -679,7 +679,7 @@ function U(e, t) {
           ${xe.map((n) => W(n.label, "", n.text, n.value === t.mode, () => e.changeView({ mode: n.value }), !0))}
         </div>
       </div>
-      ${t.layoutChoice ? c`<p class="lintje-share__heading">Menu</p>
+      ${t.layoutChoice ? _`<p class="lintje-share__heading">Menu</p>
               <div class="lintje-view__row">
                 <div class="lintje-toggle-group" role="group" aria-label="Plaats van het menu">
                   ${W("Menu als zijbalk", "", "Zijbalk", e.layout === "side", () => e.changeView({ layout: "side" }), !0)}
@@ -692,7 +692,7 @@ function U(e, t) {
 }
 function Te(e, t) {
 	let n = t.themes;
-	return n?.length ? c`<p class="lintje-share__heading" aria-hidden="true">Thema</p>
+	return n?.length ? _`<p class="lintje-share__heading" aria-hidden="true">Thema</p>
     <div class="lintje-view__row">
       <lintje-radio-group
         class="lintje-view__themes"
@@ -705,10 +705,10 @@ function Te(e, t) {
     </div>` : r;
 }
 function W(e, t, n, i, a, o = !1) {
-	let s = o ? r : _(t, { size: 16 });
-	return c`<button
+	let s = o ? r : g(t, { size: 16 });
+	return _`<button
     type="button"
-    class=${g({
+    class=${h({
 		"lintje-toggle-group__option": !0,
 		"lintje-toggle-group__option--text": s === r,
 		"is-active": i
@@ -729,7 +729,7 @@ function Ee(e, t = "") {
 	return n ? n + e.slice(e.indexOf(":")) : e;
 }
 function De(e, t) {
-	return c`
+	return _`
     <div class="lintje-share__scrim" @click=${t}></div>
     <div class="lintje-share__popover" role="dialog" aria-labelledby="lintje-share-phone">
       <button type="button" class="lintje-share__item lintje-share__back" @click=${() => G(e, !1)}>
@@ -754,7 +754,7 @@ function K(e) {
 	}, n = () => e.closePanel(".lintje-share__button");
 	if (e.sharePhone) return De(e, t);
 	let i = e.mobile.matches;
-	return c`
+	return _`
     <div class="lintje-share__scrim" @click=${t}></div>
     <div
       class="lintje-share__popover"
@@ -763,7 +763,7 @@ function K(e) {
       aria-label="Delen"
       tabindex="-1"
     >
-      ${i ? I(e, "Delen", t) : c`<p class="lintje-share__heading">Delen</p>`}
+      ${i ? I(e, "Delen", t) : _`<p class="lintje-share__heading">Delen</p>`}
       <button
         type="button"
         class="lintje-share__item"
@@ -804,7 +804,7 @@ function K(e) {
            "Abonneer: dagelijks om 08:00" needs a mail service, "Alle data (CSV)" an export
            of every tile. Each returns here with its action. -->
       <!-- The footer is the filter bar's "Je ziet" sentence, through the store. -->
-      ${e.store.state.summary ? c`<p class="lintje-share__footer">${e.store.state.summary}</p>` : r}
+      ${e.store.state.summary ? _`<p class="lintje-share__footer">${e.store.state.summary}</p>` : r}
     </div>
   `;
 }
@@ -812,51 +812,51 @@ function K(e) {
 //#region src/components/frame/shell/mobile-header.ts
 function Oe(e) {
 	let t = e.data, n = t?.version && !t.user ? j(t.version) : null;
-	return c`
-    ${t?.environment ? c`<p class="lintje-mobile-menu__environment">${t.environment}</p>` : r}
-    ${t?.feedback ? c`<a class="lintje-mobile-menu__item lintje-mobile-menu__feedback" href=${t.feedback.href}>
-          ${_("functioneel-mail", { size: 20 })}
+	return _`
+    ${t?.environment ? _`<p class="lintje-mobile-menu__environment">${t.environment}</p>` : r}
+    ${t?.feedback ? _`<a class="lintje-mobile-menu__item lintje-mobile-menu__feedback" href=${t.feedback.href}>
+          ${g("functioneel-mail", { size: 20 })}
           <span class="lintje-mobile-menu__label">${M(t.feedback)}</span>
-          ${n ? c`<span class="lintje-mobile-menu__version">${n}</span>` : r}
-        </a>` : n ? c`<p class="lintje-mobile-menu__item lintje-mobile-menu__feedback">
+          ${n ? _`<span class="lintje-mobile-menu__version">${n}</span>` : r}
+        </a>` : n ? _`<p class="lintje-mobile-menu__item lintje-mobile-menu__feedback">
             <span class="lintje-mobile-menu__version">${n}</span>
           </p>` : r}
   `;
 }
 function q(e, t) {
 	let n = e.data, i = e.store.state.modifiedCount, a = e.menuOpen, o = "lintje-mobile-header__word";
-	return c`<div
+	return _`<div
     class="lintje-mobile-chrome"
     tabindex="-1"
     role=${a ? "dialog" : r}
     aria-modal=${a ? "true" : r}
     aria-label=${a ? "Menu" : r}
   >
-    <header class=${g({
+    <header class=${h({
 		"lintje-mobile-header": !0,
 		"is-compact": e.headerCompact
 	})}>
-      ${e.layout === "top" ? n?.name ? c`<h1 class="lintje-mobile-header__title" title=${n.name}>${n.name}</h1>` : r : c`
+      ${e.layout === "top" ? n?.name ? _`<h1 class="lintje-mobile-header__title" title=${n.name}>${n.name}</h1>` : r : _`
               <!-- The page's one h1 below 768 px. The header draws no name — the page
                    header's kicker shows it — so the heading is there for the outline only.
                    At 768 px and up this header is display: none and the top bar has it. -->
-              ${n?.name ? c`<h1 class="visually-hidden">${n.name}</h1>` : r}
+              ${n?.name ? _`<h1 class="visually-hidden">${n.name}</h1>` : r}
               ${N(e, "lintje-mobile-header__home", 32, () => {
 		e.menuOpen = !1;
 	})}
             `}
       <div class="lintje-mobile-header__actions">
         <!-- Open, the menu is a dialog of its own: only its close button stays. -->
-        ${a ? r : c`${e.renderSearch()}${e.renderNotifications()}${e.mobile.matches ? H(e) : r}${e.store.state.hasFilters ? c`<button
+        ${a ? r : _`${e.renderSearch()}${e.renderNotifications()}${e.mobile.matches ? H(e) : r}${e.store.state.hasFilters ? _`<button
                     type="button"
                     class="lintje-mobile-header__button"
                     aria-haspopup="dialog"
                     aria-expanded=${e.store.state.sheetOpen}
-                    @click=${() => d({ sheetOpen: !0 })}
+                    @click=${() => u({ sheetOpen: !0 })}
                   >
-                    ${_("functioneel-filters", { size: 16 })}
+                    ${g("functioneel-filters", { size: 16 })}
                     <span class=${o}>Filters</span>
-                    ${i > 0 ? h({
+                    ${i > 0 ? m({
 		value: i,
 		label: `${i} aangepast`,
 		tone: "attention",
@@ -874,13 +874,13 @@ function q(e, t) {
 		e.menuOpen = !e.menuOpen;
 	}}
         >
-          ${a ? c`<span class=${o}>Sluiten</span>${_("functioneel-kruis", { size: 16 })}` : c`${_("functioneel-menu", { size: 16 })}<span class=${o}>Menu</span>`}
+          ${a ? _`<span class=${o}>Sluiten</span>${g("functioneel-kruis", { size: 16 })}` : _`${g("functioneel-menu", { size: 16 })}<span class=${o}>Menu</span>`}
         </button>
       </div>
     </header>
 
-    ${a || e.menuLeaving ? c`<div
-          class=${g({
+    ${a || e.menuLeaving ? _`<div
+          class=${h({
 		"lintje-mobile-menu": !0,
 		"is-leaving": e.menuLeaving
 	})}
@@ -891,11 +891,11 @@ function q(e, t) {
 	}}
         >
           <nav class="lintje-mobile-menu__list" aria-label="Hoofdnavigatie">
-            ${t.map((t, n) => c`<div
+            ${t.map((t, n) => _`<div
                 role=${t.heading ? "group" : r}
                 aria-labelledby=${t.heading ? `lintje-mobile-menu-group-${n}` : r}
               >
-                ${t.heading ? c`<p
+                ${t.heading ? _`<p
                         class="lintje-mobile-menu__heading"
                         id=${`lintje-mobile-menu-group-${n}`}
                       >
@@ -909,8 +909,8 @@ function q(e, t) {
   </div>`;
 }
 function ke(e, t) {
-	let n = c`
-    ${_(t.icon, {
+	let n = _`
+    ${g(t.icon, {
 		size: 20,
 		src: t.iconSrc
 	})}
@@ -918,9 +918,9 @@ function ke(e, t) {
     ${t.noAccess ? A("lintje-mobile-menu__meta") : r}
     ${S(t) || t.noAccess ? r : C(t)}
   `;
-	return S(t) ? c`<a
+	return S(t) ? _`<a
     href=${t.href}
-    class=${g({
+    class=${h({
 		"lintje-mobile-menu__item": !0,
 		"is-active": !!t.active
 	})}
@@ -929,7 +929,7 @@ function ke(e, t) {
 		o(n) && (e.menuOpen = !1, e.follow(t.href, n));
 	}}
     >${n}</a
-  >` : c`<span class="lintje-mobile-menu__item is-muted" aria-disabled="true"
+  >` : _`<span class="lintje-mobile-menu__item is-muted" aria-disabled="true"
       >${n}</span
     >`;
 }
@@ -946,13 +946,13 @@ function Q(e) {
 }
 var $ = class extends v {
 	constructor(...e) {
-		super(...e), this.layout = "top", this.openGroup = null, this.barStuck = !1, this.railExpanded = !1, this.railRefocus = !1, this.menuOpen = !1, this.menuLeaving = !1, this.shareOpen = !1, this.sharePhone = !1, this.viewOpen = !1, this.toolsCompact = !1, this.headerCompact = !1, this.hasContent = !0, this.wide = new l(this, ee), this.mobile = new l(this, s), this.submenu = new me(this), this.navScrollbar = new ve(this), this.store = new te(this), this.#e = new b(), this.#t = null, this.#n = null, this.#r = 0, this.#i = !1, this.#a = null, this.#o = [], this.#s = 0, this.#c = null, this.#l = new b(), this.#u = null, this.#d = null, this.#f = (e) => {
+		super(...e), this.layout = "top", this.openGroup = null, this.barStuck = !1, this.railExpanded = !1, this.railRefocus = !1, this.menuOpen = !1, this.menuLeaving = !1, this.shareOpen = !1, this.sharePhone = !1, this.viewOpen = !1, this.toolsCompact = !1, this.headerCompact = !1, this.hasContent = !0, this.wide = new c(this, ee), this.mobile = new c(this, s), this.submenu = new me(this), this.navScrollbar = new ve(this), this.store = new te(this), this.#e = new b(), this.#t = null, this.#n = null, this.#r = 0, this.#i = !1, this.#a = null, this.#o = [], this.#s = 0, this.#c = null, this.#l = new b(), this.#u = null, this.#d = null, this.#f = (e) => {
 			if (e.key === "Escape") {
 				if (this.#u) {
 					if (!this.#l.isTopmost()) return;
 					this.viewOpen = !1, this.shareOpen = !1;
 				} else if (this.viewOpen || this.shareOpen) {
-					if (!m(this)) return;
+					if (!p(this)) return;
 					this.#y() ? this.closePanel(this.viewOpen ? ".lintje-view__button" : ".lintje-share__button") : (this.viewOpen = !1, this.shareOpen = !1);
 				} else this.menuOpen && this.#e.isTopmost() && (this.menuOpen = !1);
 			}
@@ -1023,7 +1023,7 @@ var $ = class extends v {
 	}
 	#m() {
 		let e = this.mobile.matches && (this.viewOpen || this.shareOpen) ? this.renderRoot.querySelector(".lintje-mobile-header .lintje-view__popover, .lintje-mobile-header .lintje-share__popover") : null;
-		e && !this.#u ? (this.#u = u(), this.#l.activate(e, { focus: e.querySelector(".lintje-share__close") ?? !0 })) : e || this.#h(!0);
+		e && !this.#u ? (this.#u = l(), this.#l.activate(e, { focus: e.querySelector(".lintje-share__close") ?? !0 })) : e || this.#h(!0);
 	}
 	#h(e) {
 		this.#u && (this.#u(), this.#u = null, this.#l.deactivate(e));
@@ -1034,7 +1034,7 @@ var $ = class extends v {
 	updated(e) {
 		if (super.updated(e), e.has("data") && e.get("data") === void 0 && this.#b(), e.has("menuOpen")) {
 			if (this.menuOpen) {
-				this.#c ??= u();
+				this.#c ??= l();
 				let e = this.renderRoot.querySelector(".lintje-mobile-chrome");
 				e && this.#e.activate(e, { focus: !1 });
 			} else e.get("menuOpen") === !0 && (this.#p(), this.#e.deactivate(!1), this.renderRoot.querySelector("[aria-controls=\"lintje-mobile-menu-panel\"]")?.focus());
@@ -1043,7 +1043,7 @@ var $ = class extends v {
 	}
 	#g() {
 		if (this.#i) return;
-		let e = f() ?? document.documentElement;
+		let e = d() ?? document.documentElement;
 		this.#d && this.#d !== e && (this.#d.style.scrollPaddingTop = ""), this.#d = e;
 		let n = this.mobile.matches && this.layout === "side" ? t(this, "--h-mobile-header", 72) : t(this, "--h-topbar", 56), r = this.store.state.hasFilters ? t(this, "--h-contextbar", 48) : 0;
 		e.style.scrollPaddingTop = `${Math.round(n + r)}px`;
@@ -1092,7 +1092,7 @@ var $ = class extends v {
 		this.viewOpen = !1, this.shareOpen = !1, Array.from(this.renderRoot.querySelectorAll(e)).find((e) => e.getClientRects().length > 0)?.focus();
 	}
 	#y() {
-		return Array.from(this.renderRoot.querySelectorAll(".lintje-view__popover, .lintje-share__popover"), (e) => e.parentElement).some((e) => e !== null && p(e));
+		return Array.from(this.renderRoot.querySelectorAll(".lintje-view__popover, .lintje-share__popover"), (e) => e.parentElement).some((e) => e !== null && f(e));
 	}
 	showToast(e) {
 		this.toast = e;
@@ -1104,7 +1104,7 @@ var $ = class extends v {
 		n.focus({ preventScroll: !0 });
 		let r = this.renderRoot.querySelectorAll(".lintje-top-bar, .lintje-mobile-header"), i = this.layout === "top" ? t(this, "--h-topbar", 56) : Math.max(0, ...Array.from(r, (e) => e.getBoundingClientRect().bottom)), a = n.getBoundingClientRect().top - i;
 		if (a === 0) return;
-		let o = f();
+		let o = d();
 		o && o !== document.scrollingElement ? o.scrollBy({ top: a }) : window.scrollBy({ top: a });
 	}
 	#b() {
@@ -1112,7 +1112,7 @@ var $ = class extends v {
 		this.hasContent = Array.from(e).some((e) => e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || e.textContent?.trim()));
 	}
 	renderSearch() {
-		return this.data?.search ? c`<button
+		return this.data?.search ? _`<button
       type="button"
       class="lintje-shell__tool"
       aria-label="Zoeken"
@@ -1120,16 +1120,16 @@ var $ = class extends v {
       aria-keyshortcuts="/"
       @click=${() => this.askSearch()}
     >
-      ${_("functioneel-zoek", { size: 20 })}
+      ${g("functioneel-zoek", { size: 20 })}
     </button>` : r;
 	}
 	renderNotifications() {
 		let e = this.data?.notifications;
-		return e ? c`<lintje-notifications .items=${e}></lintje-notifications>` : r;
+		return e ? _`<lintje-notifications .items=${e}></lintje-notifications>` : r;
 	}
 	renderUserMenu(e) {
 		let t = this.data;
-		return t?.user ? c`<lintje-user-menu
+		return t?.user ? _`<lintje-user-menu
       class=${e ? "lintje-shell__sheet-user" : "lintje-shell__user"}
       ?inline=${e}
       .user=${t.user}
@@ -1140,7 +1140,7 @@ var $ = class extends v {
     ></lintje-user-menu>` : r;
 	}
 	renderSkipLink() {
-		return c`<a
+		return _`<a
       class="lintje-shell__skip focus-inset"
       href="#${Y}"
       @click=${(e) => this.skipToContent(e)}
@@ -1162,18 +1162,18 @@ var $ = class extends v {
 	}
 	renderNavEnd(e) {
 		let t = e.feedback;
-		return c`${this.renderSearch()}${this.renderNotifications()}${H(this)}${t ? c`<a
+		return _`${this.renderSearch()}${this.renderNotifications()}${H(this)}${t ? _`<a
             class="lintje-shell__tool"
             href=${t.href}
             aria-label=${M(t)}
             title=${M(t)}
-            >${_("communicatie-tekstballonnen-met-vraagteken", { size: 20 })}</a
+            >${g("communicatie-tekstballonnen-met-vraagteken", { size: 20 })}</a
           >` : r}${this.renderUserMenu(!1)}`;
 	}
 	renderTop(e, t) {
-		return c`${this.renderLogo(x.desktop)}
+		return _`${this.renderLogo(x.desktop)}
       <div class="lintje-shell__sentinel" aria-hidden="true"></div>
-      <div class=${g({
+      <div class=${h({
 			"lintje-shell__nav": !0,
 			"is-stuck": this.barStuck
 		})}>
@@ -1184,16 +1184,16 @@ var $ = class extends v {
 			collapsed: this.submenu.collapsed,
 			onNavigate: (e, t) => this.follow(e.href, t),
 			onOpen: (e) => this.openGroup = e,
-			start: e.name ? c`<h1 class="lintje-shell__name" title=${e.name}>${e.name}</h1>` : r,
+			start: e.name ? _`<h1 class="lintje-shell__name" title=${e.name}>${e.name}</h1>` : r,
 			end: this.renderNavEnd(e)
 		})}
       </div>
       ${he(this.openGroup !== null)}`;
 	}
 	renderTopPhone(e) {
-		return c`${this.renderLogo(x.phone)}
+		return _`${this.renderLogo(x.phone)}
       <div class="lintje-shell__sentinel" aria-hidden="true"></div>
-      <div class=${g({
+      <div class=${h({
 			"lintje-shell__mobile-bar": !0,
 			"is-stuck": this.barStuck
 		})}>
@@ -1202,9 +1202,9 @@ var $ = class extends v {
 	}
 	renderMain() {
 		let e = () => this.#b();
-		return c`<main
+		return _`<main
       id=${Y}
-      class=${g({
+      class=${h({
 			"lintje-shell__main": !0,
 			"is-bare": !this.hasContent
 		})}
@@ -1218,7 +1218,7 @@ var $ = class extends v {
     </main>`;
 	}
 	renderToast() {
-		return this.toast ? c`<lintje-toast
+		return this.toast ? _`<lintje-toast
           kind="ok"
           @lintje-close=${(e) => {
 			e.stopPropagation(), this.toast = null;
@@ -1230,8 +1230,8 @@ var $ = class extends v {
 		let e = this.data;
 		if (!e) return r;
 		let t = Q(e.navigation ?? []);
-		return this.layout === "top" ? c`<div
-        class=${g({
+		return this.layout === "top" ? _`<div
+        class=${h({
 			"lintje-shell": !0,
 			"lintje-shell--top": !0,
 			"is-nested": this.#i,
@@ -1241,8 +1241,8 @@ var $ = class extends v {
         ${this.renderSkipLink()}
         ${this.mobile.matches ? this.renderTopPhone(t) : this.renderTop(e, t)}
         ${this.renderMain()} <slot name="footer"></slot> ${this.renderToast()}
-      </div>` : c`<div
-      class=${g({
+      </div>` : _`<div
+      class=${h({
 			"lintje-shell": !0,
 			"lintje-shell--side": !0,
 			"is-unpinned": e.menu === "unpinned",