# Collet complete component API (0.6.1)

Generated from `packages/core/custom-elements.json` and `scripts/component-config.mjs`. Do not infer prop names. Attribute names are kebab-case; framework props are the exact camelCase conversion. Object/array props use property binding. Optional props use Rust defaults.

## Accordion (`<cx-accordion>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `mode` | `mode` | `'single' \| 'multiple'` | no | `Rust default` | Expansion behavior: 'single' (only one panel open) or 'multiple' (independent panels). Allowed values: `single`, `multiple`. Example: `'single'`. |
| `collapsible` | `collapsible` | `boolean` | no | `false` | Whether all panels can be collapsed (when false, one panel always remains open). Example: `true`. |
| `heading-level` | `headingLevel` | `'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | no | `Rust default` | HTML heading level (1–6) for the panel trigger elements. Allowed values: `h2`, `h3`, `h4`, `h5`, `h6`. Example: `'h2'`. |
| `default-expanded` | `defaultExpanded` | `number[]` | no | `Rust default` | Positional panel indices (0-based) to expand on initial render, passed as a number[] property. Example: [0, 2]. Example: `[0]`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `items` | `items` | `AccordionItem[]` | no | `Rust default` | Typed array of item data objects. Bind as a property; do not stringify it or use children for list items. Example: `[{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }]`. |
| `expanded` | `expanded` | `number[]` | no | `Rust default` | Controlled expanded state as a number[] property (for example [0, 2]). Updates on user interaction; never stringify it. Example: `[0, 2]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<AccordionDetail>` | Fires when the committed component value or state changes. Detail: `AccordionDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `expand(index: number): void` | Expands the panel at the given index. |
| `collapse(index: number): void` | Collapses the panel at the given index. |
| `toggle(index: number): void` | Toggles the panel at the given index. Respects single/multiple mode. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['accordion'] });
</script>
<cx-accordion id="example-accordion" label="Example label"></cx-accordion>
<script type="module">
  const element = document.querySelector('#example-accordion');
  element.items = [{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Accordion } from '@colletdev/react/accordion';

void init({ components: ['accordion'] });

export function Example() {
  return <Accordion label="Example label" items={[{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Accordion } from '@colletdev/vue/accordion';

void init({ components: ['accordion'] });
</script>

<template>
  <Accordion label="Example label" :items="[{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Accordion from '@colletdev/svelte/accordion';

  void init({ components: ['accordion'] });
</script>

<Accordion label="Example label" items={[{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxAccordion } from '@colletdev/angular/accordion';

void init({ components: ['accordion'] });

@Component({
  standalone: true,
  imports: [CxAccordion],
  template: `<cx-accordion label="Example label" [items]="[{ id: 'item-1', trigger_label: 'Section', panel_content: 'Content' }]"></cx-accordion>`,
})
export class Example {}
```

## ActivityGroup (`<cx-activity-group>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `status` | `status` | `'pending' \| 'done' \| 'error'` | no | `Rust default` | Current activity status indicator. Allowed values: `pending`, `done`, `error`. Example: `'pending'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `border` | `border` | `'auto' \| 'none'` | no | `Rust default` | Border treatment for the group. Allowed values: `auto`, `none`. Example: `'auto'`. |
| `summary` | `summary` | `string` | no | `""` | Short summary text displayed in the collapsed state. Example: `'example'`. |
| `action` | `action` | `'generic' \| 'read' \| 'write' \| 'edit' \| 'delete' \| 'search'` | no | `Rust default` | Which action this group represents — selects the leading icon. Allowed values: `generic`, `read`, `write`, `edit`, `delete`, `search`. Example: `'generic'`. |
| `expanded` | `expanded` | `boolean` | no | `false` | Whether the activity group is expanded to show all parts. Example: `true`. |
| `parts` | `parts` | `string[]` | no | `Rust default` | Array of activity parts. Each has type, content, and optional metadata. Example: `['item-1']`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<CollapsibleDetail>` | Fires when the committed component value or state changes. Detail: `CollapsibleDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Expands the activity group panel. |
| `close(): void` | Collapses the activity group panel. |
| `toggle(): void` | Toggles the activity group expanded state. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['activity-group'] });
</script>
<cx-activity-group id="example-activity-group" status="pending"></cx-activity-group>
<script type="module">
  const element = document.querySelector('#example-activity-group');
  element.parts = ['item-1'];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { ActivityGroup } from '@colletdev/react/activity-group';

void init({ components: ['activity-group'] });

export function Example() {
  return <ActivityGroup status="pending" parts={['item-1']} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { ActivityGroup } from '@colletdev/vue/activity-group';

void init({ components: ['activity-group'] });
</script>

<template>
  <ActivityGroup status="pending" :parts="['item-1']" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import ActivityGroup from '@colletdev/svelte/activity-group';

  void init({ components: ['activity-group'] });
</script>

<ActivityGroup status="pending" parts={['item-1']} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxActivityGroup } from '@colletdev/angular/activity-group';

void init({ components: ['activity-group'] });

@Component({
  standalone: true,
  imports: [CxActivityGroup],
  template: `<cx-activity-group status="pending" [parts]="['item-1']"></cx-activity-group>`,
})
export class Example {}
```

## Alert (`<cx-alert>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `title` | `title` | `string` | no | `""` | Title text. Example: `'Example title'`. |
| `description` | `description` | `string` | no | `""` | Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text. Example: `'Additional context'`. |
| `variant` | `variant` | `'subtle' \| 'filled' \| 'outline'` | no | `Rust default` | Visual style variant. Allowed values: `subtle`, `filled`, `outline`. Example: `'subtle'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `show-icon` | `showIcon` | `boolean` | no | `true` | Whether to display the intent icon (default: true). Example: `true`. |
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `dismissible` | `dismissible` | `boolean` | no | `false` | Whether the component can be dismissed by the user. Example: `true`. |
| `dismiss-label` | `dismissLabel` | `string` | no | `""` | Accessible label for the dismiss/close button. Example: `'example'`. |
| `compact` | `compact` | `boolean` | no | `false` | Reduced-padding variant for inline or dense layouts. Example: `true`. |
| `dynamic` | `dynamic` | `boolean` | no | `false` | Adds role="status" for live-region announcements. Example: `true`. |
| `actions-html` | `actionsHtml` | `string` | no | `""` | Pre-rendered HTML for action buttons (e.g. retry, undo). Example: `'example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-dismiss` | `onDismiss` | `CustomEvent<DismissDetail>` | Fires when the user dismisses the component. Detail: `DismissDetail`. |

### Slots

| Slot | Description |
|---|---|
| `actions` | Named slot for actions content |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['alert'] });
</script>
<cx-alert id="example-alert" title="Example title"></cx-alert>
<script type="module">
  const element = document.querySelector('#example-alert');
  element.addEventListener('cx-dismiss', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Alert } from '@colletdev/react/alert';

void init({ components: ['alert'] });

export function Example() {
  return <Alert title="Example title" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Alert } from '@colletdev/vue/alert';

void init({ components: ['alert'] });
</script>

<template>
  <Alert title="Example title" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Alert from '@colletdev/svelte/alert';

  void init({ components: ['alert'] });
</script>

<Alert title="Example title" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxAlert } from '@colletdev/angular/alert';

void init({ components: ['alert'] });

@Component({
  standalone: true,
  imports: [CxAlert],
  template: `<cx-alert title="Example title"></cx-alert>`,
})
export class Example {}
```

## Autocomplete (`<cx-autocomplete>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `mode` | `mode` | `'single' \| 'multiple'` | no | `Rust default` | 'single' for single select, 'multiple' for multi-select with chips. Allowed values: `single`, `multiple`. Example: `'single'`. |
| `selected` | `selected` | `string[]` | no | `Rust default` | Currently selected item ID(s). Example: `['item-1']`. |
| `query` | `query` | `string` | no | `""` | Current search query text. Controlled by onInput events. Example: `'example'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text shown when empty. Example: `'Enter a value'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `readonly` | `readonly` | `boolean` | no | `false` | Makes the component read-only. Example: `true`. |
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `allow-custom` | `allowCustom` | `boolean` | no | `false` | When true, user can submit values not in the items list. Example: `true`. |
| `clearable` | `clearable` | `boolean` | no | `false` | Whether a clear button appears when the field has a value. Example: `true`. |
| `items` | `items` | `SelectOption[]` | no | `Rust default` | Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. Example: `[{ value: 'a', label: 'Option A' }]`. |
| `groups` | `groups` | `OptionGroup[]` | no | `Rust default` | Typed array of grouped item data. Bind as a property; do not stringify it or use children for groups. Example: `[{ label: 'Group', options: [{ value: 'a', label: 'Option A' }] }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-change` | `onChange` | `CustomEvent<SelectDetail>` | Fires when the committed component value or state changes. Detail: `SelectDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the suggestion dropdown. |
| `close(): void` | Closes the suggestion dropdown. |
| `clear(): void` | Clears all selections (multi-mode) or the input (single-mode). |
| `focus(): void` | Focuses the search input. |
| `getValue(): string | string[]` | Returns the current selection. A single string in single mode, a string array in `mode="multiple"` — matching the shape of `cx-change`'s `detail.value`. |
| `setValue(value: string | string[]): void` | Sets the selection programmatically. Accepts an array in `mode="multiple"`. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['autocomplete'] });
</script>
<cx-autocomplete id="example-autocomplete" label="Example label" variant="outline"></cx-autocomplete>
<script type="module">
  const element = document.querySelector('#example-autocomplete');
  element.items = [{ value: 'a', label: 'Option A' }];
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Autocomplete } from '@colletdev/react/autocomplete';

void init({ components: ['autocomplete'] });

export function Example() {
  return <Autocomplete label="Example label" variant="outline" items={[{ value: 'a', label: 'Option A' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Autocomplete } from '@colletdev/vue/autocomplete';

void init({ components: ['autocomplete'] });
</script>

<template>
  <Autocomplete label="Example label" variant="outline" :items="[{ value: 'a', label: 'Option A' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Autocomplete from '@colletdev/svelte/autocomplete';

  void init({ components: ['autocomplete'] });
</script>

<Autocomplete label="Example label" variant="outline" items={[{ value: 'a', label: 'Option A' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxAutocomplete } from '@colletdev/angular/autocomplete';

void init({ components: ['autocomplete'] });

@Component({
  standalone: true,
  imports: [CxAutocomplete],
  template: `<cx-autocomplete label="Example label" variant="outline" [items]="[{ value: 'a', label: 'Option A' }]"></cx-autocomplete>`,
})
export class Example {}
```

## Avatar (`<cx-avatar>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `shape` | `shape` | `'circle' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `circle`, `rounded`. Example: `'circle'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `image` | `image` | `string` | no | `""` | URL of the image to display. Example: `'example'`. |
| `initials` | `initials` | `string` | no | `""` | Fallback initials displayed when no image is available or while loading. Example: `'example'`. |
| `clickable` | `clickable` | `boolean` | no | `false` | Makes the avatar a clickable button with hover and focus styles. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['avatar'] });
</script>
<cx-avatar id="example-avatar" label="Example label"></cx-avatar>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Avatar } from '@colletdev/react/avatar';

void init({ components: ['avatar'] });

export function Example() {
  return <Avatar label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Avatar } from '@colletdev/vue/avatar';

void init({ components: ['avatar'] });
</script>

<template>
  <Avatar label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Avatar from '@colletdev/svelte/avatar';

  void init({ components: ['avatar'] });
</script>

<Avatar label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxAvatar } from '@colletdev/angular/avatar';

void init({ components: ['avatar'] });

@Component({
  standalone: true,
  imports: [CxAvatar],
  template: `<cx-avatar label="Example label"></cx-avatar>`,
})
export class Example {}
```

## Backdrop (`<cx-backdrop>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `tint` | `tint` | `'none' \| 'light' \| 'medium' \| 'heavy'` | no | `Rust default` | Darkness of the tint overlay. Allowed values: `none`, `light`, `medium`, `heavy`. Example: `'none'`. |
| `blur` | `blur` | `'none' \| 'sm' \| 'md' \| 'lg'` | no | `Rust default` | Backdrop blur intensity. Allowed values: `none`, `sm`, `md`, `lg`. Example: `'none'`. |
| `dismissible` | `dismissible` | `boolean` | no | `false` | Whether the component can be dismissed by the user. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['backdrop'] });
</script>
<cx-backdrop id="example-backdrop" tint="none"></cx-backdrop>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Backdrop } from '@colletdev/react/backdrop';

void init({ components: ['backdrop'] });

export function Example() {
  return <Backdrop tint="none" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Backdrop } from '@colletdev/vue/backdrop';

void init({ components: ['backdrop'] });
</script>

<template>
  <Backdrop tint="none" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Backdrop from '@colletdev/svelte/backdrop';

  void init({ components: ['backdrop'] });
</script>

<Backdrop tint="none" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxBackdrop } from '@colletdev/angular/backdrop';

void init({ components: ['backdrop'] });

@Component({
  standalone: true,
  imports: [CxBackdrop],
  template: `<cx-backdrop tint="none"></cx-backdrop>`,
})
export class Example {}
```

## Badge (`<cx-badge>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'filled' \| 'outline' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `outline`, `ghost`. Example: `'filled'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `dot` | `dot` | `boolean` | no | `false` | Dot-only mode — renders a small colored indicator with no text. Example: `true`. |
| `dismissible` | `dismissible` | `boolean` | no | `false` | Whether the component can be dismissed by the user. Example: `true`. |
| `dismiss-label` | `dismissLabel` | `string` | no | `""` | Accessible label for the dismiss button (shown when dismissible is true). Example: `'example'`. |
| `dynamic` | `dynamic` | `boolean` | no | `false` | Adds role="status" and aria-live="polite" for live-region announcements. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-dismiss` | `onDismiss` | `CustomEvent<DismissDetail>` | Fires when the user dismisses the component. Detail: `DismissDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['badge'] });
</script>
<cx-badge id="example-badge" label="Example label"></cx-badge>
<script type="module">
  const element = document.querySelector('#example-badge');
  element.addEventListener('cx-dismiss', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Badge } from '@colletdev/react/badge';

void init({ components: ['badge'] });

export function Example() {
  return <Badge label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Badge } from '@colletdev/vue/badge';

void init({ components: ['badge'] });
</script>

<template>
  <Badge label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Badge from '@colletdev/svelte/badge';

  void init({ components: ['badge'] });
</script>

<Badge label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxBadge } from '@colletdev/angular/badge';

void init({ components: ['badge'] });

@Component({
  standalone: true,
  imports: [CxBadge],
  template: `<cx-badge label="Example label"></cx-badge>`,
})
export class Example {}
```

## Breadcrumb (`<cx-breadcrumb>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `separator` | `separator` | `string` | no | `""` | Custom separator character or HTML between breadcrumb items (default: "/"). Example: `'example'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `nav-label` | `navLabel` | `string` | no | `""` | Accessible label for the <nav> element (default: "Breadcrumb"). Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `items` | `items` | `BreadcrumbItem[]` | no | `Rust default` | Typed array of item data objects. Bind as a property; do not stringify it or use children for list items. Example: `[{ label: 'Home', href: '/' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-navigate` | `onNavigate` | `CustomEvent<NavigateDetail>` | Fires when the user activates a navigation item. Detail: `NavigateDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['breadcrumb'] });
</script>
<cx-breadcrumb id="example-breadcrumb" separator="example"></cx-breadcrumb>
<script type="module">
  const element = document.querySelector('#example-breadcrumb');
  element.items = [{ label: 'Home', href: '/' }];
  element.addEventListener('cx-navigate', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Breadcrumb } from '@colletdev/react/breadcrumb';

void init({ components: ['breadcrumb'] });

export function Example() {
  return <Breadcrumb separator="example" items={[{ label: 'Home', href: '/' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Breadcrumb } from '@colletdev/vue/breadcrumb';

void init({ components: ['breadcrumb'] });
</script>

<template>
  <Breadcrumb separator="example" :items="[{ label: 'Home', href: '/' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Breadcrumb from '@colletdev/svelte/breadcrumb';

  void init({ components: ['breadcrumb'] });
</script>

<Breadcrumb separator="example" items={[{ label: 'Home', href: '/' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxBreadcrumb } from '@colletdev/angular/breadcrumb';

void init({ components: ['breadcrumb'] });

@Component({
  standalone: true,
  imports: [CxBreadcrumb],
  template: `<cx-breadcrumb separator="example" [items]="[{ label: 'Home', href: '/' }]"></cx-breadcrumb>`,
})
export class Example {}
```

## Button (`<cx-button>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'filled' \| 'ghost' \| 'outline' \| 'underline' \| 'side-indicator'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `ghost`, `outline`, `underline`, `side-indicator`. Example: `'filled'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `icon-leading` | `iconLeading` | `string` | no | `""` | Icon displayed before the label text. Example: `'example'`. |
| `icon-trailing` | `iconTrailing` | `string` | no | `""` | Icon displayed after the label text. Example: `'example'`. |
| `icon-only` | `iconOnly` | `string` | no | `""` | Icon-only mode — renders a square button with the icon and an accessible aria-label. Example: `'trash'`. |
| `aria-label` | `ariaLabel` | `string` | no | `""` | Accessible label for screen readers when no visible label is present. Example: `'Delete item'`. |
| `kind` | `kind` | `'button' \| 'submit' \| 'toggle' \| 'link'` | no | `Rust default` | Semantic HTML element: 'button' (default), 'submit', 'reset', or 'link'. Allowed values: `button`, `submit`, `toggle`, `link`. Example: `'button'`. |
| `pressed` | `pressed` | `boolean` | no | `false` | Tri-state toggle pressed state (true/false/'mixed'). Adds aria-pressed. Example: `true`. |
| `href` | `href` | `string` | no | `""` | URL for link-mode buttons (kind='link'). Renders an <a> element. Example: `'/example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-click` | `onClick` | `CustomEvent<ClickDetail>` | Fires when the user activates the component. Detail: `ClickDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['button'] });
</script>
<cx-button id="example-button" label="Example label"></cx-button>
<script type="module">
  const element = document.querySelector('#example-button');
  element.addEventListener('cx-click', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Button } from '@colletdev/react/button';

void init({ components: ['button'] });

export function Example() {
  return <Button label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Button } from '@colletdev/vue/button';

void init({ components: ['button'] });
</script>

<template>
  <Button label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Button from '@colletdev/svelte/button';

  void init({ components: ['button'] });
</script>

<Button label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxButton } from '@colletdev/angular/button';

void init({ components: ['button'] });

@Component({
  standalone: true,
  imports: [CxButton],
  template: `<cx-button label="Example label"></cx-button>`,
})
export class Example {}
```

## Card (`<cx-card>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'elevated' \| 'outline' \| 'outlined' \| 'filled'` | no | `Rust default` | Visual style variant. Allowed values: `elevated`, `outline`, `outlined`, `filled`. Example: `'elevated'`. |
| `shape` | `shape` | `'rounded' \| 'sharp' \| 'soft'` | no | `Rust default` | Corner radius style. Allowed values: `rounded`, `sharp`, `soft`. Example: `'rounded'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `clickable` | `clickable` | `boolean` | no | `false` | Makes the entire card a clickable surface with hover and focus styles. Example: `true`. |
| `texture` | `texture` | `boolean` | no | `false` | Enables a grain overlay texture on the card surface. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-click` | `onClick` | `CustomEvent<ClickDetail>` | Fires when the user activates the component. Detail: `ClickDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to body) |
| `header` | Named slot for header content |
| `footer` | Named slot for footer content |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['card'] });
</script>
<cx-card id="example-card" label="Example label"></cx-card>
<script type="module">
  const element = document.querySelector('#example-card');
  element.addEventListener('cx-click', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Card } from '@colletdev/react/card';

void init({ components: ['card'] });

export function Example() {
  return <Card label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Card } from '@colletdev/vue/card';

void init({ components: ['card'] });
</script>

<template>
  <Card label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Card from '@colletdev/svelte/card';

  void init({ components: ['card'] });
</script>

<Card label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxCard } from '@colletdev/angular/card';

void init({ components: ['card'] });

@Component({
  standalone: true,
  imports: [CxCard],
  template: `<cx-card label="Example label"></cx-card>`,
})
export class Example {}
```

## Carousel (`<cx-carousel>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'editorial' \| 'card'` | no | `Rust default` | Visual style variant. Allowed values: `editorial`, `card`. Example: `'editorial'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `slides` | `slides` | `CarouselSlide[]` | no | `Rust default` | Array of slide objects. Each has content HTML and optional alt text. Example: `[{ title: 'Welcome', subtitle: 'Introduction' }]`. |
| `autoplay` | `autoplay` | `'off' \| 'on'` | no | `Rust default` | Enables automatic slide advancement. Allowed values: `off`, `on`. Example: `'off'`. |
| `autoplay-interval` | `autoplayInterval` | `number` | no | `0` | Auto-play interval in milliseconds (default: 5000). Example: `1`. |
| `loop-mode` | `loopMode` | `boolean` | no | `true` | Whether the carousel wraps around: advancing past the last slide returns to the first. Example: `true`. |
| `motion-blur` | `motionBlur` | `boolean` | no | `true` | Enables a motion blur effect during slide transitions. Example: `true`. |
| `custom-cursor` | `customCursor` | `boolean` | no | `true` | Enables a custom drag cursor during swipe gestures. Example: `true`. |
| `indicator` | `indicator` | `'dot' \| 'sharp' \| 'rounded' \| 'none'` | no | `Rust default` | Style of the slide position indicators (dots, lines, fraction). Allowed values: `dot`, `sharp`, `rounded`, `none`. Example: `'dot'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<CarouselDetail>` | Fires when the committed component value or state changes. Detail: `CarouselDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `next(): void` | Advances to the next slide. |
| `prev(): void` | Returns to the previous slide. |
| `goTo(index: number): void` | Navigates to the slide at the given index. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['carousel'] });
</script>
<cx-carousel id="example-carousel" label="Example label"></cx-carousel>
<script type="module">
  const element = document.querySelector('#example-carousel');
  element.slides = [{ title: 'Welcome', subtitle: 'Introduction' }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Carousel } from '@colletdev/react/carousel';

void init({ components: ['carousel'] });

export function Example() {
  return <Carousel label="Example label" slides={[{ title: 'Welcome', subtitle: 'Introduction' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Carousel } from '@colletdev/vue/carousel';

void init({ components: ['carousel'] });
</script>

<template>
  <Carousel label="Example label" :slides="[{ title: 'Welcome', subtitle: 'Introduction' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Carousel from '@colletdev/svelte/carousel';

  void init({ components: ['carousel'] });
</script>

<Carousel label="Example label" slides={[{ title: 'Welcome', subtitle: 'Introduction' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxCarousel } from '@colletdev/angular/carousel';

void init({ components: ['carousel'] });

@Component({
  standalone: true,
  imports: [CxCarousel],
  template: `<cx-carousel label="Example label" [slides]="[{ title: 'Welcome', subtitle: 'Introduction' }]"></cx-carousel>`,
})
export class Example {}
```

## Chat (`<cx-chat>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `layout` | `layout` | `'standard' \| 'compact' \| 'fullscreen'` | no | `Rust default` | Chat layout variant. Allowed values: `standard`, `compact`, `fullscreen`. Example: `'standard'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `height` | `height` | `string` | no | `""` | Fixed height for the chat container. Accepts "fill" (grow to fill the flex parent), a Tailwind height class (e.g. "h-[600px]", "h-96"), or a raw CSS length (e.g. "520px", "50vh"). Defaults to "h-[600px]". Example: `'h-[600px]'`. |
| `scrollbar-shape` | `scrollbarShape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Shape variant for the chat scrollbar. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `scrollbar-track` | `scrollbarTrack` | `'with-track' \| 'floating'` | no | `Rust default` | Scrollbar track treatment in the chat area: a visible track gutter, or a floating thumb. Allowed values: `with-track`, `floating`. Example: `'with-track'`. |
| `turns` | `turns` | `ChatTurn[]` | no | `Rust default` | Array of chat turn objects representing the conversation. Example: `[{ html: '<p>Hello</p>' }]`. |
| `typing` | `typing` | `'' \| 'typing'` | no | `Rust default` | Typing indicator state. Set to `typing` to show it (with `typingSender`); empty string hides it. Allowed values: ``, `typing`. Example: `'typing'`. |
| `typing-sender` | `typingSender` | `string` | no | `""` | Display name of the sender currently typing. Example: `'example'`. |
| `input-shape` | `inputShape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Shape variant for the chat input field. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `input-placeholder` | `inputPlaceholder` | `string` | no | `""` | Placeholder text for the chat input field. Example: `'example'`. |
| `input-disabled` | `inputDisabled` | `boolean` | no | `false` | Whether the chat input is disabled. Example: `true`. |
| `input-max-length` | `inputMaxLength` | `number` | no | `0` | Maximum character count for the chat input. Example: `1`. |
| `show-action-button` | `showActionButton` | `boolean` | no | `true` | Whether to display the secondary action button in the input. Example: `true`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `input-label` | `inputLabel` | `string` | no | `""` | Accessible label for the chat input field. Example: `'example'`. |
| `submit-label` | `submitLabel` | `string` | no | `""` | Accessible label for the submit/send button. Example: `'example'`. |
| `empty-state` | `emptyState` | `string` | no | `""` | Content displayed when the chat has no messages. Example: `'example'`. |
| `accept-files` | `acceptFiles` | `boolean` | no | `false` | Whether to show the file attachment button in the input. Example: `true`. |
| `accept` | `accept` | `string` | no | `""` | Accepted file types for the attachment button (MIME types or extensions). Example: `'image/*,.pdf'`. |
| `max-file-size` | `maxFileSize` | `number` | no | `0` | Maximum file size in bytes for attachments. Example: `1`. |
| `multiple-files` | `multipleFiles` | `boolean` | no | `false` | Whether multiple file selection is allowed for attachments. Example: `true`. |
| `input-submitting` | `inputSubmitting` | `boolean` | no | `false` | Whether a message is currently being submitted. Disables the send button. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-submit` | `onSubmit` | `CustomEvent<ChatSubmitDetail>` | Fires when the user submits the current value. Detail: `ChatSubmitDetail`. |
| `cx-file-add` | `onFileAdd` | `CustomEvent<FileAddDetail>` | Fires after files are accepted for attachment. Detail: `FileAddDetail`. |
| `cx-file-remove` | `onFileRemove` | `CustomEvent<FileRemoveDetail>` | Fires after an attachment is removed. Detail: `FileRemoveDetail`. |
| `cx-file-reject` | `onFileReject` | `CustomEvent<FileRejectDetail>` | Fires when files fail attachment validation. Detail: `FileRejectDetail`. |
| `cx-scroll-end` | `onScrollEnd` | `CustomEvent<ScrollEndDetail>` | Fires when the scroll container reaches its end. Detail: `ScrollEndDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| `header` | Named slot for header content |
| `footer` | Named slot for footer content |

### Methods

| Method | Description |
|---|---|
| `addMessage(html: string, opts?: { id?: string }): string` | Adds a pre-rendered HTML turn to the chat (low-level). Prefer addUserMessage/addAssistantMessage. Returns the turn ID. |
| `addUserMessage(content: string, opts?: BubbleOptions): void` | Adds a user message. Renders via WASM automatically. |
| `addAssistantMessage(content: string, opts?: BubbleOptions): void` | Adds an assistant message. Renders via WASM automatically. |
| `addGroupMessage(role: "user" | "assistant", parts: GroupPart[], opts?: GroupOptions): void` | Adds a multi-part grouped message (text + code, etc.). |
| `addActivity(opts?: ActivityOptions): void` | Adds a tool activity group (search, read, write, etc.). |
| `scrollToBottom(): void` | Scrolls the message area to the bottom. |
| `clear(): void` | Clears all messages from the chat. |
| `focus(): void` | Focuses the chat input textarea. |
| `getValue(): string` | Returns the current input textarea value. |
| `setValue(value: string): void` | Sets the input textarea value programmatically. |
| `startStreamingTurn(role?: "user" | "assistant", opts?: { id?: string; senderName?: string; size?: string }): StreamHandle` | Starts a streaming assistant turn. Returns a handle with appendTokens() and end(). |
| `removeMessage(id: string): boolean` | Removes a message by turn ID. |
| `updateMessage(id: string, html: string): boolean` | Updates a message's HTML by turn ID. |
| `addFiles(files: FileList): void` | Adds files programmatically to the chat input. |
| `clearAttachments(): void` | Removes all file attachments from the chat input. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['chat'] });
</script>
<cx-chat id="example-chat" shape="sharp"></cx-chat>
<script type="module">
  const element = document.querySelector('#example-chat');
  element.turns = [{ html: '<p>Hello</p>' }];
  element.addEventListener('cx-submit', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Chat } from '@colletdev/react/chat';

void init({ components: ['chat'] });

export function Example() {
  return <Chat shape="sharp" turns={[{ html: '<p>Hello</p>' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Chat } from '@colletdev/vue/chat';

void init({ components: ['chat'] });
</script>

<template>
  <Chat shape="sharp" :turns="[{ html: '<p>Hello</p>' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Chat from '@colletdev/svelte/chat';

  void init({ components: ['chat'] });
</script>

<Chat shape="sharp" turns={[{ html: '<p>Hello</p>' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxChat } from '@colletdev/angular/chat';

void init({ components: ['chat'] });

@Component({
  standalone: true,
  imports: [CxChat],
  template: `<cx-chat shape="sharp" [turns]="[{ html: '<p>Hello</p>' }]"></cx-chat>`,
})
export class Example {}
```

## ChatInput (`<cx-chat-input>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text shown when empty. Example: `'Enter a value'`. |
| `value` | `value` | `string` | no | `""` | Current value of the component. Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `max-rows` | `maxRows` | `number` | no | `0` | Maximum number of visible rows before the input scrolls. Example: `1`. |
| `show-action-button` | `showActionButton` | `boolean` | no | `true` | Whether to display the secondary action button. Example: `true`. |
| `action-label` | `actionLabel` | `string` | no | `""` | Accessible label for the secondary action button. Example: `'example'`. |
| `submit-label` | `submitLabel` | `string` | no | `""` | Accessible label for the submit/send button. Example: `'example'`. |
| `label` | `label` | `string` | no | `""` | Visible or screen-reader label for the message field. May be omitted only when ariaLabel supplies the accessible name. Example: `'Example label'`. |
| `max-length` | `maxLength` | `number` | no | `0` | Maximum character count. Displays a character counter when set. Example: `1`. |
| `accept-files` | `acceptFiles` | `boolean` | no | `false` | Whether to show the file attachment button. Example: `true`. |
| `accept` | `accept` | `string` | no | `""` | Accepted file types for the attachment button (MIME types or extensions). Example: `'image/*,.pdf'`. |
| `max-file-size` | `maxFileSize` | `number` | no | `0` | Maximum file size in bytes for attachments. Example: `1`. |
| `multiple-files` | `multipleFiles` | `boolean` | no | `false` | Whether multiple file selection is allowed for attachments. Example: `true`. |
| `submitting` | `submitting` | `boolean` | no | `false` | Whether a message is currently being submitted. Disables the send button and shows a loading state. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |
| `cx-submit` | `onSubmit` | `CustomEvent<ChatSubmitDetail>` | Fires when the user submits the current value. Detail: `ChatSubmitDetail`. |
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-file-add` | `onFileAdd` | `CustomEvent<FileAddDetail>` | Fires after files are accepted for attachment. Detail: `FileAddDetail`. |
| `cx-file-remove` | `onFileRemove` | `CustomEvent<FileRemoveDetail>` | Fires after an attachment is removed. Detail: `FileRemoveDetail`. |
| `cx-file-reject` | `onFileReject` | `CustomEvent<FileRejectDetail>` | Fires when files fail attachment validation. Detail: `FileRejectDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the textarea. |
| `getValue(): string` | Returns the current textarea value. |
| `setValue(value: string): void` | Sets the textarea value programmatically. |
| `addFiles(files: FileList): void` | Adds files programmatically to the attachment tray. |
| `getAttachments(): FileInfo[]` | Returns current attachments as FileInfo[]. |
| `clearAttachments(): void` | Removes all file attachments. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['chat-input'] });
</script>
<cx-chat-input id="example-chat-input" shape="sharp"></cx-chat-input>
<script type="module">
  const element = document.querySelector('#example-chat-input');
  element.addEventListener('cx-focus', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { ChatInput } from '@colletdev/react/chat-input';

void init({ components: ['chat-input'] });

export function Example() {
  return <ChatInput shape="sharp" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { ChatInput } from '@colletdev/vue/chat-input';

void init({ components: ['chat-input'] });
</script>

<template>
  <ChatInput shape="sharp" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import ChatInput from '@colletdev/svelte/chat-input';

  void init({ components: ['chat-input'] });
</script>

<ChatInput shape="sharp" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxChatInput } from '@colletdev/angular/chat-input';

void init({ components: ['chat-input'] });

@Component({
  standalone: true,
  imports: [CxChatInput],
  template: `<cx-chat-input shape="sharp"></cx-chat-input>`,
})
export class Example {}
```

## Checkbox (`<cx-checkbox>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `checked` | `checked` | `boolean \| '' \| 'checked' \| 'indeterminate'` | no | `Rust default` | Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. Allowed values: ``, `checked`, `indeterminate`. Example: `'checked'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `unlabeled` | `unlabeled` | `boolean` | no | `false` | Renders the input without a visible label (still requires aria-label). Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<CheckedDetail>` | Fires on each user edit before the value is committed. Detail: `CheckedDetail`. |
| `cx-change` | `onChange` | `CustomEvent<CheckedDetail>` | Fires when the committed component value or state changes. Detail: `CheckedDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the checkbox input. |
| `getValue(): string` | Returns the current checked state as a string. |
| `setValue(value: string): void` | Sets the checked state programmatically. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['checkbox'] });
</script>
<cx-checkbox id="example-checkbox" label="Example label" shape="sharp"></cx-checkbox>
<script type="module">
  const element = document.querySelector('#example-checkbox');
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Checkbox } from '@colletdev/react/checkbox';

void init({ components: ['checkbox'] });

export function Example() {
  return <Checkbox label="Example label" shape="sharp" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Checkbox } from '@colletdev/vue/checkbox';

void init({ components: ['checkbox'] });
</script>

<template>
  <Checkbox label="Example label" shape="sharp" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Checkbox from '@colletdev/svelte/checkbox';

  void init({ components: ['checkbox'] });
</script>

<Checkbox label="Example label" shape="sharp" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxCheckbox } from '@colletdev/angular/checkbox';

void init({ components: ['checkbox'] });

@Component({
  standalone: true,
  imports: [CxCheckbox],
  template: `<cx-checkbox label="Example label" shape="sharp"></cx-checkbox>`,
})
export class Example {}
```

## CodeBlock (`<cx-code-block>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `content` | `content` | `string` | no | `""` | Text content to display. Example: `'Example content'`. |
| `variant` | `variant` | `'default' \| 'minimal'` | no | `Rust default` | Visual style variant. Allowed values: `default`, `minimal`. Example: `'default'`. |
| `shape` | `shape` | `'rounded' \| 'sharp'` | no | `Rust default` | Corner radius style. Allowed values: `rounded`, `sharp`. Example: `'rounded'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `language` | `language` | `string` | no | `""` | Programming language for syntax highlighting. Example: `'example'`. |
| `filename` | `filename` | `string` | no | `""` | Name of the file displayed in the header. Example: `'example.rs'`. |
| `line-numbers` | `lineNumbers` | `boolean` | no | `true` | Whether to display line numbers in the gutter. Example: `true`. |
| `copy-button` | `copyButton` | `boolean` | no | `true` | Whether to show a copy-to-clipboard button. Example: `true`. |
| `traffic-lights` | `trafficLights` | `boolean` | no | `true` | Enables macOS-style traffic light dots in the header. Example: `true`. |
| `slotted` | `slotted` | `boolean` | no | `false` | Emits `<slot>` elements for Shadow DOM content projection. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['code-block'] });
</script>
<cx-code-block id="example-code-block" content="Example content"></cx-code-block>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { CodeBlock } from '@colletdev/react/code-block';

void init({ components: ['code-block'] });

export function Example() {
  return <CodeBlock content="Example content" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { CodeBlock } from '@colletdev/vue/code-block';

void init({ components: ['code-block'] });
</script>

<template>
  <CodeBlock content="Example content" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import CodeBlock from '@colletdev/svelte/code-block';

  void init({ components: ['code-block'] });
</script>

<CodeBlock content="Example content" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxCodeBlock } from '@colletdev/angular/code-block';

void init({ components: ['code-block'] });

@Component({
  standalone: true,
  imports: [CxCodeBlock],
  template: `<cx-code-block content="Example content"></cx-code-block>`,
})
export class Example {}
```

## Collapsible (`<cx-collapsible>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `trigger-html` | `triggerHtml` | `string` | no | `""` | Pre-rendered HTML for the trigger element that toggles the panel. Example: `'example'`. |
| `open` | `open` | `boolean` | no | `false` | Whether the collapsible panel is expanded. Example: `true`. |
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `no-icon` | `noIcon` | `boolean` | no | `false` | Hides the expand/collapse chevron icon. Example: `true`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<CollapsibleDetail>` | Fires when the committed component value or state changes. Detail: `CollapsibleDetail`. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to content) |
| `trigger` | Named slot for trigger content |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Expands the collapsible content. |
| `close(): void` | Collapses the content. |
| `toggle(): void` | Toggles the collapsible state. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['collapsible'] });
</script>
<cx-collapsible id="example-collapsible" label="Example label"></cx-collapsible>
<script type="module">
  const element = document.querySelector('#example-collapsible');
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Collapsible } from '@colletdev/react/collapsible';

void init({ components: ['collapsible'] });

export function Example() {
  return <Collapsible label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Collapsible } from '@colletdev/vue/collapsible';

void init({ components: ['collapsible'] });
</script>

<template>
  <Collapsible label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Collapsible from '@colletdev/svelte/collapsible';

  void init({ components: ['collapsible'] });
</script>

<Collapsible label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxCollapsible } from '@colletdev/angular/collapsible';

void init({ components: ['collapsible'] });

@Component({
  standalone: true,
  imports: [CxCollapsible],
  template: `<cx-collapsible label="Example label"></cx-collapsible>`,
})
export class Example {}
```

## CommandPalette (`<cx-command-palette>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text for the search input. Example: `'Enter a value'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `groups` | `groups` | `CxCommandGroup[]` | no | `Rust default` | Array of command groups. Each group has a label and array of items with id, label, optional icon/shortcut/description/disabled/href. Example: `[{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }]`. |
| `open` | `open` | `boolean` | no | `false` | Boolean. When set, opens the palette as a modal dialog. Remove to close. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-close` | `onClose` | `CustomEvent<CloseDetail>` | Fires when the component closes. Detail: `CloseDetail`. |
| `cx-select` | `onSelect` | `CustomEvent<CommandSelectDetail>` | Fires when the user selects an item or data node. Detail: `CommandSelectDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the command palette as a modal dialog. |
| `close(): void` | Closes the command palette. |
| `toggle(): void` | Toggles the command palette open/closed. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['command-palette'] });
</script>
<cx-command-palette id="example-command-palette" placeholder="Enter a value"></cx-command-palette>
<script type="module">
  const element = document.querySelector('#example-command-palette');
  element.groups = [{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }];
  element.addEventListener('cx-close', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { CommandPalette } from '@colletdev/react/command-palette';

void init({ components: ['command-palette'] });

export function Example() {
  return <CommandPalette placeholder="Enter a value" groups={[{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { CommandPalette } from '@colletdev/vue/command-palette';

void init({ components: ['command-palette'] });
</script>

<template>
  <CommandPalette placeholder="Enter a value" :groups="[{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import CommandPalette from '@colletdev/svelte/command-palette';

  void init({ components: ['command-palette'] });
</script>

<CommandPalette placeholder="Enter a value" groups={[{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxCommandPalette } from '@colletdev/angular/command-palette';

void init({ components: ['command-palette'] });

@Component({
  standalone: true,
  imports: [CxCommandPalette],
  template: `<cx-command-palette placeholder="Enter a value" [groups]="[{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }]"></cx-command-palette>`,
})
export class Example {}
```

## DatePicker (`<cx-date-picker>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `selected` | `selected` | `string` | no | `""` | Currently selected item ID(s). Example: `'example'`. |
| `min` | `min` | `string` | no | `""` | Earliest selectable date (ISO 8601 string). Example: `'example'`. |
| `max` | `max` | `string` | no | `""` | Latest selectable date (ISO 8601 string). Example: `'example'`. |
| `disabled-dates` | `disabledDates` | `string[]` | no | `Rust default` | Array of ISO date strings or date ranges to disable. Example: `['item-1']`. |
| `format` | `format` | `'iso' \| 'us-short' \| 'eu-short' \| 'eu-dot'` | no | `Rust default` | Date display format string. Allowed values: `iso`, `us-short`, `eu-short`, `eu-dot`. Example: `'iso'`. |
| `first-day` | `firstDay` | `'monday' \| 'sunday'` | no | `Rust default` | First day of the week (0=Sunday, 1=Monday, etc.). Allowed values: `monday`, `sunday`. Example: `'monday'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text shown when empty. Example: `'Enter a value'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `readonly` | `readonly` | `boolean` | no | `false` | Makes the component read-only. Example: `true`. |
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `viewing` | `viewing` | `string` | no | `""` | Currently displayed month/year (ISO string). Controls the calendar view without changing the selected value. Example: `'example'`. |
| `week-numbers` | `weekNumbers` | `boolean` | no | `false` | Whether to show ISO week numbers. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-change` | `onChange` | `CustomEvent<InputDetail>` | Fires when the committed component value or state changes. Detail: `InputDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the calendar panel. |
| `close(): void` | Closes the calendar panel. |
| `focus(): void` | Focuses the trigger button. |
| `getValue(): string` | Returns the current date value as ISO string. |
| `setValue(value: string): void` | Sets the date value programmatically (ISO format). |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['date-picker'] });
</script>
<cx-date-picker id="example-date-picker" label="Example label" variant="outline"></cx-date-picker>
<script type="module">
  const element = document.querySelector('#example-date-picker');
  element.disabledDates = ['item-1'];
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { DatePicker } from '@colletdev/react/date-picker';

void init({ components: ['date-picker'] });

export function Example() {
  return <DatePicker label="Example label" variant="outline" disabledDates={['item-1']} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { DatePicker } from '@colletdev/vue/date-picker';

void init({ components: ['date-picker'] });
</script>

<template>
  <DatePicker label="Example label" variant="outline" :disabledDates="['item-1']" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import DatePicker from '@colletdev/svelte/date-picker';

  void init({ components: ['date-picker'] });
</script>

<DatePicker label="Example label" variant="outline" disabledDates={['item-1']} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxDatePicker } from '@colletdev/angular/date-picker';

void init({ components: ['date-picker'] });

@Component({
  standalone: true,
  imports: [CxDatePicker],
  template: `<cx-date-picker label="Example label" variant="outline" [disabledDates]="['item-1']"></cx-date-picker>`,
})
export class Example {}
```

## Dialog (`<cx-dialog>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `title` | `title` | `string` | yes | `—` | Title text. Example: `'Example title'`. |
| `variant` | `variant` | `'standard' \| 'alert'` | no | `Rust default` | Visual style variant. Allowed values: `standard`, `alert`. Example: `'standard'`. |
| `description` | `description` | `string` | no | `""` | Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text. Example: `'Additional context'`. |
| `size` | `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | no | `Rust default` | Dialog width preset: sm, md (default), lg, xl, or full. Allowed values: `sm`, `md`, `lg`, `xl`, `full`. Example: `'sm'`. |
| `close-button` | `closeButton` | `boolean` | no | `Rust default` | Whether to render a close button. Example: `true`. |
| `drawer` | `drawer` | `'bottom' \| 'left' \| 'right' \| 'centered'` | no | `Rust default` | Renders the dialog as a drawer (slides in from an edge instead of centering). Allowed values: `bottom`, `left`, `right`, `centered`. Example: `'bottom'`. |
| `open` | `open` | `boolean` | no | `false` | Whether the component is in an open/expanded state. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-close` | `onClose` | `CustomEvent<CloseDetail>` | Fires when the component closes. Detail: `CloseDetail`. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to body) |
| `footer` | Named slot for footer content |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the dialog modal with entrance animation. |
| `close(): void` | Closes the dialog modal with exit animation. |
| `toggle(): void` | Toggles the dialog open/close state. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['dialog'] });
</script>
<cx-dialog id="example-dialog" title="Example title" variant="standard"></cx-dialog>
<script type="module">
  const element = document.querySelector('#example-dialog');
  element.addEventListener('cx-close', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Dialog } from '@colletdev/react/dialog';

void init({ components: ['dialog'] });

export function Example() {
  return <Dialog title="Example title" variant="standard" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Dialog } from '@colletdev/vue/dialog';

void init({ components: ['dialog'] });
</script>

<template>
  <Dialog title="Example title" variant="standard" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Dialog from '@colletdev/svelte/dialog';

  void init({ components: ['dialog'] });
</script>

<Dialog title="Example title" variant="standard" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxDialog } from '@colletdev/angular/dialog';

void init({ components: ['dialog'] });

@Component({
  standalone: true,
  imports: [CxDialog],
  template: `<cx-dialog title="Example title" variant="standard"></cx-dialog>`,
})
export class Example {}
```

## Drawer (`<cx-drawer>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `title` | `title` | `string` | yes | `—` | Title text. Example: `'Example title'`. |
| `description` | `description` | `string` | no | `""` | Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text. Example: `'Additional context'`. |
| `side` | `side` | `'left' \| 'right' \| 'top' \| 'bottom'` | no | `Rust default` | Which viewport edge the drawer slides from (left, right, top, bottom). Allowed values: `left`, `right`, `top`, `bottom`. Example: `'left'`. |
| `size` | `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | no | `Rust default` | Component size. Allowed values: `sm`, `md`, `lg`, `xl`, `full`. Example: `'sm'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `close-button` | `closeButton` | `boolean` | no | `Rust default` | Whether to render a close button. Example: `true`. |
| `open` | `open` | `boolean` | no | `false` | Whether the component is in an open/expanded state. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-close` | `onClose` | `CustomEvent<CloseDetail>` | Fires when the component closes. Detail: `CloseDetail`. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to body) |
| `footer` | Named slot for footer content |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the drawer panel with slide-in animation. |
| `close(): void` | Closes the drawer panel with slide-out animation. |
| `toggle(): void` | Toggles the drawer open/close state. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['drawer'] });
</script>
<cx-drawer id="example-drawer" title="Example title" description="Additional context"></cx-drawer>
<script type="module">
  const element = document.querySelector('#example-drawer');
  element.addEventListener('cx-close', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Drawer } from '@colletdev/react/drawer';

void init({ components: ['drawer'] });

export function Example() {
  return <Drawer title="Example title" description="Additional context" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Drawer } from '@colletdev/vue/drawer';

void init({ components: ['drawer'] });
</script>

<template>
  <Drawer title="Example title" description="Additional context" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Drawer from '@colletdev/svelte/drawer';

  void init({ components: ['drawer'] });
</script>

<Drawer title="Example title" description="Additional context" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxDrawer } from '@colletdev/angular/drawer';

void init({ components: ['drawer'] });

@Component({
  standalone: true,
  imports: [CxDrawer],
  template: `<cx-drawer title="Example title" description="Additional context"></cx-drawer>`,
})
export class Example {}
```

## Fab (`<cx-fab>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `aria-label` | `ariaLabel` | `string` | no | `""` | Accessible label for screen readers when no visible label is present. Example: `'example'`. |
| `variant` | `variant` | `'filled' \| 'outline' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `outline`, `ghost`. Example: `'filled'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `shape` | `shape` | `'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `rounded`, `pill`. Example: `'rounded'`. |
| `size` | `size` | `'sm' \| 'md' \| 'lg'` | no | `Rust default` | Component size. Allowed values: `sm`, `md`, `lg`. Example: `'sm'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `has-popup` | `hasPopup` | `boolean` | no | `false` | ARIA attribute indicating the FAB triggers a popup (e.g. menu or dialog). Example: `true`. |
| `expanded` | `expanded` | `boolean` | no | `false` | Whether the component is in an expanded state. Example: `true`. |
| `controls` | `controls` | `string` | no | `""` | ID of the element this FAB controls (aria-controls). Example: `'example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-click` | `onClick` | `CustomEvent<ClickDetail>` | Fires when the user activates the component. Detail: `ClickDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['fab'] });
</script>
<cx-fab id="example-fab" icon="example"></cx-fab>
<script type="module">
  const element = document.querySelector('#example-fab');
  element.addEventListener('cx-click', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Fab } from '@colletdev/react/fab';

void init({ components: ['fab'] });

export function Example() {
  return <Fab icon="example" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Fab } from '@colletdev/vue/fab';

void init({ components: ['fab'] });
</script>

<template>
  <Fab icon="example" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Fab from '@colletdev/svelte/fab';

  void init({ components: ['fab'] });
</script>

<Fab icon="example" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxFab } from '@colletdev/angular/fab';

void init({ components: ['fab'] });

@Component({
  standalone: true,
  imports: [CxFab],
  template: `<cx-fab icon="example"></cx-fab>`,
})
export class Example {}
```

## FileUpload (`<cx-file-upload>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `mode` | `mode` | `'inline' \| 'overlay'` | no | `Rust default` | Selection mode (single or multiple). Allowed values: `inline`, `overlay`. Example: `'inline'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'subtle'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `subtle`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `multiple` | `multiple` | `boolean` | no | `false` | Whether multiple file selection is allowed. Example: `true`. |
| `accept` | `accept` | `string` | no | `""` | Comma-separated list of accepted MIME types or extensions (e.g. "image/*,.pdf"). Example: `'image/*,.pdf'`. |
| `max-size` | `maxSize` | `number` | no | `Rust default` | Maximum file size in bytes. Example: `1`. |
| `heading` | `heading` | `string` | no | `""` | Heading text displayed in the drop zone. Example: `'example'`. |
| `browse-text` | `browseText` | `string` | no | `""` | Label text for the browse button. Example: `'example'`. |
| `hint` | `hint` | `string` | no | `""` | Helper text displayed below the component. Example: `'example'`. |
| `capture` | `capture` | `'user' \| 'environment'` | no | `Rust default` | Camera capture mode for mobile: 'user' (front) or 'environment' (back). Allowed values: `user`, `environment`. Example: `'user'`. |
| `preview` | `preview` | `boolean` | no | `false` | Whether to show file previews after selection. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<FileChangeDetail>` | Fires when the committed component value or state changes. Detail: `FileChangeDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['file-upload'] });
</script>
<cx-file-upload id="example-file-upload" label="Example label"></cx-file-upload>
<script type="module">
  const element = document.querySelector('#example-file-upload');
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { FileUpload } from '@colletdev/react/file-upload';

void init({ components: ['file-upload'] });

export function Example() {
  return <FileUpload label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { FileUpload } from '@colletdev/vue/file-upload';

void init({ components: ['file-upload'] });
</script>

<template>
  <FileUpload label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import FileUpload from '@colletdev/svelte/file-upload';

  void init({ components: ['file-upload'] });
</script>

<FileUpload label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxFileUpload } from '@colletdev/angular/file-upload';

void init({ components: ['file-upload'] });

@Component({
  standalone: true,
  imports: [CxFileUpload],
  template: `<cx-file-upload label="Example label"></cx-file-upload>`,
})
export class Example {}
```

## Flavour (`<cx-flavour>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `preset` | `preset` | `'matte' \| 'aurora' \| 'gloss' \| 'grain' \| 'paper' \| 'linen' \| 'neon' \| 'blueprint' \| 'film'` | no | `Rust default` | Named preset configuration combining gradient, noise, and texture settings. Allowed values: `matte`, `aurora`, `gloss`, `grain`, `paper`, `linen`, `neon`, `blueprint`, `film`. Example: `'matte'`. |
| `gradient` | `gradient` | `GradientConfig` | no | `Rust default` | Gradient layer configuration with kind, angle, and color stops. Example: `{ angle: 135, stops: [{ color: '#7c3aed', position: 0 }] }`. |
| `noise` | `noise` | `NoiseConfig` | no | `Rust default` | Noise layer configuration with frequency, octaves, seed, opacity, and blend mode. Example: `{ opacity: 0.12 }`. |
| `texture` | `texture` | `TextureConfig` | no | `Rust default` | Texture layer configuration with kind, opacity, scale, and blend mode. Example: `{ kind: 'paper', opacity: 0.15 }`. |
| `overlay` | `overlay` | `OverlayConfig` | no | `Rust default` | Overlay layer configuration with color, opacity, and blend mode. Example: `{ color: '#000000', opacity: 0.2 }`. |
| `vignette` | `vignette` | `VignetteConfig` | no | `Rust default` | Vignette layer configuration with strength and radius. Example: `{ strength: 0.25, radius: 0.5 }`. |
| `opacity` | `opacity` | `number` | no | `Rust default` | Overall opacity of the decorative layers (0–1). Example: `1`. |
| `radius` | `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'` | no | `Rust default` | Border radius for the flavour container. Allowed values: `none`, `sm`, `md`, `lg`, `xl`, `2xl`, `full`. Example: `'none'`. |
| `animate` | `animate` | `boolean` | no | `false` | Enables animated hue-rotate gradient + pulse layers. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['flavour'] });
</script>
<cx-flavour id="example-flavour" preset="matte"></cx-flavour>
<script type="module">
  const element = document.querySelector('#example-flavour');
  element.gradient = { angle: 135, stops: [{ color: '#7c3aed', position: 0 }] };
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Flavour } from '@colletdev/react/flavour';

void init({ components: ['flavour'] });

export function Example() {
  return <Flavour preset="matte" gradient={{ angle: 135, stops: [{ color: '#7c3aed', position: 0 }] }} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Flavour } from '@colletdev/vue/flavour';

void init({ components: ['flavour'] });
</script>

<template>
  <Flavour preset="matte" :gradient="{ angle: 135, stops: [{ color: '#7c3aed', position: 0 }] }" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Flavour from '@colletdev/svelte/flavour';

  void init({ components: ['flavour'] });
</script>

<Flavour preset="matte" gradient={{ angle: 135, stops: [{ color: '#7c3aed', position: 0 }] }} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxFlavour } from '@colletdev/angular/flavour';

void init({ components: ['flavour'] });

@Component({
  standalone: true,
  imports: [CxFlavour],
  template: `<cx-flavour preset="matte" [gradient]="{ angle: 135, stops: [{ color: '#7c3aed', position: 0 }] }"></cx-flavour>`,
})
export class Example {}
```

## Label (`<cx-label>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `text` | `text` | `string` | no | `""` | Visible label text; also serves as the accessible name. Example: `'example'`. |
| `for-input` | `forInput` | `string` | no | `""` | ID of the associated form control, bound via the native `for` attribute (enables click-to-focus and screen-reader pairing). Example: `'example'`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `optional-text` | `optionalText` | `string` | no | `""` | Muted indicator text for non-required fields, e.g. "(optional)". Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error-text` | `errorText` | `string` | no | `""` | Error message shown below the label; rendered in an assertive live region (`role="alert"`). Example: `'example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['label'] });
</script>
<cx-label id="example-label" text="example"></cx-label>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Label } from '@colletdev/react/label';

void init({ components: ['label'] });

export function Example() {
  return <Label text="example" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Label } from '@colletdev/vue/label';

void init({ components: ['label'] });
</script>

<template>
  <Label text="example" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Label from '@colletdev/svelte/label';

  void init({ components: ['label'] });
</script>

<Label text="example" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxLabel } from '@colletdev/angular/label';

void init({ components: ['label'] });

@Component({
  standalone: true,
  imports: [CxLabel],
  template: `<cx-label text="example"></cx-label>`,
})
export class Example {}
```

## Listbox (`<cx-listbox>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `selection-mode` | `selectionMode` | `'none' \| 'single' \| 'multiple'` | no | `Rust default` | Selection behavior: none (display only), single (one item), or multiple (checkboxes). Allowed values: `none`, `single`, `multiple`. Example: `'none'`. |
| `selected` | `selected` | `string[]` | no | `Rust default` | Currently selected item ID(s). Example: `['item-1']`. |
| `items` | `items` | `SelectOption[]` | no | `Rust default` | Typed array of item data objects. Bind as a property; do not stringify it or use children for list items. Example: `[{ value: 'a', label: 'Option A' }]`. |
| `groups` | `groups` | `OptionGroup[]` | no | `Rust default` | Typed array of grouped item data. Bind as a property; do not stringify it or use children for groups. Example: `[{ label: 'Group', options: [{ value: 'a', label: 'Option A' }] }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<SelectDetail>` | Fires when the committed component value or state changes. Detail: `SelectDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['listbox'] });
</script>
<cx-listbox id="example-listbox" label="Example label"></cx-listbox>
<script type="module">
  const element = document.querySelector('#example-listbox');
  element.items = [{ value: 'a', label: 'Option A' }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Listbox } from '@colletdev/react/listbox';

void init({ components: ['listbox'] });

export function Example() {
  return <Listbox label="Example label" items={[{ value: 'a', label: 'Option A' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Listbox } from '@colletdev/vue/listbox';

void init({ components: ['listbox'] });
</script>

<template>
  <Listbox label="Example label" :items="[{ value: 'a', label: 'Option A' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Listbox from '@colletdev/svelte/listbox';

  void init({ components: ['listbox'] });
</script>

<Listbox label="Example label" items={[{ value: 'a', label: 'Option A' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxListbox } from '@colletdev/angular/listbox';

void init({ components: ['listbox'] });

@Component({
  standalone: true,
  imports: [CxListbox],
  template: `<cx-listbox label="Example label" [items]="[{ value: 'a', label: 'Option A' }]"></cx-listbox>`,
})
export class Example {}
```

## Menu (`<cx-menu>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `trigger-label` | `triggerLabel` | `string` | no | `""` | Accessible label for the trigger button. Example: `'example'`. |
| `entries` | `entries` | `MenuEntry[]` | no | `Rust default` | Menu or split-button entry definitions. Each entry has an `id` field — this is what `MenuActionDetail.id` returns in action events. Example: `[{ id: 'edit', label: 'Edit', icon: 'pencil' }]`. |
| `variant` | `variant` | `'filled' \| 'outline' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `outline`, `ghost`. Example: `'filled'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `width` | `width` | `'auto' \| 'sm' \| 'md' \| 'lg'` | no | `Rust default` | Menu panel width preset. Allowed values: `auto`, `sm`, `md`, `lg`. Example: `'auto'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-action` | `onAction` | `CustomEvent<MenuActionDetail>` | Fires when the user activates an action item. Detail: `MenuActionDetail`. |
| `cx-change` | `onChange` | `CustomEvent<MenuChangeDetail>` | Fires when the committed component value or state changes. Detail: `MenuChangeDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the menu dropdown. |
| `close(): void` | Closes the menu dropdown. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['menu'] });
</script>
<cx-menu id="example-menu" trigger-label="example"></cx-menu>
<script type="module">
  const element = document.querySelector('#example-menu');
  element.entries = [{ id: 'edit', label: 'Edit', icon: 'pencil' }];
  element.addEventListener('cx-action', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Menu } from '@colletdev/react/menu';

void init({ components: ['menu'] });

export function Example() {
  return <Menu triggerLabel="example" entries={[{ id: 'edit', label: 'Edit', icon: 'pencil' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Menu } from '@colletdev/vue/menu';

void init({ components: ['menu'] });
</script>

<template>
  <Menu triggerLabel="example" :entries="[{ id: 'edit', label: 'Edit', icon: 'pencil' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Menu from '@colletdev/svelte/menu';

  void init({ components: ['menu'] });
</script>

<Menu triggerLabel="example" entries={[{ id: 'edit', label: 'Edit', icon: 'pencil' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxMenu } from '@colletdev/angular/menu';

void init({ components: ['menu'] });

@Component({
  standalone: true,
  imports: [CxMenu],
  template: `<cx-menu triggerLabel="example" [entries]="[{ id: 'edit', label: 'Edit', icon: 'pencil' }]"></cx-menu>`,
})
export class Example {}
```

## MessageBubble (`<cx-message-bubble>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `message-role` | `messageRole` | `string` | no | `""` | Role of the message sender (user or assistant). Example: `'example'`. |
| `variant` | `variant` | `'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `ghost`. Example: `'filled'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `alignment` | `alignment` | `'auto' \| 'start' \| 'end'` | no | `Rust default` | Content alignment. Allowed values: `auto`, `start`, `end`. Example: `'auto'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `content` | `content` | `string` | no | `""` | Text content to display. Example: `'Example content'`. |
| `html-content` | `htmlContent` | `string` | no | `""` | Pre-rendered HTML content for the message body. Example: `'example'`. |
| `sender-name` | `senderName` | `string` | no | `""` | Display name of the message sender. Example: `'example'`. |
| `timestamp` | `timestamp` | `string` | no | `""` | Timestamp text displayed with the message. Example: `'example'`. |
| `border` | `border` | `'auto' \| 'none'` | no | `Rust default` | Border treatment for the bubble: `auto` follows the variant, `none` removes it. Allowed values: `auto`, `none`. Example: `'auto'`. |
| `animated` | `animated` | `boolean` | no | `false` | Whether to animate transitions between states. Example: `true`. |
| `role` | `role` | `'user' \| 'assistant'` | no | `Rust default` | Message role: 'user' or 'assistant'. Controls alignment and styling. Allowed values: `user`, `assistant`. Example: `'user'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to content) |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['message-bubble'] });
</script>
<cx-message-bubble id="example-message-bubble" message-role="example"></cx-message-bubble>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { MessageBubble } from '@colletdev/react/message-bubble';

void init({ components: ['message-bubble'] });

export function Example() {
  return <MessageBubble messageRole="example" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { MessageBubble } from '@colletdev/vue/message-bubble';

void init({ components: ['message-bubble'] });
</script>

<template>
  <MessageBubble messageRole="example" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import MessageBubble from '@colletdev/svelte/message-bubble';

  void init({ components: ['message-bubble'] });
</script>

<MessageBubble messageRole="example" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxMessageBubble } from '@colletdev/angular/message-bubble';

void init({ components: ['message-bubble'] });

@Component({
  standalone: true,
  imports: [CxMessageBubble],
  template: `<cx-message-bubble messageRole="example"></cx-message-bubble>`,
})
export class Example {}
```

## MessageGroup (`<cx-message-group>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `message-role` | `messageRole` | `string` | no | `""` | Role of the message sender (user or assistant). Example: `'example'`. |
| `alignment` | `alignment` | `'auto' \| 'start' \| 'end'` | no | `Rust default` | Content alignment. Allowed values: `auto`, `start`, `end`. Example: `'auto'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `sender-name` | `senderName` | `string` | no | `""` | Display name shown in the group header. Example: `'example'`. |
| `animated` | `animated` | `boolean` | no | `false` | Whether to animate transitions between states. Example: `true`. |
| `parts` | `parts` | `MessageGroupPart[]` | no | `Rust default` | Array of message parts in this group. Example: `[{ kind: 'text', content: 'Hello' }]`. |
| `role` | `role` | `'user' \| 'assistant'` | no | `Rust default` | Message role: 'user' or 'assistant'. Controls alignment and styling for all messages in the group. Allowed values: `user`, `assistant`. Example: `'user'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['message-group'] });
</script>
<cx-message-group id="example-message-group" message-role="example"></cx-message-group>
<script type="module">
  const element = document.querySelector('#example-message-group');
  element.parts = [{ kind: 'text', content: 'Hello' }];
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { MessageGroup } from '@colletdev/react/message-group';

void init({ components: ['message-group'] });

export function Example() {
  return <MessageGroup messageRole="example" parts={[{ kind: 'text', content: 'Hello' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { MessageGroup } from '@colletdev/vue/message-group';

void init({ components: ['message-group'] });
</script>

<template>
  <MessageGroup messageRole="example" :parts="[{ kind: 'text', content: 'Hello' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import MessageGroup from '@colletdev/svelte/message-group';

  void init({ components: ['message-group'] });
</script>

<MessageGroup messageRole="example" parts={[{ kind: 'text', content: 'Hello' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxMessageGroup } from '@colletdev/angular/message-group';

void init({ components: ['message-group'] });

@Component({
  standalone: true,
  imports: [CxMessageGroup],
  template: `<cx-message-group messageRole="example" [parts]="[{ kind: 'text', content: 'Hello' }]"></cx-message-group>`,
})
export class Example {}
```

## MessagePart (`<cx-message-part>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `kind` | `kind` | `'text' \| 'tool-call' \| 'tool-result' \| 'thinking' \| 'code-block' \| 'error' \| 'preview'` | no | `Rust default` | Part type: text, tool-call, tool-result, attachment, or markdown. Allowed values: `text`, `tool-call`, `tool-result`, `thinking`, `code-block`, `error`, `preview`. Example: `'text'`. |
| `connection` | `connection` | `'standalone' \| 'first' \| 'middle' \| 'last'` | no | `Rust default` | Visual connection style to adjacent parts (none, top, middle, bottom). Allowed values: `standalone`, `first`, `middle`, `last`. Example: `'standalone'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `content` | `content` | `string` | no | `""` | Text content to display. Example: `'Example content'`. |
| `html-content` | `htmlContent` | `string` | no | `""` | Pre-rendered HTML content injected into Shadow DOM. Example: `'example'`. |
| `tool-name` | `toolName` | `string` | no | `""` | Name of the tool being called (for tool-call parts). Example: `'example'`. |
| `tool-arguments` | `toolArguments` | `string` | no | `""` | JSON string of arguments passed to the tool call. Example: `'example'`. |
| `tool-status` | `toolStatus` | `'pending' \| 'success' \| 'error'` | no | `Rust default` | Execution status of the tool call (running, complete, error). Allowed values: `pending`, `success`, `error`. Example: `'pending'`. |
| `tool-action` | `toolAction` | `'generic' \| 'read' \| 'write' \| 'edit' \| 'delete' \| 'search'` | no | `Rust default` | Pre-rendered HTML for a tool action button (e.g. approve, retry). Allowed values: `generic`, `read`, `write`, `edit`, `delete`, `search`. Example: `'generic'`. |
| `description` | `description` | `string` | no | `""` | Description text for tool calls or attachments. Example: `'Additional context'`. |
| `collapsible` | `collapsible` | `boolean` | no | `false` | Whether the part can be collapsed. Example: `true`. |
| `completed` | `completed` | `boolean` | no | `false` | Whether the tool call or operation has finished. Example: `true`. |
| `border` | `border` | `'auto' \| 'none' \| 'subtle'` | no | `Rust default` | Border treatment. `auto` follows the variant; `none` removes it; `subtle` renders a lighter rule. Allowed values: `auto`, `none`, `subtle`. Example: `'auto'`. |
| `thinking-label` | `thinkingLabel` | `string` | no | `""` | Label text for the collapsible thinking section header. Example: `'example'`. |
| `language` | `language` | `string` | no | `""` | Programming language for syntax-highlighted code parts. Example: `'example'`. |
| `filename` | `filename` | `string` | no | `""` | Name of the file displayed in the header. Example: `'example.rs'`. |
| `markdown` | `markdown` | `boolean` | no | `false` | Whether to render content as Markdown. Example: `true`. |
| `slotted` | `slotted` | `boolean` | no | `false` | Emits `<slot>` elements for Shadow DOM content projection. Example: `true`. |
| `attachment-name` | `attachmentName` | `string` | no | `""` | Filename of the attachment. Example: `'example'`. |
| `attachment-size` | `attachmentSize` | `number` | no | `Rust default` | Human-readable file size string (e.g. "2.4 MB"). Example: `1`. |
| `attachment-type` | `attachmentType` | `string` | no | `""` | MIME type of the attachment. Example: `'example'`. |
| `attachment-thumbnail` | `attachmentThumbnail` | `string` | no | `""` | URL for the attachment thumbnail image. Example: `'example'`. |
| `stream` | `stream` | `boolean` | no | `false` | When present, enables imperative streaming mode: the streaming parser owns the DOM (via startStream/appendTokens/endStream) and WASM re-render is suppressed. Fires `cx-stream-end` when finalized. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-stream-end` | `onStreamEnd` | `CustomEvent<StreamEndDetail>` | Fires after streamed content is finalized and sanitized. Detail: `StreamEndDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `startStream(): Promise<void>` | Initializes the streaming Markdown parser. |
| `appendTokens(text: string): void` | Appends a Markdown token chunk to the active stream. |
| `endStream(): Promise<void>` | Finalizes and sanitizes the active stream. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['message-part'] });
</script>
<cx-message-part id="example-message-part" kind="text"></cx-message-part>
<script type="module">
  const element = document.querySelector('#example-message-part');
  element.addEventListener('cx-stream-end', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { MessagePart } from '@colletdev/react/message-part';

void init({ components: ['message-part'] });

export function Example() {
  return <MessagePart kind="text" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { MessagePart } from '@colletdev/vue/message-part';

void init({ components: ['message-part'] });
</script>

<template>
  <MessagePart kind="text" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import MessagePart from '@colletdev/svelte/message-part';

  void init({ components: ['message-part'] });
</script>

<MessagePart kind="text" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxMessagePart } from '@colletdev/angular/message-part';

void init({ components: ['message-part'] });

@Component({
  standalone: true,
  imports: [CxMessagePart],
  template: `<cx-message-part kind="text"></cx-message-part>`,
})
export class Example {}
```

## MessageTimeline (`<cx-message-timeline>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `message-role` | `messageRole` | `string` | no | `""` | Role of the message sender (user or assistant). Example: `'example'`. |
| `alignment` | `alignment` | `'auto' \| 'start' \| 'end'` | no | `Rust default` | Content alignment. Allowed values: `auto`, `start`, `end`. Example: `'auto'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `sender-name` | `senderName` | `string` | no | `""` | Display name of the message sender. Example: `'example'`. |
| `events` | `events` | `TimelineEvent[]` | no | `Rust default` | Array of timeline event objects to display. Example: `[{ type: 'text-done', id: 'event-1', content: 'Started' }]`. |
| `role` | `role` | `'user' \| 'assistant'` | no | `Rust default` | Message role for visual alignment (user or assistant). Allowed values: `user`, `assistant`. Example: `'user'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['message-timeline'] });
</script>
<cx-message-timeline id="example-message-timeline" message-role="example"></cx-message-timeline>
<script type="module">
  const element = document.querySelector('#example-message-timeline');
  element.events = [{ type: 'text-done', id: 'event-1', content: 'Started' }];
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { MessageTimeline } from '@colletdev/react/message-timeline';

void init({ components: ['message-timeline'] });

export function Example() {
  return <MessageTimeline messageRole="example" events={[{ type: 'text-done', id: 'event-1', content: 'Started' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { MessageTimeline } from '@colletdev/vue/message-timeline';

void init({ components: ['message-timeline'] });
</script>

<template>
  <MessageTimeline messageRole="example" :events="[{ type: 'text-done', id: 'event-1', content: 'Started' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import MessageTimeline from '@colletdev/svelte/message-timeline';

  void init({ components: ['message-timeline'] });
</script>

<MessageTimeline messageRole="example" events={[{ type: 'text-done', id: 'event-1', content: 'Started' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxMessageTimeline } from '@colletdev/angular/message-timeline';

void init({ components: ['message-timeline'] });

@Component({
  standalone: true,
  imports: [CxMessageTimeline],
  template: `<cx-message-timeline messageRole="example" [events]="[{ type: 'text-done', id: 'event-1', content: 'Started' }]"></cx-message-timeline>`,
})
export class Example {}
```

## Pagination (`<cx-pagination>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `current-page` | `currentPage` | `number` | no | `0` | Currently active page number (1-based). Example: `1`. |
| `page-size` | `pageSize` | `number` | no | `0` | Number of items per page. Example: `10`. |
| `total-items` | `totalItems` | `number` | no | `0` | Total number of items across all pages. Example: `1`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `show-info` | `showInfo` | `boolean` | no | `true` | Whether to display "Page X of Y" info text. Example: `true`. |
| `show-prev-next` | `showPrevNext` | `boolean` | no | `true` | Whether to show previous/next navigation buttons. Example: `true`. |
| `variant` | `variant` | `'pages' \| 'load-more'` | no | `Rust default` | Visual style variant. Allowed values: `pages`, `load-more`. Example: `'pages'`. |
| `prev-label` | `prevLabel` | `string` | no | `""` | Accessible label for the previous page button. Example: `'example'`. |
| `next-label` | `nextLabel` | `string` | no | `""` | Accessible label for the next page button. Example: `'example'`. |
| `load-more-label` | `loadMoreLabel` | `string` | no | `""` | Label text for the "load more" button in infinite scroll mode. Example: `'example'`. |
| `page-size-options` | `pageSizeOptions` | `number[]` | no | `Rust default` | Array of page size options for the page size selector. Example: `[10, 25, 50]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<PageDetail>` | Fires when the committed component value or state changes. Detail: `PageDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['pagination'] });
</script>
<cx-pagination id="example-pagination" current-page="1"></cx-pagination>
<script type="module">
  const element = document.querySelector('#example-pagination');
  element.pageSizeOptions = [10, 25, 50];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Pagination } from '@colletdev/react/pagination';

void init({ components: ['pagination'] });

export function Example() {
  return <Pagination currentPage={1} pageSizeOptions={[10, 25, 50]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Pagination } from '@colletdev/vue/pagination';

void init({ components: ['pagination'] });
</script>

<template>
  <Pagination :currentPage="1" :pageSizeOptions="[10, 25, 50]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Pagination from '@colletdev/svelte/pagination';

  void init({ components: ['pagination'] });
</script>

<Pagination currentPage={1} pageSizeOptions={[10, 25, 50]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxPagination } from '@colletdev/angular/pagination';

void init({ components: ['pagination'] });

@Component({
  standalone: true,
  imports: [CxPagination],
  template: `<cx-pagination [currentPage]="1" [pageSizeOptions]="[10, 25, 50]"></cx-pagination>`,
})
export class Example {}
```

## Popover (`<cx-popover>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `trigger-label` | `triggerLabel` | `string` | no | `""` | Accessible label for the trigger button. Example: `'example'`. |
| `title` | `title` | `string` | no | `""` | Title text. Example: `'Example title'`. |
| `description` | `description` | `string` | no | `""` | Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text. Example: `'Additional context'`. |
| `width` | `width` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'auto'` | no | `Rust default` | Popover panel width preset. Allowed values: `sm`, `md`, `lg`, `xl`, `auto`. Example: `'sm'`. |
| `placement` | `placement` | `'top' \| 'bottom'` | no | `Rust default` | Preferred placement relative to the trigger (top, bottom, left, right). Allowed values: `top`, `bottom`. Example: `'top'`. |
| `align` | `align` | `'start' \| 'center' \| 'end'` | no | `Rust default` | Alignment along the placement axis (start, center, end). Allowed values: `start`, `center`, `end`. Example: `'start'`. |
| `arrow` | `arrow` | `boolean` | no | `false` | Whether to show an arrow pointing to the trigger. Example: `true`. |
| `close-button` | `closeButton` | `boolean` | no | `false` | Whether to render a close button. Example: `true`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to content) |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the popover panel. |
| `close(): void` | Closes the popover panel. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['popover'] });
</script>
<cx-popover id="example-popover" trigger-label="example"></cx-popover>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Popover } from '@colletdev/react/popover';

void init({ components: ['popover'] });

export function Example() {
  return <Popover triggerLabel="example" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Popover } from '@colletdev/vue/popover';

void init({ components: ['popover'] });
</script>

<template>
  <Popover triggerLabel="example" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Popover from '@colletdev/svelte/popover';

  void init({ components: ['popover'] });
</script>

<Popover triggerLabel="example" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxPopover } from '@colletdev/angular/popover';

void init({ components: ['popover'] });

@Component({
  standalone: true,
  imports: [CxPopover],
  template: `<cx-popover triggerLabel="example"></cx-popover>`,
})
export class Example {}
```

## ProfileMenu (`<cx-profile-menu>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `image` | `image` | `string` | no | `""` | URL of the image to display. Example: `'example'`. |
| `initials` | `initials` | `string` | no | `""` | Fallback initials displayed when no avatar image is available. Example: `'example'`. |
| `shape` | `shape` | `'circle' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `circle`, `rounded`. Example: `'circle'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `width` | `width` | `'auto' \| 'sm' \| 'md' \| 'lg'` | no | `Rust default` | Dropdown panel width preset. Allowed values: `auto`, `sm`, `md`, `lg`. Example: `'auto'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `entries` | `entries` | `MenuEntry[]` | no | `Rust default` | Menu or split-button entry definitions. Each entry has an `id` field — this is what `MenuActionDetail.id` returns in action events. Example: `[{ id: 'edit', label: 'Edit', icon: 'pencil' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-action` | `onAction` | `CustomEvent<MenuActionDetail>` | Fires when the user activates an action item. Detail: `MenuActionDetail`. |
| `cx-change` | `onChange` | `CustomEvent<MenuChangeDetail>` | Fires when the committed component value or state changes. Detail: `MenuChangeDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the profile menu dropdown. |
| `close(): void` | Closes the profile menu dropdown. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['profile-menu'] });
</script>
<cx-profile-menu id="example-profile-menu" label="Example label"></cx-profile-menu>
<script type="module">
  const element = document.querySelector('#example-profile-menu');
  element.entries = [{ id: 'edit', label: 'Edit', icon: 'pencil' }];
  element.addEventListener('cx-action', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { ProfileMenu } from '@colletdev/react/profile-menu';

void init({ components: ['profile-menu'] });

export function Example() {
  return <ProfileMenu label="Example label" entries={[{ id: 'edit', label: 'Edit', icon: 'pencil' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { ProfileMenu } from '@colletdev/vue/profile-menu';

void init({ components: ['profile-menu'] });
</script>

<template>
  <ProfileMenu label="Example label" :entries="[{ id: 'edit', label: 'Edit', icon: 'pencil' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import ProfileMenu from '@colletdev/svelte/profile-menu';

  void init({ components: ['profile-menu'] });
</script>

<ProfileMenu label="Example label" entries={[{ id: 'edit', label: 'Edit', icon: 'pencil' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxProfileMenu } from '@colletdev/angular/profile-menu';

void init({ components: ['profile-menu'] });

@Component({
  standalone: true,
  imports: [CxProfileMenu],
  template: `<cx-profile-menu label="Example label" [entries]="[{ id: 'edit', label: 'Edit', icon: 'pencil' }]"></cx-profile-menu>`,
})
export class Example {}
```

## Progress (`<cx-progress>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `value` | `value` | `number` | no | `Rust default` | Percentage 0–100. No max prop — the component assumes max=100. Example: `1`. |
| `value-text` | `valueText` | `string` | no | `""` | Accessible text representation of the current value (e.g. "75%"). Example: `'example'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `shape` | `shape` | `'rounded' \| 'sharp' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `rounded`, `sharp`, `pill`. Example: `'rounded'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['progress'] });
</script>
<cx-progress id="example-progress" label="Example label"></cx-progress>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Progress } from '@colletdev/react/progress';

void init({ components: ['progress'] });

export function Example() {
  return <Progress label="Example label" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Progress } from '@colletdev/vue/progress';

void init({ components: ['progress'] });
</script>

<template>
  <Progress label="Example label" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Progress from '@colletdev/svelte/progress';

  void init({ components: ['progress'] });
</script>

<Progress label="Example label" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxProgress } from '@colletdev/angular/progress';

void init({ components: ['progress'] });

@Component({
  standalone: true,
  imports: [CxProgress],
  template: `<cx-progress label="Example label"></cx-progress>`,
})
export class Example {}
```

## RadioGroup (`<cx-radio-group>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `legend` | `legend` | `string` | yes | `—` | Fieldset legend text for the radio group. Example: `'Choose an option'`. |
| `shape` | `shape` | `'round' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `round`, `rounded`. Example: `'round'`. |
| `orientation` | `orientation` | `'vertical' \| 'horizontal'` | no | `Rust default` | Layout orientation (horizontal or vertical). Allowed values: `vertical`, `horizontal`. Example: `'vertical'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `selected` | `selected` | `string` | no | `""` | Currently selected item ID(s). Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `options` | `options` | `RadioOption[]` | no | `Rust default` | Typed array of selectable options. Bind as a property; do not stringify it or use children for options. Example: `[{ value: 'a', label: 'Option A' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<SelectDetail>` | Fires on each user edit before the value is committed. Detail: `SelectDetail`. |
| `cx-change` | `onChange` | `CustomEvent<SelectDetail>` | Fires when the committed component value or state changes. Detail: `SelectDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `getValue(): string` | Returns the selected radio value. |
| `setValue(value: string): void` | Sets the selected radio value. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['radio-group'] });
</script>
<cx-radio-group id="example-radio-group" legend="Choose an option" name="fieldName"></cx-radio-group>
<script type="module">
  const element = document.querySelector('#example-radio-group');
  element.options = [{ value: 'a', label: 'Option A' }];
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { RadioGroup } from '@colletdev/react/radio-group';

void init({ components: ['radio-group'] });

export function Example() {
  return <RadioGroup legend="Choose an option" name="fieldName" options={[{ value: 'a', label: 'Option A' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { RadioGroup } from '@colletdev/vue/radio-group';

void init({ components: ['radio-group'] });
</script>

<template>
  <RadioGroup legend="Choose an option" name="fieldName" :options="[{ value: 'a', label: 'Option A' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import RadioGroup from '@colletdev/svelte/radio-group';

  void init({ components: ['radio-group'] });
</script>

<RadioGroup legend="Choose an option" name="fieldName" options={[{ value: 'a', label: 'Option A' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxRadioGroup } from '@colletdev/angular/radio-group';

void init({ components: ['radio-group'] });

@Component({
  standalone: true,
  imports: [CxRadioGroup],
  template: `<cx-radio-group legend="Choose an option" name="fieldName" [options]="[{ value: 'a', label: 'Option A' }]"></cx-radio-group>`,
})
export class Example {}
```

## ScrollArea (`<cx-scroll-area>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `track` | `track` | `'with-track' \| 'floating'` | no | `Rust default` | Scrollbar track treatment: a visible track gutter, or a floating thumb over the content. Allowed values: `with-track`, `floating`. Example: `'with-track'`. |
| `axis` | `axis` | `'vertical' \| 'horizontal' \| 'both'` | no | `Rust default` | Scroll axis: vertical, horizontal, or both. Allowed values: `vertical`, `horizontal`, `both`. Example: `'vertical'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `height` | `height` | `string` | no | `""` | Fixed height for the scroll container. Example: `'h-[600px]'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `auto-scroll` | `autoScroll` | `'off' \| 'bottom-stick'` | no | `Rust default` | Automatically scrolls to the bottom when new content is added. Allowed values: `off`, `bottom-stick`. Example: `'off'`. |
| `new-content-label` | `newContentLabel` | `string` | no | `""` | Accessible label for the "new content" indicator button. Example: `'example'`. |
| `log-role` | `logRole` | `boolean` | no | `false` | Adds role="log" for chat-style containers with live content. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-scroll-end` | `onScrollEnd` | `CustomEvent<ScrollEndDetail>` | Fires when the scroll container reaches its end. Detail: `ScrollEndDetail`. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to content) |

### Methods

| Method | Description |
|---|---|
| `scrollToBottom(): void` | Scrolls content to the bottom. |
| `scrollToTop(): void` | Scrolls content to the top. |
| `recalculate(): void` | Recalculates scrollbar thumb size and position after dynamic content changes. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['scroll-area'] });
</script>
<cx-scroll-area id="example-scroll-area" shape="sharp"></cx-scroll-area>
<script type="module">
  const element = document.querySelector('#example-scroll-area');
  element.addEventListener('cx-scroll-end', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { ScrollArea } from '@colletdev/react/scroll-area';

void init({ components: ['scroll-area'] });

export function Example() {
  return <ScrollArea shape="sharp" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { ScrollArea } from '@colletdev/vue/scroll-area';

void init({ components: ['scroll-area'] });
</script>

<template>
  <ScrollArea shape="sharp" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import ScrollArea from '@colletdev/svelte/scroll-area';

  void init({ components: ['scroll-area'] });
</script>

<ScrollArea shape="sharp" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxScrollArea } from '@colletdev/angular/scroll-area';

void init({ components: ['scroll-area'] });

@Component({
  standalone: true,
  imports: [CxScrollArea],
  template: `<cx-scroll-area shape="sharp"></cx-scroll-area>`,
})
export class Example {}
```

## Scrollbar (`<cx-scrollbar>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `track` | `track` | `'with-track' \| 'floating'` | no | `Rust default` | Scrollbar track treatment: a visible track gutter, or a floating thumb over the content. Allowed values: `with-track`, `floating`. Example: `'with-track'`. |
| `axis` | `axis` | `'vertical' \| 'horizontal' \| 'both'` | no | `Rust default` | Scroll axis: vertical or horizontal. Allowed values: `vertical`, `horizontal`, `both`. Example: `'vertical'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `height` | `height` | `string` | no | `""` | Height of the scrollable container. Example: `'h-[600px]'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to content) |

### Methods

| Method | Description |
|---|---|
| `recalculate(): void` | Recalculates scrollbar thumb size and position after dynamic content changes. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['scrollbar'] });
</script>
<cx-scrollbar id="example-scrollbar" shape="sharp"></cx-scrollbar>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Scrollbar } from '@colletdev/react/scrollbar';

void init({ components: ['scrollbar'] });

export function Example() {
  return <Scrollbar shape="sharp" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Scrollbar } from '@colletdev/vue/scrollbar';

void init({ components: ['scrollbar'] });
</script>

<template>
  <Scrollbar shape="sharp" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Scrollbar from '@colletdev/svelte/scrollbar';

  void init({ components: ['scrollbar'] });
</script>

<Scrollbar shape="sharp" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxScrollbar } from '@colletdev/angular/scrollbar';

void init({ components: ['scrollbar'] });

@Component({
  standalone: true,
  imports: [CxScrollbar],
  template: `<cx-scrollbar shape="sharp"></cx-scrollbar>`,
})
export class Example {}
```

## SearchBar (`<cx-search-bar>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text shown when empty. Example: `'Enter a value'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `value` | `value` | `string` | no | `""` | Current value of the component. Example: `'example'`. |
| `loading` | `loading` | `boolean` | no | `false` | Whether the component is in a loading state. Example: `true`. |
| `shortcut` | `shortcut` | `string` | no | `""` | Keyboard shortcut hint displayed in the search bar (e.g. "Ctrl+K"). Example: `'example'`. |
| `expandable` | `expandable` | `boolean` | no | `false` | Collapses to an icon button and expands on click/focus. Example: `true`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `readonly` | `readonly` | `boolean` | no | `false` | Makes the component read-only. Example: `true`. |
| `controls` | `controls` | `string` | no | `""` | ID of the element this search bar controls (aria-controls). Example: `'example'`. |
| `shimmer` | `shimmer` | `boolean` | no | `false` | Enables a one-shot gradient sweep animation on the placeholder text when focused. 10-second cooldown between triggers. Example: `true`. |
| `debounce-ms` | `debounceMs` | `number` | no | `Rust default` | Debounce delay in milliseconds before emitting search events. Example: `1`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<InputDetail>` | Fires when the committed component value or state changes. Detail: `InputDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |
| `cx-submit` | `onSubmit` | `CustomEvent<InputDetail>` | Fires when the user submits the current value. Detail: `InputDetail`. |
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-clear` | `onClear` | `CustomEvent<ClearDetail>` | Fires after the current value is cleared. Detail: `ClearDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the search input. |
| `clear(): void` | Clears the search input value. |
| `getValue(): string` | Returns the current search query. |
| `setValue(value: string): void` | Sets the search query programmatically. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['search-bar'] });
</script>
<cx-search-bar id="example-search-bar" label="Example label" placeholder="Enter a value"></cx-search-bar>
<script type="module">
  const element = document.querySelector('#example-search-bar');
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { SearchBar } from '@colletdev/react/search-bar';

void init({ components: ['search-bar'] });

export function Example() {
  return <SearchBar label="Example label" placeholder="Enter a value" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { SearchBar } from '@colletdev/vue/search-bar';

void init({ components: ['search-bar'] });
</script>

<template>
  <SearchBar label="Example label" placeholder="Enter a value" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import SearchBar from '@colletdev/svelte/search-bar';

  void init({ components: ['search-bar'] });
</script>

<SearchBar label="Example label" placeholder="Enter a value" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSearchBar } from '@colletdev/angular/search-bar';

void init({ components: ['search-bar'] });

@Component({
  standalone: true,
  imports: [CxSearchBar],
  template: `<cx-search-bar label="Example label" placeholder="Enter a value"></cx-search-bar>`,
})
export class Example {}
```

## Select (`<cx-select>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `mode` | `mode` | `'single' \| 'multiple'` | no | `Rust default` | Selection mode (single or multiple). Allowed values: `single`, `multiple`. Example: `'single'`. |
| `selected` | `selected` | `string[]` | no | `Rust default` | Currently selected item ID(s). Example: `['item-1']`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text shown when empty. Example: `'Enter a value'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `items` | `items` | `SelectOption[]` | no | `Rust default` | Typed array of item data objects. Bind as a property; do not stringify it or use children for list items. Example: `[{ value: 'a', label: 'Option A' }]`. |
| `groups` | `groups` | `OptionGroup[]` | no | `Rust default` | Typed array of grouped item data. Bind as a property; do not stringify it or use children for groups. Example: `[{ label: 'Group', options: [{ value: 'a', label: 'Option A' }] }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-change` | `onChange` | `CustomEvent<SelectDetail>` | Fires when the committed component value or state changes. Detail: `SelectDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the dropdown. |
| `close(): void` | Closes the dropdown. |
| `focus(): void` | Focuses the trigger button. |
| `getValue(): string | string[]` | Returns the current selection. A single string in single mode, a string array in `mode="multiple"` — matching the shape of `cx-change`'s `detail.value`. |
| `setValue(value: string | string[]): void` | Sets the selection programmatically. Accepts an array in `mode="multiple"`. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['select'] });
</script>
<cx-select id="example-select" label="Example label" variant="outline"></cx-select>
<script type="module">
  const element = document.querySelector('#example-select');
  element.items = [{ value: 'a', label: 'Option A' }];
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Select } from '@colletdev/react/select';

void init({ components: ['select'] });

export function Example() {
  return <Select label="Example label" variant="outline" items={[{ value: 'a', label: 'Option A' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Select } from '@colletdev/vue/select';

void init({ components: ['select'] });
</script>

<template>
  <Select label="Example label" variant="outline" :items="[{ value: 'a', label: 'Option A' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Select from '@colletdev/svelte/select';

  void init({ components: ['select'] });
</script>

<Select label="Example label" variant="outline" items={[{ value: 'a', label: 'Option A' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSelect } from '@colletdev/angular/select';

void init({ components: ['select'] });

@Component({
  standalone: true,
  imports: [CxSelect],
  template: `<cx-select label="Example label" variant="outline" [items]="[{ value: 'a', label: 'Option A' }]"></cx-select>`,
})
export class Example {}
```

## Separator (`<cx-separator>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `variant` | `variant` | `'solid' \| 'dashed' \| 'dotted'` | no | `Rust default` | Visual style variant. Allowed values: `solid`, `dashed`, `dotted`. Example: `'solid'`. |
| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | no | `Rust default` | Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`. Example: `'horizontal'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `semantic` | `semantic` | `boolean` | no | `false` | When true, exposes the separator to assistive tech as a meaningful boundary (`role="separator"`) instead of a decorative divider. Example: `true`. |
| `decorative` | `decorative` | `boolean` | no | `false` | When true, marks the separator as purely visual, hiding it from the accessibility tree (`role="none"` + `aria-hidden="true"`). Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['separator'] });
</script>
<cx-separator id="example-separator" variant="solid"></cx-separator>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Separator } from '@colletdev/react/separator';

void init({ components: ['separator'] });

export function Example() {
  return <Separator variant="solid" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Separator } from '@colletdev/vue/separator';

void init({ components: ['separator'] });
</script>

<template>
  <Separator variant="solid" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Separator from '@colletdev/svelte/separator';

  void init({ components: ['separator'] });
</script>

<Separator variant="solid" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSeparator } from '@colletdev/angular/separator';

void init({ components: ['separator'] });

@Component({
  standalone: true,
  imports: [CxSeparator],
  template: `<cx-separator variant="solid"></cx-separator>`,
})
export class Example {}
```

## Sidebar (`<cx-sidebar>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `side` | `side` | `'left' \| 'right'` | no | `Rust default` | Which viewport edge the component anchors to. Allowed values: `left`, `right`. Example: `'left'`. |
| `state` | `state` | `'expanded' \| 'narrow' \| 'hidden'` | no | `Rust default` | Sidebar state: expanded, collapsed, or auto. Allowed values: `expanded`, `narrow`, `hidden`. Example: `'expanded'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `mobile-actions` | `mobileActions` | `string` | no | `""` | Pre-rendered HTML for action buttons in the mobile bar trailing zone. Example: `'example'`. |
| `separators-after` | `separatorsAfter` | `number[]` | no | `Rust default` | Array of group indices after which to render a visual separator. Example: `[10, 25, 50]`. |
| `groups` | `groups` | `SidebarGroup[]` | no | `Rust default` | Navigation groups. Each group has a label and array of NavItem entries. Example: `[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]`. |
| `open` | `open` | `boolean` | no | `false` | Whether the component is in an open/expanded state. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-close` | `onClose` | `CustomEvent<CloseDetail>` | Fires when the component closes. Detail: `CloseDetail`. |
| `cx-navigate` | `onNavigate` | `CustomEvent<NavigateDetail>` | Fires when the user activates a navigation item. Detail: `NavigateDetail`. |
| `cx-toggle` | `onToggle` | `CustomEvent<SidebarToggleDetail>` | Fires when the expanded or narrow state toggles. Detail: `SidebarToggleDetail`. |

### Slots

| Slot | Description |
|---|---|
| `header` | Named slot for header content |
| `footer` | Named slot for footer content |
| `mobile-leading` | Named slot for mobile-leading content |
| `mobile-trailing` | Named slot for mobile-trailing content |
| `mobile-header` | Named slot for mobile-header content |
| `mobile-footer` | Named slot for mobile-footer content |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the mobile sidebar drawer. |
| `close(): void` | Closes the mobile sidebar drawer. |
| `toggle(): void` | Toggles the mobile sidebar drawer open/close state. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['sidebar'] });
</script>
<cx-sidebar id="example-sidebar" label="Example label"></cx-sidebar>
<script type="module">
  const element = document.querySelector('#example-sidebar');
  element.groups = [{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }];
  element.addEventListener('cx-close', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Sidebar } from '@colletdev/react/sidebar';

void init({ components: ['sidebar'] });

export function Example() {
  return <Sidebar label="Example label" groups={[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Sidebar } from '@colletdev/vue/sidebar';

void init({ components: ['sidebar'] });
</script>

<template>
  <Sidebar label="Example label" :groups="[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Sidebar from '@colletdev/svelte/sidebar';

  void init({ components: ['sidebar'] });
</script>

<Sidebar label="Example label" groups={[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSidebar } from '@colletdev/angular/sidebar';

void init({ components: ['sidebar'] });

@Component({
  standalone: true,
  imports: [CxSidebar],
  template: `<cx-sidebar label="Example label" [groups]="[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]"></cx-sidebar>`,
})
export class Example {}
```

## Skeleton (`<cx-skeleton>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `variant` | `variant` | `'text' \| 'circle' \| 'rectangular'` | no | `Rust default` | Visual style variant. Allowed values: `text`, `circle`, `rectangular`. Example: `'text'`. |
| `animation` | `animation` | `'pulse' \| 'wave'` | no | `Rust default` | Animation style: 'pulse' (default) or 'wave'. Allowed values: `pulse`, `wave`. Example: `'pulse'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `lines` | `lines` | `number` | no | `Rust default` | Number of skeleton text lines to render. Example: `1`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['skeleton'] });
</script>
<cx-skeleton id="example-skeleton" variant="text"></cx-skeleton>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Skeleton } from '@colletdev/react/skeleton';

void init({ components: ['skeleton'] });

export function Example() {
  return <Skeleton variant="text" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Skeleton } from '@colletdev/vue/skeleton';

void init({ components: ['skeleton'] });
</script>

<template>
  <Skeleton variant="text" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Skeleton from '@colletdev/svelte/skeleton';

  void init({ components: ['skeleton'] });
</script>

<Skeleton variant="text" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSkeleton } from '@colletdev/angular/skeleton';

void init({ components: ['skeleton'] });

@Component({
  standalone: true,
  imports: [CxSkeleton],
  template: `<cx-skeleton variant="text"></cx-skeleton>`,
})
export class Example {}
```

## Slider (`<cx-slider>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `aria-label` | `ariaLabel` | `string` | no | `""` | Accessible label for screen readers when no visible label is present. Example: `'example'`. |
| `value` | `value` | `number` | no | `50` | Current value of the component. Example: `1`. |
| `min` | `min` | `number` | no | `0` | Minimum allowed value. Example: `1`. |
| `max` | `max` | `number` | no | `100` | Maximum allowed value. Example: `100`. |
| `step` | `step` | `number` | no | `1` | Step increment between allowed values. Example: `1`. |
| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | no | `Rust default` | Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`. Example: `'horizontal'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `show-value` | `showValue` | `boolean` | no | `true` | Whether to display the current value label. Example: `true`. |
| `value-text` | `valueText` | `string` | no | `""` | Accessible text representation of the current value (e.g. "$50"). Example: `'example'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error-text` | `errorText` | `string` | no | `""` | Error message text displayed below the slider. Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `unlabeled` | `unlabeled` | `boolean` | no | `false` | Renders the input without a visible label (still requires aria-label). Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<SliderDetail>` | Fires on each user edit before the value is committed. Detail: `SliderDetail`. |
| `cx-change` | `onChange` | `CustomEvent<SliderDetail>` | Fires when the committed component value or state changes. Detail: `SliderDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the range input. |
| `getValue(): string` | Returns the current slider value. |
| `setValue(value: string): void` | Sets the slider value programmatically. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['slider'] });
</script>
<cx-slider id="example-slider" label="Example label" aria-label="example"></cx-slider>
<script type="module">
  const element = document.querySelector('#example-slider');
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Slider } from '@colletdev/react/slider';

void init({ components: ['slider'] });

export function Example() {
  return <Slider label="Example label" ariaLabel="example" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Slider } from '@colletdev/vue/slider';

void init({ components: ['slider'] });
</script>

<template>
  <Slider label="Example label" ariaLabel="example" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Slider from '@colletdev/svelte/slider';

  void init({ components: ['slider'] });
</script>

<Slider label="Example label" ariaLabel="example" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSlider } from '@colletdev/angular/slider';

void init({ components: ['slider'] });

@Component({
  standalone: true,
  imports: [CxSlider],
  template: `<cx-slider label="Example label" ariaLabel="example"></cx-slider>`,
})
export class Example {}
```

## SpeedDial (`<cx-speed-dial>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `aria-label` | `ariaLabel` | `string` | no | `""` | Accessible label for screen readers when no visible label is present. Example: `'example'`. |
| `close-icon` | `closeIcon` | `string` | no | `""` | Icon shown on the FAB when the speed dial is open (default: X/close). Example: `'example'`. |
| `variant` | `variant` | `'filled' \| 'outline' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `outline`, `ghost`. Example: `'filled'`. |
| `shape` | `shape` | `'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `rounded`, `pill`. Example: `'rounded'`. |
| `size` | `size` | `'sm' \| 'md' \| 'lg'` | no | `Rust default` | Component size. Allowed values: `sm`, `md`, `lg`. Example: `'sm'`. |
| `direction` | `direction` | `'up' \| 'down' \| 'left' \| 'right'` | no | `Rust default` | Direction actions expand from the FAB trigger (up, down, left, right). Allowed values: `up`, `down`, `left`, `right`. Example: `'up'`. |
| `backdrop` | `backdrop` | `boolean` | no | `true` | Whether to show a backdrop overlay when the speed dial is open. Example: `true`. |
| `tooltips` | `tooltips` | `boolean` | no | `true` | Whether to show tooltip labels next to action items. Example: `true`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `actions` | `actions` | `SpeedDialAction[]` | no | `Rust default` | Array of action items. Each has id, label, icon, optional disabled/href. Example: `[{ id: 'create', label: 'Create', icon: 'plus' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-action` | `onAction` | `CustomEvent<MenuActionDetail>` | Fires when the user activates an action item. Detail: `MenuActionDetail`. |
| `cx-change` | `onChange` | `CustomEvent<CollapsibleDetail>` | Fires when the committed component value or state changes. Detail: `CollapsibleDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the speed dial action menu. |
| `close(): void` | Closes the speed dial action menu. |
| `toggle(): void` | Toggles the speed dial action menu. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['speed-dial'] });
</script>
<cx-speed-dial id="example-speed-dial" icon="example"></cx-speed-dial>
<script type="module">
  const element = document.querySelector('#example-speed-dial');
  element.actions = [{ id: 'create', label: 'Create', icon: 'plus' }];
  element.addEventListener('cx-action', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { SpeedDial } from '@colletdev/react/speed-dial';

void init({ components: ['speed-dial'] });

export function Example() {
  return <SpeedDial icon="example" actions={[{ id: 'create', label: 'Create', icon: 'plus' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { SpeedDial } from '@colletdev/vue/speed-dial';

void init({ components: ['speed-dial'] });
</script>

<template>
  <SpeedDial icon="example" :actions="[{ id: 'create', label: 'Create', icon: 'plus' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import SpeedDial from '@colletdev/svelte/speed-dial';

  void init({ components: ['speed-dial'] });
</script>

<SpeedDial icon="example" actions={[{ id: 'create', label: 'Create', icon: 'plus' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSpeedDial } from '@colletdev/angular/speed-dial';

void init({ components: ['speed-dial'] });

@Component({
  standalone: true,
  imports: [CxSpeedDial],
  template: `<cx-speed-dial icon="example" [actions]="[{ id: 'create', label: 'Create', icon: 'plus' }]"></cx-speed-dial>`,
})
export class Example {}
```

## Spinner (`<cx-spinner>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `variant` | `variant` | `'circle' \| 'square' \| 'morph'` | no | `Rust default` | Visual style variant. Allowed values: `circle`, `square`, `morph`. Example: `'circle'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['spinner'] });
</script>
<cx-spinner id="example-spinner" variant="circle"></cx-spinner>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Spinner } from '@colletdev/react/spinner';

void init({ components: ['spinner'] });

export function Example() {
  return <Spinner variant="circle" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Spinner } from '@colletdev/vue/spinner';

void init({ components: ['spinner'] });
</script>

<template>
  <Spinner variant="circle" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Spinner from '@colletdev/svelte/spinner';

  void init({ components: ['spinner'] });
</script>

<Spinner variant="circle" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSpinner } from '@colletdev/angular/spinner';

void init({ components: ['spinner'] });

@Component({
  standalone: true,
  imports: [CxSpinner],
  template: `<cx-spinner variant="circle"></cx-spinner>`,
})
export class Example {}
```

## SplitButton (`<cx-split-button>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Text label for the primary action button. Example: `'Example label'`. |
| `variant` | `variant` | `'filled' \| 'outline' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `outline`, `ghost`. Example: `'filled'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `icon-leading` | `iconLeading` | `string` | no | `""` | Icon displayed before the primary button label. Example: `'example'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `primary-disabled` | `primaryDisabled` | `boolean` | no | `false` | Disables only the primary action button (dropdown trigger remains active). Example: `true`. |
| `trigger-disabled` | `triggerDisabled` | `boolean` | no | `false` | Disables only the dropdown trigger button. Example: `true`. |
| `trigger-label` | `triggerLabel` | `string` | no | `""` | Accessible label for the dropdown trigger button (default: "More options"). Example: `'example'`. |
| `entries` | `entries` | `SplitMenuEntry[]` | no | `Rust default` | Menu or split-button entry definitions. Each entry has an `id` field — this is what `MenuActionDetail.id` returns in action events. Example: `[{ id: 'duplicate', label: 'Duplicate' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-click` | `onClick` | `CustomEvent<ClickDetail>` | Fires when the user activates the component. Detail: `ClickDetail`. |
| `cx-action` | `onAction` | `CustomEvent<MenuActionDetail>` | Fires when the user activates an action item. Detail: `MenuActionDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the dropdown menu. |
| `close(): void` | Closes the dropdown menu. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['split-button'] });
</script>
<cx-split-button id="example-split-button" label="Example label"></cx-split-button>
<script type="module">
  const element = document.querySelector('#example-split-button');
  element.entries = [{ id: 'duplicate', label: 'Duplicate' }];
  element.addEventListener('cx-click', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { SplitButton } from '@colletdev/react/split-button';

void init({ components: ['split-button'] });

export function Example() {
  return <SplitButton label="Example label" entries={[{ id: 'duplicate', label: 'Duplicate' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { SplitButton } from '@colletdev/vue/split-button';

void init({ components: ['split-button'] });
</script>

<template>
  <SplitButton label="Example label" :entries="[{ id: 'duplicate', label: 'Duplicate' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import SplitButton from '@colletdev/svelte/split-button';

  void init({ components: ['split-button'] });
</script>

<SplitButton label="Example label" entries={[{ id: 'duplicate', label: 'Duplicate' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSplitButton } from '@colletdev/angular/split-button';

void init({ components: ['split-button'] });

@Component({
  standalone: true,
  imports: [CxSplitButton],
  template: `<cx-split-button label="Example label" [entries]="[{ id: 'duplicate', label: 'Duplicate' }]"></cx-split-button>`,
})
export class Example {}
```

## Stepper (`<cx-stepper>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `current` | `current` | `number` | no | `0` | Index or ID of the currently active step. Example: `1`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | no | `Rust default` | Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`. Example: `'horizontal'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `linear` | `linear` | `boolean` | no | `false` | When true, steps must be completed in order — users cannot skip ahead. Example: `true`. |
| `steps` | `steps` | `StepperStep[]` | no | `Rust default` | Array of step definitions. Each step has id, label, optional description/icon. Example: `[{ id: 'details', label: 'Details' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<SelectDetail>` | Fires when the committed component value or state changes. Detail: `SelectDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['stepper'] });
</script>
<cx-stepper id="example-stepper" label="Example label"></cx-stepper>
<script type="module">
  const element = document.querySelector('#example-stepper');
  element.steps = [{ id: 'details', label: 'Details' }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Stepper } from '@colletdev/react/stepper';

void init({ components: ['stepper'] });

export function Example() {
  return <Stepper label="Example label" steps={[{ id: 'details', label: 'Details' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Stepper } from '@colletdev/vue/stepper';

void init({ components: ['stepper'] });
</script>

<template>
  <Stepper label="Example label" :steps="[{ id: 'details', label: 'Details' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Stepper from '@colletdev/svelte/stepper';

  void init({ components: ['stepper'] });
</script>

<Stepper label="Example label" steps={[{ id: 'details', label: 'Details' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxStepper } from '@colletdev/angular/stepper';

void init({ components: ['stepper'] });

@Component({
  standalone: true,
  imports: [CxStepper],
  template: `<cx-stepper label="Example label" [steps]="[{ id: 'details', label: 'Details' }]"></cx-stepper>`,
})
export class Example {}
```

## Switch (`<cx-switch>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `checked` | `checked` | `boolean` | no | `false` | Boolean checked state (unlike Checkbox, which uses a string). Example: `true`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `description` | `description` | `string` | no | `""` | Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text. Example: `'Additional context'`. |
| `unlabeled` | `unlabeled` | `boolean` | no | `false` | Renders the input without a visible label (still requires aria-label). Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<CheckedDetail>` | Fires on each user edit before the value is committed. Detail: `CheckedDetail`. |
| `cx-change` | `onChange` | `CustomEvent<CheckedDetail>` | Fires when the committed component value or state changes. Detail: `CheckedDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the switch input. |
| `getValue(): string` | Returns "true" or "false". |
| `setValue(value: string): void` | Sets the switch state ("true" or "false"). |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['switch'] });
</script>
<cx-switch id="example-switch" label="Example label" shape="sharp"></cx-switch>
<script type="module">
  const element = document.querySelector('#example-switch');
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Switch } from '@colletdev/react/switch';

void init({ components: ['switch'] });

export function Example() {
  return <Switch label="Example label" shape="sharp" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Switch } from '@colletdev/vue/switch';

void init({ components: ['switch'] });
</script>

<template>
  <Switch label="Example label" shape="sharp" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Switch from '@colletdev/svelte/switch';

  void init({ components: ['switch'] });
</script>

<Switch label="Example label" shape="sharp" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxSwitch } from '@colletdev/angular/switch';

void init({ components: ['switch'] });

@Component({
  standalone: true,
  imports: [CxSwitch],
  template: `<cx-switch label="Example label" shape="sharp"></cx-switch>`,
})
export class Example {}
```

## Table (`<cx-table>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `caption` | `caption` | `string` | yes | `—` | Caption text displayed below the main content. Example: `'Results'`. |
| `columns` | `columns` | `TableColumn[]` | no | `Rust default` | Typed table-column array. Bind as a property; do not stringify it or use `<th>` children. Example: `[{ id: 'name', header: 'Name' }]`. |
| `rows` | `rows` | `TableRow[]` | no | `Rust default` | Typed table-row array. Bind as a property; do not stringify it or use `<tr>` children. Example: `[{ id: 'row-1', cells: { name: 'Ada' } }]`. |
| `variant` | `variant` | `'plain' \| 'striped' \| 'bordered'` | no | `Rust default` | Visual style variant. Allowed values: `plain`, `striped`, `bordered`. Example: `'plain'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `selectable` | `selectable` | `'none' \| 'single' \| 'multiple'` | no | `Rust default` | Enables row selection with checkboxes. Allowed values: `none`, `single`, `multiple`. Example: `'none'`. |
| `selected` | `selected` | `string[]` | no | `Rust default` | Currently selected item ID(s). Example: `['item-1']`. |
| `sorts` | `sorts` | `SortState[]` | no | `Rust default` | Column sort configuration. Array of sort definitions with column ID and direction. Example: `[{ column_id: 'name', direction: 'asc' }]`. |
| `filters` | `filters` | `FilterState[]` | no | `Rust default` | Column filter configuration. Array of active filters with column ID and value. Example: `[{ column_id: 'name', operator: 'contains', value: 'Ada' }]`. |
| `pagination` | `pagination` | `PaginationConfig` | no | `Rust default` | Full pagination config object for external pagination control. Example: `{ current_page: 1, page_size: 10, total_items: 42 }`. |
| `hoverable` | `hoverable` | `boolean` | no | `true` | Enables hover highlighting on table rows. Example: `true`. |
| `sticky-header` | `stickyHeader` | `boolean` | no | `false` | Pins the table header row when scrolling. Example: `true`. |
| `footer` | `footer` | `FooterRow[]` | no | `Rust default` | Pre-rendered HTML for the table footer row. Example: `[{ cells: { total: '42' } }]`. |
| `empty-state` | `emptyState` | `EmptyStateConfig` | no | `Rust default` | Content displayed when the table has no rows. Example: `{ title: 'No results', description: 'Try another query' }`. |
| `column-order` | `columnOrder` | `string[]` | no | `Rust default` | Array of column IDs defining the display order. Example: `['name', 'email']`. |
| `virtual-scroll` | `virtualScroll` | `VirtualScrollConfig` | no | `Rust default` | Virtual scrolling window configuration with total count, render count, and start index. Example: `{ total_count: 1000, render_count: 40, start_index: 0 }`. |
| `page-size` | `pageSize` | `number` | no | `0` | Rows per page for auto-pagination. Set this alone and the table handles pagination internally — no need to manage current_page or total_items. For full control, use the pagination prop instead. Example: `10`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `loading` | `loading` | `number` | no | `0` | Number of skeleton rows to render while data loads. 0 renders the real rows. Example: `5`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-sort` | `onSort` | `CustomEvent<SortDetail>` | Fires when the requested table sort changes. Detail: `SortDetail`. |
| `cx-select` | `onSelect` | `CustomEvent<TableSelectDetail>` | Fires when the user selects an item or data node. Detail: `TableSelectDetail`. |
| `cx-expand` | `onExpand` | `CustomEvent<TableExpandDetail>` | Fires when expandable content changes state. Detail: `TableExpandDetail`. |
| `cx-page` | `onPage` | `CustomEvent<PageDetail>` | Fires when the requested table page changes. Detail: `PageDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |
| `cx-resize` | `onResize` | `CustomEvent<ResizeDetail>` | Fires when a resizable table column changes width. Detail: `ResizeDetail`. |
| `cx-scroll` | `onScroll` | `CustomEvent<ScrollDetail>` | Fires when the virtualized table viewport changes. Detail: `ScrollDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `goToPage(page: number): void` | Navigates to a specific page (1-indexed). Works in both controlled and auto-pagination modes. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['table'] });
</script>
<cx-table id="example-table" caption="Results"></cx-table>
<script type="module">
  const element = document.querySelector('#example-table');
  element.columns = [{ id: 'name', header: 'Name' }];
  element.rows = [{ id: 'row-1', cells: { name: 'Ada' } }];
  element.addEventListener('cx-sort', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Table } from '@colletdev/react/table';

void init({ components: ['table'] });

export function Example() {
  return <Table caption="Results" columns={[{ id: 'name', header: 'Name' }]} rows={[{ id: 'row-1', cells: { name: 'Ada' } }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Table } from '@colletdev/vue/table';

void init({ components: ['table'] });
</script>

<template>
  <Table caption="Results" :columns="[{ id: 'name', header: 'Name' }]" :rows="[{ id: 'row-1', cells: { name: 'Ada' } }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Table from '@colletdev/svelte/table';

  void init({ components: ['table'] });
</script>

<Table caption="Results" columns={[{ id: 'name', header: 'Name' }]} rows={[{ id: 'row-1', cells: { name: 'Ada' } }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTable } from '@colletdev/angular/table';

void init({ components: ['table'] });

@Component({
  standalone: true,
  imports: [CxTable],
  template: `<cx-table caption="Results" [columns]="[{ id: 'name', header: 'Name' }]" [rows]="[{ id: 'row-1', cells: { name: 'Ada' } }]"></cx-table>`,
})
export class Example {}
```

## Tabs (`<cx-tabs>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `items` | `items` | `TabItem[]` | no | `Rust default` | Typed array of item data objects. Bind as a property; do not stringify it or use children for list items. Example: `[{ value: 'overview', label: 'Overview' }]`. |
| `default-tab` | `defaultTab` | `string` | no | `""` | ID of the tab to activate on initial render. Example: `'example'`. |
| `variant` | `variant` | `'underline' \| 'enclosed' \| 'pill'` | no | `Rust default` | Visual style variant. Allowed values: `underline`, `enclosed`, `pill`. Example: `'underline'`. |
| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | no | `Rust default` | Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`. Example: `'horizontal'`. |
| `width` | `width` | `'auto' \| 'full'` | no | `Rust default` | Tab bar width preset. Allowed values: `auto`, `full`. Example: `'auto'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `active-tab` | `activeTab` | `string` | no | `""` | Controlled active tab. Set to a tab value or index to switch tabs without re-render. Updates on user interaction. Example: `'example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<SelectDetail>` | Fires when the committed component value or state changes. Detail: `SelectDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the active tab. |
| `activateTab(index: number): void` | Activates the tab at the given index. Fires cx-change. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['tabs'] });
</script>
<cx-tabs id="example-tabs" label="Example label"></cx-tabs>
<script type="module">
  const element = document.querySelector('#example-tabs');
  element.items = [{ value: 'overview', label: 'Overview' }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Tabs } from '@colletdev/react/tabs';

void init({ components: ['tabs'] });

export function Example() {
  return <Tabs label="Example label" items={[{ value: 'overview', label: 'Overview' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Tabs } from '@colletdev/vue/tabs';

void init({ components: ['tabs'] });
</script>

<template>
  <Tabs label="Example label" :items="[{ value: 'overview', label: 'Overview' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Tabs from '@colletdev/svelte/tabs';

  void init({ components: ['tabs'] });
</script>

<Tabs label="Example label" items={[{ value: 'overview', label: 'Overview' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTabs } from '@colletdev/angular/tabs';

void init({ components: ['tabs'] });

@Component({
  standalone: true,
  imports: [CxTabs],
  template: `<cx-tabs label="Example label" [items]="[{ value: 'overview', label: 'Overview' }]"></cx-tabs>`,
})
export class Example {}
```

## TagInput (`<cx-tag-input>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text for the input field. Example: `'Enter a value'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `readonly` | `readonly` | `boolean` | no | `false` | Makes the component read-only. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `max-tags` | `maxTags` | `number` | no | `Rust default` | Maximum number of tags allowed. Input becomes readonly at capacity. Example: `1`. |
| `tags` | `tags` | `CxTagData[]` | no | `Rust default` | Array of tags. Each tag has value, label, optional icon and disabled flag. Example: `[{ value: 'rust', label: 'Rust' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-change` | `onChange` | `CustomEvent<TagInputChangeDetail>` | Fires when the committed component value or state changes. Detail: `TagInputChangeDetail`. |
| `cx-dismiss` | `onDismiss` | `CustomEvent<TagDismissDetail>` | Fires when the user dismisses the component. Detail: `TagDismissDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `addTag(tag: CxTagData): void` | Adds a tag. Fires cx-change. |
| `removeTag(value: string): void` | Removes a tag by value. Fires cx-change. |
| `clearTags(): void` | Removes all tags. Fires cx-change. |
| `getTags(): CxTagData[]` | Returns the current tag list. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['tag-input'] });
</script>
<cx-tag-input id="example-tag-input" label="Example label"></cx-tag-input>
<script type="module">
  const element = document.querySelector('#example-tag-input');
  element.tags = [{ value: 'rust', label: 'Rust' }];
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { TagInput } from '@colletdev/react/tag-input';

void init({ components: ['tag-input'] });

export function Example() {
  return <TagInput label="Example label" tags={[{ value: 'rust', label: 'Rust' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { TagInput } from '@colletdev/vue/tag-input';

void init({ components: ['tag-input'] });
</script>

<template>
  <TagInput label="Example label" :tags="[{ value: 'rust', label: 'Rust' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import TagInput from '@colletdev/svelte/tag-input';

  void init({ components: ['tag-input'] });
</script>

<TagInput label="Example label" tags={[{ value: 'rust', label: 'Rust' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTagInput } from '@colletdev/angular/tag-input';

void init({ components: ['tag-input'] });

@Component({
  standalone: true,
  imports: [CxTagInput],
  template: `<cx-tag-input label="Example label" [tags]="[{ value: 'rust', label: 'Rust' }]"></cx-tag-input>`,
})
export class Example {}
```

## Text (`<cx-text>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `text-role` | `textRole` | `'display' \| 'h1' \| 'h2' \| 'h3' \| 'label-lg' \| 'label-md' \| 'label-sm' \| 'body-lg' \| 'body-md' \| 'body-sm' \| 'overline' \| 'caption' \| 'code'` | no | `Rust default` | Semantic role of the text (e.g. heading, caption, code, label). Allowed values: `display`, `h1`, `h2`, `h3`, `label-lg`, `label-md`, `label-sm`, `body-lg`, `body-md`, `body-sm`, `overline`, `caption`, `code`. Example: `'display'`. |
| `align` | `align` | `'start' \| 'center' \| 'end'` | no | `Rust default` | Text alignment (left, center, right, justify). Allowed values: `start`, `center`, `end`. Example: `'start'`. |
| `color` | `color` | `'primary' \| 'inverse' \| 'muted'` | no | `Rust default` | Text color override using a named color token. Allowed values: `primary`, `inverse`, `muted`. Example: `'primary'`. |
| `muted` | `muted` | `boolean` | no | `false` | Renders text in a subdued/secondary color. Example: `true`. |
| `strong` | `strong` | `boolean` | no | `false` | Renders text with bold font weight. Example: `true`. |
| `italic` | `italic` | `boolean` | no | `false` | Renders text in italic style. Example: `true`. |
| `underline` | `underline` | `boolean` | no | `false` | Renders text with an underline decoration. Example: `true`. |
| `underline-strong` | `underlineStrong` | `boolean` | no | `false` | Renders text with a thicker underline decoration. Example: `true`. |
| `truncate` | `truncate` | `boolean` | no | `false` | Truncates text with an ellipsis when it overflows. Example: `true`. |
| `line-clamp` | `lineClamp` | `number` | no | `Rust default` | Maximum number of visible lines before truncation with an ellipsis. Example: `1`. |
| `balance` | `balance` | `boolean` | no | `false` | Applies CSS text-wrap: balance for even line lengths. Example: `true`. |
| `prose` | `prose` | `boolean` | no | `false` | Enables prose typography: a readable measure and looser line height. Example: `true`. |
| `element-as` | `elementAs` | `string` | no | `""` | Override the rendered HTML element (e.g. span, div, p). Example: `'example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| `default` | Default slot (maps to content) |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['text'] });
</script>
<cx-text id="example-text" text-role="display"></cx-text>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Text } from '@colletdev/react/text';

void init({ components: ['text'] });

export function Example() {
  return <Text textRole="display" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Text } from '@colletdev/vue/text';

void init({ components: ['text'] });
</script>

<template>
  <Text textRole="display" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Text from '@colletdev/svelte/text';

  void init({ components: ['text'] });
</script>

<Text textRole="display" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxText } from '@colletdev/angular/text';

void init({ components: ['text'] });

@Component({
  standalone: true,
  imports: [CxText],
  template: `<cx-text textRole="display"></cx-text>`,
})
export class Example {}
```

## TextInput (`<cx-text-input>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'filled' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `filled`, `ghost`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `kind` | `kind` | `'text' \| 'email' \| 'password' \| 'search' \| 'multiline'` | no | `Rust default` | Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. Allowed values: `text`, `email`, `password`, `search`, `multiline`. Example: `'text'`. |
| `placeholder` | `placeholder` | `string` | no | `""` | Placeholder text shown when empty. Example: `'Enter a value'`. |
| `value` | `value` | `string` | no | `""` | Controlled value. Set via onInput callback. Example: `'example'`. |
| `helper-text` | `helperText` | `string` | no | `""` | Helper text displayed below the input. Example: `'example'`. |
| `error` | `error` | `string` | no | `""` | Error message text. When set, shows validation error styling. Example: `'This field is invalid'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `readonly` | `readonly` | `boolean` | no | `false` | Makes the component read-only. Example: `true`. |
| `required` | `required` | `boolean` | no | `false` | Marks the field as required for form validation. Example: `true`. |
| `clearable` | `clearable` | `boolean` | no | `false` | Whether a clear button appears when the field has a value. Example: `true`. |
| `prefix-icon` | `prefixIcon` | `string` | no | `""` | Icon displayed at the start of the input field. Example: `'example'`. |
| `suffix-icon` | `suffixIcon` | `string` | no | `""` | Icon displayed at the end of the input field. Example: `'example'`. |
| `password-toggle` | `passwordToggle` | `boolean` | no | `false` | Whether to show a toggle button for password visibility. Example: `true`. |
| `password-visible` | `passwordVisible` | `boolean` | no | `false` | Controlled password visibility state. Example: `true`. |
| `name` | `name` | `string` | no | `""` | Form field name for submission. Example: `'fieldName'`. |
| `min-length` | `minLength` | `number` | no | `Rust default` | Minimum character length for validation. Example: `1`. |
| `max-length` | `maxLength` | `number` | no | `Rust default` | Maximum character length allowed. Example: `1`. |
| `pattern` | `pattern` | `string` | no | `""` | Regex pattern for input validation. Example: `'example'`. |
| `autocomplete` | `autocomplete` | `string` | no | `""` | Browser autocomplete hint (e.g. "email", "name", "off"). Example: `'example'`. |
| `rows` | `rows` | `number` | no | `3` | Visible row count for a multiline input. Applies only when kind is multiline. Example: `6`. |
| `auto-grow` | `autoGrow` | `boolean` | no | `false` | Automatically expands the textarea to fit content (multiline mode only). Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<InputDetail>` | Fires on each user edit before the value is committed. Detail: `InputDetail`. |
| `cx-change` | `onChange` | `CustomEvent<InputDetail>` | Fires when the committed component value or state changes. Detail: `InputDetail`. |
| `cx-focus` | `onFocus` | `CustomEvent<FocusDetail>` | Fires when focus enters the component. Detail: `FocusDetail`. |
| `cx-blur` | `onBlur` | `CustomEvent<FocusDetail>` | Fires when focus leaves the component. Detail: `FocusDetail`. |
| `cx-keydown` | `onKeydown` | `CustomEvent<KeyboardDetail>` | Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. |
| `cx-keyup` | `onKeyup` | `CustomEvent<KeyboardDetail>` | Fires when a key is released inside the component. Detail: `KeyboardDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `focus(): void` | Focuses the inner input or textarea. |
| `blur(): void` | Blurs the inner input or textarea. |
| `select(): void` | Selects all text in the input. |
| `getValue(): string` | Returns the current input value. |
| `setValue(value: string): void` | Sets the input value programmatically. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['text-input'] });
</script>
<cx-text-input id="example-text-input" label="Example label" variant="outline"></cx-text-input>
<script type="module">
  const element = document.querySelector('#example-text-input');
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { TextInput } from '@colletdev/react/text-input';

void init({ components: ['text-input'] });

export function Example() {
  return <TextInput label="Example label" variant="outline" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { TextInput } from '@colletdev/vue/text-input';

void init({ components: ['text-input'] });
</script>

<template>
  <TextInput label="Example label" variant="outline" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import TextInput from '@colletdev/svelte/text-input';

  void init({ components: ['text-input'] });
</script>

<TextInput label="Example label" variant="outline" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTextInput } from '@colletdev/angular/text-input';

void init({ components: ['text-input'] });

@Component({
  standalone: true,
  imports: [CxTextInput],
  template: `<cx-text-input label="Example label" variant="outline"></cx-text-input>`,
})
export class Example {}
```

## Thinking (`<cx-thinking>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `variant` | `variant` | `'ghost' \| 'filled'` | no | `Rust default` | Visual style variant. Allowed values: `ghost`, `filled`. Example: `'ghost'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `speed` | `speed` | `string` | no | `""` | Animation speed multiplier for the thinking indicator. Example: `'example'`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['thinking'] });
</script>
<cx-thinking id="example-thinking" variant="ghost"></cx-thinking>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Thinking } from '@colletdev/react/thinking';

void init({ components: ['thinking'] });

export function Example() {
  return <Thinking variant="ghost" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Thinking } from '@colletdev/vue/thinking';

void init({ components: ['thinking'] });
</script>

<template>
  <Thinking variant="ghost" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Thinking from '@colletdev/svelte/thinking';

  void init({ components: ['thinking'] });
</script>

<Thinking variant="ghost" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxThinking } from '@colletdev/angular/thinking';

void init({ components: ['thinking'] });

@Component({
  standalone: true,
  imports: [CxThinking],
  template: `<cx-thinking variant="ghost"></cx-thinking>`,
})
export class Example {}
```

## Toast (`<cx-toast>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `title` | `title` | `string` | no | `""` | Title text. Example: `'Example title'`. |
| `description` | `description` | `string` | no | `""` | Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text. Example: `'Additional context'`. |
| `variant` | `variant` | `'subtle' \| 'filled' \| 'outline'` | no | `Rust default` | Visual style variant. Allowed values: `subtle`, `filled`, `outline`. Example: `'subtle'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `show-icon` | `showIcon` | `boolean` | no | `true` | Whether to display the intent icon. Example: `true`. |
| `icon` | `icon` | `string` | no | `""` | Icon name to display. Example: `'example'`. |
| `dismissible` | `dismissible` | `boolean` | no | `true` | Whether the component can be dismissed by the user. Example: `true`. |
| `dismiss-label` | `dismissLabel` | `string` | no | `""` | Accessible label for the dismiss/close button. Example: `'example'`. |
| `duration` | `duration` | `number` | no | `4250` | Auto-dismiss delay in milliseconds (default: 4250). Set to 0 for persistent toasts. Example: `300`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-dismiss` | `onDismiss` | `CustomEvent<DismissDetail>` | Fires when the user dismisses the component. Detail: `DismissDetail`. |

### Slots

| Slot | Description |
|---|---|
| `action` | Named slot for action content |

### Methods

| Method | Description |
|---|---|
| `dismiss(): void` | Dismisses the toast with exit animation. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['toast'] });
</script>
<cx-toast id="example-toast" title="Example title"></cx-toast>
<script type="module">
  const element = document.querySelector('#example-toast');
  element.addEventListener('cx-dismiss', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Toast } from '@colletdev/react/toast';

void init({ components: ['toast'] });

export function Example() {
  return <Toast title="Example title" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Toast } from '@colletdev/vue/toast';

void init({ components: ['toast'] });
</script>

<template>
  <Toast title="Example title" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Toast from '@colletdev/svelte/toast';

  void init({ components: ['toast'] });
</script>

<Toast title="Example title" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxToast } from '@colletdev/angular/toast';

void init({ components: ['toast'] });

@Component({
  standalone: true,
  imports: [CxToast],
  template: `<cx-toast title="Example title"></cx-toast>`,
})
export class Example {}
```

## ToggleGroup (`<cx-toggle-group>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'outline' \| 'ghost' \| 'filled'` | no | `Rust default` | Visual style variant. Allowed values: `outline`, `ghost`, `filled`. Example: `'outline'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `mode` | `mode` | `'single' \| 'multiple'` | no | `Rust default` | Selection mode (single or multiple). Allowed values: `single`, `multiple`. Example: `'single'`. |
| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | no | `Rust default` | Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`. Example: `'horizontal'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `disabled` | `disabled` | `boolean` | no | `false` | Disables the component, preventing interaction. Example: `true`. |
| `value` | `value` | `string \| string[]` | no | `""` | Controlled pressed item IDs. Pass a single ID or an array. Example: `'example'`. |
| `items` | `items` | `ToggleItem[]` | no | `Rust default` | Typed array of item data objects. Bind as a property; do not stringify it or use children for list items. Example: `[{ id: 'bold', label: 'Bold' }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-input` | `onInput` | `CustomEvent<ToggleDetail>` | Fires on each user edit before the value is committed. Detail: `ToggleDetail`. |
| `cx-change` | `onChange` | `CustomEvent<ToggleDetail>` | Fires when the committed component value or state changes. Detail: `ToggleDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `getValue(): string` | Returns the pressed item ID(s) as comma-separated string. |
| `setValue(value: string): void` | Sets the pressed items (comma-separated IDs or single ID). |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['toggle-group'] });
</script>
<cx-toggle-group id="example-toggle-group" label="Example label"></cx-toggle-group>
<script type="module">
  const element = document.querySelector('#example-toggle-group');
  element.items = [{ id: 'bold', label: 'Bold' }];
  element.addEventListener('cx-input', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { ToggleGroup } from '@colletdev/react/toggle-group';

void init({ components: ['toggle-group'] });

export function Example() {
  return <ToggleGroup label="Example label" items={[{ id: 'bold', label: 'Bold' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { ToggleGroup } from '@colletdev/vue/toggle-group';

void init({ components: ['toggle-group'] });
</script>

<template>
  <ToggleGroup label="Example label" :items="[{ id: 'bold', label: 'Bold' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import ToggleGroup from '@colletdev/svelte/toggle-group';

  void init({ components: ['toggle-group'] });
</script>

<ToggleGroup label="Example label" items={[{ id: 'bold', label: 'Bold' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxToggleGroup } from '@colletdev/angular/toggle-group';

void init({ components: ['toggle-group'] });

@Component({
  standalone: true,
  imports: [CxToggleGroup],
  template: `<cx-toggle-group label="Example label" [items]="[{ id: 'bold', label: 'Bold' }]"></cx-toggle-group>`,
})
export class Example {}
```

## Tooltip (`<cx-tooltip>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `content` | `content` | `string` | no | `""` | Tooltip text shown on hover/focus. Also serves as the accessible name. Example: `'Example content'`. |
| `trigger-html` | `triggerHtml` | `string` | no | `""` | Pre-rendered HTML for the trigger element. Example: `'example'`. |
| `position` | `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | no | `Rust default` | Placement position relative to the trigger. Allowed values: `top`, `bottom`, `left`, `right`. Example: `'top'`. |
| `arrow` | `arrow` | `boolean` | no | `false` | Whether to show an arrow pointing to the trigger. Example: `true`. |
| `open-delay` | `openDelay` | `number` | no | `0` | Delay in milliseconds before the tooltip appears on hover. Example: `300`. |
| `close-delay` | `closeDelay` | `number` | no | `300` | Delay in milliseconds before the tooltip hides after mouse leaves. Example: `300`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| — | — | — | No public events. |

### Slots

| Slot | Description |
|---|---|
| `trigger` (`children` alias) | Named slot for trigger content |

### Methods

| Method | Description |
|---|---|
| — | No imperative methods. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['tooltip'] });
</script>
<cx-tooltip id="example-tooltip" content="Example content"></cx-tooltip>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Tooltip } from '@colletdev/react/tooltip';

void init({ components: ['tooltip'] });

export function Example() {
  return <Tooltip content="Example content" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Tooltip } from '@colletdev/vue/tooltip';

void init({ components: ['tooltip'] });
</script>

<template>
  <Tooltip content="Example content" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Tooltip from '@colletdev/svelte/tooltip';

  void init({ components: ['tooltip'] });
</script>

<Tooltip content="Example content" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTooltip } from '@colletdev/angular/tooltip';

void init({ components: ['tooltip'] });

@Component({
  standalone: true,
  imports: [CxTooltip],
  template: `<cx-tooltip content="Example content"></cx-tooltip>`,
})
export class Example {}
```

## TopBar (`<cx-top-bar>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `mobile-content` | `mobileContent` | `string` | no | `""` | Slot content for the mobile bar center zone. Example: `'example'`. |
| `variant` | `variant` | `'filled' \| 'outline' \| 'ghost'` | no | `Rust default` | Visual style variant. Allowed values: `filled`, `outline`, `ghost`. Example: `'filled'`. |
| `shape` | `shape` | `'sharp' \| 'rounded' \| 'pill'` | no | `Rust default` | Corner radius style. Allowed values: `sharp`, `rounded`, `pill`. Example: `'sharp'`. |
| `position` | `position` | `'static' \| 'sticky' \| 'fixed'` | no | `Rust default` | Placement position relative to the trigger. Allowed values: `static`, `sticky`, `fixed`. Example: `'static'`. |
| `intent` | `intent` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | no | `Rust default` | Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`. Example: `'neutral'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `crush` | `crush` | `boolean` | no | `false` | Collapses the top bar to a compact height. Example: `true`. |
| `crush-threshold` | `crushThreshold` | `number` | no | `0` | Viewport width in pixels below which the top bar collapses to mobile mode. Example: `1`. |
| `movable` | `movable` | `boolean` | no | `false` | Enables drag-to-reorder for top bar items. Example: `true`. |
| `drawer-side` | `drawerSide` | `'top' \| 'left' \| 'right' \| 'bottom'` | no | `Rust default` | Which viewport edge the mobile drawer slides from. Allowed values: `top`, `left`, `right`, `bottom`. Example: `'top'`. |
| `drawer-size` | `drawerSize` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | no | `Rust default` | Width preset for the mobile navigation drawer. Allowed values: `sm`, `md`, `lg`, `xl`, `full`. Example: `'sm'`. |
| `separators-after` | `separatorsAfter` | `number[]` | no | `Rust default` | Array of group indices after which to render a visual separator. Example: `[0, 2]`. |
| `groups` | `groups` | `SidebarGroup[]` | no | `Rust default` | Navigation item groups rendered in the top bar. Example: `[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]`. |
| `open` | `open` | `boolean` | no | `false` | Whether the component is in an open/expanded state. Example: `true`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-close` | `onClose` | `CustomEvent<CloseDetail>` | Fires when the component closes. Detail: `CloseDetail`. |
| `cx-navigate` | `onNavigate` | `CustomEvent<NavigateDetail>` | Fires when the user activates a navigation item. Detail: `NavigateDetail`. |
| `cx-crush` | `onCrush` | `CustomEvent<CrushDetail>` | Fires when cx-crush occurs. Detail: `CrushDetail`. |
| `cx-move` | `onMove` | `CustomEvent<MoveDetail>` | Fires when cx-move occurs. Detail: `MoveDetail`. |

### Slots

| Slot | Description |
|---|---|
| `leading` | Named slot for leading content |
| `content` | Named slot for content content |
| `trailing` | Named slot for trailing content |
| `mobile-leading` | Named slot for mobile-leading content |
| `mobile-trailing` | Named slot for mobile-trailing content |

### Methods

| Method | Description |
|---|---|
| `open(): void` | Opens the mobile navigation drawer. |
| `close(): void` | Closes the mobile navigation drawer. |
| `toggle(): void` | Toggles the mobile navigation drawer open/close state. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['top-bar'] });
</script>
<cx-top-bar id="example-top-bar" label="Example label"></cx-top-bar>
<script type="module">
  const element = document.querySelector('#example-top-bar');
  element.groups = [{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }];
  element.addEventListener('cx-close', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { TopBar } from '@colletdev/react/top-bar';

void init({ components: ['top-bar'] });

export function Example() {
  return <TopBar label="Example label" groups={[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { TopBar } from '@colletdev/vue/top-bar';

void init({ components: ['top-bar'] });
</script>

<template>
  <TopBar label="Example label" :groups="[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import TopBar from '@colletdev/svelte/top-bar';

  void init({ components: ['top-bar'] });
</script>

<TopBar label="Example label" groups={[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTopBar } from '@colletdev/angular/top-bar';

void init({ components: ['top-bar'] });

@Component({
  standalone: true,
  imports: [CxTopBar],
  template: `<cx-top-bar label="Example label" [groups]="[{ label: 'Main', items: [{ id: 'home', label: 'Home', href: '/' }] }]"></cx-top-bar>`,
})
export class Example {}
```

## TreeView (`<cx-tree-view>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | no | `""` | Visible label text. Example: `'Example label'`. |
| `variant` | `variant` | `'default' \| 'compact' \| 'outline'` | no | `Rust default` | Visual style variant. Allowed values: `default`, `compact`, `outline`. Example: `'default'`. |
| `selection-mode` | `selectionMode` | `'none' \| 'single' \| 'multiple'` | no | `Rust default` | Selection behavior: 'none' (display only), 'single' (one item), or 'multiple' (checkboxes with tri-state cascade). Allowed values: `none`, `single`, `multiple`. Example: `'none'`. |
| `size` | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | no | `Rust default` | Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. Example: `'xs'`. |
| `nodes` | `nodes` | `CxTreeNode[]` | no | `Rust default` | Recursive tree structure. Each node has id, label, optional icon/children/expanded/selected/disabled. When expandedIds or selectedIds are set, per-node expanded/selected fields are ignored. Example: `[{ id: 'root', label: 'Root' }]`. |
| `expanded-ids` | `expandedIds` | `string[]` | no | `Rust default` | Controlled expanded state — array of node IDs to expand. When set, overrides per-node expanded fields. Enables controlled expand/collapse without rebuilding the tree. Example: `['item-1']`. |
| `selected-ids` | `selectedIds` | `string[]` | no | `Rust default` | Controlled selected state — array of node IDs to select. When set, overrides per-node selected fields. Enables controlled selection without rebuilding the tree. Example: `['item-1']`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<TreeChangeDetail>` | Fires when the committed component value or state changes. Detail: `TreeChangeDetail`. |
| `cx-select` | `onSelect` | `CustomEvent<TreeSelectDetail>` | Fires when the user selects an item or data node. Detail: `TreeSelectDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `expandAll(): void` | Expands all branch nodes in the tree. |
| `collapseAll(): void` | Collapses all branch nodes in the tree. |
| `expand(nodeId: string): void` | Expands a specific node by ID. |
| `collapse(nodeId: string): void` | Collapses a specific node by ID. |
| `selectAll(): void` | Selects all non-disabled nodes (multi-select mode only). |
| `deselectAll(): void` | Deselects all nodes. |
| `getSelectedIds(): string[]` | Returns the IDs of all currently selected nodes. |
| `getExpandedIds(): string[]` | Returns the IDs of all currently expanded nodes. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['tree-view'] });
</script>
<cx-tree-view id="example-tree-view" label="Example label"></cx-tree-view>
<script type="module">
  const element = document.querySelector('#example-tree-view');
  element.nodes = [{ id: 'root', label: 'Root' }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { TreeView } from '@colletdev/react/tree-view';

void init({ components: ['tree-view'] });

export function Example() {
  return <TreeView label="Example label" nodes={[{ id: 'root', label: 'Root' }]} />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { TreeView } from '@colletdev/vue/tree-view';

void init({ components: ['tree-view'] });
</script>

<template>
  <TreeView label="Example label" :nodes="[{ id: 'root', label: 'Root' }]" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import TreeView from '@colletdev/svelte/tree-view';

  void init({ components: ['tree-view'] });
</script>

<TreeView label="Example label" nodes={[{ id: 'root', label: 'Root' }]} />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTreeView } from '@colletdev/angular/tree-view';

void init({ components: ['tree-view'] });

@Component({
  standalone: true,
  imports: [CxTreeView],
  template: `<cx-tree-view label="Example label" [nodes]="[{ id: 'root', label: 'Root' }]"></cx-tree-view>`,
})
export class Example {}
```

## Treemap (`<cx-treemap>`)

### Props

| Attribute | Framework prop | Type | Required | Default | Description and example |
|---|---|---|---|---|---|
| `id` | `id` | `string` | no | `""` | Unique identifier for the element. Example: `'example-id'`. |
| `label` | `label` | `string` | yes | `—` | Visible label text. Example: `'Example label'`. |
| `shape` | `shape` | `'sharp' \| 'rounded'` | no | `Rust default` | Border radius style for cells: 'sharp' (default) or 'rounded'. Allowed values: `sharp`, `rounded`. Example: `'sharp'`. |
| `fit` | `fit` | `'content' \| 'fill'` | no | `Rust default` | Grid sizing mode: 'content' (default, 5:3 aspect ratio) or 'fill' (fills parent container height). Allowed values: `content`, `fill`. Example: `'content'`. |
| `current-root` | `currentRoot` | `string` | no | `""` | ID of the node to zoom into. When set, renders that node's children. Empty = root view. Example: `'example'`. |
| `min-cell-area` | `minCellArea` | `number` | no | `0` | Minimum cell area fraction (0–1) before a node is aggregated into "Other" (default: 0.001). Example: `1`. |
| `show-values` | `showValues` | `boolean` | no | `true` | Whether to display formatted numeric values inside cells (default: true). Example: `true`. |
| `nodes` | `nodes` | `TreemapNode[]` | yes | `—` | Hierarchical tree data. Each node has id, label, value (numeric — determines cell area), optional intent, children (recursive), disabled. Example: `[{ id: 'root', label: 'Root', value: 100 }]`. |

### Events

| DOM event | React/Svelte callback | Type | Description |
|---|---|---|---|
| `cx-change` | `onChange` | `CustomEvent<TreemapChangeDetail>` | Fires when the committed component value or state changes. Detail: `TreemapChangeDetail`. |
| `cx-select` | `onSelect` | `CustomEvent<TreemapSelectDetail>` | Fires when the user selects an item or data node. Detail: `TreemapSelectDetail`. |
| `cx-hover` | `onHover` | `CustomEvent<TreemapHoverDetail>` | Fires when the active hover target changes. Detail: `TreemapHoverDetail`. |

### Slots

| Slot | Description |
|---|---|
| — | No public slots. |

### Methods

| Method | Description |
|---|---|
| `zoomTo(nodeId: string): void` | Zooms into a specific node by ID. Fires cx-change. |
| `zoomOut(): void` | Zooms out one level toward the root. Fires cx-change. |
| `resetZoom(): void` | Returns to the root view. Fires cx-change. |

### Runnable examples

#### Core / HTML

Install: `npm install @colletdev/core`

```html
<script type="module">
  import { init } from '@colletdev/core';
  await init({ components: ['treemap'] });
</script>
<cx-treemap id="example-treemap" label="Example label" shape="sharp"></cx-treemap>
<script type="module">
  const element = document.querySelector('#example-treemap');
  element.nodes = [{ id: 'root', label: 'Root', value: 100 }];
  element.addEventListener('cx-change', event => console.log(event.detail));
</script>
```

#### React

Install: `npm install @colletdev/core @colletdev/react`

```tsx
import { init } from '@colletdev/core';
import { Treemap } from '@colletdev/react/treemap';

void init({ components: ['treemap'] });

export function Example() {
  return <Treemap label="Example label" nodes={[{ id: 'root', label: 'Root', value: 100 }]} shape="sharp" />;
}
```

#### Vue

Install: `npm install @colletdev/core @colletdev/vue`

```vue
<script setup lang="ts">
import { init } from '@colletdev/core';
import { Treemap } from '@colletdev/vue/treemap';

void init({ components: ['treemap'] });
</script>

<template>
  <Treemap label="Example label" :nodes="[{ id: 'root', label: 'Root', value: 100 }]" shape="sharp" />
</template>
```

#### Svelte

Install: `npm install @colletdev/core @colletdev/svelte`

```svelte
<script lang="ts">
  import { init } from '@colletdev/core';
  import Treemap from '@colletdev/svelte/treemap';

  void init({ components: ['treemap'] });
</script>

<Treemap label="Example label" nodes={[{ id: 'root', label: 'Root', value: 100 }]} shape="sharp" />
```

#### Angular

Install: `npm install @colletdev/core @colletdev/angular`

```ts
import { Component } from '@angular/core';
import { init } from '@colletdev/core';
import { CxTreemap } from '@colletdev/angular/treemap';

void init({ components: ['treemap'] });

@Component({
  standalone: true,
  imports: [CxTreemap],
  template: `<cx-treemap label="Example label" [nodes]="[{ id: 'root', label: 'Root', value: 100 }]" shape="sharp"></cx-treemap>`,
})
export class Example {}
```