Timeline

Markup canonic · components/timeline.json

sursa = JSON · generat de scripts/build-catalog.py
  1. Emisă
  2. Se trimite în e-Factura
  3. Așteaptă plata

Anatomia · pas › nod + text

Pașii unei înregistrări, în ordinea în care s-au întâmplat, doar de citit. Fiecare pas e un nod de stare, titlul și, opțional, un detaliu sub el — de regulă o dată. Un hairline leagă fiecare nod de următorul. Formalizat din Dublin (shared/dublin-ui/timeline.tsx și blocul Timeline din theme.css), regulă cu regulă.

ol.timeline                            coloană, 12px între pași
└─ li.timeline-step[data-state]        done · current · upcoming · failed
   ├─ span.timeline-node               18px, 10px de text, 1px mai jos · aria-hidden
   │  └─ .ic (10px) | .timeline-dot    bifa / X-ul · punctul de 7px al pasului curent
   └─ div.timeline-text
      ├─ .timeline-title               14 / 20 · 500 · ink — starea, în cuvinte
      └─ .timeline-detail              13 / 18 · fog — opțional, de regulă o dată
   ::after                             hairline 1px --c-rule-card, de sub nod la următorul

Stările · culorile stepper-ului

Nodurile iau culorile de stare ale Stepper-ului (.stepper-ind): done e tint-ul verde cu bifă verde, current tint-ul roz cu un punct roz fix, upcoming un inel, failed tint-ul de eroare cu un X. Titlul spune starea în cuvinte, deci nodul e decorativ; pasul curent poartă aria-current="step".

cele patru stări · un pas fără detaliu
  1. Emisă
  2. Stornată parțial
  3. Eroare în e-Factura
  4. Încasată parțial
  5. Așteaptă plata

În Dublin · Viața facturii, într-un Quantum block

Într-o înregistrare, cronologia e corpul unui .quantum-block din Quantum stack: un card al lui, eticheta deasupra în fog-ul de 14px al perechilor, cronologia pe toată lățimea dedesubt. Emiterea stă mereu prima; restul pașilor, în ordinea în care s-au întâmplat; plata, la urmă — aranjarea e a funcționalității, nu a componentei. Dialogul întreg: Record view.

se trimite acum · așteaptă plata
Viața facturii
  1. Emisă
  2. Se trimite în e-Factura
  3. Așteaptă plata
trimisă · încasată
Viața facturii
  1. Emisă
  2. Trimisă în e-Factura
  3. Încasată

Reguli

Static, nu navigabil

Un pas se citește, nu se alege: fără hover, focus sau click. Un parcurs prin care omul trece, pas cu pas, e .stepper.

Titlul deasupra detaliului

Titlul pe primul rând, data dedesubt — nu Emisă · 24 apr pe un rând. Un pas fără dată (în curs, plata) are doar titlul.

Fără puls, fără AI

Punctul pasului curent stă pe loc, ca la stepper. Și e roz, nu --c-ai: o trimitere automată nu e munca lui Iris.

Starea în cuvinte

Titlul spune ce s-a întâmplat (Emisă, Eroare în e-Factura), deci nodul e aria-hidden. Nu colora titlul după stare.