Output
Panel
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
Kit part · Cards & panels
Tray
A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
- Element
- <div>
- Needs
- kit.css
- Rules
- panel.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Nothing here yet
Monitor
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Empty | Holding keys | One latched |
|---|---|---|---|
| Tray |
Graphite
| Part | Empty | Holding keys | One latched |
|---|---|---|---|
| Tray |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-tray | class | on <div> | A recess: the well fill, the inset light, 4px padding, 7px radius. |
| padding | CSS property | 4px | Parts sit 3–4px from the walls. Raise it for an empty state. |
| display | CSS property | block | Lay the parts out with flex or grid, 3px apart. |
Markup
<div class="tui-tray">
<button class="tui-key">Mute</button>
<button class="tui-key" aria-pressed="true">Solo</button>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- A tray is presentation. When its keys are one control (only one can be down), use a selector: it is a real radio group.
- An empty state says what goes here in words; the unlit lamp is a second signal.
How it’s built
The recess every well in the kit uses: a floor that darkens toward its upper wall (--tui-well-fill), an inset shadow under that wall, a lit lower lip, and a highlight on the plate just below the cut (--tui-inset). No images, no script.
Rules
panel.rules.mdIn the brain
Trays hold parts. A panel may hold trays; it never holds another panel.
4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.