lintje 0.1.1

package/dist-elements/dev.d.ts

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

package/dist-elements/dev.js

@@ -0,0 +1,31 @@
+//#region src/bundle/dev.ts
+function e(e = document) {
+	let t = /* @__PURE__ */ new Set();
+	for (let n of e.querySelectorAll("*")) {
+		let e = n.localName;
+		e.startsWith("lintje-") && !customElements.get(e) && t.add(e);
+	}
+	return [...t].sort();
+}
+var t = /* @__PURE__ */ new Set();
+function n(n = document) {
+	let r = e(n).filter((e) => !t.has(e));
+	for (let e of r) t.add(e), console.warn(`<${e}> is on the page but not defined. Import its file (tag/${e.replace(/^lintje-/, "")}.js) or its category.`);
+	return r;
+}
+var r = 1e3;
+if (typeof document < "u" && typeof MutationObserver < "u") {
+	let e, t = () => {
+		e === void 0 && (e = setTimeout(() => {
+			e = void 0, n();
+		}, r));
+	}, i = () => {
+		t(), new MutationObserver(t).observe(document.documentElement, {
+			childList: !0,
+			subtree: !0
+		});
+	};
+	document.readyState === "complete" ? i() : window.addEventListener("load", i, { once: !0 });
+}
+//#endregion
+export { n as reportUndefinedTags, e as undefinedTags };

package/dist-elements/feedback.d.ts

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

package/dist-elements/feedback.js

@@ -0,0 +1,10 @@
+import "./chunks/base-rBLTcEIv.js";
+import "./tag/toast.js";
+import "./tag/announcement.js";
+import "./tag/empty-state.js";
+import "./tag/conflict-alert.js";
+import "./tag/job-list.js";
+import "./tag/streaming-text.js";
+import "./tag/ai-label.js";
+import "./tag/level-meter.js";
+import "./tag/recording-status.js";

package/dist-elements/filters.d.ts

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

package/dist-elements/filters.js

@@ -0,0 +1,3 @@
+import "./tag/filter-zone.js";
+import "./tag/filter-sheet.js";
+import "./tag/filter-bar.js";

package/dist-elements/fonts.css

@@ -0,0 +1,21 @@
+/*
+ * The two `@font-face` rules. A shadow root ignores `@font-face` (Chromium), so they work only
+ * on the page; the build writes this file to `dist-elements/fonts.css`.
+ */
+
+/* RijksSans from RVO's assets (`@nl-rvo/assets`): variable (weight 200–800), upright and italic.
+   The build copies both files to `fonts/` beside `fonts.css`. */
+@font-face {
+  font-family: 'RijksSans';
+  font-style: normal;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url('./fonts/RijksSansWeb-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'RijksSans';
+  font-style: italic;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url('./fonts/RijksSansWeb-Italic.woff2') format('woff2');
+}

package/dist-elements/forms.d.ts

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

package/dist-elements/forms.js

@@ -0,0 +1,7 @@
+import "./inputs.js";
+import "./tag/error-summary.js";
+import "./tag/form-actions.js";
+import "./tag/form.js";
+import "./tag/form-section.js";
+import "./tag/stepper.js";
+import "./tag/repeater.js";

package/dist-elements/frame.d.ts

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

package/dist-elements/frame.js

@@ -0,0 +1,11 @@
+import "./tag/notifications.js";
+import "./tag/user-menu.js";
+import "./tag/shell.js";
+import "./tag/page-header.js";
+import "./tag/breadcrumbs.js";
+import "./tag/sub-nav.js";
+import "./tag/hero.js";
+import "./tag/footer.js";
+import "./tag/app-search.js";
+import "./tag/shortcuts.js";
+import "./tag/session-expiry.js";

package/dist-elements/guides/dashboard.md

@@ -0,0 +1,149 @@
+# Een dashboard
+
+Een pagina met cijfers die filters versmallen, in `lintje-shell`: `lintje-page-header`,
+`lintje-filter-bar`, en daaronder KPI's, grafieken, een kaart en tabellen. De regels erachter staan in
+[`../DESIGN_SYSTEM.md`](https://github.com/h11t-labs/lintje/blob/main/docs/DESIGN_SYSTEM.md), "Pagina's met cijfers".
+[`../../examples/dashboard/`](https://github.com/h11t-labs/lintje/blob/main/examples/dashboard/index.html) is de complete pagina.
+
+## De URL is de toestand
+
+**Een link delen deelt de weergave.** Alles wat de cijfers verandert, en de instellingen van de lezer,
+horen in de querystring: de toestand van je pagina, die jij bewaart. De elementen lezen geen
+URL: ze krijgen de toestand in hun `data` en sturen een wijziging als event ([events](events.md);
+`lintje-view-change` draagt de ene sleutel uit de tabel hieronder die veranderde).
+
+Schrijf de wijziging in de query en zet daarna `data` opnieuw op basis daarvan. Een standaardwaarde wordt nooit geschreven, dus
+een link die zonder `?mode=` gedeeld wordt, volgt het systeem van de lezer en niet dat van de afzender.
+[`../../examples/_shared/settings.js`](https://github.com/h11t-labs/lintje/blob/main/examples/_shared/settings.js) is één manier om het te doen:
+
+| sleutel | waarden | afwezig betekent |
+|---|---|---|
+| `mode` | `light` · `dark` | systeem: de `prefers-color-scheme` van de lezer |
+| `menu` | `unpinned` | vastgezet |
+| `layout` | `top` | het menu naast de pagina |
+| `theme` | een thema | `rijksoverheid` |
+| `filters` | of de filterbalk openstaat (`data.open`) | ingeklapt |
+
+De sleutel van een filter is degene die je declareert. Spiegel modus en thema naar `data-mode` en
+`data-theme` op `<html>`, want de elementen lezen ze daar: `applySettings` in de
+[minimale pagina](#een-minimale-dashboardpagina) doet het.
+
+## Filters
+
+Jij declareert de filters (`FilterDefinition` in `src/types.ts`) en `lintje-filter-bar` tekent
+ze, met de "Je ziet"-zin opgebouwd uit hun waarden. `lintje-values-change` draagt
+`{ key: value, … }` wanneer filters vastleggen: zet elke waarde in zijn filter, render opnieuw en bewaar haar
+in de URL. `lintje-filters-open-change` meldt dat de lezer de balk in- of uitklapte: bewaar het en zet
+het terug als `data.open`.
+
+Zet **één** filterbalk op een pagina: twee zouden allebei eigenaar zijn van het aantal filters, de paginanaam en de
+filters onder 768 px.
+
+## De shell draagt de pagina
+
+`lintje-shell` met `layout: 'side'` zet het menu naast de pagina: vastgezet vanaf 1440 px, een rail
+daaronder, een header met "Menu" onder 768 px. Boven de pagina staat een balk met de naam van het dashboard,
+"Weergave" en "Delen". Met `layout: 'top'` is het de header boven de pagina — de logobalk,
+en de navigatiebalk met de naam, de items en dezelfde hulpmiddelen. De shell deelt de
+ruimte in; je pagina zet zelf geen padding.
+
+"Delen" (`share: true`) biedt "Open op mijn telefoon": een QR-code van de huidige link, gemaakt door
+de shell. Waar telefoons links openen in een beheerde browser, zet `qrScheme` de link onder zijn
+scheme — `mibrowsers` voor Ivanti Web@Work — terwijl kopiëren en e-mail `https` houden.
+
+Zet de inhoud in de shell. De filterbalk gaat in de `full`-slot, die van rand tot rand loopt
+boven de inhoud; al het andere in de standaardslot, die zich houdt aan de breedte en
+padding van de pagina (`--w-content`; een andere breedte is `--lintje-content-width` op `<html>`). De
+filterbalk zet zichzelf vast onder de balk.
+
+```html
+<lintje-shell id="shell">
+  <lintje-filter-bar id="filters" slot="full"></lintje-filter-bar>
+  <lintje-page-header id="page-header"></lintje-page-header>
+  <lintje-kpi-row id="kpis"></lintje-kpi-row>
+</lintje-shell>
+```
+
+Alles van jezelf wat je onder de balk vastzet, gebruikt `top: var(--h-topbar)`, in beide layouts.
+Iets wat je vastzet aan de
+viewport begint bij `left: var(--lintje-shell-left)`, de breedte van het menu, binnen de shell.
+
+De skiplink, de eerste tabstop in beide layouts, brengt de focus naar de `<main>` van de shell.
+
+**Een pagina die een gesprek is** zet één `lintje-chat` in de `full`-slot en verder niets:
+de chat houdt een eigen regelbreedte aan, en de lijn boven zijn vraagvak loopt over de hele ruimte
+zoals een balk dat doet. Met niets in de standaardslot neemt de chat de ruimte die de shell overlaat, zodat een
+kort gesprek zijn vraagvak toch onderaan het venster heeft. In een eigen vak scrollt
+de chat in plaats daarvan met dat vak mee: geef het vak een hoogte, `overflow-y: auto` en
+`display: grid`.
+
+**Koppen** gaan zoals in [een eerste pagina](start.md); de `name` van de shell is hier de naam van het
+dashboard. In de standaardslot is de paginaheader een band; in de `header`-slot is hij de titelrij van een
+applicatie.
+
+## Doorklikken en selectie
+
+`lintje-row-click` en `lintje-mark-select` komen van de tabel en van de grafiek- en
+kaarttegels. Volg de `href` die je op die rij of markering hebt gezet, of zet `data.selectedId` zelf.
+Een selectie ongedaan maken is hetzelfde event met de id null en de `href` die je als `clearHref` gaf.
+`lintje-sort-change` zet `data.sort`, `lintje-checked-change` `data.checkedIds`,
+`lintje-layer-change` de `data.layer` van de kaart.
+
+`ChartTileData.description` en `DataTableData.caption` zijn verplicht: ze worden de `<desc>` van de grafiek
+en de `<caption>` van de tabel. Schrijf ze alsof de figuur er niet was.
+
+## Een minimale dashboardpagina
+
+```html
+<!doctype html>
+<html lang="nl" data-mode="light" data-theme="rijksoverheid">
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="./dist-elements/fonts.css" /> <!-- with fonts/ beside it -->
+  <link rel="stylesheet" href="./dist-elements/tokens.css" />
+  <!-- the body block of theming.md -->
+  <style>body { margin: 0; background: var(--color-bg-page); color: var(--color-text-primary); font: var(--text-ui); }</style>
+  <lintje-shell id="shell">
+    <lintje-kpi-row id="kpis"></lintje-kpi-row>
+  </lintje-shell>
+  <script type="module">
+    import { setIconSource } from './dist-elements/lintje.js'
+    setIconSource({ base: './icons/' })
+    const shell = document.getElementById('shell')
+    function applySettings(search) {
+      const params = new URLSearchParams(search)
+      const setting = params.get('mode') // absent → system
+      const dark =
+        setting === 'dark' ||
+        (setting !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches)
+      document.documentElement.dataset.mode = dark ? 'dark' : 'light'
+      document.documentElement.dataset.theme = params.get('theme') ?? 'rijksoverheid'
+    }
+    function render() {
+      const params = new URLSearchParams(location.search)
+      shell.data = {
+        // a new object every time
+        name: 'Dashboard Vergunningen',
+        layout: 'side',
+        navigation: [{ label: 'Overzicht', icon: 'functioneel-home', href: './', active: true }],
+        view: { mode: params.get('mode') ?? 'system' },
+        menu: params.get('menu') === 'unpinned' ? 'unpinned' : 'pinned',
+        user: { initials: 'JV', name: 'J. Vermeer', role: 'Analist' },
+      }
+      applySettings(location.search)
+    }
+    shell.addEventListener('lintje-view-change', (event) => {
+      const params = new URLSearchParams(location.search)
+      const { mode, menu } = event.detail
+      if (mode) mode === 'system' ? params.delete('mode') : params.set('mode', mode)
+      if (menu) menu === 'unpinned' ? params.set('menu', menu) : params.delete('menu')
+      const query = params.toString()
+      history.replaceState(null, '', `${location.pathname}${query ? `?${query}` : ''}`)
+      render()
+    })
+    render()
+    document.getElementById('kpis').data = {
+      kpis: [{ label: 'Aanvragen', value: '148.230', variable: 'sky-blue' }],
+    }
+  </script>
+</html>
+```

package/dist-elements/guides/events.md

@@ -0,0 +1,109 @@
+# Events: wat een element vraagt, en wat jij antwoordt
+
+Een element haalt nooit iets op, schrijft nooit de URL en navigeert nooit. Het stuurt een event en wacht
+tot jij een property zet. Elk event is een `CustomEvent`, bubbling en composed, dus één listener
+op `document` hoort het vanaf elke diepte: de payload is `event.detail`, `event.target` het element
+dat het stuurde. Welke tag wat stuurt, staat in de styleguide, onder elk element.
+
+## Links
+
+Een element dat een bestemming tekent, tekent een echte `<a href>`, en **de browser volgt die**: een
+pagina per adres heeft geen script nodig. Een gewone klik wordt ook gemeld als `lintje-navigate`. Een pagina
+met een eigen router annuleert dat event en gaat er zelf heen:
+
+```js
+document.addEventListener('lintje-navigate', (event) => {
+  event.preventDefault() // the click is now yours
+  router.push(event.detail.href)
+})
+```
+
+Een klik met een modifier, of met een andere knop, is altijd van de browser: een nieuw tabblad, een
+download. Waar geen klik te volgen is — een resultaat dat je met Enter kiest in de zoekfunctie, een
+klik naast de titel van een kaart, een rij van de takenlijst — gaat het element zelf naar het adres, tenzij je het event annuleert. Een linkrij van `lintje-list` (`lintje-row-click`) en een melding met een `href`
+(`lintje-notification-open`) werken op dezelfde manier.
+
+Een instelling van de lezer in de shell — modus, thema, waar het menu staat — is geen link:
+`lintje-shell` stuurt `lintje-view-change` met de instelling die veranderde en laat het aan jou over
+([dashboards](dashboard.md)).
+
+## Formulieren
+
+In een native `<form>` posten de invoerelementen hun waarden zoals native bedieningselementen dat doen, en geen event heeft
+een antwoord nodig ([een eerste pagina](start.md) heeft de tabel van wat elk bedieningselement post). Een invoer met een naam
+stuurt daar toch `lintje-values-change`; negeer het.
+
+`<lintje-form>` is het formulier dat opslaat zonder de pagina te verlaten. Het verzamelt de waarden van de
+velden met een naam erin en vraagt één keer:
+
+```js
+form.addEventListener('lintje-submit', async (event) => {
+  form.busy = true
+  const refused = await save(event.detail.values) // your request
+  form.busy = false
+  if (refused) form.errors = { fields: refused }   // { name: 'message' }
+  else form.saved()
+})
+```
+
+- In een `<lintje-form>` wordt de waarde van een veld gemeld in `lintje-submit`, niet gepost.
+- `dirty` zegt dat de lezer niet-opgeslagen invoer heeft; toon een `<lintje-confirm-dialog>` voordat je weggaat.
+- Met `draft-key` bewaart het formulier een concept in `localStorage`; zonder, in het geheugen.
+
+## Toestand en acties
+
+Een *toestand* is iets wat je bewaart en terugzet op het element (en in de URL mag zetten). Een
+*actie* is iets waar je op handelt.
+
+| event | van | soort |
+|---|---|---|
+| `lintje-navigate` | elk element dat een link tekent | actie |
+| `lintje-view-change` | `lintje-shell`: "Weergave" en de pin van het menu | toestand |
+| `lintje-title-edit` | `lintje-page-header` | actie |
+| `lintje-submit`, `lintje-dirty-change` | `lintje-form` | actie, toestand |
+| `lintje-values-change` | een invoer met een `name` buiten een `lintje-form`, `lintje-filter-bar`, `lintje-tree-view` en `lintje-sortable-list` met een `name` | toestand |
+| `lintje-sort-change`, `lintje-filter-change`, `lintje-columns-change` | `lintje-data-table` | toestand |
+| `lintje-checked-change` | `lintje-data-table`, `lintje-sortable-list` | toestand |
+| `lintje-row-click` | `lintje-data-table`, `lintje-list` | actie |
+| `lintje-row-open`, `lintje-cell-edit`, `lintje-row-action`, `lintje-bulk-action` | `lintje-data-table` (`lintje-row-action` ook `lintje-list`) | actie |
+| `lintje-row-rename`, `lintje-row-rename-cancel` | `lintje-list` | actie |
+| `lintje-card-action` | `lintje-card` (ook binnen `lintje-card-list`) | actie |
+| `lintje-mark-select` | `lintje-map-tile`, `lintje-chart-tile` | actie |
+| `lintje-layer-change` | `lintje-map-tile` | toestand |
+| `lintje-filters-open-change` | `lintje-filter-bar` | toestand |
+| `lintje-retry` | `lintje-error-summary`, `lintje-streaming-text` | actie |
+| `lintje-files-add`, `lintje-file-remove`, `lintje-file-cancel` | `lintje-file-upload` | actie |
+| `lintje-search` | `lintje-combobox` (`remote`), `lintje-app-search` | actie |
+| `lintje-open` | `lintje-app-search`, `lintje-shortcuts` | actie |
+| `lintje-row-add`, `lintje-row-remove` | `lintje-repeater`, `lintje-repeater-row` | actie |
+| `lintje-tab-change` | `lintje-tabs` | toestand |
+| `lintje-page-change` | `lintje-pagination`, `lintje-document-viewer` | toestand |
+| `lintje-page-size-change` | `lintje-pagination` | toestand |
+| `lintje-zoom-change`, `lintje-download` | `lintje-document-viewer` | toestand, actie |
+| `lintje-gallery-change` | `lintje-gallery` | toestand |
+| `lintje-split-change`, `lintje-pane-change` | `lintje-split-pane` | toestand |
+| `lintje-time-change`, `lintje-play`, `lintje-pause` | `lintje-audio-player`, `lintje-video-player` | toestand |
+| `lintje-seek` | `lintje-audio-player`, `lintje-video-player`, `lintje-transcript` | actie |
+| `lintje-node-toggle` | `lintje-tree-view` | actie |
+| `lintje-toggle` | `lintje-expander`, `lintje-toggletip` | actie (niets te beantwoorden) |
+| `lintje-copy`, `lintje-copy-error` | `lintje-copy-button`, `lintje-qr-code` | actie (niets te beantwoorden) |
+| `lintje-job-cancel`, `lintje-job-resume`, `lintje-job-retry`, `lintje-job-remove` | `lintje-job-list` | actie |
+| `lintje-stop` | `lintje-streaming-text` | actie |
+| `lintje-text-change`, `lintje-languages-swap` | `lintje-translator` | toestand, actie |
+| `lintje-segment-edit`, `lintje-segment-save`, `lintje-segment-cancel`, `lintje-segment-speaker`, `lintje-speaker-new`, `lintje-speaker-rename` | `lintje-transcript` | actie |
+| `lintje-action` | `lintje-menu-button`, `lintje-user-menu`, `lintje-app-search`, `lintje-sub-nav` | actie |
+| `lintje-search-open`, `lintje-logout`, `lintje-login`, `lintje-session-extend`, `lintje-draft-discard`, `lintje-notification-open`, `lintje-notifications-read` | de shell: `lintje-shell`, `lintje-user-menu`, `lintje-session-expiry`, `lintje-notifications` | actie |
+| `lintje-conflict-keep-mine`, `lintje-conflict-take-theirs`, `lintje-conflict-compare` | `lintje-conflict-alert` | actie |
+| `lintje-message-send`, `lintje-message-edit`, `lintje-suggestion-select`, `lintje-answer-retry`, `lintje-answer-rate`, `lintje-answer-stop` | de chat | actie |
+| `lintje-sources-change`, `lintje-draft-change`, `lintje-strip-change` | de chat | toestand |
+
+**Het verzoek en zijn antwoord.** Een opslag, een zoekactie, een bestand, een taak om te annuleren, een cel om op te slaan: het
+element stuurt het verzoek en wacht op de property die het beantwoordt (`.options`, `.jobs`,
+`busy`, `.errors`, `busyCells`). Het toont de wijziging van de lezer meteen en verwacht dat je volgende
+waarde die bevestigt.
+
+**Events die niet van jou zijn.** Een composed event dat niet in de tabel staat, hoort bij wie het
+onderdeel heeft geopend: `lintje-close` van een modal, een drawer, een popover of een bevestigingsdialoog,
+`lintje-confirm`, en `lintje-invalid` van het formulier (een echo van je eigen `.errors`). Een view
+vangt de events van zijn eigen onderdelen af — het uitvouwen en downloaden van de tegel, het sluiten van de modal — zodat één
+actie voor jou één event is. Een pagina die zo'n onderdeel zelf opent, is die eigenaar, en hoort ze.

package/dist-elements/guides/icons.md

@@ -0,0 +1,144 @@
+# Eigen iconen
+
+Lintje haalt elk icoon op uit de iconenmap die jouw pagina serveert: de map die je met
+`setIconSource` aanwijst ([laden](loading.md#iconen)). Een eigen icoon toevoegen is dus: een
+SVG-bestand in die map zetten en het bij zijn naam noemen. Er is niets te bouwen of te registreren.
+
+Er is één iconenmap per pagina. Iconen uit een andere bron — een eigen map, een package van je
+organisatie — kopieer je dus in die map, naast de iconen van Lintje.
+
+## Zit het al in de set?
+
+De iconenmap heeft ruim duizend iconen, van RVO en van Lintje zelf. Een icoon uit de set past bij
+de rest, dus kijk daar eerst. Elke naam is `<categorie>-<naam>` in kleine letters, zoals
+`functioneel-home` of `gebouwen-ziekenhuis`, en de bestanden staan op naam in de map:
+
+```bash
+ls dist-icons | grep document
+```
+
+## In drie stappen
+
+**1. Maak het bestand.** Een vierkante `viewBox` van 24, en geen kleur: Lintje tekent het icoon in
+de tekstkleur, zodat het meekleurt met licht, donker en het thema. Een gevuld icoon:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M6 2h8l4 4v16H6z" />
+</svg>
+```
+
+Een omtrekicoon zet de lijn op de `<svg>` en `fill="none"` op elke vorm erin:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor"
+  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path fill="none" d="M6 2h8l4 4v16H6z" />
+</svg>
+```
+
+**2. Zet het in je iconenmap,** naast de andere bestanden. De bestandsnaam zonder `.svg` is de
+naam van het icoon. Begin hem met de naam van je applicatie, zoals `meldingen-dossier.svg`: zo botst
+hij nooit met een icoon uit de set, ook niet met een naam die er in een volgende versie bij komt.
+
+**3. Noem het bij zijn naam,** overal waar Lintje een icoon neemt. In HTML:
+
+```html
+<lintje-icon name="meldingen-dossier" label="Dossier"></lintje-icon>
+```
+
+En in de data van een element, bij elk veld `icon` (een menu-item, een tegel, een KPI, een
+rijactie):
+
+```js
+navigation: [{ label: 'Dossiers', icon: 'meldingen-dossier', href: '/dossiers' }]
+```
+
+Zonder `label` is het icoon versiering en slaat een schermlezer het over; met `label` is het een
+afbeelding met die naam. Lintje haalt het bestand op de eerste keer dat de naam getekend wordt, één
+keer per pagina.
+
+## Een hele set uit een eigen package
+
+Heeft je organisatie een package met iconen, bijvoorbeeld in `icons/svg/*.svg`, kopieer de
+bestanden dan in je build-stap in de iconenmap, elk met hetzelfde voorvoegsel:
+
+```bash
+mkdir -p public/icons
+cp -R pad/naar/lintje/dist-icons/. public/icons/
+for f in node_modules/@organisatie/iconen/icons/svg/*.svg; do
+  cp "$f" "public/icons/intern-$(basename "$f")"
+done
+```
+
+Met `setIconSource({ base: '/icons/' })` is `icons/svg/dossier.svg` uit het package daarna
+`intern-dossier`, en de iconen van Lintje werken gewoon door. Doordat de kopie in de build-stap
+staat, gaat een nieuwe versie van Lintje of van het package vanzelf mee.
+
+Controleer een paar bestanden uit het package voordat je de hele set gebruikt. Een set uit een
+ontwerptool wijkt vaak af van wat Lintje tekent:
+
+- **Een kleur als attribuut** (`fill="#154273"`) blijft staan: het icoon kleurt dan niet mee met de
+  tekst en verandert niet in donker. Alleen zwart in een export met `fill="none"` op de `<svg>`
+  wordt de tekstkleur.
+- **Kleuren en lijnen in `style="…"` of een `<style>`-blok met klassen** (`.cls-1 { … }`) tekent
+  Lintje niet. Een gevuld icoon wordt dan in de tekstkleur gevuld en ziet er meestal goed uit; een
+  omtrekicoon verliest zijn lijnen.
+- **Een omtrekicoon** heeft `fill="none"` op elke vorm nodig, niet alleen op de `<svg>`.
+
+Wijkt de set af, zet de bestanden dan één keer om in het package zelf, of in de build-stap met een
+SVG-optimalisator die stijlen omzet naar attributen (SVGO met `inlineStyles` en
+`convertStyleToAttrs`), en vervang de vaste kleuren door `currentColor`.
+
+## Werkt het niet?
+
+Een naam zonder bestand tekent niets, zonder foutmelding. Kijk in het netwerkpaneel van de browser
+welk adres er werd opgevraagd:
+
+- **`/icons/meldingen-dossier.svg` in plaats van jouw map:** `setIconSource` is niet aangeroepen,
+  of in een andere kopie van Lintje dan die de elementen tekent. Laad alles uit één map
+  ([laden](loading.md#twee-manieren-van-laden-en-een-pagina-kiest-er-één)).
+- **Een 404 in jouw map:** de bestandsnaam klopt niet met de naam. Let op hoofdletters en laat
+  `.svg` weg uit de naam.
+- **Het oude icoon blijft staan:** de browser heeft het bestand gecachet. Geef `setIconSource` een
+  nieuwe `version`.
+- **Een omtrekicoon is een gevuld vlak:** zet `fill="none"` op elke vorm, niet alleen op de
+  `<svg>`.
+- **Het icoon heeft een vaste kleur, of verdwijnt in donker:** het bestand noemt een kleur. Haal
+  die `fill` of `stroke` weg, of maak hem `currentColor`.
+- **Een deel van het icoon ontbreekt:** het bestand gebruikt `style` of `<style>`, en die tekent
+  Lintje niet. Zet de vorm in attributen als `fill` en `stroke`.
+
+## Een icoon dat je al als URL hebt
+
+Heb je het icoon als URL of als data-URI, dan kan het zonder bestand in de iconenmap, op twee
+plekken: `<lintje-icon>` en de navigatie van de shell.
+
+```html
+<lintje-icon src="/static/meldingen/dossier.svg" label="Dossier"></lintje-icon>
+```
+
+```js
+navigation: [{ label: 'Dossiers', iconSrc: 'data:image/svg+xml,…', href: '/dossiers' }]
+```
+
+Het icoon wordt in de tekstkleur geschilderd: alleen de vorm telt, niet de kleuren in het bestand.
+Een tegel, een KPI en de andere elementen nemen alleen een naam.
+
+## Een icoon uit de set vervangen
+
+Een bestand met de naam van een icoon uit de set vervangt dat icoon. Weglaten kan ook: dan tekent
+de naam niets, en een knop toont zijn tekst in plaats van het icoon.
+
+De iconen die de elementen zelf tekenen — de pijltjes, het kruis, de statustekens, de knoppen van
+de spelers — zitten in Lintje zelf en zijn niet te vervangen. De styleguide toont ze bij het
+element `icon`, onder "register".
+
+## Een nieuwe versie van Lintje
+
+Een nieuwe versie brengt een nieuwe iconenmap mee. Bewaar je eigen iconen daarom in een eigen map
+of package en kopieer ze in je build-stap in de iconenmap, zoals hierboven; geef `setIconSource`
+daarna een nieuwe `version`.
+
+Een icoon dat ook andere applicaties nodig hebben, hoort in Lintje zelf:
+[`CONTRIBUTING.md`](https://github.com/h11t-labs/lintje/blob/main/CONTRIBUTING.md).

package/dist-elements/guides/loading.md

@@ -0,0 +1,138 @@
+# Laden
+
+`npm install && npm run build:elements` schrijft `dist-elements/`. De map wordt niet gecommit:
+bouw hem in je pipeline en serveer hem in zijn geheel als statische bestanden. Link `tokens.css` in
+`<head>` en laad de elementen als module; de import is de registratie.
+
+Het npm-pakket `lintje` (`npm install lintje`) bevat dezelfde map, met een naam per ingang:
+`lintje` is `lintje.js`, `lintje/core` is `core.js`, `lintje/<category>` een categorie,
+`lintje/tag/<name>` één tag, en `lintje/tokens.css`, `/fonts.css` en `/icons/<name>.svg` de
+bestanden ernaast. Het heeft geen verplichte dependencies: Lit en Leaflet zitten in de build. `lit` 3 is een optionele
+peer, alleen voor de typen van de geërfde leden van een element.
+
+## Twee manieren van laden, en een pagina kiest er één
+
+| bestand | wat het is |
+|---|---|
+| `lintje.js` | alles in één request: elke tag, Lit, en elke stylesheet in de module |
+| `core.js` | de host-API zonder tag: `setIconSource`, `setHostConfig`, `registerShortcut`, en `LINTJE_VERSION`, de versie van de build |
+| `frame.js`, `inputs.js`, `charts.js`, … | een categorie: de tags die bij elkaar horen, zoals de stijlgids ze indeelt |
+| `tag/<name>.js` | één tag: `tag/shell.js` is `<lintje-shell>` |
+| `dev.js` | een controle voor tijdens het ontwikkelen: het waarschuwt voor een tag die je vergat te importeren |
+| `chunks/` | de code die die bestanden delen. Importeer er nooit uit: de namen veranderen bij elke build |
+| `tokens.css` | de thema's en de tokens ([thema's](theming.md)) |
+| `fonts.css` | de twee `@font-face`-regels voor RijksSans, die wijzen naar `fonts/` ernaast. Optioneel |
+| `custom-elements.json` | de tag-referentie, gelezen uit de broncode |
+| `*.d.ts`, `types/` | de typen: een `.d.ts` naast elk bestand hierboven, en de datavormen in `types/types.d.ts`. Met `lit` 3 als devDependency zijn ook de geërfde leden van een element getypeerd |
+| `guides/` | deze handleidingen |
+| `skills/lintje/` | een skill voor een agent die met Lintje bouwt: kopieer de map naar de skills-map van je assistent, bij Claude Code `.claude/skills/` van je applicatie. Hij leest `custom-elements.json` |
+
+De iconen staan niet in `dist-elements/`: je serveert zelf een kopie van `dist-icons/`
+([iconen](#iconen)). Het npm-pakket brengt die map mee.
+
+**Eén kopie van de modulestate.** `setIconSource()`, `setHostConfig()` en `registerShortcut()`
+schrijven in modulestate. Laad daarom `lintje.js` of de losse bestanden, nooit beide, alles uit één map
+van één build, en spel overal dezelfde URL: anders laadt de browser twee instanties en komt je aanroep
+terecht in de instantie die de elementen niet gebruiken.
+
+### Alles: `lintje.js`
+
+Eén bestand: de eenvoudigste manier, en de juiste voor een pagina die het meeste toont van wat Lintje heeft.
+
+### Wat de pagina gebruikt: categorieën en tags
+
+```js
+import { setIconSource } from './dist-elements/core.js'
+import './dist-elements/frame.js'
+import './dist-elements/forms.js'
+import './dist-elements/tag/toast.js'
+
+setIconSource({ base: './icons/' })
+```
+
+`examples/meldingen/` laadt op deze manier.
+
+| categorie | tags |
+|---|---|
+| `frame.js` — Paginakader | `shell`, `page-header`, `breadcrumbs`, `sub-nav`, `hero`, `footer`, `user-menu`, `app-search`, `notifications`, `shortcuts`, `session-expiry` |
+| `layout.js` — Indeling | `grid`, `grid-item`, `tile`, `tabs`, `expander`, `split-pane` |
+| `overlays.js` — Vensters en panelen | `modal`, `confirm-dialog`, `drawer`, `popover`, `tooltip`, `toggletip` |
+| `actions.js` — Knoppen en iconen | `button`, `icon-button`, `menu-button`, `copy-button`, `qr-code`, `icon`, `logo` |
+| `content.js` — Tekst en media | `prose`, `code`, `highlight`, `translator`, `audio-player`, `video-player`, `transcript`, `document-viewer`, `gallery` |
+| `feedback.js` — Meldingen en status | `announcement`, `toast`, `conflict-alert`, `empty-state`, `badge`, `status-dot`, `spinner`, `skeleton`, `progress-bar`, `job-list`, `streaming-text`, `ai-label`, `level-meter`, `recording-status` |
+| `inputs.js` — Invoervelden | `field`, `text-input`, `textarea`, `number-input`, `select`, `combobox`, `multiselect`, `tag-input`, `checkbox`, `radio-group`, `toggle`, `segmented`, `range`, `date-input`, `time-input`, `date-range`, `file-upload`, `text-editor` |
+| `forms.js` — Formulier | `form`, `form-section`, `stepper`, `repeater`, `repeater-row`, `error-summary`, `form-actions` |
+| `filters.js` — Filters | `filter-bar`, `filter-zone`, `filter-sheet` |
+| `charts.js` — Kerncijfers en grafieken | `kpi-row`, `kpi`, `chart-tile`, `note`, `explainer` |
+| `map.js` — Kaart | `map-tile` |
+| `tables.js` — Tabellen en lijsten | `data-table`, `pagination`, `list`, `card`, `card-list`, `description-list`, `tree-view`, `sortable-list`, `activity-log` |
+| `chat.js` — Chat met data | `chat`, `chat-message`, `chat-answer`, `chat-composer`, `chat-strip`, `chat-suggestions` |
+
+De tabel volgt `src/categories.json`. `forms.js` laadt `inputs.js` mee: een formulier is niets
+zonder zijn velden. Een pagina met alleen filters of losse velden laadt `filters.js` of
+`inputs.js` zonder de formuliercode. Een tag die je los wilt, laad je als `tag/<name>.js`. Wat
+geldt voor deze manier van laden:
+
+- **Een tag brengt mee wat hij tekent.** Je noemt de tags die je HTML en script schrijven, niet hun onderdelen.
+- **Noem hem voordat je hem maakt.** Een tag die je script bij een klik aanmaakt
+  (`document.createElement('lintje-toast')`) wordt bovenaan geïmporteerd zoals de andere. Niets wordt
+  op verzoek opgehaald.
+- **Elk bestand laadt de basis**: Lit, de tokens, de iconen die de componenten tekenen en de
+  primitives. Een primitive als `button` of `grid` hoef je dus niet apart te laden. De kaart, met Leaflet en zijn geometrie, is de zwaarste tag.
+- **Het zijn tientallen kleine bestanden.** Serveer de map over HTTP/2, of met verbindingen die
+  open blijven: een server die de verbinding na elk bestand sluit, laat er een paar vallen, en één module die
+  niet laadt, laat de pagina zonder zijn tags. De bestanden in `chunks/` dragen een hash en mogen
+  voor altijd gecachet worden; de andere houden hun naam, dus laat de browser ze opnieuw valideren.
+- **`dev.js` tijdens het ontwikkelen.** Een vergeten tag tekent niets en zegt niets; met
+  `dev.js` op de pagina noemt de console hem en het bestand om te importeren. Laat het weg in productie.
+
+## Iconen
+
+**De iconnaam is de bestandsnaam** in `dist-icons/`, zonder `.svg`: `functioneel-home`. Een
+component noemt het bestand dat hij tekent, en je data ook (het `icon` van een menu-item).
+
+Een naam wordt in deze volgorde opgezocht: `src` (een SVG die je zelf hebt bepaald) → de iconen die de bundel
+meedraagt (die de componenten zelf tekenen) → **één bestand opgehaald uit je iconenmap**
+→ niets.
+
+Serveer een kopie van `dist-icons/` en zeg waar die staat, voordat het eerste element tekent:
+
+```js
+setIconSource({ base: '/static/lintje/icons/', version: '<build>' })
+```
+
+De loader haalt `<base><name>.svg` op de eerste keer dat die naam getekend wordt, één keer per naam. De
+standaard-base is `/icons/`. **Een naam zonder bestand tekent niets**, en een bedieningselement toont dan zijn
+Nederlandse label: een ondersteunde toestand, dus je mag een bestand weglaten of vervangen. Een
+eigen icoon toevoegen: [eigen iconen](icons.md).
+
+## Sneltoetsen
+
+Registreer de toetsen van je pagina in het ene register in plaats van te luisteren op het document:
+
+```js
+const remove = registerShortcut({ keys: '/', description: 'Zoeken', handler })
+```
+
+Een toets zonder Ctrl, Alt of Meta gaat nooit af terwijl de focus in een veld staat, een toets met een
+ervan alleen met `inFields: true`. De laatste registratie van een toets wint, dus een dialoog neemt een
+toets over van de pagina. `shortcuts()` somt op wat
+geregistreerd is, en dat is wat `<lintje-shortcuts>` toont.
+
+Een toets van één teken zonder Ctrl, Alt of Meta (`/`, `?`) kan de lezer uitzetten, met de
+schakelaar onder de lijst in `<lintje-shortcuts>` of met `setCharacterKeys(false)`; de keuze blijft
+bewaard in `localStorage`. Met die toetsen uit opent `?` niets, dus bied het overzicht ook aan
+vanuit een knop of een menu.
+
+## Een pagina die een eigen container scrollt
+
+Een overlay zet het scrollen van de pagina vast, en sommige onderdelen lezen of zetten het scrollen ervan. Dat is
+het eigen scrollende element van het document, tenzij je een ander noemt, één keer, voordat het eerste element
+rendert:
+
+```js
+setHostConfig({ scrollRoot: () => document.querySelector('#content') })
+```
+
+Houd de elementen buiten elke voorouder met een `transform`, `filter` of `contain`: de scrim van een modal
+is `position: fixed` en zou relatief worden aan die voorouder.