@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/dist/Calendar/Calendar.js

@@ -25,7 +25,7 @@ import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
 import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.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
@@ -39,7 +39,7 @@ import { themeProps } from "../utils/themeProps.js";
 // ─── Base Props (shared across all modes) ─────────────────────
 
 // ─── Mode-specific Props (discriminated union) ────────────────
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 // =============================================================================
 // Main Component
 // =============================================================================
@@ -62,7 +62,7 @@ export function Calendar({
     value,
     defaultValue,
     onChange,
-    numberOfMonths = 1,
+    numberOfMonths: numberOfMonthsProp = 1,
     min,
     max,
     dateConstraints,
@@ -82,6 +82,11 @@ export function Calendar({
   // DayOfWeek so all downstream date math keeps working with an index.
   const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
 
+  // `numberOfMonths` is typed `1 | 2`; defensively clamp anything else that
+  // slips through at runtime to 1 so `Array.from({length})` can't render an
+  // absurd number of month grids (e.g. `numberOfMonths={1000}`).
+  const numberOfMonths = numberOfMonthsProp === 2 ? 2 : 1;
+
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 
@@ -234,44 +239,55 @@ export function Calendar({
       }
     }
   }, [mode, onChange, rangeSelectionStart]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('calendar', {
       mode
     }), stylex.props(calendarStyles.calendar, xstyle), className, style),
     onKeyDown: handleCalendarKeyDown,
     ...rest,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(calendarStyles.header),
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [/*#__PURE__*/_jsxDEV(Button, {
         label: "Previous month",
         variant: "ghost",
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: "chevronLeft",
-          size: "sm",
-          color: "inherit"
-        }),
+        icon:
+        /*#__PURE__*/
+        // Wrapper span (not Icon props): Icon's string mode clobbers
+        // caller classNames, so the RTL mirror must live on its own
+        // element.
+        _jsxDEV("span", {
+          ...stylex.props(calendarStyles.navIcon),
+          children: /*#__PURE__*/_jsxDEV(Icon, {
+            icon: "chevronLeft",
+            size: "sm",
+            color: "inherit"
+          }, void 0, false)
+        }, void 0, false),
         onClick: () => navigateMonth(-1),
         isDisabled: !canNavigatePrevious,
         isIconOnly: true
-      }), /*#__PURE__*/_jsx("span", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
         ...stylex.props(calendarStyles.monthYearLabel),
         children: monthYearLabel
-      }), /*#__PURE__*/_jsx(Button, {
+      }, void 0, false), /*#__PURE__*/_jsxDEV(Button, {
         label: "Next month",
         variant: "ghost",
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: "chevronRight",
-          size: "sm",
-          color: "inherit"
-        }),
+        icon: /*#__PURE__*/_jsxDEV("span", {
+          ...stylex.props(calendarStyles.navIcon),
+          children: /*#__PURE__*/_jsxDEV(Icon, {
+            icon: "chevronRight",
+            size: "sm",
+            color: "inherit"
+          }, void 0, false)
+        }, void 0, false),
         onClick: () => navigateMonth(1),
         isDisabled: !canNavigateNext,
         isIconOnly: true
-      })]
-    }), /*#__PURE__*/_jsx("div", {
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(calendarStyles.monthsContainer),
-      children: visibleMonths.map(month => /*#__PURE__*/_jsx(MonthGrid, {
+      children: visibleMonths.map(month => /*#__PURE__*/_jsxDEV(MonthGrid, {
         month: month,
         value: effectiveValue,
         mode: mode,
@@ -291,9 +307,9 @@ export function Calendar({
         onNavigateNext: (focusedDate, offset) => navigateMonth(1, focusedDate, offset),
         pendingFocus: pendingFocus,
         onPendingFocusHandled: () => setPendingFocus(null)
-      }, `${month.year}-${month.month}`))
-    })]
-  });
+      }, `${month.year}-${month.month}`, false))
+    }, void 0, false)]
+  }, void 0, true);
 }
 Calendar.displayName = 'Calendar';
 
@@ -508,55 +524,72 @@ function MonthGrid({
   const monthLabel = useMemo(() => {
     return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR);
   }, [month]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ...stylex.props(monthGridStyles.monthGrid),
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: gridRef,
       role: "grid",
       "aria-label": monthLabel,
       onKeyDown: handleGridKeyDown,
       onFocus: handleGridFocus,
       ...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         role: "row",
         ...stylex.props(monthGridStyles.weekRow),
-        children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+        children: [hasWeekNumbers && /*#__PURE__*/_jsxDEV("div", {
           ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
-        }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
+        }, void 0, false), dayNames.map(name => /*#__PURE__*/_jsxDEV("div", {
           role: "columnheader",
           ...stylex.props(monthGridStyles.dayName),
           children: name
-        }, name))]
-      }), weeks.map(week => {
+        }, name, false))]
+      }, void 0, true), weeks.map(week => {
         const weekDate = week.find(d => !d.isOutside)?.date || week[0].date;
         const weekNum = plainDateGetWeekNumber(weekDate);
-        return /*#__PURE__*/_jsxs("div", {
+        return /*#__PURE__*/_jsxDEV("div", {
           role: "row",
           ...stylex.props(monthGridStyles.weekRow),
-          children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+          children: [hasWeekNumbers && /*#__PURE__*/_jsxDEV("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: day.iso === seedTabbableIso,
-            onDayClick: onDayClick,
-            onDayHover: onDayHover
-          }, day.iso))]
-        }, plainDateToISO(weekDate));
+          }, void 0, false), 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__*/_jsxDEV(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, false);
+          })]
+        }, plainDateToISO(weekDate), true);
       })]
-    })
-  });
+    }, void 0, true)
+  }, void 0, false);
 }
 
 // =============================================================================
@@ -575,6 +608,7 @@ function DayCell({
   today,
   hasOutsideDays,
   isDisabled,
+  neighbors,
   isTabbable: isTabbableDay,
   onDayClick,
   onDayHover
@@ -587,10 +621,10 @@ function DayCell({
   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", {
+    return /*#__PURE__*/_jsxDEV("div", {
       role: "gridcell",
       ...stylex.props(dayCellStyles.cell)
-    });
+    }, void 0, false);
   }
   const state = computeDayCellState({
     date,
@@ -606,21 +640,31 @@ function DayCell({
     isOutside
   });
   const endpoint = isEndpoint(state);
-  const rangeRounding = computeRangeRounding(state);
-  const previewRounding = computePreviewRounding(state);
-  return /*#__PURE__*/_jsxs("div", {
+  const rangeRounding = computeRangeRounding(state, {
+    prevInRange: neighbors.prevInRange,
+    nextInRange: neighbors.nextInRange
+  });
+  const previewRounding = computePreviewRounding(state, {
+    prevInPreview: neighbors.prevInPreview,
+    nextInPreview: neighbors.nextInPreview
+  });
+  return /*#__PURE__*/_jsxDEV("div", {
     role: "gridcell",
+    "aria-selected": state.isSelected || state.isInRange || undefined,
     ...stylex.props(dayCellStyles.cell),
-    children: [state.isInRange && /*#__PURE__*/_jsx("div", {
+    children: [state.isInRange && /*#__PURE__*/_jsxDEV("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)
-    }), state.isInPreview && /*#__PURE__*/_jsx("div", {
+    }, void 0, false), state.isInPreview && /*#__PURE__*/_jsxDEV("div", {
       ...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", {
+    }, void 0, false), /*#__PURE__*/_jsxDEV("button", {
       type: "button",
       "data-date": day.iso,
       "aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
-      "aria-selected": state.isSelected || state.isInRange || undefined,
-      "aria-disabled": state.effectivelyDisabled || undefined,
+      "aria-disabled": state.effectivelyDisabled || undefined
+      // Mark today's cell programmatically (APG date-picker pattern), not just
+      // visually, so screen-reader users can identify the current date.
+      ,
+      "aria-current": state.isToday ? 'date' : undefined,
       disabled: isDisabled
       // Initial roving tab-stop seed; useGridFocus owns it after mount.
       ,
@@ -635,6 +679,6 @@ function DayCell({
         'in-range': state.isInRange ? 'in-range' : null
       }), stylex.props(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, state.isToday && !state.isSelected && !state.isInRange && dayCellStyles.dayToday, state.isToday && !state.isSelected && !state.isInRange && dayCellTheme.dayToday, state.isToday && !state.isSelected && state.isInRange && dayCellStyles.dayTodayInRange, state.isToday && !state.isSelected && state.isInRange && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
       children: dayNumber
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }

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/styles.d.ts

@@ -47,8 +47,8 @@ export declare const calendarStyles: Readonly<{
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
     }>;
     readonly navIcon: Readonly<{
-        readonly width: stylex.StyleXClassNameFor<"width", "16px">;
-        readonly height: stylex.StyleXClassNameFor<"height", "16px">;
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly transform: stylex.StyleXClassNameFor<"transform", "scaleX(-1)" | null>;
     }>;
 }>;
 export declare const monthGridStyles: Readonly<{

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}

package/dist/Calendar/styles.js

@@ -62,8 +62,8 @@ export const calendarStyles = {
     $$css: true
   },
   navIcon: {
-    kzqmXN: "x12xnipv",
-    kZKoxP: "x6b6gus",
+    k1xSpc: "x3nfvp2",
+    k3aq6I: "xgtlewx",
     $$css: true
   }
 };

package/dist/Card/Card.d.ts

@@ -21,8 +21,10 @@ import type { BaseProps } from '../BaseProps';
  * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
  *   Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
  *
- * All variants include a transparent border to prevent layout jitter
- * when switching variants. Themes can override borderWidth/borderColor.
+ * Only `default` draws a visible border. Its border width is subtracted from
+ * the padding so the total inset (border + padding) equals the padding token —
+ * keeping content geometry faithful to the spacing scale and identical to the
+ * borderless variants. Themes can override borderWidth/borderColor.
  */
 export type CardVariant = 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow';
 export type { SizeValue } from '../utils/types';

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAkFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwDX;yBArEe,IAAI"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAwFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA0DX;yBAvEe,IAAI"}