Começar

Ligar a biblioteca

<link rel="stylesheet" href="/vendor/hibex/hibex.min.css">
<script src="/vendor/hibex/hibex.js" defer></script>
<link rel="icon" href="/vendor/hibex/marca/systems/ocean/app/favicon.svg" type="image/svg+xml">

• hibex.min.css traz tokens, base e componentes; procura as fontes em fonts/, ao lado dele;
• hibex.js é opcional: abre diálogos por commandfor onde o navegador ainda não tem;
• os ícones vêm de icons/sprite.svg, servido pela mesma origem da página.

Tema

Sem atributo no <html>, vale o tema do sistema operacional. "Aparência" grava data-theme="light" ou "dark" no <html>; qualquer elemento pode ter data-theme para mudar só aquele trecho (ADR-0022).

Estado é atributo

Nenhum componente tem classe de estado. O estado é o atributo que o navegador e o leitor de tela já entendem: disabled, aria-invalid, aria-current, aria-pressed, aria-busy, :checked. Por isso a biblioteca funciona igual numa página do servidor, numa troca de fragmentos (htmx) ou numa aplicação de página única (ADR-0015).

Camadas

Tudo vive em @layer hibex.tokens, hibex.base, hibex.components, hibex.utilities. Num produto que ainda usa o Bootstrap, declare @layer bootstrap, hibex; uma vez, antes de tudo, e a Hibex vence sem !important.

Navegadores

Chrome e Edge 111, Firefox 113, Safari 16.4 ou mais novos. O que é mais novo que isso entra como melhoria, com caminho alternativo.