Formulário

Select

Lista de opções com teclado completo, tom de status por opção e evento de troca.

data-u="select"

Exemplo

<div data-u="select" data-u-props='{
  "options": ["Todos os produtos", "Plano Base", "Plano Pro", "Plano Equipe"],
  "label": "Produto"
}'></div>
<div data-u="select" data-u-props='{
  "options": [
    {"l": "Aguardando", "tone": "warn"},
    {"l": "Concluído", "tone": "ok"},
    {"l": "Processando", "tone": "info"}
  ],
  "value": "Concluído",
  "label": "Status"
}'></div>

Instalação

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

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

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
`options`	array	`[]`	Strings ou objetos `{v, l, tone}`. v é o valor, l o texto, tone pinta um ponto: ok, warn, err, info ou accent.
`value`	string	primeira opção	Valor que abre selecionado. Compara com v (ou com o texto, quando a opção é string).
`label`	string	sem padrão	Nome do botão e da lista (`aria-label`).

Classes e variantes

Classe	O que faz
`u-select--sm`	No host: versão compacta, usada dentro de tabela.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
botão	`aria-haspopup="listbox"`, `aria-expanded`	Diz que abre uma lista e se ela está aberta.
botão	`aria-controls`, `aria-activedescendant`	Ligam o botão à lista e à opção ativa enquanto aberta.
lista e opções	`role="listbox"`, `role="option"`, `aria-selected`	A opção escolhida tem `aria-selected="true"`.

Teclado

Tecla	Faz
Enter, Espaço ou setas	abrem a lista
Seta para cima e para baixo	andam pelas opções
Home e End	primeira e última opção
Letra	pula pra próxima opção que começa com ela
Enter ou Espaço	escolhem e fecham
Esc	fecha e volta o foco ao botão
Tab	fecha e segue

Eventos e API

Evento	detail	Quando
`u:change`	`{ value, label, index }`	Ao escolher uma opção diferente da atual.

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

el._u.value lê o valor, el._u.set(v) troca sem emitir evento, el._u.close() fecha.