Summary list

Prezentare

Prezintă relații cheie–valoare printr-o description list, cu acțiuni opționale per rând.

Când se folosește

• pentru rezumate de tip cheie-valoare — revizuirea unei cereri, detaliile unui obiect.

Când nu se folosește

• pentru date tabulare cu multe rânduri similare — acolo `responsive-table` e mai potrivit.

Anatomie

Un `<dl class="sd-summary-list">` cu rânduri `__row` (grid pe 3 coloane: cheie/valoare/acțiuni), `__key`, `__value`, opțional `__actions`.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii, dincolo de linkurile din `__actions`

Comportament

Sub 40rem lățime, gridul de 3 coloane devine o singură coloană, printr-un media query, fără JavaScript. Valoarea (`__value`) se rupe pe orice caracter (`overflow-wrap: anywhere`), deci nu produce overflow chiar și cu text lung, nespațiat.

Reguli de conținut

• cheia e scurtă și stabilă; acțiunea de schimbare spune exact ce se schimbă („Schimbă numele"), nu doar „Editează".

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/51 (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/content.css';

<dl class="sd-summary-list"><div class="sd-summary-list__row"><dt class="sd-summary-list__key">Cod fiscal</dt><dd class="sd-summary-list__value">12345678</dd></div></dl>

Contract și surse

• Documentația familiei Conținut și date
• 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).