# `m-navigation-indicator`

A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `steps*` | The total number of steps to display. | `number` |   |
| `selected*` | The index of the currently active step (zero-based). | `number` | `$bindable()` |
| `action` | The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon. | `'pause'` `'resume'` | `resume` |
| `label` | The text label displayed in the Resume or Pause button. | `string` |   |
| `player` | If `true`, hides the Resume or Pause button next to the steps. | `boolean` | `true` |
| `onAction` | Callback triggered on action button click. | `() => void` |   |

## Events

| Name | Description | Type |
|------|------|-------------|
| `action` | Emits when the action button is clicked. | `CustomEvent<void` |

