lintje 0.1.1

package/dist-elements/tag/shell.js

@@ -0,0 +1,1264 @@
+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 "./logo.js";
+import { n as y, r as re, t as b } from "../chunks/focus-trap-w3vCamJ6.js";
+import "./toast.js";
+import "./qr-code.js";
+import { t as ie } from "../chunks/dialog-close-u75fVEw4.js";
+import "./notifications.js";
+import "./user-menu.js";
+import "./radio-group.js";
+import { t as ae } from "../chunks/key-CuuOw1KE.js";
+//#region src/components/frame/shell/header.ts
+var x = {
+	desktop: 48,
+	phone: 40
+};
+function oe(e) {
+	let { logo: t, emblem: n, ribbon: i, environment: a, home: s } = e, l = c`<lintje-logo
+    full
+    width=${i}
+    src=${t ?? r}
+    name=${n?.name ?? r}
+    alt=${n?.label ?? r}
+    byline=${n?.byline ?? r}
+  ></lintje-logo>`;
+	return c`<div class="lintje-logobar">
+    ${s ? c`<a
+          class="lintje-logobar__home focus-inset"
+          href=${s.href}
+          aria-label="Naar de startpagina"
+          title="Naar de startpagina"
+          @click=${(e) => {
+		o(e) && s.onNavigate(e);
+	}}
+          >${l}</a
+        >` : l}
+    ${a ? c`<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
+          >
+        </p>` : r}
+  </div>`;
+}
+var S = (e) => !!e.href && !e.noAccess;
+function C(e) {
+	return c`<span class="visually-hidden"
+    >${e.noAccess ? ", geen toegang" : ", niet beschikbaar"}</span
+  >`;
+}
+function w(e, t, n) {
+	o(n) && (e.onOpen(null), e.onNavigate(t, n));
+}
+function se(e) {
+	let t = e.badge;
+	return t ? h({
+		value: t.value,
+		variant: t.tone === "new" ? "label" : t.tone === "action" ? "unread" : "count",
+		label: t.label,
+		className: "lintje-navbar__badge"
+	}) : r;
+}
+function ce(e, t) {
+	if (!S(t)) return c`<span class="lintje-navbar__entry is-unavailable" aria-disabled="true"
+      >${t.label}${C(t)}</span
+    >`;
+	let n = !!t.active;
+	return c`<a
+    class=${g({
+		"lintje-navbar__entry": !0,
+		"focus-inset": !0,
+		"is-active": n
+	})}
+    href=${t.href}
+    aria-current=${n ? "page" : r}
+    @click=${(n) => w(e, t, n)}
+    ><span class="lintje-navbar__label">${t.label}</span></a
+  >`;
+}
+function le(e, t) {
+	let n = c`${_(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"
+              ><span class="lintje-navbar__metric-value">${t.metric.value}</span> ${t.metric.label}</span
+            >` : r}
+    </span>
+    ${t.noAccess ? _("gebruiksvoorwerpen-hangslot-dicht", {
+		size: 16,
+		label: "Geen toegang"
+	}) : S(t) ? r : C(t)}
+    ${se(t)}`;
+	if (!S(t)) return c`<span
+      class=${g({
+		"lintje-navbar__page": !0,
+		"is-unavailable": !0,
+		"is-no-access": !!t.noAccess
+	})}
+      aria-disabled="true"
+      >${n}</span
+    >`;
+	let i = !!t.active;
+	return c`<a
+    class=${g({
+		"lintje-navbar__page": !0,
+		"is-active": i
+	})}
+    href=${t.href}
+    aria-current=${i ? "page" : r}
+    @click=${(n) => w(e, t, n)}
+    >${n}</a
+  >`;
+}
+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">
+    <button
+      type="button"
+      id=${d}
+      class=${g({
+		"lintje-navbar__entry": !0,
+		"lintje-navbar__entry--group": !0,
+		"focus-inset": !0,
+		"is-active": a,
+		"is-open": l,
+		...s
+	})}
+      aria-expanded=${String(l)}
+      aria-controls=${n}
+      @click=${(n) => {
+		e.onOpen(l && (u || n.detail === 0) ? null : t);
+	}}
+      @mouseenter=${u ? 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", {
+		size: 16,
+		rotate: l ? 180 : void 0
+	})}`}
+    </button>
+    ${l ? c`<div id=${n} class="lintje-navbar__submenu">${o(d)}</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>`)}
+  </ul>`;
+}
+var ue = (e) => e.some((e) => S(e) && !!e.active);
+function de(e, t, n) {
+	return T(e, n, `${e.id}-submenu-${n}`, t.heading ?? "", ue(t.items), (n) => E(e, t.items, 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}
+      ${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>
+          ${E(e, n.items, a)}`;
+	})}`, { "lintje-navbar__entry--menu": !0 });
+}
+function pe(e) {
+	let t = !!e.collapsed;
+	return c`<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({
+		"lintje-navbar__list": !0,
+		"is-hidden": t
+	})}
+          ?inert=${t}
+          aria-hidden=${t ? "true" : r}
+        >
+          ${e.groups.map((t, n) => t.heading ? de(e, t, n) : t.items.map((t) => ce(e, t)))}
+        </div>
+        ${t ? fe(e) : r}
+      </nav>
+    </div>
+    ${e.end ? c`<div class="lintje-navbar__end">${e.end}</div>` : r}
+  </div>`;
+}
+var me = class {
+	#e;
+	#t;
+	#n;
+	constructor(e) {
+		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;
+			this.host.openGroup = null, i && n?.focus();
+		}, this.#a = (e) => {
+			if (this.host.openGroup === null) return;
+			let t = this.#r;
+			t && e.composedPath().includes(t) || (this.host.openGroup = null);
+		}, this.#o = (e) => {
+			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);
+	}
+	get #r() {
+		return this.host.renderRoot.querySelector(".lintje-navbar");
+	}
+	#i;
+	#a;
+	#o;
+	hostConnected() {
+		document.addEventListener("keydown", this.#i), document.addEventListener("click", this.#a), this.host.renderRoot.addEventListener("focusout", this.#o);
+	}
+	hostDisconnected() {
+		document.removeEventListener("keydown", this.#i), document.removeEventListener("click", this.#a), this.host.renderRoot.removeEventListener("focusout", this.#o), this.#t?.disconnect(), this.#t = null, this.#n = [];
+	}
+	hostUpdate() {
+		this.#e.matches && this.host.openGroup !== null && (this.host.openGroup = null);
+	}
+	hostUpdated() {
+		this.measure();
+	}
+	measure() {
+		let e = this.host.renderRoot, t = e.querySelector(".lintje-navbar__entries"), n = e.querySelector(".lintje-navbar__list");
+		this.#s([t, n].filter((e) => e !== null));
+		let r = this.#r;
+		if (r && this.host.openGroup !== null) {
+			let e = Math.max(0, window.innerHeight - r.getBoundingClientRect().bottom);
+			r.style.setProperty("--lintje-navbar-room", `${Math.floor(e)}px`);
+		}
+		if (!t || !n) return;
+		let i = n.getBoundingClientRect().width;
+		if (!i) return;
+		let a = i > t.getBoundingClientRect().width + .5;
+		a !== this.collapsed && (this.collapsed = a, this.host.openGroup = null, this.host.requestUpdate());
+	}
+	#s(e) {
+		if (typeof ResizeObserver < "u" && !(e.length === this.#n.length && e.every((e, t) => e === this.#n[t]))) {
+			this.#t ??= new ResizeObserver(() => this.measure()), this.#t.disconnect();
+			for (let t of e) this.#t.observe(t);
+			this.#n = e;
+		}
+	}
+};
+function he(e) {
+	return e ? c`<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 });
+	return t === r ? {
+		content: "Vastzetten",
+		asText: !0
+	} : {
+		content: t,
+		asText: !1
+	};
+}
+function O(e, t) {
+	try {
+		return e?.matches(t) ?? !1;
+	} catch {
+		return !1;
+	}
+}
+var k = (e) => p(e) && O(i(), ":focus-visible");
+function _e(e, t) {
+	return {
+		mouseenter: () => {
+			t && (e.railExpanded = !0);
+		},
+		mouseleave: (t) => {
+			k(t.currentTarget) || (e.railExpanded = !1);
+		},
+		focusin: () => {
+			e.railRefocus ? e.railRefocus = !1 : t && (e.railExpanded = !0);
+		},
+		focusout: (t) => {
+			let n = t.currentTarget, r = t.relatedTarget;
+			r instanceof Node && n.contains(r) || O(n, ":hover") || (e.railExpanded = !1);
+		},
+		keydown: async (n) => {
+			if (n.key !== "Escape" || !t || !e.railExpanded) return;
+			let r = n.currentTarget, a = i(), o = re(r), s = a ? o.indexOf(a) : -1, c = (e) => !!e.closest(".lintje-nav__pin, .lintje-nav__logout");
+			if (e.railExpanded = !1, s < 0 || !c(o[s])) return;
+			let l = (e) => !c(e), u = o.slice(0, s).reverse().find(l) ?? o.slice(s + 1).find(l);
+			await e.updateComplete, u?.isConnected && (e.railRefocus = !0, y(u).focus());
+		}
+	};
+}
+var ve = class {
+	#e;
+	#t;
+	#n;
+	constructor(e) {
+		this.#t = null, this.#n = null, this.draw = () => {
+			let e = this.#r, n = this.#e.renderRoot.querySelector(".lintje-nav__thumb");
+			if (this.#i(e), !e || !n) return;
+			let r = e.clientHeight, i = e.scrollHeight;
+			if (i <= r + 1) {
+				n.style.height = "0px", n.style.transform = "";
+				return;
+			}
+			let a = Math.max(t(this.#e, "--space-8", 32), Math.round(r * r / i)), o = e.offsetTop + Math.round(e.scrollTop / (i - r) * (r - a));
+			n.style.height = `${a}px`, n.style.transform = `translateY(${o}px)`;
+		}, this.grab = (e) => {
+			let t = e.currentTarget, n = this.#r;
+			if (!n || e.button !== 0) return;
+			let r = n.clientHeight - t.offsetHeight;
+			if (r <= 0) return;
+			let i = (n.scrollHeight - n.clientHeight) / r, a = e.clientY, o = n.scrollTop;
+			e.preventDefault();
+			try {
+				t.setPointerCapture(e.pointerId);
+			} catch {}
+			t.classList.add("is-dragging");
+			let s = (e) => {
+				n.scrollTop = o + (e.clientY - a) * i;
+			}, c = () => {
+				t.classList.remove("is-dragging"), t.removeEventListener("pointermove", s), t.removeEventListener("pointerup", c), t.removeEventListener("pointercancel", c);
+			};
+			t.addEventListener("pointermove", s), t.addEventListener("pointerup", c), t.addEventListener("pointercancel", c);
+		}, this.#e = e, e.addController(this);
+	}
+	get #r() {
+		return this.#e.renderRoot.querySelector(".lintje-nav__list");
+	}
+	hostUpdated() {
+		this.draw();
+	}
+	hostDisconnected() {
+		this.#t?.disconnect(), this.#t = null, this.#n = null;
+	}
+	#i(e) {
+		e !== this.#n && typeof ResizeObserver < "u" && (this.#t ??= new ResizeObserver(() => this.draw()), this.#t.disconnect(), e && this.#t.observe(e), this.#n = e);
+	}
+};
+function A(e) {
+	let t = _("gebruiksvoorwerpen-hangslot-dicht", {
+		size: 16,
+		label: "Geen toegang"
+	});
+	return t === r ? c`<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
+    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}
+    class=${t}
+    aria-label="Naar de startpagina"
+    title="Naar de startpagina"
+    @click=${(t) => {
+		o(t) && (i?.(), e.follow(l, t));
+	}}
+    >${s}</a
+  >` : c`<span class=${t}>${s}</span>`;
+}
+function P(e, t, n) {
+	let i = S(t), a = !i, s = c`
+    ${_(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}
+    ${t.noAccess && n ? A("lintje-nav__metric") : r}
+    ${!i && !(t.noAccess && n) ? C(t) : r}
+    ${t.badge ? h({
+		value: t.badge.value,
+		variant: t.badge.tone === "new" ? "label" : "unread",
+		surface: t.badge.tone === "action" && !a ? void 0 : "nav",
+		muted: a,
+		label: t.badge.label,
+		className: `lintje-nav__badge lintje-nav__badge--${t.badge.tone}`
+	}) : r}
+  `;
+	return i ? c`<a
+      href=${t.href}
+      class=${g({
+		"lintje-nav__item": !0,
+		"is-active": !!t.active
+	})}
+      aria-current=${t.active ? "page" : r}
+      @click=${(n) => {
+		o(n) && e.follow(t.href, n);
+	}}
+      >${s}</a
+    >` : c`<span
+    class=${g({
+		"lintje-nav__item": !0,
+		"is-no-page": !t.noAccess,
+		"is-no-access": !!t.noAccess
+	})}
+    aria-disabled="true"
+    title=${n ? r : t.label}
+    >${s}</span
+  >`;
+}
+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`
+    <nav
+      class=${g({
+		"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}
+    >
+      <div class="lintje-nav__header">
+        ${N(e, "lintje-nav__home", 44)}
+        ${s && a ? c`<button
+              type="button"
+              class=${g({
+		"lintje-nav__pin": !0,
+		"lintje-nav__pin--text": l.asText
+	})}
+              aria-pressed=${i === "pinned"}
+              aria-label=${l.asText ? r : D}
+              title=${D}
+              @click=${(t) => {
+		e.changeView({ menu: i === "pinned" ? "unpinned" : "pinned" });
+		let n = t.currentTarget.closest(".lintje-nav");
+		(!n || !k(n)) && (e.railExpanded = !1);
+	}}
+            >
+              ${l.content}
+            </button>` : r}
+      </div>
+
+      <div class="lintje-nav__list" @scroll=${e.navScrollbar.draw}>
+        ${t.map((t, n) => c`<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}`}>
+                  <span class="lintje-nav__section-label">${t.heading}</span>
+                  <span class="lintje-nav__separator" aria-hidden="true"></span>
+                </p>` : r}
+            ${t.items.map((t) => P(e, t, s))}
+          </div>`)}
+      </div>
+      <!-- The list's scrollbar, right after it: its focus shows the thumb. -->
+      <span
+        class="lintje-nav__thumb"
+        aria-hidden="true"
+        @pointerdown=${e.navScrollbar.grab}
+      ></span>
+
+      ${n?.environment ? c`<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"
+              >${n.environment.slice(0, 3)}</span
+            >
+          </p>` : r}
+      ${ye(e, s)}
+      ${n?.user ? c`<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}
+            </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({
+		"lintje-nav__scrim": !0,
+		"is-visible": e.railExpanded
+	})}
+          aria-hidden="true"
+        ></div>` : r}
+  `;
+}
+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", {
+			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}
+    </a>`;
+	}
+	return i ? c`<p class="lintje-nav__version-row">
+    ${t ? c`<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}>
+    <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}
+    </button>
+  </form>`;
+}
+//#endregion
+//#region src/components/frame/shell/top-bar.ts
+var xe = [
+	{
+		value: "system",
+		text: "Systeem",
+		label: "Systeemweergave"
+	},
+	{
+		value: "light",
+		text: "Licht",
+		label: "Lichte modus"
+	},
+	{
+		value: "dark",
+		text: "Donker",
+		label: "Donkere modus"
+	}
+];
+function I(e, t, n) {
+	return e.mobile.matches ? c`<div class="lintje-share__header">
+    <h2 class="lintje-share__title" id="lintje-sheet-title">${t}</h2>
+    <button
+      type="button"
+      class="lintje-dialog-close lintje-share__close"
+      aria-label="${t} sluiten"
+      @click=${n}
+    >
+      ${_("functioneel-kruis", { size: 16 })}
+    </button>
+  </div>` : r;
+}
+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;
+}
+function Ce(e) {
+	let t = e.data, n = e.store.state.titleHidden;
+	return c`<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({
+		"lintje-top-bar__page": !0,
+		"is-visible": n
+	})}
+              aria-hidden=${!n}
+              >› ${t.pageName}</span
+            >` : r}
+      </div>
+    </div>
+
+    <div class="lintje-top-bar__actions">
+      ${e.toolsCompact ? c`${e.renderSearch()}${e.renderNotifications()}${H(e)}` : we(e)}
+    </div>
+  </header>`;
+}
+function we(e) {
+	let t = e.data;
+	return c`${t?.search ? c`<lintje-button
+          variant="tertiary"
+          size="chrome"
+          icon="functioneel-zoek"
+          keyshortcuts="/"
+          @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)}>
+            <lintje-button
+              class="lintje-view__button"
+              variant="tertiary"
+              size="chrome"
+              icon="functioneel-darkmode"
+              icon-right="functioneel-delta-omlaag"
+              .expanded=${e.viewOpen}
+              @click=${() => R(e)}
+              >Weergave</lintje-button
+            >
+            ${e.viewOpen ? U(e, t.view) : r}
+          </div>` : r}
+      ${t?.share ? c`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
+            <lintje-button
+              class="lintje-share__button"
+              variant="tertiary"
+              size="chrome"
+              icon="functioneel-delen"
+              icon-right="functioneel-delta-omlaag"
+              .expanded=${e.shareOpen}
+              @click=${() => z(e)}
+              >Delen</lintje-button
+            >
+            ${e.shareOpen ? K(e) : r}
+          </div>` : r}`;
+}
+function R(e) {
+	e.viewOpen = !e.viewOpen, e.shareOpen = !1, e.openGroup = null;
+}
+function z(e) {
+	e.shareOpen = !e.shareOpen, e.viewOpen = !1, e.openGroup = null;
+}
+function B(e, t) {
+	let n = t.relatedTarget, r = t.currentTarget;
+	!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
+    type="button"
+    class=${g({
+		"lintje-shell__tool": !0,
+		"lintje-shell__tool--text": o === r,
+		[n]: !0
+	})}
+    aria-label=${e}
+    title=${e}
+    aria-expanded=${i}
+    @click=${a}
+  >
+    ${o === r ? e : o}
+  </button>`;
+}
+function H(e) {
+	let t = e.data;
+	return c`${t?.view ? c`<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)}>
+          ${V("Delen", "functioneel-delen", "lintje-share__button", e.shareOpen, () => z(e))}
+          ${e.shareOpen ? K(e) : r}
+        </div>` : r}`;
+}
+function U(e, t) {
+	let n = () => {
+		e.viewOpen = !1;
+	}, i = e.mobile.matches;
+	return c`
+    <div class="lintje-share__scrim" @click=${n}></div>
+    <div
+      class="lintje-view__popover"
+      role=${i ? "dialog" : "group"}
+      aria-modal=${i ? "true" : r}
+      aria-label="Weergave"
+      tabindex="-1"
+    >
+      ${I(e, "Weergave", n)}
+      <p class="lintje-share__heading">Licht of donker</p>
+      <div class="lintje-view__row">
+        <div class="lintje-toggle-group" role="group" aria-label="Systeem, licht of donker">
+          ${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>
+              <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)}
+                  ${W("Menu boven", "", "Boven", e.layout === "top", () => e.changeView({ layout: "top" }), !0)}
+                </div>
+              </div>` : r}
+      ${Te(e, t)}
+    </div>
+  `;
+}
+function Te(e, t) {
+	let n = t.themes;
+	return n?.length ? c`<p class="lintje-share__heading" aria-hidden="true">Thema</p>
+    <div class="lintje-view__row">
+      <lintje-radio-group
+        class="lintje-view__themes"
+        label="Thema"
+        hide-label
+        .options=${n}
+        .value=${t.theme ?? n[0].value}
+        @lintje-change=${(t) => e.changeView({ theme: t.detail })}
+      ></lintje-radio-group>
+    </div>` : r;
+}
+function W(e, t, n, i, a, o = !1) {
+	let s = o ? r : _(t, { size: 16 });
+	return c`<button
+    type="button"
+    class=${g({
+		"lintje-toggle-group__option": !0,
+		"lintje-toggle-group__option--text": s === r,
+		"is-active": i
+	})}
+    aria-pressed=${i}
+    aria-label=${e}
+    title=${e}
+    @click=${a}
+  >
+    ${s === r ? n : s}
+  </button>`;
+}
+function G(e, t) {
+	e.sharePhone = t, e.updateComplete.then(() => e.renderRoot.querySelector(t ? ".lintje-share__back" : ".lintje-share__phone")?.focus());
+}
+function Ee(e, t = "") {
+	let n = t.replace(/:(\/\/)?$/, "");
+	return n ? n + e.slice(e.indexOf(":")) : e;
+}
+function De(e, t) {
+	return c`
+    <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)}>
+        ${L("functioneel-terug")}Terug
+      </button>
+      <p class="lintje-share__heading" id="lintje-share-phone">Open op mijn telefoon</p>
+      <div class="lintje-share__qr">
+        <p class="lintje-share__hint">Scan de code met de camera van je telefoon.</p>
+        <lintje-qr-code
+          class="lintje-share__code"
+          label="QR-code naar deze weergave"
+          src=${e.data?.qrCode ?? ""}
+          value=${Ee(window.location.href, e.data?.qrScheme)}
+        ></lintje-qr-code>
+      </div>
+    </div>
+  `;
+}
+function K(e) {
+	let t = () => {
+		e.shareOpen = !1;
+	}, n = () => e.closePanel(".lintje-share__button");
+	if (e.sharePhone) return De(e, t);
+	let i = e.mobile.matches;
+	return c`
+    <div class="lintje-share__scrim" @click=${t}></div>
+    <div
+      class="lintje-share__popover"
+      role=${i ? "dialog" : "group"}
+      aria-modal=${i ? "true" : r}
+      aria-label="Delen"
+      tabindex="-1"
+    >
+      ${i ? I(e, "Delen", t) : c`<p class="lintje-share__heading">Delen</p>`}
+      <button
+        type="button"
+        class="lintje-share__item"
+        @click=${() => {
+		navigator.clipboard?.writeText(window.location.href), e.showToast("Link naar deze weergave gekopieerd"), n();
+	}}
+      >
+        ${L("functioneel-externe-link")}Link naar deze weergave
+      </button>
+      <button
+        type="button"
+        class="lintje-share__item"
+        @click=${() => {
+		let t = encodeURIComponent(Se(e.data) || document.title), r = encodeURIComponent(window.location.href);
+		window.location.href = `mailto:?subject=${t}&body=${r}`, n();
+	}}
+      >
+        ${L("functioneel-mail")}Verstuur als e-mail
+      </button>
+      <p class="lintje-share__heading">Exporteren</p>
+      <button
+        type="button"
+        class="lintje-share__item"
+        @click=${() => {
+		n(), requestAnimationFrame(() => window.print());
+	}}
+      >
+        ${L("functioneel-printer")}Afdrukken of opslaan als PDF
+      </button>
+      <button
+        type="button"
+        class="lintje-share__item lintje-share__phone"
+        @click=${() => G(e, !0)}
+      >
+        ${L("functioneel-smartphone")}Open op mijn telefoon
+      </button>
+      <!-- Drawn in the design, not built, so not shown (owner, 18 Sep: no dead buttons):
+           "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}
+    </div>
+  `;
+}
+//#endregion
+//#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 })}
+          <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">
+            <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
+    class="lintje-mobile-chrome"
+    tabindex="-1"
+    role=${a ? "dialog" : r}
+    aria-modal=${a ? "true" : r}
+    aria-label=${a ? "Menu" : r}
+  >
+    <header class=${g({
+		"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`
+              <!-- 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(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
+                    type="button"
+                    class="lintje-mobile-header__button"
+                    aria-haspopup="dialog"
+                    aria-expanded=${e.store.state.sheetOpen}
+                    @click=${() => d({ sheetOpen: !0 })}
+                  >
+                    ${_("functioneel-filters", { size: 16 })}
+                    <span class=${o}>Filters</span>
+                    ${i > 0 ? h({
+		value: i,
+		label: `${i} aangepast`,
+		tone: "attention",
+		className: "lintje-mobile-header__badge"
+	}) : r}
+                  </button>` : r}`}
+        <!-- One button in both states, so opening the menu leaves the focus
+             where it is: only the label and the glyph change places. -->
+        <button
+          type="button"
+          class="lintje-mobile-header__button"
+          aria-expanded=${a}
+          aria-controls="lintje-mobile-menu-panel"
+          @click=${() => {
+		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>`}
+        </button>
+      </div>
+    </header>
+
+    ${a || e.menuLeaving ? c`<div
+          class=${g({
+		"lintje-mobile-menu": !0,
+		"is-leaving": e.menuLeaving
+	})}
+          id="lintje-mobile-menu-panel"
+          ?inert=${e.menuLeaving}
+          @animationend=${(t) => {
+		t.target === t.currentTarget && e.menuLeaving && e.menuLeft();
+	}}
+        >
+          <nav class="lintje-mobile-menu__list" aria-label="Hoofdnavigatie">
+            ${t.map((t, n) => c`<div
+                role=${t.heading ? "group" : r}
+                aria-labelledby=${t.heading ? `lintje-mobile-menu-group-${n}` : r}
+              >
+                ${t.heading ? c`<p
+                        class="lintje-mobile-menu__heading"
+                        id=${`lintje-mobile-menu-group-${n}`}
+                      >
+                        ${t.heading}
+                      </p>` : r}
+                ${t.items.map((t) => ke(e, t))}
+              </div>`)}
+          </nav>
+          ${Oe(e)} ${e.renderUserMenu(!0)}
+        </div>` : r}
+  </div>`;
+}
+function ke(e, t) {
+	let n = c`
+    ${_(t.icon, {
+		size: 20,
+		src: t.iconSrc
+	})}
+    <span class="lintje-mobile-menu__label">${t.label}</span>
+    ${t.noAccess ? A("lintje-mobile-menu__meta") : r}
+    ${S(t) || t.noAccess ? r : C(t)}
+  `;
+	return S(t) ? c`<a
+    href=${t.href}
+    class=${g({
+		"lintje-mobile-menu__item": !0,
+		"is-active": !!t.active
+	})}
+    aria-current=${t.active ? "page" : r}
+    @click=${(n) => {
+		o(n) && (e.menuOpen = !1, e.follow(t.href, n));
+	}}
+    >${n}</a
+  >` : c`<span class="lintje-mobile-menu__item is-muted" aria-disabled="true"
+      >${n}</span
+    >`;
+}
+//#endregion
+//#region src/components/frame/shell/header.css?inline
+var Ae = "/* Header of the top layout, drawn by `header.ts` inside the caller's shadow root. */\n\n/* The logo bar sits above the veil, so an open submenu does not dim it. A box wider than a narrow\n   phone is cut at both sides alike, which keeps the ribbon centred. */\n.lintje-logobar {\n  position: relative;\n  z-index: 31;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  min-height: var(--h-logobar);\n  overflow: hidden;\n  background: var(--color-logobar-bg);\n  color: var(--color-logobar-text);\n}\n.lintje-logobar__home { display: block; flex: none; color: inherit; }\n/* The logo link's ring is drawn inside its box (`focus-inset`): the bar cuts what stands outside\n   its top edge. */\n\n/* The environment outside production: the accent, not a status. */\n.lintje-logobar__environment {\n  position: absolute;\n  top: var(--space-6);\n  right: calc(var(--page-pad-x) + var(--page-gutter));\n  height: var(--h-chip);\n  margin: 0;\n  padding: 0 var(--space-3);\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  line-height: var(--h-chip);\n  white-space: nowrap;\n}\n.lintje-logobar__environment-short { display: none; }\n/* On a phone the organisation's name reaches the right edge: the block shrinks to three letters above it. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment {\n  top: var(--space-2);\n  right: var(--space-4);\n  height: var(--h-chip-field);\n  line-height: var(--h-chip-field);\n}\n/* The full name stays for a screen reader; the three letters are only seen. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-label {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-short { display: inline; }\n\n/* The bar is the submenu's positioning context, which is why a group is not one. Hover, active\n   and edge are set on the bar for what inherits, and on each element at its end, because an\n   element with a shadow root declares the tokens again on its own host. */\n.lintje-navbar,\n.lintje-navbar__end > * {\n  --color-nav-hover: var(--color-navbar-hover);\n  --color-nav-active: var(--color-navbar-active);\n  --color-nav-active-edge: var(--color-navbar-active-edge);\n}\n.lintje-navbar__end > * { --lintje-tool-height: var(--h-navbar); }\n/* The colour runs to the edges; the content keeps to `--page-gutter`. */\n.lintje-navbar {\n  position: relative;\n  z-index: 30;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  gap: 0 var(--space-4);\n  height: var(--h-navbar);\n  padding: 0 calc(var(--space-3) + var(--page-gutter)) 0\n    calc(var(--page-pad-x) - var(--space-5) + var(--page-gutter));\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n}\n/* Both widths are measured (`SubmenuController`): neither may depend on whether the entries or\n   \"Menu\" stand there. */\n.lintje-navbar__start { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; }\n.lintje-navbar__entries { display: flex; flex: 1 1 0; align-items: stretch; min-width: 0; }\n.lintje-navbar__list { display: flex; flex: none; align-items: stretch; width: max-content; }\n/* Hanging from the bar's end, the overflow falls off the left, where the page gains no scroll. */\n.lintje-navbar__list.is-hidden {\n  position: absolute;\n  top: 0;\n  right: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-navbar__group { display: flex; }\n.lintje-navbar__end { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n/* The orange ring disappears on the theme's fill, so the bar takes `--color-focus-on-theme`. The\n   open entry and the submenu stand on the page's surface and keep the standard ring. */\n.lintje-navbar :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n.lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: var(--color-focus); }\n\n/* The edge is always there on both sides so the word stays centred; transparent until active. */\n.lintje-navbar__entry {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  height: var(--h-navbar);\n  padding: 0 var(--space-5);\n  border-top: var(--nav-edge) solid transparent;\n  border-bottom: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font: var(--text-body);\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__entry:hover:not(.is-unavailable) { background: var(--color-navbar-hover); }\n.lintje-navbar__entry:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n/* Not bold: the bold cut sets narrower and reads as another size beside its neighbours. */\n.lintje-navbar__entry.is-active {\n  background: var(--color-navbar-active);\n  border-bottom-color: var(--color-navbar-active-edge);\n  color: var(--color-nav-active-text);\n}\n.lintje-navbar__entry.is-open,\n.lintje-navbar__entry.is-open:hover {\n  background: var(--color-bg-surface);\n  border-bottom-color: transparent;\n  color: var(--color-navbar-open-text);\n}\n.lintje-navbar__entry.is-open .lintje-navbar__label { text-decoration: none; }\n.lintje-navbar__entry.is-unavailable { color: var(--color-nav-disabled); cursor: default; }\n\n/* The shadow falls down only: `clip-path` cuts what would fall on the bar, so the open entry and\n   the panel stay one shape. `--lintje-navbar-room` is measured. */\n.lintje-navbar__submenu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  padding: var(--space-8) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-bottom: 1px solid var(--color-border-default);\n  box-shadow: var(--shadow-popover);\n  clip-path: inset(0 0 -32px 0);\n  max-height: var(--lintje-navbar-room, calc(100dvh - var(--h-navbar)));\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.lintje-navbar__heading {\n  margin: var(--space-6) 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n}\n.lintje-navbar__heading:first-child { margin-top: 0; }\n.lintje-navbar__pages {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  animation:\n    lintje-fade-in var(--dur-popover) linear,\n    lintje-drop-in var(--dur-submenu) ease;\n}\n@media (max-width: 1023px) {\n  .lintje-navbar__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n.lintje-navbar__item { display: flex; }\n\n/* The 1 px edge is always there, so hover moves nothing. */\n.lintje-navbar__page {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 4rem;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid transparent;\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  text-decoration: none;\n  transition: border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__page-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }\n.lintje-navbar__page .lintje-navbar__label { font-weight: 700; }\n.lintje-navbar__metric { color: var(--color-text-muted); font: var(--text-small); }\n.lintje-navbar__metric-value { color: var(--color-text-primary); }\n.lintje-navbar__page:hover:not(.is-unavailable) { border-color: var(--color-accent-line); }\n.lintje-navbar__page:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n.lintje-navbar__page.is-active {\n  box-shadow: inset var(--nav-edge) 0 0 var(--color-accent-line);\n  color: var(--color-accent-text);\n}\n.lintje-navbar__page.is-unavailable,\n.lintje-navbar__page.is-unavailable .lintje-navbar__metric-value { color: var(--color-text-muted); cursor: default; }\n.lintje-navbar__page.is-no-access .lintje-navbar__label { text-decoration: line-through; }\n\n/* Fixed to the viewport: the header may stand in a box of its own height above the page. */\n.lintje-header-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: var(--color-overlay-nav);\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n@media print {\n  .lintje-logobar, .lintje-navbar, .lintje-header-scrim { display: none; }\n}\n\n/* Forced colours: the browser drops the fill that carries the active page and the open group. */\n@media (forced-colors: active) {\n  .lintje-navbar { border-bottom: 1px solid CanvasText; }\n  .lintje-navbar__entry.is-active { border-bottom-color: Highlight; }\n  .lintje-navbar__entry.is-open { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-navbar__entry.is-unavailable,\n  .lintje-navbar__page.is-unavailable { color: GrayText; }\n  .lintje-navbar__page { border-color: CanvasText; }\n  .lintje-navbar__page.is-active { border-left: var(--nav-edge) solid Highlight; }\n  .lintje-navbar__page.is-unavailable { border-color: GrayText; }\n  .lintje-navbar__submenu { border: 1px solid CanvasText; }\n  .lintje-navbar :focus-visible,\n  .lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n  .lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: Highlight; }\n}\n", je = ":host { display: block; min-width: 0; min-height: 100vh; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/*\n * The page's left edge, for what pins itself to the viewport (the filter bar): the menu's width\n * beside the page, nothing above it. Custom properties reach the slotted content.\n */\n.lintje-shell {\n  --lintje-shell-left: 0px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: inherit;\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n}\n/* A specimen's bars (z-index 25–31) would otherwise cover the outer shell's open menus. */\n.lintje-shell.is-nested { isolation: isolate; }\n.lintje-shell--side { --lintje-shell-left: var(--w-rail); flex-direction: row; }\n@media (min-width: 1440px) {\n  .lintje-shell--side:not(.is-unpinned) { --lintje-shell-left: var(--w-nav); }\n}\n.lintje-shell--side:where(.is-phone) { --lintje-shell-left: 0px; }\n.lintje-shell__column {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \"Naar de inhoud\": hidden until focused. The ring is drawn inside the box (`focus-inset`):\n   outside it would lie on the theme fill (1.89:1, on Defensie 1:1); inside, its neighbour is\n   white. */\n.lintje-shell__skip {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n  z-index: 50;\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--h-touch);\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-bg-surface);\n  color: var(--color-link);\n  font: var(--text-ui);\n  text-decoration: underline;\n  box-shadow: var(--shadow-popover);\n}\n.lintje-shell__skip:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  box-shadow: none;\n}\n\n/* The main region takes the skip link's focus; it is not a control and draws no ring. */\n.lintje-shell__main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  min-width: 0;\n}\n.lintje-shell__main:focus { outline: none; }\n/* Without content the last edge-to-edge part takes the room left: a conversation keeps its\n   question box at the bottom of a short page. */\n.lintje-shell__main.is-bare ::slotted([slot='full']) { flex: 1 0 auto; }\n\n/* The content keeps to the design system's maximum width, as the bars above it do. */\n.lintje-shell__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--grid-gutter);\n  padding: var(--page-pad-y) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n}\n.lintje-shell__content[hidden] { display: none; }\n:where(.lintje-shell.is-phone) .lintje-shell__content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-3); }\n\n/*\n * Top layout. The navigation bar cannot be `sticky`: it would stick inside the header's own box\n * and leave with it, so its slot keeps the bar's height (`--h-navbar`) and the bar is pinned\n * once the slot has left the viewport.\n */\n.lintje-shell__sentinel { height: 1px; margin-bottom: -1px; }\n.lintje-shell__nav { position: relative; z-index: 25; min-height: var(--h-navbar); }\n.lintje-shell__nav.is-stuck .lintje-navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n/* Below 768 px the mobile header is the bar under the logo bar; its slot keeps the height. */\n.lintje-shell__mobile-bar { height: var(--h-topbar); }\n.lintje-shell__mobile-pin { position: relative; z-index: 25; }\n.lintje-shell__mobile-bar.is-stuck .lintje-shell__mobile-pin {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n.lintje-shell--top .lintje-mobile-header {\n  position: static;\n  height: var(--h-topbar);\n  align-items: center;\n  gap: var(--space-3);\n}\n.lintje-shell--top .lintje-mobile-header__actions { margin-top: 0; flex: none; }\n.lintje-shell--top .lintje-mobile-menu {\n  position: absolute;\n  inset: 100% 0 auto 0;\n  height: calc(100dvh - var(--h-topbar));\n}\n/* 16 px so two lines fit inside the 56 px bar; longer is cut with an ellipsis. */\n.lintje-mobile-header__title {\n  display: -webkit-box;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  font-size: 1rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n/* The logo bar already shows the environment. */\n.lintje-shell--top .lintje-mobile-menu__environment { display: none; }\n\n/* The page's one h1; cut before it can push the entries out. */\n.lintje-shell__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 24rem;\n  margin: 0;\n  padding: 0 var(--space-5);\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  line-height: var(--h-navbar);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Bare glyphs in a bar; on the navigation bar their ring is the on-theme one (`header.css`). */\n.lintje-shell__tool {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--h-touch);\n  height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-shell__tool:hover { background: var(--color-nav-hover); }\n.lintje-shell__tool--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font: var(--text-ui);\n}\n.lintje-navbar .lintje-shell__tool { height: var(--h-navbar); }\n\n/* The panels hang from the bar, not the tool. They stand on the page's surface: standard ring. */\n.lintje-navbar .lintje-view,\n.lintje-navbar .lintje-share { position: static; }\n.lintje-navbar .lintje-view__popover,\n.lintje-navbar .lintje-share__popover {\n  top: 100%;\n  right: calc(var(--space-3) + var(--page-gutter));\n}\n.lintje-navbar .lintje-view__popover :focus-visible,\n.lintje-navbar .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-shell__sheet-user { border-top: 1px solid var(--color-nav-line); }\n\n@media print { .lintje-shell__skip { display: none; } }\n\n@media (forced-colors: active) {\n  .lintje-navbar .lintje-view__popover :focus-visible,\n  .lintje-navbar .lintje-share__popover :focus-visible { outline-color: Highlight; }\n}\n", Me = "\n/* Dark is its own surface, not an inversion: every colour here is a `--color-nav-*` token. */\n.lintje-nav {\n  width: var(--w-nav);\n  flex: none;\n  /* `align-self: flex-start`: a stretched flex child would make sticky do nothing. */\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 100vh;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* Above the page also while the rail collapses: with a z-index only while expanded,\n     later positioned content (charts, KPI tiles) painted over the shrinking menu. */\n  z-index: 30;\n  box-shadow: var(--shadow-nav);\n  /* The margin mirrors the width growth, so width + margin-right is 72 px at every moment;\n     otherwise the content jumps 216 px for one frame. */\n  transition:\n    width var(--dur-rail) var(--ease-in-motion),\n    margin-right var(--dur-rail) var(--ease-in-motion);\n}\n/* The orange ring disappears into the theme fill: the menu takes the on-theme ring. */\n.lintje-nav :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-nav--rail { width: var(--w-rail); margin-right: 0; }\n/* Expanding lies on top of the content: 288 px drawn, 72 px taken. A negative right margin does\n   that; `fixed` or `absolute` would make the page jump. */\n.lintje-nav--rail.is-expanded {\n  width: var(--w-nav);\n  margin-right: calc(var(--w-rail) - var(--w-nav));\n}\n/* The overlay behind the expanded rail. A sibling of the nav: inside its stacking context it\n   would darken the menu itself. */\n.lintje-nav__scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 29;\n  background: var(--color-overlay-nav);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-rail) var(--ease-in-motion);\n}\n.lintje-nav__scrim.is-visible { opacity: 1; }\n\n.lintje-nav__header {\n  height: var(--h-nav-head);\n  flex: none;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4) 0 12px;\n}\n\n.lintje-nav__pin {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  margin-top: 12px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-nav-text);\n  background: transparent;\n  flex: none;\n}\n.lintje-nav__pin--text {\n  width: auto;\n  padding: 0 var(--space-2);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n/* The pin and Afmelden: a transparent hit area takes the target to 48 px. */\n.lintje-nav__pin::after,\n.lintje-nav__logout-button::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-nav__pin { transition: background var(--dur-hover) var(--ease-in-motion); }\n.lintje-nav__pin:hover { background: var(--color-nav-hover); }\n\n/* No native bar: a styled one takes width in every browser and the rows' fill would stop short\n   of the menu's edge. `NavScrollbar` sizes and places the thumb drawn instead. */\n.lintje-nav__list { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }\n.lintje-nav__list::-webkit-scrollbar { display: none; }\n.lintje-nav__thumb {\n  position: absolute;\n  top: 0; right: 0;\n  width: var(--space-2);\n  height: 0;\n  /* The menu's second ink reads on its fill and on a hovered row. */\n  background: var(--color-nav-text-sub);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n/* There while the pointer is on the menu or a drag lasts; the keyboard's focus shows it at once. */\n.lintje-nav:hover .lintje-nav__thumb,\n.lintje-nav__thumb.is-dragging,\n.lintje-nav__list:focus-within + .lintje-nav__thumb { opacity: 1; pointer-events: auto; }\n.lintje-nav__list:focus-within + .lintje-nav__thumb { transition: none; }\n.lintje-nav__group { display: flex; flex-direction: column; }\n\n/* The same height in both modes, so every row below stays in place when the rail expands. */\n.lintje-nav__section-heading {\n  position: relative;\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-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n  white-space: nowrap;\n  margin: 0;\n}\n/* A line in the rail, text once it expands: the text fades in 80 ms after the width starts. */\n.lintje-nav__section-label {\n  display: block;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__section-label {\n  opacity: 0;\n  transform: translateX(-8px);\n  transition: opacity 60ms var(--ease-out-motion), transform 0ms linear 60ms;\n}\n.lintje-nav__separator {\n  position: absolute;\n  left: 14px; right: 14px;\n  top: 50%;\n  height: 1px;\n  background: var(--color-nav-line);\n  opacity: 0;\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 140ms var(--ease-out-motion), opacity 0ms linear 140ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__separator {\n  opacity: 1;\n  transform: none;\n  transition: transform 160ms var(--ease-in-motion) 60ms;\n}\n\n/* One row in every mode. A 4 px border + 22 px padding centres the 20 px icon in the 72 px rail,\n   in line with the logo. Expanding animates only the width, so the icon stays in place. */\n.lintje-nav__item {\n  position: relative;\n  height: var(--h-nav-row);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--space-3);\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n  font-size: 1rem;\n  color: var(--color-nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__item:hover:not(.is-no-page):not(.is-no-access) {\n  background: var(--color-nav-hover);\n}\n.lintje-nav__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-nav__item:focus-visible { outline-offset: -3px; }\n\n.lintje-nav__item.is-no-page { color: var(--color-nav-disabled); cursor: default; }\n.lintje-nav__item.is-no-access { color: var(--color-nav-disabled); text-decoration: line-through; cursor: not-allowed; }\n\n.lintje-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav--rail.is-expanded .lintje-nav__label,\n.lintje-nav--rail.is-expanded .lintje-nav__metric {\n  animation: lintje-nav-text-in var(--dur-base) var(--ease-in-motion) 80ms backwards;\n}\n@keyframes lintje-nav-text-in { from { opacity: 0; transform: translateX(-8px); } }\n.lintje-nav__metric { font-size: 0.875rem; color: var(--color-nav-text-sub); flex: none; }\n.lintje-nav__item.is-no-access .lintje-nav__metric { text-decoration: none; }\n.lintje-nav__item.is-no-page .lintje-nav__metric { color: var(--color-nav-disabled); }\n\n/* The badge is the primitive's (`badge.css` adopted by the shell). In the rail a word (\"NIEUW\")\n   does not fit: it becomes a dot, so the rail does not overflow. */\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge {\n  position: absolute; top: 2px; right: var(--space-1);\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge--new {\n  min-width: 8px; width: 8px; height: 8px; padding: 0;\n  border-radius: 999px;\n  font-size: 0; overflow: hidden;\n}\n\n/* Environment band, only outside production. Its fill is the theme's accent, not the attention\n   status: on `defensie` (menu `#E17000`) the accent draws a blue band that reads against it. */\n.lintje-nav__environment {\n  position: relative;\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-nav__environment-label,\n.lintje-nav__environment-short { position: absolute; inset: 0; }\n.lintje-nav__environment-label {\n  transition: opacity 160ms var(--ease-in-motion) 80ms;\n}\n.lintje-nav__environment-short { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-label { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-short { opacity: 1; transition: opacity 160ms var(--ease-in-motion) 80ms; }\n\n.lintje-nav__feedback { flex: none; }\n.lintje-nav__version { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em; margin-left: auto; }\n/* Without a contact the version gets a row with the menu row's geometry, so the user block does\n   not move; not `.lintje-nav__item`, which carries a hover. */\n.lintje-nav__version-row {\n  flex: none;\n  height: var(--h-nav-row);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n}\n\n/* \"Afmelden\": a real form, because signing out is a POST that leaves the page. */\n/* The form is `hidden` in the rail, not transparent, so the button is out of the tab order. */\n.lintje-nav__logout { flex: none; margin-left: auto; }\n.lintje-nav__logout[hidden] { display: none; }\n.lintje-nav__logout-button {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  /* Quiet at rest; full text colour on hover and focus. */\n  color: var(--color-nav-text-sub);\n  background: transparent;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__logout-button:hover,\n.lintje-nav__logout-button:focus-visible { background: var(--color-nav-hover); color: var(--color-nav-text); }\n.lintje-nav__logout-text { font-size: 0.875rem; font-weight: 700; white-space: nowrap; padding: 0 var(--space-2); }\n\n.lintje-nav__footer {\n  flex: none;\n  display: flex; align-items: center; gap: 10px;\n  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-4);\n  border-top: 1px solid var(--color-nav-line);\n  font-size: 1rem;\n}\n/* As high as name and role together (two 1.25rem lines); the left padding keeps it centred in\n   the rail. */\n.lintje-nav__avatar {\n  width: 2.5rem; height: 2.5rem; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 1rem; font-weight: 700;\n}\n/* Name and role fade and slide in like the headings; `nowrap` keeps one line. */\n.lintje-nav__user {\n  display: flex; flex-direction: column; line-height: 1.25rem;\n  min-width: 0; flex: 1 1 auto; white-space: nowrap;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__user { opacity: 0; transform: translateX(-8px); transition: none; }\n.lintje-nav__user > b,\n.lintje-nav__role { overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav__role { font-size: 0.875rem; color: var(--color-nav-text-sub); }\n\n:where(.lintje-shell.is-phone) .lintje-nav,\n:where(.lintje-shell.is-phone) .lintje-nav__scrim { display: none; }\n\n/* An emblem's black, if it has any, draws in the menu's text colour (`currentColor`). */\n.lintje-nav__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-nav, .lintje-nav__scrim { display: none; } }\n\n/* Forced colours: the active row is a fill and a 4 px edge; the fill is dropped and the edge\n   turns Highlight. A row without a page or access is GrayText. The ring is Highlight. The\n   shadow is dropped, so an outline keeps the menu's edge against the page. */\n@media (forced-colors: active) {\n  .lintje-nav { outline: 1px solid CanvasText; }\n  .lintje-nav :focus-visible { outline-color: Highlight; }\n  .lintje-nav__item { border-left-color: Canvas; }\n  .lintje-nav__item.is-active { border-left-color: Highlight; }\n  .lintje-nav__item.is-no-page,\n  .lintje-nav__item.is-no-access { color: GrayText; }\n  .lintje-nav__avatar { border: 1px solid CanvasText; }\n  .lintje-nav__thumb { forced-color-adjust: none; background: CanvasText; }\n}\n", J = "\n/* One region: the open menu's dialog and the box its focus trap keeps Tab inside. It shows no\n   ring when the trap pulls back stray focus. The region sticks, not the header: a sticky box\n   stays inside its parent, and this one is as tall as the header. */\n.lintje-mobile-chrome { flex: none; position: sticky; top: 0; z-index: 25; }\n.lintje-mobile-chrome:focus { outline: none; }\n\n.lintje-mobile-header {\n  display: none;\n  height: var(--h-mobile-header);\n  flex: none;\n  background: var(--color-nav-bg);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4);\n  /* Tools that do not fit must not widen the page, or a phone zooms out and they seem to fit\n     (`headerCompact`). Sideways only: the focus ring stays inside the padding. */\n  overflow-x: clip;\n}\n:where(.lintje-shell.is-phone) .lintje-mobile-header { display: flex; }\n/* On the theme fill the ring is the on-theme one, as in the desktop menu. */\n.lintje-mobile-header :focus-visible,\n.lintje-mobile-menu :focus-visible { outline-color: var(--color-focus-on-theme); }\n/* \"Weergave\" and \"Delen\" open from this header as sheets on the page's surface: standard ring. */\n.lintje-mobile-header .lintje-view__popover :focus-visible,\n.lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-mobile-header__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }\n.lintje-mobile-header__button {\n  height: var(--h-touch);\n  padding: 0 var(--space-3);\n  background: var(--color-nav-active);\n  color: var(--color-nav-text);\n  border: 1px solid var(--color-nav-line);\n  font-size: 0.875rem;\n  font-weight: 700;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-2);\n  /* Square when only the glyph shows (`headerCompact`). */\n  min-width: var(--h-touch);\n}\n/* Without room the words are read, not shown: the glyph and the badge stay. */\n.lintje-mobile-header.is-compact .lintje-mobile-header__word {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n/* The modified-filters count is the primitive badge's `attention` tone: near-black on the\n   orange, because white on #E17000 is 3.2:1. */\n\n.lintje-mobile-menu {\n  position: fixed;\n  inset: var(--h-mobile-header) 0 0 0;\n  z-index: 24;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  animation: lintje-menu-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-mobile-menu.is-leaving {\n  animation: lintje-menu-out var(--dur-sheet) var(--ease-out-motion) forwards;\n  pointer-events: none;\n}\n.lintje-mobile-menu__list { flex: 1; padding-bottom: var(--space-4); }\n.lintje-mobile-menu__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n}\n.lintje-mobile-menu__item {\n  height: var(--h-touch);\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: 0 var(--space-5);\n  border-left: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font-size: 1rem;\n  text-decoration: none;\n}\n.lintje-mobile-menu__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-mobile-menu__item.is-muted { color: var(--color-nav-disabled); }\n.lintje-mobile-menu__label { flex: 1; }\n.lintje-mobile-menu__meta { font-size: 0.875rem; color: var(--color-nav-disabled); flex: none; }\n/* The environment band and the feedback row with the version: below 768 px there is no rail,\n   and a page's own footer is the host's, so this is the only place they can stand. */\n.lintje-mobile-menu__environment {\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-mobile-menu__feedback { flex: none; margin: 0; }\n.lintje-mobile-menu__version {\n  flex: none;\n  margin-left: auto;\n  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em;\n  color: var(--color-nav-text-sub);\n}\n\n.lintje-mobile-header__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-mobile-header, .lintje-mobile-menu { display: none; } }\n\n/* Forced colours: the active row's 4 px edge is Highlight, a muted row GrayText. */\n@media (forced-colors: active) {\n  .lintje-mobile-header :focus-visible,\n  .lintje-mobile-menu :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-header .lintje-view__popover :focus-visible,\n  .lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-menu__item { border-left-color: Canvas; }\n  .lintje-mobile-menu__item.is-active { border-left-color: Highlight; }\n  .lintje-mobile-menu__item.is-muted { color: GrayText; }\n}\n", Ne = "/* The bar, the two toggle groups and the share popover are all drawn by the shell itself. */\n\n.lintje-top-bar {\n  height: var(--h-topbar);\n  flex: none;\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n/* The name and the page's name share a baseline and stand in the middle of the bar as one. */\n.lintje-top-bar__name { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-top-bar__words { display: flex; align-items: baseline; gap: 6px; min-width: 0; }\n/* The dashboard's name is a word, not a line, so it uses `--color-accent-text`. */\n.lintje-top-bar__dashboard {\n  font: var(--text-dashboard);\n  color: var(--color-accent-text);\n  white-space: nowrap;\n}\n.lintje-top-bar__page {\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n  white-space: nowrap;\n}\n.lintje-top-bar__page.is-visible { opacity: 1; }\n\n.lintje-top-bar__actions { display: flex; flex: none; align-items: center; gap: var(--space-3); }\n.lintje-top-bar__key { margin-left: var(--space-1); }\n/* The tools of the navigation bar stand here on the page's surface; an element with a shadow\n   root declares the tokens again on its own host, so they are set on each one too. */\n.lintje-top-bar__actions,\n.lintje-top-bar__actions > * {\n  --color-nav-text: var(--color-text-primary);\n  --color-nav-hover: var(--color-bg-subtle);\n  --lintje-tool-height: var(--h-button-chrome);\n}\n\n.lintje-toggle-group {\n  display: flex;\n  height: var(--h-button-chrome);\n  border: 1px solid var(--color-border-strong);\n}\n.lintje-toggle-group__option {\n  position: relative;\n  width: var(--h-button-chrome);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* Without a file for its icon the option shows its short Dutch word instead.\n   The group keeps its height; only the option gets as wide as the word. */\n.lintje-toggle-group__option--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.lintje-toggle-group__option:hover { background: var(--color-bg-subtle); }\n/* A 40 px option reaches the 48 px target through a transparent hit area 4 px above and\n   below; the options of a group touch, so it does not reach sideways. */\n.lintje-toggle-group__option::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The chosen half has no border of its own — the group draws one around both —\n   so the primary-fill border is an inset ring: the same\n   1 px line, drawn inside the box, so neither half moves a pixel. Invisible in\n   light (the token is the primary there), the tint in dark. */\n.lintje-toggle-group__option.is-active {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n\n/* The panels' side inset: their own as they hang from a tool, the filter sheet's as a sheet. */\n.lintje-view__popover,\n.lintje-share__popover { --lintje-panel-inset: 14px; }\n\n/* \"Weergave\": the share menu's panel, with a group of words under each heading. */\n.lintje-view { position: relative; }\n/* A panel sets the text colour of its surface: on the navigation bar it would take the bar's. */\n.lintje-view__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-view__row { display: flex; padding: var(--space-1) var(--lintje-panel-inset) var(--space-2); }\n/* A theme's name stays one line; the panel grows to it. */\n.lintje-view__themes { white-space: nowrap; }\n\n.lintje-share { position: relative; }\n.lintje-share__scrim { position: fixed; inset: 0; z-index: 40; }\n.lintje-share__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  width: 18.75rem;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-share__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n  padding: var(--space-3) var(--lintje-panel-inset) 4px;\n}\n.lintje-share__item {\n  width: 100%;\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  padding: 0 var(--lintje-panel-inset);\n  font-size: 1rem;\n  text-align: left;\n  color: var(--color-text-primary);\n}\n.lintje-share__item:hover { background: var(--color-bg-subtle); }\n/* Where an icon is still missing: the label keeps the column's text edge. */\n.lintje-share__gap { width: 16px; flex: none; }\n.lintje-share__qr {\n  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);\n  padding: var(--space-2) var(--lintje-panel-inset) var(--space-3);\n}\n.lintje-share__hint { text-align: center; }\n.lintje-share__code { align-self: stretch; }\n.lintje-share__footer {\n  font: var(--text-meta); color: var(--color-text-muted);\n  padding: var(--space-2) var(--lintje-panel-inset) 0;\n  margin-top: var(--space-2);\n  border-top: 1px solid var(--color-border-default);\n}\n\n:where(.lintje-shell.is-phone) .lintje-top-bar { display: none; }\n\n/* Below 768 px \"Weergave\" and \"Delen\" open from below, as the filter sheet does. A phone has its\n   own way to a phone, so the QR code is not offered there. */\n:where(.lintje-shell.is-phone) .lintje-share__scrim {\n  z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-share__popover {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  width: auto;\n  max-height: 88vh;\n  overflow-y: auto;\n  padding-bottom: var(--space-4);\n  border: 0;\n  border-top: 1px solid var(--color-border-popover);\n  box-shadow: none;\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover { padding-top: 0; --lintje-panel-inset: var(--space-4); }\n:where(.lintje-shell.is-phone) .lintje-view__popover:focus,\n:where(.lintje-shell.is-phone) .lintje-share__popover:focus { outline: none; }\n:where(.lintje-shell.is-phone) .lintje-share__phone { display: none; }\n/* The filter sheet's head; it stays while the sheet scrolls. */\n.lintje-share__header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex; align-items: center; gap: var(--space-2);\n  margin-bottom: var(--space-2);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-popover);\n}\n.lintje-share__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n\n/* On paper the chrome is not part of the page. */\n@media print { .lintje-top-bar { display: none; } }\n\n/* Forced colours: the chosen half is carried by its fill and an inset\n   ring, both of which the browser drops. Every half takes a 1 px border inside\n   its own box — Canvas at rest, Highlight when chosen — so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-toggle-group__option { border: 1px solid Canvas; }\n  .lintje-toggle-group__option.is-active { border-color: Highlight; }\n}\n", Y = "lintje-shell-main", X = (e) => "links" in e, Z = (e) => e?.navigation?.flatMap((e) => X(e) ? e.links : [e]).find((e) => e.active);
+function Q(e) {
+	let t = [], n = null;
+	for (let r of e) X(r) ? (n = null, t.push({
+		heading: r.label,
+		items: r.links
+	})) : (n || t.push(n = { items: [] }), n.items.push(r));
+	return t;
+}
+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) => {
+			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;
+					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);
+			}
+		}, this.#v = () => {
+			this.#r || this.layout !== "top" || (this.#r = requestAnimationFrame(() => {
+				this.#r = 0, this.measureScroll();
+			}));
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			ne,
+			a(Ae),
+			a(je),
+			a(Me),
+			a(J),
+			a(ie),
+			a(ae),
+			a(Ne)
+		];
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			layout: {
+				type: String,
+				reflect: !0
+			},
+			openGroup: { state: !0 },
+			barStuck: { state: !0 },
+			railExpanded: { state: !0 },
+			menuOpen: { state: !0 },
+			menuLeaving: { state: !0 },
+			shareOpen: { state: !0 },
+			sharePhone: { state: !0 },
+			viewOpen: { state: !0 },
+			toolsCompact: { state: !0 },
+			headerCompact: { state: !0 },
+			hasContent: { state: !0 },
+			toast: { state: !0 }
+		};
+	}
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this.#f), this.#i = this.parentElement?.closest(this.localName) != null, this.#i || window.addEventListener("scroll", this.#v, { passive: !0 });
+	}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.#f), this.#p(), this.#e.deactivate(!1), this.#h(!1), window.removeEventListener("scroll", this.#v), this.#a?.disconnect(), this.#a = null, this.#o = [], this.#r && cancelAnimationFrame(this.#r), this.#r = 0, this.#d && (this.#d.style.scrollPaddingTop = ""), this.#d = null, super.disconnectedCallback();
+	}
+	#p() {
+		this.#c?.(), this.#c = null;
+	}
+	#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);
+	}
+	#h(e) {
+		this.#u && (this.#u(), this.#u = null, this.#l.deactivate(e));
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.#t === !0 && !this.mobile.matches && this.menuOpen && (this.menuOpen = !1), this.#t = this.mobile.matches, e.has("menuOpen") && (this.#n && clearTimeout(this.#n), this.#n = null, !this.menuOpen && e.get("menuOpen") === !0 ? (this.menuLeaving = !0, this.#n = setTimeout(() => this.menuLeft(), 600)) : this.menuLeaving = !1), e.has("data") && Z(e.get("data"))?.href !== Z(this.data)?.href && (this.viewOpen = !1, this.shareOpen = !1), e.has("shareOpen") && !this.shareOpen && (this.sharePhone = !1), e.has("data") && (this.layout = this.data?.layout === "side" ? "side" : "top");
+	}
+	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();
+				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());
+		}
+		this.#m(), this.measureFit(), this.#g(), !(this.#i || this.layout !== "top") && (e.has("data") || e.has("layout")) && this.measureScroll();
+	}
+	#g() {
+		if (this.#i) return;
+		let e = f() ?? 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`;
+	}
+	menuLeft() {
+		this.#n && clearTimeout(this.#n), this.#n = null, this.menuLeaving = !1;
+	}
+	measureFit() {
+		let e = this.renderRoot.querySelector(".lintje-top-bar"), n = this.renderRoot.querySelector(".lintje-mobile-header");
+		this.#_([e, n].filter((e) => e !== null));
+		let r = e?.querySelector(".lintje-top-bar__words"), i = e?.querySelector(".lintje-top-bar__actions");
+		if (this.layout === "side" && e && r && i && e.clientWidth) {
+			this.toolsCompact || (this.#s = i.getBoundingClientRect().width);
+			let n = getComputedStyle(e), a = e.clientWidth - parseFloat(n.paddingLeft) - parseFloat(n.paddingRight), o = r.scrollWidth + t(this, "--space-6", 24) + this.#s > a + .5;
+			o !== this.toolsCompact && (this.toolsCompact = o);
+		}
+		if (n?.clientWidth) {
+			let e = n.classList.contains("is-compact");
+			n.classList.remove("is-compact");
+			let t = n.scrollWidth > n.clientWidth + .5;
+			n.classList.toggle("is-compact", e), t !== this.headerCompact && (this.headerCompact = t);
+		}
+	}
+	#_(e) {
+		if (typeof ResizeObserver < "u" && !(e.length === this.#o.length && e.every((e, t) => e === this.#o[t]))) {
+			this.#a ??= new ResizeObserver(() => this.measureFit()), this.#a.disconnect();
+			for (let t of e) this.#a.observe(t);
+			this.#o = e;
+		}
+	}
+	#v;
+	measureScroll() {
+		let e = this.renderRoot.querySelector(".lintje-shell__nav, .lintje-shell__mobile-bar");
+		e && (this.barStuck = e.getBoundingClientRect().top < 0);
+	}
+	follow(e, t) {
+		this.openGroup = null, this.followLink(e, t);
+	}
+	changeView(e) {
+		this.emit("lintje-view-change", e);
+	}
+	askSearch() {
+		this.emit("lintje-search-open");
+	}
+	closePanel(e) {
+		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));
+	}
+	showToast(e) {
+		this.toast = e;
+	}
+	skipToContent(e) {
+		e.preventDefault();
+		let n = this.renderRoot.querySelector(`#${Y}`);
+		if (!n) return;
+		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();
+		o && o !== document.scrollingElement ? o.scrollBy({ top: a }) : window.scrollBy({ top: a });
+	}
+	#b() {
+		let e = this.renderRoot.querySelectorAll(".lintje-shell__content slot");
+		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
+      type="button"
+      class="lintje-shell__tool"
+      aria-label="Zoeken"
+      title="Zoeken"
+      aria-keyshortcuts="/"
+      @click=${() => this.askSearch()}
+    >
+      ${_("functioneel-zoek", { size: 20 })}
+    </button>` : r;
+	}
+	renderNotifications() {
+		let e = this.data?.notifications;
+		return e ? c`<lintje-notifications .items=${e}></lintje-notifications>` : r;
+	}
+	renderUserMenu(e) {
+		let t = this.data;
+		return t?.user ? c`<lintje-user-menu
+      class=${e ? "lintje-shell__sheet-user" : "lintje-shell__user"}
+      ?inline=${e}
+      .user=${t.user}
+      .items=${t.userMenu ?? []}
+      version=${t.version ?? r}
+      logout-action=${t.logout?.href ?? r}
+      csrf=${t.logout?.token ?? r}
+    ></lintje-user-menu>` : r;
+	}
+	renderSkipLink() {
+		return c`<a
+      class="lintje-shell__skip focus-inset"
+      href="#${Y}"
+      @click=${(e) => this.skipToContent(e)}
+      >Naar de inhoud</a
+    >`;
+	}
+	renderLogo(e) {
+		let t = this.data, n = t.home;
+		return oe({
+			logo: t.logo,
+			emblem: t.emblem,
+			ribbon: e,
+			environment: t.environment,
+			home: n ? {
+				href: n,
+				onNavigate: (e) => this.follow(n, e)
+			} : void 0
+		});
+	}
+	renderNavEnd(e) {
+		let t = e.feedback;
+		return c`${this.renderSearch()}${this.renderNotifications()}${H(this)}${t ? c`<a
+            class="lintje-shell__tool"
+            href=${t.href}
+            aria-label=${M(t)}
+            title=${M(t)}
+            >${_("communicatie-tekstballonnen-met-vraagteken", { size: 20 })}</a
+          >` : r}${this.renderUserMenu(!1)}`;
+	}
+	renderTop(e, t) {
+		return c`${this.renderLogo(x.desktop)}
+      <div class="lintje-shell__sentinel" aria-hidden="true"></div>
+      <div class=${g({
+			"lintje-shell__nav": !0,
+			"is-stuck": this.barStuck
+		})}>
+        ${pe({
+			id: "lintje-shell-nav",
+			groups: t,
+			open: this.openGroup,
+			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,
+			end: this.renderNavEnd(e)
+		})}
+      </div>
+      ${he(this.openGroup !== null)}`;
+	}
+	renderTopPhone(e) {
+		return c`${this.renderLogo(x.phone)}
+      <div class="lintje-shell__sentinel" aria-hidden="true"></div>
+      <div class=${g({
+			"lintje-shell__mobile-bar": !0,
+			"is-stuck": this.barStuck
+		})}>
+        <div class="lintje-shell__mobile-pin">${q(this, e)}</div>
+      </div>`;
+	}
+	renderMain() {
+		let e = () => this.#b();
+		return c`<main
+      id=${Y}
+      class=${g({
+			"lintje-shell__main": !0,
+			"is-bare": !this.hasContent
+		})}
+      tabindex="-1"
+    >
+      <slot name="full" @slotchange=${e}></slot>
+      <div class="lintje-shell__content" ?hidden=${!this.hasContent}>
+        <slot name="header" @slotchange=${e}></slot>
+        <slot @slotchange=${e}></slot>
+      </div>
+    </main>`;
+	}
+	renderToast() {
+		return this.toast ? c`<lintje-toast
+          kind="ok"
+          @lintje-close=${(e) => {
+			e.stopPropagation(), this.toast = null;
+		}}
+          >${this.toast}</lintje-toast
+        >` : r;
+	}
+	render() {
+		let e = this.data;
+		if (!e) return r;
+		let t = Q(e.navigation ?? []);
+		return this.layout === "top" ? c`<div
+        class=${g({
+			"lintje-shell": !0,
+			"lintje-shell--top": !0,
+			"is-nested": this.#i,
+			"is-phone": this.mobile.matches
+		})}
+      >
+        ${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({
+			"lintje-shell": !0,
+			"lintje-shell--side": !0,
+			"is-unpinned": e.menu === "unpinned",
+			"is-nested": this.#i,
+			"is-phone": this.mobile.matches
+		})}
+    >
+      ${this.renderSkipLink()} ${F(this, t)}
+      <div class="lintje-shell__column">
+        ${q(this, t)} ${Ce(this)} ${this.renderMain()}
+        <slot name="footer"></slot>
+      </div>
+      ${this.renderToast()}
+    </div>`;
+	}
+};
+n("lintje-shell", $);
+//#endregion
+export { $ as LintjeShell, Q as toGroups };