lintje 0.1.1

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

@@ -0,0 +1,117 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Mt as a, Nt as o, et as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+import { t as l } from "../chunks/focus-trap-w3vCamJ6.js";
+import { t as u } from "../chunks/dialog-close-u75fVEw4.js";
+import { t as d } from "../chunks/sentence-CLNJOeXz.js";
+//#region src/components/filters/filter-sheet/filter-sheet.css?inline
+var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.css`. */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-sheet__scrim {\n  position: fixed; inset: 0; z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n.lintje-filter-sheet {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  max-height: 88vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-filter-sheet:focus { outline: none; }\n\n.lintje-filter-sheet__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-filter);\n}\n.lintje-filter-sheet__title { font: var(--text-h2); }\n.lintje-filter-sheet__hint { font: var(--text-small); color: var(--color-text-muted); flex: 1; }\n\n.lintje-filter-sheet__body {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--space-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n\n.lintje-filter-sheet__summary {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  font: var(--text-ui); line-height: 1.4;\n  padding-top: var(--space-2);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-sheet__footer {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-4);\n  border-top: 1px solid var(--color-border-filter);\n  background: var(--color-bg-surface);\n}\n/* The <button> reading the height is in the `lintje-button` shadow root: set the token here. */\n.lintje-filter-sheet__action { flex: 1; height: var(--h-touch); --h-button: var(--h-touch); }\n", p = class extends c {
+	constructor(...e) {
+		super(...e), this.open = !1, this.resetDisabled = !1, this.applyDisabled = !1, this.sentence = [], this.locked = null, this.#e = new l(), this.onKeyDown = (e) => {
+			this.open && e.key === "Escape" && this.#e.isTopmost() && (this.hasOpenPopover() || this.close());
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			r(u),
+			r(f)
+		];
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			resetDisabled: {
+				type: Boolean,
+				attribute: "reset-disabled"
+			},
+			applyDisabled: {
+				type: Boolean,
+				attribute: "apply-disabled"
+			},
+			sentence: { attribute: !1 },
+			scrollLock: { attribute: !1 }
+		};
+	}
+	#e;
+	hasOpenPopover() {
+		return (this.renderRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).some((e) => e.hasAttribute("open") || e.querySelector("[open]") !== null);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this.onKeyDown);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.onKeyDown), this.unlock(), this.#e.deactivate(), super.disconnectedCallback();
+	}
+	close() {
+		this.emitLocal("lintje-sheet-close");
+	}
+	lock() {
+		this.locked ||= this.scrollLock ? a(this.scrollLock) : o();
+	}
+	unlock() {
+		this.locked?.(), this.locked = null;
+	}
+	updated(e) {
+		if (e.has("open")) {
+			if (this.open) {
+				this.lock();
+				let e = this.renderRoot.querySelector(".lintje-filter-sheet");
+				e && this.#e.activate(e);
+			} else this.unlock(), this.#e.deactivate();
+		}
+	}
+	render() {
+		return this.open ? i`
+      <div class="lintje-filter-sheet__scrim" @click=${() => this.close()}></div>
+      <div
+        class="lintje-filter-sheet"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Filters"
+        tabindex="-1"
+      >
+        <div class="lintje-filter-sheet__header">
+          <h2 class="lintje-filter-sheet__title">Filters</h2>
+          <span class="lintje-filter-sheet__hint">gelden voor alle cijfers</span>
+          <button
+            type="button"
+            aria-label="Filters sluiten"
+            class="lintje-dialog-close lintje-filter-sheet__close"
+            @click=${() => this.close()}
+          >
+            ${s("functioneel-kruis", { size: 16 })}
+          </button>
+        </div>
+
+        <div class="lintje-filter-sheet__body">
+          <slot></slot>
+          <p class="lintje-filter-sheet__summary">${d(this.sentence)}</p>
+        </div>
+
+        <div class="lintje-filter-sheet__footer">
+          <lintje-button
+            variant="tertiary"
+            block
+            class="lintje-filter-sheet__action"
+            ?disabled=${this.resetDisabled}
+            @click=${() => this.emitLocal("lintje-filters-reset")}
+            >Herstel standaard</lintje-button
+          >
+          <lintje-button
+            variant="primary"
+            block
+            class="lintje-filter-sheet__action"
+            ?disabled=${this.applyDisabled}
+            @click=${() => this.emitLocal("lintje-filters-apply")}
+            >Toepassen</lintje-button
+          >
+        </div>
+      </div>
+    ` : n;
+	}
+};
+t("lintje-filter-sheet", p);
+//#endregion
+export { p as LintjeFilterSheet };

package/dist-elements/tag/filter-zone.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/filters/filter-zone/filter-zone.js'

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

@@ -0,0 +1,257 @@
+import { $ as e, A as t, Bt as n, Gt as r, Ht as i, It as a, Kt as o, Lt as s, Pt as c, U as l, Z as u, et as d, zt as f } from "../chunks/base-rBLTcEIv.js";
+import { t as p } from "../chunks/sentence-CLNJOeXz.js";
+function m(e) {
+	return e.open;
+}
+function h(e, t) {
+	switch (t.type) {
+		case "expand": return {
+			...e,
+			open: !0
+		};
+		case "collapse": return {
+			...e,
+			open: !1
+		};
+		case "scrolled": return {
+			...e,
+			scrolled: t.scrolled
+		};
+		case "page-scrolled": return Math.abs(t.distance) > 24 ? {
+			...e,
+			open: !1
+		} : e;
+	}
+}
+function g(e) {
+	return e.scrollHeight - e.viewportHeight - e.lost >= e.threshold;
+}
+//#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 s(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 = () => {
+			let e = this.renderRoot.querySelector(".lintje-filter-bar__body");
+			e && l(e) || this.act({
+				type: "page-scrolled",
+				distance: this.pageScroll() - this.#t
+			});
+		};
+	}
+	static {
+		this.styles = [e, i(_)];
+	}
+	static {
+		this.properties = {
+			total: { type: Number },
+			modified: { type: Number },
+			open: { type: Boolean },
+			scrolled: { type: Boolean },
+			stick: { type: String },
+			sentence: { attribute: !1 },
+			settled: { state: !0 },
+			scrollable: { state: !0 }
+		};
+	}
+	#e;
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this.onResize);
+	}
+	disconnectedCallback() {
+		this.stopObserving(), this.watchPageScroll(!1), clearTimeout(this.settleTimer), window.removeEventListener("resize", this.onResize), super.disconnectedCallback();
+	}
+	measureOverflow() {
+		let e = this.renderRoot.querySelector(".lintje-filter-bar__body-inner"), n = this.renderRoot.querySelector(".lintje-filter-bar__header, .lintje-summary-bar");
+		if (!e || !n) {
+			this.scrollable = !1;
+			return;
+		}
+		let r = t(e, "--h-topbar", 56);
+		this.scrollable = n.offsetHeight + e.offsetHeight > window.innerHeight - r;
+	}
+	timeSettling(e) {
+		if (clearTimeout(this.settleTimer), !e) {
+			this.settled = !1;
+			return;
+		}
+		let t = this.renderRoot.querySelector(".lintje-filter-bar__body"), n = t ? parseFloat(getComputedStyle(t).transitionDuration) * 1e3 : 0;
+		this.settled = !(n > 0), this.settled || (this.settleTimer = setTimeout(() => this.settled = !0, n));
+	}
+	stopObserving() {
+		this.observer?.disconnect(), this.observer = null, this.observed = void 0;
+	}
+	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 && l(t);
+	}
+	updated(e) {
+		this.#e && (this.#e = !1, l(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;
+			this.wasExpanded = n, this.watchPageScroll(n), e || this.timeSettling(n);
+		}
+		this.measureOverflow();
+		let r = this.renderRoot.querySelector(".lintje-filter-bar__sentinel") ?? null;
+		if (!e.has("open") && r === this.observed) return;
+		if (this.stopObserving(), this.observed = r, !r || this.mobile.matches) {
+			this.report(!1);
+			return;
+		}
+		let i = t(r, "--h-topbar", 56);
+		this.observer = new IntersectionObserver(([e]) => this.report(!e.isIntersecting), {
+			rootMargin: `-${i}px 0px 0px 0px`,
+			threshold: 0
+		}), this.observer.observe(r);
+	}
+	report(e) {
+		this.emitLocal("lintje-zone-scrolled-change", e && this.canPin());
+	}
+	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 = c(), i = r && r !== document.scrollingElement ? r : document.scrollingElement;
+		if (!e || !n || !i) return !0;
+		let a = 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
+		});
+	}
+	get state() {
+		return {
+			open: this.open,
+			scrolled: this.scrolled
+		};
+	}
+	act(e) {
+		let t = h(this.state, e);
+		t.open !== this.open && this.emitLocal("lintje-zone-open-change", t.open);
+	}
+	#t;
+	#n;
+	pageScroll() {
+		let e = c();
+		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 = c();
+		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 o`<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 o`
+      <!-- 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 ? o`<div class="lintje-filter-bar__placeholder" aria-hidden="true"></div>` : r}
+      <div
+        class=${u({
+			"lintje-filter-bar": !0,
+			"is-open": e,
+			"is-settled": e && this.settled,
+			"is-sticky": this.scrolled,
+			"is-stuck-open": this.scrolled && e,
+			"is-scrollable": this.scrollable,
+			"lintje-filter-bar--fixed": this.stick === "fixed",
+			"lintje-filter-bar--wrap": this.total > 4
+		})}
+      >
+        ${e ? this.renderHeader() : this.renderSummaryBar()}
+        <!-- The body stays in the DOM in both states. A height only transitions between
+             two values of one element, so swapping the body for the summary bar — what
+             this did until now — can never be anything but a snap. It is the grid row
+             that opens and closes (0fr to 1fr); see filter-zone.css. -->
+        <div class="lintje-filter-bar__body" id="filter-body">
+          <div class="lintje-filter-bar__body-inner">
+            <div class="lintje-filter-bar__controls"><slot></slot></div>
+            <p class="lintje-filter-bar__summary">${p(this.sentence)}</p>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	renderHeader() {
+		return o`
+      <div class="lintje-filter-bar__header">
+        ${d("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 ? o`<span class="lintje-filter-bar__counter">
+                <span class="lintje-filter-bar__dot"></span>
+                ${this.modified} van ${this.total} afwijkend
+              </span>
+              <button
+                type="button"
+                class="lintje-filter-bar__reset"
+                @click=${() => this.emitLocal("lintje-filters-reset")}
+              >
+                Herstel standaard
+              </button>` : r}
+        ${this.renderToggle(!0)}
+      </div>
+    `;
+	}
+	renderSummaryBar() {
+		return o`<div
+      class="lintje-summary-bar"
+      @click=${(e) => {
+			e.target.closest("button") || this.act({ type: "expand" });
+		}}
+    >
+      <button
+        type="button"
+        class="lintje-summary-bar__sentence"
+        aria-expanded="false"
+        aria-controls="filter-body"
+        @click=${() => this.act({ type: "expand" })}
+      >
+        ${p(this.sentence)}
+      </button>
+      <span class="lintje-summary-bar__spacer"></span>
+      ${this.modified > 0 ? o`<span class="lintje-summary-bar__counter">
+            <span class="lintje-summary-bar__dot"></span>
+            ${this.modified} afwijkend ·
+            <button
+              type="button"
+              class="lintje-summary-bar__reset"
+              @click=${() => this.emitLocal("lintje-filters-reset")}
+            >
+              herstel
+            </button>
+          </span>` : r}
+      ${this.renderToggle(!1)}
+    </div>`;
+	}
+	renderToggle(e) {
+		return o`<button
+      type="button"
+      class=${u({
+			"lintje-filter-toggle": !0,
+			"is-expanded": e
+		})}
+      aria-expanded=${e}
+      aria-controls="filter-body"
+      aria-label=${e ? "Filters verbergen" : "Filters tonen"}
+      @click=${() => this.act({ type: e ? "collapse" : "expand" })}
+    >
+      Filters
+      ${d("functioneel-delta-omlaag", {
+			size: 16,
+			className: "lintje-filter-toggle__chevron"
+		})}
+    </button>`;
+	}
+};
+n("lintje-filter-zone", v);
+//#endregion
+export { v as LintjeFilterZone };

package/dist-elements/tag/footer.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/frame/footer/footer.js'

package/dist-elements/tag/footer.js

@@ -0,0 +1,43 @@
+import { Bt as e, Gt as t, Ht as n, I as r, Kt as i, zt as a } from "../chunks/base-rBLTcEIv.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 {
+	static {
+		this.styles = n(o);
+	}
+	static {
+		this.properties = { data: { attribute: !1 } };
+	}
+	onLink(e, t) {
+		r(e) && this.followLink(t, e);
+	}
+	link(e, t) {
+		return i`<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">
+      <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">
+                    <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>`)}
+                    </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>
+    </footer>`;
+	}
+};
+e("lintje-footer", s);
+//#endregion
+export { s as LintjeFooter };

package/dist-elements/tag/form-actions.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/forms/form-actions/form-actions.js'

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

@@ -0,0 +1,102 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Kt as a, Lt as o, Pt as s, et as c, zt as l } from "../chunks/base-rBLTcEIv.js";
+import { n as u, t as d } from "../chunks/controls-B1455oPG.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) {
+	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);
+	if (Number.isNaN(t.getTime())) return "";
+	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;
+		return;
+	}
+	let t = s();
+	t && (_?.element !== t && (_ && (_.element.style.scrollPaddingBottom = _.before), _ = {
+		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 o(this, i), this.#t = new u("busy"), this.#n = new u("disabled"), this.#r = new d("block"), this.#i = null;
+	}
+	static {
+		this.styles = [e, r(f)];
+	}
+	static {
+		this.properties = {
+			state: {
+				type: String,
+				reflect: !0
+			},
+			savedAt: {
+				type: String,
+				attribute: "saved-at"
+			}
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#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());
+		}), this.#i.observe(this));
+	}
+	get buttons() {
+		return Array.from(this.querySelectorAll("lintje-button"));
+	}
+	get primaryButton() {
+		let e = this.buttons;
+		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();
+	}
+	updated() {
+		this.#a();
+	}
+	#a() {
+		if (this.state === "busy") {
+			let e = this.primaryButton;
+			this.#t.apply(e ? [e] : [], !0), this.#n.apply(this.buttons.filter((t) => t !== e), !0);
+		} else this.#t.release(), this.#n.release();
+		this.#e.matches ? this.#r.apply(this.buttons, !0) : this.#r.release();
+	}
+	renderStatus() {
+		let e = h(this.savedAt);
+		switch (this.state) {
+			case "dirty": return a`<span class="lintje-form-actions__dot" aria-hidden="true"></span>${p}`;
+			case "busy": return a`${m}`;
+			case "saved":
+			case "draft": {
+				let t = this.state === "draft" ? "Concept opgeslagen" : "Opgeslagen";
+				return a`${c("functioneel-vinkje", {
+					size: 16,
+					className: "lintje-form-actions__check"
+				})}${e ? `${t} om ${e}` : t}`;
+			}
+			default: return n;
+		}
+	}
+	render() {
+		return a`<div class="lintje-form-actions">
+      <div class="lintje-form-actions__status" role="status">${this.renderStatus()}</div>
+      <div class="lintje-form-actions__buttons">
+        <slot @slotchange=${() => this.#a()}></slot>
+      </div>
+    </div>`;
+	}
+};
+t("lintje-form-actions", y);
+//#endregion
+export { y as LintjeFormActions, h as clockTime };

package/dist-elements/tag/form-section.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/forms/form-section/form-section.js'

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

@@ -0,0 +1,62 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { a as o, n as s } from "../chunks/controls-B1455oPG.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 {
+	constructor(...e) {
+		super(...e), this.heading = "", this.variant = "plain", this.disabled = !1, this.#e = new s("disabled");
+	}
+	static {
+		this.styles = n(c);
+	}
+	static {
+		this.properties = {
+			heading: { type: String },
+			description: { type: String },
+			variant: {
+				type: String,
+				reflect: !0
+			},
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	#e;
+	updated(e) {
+		super.updated(e), e.has("disabled") && this.#t();
+	}
+	disconnectedCallback() {
+		this.#e.release(), super.disconnectedCallback();
+	}
+	#t() {
+		this.disabled ? this.#e.apply(o(this), !0) : this.#e.release();
+	}
+	render() {
+		return r`<fieldset
+      class=${i({
+			"lintje-form-section": !0,
+			"lintje-form-section--tile": this.variant === "tile"
+		})}
+      aria-describedby=${this.description ? "lintje-form-section-description" : t}
+      ?disabled=${this.disabled}
+    >
+      <legend class="lintje-form-section__legend">
+        <h3 class="lintje-form-section__heading">${this.heading}</h3>
+      </legend>
+      <p
+        id="lintje-form-section-description"
+        class="lintje-form-section__description"
+        ?hidden=${!this.description}
+      >
+        ${this.description ?? ""}
+      </p>
+      <div class="lintje-form-section__fields">
+        <slot @slotchange=${() => this.disabled && this.#t()}></slot>
+      </div>
+    </fieldset>`;
+	}
+};
+e("lintje-form-section", l);
+//#endregion
+export { l as LintjeFormSection };

package/dist-elements/tag/form.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/forms/form/form.js'