@astryxdesign/core 0.1.2 → 0.1.3-canary.102854d

package/dist/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC5E,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAG5E,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAwRtD;yBAxRe,QAAQ"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAI5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA4RtD;yBA5Re,QAAQ"}

package/dist/Calendar/Calendar.js

@@ -21,16 +21,17 @@ import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { useGridFocus } from "../hooks/index.js";
-import { useCalendarDays, useCalendarConstraints, useCalendarRovingTabindex } from "./hooks/index.js";
+import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
 import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
-import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
+import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
 import { mergeProps } from "../utils/index.js";
-import { computeDayCellState, computeRangeRounding, computePreviewRounding, isEndpoint } from "./dayCellUtils.js";
+import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
 
 // =============================================================================
 // Types
 // =============================================================================
 
+import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { themeProps } from "../utils/themeProps.js";
 
 /** Imperative handle for Calendar handleRef */
@@ -70,13 +71,17 @@ export function Calendar({
     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(), []);
 
@@ -345,32 +350,46 @@ function MonthGrid({
     }
     return null;
   }, [mode, value]);
-  const {
-    isTabbable
-  } = useCalendarRovingTabindex({
-    days,
-    today,
-    year,
-    month: month.month,
-    isDateDisabled,
-    selectedDate: selectedDateForTabindex
-  });
 
-  // Helper to get the focused date from the currently focused element
+  // 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(() => {
+    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);
+    }
+    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(() => {
     const activeElement = document.activeElement;
     if (!activeElement) {
       return null;
     }
-    const ariaLabel = activeElement.getAttribute('aria-label');
-    if (!ariaLabel) {
-      return null;
-    }
-    const parsed = new Date(ariaLabel);
-    if (isNaN(parsed.getTime())) {
+    const iso = activeElement.getAttribute('data-date');
+    if (!iso) {
       return null;
     }
-    return plainDateToISO(plainDateFromDate(parsed));
+    return iso;
   }, []);
 
   // Handle navigation to previous month
@@ -403,13 +422,25 @@ function MonthGrid({
     }
   }, [getFocusedDate, onNavigateNext]);
 
-  // Grid focus navigation
+  // 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
+    handleKeyDown: handleGridKeyDown,
+    handleFocus: handleGridFocus
   } = useGridFocus({
     columns: 7,
-    cellSelector: 'button:not([disabled])',
+    cellSelector: '[role="gridcell"]',
+    isCellFocusable: cell => cell.querySelector('button:not([disabled])') !== null,
+    getFocusTarget: cell => cell.querySelector('button'),
+    hasRovingTabIndex: true,
     onNavigateBefore: handleNavigatePrevious,
     onNavigateAfter: handleNavigateNext,
     onPageUp: handlePageUp,
@@ -423,10 +454,10 @@ function MonthGrid({
     }
     const buttons = gridRef.current.querySelectorAll('button:not([disabled])');
     const targetPd = plainDateFromISO(pendingFocus);
-    const targetLabel = plainDateFormat(targetPd, DATE_FORMAT_WITH_WEEKDAY);
+    const targetIso = plainDateToISO(targetPd);
     let targetButton = null;
     for (const button of buttons) {
-      if (button.getAttribute('aria-label') === targetLabel) {
+      if (button.getAttribute('data-date') === targetIso) {
         targetButton = button;
         break;
       }
@@ -477,51 +508,71 @@ function MonthGrid({
   const monthLabel = useMemo(() => {
     return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR);
   }, [month]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     ...stylex.props(monthGridStyles.monthGrid),
-    children: [/*#__PURE__*/_jsxs("div", {
-      ...stylex.props(monthGridStyles.weekHeader, hasWeekNumbers && monthGridStyles.weekHeaderWithNumbers),
-      children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
-        ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
-      }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
-        role: "columnheader",
-        ...stylex.props(monthGridStyles.dayName),
-        children: name
-      }, name))]
-    }), /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       ref: gridRef,
       role: "grid",
       "aria-label": monthLabel,
       onKeyDown: handleGridKeyDown,
+      onFocus: handleGridFocus,
       ...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
-      children: weeks.map(week => {
+      children: [/*#__PURE__*/_jsxs("div", {
+        role: "row",
+        ...stylex.props(monthGridStyles.weekRow),
+        children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+          ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
+        }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
+          role: "columnheader",
+          ...stylex.props(monthGridStyles.dayName),
+          children: name
+        }, name))]
+      }), weeks.map(week => {
         const weekDate = week.find(d => !d.isOutside)?.date || week[0].date;
         const weekNum = plainDateGetWeekNumber(weekDate);
         return /*#__PURE__*/_jsxs("div", {
           role: "row",
           ...stylex.props(monthGridStyles.weekRow),
           children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+            role: "rowheader",
             ...stylex.props(monthGridStyles.weekNumber),
             children: weekNum
-          }), week.map((day, dayIndex) => /*#__PURE__*/_jsx(DayCell, {
-            day: day,
-            dayIndex: dayIndex,
-            mode: mode,
-            selectedDate: selectedDate,
-            rangeStart: rangeStart,
-            rangeEnd: rangeEnd,
-            previewStart: previewStart,
-            previewEnd: previewEnd,
-            today: today,
-            hasOutsideDays: hasOutsideDays,
-            isDisabled: isDateDisabled(day.date),
-            isTabbable: isTabbable(day.iso),
-            onDayClick: onDayClick,
-            onDayHover: onDayHover
-          }, day.iso))]
+          }), week.map((day, dayIndex) => {
+            // Whether the previous/next day in this week row continues the
+            // highlighted run (range and preview). A disabled or
+            // adjacent-month neighbour breaks continuity, so this day gets
+            // an end cap on that side (#2715).
+            const neighbors = computeDayNeighborContinuity({
+              week,
+              dayIndex,
+              mode,
+              rangeStart,
+              rangeEnd,
+              previewStart,
+              previewEnd,
+              isDisabled: isDateDisabled
+            });
+            return /*#__PURE__*/_jsx(DayCell, {
+              day: day,
+              dayIndex: dayIndex,
+              mode: mode,
+              selectedDate: selectedDate,
+              rangeStart: rangeStart,
+              rangeEnd: rangeEnd,
+              previewStart: previewStart,
+              previewEnd: previewEnd,
+              today: today,
+              hasOutsideDays: hasOutsideDays,
+              isDisabled: isDateDisabled(day.date),
+              neighbors: neighbors,
+              isTabbable: day.iso === seedTabbableIso,
+              onDayClick: onDayClick,
+              onDayHover: onDayHover
+            }, day.iso);
+          })]
         }, plainDateToISO(weekDate));
-      })
-    })]
+      })]
+    })
   });
 }
 
@@ -541,6 +592,7 @@ function DayCell({
   today,
   hasOutsideDays,
   isDisabled,
+  neighbors,
   isTabbable: isTabbableDay,
   onDayClick,
   onDayHover
@@ -551,7 +603,10 @@ function DayCell({
     dayNumber
   } = day;
   if (isOutside && !hasOutsideDays) {
+    // Empty placeholder cell — still a gridcell so the grid geometry stays a
+    // clean 7-per-row set for keyboard navigation.
     return /*#__PURE__*/_jsx("div", {
+      role: "gridcell",
       ...stylex.props(dayCellStyles.cell)
     });
   }
@@ -569,9 +624,16 @@ function DayCell({
     isOutside
   });
   const endpoint = isEndpoint(state);
-  const rangeRounding = computeRangeRounding(state);
-  const previewRounding = computePreviewRounding(state);
+  const rangeRounding = computeRangeRounding(state, {
+    prevInRange: neighbors.prevInRange,
+    nextInRange: neighbors.nextInRange
+  });
+  const previewRounding = computePreviewRounding(state, {
+    prevInPreview: neighbors.prevInPreview,
+    nextInPreview: neighbors.nextInPreview
+  });
   return /*#__PURE__*/_jsxs("div", {
+    role: "gridcell",
     ...stylex.props(dayCellStyles.cell),
     children: [state.isInRange && /*#__PURE__*/_jsx("div", {
       ...stylex.props(dayCellStyles.rangeBg, dayCellTheme.rangeBg, rangeRounding.roundLeft && dayCellStyles.rangeBgRadiusLeft, rangeRounding.roundRight && dayCellStyles.rangeBgRadiusRight, state.isRangeStart && dayCellStyles.rangeInsetLeft, state.isRangeStart && rangeRounding.roundRight && dayCellStyles.rangeInsetRight, state.isRangeEnd && dayCellStyles.rangeInsetRight, state.isRangeStart && rangeRounding.roundLeft && dayCellStyles.rangeInsetLeft)
@@ -579,12 +641,13 @@ function DayCell({
       ...stylex.props(dayCellStyles.previewBg, dayCellTheme.previewBg, previewRounding.roundLeft && dayCellStyles.previewBgRadiusLeft, previewRounding.roundRight && dayCellStyles.previewBgRadiusRight, state.isPreviewStart && dayCellStyles.previewStart, state.isPreviewEnd && dayCellStyles.previewEnd)
     }), /*#__PURE__*/_jsx("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,
+      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/dist/Calendar/dayCellUtils.d.ts

@@ -25,18 +25,80 @@ export interface DayCellStateInput {
     isDisabled: boolean;
     isOutside: boolean;
 }
-/** Derives all visual/interaction states for a single day cell. */
+/**
+ * Derives all visual/interaction states for a single day cell.
+ *
+ * Outside (adjacent-month) days never receive selection, range, or preview
+ * state: in the two-month layout the same date renders in both panes, and
+ * highlighting the spillover copy would duplicate the selection onto the wrong
+ * month's pane (#2715).
+ */
 export declare function computeDayCellState(input: DayCellStateInput): DayCellState;
-/** Edge rounding for range background (rounds at grid edges and range endpoints). */
-export declare function computeRangeRounding(state: DayCellState): {
+/** Rounding for the committed range background. */
+export declare function computeRangeRounding(state: DayCellState, neighbors?: {
+    prevInRange?: boolean;
+    nextInRange?: boolean;
+}): {
     roundLeft: boolean;
     roundRight: boolean;
 };
-/** Edge rounding for preview background. */
-export declare function computePreviewRounding(state: DayCellState): {
+/** Rounding for the hover-preview background. */
+export declare function computePreviewRounding(state: DayCellState, neighbors?: {
+    prevInPreview?: boolean;
+    nextInPreview?: boolean;
+}): {
     roundLeft: boolean;
     roundRight: boolean;
 };
 /** Whether a day is a selection endpoint (selected, range start, or range end). */
 export declare function isEndpoint(state: DayCellState): boolean;
+/** Whether a day participates in the continuous committed-range highlight. */
+export declare function isRangeHighlighted(input: {
+    date: PlainDate;
+    mode: 'single' | 'range';
+    rangeStart: PlainDate | null;
+    rangeEnd: PlainDate | null;
+    isDisabled: boolean;
+    isOutside: boolean;
+}): boolean;
+/** Whether a day participates in the continuous hover-preview highlight. */
+export declare function isPreviewHighlighted(input: {
+    date: PlainDate;
+    previewStart: PlainDate | null;
+    previewEnd: PlainDate | null;
+    isDisabled: boolean;
+    isOutside: boolean;
+}): boolean;
+/**
+ * Continuity of the highlighted run through a day's immediate neighbours in the
+ * same week row, for both the committed range and the hover preview. A day gets
+ * an end cap on whichever side its neighbour does not continue the run (see
+ * {@link computeRangeRounding} / {@link computePreviewRounding}).
+ */
+export interface DayNeighborContinuity {
+    prevInRange: boolean;
+    nextInRange: boolean;
+    prevInPreview: boolean;
+    nextInPreview: boolean;
+}
+/** Minimal shape needed from a week's day cells to derive neighbour continuity. */
+export interface NeighborDay {
+    date: PlainDate;
+    isOutside: boolean;
+}
+/**
+ * Derives whether the previous/next day in the same week row continues the
+ * highlighted run, for both range and preview. Broken out from the render path
+ * so the neighbour logic is unit-testable in isolation.
+ */
+export declare function computeDayNeighborContinuity(input: {
+    week: ReadonlyArray<NeighborDay>;
+    dayIndex: number;
+    mode: 'single' | 'range';
+    rangeStart: PlainDate | null;
+    rangeEnd: PlainDate | null;
+    previewStart: PlainDate | null;
+    previewEnd: PlainDate | null;
+    isDisabled: (date: PlainDate) => boolean;
+}): DayNeighborContinuity;
 //# sourceMappingURL=dayCellUtils.d.ts.map

package/dist/Calendar/dayCellUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dayCellUtils.d.ts","sourceRoot":"","sources":["../../src/Calendar/dayCellUtils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,MAAM,WAAW,YAAY;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,mEAAmE;AACnE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAiD1E;AAED,qFAAqF;AACrF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,YAAY;;;EAKvD;AAED,4CAA4C;AAC5C,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,YAAY;;;EAKzD;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAEvD"}
+{"version":3,"file":"dayCellUtils.d.ts","sourceRoot":"","sources":["../../src/Calendar/dayCellUtils.ts"],"names":[],"mappings":"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"}

package/dist/Calendar/dayCellUtils.js

@@ -1,7 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import { plainDateIsEqual, plainDateIsInRange } from "../utils/plainDate.js";
-/** Derives all visual/interaction states for a single day cell. */
+/**
+ * Derives all visual/interaction states for a single day cell.
+ *
+ * Outside (adjacent-month) days never receive selection, range, or preview
+ * state: in the two-month layout the same date renders in both panes, and
+ * highlighting the spillover copy would duplicate the selection onto the wrong
+ * month's pane (#2715).
+ */
 export function computeDayCellState(input) {
   const {
     date,
@@ -19,35 +26,149 @@ export function computeDayCellState(input) {
   return {
     effectivelyDisabled: isDisabled || isOutside,
     isToday: plainDateIsEqual(date, today),
-    isSelected: !!(mode === 'single' && selectedDate && plainDateIsEqual(date, selectedDate)),
-    isInRange: !!(mode === 'range' && rangeStart && rangeEnd && plainDateIsInRange(date, [rangeStart, rangeEnd])),
-    isRangeStart: !!(mode === 'range' && rangeStart && plainDateIsEqual(date, rangeStart)),
-    isRangeEnd: !!(mode === 'range' && rangeEnd && plainDateIsEqual(date, rangeEnd)),
-    isInPreview: !!(previewStart && previewEnd && plainDateIsInRange(date, [previewStart, previewEnd])),
-    isPreviewStart: !!(previewStart && plainDateIsEqual(date, previewStart)),
-    isPreviewEnd: !!(previewEnd && plainDateIsEqual(date, previewEnd)),
+    isSelected: !!(!isOutside && mode === 'single' && selectedDate && plainDateIsEqual(date, selectedDate)),
+    isInRange: !!(!isOutside && mode === 'range' && rangeStart && rangeEnd && plainDateIsInRange(date, [rangeStart, rangeEnd])),
+    isRangeStart: !!(!isOutside && mode === 'range' && rangeStart && plainDateIsEqual(date, rangeStart)),
+    isRangeEnd: !!(!isOutside && mode === 'range' && rangeEnd && plainDateIsEqual(date, rangeEnd)),
+    isInPreview: !!(!isOutside && previewStart && previewEnd && plainDateIsInRange(date, [previewStart, previewEnd])),
+    isPreviewStart: !!(!isOutside && previewStart && plainDateIsEqual(date, previewStart)),
+    isPreviewEnd: !!(!isOutside && previewEnd && plainDateIsEqual(date, previewEnd)),
     isFirstColumn: dayIndex === 0,
     isLastColumn: dayIndex === 6
   };
 }
 
-/** Edge rounding for range background (rounds at grid edges and range endpoints). */
-export function computeRangeRounding(state) {
+/**
+ * Generic rounding for a highlight run (range or preview).
+ *
+ * Rounds at the run's endpoints and the grid row edges, and also caps the
+ * highlight where the run meets a break in continuity — a neighbouring cell
+ * that is disabled or an adjacent-month (outside) day (#2715).
+ */
+function computeHighlightRounding(input) {
+  const prevBreaks = input.prevContinues !== undefined ? !input.prevContinues : false;
+  const nextBreaks = input.nextContinues !== undefined ? !input.nextContinues : false;
   return {
-    roundLeft: state.isRangeStart || state.isFirstColumn,
-    roundRight: state.isRangeEnd || state.isLastColumn
+    roundLeft: input.isStart || input.isFirstColumn || prevBreaks,
+    roundRight: input.isEnd || input.isLastColumn || nextBreaks
   };
 }
 
-/** Edge rounding for preview background. */
-export function computePreviewRounding(state) {
-  return {
-    roundLeft: state.isPreviewStart || state.isFirstColumn,
-    roundRight: state.isPreviewEnd || state.isLastColumn
-  };
+/** Rounding for the committed range background. */
+export function computeRangeRounding(state, neighbors) {
+  return computeHighlightRounding({
+    isStart: state.isRangeStart,
+    isEnd: state.isRangeEnd,
+    isFirstColumn: state.isFirstColumn,
+    isLastColumn: state.isLastColumn,
+    prevContinues: neighbors?.prevInRange,
+    nextContinues: neighbors?.nextInRange
+  });
+}
+
+/** Rounding for the hover-preview background. */
+export function computePreviewRounding(state, neighbors) {
+  return computeHighlightRounding({
+    isStart: state.isPreviewStart,
+    isEnd: state.isPreviewEnd,
+    isFirstColumn: state.isFirstColumn,
+    isLastColumn: state.isLastColumn,
+    prevContinues: neighbors?.prevInPreview,
+    nextContinues: neighbors?.nextInPreview
+  });
 }
 
 /** Whether a day is a selection endpoint (selected, range start, or range end). */
 export function isEndpoint(state) {
   return state.isSelected || state.isRangeStart || state.isRangeEnd;
+}
+
+/**
+ * Whether a day is part of an unbroken highlight run (enabled, in-month, inside
+ * the given span). Outside and disabled days break the run, producing end caps.
+ */
+function isSpanHighlighted(input) {
+  const {
+    date,
+    spanStart,
+    spanEnd,
+    isDisabled,
+    isOutside
+  } = input;
+  return !!(!isOutside && !isDisabled && spanStart && spanEnd && plainDateIsInRange(date, [spanStart, spanEnd]));
+}
+
+/** Whether a day participates in the continuous committed-range highlight. */
+export function isRangeHighlighted(input) {
+  if (input.mode !== 'range') {
+    return false;
+  }
+  return isSpanHighlighted({
+    date: input.date,
+    spanStart: input.rangeStart,
+    spanEnd: input.rangeEnd,
+    isDisabled: input.isDisabled,
+    isOutside: input.isOutside
+  });
+}
+
+/** Whether a day participates in the continuous hover-preview highlight. */
+export function isPreviewHighlighted(input) {
+  return isSpanHighlighted({
+    date: input.date,
+    spanStart: input.previewStart,
+    spanEnd: input.previewEnd,
+    isDisabled: input.isDisabled,
+    isOutside: input.isOutside
+  });
+}
+
+/**
+ * Continuity of the highlighted run through a day's immediate neighbours in the
+ * same week row, for both the committed range and the hover preview. A day gets
+ * an end cap on whichever side its neighbour does not continue the run (see
+ * {@link computeRangeRounding} / {@link computePreviewRounding}).
+ */
+
+/** Minimal shape needed from a week's day cells to derive neighbour continuity. */
+
+/**
+ * Derives whether the previous/next day in the same week row continues the
+ * highlighted run, for both range and preview. Broken out from the render path
+ * so the neighbour logic is unit-testable in isolation.
+ */
+export function computeDayNeighborContinuity(input) {
+  const {
+    week,
+    dayIndex,
+    mode,
+    rangeStart,
+    rangeEnd,
+    previewStart,
+    previewEnd,
+    isDisabled
+  } = input;
+  const prev = week[dayIndex - 1];
+  const next = week[dayIndex + 1];
+  const rangeContinues = day => day != null && isRangeHighlighted({
+    date: day.date,
+    mode,
+    rangeStart,
+    rangeEnd,
+    isDisabled: isDisabled(day.date),
+    isOutside: day.isOutside
+  });
+  const previewContinues = day => day != null && isPreviewHighlighted({
+    date: day.date,
+    previewStart,
+    previewEnd,
+    isDisabled: isDisabled(day.date),
+    isOutside: day.isOutside
+  });
+  return {
+    prevInRange: rangeContinues(prev),
+    nextInRange: rangeContinues(next),
+    prevInPreview: previewContinues(prev),
+    nextInPreview: previewContinues(next)
+  };
 }

package/dist/Calendar/hooks/index.d.ts

@@ -12,6 +12,4 @@ export { useCalendarConstraints } from './useCalendarConstraints';
 export type { UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, } from './useCalendarConstraints';
 export { useCalendarNavigation } from './useCalendarNavigation';
 export type { UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './useCalendarNavigation';
-export { useCalendarRovingTabindex } from './useCalendarRovingTabindex';
-export type { UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './useCalendarRovingTabindex';
 //# sourceMappingURL=index.d.ts.map

package/dist/Calendar/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,YAAY,EACV,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC"}

package/dist/Calendar/hooks/index.js

@@ -11,5 +11,4 @@
 
 export { useCalendarDays } from "./useCalendarDays.js";
 export { useCalendarConstraints } from "./useCalendarConstraints.js";
-export { useCalendarNavigation } from "./useCalendarNavigation.js";
-export { useCalendarRovingTabindex } from "./useCalendarRovingTabindex.js";
+export { useCalendarNavigation } from "./useCalendarNavigation.js";

package/dist/Calendar/index.d.ts

@@ -7,8 +7,8 @@
  * SYNC: When modified, update this header and /packages/core/src/Calendar/Calendar.doc.mjs
  */
 export { Calendar } from './Calendar';
-export type { CalendarProps, CalendarHandle, ISODateString, DayOfWeek, DateRange, } from './Calendar';
-export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex, } from './hooks';
-export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './hooks';
+export type { CalendarProps, CalendarHandle, ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from './Calendar';
+export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, } from './hooks';
+export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './hooks';
 export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate, } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/Calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/dist/Calendar/index.js

@@ -12,7 +12,7 @@
  */
 export { Calendar } from "./Calendar.js";
 // Re-export hooks for advanced usage
-export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex } from "./hooks/index.js";
+export { useCalendarDays, useCalendarConstraints, useCalendarNavigation } from "./hooks/index.js";
 // Re-export calendar-specific utilities for advanced usage
 export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate } from "./utils.js";