banco-escolha.html · bancada do §60 · preview v0.4 — catálogo de ESTADOS da escolha segmentada e múltipla (SG1–SG14 e SG6-b), do seed-componentes.md. Bancada, não tela (CP31). Dado sintético: nenhum nome, documento ou valor de contrato real. Os números de geometria aqui não foram escolhidos — vêm da medição dos dois consumidores em produção na auditoria SG-P1.

Escolha segmentada e múltipla

Três problemas diferentes que a mesma forma visual serve, e a semântica segue o problema, não a aparência. A régua em uma frase: pergunte o que muda. Muda a forma de ver o mesmo dado → segmentado. Muda quanto do mesmo dado aparece → interruptor. Muda o dado → abas (§34), e aí não é este componente.

Segmentado (SG1) — os estados

role="radiogroup" + role="radio" + aria-checked, com um único tab stop e setas movendo dentro. Tab entra e sai do grupo com um pressionamento; ←/→/↑/↓ trocam a escolha; Home e End vão às pontas — e são eles que impedem a fileira longa de custar N setas.

Duas opções — o mínimo

Duas opções mutuamente exclusivas é o piso do SG1. Abaixo disso não é escolha: é interruptor, e vale o SG2.

Três opções, o caso comum

O nome do grupo diz o que a escolha FAZ e que ela aplica na hora (SG4). Sem isso fica de pé o alerta do Primer: que radiogroup sugere “vale só ao salvar”.

Com contagem por segmento (SG7)

A contagem conta o CONJUNTO e NÃO muda com o filtro aplicado — herda o CM11: número que acompanha o próprio recorte deixa de ser referência. Clique nos segmentos: os números não se mexem.

Com ícone e rótulo visível (SG8)

O ícone é `aria-hidden`; o nome acessível é SÓ o rótulo. Concatenar glifo e texto foi o defeito real achado no §48 (“mão levantada Mover”).

Cinco opções — o caso largo

O teto do SG5 não é de contagem, é de APERTO MEDIDO: cabe enquanto a fileira não vazar, não cortar e não reduzir o alvo abaixo de 44px. Encolha a janela até 390px — ela quebra em linhas e o alvo se mantém.

Com opção indisponível

Opção sem pré-requisito de DADO some (PN4: nunca oferecida-e-vazia). Aqui ela aparece desabilitada para o catálogo mostrar o estado — numa tela real, o §48 a esconde e diz por quê.

Raio — DECIDIDO em 2026-08-16: reto

A auditoria SG-P1 mediu os dois consumidores em produção e achou duas geometrias para a mesma família. A altura já convergiu em 44px (o §53 media 32px e subiu na SG-P7). O raio não: o painel usa pílula, a lista usa reto. Nenhum dos dois é errado isoladamente; os dois juntos são a prova de que não havia canon. Os dois lados abaixo são o mesmo controle, com o mesmo conteúdo — a única diferença é o raio. O gate escolheu o lado B (reto), e ele é o canon — o lado A fica aqui porque decisão sem a evidência ao lado vira folclore em três meses.

A terceira fileira de cada lado é estreita de propósito: o SG5 revisto permite o segmentado quebrar em linhas, e é na quebra que os dois raios se comportam diferente — o arredondamento total do grupo tem de envolver duas linhas, o reto não. Está aqui para ser olhado, não para ser afirmado.

A · pílula — SUPERSEDED (era o §48)

--seg-raio-grupo: 9999px · --seg-raio-item: 9999px

B · reto — CANON desde 2026-08-16

--seg-raio-grupo: 8px · --seg-raio-item: 6px

Interruptor de recorte (SG2)

Um <button> com aria-pressed, não um segmentado de duas opções. Ligar e desligar é um controle, não uma escolha entre dois — e é por isso que "Só comentários" (§56) nunca precisou virar radiogroup. Dois modos irmãos, em que nenhum é o "desligado" do outro, são caso do SG1, não deste.

Só comentários É o controle do §56, e foi o ÚNICO dos seis consumidores auditados que já estava conforme quando o §60 nasceu.

Mostrar concluídas Recorte binário do mesmo conjunto: liga e desliga QUANTO do dado aparece. Não muda a forma de ver, então não é segmentado.

Múltipla escolha com chips (SG9–SG14)

A lista não fecha ao escolher (SG14): quem marca vários teria de reabrir a cada item. Cada escolhido vira um chip removível com nome que diz o que remove; acima do teto declarado os excedentes colapsam em "+N"; remover anuncia o que saiu e quantos restam; e o "Limpar tudo" só existe a partir de dois chips — com um só, o próprio X já é o limpar.

Filtrar por frente de trabalho

Os contratos, e onde cada um se prova

#	Contrato	Onde se prova
SG1	Segmentado é `radiogroup` com um único tab stop e setas dentro	Todos os segmentados desta página · e os quatro grupos do §48
SG2	Recorte binário é um `<button>` com `aria-pressed`	Seção “Interruptor de recorte” · e o §56 em `tela-detalhe.html`
SG3	Nunca `tablist` sem painel	Por AUSÊNCIA: zero `tablist` no acervo, medido a cada rodada
SG4	O nome do grupo diz o que a escolha faz E que ela aplica na hora	`aria-label` de todos os grupos desta página
SG5	O teto é de APERTO MEDIDO, não de contagem	“Cinco opções” · medido em 390/768/1180/1440px
SG6	O selecionado se distingue por diferença de VALOR medida ≥ 3,00	Prova “Escala de cinza” na barra de cima · medido em 4,60 e 4,57
SG6-b	A separação sobrevive a `forced-colors: active`, com cor de sistema	Alto contraste do sistema · medido: 1,00 antes, 19,04 depois
SG7	Contagem por segmento conta o CONJUNTO — não muda com o filtro	“Com contagem por segmento” — esta bancada é a única instância
SG8	Segmento com ícone e rótulo usa SÓ o rótulo no nome acessível	“Com ícone e rótulo visível” · o ícone é `aria-hidden`
SG9	Multi-select produz chips removíveis com nome que diz o que remove	Seção “Múltipla escolha” · `aria-label` de cada X
SG10	O chip é o do §22, com o X interno em alvo de 44px	`.chip .x` — e o dono é `position:relative`, senão o alvo ancora fora
SG11	Acima de um teto declarado, os chips colapsam em `“+N”`	Marque mais de 3 frentes · teto em fonte única no gerador
SG12	Remover um chip anuncia o que saiu E quantos restam	Remova um chip com leitor de tela ligado
SG13	“Limpar tudo” existe a partir de dois chips	Desça até um chip: o “Limpar” some
SG14	Multi-select NÃO fecha a lista ao escolher	Abra a lista e marque vários — esta bancada é a única instância