Text de avertizare

Prezentare

Atrage atenția asupra unei consecințe importante, adesea ireversibile, cu un simbol non-cromatic.

Când se folosește

• înaintea unei acțiuni cu consecințe serioase sau ireversibile (ștergere, trimitere finală).

Când nu se folosește

• pentru avertismente minore sau informații generale — folosirea excesivă tocește impactul avertismentelor reale.

Anatomie

Un `<div class="sd-warning-text">` cu `__icon` (cerc decorativ) și text îngroșat, cu „Avertisment:" vizual ascuns înaintea textului — convenție similară cu `error-message`.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii

Comportament

Element static.

Reguli de conținut

• textul spune explicit consecința („Această acțiune nu poate fi anulată"), nu doar „Atenție".

Cercetare

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

<div class="sd-warning-text"><span class="sd-warning-text__icon" aria-hidden="true"><svg class="sd-icon" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="12" y1="6" x2="12" y2="14"/><circle cx="12" cy="18" r="0.75" fill="currentColor" stroke="none"/></svg></span><strong><span class="sd-visually-hidden">Avertisment: </span>Această acțiune nu poate fi anulată.</strong></div>

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