Stepper

Recipe CSS

This is the exact CSS your kit ships for Stepper — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Stepper ===
   Linear progress through a wizard. 4 dots with connecting lines, current
   step filled, past steps shown as checkmarks. */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--k-s-8) 0;
}
.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-s-6);
  flex: 1;
  position: relative;
  font-size: var(--k-type-eyebrow);
  color: var(--k-fg-muted);
}
.stepper__dot {
  width: calc(var(--k-in-h-default) - 0.75rem);
  height: calc(var(--k-in-h-default) - 0.75rem);
  border-radius: 50%;
  background: var(--k-surface-2);
  color: var(--k-fg-muted);
  display: inline-grid;
  place-items: center;
  font-size: var(--k-type-eyebrow);
  font-weight: var(--k-weight-semibold);
  border: max(1.5px, var(--k-bw)) solid var(--k-border);
  position: relative;
  z-index: 1;
  transition: background var(--k-dur, 200ms) var(--k-ease, ease);
}
.stepper__dot svg { width: var(--k-icon-sm); height: var(--k-icon-sm); }
.stepper__step--done .stepper__dot { background: var(--k-primary); color: var(--k-primary-fg); border-color: var(--k-primary); }
.stepper__step--current .stepper__dot { background: var(--k-surface); color: var(--k-primary); border-color: var(--k-primary); box-shadow: 0 0 0 var(--k-ring-w) var(--k-primary-soft); }
.stepper__step--current { color: var(--k-fg); font-weight: var(--k-weight-medium); }
.stepper__step + .stepper__step::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -50%;
  right: 50%;
  height: 1.5px;
  background: var(--k-border);
  z-index: 0;
}
.stepper__step--done + .stepper__step::before,
.stepper__step--current + .stepper__step::before { background: var(--k-primary); }