22. Chip

Em uma frase: Chip é interativo e a BORDA é o sinal disso; quatro papéis (filtro, seleção, removível, operacional) e nunca é link nem multifunção.

(decisão registrada — ver Histórico da seção)

22.1 Decisões W1–W8#

22.2 Anatomia e tokens#

Altura 28px (denso) / 32px (confortável), radius 999, borda 1px em cinza-600 (token de componente chip-border; par light 4.74 e dark 3.60, ambos ≥3:1 — o border-default cinza-300 REPROVOU com 1.91 na medição e foi descartado: a borda é o sinal de interatividade do W2, não decoração), texto --seed-text-primary, fundo --seed-surface-page; hover: fundo --seed-surface-subtle; selecionado (filtro): fundo --seed-action-primary, texto --seed-text-on-action-primary, checkmark 14px; X: ícone 14px em botão de 24×24 com hitbox touch estendida; focus ring padrão. Grupo: flex com wrap (reflow W7), gap 8px, rótulo visível ou aria-label.

Tinta de marca sobre superfície suave — regra fixada por veredito (V-CT9 = a, 2026-09-15, MANIFESTO §224.1). Chip cuja tinta é de marca (text-link/text-brand, #098475 no claro) sobre surface-subtle (#F2F6F9) ou surface-brand-subtle (#E8FBF7) mede 4,23 e 4,28 — abaixo do piso 4,5 — em QUALQUER estado: chip preenchido, chip de filtro em repouso sobre superfície suave, chip dentro de cartão. A tinta é text-brand-strong (#006C62: 5,82 e 5,89). A regra mora no §73.5 (gramática de consumo); o censo da CT-P9 (MANIFESTO §223.3, régua RC em 208 de 208 HTML) não achou ocorrência viva em bancada nem em tela. No tema escuro nada muda (as duas tintas têm o mesmo valor).

22.3 Os 7 testes#

1. Borda do chip: cinza-600 medido — 4.74 light / 3.60 dark ✓ (cinza-300 reprovado com 1.91); selecionado branco/tq-600 4.60 ✓; numérico branco/ve-500 4.30 ✓ (não-textual/negrito 12px); neutro ci-700/ci-100 5.43 ✓. 2. Seleção por checkmark+cor; remoção por X+anúncio. 3. Grayscale: checkmark e borda carregam. 4. Filtro × entrada a 1s (checkmark × X). 5. Uma live region por grupo. 6. Selecionado visível sem interação. 7. 360px: reflow empilha; X com hitbox 44 tocável de polegar. (Verificado: suite v0.19, aprovado.)

22.4 Os tons de status do chip e a cor escolhida (QD-P17, QD-P18; folha 3 de 2026-10-10)#

22.4.1 Os cinco tons semânticos (.chip-st). O chip de status (.chip-st, texto + ícone, nunca só cor) vive em fundo suave com a tinta do mesmo papel. O vocabulário tinha quatro tons escritos nas telas; a folha 3 (G1 = a) criou o quinto, st-erro, com o vermelho de perigo que já existia nos tokens — nenhum hex novo. Medido em 2026-10-10 (conta de luminância WCAG, 06-validacao/provas: a mesma que o gerador gen-banco-escolha.py refaz a cada geração):

O texto passa 4,5 nos cinco, nos dois temas. O fundo do chip contra a página é de 1,00 a 1,37 em todos (o st-neutro escuro é a cor da página, 1,00): o chip não é um limite de controle (não é clicável), então o SC 1.4.11 não o cobra [inferência] e quem carrega o significado é o texto e o ícone — como já era nos quatro tons antigos. O st-erro entra no CSS dos sete gabaritos que declaram .st-* (tela-chat, -detalhe, -gantt, -lista, -quadro, -referencia, -tabela), pelos moldes.

22.4.2 O conjunto padrão de status e o mapa das etapas (G2 = ok, G3 = a). O conjunto é Pendente (st-neutro) · Em andamento (st-info) · Ganho (st-ok) · Perdido (st-erro) — UM conjunto para tudo: quadro, lista e detalhe falam igual (G3 = a; descartado: status mais fino por domínio na lista e no detalhe). O mapa do gabarito de obras: Levantamento e Aguardando parecer = Pendente; Projeto, Execução e Comissionamento = Em andamento; Entregue = Ganho (o gabarito de obras não tem etapa de perda). Esses quatro tons são as sugestões iniciais da regra do W9.

H1 = a (folha 4, 2026-10-11 02:44:10Z): o Pendente vem CINZA (st-neutro) de fábrica, como já estava no gabarito do quadro e no detalhe. Nada mudou; a resposta confirma. Descartado: Pendente em âmbar (st-alerta).

H2 = a: a tabela e o chat de ORDENS DE SERVIÇO falam o mesmo conjunto (tela-tabela v0.6 e tela-chat v0.5, geradores gen-tela-tabela.py e gen-tela-chat.py): Em execução → Em andamento, Aguardando → Pendente, Concluída → Ganho. "Atrasada" deixou de ser status e virou MARCA DE PRAZO ao lado do chip (22.4.5). Consequências medidas nos gabaritos: o filtro "Situação: Atrasada" virou o filtro de Prazo ("Prazo: Atrasada"), ganhando ao lado o filtro de Status; o topo da tabela e do chat foi refeito ("Em andamento 15", que soma as 12 em dia e as 3 atrasadas, e "Fora do prazo 3") [inferência: os números do gabarito são fictícios; a soma preserva o total de OS abertas que a tela já mostrava]; a coluna Status da tabela passou de 140 para 220 px para caber o chip e a marca.

22.4.3 A paleta fechada da escolha (W9). Onze cores: os cinco tons de 22.4.1 + as seis da paleta de entidade (entity-1..6 com a tinta de cada posição, CP23). Medido (texto × fundo do chip; as seis de entidade são invariantes de tema, e o par é interno ao chip):

H4 = a (folha 4, 2026-10-11 02:44:10Z): a paleta fica nas onze cores (os 5 tons st-* + as 6 de entidade). Era "proposta da sessão, exposta a veto" desde a leva 32; agora é resposta dele, e a pergunta das rampas inteiras fica fechada. Onze de onze passam 4,5 nos dois temas. A régua do W9 é "só entra cor que passa", e a geração aborta se uma cor da paleta cair (a conta lê os tokens do gêmeo). As rampas inteiras (turquesa, cinza, vermelho… de 50 a 900) não entram: cada degrau pediria um par fundo/tinta que ninguém mediu, e a rampa de marca no escuro acende ("competindo com as cores de alerta", QD15) — se ele quiser mais cores, a pergunta é em quais degraus e com qual tinta.

22.4.4 O controle. Um grupo de rádios NATIVOS (§9 J3/J4: fieldset + legend "Cor do status “…”", input type="radio" DENTRO do rótulo, círculo visível de 24 px com alvo de 44 px, um tab stop por grupo, as setas movem a escolha). Cada opção é o chip na própria cor com o nome da cor escrito (“Verde”, “Petróleo”…): o nome acessível é o nome da cor, e a pessoa nunca escolhe só por matiz. O valor atual leva três sinais além da cor: círculo preenchido, borda de 2 px na cor de ação e o nome. Sem campo de hex. Sobrevoo muda a borda do rótulo (nunca a cor do chip, que é a informação); pressionado soma um anel interno (HV1); foco visível 2 px; forced-colors usa Highlight. A pré-visualização no legend acompanha a escolha e a mudança é anunciada ("Cor do status Perdido: Vermelho."). A bancada é banco-escolha.html v0.5 (seção "Cor do status", gerador gen-banco-escolha.py). O controle tem dono único desde a leva 33 (H5 = b): a paleta, a conta de contraste (que aborta a geração se uma cor cair de 4,5), o CSS do chip e do rádio, o HTML do grupo e o script vivem em 06-validacao/ferramentas/cor_status_bloco.py, e a bancada e a tela Configurações → Status (§86.4) o pedem — nunca copiam. Byte a byte: a bancada regenerada depois da extração é idêntica à da leva 32.

22.4.5 A marca de prazo (H2 = a). "Atrasada" não é status: é uma marca ao lado do status que diz que o prazo passou, e o registro continua com o status que tem (uma OS atrasada segue Em andamento). A forma é a do selo "atrasada" do cartão do quadro (QD19, seed-componentes.md §57): fundo feedback-danger-bg, texto feedback-danger-text (6,58 claro · 9,47 escuro), ícone de alerta de 14 px — o sinal nunca depende só da cor (o texto "Atrasada" e o ícone dizem). A variante sólida do QD20 só existe dentro do cartão vermelho do quadro; numa linha de tabela a marca é a clara. Mora em 06-validacao/ferramentas/selo_prazo_bloco.py (.selo-prazo, .st-celula), usado por gen-tela-tabela.py e gen-tela-chat.py; o quadro mantém o .tarefa-selo--atrasada dele, de 3 declarações iguais [pendência a nascer: o quadro passar a consumir o módulo].