# Divisor e espaçador (`divisor`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Linha de separação (inteira ou curta de destaque) e espaço vazio em três tamanhos do DS.

- **Categoria:** Básicos
- **Equivalente no Elementor:** Divisor (Divider) e Espaçador (Spacer)
- **Arquivos:** `divisor.html`, `divisor.css`
- **Precisa de JavaScript:** não

## Quando usar
- Separar blocos de texto dentro de uma seção
- Marcar o fim de um título com um traço curto da marca
- Ajuste fino de respiro (espaçador)

## Quando não usar
- Separar seções inteiras (o respiro da seção já faz isso)
- Espaçador para corrigir margem de componente: ajuste o componente

## Variações
- **Linha inteira:** <hr class="ds-divisor">
- **Traço curto de destaque:** classe ds-divisor--curto (centralizar com ds-divisor--centro)
- **Espaçador pequeno, médio, grande:** <div class="ds-espacador ds-espacador--p|g" aria-hidden="true">

## Conteúdo esperado
- Nenhum

## Acessibilidade
- <hr> marca mudança de assunto para leitor de tela
- Espaçador tem aria-hidden="true"

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/divisor/divisor.css">
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cor-acento`, `--ds-cor-borda`, `--ds-espaco-16`, `--ds-espaco-4`, `--ds-espaco-8`, `--ds-raio-pilula`.