--- fonte: 01-canonicos/seed-componentes.md versao_da_fonte: v1.43 secao: 49 titulo: "Detalhe de registro — painel e modal — `estável` (F7.3, 2026-08-16) · PD1–PD19 · gabarito A8 · fecha a pendência PN-P3" sequencia: 51 de 98 bytes_do_corpo: 16755 md5_do_corpo: 2bf3e3688f14b16938b8addf07e8476c 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 --- ## 49. Detalhe de registro — painel e modal — `estável` (F7.3, 2026-08-16) · PD1–PD19 · gabarito A8 · fecha a pendência PN-P3 > **O que esta seção resolve, e por que ela demorou.** A **PN-P3** está aberta desde a Fase 5: todo > ERP é *lista → detalhe*, e o nosso caminho morria na lista. A seção não foi escrita antes por um > motivo declarado — não havia LEITURA VISUAL do arquétipo, só extração de valores, e a F7.2 provou > caro o que isso produz (números certos, composição errada). A leitura chegou em 2026-08-15, na > §13.4 do `estudo-clickup-completo.md`, com sete dispositivos observados: **C50** modal que navega > entre irmãos sem fechar, com posição no conjunto em cabeçalho fixo · **C51** propriedades em > grade de duas colunas · **C52** campos customizados em lista com ícone de tipo e rótulo truncado · > **C53** ações do campo reveladas no hover · **C54** corpo truncado com "Expandir" · **C55** rail > de seções DENTRO do modal · **C56** contadores de metadado como ícone+número. > > **Base (3 rodadas encadeadas + rodada zero, 2026-08-15).** > **Rodada zero — leitura visual:** confirmada na §13.4 antes de qualquer spec. Regra da fase. > **R1 canon:** **Carbon** dá a régua por VOLUME, não por gosto — modal quando um subconjunto > pequeno é editável; se há campos suficientes para exigir rolagem, painel lateral ou página > inteira; e o side panel existe para *manter o usuário em contexto com a página*. **Fiori** dá o > object page (seções e subseções com navegação por âncora ou aba) e duas réguas operacionais que > entraram inteiras: a paginação entre irmãos só aparece quando a lista de origem tem **ao menos > dois itens**, e ao excluir o item corrente seleciona-se o anterior — se não sobra nada, fecha. > Fiori também manda usar **o mesmo layout em exibição e edição**: o conteúdo não muda de lugar. > **R2 mercado/stack:** Radix Dialog entrega os dois regimes (modal e não-modal) com controle fino > de foco, o que barateia a decisão PD1 — é o mesmo primitivo. Nota de fronteira registrada: o > Radix foi adquirido pela WorkOS e a cadência caiu em alguns componentes; o Base UI é hoje a > camada de primitivos mais ativa, e o shadcn/ui é o consumo dominante. Não muda decisão aqui; > muda o que vigiamos. **R3 normas / fora do circuito:** o cabeçalho fixo do C50 é risco de norma, > não detalhe estético — a falha **F110** do WCAG 2.2 descreve exatamente o sticky que cobre o > elemento focado, e o SC 2.4.11 é AA; o conserto canônico é `scroll-padding`. O hover do C53 é a > armadilha maior: o Spectrum corrigiu este caso em novembro de 2025 trocando `visibility:hidden` > por `opacity:0`, porque `visibility:hidden` e `display:none` **removem da árvore de > acessibilidade** e o botão deixa de ser alcançável por Tab. O "Expandir" do C54 precisa de > `aria-expanded` + `aria-controls` e de rótulo que nomeie o quê. > > **A LACUNA QUE A PESQUISA REVELOU, e é o achado da rodada:** **não existe canon para troca de > conteúdo DENTRO de um diálogo já aberto.** Todo o corpus trata abertura e fechamento. O anúncio > do nome do diálogo acontece quando o foco entra nele; trocar o texto do título com o foco parado > **não produz anúncio nenhum**. Sem instrumento próprio, navegar entre irmãos é silencioso para > leitor de tela. O PD3 é decisão nossa, declarada como tal. > > **Gate de 2026-08-15 (Rafael, sobre amostra A/B navegável):** *"modal A por padrão, e opção do > modelo B caso o usuário prefira, então vamos ter as duas opções. no modelo A, deixa opção de > expandir a janela depois que ela for aberta."* Daí saem o PD1 (dois regimes, modal como padrão), > o PD17 (dois degraus da janela) e o PD18 (alternância a partir do próprio detalhe). ### 49.1 Os contratos | # | Contrato | O que ele descarta, e por quê | |---|---|---| | **PD1** | **Três regimes, escolhidos por VOLUME de conteúdo, com o MODAL como padrão.** Modal centrado (registro que cabe sem rolagem longa) · painel lateral **não-modal** (o contexto da lista importa durante a leitura) · página inteira (objeto com muitas seções e edição global). O painel é **preferência do usuário**, persistida por usuário e não por sessão | Copiar o modal do produto de referência como regime único. Carbon é explícito: campos suficientes para exigir rolagem já pedem painel ou página. E descarta manter **dois desenhos** do detalhe: o markup é UM só, movido de hospedeiro (ver PD16) | | **PD2** | **A paginação entre irmãos só existe com conjunto ≥ 2**, exibe a posição (`9/10`) e nas pontas fica **desabilitada** | Seta sempre presente e inerte: com um registro só, um controle que não faz nada é botão morto. Régua literal do Fiori | | **PD3** | **Trocar de irmão NÃO devolve o foco ao topo**; o foco permanece no controle acionado e a troca é anunciada por live region `polite` no formato "Registro N de M — título" | Reabrir o diálogo a cada irmão (perde rolagem e re-anuncia tudo) e confiar no `aria-labelledby`, que só é lido na abertura. **Sem canon — decisão declarada** | | **PD4** | **Registro excluído → seleciona o anterior; conjunto vazio → fecha** | Manter o detalhe aberto sobre um registro que não existe mais | | **PD5** | **Cabeçalho do detalhe é FIXO**, e o contêiner de rolagem declara `scroll-padding-top` **maior** que a altura dele | Sticky sem compensação: é a falha F110 do SC 2.4.11. Medido no gabarito: cabeçalho 68px, `scroll-padding-top` 76px — 64px reprovava por 4px, e "quase" não passa numa norma cujo teste é o foco sumir atrás da barra | | **PD6** | **Ausência de valor é SEMPRE travessão**, na grade e na lista de campos | A palavra "Vazio". O produto de referência usa os dois tratamentos no mesmo registro (C52) — divergência registrada e **não copiada**; o DT7 já escolheu o travessão | | **PD7** | **A grade de propriedades responde ao CONTÊINER** (CP27): 1 coluna até 520px, 2 acima, 3 a partir de 900px | Breakpoint de viewport. Consequência que vale a lei: expandir a janela faz **caber mais**, nunca deixa o dado **maior** | | **PD8** | **Altura de linha do campo é FIXA; quem cede por falta de largura é o RÓTULO**, com o texto completo em `title` e equivalente por foco (X2 do §23) | Truncar o valor primeiro. O valor é o dado; o rótulo é a etiqueta dele, e etiqueta curta ainda identifica | | **PD9** | **Ações do campo reveladas no hover E no `:focus-within`, com `opacity:0` — nunca `visibility:hidden` nem `display:none` — e FORA do fluxo** (`position:absolute`) | Os dois primeiros removem da árvore de acessibilidade (SC 2.1.1). E manter as ações no fluxo reserva largura permanente para o que está invisível: medido, 88px que faziam o valor truncar sempre no painel de 460px | | **PD10** | **O corte do corpo é disclosure de verdade**: `