intro

Accordion

An organism that groups multiple Disclosure molecules, providing native mutually exclusive states.

O componente Accordion é um organismo projetado para agrupar múltiplas moléculas Disclosure. Ele garante que o estado de expansão seja mutuamente exclusivo (abrir um fecha os outros automaticamente), utilizando as capacidades nativas dos navegadores (<details name="...">) em vez de introduzir complexidade com JavaScript.

Ao seguir a doutrina Curva & Concreto, mantemos a acessibilidade e a semântica de HTML5 no seu estado mais puro e resiliente, ao mesmo tempo em que reduzimos significativamente o custo da renderização da interface.

Exemplo Básico

Ao envolver vários componentes Disclosure com um Accordion, a exclusividade é aplicada automaticamente. O Accordion fornece a prop name aos componentes subjacentes de forma transparente através da Context API do Svelte.

A Curva

As curvas representam interatividade. Elementos que o usuário pode tocar, clicar, focar e alterar. Bordas arredondadas e sombras sinalizam ação no sistema.

O Concreto

O concreto representa a informação inerte. Superfícies planas, bordas retas (radius 0px) são usadas quando apresentamos dados ao usuário. Não há falsa ilusão de interatividade.

A Integração

Um sistema só funciona quando ambos coexistem em contraste direto. Aninhar curvas dentro de curvas é estritamente proibido.

<script>
  import { Accordion } from 'cobogo/components/Accordion';
  import { Disclosure } from 'cobogo/components/Disclosure';
</script>


<Accordion name="manifesto-accordion">
  <Disclosure title="A Curva">
    <p>As curvas representam interatividade...</p>
  </Disclosure>


  <Disclosure title="O Concreto">
    <p>O concreto representa a informação inerte...</p>
  </Disclosure>


  <Disclosure title="A Integração">
    <p>Um sistema só funciona quando ambos coexistem...</p>
  </Disclosure>
</Accordion>

Props

PropTipoPadrãoDescrição
namestringobrigatórioO nome exclusivo do grupo para sincronização nativa dos componentes.

Acessibilidade e Semântica

  • Não utiliza JavaScript para calcular alturas ou adicionar listeners para fechar elementos abertos.
  • Utiliza o atributo HTML5 name nos elementos nativos <details>. Esta é uma funcionalidade moderna suportada pela vasta maioria dos navegadores atuais, permitindo agrupar os componentes sem sacrificar a árvore de acessibilidade inerente.
  • A navegação por teclado (Tab, Space, Enter) flui naturalmente através dos cabeçalhos <summary>.