Time control

Time control

TimeControlHandler · #time-control · handlers/time/time-control.css

Lab DS standard. Cream pill (530 × 56, 2 px ink border, 6 px corner, 4 px hard shadow — uses the --widget-bar-* token family so the bar belongs to the widget-bar stack at bottom-centre alongside Scale, Thermometer, Stopwatch). Layout left → right: back · pause · scrubber · readout · speed dial. Back pairs with Pause/Play (media-player convention) and carries a context-sensitive label that reads Previous (default — dispatches step-previous; wrapper routes to the previous investigation step) or Rewind (once a simulate-response has fired in the current step — dispatches the same step-previous event; wrapper routes to the current-step start). Width is locked at 88 px (just larger than the longer Previous label) so the swap never shifts surrounding layout; contents centred. Speed dial demotes to the right edge as a set-and-forget control; the speed popover anchors above its right edge. Button labels (back, dial, popover cells) all use IBM Plex Sans Regular 11.5 px — same body-sans button-label spec as the microscope widget's .mp-toggle. Speed labels use the lowercase letter x (1x, 2x, 3x), not the multiplication sign. Tapping any popover button assigns the speed and dismisses the popover; tapping outside the popover also dismisses. Mounts whenever the active step has a duration: and auto-hides when the step ends.

Controls

States