Time
A time of day: when a meeting starts, a shift ends, a report runs. A native <input type="time"> in a .canon-time box; canon.js draws a cell for each part, typed into, stepped with the arrow keys, or nudged with the arrows the focused cell shows. Without JavaScript it is the browser's time field. Specification: docs/components/time.md
Basics
Click a cell, then type (two digits move on), press Up and Down, or use the arrows the cell shows when it grows. Hold an arrow to keep stepping. The value the form submits is always 24-hour (08:00).
Step
step, in seconds, sets how far the arrows and keys go: 900 moves minutes by 15. Under a minute (step="1") adds seconds.
Range
Two time inputs in one box, a start and an end, each with its own name and aria-label; the field's label is a <span id> naming the pair. An end before the start is invalid, unless the box is data-overnight (a night shift).
12 or 24 hours
The reader's language decides: in US English the hours run 1 to 12 with an AM/PM cell (type A or P, or step it). The value stays 24-hour.
Size
data-size on the field, the box or a container: cells a control's height, square.
States
An error marks every cell, with one message. Disabled and read-only cells show no arrows; read-only lines are dashed.
Edge cases
A growing cell never moves what's around it: it grows over the label and the next field, raised above them. Right to left, the cells follow the direction and a time's digits keep their order.