Formulário

Segmented

Alternador de poucas opções com indicador que desliza até a escolhida.

data-u="segmented"

Exemplo

<div data-u="segmented" aria-label="Período">
  <button type="button">Dia</button>
  <button type="button" aria-checked="true">Semana</button>
  <button type="button">Mês</button>
</div>
<div data-u="segmented" class="u-seg--flat" aria-label="Visão">
  <button type="button" aria-checked="true">Semanal</button>
  <button type="button">Mensal</button>
  <button type="button">Anual</button>
</div>

Instalação

Segmented vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa segmented:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-controls

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Sem props. As opções são os botões filhos e a inicial é a que tem aria-checked="true".

Classes e variantes

Classe	O que faz
`u-seg--flat`	No host: versão chapada, sem o fundo afundado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
host	`role="radiogroup"`	Posto pelo JS. Dê um `aria-label` ao host.
botões	`role="radio"`, `aria-checked`	A escolhida tem `aria-checked="true"` e é a única com tabindex 0.

Teclado

Tecla	Faz
Tab	entra no grupo, direto na opção escolhida
Setas	trocam a opção e dão a volta no fim

Eventos e API

Evento	detail	Quando
`u:change`	`{ index, label }`	Só quando a troca vem da pessoa, não na montagem.

Todo evento sobe pela página (bubbles). Escute no próprio elemento: el.addEventListener("u:change", (e) => e.detail).