npm package: @litforge/step-indicator
Description: A step indicator component for displaying progress through multi-step processes like wizards, onboarding flows, and forms.
Latest version: 0.1.22

# @litforge/step-indicator

A step indicator component for displaying progress through multi-step processes like wizards, onboarding flows, and forms.

## Installation

```bash
npm install @litforge/step-indicator
# or
pnpm add @litforge/step-indicator
# or
yarn add @litforge/step-indicator
```

## Usage

```typescript
import '@litforge/step-indicator';
```

```html
<step-indicator
  .steps="${steps}"
  current-step="${currentStep}"
  variant="default"
  ?clickable="${true}"
  @step-click="${handleStepClick}"
></step-indicator>
```

## Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `steps` | `Step[]` | `[]` | Array of step objects |
| `currentStep` | `number` | `0` | Index of the current step (0-based) |
| `variant` | `'default' \| 'compact' \| 'vertical'` | `'default'` | Visual variant |
| `clickable` | `boolean` | `false` | Allow clicking steps to navigate |

## Step Interface

```typescript
interface Step {
  id: string;
  label: string;
  description?: string;
  completed?: boolean;
  disabled?: boolean;
}
```

## Events

### `step-click`

Fired when a step is clicked (only if `clickable` is true and step is not disabled/current).

```typescript
interface StepClickDetail {
  stepId: string;
  stepIndex: number;
}
```

## Variants

- **default**: Horizontal layout with descriptions
- **compact**: Horizontal layout without descriptions, smaller numbers
- **vertical**: Vertical layout with descriptions

## Examples

### Basic Usage

```html
<step-indicator
  .steps="${[
    { id: 'step1', label: 'Step 1', description: 'First step' },
    { id: 'step2', label: 'Step 2', description: 'Second step' },
    { id: 'step3', label: 'Step 3', description: 'Third step' }
  ]}"
  current-step="${1}"
></step-indicator>
```

### With Completed Steps

```html
<step-indicator
  .steps="${[
    { id: 'step1', label: 'Step 1', completed: true },
    { id: 'step2', label: 'Step 2', completed: true },
    { id: 'step3', label: 'Step 3' }
  ]}"
  current-step="${2}"
></step-indicator>
```

### Clickable Steps

```html
<step-indicator
  .steps="${steps}"
  current-step="${currentStep}"
  clickable
  @step-click="${(e) => {
    console.log('Clicked:', e.detail.stepId);
  }}"
></step-indicator>
```

## CSS Variables

The component uses CSS variables for theming:

- `--lf-step-indicator-font-family`
- `--lf-step-indicator-gap`
- `--lf-step-number-size`
- `--lf-step-number-bg`
- `--lf-step-number-color`
- `--lf-step-number-current-bg`
- `--lf-step-number-completed-bg`
- `--lf-step-label-color`
- `--lf-step-description-color`
- `--lf-step-connector-bg`

## Framework Integration

### Vue 3 / Nuxt

```vue
<script setup>
import '@litforge/step-indicator';
import { ref } from 'vue';

const steps = ref([
  { id: 'step1', label: 'Step 1' },
  { id: 'step2', label: 'Step 2' },
]);
const currentStep = ref(0);
</script>

<template>
  <step-indicator
    :steps="steps"
    :current-step="currentStep"
  />
</template>
```

Register in `nuxt.config.ts`:

```typescript
vue: {
  compilerOptions: {
    isCustomElement: (tag) => tag === 'step-indicator'
  }
}
```