# Contrato · SegmentedControl

> Segue o modelo de `contratos/ruler.md`. Implementado em
> `app/src/componentes/SegmentedControl/SegmentedControl.tsx`, com CSS em `estilo/11-v2-fila.css`
> (`.ordena`). Sem contrato original — não é um dos 7 da Fase 1.

> **Não é um dos 7 da Fase 1.** Tem página própria em `/componentes/abas`
> desde 27/ago/2026, além da vitrine.

Grupo segmentado de botões, um ativo por vez — usado hoje pra ordenar a
fila (Potencial / % do VGV / Área).

## Por que não é `role="tablist"`/`role="tab"`

O padrão ARIA de Tabs (WAI-ARIA Authoring Practices) exige navegação por
seta entre as abas e um `tabpanel` associado por `aria-controls`/
`aria-labelledby` — nenhum dos dois foi implementado aqui, e nenhum dos
dois existe no próprio protótipo original: `data-toast="Ordenação por %
do VGV é ilustrativa no protótipo."` mostra que DUAS das três opções nem
trocam conteúdo de verdade hoje, só mostram um toast dizendo que a
ordenação não está implementada. Declarar `role="tab"` sem o comportamento
associado seria uma promessa de acessibilidade falsa — mesmo critério já
usado pra rejeitar `role="menuitemradio"` em `Opcao`.

`SegmentedOption` usa `aria-pressed`, mesma resolução de `Opcao`.

## Anatomia

| Parte | Componente | Classe |
|---|---|---|
| grupo | `SegmentedControl` | `.ordena` |
| item | `SegmentedOption` | (sem classe própria — `.ordena button` já estiliza qualquer `<button>` filho) |

```tsx
<SegmentedControl>
  <SegmentedOption active={ordem === 'potencial'} onClick={() => setOrdem('potencial')}>
    Potencial
  </SegmentedOption>
  <SegmentedOption active={ordem === 'vgv'} onClick={() => setOrdem('vgv')}>
    % do VGV
  </SegmentedOption>
</SegmentedControl>
```

Não controla estado internamente: `SegmentedControl`/`SegmentedOption` são "burros" — quem usa
decide qual `SegmentedOption` está `active` e o que acontece no `onClick`, mesmo
critério de `Opcao` (não decide sozinha o que "selecionar" significa).

## Achado construindo, não estava previsto

- **`.ordena button` (inativo) media 3,9:1** — sétimo achado da mesma classe
  de defeito de contraste nesta sessão (`--t3`/`--t4`). Corrigido pra
  `--t2` em `estilo/11-v2-fila.css`.
- **Sem estado desabilitado no CSS original.** Adicionado
  `.ordena button[disabled]{opacity:.45;pointer-events:none}`.

## Fora do contrato

- **Navegação por teclado com setas** (padrão real de Tabs) — não
  implementada, ver "Por que não é tablist" acima.
- **`tabpanel` associado** — o conteúdo que a aba controla é responsabilidade
  de quem usa o componente, fora do escopo de `SegmentedControl`/`SegmentedOption`.

## Pendências deste componente

- **Se um dia a ordenação virar de verdade funcional para as três opções**
  (hoje só "Potencial" funciona no protótipo), vale reconsiderar
  `@radix-ui/react-tabs` pra ganhar navegação por seta de graça — mesma
  lógica que motivou usar Radix pra Popover/Dialog/Toast.
- ~~Sem página de documentação própria.~~ **Resolvido** — ver nota no topo
  do contrato. Achado desatualizado na auditoria de 21/set/2026.