@lo-tek/interfaces 0.37.0 → 0.39.0

package/CHANGELOG.md

@@ -24,6 +24,164 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
 
 ## Unreleased
 
+## 0.39.0 (2026-11-01)
+
+### Added
+
+- **The classes for the parts a template writes itself are in the manifest,
+  and in Kotlin.** `lt.card.title` and `lt.toggleGroup.option` were string
+  constants on the TypeScript functions alone, so a Kotlin template had to
+  write `lt-card__title` as text. Every such constant is now `classes` on the
+  builder function in `manifest.json`, and `Lt` has the same names:
+  `Lt.card.title`, `Lt.toggleGroup.option` and the rest, each a set with the
+  class, so it goes where every other answer goes.
+
+### Fixed
+
+- **A property set on a web component before its registration now reaches
+  the attribute.** `dialog.open = true` from a script that ran before
+  `defineLt()` became a plain property on the element. Once the element was
+  upgraded, that property shadowed the setter: the attribute was never set,
+  and no later write reached the setter either, `dialog.open = false`
+  included. The components now write such a property through the setter in
+  the microtask after the upgrade, and a write made in between wins. This is
+  the same gap `whenUpgraded()` closes for the methods.
+
+## 0.38.0 (2026-10-31)
+
+### Breaking
+
+- **One rule, `without-name`, replaces `icon-without-name`,
+  `control-without-label`, `tab-list-without-name` and
+  `field-without-label`.** A `<!-- lotek-ignore-next -->` naming one of the
+  four names now has to name `without-name`. The rule is an error, also for
+  a field, which was a warning.
+
+### Added
+
+- **`lotek check` reports every element a screen reader gets no name for**
+  (`without-name`): the roles WAI-ARIA 1.2 says must have one, on LO-TEK's
+  classes and elements and on every button and link, and what LO-TEK demands
+  beyond that, from `name` on an element, a part or a class in the manifest:
+  a tab list, a fieldset, a toggle group, a dialog in `<lt-dialog>` without a
+  heading, an error summary without a heading with an id. The name is
+  computed as the browsers compute it (AccName 1.2), by the same model the
+  accessibility check compares with Chromium and Firefox, and a `<title>` in
+  an svg counts (SVG-AAM). Where a binding, a template or another part of
+  the page could give the name, the rule says nothing.
+- **`lotek check` warns about LO-TEK's own English texts on a page in
+  another language** (`untranslated-text`): `<lt-toast>`,
+  `<lt-connection-status>` and the counts in `<lt-suggestion>` without the
+  attribute that replaces the text, and, when the style sheets are given,
+  " (required)" and " (optional)" on a label or legend without the CSS
+  variable. The language is the nearest `lang`. The manifest has
+  `textLanguage`, `texts` on the elements and classes, and `name`, which
+  `Manifest` in LO-TEK for Kotlin reads as `textLanguage`, `texts` and
+  `named`.
+
+### Changed
+
+- **`lt.errorSummary()` writes the heading's id and the box's
+  `aria-labelledby`.** `titleId` is new, and defaults to the box's `id` with
+  `-title`, so `lt.errorSummary({ id: "errors" })` names the box after
+  `<h2 id="errors-title">`. As with every option of a builder function,
+  `lt.setAttributes()` with a set that has no `aria-labelledby` removes one
+  the element had. An empty `titleId` counts as none, and one with whitespace
+  throws, in TypeScript and in Kotlin; so does an `id` with whitespace,
+  which `lt.errorSummary({ id })` accepted before, since the default
+  `titleId` is made from it.
+- **`lt.connectionStatus()` writes `role="status"` and `aria-live="polite"`**
+  on the host, the live region; `lt.setAttributes()` sets them over a role
+  the element had.
+
+### Fixed
+
+- **`<lt-field>` keeps an `aria-invalid` the server writes, and `<lt-tabs>`
+  an `aria-selected`, when the value is the one the component had
+  written.** The components told the server's word from their own by the
+  value, and a morph leaves an attribute whose value is already right, so
+  the server's `aria-invalid="true"` was taken for the component's own and
+  removed. They now mark what they write that differs from the server, in
+  `data-lt-written`, which a morph from the server removes; markup that is
+  already right, as React renders it, gets no mark. Found by the new model
+  tests, which try every order of server updates and user actions.
+- **`<lt-tabs>` keeps the user's tab when the server inserts a tab before
+  it.** Datastar and idiomorph match links without ids by position, and the
+  link the user pressed became the inserted tab. The component now finds
+  the user's tab by the panel it points to when a morph has moved or
+  dropped the link, and still forgets the selection when the links are
+  replaced.
+- **`<lt-popover>` puts focus back on the button whatever closes the panel
+  with focus in it**: `hide()`, `toggle()`, a click on the button in Safari,
+  which gives a clicked button no focus, and the server taking `open`.
+  Escape alone did it before, and otherwise the focus was lost to the page.
+  A patch that only takes `open` for a moment, while the component puts it
+  back, no longer closes and reopens the panel, which took the focus from a
+  button in it.
+- **`show()` on a `<lt-popover>` the server opened is remembered**, as
+  `open = true` is: the next patch without `open` closed the panel, since
+  `show()` returned before the setter that remembers it. `hide()` the same.
+- **`<lt-suggestion>` filters an open list an update changed under
+  `server-controlled` too.** The attribute is about whether the list is open
+  and what is highlighted, but the repair returned before the filter, so the
+  list showed every option the server sent whatever the user had typed, and
+  an emptied list kept its empty message hidden.
+- **`<lt-suggestion>` announces a count only for a list that opens.**
+  Focusing an empty field over a list with nothing to show announced "No
+  matches" for a list that stayed closed. An update that removed
+  `prefiltered` counted the options before the morph had replaced them, and
+  an update that also locked the field announced the count for a list it
+  closed.
+- **`<lt-dialog>` names the dialog after its heading again when an update
+  removes `aria-label`.** The component did not watch `aria-label`, and the
+  dialog was left without a name until something else changed.
+- **`<lt-dialog>` no longer reports a close for a dialog that never
+  opened.** `dialog-toggle` with `open: false` came when the component
+  closed a `<dialog open>` it had never shown.
+- **`<lt-session-timeout>` keeps the warning's role and name through an
+  update.** A morph of the open warning removed `role="alertdialog"` and
+  `aria-labelledby`, which the component had written, and a screen reader
+  had a modal dialog without a name until the warning closed.
+- **`<lt-session-timeout>` goes on with a warning the renderer replaced
+  while it showed**, as `innerHTML` does: focus goes back to where the user
+  was, not to the page, and `session-warn` is not sent a second time.
+- **`<lt-error-summary>` has a name when it takes focus.** The box moves
+  focus to itself when a submission fails, and had no name, so a screen
+  reader said only "alert". The template writes the heading's `id` and the
+  box's `aria-labelledby`, as it writes `for` and `id` on a field, and the
+  recipes on the page do. When the heading has an id and the box no name,
+  the component points `aria-labelledby` at it, and follows a heading a
+  patch has replaced; when the heading has no id, it says so in the console.
+  It never writes an id itself: Datastar and idiomorph replace an element
+  whose id the server did not send, so the heading would have got a new one
+  on every patch. A blank `aria-label` or `aria-labelledby` counts as
+  missing.
+- **`<lt-error-summary>` takes focus after an update, not in the middle of
+  it.** It moved focus as a morph removed `hidden`, before the morph had
+  updated the content, and idiomorph with `ignoreActiveValue` then left the
+  content of the focused box as it was: the box showed the previous errors.
+  A script that moves focus elsewhere in the same turn keeps it there.
+- **`<lt-error-summary>` lets go of focus when it is hidden**, also from a
+  link inside it. In Firefox and WebKit the hidden box kept focus, so the
+  next errors never reached it.
+- **`<lt-connection-status>` is announced in Firefox.** The component made
+  the bar a live region as it inserted it, and Firefox then sent no
+  live-region text through the accessibility API, so "No connection" was
+  never read out. The host is now the live region from the moment it is
+  connected, with `role="status"` and `aria-live="polite"` when it has
+  neither, and the bar is content inside it. A role the server wrote keeps
+  its own politeness. A morph that takes both off gets them back.
+
+The name, and the announcement in Firefox, were found by
+`check-accessibility-tree.ts`, which reads what a screen reader is given
+through AT-SPI in Chromium and Firefox, against an accessibility contract per
+component; the contracts are shown on the component pages, under
+"Accessibility". The focus fixes were found by
+`lt-error-summary.model.browser.test.ts`, which sends every version of the box
+by Datastar, idiomorph and `outerHTML` in every order and checks the
+accessibility tree the core computes after each step, and by the code review
+of the pull request.
+
 ## 0.37.0 (2026-10-26)
 
 ### Breaking
@@ -64,8 +222,8 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
   | Maven `io.github.markusaugust:fristil`, `fristil-kotlinx-html`, `fristil-kommandolinje`, `fristil-gradle-plugin` | `lo-tek-interfaces`, `lo-tek-kotlinx-html`, `lo-tek-cli`, `lo-tek-gradle-plugin` |
   | Gradle plugin `io.github.markusaugust.fristil`, tasks `fristilSjekk`, `fristilTema`, `fristilManifest` | `io.github.markusaugust.lo-tek`, `lotekCheck`, `lotekTheme`, `lotekManifest` |
   | WebJar `webjars/fristil/` | `webjars/lo-tek/` |
-  | VS Code `Fristil.fristil-vscode` | `lo-tek.vscode` ("LO-TEK for VS Code") |
-  | IntelliJ `no.fristil` | `no.lotek` ("LO-TEK for IntelliJ") |
+  | VS Code `Fristil.fristil-vscode` | `lo-tek.interfaces` ("LO-TEK for VS Code") |
+  | IntelliJ `no.fristil` | `no.lotek` ("LO-TEK Interfaces") |
   | rulebook `agent/maler.md` | `agent/templates.md` |
 
 - **The command line has English verbs, flags and recipe keys.** There are

package/README.md

@@ -88,11 +88,12 @@ The builder functions in `lt` give the markup, the components give the behaviour
 import { lt } from "@lo-tek/interfaces"
 
 lt.errorSummary({ count: 2, id: "errors" })
-// { host: { class: "lt-error-summary", role: "alert", tabindex: "-1", id: "errors" },
-//   title:     { class: "lt-error-summary__title" } }
+// { host:  { class: "lt-error-summary", role: "alert", tabindex: "-1", id: "errors",
+//            "aria-labelledby": "errors-title" },
+//   title: { class: "lt-error-summary__title", id: "errors-title" } }
 ```
 
-`id` is required in `lt.field()`, `lt.suggestion()`, `lt.tabs()` and `lt.popover()`, and `titleId` in `lt.dialog()`. `lt.tabs()` and `lt.suggestion()` also take `keys`, one key from the data per tab or option, and `lt.tabs()` requires `label`, the name of the tab list. The reason is hydration: if the function creates the id itself, the server and the browser each create their own, and the wiring between the parts is broken until React has corrected it. In React it comes from `useId()`. In `lt.errorSummary()` it is optional, since it only names the box so that something else can point to it.
+`id` is required in `lt.field()`, `lt.suggestion()`, `lt.tabs()` and `lt.popover()`, and `titleId` in `lt.dialog()`. `lt.tabs()` and `lt.suggestion()` also take `keys`, one key from the data per tab or option, and `lt.tabs()` requires `label`, the name of the tab list. The reason is hydration: if the function creates the id itself, the server and the browser each create their own, and the wiring between the parts is broken until React has corrected it. In React it comes from `useId()`. In `lt.errorSummary()` both are optional: `id` names the box so that something else can point to it, and `titleId`, the heading's id that names the box, defaults to the `id` with `-title`. Without either, the heading has no id and the box no name, and the web component says so in the console.
 
 The full reasoning, with the tests behind it, is on [Markup and behaviour](https://lo-tek.sobernetics.no/markup-and-behaviour/).
 

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.37.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.39.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.
 

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.37.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.39.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.
 
@@ -306,7 +306,9 @@ defineLtField()
 The call is in the module, not in `mounted`, `onMount` or an effect. A hook
 runs after the first paint, so the elements in the markup are plain
 `HTMLElement`s when the framework renders them, and a call to `show()` or
-`reportFailure()` before the hook fails with "is not a function".
+`reportFailure()` before the hook fails with "is not a function". A property
+set before the registration, such as `open`, is written through the setter
+once the element is upgraded.
 
 The markup is ordinary HTML, in whatever template your framework uses:
 

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.37.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.39.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,7 +39,7 @@ it.
 ## 1. The stylesheet and Datastar
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
 <script
   type="module"
   src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar.js"
@@ -62,41 +62,41 @@ The default variant has no attribute.
 
 | Class | Stylesheet | Attributes |
 | --- | --- | --- |
-| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.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.37.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
-| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
-| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
-| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
-| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
-| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/icon/icon.css` | none |
-| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/link/link.css` | none |
-| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/css/pagination/pagination.css` | none |
-| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.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.37.0/src/components/css/search/search.css` | `data-state`: invalid, success |
-| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
-| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/skip-link/skip-link.css` | none |
-| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
-| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.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.37.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.37.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.37.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.37.0/src/components/css/tooltip/tooltip.css` | none |
+| `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 |
 
 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 +175,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.37.0/src/tokens/boundary.css`.
+`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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 +269,15 @@ 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.37.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.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` |
 
 None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 `FormData` and ordinary CSS work straight into it.
@@ -307,7 +307,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.37.0/dist/components/frame/field/lt-field.js"
+    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
 
   defineLtField()
 </script>

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.37.0. The file is generated by the package and
+This is @lo-tek/interfaces 0.39.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.37.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
 ```
 
 Or from `node_modules`, if you serve the folder:
@@ -54,8 +54,8 @@ 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.37.0/src/tokens/tokens.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/button/button.css">
+<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">
 ```
 
 Some of them, such as `field.css` and `suggestion.css`, fetch the stylesheets
@@ -74,41 +74,41 @@ The default variant has no attribute.
 
 | Class | Stylesheet | Attributes |
 | --- | --- | --- |
-| `lt-accordion`<br>`lt-accordion__content` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.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.37.0/src/components/css/badge/badge.css` | `data-color`: success, warning, danger, neutral |
-| `lt-breadcrumbs` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/breadcrumbs/breadcrumbs.css` | none |
-| `lt-button` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/checkbox/checkbox.css` | `data-state`: invalid, success |
-| `lt-divider` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/divider/divider.css` | `data-variant`: subtle, strong |
-| `lt-error-text` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/file-upload/file-upload.css` | `data-state`: invalid, success |
-| `lt-heading` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/icon/icon.css` | none |
-| `lt-input` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.0/src/components/css/link/link.css` | none |
-| `lt-list` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/css/pagination/pagination.css` | none |
-| `lt-paragraph` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.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.37.0/src/components/css/search/search.css` | `data-state`: invalid, success |
-| `lt-select` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/css/skeleton/skeleton.css` | `data-variant`: text, circle |
-| `lt-skip-link` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/skip-link/skip-link.css` | none |
-| `lt-spinner` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.0/src/components/css/spinner/spinner.css` | `data-size`: small, large |
-| `lt-sr-only` | `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.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.37.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.37.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.37.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.37.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.37.0/src/components/css/tooltip/tooltip.css` | none |
+| `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 |
 
 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 +187,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.37.0/src/tokens/boundary.css`.
+`https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.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 +283,15 @@ 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.37.0/src/components/frame/field/field.css` | `defineLtField()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/tabs/tabs.css` | `defineLtTabs()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/error-summary/error-summary.css` | `defineLtErrorSummary()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/popover/popover.css` | `defineLtPopover()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/suggestion/suggestion.css` | `defineLtSuggestion()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/dialog/dialog.css` | `defineLtDialog()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/standalone/toast/toast.css` | `defineLtToast()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/frame/session-timeout/session-timeout.css` | `defineLtSessionTimeout()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.37.0/src/components/standalone/connection-status/connection-status.css` | `defineLtConnectionStatus()` from `https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.37.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.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` |
 
 None of them uses shadow DOM. The content is in plain DOM, so `querySelector`,
 `FormData` and ordinary CSS work straight into it.
@@ -299,7 +299,7 @@ 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.37.0/dist/lotek.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/lotek.css">
 
 <form id="contact-form" novalidate>
   <lt-field>
@@ -313,7 +313,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.37.0/dist/components/frame/field/lt-field.js"
+    "https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.39.0/dist/components/frame/field/lt-field.js"
 
   defineLtField()
 </script>