# Steps

> A numbered flow, with the steps behind you marked done.

`current` is the index of the step in progress. Everything before it is complete and gets a tick; everything after is still to come. The current one is marked `aria-current="step"`, so it is announced as well as coloured.

## Basic steps

```javascript
steps({
  current: 1,
  items: [
    { title: 'Install' },
    { title: 'Write a page' },
    { title: 'Build' },
    { title: 'Deploy' },
  ],
})
```

## With descriptions

```javascript
steps({
  current: 2,
  items: [
    { title: 'Install', description: 'npm install -D sitelo' },
    { title: 'Write a page', description: 'src/index.ht.js' },
    { title: 'Build', description: 'sitelo build' },
    { title: 'Deploy', description: 'Publish dist/' },
  ],
})
```

## Vertical

Better when the descriptions are longer than a few words.

```javascript
steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Add the package', description: 'sitelo brings its own Vite, so there is nothing else to install.' },
    { title: 'Write a function that returns HTML', description: 'One file under src/ is a whole site.' },
    { title: 'Publish the output', description: 'dist/ is plain static files — any host will take them.' },
  ],
})
```

## Nothing done yet

```javascript
steps({ current: 0, items: ['Install', 'Configure', 'Deploy'] })
```

## All done

Set `current` past the last index and every step reads as complete.

```javascript
steps({ current: 3, items: ['Install', 'Configure', 'Deploy'] })
```

## On a phone

A horizontal row has nowhere to go on a narrow screen, so it turns vertical on its own below 40rem — no prop needed. Narrow this window to see it.

## Labelling it

The list is an `<ol>`, which already carries the order. Add `label` when the page has more than one set of steps and they need telling apart.

```javascript
steps({
  label: 'Deployment progress',
  current: 1,
  items: ['Build', 'Upload', 'Invalidate cache'],
})
```

## Advancing the flow

The state is three class names and one `aria-current`, spread across every step. `setStep()` moves them together, so a wizard that advances in the browser is one call rather than a loop.

An index past the last step leaves every one of them complete, which is what a finished flow looks like. Or from an event attribute, with nothing bundled:

`Anywhere`

```javascript
button({ onclick: "import('/su/steps.js').then(m=>m.set('checkout',2))" }, 'Next')
```

Or from your own module, when there is already one running:

`src/main.js`

```javascript
import { setStep } from 'sitelo/ui/client'

setStep('checkout', 2)
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array` | `[]` | Strings, or { title, description } objects. |
| `current` | `number` | `0` | Index of the step in progress. |
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout. Horizontal turns vertical under 40rem. |
| `label` | `string` | — | Accessible name for the list. |