Estimate: 45m
The design for a design-system calendar date-picker. The issue Due-date fields (create modal 2.3.3 / edit form 2.3.6 / detail core-fields rail 2.4.2) currently fall back to the native <input type="date"> — its FIELD now uses the Input primitive, but the native browser CALENDAR POPUP is OS chrome and doesn't match the design system. This designs the replacement so 2.4.12 isn't improvising UI (the design gate — there is no calendar in the system today). Produce, under design/work-items/, a datepicker.mock.html (built from the live design system — components/ui/* + --el-* tokens, so the coding agent composes the same primitives) + a design-notes.md section, covering:
Input-styled field showing the selected date (formatted like formatDate → "Jun 4, 2026") or a placeholder, with a calendar glyph, and a Clear affordance (Due date is nullable).Popover primitive): the month/year caption + prev/next-month nav, the weekday header row, and the day grid — with the selected day, today, hover, focused, and disabled day states all specified through --el-* tokens (AA-safe, finding #35; selection not conveyed by colour alone).Mirror the prior design subtasks' output convention (1.0.5 / 2.4.7 / 2.4.8 / 2.5.7). Colour only through --el-*.
design/work-items/datepicker.mock.html + a design-notes.md entry exist, naming the composing primitives (Popover + Input-styled trigger), copy, and every day-cell state (selected / today / hover / focus / disabled).--el-*; AA-safe.design/work-items/relationships.mock.html (2.4.7) — the in-repo HTML-mockup convention to mirrorcomponents/ui/Popover.tsx + Input.tsx + Combobox.tsx — the anchored-popover + field chrome to composeapp/globals.css --el-* tiers + the /tokens route convention