Componentes
57. Quadro / Kanban
seed-componentes.md v2.00 · §57seção 118 de 18457-quadro-kanban-estavel-f7-4-2026-08-16-qd1-qd14.md · MD5 717cb5a5Título completo no canon: Quadro / Kanban — estável (F7.4, 2026-08-16) · QD1–QD14 · QD15–QD22 (leva 30) · QD23 decidido em 2026-10-10 (leva 31) e o QD2 reaberto · gabarito A7
Em uma frase: A coluna é TRILHA (sem fundo, sem raio, sem sombra) e o cartão é PEÇA; mover sem arrastar é o caminho principal.
Vocabulário desta seção: trilha · WIP
O que esta seção NÃO cobre: Raias horizontais (swimlanes) não estão especificadas; abrir o cartão leva ao detalhe (§49) — o quadro não edita o registro. — se é disto que você precisa, não preencha em silêncio: gere o pedido de cobertura (https://ds.seed.eng.br/pedidos/).
(decisão registrada — ver Histórico da seção)
57.1 A decisão de fronteira — e ela contraria o produto de referência#
O C57 observou que lá a coluna tem fundo tingido na cor do status, e o próprio estudo registrou a divergência com a §2.3 (que dizia "transparente"), deixando a escolha para o gate.
Mantemos a lei do CP2: a trilha é agrupador TRANSPARENTE — sem fundo, sem raio, sem separação.
O motivo não é apego ao texto. Com quatro a seis colunas tingidas, a tela ganha seis superfícies cromáticas competindo com os cartões, que são o que carrega o dado — e o CP19 diz que o croma vem das peças. A identidade da coluna resolve-se onde a própria leitura já a resolvia: no cabeçalho, com a pílula saturada de status e o contador fora dela.
(decisão registrada — ver Histórico da seção)
57.2 Os contratos#
| # | Contrato | O que ele descarta, e por quê |
|---|---|---|
| QD1 | A coluna é TRILHA (CP2): sem fundo, sem raio, sem sombra, sem borda | Coluna como peça. Peça é o que se separa do canvas, e a coluna não se separa de nada — chamá-la de peça esvaziaria a definição |
| QD2 (reaberto pelo QD23, 2026-10-10) | A identidade da etapa vive no cabeçalho: |
Contador dentro da pílula. Isso obrigaria a medir contraste de número sobre seis fundos diferentes, e o número passaria a herdar a cor do status — que não é informação dele |
| QD3 | O cartão é PEÇA: par sombra+anel (CP17) e radius-lg |
Cartão sem separação: sem ele, a trilha vira uma lista de textos soltos sobre o canvas |
| QD4 | Metadado do cartão em LINHAS, cada uma com ícone + nome acessível + valor | Rodapé horizontal (C58). Ele comporta três metadados; um quadro de engenharia carrega responsável, prazo, potência e campo de domínio, e acima de três o rodapé quebra ou trunca |
| QD5 | Teto de trabalho em curso (WIP) por etapa. Excedido, o contador muda de tinta e ganha ícone com texto acessível | Sinal só por cor. E descarta não ter teto: sem ele o quadro mostra o trabalho, mas não mostra o gargalo, que é a razão de o quadro existir |
| QD6 | Mover sem arrastar é o caminho PRINCIPAL: menu "Mover para…" em todo cartão, sempre presente | Arraste como caminho único — reprova o SC 2.5.7. E descarta tratar o teclado como se fosse a alternativa: a norma pede os dois, porque quem usa toque pode não ter teclado |
| QD7 | Teclado completo: Espaço pega, setas escolhem a etapa, Enter solta, Esc cancela — e cada passo é anunciado em live region | Mover sem anúncio. Movimento que só se vê não existe para quem não vê |
| QD8 | A rolagem horizontal do quadro é exceção bidimensional DECLARADA ao SC 1.4.10: região focável, nomeada, com encaixe | Rolagem no documento inteiro. A exceção da norma vale para o conteúdo que exige duas dimensões, e vale para a região — não para a página |
| QD9 | Largura de trilha FIXA | Coluna elástica: a largura mudaria conforme o número de etapas, e o mesmo cartão teria tamanho diferente em cada quadro |
| QD10 | Dentro do cartão não nasce outro cartão: o seletor de campo do domínio é linha com fronteira | Peça dentro de peça (CP2) |
| QD11 | Alvo de soltura em borda TRACEJADA, nunca cor saturada (CP30) | Realce cromático: ele desaparece na escala de cinza, e o preview tem o controle que prova isso |
| QD12 | A coluna vazia NÃO colapsa e mostra o convite (C59) | Colapsar. A coluna vazia é lugar de pôr coisa — o vazio aqui é convite, não erro (§25, caso C) — e colapsar faria o quadro mudar de forma a cada movimento |
| QD13 (emenda do QD23) | No degrau estreito, uma trilha por vez, com encaixe — densidade por container query (CP27). O cabeçalho da trilha QUEBRA LINHA quando pílula + chip de status + contador + "+" não cabem (trilha de 288 px, ou 100% no degrau estreito): nada estoura e nada é truncado a ponto de perder o texto do chip |
Miniaturizar as colunas: quatro colunas de 80px não são um quadro |
| QD14 | Abrir o cartão leva ao detalhe (A8); o quadro não edita o registro | Editar tudo no cartão. O cartão é a face do objeto, não o objeto |
| QD15 (QD-P7 a) | A pílula da etapa que é POSIÇÃO é NEUTRA (surface-sunken / text-secondary, texto 6,42 claro · 9,92 escuro), igual em todas as trilhas. A pílula saturada do QD2 vale quando a etapa carrega status de verdade; a etapa de um funil ("Novo lead", "Negociação") é posição — a ordem das colunas já a diz. A pílula neutra do quadro não é .chip-st (o chip de status é o vocabulário do §22) |
Rampa por posição (turquesa 50→300): exige regra e nomes novos para a rampa, e no escuro a pílula clara mede 17,35 contra o fundo e "acende", competindo com as cores de alerta. A cor do quadro fica para o que muda (atraso, fora do prazo, teto excedido) |
| QD16 (QD-P8 a) | A etapa onde NÃO se cria cartão (os cartões só chegam movidos de outra) mostra um AVISO com cadeado, sem borda no lugar do convite do QD12, e o cabeçalho omite o "+". O texto vem do §25 ("Sem permissão"): o porquê, de onde os cartões chegam e quem muda isso — nunca finge que a área não existe. Texto 7,75 / 9,92 | Convite tracejado desabilitado com motivo: a borda tracejada é a forma de botão e de convite no DS (borda 3,38 / 5,51) e convidaria um clique que não funciona. O que não é botão não deve parecer botão |
| QD17 (QD-P9 c) | No degrau estreito (QD13) o quadro ganha SETAS de 44 px com o nome da etapa e a posição ("2 de 4 etapas"), anterior e próxima, a anterior desabilitada na primeira e a próxima na última. É um gesto que não depende de arrastar, e vale também para a trilha que ficou atrás da rolagem do QD8. Só aparece com o quadro estreito (≤ 560 px de contêiner); o nome acessível de cada seta diz a etapa de destino | Pontos + "2 de 4" (alvo pequeno; o nome das outras etapas não aparece) e faixa rolável de etapas (lembra abas, §34) |
| QD18 (QD-P10 b) | Os selos da cadência (§21) vivem NAS LINHAS do cartão (QD4), e a ação "Concluir e agendar a próxima" é um botão fantasma compacto de 32 px (alvo 44 × 32, como o "Mover para…"), com o rótulo curto "Concluir e agendar" (sem tarefa aberta: "Agendar tarefa") contido no nome acessível. A ação cria atividade, não edita os campos do registro — por isso cabe no cartão sem contrariar o QD14 [leitura da sessão do QD14, exposta a veto] | Selo abaixo + botão de largura inteira (um botão largo em todo cartão pesa mais que o título); só o selo, com a ação no detalhe (a ação mais frequente do vendedor fica um clique mais longe) |
| QD19 (QD-P10.1 b) | O selo da próxima tarefa tem QUATRO estados: prazo → informação (texto 5,79 / 9,38) · vence hoje → atenção (9,05 / 9,27) · atrasada → erro (6,58 / 9,47) · "Sem tarefa agendada" → atenção + ícone de calendário riscado. Cartão sem tarefa é problema, não estado neutro. O sinal não depende da cor: texto + ícone da linha | Sem tarefa neutro (a falta de próximo passo pareceria estado normal) e atenção com borda tracejada (a mesma razão do QD16: a borda tracejada diria "clique aqui" num selo que não é botão) |
| QD20 (QD-P10.2 a) | O selo "atrasada" DENTRO do cartão fora do prazo (QD21) é SÓLIDO (action-destructive + text-on-action-destructive, texto 5,19 / 5,26). O selo claro tem o mesmo fundo do cartão (1,0 : 1) e a forma desaparece. Fora do cartão vermelho, o selo segue claro (QD19) |
Selo claro com borda: a borda mede 1,84 / 2,02 e a forma quase some |
| QD21 (QD-P13 c) | O cartão fora do prazo da etapa usa a PELE do alerta do §15: fundo feedback-danger-bg, borda de 1 px -border e faixa esquerda de 4 px -solid, mais a linha "Fora do prazo da etapa · há N d" com ícone, em danger-text (6,58 / 9,47), que repete o sinal sem depender da cor (WCAG 1.4.1). O título do cartão passa a text-brand-strong (5,79 / 7,92): o text-link reprova sobre esse fundo no claro (4,21). A faixa sobrevive à escala de cinza (4,75 / 5,26) |
Só o fundo (mede 1,09 / 1,05 contra um cartão normal: some em cinza) e fundo + anel (anel 2,01 / 2,59 contra a página, abaixo de 3 : 1) |
| QD22 (QD-P12 b) | As ações secundárias do funil moram cada uma no seu lugar: "Editar funil" é botão secundário no cabeçalho do quadro (age sobre o funil aberto) e "Novo funil" é uma linha no fim da lista de funis da área, na coluna do Comercial (cria um irmão onde os funis já moram — o mesmo caminho do rail, rail-3b). Só para quem pode gerir funil. O gabarito A7 (obras) não tem seletor de funil; esta regra é para o quadro de funil do produto |
Menu "⋯" com as duas (ações escondidas atrás de um ícone) e engrenagem ao lado do título ("Novo funil" dentro de "configurar este funil" não é óbvio) |
| QD23 (QD-P16 c) | O STATUS da etapa vive no CABEÇALHO da coluna, como o chip do §22. (1) Etapa não é status, e o status continua existindo: cada etapa declara o status que representa, e pode haver mais de uma etapa no mesmo status (relação N etapas : 1 status); o status do card e as etapas se controlam separadamente. (2) Conjunto pequeno de quatro [nasceu como proposta da sessão; confirmado por ele na folha 3, G2 = ok, e o Pendente cinza na folha 4, H1 = a]: Pendente (st-neutro) · Em andamento (st-info) · Ganho (st-ok) · Perdido (st-erro, decidido na folha 3, G1 = a, 2026-10-10: o vermelho de perigo que já existia, feedback-danger-bg/-text; texto 6,58 claro · 9,47 escuro; ver o §22.4.1). Conjunto e mapa confirmados (G2 = ok): Levantamento e Aguardando parecer = Pendente; Projeto, Execução e Comissionamento = Em andamento; Entregue = Ganho. (3) O chip é o .chip-st do §22 (texto + ícone, nunca só cor) e mora no cabeçalho, ao lado da pílula neutra da etapa (QD15) e do contador, os três fora uns dos outros (QD2). (4) O cartão NÃO repete o status: o status do cartão é o da etapa em que ele está — a resposta dele fecha a hipótese de o cartão divergir da coluna. Mover o cartão para outra etapa muda o status dele pela etapa de destino. (5) Fora do quadro, o status do registro aparece pelo mesmo chip do §22, como já é no canon: coluna "Situação" da lista e da tabela (gabaritos tela-lista, tela-tabela, tela-referencia) e o cabeçalho do painel de detalhe (A8, esboço do §49, "«chip de status»"). (6) O texto do chip é o rótulo do status; a ordem no cabeçalho é pílula · chip · contador (· teto · "+"). Veredito dele, verbatim. Folha 2, F7 (2026-10-10 11:22Z): "etapa nao é status, mas o status continua existindo, cada etapa é setado o status que ela representa, pois podemos ter mais de uma etapa no mesmo status. dessa forma controlamos o status do card e as etapas separadamente." Folha QD-P16 (2026-10-10 12:51Z), escolha c: "é C porque tudo que está naquela etapa representa aquele status." |
Chip de status em CADA cartão (repete o que a coluna já diz, N vezes por coluna, e abre a hipótese de divergência); status só por cor de coluna tingida (QD1 e o §57.1: sem fundo na trilha); trocar a pílula neutra pelo status (o QD15 diz que a posição é a ordem das colunas, e o status é outra informação) |
| QD24 (QD-P17 e QD-P18, folha 3 de 2026-10-10) | O conjunto de status é UM só para o produto (quadro, lista, detalhe), Perdido é st-erro, e a COR de cada status é um campo editável numa paleta fechada. (1) G1 = a: st-erro com o vermelho de perigo existente. (2) G2 = ok: o conjunto e o mapa das etapas do QD23. (3) G3 = a: a lista e o detalhe de obras falam o mesmo vocabulário do quadro — o tela-detalhe v0.7 usa Pendente · Em andamento · Ganho e o escopo da barra lateral fecha a conta com os 10 registros (4 + 4 + 2). (4) A cor é do usuário com permissão, dentro de onze cores medidas (§22 W9 e §22.4); o status nasce com a sugestão do DS. Folha 4 (2026-10-11 02:44:10Z, sem observações): H1 = a (Pendente cinza de fábrica) · H2 = a (a tabela e o chat de OS falam o mesmo conjunto; "Atrasada" vira marca de prazo, §22.4.5) · H3 = a (cada TIPO de registro tem o seu conjunto, todos com a cor editável; §22 W10) · H4 = a (a paleta fica nas onze cores) · H5 = b (o DS desenha a tela Configurações → Status, §86.4). Veredito dele, verbatim (G2, observação): "a cor dos status quero que deixe a pessoa que tiver acesso a editar ou criar status, possa escolher a cor que quiser, dentro da nossa paleta de cores no DS. ja pode vir com as sugestoes, mas deve ser um campo editavel." |
Status mais fino por domínio na lista e no detalhe (G3 = b); Perdido no st-alerta do Pendente (G1 = b); cor fixa por status |
57.3 Números MEDIDOS na produção#
| Medida | Valor |
|---|---|
| Largura da trilha (fixa) | 288px |
| Calha entre trilhas · entre cartões | 12px · 8px |
| Alvo do gatilho "Mover para" | 44 × 32px |
| Alvo do convite da coluna vazia e do "+" da etapa | 44px no eixo curto |
| Raio do cartão · da trilha | 12px · 0px |
| Transbordo horizontal do documento | 0px (quem rola é a região declarada) |
| Pares de cor medidos (F7.3 + F7.4) | 54 pares × 2 temas = 108 · 0 |
57.4 Validação#
| Camada | Placar |
|---|---|
suite-quadro.mjs — blocos TRI · CAR · WIP · PTR · TEC · REG · VAZ · VIV · NEU · SEM · SEL · PEL · NAV (leva 30, QD15–QD21) · STA (leva 31, QD23) |
50 · 0 (eram 46 · 0; +4 em 2026-10-10: STA-01 chip de status em toda trilha, com texto e ícone · STA-02 nenhum no cartão · STA-03 conjunto fixo e N:1 · STA-04 o cabeçalho quebra linha e não estoura, a 1600 e a 390 px) |
suite-composicao.mjs (render, 2 temas) |
32 · 0, 0 [n/a] (a leva 30 deixou 26 · 0 + 6 [n/a]: a pílula neutra do QD15 deixou de ser .chip-st e a guarda ST do §22 só cobra a tela que usa chip de status; o QD23 devolve o chip ao cabeçalho e as 6 verificações ST-01/02/03 × 2 temas voltam a rodar) |
contraste-f73.py — 54 pares × 2 temas (hoje 76 pares na bancada F7.3–F7.5) |
108 · 0 na F7.4; 152 · 0 (76 pares × 2 temas) em 2026-10-10 |
| Console e erros de página | limpo |
Nota sobre a
suite-composicao.mjs: a guardaMONO-03(coluna de valor à direita e em monoespaçada, contrato PN21d) passou a ser condicional à existência de tabela, e isso está impresso na saída, não silenciado. A distinção importa e não é a mesma coisa que "pular quando o elemento falta": quando há tabela, a coluna de valor tem de existir e obedecer; quando não há tabela, o contrato não se aplica. O quadro empilha cartões, não linhas — não há coluna a alinhar. Por isso o gabarito A7 fecha em 32, e não em 33.
57.5 Pendências#
| # | Pendência | Por que fica aberta |
|---|---|---|
| QD-P1 | Arraste com ponteiro (o 1º caminho do CP30) não está implementado no gabarito | Os caminhos obrigatórios pela norma são o de ponteiro único e o de teclado, e ambos estão prontos e provados. O arraste é conveniência, e implementá-lo sem dnd-kit no gabarito criaria código que o produto não vai usar |
| QD-P2 | Raias horizontais (swimlanes) não especificadas | Nenhum caso SEED atual exige. Entra quando houver — e o CP2 já prevê a trilha, que é o mesmo tipo em outro eixo |
| QD-P3 | Reordenar dentro da mesma coluna — o menu move entre etapas, não muda a posição | O quadro SEED ordena por prazo, não à mão. Reabre se surgir caso de prioridade manual |
| QD-P4 | A5 gantt e A15 carga de trabalho, os outros dois arquétipos da F7.4 | O gantt tem leitura (C77–C81); a carga não tem. Próximo movimento da fase |
57.6 Decisões da folha de 2026-10-10 (QD15–QD22) — o que cada uma fechou#
A folha de perguntas de 2026-10-10 (P12, "a, a, a" = "aplicar a recomendação da sessão nas três folhas v3") trouxe oito perguntas do quadro, todas respondidas pela opção recomendada. Fecham: QD-P7 (QD15) · QD-P8 (QD16) · QD-P9 (QD17) · QD-P10 (QD18) · QD-P10.1 (QD19) · QD-P10.2 (QD20) · QD-P13 (QD21) · QD-P12 (QD22). Do QD22 o gabarito não ganha desenho (o A7 é um quadro de obras, sem seletor de funil); do QD15 ao QD21 o gabarito tela-quadro v0.5 os exerce (gerador gen-tela-quadro.py; seletores .pilula-posicao, .trilha__aviso, .quadro-nav, .tarefa-selo--*, .cartao__concluir, .cartao[data-fora-prazo]). Esta seção guarda o raciocínio do QD14 aberto: o quadro continua sem editar o registro (a ação do QD18 cria atividade).
57.7 O status da etapa (QD23) — o que as folhas de 2026-10-10 fecharam#
A folha 2 (F7) perguntou como a etapa se relaciona com o status; a resposta dele (verbatim no QD23) é que etapa não é status, mas o status continua existindo, N:1. A folha QD-P16 propôs três saídas e ele escolheu a c (o chip do status no cabeçalho). O gabarito tela-quadro (gerador gen-tela-quadro.py, STATUS_ETAPA) exerce: Levantamento e Aguardando parecer = Pendente · Projeto, Execução e Comissionamento = Em andamento · Entregue = Ganho. A folha 3 fechou os três pontos que ficaram em aberto (QD24): (a) Perdido ganhou o tom próprio st-erro (G1 = a), no §22.4.1, com o vermelho de perigo que já existia; (b) o conjunto de quatro e o mapa das etapas de obras foram confirmados (G2 = ok); (c) o status do registro na lista e no detalhe fala o mesmo conjunto (G3 = a) — aplicado no tela-detalhe (obras). E ele acrescentou uma regra (G2, observação, verbatim no QD24 e no §22 W9): a cor do status é um campo editável, escolhido numa paleta fechada do DS, com a sugestão já marcada.
Também cita o §57: banco-escolha, tela-quadro-funil.