Alertă

Prezentare

Comunică informații importante, specifice unei pagini, printr-un titlu, un text și un semnal non-cromatic.

Când se folosește

• pentru mesaje importante, specifice conținutului unei pagini — nu întregului serviciu.

Când nu se folosește

• pentru situații critice la nivelul întregului serviciu — acolo se folosește `major-alert` (familia Navigație);
• pentru confirmarea unei acțiuni reușite — acolo se folosește `notification-banner`.

Anatomie

Un `<section class="sd-alert sd-alert--info|success|warning|danger">` cu `__symbol` (cerc decorativ) și `__content` (`__title` + text).

Variante

• `sd-alert--info`
• `sd-alert--success`
• `sd-alert--warning`
• `sd-alert--danger`

Stări

• nu are stări interactive proprii

Comportament

Element static, fără JavaScript.

Reguli de conținut

• titlul rezumă mesajul într-o propoziție scurtă; textul detaliază, fără să repete titlul cuvânt cu cuvânt.

Responsabilitățile implementatorului

• alege varianta de culoare (`info`/`success`/`warning`/`danger`) potrivită mesajului real — culoarea e un supliment, nu singurul semnal, dar trebuie totuși coerentă cu conținutul.

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

<section class="sd-alert sd-alert--info" aria-labelledby="catalog-info"><span class="sd-alert__symbol" aria-hidden="true"><svg class="sd-icon" width="1.1rem" height="1.1rem" 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="10.5" x2="12" y2="17"/><circle cx="12" cy="6.5" r="0.75" fill="currentColor" stroke="none"/></svg></span><div class="sd-alert__content"><strong class="sd-alert__title" id="catalog-info">Cererea poate fi salvată</strong><p>Poți reveni înainte de termen.</p></div></section>

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