Accordion

Painéis expansíveis para organizar conteúdo em seções reveláveis sob demanda, com `mk-accordion`, `mk-accordion-item`, `mk-accordion-trigger` e `mk-accordion-details`.

O accordion organiza conteúdo em painéis expansíveis. É composto por quatro elementos: mk-accordion (contêiner), mk-accordion-item (painel), mk-accordion-trigger (cabeçalho clicável, renderizado como <button>) e mk-accordion-details (conteúdo). Um chevron à direita do cabeçalho rotaciona 180° para indicar o estado.

Padrão

import { MkAccordion, MkAccordionItem, MkAccordionTrigger, MkAccordionDetails } from '@db1/makuco-ui-react';

<MkAccordion>
  <MkAccordionItem>
    <MkAccordionTrigger>O que é o Makuco UI?</MkAccordionTrigger>
    <MkAccordionDetails>É o design system da DB1.</MkAccordionDetails>
  </MkAccordionItem>
  <MkAccordionItem>
    <MkAccordionTrigger>Como instalo a biblioteca?</MkAccordionTrigger>
    <MkAccordionDetails>Adicione o pacote @db1/makuco-ui-core.</MkAccordionDetails>
  </MkAccordionItem>
</MkAccordion>

<mk-accordion>
  <mk-accordion-item>
    <mk-accordion-trigger>O que é o Makuco UI?</mk-accordion-trigger>
    <mk-accordion-details>É o design system da DB1.</mk-accordion-details>
  </mk-accordion-item>
  <mk-accordion-item>
    <mk-accordion-trigger>Como instalo a biblioteca?</mk-accordion-trigger>
    <mk-accordion-details>Adicione o pacote @db1/makuco-ui-core.</mk-accordion-details>
  </mk-accordion-item>
</mk-accordion>

Comportamento single

No modo padrão (multiple=false), abrir um painel fecha os demais. Use defaultOpen em um item para iniciá-lo aberto.

<MkAccordion>
  <MkAccordionItem defaultOpen>
    <MkAccordionTrigger>Painel A</MkAccordionTrigger>
    <MkAccordionDetails>Conteúdo A.</MkAccordionDetails>
  </MkAccordionItem>
  <MkAccordionItem>
    <MkAccordionTrigger>Painel B</MkAccordionTrigger>
    <MkAccordionDetails>Conteúdo B.</MkAccordionDetails>
  </MkAccordionItem>
</MkAccordion>

<mk-accordion>
  <mk-accordion-item default-open>
    <mk-accordion-trigger>Painel A</mk-accordion-trigger>
    <mk-accordion-details>Conteúdo A.</mk-accordion-details>
  </mk-accordion-item>
  <mk-accordion-item>
    <mk-accordion-trigger>Painel B</mk-accordion-trigger>
    <mk-accordion-details>Conteúdo B.</mk-accordion-details>
  </mk-accordion-item>
</mk-accordion>

Comportamento multiple

Com multiple no mk-accordion, cada painel é independente e vários podem permanecer abertos.

<MkAccordion multiple>
  <MkAccordionItem defaultOpen>
    <MkAccordionTrigger>Painel A</MkAccordionTrigger>
    <MkAccordionDetails>Conteúdo A.</MkAccordionDetails>
  </MkAccordionItem>
  <MkAccordionItem defaultOpen>
    <MkAccordionTrigger>Painel B</MkAccordionTrigger>
    <MkAccordionDetails>Conteúdo B.</MkAccordionDetails>
  </MkAccordionItem>
</MkAccordion>

<mk-accordion multiple>
  <mk-accordion-item default-open>
    <mk-accordion-trigger>Painel A</mk-accordion-trigger>
    <mk-accordion-details>Conteúdo A.</mk-accordion-details>
  </mk-accordion-item>
  <mk-accordion-item default-open>
    <mk-accordion-trigger>Painel B</mk-accordion-trigger>
    <mk-accordion-details>Conteúdo B.</mk-accordion-details>
  </mk-accordion-item>
</mk-accordion>

Item desabilitado

Um mk-accordion-item com disabled não responde a clique nem a teclado e recebe aria-disabled.

<MkAccordionItem disabled>
  <MkAccordionTrigger>Painel desabilitado</MkAccordionTrigger>
  <MkAccordionDetails>Conteúdo indisponível.</MkAccordionDetails>
</MkAccordionItem>

<mk-accordion-item disabled>
  <mk-accordion-trigger>Painel desabilitado</mk-accordion-trigger>
  <mk-accordion-details>Conteúdo indisponível.</mk-accordion-details>
</mk-accordion-item>

Props — mk-accordion

Prop	Tipo	Padrão	Descrição
`multiple`	`boolean`	`false`	Permite que múltiplos painéis fiquem abertos simultaneamente. Quando `false`, abrir um painel fecha os demais.

Props — mk-accordion-item

Prop	Tipo	Padrão	Descrição
`defaultOpen`	`boolean`	`false`	Define se o painel inicia aberto na primeira renderização.
`open`	`boolean`	`false`	Estado de abertura controlável externamente. Refletido como atributo. Gerenciado automaticamente pelo `mk-accordion` pai no modo single.
`disabled`	`boolean`	`false`	Desabilita o painel, impedindo abertura ou fechamento.

Eventos

Evento	Componente	Payload	Descrição
`mkToggle`	`mk-accordion-item`	`{ open: boolean }`	Emitido sempre que o painel é aberto ou fechado. `open` indica o novo estado.

Slots

Componente	Slot	Descrição
`mk-accordion`	(default)	Instâncias de `mk-accordion-item`.
`mk-accordion-trigger`	(default)	Conteúdo do cabeçalho do painel.
`mk-accordion-details`	(default)	Conteúdo expansível exibido quando o painel está aberto.

Acessibilidade

O mk-accordion-trigger renderiza um <button> nativo com aria-expanded refletindo o estado.
O aria-controls do trigger aponta para o id do mk-accordion-details, que por sua vez usa aria-labelledby apontando de volta para o trigger.
O mk-accordion-details usa role="region" e aria-hidden para refletir a visibilidade.
Itens com disabled recebem aria-disabled e ignoram interação.

Tecla	Comportamento
`Enter` / `Space`	Alterna o painel focado.
`Tab` / `Shift+Tab`	Move o foco entre os cabeçalhos.

Accordion

On this page