Accordion

Quando usar

Use o accordion para organizar varias secoes de conteudo relacionado, das quais o usuario tipicamente le uma ou poucas por vez: detalhes de uma ordem (dados gerais, execucao, taxas), perguntas frequentes, configuracoes avancadas divididas por assunto. O modo single (uma secao aberta por vez) e o mais comum; use multiple quando faz sentido comparar duas secoes abertas lado a lado.

Quando nao usar

Nao use accordion para navegacao entre telas ou rotas: isso e Tabs ou menu lateral. Nao use para uma unica secao isolada sem irmas: isso e o Collapsible, mais simples e sem o peso semantico de uma lista. Nao empilhe accordions dentro de accordions: se o conteudo precisa de tantos niveis, o problema e a organizacao da informacao, nao a falta de mais um nivel de aninhamento.

Anatomia

• Accordion (data-slot="accordion"): a raiz. Recebe type="single" | "multiple" e, no modo single, collapsible para permitir fechar o item aberto sem abrir outro.
• AccordionItem (data-slot="accordion-item"): uma secao, identificada por value. Traz a borda inferior que separa um item do proximo.
• AccordionHeader (data-slot="accordion-header", renderiza um <h3>): o cabecalho semantico que envolve o gatilho, para leitor de tela navegar pela lista como navegaria por titulos.
• AccordionTrigger (data-slot="accordion-trigger"): o botao que abre e fecha o item, com o chevron que gira 180 graus quando o item esta aberto.
• AccordionContent (data-slot="accordion-content"): o conteudo, revelado com uma transicao de altura.

Altura animada

A transicao usa a variavel --radix-accordion-content-height, que o Radix calcula a partir da altura real do conteudo e expoe durante a abertura e o fechamento. Os fotogramas da animacao (trdr-accordion-down e trdr-accordion-up) vivem dentro do proprio componente, nao em CSS global: este pacote nao pode alterar configuracao de raiz nem o @trdr/tokens, e o Tailwind (via o plugin que normalmente supriria isso) tambem nao esta disponivel aqui. A animacao respeita prefers-reduced-motion: com movimento reduzido, o item abre e fecha sem transicao de altura.

Acessibilidade

Cada gatilho e um <button> com aria-expanded sincronizado ao estado e aria-controls apontando para o conteudo correspondente, dentro de um <h3> que da estrutura de titulos a lista. Navegacao por teclado: Tab entra e sai do accordion, Espaco ou Enter abre e fecha o item focado, e as setas para cima e para baixo movem o foco entre os gatilhos do mesmo accordion. O conteudo usa role="region" com aria-labelledby apontando de volta para o gatilho, entao o leitor de tela anuncia a que secao aquele bloco pertence.