@tolle_/tolle-ui 21.1.2 → 21.2.0

package/registry/llms-full.txt

@@ -0,0 +1,4067 @@
+# Tolle UI — Full Component Reference
+
+Angular 18 standalone components. Install the package (`npm i @tolle_/tolle-ui`) and import, or own the source (`npx @tolle_/cli add <component>`).
+
+## Accordion
+
+- Install: `npx @tolle_/cli add accordion`
+- Import: `import { AccordionComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-accordion>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| type | `'single' | 'multiple'` | `'single'` |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Accordion Item
+
+- Install: `npx @tolle_/cli add accordion-item`
+- Import: `import { AccordionItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-accordion-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | `string` | `''` |  |
+| class | `string` | `''` |  |
+| id | `string | number` | — |  |
+
+Slots: _default_
+
+## Alert
+
+- Install: `npx @tolle_/cli add alert`
+- Import: `import { AlertComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-alert>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'destructive' | 'success' | 'warning' | 'info'` | `'default'` |  |
+| title | `string` | — |  |
+| class | `string` | `''` |  |
+| dismissible | `boolean` | `false` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| onClose | `void` |  |
+
+Slots: `[icon]`, _default_
+
+Variants:
+- `variant`: `default`, `destructive`, `success`, `warning`, `info` (default `default`)
+
+## Alert Dialog
+
+- Install: `npx @tolle_/cli add alert-dialog`
+- Import: `import { AlertDialogComponent, AlertDialogTriggerComponent, AlertDialogPortalComponent, AlertDialogContentComponent, AlertDialogHeaderComponent, AlertDialogFooterComponent, AlertDialogTitleComponent, AlertDialogDescriptionComponent, AlertDialogActionComponent, AlertDialogCancelComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-alert-dialog>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | `boolean` | — |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` |  |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-trigger>`
+
+Slots: _default_
+
+### `<tolle-alert-dialog-portal>`
+
+Slots: _default_
+
+### `<tolle-alert-dialog-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| size | `AlertDialogSize` | `'lg'` |  |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-header>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-footer>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-title>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-description>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-action>`
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| confirmed | `MouseEvent` | Fires before the dialog closes, so consumers can run the confirmed action. |
+
+Slots: _default_
+
+### `<tolle-alert-dialog-cancel>`
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| cancelled | `MouseEvent` | Fires before the dialog closes, so consumers can react to a dismissal. |
+
+Slots: _default_
+
+## Alert Dialog Dynamic
+
+- Install: `npx @tolle_/cli add alert-dialog-dynamic`
+- Import: `import { AlertDialogDynamicComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-alert-dialog-dynamic>`
+
+## Aspect Ratio
+
+- Install: `npx @tolle_/cli add aspect-ratio`
+- Import: `import { AspectRatioComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-aspect-ratio>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ratio | `string | number` | `'16 / 9'` |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Attachment
+
+- Install: `npx @tolle_/cli add attachment`
+- Import: `import { AttachmentComponent, AttachmentGroupComponent, AttachmentActionsComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-attachment>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string` | `''` | File name shown as the card's title. |
+| size | `number` | `0` | File size in bytes; rendered as B / KB / MB. |
+| type | `string` | `''` | MIME type, e.g. 'image/png'. Chooses the thumbnail or the file icon. |
+| url | `string` | `''` | Source for the thumbnail and the target of `open`. |
+| state | `'idle' | 'uploading' | 'error'` | `'idle'` | Upload lifecycle state of the attachment. |
+| progress | `number` | `0` | Upload progress from 0 to 100; only shown while uploading. |
+| density | `'sm' | 'default'` | `'default'` | Density of the card. |
+| removable | `boolean` | `false` | Shows a trailing remove button that emits `remove`. |
+| removeLabel | `string` | `'Remove attachment'` | Accessible label for the remove button. |
+| errorLabel | `string` | `'Upload failed'` | Text shown in place of the size when the state is 'error'. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the card via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| remove | `Event` | Emitted when the remove button is pressed. |
+| open | `Event` | Emitted when the card is activated by click, Enter, or Space. |
+
+Slots: _default_
+
+Variants:
+- `state`: `idle`, `uploading`, `error` (default `idle`)
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-attachment-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-attachment-actions>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| alwaysVisible | `boolean` | `false` | Keeps the actions visible instead of revealing them on hover or focus. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the slot via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Avatar
+
+- Install: `npx @tolle_/cli add avatar`
+- Import: `import { AvatarComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-avatar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| src | `string` | — | Image URL. When absent or failed to load, projected fallback content is shown. |
+| alt | `string` | `''` | Alternative text for the avatar image. |
+| size | `'sm' | 'default' | 'lg' | 'xl'` | `'default'` | Size of the avatar. |
+| shape | `'circle' | 'square'` | `'circle'` | Shape of the avatar. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the avatar via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `shape`: `circle`, `square` (default `circle`)
+- `size`: `sm`, `default`, `lg`, `xl` (default `default`)
+
+## Avatar Fallback
+
+- Install: `npx @tolle_/cli add avatar-fallback`
+- Import: `import { AvatarFallbackComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-avatar-fallback>`
+
+Slots: _default_
+
+## Badge
+
+- Install: `npx @tolle_/cli add badge`
+- Import: `import { BadgeComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-badge>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'secondary' | 'outline' | 'destructive'` | `'default'` | Visual style of the badge. |
+| size | `'xs' | 'sm' | 'default'` | `'default'` | Size of the badge. |
+| removable | `boolean` | `false` | Shows a trailing dismiss (×) button that emits `onRemove`. |
+| removeLabel | `string` | `'Remove'` | Accessible label for the dismiss button. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the badge via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| onRemove | `MouseEvent` | Emitted with the click event when the dismiss button is pressed. |
+
+Slots: `[prefix]`, _default_
+
+Variants:
+- `variant`: `default`, `secondary`, `outline`, `destructive` (default `default`)
+- `size`: `xs`, `sm`, `default` (default `default`)
+
+## Bar List
+
+- Install: `npx @tolle_/cli add bar-list`
+- Import: `import { BarListComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-bar-list>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `Record<string, any>[]` | `[]` | Rows to rank, in the order they should be drawn. |
+| labelKey | `string` | `'label'` | Row key holding each row's label. |
+| valueKey | `string` | `'value'` | Row key holding each row's numeric value. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the list via `cn()` (last-wins). |
+
+## Breadcrumb
+
+- Install: `npx @tolle_/cli add breadcrumb`
+- Import: `import { BreadcrumbComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-breadcrumb>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Breadcrumb Item
+
+- Install: `npx @tolle_/cli add breadcrumb-item`
+- Import: `import { BreadcrumbItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-breadcrumb-item>`
+
+Slots: _default_
+
+## Breadcrumb Link
+
+- Install: `npx @tolle_/cli add breadcrumb-link`
+- Import: `import { BreadcrumbLinkComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-breadcrumb-link>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | `boolean` | `false` |  |
+
+Slots: _default_
+
+## Breadcrumb Separator
+
+- Install: `npx @tolle_/cli add breadcrumb-separator`
+- Import: `import { BreadcrumbSeparatorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-breadcrumb-separator>`
+
+Slots: _default_
+
+## Bubble
+
+- Install: `npx @tolle_/cli add bubble`
+- Import: `import { BubbleComponent, BubbleActionsComponent, BubbleReactionsComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-bubble>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'primary' | 'muted' | 'outline'` | `'default'` | Visual style of the surface. |
+| align | `'start' | 'end'` | `'start'` | Which edge the bubble hangs off; squares the matching bottom corner. |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Padding and text scale of the surface. |
+| collapsible | `boolean` | `false` | Shows a show-more / show-less toggle for long content. |
+| collapsed | `boolean` | `true` | Whether the content is currently clamped. Only has an effect with `collapsible`. |
+| collapsedHeight | `string` | `'6rem'` | Max height of the clamped content, as a CSS length. |
+| expandLabel | `string` | `'Show more'` | Label of the toggle while the content is clamped. |
+| collapseLabel | `string` | `'Show less'` | Label of the toggle while the content is expanded. |
+| interactive | `boolean` | `false` | Makes the whole surface a keyboard-focusable trigger that emits `bubbleClick`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the surface via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| collapsedChange | `boolean` | Emitted with the new collapsed state when the show-more toggle is pressed. |
+| bubbleClick | `Event` | Emitted when an interactive bubble is activated by click, Enter, or Space. |
+
+Slots: _default_, `[bubbleFooter]`
+
+Variants:
+- `variant`: `default`, `primary`, `muted`, `outline` (default `default`)
+- `align`: `start`, `end` (default `start`)
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-bubble-actions>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| alwaysVisible | `boolean` | `false` | Keeps the row permanently visible instead of revealing it on hover or focus. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-bubble-reactions>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| reactions | `BubbleReaction[]` | `[]` | Reaction chips to render, in display order. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| react | `BubbleReaction` | Emitted with the reaction whose chip was clicked. |
+
+Slots: _default_
+
+## Button
+
+- Install: `npx @tolle_/cli add button`
+- Import: `import { ButtonComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-button>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the button via `cn()` (last-wins). |
+| variant | `'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'` | `'default'` | Visual style of the button. |
+| size | `'default' | 'xs' | 'sm' | 'lg' | 'icon-xs' | 'icon-sm' | 'icon' | 'icon-lg'` | `'default'` | Size of the button, including icon-only sizes. |
+| type | `'button' | 'submit' | 'reset'` | `'button'` | Native button type. Defaults to 'button' so it never submits a form unexpectedly. |
+| disabled | `boolean` | `false` | Disables the button and blocks pointer events. |
+| busy | `boolean` | `false` | Shows a spinner, sets `aria-busy`, and prevents interaction while a task runs. |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link` (default `default`)
+- `size`: `default`, `xs`, `sm`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg` (default `default`)
+- `busy`: `true`
+
+## Button Group
+
+- Install: `npx @tolle_/cli add button-group`
+- Import: `import { ButtonGroupComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-button-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Calendar
+
+- Install: `npx @tolle_/cli add calendar`
+- Import: `import { CalendarComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-calendar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| bordered | `boolean` | `true` | Renders the calendar's own border, background and shadow. Set `false` when
+nesting inside a card/popover that already provides the chrome. |
+| mode | `CalendarMode` | `'date'` |  |
+| disablePastDates | `boolean` | `false` |  |
+| showQuickActions | `boolean` | `true` |  |
+| minDate | `Date` | — |  |
+| maxDate | `Date` | — |  |
+| formatMonthFn | `(date: Date) => string` | — |  |
+| formatYearFn | `(date: Date) => string` | — |  |
+| formatDateFn | `(date: Date) => string` | — |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| dateSelect | `Date | null` |  |
+
+## Card
+
+- Install: `npx @tolle_/cli add card`
+- Import: `import { CardComponent, CardHeaderComponent, CardTitleComponent, CardDescriptionComponent, CardContentComponent, CardFooterComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-card>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-card-header>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-card-title>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-card-description>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-card-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-card-footer>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Carousel
+
+- Install: `npx @tolle_/cli add carousel`
+- Import: `import { CarouselComponent, CarouselContentDirective, CarouselContainerDirective, CarouselItemDirective, CarouselPreviousDirective, CarouselNextDirective } from '@tolle_/tolle-ui';`
+
+### `<tolle-carousel>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| opts | `EmblaOptionsType` | `{}` |  |
+| plugins | `EmblaPluginType[]` | `[]` |  |
+| orientation | `'horizontal' | 'vertical'` | `'horizontal'` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| api | `EmblaCarouselType` |  |
+
+Slots: _default_
+
+### `<[tolleCarouselContent]>` (directive)
+
+### `<[tolleCarouselContainer]>` (directive)
+
+### `<[tolleCarouselItem]>` (directive)
+
+### `<[tolleCarouselPrevious]>` (directive)
+
+### `<[tolleCarouselNext]>` (directive)
+
+## Category Bar
+
+- Install: `npx @tolle_/cli add category-bar`
+- Import: `import { CategoryBarComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-category-bar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| values | `number[]` | `[]` | Width of each segment. Values that are not finite and greater than zero are dropped. |
+| labels | `string[]` | `[]` | Name for each segment, used in the accessible summary and as a title tooltip. |
+| colors | `string[]` | `[]` | Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. |
+| markerValue | `number | null` | `null` | Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. |
+| ariaLabel | `string` | `''` | Accessible name, prefixed onto the sr-only summary of segments and marker. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the bar via `cn()` (last-wins). |
+
+## Chain Of Thought
+
+- Install: `npx @tolle_/cli add chain-of-thought`
+- Import: `import { ChainOfThoughtComponent, ChainOfThoughtHeaderComponent, ChainOfThoughtContentComponent, ChainOfThoughtStepComponent, ChainOfThoughtSearchResultsComponent, ChainOfThoughtSearchResultComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-chain-of-thought>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | `boolean` | `false` | Whether the reasoning steps are expanded. |
+| size | `'sm' | 'default'` | `'default'` | Text scale of the whole trace. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trace via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` | Emitted with the new expanded state whenever the trace opens or closes. |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-chain-of-thought-header>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | `string` | `'Chain of Thought'` | Text shown in the header. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the header via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-chain-of-thought-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the content via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-chain-of-thought-step>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | `string` | `''` | Text describing what happened in this step. |
+| status | `ChainOfThoughtStepStatus` | `'complete'` | Progress of this step; drives the marker colour. |
+| icon | `string` | `'ri-checkbox-blank-circle-fill'` | Remixicon class shown inside the step marker. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the step via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-chain-of-thought-search-results>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the results row via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-chain-of-thought-search-result>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | `string` | `''` | Optional remixicon class shown before the label. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the chip via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Chart
+
+- Install: `npx @tolle_/cli add chart`
+- Import: `import { ChartChild, ChartTooltipComponent, ChartLegendComponent, ChartTableComponent, ChartComponent, ChartGridComponent, ChartXAxisComponent, ChartYAxisComponent, ChartLineComponent, ChartAreaComponent, ChartBarComponent } from '@tolle_/tolle-ui';`
+
+### `<ChartChild>` (directive)
+
+### `<tolle-chart-tooltip>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| offset | `number` | `12` | Distance in px the tooltip sits from the crosshair. |
+| estimatedWidth | `number` | `160` | Assumed tooltip width in px, used to flip it near the right edge. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the tooltip via `cn()` (last-wins). |
+
+### `<tolle-chart-legend>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| align | `'start' | 'center' | 'end'` | `'center'` | Horizontal alignment of the legend row. |
+| size | `'sm' | 'default'` | `'default'` | Text size of the legend. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the legend via `cn()` (last-wins). |
+
+Variants:
+- `align`: `start`, `center`, `end` (default `center`)
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-chart-table>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| visible | `boolean` | `false` | Shows the table instead of hiding it from sighted readers. |
+| tableId | `string` | `''` | Id applied to the wrapper, for the chart's `aria-describedby`. |
+| xHeader | `string` | `'Category'` | Column header for the x category. |
+| caption | `string` | `'Chart data'` | Accessible caption for the table. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the table via `cn()` (last-wins). |
+
+### `<tolle-chart>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `Record<string, any>[]` | `[]` | Rows to plot, in x order. |
+| series | `ChartSeries[]` | `[]` | Series to draw, in the order they take palette steps `--chart-1`..`--chart-5`. |
+| xKey | `string` | `''` | Row key holding each row's x category label. |
+| height | `number` | `260` | Height of the chart in px. |
+| margin | `ChartMargin` | `{ top: 8, right: 8, bottom: 24, left: 44 }` | Space reserved around the plot for axis labels. |
+| ariaLabel | `string` | `''` | Accessible name for the chart, used as the svg `<title>`. |
+| description | `string` | `''` | Longer summary used as the svg `<desc>`. Falls back to `ariaLabel`. |
+| stacked | `boolean` | `false` | Stacks marks on a shared baseline instead of grouping them. |
+| orientation | `ChartOrientation` | `'vertical'` | Which physical axis carries the category vs the value. Only bars support
+'horizontal' — line/area marks stay vertical regardless. |
+| hover | `boolean` | `true` | Renders the crosshair, hit layer and shared tooltip. |
+| showTable | `boolean` | `false` | Shows the data table instead of leaving it visually hidden. |
+| xHeader | `string` | `'Category'` | Column header the table fallback gives the x category. |
+| variant | `'default' | 'card'` | `'default'` | Visual treatment of the chart frame. |
+| density | `'default' | 'compact'` | `'default'` | Text density of the chart chrome. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the chart via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| activeIndexChange | `number | null` | Emitted with the hovered row index, or null when the pointer leaves. |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `card` (default `default`)
+- `density`: `default`, `compact` (default `default`)
+
+### `<svg:g[tolle-chart-grid]>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| vertical | `boolean` | `false` | Also draws a rule at every category position. |
+| class | `string` | `''` | Extra Tailwind classes merged onto each rule via `cn()` (last-wins). |
+
+### `<svg:g[tolle-chart-x-axis]>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| charWidth | `number` | `7` | Approximate px per character, used to decide when category labels would
+collide. Only consulted in the vertical orientation. |
+| class | `string` | `''` | Extra Tailwind classes merged onto each label via `cn()` (last-wins). |
+
+### `<svg:g[tolle-chart-y-axis]>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| offset | `number` | `8` | Gap in px between the labels and the plot edge. |
+| class | `string` | `''` | Extra Tailwind classes merged onto each label via `cn()` (last-wins). |
+
+### `<svg:g[tolle-chart-line]>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| seriesKey | `string` | `''` | Key of the series to draw. |
+| curve | `'linear' | 'smooth'` | `'linear'` | Interpolation between points; smooth is monotone cubic, so it never overshoots. |
+| showDots | `boolean` | `false` | Draws a marker at every point. |
+| dotRadius | `number` | `4` | Marker radius in px; 4 gives the 8px minimum diameter. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the path via `cn()` (last-wins). |
+
+### `<svg:g[tolle-chart-area]>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| seriesKey | `string` | `''` | Key of the series to draw. |
+| curve | `'linear' | 'smooth'` | `'linear'` | Interpolation between points. |
+| fillOpacity | `number` | `0.1` | Opacity of the fill — a wash, never a saturated block. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the stroke via `cn()` (last-wins). |
+
+### `<svg:g[tolle-chart-bar]>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| seriesKey | `string` | `''` | Key of the series to draw. |
+| radius | `number` | `4` | Corner radius on the data end in px. |
+| maxWidth | `number` | `24` | Largest bar thickness in px; a wider band becomes air, not a fatter bar. |
+| gap | `number` | `2` | Gap in px between adjacent bars and between stacked segments. |
+| class | `string` | `''` | Extra Tailwind classes merged onto each bar via `cn()` (last-wins). |
+
+## Chart Pie
+
+- Install: `npx @tolle_/cli add chart-pie`
+- Import: `import { ChartPieComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-chart-pie>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `Record<string, any>[]` | `[]` | Rows to plot, one slice each. |
+| valueKey | `string` | `'value'` | Row key holding each slice's numeric value. |
+| labelKey | `string` | `'label'` | Row key holding each slice's label. |
+| donut | `boolean` | `false` | Cuts a hole in the middle, making it a donut. |
+| innerRadius | `number` | `0.6` | Hole size as a fraction of the outer radius, used when `donut` is set. |
+| size | `number` | `240` | Width and height of the square plot in px. |
+| gap | `number` | `2` | Angular gap between slices, expressed in px of arc at the outer edge. |
+| ariaLabel | `string` | `''` | Accessible name for the chart, used as the svg `<title>`. |
+| description | `string` | `''` | Longer summary used as the svg `<desc>`. Falls back to `ariaLabel`. |
+| showTable | `boolean` | `false` | Shows the data table instead of leaving it visually hidden. |
+| labelHeader | `string` | `'Category'` | Column header the table fallback gives the label column. |
+| valueHeader | `string` | `'Value'` | Column header the table fallback gives the value column. |
+| variant | `'default' | 'card'` | `'default'` | Visual treatment of the chart frame. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the chart via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| activeIndexChange | `number | null` | Emitted with the hovered slice index, or null when the pointer leaves. |
+
+Variants:
+- `variant`: `default`, `card` (default `default`)
+
+## Chart Spark
+
+- Install: `npx @tolle_/cli add chart-spark`
+- Import: `import { ChartSparkComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-chart-spark>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `Record<string, any>[]` | `[]` | Rows to plot, in x order. |
+| valueKey | `string` | `'value'` | Row key holding each row's numeric value. |
+| xKey | `string` | `''` | Row key holding each row's x position. Only matters once `hover` is on. |
+| type | `'line' | 'area' | 'bar'` | `'line'` | Which mark to draw. |
+| curve | `'linear' | 'smooth'` | `'linear'` | Interpolation for line/area. |
+| maxBarWidth | `number` | `6` | Largest bar thickness in px, used when `type` is 'bar'. |
+| height | `number` | `32` | Height in px. |
+| hover | `boolean` | `false` | Renders the crosshair, hit layer and tooltip. |
+| showTable | `boolean` | `false` | Shows the data table instead of leaving it visually hidden. |
+| ariaLabel | `string` | `''` | Accessible name, used as the svg <title>. |
+| description | `string` | `''` | Longer summary used as the svg <desc>. Falls back to `ariaLabel`. |
+| margin | `ChartMargin` | `{ top: 2, right: 2, bottom: 2, left: 2 }` | Space reserved around the plot — a sparkline has no axis labels to fit. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the chart via `cn()` (last-wins). |
+
+## Checkbox
+
+- Install: `npx @tolle_/cli add checkbox`
+- Import: `import { CheckboxComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-checkbox>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the checkbox via `cn()` (last-wins). |
+| disabled | `boolean` | `false` | Disables the checkbox and blocks toggling. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Size of the checkbox. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `checked`: `true`, `false` (default `false`)
+
+## Checkpoint
+
+- Install: `npx @tolle_/cli add checkpoint`
+- Import: `import { CheckpointComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-checkpoint>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | `string` | `'Checkpoint'` | Name of the checkpoint shown in the pill. |
+| timestamp | `string` | `''` | Pre-formatted time shown after the label. |
+| active | `boolean` | `false` | Highlights this checkpoint as the one currently restored to. |
+| disabled | `boolean` | `false` | Prevents the pill from being activated. |
+| restoreLabel | `string` | `'Restore checkpoint'` | Verb used to build the pill's accessible name. |
+| ariaLabel | `string` | `''` | Overrides the pill's accessible name entirely. |
+| icon | `string` | `'ri-history-line'` | Remixicon class shown before the label. |
+| size | `'sm' | 'default'` | `'default'` | Size of the pill. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| restore | `void` | Emitted when the user asks to restore this checkpoint. |
+
+Slots: _default_
+
+Variants:
+- `active`: `true`, `false` (default `false`)
+- `size`: `sm`, `default` (default `default`)
+
+## Collapsible
+
+- Install: `npx @tolle_/cli add collapsible`
+- Import: `import { CollapsibleComponent, CollapsibleTriggerComponent, CollapsibleContentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-collapsible>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| open | `boolean` | — |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` |  |
+
+Slots: _default_
+
+### `<tolle-collapsible-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-collapsible-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Combobox
+
+- Install: `npx @tolle_/cli add combobox`
+- Import: `import { ComboboxComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-combobox>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| options | `ComboboxOption[]` | `[]` | Options to choose from. |
+| placeholder | `string` | `'Select an option…'` | Text shown on the trigger when nothing is selected. |
+| searchPlaceholder | `string` | `'Search…'` | Placeholder inside the search box. |
+| emptyMessage | `string` | `'No results found.'` | Message shown when the query matches no option. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger. |
+| invalid | `boolean` | `false` | Applies the destructive border and focus ring. |
+| disabled | `boolean` | `false` | Disables the control. |
+| shouldFilter | `boolean` | `true` | Set false to filter the options yourself, e.g. server-side. |
+| closeOnSelect | `boolean` | `true` | Close the panel after a value is chosen. |
+| placement | `'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'` | `'bottom-start'` | Where the panel opens relative to the trigger. |
+| ariaLabel | `string` | `''` | Accessible name when there is no associated visible label. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `any` | Emitted with the chosen value whenever the selection changes. |
+| searchChange | `string` | Emitted with the query text as the user searches. |
+| opened | `void` | Emitted when the panel opens. |
+| closed | `void` | Emitted when the panel closes. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+
+## Command
+
+- Install: `npx @tolle_/cli add command`
+- Import: `import { CommandComponent, CommandInputComponent, CommandListComponent, CommandEmptyComponent, CommandGroupComponent, CommandItemComponent, CommandSeparatorComponent, CommandShortcutComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-command>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| shouldFilter | `boolean` | `true` | Set false to keep every item visible and filter the list yourself —
+for server-side or fuzzy search. |
+| ariaLabel | `string` | `''` | Accessible name for the command menu. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the menu via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| selected | `any` | Emitted with the chosen item's `value` when the user selects one. |
+| queryChange | `string` | Emitted with the query text whenever the search input changes. |
+
+Slots: _default_
+
+### `<tolle-command-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Type a command or search…'` | Placeholder shown when the query is empty. |
+| ariaLabel | `string` | `''` | Accessible name for the search box. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the search row via `cn()` (last-wins). |
+| inputClass | `string` | `''` | Extra Tailwind classes merged onto the `<input>` itself via `cn()` (last-wins). |
+
+### `<tolle-command-list>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ariaLabel | `string` | `''` | Accessible name for the list. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the list via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-command-empty>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the empty state via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-command-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| heading | `string` | `''` | Section heading. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-command-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `any` | `null` | Value emitted from the menu's `selected` output when this row is chosen. |
+| label | `string` | `''` | Text matched against the query. Defaults to `value` when omitted — set it
+explicitly whenever the row's visible text differs from its value. |
+| keywords | `string[]` | `[]` | Extra terms that should also match this row, e.g. synonyms. |
+| disabled | `boolean` | `false` | Makes the row unselectable and skipped by the arrow keys. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| selected | `any` | Emitted when this specific row is chosen. |
+
+Slots: _default_
+
+### `<tolle-command-separator>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the separator via `cn()` (last-wins). |
+
+### `<tolle-command-shortcut>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the shortcut via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Command Dialog
+
+- Install: `npx @tolle_/cli add command-dialog`
+- Import: `import { CommandDialogComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-command-dialog>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | `boolean` | `false` | Whether the palette is visible. Supports two-way binding via `[(open)]`. |
+| shortcut | `string` | `'mod+k'` | Global hotkey that toggles the palette, as `mod+key` where `mod` maps to ⌘
+on macOS and Ctrl elsewhere. Set to `''` to disable the binding. |
+| closeOnBackdrop | `boolean` | `true` | Close the palette when the backdrop is clicked. |
+| ariaLabel | `string` | `'Command palette'` | Accessible name for the dialog. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the panel via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` | Two-way binding partner for `open`. |
+| opened | `void` | Emitted when the palette opens. |
+| closed | `void` | Emitted when the palette closes. |
+
+Slots: _default_
+
+## Confirmation
+
+- Install: `npx @tolle_/cli add confirmation`
+- Import: `import { ConfirmationComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-confirmation>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | `string` | `''` | Headline describing the action awaiting approval. |
+| description | `string` | `''` | Supporting detail shown under the title. |
+| confirmLabel | `string` | `'Approve'` | Label of the approve button. |
+| cancelLabel | `string` | `'Deny'` | Label of the deny button. |
+| confirmedLabel | `string` | `'Approved'` | Text shown in the resolved row after approval. |
+| cancelledLabel | `string` | `'Denied'` | Text shown in the resolved row after denial. |
+| state | `ConfirmationState` | `'pending'` | Whether the prompt is still open, and how it was answered. |
+| disabled | `boolean` | `false` | Blocks both buttons without resolving the prompt. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the prompt via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| confirmed | `void` | Emitted when the user approves the action. |
+| cancelled | `void` | Emitted when the user denies the action. |
+
+Slots: _default_
+
+## Context
+
+- Install: `npx @tolle_/cli add context`
+- Import: `import { ContextComponent, ContextTriggerComponent, ContextContentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-context>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| used | `number` | `0` | Tokens consumed so far. |
+| total | `number` | `0` | Size of the context window in tokens. |
+| inputTokens | `number | null` | `null` | Tokens spent on the prompt, shown in the breakdown. |
+| outputTokens | `number | null` | `null` | Tokens produced by the model, shown in the breakdown. |
+| cost | `number | null` | `null` | Spend for this context, shown in the breakdown. |
+| warningThreshold | `number` | `0.75` | Ratio at or above which the indicator turns warning-coloured. |
+| criticalThreshold | `number` | `0.9` | Ratio at or above which the indicator turns destructive-coloured. |
+| placement | `'top' | 'bottom' | 'left' | 'right'` | `'top'` | Side of the indicator the breakdown opens on. |
+| openDelay | `number` | `150` | Milliseconds to wait before opening the breakdown. |
+| closeDelay | `number` | `200` | Milliseconds to wait before closing the breakdown. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the indicator via `cn()` (last-wins). |
+
+### `<tolle-context-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-context-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| currency | `string` | `'$'` | Symbol prefixed to the cost figure. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the breakdown via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Context Menu
+
+- Install: `npx @tolle_/cli add context-menu`
+- Import: `import { ContextMenuComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-context-menu>`
+
+## Context Menu Trigger
+
+- Install: `npx @tolle_/cli add context-menu-trigger`
+- Import: `import { ContextMenuTriggerDirective } from '@tolle_/tolle-ui';`
+
+### `<[tolleContextMenuTrigger]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | `ContextMenuItem[]` | `[]` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| action | `string` |  |
+
+## Conversation
+
+- Install: `npx @tolle_/cli add conversation`
+- Import: `import { ConversationComponent, ConversationContentComponent, ConversationEmptyStateComponent, ConversationScrollButtonComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-conversation>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | `'sm' | 'default' | 'lg' | 'full'` | `'default'` | Height preset for the scroll region. |
+| autoScroll | `boolean` | `true` | Keeps the newest message in view while the reader is already at the bottom. |
+| empty | `boolean` | `false` | Set true before the first message so the empty state shows. |
+| threshold | `number` | `32` | Distance from the bottom, in px, still counted as "at the bottom". |
+| ariaLabel | `string` | `''` | Accessible name for the transcript. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the transcript via `cn()` (last-wins). |
+| viewportClass | `string` | `''` | Extra Tailwind classes merged onto the scrolling viewport via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| atBottomChange | `boolean` | Emitted whenever the transcript becomes pinned to, or leaves, the bottom. |
+
+Slots: _default_, `tolle-conversation-scroll-button`
+
+Variants:
+- `size`: `sm`, `default`, `lg`, `full` (default `default`)
+
+### `<tolle-conversation-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the stack via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-conversation-empty-state>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | `string` | `'ri-chat-3-line'` | Remixicon class for the illustration. |
+| title | `string` | `'No messages yet'` | Headline shown above the description. |
+| description | `string` | `'Start the conversation by sending a message.'` | Supporting copy under the headline. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the empty state via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-conversation-scroll-button>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'secondary' | 'outline'` | `'outline'` | Visual style of the button. |
+| size | `'sm' | 'default' | 'icon'` | `'default'` | Size of the button; 'icon' drops the text label. |
+| label | `string` | `'Jump to latest'` | Button text and accessible name. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the button via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| jumped | `void` | Emitted when the reader jumps back to the newest message. |
+
+Variants:
+- `variant`: `default`, `secondary`, `outline` (default `outline`)
+- `size`: `sm`, `default`, `icon` (default `default`)
+
+## Country Selector
+
+- Install: `npx @tolle_/cli add country-selector`
+- Import: `import { CountrySelectorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-country-selector>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``country-selector-${Math.random().toString(36).substr(2, 9)}`` |  |
+| label | `string` | `''` |  |
+| hint | `string` | `''` |  |
+| errorMessage | `string` | `''` |  |
+| error | `boolean` | `false` |  |
+| hideHintOnFocus | `boolean` | `true` |  |
+| placeholder | `string` | `'Select country'` |  |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+| readonly | `boolean` | `false` |  |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` |  |
+| defaultCountryCode | `string` | `'GH'` |  |
+| returnValue | `'object' | 'isoAlpha2' | 'dialCode' | 'name'` | `'isoAlpha2'` |  |
+| showName | `boolean` | `true` |  |
+| externalFocused | `boolean | undefined` | — |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| onSelect | `any` |  |
+| onFocusChange | `void` |  |
+| onBlurChange | `void` |  |
+
+## Data Table
+
+- Install: `npx @tolle_/cli add data-table`
+- Import: `import { DataTableComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-data-table>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `any[]` | `[]` |  |
+| columns | `TableColumn[]` | `[]` |  |
+| searchable | `boolean` | `true` |  |
+| paginate | `boolean` | `true` |  |
+| pageSizeOptions | `number[]` | `[]` |  |
+| pageSize | `number` | `10` |  |
+| expandable | `boolean` | `false` |  |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` |  |
+| stickyHeader | `boolean` | `false` |  |
+| maxHeight | `string` | — |  |
+| bordered | `boolean` | `true` |  |
+| tableBackground | `string` | `''` | Background for the table surface, behind both header and rows. |
+| headerBackground | `string` | `'bg-background'` | Background for the header row. Must be opaque when `stickyHeader` is on,
+otherwise rows scroll visibly through the header — hence the default
+`bg-background` rather than transparent. |
+| striped | `boolean` | `false` | Alternating row backgrounds. Applied to odd rows only. |
+| stripeBackground | `string` | `'bg-muted/30'` | Background applied to odd rows when `striped` is on. |
+| rowBackground | `(row: any, index: number) => string` | — | Per-row background, resolved against the row's own data — e.g.
+`[rowBackground]="r => r.overdue ? 'bg-destructive/10' : ''"`.
+Takes precedence over `striped`. |
+| allowColumnHiding | `boolean` | `true` |  |
+| showSettings | `boolean` | `true` |  |
+| expandedTemplate | `TemplateRef<any>` | — |  |
+
+## Date Picker
+
+- Install: `npx @tolle_/cli add date-picker`
+- Import: `import { DatePickerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-date-picker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Pick a date'` | Text shown on the trigger when no date is selected. |
+| disabled | `boolean` | `false` | Disables the control. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+| disablePastDates | `boolean` | `false` | Disables every day before today in the calendar. |
+| showClear | `boolean` | `true` | Shows the footer's Clear button. |
+| showQuickActions | `boolean` | `true` | Shows the panel's Clear / Done footer. |
+| minDate | `Date` | — | Earliest selectable date; earlier days are disabled. |
+| maxDate | `Date` | — | Latest selectable date; later days are disabled. |
+| mode | `CalendarMode` | `'date'` | Whether the control picks a day, a month or a year. |
+| formatMonthFn | `(date: Date) => string` | — | Overrides how a month is labelled in the calendar header. |
+| formatYearFn | `(date: Date) => string` | — | Overrides how a year is labelled in the calendar header. |
+| displayFormat | `(date: Date, mode: CalendarMode) => string` | — | Overrides how the selected date is rendered on the trigger. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger. |
+| invalid | `boolean` | `false` | Applies the destructive border and focus ring. |
+| ariaLabel | `string` | `''` | Accessible name when there is no associated visible label. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `Date | null` | Emitted with the chosen date, or `null` when the value is cleared. |
+| opened | `void` | Emitted when the calendar panel opens. |
+| closed | `void` | Emitted when the calendar panel closes. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+
+## Date Range Picker
+
+- Install: `npx @tolle_/cli add date-range-picker`
+- Import: `import { DateRangePickerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-date-range-picker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | `false` | Disables the control. |
+| placeholder | `string` | `'Pick a date range'` | Text shown on the trigger when no range is selected. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+| disablePastDates | `boolean` | `false` | Disables every day before today in the calendar. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger. |
+| numberOfMonths | `number` | `1` | Consecutive months shown in the popover (e.g. `2` for a two-month picker). |
+| invalid | `boolean` | `false` | Applies the destructive border and focus ring. |
+| ariaLabel | `string` | `''` | Accessible name when there is no associated visible label. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `DateRange` | Emitted with the selected range, including the half-made `{ start, end: null }` state. |
+| opened | `void` | Emitted when the calendar panel opens. |
+| closed | `void` | Emitted when the calendar panel closes. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+
+## Date Time Picker
+
+- Install: `npx @tolle_/cli add date-time-picker`
+- Import: `import { DateTimePickerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-date-time-picker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Select date and time'` | Text shown on the trigger when nothing is selected. |
+| disabled | `boolean` | `false` | Disables the control. |
+| use12Hours | `boolean` | `false` | Renders a 12-hour face with an AM/PM column. |
+| showSeconds | `boolean` | `false` | Adds a seconds column. |
+| minuteStep | `number` | `1` | Interval between minute entries, in minutes. |
+| min | `Date` | — | Earliest selectable moment; earlier days and times are disabled. |
+| max | `Date` | — | Latest selectable moment; later days and times are disabled. |
+| displayFormat | `string` | `'MMM d, yyyy h:mm a'` | date-fns pattern used to render the value on the trigger. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger and entries. |
+| invalid | `boolean` | `false` | Applies the destructive border and focus ring. |
+| ariaLabel | `string` | `''` | Accessible name when there is no associated visible label. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `Date | null` | Emitted with the chosen moment, or `null` when the value is cleared. |
+| opened | `void` | Emitted when the panel opens. |
+| closed | `void` | Emitted when the panel closes. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+
+## Direction
+
+- Install: `npx @tolle_/cli add direction`
+- Import: `import { DirectionDirective } from '@tolle_/tolle-ui';`
+
+### `<[tolleDirection]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tolleDirection | `Direction` | `'ltr'` | Writing direction applied to the host's `dir` attribute. |
+| tolleDirectionPublish | `boolean` | `true` | Whether to publish this direction to the app-wide `DirectionService`. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| directionChange | `Direction` | Emitted with the direction whenever it changes. |
+
+## Dropdown Item
+
+- Install: `npx @tolle_/cli add dropdown-item`
+- Import: `import { DropdownItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-dropdown-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+
+Slots: _default_
+
+## Dropdown Label
+
+- Install: `npx @tolle_/cli add dropdown-label`
+- Import: `import { DropdownLabelComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-dropdown-label>`
+
+Slots: _default_
+
+## Dropdown Menu
+
+- Install: `npx @tolle_/cli add dropdown-menu`
+- Import: `import { DropdownMenuComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-dropdown-menu>`
+
+Slots: _default_
+
+## Dropdown Separator
+
+- Install: `npx @tolle_/cli add dropdown-separator`
+- Import: `import { DropdownSeparatorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-dropdown-separator>`
+
+## Dropdown Trigger
+
+- Install: `npx @tolle_/cli add dropdown-trigger`
+- Import: `import { DropdownTriggerDirective } from '@tolle_/tolle-ui';`
+
+### `<[tolleDropdownTrigger]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| menu | `DropdownMenuComponent` | — |  |
+
+## Empty State
+
+- Install: `npx @tolle_/cli add empty-state`
+- Import: `import { EmptyStateComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-empty-state>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'minimal'` | `'default'` |  |
+| title | `string` | `'No items found'` |  |
+| description | `string` | — |  |
+| class | `string` | `''` |  |
+
+Slots: `[icon]`, `[actions]`
+
+Variants:
+- `variant`: `default`, `minimal` (default `default`)
+
+## Field
+
+- Install: `npx @tolle_/cli add field`
+- Import: `import { FieldComponent, FieldLabelComponent, FieldContentComponent, FieldDescriptionComponent, FieldErrorComponent, FieldGroupComponent, FieldSetComponent, FieldLegendComponent, FieldSeparatorComponent, FieldTitleComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-field>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| orientation | `'vertical' | 'horizontal' | 'responsive'` | `'vertical'` | Layout direction; `responsive` goes horizontal at the `@md` container width. |
+| invalid | `boolean` | `false` | Marks the field invalid, turning on the destructive styling for descendants. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the field via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `orientation`: `vertical`, `horizontal`, `responsive` (default `vertical`)
+
+### `<tolle-field-label>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| for | `string` | `''` | Id of the control this label describes; wire it to the control's `id`. |
+| required | `boolean` | `false` | Appends a required marker (*) after the label text. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the label via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-field-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the content column via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-field-description>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `string` | `''` | Id to reference from the control's `aria-describedby`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the description via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-field-error>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| errors | `string | string[] | Record<string, any> | null` | `''` | Validation message(s). Accepts a single string, an array of strings, or an
+Angular `ValidationErrors`-style object whose values are messages. |
+| id | `string` | `''` | Id to reference from the control's `aria-describedby`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the error text via `cn()` (last-wins). |
+
+### `<tolle-field-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-field-set>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the fieldset via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-field-legend>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'legend' | 'label'` | `'legend'` | Type scale of the legend. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the legend via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `variant`: `legend`, `label` (default `legend`)
+
+### `<tolle-field-separator>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the separator via `cn()` (last-wins). |
+
+### `<tolle-field-title>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the title via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Hover Card
+
+- Install: `npx @tolle_/cli add hover-card`
+- Import: `import { HoverCardComponent, HoverCardTriggerComponent, HoverCardContentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-hover-card>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| openDelay | `number` | `700` |  |
+| closeDelay | `number` | `300` |  |
+| placement | `'top' | 'bottom' | 'left' | 'right'` | `'bottom'` |  |
+
+Slots: _default_
+
+### `<tolle-hover-card-trigger>`
+
+Slots: _default_
+
+### `<tolle-hover-card-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Inline Citation
+
+- Install: `npx @tolle_/cli add inline-citation`
+- Import: `import { InlineCitationComponent, InlineCitationCardComponent, InlineCitationQuoteComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-inline-citation>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| index | `number | string` | `1` | Number rendered in the superscript marker. |
+| variant | `'default' | 'muted' | 'subtle'` | `'default'` | Colour treatment of the marker. |
+| size | `'sm' | 'default'` | `'default'` | Text size of the marker. |
+| placement | `'top' | 'bottom' | 'left' | 'right'` | `'top'` | Side of the marker the source card opens on. |
+| openDelay | `number` | `150` | Milliseconds to wait before opening the card. |
+| closeDelay | `number` | `200` | Milliseconds to wait before closing the card. |
+| ariaLabel | `string` | `''` | Accessible label for the marker; falls back to "Citation {index}". |
+| class | `string` | `''` | Extra Tailwind classes merged onto the marker via `cn()` (last-wins). |
+| cardClass | `string` | `''` | Extra Tailwind classes merged onto the hover card panel via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `muted`, `subtle` (default `default`)
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-inline-citation-card>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | `string` | `''` | Title of the cited source. |
+| url | `string` | `''` | Link to the cited source. |
+| snippet | `string` | `''` | Short excerpt from the source. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the card via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-inline-citation-quote>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| cite | `string` | `''` | Attribution shown beneath the quote. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the quote via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Input
+
+- Install: `npx @tolle_/cli add input`
+- Import: `import { InputComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `string` | ``input-${Math.random().toString(36).substr(2, 9)}`` |  |
+| label | `string` | `''` |  |
+| hint | `string` | `''` |  |
+| errorMessage | `string` | `''` |  |
+| type | `string` | `'text'` |  |
+| placeholder | `string` | `''` |  |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` |  |
+| containerClass | `string` | `''` |  |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+| readonly | `boolean` | `false` |  |
+| error | `boolean` | `false` |  |
+| hideHintOnFocus | `boolean` | `true` |  |
+
+Slots: `[prefix]`, `[suffix]`
+
+## Input Group
+
+- Install: `npx @tolle_/cli add input-group`
+- Import: `import { InputGroupComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupTextComponent, InputGroupInputComponent, InputGroupTextareaComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-input-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the group; match it to the input inside. |
+| invalid | `boolean` | `false` | Applies the destructive border and focus ring. |
+| stacked | `boolean` | `false` | Switches to a stacked column layout for `block-start`/`block-end` addons. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+- `stacked`: `true`, `false` (default `false`)
+
+### `<tolle-input-group-addon>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| align | `'inline-start' | 'inline-end' | 'block-start' | 'block-end'` | `'inline-start'` | Where the addon sits relative to the input. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the addon via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `align`: `inline-start`, `inline-end`, `block-start`, `block-end` (default `inline-start`)
+
+### `<tolle-input-group-button>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'` | `'ghost'` | Visual style of the button. |
+| size | `'xs' | 'sm' | 'icon-xs' | 'icon-sm'` | `'icon-sm'` | Size of the button; the `icon-*` sizes render a square. |
+| type | `'button' | 'submit' | 'reset'` | `'button'` | Native button type. |
+| disabled | `boolean` | `false` | Disables the button. |
+| ariaLabel | `string` | `''` | Accessible name — required when the button shows only an icon. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the button via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| clicked | `MouseEvent` | Emitted with the click event when the button is pressed. |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `secondary`, `outline`, `ghost`, `destructive` (default `ghost`)
+- `size`: `xs`, `sm`, `icon-xs`, `icon-sm` (default `icon-sm`)
+
+### `<tolle-input-group-text>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the text via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-input-group-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``input-group-input-${Math.random().toString(36).slice(2, 11)}`` | Id applied to the underlying `<input>`. |
+| type | `string` | `'text'` | Native input type. |
+| placeholder | `string` | `''` | Placeholder text. |
+| disabled | `boolean` | `false` | Disables the input. |
+| readonly | `boolean` | `false` | Makes the input read-only. |
+| ariaDescribedby | `string` | `''` | Id of the element describing this input, for `aria-describedby`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the input via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `string` | Emitted with the new value on every keystroke. |
+
+### `<tolle-input-group-textarea>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``input-group-textarea-${Math.random().toString(36).slice(2, 11)}`` | Id applied to the underlying `<textarea>`. |
+| rows | `number` | `3` | Visible rows. |
+| placeholder | `string` | `''` | Placeholder text. |
+| disabled | `boolean` | `false` | Disables the textarea. |
+| readonly | `boolean` | `false` | Makes the textarea read-only. |
+| ariaDescribedby | `string` | `''` | Id of the element describing this textarea, for `aria-describedby`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the textarea via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `string` | Emitted with the new value on every keystroke. |
+
+## Item
+
+- Install: `npx @tolle_/cli add item`
+- Import: `import { ItemComponent, ItemGroupComponent, ItemMediaComponent, ItemContentComponent, ItemTitleComponent, ItemDescriptionComponent, ItemActionsComponent, ItemHeaderComponent, ItemFooterComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'outline' | 'muted'` | `'default'` | Visual style of the row. |
+| size | `'xs' | 'sm' | 'default'` | `'default'` | Padding and gap density of the row. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `outline`, `muted` (default `default`)
+- `size`: `xs`, `sm`, `default` (default `default`)
+
+### `<tolle-item-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-media>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the media slot via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the content column via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-title>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the title via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-description>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the description via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-actions>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the actions slot via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-header>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the header via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-item-footer>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the footer via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Kbd
+
+- Install: `npx @tolle_/cli add kbd`
+- Import: `import { KbdComponent, KbdGroupComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-kbd>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Size of the key cap. |
+| variant | `'default' | 'outline'` | `'default'` | Visual style of the key cap. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the key cap via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default`, `lg` (default `default`)
+- `variant`: `default`, `outline` (default `default`)
+
+### `<tolle-kbd-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Label
+
+- Install: `npx @tolle_/cli add label`
+- Import: `import { LabelComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-label>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| for | `string` | — |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Marker
+
+- Install: `npx @tolle_/cli add marker`
+- Import: `import { MarkerComponent, MarkerGroupComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-marker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'separator' | 'status' | 'error'` | `'default'` | Kind of transcript marker this row represents. |
+| label | `string` | `''` | Text for the marker — the date on a separator, or the status wording. |
+| icon | `string` | `''` | Remixicon class for a leading icon, e.g. 'ri-tools-line'. |
+| shimmer | `boolean` | `false` | Applies the shimmer text sweep, for live status such as "Thinking…". |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `separator`, `status`, `error` (default `default`)
+
+### `<tolle-marker-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Masked Input
+
+- Install: `npx @tolle_/cli add masked-input`
+- Import: `import { MaskedInputComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-masked-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `string` | ``masked-input-${Math.random().toString(36).substr(2, 9)}`` |  |
+| label | `string` | `''` |  |
+| hint | `string` | `''` |  |
+| errorMessage | `string` | `''` |  |
+| mask | `string` | `''` |  |
+| placeholder | `string` | `''` |  |
+| type | `string` | `'text'` |  |
+| disabled | `boolean` | `false` |  |
+| readonly | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+| containerClass | `string` | `''` |  |
+| error | `boolean` | `false` |  |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` |  |
+| returnRaw | `boolean` | `false` |  |
+| hideHintOnFocus | `boolean` | `true` |  |
+| externalFocused | `boolean | undefined` | — |  |
+
+Slots: `[prefix]`, `[suffix]`
+
+## Menubar
+
+- Install: `npx @tolle_/cli add menubar`
+- Import: `import { MenubarComponent, MenubarMenuComponent, MenubarTriggerComponent, MenubarContentComponent, MenubarItemComponent, MenubarLabelComponent, MenubarSeparatorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-menubar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Height/padding scale, inherited by every trigger in the bar. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the bar via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `string | null` | Emitted with the id of the menu that opened, or `null` when the bar closes. |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-menubar-menu>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``tolle-menubar-menu-${menubarMenuCounter++}`` | Explicit id for the menu; one is generated when omitted. |
+
+Slots: _default_
+
+### `<tolle-menubar-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | `false` | Prevents the menu from opening. |
+| size | `'sm' | 'default' | 'lg'` | — | Overrides the size inherited from `tolle-menubar`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-menubar-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | `'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'` | `'bottom-start'` | Preferred side of the trigger to render on; flips when space is tight. |
+| sideOffset | `number` | `4` | Gap in pixels between the trigger and the panel. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the panel via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-menubar-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'destructive'` | `'default'` | Visual style of the item. |
+| inset | `boolean` | `false` | Adds left padding so the label lines up with items that have icons. |
+| disabled | `boolean` | `false` | Blocks activation and dims the item. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the item via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| select | `Event` | Emitted when the item is clicked or activated with Enter/Space. |
+
+Slots: `[prefix]`, _default_, `[shortcut]`
+
+Variants:
+- `variant`: `default`, `destructive` (default `default`)
+- `inset`: `true`, `false` (default `false`)
+
+### `<tolle-menubar-label>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| inset | `boolean` | `false` | Adds left padding so the label lines up with items that have icons. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the label via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-menubar-separator>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the separator via `cn()` (last-wins). |
+
+## Message
+
+- Install: `npx @tolle_/cli add message`
+- Import: `import { MessageAlignAware, MessageComponent, MessageGroupComponent, MessageAvatarComponent, MessageContentComponent, MessageHeaderComponent, MessageFooterComponent } from '@tolle_/tolle-ui';`
+
+### `<MessageAlignAware>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the element via `cn()` (last-wins). |
+
+### `<tolle-message>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| align | `'start' | 'end'` | `'start'` | Which edge the message hangs off — 'start' for incoming, 'end' for outgoing. |
+| size | `'sm' | 'default'` | `'default'` | Gap density of the row. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `align`: `start`, `end` (default `start`)
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-message-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| align | `'start' | 'end'` | `'start'` | Edge the grouped messages hang off. |
+| spacing | `'tight' | 'default' | 'loose'` | `'default'` | Vertical gap between the grouped messages. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the group via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `align`: `start`, `end` (default `start`)
+- `spacing`: `tight`, `default`, `loose` (default `default`)
+
+### `<tolle-message-avatar>`
+
+Slots: _default_
+
+### `<tolle-message-content>`
+
+Slots: _default_
+
+### `<tolle-message-header>`
+
+Slots: _default_
+
+### `<tolle-message-footer>`
+
+Slots: _default_
+
+## Message Scroller
+
+- Install: `npx @tolle_/cli add message-scroller`
+- Import: `import { MessageScrollerComponent, MessageScrollerViewportComponent, MessageScrollerContentComponent, MessageScrollerItemDirective, MessageScrollerButtonComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-message-scroller>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| startPosition | `ScrollStartPosition` | `'last-anchor'` | Where to land when the transcript first renders. `last-anchor` opens at the
+newest turn so a long answer starts from its first line. |
+| scrollPreviousItemPeek | `number` | `48` | Pixels of the previous turn kept visible above an anchored turn, so the
+reader can see what the reply is responding to. |
+| threshold | `number` | `32` | Distance from the bottom, in px, still treated as the live edge. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the frame via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| atBottomChange | `boolean` | Emitted when the reader arrives at, or leaves, the live edge. |
+
+Slots: _default_
+
+### `<tolle-message-scroller-viewport>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the viewport via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-message-scroller-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the transcript via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<[tolleMessageScrollerItem]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| scrollAnchor | `boolean` | `false` | Marks this row as the start of a turn. |
+
+### `<tolle-message-scroller-button>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ariaLabel | `string` | `'Jump to latest messages'` | Accessible name for the jump control. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the button via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Modal
+
+- Install: `npx @tolle_/cli add modal`
+- Import: `import { ModalComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-modal>`
+
+## Model Selector
+
+- Install: `npx @tolle_/cli add model-selector`
+- Import: `import { ModelSelectorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-model-selector>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| models | `ModelOption[]` | `[]` | Models to choose from; grouped by `provider` when that field is set. |
+| placeholder | `string` | `'Select a model'` | Text shown on the trigger when nothing is selected. |
+| searchPlaceholder | `string` | `'Search models…'` | Placeholder inside the search box. |
+| emptyMessage | `string` | `'No models found.'` | Message shown when the query matches no model. |
+| searchable | `boolean` | `true` | Shows the search box above the list. |
+| showProviderOnTrigger | `boolean` | `false` | Prefixes the selected model's name with its provider on the trigger. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger. |
+| variant | `'default' | 'ghost'` | `'default'` | Visual style of the trigger. |
+| icon | `string` | `'ri-sparkling-line'` | Optional remixicon class shown at the start of the trigger. |
+| placement | `'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'` | `'bottom-start'` | Where the list opens relative to the trigger. |
+| disabled | `boolean` | `false` | Disables the control. |
+| ariaLabel | `string` | `''` | Accessible name for the trigger and list. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `string | null` | Emitted with the chosen model's `id` whenever the selection changes. |
+| modelChange | `ModelOption | null` | Emitted with the whole `ModelOption` whenever the selection changes. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `variant`: `default`, `ghost` (default `default`)
+
+## Multi Select
+
+- Install: `npx @tolle_/cli add multi-select`
+- Import: `import { MultiSelectComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-multi-select>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Select options...'` | Text shown on the trigger when nothing is selected. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Padding and text size of the trigger. |
+| searchable | `boolean` | `false` | Adds a search box that filters the projected options. |
+| disabled | `boolean` | `false` | Disables the control and blocks opening the panel. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+| maxSelections | `number` | — | Largest number of values that can be selected at once; leave unset for no cap. |
+| maxDisplayItems | `number` | `3` | How many chips to render before collapsing the rest into a "+N more" hint. |
+| error | `boolean` | `false` | Applies the destructive border and focus ring. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `any[]` | Emitted with the full array of selected values whenever the selection changes. |
+| opened | `void` | Emitted when the panel opens. |
+| closed | `void` | Emitted when the panel closes. |
+
+Slots: _default_
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `error`: `true`, `false` (default `false`)
+- `disabled`: `true`, `false` (default `false`)
+
+## Native Select
+
+- Install: `npx @tolle_/cli add native-select`
+- Import: `import { NativeSelectComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-native-select>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``native-select-${Math.random().toString(36).slice(2, 11)}`` | Id applied to the underlying `<select>`; pair it with a `tolle-label`. |
+| options | `NativeSelectOption[]` | `[]` | Options to render. Omit and project `<option>` elements for custom markup. |
+| placeholder | `string` | `''` | Non-selectable prompt shown when no value is set. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the control. |
+| invalid | `boolean` | `false` | Applies the destructive border and sets `aria-invalid`. |
+| disabled | `boolean` | `false` | Disables the control. |
+| ariaLabel | `string` | `''` | Accessible name when there is no associated visible label. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<select>` via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `any` | Emitted with the newly selected value whenever the user picks an option. |
+
+Slots: _default_
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+
+## Navigation Menu
+
+- Install: `npx @tolle_/cli add navigation-menu`
+- Import: `import { NavigationMenuComponent, NavigationMenuListComponent, NavigationMenuItemComponent, NavigationMenuTriggerComponent, NavigationMenuContentComponent, NavigationMenuLinkComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-navigation-menu>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| align | `'start' | 'center' | 'end'` | `'center'` | Horizontal alignment of the list within the nav. |
+| ariaLabel | `string` | `'Main'` | Accessible name for the `<nav>` landmark. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<nav>` via `cn()` (last-wins). |
+| closeDelay | `number` | `150` | Milliseconds before a panel closes after the pointer leaves — the grace
+period that lets the pointer travel diagonally into the panel. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `string | null` | Emitted with the id of the item that opened, or `null` when the menu closes. |
+
+Slots: _default_
+
+Variants:
+- `align`: `start`, `center`, `end` (default `center`)
+
+### `<tolle-navigation-menu-list>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<ul>` via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-navigation-menu-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``tolle-navigation-menu-item-${navigationMenuItemCounter++}`` | Explicit id for the item; one is generated when omitted. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<li>` via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-navigation-menu-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | `false` | Prevents the panel from opening. |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Height/padding scale of the trigger. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-navigation-menu-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | `'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'` | `'bottom'` | Preferred side of the trigger to render on; flips when space is tight. |
+| sideOffset | `number` | `8` | Gap in pixels between the trigger and the panel. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the panel via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-navigation-menu-link>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| href | `string` | `''` | Destination URL. Omit to render a non-navigating item. |
+| target | `string` | `''` | Anchor target; `_blank` also sets a safe `rel`. |
+| active | `boolean` | `false` | Marks the link as the current page. |
+| variant | `'default' | 'muted'` | `'default'` | Visual style of the link. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the anchor via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| navigate | `MouseEvent` | Emitted with the click event when the link is activated. |
+
+Slots: `[label]`, _default_, `[description]`
+
+Variants:
+- `variant`: `default`, `muted` (default `default`)
+- `active`: `true`, `false` (default `false`)
+
+## Otp
+
+- Install: `npx @tolle_/cli add otp`
+- Import: `import { OtpComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-otp>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| disabled | `boolean` | `false` |  |
+| auto | `boolean` | `false` |  |
+| length | `number` | `6` |  |
+
+Slots: _default_
+
+## Otp Group
+
+- Install: `npx @tolle_/cli add otp-group`
+- Import: `import { OtpGroupComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-otp-group>`
+
+Slots: _default_
+
+## Otp Slot
+
+- Install: `npx @tolle_/cli add otp-slot`
+- Import: `import { OtpSlotComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-otp-slot>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| char | `string | undefined` | `''` |  |
+| isActive | `boolean` | `false` |  |
+| isFirst | `boolean` | `false` |  |
+| isLast | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+
+## Pagination
+
+- Install: `npx @tolle_/cli add pagination`
+- Import: `import { PaginationComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-pagination>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| showPageLinks | `boolean` | `true` |  |
+| showPageOptions | `boolean` | `true` |  |
+| showCurrentPageInfo | `boolean` | `true` |  |
+| currentPageInfoTemplate | `string` | — |  |
+| totalRecords | `number` | `0` |  |
+| currentPageSize | `number` | `10` |  |
+| currentPage | `number` | `1` |  |
+| pageSizeOptions | `number[]` | `[10, 20, 30, 50]` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| onPageNumberChange | `number` |  |
+| onPageSizeChange | `number` |  |
+
+## Phone Number Input
+
+- Install: `npx @tolle_/cli add phone-number-input`
+- Import: `import { PhoneNumberInputComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-phone-number-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``phone-input-${Math.random().toString(36).substr(2, 9)}`` |  |
+| label | `string` | `''` |  |
+| hint | `string` | `''` |  |
+| errorMessage | `string` | `''` |  |
+| error | `boolean` | `false` |  |
+| hideHintOnFocus | `boolean` | `true` |  |
+| placeholder | `string` | `'Phone number'` |  |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` |  |
+| disabled | `boolean` | `false` |  |
+| readonly | `boolean` | `false` |  |
+| defaultCountryCode | `string` | `'GH'` |  |
+| dataType | `'NumberOnly' | 'FullObject'` | `'FullObject'` |  |
+| mask | `string` | `'(000) 000-0000'` |  |
+| class | `string` | `''` |  |
+| enableCountrySelector | `boolean` | `true` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| onSelect | `any` |  |
+
+## Plan
+
+- Install: `npx @tolle_/cli add plan`
+- Import: `import { PlanComponent, PlanStepComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-plan>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | `string` | `'Plan'` | Heading shown above the steps. |
+| collapsed | `boolean` | `false` | Shows only the header and its "Step N of M" summary. |
+| collapsible | `boolean` | `true` | Lets the user collapse and expand the plan by clicking the header. |
+| size | `'sm' | 'default'` | `'default'` | Padding and text scale of the plan. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the plan via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| collapsedChange | `boolean` | Emitted with the new collapsed state when the header is toggled. |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-plan-step>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | `string` | `''` | What this step does. |
+| description | `string` | `''` | Supporting detail shown under the label. |
+| status | `PlanStepStatus` | `'pending'` | Progress of this step; drives the badge colour and glyph. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the step via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Popover
+
+- Install: `npx @tolle_/cli add popover`
+- Import: `import { PopoverComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-popover>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | `| 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end'` | `'bottom'` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| onOpen | `void` |  |
+| onClose | `void` |  |
+
+Slots: `[trigger]`, _default_
+
+## Popover Content
+
+- Install: `npx @tolle_/cli add popover-content`
+- Import: `import { PopoverContentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-popover-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Progress
+
+- Install: `npx @tolle_/cli add progress`
+- Import: `import { ProgressComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-progress>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `number | null` | `0` |  |
+| class | `string` | `''` |  |
+
+## Progress Circle
+
+- Install: `npx @tolle_/cli add progress-circle`
+- Import: `import { ProgressCircleComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-progress-circle>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `number | null` | `0` | Percent complete, 0-100. |
+| size | `number` | `120` | Diameter of the ring in px. |
+| strokeWidth | `number` | `8` | Thickness of the ring in px. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the ring via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Prompt Input
+
+- Install: `npx @tolle_/cli add prompt-input`
+- Import: `import { PromptInputComponent, PromptInputToolbarComponent, PromptInputToolsComponent, PromptInputSubmitComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-prompt-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Send a message…'` | Placeholder shown while the composer is empty. |
+| disabled | `boolean` | `false` | Blocks typing and submission. |
+| maxRows | `number` | `8` | Rows the textarea may grow to before it starts scrolling. |
+| status | `PromptInputStatus` | `'ready'` | Lifecycle of the response being composed. |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Size scale of the composer. |
+| submitOnEnter | `boolean` | `true` | Submit on Enter, keeping Shift+Enter for newlines. |
+| clearOnSubmit | `boolean` | `true` | Clears the composer after a successful submit. |
+| ariaLabel | `string` | `''` | Accessible name for the textarea. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the composer via `cn()` (last-wins). |
+| textareaClass | `string` | `''` | Extra Tailwind classes merged onto the textarea via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| submitted | `string` | Emitted with the trimmed message text when the user submits. |
+| stopped | `void` | Emitted when the user cancels an in-flight streaming response. |
+| valueChange | `string` | Emitted with the message text whenever it changes. |
+
+Slots: _default_
+
+Variants:
+- `status`: `ready`, `streaming`, `error` (default `ready`)
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-prompt-input-toolbar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the toolbar via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-prompt-input-tools>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the tool row via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-prompt-input-submit>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'secondary' | 'ghost'` | `'default'` | Visual style of the button. |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Size of the button. |
+| submitLabel | `string` | `'Send message'` | Accessible name while the composer is idle. |
+| stopLabel | `string` | `'Stop generating'` | Accessible name while the composer is streaming. |
+| showLabel | `boolean` | `false` | Renders the label next to the icon. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the button via `cn()` (last-wins). |
+
+Variants:
+- `variant`: `default`, `secondary`, `ghost` (default `default`)
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+## Queue
+
+- Install: `npx @tolle_/cli add queue`
+- Import: `import { QueueComponent, QueueItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-queue>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | `string` | `'Queue'` | Heading shown above the queued items. |
+| emptyMessage | `string` | `'Nothing queued.'` | Text shown while the queue holds nothing. |
+| size | `'sm' | 'default'` | `'default'` | Padding and text scale of the queue. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the queue via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| countsChange | `QueueCounts` | Emitted with the queue's tallies whenever its items change. |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default` (default `default`)
+
+### `<tolle-queue-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | `string` | `''` | Text describing the queued work. |
+| status | `QueueItemStatus` | `'queued'` | Lifecycle state of this entry. |
+| removable | `boolean` | `true` | Shows the trailing dismiss button that emits `remove`. |
+| removeLabel | `string` | `'Remove from queue'` | Accessible label for the dismiss button. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the entry via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| remove | `void` | Emitted when the user dismisses this entry. |
+
+Slots: _default_
+
+## Radio Group
+
+- Install: `npx @tolle_/cli add radio-group`
+- Import: `import { RadioGroupComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-radio-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+| name | `any` | ``radio-group-${Math.random().toString(36).substring(2, 9)}`` |  |
+
+Slots: _default_
+
+## Radio Item
+
+- Install: `npx @tolle_/cli add radio-item`
+- Import: `import { RadioItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-radio-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `any` | — |  |
+| disabled | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Range Calendar
+
+- Install: `npx @tolle_/cli add range-calendar`
+- Import: `import { RangeCalendarComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-range-calendar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| disablePastDates | `boolean` | `false` |  |
+| bordered | `boolean` | `true` | Renders the calendar's own border/background/shadow. Set `false` inside a
+card/popover that already provides chrome. |
+| numberOfMonths | `number` | `1` | Number of consecutive months rendered side by side. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| rangeSelect | `DateRange` |  |
+
+## Reasoning
+
+- Install: `npx @tolle_/cli add reasoning`
+- Import: `import { ReasoningComponent, ReasoningTriggerComponent, ReasoningContentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-reasoning>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | `boolean` | `false` | Whether the trace is expanded. |
+| streaming | `boolean` | `false` | True while the model is still producing the trace. |
+| duration | `number` | `0` | Seconds the model spent reasoning, shown once streaming finishes. |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Text scale of the trace. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trace via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` | Emitted with the new state whenever the trace is expanded or collapsed. |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-reasoning-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | `string` | `'ri-brain-line'` | Remixicon class shown before the label. |
+| thinkingLabel | `string` | `'Thinking…'` | Label shown while the trace is streaming. |
+| fallbackLabel | `string` | `'Thought for a few seconds'` | Label used when the trace finished without a measured duration. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-reasoning-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | `string` | `''` | Reasoning text to render; project your own markup instead when richer. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the content via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Resizable
+
+- Install: `npx @tolle_/cli add resizable`
+- Import: `import { ResizableComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-resizable>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | `number` | `300` |  |
+| height | `number` | `200` |  |
+| minWidth | `number` | `50` |  |
+| minHeight | `number` | `50` |  |
+| maxWidth | `number` | — |  |
+| maxHeight | `number` | — |  |
+| resizable | `boolean` | `true` |  |
+| directions | `('right' | 'bottom' | 'both')[]` | `['right', 'bottom', 'both']` |  |
+| class | `string` | `''` |  |
+| containerClass | `string` | `''` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| resizeStart | `void` |  |
+| resize | `{ width: number; height: number }` |  |
+| resizeEnd | `{ width: number; height: number }` |  |
+
+Slots: _default_
+
+## Resizable Panel
+
+- Install: `npx @tolle_/cli add resizable-panel`
+- Import: `import { ResizablePanelComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-resizable-panel>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| direction | `'horizontal' | 'vertical'` | `'horizontal'` |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Resizable Panel Item
+
+- Install: `npx @tolle_/cli add resizable-panel-item`
+- Import: `import { ResizablePanelItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-resizable-panel-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | `number` | `1` |  |
+| minSize | `number` | `10` |  |
+| maxSize | `number` | — |  |
+| resizable | `boolean` | `true` |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Scroll Area
+
+- Install: `npx @tolle_/cli add scroll-area`
+- Import: `import { ScrollAreaComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-scroll-area>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+| height | `string` | `'100%'` |  |
+| orientation | `'vertical' | 'horizontal' | 'both'` | `'both'` |  |
+
+Slots: _default_
+
+## Segment
+
+- Install: `npx @tolle_/cli add segment`
+- Import: `import { SegmentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-segment>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | `SegmentItem[]` | `[]` |  |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+| itemTemplate | `TemplateRef<any>` | — |  |
+
+## Select
+
+- Install: `npx @tolle_/cli add select`
+- Import: `import { SelectComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-select>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Select an option'` | Text shown on the trigger when nothing is selected. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+| disabled | `boolean` | `false` | Disables the control and blocks opening the panel. |
+| searchable | `boolean` | `false` | Adds a search box that filters the projected options. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger. |
+| readonly | `boolean` | `false` | Shows the current value but blocks opening the panel. |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `any` | Emitted with the chosen value whenever the selection changes. |
+| opened | `void` | Emitted when the panel opens. |
+| closed | `void` | Emitted when the panel closes. |
+
+Slots: _default_
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `disabled`: `true`, `false` (default `false`)
+- `readonly`: `true`, `false` (default `false`)
+
+## Select Group
+
+- Install: `npx @tolle_/cli add select-group`
+- Import: `import { SelectGroupComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-select-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Select Item
+
+- Install: `npx @tolle_/cli add select-item`
+- Import: `import { SelectItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-select-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `any` | — |  |
+| class | `string` | `''` |  |
+| selected | `boolean` | `false` |  |
+| disabled | `boolean` | `false` |  |
+| multiSelect | `boolean` | `false` |  |
+| id | `any` | ``select-item-${Math.random().toString(36).substr(2, 9)}`` |  |
+| active | `boolean` | `false` |  |
+
+Slots: _default_
+
+## Select Separator
+
+- Install: `npx @tolle_/cli add select-separator`
+- Import: `import { SelectSeparatorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-select-separator>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` |  |
+
+## Separator
+
+- Install: `npx @tolle_/cli add separator`
+- Import: `import { SeparatorComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-separator>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| orientation | `'horizontal' | 'vertical'` | `'horizontal'` | Orientation of the rule. |
+| decorative | `boolean` | `true` | When true, the separator is purely visual (aria-hidden, role="none"). |
+| class | `string` | `''` |  |
+
+## Sheet
+
+- Install: `npx @tolle_/cli add sheet`
+- Import: `import { SheetComponent, SheetTriggerComponent, SheetContentComponent, SheetHeaderComponent, SheetFooterComponent, SheetTitleComponent, SheetDescriptionComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-sheet>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isOpen | `boolean` | `false` |  |
+| hasBackdrop | `boolean` | `true` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| isOpenChange | `boolean` |  |
+
+Slots: _default_
+
+### `<tolle-sheet-trigger>`
+
+Slots: _default_
+
+### `<tolle-sheet-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| side | `'top' | 'bottom' | 'left' | 'right'` | `'right'` |  |
+| rounded | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-sheet-header>`
+
+Slots: _default_
+
+### `<tolle-sheet-footer>`
+
+Slots: _default_
+
+### `<tolle-sheet-title>`
+
+Slots: _default_
+
+### `<tolle-sheet-description>`
+
+Slots: _default_
+
+## Sheet Wrapper
+
+- Install: `npx @tolle_/cli add sheet-wrapper`
+- Import: `import { SheetWrapperComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-sheet-wrapper>`
+
+## Shimmer
+
+- Install: `npx @tolle_/cli add shimmer`
+- Import: `import { ShimmerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-shimmer>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | `boolean` | `true` | Runs the shimmer animation; false renders plain static text. |
+| size | `'xs' | 'sm' | 'default' | 'lg' | 'xl'` | `'default'` | Text size of the label. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the label via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg`, `xl` (default `default`)
+- `active`: `true`, `false` (default `true`)
+
+## Sidebar
+
+- Install: `npx @tolle_/cli add sidebar`
+- Import: `import { SidebarComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-sidebar>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | `SidebarGroup[]` | `[]` |  |
+| collapsed | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+| variant | `'default' | 'secondary' | 'ghost' | 'outline'` | `'default'` | Styling variant for active items.
+- default: Solid primary background, light text (Matches Badge Default)
+- secondary: Solid secondary background
+- ghost: Transparent background, accent text (Shadcn standard)
+- outline: Bordered |
+
+Slots: `[header]`, `[footer]`
+
+## Skeleton
+
+- Install: `npx @tolle_/cli add skeleton`
+- Import: `import { SkeletonComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-skeleton>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'rect' | 'circle' | 'pill'` | `'rect'` | Shape of the skeleton placeholder. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the skeleton via `cn()` (last-wins). |
+
+Variants:
+- `variant`: `rect`, `circle`, `pill` (default `rect`)
+
+## Slider
+
+- Install: `npx @tolle_/cli add slider`
+- Import: `import { SliderComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-slider>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| min | `number` | `0` |  |
+| max | `number` | `100` |  |
+| step | `number` | `1` |  |
+| disabled | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+
+## Sources
+
+- Install: `npx @tolle_/cli add sources`
+- Import: `import { SourcesComponent, SourcesTriggerComponent, SourcesContentComponent, SourceComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-sources>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| open | `boolean` | `false` | Whether the citation list is expanded. |
+| variant | `'default' | 'card' | 'muted'` | `'default'` | Visual treatment of the list container. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the list via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` | Emitted with the new state whenever the list is expanded or collapsed. |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `card`, `muted` (default `default`)
+
+### `<tolle-sources-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| count | `number | null` | `null` | Overrides the counted number of sources. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-sources-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the content via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-source>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| href | `string` | `''` | URL the citation points at. |
+| title | `string` | `''` | Human-readable title; falls back to the href when empty. |
+| favicon | `string` | `''` | URL of a favicon shown instead of the numbered chip. |
+| index | `number | null` | `null` | Overrides the auto-numbered position chip. |
+| size | `'sm' | 'default'` | `'default'` | Text scale of the citation. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the citation via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `size`: `sm`, `default` (default `default`)
+
+## Spinner
+
+- Install: `npx @tolle_/cli add spinner`
+- Import: `import { SpinnerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-spinner>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | `'xs' | 'sm' | 'default' | 'lg' | 'xl'` | `'default'` | Diameter of the spinner. |
+| variant | `'default' | 'primary' | 'muted' | 'destructive'` | `'default'` | Colour of the spinner, inherited from the theme tokens. |
+| label | `string` | `'Loading'` | Accessible label announced while the spinner is visible. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the spinner via `cn()` (last-wins). |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg`, `xl` (default `default`)
+- `variant`: `default`, `primary`, `muted`, `destructive` (default `default`)
+
+## Suggestion
+
+- Install: `npx @tolle_/cli add suggestion`
+- Import: `import { SuggestionsComponent, SuggestionComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-suggestions>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| gap | `'sm' | 'default' | 'lg'` | `'default'` | Spacing between the pills. |
+| ariaLabel | `string` | `'Suggestions'` | Accessible name for the row. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the row via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| selected | `string` | Emitted with the `value` of whichever suggestion in the row was picked. |
+
+Slots: _default_
+
+Variants:
+- `gap`: `sm`, `default`, `lg` (default `default`)
+
+### `<tolle-suggestion>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `string` | `''` | Value emitted when the pill is picked. |
+| variant | `'outline' | 'secondary' | 'ghost'` | `'outline'` | Visual style of the pill. |
+| size | `'sm' | 'default' | 'lg'` | `'default'` | Size of the pill. |
+| icon | `string` | `''` | Remixicon class shown before the label. |
+| disabled | `boolean` | `false` | Blocks interaction with the pill. |
+| ariaLabel | `string` | `''` | Accessible name, when the projected label is not descriptive enough. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the pill via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| selected | `string` | Emitted with this pill's `value` when it is picked. |
+
+Slots: _default_
+
+Variants:
+- `variant`: `outline`, `secondary`, `ghost` (default `outline`)
+- `size`: `sm`, `default`, `lg` (default `default`)
+
+## Switch
+
+- Install: `npx @tolle_/cli add switch`
+- Import: `import { SwitchComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-switch>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the switch track via `cn()` (last-wins). |
+| disabled | `boolean` | `false` | Disables the switch and blocks toggling. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Size of the switch. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `checked`: `true`, `false` (default `false`)
+
+## Table
+
+- Install: `npx @tolle_/cli add table`
+- Import: `import { TableComponent, TableHeaderDirective, TableBodyDirective, TableFooterDirective, TableRowDirective, TableHeadDirective, TableCellDirective, TableCaptionDirective } from '@tolle_/tolle-ui';`
+
+### `<tolle-table>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| containerClass | `string` | `''` | Extra Tailwind classes merged onto the scrolling container via `cn()` (last-wins). |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<table>` via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<[tolleTableHeader]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<thead>` via `cn()` (last-wins). |
+
+### `<[tolleTableBody]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<tbody>` via `cn()` (last-wins). |
+
+### `<[tolleTableFooter]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<tfoot>` via `cn()` (last-wins). |
+
+### `<[tolleTableRow]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| selected | `boolean` | `false` | Applies the selected background and sets `data-state="selected"`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<tr>` via `cn()` (last-wins). |
+
+### `<[tolleTableHead]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| scope | `'col' | 'row' | 'colgroup' | 'rowgroup'` | `'col'` | Scope of the header cell for assistive tech. |
+| sort | `'ascending' | 'descending' | 'none' | null` | `null` | Current sort direction, surfaced as `aria-sort`. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<th>` via `cn()` (last-wins). |
+
+### `<[tolleTableCell]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<td>` via `cn()` (last-wins). |
+
+### `<[tolleTableCaption]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the `<caption>` via `cn()` (last-wins). |
+
+## Tabs
+
+- Install: `npx @tolle_/cli add tabs`
+- Import: `import { TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-tabs>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| defaultValue | `string` | — |  |
+| value | `string` | — |  |
+| class | `string` | `''` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `string` |  |
+
+Slots: _default_
+
+### `<tolle-tabs-list>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the tabs list via `cn()` (last-wins). |
+| variant | `'default' | 'underline'` | `'default'` | Visual style of the tab list. |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `underline` (default `default`)
+
+### `<tolle-tabs-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value (required) | `string` | — |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+### `<tolle-tabs-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value (required) | `string` | — |  |
+| class | `string` | `''` |  |
+
+Slots: _default_
+
+## Tag Input
+
+- Install: `npx @tolle_/cli add tag-input`
+- Import: `import { TagInputComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-tag-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `string` | ``tag-input-${Math.random().toString(36).substr(2, 9)}`` |  |
+| label | `string` | `''` |  |
+| hint | `string` | `''` |  |
+| errorMessage | `string` | `''` |  |
+| placeholder | `string` | `'Type and press Enter...'` |  |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` |  |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+| readonly | `boolean` | `false` |  |
+| error | `boolean` | `false` |  |
+| delimiter | `string` | `','` |  |
+| maxTags | `number | null` | `null` |  |
+| allowDuplicates | `boolean` | `false` |  |
+| tagPrefix | `string` | `''` |  |
+| tagSuffix | `string` | `''` |  |
+
+## Task
+
+- Install: `npx @tolle_/cli add task`
+- Import: `import { TaskComponent, TaskTriggerComponent, TaskContentComponent, TaskItemComponent, TaskItemFileComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-task>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| status | `TaskStatus` | `'pending'` | Lifecycle state of the task; drives the icon and border colour. |
+| title | `string` | `''` | Title shown by `tolle-task-trigger`. |
+| open | `boolean` | `false` | Whether the task's content is expanded. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the task via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` | Emitted with the new expanded state whenever the task opens or closes. |
+
+Slots: _default_
+
+### `<tolle-task-trigger>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-task-content>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the content via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-task-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `string` | `''` | Extra Tailwind classes merged onto the item via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-task-item-file>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | `string` | `'ri-file-line'` | Remixicon class for the leading file glyph. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the chip via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Textarea
+
+- Install: `npx @tolle_/cli add textarea`
+- Import: `import { TextareaComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-textarea>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | `any` | ``textarea-${Math.random().toString(36).substring(2, 9)}`` |  |
+| label | `string` | `''` |  |
+| placeholder | `string` | `''` |  |
+| hint | `string` | `''` |  |
+| errorMessage | `string` | `''` |  |
+| rows | `number` | `3` |  |
+| maxLength | `number` | — |  |
+| showCharacterCount | `boolean` | `false` |  |
+| autoGrow | `boolean` | `false` |  |
+| error | `boolean` | `false` |  |
+| className | `string` | `''` |  |
+| hideHintOnFocus | `boolean` | `true` |  |
+| hideCharacterCountOnFocus | `boolean` | `false` |  |
+| disabled | `boolean` | `false` |  |
+| readonly | `boolean` | `false` |  |
+
+## Time Picker
+
+- Install: `npx @tolle_/cli add time-picker`
+- Import: `import { TimeColumnsComponent, TimePickerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-time-columns>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| hour | `number | null` | `null` | Selected hour in 24-hour form, or `null` when nothing is chosen yet. |
+| minute | `number | null` | `null` | Selected minute, or `null` when nothing is chosen yet. |
+| second | `number | null` | `null` | Selected second, or `null` when nothing is chosen yet. |
+| use12Hours | `boolean` | `false` | Renders a 12-hour clock face with an AM/PM column. |
+| showSeconds | `boolean` | `false` | Adds the seconds column. |
+| minuteStep | `number` | `1` | Interval between minute entries, in minutes. |
+| secondStep | `number` | `1` | Interval between second entries, in seconds. |
+| minSeconds | `number` | `0` | Earliest selectable time, as seconds since midnight. |
+| maxSeconds | `any` | `SECONDS_PER_DAY - 1` | Latest selectable time, as seconds since midnight. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Row height and text size of the entries. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the column strip via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| timeChange | `TimeParts` | Emitted with the full wall-clock time whenever an entry is chosen. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `selected`: `true`, `false` (default `false`)
+
+### `<tolle-time-picker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placeholder | `string` | `'Select a time'` | Text shown on the trigger when no time is selected. |
+| disabled | `boolean` | `false` | Disables the control. |
+| use12Hours | `boolean` | `false` | Renders a 12-hour face with an AM/PM column. The emitted value stays 24-hour. |
+| showSeconds | `boolean` | `false` | Adds a seconds column and emits `HH:mm:ss`. |
+| minuteStep | `number` | `1` | Interval between minute entries, in minutes. |
+| secondStep | `number` | `1` | Interval between second entries, in seconds. |
+| min | `string` | — | Earliest selectable time as a 24-hour `HH:mm` string; earlier entries are disabled. |
+| max | `string` | — | Latest selectable time as a 24-hour `HH:mm` string; later entries are disabled. |
+| size | `'xs' | 'sm' | 'default' | 'lg'` | `'default'` | Height and text size of the trigger and entries. |
+| invalid | `boolean` | `false` | Applies the destructive border and focus ring. |
+| ariaLabel | `string` | `''` | Accessible name when there is no associated visible label. |
+| valueType | `'string' | 'date'` | `'string'` | Exchange `Date` objects instead of `HH:mm` strings through the form control. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `string | Date | null` | Emitted with the chosen time whenever it changes. |
+| opened | `void` | Emitted when the panel opens. |
+| closed | `void` | Emitted when the panel closes. |
+
+Variants:
+- `size`: `xs`, `sm`, `default`, `lg` (default `default`)
+- `invalid`: `true`, `false` (default `false`)
+
+## Toaster
+
+- Install: `npx @tolle_/cli add toaster`
+- Import: `import { ToastContainerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-toaster>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| position | `ToastPosition` | `'bottom-right'` |  |
+
+## Toggle
+
+- Install: `npx @tolle_/cli add toggle`
+- Import: `import { ToggleComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-toggle>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'default' | 'outline'` | `'default'` |  |
+| size | `'default' | 'sm' | 'lg'` | `'default'` |  |
+| disabled | `boolean` | `false` |  |
+| class | `string` | `''` |  |
+| pressed | `boolean` | `false` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| pressedChange | `boolean` |  |
+
+Slots: _default_
+
+Variants:
+- `variant`: `default`, `outline` (default `default`)
+- `size`: `default`, `sm`, `lg` (default `default`)
+
+## Toggle Group
+
+- Install: `npx @tolle_/cli add toggle-group`
+- Import: `import { ToggleGroupComponent, ToggleGroupItemComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-toggle-group>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| type | `'single' | 'multiple'` | `'single'` |  |
+| variant | `'default' | 'outline'` | `'default'` |  |
+| size | `'default' | 'sm' | 'lg'` | `'default'` |  |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| valueChange | `any` |  |
+
+Slots: _default_
+
+### `<tolle-toggle-group-item>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value (required) | `string` | — |  |
+| class | `string` | `''` |  |
+| disabled | `boolean` | `false` |  |
+
+Slots: _default_
+
+## Tolle Cell
+
+- Install: `npx @tolle_/cli add tolle-cell`
+- Import: `import { TolleCellDirective } from '@tolle_/tolle-ui';`
+
+### `<[tolleCell]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string` | — |  |
+
+## Tool
+
+- Install: `npx @tolle_/cli add tool`
+- Import: `import { ToolComponent, ToolHeaderComponent, ToolPayloadBase, ToolInputComponent, ToolOutputComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-tool>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| state | `ToolState` | `'pending'` | Lifecycle of the call, driving the header chip and border. |
+| open | `boolean` | `false` | Whether the call's input and output are expanded. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the tool via `cn()` (last-wins). |
+
+Outputs:
+
+| Name | Payload | Description |
+| --- | --- | --- |
+| openChange | `boolean` | Emitted with the new state whenever the call is expanded or collapsed. |
+
+Slots: _default_
+
+### `<tolle-tool-header>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string` | `''` | Name of the tool that was called. |
+| icon | `string` | `'ri-tools-line'` | Remixicon class shown before the tool name. |
+| stateLabelOverride | `string` | `''` | Overrides the chip text; defaults to a label derived from the state. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the header via `cn()` (last-wins). |
+| chipClassName | `string` | `''` | Extra Tailwind classes merged onto the state chip via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<ToolPayloadBase>` (directive)
+
+### `<tolle-tool-input>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| payload | `unknown` | `null` | Arguments passed to the tool; objects are pretty-printed as JSON. |
+| label | `string` | `'Parameters'` | Heading above the payload. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the panel via `cn()` (last-wins). |
+
+Slots: _default_
+
+### `<tolle-tool-output>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| payload | `unknown` | `null` | Result returned by the tool; objects are pretty-printed as JSON. |
+| label | `string` | `'Result'` | Heading above the payload. |
+| error | `boolean` | `false` | Styles the payload as a failure. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the panel via `cn()` (last-wins). |
+
+Slots: _default_
+
+## Tooltip
+
+- Install: `npx @tolle_/cli add tooltip`
+- Import: `import { TooltipDirective } from '@tolle_/tolle-ui';`
+
+### `<[tolleTooltip]>` (directive)
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| content | `string` | `''` |  |
+| placement | `'top' | 'bottom' | 'left' | 'right'` | `'top'` |  |
+
+## Tracker
+
+- Install: `npx @tolle_/cli add tracker`
+- Import: `import { TrackerComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-tracker>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| data | `TrackerBlock[]` | `[]` | One block per period, in chronological order. |
+| blockHeight | `number` | `32` | Height of each block in px. |
+| ariaLabel | `string` | `''` | Accessible name for the whole strip. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the strip via `cn()` (last-wins). |
+
+## Typography
+
+- Install: `npx @tolle_/cli add typography`
+- Import: `import { TypographyComponent } from '@tolle_/tolle-ui';`
+
+### `<tolle-typography>`
+
+Inputs:
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| variant | `'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'lead' | 'large' | 'small' | 'muted' | 'code'` | `'p'` | Type scale step; also selects the rendered HTML tag. |
+| class | `string` | `''` | Extra Tailwind classes merged onto the element via `cn()` (last-wins). |
+
+Slots: _default_
+
+Variants:
+- `variant`: `h1`, `h2`, `h3`, `h4`, `p`, `blockquote`, `lead`, `large`, `small`, `muted`, `code` (default `p`)
+