---

## TableOfContents
TableOfContents component

**Import:** `import { TableOfContents } from '@urbicon-ui/docs';`

### Examples
```svelte
<TableOfContents
  navigation={[
    { id: 'usage', title: 'Usage' },
    { id: 'api', title: 'API', children: [{ id: 'props', title: 'Props' }] }
  ]}
/>
```

### Variants
- position: left, right (default: right)
- width: lg, md, sm (default: md)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| navigation | `Array<{
    id: string;
    title: string;
    order?: number;
    href?: string;
    children?: Array<{ id: string; title: string; order?: number; href?: string }>;
  }>` | yes |  | Navigation items with optional nested children. |
| ...TableOfContentsVariantProps | `VariantProps` | no |  | Styling variants from TableOfContentsVariantProps |
| class | `string` | no |  | Extra classes merged onto the root aside element. |
| related | `RelatedLink[]` | no |  | Optional Editorial `// RELATED` block rendered below the main nav. Each entry needs a pre-resolved `href` (the TOC does not call `resolve()`, mirroring the existing nav behaviour). When omitted, the related block does not render at all. |
| showCodeToggle | `boolean` | no | true | Render the Editorial `// CODE` block at the bottom of the TOC, hosting the global show-/hide-all-code toggle. Requires a host page that provided a `CodeVisibilityStore` via context — the block silently skips itself if no store is found, so callers outside of `DocsLayout` don't have to know about it. |
| slotClasses | `Partial<Record<'aside' | 'title' | 'nav' | 'relatedTitle' | 'relatedNav' | 'relatedLink' | 'codeTitle' | 'codeToggle', string>>` | no |  | Per-slot class overrides. |
| title | `string` | no |  | Heading rendered above the nav links. |
| trackScroll | `boolean` | no |  | Enable scroll-based active section tracking. |
| unstyled | `boolean` | no |  | Remove all default tv styles. |
| position | `'left' | 'right'` | no | right | Controls the position behavior and appearance of the TableOfContents component. Available options: left, right. |
| width | `'lg' | 'md' | 'sm'` | no | md | Controls the width behavior and appearance of the TableOfContents component. Available options: lg, md, sm. |

Inherited from:
- TableOfContentsVariantProps (external)

### Slots (slotClasses keys)
`aside`, `title`, `nav`, `relatedTitle`, `relatedNav`, `relatedLink`, `codeTitle`, `codeToggle`