Chip

Prezentare

Afișează o selecție sau un filtru activ, eliminabil printr-un link real.

Când se folosește

• pentru filtre sau selecții active, eliminabile individual.

Când nu se folosește

• pentru stări necesare doar informativ, fără acțiune de eliminare — acolo `status-tag` e suficient.

Anatomie

Un `<span class="sd-chip">` cu textul filtrului și `__remove` (link real, cu `aria-label` descriptiv al filtrului eliminat).

Variante

• implicit — o singură variantă

Stări

• `__remove` :hover (fundal)
• `__remove` :focus-visible

Comportament

`__remove` e un `<a href="?...">` real — elimină filtrul prin navigare la un URL fără acel parametru, nu doar printr-un handler JavaScript.

Reguli de conținut

• `aria-label`-ul link-ului de eliminare spune exact ce se elimină („Elimină filtrul Cluj-Napoca"), nu doar „Elimină".

Cercetare

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

<span class="sd-chip">Cluj-Napoca<a class="sd-chip__remove" href="?judet=" aria-label="Elimină filtrul Cluj-Napoca">×</a></span>

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