Separator

import { Separator } from "@arcadia/ui";

<Separator />

A 1px --stroke-3 rule. inset pulls it in along its length by --separator-inset: 11px (--hairline-inset) when horizontal, so a hairline list's rules start where its text does, and 4px when vertical.

rootStyle takes where the rule sits and these knobs: its colour as a palette token, its inset as a spacing token.

A role="separator" with aria-orientation, so assistive tech can announce the break between groups. It is never focusable and has no keys.

Use it where the groups are real, such as sections of a menu or a toolbar. Where the rule is only decoration between items that already have their own structure, like list items or a card's sections, hide it with aria-hidden so it isn't read as a stray separator.