Calendar
A real `role="grid"` month rather than 42 tab stops — one tab stop, arrows for days, PageUp/PageDown for months, and six rows always, so paging never changes the height of what sits below it.
Calendars, ranges, time fields and duration inputs.
Date input is the control people most often get wrong, usually by making a typist use a calendar. The right answer is both: a text field that accepts what someone types alongside a picker for browsing. These do that, and they keep the range case — where the second date depends on the first — from being two unrelated fields.
A real `role="grid"` month rather than 42 tab stops — one tab stop, arrows for days, PageUp/PageDown for months, and six rows always, so paging never changes the height of what sits below it.
The typing half most pickers drop, attached to the calendar: parses on blur, refuses to guess whether 3/4 is March or April, and leaves what it cannot read in the box instead of clearing it.
Slots at a fixed step with the taken ones struck through and the time zone rendered beside the value — the three things a booking needs and a native time input cannot say.
A real `<time>` that says "3 hours ago" and cannot mismatch on hydration: both sides render the absolute date first, and the relative wording only arrives in an effect. Ticks at an interval scaled to its own age.
Three segments that behave like one field — typing past one advances, Backspace on an empty one goes back, arrows carry 59 minutes into the next hour, and pasting `1:30:00` fills all three.
Contribution grid filled column-first with `grid-auto-flow`, so weeks run down and the whole thing stays one flat list of cells.
Listing led by a tear-off date block in a real `<time>`, so the day and month are one semantic unit rather than two decorated spans.
Two dates joined by an en-dash inside one focus ring, with quick presets underneath because most range picks are a common span, not an arbitrary one.
Timer that empties rather than fills, the sweep animated through a registered angle property so the arc interpolates smoothly instead of snapping between conic stops.
Hour rail with events sitting in the slots they occupy and an empty hour left visibly empty, the current-time rule crossing the whole column with a dot on the gutter.
Date field opening a month grid anchored beneath it, leading days from the previous month dimmed rather than blank so the week rows stay aligned to their columns.
Month grids, availability pickers, booking flows and time slots.
Inputs, selects, checkboxes, radios and segmented controls.
Frosted panels with a blurred backdrop, in copy-paste CSS.
Two faces, one element, rotated on hover or focus.
Browser chrome, phone frames, terminals and screenshot surrounds.
File fields, image croppers, colour pickers and media selectors.