@lo-tek/interfaces 0.39.0 → 0.41.0

package/src/vocabulary/classes.ts

@@ -757,6 +757,31 @@ export const classes: Classes = {
     "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",
@@ -962,7 +987,7 @@ export const classes: Classes = {
   "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": {
@@ -1013,7 +1038,7 @@ export const classes: Classes = {
   "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",
@@ -1022,7 +1047,7 @@ export const classes: Classes = {
   "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",
@@ -1031,7 +1056,7 @@ export const classes: Classes = {
   "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",
@@ -1040,7 +1065,7 @@ export const classes: Classes = {
   "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",
@@ -1062,7 +1087,7 @@ export const classes: Classes = {
   "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",
@@ -1305,6 +1330,35 @@ export const classes: Classes = {
     "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",

package/src/vocabulary/elements.ts

@@ -4,7 +4,7 @@ import type { Elements } from "./types.js"
 export const elements: Elements = {
   "lt-field": {
     "link": "https://lo-tek.sobernetics.no/components/field/",
-    "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.",
+    "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.",
     "attributes": {
       "disabled": {
         "type": "flag",
@@ -184,6 +184,19 @@ export const elements: Elements = {
       }
     }
   },
+  "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.",
@@ -310,7 +323,7 @@ export const elements: Elements = {
   },
   "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",
@@ -393,7 +406,7 @@ export const elements: Elements = {
   },
   "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",

package/src/vocabulary/types.ts

@@ -90,9 +90,13 @@ export type Element = {
 export type DefaultText = { text: string; replacedBy: readonly string[] }
 
 /**
- * A text the stylesheet shows in `::after` on an element with the class and
- * `attribute`, with `value` when the selector requires one, and none of the
- * attributes in `unless`. `variable` is the CSS variable that replaces it.
+ * A text the stylesheet shows on an element with the class and `attribute`,
+ * with `value` when the selector requires one, and none of the attributes in
+ * `unless`. With `siblingsBefore`,
+ * the attribute is on a child of the element with the class, and the text
+ * is shown on the children before it, as "Completed " is on the steps before
+ * the one with `aria-current="step"` in `lt-steps`. `variable` is the CSS
+ * variable that replaces it.
  */
 export type CssText = {
   variable: string
@@ -100,6 +104,7 @@ export type CssText = {
   attribute: string
   value?: string
   unless?: readonly string[]
+  siblingsBefore?: true
 }
 
 /** The content of `elements.ts`: tag to element. */
@@ -190,11 +195,28 @@ export type BuilderReturns = { optional?: boolean } & (
  */
 export type Builder = {
   name: string
+  /**
+   * The comment on the function, without the code examples. Missing in a
+   * manifest from before 0.40, where the schema version was already 1.
+   */
+  description?: string
+  /** The code examples in the comment, in TypeScript. */
+  example?: string
+  /** The page the function is documented on. */
+  docs?: string
+  /**
+   * Which part of a frame component each set in the result fills, as
+   * `field.control` fills the control of `<lt-field>`. A set that fills no
+   * part is left out.
+   */
+  parts?: Record<string, { element: string; part: string }>
   options: {
     name: string
     required: boolean
     type: BuilderOptionType
     description?: string
+    /** The value that gives the same answer as leaving the option out. */
+    default?: string
   }[]
   returns: BuilderReturns
   /**

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@lo-tek/interfaces",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "lt-field",
-          "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.",
+          "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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/field/",
           "attributes": [
             {
@@ -162,6 +162,12 @@
             ]
           }
         },
+        {
+          "name": "lt-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.",
+          "doc-url": "https://lo-tek.sobernetics.no/components/term/",
+          "attributes": []
+        },
         {
           "name": "lt-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.",
@@ -249,7 +255,7 @@
         },
         {
           "name": "lt-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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/",
           "attributes": [
             {
@@ -317,7 +323,7 @@
         },
         {
           "name": "lt-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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/session-timeout/",
           "attributes": [
             {
@@ -357,7 +363,7 @@
               },
               {
                 "name": "session-logout",
-                "description": "The user chose to log out."
+                "description": "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."
               },
               {
                 "name": "session-expired",
@@ -604,6 +610,11 @@
           "description": "**Sr Only**\n\nText only screen readers get. A CSS component with one class and no JavaScript.",
           "doc-url": "https://lo-tek.sobernetics.no/components/sr-only/"
         },
+        {
+          "name": "lt-steps",
+          "description": "**Steps**\n\nA step indicator that shows where the user is in a task over several pages. A CSS component with one class and no JavaScript.",
+          "doc-url": "https://lo-tek.sobernetics.no/components/steps/"
+        },
         {
           "name": "lt-switch",
           "description": "**Switch**\n\nA switch for a setting that takes effect immediately. CSS component with two classes and no JavaScript.",
@@ -661,32 +672,32 @@
         },
         {
           "name": "lt-dialog",
-          "description": "**Dialog**\n\nModal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+          "description": "**Dialog**\n\nModal 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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/"
         },
         {
           "name": "lt-dialog__body",
-          "description": "**Dialog**\n\nModal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+          "description": "**Dialog**\n\nModal 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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/"
         },
         {
           "name": "lt-dialog__title",
-          "description": "**Dialog**\n\nModal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+          "description": "**Dialog**\n\nModal 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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/"
         },
         {
           "name": "lt-dialog__footer",
-          "description": "**Dialog**\n\nModal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+          "description": "**Dialog**\n\nModal 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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/"
         },
         {
           "name": "lt-dialog__header",
-          "description": "**Dialog**\n\nModal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+          "description": "**Dialog**\n\nModal 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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/"
         },
         {
           "name": "lt-dialog__subtitle",
-          "description": "**Dialog**\n\nModal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().",
+          "description": "**Dialog**\n\nModal 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.",
           "doc-url": "https://lo-tek.sobernetics.no/components/dialog/"
         },
         {
@@ -764,6 +775,16 @@
           "description": "**Tabs**\n\nTab list of links to their panels. Frame component.",
           "doc-url": "https://lo-tek.sobernetics.no/components/tabs/"
         },
+        {
+          "name": "lt-term",
+          "description": "**Term**\n\nA word in the text that shows its entry from a glossary on the same page, in a card by the word. Frame component.",
+          "doc-url": "https://lo-tek.sobernetics.no/components/term/"
+        },
+        {
+          "name": "lt-term__entry",
+          "description": "**Term**\n\nA word in the text that shows its entry from a glossary on the same page, in a card by the word. Frame component.",
+          "doc-url": "https://lo-tek.sobernetics.no/components/term/"
+        },
         {
           "name": "lt-connection-status",
           "description": "**Connection Status**\n\nTells the user when the connection to the server is gone. Standalone component.",