Separator

A horizontal or vertical divider, semantic or decorative.

Import
import { SeparatorRoot } from '@texuli/primitives/separator';
Pattern
separator role
Size budget
4.0 KiB gzip for @texuli/primitives/separator
Reference
packages/primitives/docs/prim-separator.md

Live demo

Loading the Separator demo…

Anatomy

Separator anatomy: each box holds the parts inside it.
  • SeparatorRoot

Behavior checks

tests/behavior/scenarios/separator.spec.ts runs 4 rows against the Separator scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 4 rows
  1. a decorative separator is not announced
  2. a semantic separator is horizontal by default
  3. a vertical separator says so
  4. a static separator never takes focus

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/separator (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).