lintje 0.1.1 → 0.2.0

package/dist-elements/tag/notifications.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, I as a, It as o, Kt as s, Lt as c, Nt as l, U as u, V as d, Z as f, et as p, zt as m } from "../chunks/base-rBLTcEIv.js";
-import { t as h } from "../chunks/focus-trap-w3vCamJ6.js";
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, I as a, It as o, Lt as s, Nt as c, U as l, V as u, Z as d, et as f, qt as p, zt as m } from "../chunks/base-Bg-IFOPG.js";
+import { t as h } from "../chunks/focus-trap-9BnE-xWv.js";
 import { t as g } from "../chunks/dialog-close-u75fVEw4.js";
 //#region src/components/frame/notifications/notifications.css?inline
 var _ = "/* The host is the bell's box; the panel is fixed and takes no space. */\n:host { display: inline-flex; flex: none; vertical-align: middle; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-notifications__bell {\n  position: relative;\n  display: flex; align-items: center; justify-content: center;\n  width: var(--h-touch); height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-notifications__bell:hover,\n.lintje-notifications__bell.is-open { background: var(--color-nav-hover); }\n\n/* The counter is placed from the bell's middle, so a bell as high as the bar does not carry it\n   up to the bar's edge. */\n.lintje-notifications__count {\n  position: absolute;\n  top: calc(50% - var(--h-touch) / 2 + var(--space-1)); right: var(--space-1);\n}\n/* The keyed figure is a new element per value, so the rise plays once per change. */\n.lintje-notifications__figure { display: inline-block; }\n.lintje-notifications__figure.is-replaced {\n  animation: lintje-rise var(--dur-badge) var(--ease-in-motion) both;\n}\n\n.lintje-notifications__panel {\n  width: 440px;\n  max-width: 100%;\n  max-height: 480px;\n  overflow-y: auto;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-notifications__head {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-notifications__heading { font: var(--text-tile-title); }\n/* The link-style button reaches the target height through a hit area above and below only. */\n.lintje-notifications__read {\n  position: relative;\n  min-height: var(--space-6);\n  margin-left: auto;\n  color: var(--color-link);\n  font-size: 0.875rem; font-weight: 700;\n  text-decoration: underline;\n}\n.lintje-notifications__read::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-notifications__read:hover { color: var(--color-link-hover); }\n\n.lintje-notifications__list { margin: 0; padding: 0; list-style: none; }\n.lintje-notifications__item {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-notifications__item:last-child { border-bottom: 0; }\n.lintje-notifications__item.is-unread { background: var(--color-bg-selected); }\n.lintje-notifications__item:hover { background: var(--color-bg-subtle); }\n\n.lintje-notifications__dot,\n.lintje-notifications__dot-space { flex: 0 0 8px; height: 8px; margin-top: 7px; }\n.lintje-notifications__dot { border-radius: var(--radius-round); background: var(--color-accent-line); }\n\n.lintje-notifications__body { min-width: 0; }\n.lintje-notifications__title {\n  display: inline;\n  padding: 0;\n  color: var(--color-link);\n  font-size: 1rem; font-weight: 400;\n  text-align: left;\n  text-decoration: underline;\n}\n.lintje-notifications__title:hover { color: var(--color-link-hover); }\n.lintje-notifications__item.is-unread .lintje-notifications__title { font-weight: 700; }\n.lintje-notifications__text { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }\n.lintje-notifications__when { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }\n\n.lintje-notifications__empty {\n  margin: 0;\n  padding: var(--space-6) var(--space-4);\n  color: var(--color-text-muted);\n  text-align: center;\n}\n\n/* Phone: the sheet takes focus only when the trap pulls back stray focus, and draws no ring. */\n.lintje-notifications__sheet {\n  position: fixed;\n  z-index: 85;\n  inset: 0;\n  overflow-y: auto;\n  background: var(--color-bg-surface);\n  animation: lintje-fade-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-notifications__sheet:focus { outline: none; }\n.lintje-notifications__panel.is-sheet { width: 100%; max-height: none; }\n.lintje-notifications__close { margin-right: calc(var(--space-2) * -1); }\n.lintje-notifications__close:hover { color: var(--color-text-primary); }\n.lintje-notifications__panel.is-sheet .lintje-notifications__head { padding-top: 0; padding-bottom: 0; min-height: var(--h-mobile-header); }\n\n/* Forced colours: the unread surface is dropped, so the dot keeps a system-colour fill. */\n@media (forced-colors: active) {\n  .lintje-notifications__dot { forced-color-adjust: none; background: CanvasText; }\n  .lintje-notifications__bell.is-open { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n", v = 0;
@@ -47,7 +47,7 @@ var S = class extends m {
 		this.open = !1, e && this.bell?.focus();
 	}
 	constructor() {
-		super(), this.items = [], this.max = 9, this.open = !1, this.#e = 0, this.#t = !1, this.news = "", this.#n = 0, this.#r = !1, this.#i = new c(this, o), this.#a = `lintje-notifications-${++v}`, this.onFocusOut = (e) => {
+		super(), this.items = [], this.max = 9, this.open = !1, this.#e = 0, this.#t = !1, this.news = "", this.#n = 0, this.#r = !1, this.#i = new s(this, o), this.#a = `lintje-notifications-${++v}`, this.onFocusOut = (e) => {
 			let t = e.relatedTarget;
 			this.open && !this.#i.matches && t && (n(t, this) || n(this, t) || this.hide(!1));
 		}, this.#o = null, this.#s = new h(), this.#c = (e) => {
@@ -65,7 +65,7 @@ var S = class extends m {
 		let t = this.unread, n = this.#e;
 		this.#t = n > 0 && t > 0 && t !== n, this.#e = t, this.hasUpdated && t > n && this.#l(x(t - n));
 		let r = this.renderRoot.querySelector(".lintje-notifications__read");
-		t === 0 && r && u(r) && (this.#r = !0);
+		t === 0 && r && l(r) && (this.#r = !0);
 	}
 	#l(e) {
 		this.news = "", this.#n && cancelAnimationFrame(this.#n), this.#n = requestAnimationFrame(() => {
@@ -82,7 +82,7 @@ var S = class extends m {
 		t && !this.#o ? this.#u() : !t && this.#o && this.#d();
 	}
 	#u() {
-		this.#o = l(), document.addEventListener("keydown", this.#c);
+		this.#o = c(), document.addEventListener("keydown", this.#c);
 		let e = this.renderRoot.querySelector(".lintje-notifications__sheet"), t = this.renderRoot.querySelector(".lintje-notifications__close");
 		e && this.#s.activate(e, { focus: t ?? !0 });
 	}
@@ -99,65 +99,65 @@ var S = class extends m {
 		} : { id: e.id }) || t.preventDefault());
 	}
 	renderItem(e) {
-		let t = !!e.unread, n = e.href ? s`<a
+		let t = !!e.unread, n = e.href ? p`<a
           class="lintje-notifications__title"
           href=${e.href}
           @click=${(t) => this.choose(e, t)}
           >${e.title}</a
-        >` : s`<button
+        >` : p`<button
           type="button"
           class="lintje-notifications__title"
           @click=${(t) => this.choose(e, t)}
         >
           ${e.title}
         </button>`;
-		return s`<li class=${f({
+		return p`<li class=${d({
 			"lintje-notifications__item": !0,
 			"is-unread": t
 		})}>
-      ${t ? s`<span class="lintje-notifications__dot" role="img" aria-label="Ongelezen"></span>` : s`<span class="lintje-notifications__dot-space"></span>`}
+      ${t ? p`<span class="lintje-notifications__dot" role="img" aria-label="Ongelezen"></span>` : p`<span class="lintje-notifications__dot-space"></span>`}
       <div class="lintje-notifications__body">
         ${n}
-        ${e.text ? s`<p class="lintje-notifications__text">${e.text}</p>` : r}
+        ${e.text ? p`<p class="lintje-notifications__text">${e.text}</p>` : r}
         <p class="lintje-notifications__when">${e.when}</p>
       </div>
     </li>`;
 	}
 	renderPanel(e) {
-		return s`<div class=${f({
+		return p`<div class=${d({
 			"lintje-notifications__panel": !0,
 			"is-sheet": e
 		})}>
       <div class="lintje-notifications__head">
         <h2 class="lintje-notifications__heading">Meldingen</h2>
-        ${this.unread > 0 ? s`<button
+        ${this.unread > 0 ? p`<button
               type="button"
               class="lintje-notifications__read"
               @click=${() => this.emit("lintje-notifications-read")}
             >
               Alles gelezen
             </button>` : r}
-        ${e ? s`<button
+        ${e ? p`<button
               type="button"
               class="lintje-dialog-close lintje-notifications__close"
               aria-label="Meldingen sluiten"
               @click=${() => this.hide(!0)}
             >
-              ${p("functioneel-kruis", { size: 16 })}
+              ${f("functioneel-kruis", { size: 16 })}
             </button>` : r}
       </div>
-      ${this.items.length ? s`<ul class="lintje-notifications__list">
+      ${this.items.length ? p`<ul class="lintje-notifications__list">
             ${this.items.map((e) => this.renderItem(e))}
-          </ul>` : s`<p class="lintje-notifications__empty">
+          </ul>` : p`<p class="lintje-notifications__empty">
             Geen meldingen. Wat klaar is of mislukt, verschijnt hier.
           </p>`}
     </div>`;
 	}
 	render() {
 		let e = this.unread, t = this.#i.matches;
-		return s`<button
+		return p`<button
         type="button"
-        class=${f({
+        class=${d({
 			"lintje-notifications__bell": !0,
 			"is-open": this.open
 		})}
@@ -167,10 +167,10 @@ var S = class extends m {
         aria-controls=${this.#a}
         @click=${() => this.open ? this.hide(!1) : this.open = !0}
       >
-        ${p("functioneel-bel", { size: 20 })}
-        ${e > 0 ? s`<lintje-badge class="lintje-notifications__count" variant="unread" aria-hidden="true"
-              >${d(y(e, this.max), s`<span
-                  class=${f({
+        ${f("functioneel-bel", { size: 20 })}
+        ${e > 0 ? p`<lintje-badge class="lintje-notifications__count" variant="unread" aria-hidden="true"
+              >${u(y(e, this.max), p`<span
+                  class=${d({
 			"lintje-notifications__figure": !0,
 			"is-replaced": this.#t
 		})}
@@ -178,7 +178,7 @@ var S = class extends m {
                 >`)}</lintje-badge
             >` : r}
       </button>
-      ${t ? this.open ? s`<div
+      ${t ? this.open ? p`<div
               id=${this.#a}
               class="lintje-notifications__sheet"
               role="dialog"
@@ -187,7 +187,7 @@ var S = class extends m {
               tabindex="-1"
             >
               ${this.renderPanel(!0)}
-            </div>` : r : s`<lintje-popover
+            </div>` : r : p`<lintje-popover
             id=${this.#a}
             panel-role="dialog"
             label="Meldingen"

package/dist-elements/tag/number-input.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o } from "../chunks/base-rBLTcEIv.js";
-import { n as s, t as c } from "../chunks/input-jQVTln7H.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, qt as o } from "../chunks/base-Bg-IFOPG.js";
+import { n as s, t as c } from "../chunks/input-BtuNFSWk.js";
 //#region src/components/inputs/number-input/number-input.css?inline
 var l = "/* The number field with its stepper. */\n\n/* --- Number field --------------------------------------------------------- */\n.lintje-number-input {\n  display: flex; align-items: stretch;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  border-radius: var(--radius);\n}\n.lintje-number-input.is-error { border: 2px solid var(--color-error); }\n.lintje-number-input.is-readonly { border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); }\n.lintje-number-input.is-readonly .lintje-number-input__step {\n  border-color: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  cursor: default;\n}\n.lintje-number-input.is-readonly .lintje-number-input__step:hover { background: none; }\n.lintje-number-input.is-readonly .lintje-number-input__control { cursor: default; }\n.lintje-number-input.is-disabled { border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); }\n.lintje-number-input__step {\n  width: var(--h-control); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-number-input__step--down { border-right: 1px solid var(--color-border-field); }\n.lintje-number-input__step--up { border-left: 1px solid var(--color-border-field); }\n.lintje-number-input.is-disabled .lintje-number-input__step { border-color: var(--color-border-strong); }\n.lintje-number-input__step:hover:not(:disabled):not(.is-limit) { background: var(--color-bg-subtle); }\n/* At `min` or `max` the step keeps the focus (`aria-disabled`) and looks disabled. */\n.lintje-number-input__step:disabled,\n.lintje-number-input__step.is-limit { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-number-input__control {\n  flex: 1; min-width: 0;\n  border: none; background: none;\n  padding: 0 var(--space-2);\n  text-align: center;\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-primary);\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n/* The browser's own spinner would sit beside the design's. */\n.lintje-number-input__control::-webkit-outer-spin-button,\n.lintje-number-input__control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.lintje-number-input__control:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-number-input--unit .lintje-number-input__control { text-align: left; padding-left: 14px; }\n.lintje-number-input__unit {\n  display: flex; align-items: center; flex: none;\n  padding-right: 14px;\n  font-size: 1rem; color: var(--color-text-muted);\n}\n", u = "lintje-number-input-unit", d = class extends s {
 	constructor(...e) {
@@ -47,9 +47,9 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
 	}
 	stepButton(e) {
 		let t = e === -1, r = !this.disabled && (t ? this.atMin : this.atMax);
-		return i`<button
+		return o`<button
       type="button"
-      class=${a({
+      class=${i({
 			"lintje-number-input__step": !0,
 			[`lintje-number-input__step--${t ? "down" : "up"}`]: !0,
 			"is-limit": r
@@ -59,15 +59,15 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
       aria-disabled=${this.readonly && !this.disabled || r ? "true" : n}
       @click=${() => this.nudge(e * this.step)}
     >
-      ${o(t ? "functioneel-minus" : "functioneel-plus", { size: 16 })}
+      ${a(t ? "functioneel-minus" : "functioneel-plus", { size: 16 })}
     </button>`;
 	}
 	render() {
 		let e = !!this.unit && !this.stepper, t = [e ? u : "", this.describedBy === n ? "" : this.describedBy].filter(Boolean).join(" ");
-		return i`<div class="lintje-field">
+		return o`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
-        class=${a({
+        class=${i({
 			"lintje-number-input": !0,
 			"lintje-number-input--unit": e,
 			"is-error": !!this.error,
@@ -94,7 +94,7 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
           @change=${this.change}
           @keydown=${(e) => this.submitOnEnter(e, () => this.change(e))}
         />
-        ${e ? i`<span id=${u} class="lintje-number-input__unit">${this.unit}</span>` : n}
+        ${e ? o`<span id=${u} class="lintje-number-input__unit">${this.unit}</span>` : n}
         ${this.stepper ? this.stepButton(1) : n}
       </div>
       ${this.renderFoot()}

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

@@ -1,9 +1,9 @@
-import { A as e, At as t, Bt as n, Gt as r, Ht as i, It as a, Kt as o, Lt as s, Z as c, zt as l } from "../chunks/base-rBLTcEIv.js";
+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 "./announcement.js";
 //#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 s(this, a), this.observer = null;
+		super(...e), this.inShell = !1, this.hasActions = !1, this.editable = !1, this.mobile = new o(this, a), this.observer = null;
 	}
 	static {
 		this.styles = i(u);
@@ -48,25 +48,25 @@ var u = ":host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n\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: s, more: l } = e, u = [];
-		return a && u.push(o`<span>Waarde van ${a}</span>`), a && s && u.push(o`<span aria-hidden="true"> · </span>`), s && u.push(o`<span>Bron: ${s}</span>`), l && (u.push(o`<span aria-hidden="true"> · </span>`), u.push(o`<a href=${l.href} class="lintje-page-header__more"
+		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
-        >`)), o`
-      ${e.announcement ? o`<lintje-announcement .data=${e.announcement}></lintje-announcement>` : r}
-      <div class=${c({
+        >`)), c`
+      ${e.announcement ? c`<lintje-announcement .data=${e.announcement}></lintje-announcement>` : r}
+      <div class=${s({
 			"lintje-page-header": !0,
 			"lintje-page-header--shell": n
 		})}>
         <slot name="breadcrumbs"></slot>
-        ${t && e.kicker ? o`<p class="lintje-page-header__kicker">${e.kicker}</p>` : r}
-        <div class=${c({
+        ${t && e.kicker ? c`<p class="lintje-page-header__kicker">${e.kicker}</p>` : r}
+        <div class=${s({
 			"lintje-page-header__row": !0,
 			"is-described": i
 		})}>
           <div class="lintje-page-header__heading">
             <div class="lintje-page-header__title-row">
               <h2 class="lintje-page-header__title">${e.title}</h2>
-              ${this.editable ? o`<lintje-icon-button
+              ${this.editable ? c`<lintje-icon-button
                       class="lintje-page-header__edit"
                       icon="functioneel-bewerken"
                       label="Naam wijzigen"
@@ -74,11 +74,11 @@ var u = ":host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n\n/*
                       @click=${() => this.emit("lintje-title-edit")}
                     ></lintje-icon-button>` : r}
             </div>
-            ${i ? o`<p class="lintje-page-header__description">${e.description}</p>` : r}
+            ${i ? c`<p class="lintje-page-header__description">${e.description}</p>` : r}
           </div>
           <slot
             name="actions"
-            class=${c({
+            class=${s({
 			"lintje-page-header__actions": !0,
 			"is-empty": !this.hasActions
 		})}
@@ -87,7 +87,7 @@ var u = ":host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n\n/*
 		}}
           ></slot>
         </div>
-        ${u.length > 0 ? o`<p class="lintje-page-header__meta">${u}</p>` : r}
+        ${u.length > 0 ? c`<p class="lintje-page-header__meta">${u}</p>` : r}
       </div>
     `;
 	}

package/dist-elements/tag/pagination.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Kt as a, Z as o, a as s, et as c, p as l, q as u, zt as d } from "../chunks/base-rBLTcEIv.js";
+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 "./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;
@@ -40,9 +40,9 @@ function g(e, t, n, r = h) {
 	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 `${s(n)} ${i}`;
+	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 ? s(a) : `${s(a)}–${s(o)}`} van ${s(n)} ${i}`;
+	return `${a === o ? u(a) : `${u(a)}–${u(o)}`} van ${u(n)} ${i}`;
 }
 function _(e) {
 	if (!e) return;
@@ -56,7 +56,7 @@ var v = class extends d {
 	static {
 		this.styles = [
 			e,
-			r(u),
+			r(c),
 			r(f)
 		];
 	}
@@ -144,15 +144,15 @@ var v = class extends d {
 		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 a`<lintje-menu-button
+		return l`<lintje-menu-button
       class="lintje-pagination__size"
       variant="flat"
       placement="bottom-end"
-      label=${`${s(t)} per pagina`}
-      accessible-label=${`${i[0].toUpperCase()}${i.slice(1)}: ${s(t)} per pagina`}
+      label=${`${u(t)} per pagina`}
+      accessible-label=${`${i[0].toUpperCase()}${i.slice(1)}: ${u(t)} per pagina`}
       .items=${r.map((e) => ({
 			value: String(e),
-			label: `${s(e)} per pagina`,
+			label: `${u(e)} per pagina`,
 			checked: e === t,
 			radio: !0
 		}))}
@@ -170,19 +170,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 = c("functioneel-delta-rechts", {
+		let r = e === "previous", i = r ? "Vorige" : "Volgende", s = o("functioneel-delta-rechts", {
 			size: 16,
 			flip: r ? "horizontal" : void 0
-		}), l = a`<span
-      class=${o({
+		}), c = l`<span
+      class=${a({
 			"lintje-pagination__word": !0,
 			"visually-hidden": this.compact
 		})}
       >${i}</span
-    >`, u = r ? a`${s}${l}` : a`${l}${s}`, d = this.hrefFor(t);
-		return n || !d ? a`<button
+    >`, u = r ? l`${s}${c}` : l`${c}${s}`, d = this.hrefFor(t);
+		return n || !d ? l`<button
         type="button"
-        class=${o({
+        class=${a({
 			"lintje-button": !0,
 			"lintje-button--link": !0,
 			"lintje-pagination__step": !0,
@@ -193,7 +193,7 @@ var v = class extends d {
         @click=${(n) => this.choose(n, t, e)}
       >
         ${u}
-      </button>` : a`<a
+      </button>` : l`<a
       class="lintje-button lintje-button--link lintje-pagination__step"
       data-step=${e}
       href=${d}
@@ -202,23 +202,23 @@ var v = class extends d {
     >`;
 	}
 	number(e, t) {
-		let r = e === t, i = o({
+		let r = e === t, i = a({
 			"lintje-pagination__page": !0,
 			"is-current": r
-		}), s = r ? `Pagina ${e}, huidige pagina` : `Ga naar pagina ${e}`, c = this.hrefFor(e);
-		return c ? a`<a
+		}), o = r ? `Pagina ${e}, huidige pagina` : `Ga naar pagina ${e}`, s = this.hrefFor(e);
+		return s ? l`<a
         class=${i}
-        href=${c}
+        href=${s}
         data-page=${e}
-        aria-label=${s}
+        aria-label=${o}
         aria-current=${r ? "page" : n}
         @click=${(t) => this.choose(t, e, e)}
         >${e}</a
-      >` : a`<button
+      >` : l`<button
       type="button"
       class=${i}
       data-page=${e}
-      aria-label=${s}
+      aria-label=${o}
       aria-current=${r ? "page" : n}
       @click=${(t) => this.choose(t, e, e)}
     >
@@ -226,19 +226,19 @@ var v = class extends d {
     </button>`;
 	}
 	render() {
-		let e = this.count, t = this.current, r = m(t, e), i = r.indexOf(t), s = g(t, this.pageSize, this.total, this.countUnit);
-		return a`<div
-      class=${o({
+		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({
 			"lintje-pagination": !0,
 			"is-compact": this.compact,
 			"is-stacked": this.stacked
 		})}
     >
-      ${s ? a`<p class="lintje-pagination__count">${s}</p>` : n}
+      ${o ? l`<p class="lintje-pagination__count">${o}</p>` : n}
       <nav class="lintje-pagination__nav" aria-label=${this.label}>
         ${this.step("previous", t - 1, t <= 1)}
         <span class="lintje-pagination__pages">
-          ${l(r, (e, t) => e === "gap" ? t < i ? "gap-before" : "gap-after" : e, (e) => e === "gap" ? a`<span class="lintje-pagination__gap" aria-hidden="true">…</span>` : this.number(e, t))}
+          ${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))}
         </span>
         <span class="lintje-pagination__where">Pagina ${t} van ${e}</span>
         ${this.step("next", t + 1, t >= e)}

package/dist-elements/tag/popover.js

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

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

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

package/dist-elements/tag/prose.js

@@ -1,7 +1,7 @@
-import { Bt as e, Ht as t, Kt as n, O as r, Z as i, ft as a } from "../chunks/base-rBLTcEIv.js";
+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 { t as o } from "../chunks/prose-CmKVp5kL.js";
 //#region src/components/content/prose/prose.ts
-var s = class extends r {
+var s = class extends n {
 	constructor(...e) {
 		super(...e), this.tone = "default";
 	}
@@ -19,11 +19,11 @@ var s = class extends r {
 		};
 	}
 	render() {
-		let e = i({
+		let e = r({
 			"lintje-prose": !0,
 			[`lintje-prose--${this.tone}`]: this.tone !== "default"
 		});
-		return this.html ? n`<div class=${e}>${a(this.html)}</div>` : this.text ? n`<div class=${e}><p>${this.text}</p></div>` : n`<div class=${e}><slot></slot></div>`;
+		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>`;
 	}
 };
 e("lintje-prose", s);

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

@@ -1,4 +1,4 @@
-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 { 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 "./toast.js";
 import { t as o } from "../chunks/copied-7BXYVkXT.js";
 //#region src/components/actions/qr-code/qr-code.css?inline
@@ -859,8 +859,8 @@ var b = class extends a {
 		e.stopPropagation(), this.failed = !1;
 	}
 	render() {
-		return r`<div class="lintje-qr-code__zone">
-        ${this.drawn ? r`<img class="lintje-qr-code__image" src=${this.drawn} alt=${this.alt} />` : this.tooLong ? r`<p class="lintje-qr-code__hint">${g}</p>` : t}
+		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}
       </div>
       <lintje-button
         variant="secondary"
@@ -868,19 +868,19 @@ var b = class extends a {
         ?disabled=${!this.drawn}
         @click=${this.copy}
         ><span class="lintje-qr-code__labels"
-          ><span class=${i({
+          ><span class=${r({
 			"lintje-qr-code__label": !0,
 			"is-hidden": this.copied
 		})}
             >${p}</span
-          ><span class=${i({
+          ><span class=${r({
 			"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 ? r`<lintje-toast kind="error" @lintje-close=${this.onToastClose}>${h}</lintje-toast>` : t}`;
+      ><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}`;
 	}
 };
 e("lintje-qr-code", b);

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

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a } from "../chunks/base-rBLTcEIv.js";
-import { r as o, t as s } from "../chunks/input-jQVTln7H.js";
+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";
 //#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 {
 	constructor(...e) {
@@ -26,7 +26,7 @@ var c = "/* The radio group's stack; the radio itself is the shared `choice`. */
 		this.value = e, this.commit(e);
 	}
 	render() {
-		return i`<div
+		return a`<div
       class="lintje-field"
       role="radiogroup"
       aria-labelledby=${this.labelId}
@@ -35,12 +35,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=${a({
+      <div class=${i({
 			"lintje-radio-group": !0,
 			"lintje-radio-group--cards": this.variant === "cards"
 		})}>
-        ${(this.options ?? []).map((e) => i`<label
-            class=${a({
+        ${(this.options ?? []).map((e) => a`<label
+            class=${i({
 			"lintje-choice": !0,
 			"lintje-radio-group__card": this.variant === "cards",
 			"is-chosen": this.variant === "cards" && e.value === this.value,
@@ -58,7 +58,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 ? i`<span class="lintje-radio-group__description">${e.description}</span>` : n}</span
+              >${e.label}${this.variant === "cards" && e.description ? a`<span class="lintje-radio-group__description">${e.description}</span>` : n}</span
             >
           </label>`)}
       </div>

package/dist-elements/tag/range.js

@@ -1,5 +1,5 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, ut as a } from "../chunks/base-rBLTcEIv.js";
-import { r as o, t as s } from "../chunks/input-jQVTln7H.js";
+import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, ut as a } from "../chunks/base-Bg-IFOPG.js";
+import { r as o, t as s } from "../chunks/input-BtuNFSWk.js";
 //#region src/components/inputs/range/range-ticks.ts
 var c = [
 	1,
@@ -147,7 +147,7 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
 	}
 	handles() {
 		let e = this.lastIndex;
-		if (this.single) return r`<input
+		if (this.single) return i`<input
         type="range"
         class="lintje-range__input"
         role="slider"
@@ -169,9 +169,9 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
         @change=${(e) => this.commitStep(Number(e.target.value))}
       />`;
 		let [n, a] = this.pair;
-		return r`<input
+		return i`<input
         type="range"
-        class=${i({
+        class=${r({
 			"lintje-range__input": !0,
 			"is-raised": n === a && a === e
 		})}
@@ -219,11 +219,11 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
 			right: null,
 			transform: "translateX(-50%)"
 		}, u = this.single ? 0 : this.pair[0], d = this.single ? this.index : this.pair[1];
-		return r`<div class="lintje-field">
-      ${this.renderLabel(void 0, r`<span class="lintje-field__value">${this.valueText}</span>`)}
-      ${this.hideLabel ? r`<span class="lintje-range__values">${this.valueText}</span>` : t}
+		return i`<div class="lintje-field">
+      ${this.renderLabel(void 0, i`<span class="lintje-field__value">${this.valueText}</span>`)}
+      ${this.hideLabel ? i`<span class="lintje-range__values">${this.valueText}</span>` : t}
       <div
-        class=${i({
+        class=${r({
 			"lintje-range": !0,
 			"is-error": !!this.error
 		})}
@@ -240,15 +240,15 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
         ${this.handles()}
       </div>
       <div class="lintje-range__scale" aria-hidden="true">
-        ${s.marks.map((e) => r`<span
-            class=${i({
+        ${s.marks.map((e) => i`<span
+            class=${r({
 			"lintje-range__mark": !0,
 			"is-labelled": c.has(e)
 		})}
             ${a({ left: `${this.percent(e)}%` })}
           ></span>`)}
-        ${s.labels.map((t) => r`<span
-            class=${i({
+        ${s.labels.map((t) => i`<span
+            class=${r({
 			"lintje-range__step": !0,
 			"is-active": this.single ? t === this.index : t >= u && t <= d
 		})}