The native HTML <input type="date"> element provides a minimal date-picking experience, but it falls short for the needs of a complex, accessible, and branded application. auro-datepicker bridges those gaps with a purpose-built component designed for real-world use.

Native date inputs vary widely across browsers and platforms, with inconsistent screen reader announcements, keyboard behavior, and focus management.

auro-datepicker provides:

• Full keyboard navigation — Arrow keys move between days, months, and years. Enter and Space select a date. Escape closes the calendar. DOM focus stays on the calendar grid wrapper while an imperatively-tracked active cell is announced through a debounced aria-live region, so screen readers stay in sync without duplicate announcements during rapid navigation.
• Rich ARIA semantics — Every cell is labeled with its full date, day-of-week, and contextual state (e.g. "selected", "today", "unavailable", "range start", "in range"). Screen reader users hear meaningful announcements, not just numbers.
• Live region announcements — Month changes are announced via aria-live so assistive technology users know the visible month has changed.
• Reduced motion support — Scrolling and transitions respect prefers-reduced-motion.
• Focus management — Opening the calendar moves focus to the calendar grid wrapper; the initial active date cell is marked imperatively and announced via the aria-live region. Closing returns focus to the trigger input. The fullscreen dialog uses showModal() for native inert-background behavior, while the desktop modal traps focus within the bib.

By contrast, native <input type="date"> delegates all of this to the browser, and the result differs significantly between Chrome, Safari, and Firefox — often with no keyboard navigation of the calendar grid at all on some platforms.

HTML has no native concept of a date range picker. Building one from two <input type="date"> elements requires custom logic for coordinating values, enforcing start-before-end ordering, and providing a unified visual experience.

auro-datepicker handles this with a single range attribute, providing:

• Two coordinated input fields with shared calendar interaction
• Visual range highlighting across the calendar grid
• Customizable ARIA labels for range positions (start, end, in-range, before range, after range)
• Automatic value coordination between departure and return dates

Native date inputs have no mechanism to mark specific dates as unavailable. minDate and maxDate can restrict to a range, but they cannot express "these specific dates within the range are not selectable."

auro-datepicker supports a blackoutDates array of ISO date strings. Blacked-out dates are:

• Visually styled as unavailable
• Announced as unavailable (with a customizable label like "sold out") to screen readers
• Focusable but not selectable via click or keyboard
• Validated on typed input — entering a blackout date triggers a customError validity state

Native date validation is limited to required, min, and max. Error messages are browser-controlled and cannot be customized.

auro-datepicker integrates with the Auro form validation system:

• Supports required, minDate, maxDate, and blackout date constraints
• Custom error messages for each validity state (setCustomValidityValueMissing, setCustomValidityRangeOverflow, setCustomValidityRangeUnderflow, setCustomValidityCustomError)
• Validation runs on blur, on value change, and when constraints change (e.g. blackoutDates is updated)
• Dispatches auroFormElement-validated events so parent forms can react
• Displays errors inline via the help text slot

Native date inputs render a small, browser-controlled popup that cannot be styled or repositioned.

auro-datepicker adapts to viewport size:

• Desktop — Calendar appears as a positioned dropdown bib, with optional modal behavior (desktopModal) that traps focus and makes background content inert
• Mobile — Calendar opens as a fullscreen dialog via showModal(), with a configurable breakpoint (fullscreenBreakpoint). The virtual keyboard stays open during the transition so users can continue typing
• Multi-month — Desktop viewports can display two months side-by-side for range selection

Native <input type="date"> follows the browser's locale for display format, but offers no control over month names, labels, or ARIA text.

auro-datepicker supports:

• Custom monthNames arrays for any language
• Localizable navigation labels (navLabelPrevMonth, navLabelNextMonth)
• Localizable range position labels for screen readers
• Customizable blackoutLabel text
• Configurable date display format

Native date inputs render a fixed grid of numbers. There is no way to add prices, icons, or supplementary information to individual dates.

auro-datepicker supports per-date slot content:

• Date slots (date_YYYY_MM_DD) — Add custom HTML below the date number (e.g. flight prices, availability indicators)
• Popover slots (popover_YYYY_MM_DD) — Add popover content that appears on hover or focus for a specific date
• Reference dates — Display reference data alongside dates for decision-making

A native <input type="date"> cannot be styled to match a design system. Shadow DOM browser controls resist CSS customization, and the calendar popup is entirely outside author control.

auro-datepicker is built with the Alaska Airlines Auro Design System:

• Consistent visual language with other Auro form components
• Light and dark theme support (appearance="default" or appearance="inverse")
• CSS custom properties and ::part() selectors for targeted styling
• Composed from versioned Auro sub-components (dropdown, input, button, icon) for consistency