Căutare

Prezentare

Permite găsirea conținutului printr-un formular GET simplu, al cărui rezultat produce un URL distribuibil și marcabil la favorite.

Când se folosește

• prezent în header-ul fiecărei pagini, ca acces constant la căutare.

Când nu se folosește

• ca unică metodă de a găsi conținut — căutarea completează navigația, nu o înlocuiește.

Anatomie

Un `<form class="sd-search" role="search" method="get">` cu `__label` (vizual ascuns, dar prezent), `__input` și `__button` de trimitere.

Variante

• implicit — o singură variantă

Stări

• implicit
• :hover pe buton
• :focus-visible pe input și buton

Comportament

Fără JavaScript: formular GET nativ; rezultatul e o navigare normală către o adresă cu parametrul de căutare în URL, complet distribuibilă.

Reguli de conținut

• label-ul rămâne vizual ascuns, nu eliminat — „Caută" trebuie să existe pentru tehnologiile asistive.

Responsabilitățile implementatorului

• păstrează `method="get"` — un `POST` ar face rezultatele căutării nedistribuibile prin URL.

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

<form class="sd-search" role="search" aria-label="Căutare demonstrativă — exemplu navigation-search" action="#" method="get"><label class="sd-search__label" for="catalog-search">Caută</label><input class="sd-search__input" id="catalog-search" name="q" type="search"><button class="sd-search__button" type="submit">Caută</button></form>

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