@if (direction() === 'horizontal') {
  <div class="flex">
    @for (item of items(); track $index; let i = $index) {
      <div class="relative flex-1 text-center">
        @if (i > 0) {
          <span
            class="absolute left-[-50%] right-[50%] top-[11px] h-0.5"
            [class.bg-primary]="i <= active()"
            [class.bg-edge]="i > active()"
            aria-hidden="true"
          ></span>
        }
        <div class="relative z-10 mx-auto flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-medium"
          [class.bg-primary]="i <= active()"
          [class.text-primary-content]="i <= active()"
          [class.bg-edge]="i > active()"
          [class.text-muted]="i > active()"
        >
          @if (i < active()) {
            <i class="fa-solid fa-check" aria-hidden="true"></i>
          } @else {
            {{ i + 1 }}
          }
        </div>
        <div class="mt-1.5 text-xs" [class.text-ink]="i <= active()" [class.text-muted]="i > active()">{{ item.label }}</div>
        @if (item.description) {
          <div class="mt-0.5 text-[10px] text-faint">{{ item.description }}</div>
        }
      </div>
    }
  </div>
} @else {
  <div class="flex flex-col">
    @for (item of items(); track $index; let i = $index) {
      <div class="flex gap-3">
        <div class="flex flex-col items-center">
          <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-medium"
            [class.bg-primary]="i <= active()"
            [class.text-primary-content]="i <= active()"
            [class.bg-edge]="i > active()"
            [class.text-muted]="i > active()"
          >
            @if (i < active()) {
              <i class="fa-solid fa-check" aria-hidden="true"></i>
            } @else {
              {{ i + 1 }}
            }
          </div>
          @if (i < items().length - 1) {
            <span class="my-1 w-0.5 flex-1 min-h-4" [class.bg-primary]="i < active()" [class.bg-edge]="i >= active()" aria-hidden="true"></span>
          }
        </div>
        <div class="pb-4">
          <div class="text-sm" [class.text-ink]="i <= active()" [class.text-muted]="i > active()">{{ item.label }}</div>
          @if (item.description) {
            <div class="mt-0.5 text-xs text-faint">{{ item.description }}</div>
          }
        </div>
      </div>
    }
  </div>
}