HyCalendar

A presentational, keyboard-accessible month grid built on the Temporal API. Pure date engine — no input, no popover. Embeddable standalone (booking surfaces, inline filters) and composed by hy-date-picker.

Selection is single by default; set range for two-endpoint selection. The value is an ISO YYYY-MM-DD (single) or an ISO 8601 interval start/end (range), per DATETIME_COMPONENTS_PLAN.md §3.

Temporal-free first paint

The grid is computed from Temporal, which is awaited via ensureTemporal() on first connect. Before it resolves (and during SSR) the component renders a lightweight loading shell — it never reads Temporal in the constructor or first render, so it passes the @lit-labs/ssr smoke test and behaves on the Safari/no-Temporal path.

Accessibility

role="grid" with a roving tabindex over day buttons; Arrow keys move by day, PageUp/PageDown by month (Shift by year), Home/End to week edges. Today carries aria-current="date"; selected days carry aria-selected. Month changes are announced via a polite live region.

Examples

Single date

<hy-calendar value="2026-03-07"></hy-calendar>

Range

<hy-calendar range value="2026-03-07/2026-03-12"></hy-calendar>

Events

• input - Fires on each selection step (range anchor, navigation commit).
• change - Fires once a selection is committed (single click; range second click).