---

## 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)
- optionalNote: false, true
- 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. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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' | Stack direction. |
| 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 property |
| slotClasses | `Partial<Record<StepperSlots, string>>` | no |  | Per-slot class overrides. Slots: base | stepItem | step | indicatorColumn | indicator | labelGroup | label | description | separator | content. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| 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. |
| optionalNote | `'false' | 'true'` | no |  | Controls the optionalNote behavior and appearance of the Stepper component. Available options: false, true. |

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

### Types
```ts
interface StepperContext {
readonly activeStep: number;
  readonly orientation: 'horizontal' | 'vertical';
  readonly variant: 'default' | 'outlined' | 'minimal';
  readonly size: 'sm' | 'md' | 'lg';
  readonly tier: InteractiveTier;
  readonly linear: boolean;
  readonly clickable: boolean;
  readonly disabled: boolean;
  /** SSR/first-paint index: the order steps initialise in. */
  registerStep: () => number;
  /** Client-side: register the step's `<li>` so its index can follow DOM order. */
  attachStep: (node: HTMLElement) => void;
  detachStep: (node: HTMLElement) => void;
  /** Index of the node in document order, or -1 while it is not attached. */
  stepIndexOf: (node: HTMLElement) => number;
  goToStep: (index: number) => void;
}
```

```ts
type InteractiveTier = 'commit' | 'modify'
```

### Slots (slotClasses keys)
`base`, `stepItem`, `step`, `indicatorColumn`, `indicator`, `labelGroup`, `label`, `description`, `separator`, `content`