kanto-ds 1.7.0 → 1.9.0

package/dist/vscode.html-custom-data.json

@@ -3,269 +3,436 @@
   "version": 1.1,
   "tags": [
     {
-      "name": "kt-avatar",
-      "description": "A person or an organisation, as a picture or as their initials.\n\nThe fallback is not decoration: most rows in most products have no photo, so\nthe initials path is the one that renders. It picks a colour from the name,\nwhich means the same person is the same colour on every screen and the eye\ncan use it.\n---\n\n\n### **CSS Parts:**\n - **base** - The avatar circle.\n- **image** - The `<img>`, when `src` is set and loads.",
+      "name": "kt-auth-form",
+      "description": "The way into a product: signing in, creating an account, resetting a\npassword, entering a code — one block, four modes.\n\nIt checks what it can before sending — an email that is one, a password, a\nname, a whole code — and says so on the field. Then `kt-submit` carries the\nmode and the values, and `wait(promise)`: the button runs the request, and\nif it rejects, its message is shown above the fields. A reset that succeeds\nsays the link is on its way.\n\nSign-in providers go in `providers`; the links between modes move the form\nitself and fire `kt-mode`. Every word is in `texts`, English until given\nothers.\n---\n\n\n### **Events:**\n - **kt-submit** - The form was sent. `detail: { mode, values, wait(promise) }`.\n- **kt-mode** - The form moved to another mode. `detail: { mode }`.\n- **kt-provider** - A provider was chosen. `detail: { id }`.\n\n### **Methods:**\n - **goTo(mode: _KtAuthMode_): _void_** - Moves the form to another mode, as its links do.\n- **submit(): _void_** - Sends the form, as its button does, once what it holds checks out.\n\n### **Slots:**\n - **logo** - Above the heading: the product's mark.\n- **footer** - Under the form: the terms, a privacy note.\n\n### **CSS Parts:**\n - **base** - The block.\n- **form** - The `<form>`.",
       "attributes": [
         {
-          "name": "name",
-          "description": "The person's name. Drives the initials, the colour and the label.",
+          "name": "mode",
+          "description": "`sign-in`, `sign-up`, `forgot` or `code`.",
+          "values": [{ "name": "KtAuthMode" }]
+        },
+        {
+          "name": "remember",
+          "description": "Shows \"Keep me signed in\" when signing in.",
           "values": []
         },
         {
-          "name": "src",
-          "description": "Photo. Falls back to initials if it is missing or fails to load.",
+          "name": "password-min",
+          "description": "The shortest password a new account may choose.",
           "values": []
         },
-        { "name": "size", "values": [{ "name": "KtAvatarSize" }] },
         {
-          "name": "square",
-          "description": "Rounds to the card radius instead of a circle — for organisations.",
+          "name": "heading-level",
+          "description": "The heading's level, 1 to 6: 1 when the form is the page.",
           "values": []
         },
         {
-          "name": "status",
-          "description": "Presence dot. Omit for none.",
-          "values": [{ "name": "KtAvatarStatus" }]
+          "name": "plain",
+          "description": "Drops the card around it, for a page that frames it already.",
+          "values": []
         },
         {
-          "name": "color",
-          "description": "Overrides the colour picked from the name.",
+          "name": "error",
+          "description": "An error to show above the fields; a failed sending sets it.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "kt-badge",
-      "description": "A compact label: a pill `tag`, a monospaced `code` token, a `category`\ntinted with a colour of your choosing, or a `count`.\n\nTwo independent axes, because they answer different questions. `variant` is\nthe **shape** — what kind of thing this is. `tone` is the **colour** — what\nit means. A tag can be neutral or dangerous; so can a count. Folding them\ninto one list would give you nine variants and no way to say \"a tag, but\nthis one is a warning\".\n\n`count` is the exception that carries no border, because a number pinned to\na nav item is not a label with an outline — it is a mark on the thing it\ncounts.\n---\n\n\n### **Events:**\n - **kt-badge-click** - A `clickable` badge was activated. Cancelable.\n- **kt-remove** - The remove button was pressed. Cancelable: cancel it and remove the badge yourself once the server agrees.\n\n### **Slots:**\n - _default_ - The text. Falls back to the `label` attribute.\n\n### **CSS Properties:**\n - **--kt-badge-color** - Category hue. The fill is this colour at 20%. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The container.\n- **remove** - The remove button, when `removable`.",
+      "name": "kt-blog-post",
+      "description": "A post, set to be read: its title, who wrote it and when, a cover, and the\nbody in a measure an eye can follow.\n\nThe body is the default slot — paragraphs, headings, lists, quotes, code,\nfigures — set as prose. The reading time is counted from it, unless given.\n---\n\n\n### **Slots:**\n - _default_ - The body.\n- **cover** - Under the header: an image, a figure with its caption.\n- **end** - After the body: tags, sharing, the next post.\n\n### **CSS Properties:**\n - **--kt-post-measure** - The column's width. 700px. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The article.\n- **header** - The title, the lead and who wrote it.\n- **body** - The body's column.",
       "attributes": [
+        { "name": "heading", "description": "The post's title.", "values": [] },
         {
-          "name": "variant",
-          "description": "The shape: what kind of thing this is.",
-          "values": [{ "name": "KtBadgeVariant" }]
+          "name": "lead",
+          "description": "A line under the title: what the post is about.",
+          "values": []
         },
         {
-          "name": "tone",
-          "description": "The colour: what it means. Independent of `variant`.",
-          "values": [{ "name": "KtBadgeTone" }]
+          "name": "date",
+          "description": "When it was published: `2026-09-14`.",
+          "values": []
         },
-        { "name": "size", "values": [{ "name": "KtBadgeSize" }] },
+        { "name": "author", "description": "Who wrote it.", "values": [] },
         {
-          "name": "label",
-          "description": "Badge text. The default slot wins when both are present.",
+          "name": "author-role",
+          "description": "Their role: \"CFO, Northwind\".",
           "values": []
         },
         {
-          "name": "color",
-          "description": "Category hue: any CSS colour. The fill is this colour at 20%.",
+          "name": "avatar",
+          "description": "Their photo's URL; without one, their initials.",
           "values": []
         },
         {
-          "name": "icon",
-          "description": "Lucide icon name, before the text.",
+          "name": "reading-time",
+          "description": "Minutes to read it. Counted from the body when 0.",
           "values": []
         },
-        { "name": "clickable", "values": [] },
         {
-          "name": "removable",
-          "description": "Adds a remove button. Fires a cancelable `kt-remove`.",
+          "name": "back-href",
+          "description": "Where All posts leads; no link without it.",
           "values": []
         },
         {
-          "name": "max",
-          "description": "Caps a numeric label: `max=\"99\"` shows `99+`.\nIgnored when the content is not a number.",
+          "name": "locale",
+          "description": "The locale the date is written in; the page's language when empty.",
           "values": []
         },
         {
-          "name": "error",
-          "description": "Shorthand for `tone=\"danger\"`, kept from the field components.",
+          "name": "heading-level",
+          "description": "The title's level: 1, since the post is the page.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "kt-button",
-      "description": "The Kanto action button.\n\nTen variants; `primary` for the one action a screen is about, `secondary`\n(a soft indigo tint) for everything supporting it. The semantic variants —\n`danger`, `warning`, `info`, `success` — are tinted fills with coloured\ntext; `delete` is the only solid red, reserved for irreversible actions.\n\nSetting `icon` with no slotted text produces a square icon-only button,\nwhich then requires a `label`.\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Moves focus to the button.\n\n### **Slots:**\n - _default_ - The button label.\n\n### **CSS Parts:**\n - **button** - The native `<button>`.\n- **icon** - The icon, when `icon` is set.",
+      "name": "kt-cta",
+      "description": "The ask at the end of a page: a heading, a line and the button that acts on\nthem.\n\n`panel`, the default, sets it on a tinted panel so it reads as the page's\nlast word; `plain` leaves it on the page. `stacked` puts the actions under\nthe words; `inline` beside them once the block is wide enough.\n---\n\n\n### **Slots:**\n - **actions** - The buttons.\n- **note** - Under the actions: what it costs, what it needs.\n\n### **CSS Parts:**\n - **base** - The section.\n- **panel** - The panel.",
       "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
         {
-          "name": "variant",
-          "description": "Visual variant.",
-          "values": [{ "name": "KtButtonVariant" }]
+          "name": "align",
+          "description": "`center` or `start`.",
+          "values": [{ "name": "center" }, { "name": "start" }]
         },
         {
-          "name": "size",
-          "description": "Height: 32 / 40 / 48px at the desktop scale.",
-          "values": [{ "name": "KtButtonSize" }]
+          "name": "variant",
+          "description": "`panel`: on a tinted panel. `plain`: on the page.",
+          "values": [{ "name": "KtCtaVariant" }]
         },
-        { "name": "disabled", "values": [] },
         {
-          "name": "type",
-          "description": "Native button behaviour. `submit` and `reset` act on the enclosing form.",
-          "values": [{ "name": "KtButtonType" }]
+          "name": "layout",
+          "description": "`stacked`: the actions under the words. `inline`: beside them, where there is room.",
+          "values": [{ "name": "KtCtaLayout" }]
         },
         {
-          "name": "icon",
-          "description": "Lucide icon name, kebab-case.",
+          "name": "heading-level",
+          "description": "The heading's level.",
           "values": []
-        },
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-empty-page",
+      "description": "The page a new account lands on, before there is anything in it: a welcome,\nand the first steps that fill it — what is done, what is next, and the way\nto each.\n\nThe steps are data: `page.steps = [{ id, title, description, action, href,\ndone }]`, numbered in order, with how far along it is over them. A step's\naction fires `kt-step`, or is a link with an `href`. For a list or a panel\nthat is empty, `kt-empty-state`.\n---\n\n\n### **Events:**\n - **kt-step** - A step's action was pressed. `detail: { id }`.\n\n### **Slots:**\n - **media** - Over the heading: an illustration, a logo.\n- **actions** - Under the steps: Skip for now, a link to the docs.\n\n### **CSS Parts:**\n - **base** - The section.\n- **step** - One step.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
         {
-          "name": "icon-position",
-          "description": "Which side of the label the icon sits on.",
-          "values": [{ "name": "left" }, { "name": "right" }]
+          "name": "heading-level",
+          "description": "The heading's level: 1, since it is the page; the steps' titles sit one under.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-error-page",
+      "description": "The page a person lands on when the one they wanted is not there: not found,\nbroken, or down for maintenance — said plainly, with the way on.\n\n`not-found` leads home (`home-href`); `error` offers to try again, firing\n`kt-retry` — cancel it to retry your own way, otherwise the page reloads;\n`maintenance` offers nothing it cannot do. The `actions` slot replaces the\nbuttons. Every word is in `texts`, English until given others.\n---\n\n\n### **Events:**\n - **kt-retry** - Try again was pressed. Cancelable; uncancelled, the page reloads.\n\n### **Slots:**\n - **actions** - Replaces the buttons: a search, a link to the status page.\n- _default_ - Under the actions: a contact line, a request id.\n\n### **CSS Parts:**\n - **base** - The block.\n- **code** - The code, large.",
+      "attributes": [
+        {
+          "name": "kind",
+          "description": "`not-found`, `error` or `maintenance`.",
+          "values": [{ "name": "KtErrorPageKind" }]
         },
         {
-          "name": "label",
-          "description": "Accessible name. Required for an icon-only button.",
+          "name": "code",
+          "description": "The code shown large. Defaults to the kind's: 404, 500, 503.",
           "values": []
         },
         {
-          "name": "full-width",
-          "description": "Stretches the button to the width of its container.",
+          "name": "home-href",
+          "description": "Where Go home leads.",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Submitted with the form, as on a native button.",
+          "name": "heading-level",
+          "description": "The heading's level, 1 to 6: 1 when it is the page.",
           "values": []
         },
-        { "name": "value", "values": [] }
+        {
+          "name": "fill",
+          "description": "Fills its container's height and centres itself in it.",
+          "values": []
+        }
       ],
       "references": []
     },
     {
-      "name": "kt-card",
-      "description": "A surface for a block of related content: 12px radius, a 1px border, 24px of\npadding and a 20px internal gap.\n\nSet `clickable` to turn the whole card into a control. Unlike the div-with-a\n-click-handler this replaces, a clickable card is reachable by keyboard,\nannounces itself as a button, and responds to Enter and Space.\n---\n\n\n### **Events:**\n - **kt-card-click** - The card was activated, by pointer or keyboard. Only fired when `clickable` is set.\n\n### **Slots:**\n - _default_ - The card body.\n- **header** - Above the body.\n- **footer** - Below the body.\n- **media** - Replaces the `image` attribute for anything that is not a plain `<img>` — a chart, a map, a video.\n\n### **CSS Parts:**\n - **base** - The card container.\n- **media** - The image or media well.\n- **body** - The header/content/footer column.",
+      "name": "kt-faq",
+      "description": "The questions people ask before they sign up, answered: an accordion under a\nheading, one answer open at a time.\n\nThe questions are data: `faq.items = [{ question, answer }]`. `multiple`\nlets each open on its own; `open-first` opens the first. `stacked` puts the\nhead over the questions; `split` beside them, where the block is wide\nenough.\n---\n\n\n### **Slots:**\n - **note** - Under the head: where to ask what is not answered.\n\n### **CSS Parts:**\n - **base** - The section.",
       "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
         {
-          "name": "clickable",
-          "description": "Makes the card a keyboard-reachable control.",
+          "name": "align",
+          "description": "`center` or `start`: the head, when stacked.",
+          "values": [{ "name": "center" }, { "name": "start" }]
+        },
+        {
+          "name": "multiple",
+          "description": "Each answer opens and closes on its own, rather than one at a time.",
           "values": []
         },
         {
-          "name": "selected",
-          "description": "Marks the card as chosen — one of a set of filters, a picked plan.\n\nPairs with `clickable`: a card the user cannot toggle has no business\nlooking toggled.",
+          "name": "open-first",
+          "description": "Opens the first answer.",
           "values": []
         },
         {
-          "name": "image",
-          "description": "Convenience image. For anything richer, use the `media` slot.",
+          "name": "layout",
+          "description": "`stacked`: the head over the questions. `split`: beside them, where there is room.",
+          "values": [{ "name": "KtFaqLayout" }]
+        },
+        {
+          "name": "heading-level",
+          "description": "The heading's level.",
           "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-feature-grid",
+      "description": "What the product does, a feature at a time: an icon, a title and a line,\nin a grid.\n\nThe features are data: `grid.features = [{ icon, title, description, href }]`,\ndrawn as a list. `columns` sets how many per row where there is room — a\nnarrow grid is one column; `card` puts each feature on a card.\n---\n\n\n### **CSS Parts:**\n - **base** - The section.\n- **list** - The `<ul>`.\n- **feature** - One feature.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
+        {
+          "name": "align",
+          "description": "`center` or `start`: the head over the grid.",
+          "values": [{ "name": "center" }, { "name": "start" }]
         },
         {
-          "name": "image-alt",
-          "description": "Alternative text for `image`. Empty means decorative.",
+          "name": "columns",
+          "description": "Features per row, where there is room: 2, 3 or 4.",
+          "values": [{ "name": "2" }, { "name": "3" }, { "name": "4" }]
+        },
+        {
+          "name": "variant",
+          "description": "`plain`, or `card`: each feature on a card.",
+          "values": [{ "name": "KtFeatureGridVariant" }]
+        },
+        {
+          "name": "heading-level",
+          "description": "The heading's level; the features' titles sit one under.",
           "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-hero",
+      "description": "The top of a page: what the product is, in a heading and a line, and the\nway in.\n\n`stacked`, the default, puts the media under the words — a screenshot, a\nlive demo; `split` sets it beside them once the hero is wide enough.\n`align` centres the words or keeps them at the start.\n---\n\n\n### **Slots:**\n - **announcement** - Above the heading: what is new, as a link.\n- **actions** - Under the lead: the buttons.\n- **note** - Under the actions: what it costs, what it needs.\n- **media** - A screenshot, an illustration, a live demo.\n\n### **CSS Parts:**\n - **base** - The section.\n- **media** - The media's box.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
+        {
+          "name": "align",
+          "description": "`center` or `start`.",
+          "values": [{ "name": "center" }, { "name": "start" }]
         },
         {
-          "name": "image-position",
-          "values": [{ "name": "KtCardImagePosition" }]
+          "name": "layout",
+          "description": "`stacked`: the media under the words. `split`: beside them, where there is room.",
+          "values": [{ "name": "KtHeroLayout" }]
         },
         {
-          "name": "image-size",
-          "description": "Width (left/right) or height (top/bottom) of the media well.",
+          "name": "heading-level",
+          "description": "The heading's level: 1, since a hero opens its page.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "kt-code",
-      "description": "A block of code on a recessed surface, with its language and a copy button.\n\nThe element owns the chrome — surface, label, scrolling, copy — and nothing\nelse. **Highlighting is the caller's**: slot in whatever markup a highlighter\nproduced, or plain text for none. A design system that bundled a syntax\nhighlighter would be picking your bundle size and your language set for you.\n\n```html\n<kt-code language=\"js\">const total = items.length;</kt-code>\n\n<kt-code language=\"ts\" copy>\n  <span class=\"hljs-keyword\">const</span> total = items.length;\n</kt-code>\n```\n\nFor a token or an identifier inside a sentence, reach for\n`<kt-badge variant=\"code\">` instead — this is for blocks.\n---\n\n\n### **Events:**\n - **kt-copy** - The copy button was pressed. `detail: { code }`.\n\n### **Slots:**\n - _default_ - The code. Plain text, or a highlighter's markup.\n\n### **CSS Parts:**\n - **base** - The container.\n- **header** - The language row.\n- **pre** - The scrolling `<pre>`.",
+      "name": "kt-logo-cloud",
+      "description": "Who uses it, in their logos: a line of marks under a caption — \"Trusted by\nfinance teams at\".\n\nThe logos are the default slot: images or inline SVGs, each with its\ncompany's name as `alt` or `aria-label`. They are drawn at one height, grey\nuntil hovered, so no brand shouts over another; `colour` keeps their\ncolours.\n---\n\n\n### **Slots:**\n - _default_ - The logos.\n\n### **CSS Properties:**\n - **--kt-logo-height** - The logos' height. 28px. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The section.\n- **logos** - The row of logos.",
       "attributes": [
         {
-          "name": "language",
-          "description": "Language label, shown uppercase. Purely informative.",
+          "name": "heading",
+          "description": "The caption over the logos: \"Trusted by finance teams at\".",
           "values": []
         },
         {
-          "name": "copy",
-          "description": "Shows the copy button.",
+          "name": "align",
+          "description": "`center` or `start`.",
+          "values": [{ "name": "center" }, { "name": "start" }]
+        },
+        {
+          "name": "colour",
+          "description": "Keeps the logos' colours, rather than grey until hovered.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "Accessible name for the block, when the language alone is not enough.",
+          "name": "heading-level",
+          "description": "The caption's level: a heading, set small.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "kt-icon",
-      "description": "A Lucide icon, resolved from the registry by name.\n\nThe icon inherits `currentColor`, so it is coloured by setting `color` on\nthe element or on any ancestor — there is no colour attribute to keep in\nsync with the surrounding text.\n\nUnknown names render nothing but still occupy their box, so a typo shifts no\nlayout while you find it in the console.\n---\n\n\n### **CSS Parts:**\n - **svg** - The `<svg>` root.",
+      "name": "kt-newsletter",
+      "description": "A way to hear from you again: a heading, a line, an email field and the\nbutton that subscribes it.\n\nIt checks the address before sending, then fires `kt-subscribe` with it and\n`wait(promise)`: the button runs the request, and the block thanks the\nreader once it resolves — or shows why not on the field. Without a wait it\nthanks at once.\n---\n\n\n### **Events:**\n - **kt-subscribe** - An address was sent. `detail: { email, wait(promise) }`.\n\n### **Methods:**\n - **subscribe(): _void_** - Sends the address, as the button does, once it is one.\n\n### **Slots:**\n - **note** - Under the field: how often, and that unsubscribing is one click.\n\n### **CSS Parts:**\n - **base** - The section.\n- **panel** - The panel.",
       "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
         {
-          "name": "name",
-          "description": "Icon name, kebab-case: `chevron-down`, `circle-alert`.",
+          "name": "align",
+          "description": "`center` or `start`.",
+          "values": [{ "name": "center" }, { "name": "start" }]
+        },
+        {
+          "name": "variant",
+          "description": "`panel`: on a tinted panel. `plain`: on the page.",
+          "values": [{ "name": "KtNewsletterVariant" }]
+        },
+        {
+          "name": "layout",
+          "description": "`stacked`: the field under the words. `inline`: beside them, where there is room.",
+          "values": [{ "name": "KtNewsletterLayout" }]
+        },
+        {
+          "name": "subscribed",
+          "description": "The address went through: the field gives way to the thanks.",
           "values": []
         },
         {
-          "name": "size",
-          "description": "Width and height in pixels.",
+          "name": "heading-level",
+          "description": "The heading's level.",
           "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-post-grid",
+      "description": "The latest posts, each a card that leads to it: a cover, a title, a line,\nand who wrote it when.\n\nThe posts are data: `grid.posts = [{ title, href, excerpt, date, image,\nauthor, tags }]`. `grid`, the default, sets them in `columns` where there is\nroom; `list` puts one under another, the cover beside the words.\n---\n\n\n### **Slots:**\n - **more** - Under the posts: a link to every one.\n\n### **CSS Parts:**\n - **base** - The section.\n- **post** - One post.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
+        {
+          "name": "align",
+          "description": "`center` or `start`: the head and the more link.",
+          "values": [{ "name": "center" }, { "name": "start" }]
         },
         {
-          "name": "stroke-width",
-          "description": "Stroke width passed to the SVG.",
+          "name": "columns",
+          "description": "Posts per row, where there is room: 2 or 3.",
+          "values": [{ "name": "2" }, { "name": "3" }]
+        },
+        {
+          "name": "layout",
+          "description": "`grid`: in columns. `list`: one under another, the cover beside the words.",
+          "values": [{ "name": "KtPostGridLayout" }]
+        },
+        {
+          "name": "locale",
+          "description": "The locale dates are written in; the page's language when empty.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "Accessible name. Set it when the icon carries meaning on its own; leave it\noff — the default — when adjacent text already says what this is, and the\nicon is hidden from assistive technology.",
+          "name": "heading-level",
+          "description": "The heading's level; the posts' titles sit one under.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "kt-kbd",
-      "description": "A keyboard shortcut.\n\nRenders per platform: `⌘ K` on a Mac, `Ctrl K` elsewhere. A shortcut printed\nwith the wrong modifier is worse than none — the reader tries it, it does not\nwork, and they stop trusting the hints.\n---\n\n\n### **Slots:**\n - _default_ - The key, when `keys` is not used.\n\n### **CSS Parts:**\n - **base** - The wrapper.\n- **key** - One key.",
+      "name": "kt-pricing-table",
+      "description": "The plans, side by side: what each costs, what it includes, and the way in —\nwith a switch between monthly and yearly prices when the plans have both.\n\nThe plans are data: `table.plans = [{ id, name, price, features }]`. A price\nthat is a number is formatted in `currency`; a string is shown as written. A\nplan's button fires `kt-plan`, or is a link with an `href`.\n---\n\n\n### **Events:**\n - **kt-billing** - The billing period changed. `detail: { billing }`.\n- **kt-plan** - A plan's button was pressed. `detail: { id, billing }`.\n\n### **Slots:**\n - **note** - Under the plans: taxes, a link to compare every feature.\n\n### **CSS Parts:**\n - **base** - The section.\n- **plan** - One plan.",
       "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
         {
-          "name": "keys",
-          "description": "Space-separated keys: `meta k`, `ctrl shift p`.",
+          "name": "align",
+          "description": "`center` or `start`: the head and the switch.",
+          "values": [{ "name": "center" }, { "name": "start" }]
+        },
+        {
+          "name": "billing",
+          "description": "The prices shown: `monthly` or `yearly`.",
+          "values": [{ "name": "KtBilling" }]
+        },
+        {
+          "name": "currency",
+          "description": "The currency numeric prices are in: an ISO code, USD until given another.",
           "values": []
         },
         {
-          "name": "platform",
-          "description": "Forces a platform instead of sniffing the current one.",
-          "values": [{ "name": "auto" }, { "name": "mac" }, { "name": "other" }]
+          "name": "locale",
+          "description": "The locale prices are formatted in; the page's language when empty.",
+          "values": []
+        },
+        {
+          "name": "yearly-note",
+          "description": "Beside the switch: what paying yearly saves — \"2 months free\".",
+          "values": []
+        },
+        {
+          "name": "heading-level",
+          "description": "The heading's level; the plans' names sit one under.",
+          "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "kt-split-button",
-      "description": "One button carrying a menu of related actions.\n\nThe body runs the action a user wants nine times out of ten and emits a\nplain `click`; the caret opens the rest. Reach for it when the alternatives\nare variations on the same action — \"Save and close\", \"Save a copy\" — and\nfor an unrelated set of actions use `<kt-dropdown>` instead, which has no\ndefault action to promote.\n\nA caret press never reads as a `click` on the host, so a single `click`\nlistener means the primary action and nothing else.\n---\n\n\n### **Events:**\n - **kt-select** - A menu row was chosen. `detail: { value, item }`.\n- **kt-open** - The menu opened.\n- **kt-close** - The menu closed.\n\n### **Methods:**\n - **show(): _void_** - Opens the menu.\n- **hide(): _void_** - Closes it.\n- **toggle(): _void_** - Either.\n- **focus(options: _FocusOptions_): _void_** - Moves focus to the primary segment.\n\n### **Slots:**\n - _default_ - The primary action's label.\n\n### **CSS Parts:**\n - **action** - The primary `<kt-button>`.\n- **caret** - The `<kt-button>` that opens the menu.\n- **menu** - The list of rows.\n- **item** - A menu row.",
+      "name": "kt-settings-section",
+      "description": "One part of a settings page: what it is about, the fields that change it,\nand the button that saves them.\n\n`split`, the default, sets the heading and its description beside the\nfields once the section is wide enough — the settings page most products\nhave; `stacked` puts them over the fields. `danger` marks the section that\ndeletes things.\n---\n\n\n### **Slots:**\n - _default_ - The fields.\n- **actions** - In the footer, at the end: Save, Cancel.\n- **note** - In the footer, at the start: when it was last saved, what saving does.\n\n### **CSS Parts:**\n - **base** - The section.\n- **card** - The fields and the footer.\n- **footer** - The footer.",
       "attributes": [
+        { "name": "heading", "values": [] },
         {
-          "name": "variant",
-          "description": "Visual variant, forwarded to both segments.",
-          "values": [{ "name": "KtButtonVariant" }]
+          "name": "description",
+          "description": "What the section changes, under its heading.",
+          "values": []
         },
         {
-          "name": "size",
-          "description": "Height, forwarded to both segments.",
-          "values": [{ "name": "KtButtonSize" }]
+          "name": "layout",
+          "description": "`split`: the heading beside the fields, where there is room. `stacked`: over them.",
+          "values": [{ "name": "KtSettingsSectionLayout" }]
         },
-        { "name": "disabled", "values": [] },
         {
-          "name": "icon",
-          "description": "Lucide icon name for the primary segment.",
+          "name": "danger",
+          "description": "The section that deletes things: its heading and card turn red.",
           "values": []
         },
         {
-          "name": "menu-label",
-          "description": "Accessible name of the caret, which has no text of its own.",
+          "name": "heading-level",
+          "description": "The heading's level.",
           "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-testimonials",
+      "description": "What the people who use it say: a quote, and who said it.\n\nThe quotes are data: `wall.testimonials = [{ quote, name, role, avatar }]`.\n`grid`, the default, sets them in columns that pack quotes of any length;\n`single` gives each the width of the page, in larger type — for one quote\nthat carries the section.\n---\n\n\n### **CSS Parts:**\n - **base** - The section.\n- **testimonial** - One quote and who said it.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "lead", "values": [] },
+        {
+          "name": "align",
+          "description": "`center` or `start`.",
+          "values": [{ "name": "center" }, { "name": "start" }]
         },
         {
-          "name": "preferred-placement",
-          "description": "Where to put the menu when there is room on both sides.",
-          "values": [{ "name": "KtDropdownPlacement" }]
+          "name": "layout",
+          "description": "`grid`: in packed columns. `single`: each the page's width, large.",
+          "values": [{ "name": "KtTestimonialsLayout" }]
         },
-        { "name": "empty-text", "values": [] }
+        {
+          "name": "heading-level",
+          "description": "The heading's level.",
+          "values": []
+        }
       ],
       "references": []
     },
@@ -330,35 +497,104 @@
       "references": []
     },
     {
-      "name": "kt-meter",
-      "description": "How a fixed total is spent: storage by file type, a budget by category, seats\nby role.\n\nAgainst `<kt-progress-bar>`: a progress bar answers \"how far along\", so it\nfills toward completion and turns green when it gets there. A meter answers\n\"how is it divided\", so it is full from the start and reaching the end is\nbad news, not good. Different question, different component — and the bar\nthat shows one and means the other is a common way to mislead a reader.\n---\n\n\n### **CSS Parts:**\n - **base** - The container.\n- **track** - The bar.\n- **legend** - The legend list.",
+      "name": "kt-chat-message",
+      "description": "One message of a conversation with an assistant.\n\nAn assistant's reply sits beside its avatar, as text on the page — a reply\nis often long, and a bubble around paragraphs, lists and code only crowds\nthem. A person's message sits in a bubble on the other side, short and\nclearly theirs.\n\n`thinking` shows three dots, and says so in words, until the reply has a\nword of its own; `streaming` marks the end of a reply still arriving. Both\nset `aria-busy`. The content is the default slot: render your markdown into\nit, as you would anywhere.\n---\n\n\n### **Slots:**\n - _default_ - The message.\n- **avatar** - Replaces the avatar drawn from `name` and `avatar`.\n- **actions** - Under the message: copy, retry, a rating.\n\n### **CSS Parts:**\n - **base** - The `<article>`.\n- **bubble** - A person's bubble.\n- **content** - The message.\n- **meta** - The author and the time.",
       "attributes": [
-        { "name": "label", "values": [] },
         {
-          "name": "used",
-          "description": "Free text on the left of the caption row — \"25.8 GB used\".",
+          "name": "from",
+          "description": "Who wrote it: an `assistant`, beside its avatar, or the `user`, in a bubble.",
+          "values": [{ "name": "KtChatMessageFrom" }]
+        },
+        {
+          "name": "name",
+          "description": "The author: names the message, and draws the avatar's initials.",
           "values": []
         },
         {
-          "name": "total",
-          "description": "Free text on the right of the caption row — \"of 983 GB\".",
+          "name": "avatar",
+          "description": "A picture for the avatar.",
           "values": []
         },
         {
-          "name": "value",
-          "description": "A single filled proportion, as a percentage. Ignored when `segments` is set.",
+          "name": "time",
+          "description": "When it was sent, as shown.",
           "values": []
         },
         {
-          "name": "max",
-          "description": "The total the segments are measured against. Defaults to their sum.",
+          "name": "datetime",
+          "description": "The same moment, machine-readable, for the `<time>`.",
           "values": []
         },
         {
-          "name": "show-legend",
-          "description": "Renders the segment list under the bar.",
+          "name": "thinking",
+          "description": "Thinking: dots instead of the content, until the reply has a word.",
           "values": []
-        }
+        },
+        {
+          "name": "streaming",
+          "description": "Still arriving: a caret after the last word.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-description-list",
+      "description": "Terms and their details — an invoice's number, customer and amount; a\nperson's email and role — the body of a detail page.\n\nThe items are data: `list.items = [{ term, detail }]`, drawn as a real\n`<dl>`. `horizontal`, the default, sets each term beside its detail, and\nstacks them once the list itself is too narrow for that; `stacked` puts\neach term over its detail, in `columns` when there is room.\n---\n\n\n### **CSS Properties:**\n - **--kt-description-term-width** - The terms' column, horizontal. 180px. _(default: undefined)_\n\n### **CSS Parts:**\n - **list** - The `<dl>`.\n- **item** - One term and its detail.\n- **term** - The `<dt>`.\n- **detail** - The `<dd>`.",
+      "attributes": [
+        {
+          "name": "layout",
+          "description": "`horizontal`: each term beside its detail. `stacked`: over it.",
+          "values": [{ "name": "KtDescriptionListLayout" }]
+        },
+        {
+          "name": "columns",
+          "description": "Stacked: how many columns, 1 to 4, where there is room.",
+          "values": []
+        },
+        {
+          "name": "bordered",
+          "description": "A rule under each item.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the list.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-meter",
+      "description": "How a fixed total is spent: storage by file type, a budget by category, seats\nby role.\n\nAgainst `<kt-progress-bar>`: a progress bar answers \"how far along\", so it\nfills toward completion and turns green when it gets there. A meter answers\n\"how is it divided\", so it is full from the start and reaching the end is\nbad news, not good. Different question, different component — and the bar\nthat shows one and means the other is a common way to mislead a reader.\n---\n\n\n### **CSS Parts:**\n - **base** - The container.\n- **track** - The bar.\n- **legend** - The legend list.",
+      "attributes": [
+        { "name": "label", "values": [] },
+        {
+          "name": "used",
+          "description": "Free text on the left of the caption row — \"25.8 GB used\".",
+          "values": []
+        },
+        {
+          "name": "total",
+          "description": "Free text on the right of the caption row — \"of 983 GB\".",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A single filled proportion, as a percentage. Ignored when `segments` is set.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The total the segments are measured against. Defaults to their sum.",
+          "values": []
+        },
+        {
+          "name": "show-legend",
+          "description": "Renders the segment list under the bar.",
+          "values": []
+        }
       ],
       "references": []
     },
@@ -473,39 +709,376 @@
       "description": "An ordered run of events on a rail.\n\nThe same shape keeps reappearing — an activity feed, an audit log, a\nchangelog, the stages of a delivery, a résumé — and every time it gets\nrebuilt out of a list, a pseudo-element line and a hand-placed dot. The\nfiddly part is the rail: it must start at the first dot and stop at the\nlast, which a border on the list cannot do. Here each item draws its own\nsegment and the last one is told to stop.\n\n`<kt-timeline>` is the semantic list; `<kt-timeline-item>` is one event.\n---\n\n\n### **Slots:**\n - _default_ - The `<kt-timeline-item>` children.\n\n### **CSS Parts:**\n - **base** - The list.",
       "attributes": [
         {
-          "name": "compact",
-          "description": "Tighter rhythm, for a feed in a side panel.",
+          "name": "compact",
+          "description": "Tighter rhythm, for a feed in a side panel.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-timeline-item",
+      "description": "One event on a `<kt-timeline>`.\n---\n\n\n### **Slots:**\n - _default_ - The body of the event.\n- **actions** - Trailing controls, aligned with the heading.\n\n### **CSS Parts:**\n - **base** - The row.\n- **marker** - The dot or icon.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        {
+          "name": "time",
+          "description": "Shown right-aligned on the heading row. Any string — \"09:24\", \"2 days ago\".",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "Lucide icon name. Without one the marker is a plain dot.",
+          "values": []
+        },
+        { "name": "variant", "values": [{ "name": "KtTimelineVariant" }] },
+        {
+          "name": "last",
+          "description": "Set by the parent `<kt-timeline>`: drops the trailing rail segment.",
+          "values": []
+        },
+        {
+          "name": "compact",
+          "description": "Set by the parent `<kt-timeline>`.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-tree",
+      "description": "Things inside things — folders and files, an organisation's teams, nested\npages — as a tree to open and walk.\n\nThe nodes are data: `tree.items = [{ id, label, icon, children }]`;\n`expanded` lists the open ones and `selected` the chosen one. A click on a\nnode selects it, a click on its chevron opens or closes it.\n\nThe keyboard is the WAI-ARIA tree view's: Up and Down move through the\nvisible nodes; Right opens a node, then moves to its first child; Left closes\nit, or moves to its parent; Home and End go to the first and last; Enter and\nSpace select. The tree is one tab stop.\n---\n\n\n### **Events:**\n - **kt-select** - A node was selected. `detail: { id, item }`.\n- **kt-toggle** - A node opened or closed. `detail: { id, expanded }`.\n\n### **Methods:**\n - **toggle(id: _string_, expanded): _void_** - Opens or closes a node, and says so.\n\n### **CSS Parts:**\n - **tree** - The tree.\n- **item** - One node's row.",
+      "attributes": [
+        {
+          "name": "selected",
+          "description": "The id of the selected node.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the tree.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-avatar",
+      "description": "A person or an organisation, as a picture or as their initials.\n\nThe fallback is not decoration: most rows in most products have no photo, so\nthe initials path is the one that renders. It picks a colour from the name,\nwhich means the same person is the same colour on every screen and the eye\ncan use it.\n---\n\n\n### **CSS Parts:**\n - **base** - The avatar circle.\n- **image** - The `<img>`, when `src` is set and loads.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The person's name. Drives the initials, the colour and the label.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "Photo. Falls back to initials if it is missing or fails to load.",
+          "values": []
+        },
+        { "name": "size", "values": [{ "name": "KtAvatarSize" }] },
+        {
+          "name": "square",
+          "description": "Rounds to the card radius instead of a circle — for organisations.",
+          "values": []
+        },
+        {
+          "name": "status",
+          "description": "Presence dot. Omit for none.",
+          "values": [{ "name": "KtAvatarStatus" }]
+        },
+        {
+          "name": "color",
+          "description": "Overrides the colour picked from the name.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-avatar-group",
+      "description": "The people on something — a project's members, a document's editors — as\navatars overlapping in a row, the rest summed up as \"+N\".\n---\n\n\n### **CSS Parts:**\n - **list** - The `<ul>`.\n- **more** - The \"+N\" at the end.",
+      "attributes": [
+        {
+          "name": "max",
+          "description": "How many avatars to show before summing the rest up.",
+          "values": []
+        },
+        { "name": "size", "values": [{ "name": "KtAvatarSize" }] },
+        {
+          "name": "label",
+          "description": "Accessible name for the group: \"Project members\".",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-badge",
+      "description": "A compact label: a pill `tag`, a monospaced `code` token, a `category`\ntinted with a colour of your choosing, or a `count`.\n\nTwo independent axes, because they answer different questions. `variant` is\nthe **shape** — what kind of thing this is. `tone` is the **colour** — what\nit means. A tag can be neutral or dangerous; so can a count. Folding them\ninto one list would give you nine variants and no way to say \"a tag, but\nthis one is a warning\".\n\n`count` is the exception that carries no border, because a number pinned to\na nav item is not a label with an outline — it is a mark on the thing it\ncounts.\n---\n\n\n### **Events:**\n - **kt-badge-click** - A `clickable` badge was activated. Cancelable.\n- **kt-remove** - The remove button was pressed. Cancelable: cancel it and remove the badge yourself once the server agrees.\n\n### **Slots:**\n - _default_ - The text. Falls back to the `label` attribute.\n\n### **CSS Properties:**\n - **--kt-badge-color** - Category hue. The fill is this colour at 20%. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The container.\n- **remove** - The remove button, when `removable`.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The shape: what kind of thing this is.",
+          "values": [{ "name": "KtBadgeVariant" }]
+        },
+        {
+          "name": "tone",
+          "description": "The colour: what it means. Independent of `variant`.",
+          "values": [{ "name": "KtBadgeTone" }]
+        },
+        { "name": "size", "values": [{ "name": "KtBadgeSize" }] },
+        {
+          "name": "label",
+          "description": "Badge text. The default slot wins when both are present.",
+          "values": []
+        },
+        {
+          "name": "color",
+          "description": "Category hue: any CSS colour. The fill is this colour at 20%.",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "Lucide icon name, before the text.",
+          "values": []
+        },
+        { "name": "clickable", "values": [] },
+        {
+          "name": "removable",
+          "description": "Adds a remove button. Fires a cancelable `kt-remove`.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Caps a numeric label: `max=\"99\"` shows `99+`.\nIgnored when the content is not a number.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "Shorthand for `tone=\"danger\"`, kept from the field components.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-button",
+      "description": "The Kanto action button.\n\nTen variants; `primary` for the one action a screen is about, `secondary`\n(a soft indigo tint) for everything supporting it. The semantic variants —\n`danger`, `warning`, `info`, `success` — are tinted fills with coloured\ntext; `delete` is the only solid red, reserved for irreversible actions.\n\nSetting `icon` with no slotted text produces a square icon-only button,\nwhich then requires a `label`.\n\n`run(action)` runs an async action and shows how it went: busy while it\nruns, then a tick — and `done-label`, if given — or, if it throws, a shake,\nan alert and `failed-label`; back to rest two seconds later. Some icons\nleave in their own way: a `send` plane flies off to the top right.\n---\n\n\n### **Methods:**\n - **run(action: _() => Promise<T>_): _Promise<T>_** - Runs `action` and shows how it went. A second call while it runs gets the\nsame promise rather than a second run. Resolves with what the action\nresolved with; rejects with what it threw, after showing it failed.\n- **focus(options: _FocusOptions_): _void_** - Moves focus to the button.\n\n### **Slots:**\n - _default_ - The button label.\n\n### **CSS Parts:**\n - **button** - The native `<button>`.\n- **icon** - The icon, when `icon` is set.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "Visual variant.",
+          "values": [{ "name": "KtButtonVariant" }]
+        },
+        {
+          "name": "size",
+          "description": "Height: 32 / 40 / 48px at the desktop scale.",
+          "values": [{ "name": "KtButtonSize" }]
+        },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "type",
+          "description": "Native button behaviour. `submit` and `reset` act on the enclosing form.",
+          "values": [{ "name": "KtButtonType" }]
+        },
+        {
+          "name": "icon",
+          "description": "Lucide icon name, kebab-case.",
+          "values": []
+        },
+        {
+          "name": "icon-position",
+          "description": "Which side of the label the icon sits on.",
+          "values": [{ "name": "left" }, { "name": "right" }]
+        },
+        {
+          "name": "label",
+          "description": "Accessible name. Required for an icon-only button.",
+          "values": []
+        },
+        {
+          "name": "full-width",
+          "description": "Stretches the button to the width of its container.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "Submitted with the form, as on a native button.",
+          "values": []
+        },
+        { "name": "value", "values": [] },
+        {
+          "name": "done-label",
+          "description": "Shown in place of the label once `run()` succeeds. Empty keeps the label.",
+          "values": []
+        },
+        {
+          "name": "failed-label",
+          "description": "Shown in place of the label when `run()` fails. Empty keeps the label.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-card",
+      "description": "A surface for a block of related content: 12px radius, a 1px border, 24px of\npadding and a 20px internal gap.\n\nSet `clickable` to turn the whole card into a control. Unlike the div-with-a\n-click-handler this replaces, a clickable card is reachable by keyboard,\nannounces itself as a button, and responds to Enter and Space.\n---\n\n\n### **Events:**\n - **kt-card-click** - The card was activated, by pointer or keyboard. Only fired when `clickable` is set.\n\n### **Slots:**\n - _default_ - The card body.\n- **header** - Above the body.\n- **footer** - Below the body.\n- **media** - Replaces the `image` attribute for anything that is not a plain `<img>` — a chart, a map, a video.\n\n### **CSS Parts:**\n - **base** - The card container.\n- **media** - The image or media well.\n- **body** - The header/content/footer column.",
+      "attributes": [
+        {
+          "name": "clickable",
+          "description": "Makes the card a keyboard-reachable control.",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "Marks the card as chosen — one of a set of filters, a picked plan.\n\nPairs with `clickable`: a card the user cannot toggle has no business\nlooking toggled.",
+          "values": []
+        },
+        {
+          "name": "image",
+          "description": "Convenience image. For anything richer, use the `media` slot.",
+          "values": []
+        },
+        {
+          "name": "image-alt",
+          "description": "Alternative text for `image`. Empty means decorative.",
+          "values": []
+        },
+        {
+          "name": "image-position",
+          "values": [{ "name": "KtCardImagePosition" }]
+        },
+        {
+          "name": "image-size",
+          "description": "Width (left/right) or height (top/bottom) of the media well.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-code",
+      "description": "A block of code on a recessed surface, with its language and a copy button.\n\nThe element owns the chrome — surface, label, scrolling, copy — and nothing\nelse. **Highlighting is the caller's**: slot in whatever markup a highlighter\nproduced, or plain text for none. A design system that bundled a syntax\nhighlighter would be picking your bundle size and your language set for you.\n\n```html\n<kt-code language=\"js\">const total = items.length;</kt-code>\n\n<kt-code language=\"ts\" copy>\n  <span class=\"hljs-keyword\">const</span> total = items.length;\n</kt-code>\n```\n\nFor a token or an identifier inside a sentence, reach for\n`<kt-badge variant=\"code\">` instead — this is for blocks.\n---\n\n\n### **Events:**\n - **kt-copy** - The copy button was pressed. `detail: { code }`.\n\n### **Slots:**\n - _default_ - The code. Plain text, or a highlighter's markup.\n\n### **CSS Parts:**\n - **base** - The container.\n- **header** - The language row.\n- **pre** - The scrolling `<pre>`.",
+      "attributes": [
+        {
+          "name": "language",
+          "description": "Language label, shown uppercase. Purely informative.",
+          "values": []
+        },
+        {
+          "name": "copy",
+          "description": "Shows the copy button.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the block, when the language alone is not enough.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-copy-button",
+      "description": "Copies a value to the clipboard and says it did: an API key, an install\ncommand, a share link.\n\nBuilt on `kt-button`'s `run()`: on success the tick comes in and the label\nreads \"Copied\" for two seconds — announced, as the button announces it — and\nif the browser refuses the clipboard, the button shakes and nothing is said\nto have been copied.\n---\n\n\n### **Events:**\n - **kt-copy** - The value was copied. `detail: { value }`.\n\n### **Methods:**\n - **copy(): _Promise<void>_** - Copies `value`, as a click does. Resolves once copied; rejects if the browser refused.\n\n### **CSS Parts:**\n - **button** - The `kt-button`.",
+      "attributes": [
+        { "name": "value", "description": "What is copied.", "values": [] },
+        {
+          "name": "label",
+          "description": "The button's words. Defaults to the translated \"Copy\".",
+          "values": []
+        },
+        {
+          "name": "copied-label",
+          "description": "Said once it has copied. Defaults to the translated \"Copied\".",
+          "values": []
+        },
+        {
+          "name": "icon-only",
+          "description": "The icon alone, named by `label`.",
+          "values": []
+        },
+        { "name": "variant", "values": [{ "name": "KtButtonVariant" }] },
+        { "name": "size", "values": [{ "name": "KtButtonSize" }] }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-icon",
+      "description": "A Lucide icon, resolved from the registry by name.\n\nThe icon inherits `currentColor`, so it is coloured by setting `color` on\nthe element or on any ancestor — there is no colour attribute to keep in\nsync with the surrounding text.\n\nUnknown names render nothing but still occupy their box, so a typo shifts no\nlayout while you find it in the console.\n---\n\n\n### **CSS Parts:**\n - **svg** - The `<svg>` root.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Icon name, kebab-case: `chevron-down`, `circle-alert`.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Width and height in pixels.",
+          "values": []
+        },
+        {
+          "name": "stroke-width",
+          "description": "Stroke width passed to the SVG.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name. Set it when the icon carries meaning on its own; leave it\noff — the default — when adjacent text already says what this is, and the\nicon is hidden from assistive technology.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-kbd",
+      "description": "A keyboard shortcut.\n\nRenders per platform: `⌘ K` on a Mac, `Ctrl K` elsewhere. A shortcut printed\nwith the wrong modifier is worse than none — the reader tries it, it does not\nwork, and they stop trusting the hints.\n---\n\n\n### **Slots:**\n - _default_ - The key, when `keys` is not used.\n\n### **CSS Parts:**\n - **base** - The wrapper.\n- **key** - One key.",
+      "attributes": [
+        {
+          "name": "keys",
+          "description": "Space-separated keys: `meta k`, `ctrl shift p`.",
           "values": []
+        },
+        {
+          "name": "platform",
+          "description": "Forces a platform instead of sniffing the current one.",
+          "values": [{ "name": "auto" }, { "name": "mac" }, { "name": "other" }]
         }
       ],
       "references": []
     },
     {
-      "name": "kt-timeline-item",
-      "description": "One event on a `<kt-timeline>`.\n---\n\n\n### **Slots:**\n - _default_ - The body of the event.\n- **actions** - Trailing controls, aligned with the heading.\n\n### **CSS Parts:**\n - **base** - The row.\n- **marker** - The dot or icon.",
+      "name": "kt-split-button",
+      "description": "One button carrying a menu of related actions.\n\nThe body runs the action a user wants nine times out of ten and emits a\nplain `click`; the caret opens the rest. Reach for it when the alternatives\nare variations on the same action — \"Save and close\", \"Save a copy\" — and\nfor an unrelated set of actions use `<kt-dropdown>` instead, which has no\ndefault action to promote.\n\nA caret press never reads as a `click` on the host, so a single `click`\nlistener means the primary action and nothing else.\n---\n\n\n### **Events:**\n - **kt-select** - A menu row was chosen. `detail: { value, item }`.\n- **kt-open** - The menu opened.\n- **kt-close** - The menu closed.\n\n### **Methods:**\n - **show(): _void_** - Opens the menu.\n- **hide(): _void_** - Closes it.\n- **toggle(): _void_** - Either.\n- **focus(options: _FocusOptions_): _void_** - Moves focus to the primary segment.\n\n### **Slots:**\n - _default_ - The primary action's label.\n\n### **CSS Parts:**\n - **action** - The primary `<kt-button>`.\n- **caret** - The `<kt-button>` that opens the menu.\n- **menu** - The list of rows.\n- **item** - A menu row.",
       "attributes": [
-        { "name": "heading", "values": [] },
         {
-          "name": "time",
-          "description": "Shown right-aligned on the heading row. Any string — \"09:24\", \"2 days ago\".",
-          "values": []
+          "name": "variant",
+          "description": "Visual variant, forwarded to both segments.",
+          "values": [{ "name": "KtButtonVariant" }]
+        },
+        {
+          "name": "size",
+          "description": "Height, forwarded to both segments.",
+          "values": [{ "name": "KtButtonSize" }]
         },
+        { "name": "disabled", "values": [] },
         {
           "name": "icon",
-          "description": "Lucide icon name. Without one the marker is a plain dot.",
+          "description": "Lucide icon name for the primary segment.",
           "values": []
         },
-        { "name": "variant", "values": [{ "name": "KtTimelineVariant" }] },
         {
-          "name": "last",
-          "description": "Set by the parent `<kt-timeline>`: drops the trailing rail segment.",
+          "name": "menu-label",
+          "description": "Accessible name of the caret, which has no text of its own.",
           "values": []
         },
         {
-          "name": "compact",
-          "description": "Set by the parent `<kt-timeline>`.",
-          "values": []
-        }
+          "name": "preferred-placement",
+          "description": "Where to put the menu when there is room on both sides.",
+          "values": [{ "name": "KtDropdownPlacement" }]
+        },
+        { "name": "empty-text", "values": [] }
       ],
       "references": []
     },
@@ -631,7 +1204,7 @@
     },
     {
       "name": "kt-toast-container",
-      "description": "A fixed stack that owns the toasts on screen.\n\nToasts are appended and removed by the container, not by the code that\nraised them — a toast that removes itself from a list it does not own is how\nyou end up with two of them and neither disappearing.\n---\n\n\n### **Methods:**\n - **show(options: _KtToastOptions_): _KtToast_** - Raises a toast and returns it, so a caller can close it early.\n- **dismiss(toast: _KtToast_): _void_** - Removes one toast.\n- **clear(): _void_** - Removes every toast.\n\n### **Slots:**\n - _default_ - The toasts. Usually filled by `show()` rather than by hand.",
+      "description": "A fixed stack that owns the toasts on screen.\n\nToasts are appended and removed by the container, not by the code that\nraised them — a toast that removes itself from a list it does not own is how\nyou end up with two of them and neither disappearing.\n---\n\n\n### **Methods:**\n - **show(options: _KtToastOptions_): _KtToast_** - Raises a toast and returns it, so a caller can close it early.\n- **dismiss(toast: _KtToast_): _void_** - Removes one toast: it fades and folds away, then leaves the page.\n- **clear(): _void_** - Removes every toast.\n\n### **Slots:**\n - _default_ - The toasts. Usually filled by `show()` rather than by hand.",
       "attributes": [
         { "name": "position", "values": [{ "name": "KtToastPosition" }] },
         {
@@ -739,6 +1312,30 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-color-picker",
+      "description": "A colour, chosen from swatches or set freely: a label's colour, a theme's\naccent, a chart series.\n\nThe swatches are a radio group — the arrows move and pick, wrapping — Kanto's\naccents until `swatches` gives others. Beside them, the free colour: the\nsystem's own picker behind a swatch, and a hex field that takes a colour\nonce it is a whole one. `no-custom` keeps to the swatches.\n\nA form control, submitted as `#rrggbb` under `name`.\n---\n\n\n### **Events:**\n - **kt-change** - The colour changed. `detail: { value }`.\n\n### **CSS Parts:**\n - **swatches** - The radio group.\n- **swatch** - One swatch.\n- **custom** - The free colour's swatch.\n- **hex** - The hex field.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The colour, as `#rrggbb`.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the swatches: \"Label colour\".",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "no-custom",
+          "description": "Keeps to the swatches: no system picker, no hex field.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-date-input",
       "description": "A date typed into its parts: day, month and year, each its own segment.\n\nThe segments come in the order the reader's language writes a date —\n`25/09/2026` in London, `09/25/2026` in New York, `25.09.2026` in Berlin —\nand the focus moves on as each fills, so a date is eight keystrokes. The\narrows step a segment, a day never past its month's end. The value is ISO\n8601, `2026-09-25`, and `null` until the date is complete.\n\nWith `calendar`, a button at the end opens a `<kt-calendar>` to pick from.\n---\n\n\n### **Events:**\n - **kt-change** - The date became complete, changed, or stopped being one. `detail: { value }` — the ISO date or `null`.\n\n### **Methods:**\n \n\n### **CSS Parts:**\n - **field** - The field.\n- **segment** - A day, month or year segment.\n- **trigger** - The calendar button, with `calendar`.\n- **panel** - The calendar popup, with `calendar`.",
@@ -983,6 +1580,101 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-number-input",
+      "description": "A number field with − and + beside it: a quantity, a seat count, an amount.\n\nType a number the way your language writes one — \"1 234,5\" in French — or\nstep it with the buttons, the arrows (Page Up and Down by ten steps, Home\nand End to the bounds). It is kept within `min` and `max` and on `step`\nwhen the field is left. At rest it reads as the locale writes it, through\n`formatOptions` — a currency, a percentage, a unit.\n---\n\n\n### **Events:**\n - **kt-change** - The value changed. `detail: { value }`, a number or null.\n\n### **CSS Parts:**\n - **field** - The field.\n- **input** - The text field.\n- **decrease** - The − button.\n- **increase** - The + button.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The number, or null while empty. An attribute that is no number reads as empty.",
+          "values": []
+        },
+        { "name": "min", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "step", "values": [] },
+        { "name": "name", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name, when no `<kt-label-input>` wraps it.",
+          "values": []
+        },
+        {
+          "name": "locale",
+          "description": "BCP 47 locale for reading and writing numbers. Empty: page, then browser.",
+          "values": []
+        },
+        { "name": "placeholder", "values": [] },
+        { "name": "size", "values": [{ "name": "KtNumberInputSize" }] },
+        { "name": "disabled", "values": [] },
+        { "name": "required", "values": [] },
+        {
+          "name": "error",
+          "description": "Error message. A non-empty value puts the field in its error state.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-otp-input",
+      "description": "A one-time code — the six digits of a sign-in, a verification, a\nsecond factor — one box per character.\n\nTyping moves to the next box, Backspace from an empty box steps back and\nclears the one before, the arrows move between boxes, and a pasted code is\nspread over them. The first box asks the browser for `one-time-code`, so a\ncode that arrived by text message fills itself in. `kt-complete` fires when\nthe code is whole.\n\nA form control: submitted under `name`, `required` until whole, reset with\nthe form.\n---\n\n\n### **Events:**\n - **kt-change** - The code changed. `detail: { value }`.\n- **kt-complete** - The code is whole. `detail: { value }`.\n\n### **CSS Parts:**\n - **group** - The boxes.\n- **box** - One box.\n- **error** - The error message.",
+      "attributes": [
+        { "name": "value", "description": "The code so far.", "values": [] },
+        {
+          "name": "length",
+          "description": "How many characters the code has.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "`numeric` takes digits; `alphanumeric` letters and digits, in capitals.",
+          "values": [{ "name": "KtOtpInputType" }]
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the group: \"Verification code\".",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        { "name": "required", "values": [] },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "error",
+          "description": "An error to show and announce under the boxes.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-prompt-input",
+      "description": "The field a person writes to an assistant in: it grows with what is\nwritten, sends on Enter, and shows the sending on its own send button.\n\nEnter sends and Shift+Enter starts a line; with `submit-on=\"mod-enter\"`,\nEnter starts a line and Cmd or Ctrl+Enter sends. `kt-submit` carries the\ntext and `wait(promise)`: hand it the request, and the send button runs it\n— its plane turning into the spinner and flying off — while the field holds\nthe text, emptied on success, kept on failure. Without `wait` the field\nempties at once.\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-submit** - The text was sent. `detail: { value, wait(promise) }`.\n\n### **Methods:**\n - **submit(): _void_** - Sends what is written, as Enter would. Nothing when it is blank, disabled or sending.\n\n### **Slots:**\n - **attachments** - Above the text: files or context added to the message.\n- **actions** - Beside the send button: attach, a model picker, a mode.\n\n### **CSS Parts:**\n - **base** - The field.\n- **textarea** - The native `<textarea>`.\n- **send** - The send button.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The text in the field.",
+          "values": []
+        },
+        { "name": "placeholder", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name for the field. Defaults to the translated \"Message\".",
+          "values": []
+        },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "max-rows",
+          "description": "How many lines it grows to before it scrolls.",
+          "values": []
+        },
+        {
+          "name": "submit-on",
+          "description": "`enter` sends on Enter; `mod-enter` on Cmd or Ctrl+Enter, leaving Enter for new lines.",
+          "values": [{ "name": "KtPromptInputSubmitOn" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-radio",
       "description": "One option of a `<kt-radio-group>`.\n\nIt draws itself and carries `role=\"radio\"`; the group owns the selection,\nthe tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\nuseful.\n---\n\n\n### **Slots:**\n - _default_ - The label.\n\n### **CSS Parts:**\n - **base** - The `role=\"radio\"` row.\n- **circle** - The drawn circle.",
@@ -1073,6 +1765,38 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-slider",
+      "description": "A value picked by sliding along a range: a volume, a threshold, or with\n`range`, a price between two ends.\n\nEach thumb is a native `<input type=\"range\">`, so the keyboard — arrows,\nPage Up and Down, Home and End — and what a screen reader announces come\nfrom the platform. The value is text, like a form field's: `\"40\"`, or\n`\"20/80\"` with `range`, low then high. It is kept within `min` and `max`\nand on `step`, and two thumbs never cross.\n---\n\n\n### **Events:**\n - **kt-input** - While sliding. `detail: { value }`.\n- **kt-change** - Once let go. `detail: { value }`.\n\n### **CSS Parts:**\n - **track** - The rail.\n- **fill** - The selected stretch of it.\n- **value** - The shown value, with `show-value`.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "`\"40\"`, or `\"20/80\"` with `range`. Kept within bounds and on the step.",
+          "values": []
+        },
+        { "name": "min", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "step", "values": [] },
+        {
+          "name": "range",
+          "description": "Two thumbs: a low and a high end.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name; shown above the slider with `show-value`.",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "show-value",
+          "description": "Shows the label and the current value above the slider.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-textarea",
       "description": "A multi-line text field, with the same borderless fill and outline states as\n`<kt-input>`.\n\nA character counter appears whenever `maxlength` is set — the field tells\nthe user where the limit is before the browser silently stops accepting\nkeystrokes.\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed. `detail: { value }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<textarea>`.\n- **counter** - The character counter.",
@@ -1146,6 +1870,43 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-app-shell",
+      "description": "The frame of an application: a header along the top, a sidebar down the\nside, and the content, which scrolls on its own.\n\nWide, the sidebar sits beside the content, and its toggle narrows it to a\nrail (`collapsed`). Narrower than `breakpoint` — measured on the shell\nitself, not the viewport — the sidebar leaves the layout: the toggle opens\nit as a drawer over the content, behind a backdrop, closed by Escape or a\nclick outside. A closed drawer is inert, so Tab never wanders into it.\n\nThe shell fills its container's height; give the container one —\n`height: 100dvh` on a page, a fixed height in a preview.\n---\n\n\n### **Events:**\n - **kt-sidebar-toggle** - The sidebar opened or closed — collapsed or expanded when wide, the drawer when narrow. `detail: { open }`.\n\n### **Methods:**\n - **toggleSidebar(): _void_** - Opens or closes the sidebar, as its toggle does.\n\n### **Slots:**\n - **header** - The top bar: a wordmark, a search, an account menu.\n- **sidebar** - Down the side: the application's navigation.\n- _default_ - The content.\n\n### **CSS Properties:**\n - **--kt-app-shell-sidebar-width** - The sidebar's width. 240px. _(default: undefined)_\n- **--kt-app-shell-rail-width** - Its width when collapsed. 64px. _(default: undefined)_\n- **--kt-app-shell-header-height** - The top bar's height. 56px. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The top bar.\n- **sidebar** - The `<aside>`.\n- **main** - The `<main>`.\n- **toggle** - The sidebar's toggle.",
+      "attributes": [
+        {
+          "name": "collapsed",
+          "description": "Wide: the sidebar narrowed to a rail.",
+          "values": []
+        },
+        {
+          "name": "sidebar-open",
+          "description": "Narrow: the sidebar open as a drawer.",
+          "values": []
+        },
+        {
+          "name": "breakpoint",
+          "description": "Below this width, in pixels of the shell itself, the sidebar becomes a drawer.",
+          "values": []
+        },
+        {
+          "name": "no-toggle",
+          "description": "Leaves the toggle out, for a header that brings its own.",
+          "values": []
+        },
+        {
+          "name": "no-landmarks",
+          "description": "Draws the sidebar and the content as plain boxes rather than an \\`<aside>\\`\nand a \\`<main>\\` — for a shell shown inside a page that has its own, a\npreview or a demo, where a second main landmark would be wrong.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the sidebar. Defaults to the translated \"Sidebar\".",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-breadcrumb",
       "description": "A trail showing where the current page sits.\n\nThe last entry is the current page: rendered as text, not a link, and marked\n`aria-current=\"page\"`. A breadcrumb whose final item links to the page you\nare already on is a dead control.\n---\n\n\n### **Events:**\n - **kt-navigate** - An entry was activated. `detail: { item, index }`. Cancel it to keep the browser from following the href.\n\n### **CSS Parts:**\n - **nav** - The `<nav>`.\n- **item** - A trail entry.",
@@ -1158,6 +1919,33 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-footer",
+      "description": "The site footer: a contentinfo landmark holding the brand and a word about\nthe product, columns of links, actions, and a legal line under them.\n\nThe columns are data — `footer.columns = [{ heading, links }]` — so they are\nlaid out, named and marked alike; the brand, the actions and the legal line\nare slots, for whatever a product puts there. It lays itself out from its\nown width, not the viewport's: in a narrow panel it stacks as on a phone.\n\n`variant=\"simple\"` is a single row — the brand, the links run together, the\nactions — for a page that needs a footer rather than a site map.\n---\n\n\n### **Slots:**\n - **brand** - Logo or wordmark.\n- _default_ - A word under the brand: what the product is.\n- **actions** - Buttons and links under it — social links, a newsletter form.\n- **legal** - The bottom line: copyright, terms, privacy. Its row is left out while empty.\n\n### **CSS Properties:**\n - **--kt-footer-max-width** - How wide the content runs. None by default. _(default: undefined)_\n- **--kt-footer-padding-inline** - The space at its sides. The card padding by default; zero lines it up with a page's content when the page already has its own. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<footer>`.\n- **brand** - The brand, its text and the actions.\n- **columns** - The navigation holding the columns.\n- **column** - One column.\n- **bottom** - The legal row.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "`columns`: a heading over each list. `simple`: one row of links.",
+          "values": [{ "name": "KtFooterVariant" }]
+        },
+        {
+          "name": "bordered",
+          "description": "A rule along the top.",
+          "values": []
+        },
+        {
+          "name": "heading-level",
+          "description": "The level of the column headings, 2 to 6.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name for the footer and its navigation.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-header",
       "description": "The application header: a banner landmark holding the brand, the primary\nnavigation and a row of actions.\n\nBelow `--kt-header-breakpoint` (900px by default) the navigation collapses\nbehind a menu button and reappears as a panel under the bar. That threshold\nis a token rather than a hard-coded media query, because how much navigation\nfits depends on how much navigation you put in.\n---\n\n\n### **Events:**\n - **kt-menu-toggle** - The mobile menu opened or closed. `detail: { open }`.\n\n### **Methods:**\n - **closeMenu(): _void_** - Closes the collapsed navigation — call it after routing.\n\n### **Slots:**\n - **brand** - Logo or wordmark, at the start.\n- _default_ - Primary navigation, in the middle.\n- **actions** - Buttons and links, at the end. Stays visible on mobile.\n- **menu** - What the menu button reveals below the breakpoint. Separate from the default slot because a node can only be assigned to one slot; put a compact copy of the navigation here.\n- **bottom** - A second row under the bar — sub-navigation, a breadcrumb.\n\n### **CSS Properties:**\n - **--kt-header-breakpoint** - Where the navigation collapses. 900px. _(default: undefined)_\n- **--kt-header-height** - Height of the main row. 64px. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<header>`.\n- **bar** - The main row.\n- **bottom** - The second row. The bar is a three-column grid whose outer columns are equal, so the navigation is centred in the bar rather than in whatever the brand and the actions left over. Set `nav-align=\"start\"` to butt it against the brand instead.",
@@ -1221,6 +2009,29 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-steps",
+      "description": "The steps of a flow — sign-up, checkout, onboarding — and where the reader\nis in it.\n\nSteps before `current` are complete, `current` is current, the rest are to\ncome — all of them, while `current` names no step; a step with `error` shows as needing attention wherever it is. With\n`navigable`, a completed step is a button that goes back to it; going\nforward is the flow's job, not the stepper's.\n\nAn ordered list: the number is the step's place, `aria-current=\"step\"`\nmarks the current one, and each state is said in words, not only shown.\n---\n\n\n### **Events:**\n - **kt-change** - A completed step was picked, with `navigable`. `detail: { id }`.\n\n### **CSS Parts:**\n - **list** - The `<ol>`.\n- **step** - A step.\n- **marker** - A step's number, tick or alert.\n- **connector** - The line from a step to the next.",
+      "attributes": [
+        {
+          "name": "current",
+          "description": "The id of the step the reader is on.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the list: what the flow is.",
+          "values": []
+        },
+        { "name": "orientation", "values": [{ "name": "KtStepsOrientation" }] },
+        {
+          "name": "navigable",
+          "description": "Completed steps become buttons that go back to them.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-sub-menu-navigation",
       "description": "The sidebar navigation: uppercase overline section titles over lists of\nlinks, to any depth.\n\nThe recursion is the point. Every product grows a third level eventually —\nSettings holds Members holds Roles — and the usual answer is to hand-roll\nthat one branch beside the component, which is how two navigation styles end\nup on one screen. Here a branch renders exactly like the level above it,\nindented by depth, and a branch containing the current page opens itself.\n---\n\n\n### **Events:**\n - **kt-navigate** - A link was activated. `detail: { item }`. Cancel it to keep the browser from following the href, for client-side routing.\n- **kt-toggle** - A branch opened or closed. `detail: { item, open }`.\n\n### **CSS Parts:**\n - **nav** - The `<nav>`.\n- **section** - A section.\n- **title** - A section title.\n- **item** - A navigation link or branch button, at any depth.",
@@ -1314,9 +2125,48 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-user-menu",
+      "description": "The account menu at the end of an application's header: the person's\navatar, and under it who is signed in and what they can do — their profile,\ntheir settings, switching workspace, signing out.\n\nA menu button, as the WAI-ARIA pattern describes: Enter, Space or the down\narrow open it on the first item, the up arrow on the last; the arrows, Home\nand End move between items; Escape closes it and gives the focus back; Tab\nor a click outside close it too. The panel is drawn in the top layer, so no\noverflow clips it.\n---\n\n\n### **Events:**\n - **kt-select** - An item was chosen. `detail: { id, item }`.\n- **kt-open** - The menu opened.\n- **kt-close** - The menu closed.\n\n### **Methods:**\n - **show(from: _'start' | 'end'_): _void_** - Opens the menu, focusing its first item, or its last with `from: 'end'`.\n- **hide(refocus): _void_** - Closes the menu; the focus goes back to the button unless told otherwise.\n\n### **Slots:**\n - _default_ - Under the items: a workspace switcher, a theme toggle, a plan badge.\n\n### **CSS Parts:**\n - **trigger** - The button.\n- **panel** - The menu's panel.\n- **item** - One item.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The person signed in: names the button, draws the avatar's initials.",
+          "values": []
+        },
+        {
+          "name": "email",
+          "description": "Under the name in the panel.",
+          "values": []
+        },
+        {
+          "name": "avatar",
+          "description": "A picture for the avatar.",
+          "values": []
+        },
+        {
+          "name": "show-name",
+          "description": "Shows the name beside the avatar on the button.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "kt-accordion",
+      "description": "A set of `kt-collapsible` sections that open one at a time: opening one\nfolds the one that was open, so the page stays the length of one answer.\n`multiple` lets each open on its own.\n\nThe arrows, Home and End move between the sections' summaries, as the\nWAI-ARIA accordion pattern describes; Enter and Space open them, as they\nalways do.\n---\n\n\n### **Events:**\n - **kt-change** - A section opened or closed. `detail: { open }`, the indexes of the open sections.\n\n### **Slots:**\n - _default_ - The `kt-collapsible` sections.",
+      "attributes": [
+        {
+          "name": "multiple",
+          "description": "Lets each section open on its own, instead of one at a time.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-collapsible",
-      "description": "A section that folds away.\n\nBuilt on `<details>`, which means it works before the JavaScript loads,\nsurvives find-in-page — the browser opens a closed section to reveal a match —\nand needs no ARIA of its own.\n---\n\n\n### **Events:**\n - **kt-toggle** - Opened or closed. `detail: { open }`.\n\n### **Slots:**\n - _default_ - The contents.\n- **summary** - Replaces the `heading` attribute.\n\n### **CSS Parts:**\n - **base** - The `<details>`.\n- **summary** - The clickable row.\n- **content** - The revealed panel.",
+      "description": "A section that folds away.\n\nBuilt on `<details>`, which means it works before the JavaScript loads,\nsurvives find-in-page — the browser opens a closed section to reveal a match —\nand needs no ARIA of its own.\n\nOpening unfolds the content to its height and closing folds it away, in\nevery browser: the details stays open until the fold is done, and a click\nhalf-way turns back from where it is. Not on the first render, and not\nunder reduced motion.\n---\n\n\n### **Events:**\n - **kt-toggle** - Opened or closed. `detail: { open }`.\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Moves the focus to the summary, the control a person reaches it by.\n\n### **Slots:**\n - _default_ - The contents.\n- **summary** - Replaces the `heading` attribute.\n\n### **CSS Parts:**\n - **base** - The `<details>`.\n- **summary** - The clickable row.\n- **content** - The revealed panel.",
       "attributes": [
         { "name": "open", "values": [] },
         { "name": "heading", "values": [] },
@@ -1328,6 +2178,24 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-command-palette",
+      "description": "The palette a product opens on Cmd+K: every action and page, a few\nkeystrokes away.\n\nGive it `commands`; it lists them under their groups, narrows them as you\ntype — every word, in any order, in the label, a keyword or the group,\nignoring case and accents — and runs the one you pick with `kt-select`.\nCmd+K or Ctrl+K opens and closes it from anywhere on the page; `hotkey`\nchanges the key or, empty, turns it off.\n\nBuilt on the native `<dialog>`: the top layer, focus containment and the\ninert page come from the platform. The field is a combobox over a listbox,\nso a screen reader follows the active command as the arrows move.\n---\n\n\n### **Events:**\n - **kt-select** - A command was run. `detail: { id, command }`.\n- **kt-open** - It opened.\n- **kt-close** - It closed.\n\n### **CSS Parts:**\n - **dialog** - The `<dialog>`.\n- **input** - The search field.\n- **list** - The scrolling list.\n- **footer** - The keyboard hints.",
+      "attributes": [
+        { "name": "open", "values": [] },
+        {
+          "name": "placeholder",
+          "description": "Placeholder of the search field. Defaults to the translated string.",
+          "values": []
+        },
+        {
+          "name": "hotkey",
+          "description": "The key that opens it with Cmd or Ctrl, from anywhere on the page. Empty\nturns the shortcut off — for a page with two palettes, or its own key.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-confirm-dialog",
       "description": "A centred yes/no overlay, for an action worth stopping to think about.\n\nConfirmations are for destructive or irreversible work. Editing belongs in a\n`<kt-side-panel>`, which does not block the page behind it.\n\n`role=\"alertdialog\"` and the cancel button takes focus on open, so a stray\nEnter dismisses rather than confirms.\n---\n\n\n### **Events:**\n - **kt-confirm** - The confirm button was pressed.\n- **kt-cancel** - Dismissed, by button, Escape or backdrop.\n\n### **Slots:**\n - _default_ - Extra content between the message and the buttons.\n\n### **CSS Parts:**\n - **dialog** - The `<dialog>`.\n- **actions** - The button row.",
@@ -1408,6 +2276,12 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "kt-tour",
+      "description": "A guided tour: a few steps, each pointing at a part of the page with a word\nabout it — a product's first run, a new feature.\n\nEach step lights its target, dimming the rest of the page, scrolls it into\nview and sets a card beside it: the step's title and words, where the tour\nis (\"Step 2 of 4\"), and the way on — Previous, Next, then Done. Escape or the\nclose button end it. The card takes the focus at each step; the page stays\nusable, since a tour points at things rather than taking them away.\n---\n\n\n### **Events:**\n - **kt-step** - A step showed. `detail: { index }`.\n- **kt-finish** - The last step's Done was pressed.\n- **kt-close** - The tour was closed before its end.\n\n### **Methods:**\n - **start(index): _void_** - Starts the tour, on its first step or on `index`.\n- **close(): _void_** - Ends the tour before its last step.\n- **next(): _void_** - The next step, or the end after the last.\n- **previous(): _void_** - The step before.\n\n### **CSS Parts:**\n - **spotlight** - The light around the target.\n- **card** - The step's card.",
+      "attributes": [],
+      "references": []
     }
   ]
 }