@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/src/Calendar/Calendar.doc.mjs

@@ -103,8 +103,8 @@ export const docs = {
     },
     {
       name: 'weekStartsOn',
-      type: '0 | 1 | 2 | 3 | 4 | 5 | 6',
-      description: 'First day of week (0=Sunday).',
+      type: "0 | 1 | 2 | 3 | 4 | 5 | 6 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'",
+      description: 'First day of week. Accepts a number (0=Sunday) or a three-letter day name (e.g. "mon").',
       default: '0',
     },
   ],
@@ -147,7 +147,7 @@ export const docsZh = {
     {name: 'hasOutsideDays', type: 'boolean', description: '显示相邻月份的日期。', default: 'true'},
     {name: 'hasWeekNumbers', type: 'boolean', description: '显示 ISO 周数。', default: 'false'},
     {name: 'hasVariableRowCount', type: 'boolean', description: '可变行数与固定 6 行网格。', default: 'false'},
-    {name: 'weekStartsOn', type: '0 | 1 | 2 | 3 | 4 | 5 | 6', description: '每周起始日（0=周日）。', default: '0'},
+    {name: 'weekStartsOn', type: "0 | 1 | 2 | 3 | 4 | 5 | 6 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'", description: '每周起始日。可为数字（0=周日）或三字母星期缩写（如 "mon"）。', default: '0'},
   ],
   theming: {
     targets: [
@@ -200,6 +200,6 @@ export const docsDense = {
     hasOutsideDays: 'show days from adjacent months',
     hasWeekNumbers: 'show ISO week numbers',
     hasVariableRowCount: 'variable vs fixed 6-row grid',
-    weekStartsOn: 'first day of week (0=Sunday)',
+    weekStartsOn: 'first day of week (0=Sunday, or name e.g. "mon")',
   },
 };

package/src/Calendar/Calendar.test.tsx

@@ -10,19 +10,21 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {act, render, screen} from '@testing-library/react';
+import {act, render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Calendar} from './Calendar';
 import type {CalendarHandle} from './Calendar';
 
 /**
  * Helper to find a day button by its day number.
- * Day buttons have aria-labels like "Thursday, January 15, 2026".
+ * Day buttons are native <button> elements with aria-labels like
+ * "Thursday, January 15, 2026". Each button is the sole child of a
+ * role="gridcell" wrapper.
  */
 function getDayButton(day: number, month = 'January', year = 2026) {
   // Match the full date pattern with the day number
   const pattern = new RegExp(`${month}\\s+${day},\\s+${year}`);
-  return screen.getByRole('gridcell', {name: pattern});
+  return screen.getByRole('button', {name: pattern});
 }
 
 describe('Calendar', () => {
@@ -146,10 +148,7 @@ describe('Calendar', () => {
     const handleFocusChange = vi.fn();
 
     render(
-      <Calendar
-        focusDate="2026-01-01"
-        onFocusDateChange={handleFocusChange}
-      />,
+      <Calendar focusDate="2026-01-01" onFocusDateChange={handleFocusChange} />,
     );
 
     const nextButton = screen.getByRole('button', {name: 'Next month'});
@@ -189,9 +188,7 @@ describe('Calendar', () => {
       return day !== 0 && day !== 6;
     };
 
-    render(
-      <Calendar focusDate="2026-01-01" dateConstraints={[isWeekday]} />,
-    );
+    render(<Calendar focusDate="2026-01-01" dateConstraints={[isWeekday]} />);
 
     // January 4, 2026 is a Sunday - should be disabled
     const sunday = getDayButton(4);
@@ -238,6 +235,21 @@ describe('Calendar', () => {
     expect(dayNames[0]).toHaveTextContent('Mo');
   });
 
+  it('accepts a three-letter day name for weekStartsOn', () => {
+    render(<Calendar weekStartsOn="mon" />);
+
+    // "mon" should behave exactly like the numeric 1 (Monday first).
+    const dayNames = screen.getAllByText(/^(Mo|Tu|We|Th|Fr|Sa|Su)$/);
+    expect(dayNames[0]).toHaveTextContent('Mo');
+  });
+
+  it('treats weekStartsOn day names case-insensitively', () => {
+    render(<Calendar weekStartsOn={'WED' as 'wed'} />);
+
+    const dayNames = screen.getAllByText(/^(Mo|Tu|We|Th|Fr|Sa|Su)$/);
+    expect(dayNames[0]).toHaveTextContent('We');
+  });
+
   // ─── Range Mode ──────────────────────────────────────────────
 
   it('supports range selection mode', async () => {
@@ -245,11 +257,7 @@ describe('Calendar', () => {
     const handleChange = vi.fn();
 
     render(
-      <Calendar
-        mode="range"
-        onChange={handleChange}
-        focusDate="2026-01-01"
-      />,
+      <Calendar mode="range" onChange={handleChange} focusDate="2026-01-01" />,
     );
 
     // Click start date
@@ -271,11 +279,7 @@ describe('Calendar', () => {
     const handleChange = vi.fn();
 
     render(
-      <Calendar
-        mode="range"
-        onChange={handleChange}
-        focusDate="2026-01-01"
-      />,
+      <Calendar mode="range" onChange={handleChange} focusDate="2026-01-01" />,
     );
 
     // Click later date first
@@ -321,6 +325,75 @@ describe('Calendar', () => {
     expect(screen.getAllByRole('gridcell').length).toBeGreaterThan(0);
   });
 
+  it('renders a valid APG grid: one grid, header row of columnheaders inside it, week rows of gridcells', () => {
+    render(<Calendar focusDate="2026-01-01" />);
+
+    const grids = screen.getAllByRole('grid');
+    expect(grids.length).toBe(1);
+    const grid = grids[0];
+
+    // The columnheaders live INSIDE the grid.
+    const columnHeaders = screen.getAllByRole('columnheader');
+    expect(columnHeaders.length).toBe(7);
+    for (const header of columnHeaders) {
+      expect(grid.contains(header)).toBe(true);
+    }
+
+    // The grid's rows: first is the header row of columnheaders, the rest are
+    // week rows whose direct children are gridcells.
+    const rows = within(grid).getAllByRole('row');
+    // 1 header row + 6 week rows (fixed 6-row grid).
+    expect(rows.length).toBe(7);
+
+    const [headerRow, ...weekRows] = rows;
+
+    // Header row's direct children are the 7 columnheaders.
+    const headerChildren = Array.from(headerRow.children);
+    const headerColHeaders = headerChildren.filter(
+      child => child.getAttribute('role') === 'columnheader',
+    );
+    expect(headerColHeaders.length).toBe(7);
+
+    // Each week row's direct children are gridcells (7 per row).
+    for (const row of weekRows) {
+      const gridcellChildren = Array.from(row.children).filter(
+        child => child.getAttribute('role') === 'gridcell',
+      );
+      expect(gridcellChildren.length).toBe(7);
+    }
+  });
+
+  it('renders week-number cells as rowheader when hasWeekNumbers is set', () => {
+    render(<Calendar hasWeekNumbers focusDate="2026-01-01" />);
+
+    const grid = screen.getByRole('grid');
+    const rowHeaders = within(grid).getAllByRole('rowheader');
+    // One rowheader (week number) per week row.
+    expect(rowHeaders.length).toBeGreaterThanOrEqual(5);
+    // Week numbers are numeric.
+    for (const header of rowHeaders) {
+      expect(header.textContent).toMatch(/^\d+$/);
+    }
+  });
+
+  it('gridcell wrappers are direct children of week rows, and the button is inside the gridcell', () => {
+    render(<Calendar focusDate="2026-01-01" />);
+
+    const grid = screen.getByRole('grid');
+    const gridcells = within(grid).getAllByRole('gridcell');
+    for (const cell of gridcells) {
+      // The gridcell's parent is a role="row".
+      const parent = cell.parentElement;
+      expect(parent?.getAttribute('role')).toBe('row');
+      // The day button (if present) is a descendant of the gridcell.
+      const button = cell.querySelector('button');
+      if (button) {
+        expect(cell.contains(button)).toBe(true);
+        expect(button).not.toHaveAttribute('role', 'gridcell');
+      }
+    }
+  });
+
   it('has navigation buttons with accessible labels', () => {
     render(<Calendar />);
 
@@ -346,16 +419,13 @@ describe('Calendar', () => {
     const handleFocusChange = vi.fn();
 
     render(
-      <Calendar
-        focusDate="2026-01-01"
-        onFocusDateChange={handleFocusChange}
-      />,
+      <Calendar focusDate="2026-01-01" onFocusDateChange={handleFocusChange} />,
     );
 
     // Focus Jan 28
     const day28 = getDayButton(28);
     await user.click(day28);
-    day28.querySelector('button')?.focus();
+    day28.focus();
 
     // Press ArrowDown — should move to Feb 4 (+7 days), not Feb 28
     await user.keyboard('{ArrowDown}');
@@ -365,6 +435,78 @@ describe('Calendar', () => {
     expect(focusedElement).toHaveAttribute('data-date', '2026-02-04');
   });
 
+  it('ArrowDown lands on the same weekday +7 days even when earlier days are disabled (complex-2)', async () => {
+    const user = userEvent.setup();
+
+    // min disables Jan 1–4 (HTML-disabled). Jan 8 is a Thursday; ArrowDown must
+    // land on Jan 15 (the same weekday, +7 days), not a shifted date caused by
+    // the removed enabled cells.
+    render(<Calendar focusDate="2026-01-01" min="2026-01-05" />);
+
+    const day1 = getDayButton(1);
+    expect(day1).toBeDisabled();
+
+    const day8 = getDayButton(8);
+    day8.focus();
+
+    await user.keyboard('{ArrowDown}');
+    expect(document.activeElement).toHaveAttribute('data-date', '2026-01-15');
+
+    await user.keyboard('{ArrowDown}');
+    expect(document.activeElement).toHaveAttribute('data-date', '2026-01-22');
+  });
+
+  it('ArrowUp skips a disabled cell in the same column to the next enabled row (complex-2)', async () => {
+    const user = userEvent.setup();
+
+    // max disables Jan 22 onward. Focus Feb 5 handling is out of scope; instead
+    // use dateConstraints to disable a single mid-grid day and verify column
+    // geometry is preserved (ArrowUp from Jan 15 skips disabled Jan 8 → Jan 1).
+    const disableJan8 = (date: Date) =>
+      !(
+        date.getFullYear() === 2026 &&
+        date.getMonth() === 0 &&
+        date.getDate() === 8
+      );
+
+    render(<Calendar focusDate="2026-01-01" dateConstraints={[disableJan8]} />);
+
+    const day8 = getDayButton(8);
+    expect(day8).toBeDisabled();
+
+    const day15 = getDayButton(15);
+    day15.focus();
+
+    // ArrowUp: same column one row up is Jan 8 (disabled) → skip to Jan 1.
+    await user.keyboard('{ArrowUp}');
+    expect(document.activeElement).toHaveAttribute('data-date', '2026-01-01');
+  });
+
+  it('cross-month arrow nav resolves the focused date from data-date (locale-safe)', async () => {
+    // Regression for complex-4: getFocusedDate must read the machine-readable
+    // data-date attribute, not parse the human-readable aria-label with
+    // new Date() (which is locale-dependent). We prove the resolution path by
+    // corrupting the aria-label to something new Date() cannot parse — cross-
+    // month navigation must still report the correct ISO date.
+    const user = userEvent.setup();
+    const handleFocusChange = vi.fn();
+
+    render(
+      <Calendar focusDate="2026-01-01" onFocusDateChange={handleFocusChange} />,
+    );
+
+    const day28 = getDayButton(28);
+    await user.click(day28);
+    day28.focus();
+    // Simulate a non-English/unparseable aria-label while keeping data-date.
+    day28.setAttribute('aria-label', '2026年1月28日 水曜日');
+
+    await user.keyboard('{ArrowDown}');
+
+    // Feb 4 (+7 days) — resolved via data-date despite the unparseable label.
+    expect(document.activeElement).toHaveAttribute('data-date', '2026-02-04');
+  });
+
   it('prev button is disabled when focusDate month contains min', () => {
     render(<Calendar focusDate="2026-01-01" min="2026-01-15" />);
 
@@ -414,11 +556,7 @@ describe('Calendar', () => {
     const handleChange = vi.fn();
 
     render(
-      <Calendar
-        mode="range"
-        onChange={handleChange}
-        focusDate="2026-01-01"
-      />,
+      <Calendar mode="range" onChange={handleChange} focusDate="2026-01-01" />,
     );
 
     // Click start date to begin range selection

package/src/Calendar/Calendar.tsx

@@ -32,7 +32,6 @@ import {useGridFocus} from '../hooks';
 import {
   useCalendarDays,
   useCalendarConstraints,
-  useCalendarRovingTabindex,
   type CalendarDay,
 } from './hooks';
 import {
@@ -46,7 +45,6 @@ import {
   plainDateFromISO,
   plainDateToISO,
   plainDateToDate,
-  plainDateFromDate,
   plainDateToday,
   plainDateSetFirstOfMonth,
   plainDateAddMonths,
@@ -70,8 +68,19 @@ import {
 // Types
 // =============================================================================
 
-export type {ISODateString, DayOfWeek, DateRange} from '../utils/dateTypes';
-import type {ISODateString, DayOfWeek, DateRange} from '../utils/dateTypes';
+export type {
+  ISODateString,
+  DayOfWeek,
+  DayOfWeekName,
+  DateRange,
+} from '../utils/dateTypes';
+import type {
+  ISODateString,
+  DayOfWeek,
+  DayOfWeekName,
+  DateRange,
+} from '../utils/dateTypes';
+import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {themeProps} from '../utils/themeProps';
 
 /** Imperative handle for Calendar handleRef */
@@ -134,10 +143,11 @@ interface CalendarBaseProps extends Omit<
   hasVariableRowCount?: boolean;
 
   /**
-   * First day of week.
+   * First day of week. Accepts a number (0 = Sunday … 6 = Saturday) or a
+   * three-letter day name ('sun'–'sat', case-insensitive) for readability.
    * Default: 0 (Sunday)
    */
-  weekStartsOn?: DayOfWeek;
+  weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 
 // ─── Mode-specific Props (discriminated union) ────────────────
@@ -200,13 +210,17 @@ export function Calendar({ref, ...props}: CalendarProps) {
     hasOutsideDays = true,
     hasWeekNumbers = false,
     hasVariableRowCount = false,
-    weekStartsOn = 0,
+    weekStartsOn: weekStartsOnProp = 0,
     xstyle,
     className,
     style,
     ...rest
   } = props;
 
+  // Normalize `weekStartsOn` (number or three-letter day name) to a numeric
+  // DayOfWeek so all downstream date math keeps working with an index.
+  const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
+
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 
@@ -539,33 +553,52 @@ function MonthGrid({
     return null;
   }, [mode, value]);
 
-  const {isTabbable} = useCalendarRovingTabindex({
-    days,
-    today,
-    year,
-    month: month.month,
-    isDateDisabled,
-    selectedDate: selectedDateForTabindex,
-  });
+  // Seed the initial roving tab stop for this month. useGridFocus owns the
+  // live tab stop (see `hasRovingTabIndex` below) — it honors an existing
+  // `tabindex="0"` and repairs/moves it thereafter — so this only decides
+  // which day button starts tabbable. Priority: selected date (if visible and
+  // enabled) > today (if visible and enabled) > first enabled in-month day.
+  const seedTabbableIso = useMemo((): ISODateString | null => {
+    if (selectedDateForTabindex) {
+      const isSelectedInMonth =
+        selectedDateForTabindex.year === year &&
+        selectedDateForTabindex.month === month.month;
+      if (isSelectedInMonth && !isDateDisabled(selectedDateForTabindex)) {
+        return plainDateToISO(selectedDateForTabindex);
+      }
+    }
+
+    const isTodayInMonth = today.year === year && today.month === month.month;
+    if (isTodayInMonth && !isDateDisabled(today)) {
+      return plainDateToISO(today);
+    }
 
-  // Helper to get the focused date from the currently focused element
+    for (const day of days) {
+      if (!day.isOutside && !isDateDisabled(day.date)) {
+        return day.iso;
+      }
+    }
+
+    return null;
+  }, [days, today, year, month.month, isDateDisabled, selectedDateForTabindex]);
+
+  // Helper to get the focused date from the currently focused element.
+  // Reads the machine-readable `data-date` (ISO) attribute rather than parsing
+  // the human-readable `aria-label` with `new Date()`, which is locale/format
+  // dependent and returns Invalid Date in non-English locales (e.g. fr-FR,
+  // ja-JP), silently swallowing month-boundary arrow navigation (complex-4).
   const getFocusedDate = useCallback((): ISODateString | null => {
     const activeElement = document.activeElement as HTMLElement | null;
     if (!activeElement) {
       return null;
     }
 
-    const ariaLabel = activeElement.getAttribute('aria-label');
-    if (!ariaLabel) {
+    const iso = activeElement.getAttribute('data-date');
+    if (!iso) {
       return null;
     }
 
-    const parsed = new Date(ariaLabel);
-    if (isNaN(parsed.getTime())) {
-      return null;
-    }
-
-    return plainDateToISO(plainDateFromDate(parsed));
+    return iso as ISODateString;
   }, []);
 
   // Handle navigation to previous month
@@ -605,16 +638,31 @@ function MonthGrid({
     }
   }, [getFocusedDate, onNavigateNext]);
 
-  // Grid focus navigation
-  const {gridRef, handleKeyDown: handleGridKeyDown} =
-    useGridFocus<HTMLDivElement>({
-      columns: 7,
-      cellSelector: 'button:not([disabled])',
-      onNavigateBefore: handleNavigatePrevious,
-      onNavigateAfter: handleNavigateNext,
-      onPageUp: handlePageUp,
-      onPageDown: handlePageDown,
-    });
+  // Grid focus navigation.
+  //
+  // The hook enumerates ALL grid cells (every `role="gridcell"`, including
+  // disabled days and empty placeholder cells) so the true 7-column geometry is
+  // preserved. `isCellFocusable` / `getFocusTarget` tell the hook which cells
+  // can take focus (those containing an enabled day button) and where to send
+  // focus (the day button inside the cell). Arrow keys move to the target
+  // row/column and, if that cell is disabled, continue in the same direction to
+  // the next enabled cell.
+  const {
+    gridRef,
+    handleKeyDown: handleGridKeyDown,
+    handleFocus: handleGridFocus,
+  } = useGridFocus<HTMLDivElement>({
+    columns: 7,
+    cellSelector: '[role="gridcell"]',
+    isCellFocusable: cell =>
+      cell.querySelector('button:not([disabled])') !== null,
+    getFocusTarget: cell => cell.querySelector<HTMLElement>('button'),
+    hasRovingTabIndex: true,
+    onNavigateBefore: handleNavigatePrevious,
+    onNavigateAfter: handleNavigateNext,
+    onPageUp: handlePageUp,
+    onPageDown: handlePageDown,
+  });
 
   // Handle pending focus after month navigation
   useEffect(() => {
@@ -627,11 +675,11 @@ function MonthGrid({
     );
 
     const targetPd = plainDateFromISO(pendingFocus);
-    const targetLabel = plainDateFormat(targetPd, DATE_FORMAT_WITH_WEEKDAY);
+    const targetIso = plainDateToISO(targetPd);
 
     let targetButton: HTMLElement | null = null;
     for (const button of buttons) {
-      if (button.getAttribute('aria-label') === targetLabel) {
+      if (button.getAttribute('data-date') === targetIso) {
         targetButton = button;
         break;
       }
@@ -688,40 +736,38 @@ function MonthGrid({
 
   return (
     <div {...stylex.props(monthGridStyles.monthGrid)}>
-      {/* Day names header */}
-      <div
-        {...stylex.props(
-          monthGridStyles.weekHeader,
-          hasWeekNumbers && monthGridStyles.weekHeaderWithNumbers,
-        )}>
-        {hasWeekNumbers && (
-          <div
-            {...stylex.props(
-              monthGridStyles.dayName,
-              monthGridStyles.weekNumberHeader,
-            )}
-          />
-        )}
-        {dayNames.map(name => (
-          <div
-            key={name}
-            role="columnheader"
-            {...stylex.props(monthGridStyles.dayName)}>
-            {name}
-          </div>
-        ))}
-      </div>
-
-      {/* Days grid */}
+      {/* Days grid (APG grid: header row of columnheaders + week rows) */}
       <div
         ref={gridRef}
         role="grid"
         aria-label={monthLabel}
         onKeyDown={handleGridKeyDown}
+        onFocus={handleGridFocus}
         {...stylex.props(
           monthGridStyles.daysGrid,
           hasWeekNumbers && monthGridStyles.daysGridWithNumbers,
         )}>
+        {/* Day names header row (columnheaders live inside the grid). Uses the
+            same display:contents row so its cells align to the grid columns. */}
+        <div role="row" {...stylex.props(monthGridStyles.weekRow)}>
+          {hasWeekNumbers && (
+            <div
+              {...stylex.props(
+                monthGridStyles.dayName,
+                monthGridStyles.weekNumberHeader,
+              )}
+            />
+          )}
+          {dayNames.map(name => (
+            <div
+              key={name}
+              role="columnheader"
+              {...stylex.props(monthGridStyles.dayName)}>
+              {name}
+            </div>
+          ))}
+        </div>
+
         {weeks.map(week => {
           const weekDate = week.find(d => !d.isOutside)?.date || week[0].date;
           const weekNum = plainDateGetWeekNumber(weekDate);
@@ -732,7 +778,9 @@ function MonthGrid({
               role="row"
               {...stylex.props(monthGridStyles.weekRow)}>
               {hasWeekNumbers && (
-                <div {...stylex.props(monthGridStyles.weekNumber)}>
+                <div
+                  role="rowheader"
+                  {...stylex.props(monthGridStyles.weekNumber)}>
                   {weekNum}
                 </div>
               )}
@@ -750,7 +798,7 @@ function MonthGrid({
                   today={today}
                   hasOutsideDays={hasOutsideDays}
                   isDisabled={isDateDisabled(day.date)}
-                  isTabbable={isTabbable(day.iso)}
+                  isTabbable={day.iso === seedTabbableIso}
                   onDayClick={onDayClick}
                   onDayHover={onDayHover}
                 />
@@ -779,6 +827,11 @@ interface DayCellProps {
   today: PlainDate;
   hasOutsideDays: boolean;
   isDisabled: boolean;
+  /**
+   * Whether this day seeds the initial roving tab stop. useGridFocus
+   * (`hasRovingTabIndex`) owns the live tab stop thereafter — it honors an
+   * existing `tabindex="0"` and repairs/moves it on navigation and focus.
+   */
   isTabbable: boolean;
   onDayClick: (date: PlainDate) => void;
   onDayHover: (date: PlainDate | null) => void;
@@ -803,7 +856,9 @@ function DayCell({
   const {date, isOutside, dayNumber} = day;
 
   if (isOutside && !hasOutsideDays) {
-    return <div {...stylex.props(dayCellStyles.cell)} />;
+    // Empty placeholder cell — still a gridcell so the grid geometry stays a
+    // clean 7-per-row set for keyboard navigation.
+    return <div role="gridcell" {...stylex.props(dayCellStyles.cell)} />;
   }
 
   const state = computeDayCellState({
@@ -825,7 +880,7 @@ function DayCell({
   const previewRounding = computePreviewRounding(state);
 
   return (
-    <div {...stylex.props(dayCellStyles.cell)}>
+    <div role="gridcell" {...stylex.props(dayCellStyles.cell)}>
       {/* Range background */}
       {state.isInRange && (
         <div
@@ -863,12 +918,12 @@ function DayCell({
       {/* Day button */}
       <button
         type="button"
-        role="gridcell"
         data-date={day.iso}
         aria-label={plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)}
         aria-selected={state.isSelected || state.isInRange || undefined}
         aria-disabled={state.effectivelyDisabled || undefined}
         disabled={isDisabled}
+        // Initial roving tab-stop seed; useGridFocus owns it after mount.
         tabIndex={isTabbableDay ? 0 : -1}
         onClick={() => !state.effectivelyDisabled && onDayClick(date)}
         onMouseEnter={() => !state.effectivelyDisabled && onDayHover(date)}

package/src/Calendar/hooks/index.ts

@@ -27,9 +27,3 @@ export type {
   UseCalendarNavigationOptions,
   UseCalendarNavigationReturn,
 } from './useCalendarNavigation';
-
-export {useCalendarRovingTabindex} from './useCalendarRovingTabindex';
-export type {
-  UseCalendarRovingTabindexOptions,
-  UseCalendarRovingTabindexReturn,
-} from './useCalendarRovingTabindex';

package/src/Calendar/index.ts

@@ -17,6 +17,7 @@ export type {
   CalendarHandle,
   ISODateString,
   DayOfWeek,
+  DayOfWeekName,
   DateRange,
 } from './Calendar';
 
@@ -25,7 +26,6 @@ export {
   useCalendarDays,
   useCalendarConstraints,
   useCalendarNavigation,
-  useCalendarRovingTabindex,
 } from './hooks';
 export type {
   CalendarDay,
@@ -35,8 +35,6 @@ export type {
   UseCalendarConstraintsReturn,
   UseCalendarNavigationOptions,
   UseCalendarNavigationReturn,
-  UseCalendarRovingTabindexOptions,
-  UseCalendarRovingTabindexReturn,
 } from './hooks';
 
 // Re-export calendar-specific utilities for advanced usage

package/src/Calendar/styles.ts

@@ -78,17 +78,12 @@ export const monthGridStyles = stylex.create({
   monthGrid: {
     flex: '1 1 0',
   },
-  weekHeader: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
-    marginBottom: spacingVars['--spacing-1'],
-  },
-  weekHeaderWithNumbers: {
-    gridTemplateColumns: 'auto repeat(7, 1fr)',
-  },
   dayName: {
     width: sizeVars['--size-element-md'],
-    height: sizeVars['--size-element-md'],
+    // Restores the small gap the standalone header used to have below it.
+    height: `calc(${sizeVars['--size-element-md']} + ${spacingVars['--spacing-1']})`,
+    paddingBottom: spacingVars['--spacing-1'],
+    boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',