@lo-tek/interfaces 0.39.0 → 0.41.0

package/CHANGELOG.md

@@ -24,6 +24,184 @@ including 0.36.0 were written in Norwegian, and list them under "Brytende".
 
 ## Unreleased
 
+## 0.41.0 (2026-11-05)
+
+### Added
+
+- **A rulebook for coding agents on a Kotlin or Java server, `agent/kotlin.md`.**
+  It covers `Lt` with a table of every enum and its constants, kotlinx.html
+  and strings, the WebJar and `LotekWebJar`, ids from a key in the data,
+  `assertLotek` in tests, the Gradle plugin and `lotek.jar`. `llms.txt`
+  names Kotlin and the check without Node.
+- **`<lt-term>` and `lt.term()`: a word in the text that shows its entry
+  from a glossary on the same page.** The word is a link to the entry, a
+  `<div>` with a `<dt>` and a `<dd>` in a `<dl>`, and stays one without
+  JavaScript. The web component shows the entry itself as a card by the
+  word, in the top layer: the mouse opens it after a rest, a click, a tap or
+  Enter pins it, and Escape, a click outside or the word scrolling out of
+  view closes it. Below the `sm` breakpoint the card is a sheet across the
+  bottom of the window, or the top when the word is down there. Nothing is
+  copied and no id is made in the browser, so the card survives an update
+  from the server. `lt.term({ id })` writes `href` and `aria-details` on the
+  link, the classes `lt-term` and `lt-term__entry`, and the id; `/react`
+  adds `aria-expanded="false"`. `Lt.term()` in Kotlin, and `ltTerm` and
+  `ltTermEntry` in kotlinx.html. New entry points `./term` and
+  `./term.css`, new component variables `--lt-term-width`,
+  `--lt-term-gap`, `--lt-term-padding`, `--lt-term-radius`,
+  `--lt-term-accent-color`, `--lt-term-underline-color`,
+  `--lt-term-label-text`, `--lt-term-label-font` and
+  `--lt-term-sheet-height`, and the default text "Glossary".
+- **`lt-steps` and `lt.steps()`: a step indicator for a task over several
+  pages.** The class goes on an `<ol>` with one `<li>` per step, and
+  `aria-current="step"` on the step the user is on. The steps before it are
+  drawn as done, with a check the screen reader reads as "Completed", as part
+  of the step's link when it has one. Below `28rem` of the list's own width
+  the steps stand in a column. `Lt.steps()` in Kotlin. New entry points
+  `./steps` and `./steps.css`, new component variables
+  `--lt-steps-marker-size`, `--lt-steps-done-icon` and
+  `--lt-steps-done-text`, and the default text
+  "Completed ".
+- **The check reports `untranslated-text` for the step indicator's
+  "Completed "** on a page in another language, as for the other texts in
+  the stylesheets. In the manifest's `texts` on a class,
+  `siblingsBefore: true` is a text shown on the children before the one with
+  the attribute, and the Kotlin `CssText` has `siblingsBefore`. The term's
+  "Glossary" is not checked, since the card shows it only while it is open.
+- **The check reports `term-without-entry`** on a whole page, when a word
+  in `<lt-term>` points at an id the page does not have, or at something
+  that is not a glossary entry.
+- **`place()` in `@lo-tek/interfaces/host-element`**, the placement
+  `<lt-popover>` worked out, now shared with `<lt-term>`.
+
+### Changed
+
+- **`lotek agent` gives the Kotlin rulebook in a folder with
+  `build.gradle.kts`, `build.gradle`, `settings.gradle.kts`,
+  `settings.gradle` or `pom.xml`,** unless `package.json` names a framework
+  other than Vite. Such a folder used to get `templates`, or `bundles` when it
+  also had a `package.json`. `--framework=templates` and
+  `--framework=bundles` still give those.
+
+### Fixed
+
+- **The snippets and the live templates follow the corrected recipes.** In
+  the HTML snippets and live templates the error summary and the field post
+  to the server, the popover's actions are forms that post, and the session
+  timeout logs out with a post. In the Kotlin live templates the error
+  summary has no script, and it and the field take what was typed; the
+  popover, the tabs and the suggestion have no script; the dialog's Cancel
+  and the session timeout's Log out post to the server; and the toast tells
+  a refused restart from one that got no answer, and a redirect from a
+  restart. The switch saves only an answer that is not a redirect, and
+  stands in a `<form autocomplete="off">`, since HTML does not allow the
+  attribute on a checkbox. The Kotlin live template for the error summary
+  inserted the browser validation from the HTML recipe, which a Kotlin
+  server does itself.
+- **The editor descriptions of `session-logout` and `<lt-dialog>`.**
+  `session-logout` comes only from a Log out button that closes the dialog;
+  one with `formmethod="post"` submits instead. `<lt-dialog>` makes a dialog
+  the server sends open a real modal.
+
+## 0.40.0 (2026-11-03)
+
+### Breaking
+
+- **`lt.spinner()` without `label` writes `aria-hidden="true"`,** as
+  `lt.icon()` without a label does. The page told you to write it yourself,
+  so the HTML tab had it and the TypeScript tab had it by hand. A spinner
+  named by hand, `lt.spinner()` with `role="status"` and `aria-label` written
+  next to it, is now hidden from screen readers: pass the name as `label`,
+  which gives the role and the name and no `aria-hidden`.
+- **In Kotlin every builder function is a member of `Lt`.** `field`,
+  `suggestion`, `tabs`, `errorSummary`, `label` and `legend` were extension
+  functions on `Lt` in `Handwritten.kt`. A call such as `Lt.field(…)` reads
+  the same, but `import no.lotek.field` no longer compiles and has to go,
+  and code compiled against the old version calls a method that is gone, so
+  it must be compiled again.
+
+### Added
+
+- **Each builder function in the manifest has `description`, `example` and
+  `docs`, and an option with a closed list has `default`.** The description
+  is the comment on the function in TypeScript without the code examples,
+  the example is those examples, and `docs` is the component page. The
+  default is read from the answers: the value that gives the same answer as
+  leaving the option out, and the build stops when the comment on the
+  option names another one. A builder function with several sets has
+  `parts`, which says which part of a web component each set fills:
+  `field.control` fills `control` in `lt-field`, with its selector there.
+  All are optional, so `schemaVersion` is still 1, and a manifest from
+  before reads as before.
+- **The Kotlin API has the documentation from the manifest.** Every member
+  of `Lt` has the description, an example call, a link to the component
+  page and an `@param` per option with the default as the Kotlin constant,
+  in the sources jar, so IntelliJ shows it in Quick Documentation.
+- **The builder functions can be called from Java.** They are `@JvmStatic`
+  and `@JvmOverloads`, with the required options first, `ButtonVariant.of(…)`
+  and the other lookups are static, and `Lt.card.title` is a field:
+  `Lt.field("fixer")` rather than `HandwrittenKt.field(Lt.INSTANCE, "fixer",
+  null, …)`. In Kotlin the options are passed by name as before, but
+  `Lt.suggestion` called with its options in order now has `id` first.
+  `JavaCallTest` compiles the calls in Java.
+- **`lo-tek-kotlinx-html` has one function per web component**, such as
+  `ltField { … }` and `ltTabs { … }`, since kotlinx.html knows only the
+  elements in HTML.
+- **`live-templates-kotlin.xml`, live templates for Kotlin in IntelliJ,**
+  one per web component, generated from the kotlinx.html tab on its page.
+  The ids are empty variables, as in `live-templates.xml`.
+- **Every component page has a kotlinx.html tab,** for a Kotlin or Java
+  server with `lo-tek-kotlinx-html`. `RecipesTest` compiles each, renders it,
+  and requires the elements, the texts, the classes and the attributes of
+  the page's HTML recipe, with `lotek check` on the result.
+
+### Changed
+
+- **The snippets and the live templates leave the ids empty.** They filled
+  in the id from the recipe, such as `codename`, and a snippet pasted twice
+  on a page, or in a loop, then gave two fields with the same id, which a
+  morph matches wrongly. The id is still one tab stop, mirrored in `for`
+  and `href`.
+- **The documentation says "with a builder function" where it said "with
+  JavaScript".** A Kotlin or Java server renders without JavaScript and calls
+  `Lt.field()` all the same, so the line between `lt.field()` and
+  `<lt-field>` is whether the code that renders can call a builder function.
+  The description of `<lt-field>` in the vocabulary, which the editors show,
+  says the same.
+- **The documentation of every id option says to make it from a key in the
+  data**, never from the loop index or a counter, so it is unique on the
+  page and the same on every render. The message when `Lt.field` and the
+  others get an empty id in Kotlin says the same; it used to suggest "the
+  field's name or another fixed id", which in a loop is the duplicate.
+- **The examples come from the world LO-TEK belongs to, not from a housing
+  benefit application.** Every recipe, demo, snippet, live template and
+  rulebook now shows a system LO-TEK delivered to a client: the job
+  console on floor 222, the operations console of Meridian Lattice, a claim
+  at Aster & Vale, and others. Each component page shows one client, and the
+  pages on accessibility stay neutral. The markup, the classes and the
+  attributes are the same as before; only the text, the ids and the values
+  in the examples have changed. The warning `<lt-tabs>` gives for a tab list
+  without a name suggests `aria-label="Parts of the claim"`.
+
+### Fixed
+
+- **The recipe for the connection status reports a server that stopped
+  answering.** Its script declared `saveRoute` inside a module, where no
+  other code on the page could call it, and called the methods without
+  waiting for the registration. It now puts `saveRoute` on `window`, where
+  the app's other scripts call it, as a comment there shows. It sends the
+  request first, counts a request without an answer and a gateway's 502, 503
+  or 504 as a lost connection and any other answer as the server being
+  there. It reports with `reportSuccess` and `reportFailure`, which wait for
+  the registration, and returns the answer without awaiting them. The React
+  tab and the example under "`navigator.onLine` is not enough" follow the
+  same rule.
+
+- **A date or time field fits its container in iOS Safari.** With the
+  native appearance, `.lt-input` with `data-variant` `date`, `time` or
+  `datetime-local` stood wider than the form around it. In iOS Safari
+  these fields now have `appearance: none`, and the value starts at the
+  start of the field.
+
 ## 0.39.0 (2026-11-01)
 
 ### Added

package/README.md

@@ -36,7 +36,7 @@ Without a build step you link the combined file, which has everything in it:
 The markup is the same whichever of the two you chose:
 
 ```html
-<button class="lt-button">Submit application</button>
+<button class="lt-button">Order the job</button>
 <button class="lt-button" data-variant="secondary">Save draft</button>
 ```
 

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

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.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.
 
@@ -63,7 +63,7 @@ page does not use.
 
 ## 2. What exists
 
-35 CSS components and 9 web components, and this is the whole list. The
+36 CSS components and 10 web components, and this is the whole list. The
 classes are `lt-` + kebab-case. Variants are always `data-*` attributes, never
 classes of their own: `data-variant="secondary"`, not `lt-button--secondary`.
 The default variant has no attribute.
@@ -101,6 +101,7 @@ The default variant has no attribute.
 | `lt-skip-link` | `@lo-tek/interfaces/skip-link.css` | none |
 | `lt-spinner` | `@lo-tek/interfaces/spinner.css` | `data-size`: small, large |
 | `lt-sr-only` | `@lo-tek/interfaces/sr-only.css` | none |
+| `lt-steps` | `@lo-tek/interfaces/steps.css` | none |
 | `lt-switch`<br>`lt-switch-row` | `@lo-tek/interfaces/switch.css` | none |
 | `lt-table`<br>`lt-table__sort`<br>`lt-table-scroll` | `@lo-tek/interfaces/table.css` | `data-variant`: striped<br>`data-hoverable` (flag) |
 | `lt-tag` | `@lo-tek/interfaces/tag.css` | `data-variant`: filled<br>`data-selectable` (flag) |
@@ -283,6 +284,7 @@ Three rules apply to all of them:
 | `<lt-tabs>` | frame | `@lo-tek/interfaces/tabs.css` | `defineLtTabs()` from `@lo-tek/interfaces/tabs` | `server-controlled` (flag)<br>`activation`: manual, automatic | `tab-select` (index) | `lt-tabs__list`<br>`lt-tabs__panel` |
 | `<lt-error-summary>` | frame | `@lo-tek/interfaces/error-summary.css` | `defineLtErrorSummary()` from `@lo-tek/interfaces/error-summary` | `data-autofocus`: false, true<br>`hidden` (flag) | none | `lt-error-summary`<br>`lt-error-summary__title` |
 | `<lt-popover>` | frame | `@lo-tek/interfaces/popover.css` | `defineLtPopover()` from `@lo-tek/interfaces/popover` | `open` (flag)<br>`placement`: bottom-start, bottom-end, top-start, top-end<br>`server-controlled` (flag) | `popover-toggle` (open) | `lt-popover` |
+| `<lt-term>` | frame | `@lo-tek/interfaces/term.css` | `defineLtTerm()` from `@lo-tek/interfaces/term` | none | none | `lt-term`<br>`lt-term__entry` |
 | `<lt-suggestion>` | frame | `@lo-tek/interfaces/suggestion.css` | `defineLtSuggestion()` from `@lo-tek/interfaces/suggestion` | `prefiltered` (flag)<br>`count-none` (text)<br>`count-zero` (text)<br>`count-one` (text)<br>`count-two` (text)<br>`count-few` (text)<br>`count-many` (text)<br>`count-other` (text)<br>`server-controlled` (flag) | `suggestion-select` (value, label) | `lt-suggestion__list`<br>`lt-suggestion__option`<br>`lt-suggestion__value`<br>`lt-suggestion__empty` |
 | `<lt-dialog>` | frame | `@lo-tek/interfaces/dialog.css` | `defineLtDialog()` from `@lo-tek/interfaces/dialog` | `open` (flag)<br>`server-controlled` (flag) | `dialog-toggle` (open, returnValue) | `lt-dialog` (`data-color`: brand, info, success, warning, danger)<br>`lt-dialog__body`<br>`lt-dialog__title`<br>`lt-dialog__footer`<br>`lt-dialog__header`<br>`lt-dialog__subtitle` |
 | `<lt-toast>` | standalone | `@lo-tek/interfaces/toast.css` | `defineLtToast()` from `@lo-tek/interfaces/toast` | `duration` (number)<br>`label` (text)<br>`close-label` (text) | `toast-dismiss` | `lt-toast`<br>`lt-toast__message`<br>`lt-toast__close` |
@@ -314,12 +316,12 @@ The markup is ordinary HTML, in whatever template your framework uses:
 
 ```html
 <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>
 ```
 
 `class` and `for`, not `className` and `htmlFor`. It is React that rewrites
@@ -327,9 +329,8 @@ the attribute names, and that does not apply here.
 
 ## 6. Typed builder functions
 
-If the project has TypeScript, the classes can come from `lt` instead of being
-written as strings. A variant that does not exist then becomes a compile
-error:
+The classes can come from `lt` instead of being written as strings. With
+TypeScript, a variant that does not exist then becomes a compile error:
 
 ```ts
 import { lt } from "@lo-tek/interfaces"
@@ -340,7 +341,7 @@ lt.button({ variant: "secondary" })
 
 The builder functions return an object with HTML attribute names, which is
 spread in where the template language supports spreading, or read out field by
-field. The 46 builder functions:
+field. The 48 builder functions:
 
 `lt.accordion()`, `lt.alert()`, `lt.avatar()`, `lt.badge()`,
 `lt.breadcrumbs()`, `lt.button()`, `lt.card()`, `lt.checkbox()`,
@@ -350,16 +351,16 @@ field. The 46 builder functions:
 `lt.legend()`, `lt.link()`, `lt.list()`, `lt.pagination()`, `lt.paragraph()`,
 `lt.popover()`, `lt.progress()`, `lt.radio()`, `lt.search()`, `lt.select()`,
 `lt.sessionTimeout()`, `lt.skeleton()`, `lt.skipLink()`, `lt.spinner()`,
-`lt.srOnly()`, `lt.suggestion()`, `lt.switch()`, `lt.table()`,
-`lt.tableSort()`, `lt.tabs()`, `lt.tag()`, `lt.textarea()`, `lt.toast()`,
-`lt.toggleGroup()`, `lt.tooltip()`
+`lt.srOnly()`, `lt.steps()`, `lt.suggestion()`, `lt.switch()`, `lt.table()`,
+`lt.tableSort()`, `lt.tabs()`, `lt.tag()`, `lt.term()`, `lt.textarea()`,
+`lt.toast()`, `lt.toggleGroup()`, `lt.tooltip()`
 
 Where the template language cannot spread an object, `lt.setAttributes()` sets
 the attributes on an element in plain DOM:
 
 ```ts
-const field = document.querySelector<HTMLInputElement>("#email")
-const wiring = lt.field({ id: "email", error: true, invalid: true })
+const field = document.querySelector<HTMLInputElement>("#fixer")
+const wiring = lt.field({ id: "fixer", error: true, invalid: true })
 
 lt.setAttributes(field, lt.input({ type: "email" }), wiring.control)
 ```
@@ -368,7 +369,8 @@ Call it again to change state. Three rules:
 
 - **When the builder function has an option for an attribute, a call without
   the option removes the attribute.** So pass the options again every time.
-  `lt.spinner()` without `label` removes `role` and `aria-label`.
+  `lt.spinner()` without `label` removes `role` and `aria-label`, and writes
+  `aria-hidden`.
 - **What the builder function has no option for stays.** `lt.button()` does
   not touch `disabled` or `type`. `id` and `for` are never removed.
 - **Two sets on the same element are passed separately**, as above. If they