Week Picker

Create a week picker. A month card (header with the month name and a rolling 'Week 33' chip) where the unit of selection is a whole row: each week row is one button holding its 7 day numbers, and the selection indicator is a single rounded-full pill - accent border with an accent wash at ~12% alpha - stretched across the entire selected row. The pill is one shared layout element that springs vertically from week to week (stiffness 400, damping 30), slightly outset from the row (-1px inset) so it wraps the numbers rather than crowding them. As it lands, the selected week's numbers turn bold ink while other weeks fade to muted (0.25s): rows read as clearly in or out. The header chip rolls vertically to the new week number in sync with the pill's landing. Hovering an unselected row previews it with a faint hairline pill; clicking selects. The pill moves only then: nothing walks it down the month on a timer. Use this pattern when the product thinks in weeks - timesheets, meal plans, sprint pickers - and a day-level picker would force users to translate. Accessibility: each row is a button with aria-pressed and an aria-label ('Week 33, August 8 to 14'); the chip is aria-live="polite". If prefers-reduced-motion is set, the pill jumps between rows with no spring. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.