# Abas (`abas`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Conteúdo dividido em abas com teclado completo (setas, Home, End). Linha, pílulas ou vertical no computador. Sem JS, mostra todos os painéis.

- **Categoria:** Interativos
- **Equivalente no Elementor:** Abas (Tabs)
- **Arquivos:** `abas.html`, `abas.css`, `abas.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-abas`, `data-ds-aba`, `data-ds-aba-painel`, `data-ds-abas-lista`)

## Quando usar
- Conteúdos paralelos em que a pessoa escolhe um (planos por perfil, módulos, turmas, unidades)

## Quando não usar
- Conteúdo que precisa ser lido em ordem (use seções)
- Mais de 6 abas
- No celular com rótulos longos: prefira a sanfona

## Variações
- **Linha:** classe ds-abas
- **Pílulas:** classe ds-abas--pilulas
- **Vertical no computador:** classe ds-abas--vertical
- **Aba inicial:** data-ds-aba-inicial="índice a partir de 0"

## Conteúdo esperado
- Rótulo curto de cada aba
- Painel de cada aba (mesma ordem dos rótulos)
- Rótulo do grupo (aria-label da lista)

## Acessibilidade
- Padrão WAI-ARIA de abas: tablist, tab, tabpanel, aria-selected, aria-controls (gerados pelo JS)
- Setas trocam de aba, Home e End vão à primeira e à última; só a aba ativa entra no Tab
- Painel recebe foco para quem navega por teclado
- Sem JS todo o conteúdo fica visível

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/abas/abas.css">
<script src="componentes/abas/abas.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cor-borda`, `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-cor-texto`, `--ds-cor-texto-destaque`, `--ds-cor-titulo`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-1`, `--ds-espaco-2`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-espaco-6`, `--ds-espaco-8`, `--ds-fonte-texto`, `--ds-raio-pilula`, `--ds-tamanho-texto`.