Composição
5. Densidade e ordem de colapso — CP15 e CP16
seed-composicao.md v2.1 · §05seção 7 de 1705-densidade-e-ordem-de-colapso-cp15-e-cp16.md · MD5 13655974CP15 — A ESCADA DE COLAPSO CANÔNICA. A ordem em que a tela cede, declarada até 360px. Contraexemplo declarado (fato —
estudo-clickup-completo.md§11.2): a ordem do ClickUp termina em "nada mais colapsa, tudo comprime"; o rail de 64px persiste até 560px,(pointer: coarse)nunca é verdadeiro e o mobile é delegado a app nativo. Nossa premissa é paridade mobile total — o ClickUp aqui é contraexemplo, não referência, e nenhum arquétipo nosso pode citá-lo como precedente de responsivo.
Princípio da ordem (o que cede primeiro): 1º navegação persistente vira sob-demanda (some da tela, não do produto) → 2º colunas e metadados de baixa importância somem, por decisão editorial declarada (nunca por acidente) → 3º rótulos migram para junto do dado (nunca somem) → 4º densidade afrouxa (alvos crescem, nunca encolhem).
A escada, por faixa de viewport:
| Faixa | O que cede | Fonte |
|---|---|---|
| ≥1024px | composição plena | — |
| <1024px | sidebar contextual: níveis 2+ em flyout | SH4-c |
| <640px | rail+sidebar → drawer modal único · modal de tarefa → tela cheia · popover denso → tray · tabela → rolagem do wrapper ou cards (colunas low somem; rótulos migram via data-label) · toolbar empilha · densidade trava ≥44px · CTA de fluxo full-width · grade do painel → 1 coluna |
SH12 · MD4 · Y4 · LD2/LD3/LD4 · TD1 · DT2 · §1.4 · PN1 |
| ≤360px (pior caso declarado, tokens §2.9) | tudo acima já aplicado + zoom das lentes se declara em unidades visíveis com px derivado da largura (funciona "em 1180px e em 390px") + campos a 16px em pointer: coarse |
PN41d · §0.8 |
CP16 — O QUE NUNCA COLAPSA. Em qualquer largura até 360px: a calha ("nada encosta em nada" é invariante — a escada remove blocos e afrouxa densidade, nunca remove a folga) · o alvo de toque ≥44px · o fallback textual (DG1, PN54 — é conteúdo, não enfeite) · o formulário único da página de serviço (MK8/MK21) · o zoom do usuário (MK4: proibido bloquear, sem caso legítimo) · o caminho alternativo de ponteiro único (PN23, SC 2.5.7). Racional: cada item desta lista é uma conformidade ou uma decisão medida; colapsá-los não economiza tela — quebra o produto.
Densidade (quantos blocos): a grade do painel (PN1: larguras 4/6/8/12) implica no máximo
três peças por linha; a regra do um (§1.12) vale por tela: um h1, um primário por
contexto, uma âncora de ênfase por página (§3.5-c/S11-b), um protagonista tipográfico
(CP18). Os tetos quantitativos de massa visual estão no CP21.
Guarda de método herdada (regra da matriz do DP, mais geral que o DP): "simular uma dimensão só vale se a simulação dirigir as MESMAS regras que a realidade dirige." Se um arquétipo adotar container query (C22), a camada de render precisa redimensionar o container, não a janela — senão a suíte vira verde-e-errada, a classe de defeito que originou o MANIFESTO.