tabler/shared/ui/ProgressSteps.astro

---
interface Props {
  count?: number
  /** Step labels; overrides `count` when provided. */
  labels?: string[]
  active?: number
  color?: string
  class?: string
  id?: string
  /** aria-label attribute of the <ol>. */
  ariaLabel?: string
}

const { count: countProp = 3, labels: labelsProp, active = 1, color = 'primary', class: className, id, ariaLabel } = Astro.props

const labels = labelsProp ?? []
const count = labelsProp ? labels.length : countProp
const steps = Array.from({ length: count }, (_, i) => ({
  index: i + 1,
  label: labels[i] || `Step ${i + 1}`,
}))
---

<ol class={`progress-steps${className ? ` ${className}` : ''}`} id={id} aria-label={ariaLabel}>
  {
    steps.map((step) => (
      <li class={`progress-steps-item${step.index <= active ? ` bg-${color}` : ''}`} aria-current={step.index === active ? 'step' : undefined}>
        <span class="visually-hidden">{step.label}</span>
      </li>
    ))
  }
</ol>