Ir ao conteúdo
SEED engenhariaDesign System

Composição

7c. Responsivo em DUAS camadas — CP26, CP27 e CP28 (F7–F9/2026-08-15)

seed-composicao.md v2.1 · §07cseção 11 de 1707c-responsivo-em-duas-camadas-cp26-cp27-e-cp28-f7.md · MD5 c5bb6998

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.


Esc