Control segmentat

Prezentare

Prezintă o alegere exclusivă compactă, ca alternativă vizuală la radio, pentru un set mic de opțiuni afișate ca grup de „taste”.

Când se folosește

• pentru 2-4 opțiuni exclusive, scurte ca text (de exemplu „Listă”/„Grilă”), unde compactarea vizuală ajută mai mult decât un `fieldset` clasic.

Când nu se folosește

• pentru opțiuni cu text lung — comprimarea orizontală devine ilizibilă;
• ca înlocuitor implicit al `radio` — rămâne o variantă vizuală specifică, nu componenta implicită pentru orice alegere exclusivă.

Anatomie

Un `<fieldset class="sd-segmented-control">` cu `<legend>` (poate fi `sd-visually-hidden` dacă contextul din jur explică deja alegerea) și, pentru fiecare opțiune, un `<label class="sd-segmented-control__option">` ce conține un `<input type="radio" class="sd-segmented-control__input">` mascat vizual (`clip-path`, nu `display: none`, ca să rămână accesibil) și un `<span class="sd-segmented-control__label">` vizibil.

Variante

• implicit — o singură variantă vizuală

Stări

• implicit
• selectat — fundal plin, prin `:checked ~ .sd-segmented-control__label`
• :disabled — opacitate redusă, cursor `not-allowed`
• :focus-visible — pe eticheta vizibilă, prin `:focus-visible ~`, pentru că input-ul propriu-zis e mascat vizual

Comportament

Sub capotă rămâne un grup `radio` HTML nativ — inputurile sunt doar mascate vizual (nu ascunse din arborele de accesibilitate), deci comportamentul de tastatură și cititor de ecran e identic cu un grup radio clasic, fără JavaScript.

Reguli de conținut

• etichetele fiecărei opțiuni rămân la 1-2 cuvinte — orice text mai lung indică nevoia unui `fieldset` clasic cu `radio`, nu a unui `segmented-control`.

Responsabilitățile implementatorului

• inputurile trebuie mascate prin tehnica folosită în `forms.css` (`clip-path`, nu `display:none`/`visibility:hidden`), altfel devin invizibile și pentru tehnologiile asistive, nu doar vizual.

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/forms.css';

<fieldset class="sd-segmented-control"><legend class="sd-visually-hidden">Vizualizare</legend><label class="sd-segmented-control__option"><input class="sd-segmented-control__input" type="radio" name="catalog-view" value="list" checked><span class="sd-segmented-control__label">Listă</span></label><label class="sd-segmented-control__option"><input class="sd-segmented-control__input" type="radio" name="catalog-view" value="grid"><span class="sd-segmented-control__label">Grilă</span></label></fieldset>

Contract și surse

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