Seed

Accordion

O @accordion renderiza uma lista de itens expansíveis, ideal para FAQs e seções de perguntas e respostas.

Uso básico

```seed
@accordion
  @title
    Perguntas Frequentes
  @item
    @title
      O que é o Seed?
    Seed é uma linguagem de markup que compila para HTML.
  @item
    @title
      É gratuito?
    Sim, o Seed é open source e gratuito.
  @item
    @title
      Preciso de JavaScript?
    Não para a renderização. O seed.js mínimo incluso cuida da interatividade.
```

Slots do @accordion

SlotTag geradaDescrição
@title<h2>Título do accordion (opcional). Omitido se não preenchido.
@item (múltiplos)<details>Itens expansíveis

Slots do @item

SlotTag geradaDescrição
@title<summary>Cabeçalho clicável do item
(conteúdo)<div> internoConteúdo expandido (aceita markdown)

Sem título no accordion

O @title no accordion pai é opcional. Quando omitido, o <h2> não aparece no HTML:

```seed
@accordion
  @item
    @title
      Pergunta 1
    Resposta aqui.
  @item
    @title
      Pergunta 2
    Outra resposta.
```

Variante bordered

Adiciona borda, cantos arredondados e overflow-hidden ao item:

```seed
@accordion
  @item variant=bordered
    @title
      Item com borda
    Conteúdo com visual de card.
  @item
    @title
      Item sem borda
    Conteúdo padrão.
```

Comportamento

O accordion usa o elemento HTML nativo <details> / <summary>, que é acessível por padrão e funciona sem JavaScript. O seed.js adiciona animação suave ao chevron indicador.

💡

Por usar <details>, o accordion funciona mesmo com JavaScript desabilitado. A animação do chevron é progressiva.