# SlexKit Components for LLMs Use these components inside Markdown `slex` fences. Raw component docs are ordinary `.md` pages that preserve `slex` examples. Public component count: 28 ## Disclosure - [Accordion](/docs/components/accordion.md): `accordion` - Expandable grouped panels. - [Collapsible](/docs/components/collapsible.md): `collapsible` - Single expandable region. ## Content - [Badge](/docs/components/badge.md): `badge` - Compact label for status or classification. - [Callout](/docs/components/callout.md): `callout` - Highlighted contextual message. - [Code Block](/docs/components/code-block.md): `code-block` - Formatted code or log block. - [Divider](/docs/components/divider.md): `divider` - Visual separator. - [Link](/docs/components/link.md): `link` - Inline navigation link. - [Section](/docs/components/section.md): `section` - Page section with optional heading chrome. ## Action - [Button](/docs/components/button.md): `button` - Action trigger. ## Layout - [Card](/docs/components/card.md): `card` - Grouping container for related content. - [Column](/docs/components/column.md): `column` - Vertical layout container. - [Grid](/docs/components/grid.md): `grid` - Responsive grid container. - [Row](/docs/components/row.md): `row` - Horizontal layout container. ## Input - [Checkbox](/docs/components/checkbox.md): `checkbox` - Boolean checkbox input. - [Input](/docs/components/input.md): `input` - Text or engineering-value input. - [Radio Group](/docs/components/radio-group.md): `radio-group` - Single-choice option group. - [Select](/docs/components/select.md): `select` - Dropdown selection input. - [Slider](/docs/components/slider.md): `slider` - Numeric range input. - [Switch](/docs/components/switch.md): `switch` - Boolean switch input. ## Display - [Formula](/docs/components/formula.md): `formula` - Reactive KaTeX formula display. - [Stat](/docs/components/stat.md): `stat` - Metric display. - [Text](/docs/components/text.md): `text` - Plain text display. ## Component - [Icon](/docs/components/icon.md): `icon` - Shared icon field capability. ## Tooling - [Playground](/docs/components/playground.md): `playground` - Interactive source preview. ## Feedback - [Progress](/docs/components/progress.md): `progress` - Progress bar. - [Toast](/docs/components/toast.md): `toast` - Transient notification. ## Data - [Table](/docs/components/table.md): `table` - Simple data table. ## Navigation - [Tabs](/docs/components/tabs.md): `tabs` - Tabbed view switcher. --- # Generated Component API Reference ## Accordion API (`accordion`) Category: Disclosure Status: ready State mode: none Since: 0.1.0 ### Props - `value` (string | string[]; optional; dynamic): Current expanded item value; use an array when multiple is true. - `multiple` (boolean; optional; static; default: false): Allow multiple items to be expanded at the same time. - `items` (array; optional; static): Panel definitions with value, label, content, and optional icon. - `items[].icon` (string; optional; static): Icon name shown before an item trigger label. - `onchange` (write-expression; optional; static): Write expression invoked when expanded items change. ### Children No child components. --- ## Badge API (`badge`) Category: Content Status: ready State mode: readable Since: 0.1.0 ### Props - `label` (string; optional; dynamic): Badge text. - `text` (string; optional; dynamic): Alias for label. - `content` (string; optional; dynamic): Alias for label. - `icon` (string; optional; static): Icon name shown before the badge label. - `tone` (string; optional; static; default: "info"; values: info, success, warning, danger, muted): Semantic tone applied to the badge. - `variant` (string; optional; static; values: info, success, warning, danger, muted): Alias for tone. ### Children No child components. --- ## Button API (`button`) Category: Action Status: ready State mode: none Since: 0.1.0 ### Props - `label` (string; optional; dynamic): Visible button text and accessible name. - `icon` (string; optional; static): Icon name shown before the label. - `iconOnly` (boolean; optional; static; default: false): Show only the icon while retaining label as the accessible name. - `variant` (string; optional; static; default: "primary"; values: primary, secondary, danger, ghost): Semantic action variant. - `disabled` (boolean; optional; dynamic; default: false): Disable the action. - `href` (string; optional; dynamic): Render the button surface as a link to this URL. - `target` (string; optional; static): Link target used when href is present. - `title` (string; optional; dynamic): Tooltip and accessible-label fallback. - `selected` (boolean; optional; dynamic): Render the icon in its selected visual state. - `active` (boolean; optional; dynamic): Render the icon in its active visual state. - `pressed` (boolean; optional; dynamic): Expose pressed state and render the selected icon style. - `onclick` (write-expression; optional; static): Write expression invoked when the button is clicked. ### Children No child components. --- ## Callout API (`callout`) Category: Content Status: ready State mode: readable Since: 0.1.0 ### Props - `title` (string; optional; dynamic): Callout title. - `heading` (string; optional; dynamic): Alias for title. - `label` (string; optional; dynamic): Alias for title. - `icon` (string; optional; static): Icon name shown before the title. - `text` (string; optional; dynamic): Callout body text. - `message` (string; optional; dynamic): Alias for text. - `content` (string; optional; dynamic): Alias for text. - `tone` (string; optional; static; default: "info"; values: info, success, warning, danger): Semantic tone for the callout. ### Children Nested component fields are rendered as child content in field order. --- ## Card API (`card`) Category: Layout Status: ready State mode: none Since: 0.1.0 ### Props - `title` (string; optional; dynamic): Card title. - `icon` (string; optional; static): Icon name shown before the title. - `tone` (string; optional; static; values: info, success, warning, danger, muted): Optional semantic tone for the card surface. - `variant` (string; optional; static; values: tool): Use tool for ToolHost input cards with compact chrome. ### Children Nested component fields are rendered as child content in field order. --- ## Checkbox API (`checkbox`) Category: Input Status: ready State mode: checked Since: 0.1.0 ### Props - `checked` (boolean; optional; dynamic; default: false): Checked state. - `label` (string; optional; dynamic): Checkbox label. - `icon` (string; optional; static): Icon name shown before the visible label. - `disabled` (boolean; optional; dynamic; default: false): Disable the checkbox. - `haptic` (boolean; optional; static; default: true): Enable vibration feedback on supported devices. - `haptics` (boolean; optional; static; default: true): Alias for haptic. - `onchange` (write-expression; optional; static): Write expression invoked when checked state changes. ### Children No child components. --- ## Code Block API (`code-block`) Category: Content Status: ready State mode: readable Since: 0.1.0 ### Props - `code` (string; optional; dynamic): Code text content. - `source` (string; optional; dynamic): Alias for code. - `content` (string; optional; dynamic): Alias for code. - `language` (string; optional; static): Language label. - `title` (string; optional; static): Code block title. - `icon` (string; optional; static): Icon name shown before the title. - `lineNumbers` (boolean; optional; static; default: true): Show line numbers. ### Children No child components. --- ## Collapsible API (`collapsible`) Category: Disclosure Status: ready State mode: none Since: 0.1.0 ### Props - `open` (boolean; optional; dynamic; default: false): Expanded state. - `trigger` (string; optional; dynamic): Trigger button text. - `icon` (string; optional; static): Icon name shown before trigger text. - `content` (string; optional; dynamic): Static body content. - `onchange` (write-expression; optional; static): Write expression invoked when open state changes. ### Children Nested component fields are rendered as child content in field order. --- ## Column API (`column`) Category: Layout Status: ready State mode: none Since: 0.1.0 ### Props - No props. ### Children Nested component fields are rendered as child content in field order. --- ## Divider API (`divider`) Category: Content Status: ready State mode: readable Since: 0.1.0 ### Props - `label` (string; optional; dynamic): Text shown in the divider. - `icon` (string; optional; static): Icon name shown before the label. ### Children No child components. --- ## Formula API (`formula`) Category: Display Status: ready State mode: none Since: 0.1.0 ### Props - `tex` (string; optional; dynamic): KaTeX source to render. - `formula` (string; optional; dynamic): Alias for tex. - `value` (string; optional; dynamic): Alias for tex. - `displayMode` (boolean; optional; static; default: true): Render as display math when true; inline math when false. - `display` (boolean; optional; static; default: true): Alias for displayMode. - `block` (boolean; optional; static; default: true): Alias for displayMode. ### Children No child components. --- ## Grid API (`grid`) Category: Layout Status: ready State mode: none Since: 0.1.0 ### Props - `columns` (number; optional; dynamic; default: 1): Base column count. - `smColumns` (number; optional; dynamic): Column count at the small breakpoint. - `mdColumns` (number; optional; dynamic): Column count at the medium breakpoint. - `lgColumns` (number; optional; dynamic): Column count at the large breakpoint. - `xlColumns` (number; optional; dynamic): Column count at the extra-large breakpoint. - `gap` (string; optional; dynamic): Spacing between grid items. ### Children Nested component fields are rendered as child content in field order. --- ## Icon API (`icon`) Category: Component Status: ready State mode: none Since: 0.1.0 ### Props - `icon` (string; optional; static): Icon name resolved through the global icon manager. - `iconOnly` (boolean; optional; static): Render only the icon while retaining an accessible label where supported. - `items[].icon` (string; optional; static): Accordion item trigger icon. - `options[].icon` (string; optional; static): Select or radio option icon. - `columns[].icon` (string; optional; static): Table column header icon. - `tabs[].icon` (string; optional; static): Tab trigger icon. - `tabs[].iconOnly` (boolean; optional; static): Tab trigger icon-only mode. ### Children No child components. --- ## Input API (`input`) Category: Input Status: ready State mode: value Since: 0.1.0 ### Props - `value` (string; optional; dynamic): Current input value. - `label` (string; optional; dynamic): Input label. - `unit` (string; optional; dynamic): Trailing unit text. - `description` (string; optional; dynamic): Assistive description below the input. - `help` (string; optional; dynamic): Alias for description. - `hint` (string; optional; dynamic): Alias for description. - `error` (string; optional; dynamic): Error text shown below the input and linked with aria-describedby. - `errorMessage` (string; optional; dynamic): Alias for error. - `invalid` (boolean; optional; dynamic; default: false): Mark the input as invalid with aria-invalid and error styling. - `placeholder` (string; optional; static): Placeholder text for empty values. - `type` (string; optional; static; default: "text"): Input value kind; use engineering for parsed engineering values. - `disabled` (boolean; optional; dynamic; default: false): Disable editing. - `readonly` (boolean; optional; dynamic; default: false): Make the input read-only. - `readOnly` (boolean; optional; dynamic; default: false): Alias for readonly. - `required` (boolean; optional; dynamic; default: false): Mark the input as required. - `id` (string; optional; static): Native input id; defaults to a stable id derived from the component name. - `name` (string; optional; static): Native input name attribute. - `min` (string | number; optional; dynamic): Minimum value used by numeric input controls. - `max` (string | number; optional; dynamic): Maximum value used by numeric input controls. - `step` (string | number; optional; dynamic): Step size used by numeric input controls. - `onchange` (write-expression; optional; static): Write expression invoked when the value changes. ### Children No child components. --- ## Link API (`link`) Category: Content Status: ready State mode: readable Since: 0.1.0 ### Props - `href` (string; optional; static): Target URL. - `text` (string; optional; dynamic): Visible link text. - `label` (string; optional; dynamic): Alias for text. - `content` (string; optional; dynamic): Alias for text. - `icon` (string; optional; static): Icon name shown before link text. - `target` (string; optional; static): Native link target attribute. - `variant` (string; optional; static; default: "default"; values: default, muted): Link visual variant. ### Children No child components. --- ## Playground API (`playground`) Category: Tooling Status: ready State mode: none Since: 0.1.0 ### Props - `source` (object | string; optional; static): SlexKit or Markdown source to preview. - `sourceType` (string; optional; static; default: "slex"; values: slex, markdown, auto-markdown): Source parser mode. - `title` (string; optional; static): Playground title. - `previewAlign` (string; optional; static; default: "center"; values: center, start): Vertical preview alignment in render mode. - `alignPreview` (string; optional; static; values: center, start): Alias for previewAlign. - `previewPlacement` (string; optional; static; values: center, start): Alias for previewAlign. - `previewMinHeight` (string; optional; static): Minimum preview area height. - `previewMaxWidth` (string; optional; static): Maximum preview content width. - `themeToggle` (boolean; optional; static; default: false): Show the theme toggle action. - `showThemeToggle` (boolean; optional; static; default: false): Alias for themeToggle. - `enableThemeToggle` (boolean; optional; static; default: false): Alias for themeToggle. - `themeLabel` (string; optional; static): Accessible label for the theme toggle action. - `themeToggleLabel` (string; optional; static): Alias for themeLabel. - `sourceTypeLabel` (string; optional; static): Accessible label for the source type selector. - `copyLabel` (string; optional; static): Accessible label for the copy source action. - `openWebLabel` (string; optional; static): Accessible label for opening the source in the standalone playground. - `webUrl` (string; optional; static): Standalone playground URL used by the open action. - `playgroundUrl` (string; optional; static): Alias for webUrl. ### Children No child components. --- ## Progress API (`progress`) Category: Feedback Status: ready State mode: readable Since: 0.1.0 ### Props - `value` (number; optional; dynamic; default: 0): Progress percentage from 0 to 100. - `label` (string; optional; dynamic): Progress label. - `icon` (string; optional; static): Icon name shown before the label. - `indeterminate` (boolean; optional; dynamic; default: false): Render an indeterminate progress state without aria-valuenow. ### Children No child components. --- ## Radio Group API (`radio-group`) Category: Input Status: ready State mode: value Since: 0.1.0 ### Props - `value` (string; optional; dynamic): Current selected value. - `label` (string; optional; dynamic): Group label. - `icon` (string; optional; static): Icon name shown before the group label. - `options` (array; optional; static): Options with label, value, and optional icon. - `options[].icon` (string; optional; static): Icon name shown before a single option label. - `options[].description` (string; optional; static): Secondary text shown below the option label. - `disabled` (boolean; optional; dynamic; default: false): Disable every radio option in the group. - `orientation` (string; optional; static; default: "vertical"; values: vertical, horizontal): Radio option layout direction. - `variant` (string; optional; static; values: list): Use list for full-row option surfaces in ToolHost decision cards. - `haptic` (boolean; optional; static; default: true): Enable vibration feedback on supported devices. - `haptics` (boolean; optional; static; default: true): Alias for haptic. - `name` (string; optional; static): Native radio group name shared by options. - `onchange` (write-expression; optional; static): Write expression invoked when selection changes. ### Children No child components. --- ## Row API (`row`) Category: Layout Status: ready State mode: none Since: 0.1.0 ### Props - `justify` (string; optional; static; default: "start"; values: start, center, end, space-between, space-around): Main-axis distribution. - `align` (string; optional; static; default: "center"; values: start, center, end, baseline, stretch): Cross-axis alignment. - `gap` (string; optional; dynamic): Spacing between children. - `variant` (string; optional; static; values: actions): Use actions for compact ToolHost action rows. ### Children Nested component fields are rendered as child content in field order. --- ## Section API (`section`) Category: Content Status: ready State mode: readable Since: 0.1.0 ### Props - `title` (string; optional; dynamic): Section title. - `icon` (string; optional; static): Icon name shown before the title. - `eyebrow` (string; optional; dynamic): Small label above the title. - `subtitle` (string; optional; dynamic): Subtitle text below the title. - `actionLabel` (string; optional; dynamic): Optional action link label. - `actionHref` (string; optional; static): Optional action link target. ### Children Nested component fields are rendered as child content in field order. --- ## Select API (`select`) Category: Input Status: ready State mode: value Since: 0.1.0 ### Props - `label` (string; optional; dynamic): Select label. - `icon` (string; optional; static): Icon name shown before the top label. - `value` (string; optional; dynamic): Current selected value. - `options` (array; optional; static): Options with label, value, and optional icon. - `options[].icon` (string; optional; static): Icon name shown before an option label. - `placeholder` (string; optional; static): Placeholder shown when no value is selected. - `disabled` (boolean; optional; dynamic; default: false): Disable the select trigger and native select. - `required` (boolean; optional; dynamic; default: false): Require a non-placeholder value in the native select. - `variant` (string; optional; static; default: "default"; values: default, toolbar): Select surface variant. - `onchange` (write-expression; optional; static): Write expression invoked when selection changes. ### Children No child components. --- ## Slider API (`slider`) Category: Input Status: ready State mode: value Since: 0.1.0 ### Props - `label` (string; optional; dynamic): Slider label. - `icon` (string; optional; static): Icon name shown before the label. - `value` (number; optional; dynamic; default: 0): Current numeric value. - `min` (number; optional; dynamic; default: 0): Minimum value. - `max` (number; optional; dynamic; default: 100): Maximum value. - `step` (number; optional; dynamic; default: 1): Step interval. - `unit` (string; optional; dynamic): Unit shown after the value. - `disabled` (boolean; optional; dynamic; default: false): Disable the range input. - `orientation` (string; optional; static; default: "horizontal"; values: horizontal, vertical): Slider orientation metadata used for styling. - `haptic` (boolean; optional; static; default: true): Enable vibration feedback on supported devices. - `haptics` (boolean; optional; static; default: true): Alias for haptic. - `onchange` (write-expression; optional; static): Write expression invoked when the value changes. ### Children No child components. --- ## Stat API (`stat`) Category: Display Status: ready State mode: readable Since: 0.1.0 ### Props - `label` (string; optional; dynamic): Metric label. - `icon` (string; optional; static): Icon name shown before the label. - `value` (string | number; optional; dynamic): Metric value. - `unit` (string; optional; dynamic): Unit shown after the value. - `tone` (string; optional; static; values: info, success, warning, danger, muted): Optional semantic tone. - `animateInitial` (boolean; optional; static; default: false): Animate the initial rendered value. ### Children No child components. --- ## Switch API (`switch`) Category: Input Status: ready State mode: enabled Since: 0.1.0 ### Props - `enabled` (boolean; optional; dynamic; default: false): Enabled state. - `label` (string; optional; dynamic): Switch label. - `icon` (string; optional; static): Icon name shown before the visible label. - `disabled` (boolean; optional; dynamic; default: false): Disable the switch. - `haptic` (boolean; optional; static; default: true): Enable vibration feedback on supported devices. - `haptics` (boolean; optional; static; default: true): Alias for haptic. - `onchange` (write-expression; optional; static): Write expression invoked when enabled state changes. ### Children No child components. --- ## Table API (`table`) Category: Data Status: ready State mode: readable Since: 0.1.0 ### Props - `columns` (array; optional; static): Column definitions with key, label, and optional icon. - `columns[].icon` (string; optional; static): Icon name shown before a column label. - `rows` (array; optional; static): Row data objects keyed by column key. - `items` (array; optional; static): Alias for rows. ### Children No child components. --- ## Tabs API (`tabs`) Category: Navigation Status: ready State mode: value Since: 0.1.0 ### Props - `value` (string; optional; dynamic): Current active tab value. - `tabs` (array; optional; static): Tab definitions with value, label, content, icon, and iconOnly. - `tabs[].icon` (string; optional; static): Icon name shown before a tab trigger label. - `tabs[].iconOnly` (boolean; optional; static): Show only the tab icon while retaining label as accessible text. - `orientation` (string; optional; static; default: "horizontal"; values: horizontal, vertical): Tab list orientation. - `onchange` (write-expression; optional; static): Write expression invoked when the active tab changes. ### Children No child components. --- ## Text API (`text`) Category: Display Status: ready State mode: readable Since: 0.1.0 ### Props - `text` (string; optional; dynamic): Displayed text. - `content` (string; optional; dynamic): Alias for text. - `label` (string; optional; dynamic): Alias for text. - `variant` (string; optional; static; default: "default"; values: default, muted): Text visual variant. - `color` (string; optional; dynamic): Optional CSS color for controlled previews. - `size` (string | number; optional; dynamic): Optional font size. Numbers are treated as px. - `class` (string; optional; static): Additional host-controlled CSS class. ### Children No child components. --- ## Toast API (`toast`) Category: Feedback Status: ready State mode: none Since: 0.1.0 ### Props - `title` (string; optional; dynamic): Toast title. - `heading` (string; optional; dynamic): Alias for title. - `label` (string; optional; dynamic): Alias for title. - `icon` (string; optional; static): Icon name shown at the left of the toast. - `description` (string; optional; dynamic): Toast body text. - `text` (string; optional; dynamic): Alias for description. - `message` (string; optional; dynamic): Alias for description. - `content` (string; optional; dynamic): Alias for description. - `type` (string; optional; static; default: "info"; values: info, success, warning, danger): Semantic notification type. - `tone` (string; optional; static; default: "info"; values: info, success, warning, danger): Alias for type. - `duration` (number; optional; static): Auto-hide delay in milliseconds. - `dismissable` (boolean; optional; static; default: true): Show a close button. - `dismissible` (boolean; optional; static; default: true): Alias for dismissable. - `closeLabel` (string; optional; static; default: "Close notification"): Accessible close button label. - `closeAriaLabel` (string; optional; static): Alias for closeLabel. ### Children No child components.