Print Desk

The Atom design system, rendered live from its own tokens and components — it cannot drift from what ships.

Docs Components

Tabsexperimental

Switch between views of the same thing — details, items, history. The vermillion underline marks where you are. Moving between different areas of the app is the sidebar's job, not tabs'.

tabsnavigationsections

States

selected — Ink text + accent underline riding the tablist rule.underline: color-accent-base
unselected — Muted text, transparent underline; hover restores ink.
disabled — 45% opacity, still visible so the workflow reads complete (the old Rules tab pattern — but pair it with a tooltip explaining why).

API

Prop	Type	Description
`items` required	`TabItem[]`	{id, label, disabled?}
`value` required	`string`	Selected tab id (controlled).
`onValueChange` required	`function`	Receives the next id.
`aria-label` required	`string`	Names the tablist for assistive tech.

Accessibility

Arrow Right / Arrow Left — Moves selection and focus through enabled tabs, wrapping.
Home / End — Jumps to the first / last enabled tab.
Tab — Leaves the tablist (roving tabindex keeps one stop).

Design specifications

list-rule color-border-rule / border-width-rule
underline color-accent-base
font type-body / weight-medium
padding space-2 space-3

Guidelines

mustEach panel carries role=tabpanel and aria-labelledby pointing at its tab.
must-notTabs switch views of one entity; navigating between entities is the sidebar's job.