@lo-tek/interfaces 0.39.0 → 0.41.0

package/manifest/manifest.schema.json

@@ -65,11 +65,15 @@
               "type": "object",
               "required": ["text", "replacedBy"],
               "properties": {
-                "text": { "type": "string" },
+                "text": {
+                  "type": "string"
+                },
                 "replacedBy": {
                   "type": "array",
                   "description": "The attributes that replace the text. Any one of them is enough.",
-                  "items": { "type": "string" }
+                  "items": {
+                    "type": "string"
+                  }
                 }
               },
               "additionalProperties": false
@@ -138,14 +142,24 @@
               "type": "object",
               "required": ["variable", "text", "attribute"],
               "properties": {
-                "variable": { "type": "string" },
-                "text": { "type": "string" },
-                "attribute": { "type": "string" },
-                "value": { "type": "string" },
+                "variable": {
+                  "type": "string"
+                },
+                "text": {
+                  "type": "string"
+                },
+                "attribute": {
+                  "type": "string"
+                },
+                "value": {
+                  "type": "string"
+                },
                 "unless": {
                   "type": "array",
                   "description": "Attributes that keep the text from showing.",
-                  "items": { "type": "string" }
+                  "items": {
+                    "type": "string"
+                  }
                 }
               },
               "additionalProperties": false
@@ -214,6 +228,35 @@
           "name": {
             "type": "string"
           },
+          "description": {
+            "type": "string",
+            "description": "The comment on the builder function, without the code examples and without advice for React: what it is for and what the template has to know. Paragraphs are separated by an empty line. Added after schemaVersion 1 was set, so an older manifest does not have it."
+          },
+          "example": {
+            "type": "string",
+            "description": "The code examples in the comment, in TypeScript."
+          },
+          "docs": {
+            "type": "string",
+            "format": "uri",
+            "description": "The page the builder function is documented on."
+          },
+          "parts": {
+            "type": "object",
+            "description": "Which part of a frame component each set in the result fills, as field.control fills the control of lt-field. The part's selector in elements is what the set may go on. A set that fills no part is left out.",
+            "additionalProperties": {
+              "type": "object",
+              "required": ["element", "part"],
+              "properties": {
+                "element": {
+                  "type": "string"
+                },
+                "part": {
+                  "type": "string"
+                }
+              }
+            }
+          },
           "options": {
             "type": "array",
             "items": {
@@ -232,6 +275,10 @@
                 "description": {
                   "type": "string",
                   "description": "What the option does, taken from the comment on the option in the type."
+                },
+                "default": {
+                  "type": "string",
+                  "description": "For an option with a closed list: the value that gives the same answer as leaving the option out, read from the answers. The description says the same."
                 }
               }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-tek/interfaces",
-  "version": "0.39.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"
@@ -335,6 +345,7 @@
     "dist",
     "web-types.json",
     "live-templates.xml",
+    "live-templates-kotlin.xml",
     "manifest/manifest.json",
     "manifest/files.json",
     "core/lotek-core.wasm",
@@ -393,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"
   }
 }

package/src/components/css/accordion/accordion.ts

@@ -30,7 +30,7 @@ export type AccordionAttributes = {
  *
  * ```ts
  * <details {...accordion()}>
- *   <summary>Who can apply?</summary>
+ *   <summary>Who can take out a policy?</summary>
  *   <div class={accordion.content}>…</div>
  * </details>
  * ```

package/src/components/css/alert/alert.ts

@@ -29,7 +29,7 @@ export type AlertAttributes = {
  *
  * ```ts
  * <div {...alert({ color: "warning" })}>
- *   <p class={alert.title}>The application has not been sent</p>
+ *   <p class={alert.title}>Your routes have not been saved</p>
  * </div>
  * ```
  */

package/src/components/css/avatar/avatar.ts

@@ -33,7 +33,7 @@ export type AvatarAttributes = {
  * picture stands alone, it must have a text that says who it is.
  *
  * ```ts
- * <span {...avatar({ size: "small" })} aria-hidden="true">ON</span>
+ * <span {...avatar({ size: "small" })} aria-hidden="true">DP</span>
  * ```
  */
 export const avatar = Object.assign(

package/src/components/css/badge/badge.ts

@@ -27,7 +27,7 @@ export type BadgeAttributes = {
  * The attributes for a status badge.
  *
  * ```ts
- * <span {...badge({ color: "success" })}>Approved</span>
+ * <span {...badge({ color: "success" })}>Paid</span>
  * ```
  */
 export const badge = Object.assign(

package/src/components/css/breadcrumbs/breadcrumbs.ts

@@ -21,7 +21,7 @@ export type BreadcrumbsAttributes = {
  * <nav aria-label="You are here">
  *   <ol {...breadcrumbs()}>
  *     <li><a href="/">Home</a></li>
- *     <li><a href="/cases" aria-current="page">My cases</a></li>
+ *     <li><a href="/claims" aria-current="page">My claims</a></li>
  *   </ol>
  * </nav>
  * ```

package/src/components/css/card/card.ts

@@ -31,7 +31,7 @@ export type CardAttributes = {
  * reached with the keyboard nor be announced as something to press.
  *
  * ```ts
- * <a {...card({ interactive: true })} href="/case/481">…</a>
+ * <a {...card({ interactive: true })} href="/claims/AV-2079-0481">…</a>
  * ```
  */
 export const card = Object.assign(

package/src/components/css/file-upload/file-upload.ts

@@ -39,7 +39,7 @@ export type FileUploadAttributes = {
  * "all files", so the type must be checked on the server anyway.
  *
  * ```ts
- * <input {...fileUpload({ multiple: true, accept: ".pdf" })} />
+ * <input {...fileUpload({ multiple: true, accept: ".bin" })} />
  * ```
  */
 export const fileUpload = Object.assign(

package/src/components/css/icon/icon.ts

@@ -30,7 +30,7 @@ export type IconAttributes = {
  * reports a button that lacks one.
  *
  * ```ts
- * <button {...button()} aria-label="Delete the application">
+ * <button {...button()} aria-label="Delete ticket #0331">
  *   <svg {...icon()} viewBox="0 0 24 24">…</svg>
  * </button>
  * ```

package/src/components/css/input/input.css

@@ -126,6 +126,27 @@
     cursor: pointer;
   }
 
+  /* iOS Safari: with the native appearance, a date or time field stood wider
+     than its container. Without it, the field fits.
+     Undocumented: on 2026-11-01, CSS.supports("-webkit-touch-callout", "none")
+     was false in Playwright's Chromium, Firefox and WebKit on macOS, also with
+     iPhone emulation, and this rule applied in Safari on an iPhone. A WebKit
+     build with touch events elsewhere may match it too. */
+  @supports (-webkit-touch-callout: none) {
+    .lt-input[data-variant="date"],
+    .lt-input[data-variant="time"],
+    .lt-input[data-variant="datetime-local"] {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .lt-input[data-variant="date"]::-webkit-date-and-time-value,
+    .lt-input[data-variant="time"]::-webkit-date-and-time-value,
+    .lt-input[data-variant="datetime-local"]::-webkit-date-and-time-value {
+      text-align: start;
+    }
+  }
+
   /* High contrast: the icon is painted into the image with a fixed colour,
      and can become invisible in a dark theme. The browser's own button is
      hidden behind our icon, and is brought back here. */

package/src/components/css/label/label.ts

@@ -33,7 +33,7 @@ export type LabelAttributes = {
  * or the screen reader is not told that it must be filled in.
  *
  * ```ts
- * <label {...label({ required: "symbol" })} htmlFor="email">Email address</label>
+ * <label {...label({ required: "symbol" })} htmlFor="fixer">Fixer's address</label>
  * ```
  */
 export const label = Object.assign(

package/src/components/css/link/link.ts

@@ -22,7 +22,7 @@ export type LinkAttributes = {
  * The attributes for a link.
  *
  * ```ts
- * <a {...link()} href="/receipt">See receipt</a>
+ * <a {...link()} href="/small-print">Read the small print</a>
  * <a {...link({ disabled: true })}>See annual statement</a>
  * ```
  *

package/src/components/css/spinner/spinner.ts

@@ -19,18 +19,20 @@ export type SpinnerAttributes = {
   "data-size"?: NonDefaultSpinnerSize
   role?: "status"
   "aria-label"?: string
+  "aria-hidden"?: "true"
 }
 
 /**
  * The attributes for a loading indicator.
  *
- * Without `label` the ring is only a shape, and screen readers announce
- * nothing. With `label` it becomes a `role="status"` that says what is going
- * on. If you already have a visible text next to it, let that carry the
- * message and drop `label`, so the same thing is not announced twice.
+ * Without `label` the ring is only a shape, and is hidden from screen readers
+ * with `aria-hidden`, as an icon without a label is. With `label` it becomes a
+ * `role="status"` that says what is going on. If you already have a visible
+ * text next to it, let that carry the message and drop `label`, so the same
+ * thing is not announced twice.
  *
  * ```ts
- * <span {...spinner({ label: "Loading applications" })} />
+ * <span {...spinner({ label: "Loading sectors" })} />
  * ```
  */
 export const spinner = Object.assign(
@@ -40,6 +42,7 @@ export const spinner = Object.assign(
       "data-size": size === "medium" ? undefined : size,
       role: label ? ("status" as const) : undefined,
       "aria-label": label,
+      "aria-hidden": label ? undefined : ("true" as const),
     }),
   {
     sizes: spinnerSizes,

package/src/components/css/steps/steps.css

@@ -0,0 +1,240 @@
+@layer lotek {
+  /*
+   * The step indicator: an `<ol>` with one `<li>` per step, and
+   * `aria-current="step"` on the step the user is on. The steps before it are
+   * done, read from the markup with `:has()`, so the server only says where
+   * the user is.
+   *
+   * Every step has a marker, its number or a check, and a line to the next
+   * step. The marker is `::before` on the step's link when the step has one,
+   * so a done step says "Completed" as part of the link's name, and on the
+   * step itself otherwise. The line is `::after` on the step, and is a
+   * border: a background is removed in high contrast mode, and the line with
+   * it.
+   *
+   * The list is a size container. Below 28rem the steps stand in a column,
+   * with the marker at the start of the line: a row of five steps on a phone
+   * gives each label less room than one word.
+   */
+  .lt-steps {
+    box-sizing: border-box;
+    container-type: inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    counter-reset: lt-steps;
+    font-family: inherit;
+    font-size: var(--lt-font-size-s);
+    line-height: var(--lt-line-height-default);
+    color: var(--lt-color-neutral-text-subtle);
+  }
+
+  /* Every step gets the same share of the row. The line to the next marker
+     reaches half a step past this one, so the shares must be equal. A name
+     longer than its share breaks inside a word rather than running into the
+     next step; `break-word` breaks only a word that does not fit. */
+  .lt-steps > li {
+    box-sizing: border-box;
+    position: relative;
+    flex: 1 1 0;
+    min-inline-size: 0;
+    padding-block-start: calc(
+      var(--lt-steps-marker-size, var(--lt-spacing-7)) +
+      var(--lt-spacing-2)
+    );
+    padding-inline: var(--lt-spacing-1);
+    overflow-wrap: break-word;
+    text-align: center;
+    counter-increment: lt-steps;
+  }
+
+  .lt-steps > li:not(:has(> a))::before,
+  .lt-steps > li > a::before {
+    content: counter(lt-steps);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(
+      50% -
+      var(--lt-steps-marker-size, var(--lt-spacing-7)) /
+      2
+    );
+    box-sizing: border-box;
+    display: grid;
+    place-items: center;
+    inline-size: var(--lt-steps-marker-size, var(--lt-spacing-7));
+    block-size: var(--lt-steps-marker-size, var(--lt-spacing-7));
+    border: 2px solid var(--lt-color-neutral-border);
+    border-radius: 50%;
+    background: var(--lt-color-neutral-canvas);
+    color: var(--lt-color-neutral-text-subtle);
+    font-weight: var(--lt-font-weight-semibold);
+    line-height: 1;
+  }
+
+  /* The number is decoration: the list already says which step it is. The
+     empty alternative text keeps it out of the name. Browsers that do not
+     know the form discard the whole declaration, so it sits behind
+     `@supports`, as the separator in the breadcrumbs does. */
+  @supports (content: "1" / "") {
+    .lt-steps > li:not(:has(> a))::before,
+    .lt-steps > li > a::before {
+      content: counter(lt-steps) / "";
+    }
+  }
+
+  .lt-steps > li:has(~ li)::after {
+    content: "";
+    position: absolute;
+    inset-block-start: calc(
+      var(--lt-steps-marker-size, var(--lt-spacing-7)) /
+      2 -
+      1px
+    );
+    inset-inline-start: calc(
+      50% +
+      var(--lt-steps-marker-size, var(--lt-spacing-7)) /
+      2 +
+      var(--lt-spacing-1)
+    );
+    inset-inline-end: calc(
+      -50% +
+      var(--lt-steps-marker-size, var(--lt-spacing-7)) /
+      2 +
+      var(--lt-spacing-1)
+    );
+    border-block-start: 2px solid var(--lt-color-neutral-border);
+  }
+
+  .lt-steps a {
+    color: var(--lt-color-accent-text);
+    text-decoration: underline;
+    text-underline-offset: 0.14em;
+  }
+
+  .lt-steps a:hover {
+    color: var(--lt-color-accent-text-strong);
+  }
+
+  .lt-steps a:focus-visible {
+    outline: var(--lt-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .lt-steps > [aria-current="step"] {
+    color: var(--lt-color-neutral-text-strong);
+    font-weight: var(--lt-font-weight-semibold);
+  }
+
+  .lt-steps > [aria-current="step"]:not(:has(> a))::before,
+  .lt-steps > [aria-current="step"] > a::before {
+    border-color: var(--lt-color-accent-fill);
+    color: var(--lt-color-accent-text);
+  }
+
+  /* Done: every step before the current one. */
+  .lt-steps > li:has(~ [aria-current="step"]) {
+    color: var(--lt-color-neutral-text);
+  }
+
+  /* The check is the checkbox's token, cut out of the filled marker as a
+     mask, so the surface behind shows through it. Painted as an image, its
+     stroke had a fixed colour, and in high contrast mode a white check on a
+     light `Highlight` could not be seen. `--lt-steps-done-icon` takes any
+     image; its shape is what counts. */
+  .lt-steps > li:has(~ [aria-current="step"]):not(:has(> a))::before,
+  .lt-steps > li:has(~ [aria-current="step"]) > a::before {
+    content: "";
+    border-color: var(--lt-color-accent-fill);
+    background: var(--lt-color-accent-fill);
+    mask:
+      var(--lt-steps-done-icon, var(--lt-icon-check)) center / 60% no-repeat,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+
+  /* The empty content is read out as the text, so the screen reader says
+     that the step is done. `::before` is put in front of the name without a
+     space (AccName 2F.ii), so the space is in the text. Behind `@supports`
+     for the reason above: without it the step has no text. */
+  @supports (content: "" / "") {
+    .lt-steps > li:has(~ [aria-current="step"]):not(:has(> a))::before,
+    .lt-steps > li:has(~ [aria-current="step"]) > a::before {
+      content: "" / var(--lt-steps-done-text, "Completed ");
+    }
+  }
+
+  .lt-steps > li:has(~ [aria-current="step"])::after {
+    border-color: var(--lt-color-accent-fill);
+  }
+
+  @container (width < 28rem) {
+    .lt-steps > li {
+      flex-basis: 100%;
+      min-block-size: calc(
+        var(--lt-steps-marker-size, var(--lt-spacing-7)) +
+        var(--lt-spacing-4)
+      );
+      padding-block: max(
+          0px,
+          (var(--lt-steps-marker-size, var(--lt-spacing-7)) - 1lh) /
+          2
+        )
+        var(--lt-spacing-4);
+      padding-inline: calc(
+          var(--lt-steps-marker-size, var(--lt-spacing-7)) +
+          var(--lt-spacing-3)
+        )
+        0;
+      text-align: start;
+    }
+
+    .lt-steps > li:not(:has(> a))::before,
+    .lt-steps > li > a::before {
+      inset-inline-start: 0;
+    }
+
+    .lt-steps > li:has(~ li)::after {
+      inset-block: calc(
+          var(--lt-steps-marker-size, var(--lt-spacing-7)) +
+          var(--lt-spacing-1)
+        )
+        var(--lt-spacing-1);
+      inset-inline: calc(
+          var(--lt-steps-marker-size, var(--lt-spacing-7)) /
+          2 -
+          1px
+        )
+        auto;
+      border-block-start: 0;
+      border-inline-start: 2px solid var(--lt-color-neutral-border);
+    }
+
+    .lt-steps > li:has(~ [aria-current="step"])::after {
+      border-color: var(--lt-color-accent-fill);
+    }
+  }
+
+  /*
+   * High contrast: the colours are overridden, so the current step and the
+   * done ones would look like the rest. `Highlight` is the system's colour
+   * for what is selected, and a system colour is allowed to stand.
+   */
+  @media (forced-colors: active) {
+    .lt-steps > [aria-current="step"]:not(:has(> a))::before,
+    .lt-steps > [aria-current="step"] > a::before {
+      border-color: Highlight;
+    }
+
+    .lt-steps > li:has(~ [aria-current="step"]):not(:has(> a))::before,
+    .lt-steps > li:has(~ [aria-current="step"]) > a::before {
+      border-color: Highlight;
+      background-color: Highlight;
+    }
+
+    .lt-steps > li:has(~ [aria-current="step"])::after {
+      border-color: Highlight;
+    }
+  }
+}

package/src/components/css/steps/steps.ts

@@ -0,0 +1,26 @@
+import { attributes } from "../shared.js"
+
+export const STEPS_CLASS = "lt-steps" as const
+
+export type StepsAttributes = {
+  class: typeof STEPS_CLASS
+}
+
+/**
+ * The attributes for a step indicator, which shows where the user is in a
+ * task over several pages, like an order.
+ *
+ * The 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.
+ *
+ * ```ts
+ * <ol {...steps()} aria-label="Order">
+ *   <li><a href="/order/site">Site</a></li>
+ *   <li aria-current="step">Walls</li>
+ *   <li>Payment</li>
+ * </ol>
+ * ```
+ */
+export const steps = (): StepsAttributes => attributes({ class: STEPS_CLASS })

package/src/components/css/tag/tag.ts

@@ -32,7 +32,7 @@ export type TagAttributes = {
  * since only you know whether the tag is selected.
  *
  * ```ts
- * <button {...tag({ selectable: true })} aria-pressed="true">Housing benefit</button>
+ * <button {...tag({ selectable: true })} aria-pressed="true">Cutter</button>
  * ```
  */
 export const tag = Object.assign(

package/src/components/css/toggle-group/toggle-group.ts

@@ -23,7 +23,7 @@ export type ToggleGroupAttributes = {
  * <fieldset {...toggleGroup()}>
  *   <legend class="lt-sr-only">View</legend>
  *   <label class={toggleGroup.option}>
- *     <input type="radio" name="view" value="list" checked /> List
+ *     <input type="radio" name="view" value="dry" checked /> Dry
  *   </label>
  * </fieldset>
  * ```

package/src/components/css/tooltip/tooltip.ts

@@ -23,8 +23,8 @@ export type TooltipAttributes = {
  *
  * ```ts
  * <span {...tooltip()}>
- *   <button aria-describedby="hint">Archive</button>
- *   <span class={tooltip.bubble} role="tooltip" id="hint">Moves it to the archive</span>
+ *   <button aria-describedby="hint">Appraise</button>
+ *   <span class={tooltip.bubble} role="tooltip" id="hint">At street value</span>
  * </span>
  * ```
  */

package/src/components/events.ts

@@ -7,6 +7,7 @@ import type { LtPopover } from "./frame/popover/lt-popover.js"
 import type { LtSessionTimeout } from "./frame/session-timeout/lt-session-timeout.js"
 import type { LtSuggestion } from "./frame/suggestion/lt-suggestion.js"
 import type { LtTabs } from "./frame/tabs/lt-tabs.js"
+import type { LtTerm } from "./frame/term/lt-term.js"
 import type { LtConnectionStatus } from "./standalone/connection-status/lt-connection-status.js"
 import type { LtToast } from "./standalone/toast/lt-toast.js"
 
@@ -39,7 +40,7 @@ export interface LtEventMap {
   "session-warn": CustomEvent<null>
   /** `<lt-session-timeout>`: The session continues: the user closed the warning with a button other than log out or with Escape, or the app called `extend()`. */
   "session-extend": CustomEvent<null>
-  /** `<lt-session-timeout>`: The user chose to log out. */
+  /** `<lt-session-timeout>`: The user chose to log out with a button that closes the dialog. A Log out button with `formmethod="post"` submits to the server instead, and the event does not come. */
   "session-logout": CustomEvent<null>
   /** `<lt-session-timeout>`: Time is up. */
   "session-expired": CustomEvent<null>
@@ -63,6 +64,7 @@ declare global {
     "lt-session-timeout": LtSessionTimeout
     "lt-suggestion": LtSuggestion
     "lt-tabs": LtTabs
+    "lt-term": LtTerm
     "lt-toast": LtToast
   }
 }