Fluxo conectado de caixas

Três a cinco caixas numa fileira, cada uma ligada à seguinte por um traço de 1px que termina em ponta. Cada caixa é um contorno — não um cartão — com o mesmo peso e a mesma cor do traço que a liga: caixas e linhas leem como um só desenho, e não como cards com tracinhos entre eles. Dentro de cada uma, um número ordinal, o nome de quem tem ou faz a coisa e uma linha dizendo o que acontece ali. No celular a fileira vira coluna e o traço gira com ela, do pé de uma caixa ao topo da seguinte.

Resolve o diagrama mais pedido e menos catalogado de todos: de onde vem, por onde passa, onde chega. A categoria dados tinha duas peças de diagrama e nenhuma cadeia — o dados/diagrama-hub desenha convergência (duas frentes para um centro) e o dados/globo-canvas é uma esfera de pontos. O caminho do dinheiro numa assessoria, a estrutura de uma holding e o fluxo de sucessão são todos a mesma forma, e sem ela cada site improvisava a cadeia como uma grade de quatro cards — que perde exatamente a informação que importa, porque numa grade a caixa 1 e a caixa 4 são vizinhas de tabela.

Não é uma linha do tempo deitada, e a distinção decide se a peça deve existir. O listas/linha-do-tempo-etapas conta um processo no tempo: cada etapa reserva um lugar fixo para o prazo, e a ordem é cronologia. Aqui não há prazo em lugar nenhum, e as caixas coexistem — a custódia continua guardando enquanto o relatório é emitido. O que se desenha é uma estrutura no espaço: quem tem o quê, em que ponto. Por isso o editorial.forma desta peça é só diagrama, e não sequencia-ordenada (ver a nota do bloco no componente.json): copy de "como funciona" com prazo por etapa pertence à linha do tempo, e devolver esta peça para essa busca reabriria a confusão.

Qual irmão ela substitui, e em que caso

• dados/diagrama-hub — mesmo território, topologia oposta. Ele é a peça certa quando há convergência ou ramificação: duas frentes que apontam para um núcleo, um traço na diagonal, uma terceira ramificação pendurada embaixo. Para isso ele precisa medir o DOM e escrever o d de cada path SVG, e é dele que vem o método técnico da casa para desenhar linha entre nós que se movem com o layout. Uma cadeia não pede nada disso — ver "Por que não tem JavaScript". Use o hub quando o desenho tem mais de um caminho; use esta quando o caminho é um só e vai numa direção.
• listas/linha-do-tempo-etapas — é a que mais se confunde. Ele ganha sempre que a duração é parte da resposta ("de 2 a 3 semanas"), quando as etapas são fases de um método que se sucedem, ou quando cada etapa precisa de 200 a 340 caracteres de texto. Esta ganha quando as caixas são partes de uma estrutura, o texto de cada uma cabe em uma frase e o que se quer provar é onde a coisa está, não quando.
• midia/faixa-horizontal-pinada — também é sequência horizontal, mas é uma parada de três ou quatro telas de rolagem, com foto por etapa e a fila atravessando o palco. Use aquela quando a sequência é o espetáculo da página e existe imagem para cada passo; use esta quando a cadeia é informação de serviço e tem de caber em uma dobra, sem asset nenhum.
• conteudo/imagem-lista-numerada — lista numerada de diferenciais ao lado de uma foto. Ali a ordem não é obrigatória. Se a sua caixa 3 pode virar caixa 1 sem prejuízo, o componente é aquele: a seta aqui afirma direção, e sem direção ela mente.

Quando usar

• Cadeia de 3 a 5 elos em que a ordem é estrutural e a direção é a informação: o caminho do recurso, a estrutura societária de uma holding, o fluxo de uma sucessão, o percurso de um documento.
• Quando a página precisa provar uma afirmação estrutural — quem custodia, em nome de quem, quem executa — e a prova é o desenho. É o uso canônico, e é por isso que o papel declarado inclui objecao.
• Quando o texto de cada elo cabe em uma frase. Acima disso a caixa cresce e a fileira perde a leitura horizontal.
• Quando a dobra tem de ser leve: sem foto, sem ícone, sem script, e 845px de altura a 1440 com quatro caixas.
• Quando o cliente não tem asset nenhum. A peça não pede imagem.

Quando não usar

• Quando há ramificação ou convergência. Duas origens que desembocam num ponto, ou um ponto que se abre em três, precisam de traço em diagonal e de cotovelo — e aí a resposta certa é o SVG calculado do dados/diagrama-hub. Esta peça só sabe desenhar no vão entre dois vizinhos de grade.
• Quando cada elo tem prazo, ou é uma fase de um método. listas/linha-do-tempo-etapas reserva um lugar fixo para a duração e é o único componente da casa que faz isso; listas/baralho-sticky força a leitura em ordem quando o método é o argumento de venda da página.
• Com mais de 5 caixas. Seis elos a 1440 dão caixas de 150px, e uma caixa mais estreita que o próprio rótulo deixa de ser uma caixa. Sequência longa é midia/faixa-horizontal-pinada (5 a 7, com foto) ou listas/linha-do-tempo-etapas (4 a 6, empilhada).
• Com menos de 3. Duas caixas e uma seta são uma frase com enfeite; escreva a frase.
• Quando os elos não têm ordem — serviços, pilares, diferenciais. A seta promete direção. Use conteudo/pilares-texto-na-foto ou conteudo/grid-entidades.
• Quando o conteúdo é comparação de critérios entre abordagens: listas/tabela-comparativa.

Padrão editorial

Comprimento parecido entre os apoios é estrutural, não estético. A grade estica todas as caixas até a altura da mais alta: um apoio com o dobro do tamanho do vizinho deixa três caixas com um terço de vazio embaixo, e o traço — que corre no meio da altura — passa a cruzar espaço em branco. Fique numa faixa de mais ou menos 20% entre o menor e o maior apoio. Medido a 1440: os quatro apoios do markup têm 74 a 81 caracteres e as quatro caixas fecham em 201,58px, iguais ao centésimo.

A relação tem de estar no texto. É a regra editorial que sustenta a acessibilidade da peça, e ela não é opcional: a seta é aria-hidden por construção (é pseudo-elemento, não existe nó), então se o .flx-rel não nomear a caixa seguinte, a direção deixa de existir para quem não vê o desenho. Quem monta a página escreve os três .flx-rel junto com os quatro rótulos, não depois.

Nenhuma caixa fala de retorno. "Carteira" é onde a alocação é executada, não onde o dinheiro "começa a render" — ver Compliance.

Especificação dos assets

Nenhum. A peça não tem imagem, ícone, vídeo ou fonte própria, e isso é parte do que ela é: um diagrama desenhado com borda e pseudo-elemento. Não há arquivo para pedir ao cliente, não há peso para orçar e não há direito de imagem para conferir.

Como usar

<link rel="stylesheet" href="componentes/dados/fluxo-conectado/estilo.css">

Não há script.js. O core/motion.js continua sendo necessário — é ele que dá o .in aos [data-rv] —, mas a peça não acrescenta nenhum script.

Acrescentar ou tirar uma caixa é acrescentar ou tirar um <li class="flx-passo">: a quantidade não está declarada em lugar nenhum, porque grid-auto-flow:column cria uma coluna por item. Ao tirar, apague o <li> — não use [hidden] (ver Gotchas). Ao acrescentar, continue a numeração do .flx-num, escalone o data-d até 3 e escreva o .flx-rel da caixa que passou a ter vizinha.

Ganchos

Parafusos

Variações

• Três caixas — apague um <li>; a grade fecha a coluna sozinha. Medido a 1440 (caixa de 340×180) e a 901 (250×156). estável
• Cinco caixas, só rótulo — cinco <li> e o .flx-apoio apagado de todos. É a saída editorial para o teto de largura: com cinco caixas e apoio, a caixa cai para 189px a 1440 e 140px a 901, e a frase quebra em cinco linhas de doze caracteres (medido: 189×246 e 140×253). Sem o apoio, a mesma cadeia dá 189×128 e 140×108. Nenhuma media query sabe quantos <li> existem — a decisão é de quem escreve o texto. estável
• Diagrama monocromático — --flx-arrow-color:var(--rule-2). estável
• Sobre seção clara — troque .sec-deep por .sec-paper no <section>. O componente não lê cor própria em lugar nenhum: medido no tema liberta-wealth, traço e contorno passam a rgba(28,24,17,.28), o rótulo a rgb(28,24,17) e a ponta da seta ao --accent-ink do escopo claro — color(srgb .4098 .4153 .3367), 4,59:1 sobre o creme, contra 1,36:1 do accent puro. Nada a tocar no CSS. Medido, não rodado em produção. estável

Gotchas

• Por que não tem JavaScript, e por que o irmão tem. O dados/diagrama-hub mede o DOM e escreve o d de cada path porque a topologia dele é um hub: o traço sai da borda de um ícone e chega na borda de um núcleo em órbita, na diagonal, e nenhuma dessas duas posições é conhecida pelo CSS. Numa cadeia, as duas pontas de cada traço são a borda direita de um item de grade e a borda esquerda do vizinho — e o que há entre elas é o gap, que é uma variável escrita por mim. left:100%; width:var(--flx-gap) já é a resposta exata, em qualquer largura. Consequência prática: não há resize para escutar, não há quadro para agendar e, sobretudo, não há o gotcha da fonte — o diagrama-hub precisa remedir no load porque a fonte chega depois do primeiro layout, muda a altura das listas e move os nós. Aqui a fonte pode mudar a altura da caixa à vontade: o traço está em 50% dela.
• O traço fica centrado no eixo por meio pixel de desconto. top:calc(50% - .5px) num elemento de altura zero com border-top:1px: sem o desconto, a borda ocuparia de 50% a 50%+1px e o traço passaria meio pixel abaixo do centro das caixas. Medido nas três ligações, em 1920, 1440, 1240, 1024 e 901: desvio de 0,01px contra o centro real das caixas.
• A meia-altura da ponta é um inteiro, e derivá-la do comprimento dava errado. A ponta é o triângulo de bordas (width:0;height:0, bordas transversais transparentes). O navegador arredonda border-width a pixel inteiro: com a meia-altura escrita como calc(var(--flx-arrow) * .6) = 4,2px, o layout usava 4px e o vértice ficava 0,2px acima do eixo do traço — medido. Por isso são dois parafusos inteiros, --flx-arrow e --flx-arrow-half, e não uma proporção. O mesmo motivo descarta o rotate(45deg) num quadrado de duas bordas, que é a outra receita comum de seta: girando, o vértice fica a meia diagonal do centro e o alinhamento passa a depender de um √2 escrito à mão.
• role="list" num <ol> é redundante no papel e necessário na prática. O reset do core zera list-style, e Safari com VoiceOver larga a semântica de lista quando o marcador é removido. Nesta peça a semântica de lista é metade de como a ordem chega a quem não vê o desenho (a outra metade é o .flx-rel), então ela não pode depender de heurística de navegador. Medido: list-style-type computa none, <ol role="list"> com 4 itens. Quem viu o problema primeiro foi o conteudo/rolagem-sincronizada, e ele o resolveu pela outra saída: deixou o número visível audível, em vez de aria-hidden, para que o "01" fosse a pista de ordem. As duas saídas valem, e a escolha aqui foi role="list" porque o .flx-num lido em voz alta vira "zero um" antes de cada rótulo — ruído numa cadeia de quatro elos em que a relação já é dita por extenso. O que não vale é nenhuma das duas: <ol> com número aria-hidden e sem role não entrega a ordem a ninguém no Safari.
• Cortar a cadeia é apagar o <li>, não esconder. .flx-passo recebe display:grid, e qualquer regra de autor com display vence o [hidden] do navegador (§6.5 do contrato, e a décima sexta vez que a biblioteca esbarra nisso) — por isso existe .flx-passo[hidden]{display:none}. Mas há um segundo problema que a linha não resolve: :last-child é DOM, não pintura, então esconder a última caixa deixaria a ponta da penúltima apontando para o vazio. Daí a regra com :has(+ .flx-passo[hidden]), que apaga traço e ponta de quem virou o último visível. Medido: pondo hidden na quarta caixa, ela computa display:none e a terceira computa content:none nos dois pseudo-elementos. Onde :has() não existir, o pior caso é a seta órfã — nunca um layout quebrado.
• Um breakpoint só, e nenhum estado de duas colunas. Cadeia que quebra em duas fileiras precisa de traço em cotovelo, ligando o fim de uma fileira ao começo da seguinte, e é exatamente aí que CSS puro morre. Empilhar em 900px é melhor do que desenhar um cotovelo errado. O pior caso da fileira foi medido a 901px: quatro caixas de 181×194, sem estouro.
• No empilhado o traço vai ao centro, não à esquerda. À esquerda, com o número em cima dele, a peça vira o filete do listas/linha-do-tempo-etapas — que é outro componente, para outro conteúdo. Medido a 900, 768, 390 e 360: eixo do traço e da ponta a 0,00px do centro horizontal das caixas.
• O vão vertical e o comprimento do traço vertical são a mesma variável. gap:var(--flx-stack-gap) na grade e height:var(--flx-stack-gap) no traço. Separá-los é o jeito de o traço deixar de encostar nas caixas no dia em que alguém mexer no respiro — e um traço que para 6px antes da caixa é o tipo de defeito que ninguém vê no inspetor e todo mundo vê na tela.
• Medir a peça no meio da entrada dá 22px de erro, e não é bug. Medida a 390px sem rolar, a ligação entre a segunda e a terceira caixa aparecia 22px curta. É o translateY(22px) do repouso do [data-rv]: as caixas entram escalonadas, e enquanto uma já chegou e a seguinte não, o traço da primeira aponta para onde a segunda vai estar. Meça com --reduce (que é o repouso verdadeiro) ou depois de a entrada fechar — com --reduce o desvio é 0,00px em todas as larguras.
• A ponta lê --accent-ink, e não --accent, mesmo sendo uma forma e não texto. O §3 do contrato manda o realce ler --accent-ink porque a cor de marca não é cor de texto: sobre o creme do .sec-paper, o sage da Liberta dá 1,36:1. A regra foi escrita pensando no <em> do título, e vale igual aqui — uma seta de 8×6px que ninguém vê apaga a direção, que é a informação da peça, e o prejuízo é maior que numa palavra em itálico. Em escopo escuro os dois tokens são o mesmo valor, então o padrão não muda nada; em .sec-paper a ponta passa a 4,59:1. O var(--accent) de fallback existe para quem colar o bloco fora de um escopo de tom.
• A caixa não é .glass, e a recusa é a decisão de forma da peça. A primitiva de vidro do core resolveria a aparência e destruiria a leitura: um card de vidro com um tracinho ao lado é uma grade com enfeite, não um diagrama. O contorno tem a mesma espessura e a mesma cor do traço — --flx-line serve os dois — e é isso que faz o conjunto ler como um desenho só.
• Não há hover, e não há nada focável. A peça tem zero paradas de Tab (medido), e é decisão: nada aqui é clicável, e realce ao passar o mouse numa caixa inerte é promessa falsa. Se um elo precisar de link, ele entra dentro do .flx-apoio como link de prosa, com destino de verdade.
• Não existe @media(prefers-reduced-motion) no estilo.css. A ausência é deliberada: não há transição, animação ou keyframe no arquivo. A única entrada é o [data-rv] do core, que o core já desliga — e o traço, sendo pseudo-elemento do nó revelado, entra com ele, porque opacidade e filtro valem para o elemento e todo o conteúdo gerado dentro dele. Mesmo caso do prova/stats-contador-regua.

Compliance

A peça não devolve número nenhum, e é por isso que esta seção é curta e específica: o que ela afirma é estrutura, e estrutura é verificável. Antes de publicar, o consumidor tem de fazer três coisas.

1. Conferir que a cadeia descreve a estrutura real do cliente. Quem custodia, em nome de quem, quem executa e de onde sai o relatório. O markup traz o arranjo padrão de uma assessoria de investimentos independente — conta do cliente, custódia em instituição autorizada, execução pelo assessor, relatório consolidado. Se o arranjo do cliente for outro, o desenho passa a afirmar algo falso, e um diagrama afirma com mais força que um parágrafo.
2. Manter a fronteira estrutura × resultado. Nenhuma caixa pode falar de rentabilidade, retorno, ganho ou desempenho. A armadilha é sempre na caixa da carteira: "onde seu dinheiro começa a render" é a frase que não pode existir. Aqui a caixa 03 diz o que acontece (a alocação é executada dentro das faixas que a política aprovou) e para por aí.
3. Passar a ressalva pelo compliance do cliente. O .flx-nota afirma que a assessoria não custodia recurso nem movimenta conta, e que a remuneração é a taxa previamente acordada. É a frase mais forte da dobra e a que mais depende do arranjo contratual real. Ela fica no fim da lista, onde a pessoa acabou de ler o desenho — não no rodapé da página.

Já resolvido no componente e que não deve regredir: nenhum nome de instituição real, nenhum nome de cliente, nenhum superlativo de mercado, nenhum número, nenhum dado pessoal coletado e nada gravado — a peça não tem campo, não tem clique, não tem script e não usa localStorage, cookie nem envio.

Histórico

Origem. Componente autoral (§11 do contrato). Não há referência única: a cadeia de caixas com seta é o diagrama mais comum de página institucional, e aparece igual em fluxograma de processo, em diagrama de arquitetura de software e em material de compliance de instituição financeira. As três famílias de exemplo que decidiram a forma foram o caminho do dinheiro numa assessoria, a estrutura de uma holding e o fluxo de uma sucessão — as três são a mesma cadeia, com rótulos diferentes.

Decisões da tradução para o contrato:

1. Zero JavaScript, decidido pela topologia e não pela elegância. As três receitas possíveis eram SVG com coordenadas calculadas em JS (como o diagrama-hub), pseudo-elemento no vão e linhas desenhadas por background na grade. A cadeia tem topologia regular e as duas pontas de cada traço são bordas de itens vizinhos de grade, com um gap conhecido entre elas: o pseudo-elemento resolve exato, e resolve em qualquer largura. A terceira receita (background na grade) perderia a ponta da seta, que é a informação. A primeira só seria necessária se houvesse ramificação — e aí a peça certa é outra.
2. A caixa é um contorno de mesmo peso que o traço. É o que separa um diagrama de uma grade de cards. O --flx-line serve o contorno e o traço para que não seja possível divergirem por descuido.
3. A ponta é o único lugar com cor de marca. A direção é a informação da peça; o resto do desenho é estrutura. Quatro números em --accent teriam posto a cor onde ela apenas conta.
4. A relação vive em texto. Um diagrama é uma imagem para quem enxerga e nada para quem não. O .flx-rel é o gêmeo textual da seta — não uma legenda redundante: quem vê recebe a direção pelo desenho, quem ouve recebe pelo texto, e nenhum dos dois ouve a informação duas vezes.
5. A quantidade de caixas não é declarada. grid-auto-flow:column conta os <li>. Um repeat(4,1fr) obrigaria a manter a contagem em sincronia com o markup, e a quinta caixa sairia por baixo sem nada acusar.

Normalizações aplicadas: prefixo flx- em toda classe; zero cor crua (só token, e transparent nas bordas transversais da seta, que é palavra-chave e não cor); .wrap, .sec-pad, .sec-head, .eyebrow, h2.sec-title, .sec-lead, .visually-hidden e .nota (a ressalva) vêm do core e não foram recopiadas; nenhum !important; a ponta lê --accent-ink e não --accent, como manda o §3 do contrato; media query de largura no fim do arquivo; entrada exclusivamente pelos ganchos [data-rv]/data-d/.ttl do core.

Divergências conhecidas vs. produção: nenhuma — não rodou em produção ainda.

O que foi medido (bin/medir.js, Chrome headless, tema liberta-wealth; geometria conferida com --reduce, que é o repouso verdadeiro):