Separator

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Separator

pnpm exec tessera add Separator

yarn tessera add Separator

bunx @pixelscriptio/tessera add Separator

Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components.

system/components/Separator.tess

<contract>
{
  "name": "Separator",
  "role": "separator",
  "description": "A thin line that divides content, horizontally or vertically.",
  "since": "0.8.0",
  "parts": ["root"],
  "variants": {
    "orientation": ["horizontal", "vertical"] // first value is the default
  }
}
</contract>

<script>
const { orientation } = props({})
</script>

<template>
  <div class="root" role="separator" :aria-orientation="orientation"></div>
</template>

<style>
.root {
  flex: none;
  align-self: stretch;
  background: $color.border.default;

  &[data-orientation='horizontal'] {
    height: 1px;
    width: 100%;
  }

  &[data-orientation='vertical'] {
    width: 1px;
    min-height: $space.4;
  }
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.border.default space.4

Usage

Using Separator

A thin line between groups of content.

Horizontal by default; set orientation="vertical" between items in a row. The vertical one stretches to the height of the row it is in.
It is announced as a separator with its orientation. For a gap that has no meaning, use spacing instead.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Separator-0.tess

<template>
  <div>
    <p>Profile</p>
    <Separator />
    <p>Billing</p>
  </div>
</template>

API reference

Variants

Anatomy

Design tokens it uses

Variant	Values
`orientation`	`horizontal` default `vertical`


Role	`separator`
Parts	`root`
Since	0.8.0

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

Installation