# Timeline

Display a series of events or steps in a vertical or horizontal timeline.

This component is conceptually inspired by Flux Timeline. The Angular API, slot names, styling tokens, and examples are implemented for this library's shadcn-style component system.

## Import

```ts
import {
  TimelineBlockComponent,
  TimelineComponent,
  TimelineContentComponent,
  TimelineIndicatorComponent,
  TimelineItemComponent,
  TimelineSubgridComponent,
} from '@edsis/component/timeline';
```

## Usage

```html
<Timeline>
  <TimelineItem status="complete">
    <TimelineIndicator>1</TimelineIndicator>
    <TimelineContent>
      <h3 class="text-sm font-medium">Submit</h3>
      <p class="text-muted-foreground">Complete the form and provide all necessary assets.</p>
    </TimelineContent>
  </TimelineItem>
</Timeline>
```

## Composition

```text
Timeline
|-- TimelineItem
|   |-- TimelineIndicator
|   `-- TimelineContent
|-- TimelineItem
|   `-- TimelineBlock
|       `-- TimelineSubgrid
```

## Horizontal Status

```html
<Timeline horizontal>
  <TimelineItem status="complete">
    <TimelineIndicator>1</TimelineIndicator>
    <TimelineContent>Order confirmed</TimelineContent>
  </TimelineItem>
  <TimelineItem status="current">
    <TimelineIndicator>2</TimelineIndicator>
    <TimelineContent>On its way</TimelineContent>
  </TimelineItem>
  <TimelineItem status="incomplete">
    <TimelineIndicator>3</TimelineIndicator>
    <TimelineContent>Delivered</TimelineContent>
  </TimelineItem>
</Timeline>
```

## Inputs

| Part                         | Input        | Type                                 | Default    |
| ---------------------------- | ------------ | ------------------------------------ | ---------- |
| `TimelineComponent`          | `horizontal` | `boolean`                            | `false`    |
| `TimelineComponent`          | `align`      | `start \| baseline \| center \| end` | `center`   |
| `TimelineComponent`          | `size`       | `default \| lg`                      | `default`  |
| `TimelineItemComponent`      | `status`     | `complete \| current \| incomplete`  | `null`     |
| `TimelineItemComponent`      | `align`      | `start \| baseline \| center \| end` | root value |
| `TimelineItemComponent`      | `size`       | `default \| lg`                      | root value |
| `TimelineIndicatorComponent` | `variant`    | `default \| bare`                    | `default`  |
| `TimelineIndicatorComponent` | `status`     | `complete \| current \| incomplete`  | item value |
| `TimelineIndicatorComponent` | `color`      | standard color token                 | `null`     |

## Spacing

The root exposes CSS variables for spacing and indicator sizing.

```html
<Timeline class="[--timeline-item-gap:3rem] [--timeline-content-gap:1rem]">
  <!-- timeline items -->
</Timeline>
```

## Accessibility

- Use semantic headings and text inside `TimelineContent`.
- Give icon-only indicators an accessible label when the icon communicates meaning.
- Keep chronological order in DOM order for screen readers.
- Do not rely on color alone; pair status indicators with text content.