Components
Arrival row
One predicted arrival in a stop sheet: route icon, destination, the time as a word or minutes with the clock time under it, and a chevron that expands the upcoming-stops timeline.
Contract: components/arrival-row.yaml. States are drawn live by transit.js.
Loading the contract…
iOS app specification
The app's rendering of this component, from the v3 spec.
Arrival card
One train or bus. Tap to expand into the vehicle number and upcoming stops.
| Layout | 40 icon column · destination · right-aligned time · chevron |
|---|---|
| Semantics | Button with expanded state; label reads route, destination and time |
| Time | Body; Due 700 Good; Delayed 700 Warn; clock in Caption below |
| Live source | Live schedule provenance is announced to VoiceOver only; arrival cards show no green “Connected” or live-status glyph. |
| Timeline | Rows 44. A 16pt slot in the route colour (the line colour for trains, Brand for buses), drawn above the row dividers, with a flat top that runs off the top of the list to show the trip continues from earlier stops, and a rounded cap around the last stop. Only when the first stop is the start of the route does the top get a rounded cap around it (.origin). Stops are 8pt Surface circles inside the slot, with no border (white in light mode, near-black in dark). The current stop is a 22pt white circle with a 2pt Ink border (black in light mode, blending into the circle in dark), overhanging the slot by 3pt on each side. It contains no arrow; directional arrows are reserved for other navigation uses. White and black stay the same in both themes |