---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 27
titulo: "Divider — `estável` (v0.26) · DV1–DV3 · validação executada + visual aprovada em 2026-08-05"
sequencia: 29 de 98
bytes_do_corpo: 4403
md5_do_corpo: 7cf79d063e61d741a5e5f35bb03bc4e1
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
---
## 27. Divider — `estável` (v0.26) · DV1–DV3 · validação executada + visual aprovada em 2026-08-05

> **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

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| DV1 | **Decorativo por default** (div `aria-hidden` ou border no vizinho); a variante **semântica** (`<hr>`, separator implícito) só quando marca quebra temática REAL. **Supersede: o uso livre de `<hr>` do `seed-design-system.html` v1.0 fica obsoleto** — todo `<hr>` novo declara intenção semântica | MDN/ARIA 1.2 (primária, verificada — decisão vira supersede); Material Web adota o mesmo default | `<hr>` sempre (polui a árvore de AT nas listas densas do ERP) |
| DV2 | Régua de separação em 3 degraus: **espaço em branco → inset → full-width**; inset separa itens relacionados (com âncora); full-width separa seções distintas, com parcimônia; quando convivem, a diferença reforça hierarquia; **recuo do inset consistente na tela inteira**, mesmo sem âncora em todos os itens | M3 + M1 (explícitos); Linzi Berry (Lyft) | Divider default entre todos os itens (LS4) |
| DV3 | Vertical: elemento com `role="separator"` + `aria-orientation="vertical"` quando semântico; decorativo dispensa ambos. 1px de espessura | ARIA 1.2 (orientation default é horizontal); MUI/React Aria | hr rotacionado |

### 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 ✓.)*

---