lintje 0.2.0 → 0.3.0

package/dist-elements/tag/filter-zone.js

@@ -1,5 +1,5 @@
-import { $ as e, A as t, Bt as n, Gt as r, Ht as i, It as a, Lt as o, Pt as s, U as c, Z as l, et as u, qt as d, zt as f } from "../chunks/base-Bg-IFOPG.js";
-import { t as p } from "../chunks/sentence-BI3lwEuT.js";
+import { Gt as e, I as t, Jt as n, Kt as r, Q as i, Ut as a, Yt as o, Zt as s, en as c, lt as l, nn as u, st as d, ut as f } from "../chunks/base-CbmWxUig.js";
+import { t as p } from "../chunks/sentence-B19AyZBS.js";
 function m(e) {
 	return e.open;
 }
@@ -28,18 +28,18 @@ function g(e) {
 }
 //#endregion
 //#region src/components/filters/filter-zone/filter-zone.css?inline
-var _ = "/*\n * The filter zone's own box: header, controls row, sentence and summary bar. Rules that reach\n * into a control live in `filter-layout.css`, adopted by the elements that own the controls.\n */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-bar {\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-bar__header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  height: var(--h-contextbar);\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n  /* An inset shadow, not a border: a border would shift the toggle half a pixel off the\n     summary bar's. */\n  box-shadow: inset 0 -1px 0 var(--color-border-filter);\n}\n.lintje-filter-bar__title { font-size: 1rem; font-weight: 700; }\n.lintje-filter-bar__hint  { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-filter-bar__spacer   { flex: 1; }\n\n.lintje-filter-bar__counter {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-small); color: var(--color-text-primary);\n}\n.lintje-filter-bar__dot {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--color-attention); flex: none;\n}\n.lintje-filter-bar__reset {\n  display: flex; align-items: center;\n  min-height: var(--h-target);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-link); text-decoration: underline;\n  margin: 0 var(--space-2);\n}\n\n/* --- Opening and closing -------------------------------------------------- */\n/* `0fr -> 1fr` transitions to the content height without measuring it in JS. The body stays\n   in the DOM, so the fade is a transition, not a keyframe. */\n.lintje-filter-bar__body {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-filter-bar.is-open .lintje-filter-bar__body { grid-template-rows: 1fr; }\n\n.lintje-filter-bar__body-inner {\n  min-height: 0;\n  overflow: hidden;\n  opacity: 0;\n  /* Closed, out of the tab order and the accessibility tree; hiding waits for the collapse. */\n  visibility: hidden;\n  transition:\n    opacity var(--dur-collapse) var(--ease-in-motion),\n    visibility 0s linear var(--dur-collapse);\n}\n.lintje-filter-bar.is-open .lintje-filter-bar__body-inner {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity var(--dur-collapse) var(--ease-in-motion), visibility 0s;\n}\n/* Standing open, nothing clips: popovers hang out of the zone. */\n.lintje-filter-bar.is-settled .lintje-filter-bar__body-inner { overflow: visible; }\n\n.lintje-filter-bar__header,\n.lintje-summary-bar {\n  animation: lintje-fade-in var(--dur-collapse) var(--ease-in-motion);\n}\n\n/* Aligned at the top: what a control carries below its box (the range's ticks) hangs below the\n   line instead of pushing its neighbours down. */\n.lintje-filter-bar__controls {\n  display: flex;\n  gap: var(--grid-gutter);\n  padding: 14px calc(var(--space-6) + var(--page-gutter)) 18px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 1440px) {\n  .lintje-filter-bar__controls { flex-wrap: nowrap; }\n}\n@media (min-width: 768px) and (max-width: 1023px) {\n  .lintje-filter-bar__controls { display: grid; grid-template-columns: 1fr 1fr; }\n}\n\n.lintje-filter-bar__summary {\n  display: flex; align-items: center; gap: 10px;\n  padding: 0 calc(var(--space-6) + var(--page-gutter)) 14px;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n/* --- Collapsed summary bar (48 px) -------------------------------------- */\n.lintje-summary-bar {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  height: var(--h-contextbar);\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n.lintje-summary-bar__sentence {\n  display: flex; align-items: center; gap: 10px;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  min-width: 0;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  text-align: left;\n  padding: 0 6px; margin: 0 -6px;\n  height: 100%;\n}\n.lintje-summary-bar__sentence:hover { background: var(--color-bg-subtle); }\n.lintje-summary-bar__sentence .lintje-filter-summary__text { overflow: hidden; text-overflow: ellipsis; }\n.lintje-summary-bar__spacer { flex: 1; }\n.lintje-summary-bar__counter {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-small); color: var(--color-text-muted); flex: none;\n}\n.lintje-summary-bar__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--color-attention); flex: none;\n}\n.lintje-summary-bar__reset {\n  display: flex; align-items: center;\n  min-height: var(--h-target);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-link); text-decoration: underline;\n  margin: 0 var(--space-2);\n}\n/* --- The one filter toggle ----------------------------------------------- */\n/* Last in the row in both states, so the second click lands on the toggle again. */\n.lintje-filter-toggle {\n  position: relative;\n  display: flex; align-items: center; gap: var(--space-2);\n  height: var(--h-button-compact);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-border-strong);\n  background: transparent;\n  font-size: 0.875rem; font-weight: 400;\n  color: var(--color-text-primary);\n  flex: none;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-filter-toggle:hover { background: var(--color-bg-subtle); }\n/* A transparent hit area above and below reaches the full target height. */\n.lintje-filter-toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-filter-toggle__chevron {\n  transform-origin: 50% 50%;\n  transition: transform var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-filter-toggle.is-expanded .lintje-filter-toggle__chevron { transform: rotate(180deg); }\n\n/* Before the filter bar: 1 px tall for the observer, -1 px margin so layout is unchanged. */\n.lintje-filter-bar__sentinel { height: 1px; margin-bottom: -1px; }\n/* Scrolled: the collapsed zone sticks below the top bar. */\n.lintje-filter-bar.is-sticky {\n  position: sticky;\n  top: var(--h-topbar);\n  z-index: 19;\n  box-shadow: inset 0 -1px 0 var(--color-border-filter), var(--shadow-sticky);\n  /* Stuck, the top bar's line is the separator; this one goes transparent, keeping its pixel. */\n  border-top-color: transparent;\n}\n\n/* Stuck and expanded: the zone unfolds where it stands; the z-index stays under the menu's 30. */\n.lintje-filter-bar.is-stuck-open {\n  max-height: calc(100vh - var(--h-topbar));\n}\n/* Only when the panel does not fit (`LintjeFilterZone` measures it): scrolling clips popovers. */\n.lintje-filter-bar.is-stuck-open.is-scrollable { overflow-y: auto; }\n\n/* --- Mobile -------------------------------------------------------------- */\n.lintje-filter-bar--mobile {\n  border-bottom: 1px solid var(--color-border-default);\n  padding: var(--space-3) var(--space-4);\n  box-shadow: var(--shadow-sticky);\n  position: sticky;\n  top: var(--h-mobile-header);\n  z-index: 19;\n}\n.lintje-filter-bar__mobile-summary {\n  display: flex; align-items: flex-start; gap: 10px;\n  font: var(--text-ui); line-height: 1.4;\n}\n.lintje-filter-bar__mobile-summary .lintje-filter-summary__icon { margin-top: 2px; }\n\n/* --- Pinned instead of sticky ---------------------------------------------- */\n.lintje-filter-bar--fixed.is-sticky {\n  position: fixed;\n  left: var(--lintje-shell-left, 0px);\n  right: 0;\n}\n.lintje-filter-bar__placeholder { height: var(--h-contextbar); }\n\n/* --- More than four filters ------------------------------------------------ */\n/* The one-line rule from 1440 px fits four controls; more wrap. */\n.lintje-filter-bar--wrap .lintje-filter-bar__controls { flex-wrap: wrap; }\n\n\n@media print {\n  .lintje-filter-bar.is-sticky, .lintje-filter-bar--fixed.is-sticky { position: static; box-shadow: none; }\n  .lintje-filter-toggle, .lintje-filter-bar__reset, .lintje-filter-bar__counter { display: none; }\n}\n\n/* Forced colours drop the fill and the inset shadow, so the row takes a real border. */\n@media (forced-colors: active) {\n  .lintje-filter-bar__header { border-bottom: 1px solid CanvasText; }\n}\n", v = class extends f {
-	constructor(...e) {
-		super(...e), this.total = 0, this.modified = 0, this.open = !1, this.scrolled = !1, this.settled = !0, this.scrollable = !1, this.stick = "sticky", this.sentence = [], this.mobile = new o(this, a), this.observer = null, this.observed = void 0, this.wasExpanded = void 0, this.onResize = () => this.measureOverflow(), this.#e = !1, this.#t = 0, this.#n = null, this.onPageScroll = () => {
+var _ = "/*\n * The filter zone's own box: header, controls row, sentence and summary bar. Rules that reach\n * into a control live in `filter-layout.css`, adopted by the elements that own the controls.\n */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-bar {\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-bar__header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  height: var(--h-contextbar);\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n  /* An inset shadow, not a border: a border would shift the toggle half a pixel off the\n     summary bar's. */\n  box-shadow: inset 0 -1px 0 var(--color-border-filter);\n}\n.lintje-filter-bar__title { font-size: 1rem; font-weight: 700; }\n.lintje-filter-bar__hint  { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-filter-bar__spacer   { flex: 1; }\n\n.lintje-filter-bar__counter {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-small); color: var(--color-text-primary);\n}\n.lintje-filter-bar__dot {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--color-attention); flex: none;\n}\n.lintje-filter-bar__reset {\n  display: flex; align-items: center;\n  min-height: var(--h-target);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-link); text-decoration: underline;\n  margin: 0 var(--space-2);\n}\n\n/* --- Opening and closing -------------------------------------------------- */\n/* `0fr -> 1fr` transitions to the content height without measuring it in JS. The body stays\n   in the DOM, so the fade is a transition, not a keyframe. */\n.lintje-filter-bar__body {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-filter-bar.is-open .lintje-filter-bar__body { grid-template-rows: 1fr; }\n\n.lintje-filter-bar__body-inner {\n  min-height: 0;\n  overflow: hidden;\n  opacity: 0;\n  /* Closed, out of the tab order and the accessibility tree; hiding waits for the collapse. */\n  visibility: hidden;\n  transition:\n    opacity var(--dur-collapse) var(--ease-in-motion),\n    visibility 0s linear var(--dur-collapse);\n}\n.lintje-filter-bar.is-open .lintje-filter-bar__body-inner {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity var(--dur-collapse) var(--ease-in-motion), visibility 0s;\n}\n/* Standing open, nothing clips: popovers hang out of the zone. */\n.lintje-filter-bar.is-settled .lintje-filter-bar__body-inner { overflow: visible; }\n\n.lintje-filter-bar__header,\n.lintje-summary-bar {\n  animation: lintje-fade-in var(--dur-collapse) var(--ease-in-motion);\n}\n\n/* Aligned at the top: what a control carries below its box (the range's ticks) hangs below the\n   line instead of pushing its neighbours down. */\n.lintje-filter-bar__controls {\n  display: flex;\n  gap: var(--grid-gutter);\n  padding: 14px calc(var(--space-6) + var(--page-gutter)) 18px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n@media (min-width: 1440px) {\n  .lintje-filter-bar__controls { flex-wrap: nowrap; }\n}\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  .lintje-filter-bar__controls { display: grid; grid-template-columns: 1fr 1fr; }\n}\n\n.lintje-filter-bar__summary {\n  display: flex; align-items: center; gap: 10px;\n  padding: 0 calc(var(--space-6) + var(--page-gutter)) 14px;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n/* --- Collapsed summary bar (48 px) -------------------------------------- */\n.lintje-summary-bar {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  height: var(--h-contextbar);\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n.lintje-summary-bar__sentence {\n  display: flex; align-items: center; gap: 10px;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  min-width: 0;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  text-align: left;\n  padding: 0 6px; margin: 0 -6px;\n  height: 100%;\n}\n.lintje-summary-bar__sentence:hover { background: var(--color-bg-subtle); }\n.lintje-summary-bar__sentence .lintje-filter-summary__text { overflow: hidden; text-overflow: ellipsis; }\n.lintje-summary-bar__spacer { flex: 1; }\n.lintje-summary-bar__counter {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-small); color: var(--color-text-muted); flex: none;\n}\n.lintje-summary-bar__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--color-attention); flex: none;\n}\n.lintje-summary-bar__reset {\n  display: flex; align-items: center;\n  min-height: var(--h-target);\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-link); text-decoration: underline;\n  margin: 0 var(--space-2);\n}\n/* --- The one filter toggle ----------------------------------------------- */\n/* Last in the row in both states, so the second click lands on the toggle again. */\n.lintje-filter-toggle {\n  position: relative;\n  display: flex; align-items: center; gap: var(--space-2);\n  height: var(--h-button-compact);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-border-strong);\n  background: transparent;\n  font-size: 0.875rem; font-weight: 400;\n  color: var(--color-text-primary);\n  flex: none;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-filter-toggle:hover { background: var(--color-bg-subtle); }\n/* A transparent hit area above and below reaches the full target height. */\n.lintje-filter-toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-filter-toggle__chevron {\n  transform-origin: 50% 50%;\n  transition: transform var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-filter-toggle.is-expanded .lintje-filter-toggle__chevron { transform: rotate(180deg); }\n\n/* Before the filter bar: 1 px tall for the observer, -1 px margin so layout is unchanged. */\n.lintje-filter-bar__sentinel { height: 1px; margin-bottom: -1px; }\n/* Scrolled: the collapsed zone sticks below the top bar. */\n.lintje-filter-bar.is-sticky {\n  position: sticky;\n  top: var(--h-topbar);\n  z-index: 19;\n  box-shadow: inset 0 -1px 0 var(--color-border-filter), var(--shadow-sticky);\n  /* Stuck, the top bar's line is the separator; this one goes transparent, keeping its pixel. */\n  border-top-color: transparent;\n}\n\n/* Stuck and expanded: the zone unfolds where it stands; the z-index stays under the menu's 30. */\n.lintje-filter-bar.is-stuck-open {\n  max-height: calc(100vh - var(--h-topbar));\n}\n/* Only when the panel does not fit (`LintjeFilterZone` measures it): scrolling clips popovers. */\n.lintje-filter-bar.is-stuck-open.is-scrollable { overflow-y: auto; }\n\n/* --- Mobile -------------------------------------------------------------- */\n.lintje-filter-bar--mobile {\n  border-bottom: 1px solid var(--color-border-default);\n  padding: var(--space-3) var(--space-4);\n  box-shadow: var(--shadow-sticky);\n  position: sticky;\n  top: var(--h-mobile-header);\n  z-index: 19;\n}\n.lintje-filter-bar__mobile-summary {\n  display: flex; align-items: flex-start; gap: 10px;\n  font: var(--text-ui); line-height: 1.4;\n}\n.lintje-filter-bar__mobile-summary .lintje-filter-summary__icon { margin-top: 2px; }\n\n/* --- Pinned instead of sticky ---------------------------------------------- */\n.lintje-filter-bar--fixed.is-sticky {\n  position: fixed;\n  left: var(--lintje-shell-left, 0px);\n  right: 0;\n}\n.lintje-filter-bar__placeholder { height: var(--h-contextbar); }\n\n/* --- More than four filters ------------------------------------------------ */\n/* The one-line rule from 1440 px fits four controls; more wrap. */\n.lintje-filter-bar--wrap .lintje-filter-bar__controls { flex-wrap: wrap; }\n\n\n/* On paper the sentence stands at the paper's edge, in line with the content under it. */\n@media print {\n  .lintje-filter-bar.is-sticky, .lintje-filter-bar--fixed.is-sticky { position: static; box-shadow: none; }\n  .lintje-filter-toggle, .lintje-filter-bar__reset, .lintje-filter-bar__counter { display: none; }\n  .lintje-filter-bar__header,\n  .lintje-filter-bar__summary,\n  .lintje-summary-bar { padding-inline: 0; }\n}\n\n/* Forced colours drop the fill and the inset shadow, so the row takes a real border. */\n@media (forced-colors: active) {\n  .lintje-filter-bar__header { border-bottom: 1px solid CanvasText; }\n}\n", v = class extends n {
+	constructor(...t) {
+		super(...t), this.total = 0, this.modified = 0, this.open = !1, this.scrolled = !1, this.settled = !0, this.scrollable = !1, this.stick = "sticky", this.sentence = [], this.mobile = new r(this, e), this.observer = null, this.observed = void 0, this.wasExpanded = void 0, this.onResize = () => this.measureOverflow(), this.#e = !1, this.#t = 0, this.#n = null, this.onPageScroll = () => {
 			let e = this.renderRoot.querySelector(".lintje-filter-bar__body");
-			e && c(e) || this.act({
+			e && i(e) || this.act({
 				type: "page-scrolled",
 				distance: this.pageScroll() - this.#t
 			});
 		};
 	}
 	static {
-		this.styles = [e, i(_)];
+		this.styles = [l, s(_)];
 	}
 	static {
 		this.properties = {
@@ -83,10 +83,10 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 	willUpdate(e) {
 		if (super.willUpdate(e), !e.has("open") && !e.has("modified")) return;
 		let t = this.renderRoot.querySelector(".lintje-filter-bar__header, .lintje-summary-bar");
-		this.#e = this.#e || t != null && c(t);
+		this.#e = this.#e || t != null && i(t);
 	}
 	updated(e) {
-		this.#e && (this.#e = !1, c(this) || this.renderRoot.querySelector(".lintje-filter-toggle")?.focus());
+		this.#e && (this.#e = !1, i(this) || this.renderRoot.querySelector(".lintje-filter-toggle")?.focus());
 		let n = !this.mobile.matches && m(this.state);
 		if (n !== this.wasExpanded) {
 			let e = this.wasExpanded === void 0;
@@ -99,9 +99,9 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 			this.report(!1);
 			return;
 		}
-		let i = t(r, "--h-topbar", 56);
+		let a = t(r, "--h-topbar", 56);
 		this.observer = new IntersectionObserver(([e]) => this.report(!e.isIntersecting), {
-			rootMargin: `-${i}px 0px 0px 0px`,
+			rootMargin: `-${a}px 0px 0px 0px`,
 			threshold: 0
 		}), this.observer.observe(r);
 	}
@@ -110,14 +110,14 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 	}
 	canPin() {
 		if (this.stick !== "fixed" || this.scrolled) return !0;
-		let e = this.renderRoot.querySelector(".lintje-filter-bar__sentinel"), n = this.renderRoot.querySelector(".lintje-filter-bar"), r = s(), i = r && r !== document.scrollingElement ? r : document.scrollingElement;
+		let e = this.renderRoot.querySelector(".lintje-filter-bar__sentinel"), n = this.renderRoot.querySelector(".lintje-filter-bar"), r = a(), i = r && r !== document.scrollingElement ? r : document.scrollingElement;
 		if (!e || !n || !i) return !0;
-		let a = t(e, "--h-topbar", 56);
+		let o = t(e, "--h-topbar", 56);
 		return g({
 			scrollHeight: i.scrollHeight,
 			viewportHeight: i.clientHeight,
 			lost: n.offsetHeight - t(n, "--h-contextbar", 48),
-			threshold: this.pageScroll() + e.getBoundingClientRect().top - a
+			threshold: this.pageScroll() + e.getBoundingClientRect().top - o
 		});
 	}
 	get state() {
@@ -133,28 +133,28 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
 	#t;
 	#n;
 	pageScroll() {
-		let e = s();
+		let e = a();
 		return e && e !== document.scrollingElement ? e.scrollTop : window.scrollY;
 	}
 	watchPageScroll(e) {
 		if (this.#n?.removeEventListener("scroll", this.onPageScroll), this.#n = null, !e || this.mobile.matches) return;
-		let t = s();
+		let t = a();
 		this.#n = t && t !== document.scrollingElement ? t : window, this.#t = this.pageScroll(), this.#n.addEventListener("scroll", this.onPageScroll, { passive: !0 });
 	}
 	render() {
-		if (this.mobile.matches) return d`<div class="lintje-filter-bar lintje-filter-bar--mobile">
+		if (this.mobile.matches) return u`<div class="lintje-filter-bar lintje-filter-bar--mobile">
         <p class="lintje-filter-bar__mobile-summary">${p(this.sentence)}</p>
       </div>`;
 		let e = m(this.state), t = this.scrolled && this.stick === "fixed";
-		return d`
+		return u`
       <!-- The sentinel sits before the zone, not after it. After the zone it moves along
            when the zone collapses (461 -> 334 px), so when scrolling back up the threshold
            releases 127 px later than it triggered. Before the zone it stays put, and the
            threshold triggers the moment the bar touches the top bar. -->
       <div class="lintje-filter-bar__sentinel" aria-hidden="true"></div>
-      ${t ? d`<div class="lintje-filter-bar__placeholder" aria-hidden="true"></div>` : r}
+      ${t ? u`<div class="lintje-filter-bar__placeholder" aria-hidden="true"></div>` : c}
       <div
-        class=${l({
+        class=${d({
 			"lintje-filter-bar": !0,
 			"is-open": e,
 			"is-settled": e && this.settled,
@@ -180,13 +180,13 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
     `;
 	}
 	renderHeader() {
-		return d`
+		return u`
       <div class="lintje-filter-bar__header">
-        ${u("functioneel-filters", { size: 16 })}
+        ${f("functioneel-filters", { size: 16 })}
         <span class="lintje-filter-bar__title">Filters</span>
         <span class="lintje-filter-bar__hint">gelden voor alle cijfers op deze pagina</span>
         <span class="lintje-filter-bar__spacer"></span>
-        ${this.modified > 0 ? d`<span class="lintje-filter-bar__counter">
+        ${this.modified > 0 ? u`<span class="lintje-filter-bar__counter">
                 <span class="lintje-filter-bar__dot"></span>
                 ${this.modified} van ${this.total} afwijkend
               </span>
@@ -196,13 +196,13 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
                 @click=${() => this.emitLocal("lintje-filters-reset")}
               >
                 Herstel standaard
-              </button>` : r}
+              </button>` : c}
         ${this.renderToggle(!0)}
       </div>
     `;
 	}
 	renderSummaryBar() {
-		return d`<div
+		return u`<div
       class="lintje-summary-bar"
       @click=${(e) => {
 			e.target.closest("button") || this.act({ type: "expand" });
@@ -218,7 +218,7 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
         ${p(this.sentence)}
       </button>
       <span class="lintje-summary-bar__spacer"></span>
-      ${this.modified > 0 ? d`<span class="lintje-summary-bar__counter">
+      ${this.modified > 0 ? u`<span class="lintje-summary-bar__counter">
             <span class="lintje-summary-bar__dot"></span>
             ${this.modified} afwijkend ·
             <button
@@ -228,14 +228,14 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
             >
               herstel
             </button>
-          </span>` : r}
+          </span>` : c}
       ${this.renderToggle(!1)}
     </div>`;
 	}
 	renderToggle(e) {
-		return d`<button
+		return u`<button
       type="button"
-      class=${l({
+      class=${d({
 			"lintje-filter-toggle": !0,
 			"is-expanded": e
 		})}
@@ -245,13 +245,13 @@ var _ = "/*\n * The filter zone's own box: header, controls row, sentence and su
       @click=${() => this.act({ type: e ? "collapse" : "expand" })}
     >
       Filters
-      ${u("functioneel-delta-omlaag", {
+      ${f("functioneel-delta-omlaag", {
 			size: 16,
 			className: "lintje-filter-toggle__chevron"
 		})}
     </button>`;
 	}
 };
-n("lintje-filter-zone", v);
+o("lintje-filter-zone", v);
 //#endregion
 export { v as LintjeFilterZone };

package/dist-elements/tag/footer.js

@@ -1,43 +1,43 @@
-import { Bt as e, Gt as t, Ht as n, I as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, nn as a, nt as o } from "../chunks/base-CbmWxUig.js";
 //#region src/components/frame/footer/footer.css?inline
-var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-footer {\n  background: var(--color-footer-bg);\n  color: var(--color-footer-text);\n  font: var(--text-ui);\n}\n.lintje-footer :focus-visible { outline-color: var(--color-footer-focus); }\n\n/* The text keeps to the content column, as the bars above the page do. */\n.lintje-footer__inner {\n  display: flex; flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-10) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-8);\n}\n\n.lintje-footer__tagline { margin: 0; font: var(--text-h2); }\n\n.lintje-footer__columns {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-footer-column)), 1fr));\n  gap: var(--space-8) var(--grid-gutter);\n}\n.lintje-footer__column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-footer__heading {\n  margin: 0;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n}\n.lintje-footer__list,\n.lintje-footer__meta { list-style: none; margin: 0; padding: 0; }\n.lintje-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-footer__link,\n.lintje-footer__meta-link {\n  display: inline-flex; align-items: center;\n  min-height: var(--h-touch);\n  color: inherit;\n  text-decoration: none;\n}\n/* A list of text links keeps the house style's rhythm: a line high, 12 px apart. */\n.lintje-footer__link { min-height: var(--h-target-text); }\n.lintje-footer__link:hover,\n.lintje-footer__meta-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }\n\n/* The links every page carries, apart from the columns by a line. */\n.lintje-footer__bottom {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-6);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--color-footer-line);\n}\n.lintje-footer__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }\n.lintje-footer__meta-link { font: var(--text-small); }\n/* The full text colour: a muted one would fall under 4.5:1 on the theme's fill. */\n.lintje-footer__note { margin: 0; font: var(--text-small); }\n\n@media (max-width: 767px) {\n  .lintje-footer__inner { padding-top: var(--space-8); }\n  .lintje-footer__columns { grid-template-columns: minmax(0, 1fr); }\n}\n", s = class extends a {
+var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-footer {\n  background: var(--color-footer-bg);\n  color: var(--color-footer-text);\n  font: var(--text-ui);\n}\n.lintje-footer :focus-visible { outline-color: var(--color-footer-focus); }\n\n/* The text keeps to the content column, as the bars above the page do. */\n.lintje-footer__inner {\n  display: flex; flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-10) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-8);\n}\n\n.lintje-footer__tagline { margin: 0; font: var(--text-h2); }\n\n.lintje-footer__columns {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-footer-column)), 1fr));\n  gap: var(--space-8) var(--grid-gutter);\n}\n.lintje-footer__column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-footer__heading {\n  margin: 0;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n}\n.lintje-footer__list,\n.lintje-footer__meta { list-style: none; margin: 0; padding: 0; }\n.lintje-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-footer__link,\n.lintje-footer__meta-link {\n  display: inline-flex; align-items: center;\n  min-height: var(--h-touch);\n  color: inherit;\n  text-decoration: none;\n}\n/* A list of text links keeps the house style's rhythm: a line high, 12 px apart. */\n.lintje-footer__link { min-height: var(--h-target-text); }\n.lintje-footer__link:hover,\n.lintje-footer__meta-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }\n\n/* The links every page carries, apart from the columns by a line. */\n.lintje-footer__bottom {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-6);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--color-footer-line);\n}\n.lintje-footer__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }\n.lintje-footer__meta-link { font: var(--text-small); }\n/* The full text colour: a muted one would fall under 4.5:1 on the theme's fill. */\n.lintje-footer__note { margin: 0; font: var(--text-small); }\n\n@media screen and (max-width: 767px) {\n  .lintje-footer__inner { padding-top: var(--space-8); }\n  .lintje-footer__columns { grid-template-columns: minmax(0, 1fr); }\n}\n", c = class extends t {
 	static {
-		this.styles = n(o);
+		this.styles = [r(s), r(o)];
 	}
 	static {
 		this.properties = { data: { attribute: !1 } };
 	}
-	onLink(e, t) {
-		r(e) && this.followLink(t, e);
+	onLink(t, n) {
+		e(t) && this.followLink(n, t);
 	}
 	link(e, t) {
-		return i`<a class=${t} href=${e.href} @click=${(t) => this.onLink(t, e.href)}
+		return a`<a class=${t} href=${e.href} @click=${(t) => this.onLink(t, e.href)}
       >${e.label}</a
     >`;
 	}
 	render() {
-		let e = this.data ?? {}, n = e.columns ?? [], r = e.links ?? [];
-		return i`<footer class="lintje-footer">
+		let e = this.data ?? {}, t = e.columns ?? [], n = e.links ?? [];
+		return a`<footer class="lintje-footer">
       <div class="lintje-footer__inner">
-        ${e.tagline ? i`<p class="lintje-footer__tagline">${e.tagline}</p>` : t}
-        ${n.length ? i`<div class="lintje-footer__columns">
-                ${n.map((e) => i`<section class="lintje-footer__column">
+        ${e.tagline ? a`<p class="lintje-footer__tagline">${e.tagline}</p>` : i}
+        ${t.length ? a`<div class="lintje-footer__columns">
+                ${t.map((e) => a`<section class="lintje-footer__column">
                     <h2 class="lintje-footer__heading">${e.heading}</h2>
                     <ul class="lintje-footer__list">
-                      ${e.links.map((e) => i`<li>${this.link(e, "lintje-footer__link")}</li>`)}
+                      ${e.links.map((e) => a`<li>${this.link(e, "lintje-footer__link")}</li>`)}
                     </ul>
                   </section>`)}
-              </div>` : t}
-        ${r.length || e.note ? i`<div class="lintje-footer__bottom">
-                ${r.length ? i`<ul class="lintje-footer__meta">
-                        ${r.map((e) => i`<li>${this.link(e, "lintje-footer__meta-link")}</li>`)}
-                      </ul>` : t}
-                ${e.note ? i`<p class="lintje-footer__note">${e.note}</p>` : t}
-              </div>` : t}
+              </div>` : i}
+        ${n.length || e.note ? a`<div class="lintje-footer__bottom">
+                ${n.length ? a`<ul class="lintje-footer__meta">
+                        ${n.map((e) => a`<li>${this.link(e, "lintje-footer__meta-link")}</li>`)}
+                      </ul>` : i}
+                ${e.note ? a`<p class="lintje-footer__note">${e.note}</p>` : i}
+              </div>` : i}
       </div>
     </footer>`;
 	}
 };
-e("lintje-footer", s);
+n("lintje-footer", c);
 //#endregion
-export { s as LintjeFooter };
+export { c as LintjeFooter };

package/dist-elements/tag/form-actions.js

@@ -1,8 +1,8 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Lt as a, Pt as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
-import { n as u, t as d } from "../chunks/controls-B1455oPG.js";
+import { Gt as e, Jt as t, Kt as n, Ut as r, Yt as i, Zt as a, en as o, lt as s, nn as c, nt as l, ut as u } from "../chunks/base-CbmWxUig.js";
+import { n as d, t as f } from "../chunks/controls-DxmnDSBr.js";
 //#region src/components/forms/form-actions/form-actions.css?inline
-var f = "/* The host is the sticky box. z-index 20: above the form, below the shell's menu (30) and popovers (46). */\n:host {\n  display: block;\n  min-width: 0;\n  position: sticky;\n  bottom: 0;\n  z-index: 20;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 2px solid var(--color-accent-line);\n}\n\n/* The words carry the state; the dot and the check only support it (rule 13). */\n.lintje-form-actions__status {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-actions__dot {\n  flex: none;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-attention);\n}\n.lintje-form-actions__check {\n  flex: none;\n  color: var(--color-success);\n}\n\n.lintje-form-actions__buttons {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n\n/* Phone: the bar sets `block` on each button, so it fills its row. */\n@media (max-width: 767px) {\n  .lintje-form-actions {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .lintje-form-actions__buttons {\n    flex-direction: column-reverse;\n    margin-left: 0;\n  }\n}\n\n/* Forced colours: the dot is a fill only, which the palette drops; it keeps its drawing. */\n@media (forced-colors: active) {\n  .lintje-form-actions__dot { forced-color-adjust: none; background: CanvasText; }\n}\n", p = "Wijzigingen nog niet opgeslagen", m = "Bezig met opslaan";
-function h(e) {
+var p = "/* The host is the sticky box. z-index 20: above the form, below the shell's menu (30) and popovers (46). */\n:host {\n  display: block;\n  min-width: 0;\n  position: sticky;\n  bottom: 0;\n  z-index: 20;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 2px solid var(--color-accent-line);\n}\n\n/* The words carry the state; the dot and the check only support it (rule 13). */\n.lintje-form-actions__status {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-actions__dot {\n  flex: none;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-attention);\n}\n.lintje-form-actions__check {\n  flex: none;\n  color: var(--color-success);\n}\n\n.lintje-form-actions__buttons {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n\n/* Phone: the bar sets `block` on each button, so it fills its row. */\n@media screen and (max-width: 767px) {\n  .lintje-form-actions {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .lintje-form-actions__buttons {\n    flex-direction: column-reverse;\n    margin-left: 0;\n  }\n}\n\n/* Forced colours: the dot is a fill only, which the palette drops; it keeps its drawing. */\n@media (forced-colors: active) {\n  .lintje-form-actions__dot { forced-color-adjust: none; background: CanvasText; }\n}\n", m = "Wijzigingen nog niet opgeslagen", h = "Bezig met opslaan";
+function g(e) {
 	if (!e) return "";
 	if (typeof e == "string" && /^\d{1,2}:\d{2}$/.test(e)) return e;
 	let t = e instanceof Date ? e : new Date(e);
@@ -10,25 +10,29 @@ function h(e) {
 	let n = (e) => String(e).padStart(2, "0");
 	return `${n(t.getHours())}:${n(t.getMinutes())}`;
 }
-var g = /* @__PURE__ */ new Map(), _ = null;
-function v() {
-	let e = Math.max(0, ...g.values());
-	if (g.size === 0) {
-		_ && (_.element.style.scrollPaddingBottom = _.before), _ = null;
+var _ = /* @__PURE__ */ new Map(), v = null;
+function y() {
+	let e = Math.max(0, ..._.values());
+	if (_.size === 0) {
+		v && (v.element.style.scrollPaddingBottom = v.before), v = null;
 		return;
 	}
-	let t = o();
-	t && (_?.element !== t && (_ && (_.element.style.scrollPaddingBottom = _.before), _ = {
+	let t = r();
+	t && (v?.element !== t && (v && (v.element.style.scrollPaddingBottom = v.before), v = {
 		element: t,
 		before: t.style.scrollPaddingBottom
 	}), t.style.scrollPaddingBottom = `${e}px`);
 }
-var y = class extends l {
-	constructor(...e) {
-		super(...e), this.state = "", this.#e = new a(this, i), this.#t = new u("busy"), this.#n = new u("disabled"), this.#r = new d("block"), this.#i = null;
+var b = class extends t {
+	constructor(...t) {
+		super(...t), this.state = "", this.#e = new n(this, e), this.#t = new d("busy"), this.#n = new d("disabled"), this.#r = new f("block"), this.#i = null;
 	}
 	static {
-		this.styles = [e, r(f)];
+		this.styles = [
+			s,
+			a(p),
+			a(l)
+		];
 	}
 	static {
 		this.properties = {
@@ -48,8 +52,8 @@ var y = class extends l {
 	#r;
 	#i;
 	connectedCallback() {
-		super.connectedCallback(), g.set(this, this.offsetHeight), v(), typeof ResizeObserver < "u" && (this.#i = new ResizeObserver(() => {
-			this.isConnected && (g.set(this, this.offsetHeight), v());
+		super.connectedCallback(), _.set(this, this.offsetHeight), y(), typeof ResizeObserver < "u" && (this.#i = new ResizeObserver(() => {
+			this.isConnected && (_.set(this, this.offsetHeight), y());
 		}), this.#i.observe(this));
 	}
 	get buttons() {
@@ -60,7 +64,7 @@ var y = class extends l {
 		return e.filter((e) => e.getAttribute("variant") === "primary").at(-1) ?? e.at(-1) ?? null;
 	}
 	disconnectedCallback() {
-		this.#i?.disconnect(), this.#i = null, g.delete(this), v(), this.#t.release(), this.#n.release(), this.#r.release(), super.disconnectedCallback();
+		this.#i?.disconnect(), this.#i = null, _.delete(this), y(), this.#t.release(), this.#n.release(), this.#r.release(), super.disconnectedCallback();
 	}
 	updated() {
 		this.#a();
@@ -73,19 +77,19 @@ var y = class extends l {
 		this.#e.matches ? this.#r.apply(this.buttons, !0) : this.#r.release();
 	}
 	renderStatus() {
-		let e = h(this.savedAt);
+		let e = g(this.savedAt);
 		switch (this.state) {
-			case "dirty": return c`<span class="lintje-form-actions__dot" aria-hidden="true"></span>${p}`;
-			case "busy": return c`${m}`;
+			case "dirty": return c`<span class="lintje-form-actions__dot" aria-hidden="true"></span>${m}`;
+			case "busy": return c`${h}`;
 			case "saved":
 			case "draft": {
 				let t = this.state === "draft" ? "Concept opgeslagen" : "Opgeslagen";
-				return c`${s("functioneel-vinkje", {
+				return c`${u("functioneel-vinkje", {
 					size: 16,
 					className: "lintje-form-actions__check"
 				})}${e ? `${t} om ${e}` : t}`;
 			}
-			default: return n;
+			default: return o;
 		}
 	}
 	render() {
@@ -97,6 +101,6 @@ var y = class extends l {
     </div>`;
 	}
 };
-t("lintje-form-actions", y);
+i("lintje-form-actions", b);
 //#endregion
-export { y as LintjeFormActions, h as clockTime };
+export { b as LintjeFormActions, g as clockTime };

package/dist-elements/tag/form-section.js

@@ -1,7 +1,7 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
-import { a as o, n as s } from "../chunks/controls-B1455oPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { a as o, n as s } from "../chunks/controls-DxmnDSBr.js";
 //#region src/components/forms/form-section/form-section.css?inline
-var c = "/* Slotted children keep clear of the sticky top bar when the error summary scrolls to them. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n::slotted(*) { scroll-margin-top: var(--h-sticky); }\n\n/* ------------------------------------------------------------------------ */\n\n/* The legend floats at full width so it lays out as a block, not on the fieldset's border. */\n.lintje-form-section {\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  border: 0;\n}\n.lintje-form-section__legend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  font: var(--text-h2);\n  color: var(--color-text-primary);\n}\n.lintje-form-section__description {\n  clear: both;\n  padding-top: var(--space-2);\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-section__fields {\n  clear: both;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding-top: var(--space-5);\n}\n\n/* Setting rows read as a list: a line between two of them. */\n.lintje-form-section__fields ::slotted([layout='row']:not(:first-child)) {\n  padding-top: var(--space-5);\n  border-top: 1px solid var(--color-border-default);\n}\n\n.lintje-form-section--tile {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-form-section--tile .lintje-form-section__legend { font: var(--text-tile-title); }\n/* The heading takes the legend's look; it is there for the outline, not to restyle. */\n.lintje-form-section__heading { margin: 0; font: inherit; color: inherit; }\n", l = class extends a {
+var c = "/* Slotted children keep clear of the sticky top bar when the error summary scrolls to them. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n::slotted(*) { scroll-margin-top: var(--h-sticky); }\n\n/* ------------------------------------------------------------------------ */\n\n/* The legend floats at full width so it lays out as a block, not on the fieldset's border. */\n.lintje-form-section {\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  border: 0;\n}\n.lintje-form-section__legend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  font: var(--text-h2);\n  color: var(--color-text-primary);\n}\n.lintje-form-section__description {\n  clear: both;\n  padding-top: var(--space-2);\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-section__fields {\n  clear: both;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding-top: var(--space-5);\n}\n\n/* Setting rows read as a list: a line between two of them. */\n.lintje-form-section__fields ::slotted([layout='row']:not(:first-child)) {\n  padding-top: var(--space-5);\n  border-top: 1px solid var(--color-border-default);\n}\n\n.lintje-form-section--tile {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-form-section--tile .lintje-form-section__legend { font: var(--text-tile-title); }\n/* The heading takes the legend's look; it is there for the outline, not to restyle. */\n.lintje-form-section__heading { margin: 0; font: inherit; color: inherit; }\n", l = class extends e {
 	constructor(...e) {
 		super(...e), this.heading = "", this.variant = "plain", this.disabled = !1, this.#e = new s("disabled");
 	}
@@ -34,11 +34,11 @@ var c = "/* Slotted children keep clear of the sticky top bar when the error sum
 	}
 	render() {
 		return i`<fieldset
-      class=${r({
+      class=${a({
 			"lintje-form-section": !0,
 			"lintje-form-section--tile": this.variant === "tile"
 		})}
-      aria-describedby=${this.description ? "lintje-form-section-description" : t}
+      aria-describedby=${this.description ? "lintje-form-section-description" : r}
       ?disabled=${this.disabled}
     >
       <legend class="lintje-form-section__legend">
@@ -57,6 +57,6 @@ var c = "/* Slotted children keep clear of the sticky top bar when the error sum
     </fieldset>`;
 	}
 };
-e("lintje-form-section", l);
+t("lintje-form-section", l);
 //#endregion
 export { l as LintjeFormSection };

package/dist-elements/tag/form.js

@@ -1,5 +1,5 @@
-import { Bt as e, Gt as t, H as n, Ht as r, It as i, Lt as a, U as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
-import { c as l, d as u, i as d, l as f, n as p, r as m, u as h } from "../chunks/controls-B1455oPG.js";
+import { Gt as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, nn as c } from "../chunks/base-CbmWxUig.js";
+import { c as l, d as u, i as d, l as f, n as p, r as m, u as h } from "../chunks/controls-DxmnDSBr.js";
 import "./error-summary.js";
 import "./form-actions.js";
 //#region src/components/forms/form/form.css?inline
@@ -28,9 +28,9 @@ function S(e, t, n = Date.now()) {
 		return null;
 	}
 }
-var C = class extends c {
-	constructor(...e) {
-		super(...e), this.values = {}, this.busy = !1, this.draftTtl = 24, this.dirty = !1, this.phase = "", this.#e = {}, this.#t = !1, this.#n = !1, this.#r = null, this.#i = !1, this.#a = null, this.#o = new MutationObserver((e) => {
+var C = class extends t {
+	constructor(...t) {
+		super(...t), this.values = {}, this.busy = !1, this.draftTtl = 24, this.dirty = !1, this.phase = "", this.#e = {}, this.#t = !1, this.#n = !1, this.#r = null, this.#i = !1, this.#a = null, this.#o = new MutationObserver((e) => {
 			let t = [], n = [];
 			for (let r of e) {
 				for (let e of r.addedNodes) t.push(...f(e));
@@ -42,7 +42,7 @@ var C = class extends c {
 				let t = d(e);
 				!this.contains(e) && !r.has(t) && this.forget(t);
 			}
-		}), this.#s = new a(this, i), this.#c = new p("disabled"), this.#l = new p("stacked"), this.#u = (e) => {
+		}), this.#s = new n(this, e), this.#c = new p("disabled"), this.#l = new p("stacked"), this.#u = (e) => {
 			let t = e.target;
 			if (t === this) return;
 			let n = d(t);
@@ -68,7 +68,7 @@ var C = class extends c {
 		}, this.#h = "", this.#E = [], this.#D = !1, this.#O = !1;
 	}
 	static {
-		this.styles = r(g);
+		this.styles = o(g);
 	}
 	static {
 		this.properties = {
@@ -243,7 +243,7 @@ var C = class extends c {
 		return t;
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.#n || (this.#n = !0, this.#g(), this.#b(Object.keys(this.#e).length ? "dirty" : "")), e.has("savedAt") && this.hasUpdated && this.savedAt && this.phase !== "saved" && this.#y(), e.has("errors") && (this.#E = this.#T()), e.has("busy") && this.busy && (this.#a = o(this) ? n() : null), e.has("dirty") && (this.dirty ? window.addEventListener("beforeunload", this.#m) : window.removeEventListener("beforeunload", this.#m));
+		super.willUpdate(e), this.#n || (this.#n = !0, this.#g(), this.#b(Object.keys(this.#e).length ? "dirty" : "")), e.has("savedAt") && this.hasUpdated && this.savedAt && this.phase !== "saved" && this.#y(), e.has("errors") && (this.#E = this.#T()), e.has("busy") && this.busy && (this.#a = r(this) ? a() : null), e.has("dirty") && (this.dirty ? window.addEventListener("beforeunload", this.#m) : window.removeEventListener("beforeunload", this.#m));
 	}
 	#E;
 	#D;
@@ -260,7 +260,7 @@ var C = class extends c {
 	#A() {
 		let e = this.#a;
 		this.#a = null, e && requestAnimationFrame(() => {
-			let t = n();
+			let t = a();
 			t && t !== document.body || e.isConnected && e.focus();
 		});
 	}
@@ -275,10 +275,10 @@ var C = class extends c {
 		for (let n of this.querySelectorAll("lintje-form-actions")) n.state = e, n.savedAt = t;
 	}
 	render() {
-		return s`<form
+		return c`<form
       class="lintje-form"
       novalidate
-      aria-busy=${this.busy ? "true" : t}
+      aria-busy=${this.busy ? "true" : s}
       @submit=${(e) => {
 			e.preventDefault(), this.submit();
 		}}
@@ -297,6 +297,6 @@ var C = class extends c {
     </form>`;
 	}
 };
-e("lintje-form", C);
+i("lintje-form", C);
 //#endregion
 export { _ as DRAFT_PREFIX, C as LintjeForm, S as readDraft };

package/dist-elements/tag/gallery.js

@@ -1,6 +1,6 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
 //#region src/components/content/gallery/gallery.css?inline
-var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-gallery { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-gallery__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }\n/* A screen whole, on the subtle surface: a screenshot is never cropped. */\n.lintje-gallery__image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: contain;\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  box-sizing: border-box;\n}\n.lintje-gallery__caption { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-gallery__thumbs {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--w-gallery-thumb), 1fr));\n  gap: var(--space-2);\n}\n.lintje-gallery__thumb {\n  display: block;\n  width: 100%;\n  padding: 0;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-subtle);\n  cursor: pointer;\n}\n.lintje-gallery__thumb:hover { border-color: var(--color-border-heavy); }\n/* The chosen one carries the selected edge, and aria-current says it in words. */\n.lintje-gallery__thumb.is-selected { outline: 2px solid var(--color-accent-line); outline-offset: -2px; }\n.lintje-gallery__thumb:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }\n.lintje-gallery__thumb-image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: cover;\n  object-position: top left;\n}\n\n@media (forced-colors: active) {\n  .lintje-gallery__thumb.is-selected { outline-color: Highlight; }\n}\n", s = class extends a {
+var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-gallery { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-gallery__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }\n/* A screen whole, on the subtle surface: a screenshot is never cropped. */\n.lintje-gallery__image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: contain;\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  box-sizing: border-box;\n}\n.lintje-gallery__caption { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-gallery__thumbs {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--w-gallery-thumb), 1fr));\n  gap: var(--space-2);\n}\n.lintje-gallery__thumb {\n  display: block;\n  width: 100%;\n  padding: 0;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-subtle);\n  cursor: pointer;\n}\n.lintje-gallery__thumb:hover { border-color: var(--color-border-heavy); }\n/* The chosen one carries the selected edge, and aria-current says it in words. */\n.lintje-gallery__thumb.is-selected { outline: 2px solid var(--color-accent-line); outline-offset: -2px; }\n.lintje-gallery__thumb:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }\n.lintje-gallery__thumb-image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: cover;\n  object-position: top left;\n}\n\n@media (forced-colors: active) {\n  .lintje-gallery__thumb.is-selected { outline-color: Highlight; }\n}\n", s = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this.selected = 0, this.label = "Afbeeldingen", this.spoken = "";
 	}
@@ -26,35 +26,35 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	}
 	render() {
 		let e = this.items;
-		if (!e.length) return t;
-		let n = this.shown, a = e[n];
+		if (!e.length) return r;
+		let t = this.shown, n = e[t];
 		return i`<div class="lintje-gallery">
       <figure class="lintje-gallery__figure">
-        <img class="lintje-gallery__image" src=${a.src} alt=${a.alt} />
-        ${a.caption ? i`<figcaption class="lintje-gallery__caption">${a.caption}</figcaption>` : t}
+        <img class="lintje-gallery__image" src=${n.src} alt=${n.alt} />
+        ${n.caption ? i`<figcaption class="lintje-gallery__caption">${n.caption}</figcaption>` : r}
       </figure>
       ${e.length > 1 ? i`<ul class="lintje-gallery__thumbs" aria-label=${this.label}>
-              ${e.map((a, o) => i`<li>
+              ${e.map((n, o) => i`<li>
                   <button
                     type="button"
-                    class=${r({
+                    class=${a({
 			"lintje-gallery__thumb": !0,
-			"is-selected": o === n
+			"is-selected": o === t
 		})}
-                    aria-current=${o === n ? "true" : t}
+                    aria-current=${o === t ? "true" : r}
                     @click=${() => this.choose(o)}
                   >
-                    <img class="lintje-gallery__thumb-image" src=${a.src} alt="" />
+                    <img class="lintje-gallery__thumb-image" src=${n.src} alt="" />
                     <span class="visually-hidden"
-                      >Afbeelding ${o + 1} van ${e.length}: ${a.caption || a.alt}</span
+                      >Afbeelding ${o + 1} van ${e.length}: ${n.caption || n.alt}</span
                     >
                   </button>
                 </li>`)}
             </ul>
-              <span class="visually-hidden" role="status">${this.spoken}</span>` : t}
+              <span class="visually-hidden" role="status">${this.spoken}</span>` : r}
     </div>`;
 	}
 };
-e("lintje-gallery", s);
+t("lintje-gallery", s);
 //#endregion
 export { s as LintjeGallery };

package/dist-elements/tag/grid-item.js

@@ -1 +1 @@
-export { y as LintjeGridItem } from "../chunks/base-Bg-IFOPG.js";
+export { S as LintjeGridItem } from "../chunks/base-CbmWxUig.js";

package/dist-elements/tag/grid.js

@@ -1 +1 @@
-export { b as LintjeGrid } from "../chunks/base-Bg-IFOPG.js";
+export { C as LintjeGrid } from "../chunks/base-CbmWxUig.js";