---

## Stepper
Multi-step progress indicator with horizontal/vertical layout,
clickable navigation, and per-step state overrides (error, warning).

**Import:** `import { Stepper } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Stepper activeStep={1}>
  <StepperStep label="Account" description="Create your account" />
  <StepperStep label="Profile" description="Set up your profile" />
  <StepperStep label="Review" description="Review and submit" />
</Stepper>
```

```svelte
<Stepper activeStep={0} orientation="vertical" clickable>
  <StepperStep label="Details" description="Enter your information">
    <p>Form content here...</p>
  </StepperStep>
  <StepperStep label="Confirm" description="Verify and submit" />
</Stepper>
```

### Variants
- variant: default, minimal, outlined (default: default)
- size: lg, md, sm (default: md)
- orientation: horizontal, vertical (default: horizontal)
- tier: commit, modify (default: commit)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet` | yes |  | StepperStep children. |
| ...HTMLAttributes<HTMLOListElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...StepperVariants | `VariantProps` | no |  | Styling variants from StepperVariants |
| activeStep | `number` | no | 0 | Current active step index (0-based). Supports bind:activeStep. |
| class | `string` | no |  | Extra classes merged onto the root element. |
| clickable | `boolean` | no | false | Allow clicking step indicators to navigate between steps. |
| disabled | `boolean` | no | false | Disable all steps and prevent navigation. |
| linear | `boolean` | no | false | Restrict navigation to sequential order — only completed steps and the next step are clickable. |
| onStepChange | `(step: number) => void` | no |  | Fires when a step is activated via click. Passes the new step index. |
| orientation | `'horizontal' | 'vertical'` | no | 'horizontal' | Orientation property for the Stepper component |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Stepper: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| responsive | `boolean | { breakpoint?: number }` | no | false | Container-responsive mode: when the Stepper's container is narrower than `breakpoint`, automatically switch to `orientation="vertical"` and `variant="minimal"` so the steps stay readable.  - `false` (default): never auto-switch. - `true`: switch below 640 px container width. - `{ breakpoint: 480 }`: switch below 480 px.  Uses `ResizeObserver` on the root element — works inside Drawers, Cards, or split layouts where viewport-based media queries miss the actual available width. |
| size | `'sm' | 'md' | 'lg'` | no | 'md' | Size variant that controls dimensions and spacing of the Stepper |
| slotClasses | `Partial<Record<StepperSlots, string>>` | no |  | Per-slot class overrides. Slots: base | stepItem | step | indicatorColumn | indicator | labelGroup | label | description | separator | content |
| tier | `InteractiveTier` | no | 'commit' | Semantic radius tier propagated to every StepperStep. Default `commit` — step indicators read as identity circles. Set to `modify` (or inherit via TierContext from a wrapping `<Toolbar tier="modify">`) to render a compact soft-rectangle stepper for inline wizards. |
| unstyled | `boolean` | no |  | Remove all default tv() classes. |
| variant | `'default' | 'outlined' | 'minimal'` | no | 'default' | Visual style of step indicators. |

Inherited from:
- Omit<StepperVariants, 'stepState' | 'clickable' | 'stepDisabled' | 'separatorComplete'> (omit-pattern)
- Omit<HTMLAttributes<HTMLOListElement>, 'children'> (omit-pattern)