Navegação

Seletor de período

Setas que andam por semanas, meses ou uma lista sua, com o rótulo entrando na direção do clique.

data-u="period"

Exemplo

<div data-u="period"></div>
<div data-u="period" data-u-props='{"mode": "month"}'></div>
<div data-u="period" data-u-props='{
  "items": ["1º trimestre", "2º trimestre", "3º trimestre"],
  "index": 1,
  "label": "Trimestre"
}'></div>

Instalação

Seletor de período vem no pacote completo, em unslop.css e unslop.js:

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

Um bloco pronto que usa seletor de período:

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

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

Vão em data-u-props, como JSON.

Prop	Tipo	Padrão	O que faz
`mode`	string	semanas	`"month"` lista os 12 meses e abre em junho. Sem mode, são 14 semanas a partir de junho de 2026.
`items`	array	sem padrão	Lista própria de rótulos. Tem prioridade sobre mode.
`index`	number	sem padrão	Posição inicial.
`label`	string	Período	Nome do grupo (`aria-label`).

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
host	`role="group"`, `aria-label`	Postos pelo JS.
setas	`aria-label`, `aria-disabled`	`"Período anterior"` e `"Próximo período"`. Na ponta da lista, a seta fica com `aria-disabled="true"`.
rótulo	`aria-live="polite"`	O leitor de tela anuncia o período novo.

Teclado

Tecla	Faz
Tab	foca as setas
Enter ou Espaço	anda um período

Eventos e API

Evento	detail	Quando
`u:change`	`{ index, label }`	A cada troca de período. Barras no mesmo card escutam e trocam a série.

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

el._u.index lê a posição atual.