Sheet
Foaia de jos a telefonului (<1024px) — o singură clasă, trei forme: .sheet.attached pentru liste de acțiuni și selectoare, .sheet.floating pentru explicații, .sheet.form pentru cel mult două câmpuri. Pe desktop aceleași joburi sunt .popover și .modal. Contract: components/sheet.json; rândurile dinăuntru sunt List row.
Markup canonic · components/sheet.json
Ce devine fiecare overlay de desktop pe telefon
O singură foaie pentru tot ce urcă de jos pe telefon. Până pe 2026-09-16 erau trei (.flow-sheet în fluxuri, .doc-sheet în signer, iar produsul n-avea niciuna); acum e una, cu trei forme, iar celelalte două sunt aliasuri deprecate.
| Job | Desktop ≥1024 | Mobil <1024 |
|---|---|---|
| Meniu, selector, meniu contextual deschis dintr-un buton sau rând | .popover, .popover.compact | .sheet.attached cu .list-row în .list-group.sm |
Sugestii sub un câmp în care scrii (typeahead, combobox, .stepper.mobile) | .popover | rămâne .popover — tastatura e sus, o foaie ar sta sub ea |
| Explicație, confirmare care se citește ca un card | .popover.content | .sheet.floating — .t18, rânduri .list-row.value, .t14, un .btn.secondary.lg.full |
| Formular scurt (≤ 2 câmpuri) | .modal cu câmpuri | .sheet.form — bej-0, .input.lg / .select.lg albe, un .btn.primary.lg.full |
| Decizie (T4) | .modal, .modal.confirm | același .modal — pictează deasupra oricărei foi |
| Lista pașilor unui wizard | .stepper în .app-top | .sheet.attached cu .stepper.vertical (fost .flow-sheet.steps) |
| Alegerea documentului (signer) | sidebar-ul din .signer-layout | .sheet.attached cu .doc-list (fost .doc-sheet) |
Trei forme · attached · floating · form
attached — toată lățimea, colțuri sus, padding jos = safe area: liste de acțiuni și selectoare. floating — margine 12 de jur împrejur, toate colțurile: explicații și confirmări care se citesc ca un card. form — suprafața trece pe bej-0 ca .input.lg / .select.lg albe să se citească drept câmpuri; cel mult două, un singur .btn.primary.lg.full.
.sheet-scrim e absolut pe shell-ul gazdă (.app-mobile sau .flow-chrome), --c-backdrop + blur(--scrim-blur) — același scrim ca .modal-backdrop; tap pe el închide, [hidden] = închis. X-ul e .btn.sm.icon-only în colțul dreapta-sus, bej-0 opac (alb pe .form); containerul îi dă poziția. Fără grabber: se citește ca drag și declanșează pull-to-refresh. Titlul e .t18 pe un div, lede-ul .t14 în fog — foaia dă padding-ul, nu tipografia. Rândurile sunt .list-row în .list-group.sm (44px, obligatorie în foaie): grupul își pierde cardul, două grupuri se despart cu 4px, iar rândul .danger stă singur în al doilea.În flux · meniul, pașii, documentele
Flow chrome nu mai are foi proprii. .flow-sheet, .flow-sheet.steps și .doc-sheet sunt aliasuri deprecate ale acestei foi — poartă aceleași reguli prin selectori grupați, ca o copie ștampilată să se re-copieze fără să-și mute apelurile în același pas.
Mai ești angajat și altundeva?
Mai ești angajat și altundeva?
Mai ești angajat și altundeva?
.sheet.attached, în .flow-chrome. Meniul e doar acțiuni — nicio navigare; ieșirea e rândul .danger din al doilea grup. Pașii se deschid doar din titlul pasului (.flow-step-title), nu din meniu; lista e un .stepper.vertical cu exact aceleași clase și stări ca stepperul din .app-top. Documentele (signer) folosesc .doc-list — .doc-sheet a devenit alias deprecat.Când NU e o foaie
Confirmă, șterge, ieși — o decizie care blochează e .modal, pe ambele platforme. Modalul pictează deasupra oricărei foi.
Nu mai e o foaie, e un ecran: .flow-chrome.
Typeahead, combobox, .stepper.mobile rămân .popover — tastatura e sus, o foaie ar sta sub ea.
De la 1024px în sus nu există foaie — sunt .popover și .modal.
Aliasuri deprecate · se scot la următorul major
Aliasurile poartă aceleași reguli prin selectori grupați (VERSIONING.md). În cod nou: numai .sheet.
| Vechi | Nou |
|---|---|
.flow-sheet-scrim | .sheet-scrim |
.flow-sheet | .sheet.floating |
.flow-sheet.steps | .sheet.attached + .stepper.vertical |
.flow-menu-row, .flow-menu-ic, .flow-menu-gap, .flow-steps-label | .list-row, .ic, al doilea .list-group, .t12 (List row) |
.doc-sheet, .doc-sheet-backdrop, .doc-sheet-handle | .sheet.attached + .doc-list, .sheet-scrim, — (fără grabber) |
Reguli ferme
.attached · .floating · .form. Nicio a patra, nicio clasă locală.
var(--c-backdrop) + blur(var(--scrim-blur)), absolut în shell-ul gazdă — nu fixed, nu rgba local.
X (.btn.sm.icon-only) + tap pe scrim. Fără grabber.
.list-row în .list-group.sm — list-row.json → sizes.required_in, auditul o cere.
T4 e .modal. O foaie nu confirmă și nu șterge.
În .form cel mult două; al treilea face un ecran.
Nu .sheet de la 1024px în sus.
Nu .flow-sheet*, nu .doc-sheet*.