kanto-ds 1.0.1 → 1.2.0

package/dist/web-types.json

@@ -0,0 +1,3186 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "kanto-ds",
+  "version": "1.2.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "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\n### **CSS Parts:**\n - **base** - The avatar circle.\n- **image** - The `<img>`, when `src` is set and loads.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The person's name. Drives the initials, the colour and the label.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "src",
+              "description": "Photo. Falls back to initials if it is missing or fails to load.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtAvatarSize", "default": "'medium'" }
+            },
+            {
+              "name": "square",
+              "description": "Rounds to the card radius instead of a circle — for organisations.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "status",
+              "description": "Presence dot. Omit for none.",
+              "value": { "type": "KtAvatarStatus | undefined" }
+            },
+            {
+              "name": "color",
+              "description": "Overrides the colour picked from the name.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The person's name. Drives the initials, the colour and the label.",
+                "type": "string"
+              },
+              {
+                "name": "src",
+                "description": "Photo. Falls back to initials if it is missing or fails to load.",
+                "type": "string"
+              },
+              { "name": "size", "type": "KtAvatarSize" },
+              {
+                "name": "square",
+                "description": "Rounds to the card radius instead of a circle — for organisations.",
+                "type": "boolean"
+              },
+              {
+                "name": "status",
+                "description": "Presence dot. Omit for none.",
+                "type": "KtAvatarStatus | undefined"
+              },
+              {
+                "name": "color",
+                "description": "Overrides the colour picked from the name.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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\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`.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The shape: what kind of thing this is.",
+              "value": { "type": "KtBadgeVariant", "default": "'tag'" }
+            },
+            {
+              "name": "tone",
+              "description": "The colour: what it means. Independent of `variant`.",
+              "value": { "type": "KtBadgeTone", "default": "'neutral'" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtBadgeSize", "default": "'medium'" }
+            },
+            {
+              "name": "label",
+              "description": "Badge text. The default slot wins when both are present.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "color",
+              "description": "Category hue: any CSS colour. The fill is this colour at 20%.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "icon",
+              "description": "Lucide icon name, before the text.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "clickable",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "removable",
+              "description": "Adds a remove button. Fires a cancelable `kt-remove`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "max",
+              "description": "Caps a numeric label: `max=\"99\"` shows `99+`.\nIgnored when the content is not a number.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "error",
+              "description": "Shorthand for `tone=\"danger\"`, kept from the field components.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The text. Falls back to the `label` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-badge-click",
+              "description": "A `clickable` badge was activated. Cancelable."
+            },
+            {
+              "name": "kt-remove",
+              "description": "The remove button was pressed. Cancelable: cancel it and remove the badge yourself once the server agrees."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The shape: what kind of thing this is.",
+                "type": "KtBadgeVariant"
+              },
+              {
+                "name": "tone",
+                "description": "The colour: what it means. Independent of `variant`.",
+                "type": "KtBadgeTone"
+              },
+              { "name": "size", "type": "KtBadgeSize" },
+              {
+                "name": "label",
+                "description": "Badge text. The default slot wins when both are present.",
+                "type": "string"
+              },
+              {
+                "name": "color",
+                "description": "Category hue: any CSS colour. The fill is this colour at 20%.",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "Lucide icon name, before the text.",
+                "type": "string"
+              },
+              { "name": "clickable", "type": "boolean" },
+              {
+                "name": "removable",
+                "description": "Adds a remove button. Fires a cancelable `kt-remove`.",
+                "type": "boolean"
+              },
+              {
+                "name": "max",
+                "description": "Caps a numeric label: `max=\"99\"` shows `99+`.\nIgnored when the content is not a number.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "error",
+                "description": "Shorthand for `tone=\"danger\"`, kept from the field components.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-badge-click",
+                "description": "A `clickable` badge was activated. Cancelable."
+              },
+              {
+                "name": "kt-remove",
+                "description": "The remove button was pressed. Cancelable: cancel it and remove the badge yourself once the server agrees."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Visual variant.",
+              "value": { "type": "KtButtonVariant", "default": "'primary'" }
+            },
+            {
+              "name": "size",
+              "description": "Height: 32 / 40 / 48px at the desktop scale.",
+              "value": { "type": "KtButtonSize", "default": "'medium'" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "Native button behaviour. `submit` and `reset` act on the enclosing form.",
+              "value": { "type": "KtButtonType", "default": "'button'" }
+            },
+            {
+              "name": "icon",
+              "description": "Lucide icon name, kebab-case.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "icon-position",
+              "description": "Which side of the label the icon sits on.",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name. Required for an icon-only button.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "full-width",
+              "description": "Stretches the button to the width of its container.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Submitted with the form, as on a native button.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "value", "value": { "type": "string", "default": "''" } }
+          ],
+          "slots": [{ "name": "", "description": "The button label." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "Visual variant.",
+                "type": "KtButtonVariant"
+              },
+              {
+                "name": "size",
+                "description": "Height: 32 / 40 / 48px at the desktop scale.",
+                "type": "KtButtonSize"
+              },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "type",
+                "description": "Native button behaviour. `submit` and `reset` act on the enclosing form.",
+                "type": "KtButtonType"
+              },
+              {
+                "name": "icon",
+                "description": "Lucide icon name, kebab-case.",
+                "type": "string"
+              },
+              {
+                "name": "iconPosition",
+                "description": "Which side of the label the icon sits on.",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name. Required for an icon-only button.",
+                "type": "string"
+              },
+              {
+                "name": "popup",
+                "description": "The kind of popup this button opens, as `aria-haspopup` on the inner\nbutton. Set by `<kt-dropdown>` on its trigger; rarely by hand.",
+                "type": "'menu' | 'listbox' | 'dialog' | undefined"
+              },
+              {
+                "name": "expanded",
+                "description": "Whether the popup or region this button controls is open, as `aria-expanded`.",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "fullWidth",
+                "description": "Stretches the button to the width of its container.",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Submitted with the form, as on a native button.",
+                "type": "string"
+              },
+              { "name": "value", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "clickable",
+              "description": "Makes the card a keyboard-reachable control.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "image",
+              "description": "Convenience image. For anything richer, use the `media` slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Alternative text for `image`. Empty means decorative.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-position",
+              "value": { "type": "KtCardImagePosition", "default": "'left'" }
+            },
+            {
+              "name": "image-size",
+              "description": "Width (left/right) or height (top/bottom) of the media well.",
+              "value": { "type": "string", "default": "'120px'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The card body." },
+            { "name": "header", "description": "Above the body." },
+            { "name": "footer", "description": "Below the body." },
+            {
+              "name": "media",
+              "description": "Replaces the `image` attribute for anything that is not a plain `<img>` — a chart, a map, a video."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-card-click",
+              "description": "The card was activated, by pointer or keyboard. Only fired when `clickable` is set."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "clickable",
+                "description": "Makes the card a keyboard-reachable control.",
+                "type": "boolean"
+              },
+              {
+                "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.",
+                "type": "boolean"
+              },
+              {
+                "name": "image",
+                "description": "Convenience image. For anything richer, use the `media` slot.",
+                "type": "string"
+              },
+              {
+                "name": "imageAlt",
+                "description": "Alternative text for `image`. Empty means decorative.",
+                "type": "string"
+              },
+              { "name": "imagePosition", "type": "KtCardImagePosition" },
+              {
+                "name": "imageSize",
+                "description": "Width (left/right) or height (top/bottom) of the media well.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-card-click",
+                "description": "The card was activated, by pointer or keyboard. Only fired when `clickable` is set."
+              }
+            ]
+          }
+        },
+        {
+          "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\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>`.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "language",
+              "description": "Language label, shown uppercase. Purely informative.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "copy",
+              "description": "Shows the copy button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the block, when the language alone is not enough.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The code. Plain text, or a highlighter's markup."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-copy",
+              "description": "The copy button was pressed. `detail: { code }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "language",
+                "description": "Language label, shown uppercase. Purely informative.",
+                "type": "string"
+              },
+              {
+                "name": "copy",
+                "description": "Shows the copy button.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the block, when the language alone is not enough.",
+                "type": "string"
+              },
+              {
+                "name": "code",
+                "description": "The code as plain text, whatever markup it is wrapped in.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-copy",
+                "description": "The copy button was pressed. `detail: { code }`."
+              }
+            ]
+          }
+        },
+        {
+          "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\n### **CSS Parts:**\n - **svg** - The `<svg>` root.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "Icon name, kebab-case: `chevron-down`, `circle-alert`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "Width and height in pixels.",
+              "value": { "type": "number", "default": "24" }
+            },
+            {
+              "name": "stroke-width",
+              "description": "Stroke width passed to the SVG.",
+              "value": { "type": "number", "default": "2" }
+            },
+            {
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "Icon name, kebab-case: `chevron-down`, `circle-alert`.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "Width and height in pixels.",
+                "type": "number"
+              },
+              {
+                "name": "strokeWidth",
+                "description": "Stroke width passed to the SVG.",
+                "type": "number"
+              },
+              {
+                "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.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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\n### **Slots:**\n - _default_ - The key, when `keys` is not used.\n\n### **CSS Parts:**\n - **base** - The wrapper.\n- **key** - One key.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "keys",
+              "description": "Space-separated keys: `meta k`, `ctrl shift p`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "platform",
+              "description": "Forces a platform instead of sniffing the current one.",
+              "value": {
+                "type": "'auto' | 'mac' | 'other'",
+                "default": "'auto'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The key, when `keys` is not used." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "keys",
+                "description": "Space-separated keys: `meta k`, `ctrl shift p`.",
+                "type": "string"
+              },
+              {
+                "name": "platform",
+                "description": "Forces a platform instead of sniffing the current one.",
+                "type": "'auto' | 'mac' | 'other'"
+              },
+              {
+                "name": "labels",
+                "description": "The keys as they will be shown. Exposed so tests and docs can read them.",
+                "type": "string[]"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Visual variant, forwarded to both segments.",
+              "value": { "type": "KtButtonVariant", "default": "'primary'" }
+            },
+            {
+              "name": "size",
+              "description": "Height, forwarded to both segments.",
+              "value": { "type": "KtButtonSize", "default": "'medium'" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon",
+              "description": "Lucide icon name for the primary segment.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "menu-label",
+              "description": "Accessible name of the caret, which has no text of its own.",
+              "value": { "type": "string", "default": "'More actions'" }
+            },
+            {
+              "name": "preferred-placement",
+              "description": "Where to put the menu when there is room on both sides.",
+              "value": { "type": "KtDropdownPlacement", "default": "'bottom'" }
+            },
+            {
+              "name": "empty-text",
+              "value": { "type": "string", "default": "'No actions'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The primary action's label." }
+          ],
+          "events": [
+            {
+              "name": "kt-select",
+              "description": "A menu row was chosen. `detail: { value, item }`."
+            },
+            { "name": "kt-open", "description": "The menu opened." },
+            { "name": "kt-close", "description": "The menu closed." }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "items",
+                "description": "The menu rows.",
+                "type": "readonly KtSplitButtonItem[]"
+              },
+              {
+                "name": "variant",
+                "description": "Visual variant, forwarded to both segments.",
+                "type": "KtButtonVariant"
+              },
+              {
+                "name": "size",
+                "description": "Height, forwarded to both segments.",
+                "type": "KtButtonSize"
+              },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "icon",
+                "description": "Lucide icon name for the primary segment.",
+                "type": "string"
+              },
+              {
+                "name": "menuLabel",
+                "description": "Accessible name of the caret, which has no text of its own.",
+                "type": "string"
+              },
+              {
+                "name": "preferredPlacement",
+                "description": "Where to put the menu when there is room on both sides.",
+                "type": "KtDropdownPlacement"
+              },
+              { "name": "emptyText", "type": "string" },
+              {
+                "name": "isOpen",
+                "description": "Whether the menu is showing.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-select",
+                "description": "A menu row was chosen. `detail: { value, item }`."
+              },
+              { "name": "kt-open", "description": "The menu opened." },
+              { "name": "kt-close", "description": "The menu closed." }
+            ]
+          }
+        },
+        {
+          "name": "kt-chart",
+          "description": "A chart, drawn from the token layer.\n\nLine, area and bar — stacked, sideways or mixed — plus scatter, bubble,\npie, doughnut, polar area and radar, all in Kanto's voice: the eight\ncategorical hues in fixed order, one value axis, recessive grid, and the\ndata always available as a table.\n\n**Colour.** One series takes the brand hue: with nothing to tell apart there\nis no identity to encode, and the title names it. Two or more take the fixed\ncategorical order in `--chart-series-1…8`, assigned by position and never\ncycled, so a series keeps its colour when a filter removes its neighbours.\nSlices take the same order by slice.\n\n**The table is not optional.** Every chart also renders its data as a table,\nvisually hidden by default. It is what a screen reader reads, and it is the\nrelief that four of the light-theme series hues require, sitting as they do\nbelow 3:1 on a light surface.\n\n---\n\n\n### **Events:**\n - **kt-point-hover** - The active point changed. `detail: { index, series }`; `index` is -1 when nothing is active, `series` -1 when the index spans every series.\n- **kt-series-toggle** - A legend item was pressed. `detail: { series, hidden }`. Cancelable.\n\n### **CSS Parts:**\n - **svg** - The plot.\n- **legend** - The legend.\n- **table** - The data table.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "value": { "type": "KtChartType", "default": "'area'" }
+            },
+            {
+              "name": "height",
+              "value": { "type": "number", "default": "200" }
+            },
+            {
+              "name": "no-grid",
+              "description": "Grid lines.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-axis",
+              "description": "Hides the value axis labels, for a chart too small to carry them.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-table",
+              "description": "Puts the data table on screen instead of only in the accessibility tree.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "smooth",
+              "description": "Smooths lines and areas through a monotone spline.\n\nOff by default on purpose: a curve between two samples draws values that\nwere never measured. Turn it on when the underlying quantity really is\ncontinuous and the reader knows it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "stacked",
+              "description": "Bars, and areas, on top of one another instead of side by side.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "horizontal",
+              "description": "Bars along the horizontal axis, with the categories down the left.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "min",
+              "description": "Pins the bottom of the value axis.",
+              "value": { "type": "number | null", "default": "null" }
+            },
+            {
+              "name": "max",
+              "description": "Pins the top of the value axis.",
+              "value": { "type": "number | null", "default": "null" }
+            },
+            {
+              "name": "center-label",
+              "description": "Names the total in the middle of a doughnut.",
+              "value": { "type": "string", "default": "'Total'" }
+            },
+            {
+              "name": "total-label",
+              "description": "Names the sum in a stacked chart's tooltip and table.",
+              "value": { "type": "string", "default": "'Total'" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name. Say what the chart shows.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-point-hover",
+              "description": "The active point changed. `detail: { index, series }`; `index` is -1 when nothing is active, `series` -1 when the index spans every series."
+            },
+            {
+              "name": "kt-series-toggle",
+              "description": "A legend item was pressed. `detail: { series, hidden }`. Cancelable."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "type", "type": "KtChartType" },
+              { "name": "series", "type": "readonly KtSeries[]" },
+              {
+                "name": "labels",
+                "description": "One label per index along the category axis, or per slice or spoke.",
+                "type": "readonly string[]"
+              },
+              { "name": "height", "type": "number" },
+              {
+                "name": "format",
+                "description": "Formats a value for the value axis, the tooltip and the table.",
+                "type": "Format"
+              },
+              {
+                "name": "formatX",
+                "description": "Formats the x value of a scatter or bubble point.",
+                "type": "Format"
+              },
+              {
+                "name": "noGrid",
+                "description": "Grid lines.",
+                "type": "boolean"
+              },
+              {
+                "name": "noAxis",
+                "description": "Hides the value axis labels, for a chart too small to carry them.",
+                "type": "boolean"
+              },
+              {
+                "name": "showTable",
+                "description": "Puts the data table on screen instead of only in the accessibility tree.",
+                "type": "boolean"
+              },
+              {
+                "name": "smooth",
+                "description": "Smooths lines and areas through a monotone spline.\n\nOff by default on purpose: a curve between two samples draws values that\nwere never measured. Turn it on when the underlying quantity really is\ncontinuous and the reader knows it.",
+                "type": "boolean"
+              },
+              {
+                "name": "stacked",
+                "description": "Bars, and areas, on top of one another instead of side by side.",
+                "type": "boolean"
+              },
+              {
+                "name": "horizontal",
+                "description": "Bars along the horizontal axis, with the categories down the left.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "Pins the bottom of the value axis.",
+                "type": "number | null"
+              },
+              {
+                "name": "max",
+                "description": "Pins the top of the value axis.",
+                "type": "number | null"
+              },
+              {
+                "name": "centerLabel",
+                "description": "Names the total in the middle of a doughnut.",
+                "type": "string"
+              },
+              {
+                "name": "totalLabel",
+                "description": "Names the sum in a stacked chart's tooltip and table.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name. Say what the chart shows.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-point-hover",
+                "description": "The active point changed. `detail: { index, series }`; `index` is -1 when nothing is active, `series` -1 when the index spans every series."
+              },
+              {
+                "name": "kt-series-toggle",
+                "description": "A legend item was pressed. `detail: { series, hidden }`. Cancelable."
+              }
+            ]
+          }
+        },
+        {
+          "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\n### **CSS Parts:**\n - **base** - The container.\n- **track** - The bar.\n- **legend** - The legend list.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "used",
+              "description": "Free text on the left of the caption row — \"25.8 GB used\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "total",
+              "description": "Free text on the right of the caption row — \"of 983 GB\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "A single filled proportion, as a percentage. Ignored when `segments` is set.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The total the segments are measured against. Defaults to their sum.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "show-legend",
+              "description": "Renders the segment list under the bar.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              {
+                "name": "used",
+                "description": "Free text on the left of the caption row — \"25.8 GB used\".",
+                "type": "string"
+              },
+              {
+                "name": "total",
+                "description": "Free text on the right of the caption row — \"of 983 GB\".",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "A single filled proportion, as a percentage. Ignored when `segments` is set.",
+                "type": "number"
+              },
+              {
+                "name": "segments",
+                "description": "The composition. Positions map to `--chart-series-N` unless given a colour.",
+                "type": "readonly KtMeterSegment[]"
+              },
+              {
+                "name": "max",
+                "description": "The total the segments are measured against. Defaults to their sum.",
+                "type": "number"
+              },
+              {
+                "name": "showLegend",
+                "description": "Renders the segment list under the bar.",
+                "type": "boolean"
+              },
+              {
+                "name": "format",
+                "description": "Formats a segment value in the legend.",
+                "type": "(value: number) => string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-pagination",
+          "description": "Previous / next paging, with the position between them.\n\nExtracted from the table footer so a card list or a gallery can page the same\nway a table does.\n\nThe two controls are `<kt-button variant=\"dark\">`, not buttons of its own:\na paging control that invents its own colours, hover and disabled states is\nhow a design system ends up with two kinds of button on one screen.\n\n---\n\n\n### **Events:**\n - **kt-page-change** - A page was requested. `detail: { page }`.\n\n### **CSS Parts:**\n - **previous** - The previous button.\n- **next** - The next button.\n- **info** - The \"Page 2 / 7\" text.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "page",
+              "description": "The current page, 1-based.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "total-pages",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "'Pagination'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-page-change",
+              "description": "A page was requested. `detail: { page }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "page",
+                "description": "The current page, 1-based.",
+                "type": "number"
+              },
+              { "name": "totalPages", "type": "number" },
+              { "name": "label", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "kt-page-change",
+                "description": "A page was requested. `detail: { page }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-stat",
+          "description": "One headline figure: a label, a value, and how it moved.\n\nWorth its own element because every dashboard rebuilds this tile, and every\nrebuild makes the same two mistakes — the delta coloured by sign rather than\nby meaning, and the label competing with the number.\n\n**The colour comes from `trend`, not from the sign.** Falling costs are good\nnews; rising churn is not. Pass `trend` to say which, and `inverted` when\ndown is the direction you want.\n\n---\n\n\n### **Slots:**\n - _default_ - Extra content under the value — a sparkline, a caption.\n\n### **CSS Parts:**\n - **base** - The tile.\n- **value** - The figure.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "delta",
+              "description": "The movement, shown as a badge: `+12%`, `-3%`, `+2`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "trend",
+              "description": "What the movement means. Drives the badge colour.\n`flat` — and the default — stay neutral.",
+              "value": { "type": "KtStatTrend", "default": "'flat'" }
+            },
+            {
+              "name": "inverted",
+              "description": "Down is the good direction here — churn, cost, latency.\nSwaps which trend reads as success.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon",
+              "description": "Lucide icon name, kebab-case.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "caption",
+              "description": "Small print under the figure — \"vs last month\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "'small' | 'medium'", "default": "'medium'" }
+            },
+            {
+              "name": "loading",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Extra content under the value — a sparkline, a caption."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "value", "type": "string" },
+              {
+                "name": "delta",
+                "description": "The movement, shown as a badge: `+12%`, `-3%`, `+2`.",
+                "type": "string"
+              },
+              {
+                "name": "trend",
+                "description": "What the movement means. Drives the badge colour.\n`flat` — and the default — stay neutral.",
+                "type": "KtStatTrend"
+              },
+              {
+                "name": "inverted",
+                "description": "Down is the good direction here — churn, cost, latency.\nSwaps which trend reads as success.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Lucide icon name, kebab-case.",
+                "type": "string"
+              },
+              {
+                "name": "caption",
+                "description": "Small print under the figure — \"vs last month\".",
+                "type": "string"
+              },
+              { "name": "size", "type": "'small' | 'medium'" },
+              { "name": "loading", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-table",
+          "description": "A data table: tri-state sorting, single or multiple selection, paging.\n\n---\n\n\n### **Events:**\n - **kt-sort-change** - Sorting changed. `detail: { key, direction }`.\n- **kt-selection-change** - Selection changed. `detail: { selected, rows }`.\n- **kt-row-click** - A row was clicked. `detail: { row, index }`.\n- **kt-page-change** - The page changed. `detail: { page }`.\n\n### **CSS Parts:**\n - **table** - The `<table>`.\n- **header-cell** - A `<th>`.\n- **row** - A `<tr>`.\n- **cell** - A `<td>`.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "selectable",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selection-mode",
+              "value": {
+                "type": "'single' | 'multiple'",
+                "default": "'multiple'"
+              }
+            },
+            {
+              "name": "page-size",
+              "description": "Rows per page. Zero shows everything and hides the footer.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "loading",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "compact",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "sort-key",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "sort-direction",
+              "value": { "type": "KtSortDirection", "default": "null" }
+            },
+            {
+              "name": "empty-text",
+              "value": { "type": "string", "default": "'No data to display'" }
+            },
+            {
+              "name": "loading-text",
+              "value": { "type": "string", "default": "'Loading…'" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the table.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-sort-change",
+              "description": "Sorting changed. `detail: { key, direction }`."
+            },
+            {
+              "name": "kt-selection-change",
+              "description": "Selection changed. `detail: { selected, rows }`."
+            },
+            {
+              "name": "kt-row-click",
+              "description": "A row was clicked. `detail: { row, index }`."
+            },
+            {
+              "name": "kt-page-change",
+              "description": "The page changed. `detail: { page }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "columns", "type": "readonly KtTableColumn[]" },
+              { "name": "data", "type": "readonly KtTableRow[]" },
+              { "name": "selectable", "type": "boolean" },
+              { "name": "selectionMode", "type": "'single' | 'multiple'" },
+              {
+                "name": "selected",
+                "description": "The identities of the selected rows.",
+                "type": "readonly unknown[]"
+              },
+              {
+                "name": "pageSize",
+                "description": "Rows per page. Zero shows everything and hides the footer.",
+                "type": "number"
+              },
+              { "name": "loading", "type": "boolean" },
+              { "name": "compact", "type": "boolean" },
+              { "name": "sortKey", "type": "string | null" },
+              { "name": "sortDirection", "type": "KtSortDirection" },
+              {
+                "name": "renderCell",
+                "description": "Renders a cell. Return `undefined` to fall back to the raw value.",
+                "type": "KtCellRenderer | undefined"
+              },
+              { "name": "emptyText", "type": "string" },
+              { "name": "loadingText", "type": "string" },
+              {
+                "name": "label",
+                "description": "Accessible name for the table.",
+                "type": "string"
+              },
+              {
+                "name": "sortedRows",
+                "description": "The rows after sorting, before paging.",
+                "type": "readonly KtTableRow[]"
+              },
+              { "name": "totalPages", "type": "number" },
+              {
+                "name": "visibleRows",
+                "description": "The rows actually on screen.",
+                "type": "readonly KtTableRow[]"
+              },
+              {
+                "name": "selectedRows",
+                "description": "The selected rows themselves, not just their identities.",
+                "type": "readonly KtTableRow[]"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-sort-change",
+                "description": "Sorting changed. `detail: { key, direction }`."
+              },
+              {
+                "name": "kt-selection-change",
+                "description": "Selection changed. `detail: { selected, rows }`."
+              },
+              {
+                "name": "kt-row-click",
+                "description": "A row was clicked. `detail: { row, index }`."
+              },
+              {
+                "name": "kt-page-change",
+                "description": "The page changed. `detail: { page }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-timeline",
+          "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\n### **Slots:**\n - _default_ - The `<kt-timeline-item>` children.\n\n### **CSS Parts:**\n - **base** - The list.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "compact",
+              "description": "Tighter rhythm, for a feed in a side panel.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The `<kt-timeline-item>` children." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "compact",
+                "description": "Tighter rhythm, for a feed in a side panel.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-timeline-item",
+          "description": "One event on a `<kt-timeline>`.\n\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "time",
+              "description": "Shown right-aligned on the heading row. Any string — \"09:24\", \"2 days ago\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "icon",
+              "description": "Lucide icon name. Without one the marker is a plain dot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "variant",
+              "value": { "type": "KtTimelineVariant", "default": "'neutral'" }
+            },
+            {
+              "name": "last",
+              "description": "Set by the parent `<kt-timeline>`: drops the trailing rail segment.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "compact",
+              "description": "Set by the parent `<kt-timeline>`.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The body of the event." },
+            {
+              "name": "actions",
+              "description": "Trailing controls, aligned with the heading."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "heading", "type": "string" },
+              {
+                "name": "time",
+                "description": "Shown right-aligned on the heading row. Any string — \"09:24\", \"2 days ago\".",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "Lucide icon name. Without one the marker is a plain dot.",
+                "type": "string"
+              },
+              { "name": "variant", "type": "KtTimelineVariant" },
+              {
+                "name": "last",
+                "description": "Set by the parent `<kt-timeline>`: drops the trailing rail segment.",
+                "type": "boolean"
+              },
+              {
+                "name": "compact",
+                "description": "Set by the parent `<kt-timeline>`.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-alert",
+          "description": "A message that stays on the page.\n\nAgainst a toast: a toast is transient and interrupts; an alert sits in the\nlayout and waits. Use an alert when the message belongs to the page — a form\nthat failed to save, a trial about to expire, a consent notice — and a toast\nwhen it belongs to the moment.\n\n---\n\n\n### **Events:**\n - **kt-close** - The dismiss button was pressed.\n\n### **Slots:**\n - _default_ - Body text, when `description` is not used.\n- **actions** - Buttons, at the end.\n\n### **CSS Parts:**\n - **base** - The alert.\n- **close** - The dismiss button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": { "type": "KtAlertVariant", "default": "'info'" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "dismissible",
+              "description": "Adds a dismiss button. Removing the alert is the caller's job.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-icon",
+              "description": "Hides the leading icon.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon",
+              "description": "Overrides the icon the variant would pick.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Body text, when `description` is not used."
+            },
+            { "name": "actions", "description": "Buttons, at the end." }
+          ],
+          "events": [
+            {
+              "name": "kt-close",
+              "description": "The dismiss button was pressed."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "variant", "type": "KtAlertVariant" },
+              { "name": "heading", "type": "string" },
+              { "name": "description", "type": "string" },
+              {
+                "name": "dismissible",
+                "description": "Adds a dismiss button. Removing the alert is the caller's job.",
+                "type": "boolean"
+              },
+              {
+                "name": "noIcon",
+                "description": "Hides the leading icon.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Overrides the icon the variant would pick.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-close",
+                "description": "The dismiss button was pressed."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-empty-state",
+          "description": "What a screen shows when it has nothing to show.\n\nWorth a component because the empty case is where products are usually\nthinnest, and where they most need to say what to do next. An icon, a\nsentence and an action beat a blank panel every time.\n\n---\n\n\n### **Slots:**\n - _default_ - Extra content between the description and the actions.\n- **actions** - Buttons.\n\n### **CSS Parts:**\n - **base** - The container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "icon",
+              "description": "Lucide icon name, kebab-case.",
+              "value": { "type": "string", "default": "'inbox'" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "compact",
+              "description": "Tighter padding, for an empty state inside a card or a panel.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Extra content between the description and the actions."
+            },
+            { "name": "actions", "description": "Buttons." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "icon",
+                "description": "Lucide icon name, kebab-case.",
+                "type": "string"
+              },
+              { "name": "heading", "type": "string" },
+              { "name": "description", "type": "string" },
+              {
+                "name": "compact",
+                "description": "Tighter padding, for an empty state inside a card or a panel.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-progress-bar",
+          "description": "A determinate progress bar.\n\nReaching `max` switches the fill to the success colour, so \"done\" reads at a\nglance without the caller having to swap the variant.\n\n---\n\n\n### **CSS Parts:**\n - **track** - The groove.\n- **fill** - The filled portion.\n- **base** - The container.\n- **caption** - The row above the bar.\n- **value** - The percentage, when `show-value` is set.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "value", "value": { "type": "number", "default": "0" } },
+            { "name": "max", "value": { "type": "number", "default": "100" } },
+            {
+              "name": "size",
+              "value": { "type": "KtProgressSize", "default": "'medium'" }
+            },
+            {
+              "name": "variant",
+              "value": { "type": "KtProgressVariant", "default": "'primary'" }
+            },
+            {
+              "name": "show-value",
+              "description": "Draws the percentage in a caption above the bar.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-label",
+              "description": "Shows `label` above the bar as visible text, beside the value.\n\n`label` alone is the accessible name and stays invisible, which is right\nwhen the surrounding copy already says what is progressing.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "striped",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "animated",
+              "description": "Animates the stripes. Requires `striped`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name — what is progressing.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "value", "type": "number" },
+              { "name": "max", "type": "number" },
+              { "name": "size", "type": "KtProgressSize" },
+              { "name": "variant", "type": "KtProgressVariant" },
+              {
+                "name": "showValue",
+                "description": "Draws the percentage in a caption above the bar.",
+                "type": "boolean"
+              },
+              {
+                "name": "showLabel",
+                "description": "Shows `label` above the bar as visible text, beside the value.\n\n`label` alone is the accessible name and stays invisible, which is right\nwhen the surrounding copy already says what is progressing.",
+                "type": "boolean"
+              },
+              { "name": "striped", "type": "boolean" },
+              {
+                "name": "animated",
+                "description": "Animates the stripes. Requires `striped`.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name — what is progressing.",
+                "type": "string"
+              },
+              {
+                "name": "percent",
+                "description": "The value as a whole percentage, clamped to 0–100.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-skeleton",
+          "description": "A loading placeholder, pulsing between two steps of the surface ramp.\n\nWith `count` above one, the last line is drawn short — the shape a paragraph\nactually has, which is what makes a skeleton read as text rather than as\nstacked bars.\n\nThe whole thing is `aria-hidden`: it is a picture of content that is not\nthere yet. Announce loading state on the region that owns it, with\n`aria-busy`.\n\n---\n\n\n### **CSS Parts:**\n - **line** - One placeholder line.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": { "type": "KtSkeletonVariant", "default": "'text'" }
+            },
+            {
+              "name": "width",
+              "description": "Any CSS length. Defaults to the full width, or 40px for a circle.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "height",
+              "description": "Any CSS length. Defaults to the variant's natural height.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "count",
+              "description": "How many lines to draw. Above one, the last is shortened.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "animated",
+              "value": { "type": "boolean", "default": "true" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "variant", "type": "KtSkeletonVariant" },
+              {
+                "name": "width",
+                "description": "Any CSS length. Defaults to the full width, or 40px for a circle.",
+                "type": "string"
+              },
+              {
+                "name": "height",
+                "description": "Any CSS length. Defaults to the variant's natural height.",
+                "type": "string"
+              },
+              {
+                "name": "count",
+                "description": "How many lines to draw. Above one, the last is shortened.",
+                "type": "number"
+              },
+              { "name": "animated", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-toast",
+          "description": "A transient notification.\n\nThe only element in Kanto with a real shadow, and the only one that blurs\nwhat is behind it: a toast floats above the page, so it has to say so.\n\n---\n\n\n### **Events:**\n - **kt-toast-close** - The toast asked to be removed, by timeout or by the dismiss button. `<kt-toast-container>` listens for this.\n\n### **Methods:**\n - **pause(): _void_** - Pauses the countdown. The container calls this while the pointer is over the stack.\n- **resume(): _void_** - Resumes a paused countdown from where it stopped.\n- **close(): _void_** - Asks to be removed. The container is what actually removes it.\n\n### **CSS Parts:**\n - **base** - The toast surface.\n- **close** - The dismiss button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": { "type": "KtToastVariant", "default": "'information'" }
+            },
+            {
+              "name": "heading",
+              "description": "The toast's title.\n\nNamed `heading` because every element already has a `title`, and shadowing\nit would turn the toast into its own tooltip.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "dismissible",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "duration",
+              "description": "Auto-dismiss after this many milliseconds, with a countdown bar. Zero\nkeeps the toast until something removes it.",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-toast-close",
+              "description": "The toast asked to be removed, by timeout or by the dismiss button. `<kt-toast-container>` listens for this."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "variant", "type": "KtToastVariant" },
+              {
+                "name": "heading",
+                "description": "The toast's title.\n\nNamed `heading` because every element already has a `title`, and shadowing\nit would turn the toast into its own tooltip.",
+                "type": "string"
+              },
+              { "name": "description", "type": "string" },
+              { "name": "dismissible", "type": "boolean" },
+              {
+                "name": "duration",
+                "description": "Auto-dismiss after this many milliseconds, with a countdown bar. Zero\nkeeps the toast until something removes it.",
+                "type": "number"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-toast-close",
+                "description": "The toast asked to be removed, by timeout or by the dismiss button. `<kt-toast-container>` listens for this."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "position",
+              "value": {
+                "type": "KtToastPosition",
+                "default": "'bottom-right'"
+              }
+            },
+            {
+              "name": "limit",
+              "description": "Oldest toasts are dropped once the stack reaches this many.",
+              "value": { "type": "number", "default": "5" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The toasts. Usually filled by `show()` rather than by hand."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "position", "type": "KtToastPosition" },
+              {
+                "name": "limit",
+                "description": "Oldest toasts are dropped once the stack reaches this many.",
+                "type": "number"
+              },
+              {
+                "name": "toasts",
+                "description": "The toasts currently on screen, oldest first.",
+                "type": "KtToast[]"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-tooltip",
+          "description": "A short label that appears on hover or focus.\n\nWrap the thing it describes:\n\n```html\n<kt-tooltip text=\"Refresh the data\">\n  <kt-button icon=\"refresh-cw\" label=\"Refresh\"></kt-button>\n</kt-tooltip>\n```\n\nA tooltip is a *description*, never the only name of a control. If the\ntrigger has no visible text, give it its own `label` too — a tooltip that has\nto be hovered to be read leaves touch and screen-reader users with nothing.\n\n---\n\n\n### **Slots:**\n - _default_ - The trigger.\n\n### **CSS Parts:**\n - **bubble** - The tooltip bubble.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "text", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "placement",
+              "value": { "type": "KtTooltipPlacement", "default": "'top'" }
+            },
+            {
+              "name": "disabled",
+              "description": "Suppresses the tooltip without removing it from the markup.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The trigger." }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "text", "type": "string" },
+              { "name": "placement", "type": "KtTooltipPlacement" },
+              {
+                "name": "disabled",
+                "description": "Suppresses the tooltip without removing it from the markup.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-drag-drop",
+          "description": "A file drop zone.\n\nAccepts a drop or a click, lists what was picked with sizes and types, and\nlets each entry be removed. It holds the files in memory and reports them —\nuploading is the application's business.\n\n---\n\n\n### **Events:**\n - **kt-files-change** - The selection changed. `detail: { files }`.\n- **kt-files-rejected** - Files were refused. `detail: { files, reason }`.\n\n### **Methods:**\n - **clear(): _void_** - Empties the selection without firing a rejection.\n\n### **CSS Parts:**\n - **base** - The dashed drop zone.\n- **list** - The list of chosen files.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading",
+              "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
+              "value": { "type": "string", "default": "'Drag and drop or'" }
+            },
+            {
+              "name": "link-text",
+              "description": "The clickable-looking part of the prompt.",
+              "value": { "type": "string", "default": "'browse your files'" }
+            },
+            {
+              "name": "recommended-size",
+              "description": "Optional hint, e.g. `800×400px`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "multiple",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "accept",
+              "description": "Same syntax as the native `accept`: `image/*`, `.pdf,.docx`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max-size",
+              "description": "Largest accepted file, in bytes. Zero means no limit.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "The files are submitted under this name, as by `<input type=\"file\">`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-files-change",
+              "description": "The selection changed. `detail: { files }`."
+            },
+            {
+              "name": "kt-files-rejected",
+              "description": "Files were refused. `detail: { files, reason }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "heading",
+                "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
+                "type": "string"
+              },
+              {
+                "name": "linkText",
+                "description": "The clickable-looking part of the prompt.",
+                "type": "string"
+              },
+              {
+                "name": "recommendedSize",
+                "description": "Optional hint, e.g. `800×400px`.",
+                "type": "string"
+              },
+              { "name": "multiple", "type": "boolean" },
+              {
+                "name": "accept",
+                "description": "Same syntax as the native `accept`: `image/*`, `.pdf,.docx`.",
+                "type": "string"
+              },
+              {
+                "name": "maxSize",
+                "description": "Largest accepted file, in bytes. Zero means no limit.",
+                "type": "number"
+              },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "name",
+                "description": "The files are submitted under this name, as by `<input type=\"file\">`.",
+                "type": "string"
+              },
+              { "name": "required", "type": "boolean" },
+              {
+                "name": "selectedFiles",
+                "description": "The files currently held, newest last.",
+                "type": "readonly File[]"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-files-change",
+                "description": "The selection changed. `detail: { files }`."
+              },
+              {
+                "name": "kt-files-rejected",
+                "description": "Files were refused. `detail: { files, reason }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-form",
+          "description": "A panel grouping related fields.\n\nIt sits one step above the page on `--surface-form`, so the fields inside —\nfilled at `--surface-field` — read as wells recessed into it rather than as\nboxes floating on it.\n\n**Put it inside your own `<form>`.** It renders a `<fieldset>`, not a form:\nKanto fields are form-associated custom elements, and a control finds its\nform by walking its *own* tree. A `<form>` inside this element's shadow root\nwould not own anything slotted into it, and `new FormData(form)` would come\nback empty. The `<form>` above stays in charge of submission, validation and\nreset; this owns the grouping and the look.\n\n---\n\n\n### **Slots:**\n - _default_ - The fields.\n- **heading** - Replaces the `heading` attribute, for markup.\n- **footer** - Actions, right-aligned. Hidden when empty.\n\n### **CSS Parts:**\n - **base** - The `<fieldset>`.\n- **header** - The heading and description.\n- **fields** - The field column.\n- **footer** - The action row.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading",
+              "description": "Group heading. Also the fieldset's accessible name.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading",
+              "description": "Replaces the fields with placeholders.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Switches off every field in the panel.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-fields",
+              "description": "How many placeholder fields `loading` draws.",
+              "value": { "type": "number", "default": "3" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The fields." },
+            {
+              "name": "heading",
+              "description": "Replaces the `heading` attribute, for markup."
+            },
+            {
+              "name": "footer",
+              "description": "Actions, right-aligned. Hidden when empty."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "heading",
+                "description": "Group heading. Also the fieldset's accessible name.",
+                "type": "string"
+              },
+              { "name": "description", "type": "string" },
+              {
+                "name": "loading",
+                "description": "Replaces the fields with placeholders.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Switches off every field in the panel.",
+                "type": "boolean"
+              },
+              {
+                "name": "loadingFields",
+                "description": "How many placeholder fields `loading` draws.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-input",
+          "description": "A single-line text field.\n\nBorderless by design: the field is a fill on `--color-dark-12` that gains a\n2px *outline* — grey on hover, primary on focus, danger on error. An outline\nsits outside the box, so nothing reflows when the state changes.\n\nThe element is form-associated: it serialises into `FormData` under its\n`name`, resets with the form, and reports validity like a native input.\n\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed (blur or Enter). `detail: { value }`.\n- **kt-clear** - The clear button was pressed.\n\n### **Methods:**\n - **formResetCallback(): _void_** - Called by the platform when the enclosing form is reset.\n- **formStateRestoreCallback(state: _string_): _void_** - Called by the platform when the browser restores a session.\n- **select(): _void_** - Selects the field's contents, as `HTMLInputElement.select()` does.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<input>`.\n- **actions** - The trailing icon row.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The field's value. The `value` attribute seeds it and acts as the reset value.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "type",
+              "description": "Any native input type. `password` adds the reveal toggle.",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "Field height: 32 / 40 / 48px at the desktop scale.",
+              "value": { "type": "KtInputSize", "default": "'medium'" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon",
+              "description": "Trailing Lucide icon, kebab-case.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "error",
+              "description": "Error message. A non-empty value puts the field in its error state.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "clearable",
+              "description": "Shows the clear button once there is something to clear.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "autocomplete",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "maxlength", "value": { "type": "number | undefined" } },
+            {
+              "name": "country",
+              "description": "Selected country in phone mode, as an ISO 3166-1 alpha-2 code.",
+              "value": { "type": "string", "default": "'us'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-input",
+              "description": "On every keystroke. `detail: { value }`."
+            },
+            {
+              "name": "kt-change",
+              "description": "When the value is committed (blur or Enter). `detail: { value }`."
+            },
+            {
+              "name": "kt-clear",
+              "description": "The clear button was pressed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The field's value. The `value` attribute seeds it and acts as the reset value.",
+                "type": "string"
+              },
+              { "name": "name", "type": "string" },
+              {
+                "name": "type",
+                "description": "Any native input type. `password` adds the reveal toggle.",
+                "type": "string"
+              },
+              { "name": "placeholder", "type": "string" },
+              {
+                "name": "size",
+                "description": "Field height: 32 / 40 / 48px at the desktop scale.",
+                "type": "KtInputSize"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              {
+                "name": "icon",
+                "description": "Trailing Lucide icon, kebab-case.",
+                "type": "string"
+              },
+              {
+                "name": "error",
+                "description": "Error message. A non-empty value puts the field in its error state.",
+                "type": "string"
+              },
+              {
+                "name": "clearable",
+                "description": "Shows the clear button once there is something to clear.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+                "type": "string"
+              },
+              { "name": "autocomplete", "type": "string" },
+              { "name": "maxlength", "type": "number | undefined" },
+              {
+                "name": "countries",
+                "description": "Countries offered in phone mode. Replace it to widen the list.",
+                "type": "readonly KtCountry[]"
+              },
+              {
+                "name": "country",
+                "description": "Selected country in phone mode, as an ISO 3166-1 alpha-2 code.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-input",
+                "description": "On every keystroke. `detail: { value }`."
+              },
+              {
+                "name": "kt-change",
+                "description": "When the value is committed (blur or Enter). `detail: { value }`."
+              },
+              {
+                "name": "kt-clear",
+                "description": "The clear button was pressed."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-input-menu",
+          "description": "A combobox: type to narrow the list, then pick.\n\nReach for it over `<kt-select>` once the list is long enough that scanning it\nis slower than typing three letters — somewhere around twenty options.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n- **kt-filter** - The query changed. `detail: { query }`.\n\n### **CSS Parts:**\n - **control** - The field.\n- **input** - The native `<input>`.\n- **popup** - The option list.\n- **option** - An option row.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "value": { "type": "string | number | null", "default": "null" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "error", "value": { "type": "string", "default": "''" } },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "empty-text",
+              "value": { "type": "string", "default": "'No options available'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "An option was chosen or cleared. `detail: { value, option }`."
+            },
+            {
+              "name": "kt-filter",
+              "description": "The query changed. `detail: { query }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "options", "type": "readonly KtOption[]" },
+              { "name": "value", "type": "string | number | null" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "error", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "emptyText", "type": "string" },
+              { "name": "selectedOption", "type": "KtOption | undefined" }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "An option was chosen or cleared. `detail: { value, option }`."
+              },
+              {
+                "name": "kt-filter",
+                "description": "The query changed. `detail: { query }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-label-input",
+          "description": "A label above a form control, with a red asterisk when it is required.\n\nNative label association does not cross a shadow boundary — `for` and\nimplicit wrapping both need the label and the control in the same tree — so\nthis element passes its text down to the slotted control's `label` property\ninstead, which becomes the control's `aria-label`. Clicking the label still\nfocuses the control, as it would natively.\n\n---\n\n\n### **Slots:**\n - _default_ - The form control to label.\n\n### **CSS Parts:**\n - **label** - The `<label>`.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The label text.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Appends a red asterisk and marks the control required for screen readers.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The form control to label." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The label text.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Appends a red asterisk and marks the control required for screen readers.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-select",
+          "description": "A single-choice dropdown.\n\nUnlike the trigger-plus-div it replaces, this is a real listbox: arrow keys\nmove an active descendant, Home and End jump to the ends, Enter commits,\nEscape closes without changing anything, and disabled options are skipped\nrather than merely unclickable.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n\n### **CSS Parts:**\n - **trigger** - The button that opens the list.\n- **popup** - The option list.\n- **option** - An option row.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The selected option's id, or `null`.",
+              "value": { "type": "string | number | null", "default": "null" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "'Select'" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "size",
+              "value": { "type": "KtSelectSize", "default": "'medium'" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "error",
+              "description": "Error message. A non-empty value puts the control in its error state.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "clearable",
+              "description": "Shows the clear button once something is selected.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, when no `<kt-label-input>` wraps the control.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "empty-text",
+              "description": "Shown when `options` is empty.",
+              "value": { "type": "string", "default": "'No options available'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "An option was chosen or cleared. `detail: { value, option }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "options",
+                "description": "The options to choose from. A property: this is data, not an attribute.",
+                "type": "readonly KtOption[]"
+              },
+              {
+                "name": "value",
+                "description": "The selected option's id, or `null`.",
+                "type": "string | number | null"
+              },
+              { "name": "placeholder", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "size", "type": "KtSelectSize" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              {
+                "name": "error",
+                "description": "Error message. A non-empty value puts the control in its error state.",
+                "type": "string"
+              },
+              {
+                "name": "clearable",
+                "description": "Shows the clear button once something is selected.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, when no `<kt-label-input>` wraps the control.",
+                "type": "string"
+              },
+              {
+                "name": "emptyText",
+                "description": "Shown when `options` is empty.",
+                "type": "string"
+              },
+              {
+                "name": "selectedOption",
+                "description": "The currently selected option, if the id still matches one.",
+                "type": "KtOption | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "An option was chosen or cleared. `detail: { value, option }`."
+              }
+            ]
+          }
+        },
+        {
+          "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\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed. `detail: { value }`.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<textarea>`.\n- **counter** - The character counter.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "rows", "value": { "type": "number", "default": "3" } },
+            { "name": "maxlength", "value": { "type": "number | undefined" } },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "error",
+              "description": "Error message. A non-empty value puts the field in its error state.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "resize",
+              "description": "Whether the reader may drag the field taller.\n\nOff by default, as in the rest of Kanto: the grip is drawn by the operating\nsystem, lands on the field's rounded corner and belongs to no design\nsystem — and a field the layout sized is not usually the reader's to\nresize. Turn it on where the content genuinely varies.",
+              "value": { "type": "'vertical' | 'none'", "default": "'none'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-input",
+              "description": "On every keystroke. `detail: { value }`."
+            },
+            {
+              "name": "kt-change",
+              "description": "When the value is committed. `detail: { value }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "value", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "rows", "type": "number" },
+              { "name": "maxlength", "type": "number | undefined" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              {
+                "name": "error",
+                "description": "Error message. A non-empty value puts the field in its error state.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+                "type": "string"
+              },
+              {
+                "name": "resize",
+                "description": "Whether the reader may drag the field taller.\n\nOff by default, as in the rest of Kanto: the grip is drawn by the operating\nsystem, lands on the field's rounded corner and belongs to no design\nsystem — and a field the layout sized is not usually the reader's to\nresize. Turn it on where the content genuinely varies.",
+                "type": "'vertical' | 'none'"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-input",
+                "description": "On every keystroke. `detail: { value }`."
+              },
+              {
+                "name": "kt-change",
+                "description": "When the value is committed. `detail: { value }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-toggle",
+          "description": "An on/off switch.\n\nSized off the button heights so a toggle lines up with the controls beside\nit: the track is 1.8× the field height, the thumb is inset by 12% of it.\nChange `--button-height` and the switch follows.\n\n---\n\n\n### **Events:**\n - **kt-change** - The state changed. `detail: { checked }`.\n\n### **Slots:**\n - _default_ - Optional label, rendered beside the switch and clickable.\n\n### **CSS Parts:**\n - **base** - The button carrying `role=\"switch\"`.\n- **track** - The track.\n- **thumb** - The sliding thumb.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtToggleSize", "default": "'medium'" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "value",
+              "description": "Submitted when checked, as for a native checkbox.",
+              "value": { "type": "string", "default": "'on'" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, when nothing is slotted.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Optional label, rendered beside the switch and clickable."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "The state changed. `detail: { checked }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "size", "type": "KtToggleSize" },
+              { "name": "name", "type": "string" },
+              {
+                "name": "value",
+                "description": "Submitted when checked, as for a native checkbox.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, when nothing is slotted.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "The state changed. `detail: { checked }`."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Accessible name for the navigation landmark.",
+              "value": { "type": "string", "default": "'Breadcrumb'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-navigate",
+              "description": "An entry was activated. `detail: { item, index }`. Cancel it to keep the browser from following the href."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "items",
+                "description": "The trail, root first. The last entry is the current page.",
+                "type": "readonly KtBreadcrumbItem[]"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the navigation landmark.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-navigate",
+                "description": "An entry was activated. `detail: { item, index }`. Cancel it to keep the browser from following the href."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "sticky",
+              "description": "Pins the header to the top of the viewport.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "nav-align",
+              "description": "Where the navigation sits: centred in the bar, or against the brand.",
+              "value": { "type": "'center' | 'start'", "default": "'center'" }
+            },
+            {
+              "name": "bordered",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the banner, when a page has more than one.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "brand",
+              "description": "Logo or wordmark, at the start."
+            },
+            { "name": "", "description": "Primary navigation, in the middle." },
+            {
+              "name": "actions",
+              "description": "Buttons and links, at the end. Stays visible on mobile."
+            },
+            {
+              "name": "menu",
+              "description": "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."
+            },
+            {
+              "name": "bottom",
+              "description": "A second row under the bar — sub-navigation, a breadcrumb."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-menu-toggle",
+              "description": "The mobile menu opened or closed. `detail: { open }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "sticky",
+                "description": "Pins the header to the top of the viewport.",
+                "type": "boolean"
+              },
+              {
+                "name": "navAlign",
+                "description": "Where the navigation sits: centred in the bar, or against the brand.",
+                "type": "'center' | 'start'"
+              },
+              { "name": "bordered", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "Accessible name for the banner, when a page has more than one.",
+                "type": "string"
+              },
+              {
+                "name": "isMenuOpen",
+                "description": "Whether the collapsed navigation panel is showing.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-menu-toggle",
+                "description": "The mobile menu opened or closed. `detail: { open }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-page-header",
+          "description": "The block every screen opens with: an overline, a title, a sentence, and the\nactions that belong to the page rather than to anything on it.\n\nIt exists because it was being rebuilt on every screen, and the copies drifted\n— different heading levels, different gaps, actions sometimes above and\nsometimes beside. Those are not decisions worth making twice.\n\nAt `level=\"section\"` the same block introduces a region inside a page: a\nsmaller heading, and the action is usually a link onward rather than a button.\n\n---\n\n\n### **Slots:**\n - _default_ - Extra content under the description.\n- **actions** - Buttons or a link, trailing on wide screens.\n\n### **CSS Parts:**\n - **base** - The container.\n- **heading** - The heading element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "eyebrow",
+              "description": "Small uppercase label above the heading — \"Dashboard\", \"Settings\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "level",
+              "description": "`page` renders an `<h1>`; `section` an `<h2>` at body scale.",
+              "value": { "type": "'page' | 'section'", "default": "'page'" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Extra content under the description."
+            },
+            {
+              "name": "actions",
+              "description": "Buttons or a link, trailing on wide screens."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "eyebrow",
+                "description": "Small uppercase label above the heading — \"Dashboard\", \"Settings\".",
+                "type": "string"
+              },
+              { "name": "heading", "type": "string" },
+              { "name": "description", "type": "string" },
+              {
+                "name": "level",
+                "description": "`page` renders an `<h1>`; `section` an `<h2>` at body scale.",
+                "type": "'page' | 'section'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "kt-segmented-control",
+          "description": "A small set of mutually exclusive choices, shown as one inset track with the\nselected segment raised out of it.\n\nUse it for two to five options that all fit on screen — a view switch, a date\nrange. Past that, `<kt-select>`.\n\nImplemented as a radio group: one tab stop for the whole control, arrows to\nmove between segments. That is what a keyboard user expects here, and it\nkeeps a five-option control from adding five tab stops to the page.\n\n---\n\n\n### **Events:**\n - **kt-change** - A segment was chosen. `detail: { value, option }`.\n\n### **CSS Parts:**\n - **base** - The track.\n- **option** - A segment.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "value": { "type": "string | number | null", "default": "null" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtSegmentedSize", "default": "'medium'" }
+            },
+            {
+              "name": "orientation",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'horizontal'"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the group.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "A segment was chosen. `detail: { value, option }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "options", "type": "readonly KtSegmentedOption[]" },
+              { "name": "value", "type": "string | number | null" },
+              { "name": "size", "type": "KtSegmentedSize" },
+              { "name": "orientation", "type": "'horizontal' | 'vertical'" },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "Accessible name for the group.",
+                "type": "string"
+              },
+              { "name": "name", "type": "string" },
+              { "name": "required", "type": "boolean" }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "A segment was chosen. `detail: { value, option }`."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active-href",
+              "description": "The href of the current page. Marks the matching link active.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "'Secondary navigation'" }
+            },
+            {
+              "name": "flush",
+              "description": "Drops the card background, for a sidebar that owns its own surface.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "collapsed",
+              "description": "Icons only. Labels, badges and branches are hidden rather than clipped.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-navigate",
+              "description": "A link was activated. `detail: { item }`. Cancel it to keep the browser from following the href, for client-side routing."
+            },
+            {
+              "name": "kt-toggle",
+              "description": "A branch opened or closed. `detail: { item, open }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "sections", "type": "readonly KtNavSection[]" },
+              {
+                "name": "activeHref",
+                "description": "The href of the current page. Marks the matching link active.",
+                "type": "string"
+              },
+              { "name": "label", "type": "string" },
+              {
+                "name": "flush",
+                "description": "Drops the card background, for a sidebar that owns its own surface.",
+                "type": "boolean"
+              },
+              {
+                "name": "collapsed",
+                "description": "Icons only. Labels, badges and branches are hidden rather than clipped.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-navigate",
+                "description": "A link was activated. `detail: { item }`. Cancel it to keep the browser from following the href, for client-side routing."
+              },
+              {
+                "name": "kt-toggle",
+                "description": "A branch opened or closed. `detail: { item, open }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-tabs",
+          "description": "An underlined tab bar.\n\nAgainst `<kt-segmented-control>`: a segmented control picks a *value* — a\ndate range, a unit — and sits inside a form or a toolbar. Tabs switch which\n*region of the page* you are looking at, and read as part of the page\nstructure rather than as a control on it. The shapes say so: an inset track\nwith a raised pill, versus a rule with one segment underlined.\n\nLike the segmented control, this only manages selection. Swapping the panel\nis the consumer's business.\n\n---\n\n\n### **Events:**\n - **kt-change** - A tab was selected. `detail: { value, tab }`.\n\n### **CSS Parts:**\n - **base** - The tablist.\n- **tab** - One tab.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The selected tab's value.",
+              "value": { "type": "string | number | null", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading",
+              "description": "Renders placeholder tabs instead of the real ones.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the tablist.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "A tab was selected. `detail: { value, tab }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "tabs",
+                "description": "The tabs to show. A property: this is data.",
+                "type": "readonly KtTab[]"
+              },
+              {
+                "name": "value",
+                "description": "The selected tab's value.",
+                "type": "string | number | null"
+              },
+              { "name": "disabled", "type": "boolean" },
+              {
+                "name": "loading",
+                "description": "Renders placeholder tabs instead of the real ones.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the tablist.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "A tab was selected. `detail: { value, tab }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-toggle-button",
+          "description": "A button that stays pressed.\n\n`aria-pressed` rather than `aria-checked`: this is a control that holds a\nstate, not one option among several. Put several in a\n`<kt-toggle-button-group>` when they are.\n\n---\n\n\n### **Events:**\n - **kt-change** - The state changed. `detail: { selected, value }`.\n\n### **Slots:**\n - _default_ - The button label.\n\n### **CSS Parts:**\n - **button** - The native `<button>`.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "selected",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "value": {
+                "type": "KtToggleButtonVariant",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtToggleButtonSize", "default": "'medium'" }
+            },
+            {
+              "name": "value",
+              "description": "Identifies this button inside a `<kt-toggle-button-group>`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "icon", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "icon-position",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name. Required when the button is icon-only.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The button label." }],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "The state changed. `detail: { selected, value }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "selected", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "variant", "type": "KtToggleButtonVariant" },
+              { "name": "size", "type": "KtToggleButtonSize" },
+              {
+                "name": "value",
+                "description": "Identifies this button inside a `<kt-toggle-button-group>`.",
+                "type": "string"
+              },
+              { "name": "icon", "type": "string" },
+              { "name": "iconPosition", "type": "'left' | 'right'" },
+              {
+                "name": "label",
+                "description": "Accessible name. Required when the button is icon-only.",
+                "type": "string"
+              },
+              {
+                "name": "managed",
+                "description": "Set by `<kt-toggle-button-group>` on the buttons it owns.\n\nA managed button is a display, not a control: it neither flips itself nor\nemits. The group reads the click, decides what the selection now is, and\nwrites `selected` back. Without this the two both react to the same click\nand consumers hear two different kt-change events for one press.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "The state changed. `detail: { selected, value }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-toggle-button-group",
+          "description": "Joins `<kt-toggle-button>`s into one segmented bar and coordinates their\nselection.\n\nSingle mode behaves like a radio group with a deselect: clicking the active\nbutton clears it. Multiple mode is a set of independent checkboxes that\nhappen to be drawn together.\n\nThe buttons are slotted rather than described by an options array, so a\nbutton can hold whatever its label needs — an icon, a count, a badge.\n\n---\n\n\n### **Events:**\n - **kt-change** - The selection changed. `detail: { value }` — a single value or `null`, or an array in multiple mode.\n\n### **Slots:**\n - _default_ - The `<kt-toggle-button>` children.\n\n### **CSS Parts:**\n - **base** - The group container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "multiple",
+              "description": "`false`: one selection at a time. `true`: any number.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "orientation",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'horizontal'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the group.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The `<kt-toggle-button>` children." }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "The selection changed. `detail: { value }` — a single value or `null`, or an array in multiple mode."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "multiple",
+                "description": "`false`: one selection at a time. `true`: any number.",
+                "type": "boolean"
+              },
+              { "name": "orientation", "type": "'horizontal' | 'vertical'" },
+              {
+                "name": "label",
+                "description": "Accessible name for the group.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The selected value, or values in multiple mode.",
+                "type": "string | string[] | null"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "The selection changed. `detail: { value }` — a single value or `null`, or an array in multiple mode."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "plain",
+              "description": "Drops the bottom rule, for a collapsible that is not part of a list.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The contents." },
+            {
+              "name": "summary",
+              "description": "Replaces the `heading` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-toggle",
+              "description": "Opened or closed. `detail: { open }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "open", "type": "boolean" },
+              { "name": "heading", "type": "string" },
+              {
+                "name": "plain",
+                "description": "Drops the bottom rule, for a collapsible that is not part of a list.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-toggle",
+                "description": "Opened or closed. `detail: { open }`."
+              }
+            ]
+          }
+        },
+        {
+          "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\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "'Are you sure?'" }
+            },
+            {
+              "name": "message",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "confirm-label",
+              "value": { "type": "string", "default": "'Confirm'" }
+            },
+            {
+              "name": "cancel-label",
+              "value": { "type": "string", "default": "'Cancel'" }
+            },
+            {
+              "name": "variant",
+              "description": "`danger` gives the confirm button the solid red treatment.",
+              "value": { "type": "KtConfirmVariant", "default": "'danger'" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Extra content between the message and the buttons."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-confirm",
+              "description": "The confirm button was pressed."
+            },
+            {
+              "name": "kt-cancel",
+              "description": "Dismissed, by button, Escape or backdrop."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "open", "type": "boolean" },
+              { "name": "heading", "type": "string" },
+              { "name": "message", "type": "string" },
+              { "name": "confirmLabel", "type": "string" },
+              { "name": "cancelLabel", "type": "string" },
+              {
+                "name": "variant",
+                "description": "`danger` gives the confirm button the solid red treatment.",
+                "type": "KtConfirmVariant"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-confirm",
+                "description": "The confirm button was pressed."
+              },
+              {
+                "name": "kt-cancel",
+                "description": "Dismissed, by button, Escape or backdrop."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-dropdown",
+          "description": "A panel anchored to a trigger.\n\nThe generic overlay: pass `options` for a menu, or slot anything into\n`panel` for arbitrary content. For choosing a value in a form, reach for\n`<kt-select>` or `<kt-input-menu>` instead — they carry the listbox\nsemantics this one deliberately does not assume.\n\n---\n\n\n### **Events:**\n - **kt-select** - A menu row was chosen. `detail: { value, option }`.\n- **kt-open** - The panel opened.\n- **kt-close** - The panel closed.\n\n### **Methods:**\n - **show(): _void_** - Opens the panel.\n- **hide(): _void_** - Closes the panel.\n- **toggle(): _void_** - Opens or closes it.\n\n### **Slots:**\n - **trigger** - What opens the panel.\n- **panel** - Panel contents, when `options` is not used.\n\n### **CSS Parts:**\n - **trigger** - The trigger wrapper.\n- **panel** - The floating panel.\n- **option** - A menu row.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Marks one row as current.",
+              "value": { "type": "string | number | null", "default": "null" }
+            },
+            {
+              "name": "preferred-placement",
+              "description": "Where to put the panel when there is room on both sides.",
+              "value": { "type": "KtDropdownPlacement", "default": "'bottom'" }
+            },
+            {
+              "name": "align",
+              "description": "Which edge of the trigger the panel lines up with.",
+              "value": { "type": "KtDropdownAlign", "default": "'start'" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "empty-text",
+              "value": { "type": "string", "default": "'No results'" }
+            }
+          ],
+          "slots": [
+            { "name": "trigger", "description": "What opens the panel." },
+            {
+              "name": "panel",
+              "description": "Panel contents, when `options` is not used."
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-select",
+              "description": "A menu row was chosen. `detail: { value, option }`."
+            },
+            { "name": "kt-open", "description": "The panel opened." },
+            { "name": "kt-close", "description": "The panel closed." }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "options",
+                "description": "Menu rows. Leave empty and slot into `panel` for custom content.",
+                "type": "readonly KtOption[]"
+              },
+              {
+                "name": "value",
+                "description": "Marks one row as current.",
+                "type": "string | number | null"
+              },
+              {
+                "name": "preferredPlacement",
+                "description": "Where to put the panel when there is room on both sides.",
+                "type": "KtDropdownPlacement"
+              },
+              {
+                "name": "align",
+                "description": "Which edge of the trigger the panel lines up with.",
+                "type": "KtDropdownAlign"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "emptyText", "type": "string" },
+              {
+                "name": "isOpen",
+                "description": "Whether the panel is showing.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-select",
+                "description": "A menu row was chosen. `detail: { value, option }`."
+              },
+              { "name": "kt-open", "description": "The panel opened." },
+              { "name": "kt-close", "description": "The panel closed." }
+            ]
+          }
+        },
+        {
+          "name": "kt-modal",
+          "description": "A centred dialog for anything that is not a yes/no question.\n\n`<kt-confirm-dialog>` asks one thing and offers two answers. This one holds\ncontent — a compose window, a command palette, a picker — and lets you put\nwhatever you like in the footer.\n\nBuilt on the native `<dialog>`, so the top layer, focus containment, page\ninertness and Escape all come from the platform rather than from a focus trap\nthat leaks.\n\n---\n\n\n### **Events:**\n - **kt-close** - Dismissal requested. Cancelable, for an unsaved-changes guard.\n\n### **Methods:**\n - **requestClose(): _void_** - Asks to close. A cancelled `kt-close` keeps the modal open.\n\n### **Slots:**\n - _default_ - The body.\n- **header** - Replaces the `heading` attribute.\n- **footer** - Actions. Hidden when empty.\n\n### **CSS Parts:**\n - **dialog** - The `<dialog>`.\n- **header** - The header row.\n- **body** - The scrolling body.\n- **footer** - The action row.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtModalSize", "default": "'medium'" }
+            },
+            {
+              "name": "no-close-button",
+              "description": "Hides the close button. Escape still works — a modal you cannot leave is a trap.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-backdrop-close",
+              "description": "Stops a backdrop click from dismissing.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The body." },
+            {
+              "name": "header",
+              "description": "Replaces the `heading` attribute."
+            },
+            { "name": "footer", "description": "Actions. Hidden when empty." }
+          ],
+          "events": [
+            {
+              "name": "kt-close",
+              "description": "Dismissal requested. Cancelable, for an unsaved-changes guard."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "open", "type": "boolean" },
+              { "name": "heading", "type": "string" },
+              { "name": "description", "type": "string" },
+              { "name": "size", "type": "KtModalSize" },
+              {
+                "name": "noCloseButton",
+                "description": "Hides the close button. Escape still works — a modal you cannot leave is a trap.",
+                "type": "boolean"
+              },
+              {
+                "name": "noBackdropClose",
+                "description": "Stops a backdrop click from dismissing.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-close",
+                "description": "Dismissal requested. Cancelable, for an unsaved-changes guard."
+              }
+            ]
+          }
+        },
+        {
+          "name": "kt-side-panel",
+          "description": "A drawer that slides in from the right, for viewing or editing one record\nwithout leaving the list behind it.\n\nBuilt on the native `<dialog>`: the panel lands in the top layer, focus is\ntrapped inside it, the page behind goes inert, and Escape closes it — none of\nwhich the fixed-position div this replaces did.\n\n---\n\n\n### **Events:**\n - **kt-close** - The panel was dismissed. Cancelable: cancel it to keep the panel open, for an unsaved-changes prompt.\n\n### **Methods:**\n - **requestClose(): _void_** - Asks to close. A cancelled `kt-close` keeps the panel open.\n\n### **Slots:**\n - _default_ - The panel body.\n- **footer** - Pinned below the body.\n\n### **CSS Parts:**\n - **dialog** - The `<dialog>`.\n- **header** - The header row.\n- **body** - The scrolling body.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "eyebrow",
+              "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
+              "value": { "type": "string", "default": "'Details'" }
+            },
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "no-backdrop-close",
+              "description": "Suppresses dismissal by backdrop click. Escape still works, by design.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The panel body." },
+            { "name": "footer", "description": "Pinned below the body." }
+          ],
+          "events": [
+            {
+              "name": "kt-close",
+              "description": "The panel was dismissed. Cancelable: cancel it to keep the panel open, for an unsaved-changes prompt."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "open", "type": "boolean" },
+              {
+                "name": "eyebrow",
+                "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
+                "type": "string"
+              },
+              { "name": "heading", "type": "string" },
+              {
+                "name": "noBackdropClose",
+                "description": "Suppresses dismissal by backdrop click. Escape still works, by design.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-close",
+                "description": "The panel was dismissed. Cancelable: cancel it to keep the panel open, for an unsaved-changes prompt."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}