# Divider

**Maturity:** experimental

Draw a thin rule that separates adjacent content — the boundary between two rows in a settings list, two labelled values, or two sections of a card.

## Import

```tsx
import { Divider } from "@liquidify/react/divider"
```

## Props

- `className`: `string | undefined`. Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.
- `orientation`: `"horizontal" | "vertical" | undefined`; default ``"horizontal"``. The rule's axis — the web analogue of SwiftUI inferring orientation from the enclosing stack (`VStack` ⇒ horizontal, `HStack` ⇒ vertical). Drives both the visual geometry and `aria-orientation` in one.
- `ref`: `Ref<HTMLDivElement> | undefined`. Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.

## SwiftUI mapping

- ``Divider()` inside `VStack` (minor-axis = horizontal)` → ``<Divider />` / `<Divider orientation="horizontal" />`` (direct): Default. SwiftUI infers this from the parent stack's axis; the web has no implicit container axis, so orientation is promoted to an explicit prop.
- ``Divider()` inside `HStack` (minor-axis = vertical)` → ``<Divider orientation="vertical" />`` (direct): Web analogue of placing the rule inside a row; the caller opts in explicitly (no auto-detection of a flex parent's axis).
- `implicit thickness (OS 1-device-pixel hairline)` → `*(no prop)*` (direct): Fixed via `--lq-space-1` (see Tokens); not exposed — no `Divider()` call in the demo sets a custom `.frame(height:/width:)`.
- `implicit colour (`separator` role)` → `*(no prop)*` (direct): Fixed via the scheme-aware `light-dark()` over `system-gray-3` (light `#C7C7CC` / dark `#48484A`); no `tint`/`.foregroundColor`/`.overlay` anywhere in the demo or this component.
- `container length / default margin` → `*(no prop)*` (direct): Full inline-/block-size to the parent, plus a default `--lq-space-8` margin on the rule's minor axis so adjacent content never abuts the hairline. A caller-tunable `inset`/`margin` prop is deferred (see Out of scope).
- ``.glassEffect(...)` on the *container*` → `*(no prop — not part of `Divider`)*` (direct): Glass belongs to whatever wraps the Divider; the Divider itself never carries `material`/`perf`.