Indicator de pași

Prezentare

Arată poziția curentă și progresul într-un flux cu mai mulți pași, printr-o listă ordonată vizibilă permanent.

Când se folosește

• pentru fluxuri de mai mulți pași cu ordine fixă (de exemplu, o cerere de tip formular cu etape de completare, verificare și confirmare).

Când nu se folosește

• pentru un singur pas sau pentru un flux fără ordine impusă — indicatorul de progres ar sugera o structură inexistentă.

Anatomie

Un `<nav class="sd-step-indicator" aria-label="Progres">` care încadrează `<ol class="sd-step-indicator__list">`, cu `<li class="sd-step-indicator__item">` per pas, fiecare cu `.sd-step-indicator__marker` (număr sau bifă) și `.sd-step-indicator__label`.

Variante

• implicit
• `sd-step-indicator__item--complete` — pas finalizat, marcat cu bifă în loc de număr

Stări

• `aria-current="step"` pe pasul curent

Comportament

Complet static, fără JavaScript — nu există enhancement asociat în `interactive.ts`. Starea fiecărui pas (complet, curent, viitor) e exprimată exclusiv prin clase CSS și `aria-current`, setate de aplicație la randare. Sub 40rem lățime, lista trece din grid orizontal în listă verticală, cu conectorii redesenați ca linii verticale.

Reguli de conținut

• eticheta fiecărui pas e un substantiv scurt ("Date", "Verificare"), nu o instrucțiune de acțiune.

Responsabilitățile implementatorului

• aplicația calculează și setează `aria-current="step"` și clasa `--complete` la fiecare randare — componenta nu are stare proprie, deci un pas neactualizat rămâne afișat greșit după navigare.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/52 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/interactive.css';

<nav class="sd-step-indicator" aria-label="Progres"><ol class="sd-step-indicator__list"><li class="sd-step-indicator__item sd-step-indicator__item--complete"><span class="sd-step-indicator__marker" aria-hidden="true"><svg class="sd-icon" width="0.9rem" height="0.9rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><polyline points="5 13 10 18 19 7"/></svg></span><span class="sd-step-indicator__label">Date</span></li><li class="sd-step-indicator__item" aria-current="step"><span class="sd-step-indicator__marker" aria-hidden="true">2</span><span class="sd-step-indicator__label">Verificare</span></li></ol></nav>

Contract și surse

• Documentația familiei Interactive
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).