Segmented toggle

#Usage

Use a segmented toggle (.seg) for a setting with two to four peers. Every one in the app sits in the Create game and Play solo sheets or the lobby:

Don't use the tile's lit look for the chosen segment. The pressed-tile treatment (--select) means "in the trace"; on a control it would make a setting look like a move.

Don't use it as tabs that hide content. The help sheet had a .seg tab row until 3.9.0; the tabs hid the Competing cards behind a control nobody had a reason to press.

Don't build a switch. There's no sliding on/off switch in the system. Private and Public used one until 3.19.7.

#Anatomy

Segments are real <button>s with appearance: none, margin: 0 and line-height: 1, so their labels sit dead centre in iOS Safari.

#States

There's no empty state and no disabled state. One option is always on. An option that doesn't apply is removed, not greyed: Team appears only when team mode is switched on, Kids mode is hidden in Trivia, and Play solo has no Room row because nobody else can join.

#Behaviour

• A tap chooses. The setting changes at once; there's nothing to confirm.
• One always on. Opening Play solo resets a leftover Team mode, so the Mode toggle never shows with nothing lit.
• Mode changes what's under it. Classic shows Board, Round and Min letters; Trivia shows Round, Difficulty and a three-line rules card. The visible panel sets the height and the hidden one is lifted out of flow.
• Private and Public in the lobby are live for the host. A guest sees a read-only line instead ("Private room" or "Public room").
• The Teams toggle (Random, Pick) changes how the host sorts players; Pick lets them tap anyone to send them to the other side. Team mode ships switched off (3.11.1), so nobody sees this toggle today.

#Accessibility

• Target size: every segment is 44px tall.
• State is exposed in three different ways. The lobby's Private and Public are a radiogroup with aria-checked; Mode and Teams use aria-pressed; Board, Round, Min letters, Difficulty, Kids mode and the sheet's Room expose nothing, so a screen reader can't tell which is on. See Known issues.
• Reduced motion: no dip on press, only a dim.

#Content

• Short labels that fit one line: "Classic", "2 min", "4×4", "30s". The row's name says what the setting is; the segments say only the options.
• Units follow the mode. Classic rounds are in seconds ("60s"), trivia rounds in minutes ("2 min").
• The same words everywhere. Trivia's levels read Easy, Intermediate and Difficult in the toggle, the question card and the lobby.
• Sentence case.

#Why it's built this way

#Known issues and gaps

• Most toggles don't say which option is on. Only the lobby's Private and Public (aria-checked) and Mode and Teams (aria-pressed) expose their state. One pattern applied to every toggle would close the gap.
• Kids mode is Off and On, the one place the toggle stands in for a switch.
• Switching Mode resizes the sheet. Since 3.23 the hidden panel is lifted out of flow, so the rows below Mode move when it changes. A comment in the JSX still says both panels share one cell so nothing below can move.
• The toggle's CSS reads legacy names (--tray-line, --paper-dim, --gold, --gold-ink); they resolve to --rule, --fg-soft, --fg and --ground.

#Related

• Tile: the lit look the toggle never uses
• Button: the shared press state
• Sheet: where the toggles live

#Changelog