tabler/shared/ui/Steps.astro

---
// Step styling uses strict equality for `active`, so a string (e.g. active="2") never matches the integer loop index.
interface Props {
  count?: number | string
  active?: number | string
  numbers?: boolean
  color?: string
  size?: string
  showTooltip?: boolean
  showTitle?: boolean
}

const { count = 4, active = 3, numbers, color, size, showTooltip, showTitle } = Astro.props

const classes = ['steps', numbers && 'steps-counter', color && `steps-${color}`, size && `steps-${size}`]

const activeNum = Number(active)
const total = Number(count)
const steps = Array.from({ length: total }, (_, i) => i + 1)
---

<ol class:list={classes} aria-label="Progress">
  {
    steps.map((i) => {
      const isFuture = i > activeNum
      const isCurrent = i === activeNum
      const isDone = i < activeNum
      const Element = isFuture ? 'span' : 'a'
      const itemClass = ['step-item', isCurrent ? 'active' : '']
      const fallbackLabel = `Step ${i}${isCurrent ? ' (current)' : isDone ? ' (completed)' : ''}`
      return (
        <li class:list={itemClass}>
          <Element href={isFuture ? undefined : '#'} aria-current={isCurrent ? 'step' : undefined} data-bs-toggle={showTooltip ? 'tooltip' : undefined} title={showTooltip ? `Step ${i} description` : undefined}>
            {showTitle ? `Step ${i}` : <span class="visually-hidden">{fallbackLabel}</span>}
          </Element>
        </li>
      )
    })
  }
</ol>