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 c5bb6998CP26 — 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
<600pxe 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-namede 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
telaepagina, 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 nobody, porque ali não existeapp— e obanco-dataviz-dpfaz o mesmo no contexto de página. Chamar isso deappseria 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-containermedia esta lei em DUAS telas (as da F7.2), enquanto a lei vale para o acervo inteiro desde a F7.1. A guarda novaguarda-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 é) epag(raiz da tela do site →pagina, o nome inteiro). Abreviação de três letras não é vocabulário: ninguém lê@container pne 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 skillseed-ds-uirecebe 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.