@lo-tek/interfaces 0.39.0 → 0.41.0

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.39.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.41.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,21 @@ it.
 ## 1. The stylesheet and Datastar
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/dist/lotek.css">
 <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
+`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 +62,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.39.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.39.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.39.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.39.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
-| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
-| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
-| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
-| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
-| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/icon/icon.css` | none |
-| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/link/link.css` | none |
-| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/pagination/pagination.css` | none |
-| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.0/src/components/css/search/search.css` | `data-state`: invalid, success |
-| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
-| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/skip-link/skip-link.css` | none |
-| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
-| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.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.39.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.39.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.39.0/src/components/css/tooltip/tooltip.css` | none |
+| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.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.41.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
+| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
+| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
+| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
+| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
+| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/icon/icon.css` | none |
+| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/link/link.css` | none |
+| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/css/pagination/pagination.css` | none |
+| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.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.41.0/src/components/css/search/search.css` | `data-state`: invalid, success |
+| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
+| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/skip-link/skip-link.css` | none |
+| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
+| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/sr-only/sr-only.css` | none |
+| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/steps/steps.css` | none |
+| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.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.41.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.41.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.41.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 +176,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.39.0/src/tokens/boundary.css`.
+`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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 +270,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.39.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.41.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.
@@ -286,35 +288,35 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 
 ```html
 <form
-  data-signals="{name: '', touched: false}"
-  data-computed:invalid="$touched && $name.trim() === ''"
+  data-signals="{codename: '', touched: false}"
+  data-computed:invalid="$touched && $codename.trim() === ''"
 >
   <lt-field>
-    <label class="lt-label" for="name" data-required="symbol">Full name</label>
+    <label class="lt-label" for="codename" data-required="symbol">Codename</label>
     <input
       class="lt-input"
-      id="name"
+      id="codename"
       type="text"
-      name="name"
-      data-bind:name
+      name="codename"
+      data-bind:codename
       data-on:blur="$touched = true"
     />
-    <p class="lt-error-text" hidden data-attr:hidden="!$invalid">Enter your name.</p>
+    <p class="lt-error-text" hidden data-attr:hidden="!$invalid">Enter a codename.</p>
   </lt-field>
 
-  <button class="lt-button" type="submit">Send</button>
+  <button class="lt-button" type="submit">Order the job</button>
 </form>
 
 <script type="module">
   import { defineLtField } from
-    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
+    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/dist/components/frame/field/lt-field.js"
 
   defineLtField()
 </script>
 ```
 
 `data-signals` creates the state, `data-computed:invalid` derives the
-validation from it, `data-bind:name` binds the field both ways, and
+validation from it, `data-bind:codename` binds the field both ways, and
 `data-on:blur` records that the user has left it.
 
 `data-attr:hidden` on the error text is the link to the component: it sets
@@ -331,10 +333,10 @@ as plain HTML:
 
 ```html
 <lt-field>
-  <label class="lt-label" for="email" data-required="text">Email address</label>
-  <input class="lt-input" id="email" type="email" value="alex@" />
-  <p class="lt-help-text">We will send the receipt here.</p>
-  <p class="lt-error-text">Enter a valid address.</p>
+  <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 the fixer's address, for example fixer@relay.example.</p>
 </lt-field>
 ```
 
@@ -368,11 +370,11 @@ word. If the server should be able to move the tab, say so with
 
 ```html
 <lt-tabs server-controlled data-on:tab-select="$tab = evt.detail.index">
-  <ul class="lt-tabs__list" aria-label="Parts of the case">
-    <li><a href="#application">Application</a></li>
+  <ul class="lt-tabs__list" aria-label="Parts of the claim">
+    <li><a href="#claim">Claim</a></li>
     <li><a href="#attachments">Attachments</a></li>
   </ul>
-  <section class="lt-tabs__panel" id="application">…</section>
+  <section class="lt-tabs__panel" id="claim">…</section>
   <section class="lt-tabs__panel" id="attachments" hidden="until-found">…</section>
 </lt-tabs>
 ```
@@ -381,8 +383,8 @@ The attribute exists on `<lt-tabs>`, `<lt-popover>`, `<lt-dialog>` and
 `<lt-suggestion>`. Without it the server and the component would fight over
 the same state.
 
-`lt` can be used on the server or in a build step. Datastar does not need it
-in the browser.
+`lt`, or `Lt` on a Kotlin or Java server, can be used on the server or in a
+build step. Datastar does not need it in the browser.
 
 ## Known pitfalls
 

package/agent/html.md

@@ -5,7 +5,7 @@ where the browser loads the files directly. If you use a bundler, React, Astro
 or Datastar, or the server produces the markup, another file in this folder
 applies.
 
-This is @lo-tek/interfaces 0.39.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.41.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.
 
@@ -38,7 +38,7 @@ it.
 One file with everything, the simplest and fastest option without a bundler:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/dist/lotek.css">
 ```
 
 Or from `node_modules`, if you serve the folder:
@@ -47,15 +47,15 @@ Or from `node_modules`, if you serve the folder:
 <link rel="stylesheet" href="/node_modules/@lo-tek/interfaces/dist/lotek.css">
 ```
 
-`lotek.css` is 103 kB, 13 kB compressed, and has all the components. Choose
+`lotek.css` is 112 kB, 14 kB compressed, and has all the components. Choose
 it. The alternative is one stylesheet per component, and then `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.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/tokens/tokens.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/button/button.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/tokens/tokens.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/button/button.css">
 ```
 
 Some of them, such as `field.css` and `suggestion.css`, fetch the stylesheets
@@ -65,7 +65,7 @@ therefore faster when you link.
 
 ## 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.
@@ -74,41 +74,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.39.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.39.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.39.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.39.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
-| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
-| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
-| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
-| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
-| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/icon/icon.css` | none |
-| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.0/src/components/css/link/link.css` | none |
-| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/pagination/pagination.css` | none |
-| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.0/src/components/css/search/search.css` | `data-state`: invalid, success |
-| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
-| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/skip-link/skip-link.css` | none |
-| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
-| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.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.39.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.39.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.39.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.39.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.39.0/src/components/css/tooltip/tooltip.css` | none |
+| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.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.41.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
+| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
+| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
+| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
+| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
+| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/icon/icon.css` | none |
+| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.0/src/components/css/link/link.css` | none |
+| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/css/pagination/pagination.css` | none |
+| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.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.41.0/src/components/css/search/search.css` | `data-state`: invalid, success |
+| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
+| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/skip-link/skip-link.css` | none |
+| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
+| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/sr-only/sr-only.css` | none |
+| `lt-steps` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/src/components/css/steps/steps.css` | none |
+| `lt-switch`<br>`lt-switch-row` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.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.41.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.41.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.41.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.41.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.
@@ -187,7 +188,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.39.0/src/tokens/boundary.css`.
+`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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:
 
@@ -283,15 +284,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.39.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.39.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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.41.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/term/term.css` | `defineLtTerm()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.41.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.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.
@@ -299,21 +301,21 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 ## 5. A whole form
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/dist/lotek.css">
 
-<form id="contact-form" novalidate>
+<form id="job-order" novalidate>
   <lt-field>
-    <label class="lt-label" for="name" data-required="symbol">Full name</label>
-    <input class="lt-input" id="name" type="text" name="name" required />
-    <p class="lt-error-text" hidden>Enter your name.</p>
+    <label class="lt-label" for="codename" data-required="symbol">Codename</label>
+    <input class="lt-input" id="codename" type="text" name="codename" required />
+    <p class="lt-error-text" hidden>Enter a codename.</p>
   </lt-field>
 
-  <button class="lt-button" type="submit">Send</button>
+  <button class="lt-button" type="submit">Order the job</button>
 </form>
 
 <script type="module">
   import { defineLtField } from
-    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
+    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.41.0/dist/components/frame/field/lt-field.js"
 
   defineLtField()
 </script>
@@ -322,10 +324,10 @@ None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 The field becomes invalid when the error text shows, not by switching a class:
 
 ```js
-const name = document.getElementById("name")
-const error = name.closest("lt-field").querySelector(".lt-error-text")
+const codename = document.getElementById("codename")
+const error = codename.closest("lt-field").querySelector(".lt-error-text")
 
-error.hidden = name.value.trim() !== ""
+error.hidden = codename.value.trim() !== ""
 ```
 
 TypeScript does not belong in a `<script type="module">`. The browser runs the