Alertă majoră

Prezentare

Comunică o situație critică la nivelul întregului serviciu — de exemplu o indisponibilitate temporară — vizibil pe fiecare pagină, nu doar pe una.

Când se folosește

• pentru situații care afectează întregul serviciu, nu un singur câmp sau o singură pagină;
• când persoana trebuie să afle imediat, înainte de a continua orice interacțiune.

Când nu se folosește

• pentru erori locale, specifice unei pagini sau unui formular — acelea folosesc `alert` sau `notification-banner` (familia Conținut și date);
• pentru informații necritice — folosirea lui pentru orice mesaj îi tocește urgența reală.

Anatomie

Un `<section class="sd-major-alert">` cu `__inner` (grid), un simbol circular decorativ `__symbol` și `__content` cu titlu (`<strong>`) și text.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii

Comportament

Element static, fără JavaScript; rămâne vizibil identic pe orice pagină pe care e inclus.

Reguli de conținut

• începe cu impactul practic, nu cu termenul tehnic — „Serviciul este indisponibil temporar" înainte de detalii, nu invers;
• menționează orizontul de rezolvare dacă e cunoscut, în loc să lase persoana fără reper de timp.

Responsabilitățile implementatorului

• afișează `major-alert` doar pentru situații reale, la nivel de serviciu — nu ca substitut pentru gestionarea erorilor de pagină.

Cercetare

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

<section class="sd-major-alert" aria-labelledby="catalog-alert"><div class="sd-major-alert__inner"><span class="sd-major-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="6" x2="12" y2="14"/><circle cx="12" cy="18" r="0.75" fill="currentColor" stroke="none"/></svg></span><div><strong id="catalog-alert">Serviciu indisponibil temporar</strong><p>Revenim la ora 14:00.</p></div></div></section>

Contract și surse

• Documentația familiei Navigație
• 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).