Banner de notificare

Prezentare

Confirmă rezultatul unei acțiuni sau o schimbare de status, de obicei la începutul conținutului, după o redirecționare.

Când se folosește

• imediat după o acțiune reușită (trimitere, salvare) sau o schimbare de status a unei cereri.

Când nu se folosește

• pentru mesaje persistente sau context general — acelea folosesc `alert` sau `inset-text`.

Anatomie

Similar cu `alert`, dar cu padding mai mare și fără chenar lateral (`border-inline: 0`) — gândit ca prim element vizibil după o redirecționare.

Variante

• `sd-notification-banner--info`
• `sd-notification-banner--success`
• `sd-notification-banner--warning`
• `sd-notification-banner--danger`

Stări

• nu are stări interactive proprii

Comportament

Element static, fără JavaScript.

Reguli de conținut

• urmează structura recomandată: ce s-a întâmplat, ce urmează, unde verifici starea — conform docs/content/content-style-guide.md#confirmări-și-notificări.

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-notification-banner sd-notification-banner--success" aria-labelledby="catalog-success"><span class="sd-notification-banner__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"><polyline points="5 13 10 18 19 7"/></svg></span><div class="sd-notification-banner__content"><strong class="sd-notification-banner__title" id="catalog-success">Cererea a fost trimisă</strong><p>Număr de înregistrare: 12345.</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).