Avatar

Prezentare

Reprezintă o identitate prin inițiale sau imagine, cu text alternativ real.

Când se folosește

• pentru identitatea unei persoane sau entități, când o reprezentare vizuală compactă ajută recunoașterea.

Când nu se folosește

• ca decor fără legătură reală cu o identitate anume.

Anatomie

Un `<span class="sd-avatar" aria-hidden="true">` cu inițiale, sau, cu imagine, un `<img>` cu `alt` real în interior — inițialele singure rămân `aria-hidden`, pentru că nu înlocuiesc numele real, deja prezent în context.

Variante

• implicit (inițiale)
• cu imagine

Stări

• nu are stări interactive proprii

Comportament

Element static; imaginea se decupează circular prin `object-fit: cover`, fără procesare suplimentară.

Reguli de conținut

• dacă avatarul e singura reprezentare a unei persoane într-un context fără nume vizibil alăturat, textul alternativ trebuie să conțină numele real, nu doar inițialele.

Cercetare

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

<span class="sd-avatar" aria-hidden="true">AB</span>

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