lintje 0.2.0 → 0.4.0

package/dist-elements/feedback.js

@@ -1,8 +1,9 @@
-import "./chunks/base-Bg-IFOPG.js";
+import "./chunks/base-DRGvkF-r.js";
 import "./tag/toast.js";
 import "./tag/announcement.js";
 import "./tag/empty-state.js";
 import "./tag/conflict-alert.js";
+import "./tag/error-page.js";
 import "./tag/job-list.js";
 import "./tag/streaming-text.js";
 import "./tag/ai-label.js";

package/dist-elements/frame.js

@@ -7,5 +7,3 @@ 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

@@ -89,6 +89,14 @@ Een selectie ongedaan maken is hetzelfde event met de id null en de `href` die j
 `lintje-sort-change` zet `data.sort`, `lintje-checked-change` `data.checkedIds`,
 `lintje-layer-change` de `data.layer` van de kaart.
 
+De tabel rekent niets uit. Een totaalrij geef je zelf mee als `totals`, per kolom een waarde of
+`{ value, how }`, waarbij `how` het woordje is dat zegt hoe ("gem."); met `groupBy` op een kolom
+staan de rijen per waarde onder een kop, en `groupTotals` geeft per groep haar subtotalen. Een
+kolom met `format: 'label'` tekent een waarde als badge: in `labels` noem je per waarde het woord,
+de toon van `lintje-badge` en eventueel een icoon. Wat de kolommen niet tonen, zet je in
+`detailFields`: elke rij krijgt dan een knop die de verborgen kolommen en die velden onder de rij
+toont. Open rijen en ingeklapte groepen zijn beeld, geen toestand: ze komen niet in de URL.
+
 `ChartData.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.
 

package/dist-elements/guides/events.md

@@ -47,7 +47,7 @@ form.addEventListener('lintje-submit', async (event) => {
 ```
 
 - 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.
+- `dirty` zegt dat de lezer niet-opgeslagen invoer heeft; vraag het in een `<lintje-dialog alert>` voordat je weggaat.
 - Met `draft-key` bewaart het formulier een concept in `localStorage`; zonder, in het geheugen.
 
 ## Toestand en acties
@@ -75,7 +75,7 @@ Een *toestand* is iets wat je bewaart en terugzet op het element (en in de URL m
 | `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-open` | `lintje-app-search` | 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 |
@@ -93,7 +93,7 @@ Een *toestand* is iets wat je bewaart en terugzet op het element (en in de URL m
 | `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-search-open`, `lintje-logout`, `lintje-notification-open`, `lintje-notifications-read` | de shell: `lintje-shell`, `lintje-user-menu`, `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 |
@@ -104,7 +104,6 @@ element stuurt het verzoek en wacht op de property die het beantwoordt (`.option
 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
+onderdeel heeft geopend: `lintje-close` van een modal, een dialoog, een drawer of een popover, 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/loading.md

@@ -54,13 +54,13 @@ setIconSource({ base: './icons/' })
 
 | categorie | tags |
 |---|---|
-| `frame.js` — Paginakader | `shell`, `page-header`, `breadcrumbs`, `sub-nav`, `hero`, `footer`, `user-menu`, `app-search`, `notifications`, `shortcuts`, `session-expiry` |
+| `frame.js` — Paginakader | `shell`, `page-header`, `breadcrumbs`, `sub-nav`, `hero`, `footer`, `user-menu`, `app-search`, `notifications` |
 | `layout.js` — Indeling | `grid`, `grid-item`, `tile`, `tabs`, `expander`, `split-pane` |
-| `overlays.js` — Vensters en panelen | `modal`, `confirm-dialog`, `drawer`, `popover`, `tooltip`, `toggletip` |
+| `overlays.js` — Vensters en panelen | `modal`, `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`, `slot-picker`, `file-upload`, `text-editor` |
+| `content.js` — Tekst en media | `prose`, `code`, `highlight`, `token-value`, `translator`, `audio-player`, `video-player`, `transcript`, `document-viewer`, `gallery` |
+| `feedback.js` — Meldingen en status | `announcement`, `toast`, `conflict-alert`, `empty-state`, `error-page`, `badge`, `status-dot`, `spinner`, `skeleton`, `progress-bar`, `job-list`, `streaming-text`, `ai-label`, `level-meter`, `recording-status` |
+| `inputs.js` — Invoervelden | `field`, `text-input`, `find`, `textarea`, `number-input`, `select`, `combobox`, `multiselect`, `tag-input`, `checkbox`, `checkbox-group`, `radio-group`, `toggle`, `segmented`, `range`, `date-input`, `time-input`, `date-range`, `slot-picker`, `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`, `note`, `explainer` |
@@ -78,7 +78,7 @@ geldt voor deze manier van laden:
   (`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.
+  bouwstenen die bijna elke tag tekent. Een bouwsteen 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
@@ -117,10 +117,11 @@ 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.
+geregistreerd is: het overzicht is een `<lintje-dialog heading="Sneltoetsen">` die de pagina
+daarmee vult en op `?` opent, voorgedaan in de stijlgids (`examples/_shared/shortcuts.js`).
 
-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
+Een toets van één teken zonder Ctrl, Alt of Meta (`/`, `?`) kan de lezer uitzetten, met
+`setCharacterKeys(false)` achter een instelling van de pagina; de keuze blijft
 bewaard in `localStorage`. Met die toetsen uit opent `?` niets, dus bied het overzicht ook aan
 vanuit een knop of een menu.
 

package/dist-elements/guides/page-contents.md

@@ -0,0 +1,110 @@
+# Een inhoudsopgave op de pagina
+
+Een lange tekst krijgt "Op deze pagina": een lijst met de koppen, die laat zien waar de lezer is.
+Dat is `lintje-sub-nav` met `expanded`, geen eigen element. Het submenu tekent alleen. Jij vult de
+ankers, volgt het scrollen en plaatst de lijst. Het besluit staat in
+[`../DESIGN_SYSTEM.md`](https://github.com/h11t-labs/lintje/blob/main/docs/DESIGN_SYSTEM.md), onder "Navigatie en shell".
+
+## De lijst vullen
+
+Elk item is een kop van de pagina, met een anker als `href`. Een kop van het tweede niveau staat in
+`items` van zijn kop erboven. Met `expanded` staat elk niveau er, zodat de lijst niet verspringt
+terwijl de lezer scrolt.
+
+```html
+<div class="artikel">
+  <article>
+    <h2 id="wie">Wie kan een vergunning aanvragen</h2>
+    …
+    <h2 id="aanvragen">Zo vraagt u aan</h2>
+    <h3 id="online">Online aanvragen</h3>
+    …
+  </article>
+  <lintje-sub-nav expanded label="Op deze pagina"></lintje-sub-nav>
+</div>
+```
+
+Staan de koppen in `lintje-prose`, zoek ze dan in zijn `shadowRoot` in plaats van in `document`.
+
+## De sectie in beeld volgen
+
+De huidige sectie is de laatste kop die boven de balk van de shell is geschoven. Die balk houdt
+zijn hoogte vrij als `scroll-padding-top`, dus die waarde is de lijn. Onderaan de pagina haalt een
+korte laatste sectie die lijn nooit; daar is de laatste kop in beeld de huidige. Zet de sectie als
+`active`; het submenu markeert haar en haar kop erboven.
+
+```js
+const nav = document.querySelector('.artikel lintje-sub-nav')
+const sections = [
+  { label: 'Wie kan een vergunning aanvragen', href: '#wie' },
+  {
+    label: 'Zo vraagt u aan',
+    href: '#aanvragen',
+    items: [{ label: 'Online aanvragen', href: '#online' }],
+  },
+]
+
+const all = (items) => items.flatMap((item) => [item, ...all(item.items ?? [])])
+const mark = (items, href) =>
+  items.map((item) => ({
+    ...item,
+    active: item.href === href,
+    ...(item.items ? { items: mark(item.items, href) } : {}),
+  }))
+
+let shown
+function update() {
+  const root = document.documentElement
+  const end = scrollY + innerHeight >= root.scrollHeight - 1
+  const line = end ? innerHeight : (parseFloat(getComputedStyle(root).scrollPaddingTop) || 0) + 1
+  let href = null
+  for (const item of all(sections)) {
+    const heading = document.getElementById(item.href.slice(1))
+    if (heading && heading.getBoundingClientRect().top <= line) href = item.href
+  }
+  if (href === shown) return
+  shown = href
+  nav.groups = [{ label: 'Op deze pagina', items: mark(sections, href) }]
+}
+
+let frame = 0
+const schedule = () => {
+  cancelAnimationFrame(frame)
+  frame = requestAnimationFrame(update)
+}
+addEventListener('scroll', schedule, { passive: true })
+addEventListener('resize', schedule)
+addEventListener('load', schedule)
+schedule()
+```
+
+Een klik op een item is een gewone link: de browser springt naar de kop, en het submenu meldt de
+klik als `lintje-navigate` ([events](events.md)). Scrolt je pagina een eigen container
+(`setHostConfig({ scrollRoot })`), luister dan daar naar `scroll` en lees daar de scroll-padding.
+De update na `load` en `resize` vangt een pagina die pas na het script haar hoogte kreeg.
+
+## De lijst plaatsen
+
+Vanaf 1024 px staat de lijst naast de tekst en plakt ze onder de balk van de shell. Smaller staat ze
+boven de tekst, en onder 768 px is ze de knop van het submenu, die de lijst openklapt.
+
+```css
+.artikel {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--space-8) var(--space-10);
+}
+.artikel > article { flex: 999 1 560px; min-width: 0; max-width: var(--w-text); }
+.artikel > lintje-sub-nav { flex: 1 1 240px; max-width: var(--w-nav); }
+
+@media screen and (max-width: 1023px) {
+  .artikel > lintje-sub-nav { order: -1; flex-basis: 100%; max-width: none; }
+}
+@media screen and (min-width: 1024px) {
+  .artikel > lintje-sub-nav { position: sticky; top: calc(var(--h-topbar) + var(--space-6)); }
+}
+```
+
+Laat een lijst die hoger is dan het scherm niet plakken: haar onderste koppen zou de lezer dan pas
+aan het eind van de tekst bereiken.

package/dist-elements/guides/start.md

@@ -134,6 +134,18 @@ wat het terug verwacht.
 Een *view* is een tag die één `data`-object neemt (`lintje-shell`, `lintje-data-table`,
 `lintje-chart`, …); elke andere tag is een *onderdeel* met eigen attributen en properties.
 
+## Afdrukken
+
+Een pagina drukt af zonder werk van de host: licht, zonder bediening, met het embleem en de naam
+van de applicatie bovenaan, en elke tegel heel op een vel waar hij past. Wat de host zelf schrijft,
+houdt zich aan dezelfde regels:
+
+- **De achtergrond van `body` is `var(--color-bg-page)`**: die is wit op papier.
+- **Een telefoonregel in de eigen CSS is `@media screen and (max-width: 767px)`**: een staand vel
+  is smaller dan 768 px, maar krijgt geen telefoonvorm.
+- **Een eigen `<lintje-tile>` met een lange lijst krijgt `breakable`**: dan breekt hij tussen twee
+  vellen in plaats van als geheel naar het volgende te gaan.
+
 ## De complete voorbeelden
 
 [`../../examples/`](https://github.com/h11t-labs/lintje/blob/main/examples/README.md) bevat applicaties gebouwd met script, elk een gewone

package/dist-elements/inputs.js

@@ -1,15 +1,17 @@
 import "./tag/radio-group.js";
-import "./tag/toggle.js";
 import "./tag/segmented.js";
 import "./tag/textarea.js";
 import "./tag/text-input.js";
 import "./tag/field.js";
+import "./tag/find.js";
 import "./tag/number-input.js";
 import "./tag/select.js";
 import "./tag/combobox.js";
 import "./tag/checkbox.js";
 import "./tag/multiselect.js";
 import "./tag/tag-input.js";
+import "./tag/checkbox-group.js";
+import "./tag/toggle.js";
 import "./tag/range.js";
 import "./tag/date-input.js";
 import "./tag/time-input.js";

package/dist-elements/layout.js

@@ -1,4 +1,4 @@
-import "./chunks/base-Bg-IFOPG.js";
+import "./chunks/base-DRGvkF-r.js";
 import "./tag/tabs.js";
 import "./tag/expander.js";
 import "./tag/split-pane.js";