---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 57
titulo: "Quadro / Kanban — `estável` (F7.4, 2026-08-16) · QD1–QD14 · gabarito A7"
sequencia: 63 de 98
bytes_do_corpo: 8263
md5_do_corpo: 130983704cdf0726620fc0b066dc1ff3
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 57. Quadro / Kanban — `estável` (F7.4, 2026-08-16) · QD1–QD14 · gabarito A7

> **Base.** **Rodada zero:** o arquétipo TEM leitura visual — §13.5 do `estudo-clickup-completo.md`,
> dispositivos **C57–C59** —, somada às medições de valor da §2.3 e ao contrato de arquétipo já
> escrito no `seed-composicao.md` (CP2, tipo **trilha**).
> **R1 canon:** o quadro é colunas de etapa, cartões de item e **teto de trabalho em curso** (WIP) —
> o limite máximo de cartões por coluna, cuja função é forçar a terminar antes de começar. Colunas
> devem espelhar o fluxo real, e não um "A fazer / Fazendo / Feito" genérico, senão o gargalo não
> aparece.
> **R2 stack:** não há Kanban no shadcn/ui base; o padrão de mercado é o **dnd-kit**, cujo sensor de
> teclado move cartão por setas e confirma com Espaço ou Enter. Os componentes de 2026 tratam quatro
> superfícies: estrutura de colunas, cartão arrastável com reordenar e mover entre colunas,
> primitivos de acessibilidade (teclado e anúncio para leitor de tela) e o shell em volta.
> **R3 normas:** o **SC 2.5.7 Dragging Movements** (AA, WCAG 2.2) exige que toda função operada por
> arraste seja alcançável por **ponteiro único sem arrastar** — e a norma é explícita em que isso
> **não é a mesma coisa que teclado**, coberto em separado pelo SC 2.1.1, *porque quem usa tela de
> toque pode não ter teclado físico*. A técnica **G219** do W3C foi escrita com este exemplo
> literal: mover uma tarefa num quadro. O padrão recomendado é "mover para…" em menu, ou
> tocar-e-colocar.

### 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.

*Alternativa descartada com o porquê, não por omissão. Se o gate quiser o tingido, a mudança é de
uma linha no molde — mas ela reabre o CP19, e isso precisa ser dito antes, não depois.*

### 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** | **A identidade da etapa vive no cabeçalho**: pílula saturada de status + contador **fora** dela | 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** | **No degrau estreito, uma trilha por vez, com encaixe** — densidade por container query (CP27) | 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 |

### 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 | **35 · 0** |
| `suite-composicao.mjs` (render, 2 temas) | **32 · 0** |
| `contraste-f73.py` — 54 pares × 2 temas | **108 · 0** |
| Console e erros de página | limpo |

> **Nota sobre a `suite-composicao.mjs`:** a guarda `MONO-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 |

---