Começar

Como funciona

Um atributo diz o que montar, outro passa os dados. O estado mora no ARIA e o resto é CSS.

Dois atributos

data-u diz qual componente montar. data-u-props passa os dados em JSON. O resto é HTML comum.

<div data-u="slider" data-u-props='{"min":0,"max":4,"value":2,"label":"Esforço"}'></div>

Componente só de CSS, como botão e selo, nem precisa de data-u: a classe basta.

Montagem preguiçosa

O unslop.js procura os data-u quando a página carrega e só monta cada um quando ele chega a 200px da tela. Enquanto espera, o elemento fica com data-u-ready="pending". Montado, o atributo fica vazio.

data-u-eager monta na hora, sem esperar a rolagem.
Injetou HTML depois do carregamento? Chame Unslop.init(container).
Props com JSON inválido não quebram a página: o componente monta com as props padrão e avisa no console.

const box = document.querySelector("#painel");
box.innerHTML = '<div data-u="period"></div>';
Unslop.init(box);

Estado em ARIA

O que está escolhido, aberto ou marcado mora no atributo ARIA, e o CSS lê o mesmo atributo. Leitor de tela e visual nunca discordam.

"k-com">/* o CSS do sistema pinta pelo atributo, não por classe */
.u-select__opt[aria-selected="true"] .u-i { opacity: 1; }
[aria-sort="descending"] .u-dt__sort .u-i { transform: rotate(180deg); }

Eventos

Componente que muda de valor emite u:change (o calendário emite u:apply), com os dados em detail. O evento sobe pela página.

document.querySelector('[data-u="slider"]').addEventListener("u:change", (e) => {
  console.log(e.detail.value, e.detail.text);
});

Movimento

Animação só em transform e opacity, de 220 a 800ms, e nada roda fora da tela. Com prefers-reduced-motion, as durações vão a zero e cada componente abre no estado final.