Overlay
Sheet
Painel lateral deslizante para detalhes e edições rápidas.
Overview
Demonstração real e interativa de Sheet nas larguras desktop, tablet e mobile.
Playground
Altere as propriedades e veja o componente atualizar em tempo real.
Superfície
Densidade
Largura
Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.
States
Todos os estados exibidos simultaneamente para facilitar a comparação.
Default
Hover
Feedback imediato
Focus
Anel de foco visível
Disabled
opacity 60%
Usage
Critérios de escolha e boas práticas.
When to use
- Quando o contexto exige painel lateral deslizante para detalhes e edições rápidas.
- Em telas da categoria Overlay que precisam de consistência com o restante da plataforma.
- Quando a interação precisa ser previsível e reutilizável entre produtos.
When not to use
- Quando existe um componente mais específico para o mesmo problema.
- Quando o conteúdo exigido excede a densidade prevista para este componente.
- Quando o padrão quebra a hierarquia visual da página.
Aplique Sheet conforme os tokens de espaçamento, cor e tipografia definidos no Design System.
Não crie variações locais de Sheet com cores, tamanhos ou comportamentos fora dos tokens.
Accessibility
Requisitos obrigatórios para conformidade WCAG 2.1 AA.
- Contraste mínimo de 4.5:1 entre texto e fundo (WCAG 2.1 AA).
- Todos os elementos interativos são alcançáveis via Tab e acionáveis por Enter/Espaço.
- Foco sempre visível com anel de 2px usando --color-focus e offset de 2px.
- Área mínima de toque de 44x44px em dispositivos móveis.
- Estados disabled recebem aria-disabled e são removidos da ordem de tabulação quando aplicável.
Specifications
Valores de referência para implementação, sempre baseados em tokens.
| Propriedade | Valor | Token |
|---|---|---|
| Height | 40px (md) | |
| Padding | 8px 16px | |
| Gap | 8px | |
| Border | 1px solid | |
| Border Radius | 6px | |
| Typography | 14px / 20px, 500 | |
| Icon Size | 16px | |
| Background | Surface | |
| Hover | Surface sunken | |
| Focus | 2px outline |