# `m-stepper-bottom-bar`

A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `step` | Current step of the stepper bottom bar. | `number` | `$bindable(0)` |
| `steps` | Total number of steps of the stepper bottom bar. | `number` | `$bindable(0)` |
| `cancel` | If `true`, display the cancel button. | `boolean` | `true` |
| `cancellabel` | Label for the cancel button. | `string` | `Cancel` |
| `previouslabel` | Label for the previous button. | `string` | `Previous` |
| `nextlabel` | Label for the next button. | `string` | `Next` |
| `validatelabel` | Label for the validate button. | `string` | `Validate` |
| `onCancel` | Callback fired when the cancel button is clicked. | `() => void` |   |
| `onChange` | Callback fired when the step change. | `(index: number) => void` |   |
| `onValidate` | Callback fired when the validate button is clicked. | `() => void` |   |

## Events

| Name | Description | Type |
|------|------|-------------|
| `cancel` | Emits when the cancel button is clicked. | `CustomEvent<void>` |
| `change` | Emits when the step change. | `CustomEvent<number>` |
| `validate` | Emits when the validate button is clicked. | `CustomEvent<void>` |

