# Progress Indicator

A component for displaying multi-step progress, such as wizards, checkout flows, or onboarding processes.

## Visual Structure

```
ga-progress-indicator [--vertical|--horizontal]
  ├── ga-progress-indicator__item [--completed|--current|--incomplete|--error|--disabled]
  │   ├── ga-progress-indicator__indicator
  │   │   ├── ga-icon
  │   │   └── ga-progress-indicator__current-dot (optional, for current state)
  │   └── ga-progress-indicator__content
  │       ├── ga-progress-indicator__label
  │       │   ├── ga-progress-indicator__label-text
  │       │   └── ga-progress-indicator__label-state (optional)
  │       └── ga-progress-indicator__description (optional)
  ├── ga-progress-indicator__item
  └── ...
```

## Elements Hierarchy

### Core Block

- `ga-progress-indicator` - Main container for the progress indicator component

### Mandatory Elements

- `ga-progress-indicator__item` - Individual step item (use `<button>` for clickable steps). The border-top/border-left acts as the connector line.
- `ga-progress-indicator__indicator` - Icon container (positioned to the left of content)
- `ga-progress-indicator__content` - Container for label and description (aligned vertically)
- `ga-progress-indicator__label` - Label wrapper
- `ga-progress-indicator__label-text` - The text content of the step label

### Optional Elements

- `ga-progress-indicator__current-dot` - Small dot inside the indicator for current state
- `ga-progress-indicator__label-state` - Additional text for the label (e.g., "(optional)")
- `ga-progress-indicator__description` - Helper text below the label (aligned with label, not icon)

### Block Modifiers

- `ga-progress-indicator--vertical` - Arranges items in a vertical column (border-left as connector)
- `ga-progress-indicator--horizontal` - Arranges items in a horizontal row (border-top as connector)

### Item State Modifiers

- `ga-progress-indicator__item--completed` - Step has been completed. Use `CircleCheckBigIcon` (size 22).
- `ga-progress-indicator__item--current` - Currently active step. Use `CircleDashedIcon` (size 22) with `ga-progress-indicator__current-dot` inside.
- `ga-progress-indicator__item--incomplete` - Step not yet reached. Use `CircleDashedIcon` (size 22).
- `ga-progress-indicator__item--error` - Step has an error. Use `OctagonAlertIcon` (size 22).
- `ga-progress-indicator__item--disabled` - Step is disabled/non-interactive. Use `CircleDashedIcon` (size 22).

## Horizontal

```html
<div class="ga-progress-indicator ga-progress-indicator--horizontal w-250">
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--completed"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-check-big, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Account setup</span>
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--current"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
      <span class="ga-progress-indicator__current-dot"></span>
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Personal info</span>
      </span>
      <span class="ga-progress-indicator__description">
        Provide your personal details.
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--incomplete"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Preferences</span>
        <span class="ga-progress-indicator__label-state">(optional)</span>
      </span>
      <span class="ga-progress-indicator__description">
        Set your notification preferences.
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--error"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: octagon-alert, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Verification</span>
      </span>
      <span class="ga-progress-indicator__description">
        Identity verification failed.
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--disabled"
    disabled=""
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Confirmation</span>
      </span>
      <span class="ga-progress-indicator__description">
        Finalize your registration.
      </span>
    </div>
  </button>
</div>
```

## Vertical

```html
<div class="ga-progress-indicator ga-progress-indicator--vertical w-60">
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--completed"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-check-big, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Account setup</span>
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--current"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
      <span class="ga-progress-indicator__current-dot"></span>
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Personal info</span>
      </span>
      <span class="ga-progress-indicator__description">
        Provide your personal details.
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--incomplete"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Preferences</span>
        <span class="ga-progress-indicator__label-state">(optional)</span>
      </span>
      <span class="ga-progress-indicator__description">
        Set your notification preferences.
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--error"
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: octagon-alert, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Verification</span>
      </span>
      <span class="ga-progress-indicator__description">
        Identity verification failed.
      </span>
    </div>
  </button>
  <button
    class="ga-progress-indicator__item ga-progress-indicator__item--disabled"
    disabled=""
  >
    <div class="ga-progress-indicator__indicator">
      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
    </div>
    <div class="ga-progress-indicator__content">
      <span class="ga-progress-indicator__label">
        <span class="ga-progress-indicator__label-text">Confirmation</span>
      </span>
      <span class="ga-progress-indicator__description">
        Finalize your registration.
      </span>
    </div>
  </button>
</div>
```