# Alternador (chave liga e desliga) (`alternador`)

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

Chave de dois estados com rótulos clicáveis que mostra um conteúdo e esconde outro em qualquer lugar da página (preço mensal ou anual, turma presencial ou on-line).

- **Categoria:** Interativos
- **Equivalente no Elementor:** Alternador de Conteúdo (Content Switcher) / chave de preço mensal e anual
- **Arquivos:** `alternador.html`, `alternador.css`, `alternador.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-alternador`, `data-ds-alternador-rotulo`)

## Quando usar
- Preço mensal ou anual nos cartões de preço
- Duas versões de um mesmo conteúdo (pessoa física ou empresa)

## Quando não usar
- Mais de duas opções (use abas)
- Abrir e fechar itens (use a sanfona: a Alternância do Elementor é a sanfona sem data-ds-sanfona-unico)

## Variações
- **Começa desligado:** aria-checked="false" no botão
- **Começa ligado:** aria-checked="true" no botão (e hidden nos conteúdos do estado desligado)

## Conteúdo esperado
- Nome do grupo (data-ds-alternador)
- Rótulos dos dois estados
- aria-label da chave descrevendo o estado ligado
- Conteúdos de cada estado com data-ds-alternar e data-ds-quando

## Acessibilidade
- <button role="switch"> com aria-checked: leitor de tela anuncia ligado ou desligado
- Rótulos visíveis também trocam o estado
- Região do conteúdo trocado com aria-live="polite" anuncia a mudança
- Sem JS fica o estado inicial

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

Tokens do contrato usados: `--ds-borda-largura-forte`, `--ds-cor-acento`, `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-cor-superficie`, `--ds-cor-texto-suave`, `--ds-cor-titulo`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-3`, `--ds-raio-pilula`.