# Timeline

Display a chronological list of events with bullets and connector lines. Use `activeIndex`
to mark progress through a flow — later items render as pending.

## Examples

### Default

```tsx
import { Timeline } from '@var-ui/react';

<Timeline activeIndex={1} tone="accent">
  <Timeline.Item
    title="Created"
    timestamp="2 hours ago"
    description="Issue opened"
    icon="check"
  />
  <Timeline.Item
    title="In review"
    timestamp="1 hour ago"
    description="Waiting on approval"
    icon="clock"
  />
  <Timeline.Item title="Merged" timestamp="Just now" description="PR #42" tone="success" icon="success" />
</Timeline>
```

```astro
---
import { Timeline, TimelineItem } from '@var-ui/astro';
---

<Timeline tone="accent">
  <TimelineItem title="Created" timestamp="2 hours ago" description="Issue opened" />
  <TimelineItem title="In review" timestamp="1 hour ago" description="Waiting on approval" />
  <TimelineItem title="Merged" timestamp="Just now" description="PR #42" tone="success" />
</Timeline>
```

```html
<ol class="var-ui-timeline" data-timeline>
  <li class="var-ui-timeline__item" data-active>
  ...
</ol>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| activeIndex | number \| undefined | no |  | Index of the last active item (inclusive). Later items render as pending. |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| items | TimelineItemData[] \| undefined | no |  |  |
| size | TimelineSize \| undefined | no |  |  |
| tone | TimelineTone \| undefined | no |  |  |

## Accessibility

Timeline items render as an ordered list (`<ol>` / `<li>`). Bullets are decorative and
marked `aria-hidden` when they contain no meaningful content.