Collapsible

Componente base do Nuxt UI (UCollapsible), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME. O header é sempre custom (a lib só entrega o container + o slot #content).

O Collapsible mostra/esconde um bloco de conteúdo por um cabeçalho clicável. No ME é a forma de agrupar seções dentro de um documento sem virar aba (regra: seção de 2–3 campos ou bloco complementar = collapsible, não aba). Usado em dois níveis hierárquicos.

Dois níveis (XL × MD)

O ME usa dois estilos de collapsible, por profundidade:

Nível	Quando	Header	Visual
XL · outline	seção de topo do corpo (Impostos, Exceções, Embalagem, Fabricantes, Anexos, Histórico de aprovações)	label `text-lg font-semibold` à ESQUERDA (`flex-1`) + chevron à DIREITA	box com borda (`rounded-lg border border-default`); conteúdo com padding interno 16px (`p-4`)
MD · soft	cards DENTRO de um XL (cada Exceção de ICMS/IPI)	label `text-base font-medium` + badge (Ativo/Inativo) + chevron — ordem `label → badge → chevron`	sem `bg` próprio (herda o fundo); divider entre os cards (`divide-y`); header com `hover:bg-elevated`

Chevron: fechado = para baixo; aberto = para cima — base i-lucide-chevron-down + group-data-[state=open]:rotate-180.
Quando o painel pai tem fundo bg-elevated, os collapsibles internos não levam bg-default (ficam na mesma cor do fundo).

Usage

<template>
  <!-- XL · outline · chevron à direita -->
  <UCollapsible :default-open="true" class="overflow-hidden rounded-lg border border-default">
    <button type="button" class="group flex w-full items-center gap-3 px-4 py-3 text-left">
      <span class="min-w-0 flex-1 text-lg font-semibold text-default">Impostos</span>
      <UIcon name="i-lucide-chevron-down" class="size-5 shrink-0 text-muted transition-transform group-data-[state=open]:rotate-180" />
    </button>
    <template #content>
      <div class="border-t border-default p-4"><!-- conteúdo (16px) --></div>
    </template>
  </UCollapsible>
</template>

API

Props

Prop	Default	Type
`default-open`	`false`	`boolean` Estado inicial (não controlado).
`open`	-	`boolean` Estado controlado (`v-model:open`).
`disabled`	`false`	`boolean` Impede interação.
`unmount-on-hide`	`true`	`boolean` Desmonta o conteúdo quando fechado.
`ui`	-	`{ root?, content? }` Slots de classe.

Slots

Slot	Type
`default`	`{}` — o gatilho (header custom).
`content`	`{}` — o conteúdo que abre/fecha.

Emits

Event	Type
`update:open`	`[value: boolean]`

Acessibilidade

O gatilho é um button real, focável e acionável por teclado; expõe o estado (aria-expanded).
O ícone de chevron é reforço visual — o estado não depende só dele.
Contraste do label/borda via token (text-default/text-muted/border-default), sem HEX cru.

Linguagem

Título da seção = substantivo do conteúdo ("Impostos", "Anexos", "Exceções de ICMS"), não verbo.
Badge do card interno reflete o estado do registro (Ativo/Inativo), com rótulo textual além da cor.

Onde se aplica

Estrutura de Documento

Veja tambémEstrutura de Documento Tabs Table