help
component checklist
Lista do que precisa estar pronto antes de um componente entrar no sistema. Use como guia ao propor PR.
acessibilidade
- Operável só com teclado
- Estado focado é evidente visualmente (outline 2px)
- Contraste 4.5:1 em texto / 3:1 em bordas
- ARIA aplicado conforme APG do tipo de componente
- Funciona em leitor de tela (testar com NVDA ou VoiceOver)
- prefers-reduced-motion respeitado se há animação
- Áreas de toque ≥ 44×44px
design
- Usa tokens semânticos, não cores cruas
- Spacing em múltiplos do BIT
- Funciona em ambos os temas (light e dark)
- Estados cobertos: default, hover, focus, active, disabled
- Responsivo (mobile <600 / tablet <1024 / desktop)
documentação
- Página com TOC + 10 seções (overview, variants, sizes, states, anatomy, behaviors, modifiers, usage, a11y, code)
- Demo interativa funcional
- Anatomy SVG anotada
- Exemplos de uso claros (do/don't)
- Código copiável (HTML/CSS/JS)
- Listado em components/index.html
- Adicionado ao navConfig do shell.js
código
- CSS no styles.css (não inline)
- JS interativo no components.js (não inline)
- BEM-like naming (.component, .component__elem, .component--modifier)
- Sem dependências externas (manter zero-build)
- Funciona em browsers modernos (Chrome, Firefox, Safari, Edge)