@kitn.ai/ui
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
1,318 lines • 437 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "dist/kai.es.js",
"declarations": [
{
"kind": "class",
"customElement": true,
"tagName": "kai-agent-card",
"name": "KaiAgentCardElement",
"description": "",
"members": [
{
"kind": "field",
"name": "name",
"type": {
"text": "undefined | string"
},
"description": "The agent's name — the primary label. Attribute: `name`.",
"privacy": "public"
},
{
"kind": "field",
"name": "active",
"type": {
"text": "undefined | false | true"
},
"description": "Selected / focused state: highlighted border + surface. Attribute: `active`.",
"privacy": "public"
},
{
"kind": "field",
"name": "needsAttention",
"type": {
"text": "undefined | false | true"
},
"description": "Raise a prominent \"Needs you\" pill plus a glowing amber edge — the attention-routing signal that pulls focus to this agent. Attribute: `needs-attention`.",
"privacy": "public"
},
{
"kind": "field",
"name": "status",
"type": {
"text": "undefined | { tone: \"working\" | \"idle\" | \"done\" | \"error\" | \"blocked\"; label?: undefined | string; pulse?: undefined | false | true }"
},
"description": "Run status — a JS PROPERTY (object), not an attribute. Shape: `{ tone, label?, pulse? }`, where `tone` is one of `working` | `idle` | `done` | `error` | `blocked` (maps to the kit's tool hues), `label` is an optional short string beside the dot, and `pulse` animates the dot. Set it with `el.status = { tone: 'working', label: 'Working', pulse: true }`.",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "name",
"fieldName": "name",
"type": {
"text": "undefined | string"
},
"description": "The agent's name — the primary label. Attribute: `name`."
},
{
"name": "active",
"fieldName": "active",
"type": {
"text": "undefined | false | true"
},
"description": "Selected / focused state: highlighted border + surface. Attribute: `active`."
},
{
"name": "needs-attention",
"fieldName": "needsAttention",
"type": {
"text": "undefined | false | true"
},
"description": "Raise a prominent \"Needs you\" pill plus a glowing amber edge — the attention-routing signal that pulls focus to this agent. Attribute: `needs-attention`."
}
],
"events": [
{
"name": "kai-activate",
"type": {
"text": "CustomEvent"
},
"description": "The card was activated — clicked, or Enter / Space while focused. Promote this agent back to focus."
},
{
"name": "kai-menu",
"type": {
"text": "CustomEvent"
},
"description": "The trailing \"...\" kebab was clicked. The consumer opens its own menu; the card only surfaces the affordance (the click does not also activate the card)."
}
],
"cssProperties": [],
"cssParts": [
{
"name": "status",
"description": "The leading tone-colored status dot.",
"recipe": "kai-agent-card::part(status) { width: 0.625rem; height: 0.625rem }"
},
{
"name": "menu",
"description": "The trailing overflow (\"...\") menu button.",
"recipe": "kai-agent-card::part(menu) { opacity: 1 }"
}
]
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-artifact",
"name": "KaiArtifactElement",
"description": "",
"members": [
{
"kind": "field",
"name": "src",
"type": {
"text": "undefined | string"
},
"description": "URL the preview iframe frames. Consumer-controlled.",
"privacy": "public"
},
{
"kind": "field",
"name": "files",
"type": {
"text": "{ path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\"; additions?: undefined | number; deletions?: undefined | number; status?: undefined | \"added\" | \"modified\" | \"deleted\" | \"renamed\" | \"untracked\" }[]"
},
"description": "Files for the Code tab tree + each file's preview `url`. Set as a JS property (array).",
"privacy": "public"
},
{
"kind": "field",
"name": "tab",
"type": {
"text": "undefined | \"preview\" | \"code\""
},
"description": "Controlled active tab: `preview` or `code`. When set, the artifact follows it (re-asserted on change). Leave unset for an uncontrolled tab (see `defaultTab`).",
"privacy": "public"
},
{
"kind": "field",
"name": "defaultTab",
"type": {
"text": "undefined | \"preview\" | \"code\""
},
"description": "Uncontrolled INITIAL tab (used only when `tab` is unset). Default `preview`. Seeds the starting tab; the user can then switch freely without the consumer re-asserting a controlled `tab`.",
"privacy": "public"
},
{
"kind": "field",
"name": "activeFile",
"type": {
"text": "undefined | string"
},
"description": "Selected file path — syncs the tree highlight, Code source, and preview.",
"privacy": "public"
},
{
"kind": "field",
"name": "sandbox",
"type": {
"text": "undefined | string"
},
"description": "iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`).",
"privacy": "public"
},
{
"kind": "field",
"name": "iframeTitle",
"type": {
"text": "undefined | string"
},
"description": "Accessible title for the preview iframe.",
"privacy": "public"
},
{
"kind": "field",
"name": "maximized",
"type": {
"text": "undefined | false | true"
},
"description": "Reflects the artifact's own maximized view-state (usually driven by the protocol).",
"privacy": "public"
},
{
"kind": "field",
"name": "expandable",
"type": {
"text": "undefined | false | true"
},
"description": "Show the expand-to-fill button (OPT-IN).",
"privacy": "public"
},
{
"kind": "field",
"name": "openInTab",
"type": {
"text": "undefined | false | true"
},
"description": "Show the open-in-new-tab button (OPT-IN).",
"privacy": "public"
},
{
"kind": "field",
"name": "noNav",
"type": {
"text": "undefined | false | true"
},
"description": "Hide back/forward.",
"privacy": "public"
},
{
"kind": "field",
"name": "noReload",
"type": {
"text": "undefined | false | true"
},
"description": "Hide reload.",
"privacy": "public"
},
{
"kind": "field",
"name": "noHome",
"type": {
"text": "undefined | false | true"
},
"description": "Hide home.",
"privacy": "public"
},
{
"kind": "field",
"name": "noPathField",
"type": {
"text": "undefined | false | true"
},
"description": "Hide the address field.",
"privacy": "public"
},
{
"kind": "field",
"name": "noTabs",
"type": {
"text": "undefined | false | true"
},
"description": "Hide the Preview|Code toggle.",
"privacy": "public"
},
{
"kind": "field",
"name": "standalone",
"type": {
"text": "undefined | false | true"
},
"description": "Standalone chrome: rounded corners + border (else square, borderless in-panel).",
"privacy": "public"
},
{
"kind": "field",
"name": "readonlyPath",
"type": {
"text": "undefined | false | true"
},
"description": "Show the address but make it read-only (visible, nav-tracking, non-editable).",
"privacy": "public"
},
{
"kind": "field",
"name": "displayUrl",
"type": {
"text": "undefined | string"
},
"description": "Friendly address shown in the path field instead of the real current url (read-only, non-navigable). Use when the framed url is not consumer-facing (e.g. a `data:` blob) so a clean address shows instead of leaking it. Scalar string: set as the `display-url` attribute or the `displayUrl` property.",
"privacy": "public"
},
{
"kind": "method",
"name": "back",
"return": {
"type": {
"text": "void"
}
},
"description": "Go back in the artifact's own history stack (no-op when there's no prior entry).",
"privacy": "public"
},
{
"kind": "method",
"name": "forward",
"return": {
"type": {
"text": "void"
}
},
"description": "Go forward in the history stack (no-op when there's no forward entry).",
"privacy": "public"
},
{
"kind": "method",
"name": "reload",
"return": {
"type": {
"text": "void"
}
},
"description": "Force-reload the current preview url (also re-renders an inline PDF).",
"privacy": "public"
},
{
"kind": "method",
"name": "home",
"return": {
"type": {
"text": "void"
}
},
"description": "Navigate to the `src` home url (no-op when there's no `src`).",
"privacy": "public"
},
{
"kind": "method",
"name": "navigate",
"parameters": [
{
"name": "url: string"
}
],
"return": {
"type": {
"text": "void"
}
},
"description": "Push + load a url in the preview — the path-field submit path (fires kai-navigate).",
"privacy": "public"
},
{
"kind": "method",
"name": "selectFile",
"parameters": [
{
"name": "path: string"
}
],
"return": {
"type": {
"text": "void"
}
},
"description": "Select a file by path: highlights the tree, shows its source, navigates the preview (fires kai-file-select + kai-navigate). Named selectFile to avoid the `activeFile` prop.",
"privacy": "public"
},
{
"kind": "method",
"name": "openExternal",
"return": {
"type": {
"text": "void"
}
},
"description": "Open the current url in a new browser tab (no-op when there's no concrete url). Named openExternal, NOT openInTab — that's a prop (toolbar button visibility).",
"privacy": "public"
},
{
"kind": "method",
"name": "maximize",
"return": {
"type": {
"text": "void"
}
},
"description": "Enter the maximized view-state (fires kai-maximize-change{maximized:true}). Named maximize, NOT maximized — that's a prop.",
"privacy": "public"
},
{
"kind": "method",
"name": "restore",
"return": {
"type": {
"text": "void"
}
},
"description": "Exit the maximized view-state (fires kai-maximize-change{maximized:false}).",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "src",
"fieldName": "src",
"type": {
"text": "undefined | string"
},
"description": "URL the preview iframe frames. Consumer-controlled."
},
{
"name": "tab",
"fieldName": "tab",
"type": {
"text": "undefined | \"preview\" | \"code\""
},
"description": "Controlled active tab: `preview` or `code`. When set, the artifact follows it (re-asserted on change). Leave unset for an uncontrolled tab (see `defaultTab`)."
},
{
"name": "default-tab",
"fieldName": "defaultTab",
"type": {
"text": "undefined | \"preview\" | \"code\""
},
"description": "Uncontrolled INITIAL tab (used only when `tab` is unset). Default `preview`. Seeds the starting tab; the user can then switch freely without the consumer re-asserting a controlled `tab`."
},
{
"name": "active-file",
"fieldName": "activeFile",
"type": {
"text": "undefined | string"
},
"description": "Selected file path — syncs the tree highlight, Code source, and preview."
},
{
"name": "sandbox",
"fieldName": "sandbox",
"type": {
"text": "undefined | string"
},
"description": "iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`)."
},
{
"name": "iframe-title",
"fieldName": "iframeTitle",
"type": {
"text": "undefined | string"
},
"description": "Accessible title for the preview iframe."
},
{
"name": "maximized",
"fieldName": "maximized",
"type": {
"text": "undefined | false | true"
},
"description": "Reflects the artifact's own maximized view-state (usually driven by the protocol)."
},
{
"name": "expandable",
"fieldName": "expandable",
"type": {
"text": "undefined | false | true"
},
"description": "Show the expand-to-fill button (OPT-IN)."
},
{
"name": "open-in-tab",
"fieldName": "openInTab",
"type": {
"text": "undefined | false | true"
},
"description": "Show the open-in-new-tab button (OPT-IN)."
},
{
"name": "no-nav",
"fieldName": "noNav",
"type": {
"text": "undefined | false | true"
},
"description": "Hide back/forward."
},
{
"name": "no-reload",
"fieldName": "noReload",
"type": {
"text": "undefined | false | true"
},
"description": "Hide reload."
},
{
"name": "no-home",
"fieldName": "noHome",
"type": {
"text": "undefined | false | true"
},
"description": "Hide home."
},
{
"name": "no-path-field",
"fieldName": "noPathField",
"type": {
"text": "undefined | false | true"
},
"description": "Hide the address field."
},
{
"name": "no-tabs",
"fieldName": "noTabs",
"type": {
"text": "undefined | false | true"
},
"description": "Hide the Preview|Code toggle."
},
{
"name": "standalone",
"fieldName": "standalone",
"type": {
"text": "undefined | false | true"
},
"description": "Standalone chrome: rounded corners + border (else square, borderless in-panel)."
},
{
"name": "readonly-path",
"fieldName": "readonlyPath",
"type": {
"text": "undefined | false | true"
},
"description": "Show the address but make it read-only (visible, nav-tracking, non-editable)."
},
{
"name": "display-url",
"fieldName": "displayUrl",
"type": {
"text": "undefined | string"
},
"description": "Friendly address shown in the path field instead of the real current url (read-only, non-navigable). Use when the framed url is not consumer-facing (e.g. a `data:` blob) so a clean address shows instead of leaking it. Scalar string: set as the `display-url` attribute or the `displayUrl` property."
}
],
"events": [
{
"name": "kai-file-select",
"type": {
"text": "CustomEvent<{ path: string }>"
},
"description": "Fired when a file is selected. `detail.path`."
},
{
"name": "kai-maximize-change",
"type": {
"text": "CustomEvent<{ maximized: false | true }>"
},
"description": "Artifact's own maximize button toggled (consumer-observable; non-bubbling)."
},
{
"name": "kai-navigate",
"type": {
"text": "CustomEvent<{ url: string }>"
},
"description": "Fired when the preview navigates. `detail.url` = the new location."
},
{
"name": "kai-tab-change",
"type": {
"text": "CustomEvent<{ tab: \"preview\" | \"code\" }>"
},
"description": "Fired when the Preview|Code tab changes. `detail.tab`."
}
],
"cssProperties": []
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-attachments",
"name": "KaiAttachmentsElement",
"description": "",
"members": [
{
"kind": "field",
"name": "items",
"type": {
"text": "{ id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]"
},
"description": "The attachments to render. Set as a JS property (array).",
"privacy": "public"
},
{
"kind": "field",
"name": "variant",
"type": {
"text": "undefined | \"grid\" | \"inline\" | \"list\""
},
"description": "Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows.",
"privacy": "public"
},
{
"kind": "field",
"name": "hoverCard",
"type": {
"text": "undefined | false | true"
},
"description": "Wrap each item in a hover card that previews its details.",
"privacy": "public"
},
{
"kind": "field",
"name": "removable",
"type": {
"text": "undefined | false | true"
},
"description": "Show a remove button per item; clicking it fires a `kai-remove` event.",
"privacy": "public"
},
{
"kind": "field",
"name": "showMediaType",
"type": {
"text": "undefined | false | true"
},
"description": "Also show the media type beneath the filename (non-grid variants).",
"privacy": "public"
},
{
"kind": "field",
"name": "emptyText",
"type": {
"text": "undefined | string"
},
"description": "Text shown when `items` is empty.",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "variant",
"fieldName": "variant",
"type": {
"text": "undefined | \"grid\" | \"inline\" | \"list\""
},
"description": "Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows."
},
{
"name": "hover-card",
"fieldName": "hoverCard",
"type": {
"text": "undefined | false | true"
},
"description": "Wrap each item in a hover card that previews its details."
},
{
"name": "removable",
"fieldName": "removable",
"type": {
"text": "undefined | false | true"
},
"description": "Show a remove button per item; clicking it fires a `kai-remove` event."
},
{
"name": "show-media-type",
"fieldName": "showMediaType",
"type": {
"text": "undefined | false | true"
},
"description": "Also show the media type beneath the filename (non-grid variants)."
},
{
"name": "empty-text",
"fieldName": "emptyText",
"type": {
"text": "undefined | string"
},
"description": "Text shown when `items` is empty."
}
],
"events": [
{
"name": "kai-remove",
"type": {
"text": "CustomEvent<{ id: string }>"
},
"description": "A remove button was clicked."
}
],
"cssProperties": [],
"cssParts": [
{
"name": "preview",
"description": "The image shown in an attachment’s hover-card preview. Bounded by default (max ~320×256, aspect preserved) so a large image never blows up the card — raise or lower the cap from outside.",
"recipe": "kai-attachments::part(preview) { max-width: 32rem; max-height: 24rem }"
}
]
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-avatar",
"name": "KaiAvatarElement",
"description": "",
"members": [
{
"kind": "field",
"name": "src",
"type": {
"text": "undefined | string"
},
"description": "Image URL/data-URI. When absent, the `fallback` initials show instead.",
"privacy": "public"
},
{
"kind": "field",
"name": "alt",
"type": {
"text": "undefined | string"
},
"description": "Alt text for the image. Defaults to `fallback`.",
"privacy": "public"
},
{
"kind": "field",
"name": "fallback",
"type": {
"text": "undefined | string"
},
"description": "Short text shown when there's no image — usually initials (e.g. \"JD\", \"AI\").",
"privacy": "public"
},
{
"kind": "field",
"name": "size",
"type": {
"text": "undefined | \"sm\" | \"md\" | \"lg\""
},
"description": "Size token: `sm` | `md` (default) | `lg`.",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "src",
"fieldName": "src",
"type": {
"text": "undefined | string"
},
"description": "Image URL/data-URI. When absent, the `fallback` initials show instead."
},
{
"name": "alt",
"fieldName": "alt",
"type": {
"text": "undefined | string"
},
"description": "Alt text for the image. Defaults to `fallback`."
},
{
"name": "fallback",
"fieldName": "fallback",
"type": {
"text": "undefined | string"
},
"description": "Short text shown when there's no image — usually initials (e.g. \"JD\", \"AI\")."
},
{
"name": "size",
"fieldName": "size",
"type": {
"text": "undefined | \"sm\" | \"md\" | \"lg\""
},
"description": "Size token: `sm` | `md` (default) | `lg`."
}
],
"events": [],
"cssProperties": []
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-badge",
"name": "KaiBadgeElement",
"description": "",
"members": [
{
"kind": "field",
"name": "variant",
"type": {
"text": "undefined | \"default\" | \"count\" | \"citation\""
},
"description": "`default` (muted pill) · `count` (compact number badge) · `citation` (filled primary, for inline citation markers). Defaults to `default`.",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "variant",
"fieldName": "variant",
"type": {
"text": "undefined | \"default\" | \"count\" | \"citation\""
},
"description": "`default` (muted pill) · `count` (compact number badge) · `citation` (filled primary, for inline citation markers). Defaults to `default`."
}
],
"events": [],
"cssProperties": [],
"cssParts": [
{
"name": "badge",
"description": "The badge pill. Restyle its background, color, or shape; the `variant` prop (default/count/citation) sets the defaults.",
"recipe": "kai-badge::part(badge) { background: var(--color-primary); color: var(--color-primary-foreground) }"
}
]
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-button",
"name": "KaiButtonElement",
"description": "",
"members": [
{
"kind": "field",
"name": "variant",
"type": {
"text": "undefined | \"default\" | \"subtle\" | \"ghost\" | \"outline\" | \"destructive\""
},
"description": "Visual style. `default` (filled), `subtle` (muted text, hover tint — the toolbar icon look), `ghost` (transparent, hover fill), `outline`, or `destructive`. Defaults to `default`.",
"privacy": "public"
},
{
"kind": "field",
"name": "size",
"type": {
"text": "undefined | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\""
},
"description": "Size token. `icon` / `icon-sm` are square (for icon-only buttons); `sm` / `md` / `lg` size text buttons. Defaults to `md`.",
"privacy": "public"
},
{
"kind": "field",
"name": "icon",
"type": {
"text": "undefined | string"
},
"description": "Leading icon: a named icon (e.g. `\"mic\"`, `\"plus\"`), an image URL/data-URI, or plain text. Renders before any slotted label.",
"privacy": "public"
},
{
"kind": "field",
"name": "iconTrailing",
"type": {
"text": "undefined | string"
},
"description": "Trailing icon, after the label (e.g. `\"chevron-down\"` for a menu affordance).",
"privacy": "public"
},
{
"kind": "field",
"name": "label",
"type": {
"text": "undefined | string"
},
"description": "Accessible name. REQUIRED for icon-only buttons (no visible text); ignored when you slot visible text, which already names the button.",
"privacy": "public"
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "undefined | false | true"
},
"description": "Disable the button (non-interactive, dimmed).",
"privacy": "public"
},
{
"kind": "field",
"name": "full",
"type": {
"text": "undefined | false | true"
},
"description": "Stretch the button to the full width of its container (a block button) — e.g. a card CTA or a stacked action. Attribute: `full`.",
"privacy": "public"
},
{
"kind": "field",
"name": "align",
"type": {
"text": "undefined | \"start\" | \"center\" | \"end\""
},
"description": "Justify the button's content: `start`, `center` (default), or `end`. Combine with `full` for a full-width, left-aligned button.",
"privacy": "public"
},
{
"kind": "field",
"name": "type",
"type": {
"text": "undefined | \"button\" | \"submit\" | \"reset\""
},
"description": "Native button `type`. Defaults to `button` (so it never submits a form).",
"privacy": "public"
},
{
"kind": "method",
"name": "focus",
"parameters": [
{
"name": "options?: FocusOptions"
}
],
"return": {
"type": {
"text": "void"
}
},
"description": "Focus the inner `<button>` (host.focus() would focus the wrapper).",
"privacy": "public"
},
{
"kind": "method",
"name": "blur",
"return": {
"type": {
"text": "void"
}
},
"description": "Blur the inner `<button>`.",
"privacy": "public"
},
{
"kind": "method",
"name": "click",
"return": {
"type": {
"text": "void"
}
},
"description": "Programmatically activate the button — runs the same path as a user click and fires kai-click. Forwarding to the inner button means `disabled` is respected automatically.",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "variant",
"fieldName": "variant",
"type": {
"text": "undefined | \"default\" | \"subtle\" | \"ghost\" | \"outline\" | \"destructive\""
},
"description": "Visual style. `default` (filled), `subtle` (muted text, hover tint — the toolbar icon look), `ghost` (transparent, hover fill), `outline`, or `destructive`. Defaults to `default`."
},
{
"name": "size",
"fieldName": "size",
"type": {
"text": "undefined | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\""
},
"description": "Size token. `icon` / `icon-sm` are square (for icon-only buttons); `sm` / `md` / `lg` size text buttons. Defaults to `md`."
},
{
"name": "icon",
"fieldName": "icon",
"type": {
"text": "undefined | string"
},
"description": "Leading icon: a named icon (e.g. `\"mic\"`, `\"plus\"`), an image URL/data-URI, or plain text. Renders before any slotted label."
},
{
"name": "icon-trailing",
"fieldName": "iconTrailing",
"type": {
"text": "undefined | string"
},
"description": "Trailing icon, after the label (e.g. `\"chevron-down\"` for a menu affordance)."
},
{
"name": "label",
"fieldName": "label",
"type": {
"text": "undefined | string"
},
"description": "Accessible name. REQUIRED for icon-only buttons (no visible text); ignored when you slot visible text, which already names the button."
},
{
"name": "disabled",
"fieldName": "disabled",
"type": {
"text": "undefined | false | true"
},
"description": "Disable the button (non-interactive, dimmed)."
},
{
"name": "full",
"fieldName": "full",
"type": {
"text": "undefined | false | true"
},
"description": "Stretch the button to the full width of its container (a block button) — e.g. a card CTA or a stacked action. Attribute: `full`."
},
{
"name": "align",
"fieldName": "align",
"type": {
"text": "undefined | \"start\" | \"center\" | \"end\""
},
"description": "Justify the button's content: `start`, `center` (default), or `end`. Combine with `full` for a full-width, left-aligned button."
},
{
"name": "type",
"fieldName": "type",
"type": {
"text": "undefined | \"button\" | \"submit\" | \"reset\""
},
"description": "Native button `type`. Defaults to `button` (so it never submits a form)."
}
],
"events": [
{
"name": "kai-click",
"type": {
"text": "CustomEvent"
},
"description": "The button was activated (pointer or keyboard). Carries no detail. The native `click` also bubbles (composed) for consumers who prefer it."
}
],
"cssProperties": [],
"slots": [
{
"name": "icon",
"description": "A custom leading icon (any inline SVG, inherits `currentColor`). Wins over the `icon` prop."
}
],
"cssParts": [
{
"name": "button",
"description": "The button element. Restyle radius, padding, colors, or weight from outside; the `variant`/`size` props set the defaults.",
"recipe": "kai-button::part(button) { border-radius: 9999px; font-weight: 600 }"
}
]
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-card",
"name": "KaiCardElement",
"description": "",
"members": [
{
"kind": "field",
"name": "appearance",
"type": {
"text": "undefined | \"outlined\" | \"filled\" | \"plain\" | \"accent\""
},
"description": "Surface treatment: `outlined` (default) | `filled` | `plain` | `accent`. Attribute: `appearance`.",
"privacy": "public"
},
{
"kind": "field",
"name": "orientation",
"type": {
"text": "undefined | \"vertical\" | \"horizontal\" | \"responsive\""
},
"description": "`vertical` (default, media on top) | `horizontal` (media at the start) | `responsive` (horizontal when the card's container is wide enough, else vertical — a container query on the card's own width). Attribute: `orientation`.",
"privacy": "public"
},
{
"kind": "field",
"name": "collapse",
"type": {
"text": "undefined | string"
},
"description": "The card width below which a `responsive` card collapses to vertical and the footer actions stack. A CSS length; default `28rem`. Attribute: `collapse`.",
"privacy": "public"
},
{
"kind": "field",
"name": "dense",
"type": {
"text": "undefined | false | true"
},
"description": "Tighter spacing for dense lists. Attribute: `dense`.",
"privacy": "public"
},
{
"kind": "field",
"name": "dismissible",
"type": {
"text": "undefined | false | true"
},
"description": "Show a close (×) that hides the card and emits `kai-dismiss`. Attribute: `dismissible`. Off by default.",
"privacy": "public"
},
{
"kind": "field",
"name": "href",
"type": {
"text": "undefined | string"
},
"description": "Render the whole card as a link. Attribute: `href`. Wins over `clickable`.",
"privacy": "public"
},
{
"kind": "field",
"name": "target",
"type": {
"text": "undefined | string"
},
"description": "`target` for the `href` anchor. Attribute: `target`.",
"privacy": "public"
},
{
"kind": "field",
"name": "rel",
"type": {
"text": "undefined | string"
},
"description": "`rel` for the `href` anchor. Attribute: `rel`.",
"privacy": "public"
},
{
"kind": "field",
"name": "clickable",
"type": {
"text": "undefined | false | true"
},
"description": "Make the whole card a button (`role=\"button\"`, Enter/Space, hover affordance) that emits `kai-card-click`. Attribute: `clickable`. Ignored when `href` is set.",
"privacy": "public"
}
],
"attributes": [
{
"name": "theme",
"type": {
"text": "'light' | 'dark' | 'auto'"
},
"description": "Color mode (auto follows prefers-color-scheme)."
},
{
"name": "appearance",
"fieldName": "appearance",
"type": {
"text": "undefined | \"outlined\" | \"filled\" | \"plain\" | \"accent\""
},
"description": "Surface treatment: `outlined` (default) | `filled` | `plain` | `accent`. Attribute: `appearance`."
},
{
"name": "orientation",
"fieldName": "orientation",
"type": {
"text": "undefined | \"vertical\" | \"horizontal\" | \"responsive\""
},
"description": "`vertical` (default, media on top) | `horizontal` (media at the start) | `responsive` (horizontal when the card's container is wide enough, else vertical — a container query on the card's own width). Attribute: `orientation`."
},
{
"name": "collapse",
"fieldName": "collapse",
"type": {
"text": "undefined | string"
},
"description": "The card width below which a `responsive` card collapses to vertical and the footer actions stack. A CSS length; default `28rem`. Attribute: `collapse`."
},
{
"name": "dense",
"fieldName": "dense",
"type": {
"text": "undefined | false | true"
},
"description": "Tighter spacing for dense lists. Attribute: `dense`."
},
{
"name": "dismissible",
"fieldName": "dismissible",
"type": {
"text": "undefined | false | true"
},
"description": "Show a close (×) that hides the card and emits `kai-dismiss`. Attribute: `dismissible`. Off by default."
},
{
"name": "href",
"fieldName": "href",
"type": {
"text": "undefined | string"
},
"description": "Render the whole card as a link. Attribute: `href`. Wins over `clickable`."
},
{
"name": "target",
"fieldName": "target",
"type": {
"text": "undefined | string"
},
"description": "`target` for the `href` anchor. Attribute: `target`."
},
{
"name": "rel",
"fieldName": "rel",
"type": {
"text": "undefined | string"
},
"description": "`rel` for the `href` anchor. Attribute: `rel`."
},
{
"name": "clickable",
"fieldName": "clickable",
"type": {
"text": "undefined | false | true"
},
"description": "Make the whole card a button (`role=\"button\"`, Enter/Space, hover affordance) that emits `kai-card-click`. Attribute: `clickable`. Ignored when `href` is set."
}
],
"events": [
{
"name": "kai-card-click",
"type": {
"text": "CustomEvent"
},
"description": "A `clickable`/`href` card was activated (click, or Enter/Space)."
},
{
"name": "kai-dismiss",
"type": {
"text": "CustomEvent"
},
"description": "The card was dismissed via its × (it also hides itself)."
}
],
"cssProperties": [],
"slots": [
{
"name": "media",
"description": "Full-bleed media (image/video/illustration) at the top (vertical) or start (horizontal). Clipped to the card corners."
},
{
"name": "header",
"description": "Header content, e.g. a title. Rendered above the body."
},
{
"name": "header-actions",
"description": "An actions cluster pinned to the end of the header row."
},
{
"name": "footer",
"description": "Footer content rendered below the body."
},
{
"name": "footer-actions",
"description": "Action buttons pinned to the end of the footer. Do NOT combine with a clickable/href card (nested interactive)."
}
],
"cssParts": [
{
"name": "card",
"description": "The card root (a div, or an a when href is set). Restyle its radius, border, or background; set --kai-card-spacing for padding/gaps (the dense prop sets the compact default).",
"recipe": "kai-card::part(card) { border-radius: 1rem; --kai-card-spacing: 1.5rem }"
},
{
"name": "media",
"description": "The full-bleed media region. Cap or crop it from outside (e.g. a fixed height with object-fit).",
"recipe": "kai-card::part(media) { max-height: 12rem }"
},
{
"name": "header",
"description": "The header row (header content + header-actions). Add a divider or adjust its alignment.",
"recipe": "kai-card::part(header) { border-bottom: 1px solid var(--color-border) }"
},
{
"name": "body",
"description": "The default-slot body region.",
"recipe": "kai-card::part(body) { font-size: 0.9375rem }"
},
{
"name": "footer",
"description": "The footer row (footer content + footer-actions).",
"recipe": "kai-card::part(footer) { border-top: 1px solid var(--color-border) }"
},
{
"name": "dismiss",
"description": "The dismiss (×) button shown when dismissible. Recolor or reposition it from outside.",
"recipe": "kai-card::part(dismiss) { color: var(--color-muted-foreground) }"
}
]
},
{
"kind": "class",
"customElement": true,
"tagName": "kai-cards",
"name": "KaiCardsElement",
"description": "",
"members": [
{
"kind": "field",
"name": "cards",
"type": {
"text": "undefined | { type: string; id: string; data: unknown; title?: undefined | string; resolution?: undefined | { kind: \"action\"; action: stri