Components / surfaces
Separator
Menu, Toolbar and Splitter each draw their own data-part="separator". Those are internal to a component's anatomy and stay; this is the one a page reaches for.
Summary
A line between things, and a role that says the line means something.
| APG pattern | none |
| Built on | native elements |
| Status | stable |
| Since | 0.2.0 |
<Separator />
<Separator orientation="vertical" decorative />Anatomy
An <hr data-se="separator">. The element already carries role="separator", so a consumer writing that markup gets the whole component.
_No named parts. The frame is the whole anatomy._
Properties
| Property | Values | Default | What it does |
|---|---|---|---|
orientation | horizontal · vertical | horizontal | horizontal by default, which is what role="separator" already means — only vertical writes aria-orientation. |
decorative | boolean | none | Drops the line out of the accessibility tree. Use it where the line is visual grouping only; leave it off where the line divides sections a reader navigates by. |
States
_None. Rest is the only condition it has._
Behavior
None. It is a line.
Accessibility
decorative is the decision worth making. A line dividing sections of a document is structure, and a reader moving through the page uses it. A line between two icon buttons is grouping, and announcing it interrupts for nothing — that one takes decorative and leaves the accessibility tree.
Horizontal is the role's own default, so only vertical writes aria-orientation.
The role survives the restyle. The rule zeroes the border and paints a background instead, which is exactly the kind of change that leaves an <hr> looking right and meaning nothing. A test asserts the role is still reported.
Keyboard
None of its own. It is not focusable and takes no keys.
Roles, states and properties
| Attribute | Set by |
|---|---|
role | always separator |
Focus
Never takes focus. A divider that does is a Splitter.
Screen reader
Not recorded as verified. Stage 4 of the readiness ladder — driving each component with VoiceOver and NVDA — is unstarted across the package, and no component should claim otherwise until docs/journal/ records the session that did it.
Contrast and target size
npm run check:contrast audits every color pair this component uses across all four skins, light and dark, and fails the build on a shortfall. Two waivers are on the record in docs/audit/DEFERRED.md.
It sets no target size of its own; anything interactive inside it brings its own.
Tested
test/browser/surfaces.spec.mjs
Known gaps
_No upstream requirement is recorded as not applicable._
Appearance
| Token | Used for |
|---|---|
--se-border | background |
--se-border-width | block-size, inline-size |
Motion
None.
Content
None — it has no text. If a divider needs a label, it is a heading with a rule under it, not a separator.
Usage
Not a Splitter. If the line can be dragged it is a window splitter: focusable, with its own keyboard contract.
A vertical separator stretches to the row it divides, which needs a flex or grid parent. On its own it has no height to take.
When not to use it. Between every item in a list. A list that needs a rule between every row is a list whose rows are not distinct enough on their own, and adding thirty lines is the wrong fix.
Notes
Menu, Toolbar and Splitter each draw their own data-part="separator". Those are internal to a component's anatomy and stay; this is the one a page reaches for.