@lo-tek/interfaces 0.39.0 → 0.41.0

package/live-templates.xml

@@ -1,56 +1,62 @@
 <!-- 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;$contact_form$&quot; novalidate&gt;&#10;  &lt;lt-field&gt;&#10;    &lt;label class=&quot;lt-label&quot; for=&quot;$name$&quot; data-required=&quot;symbol&quot;&gt;Full name&lt;/label&gt;&#10;    &lt;input class=&quot;lt-input&quot; id=&quot;$name$&quot; type=&quot;text&quot; name=&quot;name&quot; required /&gt;&#10;    &lt;p class=&quot;lt-error-text&quot; hidden&gt;Enter your name.&lt;/p&gt;&#10;  &lt;/lt-field&gt;&#10;&#10;  &lt;button class=&quot;lt-button&quot; type=&quot;submit&quot;&gt;Send&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 produced without JavaScript. When the markup is produced with JavaScript, use `lt.field()` instead." toReformat="false" toShortenFQNames="false">
-    <variable name="contact_form" expression="" defaultValue="&quot;contact-form&quot;" alwaysStopAt="true" />
-    <variable name="name" expression="" defaultValue="&quot;name&quot;" alwaysStopAt="true" />
+  <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;$case_tabs$&quot;&gt;&#10;  &lt;ul class=&quot;lt-tabs__list&quot; aria-label=&quot;Parts of the case&quot;&gt;&#10;    &lt;li&gt;&lt;a href=&quot;#$application$&quot;&gt;Application&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;$application$&quot;&gt;&#10;    &lt;h2&gt;Application&lt;/h2&gt;&#10;    &lt;p&gt;The application was sent on 4 March 2026.&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">
-    <variable name="case_tabs" expression="" defaultValue="&quot;case-tabs&quot;" alwaysStopAt="true" />
-    <variable name="application" expression="" defaultValue="&quot;application&quot;" alwaysStopAt="true" />
-    <variable name="attachments" expression="" defaultValue="&quot;attachments&quot;" alwaysStopAt="true" />
+  <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" />
     <context>
       <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;$email$&quot;&gt;Email address&lt;/label&gt;&#10;  &lt;input class=&quot;lt-input&quot; id=&quot;$email$&quot; type=&quot;email&quot; /&gt;&#10;  &lt;button class=&quot;lt-button&quot;&gt;Send application&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="&quot;errors&quot;" alwaysStopAt="true" />
-    <variable name="errors_title" expression="" defaultValue="&quot;errors-title&quot;" alwaysStopAt="true" />
-    <variable name="email" expression="" defaultValue="&quot;email&quot;" alwaysStopAt="true" />
+  <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" />
     <context>
       <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;Archive the case&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;Download as PDF&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">
-    <variable name="menu" expression="" defaultValue="&quot;menu&quot;" alwaysStopAt="true" />
-    <variable name="actions" expression="" defaultValue="&quot;actions&quot;" alwaysStopAt="true" />
+  <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-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;$airport_search$&quot;&gt;&#10;  &lt;label class=&quot;lt-label&quot; for=&quot;$airport$&quot;&gt;Airport&lt;/label&gt;&#10;  &lt;input class=&quot;lt-input&quot; id=&quot;$airport$&quot; name=&quot;airport&quot; type=&quot;text&quot;&gt;&#10;  &lt;ul class=&quot;lt-suggestion__list&quot;&gt;&#10;    &lt;li&gt;Bergen&lt;/li&gt;&#10;    &lt;li&gt;Malmö&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="airport_search" expression="" defaultValue="&quot;airport-search&quot;" alwaysStopAt="true" />
-    <variable name="airport" expression="" defaultValue="&quot;airport&quot;" alwaysStopAt="true" />
+  <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-dialog" value="&lt;lt-dialog open&gt;&#10;  &lt;dialog class=&quot;lt-dialog&quot; open&gt;&#10;    &lt;h2&gt;The decision is registered&lt;/h2&gt;&#10;    &lt;div class=&quot;lt-dialog__body&quot;&gt;&#10;      &lt;p&gt;The case is closed and has been sent to the archive.&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-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" />
     <context>
       <option name="HTML" value="true" />
     </context>
   </template>
-  <template name="lt-toast" value="&lt;lt-toast id=&quot;$messages$&quot; class=&quot;lt-toast&quot; role=&quot;status&quot; aria-live=&quot;polite&quot;&#10;          aria-atomic=&quot;false&quot;&#10;          aria-label=&quot;Messages&quot; data-ignore-morph&gt;&lt;/lt-toast&gt;&#10;&#10;&lt;button class=&quot;lt-button&quot; id=&quot;$save$&quot; type=&quot;button&quot;&gt;Save application&lt;/button&gt;" description="A queue of short messages in the corner of the screen. The messages are created from script with `show(text, { color, duration })`." toReformat="false" toShortenFQNames="false">
-    <variable name="messages" expression="" defaultValue="&quot;messages&quot;" alwaysStopAt="true" />
-    <variable name="save" expression="" defaultValue="&quot;save&quot;" alwaysStopAt="true" />
+  <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>
   </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;You will soon be logged out&lt;/h2&gt;&#10;    &lt;p class=&quot;lt-session-timeout__text&quot;&gt;&#10;      We will log you out in &lt;span class=&quot;lt-session-timeout__count&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&#10;      to protect your information.&#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 logged in&lt;/button&gt;&#10;      &lt;button class=&quot;lt-button&quot; data-variant=&quot;secondary&quot; value=&quot;logout&quot;&gt;Log out now&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">
-    <variable name="session_title" expression="" defaultValue="&quot;session-title&quot;" alwaysStopAt="true" />
+  <template name="lt-toast" value="&lt;lt-toast id=&quot;$messages$&quot; class=&quot;lt-toast&quot; role=&quot;status&quot; aria-live=&quot;polite&quot;&#10;          aria-atomic=&quot;false&quot;&#10;          aria-label=&quot;Messages&quot; data-ignore-morph&gt;&lt;/lt-toast&gt;&#10;&#10;&lt;button class=&quot;lt-button&quot; id=&quot;$restart$&quot; type=&quot;button&quot;&gt;Restart relay 14&lt;/button&gt;" description="A queue of short messages in the corner of the screen. The messages are created from script with `show(text, { color, duration })`." toReformat="false" toShortenFQNames="false">
+    <variable name="messages" expression="" defaultValue="" alwaysStopAt="true" />
+    <variable name="restart" expression="" defaultValue="" alwaysStopAt="true" />
+    <context>
+      <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; 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" />
     </context>

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",