@lo-tek/interfaces 0.40.0 → 0.41.0

package/live-templates.xml

@@ -1,13 +1,13 @@
 <!-- Generated by interfaces/scripts/generate-vocabulary.ts. Do not edit. -->
 <templateSet group="LO-TEK">
-  <template name="lt-field" value="&lt;!-- novalidate: otherwise the browser stops an empty required field before&#10;     the submit event, and the error text below is never shown. --&gt;&#10;&lt;form id=&quot;$order_form$&quot; novalidate&gt;&#10;  &lt;lt-field&gt;&#10;    &lt;label class=&quot;lt-label&quot; for=&quot;$codename$&quot; data-required=&quot;symbol&quot;&gt;Codename&lt;/label&gt;&#10;    &lt;input class=&quot;lt-input&quot; id=&quot;$codename$&quot; type=&quot;text&quot; name=&quot;codename&quot; required /&gt;&#10;    &lt;p class=&quot;lt-error-text&quot; hidden&gt;Enter a codename.&lt;/p&gt;&#10;  &lt;/lt-field&gt;&#10;&#10;  &lt;button class=&quot;lt-button&quot; type=&quot;submit&quot;&gt;Order the job&lt;/button&gt;&#10;&lt;/form&gt;" description="Wires label, field, help text and error text together: sets `aria-describedby` and `aria-invalid` on the control and an id on the help text and the error text. Never writes an id on the control: the template writes `for` and `id`, or wraps the field in the label. The field is invalid when the error text is there without `hidden`. Exists for markup from code that cannot call a builder function. When it can, in TypeScript, Kotlin or Java, use `lt.field()` or `Lt.field()` instead." toReformat="false" toShortenFQNames="false">
+  <template name="lt-field" value="&lt;!-- novalidate: otherwise the browser stops an empty required field before&#10;     the submit event, and the error text below is never shown. --&gt;&#10;&lt;form id=&quot;$order_form$&quot; action=&quot;/jobs&quot; method=&quot;post&quot; novalidate&gt;&#10;  &lt;lt-field&gt;&#10;    &lt;label class=&quot;lt-label&quot; for=&quot;$codename$&quot; data-required=&quot;symbol&quot;&gt;Codename&lt;/label&gt;&#10;    &lt;input class=&quot;lt-input&quot; id=&quot;$codename$&quot; type=&quot;text&quot; name=&quot;codename&quot; required /&gt;&#10;    &lt;p class=&quot;lt-error-text&quot; hidden&gt;Enter a codename.&lt;/p&gt;&#10;  &lt;/lt-field&gt;&#10;&#10;  &lt;button class=&quot;lt-button&quot; type=&quot;submit&quot;&gt;Order the job&lt;/button&gt;&#10;&lt;/form&gt;" description="Wires label, field, help text and error text together: sets `aria-describedby` and `aria-invalid` on the control and an id on the help text and the error text. Never writes an id on the control: the template writes `for` and `id`, or wraps the field in the label. The field is invalid when the error text is there without `hidden`. Exists for markup from code that cannot call a builder function. When it can, in TypeScript, Kotlin or Java, use `lt.field()` or `Lt.field()` instead." toReformat="false" toShortenFQNames="false">
     <variable name="order_form" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="codename" expression="" defaultValue="" alwaysStopAt="true" />
     <context>
       <option name="HTML" value="true" />
     </context>
   </template>
-  <template name="lt-tabs" value="&lt;!-- The links point to the panels. The component writes the roles, the&#10;     selection and `hidden`. Without JavaScript this is a table of contents. --&gt;&#10;&lt;lt-tabs id=&quot;$claim_tabs$&quot;&gt;&#10;  &lt;ul class=&quot;lt-tabs__list&quot; aria-label=&quot;Parts of the claim&quot;&gt;&#10;    &lt;li&gt;&lt;a href=&quot;#$claim$&quot;&gt;Claim&lt;/a&gt;&lt;/li&gt;&#10;    &lt;li&gt;&lt;a href=&quot;#$attachments$&quot;&gt;Attachments&lt;/a&gt;&lt;/li&gt;&#10;  &lt;/ul&gt;&#10;  &lt;section class=&quot;lt-tabs__panel&quot; id=&quot;$claim$&quot;&gt;&#10;    &lt;h2&gt;Claim&lt;/h2&gt;&#10;    &lt;p&gt;Claim AV-2079-0481 was filed on 4 March 2079.&lt;/p&gt;&#10;  &lt;/section&gt;&#10;  &lt;section class=&quot;lt-tabs__panel&quot; id=&quot;$attachments$&quot;&gt;&#10;    &lt;h2&gt;Attachments&lt;/h2&gt;&#10;    &lt;p&gt;Three attachments have been uploaded.&lt;/p&gt;&#10;  &lt;/section&gt;&#10;&lt;/lt-tabs&gt;" description="Tab list. The tabs are links to the panels in an `.lt-tabs__list`, so without JavaScript the list is a table of contents; `role=&quot;tab&quot;` on anything other than a link is not a tab. The component adds keyboard and focus handling, sets roles and wiring, gives each panel its tab's name, makes only the selected panel a tab stop, and hides the rest with `hidden=&quot;until-found&quot;`, so find in page and links into a panel reach them. Each selection is written to the URL. It never writes an id on a tab or a panel. When the page loads, the selected tab is the one with `aria-selected` from the server, otherwise the one the URL points to, otherwise the first one not hidden with `hidden`. Under `server-controlled` the URL never selects." toReformat="false" toShortenFQNames="false">
+  <template name="lt-tabs" value="&lt;!-- The links point to the panels. The component writes the roles, the&#10;     selection and `hidden`. Without JavaScript this is a table of contents. --&gt;&#10;&lt;lt-tabs id=&quot;$claim_tabs$&quot;&gt;&#10;  &lt;ul class=&quot;lt-tabs__list&quot; aria-label=&quot;Parts of the claim&quot;&gt;&#10;    &lt;li&gt;&lt;a href=&quot;#$claim$&quot;&gt;Claim&lt;/a&gt;&lt;/li&gt;&#10;    &lt;li&gt;&lt;a href=&quot;#$attachments$&quot;&gt;Attachments&lt;/a&gt;&lt;/li&gt;&#10;  &lt;/ul&gt;&#10;  &lt;section class=&quot;lt-tabs__panel&quot; id=&quot;$claim$&quot;&gt;&#10;    &lt;h2&gt;Claim&lt;/h2&gt;&#10;    &lt;p&gt;Claim AV-2079-0481 was filed on 4 March 2079.&lt;/p&gt;&#10;  &lt;/section&gt;&#10;  &lt;section class=&quot;lt-tabs__panel&quot; id=&quot;$attachments$&quot;&gt;&#10;    &lt;h2&gt;Attachments&lt;/h2&gt;&#10;    &lt;p&gt;Three attachments have been received. The death certificate arrived on 6 March.&lt;/p&gt;&#10;  &lt;/section&gt;&#10;&lt;/lt-tabs&gt;" description="Tab list. The tabs are links to the panels in an `.lt-tabs__list`, so without JavaScript the list is a table of contents; `role=&quot;tab&quot;` on anything other than a link is not a tab. The component adds keyboard and focus handling, sets roles and wiring, gives each panel its tab's name, makes only the selected panel a tab stop, and hides the rest with `hidden=&quot;until-found&quot;`, so find in page and links into a panel reach them. Each selection is written to the URL. It never writes an id on a tab or a panel. When the page loads, the selected tab is the one with `aria-selected` from the server, otherwise the one the URL points to, otherwise the first one not hidden with `hidden`. Under `server-controlled` the URL never selects." toReformat="false" toShortenFQNames="false">
     <variable name="claim_tabs" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="claim" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="attachments" expression="" defaultValue="" alwaysStopAt="true" />
@@ -15,7 +15,7 @@
       <option name="HTML" value="true" />
     </context>
   </template>
-  <template name="lt-error-summary" value="&lt;form novalidate&gt;&#10;  &lt;!-- The component sets the class, role=&quot;alert&quot; and tabindex=&quot;-1&quot;; the id and aria-labelledby that name the box are the template's. --&gt;&#10;  &lt;lt-error-summary id=&quot;$errors$&quot; aria-labelledby=&quot;$errors_title$&quot; hidden&gt;&#10;    &lt;h2 id=&quot;$errors_title$&quot;&gt;&lt;/h2&gt;&#10;    &lt;ul class=&quot;lt-list&quot;&gt;&lt;/ul&gt;&#10;  &lt;/lt-error-summary&gt;&#10;&#10;  &lt;label class=&quot;lt-label&quot; for=&quot;$fixer$&quot;&gt;Fixer's address&lt;/label&gt;&#10;  &lt;input class=&quot;lt-input&quot; id=&quot;$fixer$&quot; type=&quot;email&quot; name=&quot;fixer&quot; /&gt;&#10;  &lt;button class=&quot;lt-button&quot;&gt;Order the job&lt;/button&gt;&#10;&lt;/form&gt;" description="Error summary. Moves focus to the box when it appears, and to the control when a link in the list is followed." toReformat="false" toShortenFQNames="false">
+  <template name="lt-error-summary" value="&lt;form action=&quot;/jobs&quot; method=&quot;post&quot; novalidate&gt;&#10;  &lt;!-- The component sets the class, role=&quot;alert&quot; and tabindex=&quot;-1&quot;; the id and aria-labelledby that name the box are the template's. --&gt;&#10;  &lt;lt-error-summary id=&quot;$errors$&quot; aria-labelledby=&quot;$errors_title$&quot; hidden&gt;&#10;    &lt;h2 id=&quot;$errors_title$&quot;&gt;&lt;/h2&gt;&#10;    &lt;ul class=&quot;lt-list&quot;&gt;&lt;/ul&gt;&#10;  &lt;/lt-error-summary&gt;&#10;&#10;  &lt;label class=&quot;lt-label&quot; for=&quot;$fixer$&quot;&gt;Fixer's address&lt;/label&gt;&#10;  &lt;input class=&quot;lt-input&quot; id=&quot;$fixer$&quot; type=&quot;email&quot; name=&quot;fixer&quot; /&gt;&#10;  &lt;button class=&quot;lt-button&quot;&gt;Order the job&lt;/button&gt;&#10;&lt;/form&gt;" description="Error summary. Moves focus to the box when it appears, and to the control when a link in the list is followed." toReformat="false" toShortenFQNames="false">
     <variable name="errors" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="errors_title" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="fixer" expression="" defaultValue="" alwaysStopAt="true" />
@@ -23,13 +23,19 @@
       <option name="HTML" value="true" />
     </context>
   </template>
-  <template name="lt-popover" value="&lt;!-- The component sets `popover` and `aria-controls`. You write the id on&#10;     the panel: that is what the button points to. --&gt;&#10;&lt;lt-popover id=&quot;$menu$&quot; placement=&quot;bottom-end&quot;&gt;&#10;  &lt;button class=&quot;lt-button&quot; data-variant=&quot;secondary&quot; type=&quot;button&quot;&gt;Actions&lt;/button&gt;&#10;&#10;  &lt;ul class=&quot;lt-popover&quot; id=&quot;$actions$&quot;&gt;&#10;    &lt;li&gt;&lt;button class=&quot;lt-button&quot; data-variant=&quot;ghost&quot; type=&quot;button&quot;&gt;Mark LDG-117 returned&lt;/button&gt;&lt;/li&gt;&#10;    &lt;li&gt;&lt;button class=&quot;lt-button&quot; data-variant=&quot;ghost&quot; type=&quot;button&quot;&gt;Charge the late fee&lt;/button&gt;&lt;/li&gt;&#10;  &lt;/ul&gt;&#10;&lt;/lt-popover&gt;" description="A panel that hangs from a button and closes itself. A button and a panel with the class `lt-popover` and an id from the template; the component sets `popover` and `aria-controls` where the markup came without them, but never the id." toReformat="false" toShortenFQNames="false">
+  <template name="lt-popover" value="&lt;!-- The component sets `popover` and `aria-controls`. You write the id on&#10;     the panel: that is what the button points to. --&gt;&#10;&lt;lt-popover id=&quot;$menu$&quot; placement=&quot;bottom-end&quot;&gt;&#10;  &lt;button class=&quot;lt-button&quot; data-variant=&quot;secondary&quot; type=&quot;button&quot;&gt;Actions&lt;/button&gt;&#10;&#10;  &lt;!-- Each action posts to the server, so the menu closes when the next&#10;       page arrives, and no script has to close it. --&gt;&#10;  &lt;ul class=&quot;lt-popover&quot; id=&quot;$actions$&quot;&gt;&#10;    &lt;li&gt;&#10;      &lt;form action=&quot;/loans/LDG-117/return&quot; method=&quot;post&quot;&gt;&#10;        &lt;button class=&quot;lt-button&quot; data-variant=&quot;ghost&quot;&gt;Mark LDG-117 returned&lt;/button&gt;&#10;      &lt;/form&gt;&#10;    &lt;/li&gt;&#10;    &lt;li&gt;&#10;      &lt;form action=&quot;/loans/LDG-117/late-fee&quot; method=&quot;post&quot;&gt;&#10;        &lt;button class=&quot;lt-button&quot; data-variant=&quot;ghost&quot;&gt;Charge the late fee&lt;/button&gt;&#10;      &lt;/form&gt;&#10;    &lt;/li&gt;&#10;  &lt;/ul&gt;&#10;&lt;/lt-popover&gt;" description="A panel that hangs from a button and closes itself. A button and a panel with the class `lt-popover` and an id from the template; the component sets `popover` and `aria-controls` where the markup came without them, but never the id." toReformat="false" toShortenFQNames="false">
     <variable name="menu" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="actions" expression="" defaultValue="" alwaysStopAt="true" />
     <context>
       <option name="HTML" value="true" />
     </context>
   </template>
+  <template name="lt-term" value="&lt;!-- The word links to the entry. The web component sets the class,&#10;     aria-details and aria-expanded on the link. --&gt;&#10;&lt;p&gt;&#10;  A claim is paid out unless the death was an&#10;  &lt;lt-term&gt;&lt;a href=&quot;#$term_act_of_god$&quot;&gt;act of God&lt;/a&gt;&lt;/lt-term&gt;.&#10;&lt;/p&gt;&#10;&#10;&lt;!-- The entry is a &lt;div&gt; in a &lt;dl&gt;, with the id the link points to. --&gt;&#10;&lt;h2&gt;Glossary&lt;/h2&gt;&#10;&lt;dl&gt;&#10;  &lt;div id=&quot;$term_act_of_god$&quot;&gt;&#10;    &lt;dt&gt;Act of God&lt;/dt&gt;&#10;    &lt;dd&gt;A cause of death the policy does not cover. The insurer can add to the list without notice.&lt;/dd&gt;&#10;  &lt;/div&gt;&#10;&lt;/dl&gt;" description="A word in the text that shows its glossary entry in a card by the word. A link to the entry's id is enough; the component sets the class, `aria-details` and `aria-expanded` on the link, and shows the entry itself in the top layer while the card is open. Without JavaScript the word is a link to the glossary." toReformat="false" toShortenFQNames="false">
+    <variable name="term_act_of_god" expression="" defaultValue="" alwaysStopAt="true" />
+    <context>
+      <option name="HTML" value="true" />
+    </context>
+  </template>
   <template name="lt-suggestion" value="&lt;!-- You write for and id, so the field has a name without JavaScript. The&#10;     component sets the roles and the wiring to the list. You write the&#10;     status element: that is where the number of matches is announced. --&gt;&#10;&lt;lt-suggestion id=&quot;$breaker_search$&quot;&gt;&#10;  &lt;label class=&quot;lt-label&quot; for=&quot;$breaker$&quot;&gt;Breaker&lt;/label&gt;&#10;  &lt;input class=&quot;lt-input&quot; id=&quot;$breaker$&quot; name=&quot;breaker&quot; type=&quot;text&quot;&gt;&#10;  &lt;ul class=&quot;lt-suggestion__list&quot;&gt;&#10;    &lt;li&gt;Crowbar&lt;/li&gt;&#10;    &lt;li&gt;Needle&lt;/li&gt;&#10;  &lt;/ul&gt;&#10;  &lt;p class=&quot;lt-suggestion__empty&quot;&gt;No matches&lt;/p&gt;&#10;  &lt;span class=&quot;lt-sr-only&quot; role=&quot;status&quot;&gt;&lt;/span&gt;&#10;&lt;/lt-suggestion&gt;" description="Field with a suggestion list. A `&lt;label for&gt;`, an `&lt;input id&gt;`, an `.lt-suggestion__list` with `&lt;li&gt;` items and a `[role=status]` are enough; the component sets the roles and the wiring where the markup came without them, and gives the list and the options ids. The field never gets an id from the component. Filters as the user types, moves the highlight with the arrow keys and announces the number of matches." toReformat="false" toShortenFQNames="false">
     <variable name="breaker_search" expression="" defaultValue="" alwaysStopAt="true" />
     <variable name="breaker" expression="" defaultValue="" alwaysStopAt="true" />
@@ -37,7 +43,7 @@
       <option name="HTML" value="true" />
     </context>
   </template>
-  <template name="lt-dialog" value="&lt;lt-dialog open&gt;&#10;  &lt;dialog class=&quot;lt-dialog&quot; open&gt;&#10;    &lt;h2&gt;The order is placed&lt;/h2&gt;&#10;    &lt;div class=&quot;lt-dialog__body&quot;&gt;&#10;      &lt;p&gt;Job 222-0481 is open to crews.&lt;/p&gt;&#10;    &lt;/div&gt;&#10;    &lt;form method=&quot;dialog&quot; class=&quot;lt-dialog__footer&quot;&gt;&#10;      &lt;button class=&quot;lt-button&quot; value=&quot;close&quot;&gt;Close&lt;/button&gt;&#10;    &lt;/form&gt;&#10;  &lt;/dialog&gt;&#10;&lt;/lt-dialog&gt;" description="Makes a `&lt;dialog class=&quot;lt-dialog&quot;&gt;` modal with `showModal()`, for servers that cannot call it themselves. The host around the dialog. Gives the dialog its name from the first heading outside `lt-dialog__body` when neither `aria-labelledby` nor `aria-label` is there." toReformat="false" toShortenFQNames="false">
+  <template name="lt-dialog" value="&lt;lt-dialog open&gt;&#10;  &lt;dialog class=&quot;lt-dialog&quot; open&gt;&#10;    &lt;h2&gt;The order is placed&lt;/h2&gt;&#10;    &lt;div class=&quot;lt-dialog__body&quot;&gt;&#10;      &lt;p&gt;Job 222-0481 is open to crews.&lt;/p&gt;&#10;    &lt;/div&gt;&#10;    &lt;form method=&quot;dialog&quot; class=&quot;lt-dialog__footer&quot;&gt;&#10;      &lt;button class=&quot;lt-button&quot; value=&quot;close&quot;&gt;Close&lt;/button&gt;&#10;    &lt;/form&gt;&#10;  &lt;/dialog&gt;&#10;&lt;/lt-dialog&gt;" description="Makes a `&lt;dialog class=&quot;lt-dialog&quot;&gt;` the server sends open a real modal, with `showModal()`. The host around the dialog. Gives the dialog its name from the first heading outside `lt-dialog__body` when neither `aria-labelledby` nor `aria-label` is there." toReformat="false" toShortenFQNames="false">
     <context>
       <option name="HTML" value="true" />
     </context>
@@ -49,7 +55,7 @@
       <option name="HTML" value="true" />
     </context>
   </template>
-  <template name="lt-session-timeout" value="&lt;lt-session-timeout class=&quot;lt-session-timeout&quot; warn-at=&quot;1500&quot; expires-at=&quot;1800&quot;&#10;                    data-ignore-morph&gt;&#10;  &lt;dialog class=&quot;lt-session-timeout__dialog&quot; role=&quot;alertdialog&quot; aria-labelledby=&quot;$session_title$&quot;&gt;&#10;    &lt;h2 class=&quot;lt-session-timeout__title&quot; id=&quot;$session_title$&quot;&gt;Your session is ending&lt;/h2&gt;&#10;    &lt;p class=&quot;lt-session-timeout__text&quot;&gt;&#10;      Your session on the Lattice ends in &lt;span class=&quot;lt-session-timeout__count&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;.&#10;      Unsaved routes will be lost.&#10;    &lt;/p&gt;&#10;    &lt;span class=&quot;lt-sr-only&quot; role=&quot;status&quot;&gt;&lt;/span&gt;&#10;    &lt;form method=&quot;dialog&quot; class=&quot;lt-session-timeout__actions&quot;&gt;&#10;      &lt;button class=&quot;lt-button&quot; value=&quot;extend&quot;&gt;Stay connected&lt;/button&gt;&#10;      &lt;button class=&quot;lt-button&quot; data-variant=&quot;secondary&quot; value=&quot;logout&quot;&gt;Log out&lt;/button&gt;&#10;    &lt;/form&gt;&#10;  &lt;/dialog&gt;&#10;&lt;/lt-session-timeout&gt;" description="Warns before a signed-in session expires, and counts down. The renderer writes the dialog and the text inside the element: a `&lt;dialog&gt;` with `.lt-session-timeout__count` for the number, `[role=status]` for the announcement and the buttons in a `&lt;form method=&quot;dialog&quot;&gt;`. Dispatches `session-warn` when the dialog opens, `session-extend` when the user wants to continue, `session-logout` when the user logs out, `session-expired` when time is up, and `session-activity` at most once per `activity-interval` while the user is active, so the app can keep the server session alive." toReformat="false" toShortenFQNames="false">
+  <template name="lt-session-timeout" value="&lt;lt-session-timeout class=&quot;lt-session-timeout&quot; warn-at=&quot;1500&quot; expires-at=&quot;1800&quot;&#10;                    data-ignore-morph&gt;&#10;  &lt;dialog class=&quot;lt-session-timeout__dialog&quot; role=&quot;alertdialog&quot; aria-labelledby=&quot;$session_title$&quot;&gt;&#10;    &lt;h2 class=&quot;lt-session-timeout__title&quot; id=&quot;$session_title$&quot;&gt;Your session is ending&lt;/h2&gt;&#10;    &lt;p class=&quot;lt-session-timeout__text&quot;&gt;&#10;      Your session on the Lattice ends in &lt;span class=&quot;lt-session-timeout__count&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;.&#10;      Unsaved routes will be lost.&#10;    &lt;/p&gt;&#10;    &lt;span class=&quot;lt-sr-only&quot; role=&quot;status&quot;&gt;&lt;/span&gt;&#10;    &lt;form method=&quot;dialog&quot; class=&quot;lt-session-timeout__actions&quot;&gt;&#10;      &lt;button class=&quot;lt-button&quot; value=&quot;extend&quot;&gt;Stay connected&lt;/button&gt;&#10;      &lt;button class=&quot;lt-button&quot; data-variant=&quot;secondary&quot; value=&quot;logout&quot; formmethod=&quot;post&quot; formaction=&quot;/log-out&quot;&gt;Log out&lt;/button&gt;&#10;    &lt;/form&gt;&#10;  &lt;/dialog&gt;&#10;&lt;/lt-session-timeout&gt;" description="Warns before a signed-in session expires, and counts down. The renderer writes the dialog and the text inside the element: a `&lt;dialog&gt;` with `.lt-session-timeout__count` for the number, `[role=status]` for the announcement and the buttons in a `&lt;form method=&quot;dialog&quot;&gt;`. Dispatches `session-warn` when the dialog opens, `session-extend` when the user wants to continue, `session-logout` when the user logs out with a button that closes the dialog, `session-expired` when time is up, and `session-activity` at most once per `activity-interval` while the user is active, so the app can keep the server session alive." toReformat="false" toShortenFQNames="false">
     <variable name="session_title" expression="" defaultValue="" alwaysStopAt="true" />
     <context>
       <option name="HTML" value="true" />

package/manifest/files.json

@@ -4,6 +4,7 @@
     "bundles",
     "datastar",
     "html",
+    "kotlin",
     "react",
     "templates"
   ],
@@ -240,6 +241,14 @@
         "sr-only.ts"
       ]
     },
+    {
+      "category": "css",
+      "name": "steps",
+      "files": [
+        "steps.css",
+        "steps.ts"
+      ]
+    },
     {
       "category": "css",
       "name": "switch",
@@ -351,6 +360,15 @@
         "tabs.ts"
       ]
     },
+    {
+      "category": "frame",
+      "name": "term",
+      "files": [
+        "lt-term.ts",
+        "term.css",
+        "term.ts"
+      ]
+    },
     {
       "category": "standalone",
       "name": "connection-status",

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "schemaVersion": 1,
-  "version": "0.40.0",
+  "version": "0.41.0",
   "textLanguage": "en",
   "elements": {
     "lt-field": {
@@ -186,6 +186,19 @@
         }
       }
     },
+    "lt-term": {
+      "link": "https://lo-tek.sobernetics.no/components/term/",
+      "description": "A word in the text that shows its glossary entry in a card by the word. A link to the entry's id is enough; the component sets the class, `aria-details` and `aria-expanded` on the link, and shows the entry itself in the top layer while the card is open. Without JavaScript the word is a link to the glossary.",
+      "attributes": {},
+      "parts": {
+        "word": {
+          "selector": "a[href^='#']",
+          "description": "The word: a link to the glossary entry, such as `<a href=\"#term-signal\">`. The entry is a `<div>` with that id in a `<dl>`, with a `<dt>` and a `<dd>`, anywhere on the page.",
+          "content": "text",
+          "unique": true
+        }
+      }
+    },
     "lt-suggestion": {
       "link": "https://lo-tek.sobernetics.no/components/suggestion/",
       "description": "Field with a suggestion list. A `<label for>`, an `<input id>`, an `.lt-suggestion__list` with `<li>` items and a `[role=status]` are enough; the component sets the roles and the wiring where the markup came without them, and gives the list and the options ids. The field never gets an id from the component. Filters as the user types, moves the highlight with the arrow keys and announces the number of matches.",
@@ -312,7 +325,7 @@
     },
     "lt-dialog": {
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
-      "description": "Makes a `<dialog class=\"lt-dialog\">` modal with `showModal()`, for servers that cannot call it themselves. The host around the dialog. Gives the dialog its name from the first heading outside `lt-dialog__body` when neither `aria-labelledby` nor `aria-label` is there.",
+      "description": "Makes a `<dialog class=\"lt-dialog\">` the server sends open a real modal, with `showModal()`. The host around the dialog. Gives the dialog its name from the first heading outside `lt-dialog__body` when neither `aria-labelledby` nor `aria-label` is there.",
       "attributes": {
         "open": {
           "type": "flag",
@@ -395,7 +408,7 @@
     },
     "lt-session-timeout": {
       "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
-      "description": "Warns before a signed-in session expires, and counts down. The renderer writes the dialog and the text inside the element: a `<dialog>` with `.lt-session-timeout__count` for the number, `[role=status]` for the announcement and the buttons in a `<form method=\"dialog\">`. Dispatches `session-warn` when the dialog opens, `session-extend` when the user wants to continue, `session-logout` when the user logs out, `session-expired` when time is up, and `session-activity` at most once per `activity-interval` while the user is active, so the app can keep the server session alive.",
+      "description": "Warns before a signed-in session expires, and counts down. The renderer writes the dialog and the text inside the element: a `<dialog>` with `.lt-session-timeout__count` for the number, `[role=status]` for the announcement and the buttons in a `<form method=\"dialog\">`. Dispatches `session-warn` when the dialog opens, `session-extend` when the user wants to continue, `session-logout` when the user logs out with a button that closes the dialog, `session-expired` when time is up, and `session-activity` at most once per `activity-interval` while the user is active, so the app can keep the server session alive.",
       "attributes": {
         "warn-at": {
           "type": "number",
@@ -1275,6 +1288,31 @@
       "content": "text",
       "attributes": {}
     },
+    "lt-steps": {
+      "component": "steps",
+      "title": "Steps",
+      "description": "A step indicator that shows where the user is in a task over several pages. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/steps/",
+      "content": "parts",
+      "parts": {
+        "step": {
+          "selector": "li",
+          "description": "One step, with its name as text, or a link back to it. The step the user is on has `aria-current=\"step\"`, and the steps before it are drawn as done.",
+          "content": "free",
+          "multiple": true
+        }
+      },
+      "texts": [
+        {
+          "variable": "--lt-steps-done-text",
+          "text": "Completed ",
+          "attribute": "aria-current",
+          "value": "step",
+          "siblingsBefore": true
+        }
+      ],
+      "attributes": {}
+    },
     "lt-switch": {
       "component": "switch",
       "title": "Switch",
@@ -1483,7 +1521,7 @@
     "lt-dialog": {
       "component": "dialog",
       "title": "Dialog",
-      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for when the server decides that the dialog is open.",
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
       "content": "free",
       "parts": {
@@ -1535,7 +1573,7 @@
     "lt-dialog__body": {
       "component": "dialog",
       "title": "Dialog",
-      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for when the server decides that the dialog is open.",
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
       "content": "free",
       "partOf": "lt-dialog",
@@ -1544,7 +1582,7 @@
     "lt-dialog__title": {
       "component": "dialog",
       "title": "Dialog",
-      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for when the server decides that the dialog is open.",
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
       "content": "text",
       "partOf": "lt-dialog",
@@ -1553,7 +1591,7 @@
     "lt-dialog__footer": {
       "component": "dialog",
       "title": "Dialog",
-      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for when the server decides that the dialog is open.",
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
       "content": "free",
       "partOf": "lt-dialog",
@@ -1562,7 +1600,7 @@
     "lt-dialog__header": {
       "component": "dialog",
       "title": "Dialog",
-      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for when the server decides that the dialog is open.",
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
       "content": "parts",
       "partOf": "lt-dialog",
@@ -1584,7 +1622,7 @@
     "lt-dialog__subtitle": {
       "component": "dialog",
       "title": "Dialog",
-      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+      "description": "Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for when the server decides that the dialog is open.",
       "link": "https://lo-tek.sobernetics.no/components/dialog/",
       "content": "text",
       "partOf": "lt-dialog",
@@ -1827,6 +1865,35 @@
       "content": "free",
       "attributes": {}
     },
+    "lt-term": {
+      "component": "term",
+      "title": "Term",
+      "description": "A word in the text that shows its entry from a glossary on the same page, in a card by the word. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/term/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-term__entry": {
+      "component": "term",
+      "title": "Term",
+      "description": "A word in the text that shows its entry from a glossary on the same page, in a card by the word. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/term/",
+      "content": "parts",
+      "parts": {
+        "term": {
+          "selector": "dt",
+          "description": "The term, as it stands in the glossary.",
+          "content": "text",
+          "unique": true
+        },
+        "description": {
+          "selector": "dd",
+          "description": "The explanation. It can hold links and code.",
+          "content": "free"
+        }
+      },
+      "attributes": {}
+    },
     "lt-connection-status": {
       "component": "connection-status",
       "title": "Connection Status",
@@ -2740,7 +2807,7 @@
     {
       "name": "field",
       "description": "Connects the label, field, help text and error text.\n\nThe same calculation `<lt-field>` does in the browser, but as data, for the code that renders the markup. Then no web component is needed.",
-      "example": "const field = lt.field({ id: \"fixer\", required: \"text\", help: true, error: true, invalid })\n\n<label {...field.label}>Fixer's address</label>\n<input {...lt.input({ type: \"email\", state: field.state })} {...field.control} />\n<p {...lt.helpText()} {...field.help}>The board writes to the fixer, never to the crew.</p>\n<p {...lt.errorText()} {...field.error}>Enter a valid address.</p>",
+      "example": "const field = lt.field({ id: \"fixer\", required: \"text\", help: true, error: true, invalid })\n\n<label {...field.label}>Fixer's address</label>\n<input {...lt.input({ type: \"email\", state: field.state })} {...field.control} />\n<p {...lt.helpText()} {...field.help}>The board writes to the fixer, never to the crew.</p>\n<p {...lt.errorText()} {...field.error}>Enter the fixer's address, for example fixer@relay.example.</p>",
       "options": [
         {
           "name": "id",
@@ -4396,6 +4463,25 @@
       },
       "docs": "https://lo-tek.sobernetics.no/components/sr-only/"
     },
+    {
+      "name": "steps",
+      "description": "The attributes for a step indicator, which shows where the user is in a task over several pages, like an order.\n\nThe class goes on an `<ol>` with one `<li>` per step, and the step the user is on has `aria-current=\"step\"`. The steps before it are drawn as done, with a check the screen reader reads as \"Completed\", so the markup only says where the user is. A done step can be a link back to it.",
+      "example": "<ol {...steps()} aria-label=\"Order\">\n  <li><a href=\"/order/site\">Site</a></li>\n  <li aria-current=\"step\">Walls</li>\n  <li>Payment</li>\n</ol>",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-steps"
+          },
+          "options": {}
+        }
+      },
+      "docs": "https://lo-tek.sobernetics.no/components/steps/"
+    },
     {
       "name": "suggestion",
       "description": "The attributes for a field with a suggestion list.\n\nThe server writes both the field and the list. The web component filters, handles the arrow keys and keeps `aria-activedescendant` in sync. It renders nothing: it used to create the whole field itself, and then there was nothing to fill in before the script had run.\n\nNo preserve list. The attributes that change while the user types are set by the web component, and it sets them back when a patch strips them. If something else has already filtered, set `prefiltered` on `<lt-suggestion>`, and the web component leaves both the options and the empty message alone. If the server should also decide whether the list is expanded and which option is highlighted, set `server-controlled` as well.",
@@ -4890,6 +4976,39 @@
       },
       "docs": "https://lo-tek.sobernetics.no/components/tag/"
     },
+    {
+      "name": "term",
+      "description": "The attributes for a word in the text that is explained in a glossary on the same page.\n\nOnly what holds without JavaScript: the word is a link to the entry, and `aria-details` says the entry explains it. `<lt-term>` around the link opens the entry as a card by the word, and writes `aria-expanded`.",
+      "example": "const signal = lt.term({ id: \"term-signal\" })\n\n<p>Datastar keeps <lt-term><a {...signal.word}>signals</a></lt-term> in the browser.</p>\n<dl>\n  <div {...signal.entry}><dt>Signal</dt><dd>A value Datastar keeps in the browser.</dd></div>\n</dl>",
+      "options": [
+        {
+          "name": "id",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "Id of the entry in the glossary: the `<div>` around the `<dt>` and `<dd>`. The word links to it, and the web component shows the entry itself as the card. Make it from the term, such as `term-signal`, so it is the same on every render."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "word": {
+            "kind": "attributes"
+          },
+          "entry": {
+            "kind": "attributes"
+          }
+        }
+      },
+      "docs": "https://lo-tek.sobernetics.no/components/term/",
+      "parts": {
+        "word": {
+          "element": "lt-term",
+          "part": "word"
+        }
+      }
+    },
     {
       "name": "textarea",
       "description": "The attributes for a multi-line text field.",
@@ -5369,6 +5488,11 @@
         "--lt-spinner-size": "var(--lt-spacing-6)",
         "--lt-spinner-thickness": "2px"
       },
+      "steps": {
+        "--lt-steps-marker-size": "var(--lt-spacing-7)",
+        "--lt-steps-done-icon": "var(--lt-icon-check)",
+        "--lt-steps-done-text": "\"Completed \""
+      },
       "suggestion": {
         "--lt-suggestion-max-height": "calc(var(--lt-spacing-10) * 4)",
         "--lt-suggestion-radius": "var(--lt-spacing-1)",
@@ -5390,6 +5514,17 @@
         "--lt-tag-padding": "var(--lt-spacing-0-5) var(--lt-spacing-2)",
         "--lt-tag-radius": "var(--lt-spacing-1)"
       },
+      "term": {
+        "--lt-term-underline-color": "var(--lt-color-accent-fill)",
+        "--lt-term-gap": "var(--lt-spacing-2)",
+        "--lt-term-width": "min(22rem, calc(100vw - var(--lt-spacing-8)))",
+        "--lt-term-padding": "var(--lt-spacing-3) var(--lt-spacing-4)",
+        "--lt-term-accent-color": "var(--lt-color-accent-fill)",
+        "--lt-term-radius": "var(--lt-spacing-1)",
+        "--lt-term-sheet-height": "60dvh",
+        "--lt-term-label-text": "\"Glossary\"",
+        "--lt-term-label-font": "inherit"
+      },
       "textarea": {
         "--lt-textarea-min-height": "calc(var(--lt-spacing-4) * 5)",
         "--lt-textarea-padding": "var(--lt-spacing-2) var(--lt-spacing-3)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-tek/interfaces",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "Framework-agnostic design system: tokens, CSS components and web components.",
   "license": "MIT",
   "author": "August Søberg-Klyver",
@@ -63,6 +63,7 @@
     "./card.css": "./src/components/css/card/card.css",
     "./divider.css": "./src/components/css/divider/divider.css",
     "./progress.css": "./src/components/css/progress/progress.css",
+    "./steps.css": "./src/components/css/steps/steps.css",
     "./spinner.css": "./src/components/css/spinner/spinner.css",
     "./badge.css": "./src/components/css/badge/badge.css",
     "./label.css": "./src/components/css/label/label.css",
@@ -74,6 +75,7 @@
     "./error-text.css": "./src/components/css/error-text/error-text.css",
     "./field.css": "./src/components/frame/field/field.css",
     "./tabs.css": "./src/components/frame/tabs/tabs.css",
+    "./term.css": "./src/components/frame/term/term.css",
     "./error-summary.css": "./src/components/frame/error-summary/error-summary.css",
     "./label": {
       "types": "./dist/components/css/label/label.d.ts",
@@ -160,6 +162,10 @@
       "types": "./dist/components/css/file-upload/file-upload.d.ts",
       "import": "./dist/components/css/file-upload/file-upload.js"
     },
+    "./term": {
+      "types": "./dist/components/frame/term/lt-term.d.ts",
+      "import": "./dist/components/frame/term/lt-term.js"
+    },
     "./popover": {
       "types": "./dist/components/frame/popover/lt-popover.d.ts",
       "import": "./dist/components/frame/popover/lt-popover.js"
@@ -204,6 +210,10 @@
       "types": "./dist/components/css/progress/progress.d.ts",
       "import": "./dist/components/css/progress/progress.js"
     },
+    "./steps": {
+      "types": "./dist/components/css/steps/steps.d.ts",
+      "import": "./dist/components/css/steps/steps.js"
+    },
     "./spinner": {
       "types": "./dist/components/css/spinner/spinner.d.ts",
       "import": "./dist/components/css/spinner/spinner.js"
@@ -394,15 +404,15 @@
     "@types/node": "24.12.4",
     "@types/react": "19",
     "@types/react-dom": "19",
-    "@vitest/browser": "4.1.7",
-    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/browser": "4.1.12",
+    "@vitest/browser-playwright": "^4.1.12",
     "axe-core": "^4.13.0",
     "playwright": "1.60.0",
     "publint": "^0.3.24",
     "react": "19",
     "react-dom": "19",
     "tailwindcss": "4.3.0",
-    "vite": "7.0.0",
-    "vitest": "4.1.7"
+    "vite": "7.3.7",
+    "vitest": "4.1.12"
   }
 }