lintje 0.2.0 → 0.4.0

package/dist-elements/tag/page-header.js

@@ -1,12 +1,101 @@
-import { A as e, At as t, Bt as n, Gt as r, Ht as i, It as a, Lt as o, Z as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, I as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, nn as s, st as c, zt as l } from "../chunks/base-DRGvkF-r.js";
+import "./menu-button.js";
 import "./announcement.js";
+//#region src/components/shared/overflow.ts
+function u(e, t, n, r) {
+	let i = e.filter((e) => !e.fixed).length, a = (r) => {
+		let i = 0, a = 0, o = 0;
+		for (let t of e) !t.fixed && i < r ? i += 1 : (a += t.width, o += 1);
+		return r > 0 && (a += t, o += 1), a + n * Math.max(0, o - 1);
+	}, o = i;
+	for (let e = 0; e <= i; e += 1) if (a(e) <= r + .5) {
+		o = e;
+		break;
+	}
+	return o === 1 && (o = i >= 2 ? 2 : 0), o;
+}
+var d = "data-lintje-overflow", f = class {
+	#e;
+	#t;
+	#n;
+	constructor(e, t) {
+		this.host = e, this.options = t, this.collapsed = [], this.#e = null, this.#t = [], this.#n = null, e.addController(this);
+	}
+	hostDisconnected() {
+		this.#e?.disconnect(), this.#e = null, this.#t = [], this.#n !== null && cancelAnimationFrame(this.#n), this.#n = null, this.#r([]);
+	}
+	hostUpdated() {
+		this.measure();
+	}
+	get actions() {
+		return [...this.host.children].filter((e) => e instanceof HTMLElement && e.slot === this.options.slot);
+	}
+	items() {
+		let e = [];
+		return this.collapsed.forEach((t, n) => {
+			let r = (t.variant ?? "").startsWith("danger");
+			r && e.length > 0 && e[e.length - 1] !== "separator" && e.push("separator");
+			let i = !!(t.disabled || t.busy);
+			e.push({
+				value: String(n),
+				label: t.textContent?.trim() || t.label || "",
+				icon: t.icon,
+				href: i ? void 0 : t.href,
+				disabled: i,
+				reason: t.reason,
+				danger: r
+			});
+		}), e;
+	}
+	activate(e) {
+		this.collapsed[Number(e)]?.click();
+	}
+	measure() {
+		let e = this.host.renderRoot, t = e.querySelector(this.options.row), n = e.querySelector(this.options.menu), r = this.actions;
+		if (this.#i(t ? [t, ...r] : []), !t || !n) return;
+		let i = r.filter(p), a = i[i.length - 1], o = r.map((e) => ({
+			width: e.getBoundingClientRect().width,
+			fixed: !p(e) || e === a
+		})), s = parseFloat(getComputedStyle(n.parentElement ?? t).columnGap) || 0, c = u(o, n.getBoundingClientRect().width, s, t.getBoundingClientRect().width), l = i.filter((e) => e !== a).slice(0, c);
+		m(l, this.collapsed) || (this.collapsed = l, this.#r(l), this.host.requestUpdate());
+	}
+	#r(e) {
+		for (let t of this.actions) {
+			let n = e.includes(t);
+			n ? t.setAttribute(d, "") : t.removeAttribute(d), t.inert = n;
+		}
+	}
+	#i(e) {
+		if (typeof ResizeObserver < "u" && !m(e, this.#t)) {
+			this.#e ??= new ResizeObserver(() => this.#a()), this.#e.disconnect();
+			for (let t of e) this.#e.observe(t);
+			this.#t = e;
+		}
+	}
+	#a() {
+		this.#n === null && (this.#n = requestAnimationFrame(() => {
+			this.#n = null, this.measure();
+		}));
+	}
+};
+function p(e) {
+	return e.localName === "lintje-button";
+}
+function m(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+//#endregion
 //#region src/components/frame/page-header/page-header.css?inline
-var u = ":host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-page-header {\n  background: var(--color-bg-title);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: var(--space-5) var(--space-6) 18px;\n}\n/* The actions stand level with the title; under a description, level with its last line. */\n.lintje-page-header__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-6);\n}\n.lintje-page-header__row.is-described { align-items: flex-end; }\n.lintje-page-header__heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }\n.lintje-page-header__actions.is-empty { display: none; }\n.lintje-page-header__title { font: var(--text-h1); color: var(--color-text-primary); }\n/* The pencil shows while the title is pointed at or the pencil has the focus; a touch screen\n   always shows it. */\n.lintje-page-header__title-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }\n.lintje-page-header__edit { flex: none; opacity: 0; transition: opacity var(--dur-hover) var(--ease-in-motion); }\n.lintje-page-header__title-row:hover .lintje-page-header__edit,\n.lintje-page-header__edit:focus-within { opacity: 1; }\n@media (hover: none) {\n  .lintje-page-header__edit { opacity: 1; }\n}\n.lintje-page-header__description {\n  margin-top: 6px;\n  max-width: var(--w-text);\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--color-text-secondary);\n}\n.lintje-page-header__meta {\n  margin-top: var(--space-2);\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-page-header__more { color: var(--color-link); font-weight: 700; text-decoration: underline; }\n\n.lintje-page-header__kicker {\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n\n@media (max-width: 767px) {\n  .lintje-page-header { padding: var(--space-4) var(--space-4) 14px; gap: 4px; }\n  .lintje-page-header__title { font: var(--text-h1-mobile); }\n  .lintje-page-header__meta { font: var(--text-meta); margin-top: 0; }\n}\n\n/* In the shell: flush in the content column, the trail and the title row closer together. */\n.lintje-page-header--shell { padding: 0; gap: var(--space-2); }\n.lintje-page-header--shell .lintje-page-header__heading { gap: var(--space-1); }\n.lintje-page-header--shell .lintje-page-header__title { overflow-wrap: anywhere; }\n.lintje-page-header--shell .lintje-page-header__description { margin-top: 0; }\n", d = class extends l {
-	constructor(...e) {
-		super(...e), this.inShell = !1, this.hasActions = !1, this.editable = !1, this.mobile = new o(this, a), this.observer = null;
+var h = ":host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-page-header {\n  background: var(--color-bg-title);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: var(--space-5) var(--space-6) 18px;\n}\n/* The actions stand level with the title; under a description, level with its last line. */\n.lintje-page-header__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-6);\n}\n.lintje-page-header__row.is-described { align-items: flex-end; }\n.lintje-page-header__heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-page-header__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }\n.lintje-page-header__actions.is-empty { display: none; }\n.lintje-page-header__actions slot { display: contents; }\n/* An action that went into \"Meer\", and the menu while it is spare, stay laid out, invisible, so\n   their widths can be measured in either state. Hanging at the end, they add no scroll. */\n.lintje-page-header__actions slot::slotted([data-lintje-overflow]),\n.lintje-page-header__overflow.is-spare {\n  position: absolute;\n  top: 0;\n  right: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-page-header__title { font: var(--text-h1); color: var(--color-text-primary); }\n/* The pencil shows while the title is pointed at or the pencil has the focus; a touch screen\n   always shows it. */\n.lintje-page-header__title-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }\n.lintje-page-header__edit { flex: none; opacity: 0; transition: opacity var(--dur-hover) var(--ease-in-motion); }\n.lintje-page-header__title-row:hover .lintje-page-header__edit,\n.lintje-page-header__edit:focus-within { opacity: 1; }\n@media (hover: none) {\n  .lintje-page-header__edit { opacity: 1; }\n}\n.lintje-page-header__description {\n  margin-top: 6px;\n  max-width: var(--w-text);\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--color-text-secondary);\n}\n.lintje-page-header__meta {\n  margin-top: var(--space-2);\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-page-header__more { color: var(--color-link); font-weight: 700; text-decoration: underline; }\n\n.lintje-page-header__kicker {\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-page-header { padding: var(--space-4) var(--space-4) 14px; gap: 4px; }\n  .lintje-page-header__title { font: var(--text-h1-mobile); }\n  .lintje-page-header__meta { font: var(--text-meta); margin-top: 0; }\n}\n\n/* In the shell: flush in the content column, the trail and the title row closer together. */\n.lintje-page-header--shell { padding: 0; gap: var(--space-2); }\n.lintje-page-header--shell .lintje-page-header__heading { gap: var(--space-1); }\n.lintje-page-header--shell .lintje-page-header__title { overflow-wrap: anywhere; }\n.lintje-page-header--shell .lintje-page-header__description { margin-top: 0; }\n\n/* On paper the title stands at the paper's edge, in line with the content under it. */\n@media print {\n  .lintje-page-header { padding-inline: 0; }\n}\n", g = class extends n {
+	constructor(...t) {
+		super(...t), this.inShell = !1, this.hasActions = !1, this.editable = !1, this.mobile = new r(this, e), this.overflow = new f(this, {
+			row: ".lintje-page-header__row",
+			menu: ".lintje-page-header__overflow",
+			slot: "actions"
+		}), this.observer = null;
 	}
 	static {
-		this.styles = i(u);
+		this.styles = a(h);
 	}
 	static {
 		this.properties = {
@@ -26,72 +115,86 @@ var u = ":host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n\n/*
 		super.connectedCallback(), this.inShell = this.slot === "header" && this.parentElement?.localName === "lintje-shell";
 	}
 	disconnectedCallback() {
-		this.stopObserving(), this.inShell || t(!1), super.disconnectedCallback();
+		this.stopObserving(), this.inShell || l(!1), super.disconnectedCallback();
 	}
 	stopObserving() {
 		this.observer?.disconnect(), this.observer = null;
 	}
-	updated(n) {
-		if (this.inShell || !(n.has("data") || this.observer === null)) return;
+	updated(e) {
+		if (this.inShell || !(e.has("data") || this.observer === null)) return;
 		this.stopObserving();
-		let r = this.renderRoot.querySelector(".lintje-page-header__title");
-		if (!r || this.mobile.matches) {
-			t(!1);
+		let n = this.renderRoot.querySelector(".lintje-page-header__title");
+		if (!n || this.mobile.matches) {
+			l(!1);
 			return;
 		}
-		let i = e(r, "--h-topbar", 56);
-		this.observer = new IntersectionObserver(([e]) => t(e.boundingClientRect.top < i), {
-			rootMargin: `-${i}px 0px 0px 0px`,
+		let r = t(n, "--h-topbar", 56);
+		this.observer = new IntersectionObserver(([e]) => l(e.boundingClientRect.top < r), {
+			rootMargin: `-${r}px 0px 0px 0px`,
 			threshold: [0, 1]
-		}), this.observer.observe(r);
+		}), this.observer.observe(n);
 	}
 	render() {
 		let e = this.data;
-		if (!e) return r;
-		let t = this.mobile.matches, n = this.inShell, i = !!e.description && (n || !t), { asOf: a, source: o, more: l } = e, u = [];
-		return a && u.push(c`<span>Waarde van ${a}</span>`), a && o && u.push(c`<span aria-hidden="true"> · </span>`), o && u.push(c`<span>Bron: ${o}</span>`), l && (u.push(c`<span aria-hidden="true"> · </span>`), u.push(c`<a href=${l.href} class="lintje-page-header__more"
-          >${l.label ?? "Meer over deze cijfers"} ›</a
-        >`)), c`
-      ${e.announcement ? c`<lintje-announcement .data=${e.announcement}></lintje-announcement>` : r}
-      <div class=${s({
+		if (!e) return o;
+		let t = this.mobile.matches, n = this.inShell, r = !!e.description && (n || !t), i = this.overflow.collapsed.length === 0, { asOf: a, source: l, more: u } = e, d = [];
+		return a && d.push(s`<span>Waarde van ${a}</span>`), a && l && d.push(s`<span aria-hidden="true"> · </span>`), l && d.push(s`<span>Bron: ${l}</span>`), u && (d.push(s`<span aria-hidden="true"> · </span>`), d.push(s`<a href=${u.href} class="lintje-page-header__more"
+          >${u.label ?? "Meer over deze cijfers"} ›</a
+        >`)), s`
+      ${e.announcement ? s`<lintje-announcement .data=${e.announcement}></lintje-announcement>` : o}
+      <div class=${c({
 			"lintje-page-header": !0,
 			"lintje-page-header--shell": n
 		})}>
         <slot name="breadcrumbs"></slot>
-        ${t && e.kicker ? c`<p class="lintje-page-header__kicker">${e.kicker}</p>` : r}
-        <div class=${s({
+        ${t && e.kicker ? s`<p class="lintje-page-header__kicker">${e.kicker}</p>` : o}
+        <div class=${c({
 			"lintje-page-header__row": !0,
-			"is-described": i
+			"is-described": r
 		})}>
           <div class="lintje-page-header__heading">
             <div class="lintje-page-header__title-row">
               <h2 class="lintje-page-header__title">${e.title}</h2>
-              ${this.editable ? c`<lintje-icon-button
+              ${this.editable ? s`<lintje-icon-button
                       class="lintje-page-header__edit"
                       icon="functioneel-bewerken"
                       label="Naam wijzigen"
                       variant="flat"
                       @click=${() => this.emit("lintje-title-edit")}
-                    ></lintje-icon-button>` : r}
+                    ></lintje-icon-button>` : o}
             </div>
-            ${i ? c`<p class="lintje-page-header__description">${e.description}</p>` : r}
+            ${r ? s`<p class="lintje-page-header__description">${e.description}</p>` : o}
           </div>
-          <slot
-            name="actions"
-            class=${s({
+          <div class=${c({
 			"lintje-page-header__actions": !0,
 			"is-empty": !this.hasActions
+		})}>
+            <lintje-menu-button
+              class=${c({
+			"lintje-page-header__overflow": !0,
+			"is-spare": i
 		})}
-            @slotchange=${(e) => {
-			this.hasActions = e.target.assignedElements().length > 0;
+              ?inert=${i}
+              label="Meer"
+              accessible-label="Meer acties"
+              .items=${this.overflow.items()}
+              @lintje-action=${(e) => {
+			e.stopPropagation(), this.overflow.activate(e.detail);
 		}}
-          ></slot>
+            ></lintje-menu-button>
+            <slot
+              name="actions"
+              @slotchange=${(e) => {
+			this.hasActions = e.target.assignedElements().length > 0, this.overflow.measure();
+		}}
+            ></slot>
+          </div>
         </div>
-        ${u.length > 0 ? c`<p class="lintje-page-header__meta">${u}</p>` : r}
+        ${d.length > 0 ? s`<p class="lintje-page-header__meta">${d}</p>` : o}
       </div>
     `;
 	}
 };
-n("lintje-page-header", d);
+i("lintje-page-header", g);
 //#endregion
-export { d as LintjePageHeader };
+export { g as LintjePageHeader };

package/dist-elements/tag/pagination.js

@@ -1,7 +1,7 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Z as a, et as o, p as s, q as c, qt as l, s as u, zt as d } from "../chunks/base-Bg-IFOPG.js";
+import { H as e, Jt as t, Yt as n, Zt as r, d as i, en as a, h as o, lt as s, nn as c, rt as l, st as u, ut as d } from "../chunks/base-DRGvkF-r.js";
 import "./menu-button.js";
 //#region src/components/tables/pagination/pagination.css?inline
-var f = "/* \"Vorige\" and \"Volgende\" wear `.lintje-button--link` from the button's sheet. */\n/* In a flush tile the pages keep the heading's indent, as the rows above them do, and the tile's\n   padding below them when no footnote follows. */\n:host {\n  display: block; min-width: 0;\n  padding-inline: var(--lintje-inset, 0px);\n  padding-block-end: var(--lintje-inset-end, 0px);\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Three zones: the count left, the pages centred under what they page, the size choice right.\n   Stacked, the pages take the first line and the count and the choice share the second. */\n.lintje-pagination {\n  display: grid; grid-template-columns: 1fr auto 1fr;\n  grid-template-areas: \"count nav size\";\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-pagination.is-stacked {\n  grid-template-columns: 1fr auto;\n  grid-template-areas: \"nav nav\" \"count size\";\n}\n\n.lintje-pagination__nav {\n  grid-area: nav; justify-self: center;\n  display: flex; flex-wrap: wrap; align-items: center;\n  font: var(--text-ui);\n}\n.lintje-pagination__pages { display: contents; }\n\n/* The chevron and the bold word make a step a control without an underline at rest. */\n.lintje-pagination__step {\n  height: var(--h-target);\n  padding: 0 var(--space-3);\n  gap: var(--space-1);\n  text-decoration: none;\n}\n.lintje-pagination__step:not(:disabled):hover { text-decoration: underline; }\n/* Without its word a step is a square chevron, as large as a number. */\n.lintje-pagination.is-compact .lintje-pagination__step { width: var(--h-target); padding: 0; }\n\n/* Flat: a box around every number weighs more than the one that matters. */\n.lintje-pagination__page {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--h-target); height: var(--h-target);\n  padding: 0 var(--space-1);\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--color-link);\n  font: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-pagination__page:hover { background: var(--color-bg-subtle); color: var(--color-link-hover); }\n\n/* The one filled square; its edge is the primary button's, the tint that carries it in dark. */\n.lintje-pagination__page.is-current {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n  font-weight: 700;\n  cursor: default;\n}\n/* Choosing the current page does nothing, so it does not answer the pointer. */\n.lintje-pagination__page.is-current:hover { background: var(--color-action-primary); }\n\n/* As wide as a number, so the seven slots keep one length. */\n.lintje-pagination__gap {\n  min-width: var(--h-target);\n  text-align: center;\n  color: var(--color-text-muted);\n}\n\n.lintje-pagination__where { display: none; color: var(--color-text-primary); white-space: nowrap; }\n\n.lintje-pagination__count {\n  grid-area: count; justify-self: start;\n  margin: 0;\n  white-space: nowrap;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n.lintje-pagination__size { grid-area: size; justify-self: end; white-space: nowrap; }\n\n@media (max-width: 767px) {\n  .lintje-pagination {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"nav nav\" \"count size\";\n  }\n  .lintje-pagination__nav {\n    justify-self: stretch;\n    flex-wrap: nowrap; justify-content: space-between;\n  }\n  .lintje-pagination__pages { display: none; }\n  .lintje-pagination__where { display: block; }\n  .lintje-pagination__step { flex: 0 0 auto; padding: 0 var(--space-2); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-pagination__page { transition: none; }\n}\n\n/* Forced colours: the current page's fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-pagination__page.is-current { border-color: Highlight; }\n}\n", p = 7;
+var f = "/* \"Vorige\" and \"Volgende\" wear `.lintje-button--link` from the button's sheet. */\n/* In a flush tile the pages keep the heading's indent, as the rows above them do, and the tile's\n   padding below them when no footnote follows. */\n:host {\n  display: block; min-width: 0;\n  padding-inline: var(--lintje-inset, 0px);\n  padding-block-end: var(--lintje-inset-end, 0px);\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Three zones: the count left, the pages centred under what they page, the size choice right.\n   Stacked, the pages take the first line and the count and the choice share the second. */\n.lintje-pagination {\n  display: grid; grid-template-columns: 1fr auto 1fr;\n  grid-template-areas: \"count nav size\";\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-pagination.is-stacked {\n  grid-template-columns: 1fr auto;\n  grid-template-areas: \"nav nav\" \"count size\";\n}\n\n.lintje-pagination__nav {\n  grid-area: nav; justify-self: center;\n  display: flex; flex-wrap: wrap; align-items: center;\n  font: var(--text-ui);\n}\n.lintje-pagination__pages { display: contents; }\n\n/* The chevron and the bold word make a step a control without an underline at rest. */\n.lintje-pagination__step {\n  height: var(--h-target);\n  padding: 0 var(--space-3);\n  gap: var(--space-1);\n  text-decoration: none;\n}\n.lintje-pagination__step:not(:disabled):hover { text-decoration: underline; }\n/* Without its word a step is a square chevron, as large as a number. */\n.lintje-pagination.is-compact .lintje-pagination__step { width: var(--h-target); padding: 0; }\n\n/* Flat: a box around every number weighs more than the one that matters. */\n.lintje-pagination__page {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--h-target); height: var(--h-target);\n  padding: 0 var(--space-1);\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--color-link);\n  font: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-pagination__page:hover { background: var(--color-bg-subtle); color: var(--color-link-hover); }\n\n/* The one filled square; its edge is the primary button's, the tint that carries it in dark. */\n.lintje-pagination__page.is-current {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n  font-weight: 700;\n  cursor: default;\n}\n/* Choosing the current page does nothing, so it does not answer the pointer. */\n.lintje-pagination__page.is-current:hover { background: var(--color-action-primary); }\n\n/* As wide as a number, so the seven slots keep one length. */\n.lintje-pagination__gap {\n  min-width: var(--h-target);\n  text-align: center;\n  color: var(--color-text-muted);\n}\n\n.lintje-pagination__where { display: none; color: var(--color-text-primary); white-space: nowrap; }\n\n.lintje-pagination__count {\n  grid-area: count; justify-self: start;\n  margin: 0;\n  white-space: nowrap;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n.lintje-pagination__size { grid-area: size; justify-self: end; white-space: nowrap; }\n\n@media screen and (max-width: 767px) {\n  .lintje-pagination {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"nav nav\" \"count size\";\n  }\n  .lintje-pagination__nav {\n    justify-self: stretch;\n    flex-wrap: nowrap; justify-content: space-between;\n  }\n  .lintje-pagination__pages { display: none; }\n  .lintje-pagination__where { display: block; }\n  .lintje-pagination__step { flex: 0 0 auto; padding: 0 var(--space-2); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-pagination__page { transition: none; }\n}\n\n/* Forced colours: the current page's fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-pagination__page.is-current { border-color: Highlight; }\n}\n\n/* Paper keeps the count, which says that only these rows are on it; the steps are controls. */\n@media print {\n  .lintje-pagination__nav,\n  .lintje-pagination__size { display: none; }\n}\n", p = 7;
 function m(e, t) {
 	let n = Math.max(0, Math.floor(t));
 	if (n <= p) return Array.from({ length: n }, (e, t) => t + 1);
@@ -36,27 +36,28 @@ var h = {
 	many: "resultaten",
 	one: "resultaat"
 };
-function g(e, t, n, r = h) {
+function g(e, t, n, r = h, a) {
 	if (!t || n == null || Number.isNaN(n)) return null;
-	if (n <= 0) return `Geen ${r.many}`;
-	let i = n === 1 ? r.one : r.many;
-	if (n <= t) return `${u(n)} ${i}`;
-	let a = Math.min((e - 1) * t + 1, n), o = Math.min(e * t, n);
-	return `${a === o ? u(a) : `${u(a)}–${u(o)}`} van ${u(n)} ${i}`;
+	let o = a != null && a > n ? ` · gefilterd uit ${i(a)}` : "";
+	if (n <= 0) return `Geen ${r.many}${o}`;
+	let s = n === 1 ? r.one : r.many;
+	if (n <= t) return `${i(n)} ${s}${o}`;
+	let c = Math.min((e - 1) * t + 1, n), l = Math.min(e * t, n);
+	return `${c === l ? i(c) : `${i(c)}–${i(l)}`} van ${i(n)} ${s}${o}`;
 }
 function _(e) {
 	if (!e) return;
 	let t = e.split(",").map((e) => Number(e.trim())).filter((e) => Number.isInteger(e) && e > 0);
 	return t.length ? [...new Set(t)] : void 0;
 }
-var v = class extends d {
+var v = class extends t {
 	constructor(...e) {
 		super(...e), this.page = 1, this.label = "Paginering", this.compact = !1, this.stacked = !1, this.#e = null;
 	}
 	static {
 		this.styles = [
-			e,
-			r(c),
+			s,
+			r(l),
 			r(f)
 		];
 	}
@@ -68,6 +69,10 @@ var v = class extends d {
 				attribute: "page-count"
 			},
 			total: { type: Number },
+			filteredFrom: {
+				type: Number,
+				attribute: "filtered-from"
+			},
 			pageSize: {
 				type: Number,
 				attribute: "page-size"
@@ -122,9 +127,9 @@ var v = class extends d {
 	hrefFor(e) {
 		return this.hrefTemplate ? this.hrefTemplate.replaceAll("{page}", String(e)) : void 0;
 	}
-	choose(e, t, n) {
-		let r = this.hrefFor(t);
-		(!r || i(e)) && (t === this.current ? e.preventDefault() : (this.page = t, this.emit("lintje-page-change", { page: t }), r && this.followLink(r, e), this.updateComplete.then(() => this.keepFocus(n))));
+	choose(t, n, r) {
+		let i = this.hrefFor(n);
+		(!i || e(t)) && (n === this.current ? t.preventDefault() : (this.page = n, this.emit("lintje-page-change", { page: n }), i && this.followLink(i, t), this.updateComplete.then(() => this.keepFocus(r))));
 	}
 	get countUnit() {
 		return this.unit ? {
@@ -142,17 +147,17 @@ var v = class extends d {
 	}
 	sizes() {
 		let e = this.pageSizes;
-		if (!e?.length) return n;
-		let t = this.pageSize ?? e[0], r = e.includes(t) ? e : [...e, t].sort((e, t) => e - t), i = this.countUnit.many;
-		return l`<lintje-menu-button
+		if (!e?.length) return a;
+		let t = this.pageSize ?? e[0], n = e.includes(t) ? e : [...e, t].sort((e, t) => e - t), r = this.countUnit.many;
+		return c`<lintje-menu-button
       class="lintje-pagination__size"
       variant="flat"
       placement="bottom-end"
-      label=${`${u(t)} per pagina`}
-      accessible-label=${`${i[0].toUpperCase()}${i.slice(1)}: ${u(t)} per pagina`}
-      .items=${r.map((e) => ({
+      label=${`${i(t)} per pagina`}
+      accessible-label=${`${r[0].toUpperCase()}${r.slice(1)}: ${i(t)} per pagina`}
+      .items=${n.map((e) => ({
 			value: String(e),
-			label: `${u(e)} per pagina`,
+			label: `${i(e)} per pagina`,
 			checked: e === t,
 			radio: !0
 		}))}
@@ -170,19 +175,19 @@ var v = class extends d {
 		for (let e of n) if (!(!e || e instanceof HTMLButtonElement && e.disabled) && (e.focus(), t.activeElement === e)) return;
 	}
 	step(e, t, n) {
-		let r = e === "previous", i = r ? "Vorige" : "Volgende", s = o("functioneel-delta-rechts", {
+		let r = e === "previous", i = r ? "Vorige" : "Volgende", a = d("functioneel-delta-rechts", {
 			size: 16,
 			flip: r ? "horizontal" : void 0
-		}), c = l`<span
-      class=${a({
+		}), o = c`<span
+      class=${u({
 			"lintje-pagination__word": !0,
 			"visually-hidden": this.compact
 		})}
       >${i}</span
-    >`, u = r ? l`${s}${c}` : l`${c}${s}`, d = this.hrefFor(t);
-		return n || !d ? l`<button
+    >`, s = r ? c`${a}${o}` : c`${o}${a}`, l = this.hrefFor(t);
+		return n || !l ? c`<button
         type="button"
-        class=${a({
+        class=${u({
 			"lintje-button": !0,
 			"lintje-button--link": !0,
 			"lintje-pagination__step": !0,
@@ -192,53 +197,53 @@ var v = class extends d {
         ?disabled=${n}
         @click=${(n) => this.choose(n, t, e)}
       >
-        ${u}
-      </button>` : l`<a
+        ${s}
+      </button>` : c`<a
       class="lintje-button lintje-button--link lintje-pagination__step"
       data-step=${e}
-      href=${d}
+      href=${l}
       @click=${(n) => this.choose(n, t, e)}
-      >${u}</a
+      >${s}</a
     >`;
 	}
 	number(e, t) {
-		let r = e === t, i = a({
+		let n = e === t, r = u({
 			"lintje-pagination__page": !0,
-			"is-current": r
-		}), o = r ? `Pagina ${e}, huidige pagina` : `Ga naar pagina ${e}`, s = this.hrefFor(e);
-		return s ? l`<a
-        class=${i}
-        href=${s}
+			"is-current": n
+		}), i = n ? `Pagina ${e}, huidige pagina` : `Ga naar pagina ${e}`, o = this.hrefFor(e);
+		return o ? c`<a
+        class=${r}
+        href=${o}
         data-page=${e}
-        aria-label=${o}
-        aria-current=${r ? "page" : n}
+        aria-label=${i}
+        aria-current=${n ? "page" : a}
         @click=${(t) => this.choose(t, e, e)}
         >${e}</a
-      >` : l`<button
+      >` : c`<button
       type="button"
-      class=${i}
+      class=${r}
       data-page=${e}
-      aria-label=${o}
-      aria-current=${r ? "page" : n}
+      aria-label=${i}
+      aria-current=${n ? "page" : a}
       @click=${(t) => this.choose(t, e, e)}
     >
       ${e}
     </button>`;
 	}
 	render() {
-		let e = this.count, t = this.current, r = m(t, e), i = r.indexOf(t), o = g(t, this.pageSize, this.total, this.countUnit);
-		return l`<div
-      class=${a({
+		let e = this.count, t = this.current, n = m(t, e), r = n.indexOf(t), i = g(t, this.pageSize, this.total, this.countUnit, this.filteredFrom);
+		return c`<div
+      class=${u({
 			"lintje-pagination": !0,
 			"is-compact": this.compact,
 			"is-stacked": this.stacked
 		})}
     >
-      ${o ? l`<p class="lintje-pagination__count">${o}</p>` : n}
+      ${i ? c`<p class="lintje-pagination__count">${i}</p>` : a}
       <nav class="lintje-pagination__nav" aria-label=${this.label}>
         ${this.step("previous", t - 1, t <= 1)}
         <span class="lintje-pagination__pages">
-          ${s(r, (e, t) => e === "gap" ? t < i ? "gap-before" : "gap-after" : e, (e) => e === "gap" ? l`<span class="lintje-pagination__gap" aria-hidden="true">…</span>` : this.number(e, t))}
+          ${o(n, (e, t) => e === "gap" ? t < r ? "gap-before" : "gap-after" : e, (e) => e === "gap" ? c`<span class="lintje-pagination__gap" aria-hidden="true">…</span>` : this.number(e, t))}
         </span>
         <span class="lintje-pagination__where">Pagina ${t} van ${e}</span>
         ${this.step("next", t + 1, t >= e)}
@@ -247,6 +252,6 @@ var v = class extends d {
     </div>`;
 	}
 };
-t("lintje-pagination", v);
+n("lintje-pagination", v);
 //#endregion
 export { v as LintjePagination, m as pageRange, _ as parsePageSizes, g as rangeText };

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

@@ -1 +1 @@
-export * from '../types/primitives/popover/popover.js'
+export * from '../types/components/overlays/popover/popover.js'

package/dist-elements/tag/popover.js

@@ -1 +1 @@
-export { L as LintjePopover } from "../chunks/base-Bg-IFOPG.js";
+export { U as LintjePopover } from "../chunks/base-DRGvkF-r.js";

package/dist-elements/tag/progress-bar.d.ts

@@ -1 +1 @@
-export * from '../types/primitives/progress-bar/progress-bar.js'
+export * from '../types/components/feedback/progress-bar/progress-bar.js'

package/dist-elements/tag/progress-bar.js

@@ -1 +1 @@
-export { m as LintjeProgressBar } from "../chunks/base-Bg-IFOPG.js";
+export { g as LintjeProgressBar } from "../chunks/base-DRGvkF-r.js";

package/dist-elements/tag/prose.js

@@ -1,12 +1,12 @@
-import { Bt as e, Ht as t, O as n, Z as r, ft as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
+import { P as e, St as t, Yt as n, Zt as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
 import { t as o } from "../chunks/prose-CmKVp5kL.js";
 //#region src/components/content/prose/prose.ts
-var s = class extends n {
+var s = class extends e {
 	constructor(...e) {
 		super(...e), this.tone = "default";
 	}
 	static {
-		this.styles = t(o);
+		this.styles = r(o);
 	}
 	static {
 		this.properties = {
@@ -19,13 +19,13 @@ var s = class extends n {
 		};
 	}
 	render() {
-		let e = r({
+		let e = a({
 			"lintje-prose": !0,
 			[`lintje-prose--${this.tone}`]: this.tone !== "default"
 		});
-		return this.html ? a`<div class=${e}>${i(this.html)}</div>` : this.text ? a`<div class=${e}><p>${this.text}</p></div>` : a`<div class=${e}><slot></slot></div>`;
+		return this.html ? i`<div class=${e}>${t(this.html)}</div>` : this.text ? i`<div class=${e}><p>${this.text}</p></div>` : i`<div class=${e}><slot></slot></div>`;
 	}
 };
-e("lintje-prose", s);
+n("lintje-prose", s);
 //#endregion
 export { s as LintjeProse };

package/dist-elements/tag/qr-code.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
 import "./toast.js";
 import { t as o } from "../chunks/copied-7BXYVkXT.js";
 //#region src/components/actions/qr-code/qr-code.css?inline
@@ -795,7 +795,7 @@ function y(e, t) {
 	let i = t ? ` fill="${t}"` : "", a = `<svg xmlns="http://www.w3.org/2000/svg" width="${n.size}" height="${n.size}" viewBox="0 0 ${n.size} ${n.size}" shape-rendering="crispEdges"><path${i} d="${r}"/></svg>`;
 	return `data:image/svg+xml,${encodeURIComponent(a)}`;
 }
-var b = class extends a {
+var b = class extends e {
 	constructor(...e) {
 		super(...e), this.src = "", this.value = "", this.copied = !1, this.failed = !1, this.status = "", this.made = "", this.tooLong = !1;
 	}
@@ -860,7 +860,7 @@ var b = class extends a {
 	}
 	render() {
 		return i`<div class="lintje-qr-code__zone">
-        ${this.drawn ? i`<img class="lintje-qr-code__image" src=${this.drawn} alt=${this.alt} />` : this.tooLong ? i`<p class="lintje-qr-code__hint">${g}</p>` : t}
+        ${this.drawn ? i`<img class="lintje-qr-code__image" src=${this.drawn} alt=${this.alt} />` : this.tooLong ? i`<p class="lintje-qr-code__hint">${g}</p>` : r}
       </div>
       <lintje-button
         variant="secondary"
@@ -868,21 +868,21 @@ var b = class extends a {
         ?disabled=${!this.drawn}
         @click=${this.copy}
         ><span class="lintje-qr-code__labels"
-          ><span class=${r({
+          ><span class=${a({
 			"lintje-qr-code__label": !0,
 			"is-hidden": this.copied
 		})}
             >${p}</span
-          ><span class=${r({
+          ><span class=${a({
 			"lintje-qr-code__label": !0,
 			"is-hidden": !this.copied
 		})}
             >${m}</span
           ></span
         ></lintje-button
-      ><span class="visually-hidden" role="status">${this.status || t}</span>${this.failed ? i`<lintje-toast kind="error" @lintje-close=${this.onToastClose}>${h}</lintje-toast>` : t}`;
+      ><span class="visually-hidden" role="status">${this.status || r}</span>${this.failed ? i`<lintje-toast kind="error" @lintje-close=${this.onToastClose}>${h}</lintje-toast>` : r}`;
 	}
 };
-e("lintje-qr-code", b);
+t("lintje-qr-code", b);
 //#endregion
 export { b as LintjeQrCode, y as codeImage };

package/dist-elements/tag/radio-group.js

@@ -1,15 +1,16 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
-import { r as o, t as s } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
+import { n as o } from "../chunks/input-BGMLam-O.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/radio-group/radio-group.css?inline
-var c = "/* The radio group's stack; the radio itself is the shared `choice`. */\n\n.lintje-radio-group { display: flex; flex-direction: column; }\n/* Cards: the options side by side, each with a line under its label. The chosen one is quiet, as\n   in the segmented control: the choice's wash and an edge in the accent line. */\n.lintje-radio-group--cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(6 * var(--space-10))), 1fr));\n  gap: var(--space-2);\n}\n.lintje-radio-group__card {\n  align-items: flex-start;\n  padding: var(--space-3);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n}\n.lintje-radio-group__card:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-radio-group__card.is-chosen {\n  background: var(--color-choice-active-bg);\n  border-color: var(--color-accent-line);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n}\n.lintje-radio-group__card .lintje-choice__label { display: flex; flex-direction: column; font-weight: 700; }\n.lintje-radio-group__description { font: var(--text-small); font-weight: 400; color: var(--color-text-muted); }\n\n/* Below 768 px the two text fields take the touch height; the choice rows already have it. */\n@media (max-width: 767px) {\n  :host(lintje-text-input),\n  :host(lintje-number-input) { --h-control: var(--h-touch); }\n}\n", l = class extends o {
+var c = "/* The radio group's stack; the radio itself is the shared `choice`. */\n\n.lintje-radio-group { display: flex; flex-direction: column; }\n/* Cards: the options side by side, each with a line under its label. The chosen one is quiet, as\n   in the segmented control: the choice's wash and an edge in the accent line. */\n.lintje-radio-group--cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(6 * var(--space-10))), 1fr));\n  gap: var(--space-2);\n}\n.lintje-radio-group__card {\n  align-items: flex-start;\n  padding: var(--space-3);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n}\n.lintje-radio-group__card:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-radio-group__card.is-chosen {\n  background: var(--color-choice-active-bg);\n  border-color: var(--color-accent-line);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n}\n.lintje-radio-group__card .lintje-choice__label { display: flex; flex-direction: column; font-weight: 700; }\n.lintje-radio-group__description { font: var(--text-small); font-weight: 400; color: var(--color-text-muted); }\n\n/* Below 768 px the two text fields take the touch height; the choice rows already have it. */\n@media screen and (max-width: 767px) {\n  :host(lintje-text-input),\n  :host(lintje-number-input) { --h-control: var(--h-touch); }\n}\n", l = class extends o {
 	constructor(...e) {
 		super(...e), this.value = "", this.variant = "lines";
 	}
 	static {
 		this.styles = [
-			e,
-			r(s),
-			r(c)
+			r,
+			t(s),
+			t(c)
 		];
 	}
 	static {
@@ -26,7 +27,7 @@ var c = "/* The radio group's stack; the radio itself is the shared `choice`. */
 		this.value = e, this.commit(e);
 	}
 	render() {
-		return a`<div
+		return i`<div
       class="lintje-field"
       role="radiogroup"
       aria-labelledby=${this.labelId}
@@ -35,12 +36,12 @@ var c = "/* The radio group's stack; the radio itself is the shared `choice`. */
       aria-required=${this.required ? "true" : n}
     >
       ${this.renderLabel()}
-      <div class=${i({
+      <div class=${a({
 			"lintje-radio-group": !0,
 			"lintje-radio-group--cards": this.variant === "cards"
 		})}>
-        ${(this.options ?? []).map((e) => a`<label
-            class=${i({
+        ${(this.options ?? []).map((e) => i`<label
+            class=${a({
 			"lintje-choice": !0,
 			"lintje-radio-group__card": this.variant === "cards",
 			"is-chosen": this.variant === "cards" && e.value === this.value,
@@ -58,7 +59,7 @@ var c = "/* The radio group's stack; the radio itself is the shared `choice`. */
             />
             <span class="lintje-choice__radio" aria-hidden="true"></span>
             <span class="lintje-choice__label"
-              >${e.label}${this.variant === "cards" && e.description ? a`<span class="lintje-radio-group__description">${e.description}</span>` : n}</span
+              >${e.label}${this.variant === "cards" && e.description ? i`<span class="lintje-radio-group__description">${e.description}</span>` : n}</span
             >
           </label>`)}
       </div>
@@ -66,6 +67,6 @@ var c = "/* The radio group's stack; the radio itself is the shared `choice`. */
     </div>`;
 	}
 };
-t("lintje-radio-group", l);
+e("lintje-radio-group", l);
 //#endregion
 export { l as LintjeRadioGroup };