Etichetă de stare

Prezentare

Exprimă starea unui obiect în text, niciodată doar prin culoare.

Când se folosește

• pentru starea unui obiect real (cerere, componentă, serviciu) — „Activ", „În verificare", „Indisponibil".

Când nu se folosește

• ca etichetă generică de categorisire fără o stare reală — un text simplu e suficient în acel caz.

Anatomie

Un `<span class="sd-tag sd-tag--info|success|warning|danger">`, text simplu.

Variante

• implicit
• `sd-tag--info`
• `sd-tag--success`
• `sd-tag--warning`
• `sd-tag--danger`

Stări

• nu are stări interactive proprii

Comportament

Element static; culoarea e un supliment — textul rămâne mereu prezent și citibil, inclusiv fără CSS.

Reguli de conținut

• textul stării e clar și specific („În verificare"), niciodată un cod tehnic („Status 2").

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

<span class="sd-tag sd-tag--warning">Necesită verificare</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).