List row
Rândul de listă al telefonului (<1024px) — un singur rând pentru setări, meniuri și valori, grupat pe un card alb .list-group, sub o etichetă .t12. Variantele spun ce stă în dreapta: .link, .value, .control, static, .danger. Contract: components/list-row.json. Gazdele: ecranul, foaia, meniul.
Markup canonic · components/list-row.json
Anatomia · un rând, un card, o etichetă
Calul de povară al ecranului de telefon. Pe desktop aceleași joburi sunt împărțite între .field.horizontal (setări), .popover-item (meniuri) și .tbl (înregistrări); pe telefon toate sunt un singur rând, grupat pe un card alb. Un singur rând înseamnă un singur loc care poate deriva.
.list-section = eticheta .t12 (în ink, nu fog) + .list-group (alb, --c-rule-card, --r-lg, overflow:hidden). Rândul: min 56px, padding 0 20 (10 20 cu .has-sub), hairline --c-rule-soft între rânduri, fără pe ultimul. Interior: .ic.lg opțional (fog) · .list-row-body cu .list-row-title (15/22) și .list-row-sub (13/18 fog) · apoi ce spune varianta: .badge.sm.neutral + chevron, .list-row-value, .switch. Tot rândul e ținta de atins — de aceea e <button>, <a> sau <label>, niciodată un div cu un buton înăuntru.Variantele · după ce stă în dreapta
.value cu trei sau mai multe cifre e o listă; una-două cifre-erou sunt .kpi (KPI card). Înregistrările cu mai multe câmpuri nu sunt rânduri — sunt Data list (WIP).
| Variantă | Ce e | Element | Dreapta |
|---|---|---|---|
.link | merge undeva | <a> / <button> | contor .badge.sm.neutral + chevron (.ic.lg chevron-right, ultimul copil) |
.value | etichetă–cifră | <div> | .list-row-value — 600 tabular; titlul trece pe fog |
.control | setare binară | <label> | .switch — salvează instant, ecranul n-are CTA |
| static | informație | <div> | nimic; .has-sub pentru două rânduri |
.danger | distructiv | <button> | nimic; text și icon ink 600, singur în propriul .list-group |
Densitatea · o mărime, nu o clasă nouă
Aceeași regulă ca la .badge.sm în sidebar: densitatea e o mărime din contract, cu required_in, nu o variantă cu nume propriu.
.list-group = rânduri de 56 (ecran). .list-group.sm = rânduri de 44 (foaie), obligatorie în .sheet — list-row.json → sizes.scale[".list-group.sm"].required_in, deci auditul o cere. În foaie grupul își pierde cardul (foaia e suprafața) și rândurile se aliniază la 6px, ca titlul.Stări
.selected — fundal --c-pink-tint, chevronul devine check în --c-accent-deep (ca .check-item.card). :disabled / .disabled — text și icon pe --c-mist, fără hover. Hover pe .link — --c-bej-05, treapta de hover a rândurilor de listă; chevronul trece pe ink. Focus — inelul comun, outline 2px --c-fog, în interior.Perechea de pe desktop
Nu .list-row pe desktop pentru joburi care au deja componentă. Aliasuri deprecate: .flow-menu-row → .list-row · .flow-menu-ic → un .ic simplu · .flow-menu-gap → al doilea .list-group · .flow-steps-label → .t12. Poartă aceleași reguli prin selectori grupați; se scot la următorul major.
| Jobul | Desktop ≥1024 | Mobil <1024 |
|---|---|---|
| Rând de setare | .field.horizontal + .switch | .list-row.control |
| Rând de meniu | .popover-item | .list-row în .sheet (.list-group.sm) |
| Destinație de navigare | .sidebar a | .list-row.link în .mobile-menu |
| Etichetă–cifră | .tbl cu două coloane, .kpi | .list-row.value (3+), .kpi (1–2) |
| Înregistrare cu mai multe câmpuri | .tbl | .data-list — WIP |
Reguli ferme
button / a / label — tot rândul se atinge. Nu .btn în rând (excepție: .switch pe .control).
Ultimul .ic (chevron-right, .ic.lg), fără clasă proprie.
.badge.sm.neutral pe orice rând, .mobile-menu inclus (rândurile de acolo sunt .list-row obișnuite, pe carduri albe). .filled.pink doar în .tabbar, unde contorul e un pip peste glifă, nu la capăt de rând.
.danger — ink 600, niciodată roșu, singur în grupul lui.
.list-group.sm (44). Nu 56 în .sheet.
.t12 în ink, în .list-section.
Înregistrările cu mai multe câmpuri sunt .data-list (WIP), nu rânduri.
Nu radius sau padding propriu pe .list-group — e forma de listă a cardului.