Stepper

Indicator compact pentru procese liniare cu 3–5 pași. Pe desktop trăiește în .app-top (chrome-ul fluxului); inline în conținut doar acolo unde nu există flow chrome. Fiecare pas e un indicator rotund (.stepper-ind) plus eticheta: done (check --c-success pe tint --c-success-bg), active (număr alb pe --c-pink, label pink-deep bold), upcoming (număr fog pe alb cu ring, label fog). Un singur chip plin pe bară — doar pasul curent; cei parcurși sunt tonali, ca „ești aici" să rămână singurul semnal plin.

Markup canonic · components/stepper.json

sursa = JSON · generat de scripts/build-catalog.py

Pași — stări (done / active / upcoming)

.stepper > .stepper-step > .stepper-ind

.stepper.vertical — aceiași pași, pe rânduri

Layout-ul folosit de steps sheet-ul de pe mobil (.flow-sheet.steps). Aceleași clase și aceleași stări ca varianta orizontală — lista de pași de pe mobil nu are vocabular propriu. Label 15px și chip 24px, fiindcă e o listă de tap targets, nu o bară de chrome. Rândul activ nu primește fundal: semnalul e chipul pink plus label-ul pink-deep, ca peste tot.

.stepper.vertical > .stepper-step

Mobile — colapsat la trigger + dropdown

.stepper.mobile — afișează doar pasul activ; click pe trigger deschide lista completă

Variante de stare

primul pas activ · toți pașii completați

Când se folosește

DA — pentru fluxuri unde utilizatorul:

  • avansează liniar prin maximum 3–5 pași (onboarding, depunere declarație, emitere factură multi-pas)
  • trebuie să știe în ce etapă e și ce a finalizat
  • poate naviga înapoi la un pas deja parcurs pentru editare

NU — pentru:

  • procese cu ramificații sau alegeri condiționate (folosește .tabs sau navigare ierarhică)
  • ecrane standalone fără context de flux (folosește breadcrumbs)
  • liste de task-uri / TODO (folosește .check-item într-un checklist)
  • fluxuri cu peste 5 pași — divide în sub-procese sau folosește o vedere de progres dedicată