---
fonte: 01-canonicos/seed-composicao.md
versao_da_fonte: v2.1
secao: 07c
titulo: "Responsivo em DUAS camadas — CP26, CP27 e CP28 *(F7–F9/2026-08-15)*"
sequencia: 11 de 17
bytes_do_corpo: 4886
md5_do_corpo: c5bb69986e4dace9807979498273216e
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-composicao.md
---
## 7c. Responsivo em DUAS camadas — CP26, CP27 e CP28 *(F7–F9/2026-08-15)*

> **CP26 — GABARITO É A INSTÂNCIA NOMEADA DE UM ARQUÉTIPO, E É O QUE SE ENTREGA AO PRODUTO.**
> A tabela do §3 declara o contrato; um **gabarito** é aquele contrato preenchido com blocos,
> primitivos e componentes concretos — a "página pronta para começar" (o equivalente aos
> *blueprints* do Salesforce Lightning). Todo gabarito nasce com: canvas, peças, contêineres
> nomeados (CP27), ordem de colapso (CP15) e estados não-felizes (§25) declarados. **Gabarito sem
> a coluna `<600px` e sem estado vazio está incompleto por definição.**

> **CP27 — CONTAINER QUERY NOMEADA GOVERNA A DENSIDADE. Todo bloco que muda de forma por espaço
> declara `container-name` de uma lista fechada; container anônimo é drift.**
>
> **Fato que motiva, MEDIDO no produto de referência:** mais de **60 container queries**,
> quase todas nomeadas, contra 54 media queries — e a barra de ferramentas de visualização
> sozinha tem **sete pontos de quebra do próprio container**. A consequência foi escrita no
> estudo: *simulação de dimensão de render só conta se disparar as mesmas regras da realidade —
> container queries, não media queries.* Um componente que consulta a janela quebra ao ser posto
> numa gaveta de 300px, e **nenhuma suíte que redimensiona a janela vê isso**.
>
> **Lista fechada de contêineres nomeados** (cresce por supersede, nunca por improviso):
> `app` (shell) · **`tela`** (raiz de arquétipo que roda SEM shell) · **`pagina`** (raiz de
> página pública/institucional) · `conteudo` (região principal) · `peca` (qualquer cartão) ·
> `trilha` · `regua` (toolbar/régua de tempo) · `painel-lateral` (sidebar/gaveta) · `celula`
> (célula de grade/tabela) · `faixa` (seção da página institucional).
>
> **SUPERSEDE de 2026-08-24 (F7.7-P3, veredito dele: *"sigo sua recomendação"*): a lista vai de
> OITO para DEZ nomes.** Entram `tela` e `pagina`, e o motivo é que eles nomeiam um nível que a
> lista não tinha: **a raiz de consulta de um arquétipo que não vive dentro do shell.** As seis
> telas da F7.6 (autenticação, onboarding, busca, configurações, atividade, documento) declaram
> a raiz no `body`, porque ali não existe `app` — e o `banco-dataviz-dp` faz o mesmo no contexto
> de página. Chamar isso de `app` seria mentir sobre o nível; deixar anônimo é o drift que este
> CP proíbe.
>
> **Como o buraco foi achado, e por que ele durou nove dias:** a `suite-container` media esta lei
> em DUAS telas (as da F7.2), enquanto a lei vale para o acervo inteiro desde a F7.1. A guarda
> nova `guarda-container-nome.mjs` (F7.7-P3) varre tudo — telas e bancadas — e achou **nove
> artefatos com nome fora da lista** na primeira execução. *Instrumento que mede parte do acervo
> declara conformidade de parte do acervo.*
>
> **Duas abreviações foram RENOMEADAS no mesmo veredito, e não admitidas:** `pn` (interior do
> painel → **`conteudo`**, que é o que ele é) e `pag` (raiz da tela do site → **`pagina`**, o nome
> inteiro). Abreviação de três letras não é vocabulário: ninguém lê `@container pn` e sabe do que
> se trata. *Nome de contêiner é contrato de leitura, não economia de bytes.* Os dois artefatos
> são gerados, então a troca foi feita nos moldes e regerada — nunca no artefato (§14.4).
>
> **Stack:** Tailwind v4 traz container query nativa (`@container/nome`), sem plugin — a skill
> `seed-ds-ui` recebe o mapeamento junto da pendência NM4.

> **CP28 — O VIEWPORT GOVERNA O REFLOW, E ESSA FRONTEIRA É NORMATIVA.**
> **Achado que corrige o CP27 antes de ele virar erro:** o SC **1.4.10 Reflow (AA)** é medido
> contra o **viewport** — 320 CSS px de largura, ou 400% de zoom numa janela de 1280px. Container
> query **não prova reflow**: um componente pode reagir lindamente ao seu contêiner enquanto a
> página inteira força rolagem em dois eixos. Portanto:
>
> | Camada | Instrumento | O que decide | Como se prova |
> |---|---|---|---|
> | **Densidade** | container query nomeada (CP27) | forma do bloco no espaço que ele ocupa | redimensionar o **contêiner** e medir |
> | **Reflow** | media query + zoom | colapso da tela, ordem do CP15, coluna única | janela a **320px** e **400% de zoom** em 1280px |
>
> **Exceções de reflow, declaradas** (a norma as prevê: "conteúdo que exige layout bidimensional"):
> **tabela de dados**, **mapa**, **gantt** e **matriz de capacidade** podem rolar em dois eixos —
> e cada um **declara isso no seu gabarito**, com alternativa de leitura (a alternativa textual do
> mapa, PN54, é o precedente).
>
> *Alternativa descartada:* migrar tudo para container query e aposentar as media queries —
> descartada por **medição de norma**: perderíamos a prova de 1.4.10, que é AA e vale para
> qualquer produto SEED.

---