Details

Prezentare

Ascunde informații suplimentare implicit, prin disclosure nativ, dezvăluite la cerere.

Când se folosește

• pentru informații suplimentare, utile doar unei părți din cititori (întrebări frecvente, detalii tehnice).

Când nu se folosește

• pentru informații esențiale înțelegerii principale — acelea rămân vizibile implicit, nu ascunse într-un disclosure.

Anatomie

Un `<details class="sd-details">` cu `<summary>` (indicator „+"/„−" prin `::before`, comutat de `[open]`) și `__content`.

Variante

• implicit — elemente consecutive (`+ .sd-details`) își elimină bordura dublă

Stări

• închis (implicit)
• deschis (`[open]`)

Comportament

Complet nativ: `<details>`/`<summary>` gestionează deschiderea fără JavaScript; indicatorul „+"/„−" e generat exclusiv prin CSS. La tipărire, conținutul închis devine vizibil (`display: block`), ca informația să nu se piardă pe hârtie.

Reguli de conținut

• textul din `<summary>` e o întrebare sau afirmație clară, nu „Detalii" generic.

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';

<details class="sd-details"><summary>Ce documente sunt necesare?</summary><div class="sd-details__content"><p>Identitatea este verificată la sursă.</p></div></details>

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).