Components · Calendar
Two control surfaces from the calendar engine. The CalendarToolbar is the calendar's command bar — a Month/Week/Day/Agenda segmented control (aria-pressed) beside the period label and prev / Today / next. The MiniMonth is the compact date-picker: a 7-column month grid where today is ringed, the picked day is accent-filled, and markedDays dot the days that "have something." Both are token-driven and keyboard-navigable.
The active view's segment reads as aria-pressed (accent fill + inner glow), never color alone; Week is pinned :hover. prev / next are ghost Buttons, Today is secondary. The label is derived from view + cursor by periodLabel — "July 2026" here, "Jun 28 – Jul 4, 2026" for a week.
The picked day (Jul 4) is accent-filled + aria-selected; today (Jul 2) is ringed + accent (aria-current="date") — both conveyed without relying on color. Jul 15 is pinned :hover, the ‹ pager :hover. Dotted days are markedDays (every day carrying an event); a selected marked day flips its dot to on-accent. Weekday heads are the 2-letter fmtWeekdayShort().slice(0,2).
Month/Week/Day/Agenda (a role=group of aria-pressed toggles) + a live period label + prev / Today / next. Presentational — Calendar owns the state and feeds view + label.selected (Date | null) is the picked day — accent fill + aria-selected; onSelect(d) fires on click or Enter/Space. Own the value in client state.MiniMonth self-manages paging (‹ / ›); supply them to drive it externally.Date[] dotted under the day number ("has events"). A selected marked day switches its dot to on-accent so it stays visible over the fill.role=grid with per-cell aria-label, roving tabindex, and arrow-key nav (paging on a month boundary). vs DatePicker — reach for MiniMonth for an always-visible surface with marked days.Source · ds/calendar/CalendarToolbar.tsx (segmented control + Button) · MiniMonth.tsx (roving grid, markedDays) · date-utils.ts (monthMatrix, fmtMonthYear, fmtWeekdayShort) · label via Calendar.tsx periodLabel.