@lo-tek/interfaces 0.0.0 → 0.37.0

package/manifest/manifest.json

@@ -0,0 +1,4965 @@
+{
+  "$schema": "./manifest.schema.json",
+  "schemaVersion": 1,
+  "version": "0.37.0",
+  "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.",
+      "attributes": {
+        "disabled": {
+          "type": "flag",
+          "description": "The control is disabled."
+        },
+        "optional": {
+          "type": "flag",
+          "description": "The field is optional, and the label says so."
+        },
+        "described-by": {
+          "type": "text",
+          "description": "Extra ids to include in `aria-describedby`, separated by spaces."
+        }
+      },
+      "parts": {
+        "label": {
+          "selector": "label",
+          "description": "The label. When it is outside the element, it is wired with `for` to the control's id.",
+          "content": "text"
+        },
+        "control": {
+          "selector": "input:not([type='hidden']), textarea, select",
+          "description": "The control the field wires: an `<input>`, `<textarea>` or `<select>` with its `<option>`s. `type=\"hidden\"` does not count, and only the first one is wired. The template writes `for` on the label and `id` on the control, or wraps the control in the label.",
+          "content": "none",
+          "unique": true,
+          "stableId": true
+        },
+        "help": {
+          "selector": ".lt-help-text",
+          "description": "The help text, which is read out together with the control.",
+          "content": "text",
+          "unique": true,
+          "optional": true
+        },
+        "error": {
+          "selector": ".lt-error-text",
+          "description": "The error text, which is shown and read out when the field is invalid.",
+          "content": "text",
+          "unique": true,
+          "optional": true
+        }
+      },
+      "removed": {
+        "invalid": "The field is invalid when the error text, `.lt-error-text`, is visible, or when the server has written `aria-invalid` on the control. In Datastar: `data-attr:hidden=\"!$invalid\"` on the error text.",
+        "required-marker": "The required marker is `data-required` on `<label>`, and then shows without JavaScript too.",
+        "control-id": "Write `id` on the control and `for` on the label in the template. The component never writes an id on the control."
+      }
+    },
+    "lt-tabs": {
+      "link": "https://lo-tek.sobernetics.no/components/tabs/",
+      "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=\"tab\"` 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=\"until-found\"`, 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.",
+      "attributes": {
+        "server-controlled": {
+          "type": "flag",
+          "description": "The server decides which tab is selected. The component does not put the user's selection back after an update from the server, and the URL selects no tab. A click and find in page select the tab until the server responds."
+        },
+        "activation": {
+          "type": "values",
+          "values": [
+            "manual",
+            "automatic"
+          ],
+          "description": "What the arrow keys do. By default they select the tab at once."
+        }
+      },
+      "parts": {
+        "list": {
+          "selector": "[role='tablist'], .lt-tabs__list",
+          "description": "The tab list, a `<ul>` where each `<li>` gets `role=\"presentation\"`. It needs a name, such as `aria-label`. When the server has written `role=\"tab\"` on the links, the list can also hold other links.",
+          "content": "free",
+          "unique": true
+        },
+        "tab": {
+          "selector": "a[role='tab'][href^='#'], .lt-tabs__list a[href^='#']:not([role])",
+          "description": "A tab: a link to its panel, `<a href=\"#attachments\">`. The component writes `aria-controls` from `href`. `role=\"tab\"` on something that is not a link is not a tab.",
+          "content": "text",
+          "multiple": true
+        },
+        "panel": {
+          "selector": "[role='tabpanel'], .lt-tabs__panel:not([role])",
+          "description": "The content of one tab, with the id the link points to. The panel has the same name as the tab: the heading at the top of the panel is the name when it says the same as the tab.",
+          "content": "free",
+          "multiple": true
+        }
+      },
+      "events": {
+        "tab-select": {
+          "detail": {
+            "index": "number"
+          }
+        }
+      }
+    },
+    "lt-error-summary": {
+      "link": "https://lo-tek.sobernetics.no/components/error-summary/",
+      "description": "Error summary. Moves focus to the box when it appears, and to the control when a link in the list is followed.",
+      "attributes": {
+        "data-autofocus": {
+          "type": "values",
+          "values": [
+            "false",
+            "true"
+          ],
+          "description": "Whether focus moves to the box when it appears. On by default."
+        },
+        "hidden": {
+          "type": "flag",
+          "description": "The box is hidden. The server removes the attribute when the form fails, and the component then moves focus."
+        }
+      },
+      "parts": {
+        "title": {
+          "selector": "h1, h2, h3, h4, h5, h6",
+          "description": "The heading in the box. The component gives it the title class.",
+          "content": "text"
+        },
+        "link": {
+          "selector": "li a[href^='#']",
+          "description": "A link to a field with an error, in a list item. `href` is `#` and the field's id.",
+          "content": "text",
+          "multiple": true
+        }
+      }
+    },
+    "lt-popover": {
+      "link": "https://lo-tek.sobernetics.no/components/popover/",
+      "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.",
+      "attributes": {
+        "open": {
+          "type": "flag",
+          "description": "The panel is open. The server can send the attribute to open the panel."
+        },
+        "placement": {
+          "type": "values",
+          "values": [
+            "bottom-start",
+            "bottom-end",
+            "top-start",
+            "top-end"
+          ],
+          "description": "Which edge of the button the panel hangs from."
+        },
+        "server-controlled": {
+          "type": "flag",
+          "description": "The server decides whether the panel is open. The component does not put `open` back when an update from the server removes it."
+        }
+      },
+      "parts": {
+        "trigger": {
+          "selector": "button, [role='button']",
+          "description": "The button that opens and closes the panel: the one with `aria-controls` pointing at the panel's id, otherwise the first button outside the panel.",
+          "content": "text"
+        },
+        "panel": {
+          "selector": "[popover], .lt-popover",
+          "description": "The panel that opens: the element with `popover`, or the class. It needs an id from the server, which `aria-controls` on the button points to. The component never creates one, and without it the button cannot be wired to the panel.",
+          "content": "free",
+          "stableId": true
+        }
+      },
+      "events": {
+        "popover-toggle": {
+          "detail": {
+            "open": "boolean"
+          }
+        }
+      }
+    },
+    "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.",
+      "attributes": {
+        "prefiltered": {
+          "type": "flag",
+          "description": "The app has already filtered the list, so the component leaves it as it is. Needed when the app's filter is something other than \"the text contains the search term\"."
+        },
+        "count-none": {
+          "type": "text",
+          "description": "The announcement for no matches. The default is \"No matches\"."
+        },
+        "count-zero": {
+          "type": "text",
+          "description": "The announcement in the plural form `zero`, for languages that have it. `{n}` is the number."
+        },
+        "count-one": {
+          "type": "text",
+          "description": "The announcement for one match. `{n}` is the number."
+        },
+        "count-two": {
+          "type": "text",
+          "description": "The announcement in the plural form `two`, for languages that have it. `{n}` is the number."
+        },
+        "count-few": {
+          "type": "text",
+          "description": "The announcement in the plural form `few`, for languages that have it. `{n}` is the number."
+        },
+        "count-many": {
+          "type": "text",
+          "description": "The announcement in the plural form `many`, for languages that have it. `{n}` is the number."
+        },
+        "count-other": {
+          "type": "text",
+          "description": "The announcement for every other count, and the fallback when a form is missing. `{n}` is the number."
+        },
+        "server-controlled": {
+          "type": "flag",
+          "description": "The server decides whether the list is expanded and which option is highlighted. The component does not put them back after an update from the server."
+        }
+      },
+      "parts": {
+        "control": {
+          "selector": "[role='combobox'], input:not([type='hidden'])",
+          "description": "The field the user types in: `role=\"combobox\"`, otherwise the first `<input>`. The template writes `for` on the label and `id` on the field, or wraps the field in the label.",
+          "content": "none",
+          "unique": true,
+          "stableId": true
+        },
+        "list": {
+          "selector": "[role='listbox'], .lt-suggestion__list",
+          "description": "The list of suggestions. It sits in the top layer when it is open, `popover=\"manual\"`, and has the label as its name.",
+          "content": "parts",
+          "unique": true
+        },
+        "option": {
+          "selector": "[role='option'], .lt-suggestion__list > li:not([role])",
+          "description": "One suggestion in the list: `role=\"option\"`, or an `<li>` without a role.",
+          "content": "text",
+          "multiple": true
+        },
+        "empty": {
+          "selector": ".lt-suggestion__empty",
+          "description": "The message shown when nothing matches.",
+          "content": "text",
+          "unique": true,
+          "optional": true
+        },
+        "status": {
+          "selector": "[role='status']",
+          "description": "The announcement of the number of matches. The element is left empty, and the component fills it.",
+          "content": "none"
+        },
+        "value": {
+          "selector": "input.lt-suggestion__value",
+          "description": "A hidden `<input>` that gets the `data-value` of the option the user chose. Without it, only the text in the field is submitted.",
+          "content": "none",
+          "unique": true,
+          "optional": true
+        }
+      },
+      "events": {
+        "suggestion-select": {
+          "detail": {
+            "value": "string",
+            "label": "string"
+          }
+        }
+      }
+    },
+    "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.",
+      "attributes": {
+        "open": {
+          "type": "flag",
+          "description": "The dialog is open. For the server to show it, `open` must be on `<dialog>` too."
+        },
+        "server-controlled": {
+          "type": "flag",
+          "description": "When an update from the server removes `open` from `<dialog>` while the dialog is open, the component closes it and dispatches `dialog-toggle`, instead of putting `open` back."
+        }
+      },
+      "parts": {
+        "dialog": {
+          "selector": ":scope > dialog",
+          "description": "The `<dialog>` element, as a direct child of the host.",
+          "content": "free",
+          "unique": true
+        },
+        "title": {
+          "selector": "h1, h2, h3, h4, h5, h6",
+          "description": "The title: what `aria-labelledby` points to, otherwise the first heading outside the body. With `aria-label` on `<dialog>` it is not needed.",
+          "content": "text",
+          "optional": true
+        },
+        "body": {
+          "selector": ".lt-dialog__body",
+          "description": "The body, which scrolls when the dialog gets too tall. A heading here does not become the title.",
+          "content": "free",
+          "unique": true,
+          "optional": true
+        }
+      },
+      "events": {
+        "dialog-toggle": {
+          "detail": {
+            "open": "boolean",
+            "returnValue": "string"
+          }
+        }
+      }
+    },
+    "lt-toast": {
+      "link": "https://lo-tek.sobernetics.no/components/toast/",
+      "description": "A queue of short messages in the corner of the screen. The messages are created from script with `show(text, { color, duration })`.",
+      "attributes": {
+        "duration": {
+          "type": "number",
+          "description": "Milliseconds before a message disappears. The default is 6000, and 0 keeps the messages."
+        },
+        "label": {
+          "type": "text",
+          "description": "Text that tells screen readers what the region is for."
+        },
+        "close-label": {
+          "type": "text",
+          "description": "What the close button in each message is called for screen readers. The default is \"Close message\"."
+        }
+      },
+      "parts": {},
+      "events": {
+        "toast-dismiss": {}
+      }
+    },
+    "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.",
+      "attributes": {
+        "warn-at": {
+          "type": "number",
+          "description": "Seconds without activity before the warning appears."
+        },
+        "expires-at": {
+          "type": "number",
+          "description": "Seconds without activity before the session expires."
+        },
+        "activity-interval": {
+          "type": "number",
+          "description": "Seconds between each `session-activity` while the user is active. Default 60."
+        }
+      },
+      "parts": {
+        "dialog": {
+          "selector": "dialog",
+          "description": "The `<dialog>` element with the warning.",
+          "content": "free",
+          "unique": true
+        },
+        "title": {
+          "selector": "h1, h2, h3, h4, h5, h6",
+          "description": "The heading in the dialog, which becomes its name when neither `aria-labelledby` nor `aria-label` is on `<dialog>`.",
+          "content": "text",
+          "optional": true
+        },
+        "text": {
+          "selector": ".lt-session-timeout__text",
+          "description": "The paragraph with the time remaining. The announcement is this paragraph with the number replaced.",
+          "content": "text",
+          "unique": true
+        },
+        "count": {
+          "selector": ".lt-session-timeout__count",
+          "description": "The number that counts down, inside the paragraph. The component fills it.",
+          "content": "none",
+          "unique": true
+        },
+        "status": {
+          "selector": "[role='status']",
+          "description": "The announcement. The element is left empty, and the component fills it.",
+          "content": "none"
+        },
+        "button": {
+          "selector": "form[method=\"dialog\" i] button",
+          "description": "The buttons in `<form method=\"dialog\">`, which extend the session or log out.",
+          "content": "text",
+          "multiple": true
+        }
+      },
+      "events": {
+        "session-warn": {},
+        "session-extend": {},
+        "session-logout": {},
+        "session-expired": {},
+        "session-activity": {}
+      }
+    },
+    "lt-connection-status": {
+      "link": "https://lo-tek.sobernetics.no/components/connection-status/",
+      "description": "Tells the user when the connection to the server is lost. The app reports with `reportFailure()` and `reportSuccess()`.",
+      "attributes": {
+        "offline-text": {
+          "type": "text",
+          "description": "The text when the connection is lost."
+        },
+        "online-text": {
+          "type": "text",
+          "description": "The text when it comes back."
+        }
+      },
+      "parts": {},
+      "events": {
+        "connection-lost": {},
+        "connection-restored": {}
+      }
+    }
+  },
+  "classes": {
+    "lt-accordion": {
+      "component": "accordion",
+      "title": "Accordion",
+      "description": "A panel that can be expanded, built on details and summary. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/accordion/",
+      "content": "parts",
+      "parts": {
+        "summary": {
+          "selector": "summary",
+          "description": "The heading the user presses to open and close. An `<h2>` to `<h6>` inside gives it a level in the document.",
+          "content": "free"
+        },
+        "content": {
+          "selector": ".lt-accordion__content",
+          "description": "The content shown when the panel is open.",
+          "content": "free"
+        }
+      },
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "plain"
+          ],
+          "default": "default",
+          "description": "Its own frame, or just a line between the panels. Default: `default`."
+        }
+      }
+    },
+    "lt-accordion__content": {
+      "component": "accordion",
+      "title": "Accordion",
+      "description": "A panel that can be expanded, built on details and summary. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/accordion/",
+      "content": "free",
+      "partOf": "lt-accordion",
+      "attributes": {}
+    },
+    "lt-alert": {
+      "component": "alert",
+      "title": "Alert",
+      "description": "A message about the whole page or the whole form. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/alert/",
+      "content": "free",
+      "parts": {
+        "title": {
+          "selector": ".lt-alert__title",
+          "description": "The heading in the message.",
+          "content": "text",
+          "optional": true
+        }
+      },
+      "attributes": {
+        "data-color": {
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "What the message means. Left out, it is the neutral one."
+        }
+      }
+    },
+    "lt-alert__title": {
+      "component": "alert",
+      "title": "Alert",
+      "description": "A message about the whole page or the whole form. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/alert/",
+      "content": "text",
+      "partOf": "lt-alert",
+      "attributes": {}
+    },
+    "lt-avatar": {
+      "component": "avatar",
+      "title": "Avatar",
+      "description": "Profile picture or initials. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/avatar/",
+      "content": "free",
+      "parts": {
+        "image": {
+          "selector": "img",
+          "description": "The image, with the name in `alt`. Without an image the initials are text, and the element has `aria-hidden` when the name is next to it.",
+          "content": "none",
+          "optional": true
+        }
+      },
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "square"
+          ],
+          "default": "circle",
+          "description": "Round or rounded square. Default: `circle`."
+        },
+        "data-size": {
+          "values": [
+            "small",
+            "large"
+          ],
+          "default": "medium",
+          "description": "Size. Default: `medium`."
+        }
+      }
+    },
+    "lt-avatar-stack": {
+      "component": "avatar",
+      "title": "Avatar",
+      "description": "Profile picture or initials. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/avatar/",
+      "content": "parts",
+      "parts": {
+        "item": {
+          "selector": "li",
+          "description": "One list item per person.",
+          "content": "parts",
+          "multiple": true
+        },
+        "avatar": {
+          "selector": "li > .lt-avatar",
+          "description": "The avatar in each list item.",
+          "content": "free",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-badge": {
+      "component": "badge",
+      "title": "Badge",
+      "description": "Compact status badge. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/badge/",
+      "content": "text",
+      "attributes": {
+        "data-color": {
+          "values": [
+            "success",
+            "warning",
+            "danger",
+            "neutral"
+          ],
+          "default": "info",
+          "description": "What the status means. Default: `info`."
+        }
+      }
+    },
+    "lt-breadcrumbs": {
+      "component": "breadcrumbs",
+      "title": "Breadcrumbs",
+      "description": "A breadcrumb trail that shows where on the site the user is. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/breadcrumbs/",
+      "content": "parts",
+      "parts": {
+        "item": {
+          "selector": "li",
+          "description": "One step in the trail.",
+          "content": "parts",
+          "multiple": true
+        },
+        "link": {
+          "selector": "li > a",
+          "description": "The link to the step. The last one, the page the reader is on, has `aria-current=\"page\"`.",
+          "content": "text",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-button": {
+      "component": "button",
+      "title": "Button",
+      "description": "A button for actions. CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/button/",
+      "content": "text",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "secondary",
+            "ghost",
+            "danger"
+          ],
+          "default": "primary",
+          "description": "How weighty the action is. Default: `primary`."
+        }
+      }
+    },
+    "lt-card": {
+      "component": "card",
+      "title": "Card",
+      "description": "A box that groups content that belongs together. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/card/",
+      "content": "free",
+      "parts": {
+        "title": {
+          "selector": ".lt-card__title",
+          "description": "The heading in the card.",
+          "content": "text",
+          "optional": true
+        }
+      },
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "filled"
+          ],
+          "default": "outline",
+          "description": "Surface or outline. Default: `outline`."
+        },
+        "data-interactive": {
+          "flag": true,
+          "description": "The whole card is clickable. Use only on `<a>` or `<button>`."
+        }
+      }
+    },
+    "lt-card__title": {
+      "component": "card",
+      "title": "Card",
+      "description": "A box that groups content that belongs together. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/card/",
+      "content": "text",
+      "partOf": "lt-card",
+      "attributes": {}
+    },
+    "lt-checkbox": {
+      "component": "checkbox",
+      "title": "Checkbox",
+      "description": "A checkbox for a choice that stands on its own. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/checkbox/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        }
+      }
+    },
+    "lt-checkbox-row": {
+      "component": "checkbox",
+      "title": "Checkbox",
+      "description": "A checkbox for a choice that stands on its own. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/checkbox/",
+      "content": "parts",
+      "parts": {
+        "control": {
+          "selector": "input[type='checkbox']",
+          "description": "The checkbox, with its class.",
+          "content": "none",
+          "unique": true
+        },
+        "label": {
+          "selector": "label",
+          "description": "The label, wired to the control with `for`.",
+          "content": "text"
+        }
+      },
+      "attributes": {}
+    },
+    "lt-divider": {
+      "component": "divider",
+      "title": "Divider",
+      "description": "A line between parts of the content. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/divider/",
+      "content": "none",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "subtle",
+            "strong"
+          ],
+          "default": "default",
+          "description": "How visible the line is. Default: `default`."
+        }
+      }
+    },
+    "lt-error-text": {
+      "component": "error-text",
+      "title": "Error Text",
+      "description": "Error message below a form field. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/error-text/",
+      "content": "text",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "warning"
+          ],
+          "default": "error",
+          "description": "Whether the error stops submission or only warns. Default: `error`."
+        }
+      }
+    },
+    "lt-fieldset": {
+      "component": "fieldset",
+      "title": "Fieldset",
+      "description": "A group of controls with a shared label. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/fieldset/",
+      "content": "free",
+      "parts": {
+        "legend": {
+          "selector": "> .lt-legend",
+          "description": "The label of the group, a `<legend>` with the class.",
+          "content": "text",
+          "unique": true
+        },
+        "help": {
+          "selector": ".lt-help-text",
+          "description": "The help text of the group, wired with `aria-describedby` on the fieldset.",
+          "content": "text",
+          "optional": true
+        },
+        "error": {
+          "selector": ".lt-error-text",
+          "description": "The error text of the group, wired with `aria-describedby` on the fieldset.",
+          "content": "text",
+          "optional": true
+        }
+      },
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state for the whole group. Default: `default`."
+        }
+      }
+    },
+    "lt-legend": {
+      "component": "fieldset",
+      "title": "Fieldset",
+      "description": "A group of controls with a shared label. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/fieldset/",
+      "content": "text",
+      "partOf": "lt-fieldset",
+      "attributes": {
+        "data-required": {
+          "values": [
+            "symbol",
+            "text"
+          ],
+          "description": "Marks the group as required, with an asterisk or with the word \"(required)\"."
+        },
+        "data-optional": {
+          "flag": true,
+          "description": "Marks the group as optional. Choose one of `required` and `optional`."
+        }
+      }
+    },
+    "lt-file-upload": {
+      "component": "file-upload",
+      "title": "File Upload",
+      "description": "A field for uploading files. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/file-upload/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        }
+      }
+    },
+    "lt-file-upload-list": {
+      "component": "file-upload",
+      "title": "File Upload",
+      "description": "A field for uploading files. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/file-upload/",
+      "content": "parts",
+      "parts": {
+        "item": {
+          "selector": "li",
+          "description": "One chosen file, with its name.",
+          "content": "free",
+          "multiple": true
+        },
+        "remove": {
+          "selector": "li > button",
+          "description": "The button that removes the file, with the file name in its text.",
+          "content": "text",
+          "multiple": true,
+          "optional": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-heading": {
+      "component": "heading",
+      "title": "Heading",
+      "description": "Headings in six sizes, independent of level. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/heading/",
+      "content": "text",
+      "attributes": {
+        "data-size": {
+          "values": [
+            "xs",
+            "s",
+            "m",
+            "xl",
+            "mega"
+          ],
+          "default": "l",
+          "description": "Visual size. Default: `l`."
+        }
+      }
+    },
+    "lt-help-text": {
+      "component": "help-text",
+      "title": "Help Text",
+      "description": "Explanatory text below a form field. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/help-text/",
+      "content": "text",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "strong",
+            "success",
+            "warning"
+          ],
+          "default": "muted",
+          "description": "How loudly the text should speak. Default: `muted`."
+        }
+      }
+    },
+    "lt-icon": {
+      "component": "icon",
+      "title": "Icon",
+      "description": "An icon from the app's own set, as large as the text around it. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/icon/",
+      "content": "none",
+      "attributes": {}
+    },
+    "lt-input": {
+      "component": "input",
+      "title": "Input",
+      "description": "A text field for forms, with states for valid and invalid. CSS component.",
+      "link": "https://lo-tek.sobernetics.no/components/input/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        },
+        "data-variant": {
+          "values": [
+            "date",
+            "datetime-local",
+            "time"
+          ]
+        }
+      }
+    },
+    "lt-label": {
+      "component": "label",
+      "title": "Label",
+      "description": "A label for form fields, with marking of required and optional. A CSS component.",
+      "link": "https://lo-tek.sobernetics.no/components/label/",
+      "content": "text",
+      "attributes": {
+        "data-required": {
+          "values": [
+            "symbol",
+            "text"
+          ],
+          "description": "Marks the label as required."
+        },
+        "data-optional": {
+          "flag": true,
+          "description": "Marks the label as optional."
+        }
+      }
+    },
+    "lt-link": {
+      "component": "link",
+      "title": "Link",
+      "description": "Link style for navigation in running text. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/link/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-list": {
+      "component": "list",
+      "title": "List",
+      "description": "Bulleted lists, numbered lists and lists without bullets. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/list/",
+      "content": "parts",
+      "parts": {
+        "item": {
+          "selector": "li",
+          "description": "One item in the list.",
+          "content": "free",
+          "multiple": true
+        }
+      },
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "plain",
+            "divided"
+          ],
+          "default": "default",
+          "description": "Bullets, plain rows, or rows with a line between them. Default: `default`."
+        }
+      }
+    },
+    "lt-pagination": {
+      "component": "pagination",
+      "title": "Pagination",
+      "description": "Page navigation for long lists. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/pagination/",
+      "content": "parts",
+      "parts": {
+        "item": {
+          "selector": "li",
+          "description": "One list item per page, arrow and gap.",
+          "content": "parts",
+          "multiple": true
+        },
+        "link": {
+          "selector": "li > a, li > button",
+          "description": "The link or button to a page, with the page number as text and an `aria-label` that says what it is. The current one has `aria-current=\"page\"`.",
+          "content": "text",
+          "multiple": true
+        },
+        "gap": {
+          "selector": ".lt-pagination__gap",
+          "description": "The gap where pages are left out.",
+          "content": "text",
+          "multiple": true,
+          "optional": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-pagination__gap": {
+      "component": "pagination",
+      "title": "Pagination",
+      "description": "Page navigation for long lists. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/pagination/",
+      "content": "text",
+      "partOf": "lt-pagination",
+      "attributes": {}
+    },
+    "lt-paragraph": {
+      "component": "paragraph",
+      "title": "Paragraph",
+      "description": "Body text and lead paragraphs with a limited line length. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/paragraph/",
+      "content": "text",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "lead"
+          ],
+          "default": "default",
+          "description": "`lead` is the introduction right below the heading. Default: `default`."
+        },
+        "data-size": {
+          "values": [
+            "small",
+            "large"
+          ],
+          "default": "medium",
+          "description": "Text size. Default: `medium`."
+        }
+      }
+    },
+    "lt-progress": {
+      "component": "progress",
+      "title": "Progress",
+      "description": "A progress bar for something that has an end. CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/progress/",
+      "content": "none",
+      "attributes": {
+        "data-color": {
+          "values": [
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "What the number means. The default is the accent colour, meaning \"this is in progress\"."
+        }
+      }
+    },
+    "lt-radio": {
+      "component": "radio",
+      "title": "Radio",
+      "description": "Radio buttons for one choice among several. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/radio/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        }
+      }
+    },
+    "lt-radio-row": {
+      "component": "radio",
+      "title": "Radio",
+      "description": "Radio buttons for one choice among several. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/radio/",
+      "content": "parts",
+      "parts": {
+        "control": {
+          "selector": "input[type='radio']",
+          "description": "The radio button, with its class.",
+          "content": "none",
+          "unique": true
+        },
+        "label": {
+          "selector": "label",
+          "description": "The label, wired to the control with `for`.",
+          "content": "text"
+        }
+      },
+      "attributes": {}
+    },
+    "lt-search": {
+      "component": "search",
+      "title": "Search",
+      "description": "A search field with a magnifying glass. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/search/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        }
+      }
+    },
+    "lt-search-row": {
+      "component": "search",
+      "title": "Search",
+      "description": "A search field with a magnifying glass. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/search/",
+      "content": "parts",
+      "parts": {
+        "label": {
+          "selector": "label",
+          "description": "The label, wired with `for`. Often hidden with `lt-sr-only`.",
+          "content": "text"
+        },
+        "control": {
+          "selector": "input[type='search']",
+          "description": "The search field, with the classes `lt-input lt-search`.",
+          "content": "none",
+          "unique": true
+        },
+        "button": {
+          "selector": "button",
+          "description": "The search button.",
+          "content": "text",
+          "optional": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-select": {
+      "component": "select",
+      "title": "Select",
+      "description": "A dropdown list. CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/select/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        },
+        "data-picker": {
+          "values": [
+            "styled"
+          ],
+          "default": "auto",
+          "description": "Who draws the dropdown list. Default: `auto`."
+        }
+      }
+    },
+    "lt-skeleton": {
+      "component": "skeleton",
+      "title": "Skeleton",
+      "description": "A placeholder that shows the shape of content being loaded. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/skeleton/",
+      "content": "none",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "text",
+            "circle"
+          ],
+          "default": "block",
+          "description": "Shape. Default: `block`."
+        }
+      }
+    },
+    "lt-skip-link": {
+      "component": "skip-link",
+      "title": "Skip Link",
+      "description": "A link that skips past the menu to the main content. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/skip-link/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-spinner": {
+      "component": "spinner",
+      "title": "Spinner",
+      "description": "A wait indicator for something in progress. CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/spinner/",
+      "content": "none",
+      "attributes": {
+        "data-size": {
+          "values": [
+            "small",
+            "large"
+          ],
+          "default": "medium",
+          "description": "Size. Default: `medium`."
+        }
+      }
+    },
+    "lt-sr-only": {
+      "component": "sr-only",
+      "title": "Sr Only",
+      "description": "Text only screen readers get. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/sr-only/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-switch": {
+      "component": "switch",
+      "title": "Switch",
+      "description": "A switch for a setting that takes effect immediately. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/switch/",
+      "content": "none",
+      "attributes": {}
+    },
+    "lt-switch-row": {
+      "component": "switch",
+      "title": "Switch",
+      "description": "A switch for a setting that takes effect immediately. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/switch/",
+      "content": "parts",
+      "parts": {
+        "control": {
+          "selector": "input[role='switch']",
+          "description": "The switch, with its class.",
+          "content": "none",
+          "unique": true
+        },
+        "label": {
+          "selector": "label",
+          "description": "The label, wired to the control with `for`.",
+          "content": "text"
+        }
+      },
+      "attributes": {}
+    },
+    "lt-table": {
+      "component": "table",
+      "title": "Table",
+      "description": "A table for data in rows and columns. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/table/",
+      "content": "parts",
+      "parts": {
+        "caption": {
+          "selector": "> caption",
+          "description": "The name of the table.",
+          "content": "text",
+          "unique": true,
+          "optional": true
+        },
+        "head": {
+          "selector": "> thead",
+          "description": "The header row, with a `<th scope=\"col\">` per column.",
+          "content": "free",
+          "unique": true
+        },
+        "body": {
+          "selector": "tbody",
+          "description": "The rows, in one or more groups. A `<th scope=\"row\">` first in the row gives the row a name.",
+          "content": "free",
+          "multiple": true
+        },
+        "sort": {
+          "selector": "th > .lt-table__sort",
+          "description": "The button in a sortable header. `aria-sort` on the cell says which way.",
+          "content": "text",
+          "multiple": true,
+          "optional": true
+        }
+      },
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "striped"
+          ],
+          "default": "default",
+          "description": "Every other row on a muted surface. Default: `default`."
+        },
+        "data-hoverable": {
+          "flag": true,
+          "description": "Highlights the row under the mouse. Use only when rows can be pressed."
+        }
+      }
+    },
+    "lt-table__sort": {
+      "component": "table",
+      "title": "Table",
+      "description": "A table for data in rows and columns. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/table/",
+      "content": "text",
+      "partOf": "lt-table",
+      "attributes": {}
+    },
+    "lt-table-scroll": {
+      "component": "table",
+      "title": "Table",
+      "description": "A table for data in rows and columns. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/table/",
+      "content": "parts",
+      "parts": {
+        "table": {
+          "selector": ".lt-table",
+          "description": "The table that can be scrolled sideways.",
+          "content": "free"
+        }
+      },
+      "attributes": {}
+    },
+    "lt-tag": {
+      "component": "tag",
+      "title": "Tag",
+      "description": "A tag for topics and filters. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/tag/",
+      "content": "text",
+      "attributes": {
+        "data-variant": {
+          "values": [
+            "filled"
+          ],
+          "default": "outline",
+          "description": "Outline or muted surface. Default: `outline`."
+        },
+        "data-selectable": {
+          "flag": true,
+          "description": "The tag can be toggled on and off. Use only on a `<button>`."
+        }
+      }
+    },
+    "lt-textarea": {
+      "component": "textarea",
+      "title": "Textarea",
+      "description": "A multi-line text field. A CSS component with one class and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/textarea/",
+      "content": "none",
+      "attributes": {
+        "data-state": {
+          "values": [
+            "invalid",
+            "success"
+          ],
+          "default": "default",
+          "description": "Validation state. Default: `default`."
+        }
+      }
+    },
+    "lt-toggle-group": {
+      "component": "toggle-group",
+      "title": "Toggle Group",
+      "description": "A group where one option is selected at a time. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/toggle-group/",
+      "content": "parts",
+      "parts": {
+        "legend": {
+          "selector": "> legend",
+          "description": "What the options choose between. Can be hidden with `lt-sr-only`, but must be there.",
+          "content": "text",
+          "unique": true
+        },
+        "option": {
+          "selector": ".lt-toggle-group__option",
+          "description": "One option: a `<label>` with the radio button and the text.",
+          "content": "free",
+          "multiple": true
+        },
+        "radio": {
+          "selector": ".lt-toggle-group__option > input[type='radio']",
+          "description": "The radio button in each option, with the same `name`.",
+          "content": "none",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-toggle-group__option": {
+      "component": "toggle-group",
+      "title": "Toggle Group",
+      "description": "A group where one option is selected at a time. A CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/toggle-group/",
+      "content": "free",
+      "partOf": "lt-toggle-group",
+      "attributes": {}
+    },
+    "lt-tooltip": {
+      "component": "tooltip",
+      "title": "Tooltip",
+      "description": "A small help text shown on hover and focus. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/tooltip/",
+      "content": "parts",
+      "parts": {
+        "trigger": {
+          "selector": "[aria-describedby]",
+          "description": "The element the bubble describes, with `aria-describedby` pointing at the bubble's id.",
+          "content": "text"
+        },
+        "bubble": {
+          "selector": ".lt-tooltip__bubble",
+          "description": "The bubble, with `role=\"tooltip\"` and the id.",
+          "content": "text"
+        }
+      },
+      "attributes": {}
+    },
+    "lt-tooltip__bubble": {
+      "component": "tooltip",
+      "title": "Tooltip",
+      "description": "A small help text shown on hover and focus. CSS component with two classes and no JavaScript.",
+      "link": "https://lo-tek.sobernetics.no/components/tooltip/",
+      "content": "text",
+      "partOf": "lt-tooltip",
+      "attributes": {}
+    },
+    "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().",
+      "link": "https://lo-tek.sobernetics.no/components/dialog/",
+      "content": "free",
+      "parts": {
+        "header": {
+          "selector": ".lt-dialog__header",
+          "description": "The header, with the heading and the subtitle. `data-color` on the dialog colours it.",
+          "content": "parts",
+          "optional": true
+        },
+        "title": {
+          "selector": ".lt-dialog__title",
+          "description": "The heading, which `aria-labelledby` points to.",
+          "content": "text",
+          "optional": true
+        },
+        "subtitle": {
+          "selector": ".lt-dialog__subtitle",
+          "description": "The line below the heading, inside the header.",
+          "content": "text",
+          "optional": true
+        },
+        "body": {
+          "selector": ".lt-dialog__body",
+          "description": "The content, which scrolls when the dialog gets too tall. Must be a direct child.",
+          "content": "free",
+          "optional": true
+        },
+        "footer": {
+          "selector": ".lt-dialog__footer",
+          "description": "The row of buttons at the bottom, often a `<form method=\"dialog\">`.",
+          "content": "free",
+          "optional": true
+        }
+      },
+      "attributes": {
+        "data-color": {
+          "values": [
+            "brand",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "neutral",
+          "description": "Colour of the header. Default: none."
+        }
+      }
+    },
+    "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().",
+      "link": "https://lo-tek.sobernetics.no/components/dialog/",
+      "content": "free",
+      "partOf": "lt-dialog",
+      "attributes": {}
+    },
+    "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().",
+      "link": "https://lo-tek.sobernetics.no/components/dialog/",
+      "content": "text",
+      "partOf": "lt-dialog",
+      "attributes": {}
+    },
+    "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().",
+      "link": "https://lo-tek.sobernetics.no/components/dialog/",
+      "content": "free",
+      "partOf": "lt-dialog",
+      "attributes": {}
+    },
+    "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().",
+      "link": "https://lo-tek.sobernetics.no/components/dialog/",
+      "content": "parts",
+      "partOf": "lt-dialog",
+      "parts": {
+        "title": {
+          "selector": ".lt-dialog__title",
+          "description": "The heading.",
+          "content": "text"
+        },
+        "subtitle": {
+          "selector": ".lt-dialog__subtitle",
+          "description": "The line below the heading.",
+          "content": "text",
+          "optional": true
+        }
+      },
+      "attributes": {}
+    },
+    "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().",
+      "link": "https://lo-tek.sobernetics.no/components/dialog/",
+      "content": "text",
+      "partOf": "lt-dialog",
+      "attributes": {}
+    },
+    "lt-error-summary": {
+      "component": "error-summary",
+      "title": "Error Summary",
+      "description": "Collects the errors in a form and takes the user to the field that failed. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/error-summary/",
+      "content": "parts",
+      "parts": {
+        "title": {
+          "selector": ".lt-error-summary__title",
+          "description": "The heading, which says how many errors the form has.",
+          "content": "text"
+        },
+        "list": {
+          "selector": "ul",
+          "description": "The list with one link per error.",
+          "content": "parts"
+        },
+        "link": {
+          "selector": "li a[href^='#']",
+          "description": "The link to a field with an error, with the error message as text and the field's id after `#`.",
+          "content": "text",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-error-summary__title": {
+      "component": "error-summary",
+      "title": "Error Summary",
+      "description": "Collects the errors in a form and takes the user to the field that failed. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/error-summary/",
+      "content": "text",
+      "partOf": "lt-error-summary",
+      "attributes": {}
+    },
+    "lt-popover": {
+      "component": "popover",
+      "title": "Popover",
+      "description": "Panel that hangs below a button and closes itself. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/popover/",
+      "content": "free",
+      "attributes": {}
+    },
+    "lt-session-timeout": {
+      "component": "session-timeout",
+      "title": "Session Timeout",
+      "description": "Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.",
+      "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
+      "content": "parts",
+      "parts": {
+        "dialog": {
+          "selector": ".lt-session-timeout__dialog",
+          "description": "The dialog with the warning, with `role=\"alertdialog\"`.",
+          "content": "parts"
+        },
+        "title": {
+          "selector": ".lt-session-timeout__title",
+          "description": "The heading in the dialog.",
+          "content": "text",
+          "optional": true
+        },
+        "text": {
+          "selector": ".lt-session-timeout__text",
+          "description": "The paragraph with the time remaining.",
+          "content": "text"
+        },
+        "count": {
+          "selector": ".lt-session-timeout__count",
+          "description": "The number that counts down, inside the paragraph. The component fills it.",
+          "content": "none"
+        },
+        "status": {
+          "selector": "[role='status']",
+          "description": "The announcement. Left empty, and the component fills it.",
+          "content": "none"
+        },
+        "actions": {
+          "selector": ".lt-session-timeout__actions",
+          "description": "The button row, a `<form method=\"dialog\">`.",
+          "content": "parts"
+        },
+        "button": {
+          "selector": ".lt-session-timeout__actions button",
+          "description": "The buttons that extend the session or log out.",
+          "content": "text",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-session-timeout__dialog": {
+      "component": "session-timeout",
+      "title": "Session Timeout",
+      "description": "Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.",
+      "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
+      "content": "parts",
+      "partOf": "lt-session-timeout",
+      "parts": {
+        "title": {
+          "selector": ".lt-session-timeout__title",
+          "description": "The heading.",
+          "content": "text",
+          "optional": true
+        },
+        "text": {
+          "selector": ".lt-session-timeout__text",
+          "description": "The paragraph with the time remaining.",
+          "content": "text"
+        },
+        "count": {
+          "selector": ".lt-session-timeout__count",
+          "description": "The number that counts down, inside the paragraph.",
+          "content": "none"
+        },
+        "status": {
+          "selector": "[role='status']",
+          "description": "The announcement, which the component fills.",
+          "content": "none"
+        },
+        "actions": {
+          "selector": ".lt-session-timeout__actions",
+          "description": "The button row, a `<form method=\"dialog\">`.",
+          "content": "parts"
+        }
+      },
+      "attributes": {}
+    },
+    "lt-session-timeout__title": {
+      "component": "session-timeout",
+      "title": "Session Timeout",
+      "description": "Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.",
+      "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
+      "content": "text",
+      "partOf": "lt-session-timeout",
+      "attributes": {}
+    },
+    "lt-session-timeout__text": {
+      "component": "session-timeout",
+      "title": "Session Timeout",
+      "description": "Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.",
+      "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
+      "content": "text",
+      "partOf": "lt-session-timeout",
+      "attributes": {}
+    },
+    "lt-session-timeout__count": {
+      "component": "session-timeout",
+      "title": "Session Timeout",
+      "description": "Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.",
+      "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
+      "content": "none",
+      "partOf": "lt-session-timeout",
+      "attributes": {}
+    },
+    "lt-session-timeout__actions": {
+      "component": "session-timeout",
+      "title": "Session Timeout",
+      "description": "Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.",
+      "link": "https://lo-tek.sobernetics.no/components/session-timeout/",
+      "content": "parts",
+      "partOf": "lt-session-timeout",
+      "parts": {
+        "button": {
+          "selector": "button",
+          "description": "The buttons that extend the session or log out.",
+          "content": "text",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-suggestion__list": {
+      "component": "suggestion",
+      "title": "Suggestion",
+      "description": "Field with a suggestion list that narrows as the user types. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/suggestion/",
+      "content": "parts",
+      "parts": {
+        "option": {
+          "selector": "[role='option'], .lt-suggestion__option, > li:not([role])",
+          "description": "One suggestion: the role or the class when they are there, otherwise an `<li>` without a role, which the component gives the class and the role. The list can be empty until the server fills it.",
+          "content": "text",
+          "multiple": true,
+          "optional": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-suggestion__option": {
+      "component": "suggestion",
+      "title": "Suggestion",
+      "description": "Field with a suggestion list that narrows as the user types. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/suggestion/",
+      "content": "text",
+      "partOf": "lt-suggestion__list",
+      "attributes": {}
+    },
+    "lt-suggestion__value": {
+      "component": "suggestion",
+      "title": "Suggestion",
+      "description": "Field with a suggestion list that narrows as the user types. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/suggestion/",
+      "content": "none",
+      "attributes": {}
+    },
+    "lt-suggestion__empty": {
+      "component": "suggestion",
+      "title": "Suggestion",
+      "description": "Field with a suggestion list that narrows as the user types. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/suggestion/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-tabs__list": {
+      "component": "tabs",
+      "title": "Tabs",
+      "description": "Tab list of links to their panels. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/tabs/",
+      "content": "free",
+      "parts": {
+        "tab": {
+          "selector": "a[role='tab'][href^='#'], a[href^='#']:not([role])",
+          "description": "A tab: a link to its panel, such as `<a href=\"#attachments\">`. When the server has written `role=\"tab\"`, only the links with the role are tabs, and the list can hold other links. `role=\"tab\"` on something that is not a link is not a tab.",
+          "content": "text",
+          "multiple": true
+        }
+      },
+      "attributes": {}
+    },
+    "lt-tabs__panel": {
+      "component": "tabs",
+      "title": "Tabs",
+      "description": "Tab list of links to their panels. Frame component.",
+      "link": "https://lo-tek.sobernetics.no/components/tabs/",
+      "content": "free",
+      "attributes": {}
+    },
+    "lt-connection-status": {
+      "component": "connection-status",
+      "title": "Connection Status",
+      "description": "Tells the user when the connection to the server is gone. Standalone component.",
+      "link": "https://lo-tek.sobernetics.no/components/connection-status/",
+      "content": "none",
+      "attributes": {}
+    },
+    "lt-connection-status__bar": {
+      "component": "connection-status",
+      "title": "Connection Status",
+      "description": "Tells the user when the connection to the server is gone. Standalone component.",
+      "link": "https://lo-tek.sobernetics.no/components/connection-status/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-toast": {
+      "component": "toast",
+      "title": "Toast",
+      "description": "A queue of short messages in the corner of the screen. Standalone component.",
+      "link": "https://lo-tek.sobernetics.no/components/toast/",
+      "content": "none",
+      "attributes": {}
+    },
+    "lt-toast__message": {
+      "component": "toast",
+      "title": "Toast",
+      "description": "A queue of short messages in the corner of the screen. Standalone component.",
+      "link": "https://lo-tek.sobernetics.no/components/toast/",
+      "content": "free",
+      "attributes": {}
+    },
+    "lt-toast__close": {
+      "component": "toast",
+      "title": "Toast",
+      "description": "A queue of short messages in the corner of the screen. Standalone component.",
+      "link": "https://lo-tek.sobernetics.no/components/toast/",
+      "content": "text",
+      "attributes": {}
+    },
+    "lt-theme-control": {
+      "component": "customising",
+      "title": "Customising",
+      "description": "Change colours, shape and size in LO-TEK without losing the changes on the next upgrade.",
+      "link": "https://lo-tek.sobernetics.no/customising/",
+      "content": "none",
+      "attributes": {}
+    }
+  },
+  "builders": [
+    {
+      "name": "accordion",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "plain"
+            ]
+          },
+          "description": "Its own frame, or just a line between the panels. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-accordion"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "default": {},
+                "plain": {
+                  "data-variant": "plain"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "alert",
+      "options": [
+        {
+          "name": "color",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "info",
+              "success",
+              "warning",
+              "danger"
+            ]
+          },
+          "description": "What the message means. Left out, it is the neutral one."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-alert"
+          },
+          "options": {
+            "color": {
+              "cases": {
+                "info": {
+                  "data-color": "info"
+                },
+                "success": {
+                  "data-color": "success"
+                },
+                "warning": {
+                  "data-color": "warning"
+                },
+                "danger": {
+                  "data-color": "danger"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "avatar",
+      "options": [
+        {
+          "name": "size",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "Size. Default: `medium`."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "circle",
+              "square"
+            ]
+          },
+          "description": "Round or rounded square. Default: `circle`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-avatar"
+          },
+          "options": {
+            "size": {
+              "cases": {
+                "small": {
+                  "data-size": "small"
+                },
+                "medium": {},
+                "large": {
+                  "data-size": "large"
+                }
+              }
+            },
+            "variant": {
+              "cases": {
+                "circle": {},
+                "square": {
+                  "data-variant": "square"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "badge",
+      "options": [
+        {
+          "name": "color",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "info",
+              "success",
+              "warning",
+              "danger",
+              "neutral"
+            ]
+          },
+          "description": "What the status means. Default: `info`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-badge"
+          },
+          "options": {
+            "color": {
+              "cases": {
+                "info": {},
+                "success": {
+                  "data-color": "success"
+                },
+                "warning": {
+                  "data-color": "warning"
+                },
+                "danger": {
+                  "data-color": "danger"
+                },
+                "neutral": {
+                  "data-color": "neutral"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "breadcrumbs",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-breadcrumbs"
+          },
+          "options": {}
+        }
+      }
+    },
+    {
+      "name": "button",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "primary",
+              "secondary",
+              "ghost",
+              "danger"
+            ]
+          },
+          "description": "How weighty the action is. Default: `primary`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-button"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "primary": {},
+                "secondary": {
+                  "data-variant": "secondary"
+                },
+                "ghost": {
+                  "data-variant": "ghost"
+                },
+                "danger": {
+                  "data-variant": "danger"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "card",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "outline",
+              "filled"
+            ]
+          },
+          "description": "Surface or outline. Default: `outline`."
+        },
+        {
+          "name": "interactive",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The whole card is clickable. Use only on `<a>` or `<button>`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-card"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "outline": {},
+                "filled": {
+                  "data-variant": "filled"
+                }
+              }
+            },
+            "interactive": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "data-interactive": ""
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "checkbox",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-checkbox",
+            "type": "checkbox"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "connectionStatus",
+      "options": [
+        {
+          "name": "offlineText",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The text when the connection is lost."
+        },
+        {
+          "name": "onlineText",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The text when it comes back. Shown for a short while."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-connection-status",
+            "data-ignore-morph": ""
+          },
+          "options": {
+            "offlineText": {
+              "cases": {},
+              "template": {
+                "offline-text": "{offlineText}"
+              },
+              "empty": {
+                "offline-text": ""
+              }
+            },
+            "onlineText": {
+              "cases": {},
+              "template": {
+                "online-text": "{onlineText}"
+              },
+              "empty": {
+                "online-text": ""
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "dialog",
+      "options": [
+        {
+          "name": "titleId",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "Id of the heading. The dialog takes its name from it with `aria-labelledby`."
+        },
+        {
+          "name": "open",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The dialog is open. Default: closed."
+        },
+        {
+          "name": "color",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "neutral",
+              "brand",
+              "info",
+              "success",
+              "warning",
+              "danger"
+            ]
+          },
+          "description": "Colour of the header. Default: none."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "kind": "attributes"
+          },
+          "dialog": {
+            "kind": "attributes"
+          },
+          "header": {
+            "kind": "attributes"
+          },
+          "title": {
+            "kind": "attributes"
+          },
+          "subtitle": {
+            "kind": "attributes"
+          },
+          "body": {
+            "kind": "attributes"
+          },
+          "footer": {
+            "kind": "attributes"
+          }
+        }
+      },
+      "table": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "base": {},
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {
+                    "open": ""
+                  }
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {},
+                  "info": {},
+                  "success": {},
+                  "warning": {},
+                  "danger": {}
+                }
+              }
+            }
+          },
+          "dialog": {
+            "base": {
+              "class": "lt-dialog",
+              "aria-labelledby": "{titleId}"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {
+                    "open": ""
+                  }
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {
+                    "data-color": "brand"
+                  },
+                  "info": {
+                    "data-color": "info"
+                  },
+                  "success": {
+                    "data-color": "success"
+                  },
+                  "warning": {
+                    "data-color": "warning"
+                  },
+                  "danger": {
+                    "data-color": "danger"
+                  }
+                }
+              }
+            }
+          },
+          "header": {
+            "base": {
+              "class": "lt-dialog__header"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {}
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {},
+                  "info": {},
+                  "success": {},
+                  "warning": {},
+                  "danger": {}
+                }
+              }
+            }
+          },
+          "title": {
+            "base": {
+              "class": "lt-dialog__title",
+              "id": "{titleId}"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {}
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {},
+                  "info": {},
+                  "success": {},
+                  "warning": {},
+                  "danger": {}
+                }
+              }
+            }
+          },
+          "subtitle": {
+            "base": {
+              "class": "lt-dialog__subtitle"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {}
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {},
+                  "info": {},
+                  "success": {},
+                  "warning": {},
+                  "danger": {}
+                }
+              }
+            }
+          },
+          "body": {
+            "base": {
+              "class": "lt-dialog__body"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {}
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {},
+                  "info": {},
+                  "success": {},
+                  "warning": {},
+                  "danger": {}
+                }
+              }
+            }
+          },
+          "footer": {
+            "base": {
+              "class": "lt-dialog__footer"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {}
+                }
+              },
+              "color": {
+                "cases": {
+                  "neutral": {},
+                  "brand": {},
+                  "info": {},
+                  "success": {},
+                  "warning": {},
+                  "danger": {}
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "divider",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "subtle",
+              "strong"
+            ]
+          },
+          "description": "How visible the line is. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-divider"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "default": {},
+                "subtle": {
+                  "data-variant": "subtle"
+                },
+                "strong": {
+                  "data-variant": "strong"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "errorSummary",
+      "options": [
+        {
+          "name": "count",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "The number of errors the server found. When it is zero, the box is hidden."
+        },
+        {
+          "name": "id",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The id of the box, so the form can move focus here after submission."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "kind": "attributes"
+          },
+          "title": {
+            "kind": "attributes"
+          }
+        }
+      }
+    },
+    {
+      "name": "errorText",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "error",
+              "warning"
+            ]
+          },
+          "description": "Whether the error stops submission or only warns. Default: `error`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-error-text"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "error": {},
+                "warning": {
+                  "data-variant": "warning"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "field",
+      "options": [
+        {
+          "name": "id",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The id of the control. Required."
+        },
+        {
+          "name": "help",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The field has a help text to connect with `aria-describedby`."
+        },
+        {
+          "name": "error",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The field has an error text. It is hidden until the field is invalid."
+        },
+        {
+          "name": "helpId",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "A separate id for the help text. Derived from `id` if left out."
+        },
+        {
+          "name": "errorId",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "A separate id for the error text. Derived from `id` if left out."
+        },
+        {
+          "name": "required",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "symbol",
+              "text"
+            ]
+          },
+          "description": "Marks the label as required."
+        },
+        {
+          "name": "optional",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Marks the label as optional."
+        },
+        {
+          "name": "invalid",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The field is invalid: shows the error text and sets `aria-invalid`."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The control is disabled."
+        },
+        {
+          "name": "describedBy",
+          "required": false,
+          "type": {
+            "kind": "textList"
+          },
+          "description": "Extra ids to include in `aria-describedby`."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "label": {
+            "kind": "attributes"
+          },
+          "control": {
+            "kind": "attributes"
+          },
+          "help": {
+            "kind": "attributes"
+          },
+          "error": {
+            "kind": "attributes"
+          },
+          "state": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          }
+        }
+      }
+    },
+    {
+      "name": "fieldset",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state for the whole group. Default: `default`."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Disables all the controls in the group."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-fieldset"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            },
+            "disabled": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "disabled": ""
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "fileUpload",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        },
+        {
+          "name": "multiple",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Allow several files."
+        },
+        {
+          "name": "accept",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The file types the field accepts, such as `.pdf,image/*`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-file-upload",
+            "type": "file"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            },
+            "multiple": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "multiple": ""
+                }
+              }
+            },
+            "accept": {
+              "cases": {},
+              "template": {
+                "accept": "{accept}"
+              },
+              "empty": {
+                "accept": ""
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "heading",
+      "options": [
+        {
+          "name": "size",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "xs",
+              "s",
+              "m",
+              "l",
+              "xl",
+              "mega"
+            ]
+          },
+          "description": "Visual size. Default: `l`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-heading"
+          },
+          "options": {
+            "size": {
+              "cases": {
+                "xs": {
+                  "data-size": "xs"
+                },
+                "s": {
+                  "data-size": "s"
+                },
+                "m": {
+                  "data-size": "m"
+                },
+                "l": {},
+                "xl": {
+                  "data-size": "xl"
+                },
+                "mega": {
+                  "data-size": "mega"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "helpText",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "muted",
+              "strong",
+              "success",
+              "warning"
+            ]
+          },
+          "description": "How loudly the text should speak. Default: `muted`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-help-text"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "muted": {},
+                "strong": {
+                  "data-variant": "strong"
+                },
+                "success": {
+                  "data-variant": "success"
+                },
+                "warning": {
+                  "data-variant": "warning"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "icon",
+      "options": [
+        {
+          "name": "label",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "What the icon means, when it stands alone and means something, such as a warning sign with no text next to it. Becomes `aria-label` with `role=\"img\"`. Without it the icon is decoration, and is hidden from screen readers."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-icon",
+            "aria-hidden": "true"
+          },
+          "options": {
+            "label": {
+              "cases": {},
+              "template": {
+                "aria-hidden": null,
+                "role": "img",
+                "aria-label": "{label}"
+              },
+              "empty": {}
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "input",
+      "options": [
+        {
+          "name": "type",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "text",
+              "password",
+              "email",
+              "number",
+              "date",
+              "datetime-local",
+              "week",
+              "month",
+              "tel",
+              "url",
+              "search",
+              "time"
+            ]
+          },
+          "description": "The HTML type. Set as `type`, and decides the icon. Default: `text`."
+        },
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-input",
+            "type": "text"
+          },
+          "options": {
+            "type": {
+              "cases": {
+                "text": {},
+                "password": {
+                  "type": "password"
+                },
+                "email": {
+                  "type": "email"
+                },
+                "number": {
+                  "type": "number"
+                },
+                "date": {
+                  "type": "date",
+                  "data-variant": "date"
+                },
+                "datetime-local": {
+                  "type": "datetime-local",
+                  "data-variant": "datetime-local"
+                },
+                "week": {
+                  "type": "week"
+                },
+                "month": {
+                  "type": "month"
+                },
+                "tel": {
+                  "type": "tel"
+                },
+                "url": {
+                  "type": "url"
+                },
+                "search": {
+                  "type": "search"
+                },
+                "time": {
+                  "type": "time",
+                  "data-variant": "time"
+                }
+              }
+            },
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "label",
+      "options": [
+        {
+          "name": "required",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "symbol",
+              "text"
+            ]
+          },
+          "description": "Marks the field as required, with an asterisk or with the word \"(required)\"."
+        },
+        {
+          "name": "optional",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Marks the field as optional. Choose one of `required` and `optional`."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Mutes the text when the control is disabled."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      }
+    },
+    {
+      "name": "legend",
+      "options": [
+        {
+          "name": "required",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "symbol",
+              "text"
+            ]
+          },
+          "description": "Marks the group as required, with an asterisk or with the word \"(required)\"."
+        },
+        {
+          "name": "optional",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Marks the group as optional. Choose one of `required` and `optional`."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Mutes the text when the group is disabled."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      }
+    },
+    {
+      "name": "link",
+      "options": [
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The link cannot be clicked yet. Gives `aria-disabled`, `role=\"link\"` and `tabindex=\"0\"`, so screen readers still find it as a link and can say so. Remove `href` as well: otherwise Enter follows it."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-link"
+          },
+          "options": {
+            "disabled": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "role": "link",
+                  "tabindex": "0",
+                  "aria-disabled": "true"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "list",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "plain",
+              "divided"
+            ]
+          },
+          "description": "Bullets, plain rows, or rows with a line between them. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-list"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "default": {},
+                "plain": {
+                  "data-variant": "plain"
+                },
+                "divided": {
+                  "data-variant": "divided"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "pagination",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-pagination"
+          },
+          "options": {}
+        }
+      }
+    },
+    {
+      "name": "paragraph",
+      "options": [
+        {
+          "name": "size",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "Text size. Default: `medium`."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "lead"
+            ]
+          },
+          "description": "`lead` is the introduction right below the heading. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-paragraph"
+          },
+          "options": {
+            "size": {
+              "cases": {
+                "small": {
+                  "data-size": "small"
+                },
+                "medium": {},
+                "large": {
+                  "data-size": "large"
+                }
+              }
+            },
+            "variant": {
+              "cases": {
+                "default": {},
+                "lead": {
+                  "data-variant": "lead"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "popover",
+      "options": [
+        {
+          "name": "id",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "Id of the panel. Connects the button to the panel with `aria-controls`."
+        },
+        {
+          "name": "open",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The panel is open. Default: closed."
+        },
+        {
+          "name": "placement",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "bottom-start",
+              "bottom-end",
+              "top-start",
+              "top-end"
+            ]
+          },
+          "description": "Which edge the panel hangs from. Default: `bottom-start`."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "kind": "attributes"
+          },
+          "trigger": {
+            "kind": "attributes"
+          },
+          "panel": {
+            "kind": "attributes"
+          }
+        }
+      },
+      "table": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "base": {},
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {
+                    "open": ""
+                  }
+                }
+              },
+              "placement": {
+                "cases": {
+                  "bottom-start": {},
+                  "bottom-end": {
+                    "placement": "bottom-end"
+                  },
+                  "top-start": {
+                    "placement": "top-start"
+                  },
+                  "top-end": {
+                    "placement": "top-end"
+                  }
+                }
+              }
+            }
+          },
+          "trigger": {
+            "base": {
+              "type": "button",
+              "aria-expanded": "false",
+              "aria-controls": "{id}"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {
+                    "aria-expanded": "true"
+                  }
+                }
+              },
+              "placement": {
+                "cases": {
+                  "bottom-start": {},
+                  "bottom-end": {},
+                  "top-start": {},
+                  "top-end": {}
+                }
+              }
+            }
+          },
+          "panel": {
+            "base": {
+              "class": "lt-popover",
+              "id": "{id}",
+              "popover": "manual"
+            },
+            "options": {
+              "open": {
+                "cases": {
+                  "false": {},
+                  "true": {}
+                }
+              },
+              "placement": {
+                "cases": {
+                  "bottom-start": {},
+                  "bottom-end": {},
+                  "top-start": {},
+                  "top-end": {}
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "progress",
+      "options": [
+        {
+          "name": "value",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "How far it has come. Leave it out, and the bar is indeterminate."
+        },
+        {
+          "name": "max",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "What counts as full. Default: `100`."
+        },
+        {
+          "name": "color",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "success",
+              "warning",
+              "danger"
+            ]
+          },
+          "description": "What the number means. The default is the accent colour, meaning \"this is in progress\"."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "What is in progress. Becomes `aria-label`, so the bar has a name."
+        },
+        {
+          "name": "valueText",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "How far it has come, in words. Becomes `aria-valuetext`, which the screen reader reads instead of the percentage: \"Step 3 of 7\" says more than \"43 percent\", and `max` is rarely announced."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-progress",
+            "max": "100"
+          },
+          "options": {
+            "value": {
+              "cases": {},
+              "template": {
+                "value": "{value}"
+              }
+            },
+            "max": {
+              "cases": {},
+              "template": {
+                "max": "{max}"
+              }
+            },
+            "color": {
+              "cases": {
+                "success": {
+                  "data-color": "success"
+                },
+                "warning": {
+                  "data-color": "warning"
+                },
+                "danger": {
+                  "data-color": "danger"
+                }
+              }
+            },
+            "label": {
+              "cases": {},
+              "template": {
+                "aria-label": "{label}"
+              },
+              "empty": {
+                "aria-label": ""
+              }
+            },
+            "valueText": {
+              "cases": {},
+              "template": {
+                "aria-valuetext": "{valueText}"
+              },
+              "empty": {
+                "aria-valuetext": ""
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "radio",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-radio",
+            "type": "radio"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "search",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-input lt-search",
+            "type": "search"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "select",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        },
+        {
+          "name": "picker",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "auto",
+              "styled"
+            ]
+          },
+          "description": "Who draws the dropdown list. Default: `auto`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-select"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            },
+            "picker": {
+              "cases": {
+                "auto": {},
+                "styled": {
+                  "data-picker": "styled"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "sessionTimeout",
+      "options": [
+        {
+          "name": "titleId",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "Id of the heading. The dialog takes its name from it with `aria-labelledby`."
+        },
+        {
+          "name": "warnAt",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "Seconds without activity before the warning appears. Default: 25 minutes."
+        },
+        {
+          "name": "expiresAt",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "Seconds without activity before the session expires. Default: 30 minutes."
+        },
+        {
+          "name": "activityInterval",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "Seconds between each `session-activity` while the user is active. Default: 60."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "kind": "attributes"
+          },
+          "dialog": {
+            "kind": "attributes"
+          },
+          "title": {
+            "kind": "attributes"
+          },
+          "text": {
+            "kind": "attributes"
+          },
+          "count": {
+            "kind": "attributes"
+          },
+          "live": {
+            "kind": "attributes"
+          },
+          "actions": {
+            "kind": "attributes"
+          },
+          "extend": {
+            "kind": "attributes"
+          },
+          "logout": {
+            "kind": "attributes"
+          }
+        }
+      },
+      "table": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "base": {
+              "class": "lt-session-timeout",
+              "data-ignore-morph": ""
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {
+                  "warn-at": "{warnAt}"
+                }
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {
+                  "expires-at": "{expiresAt}"
+                }
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {
+                  "activity-interval": "{activityInterval}"
+                }
+              }
+            }
+          },
+          "dialog": {
+            "base": {
+              "class": "lt-session-timeout__dialog",
+              "role": "alertdialog",
+              "aria-labelledby": "{titleId}"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "title": {
+            "base": {
+              "class": "lt-session-timeout__title",
+              "id": "{titleId}"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "text": {
+            "base": {
+              "class": "lt-session-timeout__text"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "count": {
+            "base": {
+              "class": "lt-session-timeout__count",
+              "aria-hidden": "true"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "live": {
+            "base": {
+              "class": "lt-sr-only",
+              "role": "status"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "actions": {
+            "base": {
+              "class": "lt-session-timeout__actions",
+              "method": "dialog"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "extend": {
+            "base": {
+              "class": "lt-button",
+              "value": "extend"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          },
+          "logout": {
+            "base": {
+              "class": "lt-button",
+              "data-variant": "secondary",
+              "value": "logout"
+            },
+            "options": {
+              "warnAt": {
+                "cases": {},
+                "template": {}
+              },
+              "expiresAt": {
+                "cases": {},
+                "template": {}
+              },
+              "activityInterval": {
+                "cases": {},
+                "template": {}
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "block",
+              "text",
+              "circle"
+            ]
+          },
+          "description": "Shape. Default: `block`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-skeleton",
+            "aria-hidden": "true"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "block": {},
+                "text": {
+                  "data-variant": "text"
+                },
+                "circle": {
+                  "data-variant": "circle"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "skipLink",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-skip-link"
+          },
+          "options": {}
+        }
+      }
+    },
+    {
+      "name": "spinner",
+      "options": [
+        {
+          "name": "size",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "small",
+              "medium",
+              "large"
+            ]
+          },
+          "description": "Size. Default: `medium`."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "What is loading. Becomes `aria-label`, so the ring has a name for screen readers."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-spinner"
+          },
+          "options": {
+            "size": {
+              "cases": {
+                "small": {
+                  "data-size": "small"
+                },
+                "medium": {},
+                "large": {
+                  "data-size": "large"
+                }
+              }
+            },
+            "label": {
+              "cases": {},
+              "template": {
+                "role": "status",
+                "aria-label": "{label}"
+              },
+              "empty": {
+                "aria-label": ""
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "srOnly",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-sr-only"
+          },
+          "options": {}
+        }
+      }
+    },
+    {
+      "name": "suggestion",
+      "options": [
+        {
+          "name": "invalid",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The field is invalid: shows the error text and sets `aria-invalid`."
+        },
+        {
+          "name": "error",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The field has an error text. It is hidden until the field is invalid."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The control is disabled."
+        },
+        {
+          "name": "required",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "symbol",
+              "text"
+            ]
+          },
+          "description": "Marks the label as required."
+        },
+        {
+          "name": "optional",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Marks the label as optional."
+        },
+        {
+          "name": "help",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The field has a help text to connect with `aria-describedby`."
+        },
+        {
+          "name": "helpId",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "A separate id for the help text. Derived from `id` if left out."
+        },
+        {
+          "name": "errorId",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "A separate id for the error text. Derived from `id` if left out."
+        },
+        {
+          "name": "describedBy",
+          "required": false,
+          "type": {
+            "kind": "textList"
+          },
+          "description": "Extra ids to include in `aria-describedby`."
+        },
+        {
+          "name": "id",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "Shared id stem. The control becomes `${id}`, the list `${id}-list`, and the options `${id}-option-${key}`."
+        },
+        {
+          "name": "keys",
+          "required": false,
+          "type": {
+            "kind": "textList"
+          },
+          "description": "One key per option the server sends, taken from the data, such as a record id. The key gives the option its id, so an update that sends the list again recognises the options. An empty key, whitespace or two identical keys throw. Default: no options."
+        },
+        {
+          "name": "activeIndex",
+          "required": false,
+          "type": {
+            "kind": "number"
+          },
+          "description": "The option highlighted with the arrow keys. Default: none."
+        },
+        {
+          "name": "open",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The list is open. Default: closed."
+        },
+        {
+          "name": "pending",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The answer to the search has not arrived yet. The list gets `aria-busy`, and the empty message stays hidden, so an asynchronous search does not say \"No matches\" in the gap between the keystroke and the answer."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "label": {
+            "kind": "attributes"
+          },
+          "control": {
+            "kind": "attributes"
+          },
+          "list": {
+            "kind": "attributes"
+          },
+          "options": {
+            "kind": "list",
+            "of": {
+              "kind": "attributes"
+            }
+          },
+          "empty": {
+            "kind": "attributes"
+          },
+          "status": {
+            "kind": "attributes"
+          },
+          "value": {
+            "kind": "attributes"
+          },
+          "help": {
+            "kind": "attributes"
+          },
+          "error": {
+            "kind": "attributes"
+          },
+          "state": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          }
+        }
+      }
+    },
+    {
+      "name": "switch",
+      "options": [
+        {
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The control is disabled. Do not use it to lock the switch while a save is in progress: `disabled` takes focus away from it, and focus does not come back."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-switch",
+            "type": "checkbox",
+            "role": "switch"
+          },
+          "options": {
+            "disabled": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "disabled": ""
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "table",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "striped"
+            ]
+          },
+          "description": "Every other row on a muted surface. Default: `default`."
+        },
+        {
+          "name": "hoverable",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "Highlights the row under the mouse. Use only when rows can be pressed."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-table"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "default": {},
+                "striped": {
+                  "data-variant": "striped"
+                }
+              }
+            },
+            "hoverable": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "data-hoverable": ""
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "tableSort",
+      "options": [
+        {
+          "name": "direction",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "ascending",
+              "descending"
+            ]
+          },
+          "description": "The direction the column is sorted in. Left out, it means the table is not sorted by this column, and the header gets no `aria-sort`."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "header": {
+            "kind": "attributes"
+          },
+          "button": {
+            "kind": "attributes"
+          }
+        }
+      },
+      "table": {
+        "kind": "group",
+        "fields": {
+          "header": {
+            "base": {},
+            "options": {
+              "direction": {
+                "cases": {
+                  "ascending": {
+                    "aria-sort": "ascending"
+                  },
+                  "descending": {
+                    "aria-sort": "descending"
+                  }
+                }
+              }
+            }
+          },
+          "button": {
+            "base": {
+              "class": "lt-table__sort",
+              "type": "button"
+            },
+            "options": {
+              "direction": {
+                "cases": {
+                  "ascending": {},
+                  "descending": {}
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "tabs",
+      "options": [
+        {
+          "name": "id",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The shared id stem. The panels become `${id}-${key}`, and the headings in them `${id}-${key}-heading`."
+        },
+        {
+          "name": "keys",
+          "required": true,
+          "type": {
+            "kind": "textList"
+          },
+          "description": "One key per tab, from the data, such as `[\"application\", \"attachments\"]`. The key gives the panel its id, and the link points to it. An index is not a key: if the server inserts a tab first, the same index points to another panel. An empty key, whitespace and two identical keys throw."
+        },
+        {
+          "name": "label",
+          "required": true,
+          "type": {
+            "kind": "text"
+          },
+          "description": "What the tabs choose between. Becomes `aria-label` on the tab list, which must have a name. Empty, or only whitespace, throws."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "list": {
+            "kind": "attributes"
+          },
+          "tabs": {
+            "kind": "list",
+            "of": {
+              "kind": "attributes"
+            }
+          },
+          "panels": {
+            "kind": "list",
+            "of": {
+              "kind": "attributes"
+            }
+          },
+          "headings": {
+            "kind": "list",
+            "of": {
+              "kind": "attributes"
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "tag",
+      "options": [
+        {
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "outline",
+              "filled"
+            ]
+          },
+          "description": "Outline or muted surface. Default: `outline`."
+        },
+        {
+          "name": "selectable",
+          "required": false,
+          "type": {
+            "kind": "flag"
+          },
+          "description": "The tag can be toggled on and off. Use only on a `<button>`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-tag"
+          },
+          "options": {
+            "variant": {
+              "cases": {
+                "outline": {},
+                "filled": {
+                  "data-variant": "filled"
+                }
+              }
+            },
+            "selectable": {
+              "cases": {
+                "false": {},
+                "true": {
+                  "data-selectable": ""
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "textarea",
+      "options": [
+        {
+          "name": "state",
+          "required": false,
+          "type": {
+            "kind": "values",
+            "values": [
+              "default",
+              "invalid",
+              "success"
+            ]
+          },
+          "description": "Validation state. Default: `default`."
+        }
+      ],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-textarea"
+          },
+          "options": {
+            "state": {
+              "cases": {
+                "default": {},
+                "invalid": {
+                  "data-state": "invalid",
+                  "aria-invalid": "true"
+                },
+                "success": {
+                  "data-state": "success"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "toast",
+      "options": [
+        {
+          "name": "label",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "Text that says what the region is. Becomes `aria-label`."
+        },
+        {
+          "name": "closeLabel",
+          "required": false,
+          "type": {
+            "kind": "text"
+          },
+          "description": "The screen reader name of the close button in each message. Default: \"Close message\". `closeLabel` in `show()` overrides it for one message."
+        }
+      ],
+      "returns": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "kind": "attributes"
+          },
+          "message": {
+            "kind": "attributes"
+          },
+          "close": {
+            "kind": "attributes"
+          }
+        }
+      },
+      "table": {
+        "kind": "group",
+        "fields": {
+          "host": {
+            "base": {
+              "class": "lt-toast",
+              "role": "status",
+              "aria-live": "polite",
+              "aria-atomic": "false",
+              "aria-label": "Notifications",
+              "data-ignore-morph": ""
+            },
+            "options": {
+              "label": {
+                "cases": {},
+                "template": {
+                  "aria-label": "{label}"
+                },
+                "empty": {
+                  "aria-label": ""
+                }
+              },
+              "closeLabel": {
+                "cases": {},
+                "template": {
+                  "close-label": "{closeLabel}"
+                },
+                "empty": {
+                  "close-label": ""
+                }
+              }
+            }
+          },
+          "message": {
+            "base": {
+              "class": "lt-toast__message"
+            },
+            "options": {
+              "label": {
+                "cases": {},
+                "template": {},
+                "empty": {}
+              },
+              "closeLabel": {
+                "cases": {},
+                "template": {},
+                "empty": {}
+              }
+            }
+          },
+          "close": {
+            "base": {
+              "class": "lt-toast__close"
+            },
+            "options": {
+              "label": {
+                "cases": {},
+                "template": {},
+                "empty": {}
+              },
+              "closeLabel": {
+                "cases": {},
+                "template": {},
+                "empty": {}
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "toggleGroup",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-toggle-group"
+          },
+          "options": {}
+        }
+      }
+    },
+    {
+      "name": "tooltip",
+      "options": [],
+      "returns": {
+        "kind": "attributes"
+      },
+      "table": {
+        "kind": "attributes",
+        "table": {
+          "base": {
+            "class": "lt-tooltip"
+          },
+          "options": {}
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "spacing": {
+      "--lt-spacing-px": "1px",
+      "--lt-spacing-0-5": "0.125rem",
+      "--lt-spacing-1": "0.25rem",
+      "--lt-spacing-2": "0.5rem",
+      "--lt-spacing-3": "0.75rem",
+      "--lt-spacing-4": "1rem",
+      "--lt-spacing-5": "1.25rem",
+      "--lt-spacing-6": "1.5rem",
+      "--lt-spacing-7": "1.75rem",
+      "--lt-spacing-8": "2rem",
+      "--lt-spacing-10": "2.5rem",
+      "--lt-spacing-12": "3rem",
+      "--lt-spacing-16": "4rem"
+    },
+    "breakpoints": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1536px"
+    },
+    "containers": {
+      "xs": "100%",
+      "sm": "576px",
+      "md": "960px",
+      "lg": "1152px",
+      "xl": "1536px",
+      "aside": "384px",
+      "asideNarrow": "288px",
+      "wideContent": "768px"
+    },
+    "colors": {
+      "families": {
+        "accent": "Links, primary button, focus, selected state",
+        "visited": "Visited links",
+        "brand1": "First brand colour: surfaces, sections and categories. Carries no meaning of its own",
+        "brand2": "Second brand colour: surfaces, sections and categories. Carries no meaning of its own",
+        "brand3": "Third brand colour: surfaces, sections and categories. Carries no meaning of its own",
+        "neutral": "The page, body text, borders",
+        "danger": "Errors, deletion, rejection",
+        "warning": "Needs attention",
+        "success": "Completed, approved"
+      },
+      "roles": {
+        "surface": "Tinted surface: a badge, an alert, a section",
+        "border-subtle": "Decorative line, such as between two rows",
+        "border": "The border around a field or a surface",
+        "border-strong": "The field border on hover, and a table line",
+        "fill": "Filled surface: a button, a checked checkbox",
+        "text": "The family's colour as text, and the button on hover",
+        "text-strong": "Body text, headings and the link on hover",
+        "text-subtle": "Muted text: help text, placeholders",
+        "content": "The text on top of fill, and on top of text on a button on hover"
+      },
+      "layers": {
+        "canvas": "The page",
+        "raised": "A surface that lies above a card"
+      },
+      "tokens": [
+        "--lt-color-accent-surface",
+        "--lt-color-accent-border-subtle",
+        "--lt-color-accent-border",
+        "--lt-color-accent-border-strong",
+        "--lt-color-accent-fill",
+        "--lt-color-accent-text",
+        "--lt-color-accent-text-strong",
+        "--lt-color-accent-text-subtle",
+        "--lt-color-accent-content",
+        "--lt-color-visited-surface",
+        "--lt-color-visited-border-subtle",
+        "--lt-color-visited-border",
+        "--lt-color-visited-border-strong",
+        "--lt-color-visited-fill",
+        "--lt-color-visited-text",
+        "--lt-color-visited-text-strong",
+        "--lt-color-visited-text-subtle",
+        "--lt-color-visited-content",
+        "--lt-color-brand1-surface",
+        "--lt-color-brand1-border-subtle",
+        "--lt-color-brand1-border",
+        "--lt-color-brand1-border-strong",
+        "--lt-color-brand1-fill",
+        "--lt-color-brand1-text",
+        "--lt-color-brand1-text-strong",
+        "--lt-color-brand1-text-subtle",
+        "--lt-color-brand1-content",
+        "--lt-color-brand2-surface",
+        "--lt-color-brand2-border-subtle",
+        "--lt-color-brand2-border",
+        "--lt-color-brand2-border-strong",
+        "--lt-color-brand2-fill",
+        "--lt-color-brand2-text",
+        "--lt-color-brand2-text-strong",
+        "--lt-color-brand2-text-subtle",
+        "--lt-color-brand2-content",
+        "--lt-color-brand3-surface",
+        "--lt-color-brand3-border-subtle",
+        "--lt-color-brand3-border",
+        "--lt-color-brand3-border-strong",
+        "--lt-color-brand3-fill",
+        "--lt-color-brand3-text",
+        "--lt-color-brand3-text-strong",
+        "--lt-color-brand3-text-subtle",
+        "--lt-color-brand3-content",
+        "--lt-color-neutral-surface",
+        "--lt-color-neutral-border-subtle",
+        "--lt-color-neutral-border",
+        "--lt-color-neutral-border-strong",
+        "--lt-color-neutral-fill",
+        "--lt-color-neutral-text",
+        "--lt-color-neutral-text-strong",
+        "--lt-color-neutral-text-subtle",
+        "--lt-color-neutral-content",
+        "--lt-color-danger-surface",
+        "--lt-color-danger-border-subtle",
+        "--lt-color-danger-border",
+        "--lt-color-danger-border-strong",
+        "--lt-color-danger-fill",
+        "--lt-color-danger-text",
+        "--lt-color-danger-text-strong",
+        "--lt-color-danger-text-subtle",
+        "--lt-color-danger-content",
+        "--lt-color-warning-surface",
+        "--lt-color-warning-border-subtle",
+        "--lt-color-warning-border",
+        "--lt-color-warning-border-strong",
+        "--lt-color-warning-fill",
+        "--lt-color-warning-text",
+        "--lt-color-warning-text-strong",
+        "--lt-color-warning-text-subtle",
+        "--lt-color-warning-content",
+        "--lt-color-success-surface",
+        "--lt-color-success-border-subtle",
+        "--lt-color-success-border",
+        "--lt-color-success-border-strong",
+        "--lt-color-success-fill",
+        "--lt-color-success-text",
+        "--lt-color-success-text-strong",
+        "--lt-color-success-text-subtle",
+        "--lt-color-success-content",
+        "--lt-color-neutral-canvas",
+        "--lt-color-neutral-raised",
+        "--lt-color-disabled-surface",
+        "--lt-color-disabled-text",
+        "--lt-color-overlay"
+      ]
+    },
+    "components": {
+      "accordion": {
+        "--lt-accordion-radius": "var(--lt-spacing-1)",
+        "--lt-accordion-padding": "var(--lt-spacing-3) var(--lt-accordion-padding-inline, var(--lt-spacing-4))",
+        "--lt-accordion-padding-inline": "var(--lt-spacing-4)"
+      },
+      "alert": {
+        "--lt-alert-padding": "var(--lt-spacing-3) var(--lt-spacing-4)",
+        "--lt-alert-radius": "var(--lt-spacing-1)",
+        "--lt-alert-accent": "var(--lt-spacing-1)"
+      },
+      "avatar": {
+        "--lt-avatar-size": "var(--lt-spacing-10)",
+        "--lt-avatar-radius": "var(--lt-spacing-1)",
+        "--lt-avatar-stack-overlap": "calc(var(--lt-spacing-2) * -1)"
+      },
+      "badge": {
+        "--lt-badge-padding": "var(--lt-spacing-0-5) var(--lt-spacing-2)",
+        "--lt-badge-radius": "var(--lt-spacing-4)"
+      },
+      "breadcrumbs": {
+        "--lt-breadcrumbs-gap": "var(--lt-spacing-2)"
+      },
+      "button": {
+        "--lt-button-padding": "var(--lt-spacing-2) var(--lt-spacing-4)",
+        "--lt-button-font-weight": "var(--lt-font-weight-medium)",
+        "--lt-button-line-height": "var(--lt-line-height-default)",
+        "--lt-button-border-width": "1px",
+        "--lt-button-radius": "var(--lt-spacing-1)"
+      },
+      "card": {
+        "--lt-card-padding": "var(--lt-spacing-4)",
+        "--lt-card-radius": "var(--lt-spacing-2)"
+      },
+      "checkbox": {
+        "--lt-checkbox-size": "var(--lt-spacing-5)",
+        "--lt-checkbox-radius": "var(--lt-spacing-1)"
+      },
+      "connection-status": {
+        "--lt-connection-status-layer": "1000",
+        "--lt-connection-status-padding": "var(--lt-spacing-2) var(--lt-spacing-4)"
+      },
+      "dialog": {
+        "--lt-dialog-width": "min(32rem, 100%, calc(100vw - var(--lt-spacing-8)))",
+        "--lt-dialog-padding": "var(--lt-spacing-5)",
+        "--lt-dialog-radius": "var(--lt-spacing-2)",
+        "--lt-dialog-layer": "40"
+      },
+      "divider": {
+        "--lt-divider-space": "var(--lt-spacing-4)"
+      },
+      "error-summary": {
+        "--lt-error-summary-padding": "var(--lt-spacing-4)",
+        "--lt-error-summary-radius": "var(--lt-spacing-1)"
+      },
+      "fieldset": {
+        "--lt-fieldset-gap": "var(--lt-spacing-2)"
+      },
+      "file-upload": {
+        "--lt-file-upload-padding": "var(--lt-spacing-2)",
+        "--lt-file-upload-radius": "var(--lt-spacing-1)"
+      },
+      "heading": {
+        "--lt-heading-font-weight": "var(--lt-font-weight-bold)",
+        "--lt-heading-line-height": "var(--lt-line-height-heading)"
+      },
+      "input": {
+        "--lt-input-width": "100%",
+        "--lt-input-padding": "var(--lt-spacing-2) var(--lt-spacing-3)",
+        "--lt-input-radius": "var(--lt-spacing-1)"
+      },
+      "label": {
+        "--lt-label-required-symbol": "\" *\"",
+        "--lt-label-required-text": "\" (required)\"",
+        "--lt-label-optional-text": "\" (optional)\""
+      },
+      "list": {
+        "--lt-list-gap": "var(--lt-spacing-1)"
+      },
+      "pagination": {
+        "--lt-pagination-gap": "var(--lt-spacing-1)",
+        "--lt-pagination-size": "var(--lt-spacing-10)",
+        "--lt-pagination-radius": "var(--lt-spacing-1)"
+      },
+      "paragraph": {
+        "--lt-paragraph-line-height": "var(--lt-line-height-article)",
+        "--lt-paragraph-width": "70ch",
+        "--lt-paragraph-gap": "var(--lt-spacing-3)"
+      },
+      "popover": {
+        "--lt-popover-width": "min(20rem, calc(100vw - var(--lt-spacing-8)))",
+        "--lt-popover-padding": "var(--lt-spacing-3)",
+        "--lt-popover-radius": "var(--lt-spacing-1)"
+      },
+      "progress": {
+        "--lt-progress-height": "var(--lt-spacing-2)",
+        "--lt-progress-border": "var(--lt-color-neutral-border)",
+        "--lt-progress-radius": "var(--lt-spacing-1)",
+        "--lt-progress-track": "var(--lt-color-neutral-surface)",
+        "--lt-progress-fill": "var(--lt-color-accent-fill)"
+      },
+      "radio": {
+        "--lt-radio-size": "var(--lt-spacing-5)"
+      },
+      "search": {
+        "--lt-search-icon-space": "var(--lt-spacing-10)",
+        "--lt-search-icon-size": "var(--lt-spacing-5)"
+      },
+      "select": {
+        "--lt-select-width": "100%",
+        "--lt-select-padding": "var(--lt-spacing-2) var(--lt-spacing-3)",
+        "--lt-select-radius": "var(--lt-spacing-1)",
+        "--lt-select-viewport-margin": "var(--lt-spacing-2)",
+        "--lt-select-option-padding": "var(--lt-spacing-2) var(--lt-spacing-3)"
+      },
+      "session-timeout": {
+        "--lt-session-timeout-width": "26rem",
+        "--lt-session-timeout-padding": "var(--lt-spacing-5)",
+        "--lt-session-timeout-radius": "var(--lt-spacing-1)"
+      },
+      "skeleton": {
+        "--lt-skeleton-height": "var(--lt-spacing-4)",
+        "--lt-skeleton-radius": "var(--lt-spacing-1)"
+      },
+      "skip-link": {
+        "--lt-skip-link-padding": "var(--lt-spacing-2) var(--lt-spacing-4)",
+        "--lt-skip-link-radius": "var(--lt-spacing-1)"
+      },
+      "spinner": {
+        "--lt-spinner-size": "var(--lt-spacing-6)",
+        "--lt-spinner-thickness": "2px"
+      },
+      "suggestion": {
+        "--lt-suggestion-max-height": "calc(var(--lt-spacing-10) * 4)",
+        "--lt-suggestion-radius": "var(--lt-spacing-1)",
+        "--lt-suggestion-option-padding": "var(--lt-spacing-2) var(--lt-spacing-3)"
+      },
+      "switch": {
+        "--lt-switch-width": "var(--lt-spacing-10)",
+        "--lt-switch-height": "var(--lt-spacing-6)"
+      },
+      "table": {
+        "--lt-table-cell-padding": "var(--lt-spacing-2) var(--lt-spacing-3)"
+      },
+      "tabs": {
+        "--lt-tabs-gap": "var(--lt-spacing-1)",
+        "--lt-tabs-padding": "var(--lt-spacing-2) var(--lt-spacing-4)",
+        "--lt-tabs-panel-space": "var(--lt-spacing-4)"
+      },
+      "tag": {
+        "--lt-tag-padding": "var(--lt-spacing-0-5) var(--lt-spacing-2)",
+        "--lt-tag-radius": "var(--lt-spacing-1)"
+      },
+      "textarea": {
+        "--lt-textarea-min-height": "calc(var(--lt-spacing-4) * 5)",
+        "--lt-textarea-padding": "var(--lt-spacing-2) var(--lt-spacing-3)",
+        "--lt-textarea-radius": "var(--lt-spacing-1)"
+      },
+      "toast": {
+        "--lt-toast-space": "var(--lt-spacing-4)",
+        "--lt-toast-layer": "60",
+        "--lt-toast-width": "min(24rem, calc(100vw - var(--lt-spacing-8)))",
+        "--lt-toast-padding": "var(--lt-spacing-3) var(--lt-spacing-4)",
+        "--lt-toast-radius": "var(--lt-spacing-1)"
+      },
+      "toggle-group": {
+        "--lt-toggle-group-radius": "var(--lt-spacing-1)",
+        "--lt-toggle-group-height": "var(--lt-spacing-10)",
+        "--lt-toggle-group-padding": "0 var(--lt-spacing-4)"
+      },
+      "tooltip": {
+        "--lt-tooltip-width": "16rem",
+        "--lt-tooltip-padding": "var(--lt-spacing-1) var(--lt-spacing-2)",
+        "--lt-tooltip-radius": "var(--lt-spacing-1)"
+      }
+    }
+  }
+}