# Sanfona (accordion / alternância) (`sanfona`)

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

Itens com título que abrem e fecham deslizando. Um aberto por vez (sanfona) ou vários (alternância do Elementor). Funciona sem JS.

- **Categoria:** Interativos
- **Equivalente no Elementor:** Sanfona (Accordion) e Alternância (Toggle)
- **Arquivos:** `sanfona.html`, `sanfona.css`, `sanfona.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-sanfona`)

## Quando usar
- Perguntas frequentes (ou use o componente FAQ)
- Detalhes de módulos de um curso, regras, ficha técnica
- Conteúdo longo que a maioria não precisa ler

## Quando não usar
- Informação que todos precisam ver para decidir (deixe aberta na página)
- Um item só

## Variações
- **Um aberto por vez (Sanfona do Elementor):** atributo data-ds-sanfona-unico
- **Vários abertos (Alternância do Elementor):** sem data-ds-sanfona-unico
- **Item começa aberto:** atributo open no <details>
- **Em cartões:** classe ds-sanfona--cartao

## Conteúdo esperado
- Título de cada item (pergunta ou nome do módulo)
- Conteúdo de cada item

## Acessibilidade
- <details> e <summary> nativos: teclado (Enter e Espaço) e leitor de tela anunciam aberto ou fechado
- Seta com aria-hidden
- Sem animação com prefers-reduced-motion
- Sem JS continua abrindo e fechando

## 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/sanfona/sanfona.css">
<script src="componentes/sanfona/sanfona.js" defer></script>
```

Tokens do contrato usados: `--ds-altura-linha-titulo`, `--ds-borda-largura`, `--ds-cartao-padding`, `--ds-cor-borda`, `--ds-cor-superficie`, `--ds-cor-texto-destaque`, `--ds-cor-titulo`, `--ds-curva`, `--ds-duracao-lenta`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-fonte-titulo`, `--ds-largura-texto`, `--ds-raio-cartao`, `--ds-sombra-md`, `--ds-tamanho-cartao`.