27. Divider

Base: R1 — M3 divider (full-width × inset; "use sparingly"; itens repetitivos dispensam divider — margem basta), M1 dividers (overuse = ruído; whitespace/subheader como alternativas), Linzi Berry (inset consistente na tela inteira). R2 — MUI (vertical = div com ARIA), Material Web ("decorative by default and not announced"), React Aria useSeparator. R3 — MDN/WAI-ARIA 1.2 separator (fonte primária): <hr> tem role implícito separator e É anunciado por leitores de tela — linha sob cada item vira ruído puro para AT.

27.1 Decisões DV1–DV3#

27.2 Tokens#

--seed-divider-color = border-subtle (1,21 sobre surface-page clara / 1,75 sobre surface-subtle escura — decorativo declarado) · --seed-divider-strong = border-default nos dois temas (1,49 sobre surface-page clara / 2,84 sobre surface-page escura — decorativo declarado) para full-width enfático · margens 12px vertical · inset alinha ao início do texto após a âncora.

⚠⚠ CORRIGIDO EM 2026-08-26, e o defeito é de uma classe que nenhuma guarda pegava: a spec afirmava um contraste que não existe. A redação anterior dava 1,91 ao divider-strong no claro. Medidas as cinco superfícies do tema contra o border-default, nenhuma produz 1,91 — page/raised/overlay dão 1,49, subtle 1,37, sunken 1,23. O número foi transplantado: 1,91 é o que o border-subtle escuro dá sobre a página escura, e também o que o cinza-300 dá sobre branco. ⭐ O número estava certo em algum lugar do arquivo; só estava grudado no token errado. ⭐ E o irmão só batia porque foi medido contra outro fundo. O "1,75 dark" do divider-color não sai da surface-page (que dá 1,91) — sai da surface-subtle. Os dois temas foram medidos contra fundos diferentes, sem que a linha dissesse. ⭐⭐ Régua: contraste sem fundo declarado não é um número, é uma família de números — e foi variando o fundo, uma condição por vez (§14.5), que os três valores se explicaram. Daqui em diante esta linha declara o fundo de cada medida. ⚠ O par dark ficou decidido pelo que sobrou. A v1.22 recusou emitir este token justamente porque o consumidor vivo (banco-superficies.html) usa cinza-600 no escuro, que não é o border-default dark — e emitir qualquer lado criaria contradição. Com o 1,91 desmentido, o cinza-600 se revela dialeto local, não valor derivado de spec, e vale a regra simétrica que o irmão já escreve: divider-color = border-subtle nos dois temas, logo divider-strong = border-default nos dois. O consumidor foi repontado para o token.

27.3 Os 7 testes#

1. Pares decorativos declarados com justificativa (a informação de agrupamento mora no espaço+conteúdo). 2. Separação nunca depende só da linha (spacing coexiste). 3. Grayscale: já nasce acromático. 4. Inset × full a 1s (recuo). 5. Regra do um: um regime de divider por lista. 6. n/a (estático). 7. 360px: full-width não estoura o container; inset preserva o alinhamento. (Suite F ✓.)

---