Navigație mobilă

Prezentare

Oferă acces la aceleași categorii principale ca `desktop-navigation`, printr-un disclosure nativ, pe ecrane înguste.

Când se folosește

• sub 48rem lățime, ca înlocuitor al `desktop-navigation`, niciodată alături de ea.

Când nu se folosește

• peste 48rem lățime — rămâne ascunsă implicit (`display: none`) până la media query.

Anatomie

Un `<details class="sd-mobile-navigation">` cu `<summary>` (indicator „+"/„−" generat prin `::after`, nu imagine) și `__list` cu linkuri.

Variante

• implicit — o singură variantă

Stări

• închis (implicit)
• deschis (`[open]`, indicatorul devine „−")
• pagina curentă (`aria-current="page"`, bordură laterală colorată)

Comportament

Complet nativă: `<details>`/`<summary>` gestionează deschiderea/închiderea fără nicio linie de JavaScript. Indicatorul vizual „+"/„−" e generat exclusiv prin CSS (`content` pe `::after`, comutat de selectorul `[open]`).

Reguli de conținut

• conține exact aceleași linkuri ca `desktop-navigation` — niciodată un subset „simplificat" pentru mobil.

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

<details class="sd-mobile-navigation"><summary>Meniu</summary><nav aria-label="Navigație principală mobilă — exemplu navigation-mobile-navigation"><ul class="sd-mobile-navigation__list"><li><a href="#">Servicii</a></li><li><a href="#">Contact</a></li></ul></nav></details>

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