venact · platform segmented toggle

A joined choice control in the studio button look (mono, 0.62rem, uppercase). 2–5 options, all visible; every segment is the same width = widest content + padding, centred, no dividers. Each toggle carries a colour (amber / violet / plum / blue / gray) exactly like the CREATE / OPEN / CLONE AS buttons — the button's light fill, border and text colour are kept as the base. The selected segment is a deeper fill of the same hue with its text in the light base colour, and the selection slides when it moves. A 4px light strip stays at each end so it's unambiguous which side is selected (even with just 2 options). seg pad-x is a per-toggle prop — set it to fit the available space. The option's full descriptive value shows to the right (optional per placement).

Live — dial it in
live
Stored
Reflected
Both
The five colours

Same control, five palettes — highlight matches each toggle's colour. Click a segment to watch it slide (all follow the fill / anim you dial above).

amber
Stored
Reflected
Both
violet
Stored
Reflected
Both
plum
Stored
Reflected
Both
blue
Stored
Reflected
Both
gray
Stored
Reflected
Both
2 → 5 options — length grows by whole segments

Width = (widest segment + padding) × count.

2
On
Off
3
Stored
Reflected
Both
4
Raw
Typed
Reflected
Both
5
XS
S
M
L
XL
Inactive options

A disabled option stays visible and holds its slot, but is dimmed to 0.4 and can't be selected or take the fill. Cursor is the plain arrow (venact has no not-allowed — cursors.md). Hover it for the reason; try clicking it — nothing happens.

blue
Stored
Reflected
Both
plum
XS
S
M
L
XL
Icon segments

Short value can be an icon; the descriptive value on the right names the current choice.

icon
icon+text
Rows
Cols
In context

With the descriptive readout (roomy) and without it (dense toolbar). Different colours can share a bar.

VIEW
Stored
Reflected
Both
SORT
Name
Date
Size
Asc
Desc

Open for the plan: (1) the fill strength that reads best across all five colours (dial + copy the line); (2) whether the descriptive readout is a fixed right-slot or floats only when there's room; (3) this is an extension of the existing SegmentedToggle primitive (add colour, equal-width, sliding fill, adjacent readout), not a new component.