lintje 0.1.1

package/dist-elements/map.d.ts

@@ -0,0 +1 @@
+export * from './types/bundle/map.js'

package/dist-elements/map.js

@@ -0,0 +1 @@
+import "./tag/map-tile.js";

package/dist-elements/overlays.d.ts

@@ -0,0 +1 @@
+export * from './types/bundle/overlays.js'

package/dist-elements/overlays.js

@@ -0,0 +1,5 @@
+import "./chunks/base-rBLTcEIv.js";
+import "./tag/modal.js";
+import "./tag/confirm-dialog.js";
+import "./tag/drawer.js";
+import "./tag/toggletip.js";

package/dist-elements/skills/lintje/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: lintje
+description: Lintje gebruiken in een eigen applicatie — een pagina, formulier, tabel of dashboard bouwen met `lintje-*`-tags, een tag kiezen, zijn data zetten of op zijn events reageren. Leest de tag-referentie uit `custom-elements.json`.
+---
+
+# Lintje in een eigen applicatie
+
+Lintje is de Rijkshuisstijl als custom elements. De applicatie **stelt samen**: ze zet tags op de
+pagina, geeft ze data en reageert op hun events. Het uiterlijk, licht en donker, de thema's en het
+responsieve gedrag zitten in de elementen.
+
+## 1. Vind de build
+
+Zoek de map met `lintje.js` en `custom-elements.json` naast elkaar:
+
+```bash
+find . -name custom-elements.json -not -path '*/.git/*' | xargs -n1 dirname
+```
+
+Vindt dat niets, dan is het de map waaruit de `<script src>` van de pagina `lintje.js` of
+`core.js` laadt. Die map is de **naslag** voor de rest van deze skill. Ernaast staan `lintje.d.ts`, `core.d.ts`, de
+categorieën (`frame.d.ts`, `forms.d.ts`, …) en `tag/<naam>.d.ts`, en in `types/types.d.ts` alle datavormen
+(`ShellData`, `DataTableData`, `FilterDefinition`, …). Klaar als je het pad hebt.
+
+## 2. Kies de tags
+
+Zoek in de lijst een tag die doet wat de pagina nodig heeft, voordat je zelf iets bouwt:
+
+```bash
+node <deze skill>/reference.mjs <naslag>/custom-elements.json
+node <deze skill>/reference.mjs <naslag>/custom-elements.json lintje-data-table
+```
+
+De eerste geeft elke tag met zijn eerste regel, de tweede één tag:
+
+- **De beschrijving** is wat een host over de tag moet weten: wat hij tekent, zijn slots en events.
+- **Attributes** zet je in HTML: platte configuratie (`variant`, `label`, `heading`).
+- **Properties** zet je vanuit script: rijke data (`.data`, `.items`, `.options`). Het type
+  noemt de vorm in `types/types.d.ts`.
+- **Events** zijn wat de tag vraagt; de vorm van `detail` is daar een schets.
+
+Lees `custom-elements.json` via het script; het `path` erin wijst naar broncode die de applicatie
+niet heeft.
+
+## 3. Schrijf de pagina
+
+- **Laad één keer, uit één build**: `lintje.js` voor alles, of `core.js` met de categorieën en
+  `tag/<naam>.js` die de pagina gebruikt, nooit beide. Link `tokens.css` (en `fonts.css`) in
+  `<head>`. Laad `dev.js` tijdens het ontwikkelen: de console noemt dan een vergeten tag.
+- **Wijs de iconenmap aan** voordat het eerste element tekent:
+  `setIconSource({ base: '/icons/' })`. Een icoon is zijn bestandsnaam zonder `.svg`.
+- **Zet rijke data als nieuw object.** Lit vergelijkt op identiteit: bouw bij elke wijziging een
+  nieuw object (`shell.data = { ...shell.data, name }`). Een server-gerenderde pagina zet hem als
+  `<script type="application/json">` in het element (met `data-prop="options"` voor een andere
+  property dan `data`).
+- **Beantwoord events met data.** Een element haalt nooit op en schrijft nooit de URL: het stuurt
+  een `lintje-*`-event (bubbling, composed) en wacht tot de applicatie een property zet. Een link
+  is een echte `<a href>`; een applicatie met een router annuleert `lintje-navigate`.
+- **Bewaar wat de cijfers verandert in de URL** — filters, sortering, pagina, modus — en zet het
+  terug als data.
+- **Stijl eigen inhoud met de tokens**: `var(--color-*)`, `var(--space-1)` … `var(--space-10)`,
+  `var(--text-*)`. Een element zelf krijgt geen eigen CSS; een variant is een attribuut.
+- **Schrijf Nederlands**: elke tekst die een lezer ziet, en `lang="nl"` op `<html>`. Thema en modus
+  zijn `data-theme` en `data-mode` op `<html>`.
+- **Toon ontbrekende cijfers als `null`**, nooit als `0`. Een grafiek krijgt zijn `description`,
+  een tabel zijn `caption`: ze worden de tekst voor een schermlezer.
+
+In TypeScript geven de `.d.ts`-bestanden de vormen en de tags
+(`document.querySelector('lintje-shell')` is een `LintjeShell`). Importeer een vorm met
+`import type { ShellData } from '<naslag>/lintje.js'`; met `lit` 3 als devDependency zijn ook de
+geërfde leden van een element getypeerd.
+
+## 4. Controleer
+
+De pagina is klaar als:
+
+- de typecheck slaagt en de console met `dev.js` stil is;
+- elk zichtbaar onderdeel een `lintje-*`-tag is of eigen inhoud die alleen tokens noemt;
+- hij werkt in licht en donker, en op 390, 768 en 1024 px breed;
+- een herladen of gedeelde URL dezelfde weergave toont.
+
+## Verder
+
+De handleidingen staan in `<naslag>/guides/`: `start.md` (een eerste pagina en wat een formulier
+post), `loading.md` (laden en iconen), `events.md` (elk event en zijn
+antwoord), `theming.md` (thema, modus, embleem), `dashboard.md` (filters en de URL),
+`icons.md` (eigen iconen). Lees de handleiding van het onderwerp voordat je eraan begint. De
+styleguide (`https://h11t-labs.github.io/lintje/examples/styleguide/`) toont elke tag in zijn
+toestanden.

package/dist-elements/skills/lintje/reference.mjs

@@ -0,0 +1,52 @@
+/**
+ * Looks up Lintje's tag reference (`custom-elements.json`) so an agent reads one tag instead of
+ * the whole file.
+ *
+ *   node reference.mjs <custom-elements.json>          every tag, with its first line
+ *   node reference.mjs <custom-elements.json> <tag>    one tag: attributes, properties, events, slots
+ */
+import { readFileSync } from 'node:fs'
+
+const [file, tag] = process.argv.slice(2)
+if (!file) {
+  console.error('node reference.mjs <custom-elements.json> [lintje-<name>]')
+  process.exit(1)
+}
+
+const manifest = JSON.parse(readFileSync(file, 'utf8'))
+const elements = manifest.modules
+  .flatMap((module) => module.declarations ?? [])
+  .filter((declaration) => declaration.customElement)
+
+const summary = (element) => (element.description ?? '').split('\n')[0].replace(/^`<[^>]+>` — /, '')
+
+if (!tag) {
+  for (const element of elements) console.log(`${element.tagName} — ${summary(element)}`)
+  process.exit(0)
+}
+
+const element = elements.find((candidate) => candidate.tagName === tag)
+if (!element) {
+  console.error(`No tag "${tag}"; run without a tag for the list.`)
+  process.exit(1)
+}
+
+const type = (entry) => (entry.type?.text ? `: ${entry.type.text}` : '')
+const note = (entry) => (entry.description ? ` — ${entry.description.replace(/\s+/g, ' ')}` : '')
+const fields = element.members.filter(
+  (member) => member.kind === 'field' && !member.privacy && !member.static,
+)
+
+console.log(`${element.tagName} (${element.name})\n\n${element.description ?? ''}\n`)
+console.log('Attributes (HTML):')
+for (const attribute of element.attributes ?? []) {
+  console.log(`  ${attribute.name}${type(attribute)}${note(attribute)}`)
+}
+console.log('Properties (script only):')
+for (const field of fields.filter((member) => !member.attribute)) {
+  console.log(`  .${field.name}${type(field)}${note(field)}`)
+}
+console.log('Events:')
+for (const event of element.events ?? []) console.log(`  ${event.name}${type(event)}${note(event)}`)
+console.log('Slots:')
+for (const slot of element.slots ?? []) console.log(`  ${slot.name || '(default)'}${note(slot)}`)

package/dist-elements/tables.d.ts

@@ -0,0 +1 @@
+export * from './types/bundle/tables.js'

package/dist-elements/tables.js

@@ -0,0 +1,9 @@
+import "./tag/list.js";
+import "./tag/description-list.js";
+import "./tag/pagination.js";
+import "./tag/sortable-list.js";
+import "./tag/data-table.js";
+import "./tag/card.js";
+import "./tag/card-list.js";
+import "./tag/tree-view.js";
+import "./tag/activity-log.js";

package/dist-elements/tag/activity-log.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/tables/activity-log/activity-log.js'

package/dist-elements/tag/activity-log.js

@@ -0,0 +1,76 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/tables/activity-log/activity-log.css?inline
+var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-activity-log {\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-activity-log__heading {\n  margin: 0 0 var(--space-3);\n  font: var(--text-tile-title);\n}\n.lintje-activity-log__list { list-style: none; margin: 0; padding: 0; }\n\n.lintje-activity-log__entry { display: flex; gap: var(--space-3); }\n.lintje-activity-log__rail {\n  flex: 0 0 10px;\n  display: flex; flex-direction: column; align-items: center;\n}\n/* The square sits on the sentence's first line; this stub joins it to the square above. */\n.lintje-activity-log__rail::before {\n  content: '';\n  flex: 0 0 6px;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__rail::before { visibility: hidden; }\n.lintje-activity-log__mark {\n  flex: none;\n  width: 10px; height: 10px;\n  background: var(--color-border-heavy);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: var(--color-accent-line); }\n.lintje-activity-log__line {\n  flex: 1 1 auto;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-last .lintje-activity-log__line { visibility: hidden; }\n\n.lintje-activity-log__body { min-width: 0; padding-bottom: var(--space-4); }\n.lintje-activity-log__entry.is-last .lintje-activity-log__body { padding-bottom: 0; }\n.lintje-activity-log__what { margin: 0; }\n.lintje-activity-log__who { font-weight: 700; }\n.lintje-activity-log__when {\n  display: block;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-activity-log__more { margin-top: var(--space-3); }\n\n/* Forced colours drop fills, so the rail is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-activity-log__rail::before,\n  .lintje-activity-log__mark,\n  .lintje-activity-log__line { forced-color-adjust: none; background: CanvasText; }\n  .lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: Highlight; }\n}\n", s = 10, c = class extends a {
+	constructor(...e) {
+		super(...e), this.entries = [], this.level = 3, this.limit = s;
+	}
+	static {
+		this.styles = n(o);
+	}
+	static {
+		this.properties = {
+			entries: { attribute: !1 },
+			heading: { type: String },
+			level: { type: Number },
+			limit: { type: Number }
+		};
+	}
+	async showMore() {
+		let e = this.limit;
+		if (this.limit += s, await this.updateComplete, this.renderRoot.querySelector(".lintje-activity-log__more")) return;
+		let t = this.renderRoot.querySelectorAll(".lintje-activity-log__entry")[e];
+		t && (t.tabIndex = -1, t.focus());
+	}
+	renderHeading() {
+		if (!this.heading) return t;
+		let e = this.heading, n = "lintje-activity-log-heading";
+		switch (this.level) {
+			case 2: return r`<h2 id=${n} class="lintje-activity-log__heading">${e}</h2>`;
+			case 4: return r`<h4 id=${n} class="lintje-activity-log__heading">${e}</h4>`;
+			case 5: return r`<h5 id=${n} class="lintje-activity-log__heading">${e}</h5>`;
+			case 6: return r`<h6 id=${n} class="lintje-activity-log__heading">${e}</h6>`;
+			default: return r`<h3 id=${n} class="lintje-activity-log__heading">${e}</h3>`;
+		}
+	}
+	entry(e, t, n) {
+		return r`<li
+      class=${i({
+			"lintje-activity-log__entry": !0,
+			"is-newest": t === 0,
+			"is-last": n
+		})}
+    >
+      <span class="lintje-activity-log__rail" aria-hidden="true">
+        <span class="lintje-activity-log__mark"></span>
+        <span class="lintje-activity-log__line"></span>
+      </span>
+      <div class="lintje-activity-log__body">
+        <p class="lintje-activity-log__what">
+          <strong class="lintje-activity-log__who">${e.who}</strong> ${e.what}
+        </p>
+        ${e.at ? r`<time class="lintje-activity-log__when" datetime=${e.at}>${e.when}</time>` : r`<span class="lintje-activity-log__when">${e.when}</span>`}
+      </div>
+    </li>`;
+	}
+	render() {
+		let e = this.entries.slice(0, Math.max(0, this.limit)), n = this.entries.length - e.length;
+		return r`<section class="lintje-activity-log">
+      ${this.renderHeading()}
+      <ol
+        class="lintje-activity-log__list"
+        aria-labelledby=${this.heading ? "lintje-activity-log-heading" : t}
+      >
+        ${e.map((t, n) => this.entry(t, n, n === e.length - 1))}
+      </ol>
+      ${n > 0 ? r`<lintje-button
+              class="lintje-activity-log__more"
+              variant="link"
+              @click=${() => void this.showMore()}
+              >Toon eerdere</lintje-button
+            >` : t}
+    </section>`;
+	}
+};
+e("lintje-activity-log", c);
+//#endregion
+export { c as LintjeActivityLog };

package/dist-elements/tag/ai-label.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/feedback/ai-label/ai-label.js'

package/dist-elements/tag/ai-label.js

@@ -0,0 +1,38 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, X as a, Y as o, et as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/feedback/ai-label/ai-label.css?inline
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-ai-label {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n/* Unlike other badges this one may wrap: a long name would run past a 390 px screen. */\n.lintje-ai-label__box {\n  max-width: 100%;\n  height: auto;\n  min-height: 1.5rem;\n  line-height: 1.25;\n  white-space: normal;\n}\n.lintje-ai-label__badge { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-ai-label__icon { flex: none; }\n.lintje-ai-label__hint { font: var(--text-meta); color: var(--color-text-muted); }\n", u = "Controleer de tekst voor je hem gebruikt", d = class extends c {
+	static {
+		this.styles = [
+			e,
+			o,
+			r(l)
+		];
+	}
+	static {
+		this.properties = {
+			checkedBy: {
+				type: String,
+				attribute: "checked-by"
+			},
+			hint: { type: String }
+		};
+	}
+	render() {
+		let e = !!this.checkedBy, t = this.hint ?? (e ? "" : u), r = i`<span class="lintje-ai-label__badge"
+      >${s(e ? "functioneel-vinkje" : "gereedschap-half-tandwiel-half-brein", {
+			size: 14,
+			className: "lintje-ai-label__icon"
+		})}<span>${e ? `Gecontroleerd door ${this.checkedBy}` : "Gemaakt door AI"}</span></span
+    >`;
+		return i`<span class="lintje-ai-label">
+      ${a({
+			value: r,
+			tone: "neutral",
+			className: "lintje-ai-label__box"
+		})}${t ? i`<span class="lintje-ai-label__hint">${t}</span>` : n}
+    </span>`;
+	}
+};
+t("lintje-ai-label", d);
+//#endregion
+export { d as LintjeAiLabel };

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

@@ -0,0 +1 @@
+export * from '../types/components/feedback/announcement/announcement.js'

package/dist-elements/tag/announcement.js

@@ -0,0 +1,146 @@
+import { $ as e, Bt as t, Gt as n, H as r, Ht as i, Kt as a, O as o, S as s, U as c, et as l, k as u } from "../chunks/base-rBLTcEIv.js";
+import { r as d } from "../chunks/focus-trap-w3vCamJ6.js";
+//#region src/components/shared/view-tile.css?inline
+var f = "/*\n * A view element around a tile: the tile fills the host, so the footnote\n * (`margin-top: auto`) reaches the bottom of the grid cell.\n * `display: block` because a standalone custom element is inline.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) {\n  display: none;\n}\n/* `min-height: inherit`: a held host has a min-height and no height, so `100%` resolves to auto. */\nlintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n", p = {
+	warning: "functioneel-waarschuwing",
+	outage: "functioneel-foutmelding",
+	info: "functioneel-info",
+	ok: "functioneel-cirkel-vinkje"
+}, m = {
+	warning: "status",
+	outage: "alert",
+	info: "status",
+	ok: "status"
+}, h = {
+	warning: "Waarschuwing",
+	outage: "Storing",
+	info: "Informatie",
+	ok: "Gelukt"
+}, g = (e) => `lintje-announcement-dismissed:${e}`, _ = class extends o {
+	constructor(...e) {
+		super(...e), this.compact = !1, this.dismissed = null, this.filled = null, this.fillFrame = 0;
+	}
+	static {
+		this.styles = [
+			e,
+			u,
+			i(f),
+			i(s)
+		];
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			compact: {
+				type: Boolean,
+				reflect: !0
+			},
+			dismissed: { state: !0 },
+			filled: { state: !0 }
+		};
+	}
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	get identity() {
+		let e = this.data;
+		return e ? e.announcementId ?? [
+			e.kind,
+			e.title,
+			e.text
+		].join("\0") : "";
+	}
+	get isDismissed() {
+		let e = this.data;
+		if (!e) return !1;
+		if (this.dismissed === this.identity) return !0;
+		if (!e.announcementId) return !1;
+		try {
+			return localStorage.getItem(g(e.announcementId)) === "1";
+		} catch {
+			return !1;
+		}
+	}
+	holds(e) {
+		for (let t = e; t;) {
+			if (t === this) return !0;
+			t = t.parentNode ?? (t instanceof ShadowRoot ? t.host : null);
+		}
+		return !1;
+	}
+	neighbour() {
+		let e = d(document.body), t = e.indexOf(r());
+		if (t === -1) return null;
+		let n = (e) => !this.holds(e);
+		return e.slice(t + 1).find(n) ?? e.slice(0, t).reverse().find(n) ?? null;
+	}
+	async close() {
+		let e = c(this) ? this.neighbour() : null, t = this.data?.announcementId;
+		if (t) try {
+			localStorage.setItem(g(t), "1");
+		} catch {}
+		this.dismissed = this.identity, e && (await this.updateComplete, e.focus());
+	}
+	disconnectedCallback() {
+		this.fillFrame && cancelAnimationFrame(this.fillFrame), this.fillFrame = 0, super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), !(!this.data?.live || this.isDismissed || this.filled === this.identity || this.fillFrame) && (this.fillFrame = requestAnimationFrame(() => {
+			this.fillFrame = 0, this.filled = this.identity;
+		}));
+	}
+	render() {
+		let e = this.data;
+		if (!e || this.isDismissed) return n;
+		let t = this.block(e), r = e.tile;
+		return r ? a`<lintje-tile
+      id=${this.id ? `${this.id}-tile` : n}
+      span=${r.span ?? n}
+      heading=${r.title ?? n}
+      icon=${r.icon ?? n}
+      subtitle=${r.subtitle ?? n}
+      intro=${r.intro ?? n}
+      footnote=${r.footnote ?? n}
+      >${t}</lintje-tile
+    >` : t;
+	}
+	block(e) {
+		let t = e.kind ?? "warning", r = !!e.dismissible && t !== "outage", i = e.live === !0, o = i && this.filled !== this.identity;
+		return a`<div
+      class="lintje-announcement lintje-announcement--${t} ${this.compact ? "is-compact" : ""}"
+      role=${i ? m[t] ?? n : n}
+    >
+      ${o ? n : this.content(e, t, r)}
+    </div>`;
+	}
+	content(e, t, r) {
+		let i = a`<span class="visually-hidden">${h[t] ?? ""}: </span>`;
+		return a`<span class="lintje-announcement__icon" aria-hidden="true"
+        >${p[t] ? l(p[t], { size: 16 }) : n}</span
+      >
+      <div class="lintje-announcement__body">
+        <div class="lintje-announcement__content">
+          ${e.title ? a`<p class="lintje-announcement__title">${i}${e.title}</p>` : n}
+          ${e.text ? a`<p class="lintje-announcement__text">${e.title ? n : i}${e.text}</p>` : n}
+          ${e.meta || e.link ? a`<p class="lintje-announcement__meta">
+                ${e.meta ?? n}${e.meta && e.link ? " · " : n}${e.link ? a`<a class="lintje-announcement__link" href=${e.link.href}
+                      >${e.link.label}</a
+                    >` : n}
+              </p>` : n}
+        </div>
+        <slot name="action" class="lintje-announcement__action"></slot>
+      </div>
+      <slot name="media" class="lintje-announcement__media"></slot>
+      ${r ? a`<button
+            type="button"
+            class="lintje-announcement__close"
+            aria-label="Mededeling sluiten"
+            @click=${() => void this.close()}
+          >
+            ${l("functioneel-kruis", { size: 16 })}
+          </button>` : n}`;
+	}
+};
+t("lintje-announcement", _);
+//#endregion
+export { _ as LintjeAnnouncement, f as t };

package/dist-elements/tag/app-search.d.ts

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