54. Botão dividido

Como esta seção nasceu tarde, e por que isso está escrito. O botão dividido foi produzido em 2026-08-15 como artefato — os códigos BD1–BD6 e MN9 viviam só no comentário de CSS do banco-navegacao.html, e nenhum arquivo canônico os mencionava. Foi o inverso exato da ordem que este projeto pratica desde o marco v1.2: decisão escrita → artefato produzido. A leitura de volta da edição v8.4 do MANIFESTO mediu a lacuna (zero ocorrências de BD1 em qualquer .md) e abriu a dívida A-P1. Ela fecha aqui, e fecha pelo caminho certo: rito completo de três rodadas, e não transcrição do comentário — reconstruir spec a partir do artefato é reconstrução de memória, que este projeto já pagou caro na v7.0. Decisão do Rafael em 2026-08-16: "pode resolver logo de uma vez, vamos evitar jogar as coisas pra frente."

Base (3 rodadas encadeadas, 2026-08-16). R1 canon — o que o padrão É. A definição é estável e antiga: um botão com dois componentes, rótulo e seta, em que clicar no rótulo dispara a ação padrão e clicar na seta abre a lista das demais; é um híbrido entre botão e menu, que agrupa comandos relacionados e ainda oferece acesso de um clique à escolha padrão. A NN/g é explícita sobre o requisito visual: a seta que sinaliza o menu precisa estar claramente separada do rótulo — sem essa separação o padrão não é reconhecido. Vários sistemas convergem em três regras de uso: as ações do menu têm de pertencer ao mesmo fluxo da ação padrão; a variante destrutiva não existe para o botão dividido, e uma ação destrutiva, se houver, aparece uma só vez e sempre por último no menu; e quando não há ação dominante, o certo é um botão de menu simples, não um dividido — sem ação dominante não há padrão que valha proteger. R2 mercado/stack — o que o padrão FAZ no teclado. O comportamento é o do menu button do WAI-ARIA, e é o mesmo em React Aria, Radix e nos sistemas de referência: o gatilho leva aria-haspopup, aria-expanded e aria-controls; Seta ↓, Espaço ou Enter abrem o menu e movem o foco para o PRIMEIRO item; Seta ↑ abre e vai para o ÚLTIMO; dentro do menu as setas circulam, Home e End vão às pontas, letras navegam por inicial; Esc fecha e devolve o foco ao gatilho. Com o menu aberto, o gatilho não recebe foco enquanto o usuário percorre os itens. R3 normas e fora do circuito — onde o padrão FALHA. A crítica prática é dura e entrou como contrato: o botão dividido não é recomendado para toque, pelo problema do dedo grosso, e mesmo no desktop as duas zonas precisam atender ao tamanho mínimo de alvo. E há uma exigência de aprendizado: o padrão só funciona em aplicação de uso repetido; em fluxo de uma vez só, o usuário não percebe o menu secundário.

54.1 Os contratos#

54.2 Anatomia#

┌──────────────────────┬─────┐
│  Criar ordem         │  ▾  │   ← BD1: dois <button> reais
└──────────────────────┴─────┘
   ação padrão (BD6)     │ └ min-width 44px (BD3)
                         └── border-left 1px (BD2)

A anatomia com BORDA foi decidida no gate de 2026-08-15: a proposta alternativa (botão sem contorno) foi medida, apresentada em amostra A/B e reprovada. Verbatim do Rafael: "esse da foto que mandei está melhor". Não reabrir sem pedido dele.

54.3 Estados e tokens#

54.4 Validação#

54.5 Pendências#

---