bearnie

Calendar and Navigation Menu

A date picker calendar with range selection and keyboard navigation, and a site navigation bar with hoverable dropdown panels.

registry 0.11.0
All releases

Calendar

A date picker calendar in plain Astro + vanilla JS — no date library, no framework runtime:

  • Single or mode="range" selection, with defaultValue / defaultFrom / defaultTo presets.
  • months={2} shows linked months side by side — the booking-site layout for picking a stay (stacked on small screens).
  • min/max bounds disable out-of-range days and stop month navigation at the edges.
  • name renders hidden inputs so the calendar works inside plain HTML forms.
  • Full keyboard support: a roving-tabindex role="grid" where arrows move by day and week, PageUp/PageDown by month, Home/End to the week edges, and Enter/Space selects.
  • Month and weekday names follow the visitor’s locale; a bubbling calendar-change CustomEvent reports every selection.
  • Compose it with Popover for a date picker — there’s an example in the docs.
  • A calendar-set CustomEvent sets the selection programmatically, so preset buttons (“Last 7 days”, “Month to date”…) can drive the range from outside — the docs show the full analytics-style picker with a presets sidebar, two months, and an Apply footer.

Accordion

  • Panels now animate open and closed (smooth height transition, skipped for prefers-reduced-motion), matching the chevron rotation that was already there.

Sheet

  • New floating prop on SheetContent detaches the panel from the screen edges with a margin, rounded corners, and a full border — works with every side.

Fixed

  • SheetClose and DialogClose are now layout-neutral wrappers instead of buttons. Composing <SheetClose><Button/></SheetClose> used to produce nested buttons, which browsers split apart while parsing — so the styled button never actually closed anything. SheetFooter/DialogFooter switched from space-x to gap so spacing works through the wrappers.

The shadcn-style top navigation for marketing sites:

  • NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, and NavigationMenuLink.
  • Panels open on hover, click, or ArrowDown, switch as you move between triggers, stay open while keyboard focus is inside, and close on Escape or outside click.
  • NavigationMenuContent aligns start/center/end under its item; panels animate with the shared overlay enter/exit states.
  • NavigationMenuLink styles panel links by default, matches trigger styling with variant="trigger" for plain top-bar items, and marks the current page with active (aria-current="page").