lintje 0.1.1

package/dist-elements/tag/multiselect.js

@@ -0,0 +1,207 @@
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Kt as a, U as o, W as s, Z as c, et as l, ut as u } from "../chunks/base-rBLTcEIv.js";
+import "../chunks/focus-trap-w3vCamJ6.js";
+import { r as d, t as f } from "../chunks/input-jQVTln7H.js";
+import "./checkbox.js";
+//#region src/components/inputs/multiselect/multiselect.css?inline
+var p = "/* The multi-select's trigger, chips and list. */\n\n/* --- Multi-select --------------------------------------------------------- */\n.lintje-multiselect { position: relative; }\n.lintje-multiselect__field {\n  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;\n  width: 100%; min-height: var(--h-control);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  text-align: left;\n  overflow: hidden;\n}\n.lintje-multiselect__shown { display: contents; }\n.lintje-multiselect__field.is-error { border: 2px solid var(--color-error); }\n.lintje-multiselect__field:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-multiselect__summary {\n  flex: 1 1 auto; min-width: 0;\n  padding-left: var(--space-1);\n  font: var(--text-ui);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-multiselect__placeholder { color: var(--color-text-placeholder); font-size: 1rem; padding-left: 6px; }\n.lintje-multiselect__chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n  /* The label shortens with an ellipsis, the cross and counter never shrink; the whole\n     selection is in the field's `title`. */\n  flex: 0 1 auto; min-width: 0;\n}\n.lintje-multiselect__chip-label { overflow: hidden; text-overflow: ellipsis; min-width: 2ch; }\n/* A transparent hit area reaches the target height, not sideways: the label opens the list. */\n.lintje-multiselect__chip-remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: flex; align-items: center; justify-content: center;\n  cursor: pointer; color: var(--color-text-muted); font-size: 1rem;\n}\n.lintje-multiselect__chip-remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n.lintje-multiselect__overflow { font-size: 0.875rem; color: var(--color-text-muted); flex: none; }\n.lintje-multiselect__scrim { position: fixed; inset: 0; z-index: 45; }\n/* Fixed to the viewport: an absolute popover is cut off by a scrolling box around it. A column,\n   so the list shrinks when the room is short. */\n.lintje-multiselect__popover {\n  position: fixed; z-index: 46;\n  min-width: 260px;\n  max-height: var(--lintje-multiselect-space, none);\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-multiselect__search { flex: none; padding: var(--space-2); border-bottom: 1px solid var(--color-border-default); }\n.lintje-multiselect__search-input {\n  width: 100%; height: var(--h-control); padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface); color: var(--color-text-primary); font-size: 1rem;\n}\n.lintje-multiselect__search-input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-multiselect__list {\n  flex: 1 1 auto; min-height: 0;\n  max-height: 220px; overflow-y: auto;\n  padding: var(--space-2);\n  display: flex; flex-direction: column; gap: 2px;\n}\n/* The `lintje-checkbox` row reads `--h-target` in its shadow root: point it at the option height. */\n.lintje-multiselect__option { --h-target: var(--h-option); }\n.lintje-multiselect__no-results { font: var(--text-small); color: var(--color-text-muted); padding: var(--space-2); }\n.lintje-multiselect__footer {\n  flex: none;\n  display: flex; align-items: center; justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-small); color: var(--color-text-muted);\n}\n.lintje-multiselect__clear {\n  min-height: var(--h-target);\n  color: var(--color-link); font-weight: 700; text-decoration: underline;\n}\n", m = 4, h = 8, g = 260, _ = 180, v = "lintje-multiselect-value", y = "lintje-multiselect-shown";
+function b(e) {
+	return e ? {
+		top: e.top === null ? null : `${e.top}px`,
+		bottom: e.bottom === null ? null : `${e.bottom}px`,
+		left: `${e.left}px`,
+		width: `${e.width}px`,
+		"--lintje-multiselect-space": `${e.space}px`
+	} : {};
+}
+function x(e) {
+	return e.label ?? String(e.value);
+}
+var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d {
+	constructor(...e) {
+		super(...e), this.placeholder = "Kies één of meer…", this.stacked = !1, this.open = !1, this.query = "", this.anchor = null, this.news = "", this.reflowFrame = 0, this.onOutsideClick = (e) => {
+			this.open && (e.composedPath().includes(this) || (this.open = !1));
+		}, this.onEscape = (e) => {
+			this.open && e.key === "Escape" && s(this) && (e.stopPropagation(), this.close());
+		}, this.onReflow = () => {
+			this.open && !this.reflowFrame && (this.reflowFrame = requestAnimationFrame(() => {
+				this.reflowFrame = 0, this.measure();
+			}));
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			i(f),
+			i(p)
+		];
+	}
+	static {
+		this.properties = {
+			placeholder: { type: String },
+			summary: { type: String },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			options: { attribute: !1 },
+			selected: { attribute: !1 },
+			query: { state: !0 },
+			anchor: { state: !0 },
+			news: { state: !0 }
+		};
+	}
+	get trigger() {
+		return this.renderRoot.querySelector(".lintje-multiselect__field");
+	}
+	async close() {
+		let e = this.renderRoot.querySelector(".lintje-multiselect__popover"), t = e !== null && o(e);
+		this.open = !1, this.query = "", await this.updateComplete, t && this.trigger?.focus();
+	}
+	onFocusOut(e) {
+		let t = e.relatedTarget;
+		this.open && t && !this.renderRoot.contains(t) && !n(this, t) && (this.open = !1, this.query = "");
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("mousedown", this.onOutsideClick), document.addEventListener("keydown", this.onEscape, !0), window.addEventListener("scroll", this.onReflow, {
+			capture: !0,
+			passive: !0
+		}), window.addEventListener("resize", this.onReflow);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscape, !0), window.removeEventListener("scroll", this.onReflow, { capture: !0 }), window.removeEventListener("resize", this.onReflow), this.reflowFrame && cancelAnimationFrame(this.reflowFrame), this.reflowFrame = 0, super.disconnectedCallback();
+	}
+	measure() {
+		let e = this.renderRoot.querySelector(".lintje-multiselect__field");
+		if (!e) return;
+		let t = e.getBoundingClientRect(), n = window.innerHeight || document.documentElement.clientHeight, r = window.innerWidth || document.documentElement.clientWidth, i = Math.max(t.width, g), a = n - t.bottom - m - h, o = t.top - m - h, s = a < _ && o > a, c = {
+			top: s ? null : t.bottom + m,
+			bottom: s ? n - t.top + m : null,
+			left: Math.max(h, Math.min(t.left, r - i - h)),
+			width: i,
+			space: Math.max(_, s ? o : a)
+		}, l = this.anchor;
+		l && l.top === c.top && l.bottom === c.bottom && l.left === c.left && l.width === c.width && l.space === c.space || (this.anchor = c);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("open") && (this.open ? this.measure() : this.anchor = null, this.news = "");
+	}
+	updated(e) {
+		if (!e.has("open") || !this.open) return;
+		let t = this.renderRoot.querySelector(".lintje-multiselect__search-input");
+		t && this.shadowRoot?.activeElement !== t && t.focus({ preventScroll: !0 });
+	}
+	choose(e) {
+		this.news = `${e.length} geselecteerd`, this.announce(e);
+	}
+	search(e) {
+		this.query = e;
+		let t = e.trim().toLowerCase(), n = (this.options ?? []).filter((e) => x(e).toLowerCase().includes(t)).length;
+		this.news = t ? n ? S(n) : `Geen waarde met “${e}”` : "";
+	}
+	valueText(e) {
+		return e.length ? `${e.length} geselecteerd: ${e.join(", ")}` : "niets geselecteerd";
+	}
+	toggleOption(e) {
+		let t = this.selected ?? [];
+		this.choose(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}
+	checkbox(e, t, n, i, o) {
+		return a`<lintje-checkbox
+      class="lintje-multiselect__option"
+      label=${e}
+      hint=${o ?? r}
+      ?checked=${t}
+      ?indeterminate=${n && !t}
+      @lintje-change=${(e) => i(e.detail)}
+    ></lintje-checkbox>`;
+	}
+	render() {
+		let e = this.options ?? [], t = this.selected ?? [], n = this.query.trim().toLowerCase(), i = e.filter((e) => x(e).toLowerCase().includes(n)), o = t.length === e.length, s = t.length > 0 && !o, d = t.slice(0, 2), f = t.length - d.length, p = t.map((t) => e.find((e) => e.value === t)?.label ?? t);
+		return a`<div class="lintje-field lintje-multiselect" @focusout=${this.onFocusOut}>
+      ${this.renderLabel()}
+      <button
+        type="button"
+        class=${c({
+			"lintje-multiselect__field": !0,
+			"is-error": !!this.error
+		})}
+        aria-expanded=${this.open}
+        aria-haspopup="dialog"
+        aria-labelledby="${this.labelId} ${y} ${v}"
+        aria-describedby=${this.describedBy}
+        aria-invalid=${this.error ? "true" : r}
+        ?disabled=${this.disabled}
+        title=${p.length ? p.join(", ") : r}
+        @click=${() => {
+			this.open ? this.close() : this.open = !0;
+		}}
+      >
+        <span id=${v} class="visually-hidden">${this.valueText(p)}</span>
+        <!-- What the button shows is part of its name, so a voice command can use it (WCAG 2.5.3). -->
+        <span id=${y} class="lintje-multiselect__shown">        ${this.summary ? a`<span class="lintje-multiselect__summary">${this.summary}</span>${l("functioneel-delta-omlaag", { size: 16 })}` : r}
+        ${t.length === 0 && !this.summary ? a`<span class="lintje-multiselect__placeholder">${this.placeholder}</span>` : r}
+        ${(this.summary ? [] : d).map((t) => a`<span class="lintje-multiselect__chip">
+            <span class="lintje-multiselect__chip-label"
+              >${e.find((e) => e.value === t)?.label}</span
+            >
+            <!-- Mouse shortcut. No button and no role: chips sit inside the trigger button, and
+                 a button inside a button is invalid HTML and not focusable. For keyboard and
+                 screen reader users, removing goes through the options panel. -->
+            <span
+              aria-hidden="true"
+              class="lintje-multiselect__chip-remove"
+              @click=${(e) => {
+			e.stopPropagation(), this.toggleOption(t);
+		}}
+              >×</span
+            >
+          </span>`)}
+        ${f > 0 && !this.summary ? a`<span class="lintje-multiselect__overflow">+${f}</span>` : r}</span
+        >
+      </button>
+
+      ${this.open ? a`<span
+              class="lintje-multiselect__scrim"
+              @click=${() => void this.close()}
+            ></span>
+            <div
+              class="lintje-multiselect__popover"
+              role="dialog"
+              aria-label=${this.label || this.placeholder}
+              ${u(b(this.anchor))}
+            >
+              <div class="lintje-multiselect__search">
+                <input
+                  class="lintje-multiselect__search-input"
+                  .value=${this.query}
+                  placeholder="Zoek…"
+                  aria-label="Zoeken"
+                  @input=${(e) => this.search(e.target.value)}
+                />
+              </div>
+              <div class="lintje-multiselect__list">
+                ${this.checkbox(`Alles selecteren (${e.length})`, o, s, (t) => this.choose(t ? e.map((e) => e.value) : []))}
+                ${i.map((e) => this.checkbox(x(e), t.includes(e.value), !1, () => this.toggleOption(e.value), e.description))}
+                ${i.length === 0 ? a`<p class="lintje-multiselect__no-results">
+                      Geen waarde met “${this.query}”.
+                    </p>` : r}
+              </div>
+              <div class="lintje-multiselect__footer">
+                <button type="button" class="lintje-multiselect__clear" @click=${() => this.choose([])}>
+                  Wissen
+                </button>
+                <span>${t.length} geselecteerd</span>
+              </div>
+            </div>` : r}
+      <span class="visually-hidden" role="status">${this.news}</span>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-multiselect", C);
+//#endregion
+export { C as LintjeMultiselect };

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

@@ -0,0 +1 @@
+export * from '../types/components/charts/note/note.js'

package/dist-elements/tag/note.js

@@ -0,0 +1,27 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, O as i, k as a } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/charts/note/note.css?inline
+var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-note { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-note {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n  display: flex; flex-direction: column; gap: var(--space-2);\n  min-width: 0;\n}\n.lintje-note__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-note__title { font: var(--text-tile-title); }\n.lintje-note__date { font: var(--text-tile-sub); color: var(--color-text-muted); }\n.lintje-note__text { font: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }\n.lintje-note__author { font: var(--text-meta); color: var(--color-text-muted); }\n", s = class extends i {
+	static {
+		this.styles = [a, n(o)];
+	}
+	static {
+		this.properties = { data: { attribute: !1 } };
+	}
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	render() {
+		let e = this.data;
+		return e ? r`<section class="lintje-note">
+      <header class="lintje-note__header">
+        <h3 class="lintje-note__title">${e.title ?? "Toelichting analist"}</h3>
+        <span class="lintje-note__date">${e.date}</span>
+      </header>
+      <p class="lintje-note__text">${e.text}</p>
+      <p class="lintje-note__author">— ${e.author}</p>
+    </section>` : t;
+	}
+};
+e("lintje-note", s);
+//#endregion
+export { s as LintjeNote };

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

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

package/dist-elements/tag/notifications.js

@@ -0,0 +1,204 @@
+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 { 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;
+function y(e, t = 9) {
+	return e > t ? `${t}+` : String(e);
+}
+function b(e, t = 9) {
+	return e > 0 ? `Meldingen, ${y(e, t)} ongelezen` : "Meldingen";
+}
+function x(e) {
+	return e === 1 ? "1 nieuwe melding" : `${e} nieuwe meldingen`;
+}
+var S = class extends m {
+	static {
+		this.styles = [
+			e,
+			i(g),
+			i(_)
+		];
+	}
+	static {
+		this.properties = {
+			items: { attribute: !1 },
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			max: { type: Number },
+			news: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	get bell() {
+		return this.renderRoot.querySelector(".lintje-notifications__bell");
+	}
+	get unread() {
+		return this.items.filter((e) => e.unread).length;
+	}
+	hide(e) {
+		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) => {
+			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) => {
+			e.key === "Escape" && this.#s.isTopmost() && this.hide(!0);
+		}, this.addEventListener("focusout", this.onFocusOut);
+	}
+	#o;
+	#s;
+	#c;
+	disconnectedCallback() {
+		this.#d(), this.#n && cancelAnimationFrame(this.#n), this.#n = 0, super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), !e.has("items")) return;
+		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);
+	}
+	#l(e) {
+		this.news = "", this.#n && cancelAnimationFrame(this.#n), this.#n = requestAnimationFrame(() => {
+			this.#n = 0, this.news = e;
+		});
+	}
+	updated(e) {
+		if (super.updated(e), this.#r) {
+			this.#r = !1;
+			let e = this.renderRoot;
+			(e.querySelector(".lintje-notifications__title") ?? e.querySelector(".lintje-notifications__close"))?.focus();
+		}
+		let t = this.open && this.#i.matches;
+		t && !this.#o ? this.#u() : !t && this.#o && this.#d();
+	}
+	#u() {
+		this.#o = l(), 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 });
+	}
+	#d() {
+		this.#o && (document.removeEventListener("keydown", this.#c), this.#o(), this.#o = null, this.#s.deactivate());
+	}
+	onPopoverClose(e) {
+		e.stopPropagation(), this.hide(e.detail?.reason === "escape");
+	}
+	choose(e, t) {
+		(!e.href || a(t)) && (this.hide(!0), this.emit("lintje-notification-open", e.href ? {
+			id: e.id,
+			href: e.href
+		} : { id: e.id }) || t.preventDefault());
+	}
+	renderItem(e) {
+		let t = !!e.unread, n = e.href ? s`<a
+          class="lintje-notifications__title"
+          href=${e.href}
+          @click=${(t) => this.choose(e, t)}
+          >${e.title}</a
+        >` : s`<button
+          type="button"
+          class="lintje-notifications__title"
+          @click=${(t) => this.choose(e, t)}
+        >
+          ${e.title}
+        </button>`;
+		return s`<li class=${f({
+			"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>`}
+      <div class="lintje-notifications__body">
+        ${n}
+        ${e.text ? s`<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({
+			"lintje-notifications__panel": !0,
+			"is-sheet": e
+		})}>
+      <div class="lintje-notifications__head">
+        <h2 class="lintje-notifications__heading">Meldingen</h2>
+        ${this.unread > 0 ? s`<button
+              type="button"
+              class="lintje-notifications__read"
+              @click=${() => this.emit("lintje-notifications-read")}
+            >
+              Alles gelezen
+            </button>` : r}
+        ${e ? s`<button
+              type="button"
+              class="lintje-dialog-close lintje-notifications__close"
+              aria-label="Meldingen sluiten"
+              @click=${() => this.hide(!0)}
+            >
+              ${p("functioneel-kruis", { size: 16 })}
+            </button>` : r}
+      </div>
+      ${this.items.length ? s`<ul class="lintje-notifications__list">
+            ${this.items.map((e) => this.renderItem(e))}
+          </ul>` : s`<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
+        type="button"
+        class=${f({
+			"lintje-notifications__bell": !0,
+			"is-open": this.open
+		})}
+        aria-label=${b(e, this.max)}
+        aria-haspopup="dialog"
+        aria-expanded=${String(this.open)}
+        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({
+			"lintje-notifications__figure": !0,
+			"is-replaced": this.#t
+		})}
+                  >${y(e, this.max)}</span
+                >`)}</lintje-badge
+            >` : r}
+      </button>
+      ${t ? this.open ? s`<div
+              id=${this.#a}
+              class="lintje-notifications__sheet"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Meldingen"
+              tabindex="-1"
+            >
+              ${this.renderPanel(!0)}
+            </div>` : r : s`<lintje-popover
+            id=${this.#a}
+            panel-role="dialog"
+            label="Meldingen"
+            placement="bottom-end"
+            ?open=${this.open}
+            @lintje-close=${this.onPopoverClose}
+            >${this.renderPanel(!1)}</lintje-popover
+          >`}
+      <span class="visually-hidden" role="status">${this.news}</span>`;
+	}
+};
+t("lintje-notifications", S);
+//#endregion
+export { S as LintjeNotifications, b as bellLabel, y as countLabel, x as newsMessage };

package/dist-elements/tag/number-input.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/inputs/number-input/number-input.js'

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

@@ -0,0 +1,106 @@
+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";
+//#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) {
+		super(...e), this.value = null, this.step = 1, this.stepper = !0, this.stacked = !1;
+	}
+	static {
+		this.styles = [
+			e,
+			r(c),
+			r(l)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: Number },
+			min: { type: Number },
+			max: { type: Number },
+			step: { type: Number },
+			unit: { type: String },
+			stepper: { type: Boolean },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	get formValue() {
+		return this.value === null ? "" : String(this.value);
+	}
+	get atMin() {
+		return this.min !== void 0 && this.value !== null && this.value <= this.min;
+	}
+	get atMax() {
+		return this.max !== void 0 && this.value !== null && this.value >= this.max;
+	}
+	nudge(e) {
+		if (this.readonly || this.disabled) return;
+		let t = this.value ?? this.min ?? 0, n = this.value === null ? t : t + e;
+		this.min !== void 0 && (n = Math.max(this.min, n)), this.max !== void 0 && (n = Math.min(this.max, n)), n = Math.round(n * 1e6) / 1e6, n !== this.value && (this.value = n, this.commit(n));
+	}
+	change(e) {
+		if (this.readonly) return;
+		let t = e.target.value, n = t === "" ? null : Number(t);
+		n !== this.value && (this.value = n, this.commit(this.value));
+	}
+	stepButton(e) {
+		let t = e === -1, r = !this.disabled && (t ? this.atMin : this.atMax);
+		return i`<button
+      type="button"
+      class=${a({
+			"lintje-number-input__step": !0,
+			[`lintje-number-input__step--${t ? "down" : "up"}`]: !0,
+			"is-limit": r
+		})}
+      aria-label=${t ? "Verlagen" : "Verhogen"}
+      ?disabled=${this.disabled}
+      aria-disabled=${this.readonly && !this.disabled || r ? "true" : n}
+      @click=${() => this.nudge(e * this.step)}
+    >
+      ${o(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">
+      ${this.renderLabel(this.controlId)}
+      <div
+        class=${a({
+			"lintje-number-input": !0,
+			"lintje-number-input--unit": e,
+			"is-error": !!this.error,
+			"is-readonly": this.readonly,
+			"is-disabled": this.disabled
+		})}
+      >
+        ${this.stepper ? this.stepButton(-1) : n}
+        <input
+          type="number"
+          id=${this.controlId}
+          class="lintje-number-input__control focus-inset"
+          .value=${this.value === null ? "" : String(this.value)}
+          min=${this.min ?? n}
+          max=${this.max ?? n}
+          step=${this.step}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${t || n}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @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}
+        ${this.stepper ? this.stepButton(1) : n}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-number-input", d);
+//#endregion
+export { d as LintjeNumberInput };

package/dist-elements/tag/page-header.d.ts

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