Divider

/*
 * Divider — element (display)
 *
 * Visual separator between content blocks. CSS-only — no JavaScript,
 * no tweak slots.
 *
 * Semantic HTML: <hr class="divider"> for horizontal,
 * <hr class="divider -vertical"> for vertical (CSS rotates the
 * native rule).
 *
 *   <hr class="divider" />
 *   <hr class="divider -vertical" />
 *   <hr class="divider -strong" />
 *   <hr class="divider -muted" />
 */

@layer malevich.components {
  .divider {
    border: 0;
    margin: 0;

    background-color: var(--color-border-default);

    block-size: var(--border-width-hairline);
    inline-size: 100%;
  }

  .divider.-vertical {
    block-size: auto;
    inline-size: var(--border-width-hairline);
    align-self: stretch;
    min-block-size: var(--size-control-m);
  }

  .divider.-strong {
    background-color: var(--color-border-strong);
  }

  .divider.-muted {
    background-color: var(--color-border-muted);
  }

  .divider.-emphasis {
    block-size: var(--border-width-emphasis);
  }

  .divider.-vertical.-emphasis {
    block-size: auto;
    inline-size: var(--border-width-emphasis);
  }
}

This component is pure CSS — no JavaScript required.

# Divider — AGENTS.md

> Auto-generated from `divider.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `divider`
- **Layer:** elements
- **Status:** stable
- **Last updated:** 2026-05-18

## Summary

Use a divider to visually separate sections of content where the

## Variants

| Variant     | Class                       | Use for                                    |
|-------------|-----------------------------|--------------------------------------------|
| Default     | `.divider`                  | Standard separation, hairline weight       |
| Strong      | `.divider.-strong`          | More prominent separation                  |
| Muted       | `.divider.-muted`           | Subtle separation                          |
| Emphasis    | `.divider.-emphasis`        | Thicker rule for stronger visual division  |
| Vertical    | `.divider.-vertical`        | Inline separator in flex/grid rows         |

Modifiers compose: `.divider.-vertical.-strong` is allowed.

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | — |
| `surface` | — |
| `effect` | — |
| `shader` | — |
| `rhythm` | — |
| `motion` | — |
| `behavior` | — |

## Anatomy

```html
<hr class="divider" />
<hr class="divider -strong" />
<hr class="divider -muted" />
<hr class="divider -emphasis" />

<div style="display:flex; align-items:center; gap:1rem;">
  <span>Left</span>
  <hr class="divider -vertical" />
  <span>Right</span>
</div>
```

## Tokens consumed

### From semantic tier
- `--color-border-default` — default background
- `--color-border-strong` — strong variant
- `--color-border-muted` — muted variant
- `--border-width-hairline` — default thickness
- `--border-width-emphasis` — emphasis variant thickness
- `--size-control-m` — minimum vertical extent

## Accessibility contract

`<hr>` has implicit `role="separator"`. For vertical dividers, browsers
treat the element as decorative if `aria-orientation` is not provided —
this is acceptable for visual-only separation. If the orientation is
semantically meaningful, the author should add `aria-orientation="vertical"`.

The default rendering does not appear in document outline (the rule is
purely visual). Screen readers may announce the separator depending on
the user's preferences.

## Guidance

### Do

- Use `<hr>` as the tag. It is semantically correct and screen reader
  friendly.
- Pair vertical dividers with a `display: flex` or `display: grid`
  parent so they get a cross-axis size.

### Don't

- Don't use a divider as decoration inside a paragraph. Use semantic
  text dividers (`—`, `·`) for inline cases.
- Don't add custom thickness via inline styles. Pick the closest
  modifier (`-emphasis`) or add a component-specific tier-3 token.