Calendar
Day numbers in cells with no grid lines.
States
-
Day
nothing set
A bare numeral; the cell draws nothing at rest.
-
Today
aria-current="date"
The cell’s tissue ring.
-
Hot
hover
A --state fill that fires.
-
Chosen
aria-selected="true"
A still ink cell.
-
Outside
disabled
A muted numeral; it can’t be chosen.
Anatomy
| Day | a 32px icon cell (--control-sm) holding the numeral, Basier Medium 14/24 |
|---|---|
| Grid | seven columns of cells, no gaps and no lines |
| Weekdays | the label voice in --muted-foreground, Monday first |
| Today | the cell’s resting tissue ring; every other day has none |
| Chosen | an --ink cell with a --chip-fg numeral |
| Hot | a --state fill that fires (280ms) and wobbles while it stays hot |
| Outside | days of the next and last month, --muted-foreground and inert |
| Month | its name in the clean cut at 16/24; the steps are icon cells |
| Keys | arrows move a day or a week, crossing into the next month |
The flare’s length is read from the engine at build time (rule.ts).
Decisions
-
Days are cells
Every day is the same icon cell as every compact control, so a calendar is a field of cells rather than a table of boxes.
-
No grid lines
Frames are off; the columns are enough to hold the days in line.
-
Only today rings
At rest the days are bare paper and only today keeps a ring, so the month reads as quiet and the one date that matters stands out.