Date Stepper

Create a date stepper. A pill control: a round hairline prev-arrow button, a fixed-width date readout in bold monospace ('Tue, Aug 12'), and a round next-arrow button. Stepping rolls the date vertically through the pill, direction-aware: next slides the old date up and out while the new one rises from below; prev plays the mirror - the readout is a window (overflow hidden) and each date is one line springing through it (stiffness 440, damping 30). Details that make it feel right: reserve the readout's width up front (min-width sized to the longest date + tabular-nums) so the pill never breathes as dates change; track the last direction in a ref so the exit animation always matches the arrow that was pressed; squash the pressed arrow to 88%. Clamp at the ends of the allowed range: the arrow keeps working visually (press feedback) but the date stops; optionally dim the arrow at the boundary. For fast stepping, holding an arrow can repeat after a short delay. The date moves only when an arrow is pressed or a key is used. Nothing walks it forward on a timer: the direction-aware roll only means anything as an answer to which arrow was pressed. Accessibility: arrows carry aria-labels ('Previous day' / 'Next day'), the readout is aria-live="polite" so each landed date is announced. If prefers-reduced-motion is set, swap the text instantly with no roll. 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.