@lo-tek/interfaces 0.40.0 → 0.42.0

package/CHANGELOG.md

@@ -24,6 +24,109 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
 
 ## Unreleased
 
+## 0.42.0 (2026-11-06)
+
+### Changed
+
+- **The Kotlin live templates have no script of their own.** They are the
+  Datastar recipe rendered by the server: the dialog is sent open and its
+  choices go with `@post`, Escape included through `data-on:cancel`, the
+  session timeout sends its events on with `data-on`, the toast's button
+  posts and the server answers with the call to `show()`, and the
+  connection status hears of a lost server through
+  `data-on:datastar-fetch__document`. The page needs Datastar, loaded once
+  in its template after the registration, and the server answers with a
+  200: the signals as `application/json`, or as `text/javascript` the
+  toast's call and, for a session that is already gone, the way to log in.
+
+### Fixed
+
+- **The rulebook for Datastar, `agent/datastar.md`, loads Datastar after
+  the registration.** Module scripts run in the order they stand, and with
+  Datastar first the answer to a request at load could reach a web component
+  before it was registered.
+- **`agent/datastar.md` says how Escape reaches the server from a dialog.**
+  Escape is a close request, reported with `cancel` on the `<dialog>`, and
+  `dialog-toggle` cannot tell it from a close the server makes.
+
+## 0.41.0 (2026-11-05)
+
+### Added
+
+- **A rulebook for coding agents on a Kotlin or Java server, `agent/kotlin.md`.**
+  It covers `Lt` with a table of every enum and its constants, kotlinx.html
+  and strings, the WebJar and `LotekWebJar`, ids from a key in the data,
+  `assertLotek` in tests, the Gradle plugin and `lotek.jar`. `llms.txt`
+  names Kotlin and the check without Node.
+- **`<lt-term>` and `lt.term()`: a word in the text that shows its entry
+  from a glossary on the same page.** The word is a link to the entry, a
+  `<div>` with a `<dt>` and a `<dd>` in a `<dl>`, and stays one without
+  JavaScript. The web component shows the entry itself as a card by the
+  word, in the top layer: the mouse opens it after a rest, a click, a tap or
+  Enter pins it, and Escape, a click outside or the word scrolling out of
+  view closes it. Below the `sm` breakpoint the card is a sheet across the
+  bottom of the window, or the top when the word is down there. Nothing is
+  copied and no id is made in the browser, so the card survives an update
+  from the server. `lt.term({ id })` writes `href` and `aria-details` on the
+  link, the classes `lt-term` and `lt-term__entry`, and the id; `/react`
+  adds `aria-expanded="false"`. `Lt.term()` in Kotlin, and `ltTerm` and
+  `ltTermEntry` in kotlinx.html. New entry points `./term` and
+  `./term.css`, new component variables `--lt-term-width`,
+  `--lt-term-gap`, `--lt-term-padding`, `--lt-term-radius`,
+  `--lt-term-accent-color`, `--lt-term-underline-color`,
+  `--lt-term-label-text`, `--lt-term-label-font` and
+  `--lt-term-sheet-height`, and the default text "Glossary".
+- **`lt-steps` and `lt.steps()`: a step indicator for a task over several
+  pages.** The class goes on an `<ol>` with one `<li>` per step, and
+  `aria-current="step"` on the step the user is on. The steps before it are
+  drawn as done, with a check the screen reader reads as "Completed", as part
+  of the step's link when it has one. Below `28rem` of the list's own width
+  the steps stand in a column. `Lt.steps()` in Kotlin. New entry points
+  `./steps` and `./steps.css`, new component variables
+  `--lt-steps-marker-size`, `--lt-steps-done-icon` and
+  `--lt-steps-done-text`, and the default text
+  "Completed ".
+- **The check reports `untranslated-text` for the step indicator's
+  "Completed "** on a page in another language, as for the other texts in
+  the stylesheets. In the manifest's `texts` on a class,
+  `siblingsBefore: true` is a text shown on the children before the one with
+  the attribute, and the Kotlin `CssText` has `siblingsBefore`. The term's
+  "Glossary" is not checked, since the card shows it only while it is open.
+- **The check reports `term-without-entry`** on a whole page, when a word
+  in `<lt-term>` points at an id the page does not have, or at something
+  that is not a glossary entry.
+- **`place()` in `@lo-tek/interfaces/host-element`**, the placement
+  `<lt-popover>` worked out, now shared with `<lt-term>`.
+
+### Changed
+
+- **`lotek agent` gives the Kotlin rulebook in a folder with
+  `build.gradle.kts`, `build.gradle`, `settings.gradle.kts`,
+  `settings.gradle` or `pom.xml`,** unless `package.json` names a framework
+  other than Vite. Such a folder used to get `templates`, or `bundles` when it
+  also had a `package.json`. `--framework=templates` and
+  `--framework=bundles` still give those.
+
+### Fixed
+
+- **The snippets and the live templates follow the corrected recipes.** In
+  the HTML snippets and live templates the error summary and the field post
+  to the server, the popover's actions are forms that post, and the session
+  timeout logs out with a post. In the Kotlin live templates the error
+  summary has no script, and it and the field take what was typed; the
+  popover, the tabs and the suggestion have no script; the dialog's Cancel
+  and the session timeout's Log out post to the server; and the toast tells
+  a refused restart from one that got no answer, and a redirect from a
+  restart. The switch saves only an answer that is not a redirect, and
+  stands in a `<form autocomplete="off">`, since HTML does not allow the
+  attribute on a checkbox. The Kotlin live template for the error summary
+  inserted the browser validation from the HTML recipe, which a Kotlin
+  server does itself.
+- **The editor descriptions of `session-logout` and `<lt-dialog>`.**
+  `session-logout` comes only from a Log out button that closes the dialog;
+  one with `formmethod="post"` submits instead. `<lt-dialog>` makes a dialog
+  the server sends open a real modal.
+
 ## 0.40.0 (2026-11-03)
 
 ### Breaking

package/agent/astro.md

@@ -9,7 +9,7 @@ this runs at build time: out comes plain HTML, and `lt` is gone once the page
 is built. The only JavaScript the browser gets from the package is the
 registration of the web components you use, in a `<script>`.
 
-This is @lo-tek/interfaces 0.40.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
 follows its version, so it can never say anything other than the code next to
 it.
 
@@ -59,7 +59,7 @@ component, `tokens.css` belongs there, once for the whole page.
 
 ## 2. What exists
 
-35 CSS components and 9 web components, and this is the whole list. The
+36 CSS components and 10 web components, and this is the whole list. The
 classes are `lt-` + kebab-case. Variants are always `data-*` attributes, never
 classes of their own: `data-variant="secondary"`, not `lt-button--secondary`.
 The default variant has no attribute.
@@ -97,6 +97,7 @@ The default variant has no attribute.
 | `lt-skip-link` | `@lo-tek/interfaces/skip-link.css` | none |
 | `lt-spinner` | `@lo-tek/interfaces/spinner.css` | `data-size`: small, large |
 | `lt-sr-only` | `@lo-tek/interfaces/sr-only.css` | none |
+| `lt-steps` | `@lo-tek/interfaces/steps.css` | none |
 | `lt-switch`<br>`lt-switch-row` | `@lo-tek/interfaces/switch.css` | none |
 | `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `@lo-tek/interfaces/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
 | `lt-tag` | `@lo-tek/interfaces/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
@@ -279,6 +280,7 @@ Three rules apply to all of them:
 | `<lt-tabs>` | frame | `@lo-tek/interfaces/tabs.css` | `defineLtTabs()` from `@lo-tek/interfaces/tabs` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
 | `<lt-error-summary>` | frame | `@lo-tek/interfaces/error-summary.css` | `defineLtErrorSummary()` from `@lo-tek/interfaces/error-summary` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
 | `<lt-popover>` | frame | `@lo-tek/interfaces/popover.css` | `defineLtPopover()` from `@lo-tek/interfaces/popover` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
+| `<lt-term>` | frame | `@lo-tek/interfaces/term.css` | `defineLtTerm()` from `@lo-tek/interfaces/term` | none | none | `lt-term`<br>`lt-term__entry` |
 | `<lt-suggestion>` | frame | `@lo-tek/interfaces/suggestion.css` | `defineLtSuggestion()` from `@lo-tek/interfaces/suggestion` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
 | `<lt-dialog>` | frame | `@lo-tek/interfaces/dialog.css` | `defineLtDialog()` from `@lo-tek/interfaces/dialog` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
 | `<lt-toast>` | standalone | `@lo-tek/interfaces/toast.css` | `defineLtToast()` from `@lo-tek/interfaces/toast` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
@@ -309,7 +311,7 @@ Runs at build time. Out comes plain HTML:
 <span class="lt-badge" data-color="success">Approved</span>
 ```
 
-`lt` is imported from the main entry, which gives `class` and `for`. The 46
+`lt` is imported from the main entry, which gives `class` and `for`. The 48
 builder functions:
 
 `lt.accordion()`, `lt.alert()`, `lt.avatar()`, `lt.badge()`,
@@ -320,9 +322,9 @@ builder functions:
 `lt.legend()`, `lt.link()`, `lt.list()`, `lt.pagination()`, `lt.paragraph()`,
 `lt.popover()`, `lt.progress()`, `lt.radio()`, `lt.search()`, `lt.select()`,
 `lt.sessionTimeout()`, `lt.skeleton()`, `lt.skipLink()`, `lt.spinner()`,
-`lt.srOnly()`, `lt.suggestion()`, `lt.switch()`, `lt.table()`,
-`lt.tableSort()`, `lt.tabs()`, `lt.tag()`, `lt.textarea()`, `lt.toast()`,
-`lt.toggleGroup()`, `lt.tooltip()`
+`lt.srOnly()`, `lt.steps()`, `lt.suggestion()`, `lt.switch()`, `lt.table()`,
+`lt.tableSort()`, `lt.tabs()`, `lt.tag()`, `lt.term()`, `lt.textarea()`,
+`lt.toast()`, `lt.toggleGroup()`, `lt.tooltip()`
 
 ## 6. Fields without JavaScript
 
@@ -341,7 +343,7 @@ const fixer = lt.field({ id: "fixer", required: "symbol", help: true, error: tru
 <label {...fixer.label}>Fixer's address</label>
 <input {...lt.input({ type: "email" })} {...fixer.control} name="fixer" required />
 <p {...lt.helpText()} {...fixer.help}>The board writes to the fixer, never to the crew.</p>
-<p {...lt.errorText()} {...fixer.error}>Enter a valid address.</p>
+<p {...lt.errorText()} {...fixer.error}>Enter the fixer's address, for example fixer@relay.example.</p>
 ```
 
 No `<lt-field>`, no runtime.

package/agent/bundles.md

@@ -10,7 +10,7 @@ names, and `defineLt*()` runs at the top of `main.ts`. If you write React, the
 attribute names differ and `react.md` applies instead. If you write Astro, the
 stylesheets are imported in the frontmatter and `astro.md` applies.
 
-This is @lo-tek/interfaces 0.40.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
 follows its version, so it can never say anything other than the code next to
 it.
 
@@ -63,7 +63,7 @@ page does not use.
 
 ## 2. What exists
 
-35 CSS components and 9 web components, and this is the whole list. The
+36 CSS components and 10 web components, and this is the whole list. The
 classes are `lt-` + kebab-case. Variants are always `data-*` attributes, never
 classes of their own: `data-variant="secondary"`, not `lt-button--secondary`.
 The default variant has no attribute.
@@ -101,6 +101,7 @@ The default variant has no attribute.
 | `lt-skip-link` | `@lo-tek/interfaces/skip-link.css` | none |
 | `lt-spinner` | `@lo-tek/interfaces/spinner.css` | `data-size`: small, large |
 | `lt-sr-only` | `@lo-tek/interfaces/sr-only.css` | none |
+| `lt-steps` | `@lo-tek/interfaces/steps.css` | none |
 | `lt-switch`<br>`lt-switch-row` | `@lo-tek/interfaces/switch.css` | none |
 | `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `@lo-tek/interfaces/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
 | `lt-tag` | `@lo-tek/interfaces/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
@@ -283,6 +284,7 @@ Three rules apply to all of them:
 | `<lt-tabs>` | frame | `@lo-tek/interfaces/tabs.css` | `defineLtTabs()` from `@lo-tek/interfaces/tabs` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
 | `<lt-error-summary>` | frame | `@lo-tek/interfaces/error-summary.css` | `defineLtErrorSummary()` from `@lo-tek/interfaces/error-summary` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
 | `<lt-popover>` | frame | `@lo-tek/interfaces/popover.css` | `defineLtPopover()` from `@lo-tek/interfaces/popover` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
+| `<lt-term>` | frame | `@lo-tek/interfaces/term.css` | `defineLtTerm()` from `@lo-tek/interfaces/term` | none | none | `lt-term`<br>`lt-term__entry` |
 | `<lt-suggestion>` | frame | `@lo-tek/interfaces/suggestion.css` | `defineLtSuggestion()` from `@lo-tek/interfaces/suggestion` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
 | `<lt-dialog>` | frame | `@lo-tek/interfaces/dialog.css` | `defineLtDialog()` from `@lo-tek/interfaces/dialog` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
 | `<lt-toast>` | standalone | `@lo-tek/interfaces/toast.css` | `defineLtToast()` from `@lo-tek/interfaces/toast` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
@@ -339,7 +341,7 @@ lt.button({ variant: "secondary" })
 
 The builder functions return an object with HTML attribute names, which is
 spread in where the template language supports spreading, or read out field by
-field. The 46 builder functions:
+field. The 48 builder functions:
 
 `lt.accordion()`, `lt.alert()`, `lt.avatar()`, `lt.badge()`,
 `lt.breadcrumbs()`, `lt.button()`, `lt.card()`, `lt.checkbox()`,
@@ -349,9 +351,9 @@ field. The 46 builder functions:
 `lt.legend()`, `lt.link()`, `lt.list()`, `lt.pagination()`, `lt.paragraph()`,
 `lt.popover()`, `lt.progress()`, `lt.radio()`, `lt.search()`, `lt.select()`,
 `lt.sessionTimeout()`, `lt.skeleton()`, `lt.skipLink()`, `lt.spinner()`,
-`lt.srOnly()`, `lt.suggestion()`, `lt.switch()`, `lt.table()`,
-`lt.tableSort()`, `lt.tabs()`, `lt.tag()`, `lt.textarea()`, `lt.toast()`,
-`lt.toggleGroup()`, `lt.tooltip()`
+`lt.srOnly()`, `lt.steps()`, `lt.suggestion()`, `lt.switch()`, `lt.table()`,
+`lt.tableSort()`, `lt.tabs()`, `lt.tag()`, `lt.term()`, `lt.textarea()`,
+`lt.toast()`, `lt.toggleGroup()`, `lt.tooltip()`
 
 Where the template language cannot spread an object, `lt.setAttributes()` sets
 the attributes on an element in plain DOM:

package/agent/datastar.md

@@ -8,7 +8,7 @@ That means two things for this file: the addresses are URLs, since a browser
 without a bundler does not resolve a package name, and the state is controlled
 with attributes, which is exactly what the `frame` components expect.
 
-This is @lo-tek/interfaces 0.40.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.42.0. The file is generated by the package and
 follows its version, so it can never say anything other than the code next to
 it.
 
@@ -39,21 +39,27 @@ it.
 ## 1. The stylesheet and Datastar
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/lotek.css">
+<!-- The registration, defineLt*(), stands here, before Datastar. -->
 <script
   type="module"
   src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar.js"
 ></script>
 ```
 
-`lotek.css` is 103 kB, 13 kB compressed, and has all the components. If you
+**Datastar after the `defineLt*()` script.** Module scripts run in the order
+they stand. With Datastar first, the answer to a request at load can reach a
+web component before it is registered, and a `data-on` that calls one of its
+methods throws. Never `async` on either.
+
+`lotek.css` is 112 kB, 14 kB compressed, and has all the components. If you
 want only what you use, `tokens.css` defines all the variables, and all the
 other stylesheets build on it. It must be loaded, and comes first out of
 habit: the order between it and the others does not matter.
 
 ## 2. What exists
 
-35 CSS components and 9 web components, and this is the whole list. The
+36 CSS components and 10 web components, and this is the whole list. The
 classes are `lt-` + kebab-case. Variants are always `data-*` attributes, never
 classes of their own: `data-variant="secondary"`, not `lt-button--secondary`.
 The default variant has no attribute.
@@ -62,41 +68,42 @@ The default variant has no attribute.
 
 | Class | Stylesheet | Attributes |
 | --- | --- | --- |
-| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
-| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
-| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
-| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
-| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
-| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
-| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
-| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
-| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
-| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
-| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
-| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
-| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
-| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
-| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/icon/icon.css` | none |
-| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
-| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
-| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/link/link.css` | none |
-| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
-| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/pagination/pagination.css` | none |
-| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
-| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
-| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
-| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/search/search.css` | `data-state`: invalid, success |
-| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
-| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
-| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/skip-link/skip-link.css` | none |
-| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
-| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/sr-only/sr-only.css` | none |
-| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/switch/switch.css` | none |
-| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
-| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
-| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
-| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/toggle-group/toggle-group.css` | none |
-| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/css/tooltip/tooltip.css` | none |
+| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/accordion/accordion.css` | `data-variant`: plain |
+| `lt-alert`<br>`lt-alert__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/alert/alert.css` | `data-color`: info, success, warning, danger |
+| `lt-avatar`<br>`lt-avatar-stack` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/avatar/avatar.css` | `data-variant`: square<br>`data-size`: small, large |
+| `lt-badge` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
+| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
+| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/button/button.css` | `data-variant`: secondary, ghost, danger |
+| `lt-card`<br>`lt-card__title` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/card/card.css` | `data-variant`: filled<br>`data-interactive` (flag) |
+| `lt-checkbox`<br>`lt-checkbox-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
+| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
+| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/error-text/error-text.css` | `data-variant`: warning |
+| `lt-fieldset`<br>`lt-legend` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/fieldset/fieldset.css` | `data-state`: invalid, success<br>`data-required`: symbol, text<br>`data-optional` (flag) |
+| `lt-file-upload`<br>`lt-file-upload-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
+| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/heading/heading.css` | `data-size`: xs, s, m, xl, mega |
+| `lt-help-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/help-text/help-text.css` | `data-variant`: strong, success, warning |
+| `lt-icon` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/icon/icon.css` | none |
+| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/input/input.css` | `data-state`: invalid, success<br>`data-variant`: date, datetime-local, time |
+| `lt-label` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/label/label.css` | `data-required`: symbol, text<br>`data-optional` (flag) |
+| `lt-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/link/link.css` | none |
+| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/list/list.css` | `data-variant`: plain, divided |
+| `lt-pagination`<br>`lt-pagination__gap` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/pagination/pagination.css` | none |
+| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/paragraph/paragraph.css` | `data-variant`: lead<br>`data-size`: small, large |
+| `lt-progress` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/progress/progress.css` | `data-color`: success, warning, danger |
+| `lt-radio`<br>`lt-radio-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/radio/radio.css` | `data-state`: invalid, success |
+| `lt-search`<br>`lt-search-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/search/search.css` | `data-state`: invalid, success |
+| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/select/select.css` | `data-state`: invalid, success<br>`data-picker`: styled |
+| `lt-skeleton` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
+| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/skip-link/skip-link.css` | none |
+| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
+| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/sr-only/sr-only.css` | none |
+| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/steps/steps.css` | none |
+| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/switch/switch.css` | none |
+| `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/table/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
+| `lt-tag` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tag/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
+| `lt-textarea` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/textarea/textarea.css` | `data-state`: invalid, success |
+| `lt-toggle-group`<br>`lt-toggle-group__option` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/toggle-group/toggle-group.css` | none |
+| `lt-tooltip`<br>`lt-tooltip__bubble` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/css/tooltip/tooltip.css` | none |
 
 There is also `lt-theme-control`, a class on a radio button that lets the user
 choose a theme. It is in `tokens.css`, and is described under Tokens.
@@ -175,7 +182,7 @@ root element:
 Below the root element the browser then ignores the host's CSS without a
 layer, unless a rule of the host's wins on specificity as described below, and
 LO-TEK's layer applies again. The rule is in `lotek.css` and in
-`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/tokens/boundary.css`.
+`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/tokens/boundary.css`.
 Fonts and other inherited properties still come from the host, and the
 `--lt-*` variables work. Three things follow from it:
 
@@ -269,15 +276,16 @@ Three rules apply to all of them:
 
 | Element | Category | Stylesheet | Registration | Attributes | Events | Classes inside |
 | --- | --- | --- | --- | --- | --- | --- |
-| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
-| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/tabs/lt-tabs.js` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
-| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/error-summary/lt-error-summary.js` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
-| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/popover/lt-popover.js` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
-| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/suggestion/lt-suggestion.js` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
-| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/dialog/lt-dialog.js` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
-| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/standalone/toast/lt-toast.js` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
-| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/session-timeout/lt-session-timeout.js` | `warn-at` (number)<br>`expires-at` (number)<br>`activity-interval` (number) | `session-warn`<br>`session-extend`<br>`session-logout`<br>`session-expired`<br>`session-activity` | `lt-session-timeout`<br>`lt-session-timeout__dialog`<br>`lt-session-timeout__title`<br>`lt-session-timeout__text`<br>`lt-session-timeout__count`<br>`lt-session-timeout__actions` |
-| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/standalone/connection-status/lt-connection-status.js` | `offline-text` (text)<br>`online-text` (text) | `connection-lost`<br>`connection-restored` | `lt-connection-status`<br>`lt-connection-status__bar` |
+| `<lt-field>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js` | `disabled` (flag)<br>`optional` (flag)<br>`described-by` (text) | none | none |
+| `<lt-tabs>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/tabs/lt-tabs.js` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
+| `<lt-error-summary>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/error-summary/lt-error-summary.js` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
+| `<lt-popover>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/popover/lt-popover.js` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
+| `<lt-term>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/term/lt-term.js` | none | none | `lt-term`<br>`lt-term__entry` |
+| `<lt-suggestion>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/suggestion/lt-suggestion.js` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
+| `<lt-dialog>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/dialog/lt-dialog.js` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
+| `<lt-toast>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/toast/lt-toast.js` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
+| `<lt-session-timeout>` | frame | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/session-timeout/lt-session-timeout.js` | `warn-at` (number)<br>`expires-at` (number)<br>`activity-interval` (number) | `session-warn`<br>`session-extend`<br>`session-logout`<br>`session-expired`<br>`session-activity` | `lt-session-timeout`<br>`lt-session-timeout__dialog`<br>`lt-session-timeout__title`<br>`lt-session-timeout__text`<br>`lt-session-timeout__count`<br>`lt-session-timeout__actions` |
+| `<lt-connection-status>` | standalone | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/standalone/connection-status/lt-connection-status.js` | `offline-text` (text)<br>`online-text` (text) | `connection-lost`<br>`connection-restored` | `lt-connection-status`<br>`lt-connection-status__bar` |
 
 None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 `FormData` and ordinary CSS work straight into it.
@@ -307,7 +315,7 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 
 <script type="module">
   import { defineLtField } from
-    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.40.0/dist/components/frame/field/lt-field.js"
+    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.42.0/dist/components/frame/field/lt-field.js"
 
   defineLtField()
 </script>
@@ -334,7 +342,7 @@ as plain HTML:
   <label class="lt-label" for="fixer" data-required="text">Fixer's address</label>
   <input class="lt-input" id="fixer" type="email" value="fixer@" />
   <p class="lt-help-text">The board writes to the fixer, never to the crew.</p>
-  <p class="lt-error-text">Enter a valid address.</p>
+  <p class="lt-error-text">Enter the fixer's address, for example fixer@relay.example.</p>
 </lt-field>
 ```
 
@@ -392,6 +400,7 @@ build step. Datastar does not need it in the browser.
 | An `<lt-toast>` or `<lt-connection-status>` shows nothing, an `<lt-session-timeout>` never warns, or another component does nothing | The `define` function has not run. `<lt-toast>` and `<lt-connection-status>` create their content themselves and are empty without it, and `<lt-session-timeout>` does not count the time. The markup in the others comes from you and is there regardless, with two exceptions until they are registered. `<lt-tabs>` shows one panel: of those the server left without `hidden`, the one the URL points to, otherwise the first, and under `server-controlled` always the first. `<lt-suggestion>` hides the list |
 | A component speaks English on a page in another language | The text in the markup comes from you, and is written with the app's own translation setup. The few default texts the package has are replaced with `label` and `close-label` on `<lt-toast>`, `offline-text` and `online-text` on `<lt-connection-status>`, `count-none`, `count-one` and `count-other` on `<lt-suggestion>`, and `--lt-label-required-text`, `--lt-label-optional-text` and `--lt-label-required-symbol` in CSS. Numbers and durations follow the nearest `lang`, usually the one on `<html>`. See https://lo-tek.sobernetics.no/translation/ |
 | The error text never shows, and the field counts as valid | `hidden="false"` is set on the error text, and it hides it all the same. The attribute must be removed, not set to `false` |
+| The server still has a dialog as open after the user pressed Escape | Only the buttons post the choice. Escape is a close request, which the browser reports with `cancel` on the `<dialog>`: `data-on:cancel="@post(…)"`. Not `dialog-toggle`, which reports an empty `returnValue` both for Escape and for a close the server makes |
 | `SyntaxError` in the browser | TypeScript syntax in a `<script type="module">` without a build step |
 
 ## When CSS is not enough