Tabs

O componente Tabs é um organismo criado para alternar a exibição de conteúdos mutuamente exclusivos. Ele materializa perfeitamente a doutrina Curva & Concreto: os botões de navegação (Tabs) utilizam bordas arredondadas (curvas) para convidar ao clique, enquanto a área de conteúdo (TabPanel) emprega geometria ortogonal (concreto) para exibir os dados estáticos, enfatizando a ausência de interação na superfície em si.

Exemplo Básico

<script>
  import { Tabs, TabList, Tab, TabPanel } from 'cobogo/components';

  let activeTab = 'contexto';
</script>

<Tabs bind:active={activeTab}>
  <TabList ariaLabel="Princípios de Design">
    <Tab value="contexto">O Contexto</Tab>
    <Tab value="curva">A Curva</Tab>
    <Tab value="concreto">O Concreto</Tab>
  </TabList>

  <TabPanel value="contexto">
    <h3>O Contexto</h3>
    <p>A interface não existe em um vácuo...</p>
  </TabPanel>

  <TabPanel value="curva">
    <h3>A Curva</h3>
    <p>As curvas nos componentes Tab...</p>
  </TabPanel>

  <TabPanel value="concreto">
    <h3>O Concreto</h3>
    <p>O TabPanel é uma folha rígida...</p>
  </TabPanel>
</Tabs>

Acessibilidade e Navegação

O componente implementa estritamente o padrão WAI-ARIA Tabs.

• TabList recebe dinamicamente role="tablist".
• Tab aplica role="tab", gerencia os estados aria-selected e aria-controls, e define o tabindex adequado.
• TabPanel possui role="tabpanel" e aponta de volta via aria-labelledby.
• Navegação por Teclado: A TabList intercepta nativamente as teclas setas (ArrowRight, ArrowLeft) para navegar sequencialmente entre as tabs interativas, pulando os botões desativados. Também suporta Home e End para acesso rápido.