@slexkit/mcp 0.4.0 → 0.5.2

package/dist/data/llms-components.txt

@@ -1,676 +1,249 @@
-# SlexKit Components for LLMs
+# SlexKit custom elements
 
-Use these components inside Markdown `slex` fences. Raw component docs are ordinary `.md` pages that preserve `slex` examples.
 
-Public component count: 28
 
-## Disclosure
+## `slex-column`
 
-- [Accordion](/docs/components/accordion.md): `accordion` - Expandable grouped panels.
-- [Collapsible](/docs/components/collapsible.md): `collapsible` - Single expandable region.
+Properties: none
 
-## Content
+```slex
+<slex-column></slex-column>
+```
 
-- [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.
+## `slex-card`
 
-## Action
+Properties: `title`, `icon`, `tone`, `variant`
 
-- [Button](/docs/components/button.md): `button` - Action trigger.
+```slex
+<slex-card title="Metrics" icon="chart-bar">
+  <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;">
+    <slex-stat label="Requests" value="1.2k" unit="/min"></slex-stat>
+    <slex-stat label="Latency" value="42" unit="ms"></slex-stat>
+  </div>
+</slex-card>
+```
 
-## Layout
+## `slex-grid`
 
-- [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.
+Properties: `columns`, `smColumns`, `mdColumns`, `lgColumns`, `xlColumns`, `gap`
 
-## Input
+```slex
+<slex-grid></slex-grid>
+```
 
-- [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.
+## `slex-row`
 
-## Display
+Properties: `gap`, `align`, `justify`
 
-- [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.
+```slex
+<slex-row></slex-row>
+```
 
-## Component
+## `slex-input`
 
-- [Icon](/docs/components/icon.md): `icon` - Shared icon field capability.
+Properties: `label`, `unit`, `description`, `disabled`, `name`, `value`, `aria-label`, `type`, `placeholder`, `readOnly`, `required`, `invalid`, `error`, `min`, `max`, `step`
 
-## Tooling
+```slex
+<slex-input id="value" label="Project" value="SlexKit" placeholder="Enter name" description="Visible labels keep form fields scannable."></slex-input>
+```
 
-- [Playground](/docs/components/playground.md): `playground` - Interactive source preview.
+## `slex-slider`
 
-## Feedback
+Properties: `label`, `unit`, `description`, `disabled`, `name`, `value`, `aria-label`, `min`, `max`, `step`, `orientation`
 
-- [Progress](/docs/components/progress.md): `progress` - Progress bar.
-- [Toast](/docs/components/toast.md): `toast` - Transient notification.
+```slex
+<slex-slider></slex-slider>
+```
 
-## Data
+## `slex-checkbox`
 
-- [Table](/docs/components/table.md): `table` - Simple data table.
+Properties: `label`, `unit`, `description`, `disabled`, `name`, `value`, `aria-label`, `checked`
 
-## Navigation
+```slex
+<slex-checkbox></slex-checkbox>
+```
 
-- [Tabs](/docs/components/tabs.md): `tabs` - Tabbed view switcher.
+## `slex-switch`
 
----
+Properties: `label`, `unit`, `description`, `disabled`, `name`, `value`, `aria-label`, `checked`, `enabled`
 
-# Generated Component API Reference
+```slex
+<slex-switch></slex-switch>
+```
 
-## Accordion API (`accordion`)
+## `slex-button`
 
-Category: Disclosure
-Status: ready
-State mode: none
-Since: 0.1.0
+Properties: `label`, `icon`, `variant`, `disabled`, `pressed`, `selected`, `title`, `aria-label`
 
-### 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.
+```slex
+<slex-button id="action" label="Run"></slex-button>
+```
 
-### Children
-No child components.
+## `slex-stat`
 
----
+Properties: `label`, `value`, `unit`, `icon`, `tone`, `animateInitial`
 
-## Badge API (`badge`)
+```slex
+<slex-stat></slex-stat>
+```
 
-Category: Content
-Status: ready
-State mode: readable
-Since: 0.1.0
+## `slex-text`
 
-### 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.
+Properties: `content`, `text`, `label`, `variant`, `color`, `size`
 
-### Children
-No child components.
+```slex
+<slex-text></slex-text>
+```
 
----
+## `slex-progress`
 
-## Button API (`button`)
+Properties: `label`, `value`, `icon`, `indeterminate`, `aria-label`
 
-Category: Action
-Status: ready
-State mode: none
-Since: 0.1.0
+```slex
+<slex-progress></slex-progress>
+```
 
-### 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.
+## `slex-badge`
 
-### Children
-No child components.
+Properties: `label`, `text`, `icon`, `tone`, `variant`
 
----
+```slex
+<slex-badge></slex-badge>
+```
 
-## Callout API (`callout`)
+## `slex-code-block`
 
-Category: Content
-Status: ready
-State mode: readable
-Since: 0.1.0
+Properties: `code`, `content`, `language`, `title`
 
-### 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.
+```slex
+<slex-code-block></slex-code-block>
+```
 
-### Children
-Nested component fields are rendered as child content in field order.
+## `slex-divider`
 
----
+Properties: `label`, `icon`
 
-## Card API (`card`)
+```slex
+<slex-divider></slex-divider>
+```
 
-Category: Layout
-Status: ready
-State mode: none
-Since: 0.1.0
+## `slex-link`
 
-### 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.
+Properties: `text`, `label`, `href`, `target`, `icon`, `variant`
 
-### Children
-Nested component fields are rendered as child content in field order.
+```slex
+<slex-link></slex-link>
+```
 
----
+## `slex-table`
 
-## Checkbox API (`checkbox`)
+Properties: `columns`, `rows`, `items`
 
-Category: Input
-Status: ready
-State mode: checked
-Since: 0.1.0
+```slex
+<slex-table id="items"></slex-table>
+<script type="module">
+  const table = slex.root.querySelector("#items");
+  table.columns = [{ key: "name", label: "Name" }];
+  table.rows = [{ name: "Ada" }];
+</script>
+```
 
-### 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.
+## `slex-select`
 
-### Children
-No child components.
+Properties: `label`, `unit`, `description`, `disabled`, `name`, `value`, `aria-label`, `options`, `placeholder`, `icon`, `variant`, `required`
 
----
+```slex
+<slex-select></slex-select>
+```
 
-## Code Block API (`code-block`)
+## `slex-radio-group`
 
-Category: Content
-Status: ready
-State mode: readable
-Since: 0.1.0
+Properties: `label`, `unit`, `description`, `disabled`, `name`, `value`, `aria-label`, `options`, `orientation`, `icon`, `variant`, `required`
 
-### 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.
+```slex
+<slex-radio-group></slex-radio-group>
+```
 
-### Children
-No child components.
+## `slex-tabs`
 
----
+Properties: `value`, `tabs`, `orientation`
 
-## Collapsible API (`collapsible`)
+```slex
+<slex-tabs></slex-tabs>
+```
 
-Category: Disclosure
-Status: ready
-State mode: none
-Since: 0.1.0
+## `slex-accordion`
 
-### 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.
+Properties: `value`, `items`, `multiple`
 
-### Children
-Nested component fields are rendered as child content in field order.
+```slex
+<slex-accordion></slex-accordion>
+```
 
----
+## `slex-collapsible`
 
-## Column API (`column`)
+Properties: `open`, `trigger`, `icon`, `content`
 
-Category: Layout
-Status: ready
-State mode: none
-Since: 0.1.0
+```slex
+<slex-collapsible></slex-collapsible>
+```
 
-### Props
-- No props.
+## `slex-formula`
 
-### Children
-Nested component fields are rendered as child content in field order.
+Properties: `tex`, `displayMode`
 
----
+```slex
+<slex-formula></slex-formula>
+```
 
-## 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
+## `slex-callout`
 
-### 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.
+Properties: `title`, `content`, `description`, `tone`, `icon`
+
+```slex
+<slex-callout></slex-callout>
+```
+
+## `slex-section`
+
+Properties: `title`, `subtitle`, `icon`
+
+```slex
+<slex-section></slex-section>
+```
+
+## `slex-step`
+
+Properties: `title`, `description`, `index`, `total`, `state`, `progress`
+
+```slex
+<slex-step></slex-step>
+```
+
+## `slex-toast`
+
+Properties: `title`, `description`, `tone`, `icon`, `duration`, `dismissable`
+
+```slex
+<slex-toast></slex-toast>
+```
+
+## `slex-submit`
+
+Properties: `submitLabel`, `ignoreLabel`, `disabled`
+
+```slex
+<slex-submit></slex-submit>
+```
+
+## `slex-playground`
+
+Properties: `source`, `autorun`
+
+```slex
+<slex-playground></slex-playground>
+```
+
+Default component count: 28
+
+Catalog component count: 29