@datatechsolutions/tympan 0.3.1 → 0.4.0

package/src/components/calendar/Calendar.tsx

@@ -0,0 +1,341 @@
+import {
+  CalendarDate,
+  endOfMonth,
+  getWeeksInMonth,
+  startOfMonth,
+  startOfWeek,
+  today as todayIn,
+  getLocalTimeZone,
+  type DateValue,
+} from '@internationalized/date'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useContext, useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import {
+  Button as AriaButton,
+  Calendar as AriaCalendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  RangeCalendar as AriaRangeCalendar,
+  RangeCalendarStateContext,
+  I18nProvider,
+  useLocale,
+} from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useMessages } from '../../internal/provider'
+import { ListboxSelect } from '../listbox-select/ListboxSelect'
+
+/** A calendar date without time or time zone, exchanged as a local `Date`. */
+export type CalendarDay = Date
+
+export interface CalendarRangeValue {
+  start: CalendarDay
+  end: CalendarDay
+}
+
+/** State of one day cell, passed to `renderDay`. */
+export interface CalendarDayState {
+  isToday: boolean
+  isSelected: boolean
+  isSelectionStart: boolean
+  isSelectionEnd: boolean
+  isUnavailable: boolean
+  isDisabled: boolean
+  isOutsideMonth: boolean
+  isFocused: boolean
+}
+
+export interface CalendarProps {
+  /** Accessible name of the calendar grid group. */
+  label: string
+  /** Single date or start-to-end range. */
+  mode?: 'single' | 'range'
+  value: CalendarDay | CalendarRangeValue | null
+  defaultValue?: CalendarDay | CalendarRangeValue | null
+  onChange: (value: CalendarDay | CalendarRangeValue | null) => void
+  minValue?: CalendarDay
+  maxValue?: CalendarDay
+  /** Days that cannot be chosen (booked, holidays); they stay visible. */
+  isDateUnavailable?: (date: CalendarDay) => boolean
+  /** Range mode: allow a range spanning unavailable days (they are excluded, not selected). */
+  allowsNonContiguousRanges?: boolean
+  /** Months shown side by side; paging moves by the whole set. */
+  visibleMonths?: 1 | 2 | 3
+  /** Paging moves by the visible set or by one month. */
+  pageBehavior?: 'visible' | 'single'
+  /** Title text, or month and year pickers for far jumps. */
+  headerMode?: 'title' | 'pickers'
+  /** Adds an ISO week-number column. */
+  showWeekNumbers?: boolean
+  /** Overrides the first day of the week from the locale. */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  /** Shows days of neighbouring months (not selectable with several visible months). */
+  showOutsideDays?: boolean
+  /** Which day holds focus and which month shows. */
+  focusedValue?: CalendarDay
+  onFocusChange?: (date: CalendarDay) => void
+  /** Adds content under the day number (a price, a dot); never replaces it. */
+  renderDay?: (date: CalendarDay, state: CalendarDayState) => ReactNode
+  /** Footer slot: presets or a note. */
+  footer?: ReactNode
+  disabled?: boolean
+  readOnly?: boolean
+  /** Marks the selection invalid (for example a range over unavailable days). */
+  isInvalid?: boolean
+  /** Error text shown when the selection is invalid. */
+  errorMessage?: string
+  /** Overrides the locale from the provider. */
+  locale?: string
+  className?: string
+}
+
+const fromDate = (d: Date) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+const toDate = (c: CalendarDate) => new Date(c.year, c.month - 1, c.day)
+
+/** ISO-8601 week number: week 1 is the week holding the year's first Thursday. */
+function isoWeekNumber(date: CalendarDate): number {
+  const target = new Date(Date.UTC(date.year, date.month - 1, date.day))
+  const weekday = target.getUTCDay() || 7
+  target.setUTCDate(target.getUTCDate() + 4 - weekday)
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
+  return Math.ceil(((target.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+}
+
+/**
+ * Cancels a pending range start on Escape (spec: wave-5-general/calendar.md,
+ * keyboard section). Listens on the calendar root so the key bubbles from the
+ * focused day cell, and stops propagation so an enclosing popover stays open.
+ */
+function RangeEscapeCancel() {
+  const state = useContext(RangeCalendarStateContext)
+  const ref = useRef<HTMLSpanElement>(null)
+  useEffect(() => {
+    const root = ref.current?.parentElement
+    if (!root || !state) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || !state.anchorDate) return
+      e.stopPropagation()
+      state.setAnchorDate(null)
+    }
+    root.addEventListener('keydown', onKey)
+    return () => root.removeEventListener('keydown', onKey)
+  }, [state])
+  return <span ref={ref} aria-hidden="true" hidden />
+}
+
+/**
+ * A month grid for picking a date or a date range directly on the page
+ * (spec: wave-5-general/calendar.md). Single mode rides RAC Calendar, range
+ * mode RAC RangeCalendar; both follow the APG Date Picker Dialog grid.
+ */
+export function Calendar(props: CalendarProps) {
+  const t = useMessages().calendar
+  const { locale: contextLocale } = useLocale()
+  const locale = props.locale ?? contextLocale
+  const mode = props.mode ?? 'single'
+  const months = props.visibleMonths ?? 1
+  const now = todayIn(getLocalTimeZone())
+
+  const [innerValue, setInnerValue] = useState<CalendarDay | CalendarRangeValue | null>(
+    () => props.value ?? props.defaultValue ?? null,
+  )
+  const value = props.value !== undefined ? props.value : innerValue
+  const valueStart = value && 'start' in value ? value.start : (value as CalendarDay | null)
+  const [innerFocused, setInnerFocused] = useState<CalendarDate>(() => (valueStart ? fromDate(valueStart) : now))
+  const focused = props.focusedValue ? fromDate(props.focusedValue) : innerFocused
+  const setFocused = (d: CalendarDate) => {
+    if (!props.focusedValue) setInnerFocused(d)
+    props.onFocusChange?.(toDate(d))
+  }
+  const report = (next: CalendarDay | CalendarRangeValue | null) => {
+    if (props.value === undefined) setInnerValue(next)
+    props.onChange(next)
+  }
+
+  const min = props.minValue ? fromDate(props.minValue) : undefined
+  const max = props.maxValue ? fromDate(props.maxValue) : undefined
+  const baseUnavailable = (d: DateValue) => (props.isDateUnavailable ? props.isDateUnavailable(toDate(d as CalendarDate)) : false)
+
+  const monthYearFmt = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+  const monthFmt = new Intl.DateTimeFormat(locale, { month: 'long' })
+  const headings = Array.from({ length: months }, (_, i) => toDate(startOfMonth(focused).add({ months: i })))
+  const heading = headings
+    .map((d, i) => (i === 0 || d.getFullYear() !== headings[i - 1]!.getFullYear() ? monthYearFmt.format(d) : monthFmt.format(d)))
+    .join(' – ')
+
+  const step = props.pageBehavior === 'single' ? 1 : months
+  const prevTarget = startOfMonth(focused).subtract({ months: step })
+  const nextTarget = startOfMonth(focused).add({ months: step })
+  const baseId = useId()
+  const headingId = `${baseId}-heading`
+
+  const pickerYears = (() => {
+    const from = Math.max(focused.year - 30, min?.year ?? focused.year - 30)
+    const to = Math.min(focused.year + 30, max?.year ?? focused.year + 30)
+    const list: number[] = []
+    for (let y = from; y <= to; y++) list.push(y)
+    return list
+  })()
+  const monthAllowed = (monthIndex: number) => {
+    const first = new CalendarDate(focused.year, monthIndex + 1, 1)
+    const last = endOfMonth(first)
+    return (!max || first.compare(max) <= 0) && (!min || last.compare(min) >= 0)
+  }
+
+  const invalid = !!props.isInvalid || !!props.errorMessage
+  const errorId = invalid && props.errorMessage ? `${baseId}-error` : undefined
+
+  const renderGrid = (offsetMonths: number) => {
+    const anchor = startOfMonth(focused).add({ months: offsetMonths })
+    const weeks = getWeeksInMonth(anchor, locale)
+    const weekStarts = Array.from({ length: weeks }, (_, w) => startOfWeek(anchor.add({ weeks: w }), locale))
+    return (
+      <div className="ty-calendar__month">
+        {props.showWeekNumbers ? (
+          <div className="ty-calendar__weeks" aria-hidden="true">
+            {weekStarts.map((week) => (
+              <span key={week.toString()} className="ty-calendar__week">
+                {isoWeekNumber(week)}
+              </span>
+            ))}
+          </div>
+        ) : null}
+        <CalendarGrid className="ty-calendar__grid" weekdayStyle="short" offset={offsetMonths ? { months: offsetMonths } : undefined}>
+          <CalendarGridHeader>
+            {(day) => <CalendarHeaderCell className="ty-calendar__weekday">{day}</CalendarHeaderCell>}
+          </CalendarGridHeader>
+          <CalendarGridBody>
+            {(date) => (
+              <CalendarCell date={date} className="ty-calendar__day">
+                {({ formattedDate, isToday, isSelected, isSelectionStart, isSelectionEnd, isUnavailable, isDisabled, isOutsideMonth, isFocused }) => (
+                  <span className="ty-calendar__day-box" data-today={isToday || undefined}>
+                    <span className="ty-calendar__day-number">{formattedDate}</span>
+                    {props.renderDay
+                      ? props.renderDay(toDate(date), {
+                          isToday,
+                          isSelected,
+                          isSelectionStart,
+                          isSelectionEnd,
+                          isUnavailable,
+                          isDisabled,
+                          isOutsideMonth,
+                          isFocused,
+                        })
+                      : null}
+                  </span>
+                )}
+              </CalendarCell>
+            )}
+          </CalendarGridBody>
+        </CalendarGrid>
+      </div>
+    )
+  }
+
+  const header =
+    props.headerMode === 'pickers' ? (
+      <div className="ty-calendar__pickers">
+        <ListboxSelect
+          accessibleLabel={t.monthPicker}
+          className="ty-calendar__picker"
+          value={String(focused.month)}
+          onChange={(key) => setFocused(focused.set({ month: Number(key) }))}
+          options={Array.from({ length: 12 }, (_, m) => ({
+            value: String(m + 1),
+            label: monthFmt.format(new Date(2020, m, 15)),
+            disabled: !monthAllowed(m),
+          }))}
+        />
+        <ListboxSelect
+          accessibleLabel={t.yearPicker}
+          className="ty-calendar__picker"
+          value={String(focused.year)}
+          onChange={(key) => setFocused(focused.set({ year: Number(key), day: 1 }))}
+          options={pickerYears.map((y) => ({ value: String(y), label: String(y) }))}
+        />
+      </div>
+    ) : (
+      <span className="ty-calendar__heading" id={headingId} aria-live="polite">
+        {heading}
+      </span>
+    )
+
+  const stepper = (
+    // Lives inside the AriaCalendar/AriaRangeCalendar: the slot="previous" and
+    // slot="next" buttons only receive their wiring from the calendar context.
+    <div className="ty-calendar__stepper">
+      <AriaButton slot="previous" className="ty-calendar__nav" aria-label={t.previousMonth(monthYearFmt.format(toDate(prevTarget)))}>
+        <ChevronLeft className="ty-icon ty-mirror-rtl" aria-hidden="true" focusable="false" />
+      </AriaButton>
+      {header}
+      <AriaButton slot="next" className="ty-calendar__nav" aria-label={t.nextMonth(monthYearFmt.format(toDate(nextTarget)))}>
+        <ChevronRight className="ty-icon ty-mirror-rtl" aria-hidden="true" focusable="false" />
+      </AriaButton>
+    </div>
+  )
+
+  const shared = {
+    'aria-label': props.label,
+    minValue: min,
+    maxValue: max,
+    isDisabled: props.disabled,
+    isReadOnly: props.readOnly,
+    pageBehavior: props.pageBehavior ?? 'visible',
+    firstDayOfWeek: props.firstDayOfWeek,
+    visibleDuration: { months },
+    focusedValue: focused,
+    onFocusChange: setFocused,
+    isInvalid: invalid || undefined,
+  } as const
+
+  return (
+    <I18nProvider locale={locale}>
+      <div
+        className={cx('ty-calendar', props.className)}
+        data-mode={mode}
+        data-months={months}
+        data-outside-days={props.showOutsideDays === false ? undefined : ''}
+        data-invalid={invalid || undefined}
+      >
+        <div className="ty-calendar__body">
+          {mode === 'range' ? (
+            <AriaRangeCalendar
+              {...shared}
+              className="ty-calendar__rac"
+              value={value && 'start' in value ? { start: fromDate(value.start), end: fromDate(value.end) } : null}
+              onChange={(range) => {
+                if (!range) return report(null)
+                report({ start: toDate(range.start as CalendarDate), end: toDate(range.end as CalendarDate) })
+              }}
+              isDateUnavailable={baseUnavailable}
+              allowsNonContiguousRanges={props.allowsNonContiguousRanges}
+            >
+              <RangeEscapeCancel />
+              {stepper}
+              {Array.from({ length: months }, (_, i) => renderGrid(i))}
+            </AriaRangeCalendar>
+          ) : (
+            <AriaCalendar
+              {...shared}
+              className="ty-calendar__rac"
+              value={value && 'start' in value ? null : (value ? fromDate(value as CalendarDay) : null)}
+              onChange={(d) => report(d ? toDate(d as CalendarDate) : null)}
+              isDateUnavailable={baseUnavailable}
+            >
+              {stepper}
+              {Array.from({ length: months }, (_, i) => renderGrid(i))}
+            </AriaCalendar>
+          )}
+        </div>
+        {errorId ? (
+          <p className="ty-calendar__error" id={errorId} role="alert">
+            {props.errorMessage}
+          </p>
+        ) : null}
+        {props.footer ? <div className="ty-calendar__footer">{props.footer}</div> : null}
+      </div>
+    </I18nProvider>
+  )
+}

package/src/components/date-range-field/DateRangeField.css

@@ -0,0 +1,140 @@
+/* DateRangeField (spec: wave-5-general/date-range-field.md; tokens as DateField and Calendar). */
+@layer tympan.components {
+  .ty-date-range-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+  .ty-date-range-field__picker {
+    min-inline-size: 0;
+  }
+  .ty-date-range-field__group {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    min-block-size: var(--ty-control-height);
+    padding-inline: var(--ty-space-3);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-input);
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-body);
+    cursor: text;
+  }
+  .ty-date-range-field__group[data-focus-within] {
+    border-color: var(--ty-accent);
+  }
+  .ty-date-range-field__group[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 1px;
+  }
+  .ty-date-range-field[data-invalid] .ty-date-range-field__group {
+    border-color: var(--ty-danger);
+  }
+  .ty-date-range-field__group[data-disabled] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink-3);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .ty-date-range-field__input {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    min-block-size: var(--ty-control-target);
+    padding-inline: var(--ty-space-1);
+    font-variant-numeric: tabular-nums;
+    outline: none;
+  }
+  .ty-date-range-field__segment {
+    padding-inline: 1px;
+    border-radius: calc(var(--ty-radius-control) / 2);
+    color: var(--ty-ink);
+    font-variant-numeric: tabular-nums;
+    outline: none;
+    cursor: inherit;
+  }
+  .ty-date-range-field__segment[data-placeholder] {
+    color: var(--ty-ink-3);
+  }
+  .ty-date-range-field__segment[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 1px;
+  }
+  .ty-date-range-field__dash {
+    color: var(--ty-ink-3);
+  }
+  .ty-date-range-field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--ty-control-target);
+    block-size: var(--ty-control-target);
+    margin-inline-end: calc((var(--ty-control-target) - var(--ty-control-height)) / -2);
+    border: 0;
+    border-radius: var(--ty-radius-control);
+    background: transparent;
+    color: var(--ty-ink-2);
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-date-range-field__trigger[data-hovered] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+  .ty-date-range-field__trigger[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Popover panel: presets and calendar, apply actions at the end. */
+  .ty-date-range-field__surface {
+    display: block;
+  }
+  .ty-date-range-field__panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-3);
+    min-inline-size: 0;
+  }
+  .ty-date-range-field__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-2);
+  }
+  .ty-date-range-field__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ty-space-2);
+    padding-block-start: var(--ty-space-2);
+    border-block-start: 1px solid var(--ty-line-soft);
+  }
+
+  /* Narrow screens: the popover is a tray; presets become a chip row that scrolls. */
+  .ty-date-range-field__surface[data-presentation='tray'] .ty-date-range-field__presets {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+    padding-block-end: var(--ty-space-1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-date-range-field__surface {
+      animation-duration: 0s;
+      transition-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-date-range-field__group {
+      border-color: CanvasText;
+      forced-color-adjust: none;
+    }
+    .ty-date-range-field__trigger[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+  }
+}

package/src/components/date-range-field/DateRangeField.test.tsx

@@ -0,0 +1,187 @@
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { useState } from 'react'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { renderRtl } from '../../../test/rtl'
+import { setViewportWidth } from '../../../test/media'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { DateRangeField, type DateRangeFieldValue } from './DateRangeField'
+
+const day = (y: number, m: number, d: number) => new Date(y, m - 1, d)
+const rangeValue = (sy: number, sm: number, sd: number, ey: number, em: number, ed: number): DateRangeFieldValue => ({
+  start: day(sy, sm, sd),
+  end: day(ey, em, ed),
+})
+const sameDay = (a: Date | null | undefined, y: number, m: number, d: number) =>
+  !!a && a.getFullYear() === y && a.getMonth() === m - 1 && a.getDate() === d
+
+// jsdom has no contenteditable support; react-aria date segments rely on
+// beforeinput events, which userEvent only dispatches to editable elements.
+Object.defineProperty(HTMLElement.prototype, 'isContentEditable', {
+  configurable: true,
+  get(this: HTMLElement) {
+    return this.getAttribute('contenteditable') === 'true'
+  },
+})
+
+describe('DateRangeField', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('types start and end dates into the segments', async () => {
+    const onChange = vi.fn()
+    function Harness() {
+      const [value, setValue] = useState<DateRangeFieldValue | null>(null)
+      return (
+        <DateRangeField
+          label="Period"
+          value={value}
+          onChange={(next) => {
+            setValue(next)
+            onChange(next)
+          }}
+          locale="en-GB"
+        />
+      )
+    }
+    render(<Harness />)
+    const startDay = document.querySelector('.ty-date-range-field__segment[data-type="day"]')!
+    expect(startDay).toBeTruthy()
+    await userEvent.type(startDay, '01032026')
+    // Completing the start date moves focus into the end input.
+    const inputs = document.querySelectorAll('.ty-date-range-field__input')
+    expect(inputs[1]!.contains(document.activeElement)).toBe(true)
+    await userEvent.type(document.activeElement as HTMLElement, '05032026')
+    await waitFor(() => {
+      const reported = onChange.mock.calls.at(-1)?.[0] as DateRangeFieldValue | undefined
+      expect(reported?.start && sameDay(reported.start, 2026, 3, 1)).toBe(true)
+      expect(reported?.end && sameDay(reported.end, 2026, 3, 5)).toBe(true)
+    })
+  })
+
+  it('reports end-before-start as invalid with the computed message', () => {
+    render(<DateRangeField label="Period" value={rangeValue(2026, 3, 10, 2026, 3, 5)} onChange={() => {}} locale="en-US" />)
+    expect(screen.getByText(/end date is before the start date/i)).toBeVisible()
+    expect(document.querySelector('.ty-date-range-field')).toHaveAttribute('data-invalid', 'true')
+  })
+
+  it('reports a range longer than maxDays as invalid', () => {
+    render(<DateRangeField label="Window" value={rangeValue(2026, 1, 1, 2026, 2, 9)} onChange={() => {}} maxDays={31} locale="en-US" />)
+    expect(screen.getByText(/longer than 31 days/i)).toBeVisible()
+  })
+
+  it('commits two picks in immediate mode and closes the popover', async () => {
+    const onChange = vi.fn()
+    render(
+      <DateRangeField label="Period" value={rangeValue(2026, 3, 1, 2026, 3, 2)} onChange={onChange} visibleMonths={1} locale="en-US" />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Period/ }))
+    const grid = await screen.findByRole('grid')
+    await userEvent.click(within(grid).getByRole('button', { name: /March 10/ }))
+    await userEvent.click(within(grid).getByRole('button', { name: /March 12/ }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    const reported = onChange.mock.calls.at(-1)![0] as DateRangeFieldValue
+    expect(sameDay(reported.start, 2026, 3, 10)).toBe(true)
+    expect(sameDay(reported.end, 2026, 3, 12)).toBe(true)
+  })
+
+  it('keeps a draft in apply mode and restores it on Cancel', async () => {
+    const onChange = vi.fn()
+    const original = rangeValue(2026, 3, 2, 2026, 3, 4)
+    render(
+      <DateRangeField label="Period" value={original} onChange={onChange} confirmation="apply" visibleMonths={1} locale="en-US" />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Period/ }))
+    const grid = await screen.findByRole('grid')
+    await userEvent.click(within(grid).getByRole('button', { name: /March 10/ }))
+    await userEvent.click(within(grid).getByRole('button', { name: /March 12/ }))
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('applies a preset relative to today', async () => {
+    const onChange = vi.fn()
+    const today = new Date()
+    const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6)
+    render(
+      <DateRangeField
+        label="Period"
+        value={null}
+        onChange={onChange}
+        presets={[{ id: 'last-7', label: 'Last 7 days', range: { start, end: today } }]}
+        visibleMonths={1}
+        locale="en-US"
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Period/ }))
+    await screen.findByRole('grid')
+    await userEvent.click(screen.getByRole('button', { name: 'Last 7 days' }))
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    const reported = onChange.mock.calls.at(-1)![0] as DateRangeFieldValue
+    expect(sameDay(reported.end, today.getFullYear(), today.getMonth() + 1, today.getDate())).toBe(true)
+    expect(sameDay(reported.start, start.getFullYear(), start.getMonth() + 1, start.getDate())).toBe(true)
+  })
+
+  it('returns focus to the calendar button on Escape', async () => {
+    render(<DateRangeField label="Period" value={null} onChange={() => {}} locale="en-US" />)
+    const trigger = screen.getByRole('button', { name: /Period/ })
+    await userEvent.click(trigger)
+    await screen.findByRole('dialog')
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(trigger).toHaveFocus())
+  })
+
+  it('submits both dates in ISO format through named inputs', () => {
+    render(
+      <DateRangeField label="Period" value={rangeValue(2026, 3, 1, 2026, 3, 12)} onChange={() => {}} startName="from" endName="to" locale="en-US" />,
+    )
+    expect(document.querySelector('input[name="from"]')).toHaveValue('2026-03-01')
+    expect(document.querySelector('input[name="to"]')).toHaveValue('2026-03-12')
+  })
+
+  it('opens one month as a tray on a narrow viewport', async () => {
+    setViewportWidth(400)
+    render(<DateRangeField label="Period" value={null} onChange={() => {}} locale="en-US" />)
+    await userEvent.click(screen.getByRole('button', { name: /Period/ }))
+    const dialog = await screen.findByRole('dialog')
+    expect(dialog.closest('[data-presentation]')).toHaveAttribute('data-presentation', 'tray')
+    expect(screen.getAllByRole('grid')).toHaveLength(1)
+    expect(screen.queryByText(/–\s*\w+ 2026/)).toBeNull()
+  })
+
+  it('keeps hit areas, tray chips and forced-colour borders in the stylesheet', () => {
+    const css = cssOf('components/date-range-field/DateRangeField.css')
+    expect(css).toMatch(/var\(--ty-control-target\)/)
+    expect(css).toMatch(/\[data-presentation='tray'\] \.ty-date-range-field__presets/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/CanvasText/)
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/0s/)
+  })
+
+  it('has no axe violations, closed and open, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <DateRangeField label={`Period ${scheme}`} value={rangeValue(2026, 3, 1, 2026, 3, 12)} onChange={() => {}} hint="Reporting window." />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+    await userEvent.click(screen.getByRole('button', { name: /Period light/ }))
+    await expectNoAxeViolations(document.body)
+  })
+
+  it('renders and passes axe in right-to-left', async () => {
+    const { container } = renderRtl(<DateRangeField label="الفترة" value={rangeValue(2026, 9, 1, 2026, 9, 12)} onChange={() => {}} />)
+    await expectNoAxeViolations(container)
+    await userEvent.click(screen.getByRole('button', { name: /الفترة/ }))
+    await screen.findByRole('dialog')
+    await expectNoAxeViolations(document.body)
+  })
+})