# XWUICheckoutStepper

A horizontal multi-step checkout progress bar: a numbered circle per step (done / current / upcoming) joined by connector lines, the current step's label and optional description, and "Back" / "Next" navigation (the last step's "Next" becomes `config.completeLabel`, e.g. "Place order"). When `config.allowBackNavigation` is true (the default), clicking a completed step's circle jumps straight to it.

## Events

| Event | Callback | Subscriber | `detail` |
|---|---|---|---|
| `xwui-checkout-stepper:step-change` | `onStepChange` | `onStepChange(handler)` | `{ index, step }` |
| `xwui-checkout-stepper:complete` | `onComplete` | `onComplete(handler)` | — |

## Usage

```ts
import { XWUICheckoutStepper } from '@exonware/xwui/industry';

const stepper = new XWUICheckoutStepper(host, {
  steps: [
    { id: 'cart', label: 'Cart' },
    { id: 'shipping', label: 'Shipping' },
    { id: 'payment', label: 'Payment' },
    { id: 'review', label: 'Review' },
  ],
  currentStepIndex: 1,
});

stepper.onComplete(() => api.placeOrder());
```

```api
```