@astryxdesign/lab 0.7.9-canary.4e7823a → 0.7.9-canary.53fa237

package/blocks/CommentThreadShowcase.tsx

@@ -36,7 +36,7 @@ export default function CommentThreadShowcase() {
   });
 
   return (
-    <Card padding={0} width={340}>
+    <Card padding={0} width="100%" maxWidth={340}>
       <CommentThread
         comment={thread}
         currentUser={VIEWER}

package/dist/Chart/formatters.d.ts

@@ -1,10 +1,11 @@
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
-import type { Locale } from '@astryxdesign/core/i18n';
+import type { CalendarSystem, Locale } from '@astryxdesign/core/i18n';
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -25,11 +26,13 @@ export declare function currency(symbol?: string, locale?: Locale): (value: unkn
  */
 export declare function percent(value: unknown): string;
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function shortDate(value: unknown, locale?: Locale): string;
+export declare function shortDate(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function monthYear(value: unknown, locale?: Locale): string;
+export declare function monthYear(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 //# sourceMappingURL=formatters.d.ts.map

package/dist/Chart/formatters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE"}
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,cAAc,EAAE,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR"}

package/dist/Chart/formatters.js

@@ -2,11 +2,14 @@
 
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
 
+import { plainDateFormat, plainDateFromDate } from '@astryxdesign/core/utils';
+
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -74,31 +77,33 @@ export function percent(value) {
 }
 
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export function shortDate(value, locale = 'en') {
+export function shortDate(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     day: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }
 
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export function monthYear(value, locale = 'en') {
+export function monthYear(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     year: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }

package/dist/CircularProgress/CircularProgress.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file CircularProgress.tsx
  * @input Uses React (useId, refs, layout effects), stylex, SVG, Web
- *   Animations, color/spacing/duration/ease tokens
+ *   Animations, color/spacing/duration/ease tokens, and Spinner's rotor
+ *   (core internal/spinner-rotor) for the indeterminate ring
  * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -89,7 +90,8 @@ export interface CircularProgressProps extends BaseProps<HTMLDivElement> {
      */
     variant?: CircularProgressVariant;
     /**
-     * When true, renders an animated indeterminate progress indicator.
+     * When true, renders an animated indeterminate progress indicator: an arc
+     * that turns as Spinner's does.
      * Use when the progress amount is unknown (e.g. loading, processing).
      * The `value` and `hasValueLabel` props are ignored in this mode.
      * Respects `prefers-reduced-motion` by slowing the animation.

package/dist/CircularProgress/CircularProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAWtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmWD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAoB,EACpB,aAAqB,EACrB,gBAA0C,EAC1C,QAAQ,EACR,IAAW,EACX,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,qBAAqB,+BA+QvB;yBAjSe,gBAAgB"}
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../src/CircularProgress/CircularProgress.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAWtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACtE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2TD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAoB,EACpB,aAAqB,EACrB,gBAA0C,EAC1C,QAAQ,EACR,IAAW,EACX,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAqRvB;yBAvSe,gBAAgB"}

package/dist/CircularProgress/CircularProgress.js

@@ -5,7 +5,8 @@
 /**
  * @file CircularProgress.tsx
  * @input Uses React (useId, refs, layout effects), stylex, SVG, Web
- *   Animations, color/spacing/duration/ease tokens
+ *   Animations, color/spacing/duration/ease tokens, and Spinner's rotor
+ *   (core internal/spinner-rotor) for the indeterminate ring
  * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
  * @position Core implementation; consumed by index.ts
  *
@@ -19,6 +20,7 @@ import { useId, useLayoutEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, durationVars, easeVars, fontWeightVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { SPINNER_ARC_FRACTION, spinnerRotorStyles, syncRotationPhase } from '@astryxdesign/core/internal/spinner-rotor';
 import { mergeProps } from '@astryxdesign/core/utils';
 import { themeProps } from '@astryxdesign/core/utils';
 
@@ -52,16 +54,6 @@ const SIZE_CONFIG = {
     strokeWidth: 5
   }
 };
-// =============================================================================
-// Indeterminate animation
-// =============================================================================
-
-const indeterminateRotation = "xqng64z-B";
-
-// SVG dash percentages scale with the square viewport. A 300% gap exceeds every
-// ring circumference; shifting the 2% + 300% pattern by 302% closes the loop.
-const indeterminateDash = "x9ppb3p-B";
-
 // =============================================================================
 // Styles
 // =============================================================================
@@ -80,6 +72,15 @@ const styles = {
     kOIVth: "xzye2dw",
     $$css: true
   },
+  svg: {
+    k1xSpc: "x1lliihq",
+    k3aq6I: "x9tu13d",
+    $$css: true
+  },
+  svgIndeterminate: {
+    k1xSpc: "x1lliihq",
+    $$css: true
+  },
   track: {
     kDwRjp: "xbh8q5q",
     kjVXCG: "xpi25hw",
@@ -98,10 +99,6 @@ const styles = {
   fillIndeterminate: {
     kDwRjp: "xbh8q5q",
     kU5bRw: "x1owpc8m",
-    kKVMdj: "x16zax3f",
-    k44tkh: "xmg6eyc xnh0sag",
-    kyAemX: "x4hg4is",
-    ko0y90: "xa4qsjk",
     $$css: true
   }
 };
@@ -462,14 +459,8 @@ export function CircularProgress({
         width: diameter,
         height: diameter,
         viewBox: `0 0 ${diameter} ${diameter}`,
-        ...{
-          0: {
-            className: "x1lliihq x9tu13d"
-          },
-          1: {
-            className: "x1lliihq x1ka1v4i x1c74tu6 xy02sl2 x1esw782 xa4qsjk"
-          }
-        }[!!isIndeterminate << 0],
+        ref: isIndeterminate ? syncRotationPhase : undefined,
+        ...stylex.props(isIndeterminate ? styles.svgIndeterminate : styles.svg, isIndeterminate && spinnerRotorStyles.turn),
         children: [/*#__PURE__*/_jsx("circle", {
           ...mergeProps(themeProps('circular-progress-track'), stylex.props(styles.track, trackVariantStyles[trackVariant])),
           cx: center,
@@ -484,6 +475,11 @@ export function CircularProgress({
           cy: center,
           r: radius,
           strokeWidth: strokeWidth
+          // Spinner's arc: the same fraction of the ring, starting at 12
+          // o'clock.
+          ,
+          strokeDasharray: `${circumference * SPINNER_ARC_FRACTION} ${circumference * (1 - SPINNER_ARC_FRACTION)}`,
+          transform: `rotate(-90 ${center} ${center})`
         }) : null]
       }), isIndeterminate ? null :
       /*#__PURE__*/

package/dist/Schedule/DayView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayView.d.ts","sourceRoot":"","sources":["../../src/Schedule/DayView.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,2BAA2B,EAE3B,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AAoCjE,wBAAgB,qBAAqB,CAAC,EACpC,OAAW,EACX,OAAY,EACZ,UAAgB,EAChB,aAAa,GACd,GAAE,sBAA2B,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAgCpE"}
+{"version":3,"file":"DayView.d.ts","sourceRoot":"","sources":["../../src/Schedule/DayView.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,2BAA2B,EAE3B,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AAqCjE,wBAAgB,qBAAqB,CAAC,EACpC,OAAW,EACX,OAAY,EACZ,UAAgB,EAChB,aAAa,GACd,GAAE,sBAA2B,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAgCpE"}

package/dist/Schedule/DayView.js

@@ -11,7 +11,7 @@
 import { DATE_FORMAT_WITH_WEEKDAY, plainDateAddDays, plainDateFormat } from '@astryxdesign/core/utils';
 import { enumerateDates, getScheduleRangeFromDates } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
-import { ScheduleMonthTitle, ScheduleFrame } from "./shared.js";
+import { ScheduleMonthTitle, ScheduleFrame, useScheduleCalendar } from "./shared.js";
 import { TimeGridView } from "./TimeGridView.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -35,11 +35,14 @@ function ScheduleDayView({
   } = options;
   const rangeDate = date.toPlainDate();
   const days = enumerateDates(range.startDate, range.endDate);
-  const titleLabel = plainDateFormat(rangeDate, DATE_FORMAT_WITH_WEEKDAY, locale);
+  const calendar = useScheduleCalendar();
+  const titleLabel = plainDateFormat(rangeDate, {
+    ...DATE_FORMAT_WITH_WEEKDAY,
+    calendar
+  }, locale);
   return /*#__PURE__*/_jsx(ScheduleFrame, {
     title: /*#__PURE__*/_jsx(ScheduleMonthTitle, {
-      date: rangeDate,
-      timezoneID: timezoneID
+      date: rangeDate
     }),
     titleLabel: titleLabel,
     isLoading: isLoading,

package/dist/Schedule/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/Schedule/ListView.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA+ID,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EAAE,QAAY,GACnB,GAAE,uBAA4B,GAAG,YAAY,CAAC,uBAAuB,CAAC,CAmCtE"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/Schedule/ListView.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwID,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EAAE,QAAY,GACnB,GAAE,uBAA4B,GAAG,YAAY,CAAC,uBAAuB,CAAC,CAmCtE"}

package/dist/Schedule/ListView.js

@@ -13,7 +13,7 @@ import { plainDateAddDays, plainDateFromInstant, plainDateIsEqual, plainDateToIS
 import { Heading } from '@astryxdesign/core/Text';
 import { enumerateDates, eventOccursOnDate, getScheduleRangeFromDates, isDayEvent } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
-import { formatDayNumber, formatFullDate, formatWeekday, formatWeekTitle, isEventInPast, ListEventRow, ScheduleFrame, ScheduleRangeMonthTitle, styles } from "./shared.js";
+import { formatDayNumber, formatFullDate, formatWeekday, formatWeekTitle, isEventInPast, ListEventRow, ScheduleFrame, ScheduleRangeMonthTitle, styles, useScheduleCalendar } from "./shared.js";
 import { useCurrentTime } from "./useCurrentTime.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,11 +26,12 @@ function ScheduleListView(_props) {
     isLoading,
     headingLevel
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const days = enumerateDates(range.startDate, range.endDate);
   const currentTime = useCurrentTime();
   const currentPlainDate = plainDateFromInstant(currentTime, timezoneID);
   const endDate = plainDateAddDays(range.endDate, -1);
-  const titleLabel = formatWeekTitle(range.startDate, endDate, timezoneID, locale);
+  const titleLabel = formatWeekTitle(range.startDate, endDate, locale, calendar);
   const visibleDays = days.map(day => {
     const isCurrentDay = plainDateIsEqual(day, currentPlainDate);
     const isBaseDay = plainDateIsEqual(day, range.startDate);
@@ -45,8 +46,7 @@ function ScheduleListView(_props) {
   return /*#__PURE__*/_jsx(ScheduleFrame, {
     title: /*#__PURE__*/_jsx(ScheduleRangeMonthTitle, {
       start: range.startDate,
-      end: endDate,
-      timezoneID: timezoneID
+      end: endDate
     }),
     titleLabel: titleLabel,
     isLoading: isLoading,
@@ -61,7 +61,6 @@ function ScheduleListView(_props) {
         children: [/*#__PURE__*/_jsx(ListDayHeading, {
           day: day,
           isCurrentDay: isCurrentDay,
-          timezoneID: timezoneID,
           headingLevel: headingLevel
         }), /*#__PURE__*/_jsx("div", {
           ...stylex.props(styles.listEvents),
@@ -79,26 +78,26 @@ function ScheduleListView(_props) {
 function ListDayHeading({
   day,
   isCurrentDay,
-  timezoneID,
   headingLevel
 }) {
   const {
     locale
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   return /*#__PURE__*/_jsxs(Heading, {
     level: headingLevel,
     color: "secondary",
     display: "block",
-    "aria-label": formatFullDate(day, timezoneID, locale),
+    "aria-label": formatFullDate(day, locale, calendar),
     "aria-current": isCurrentDay ? 'date' : undefined,
     xstyle: styles.listDayHeading,
     children: [/*#__PURE__*/_jsx("span", {
       ...stylex.props(styles.listDayNumber, isCurrentDay && styles.listDayNumberCurrent),
       children: /*#__PURE__*/_jsx("span", {
         ...stylex.props(styles.listDayNumberText),
-        children: formatDayNumber(day, timezoneID, locale)
+        children: formatDayNumber(day, locale, calendar)
       })
-    }), formatWeekday(day, timezoneID, 'short', locale)]
+    }), formatWeekday(day, 'short', locale, calendar)]
   });
 }
 function renderListRows({

package/dist/Schedule/MonthlyView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthlyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/MonthlyView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmD7C,OAAO,KAAK,EACV,aAAa,EAEb,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD;AAolBD,wBAAgB,yBAAyB,CAAC,EACxC,YAAgB,EAChB,aAAa,GACd,GAAE,0BAA+B,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAmC5E"}
+{"version":3,"file":"MonthlyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/MonthlyView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAqD7C,OAAO,KAAK,EACV,aAAa,EAEb,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD;AA2lBD,wBAAgB,yBAAyB,CAAC,EACxC,YAAgB,EAChB,aAAa,GACd,GAAE,0BAA+B,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAmC5E"}

package/dist/Schedule/MonthlyView.js

@@ -21,7 +21,7 @@ import { Heading, Text } from '@astryxdesign/core/Text';
 import { enumerateDates, getScheduleRangeFromDates, isDayEvent } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
 import { getEventDateSpan, layoutMonthEvents, MONTH_VISIBLE_LEVELS } from "./monthLayout.js";
-import { formatDayNumber, formatEventAccessibilityLabel, formatEventTimeRange, formatFullDate, formatMonthTitle, formatWeekday, formatWeekRange, getEventCategory, isEventInPast, ListEventRow, MonthEventPill, ScheduleFrame, ScheduleMonthTitle, SchedulePopoverBody, styles } from "./shared.js";
+import { formatDayNumber, formatEventAccessibilityLabel, formatEventTimeRange, formatFullDate, formatWeekday, formatWeekRange, formatWeekTitle, getEventCategory, isEventInPast, ListEventRow, MonthEventPill, ScheduleFrame, SchedulePopoverBody, ScheduleRangeMonthTitle, styles, useScheduleCalendar } from "./shared.js";
 import { useCurrentTime } from "./useCurrentTime.js";
 import { useScheduleViewPopover } from "./useScheduleViewPopover.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
@@ -87,6 +87,7 @@ function ScheduleMonthlyView({
     isLoading,
     headingLevel
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const rangeDate = date.toPlainDate();
   const highlightedDate = focusDate.toPlainDate();
   const currentTime = useCurrentTime();
@@ -113,7 +114,11 @@ function ScheduleMonthlyView({
   // day's list named by its full date, or one event's content named by its
   // title.
   const dayByISO = new Map(days.map(day => [plainDateToISO(day), day]));
-  const monthTitle = formatMonthTitle(rangeDate, timezoneID, locale);
+  // The grid shows one Gregorian month, which can span two months of the
+  // calendar, so its title names both.
+  const monthStart = plainDateSetFirstOfMonth(rangeDate);
+  const monthEnd = plainDateAddDays(plainDateAddMonths(monthStart, 1), -1);
+  const monthTitle = formatWeekTitle(monthStart, monthEnd, locale, calendar);
   const tableRef = useRef(null);
   // Where each chip painted so far starts, so focus can land on that cell if
   // the chip goes away while its popover is open.
@@ -131,7 +136,7 @@ function ScheduleMonthlyView({
     }
     if (parsed.kind === 'day') {
       const day = dayByISO.get(parsed.dayISO);
-      return day == null ? monthTitle : formatFullDate(day, timezoneID, locale);
+      return day == null ? monthTitle : formatFullDate(day, locale, calendar);
     }
     return eventByID.get(parsed.eventID)?.title ?? monthTitle;
   },
@@ -163,7 +168,7 @@ function ScheduleMonthlyView({
   if (openDay != null) {
     const openDayISO = plainDateToISO(openDay);
     openContent = /*#__PURE__*/_jsx(SchedulePopoverBody, {
-      label: `${formatFullDate(openDay, timezoneID, locale)} events`,
+      label: `${formatFullDate(openDay, locale, calendar)} events`,
       children: /*#__PURE__*/_jsx(MonthDayEvents, {
         day: openDay,
         events: eventsByDay.get(openDayISO) ?? EMPTY_EVENTS,
@@ -179,9 +184,9 @@ function ScheduleMonthlyView({
     });
   }
   return /*#__PURE__*/_jsxs(ScheduleFrame, {
-    title: /*#__PURE__*/_jsx(ScheduleMonthTitle, {
-      date: rangeDate,
-      timezoneID: timezoneID
+    title: /*#__PURE__*/_jsx(ScheduleRangeMonthTitle, {
+      start: monthStart,
+      end: monthEnd
     }),
     titleLabel: monthTitle,
     isLoading: isLoading,
@@ -202,7 +207,7 @@ function ScheduleMonthlyView({
           children: "Week"
         }), days.slice(0, 7).map((day, index) => /*#__PURE__*/_jsx("div", {
           role: "columnheader",
-          "aria-label": formatWeekday(day, timezoneID, 'long', locale),
+          "aria-label": formatWeekday(day, 'long', locale, calendar),
           "aria-colindex": index + 2,
           ...stylex.props(styles.weekdayLabel),
           children: /*#__PURE__*/_jsx(Heading, {
@@ -210,7 +215,7 @@ function ScheduleMonthlyView({
             color: "secondary",
             display: "block",
             xstyle: styles.weekdayHeading,
-            children: formatWeekday(day, timezoneID, 'short', locale)
+            children: formatWeekday(day, 'short', locale, calendar)
           })
         }, plainDateToISO(day)))]
       }), /*#__PURE__*/_jsx("div", {
@@ -224,7 +229,7 @@ function ScheduleMonthlyView({
               role: "rowheader",
               "aria-colindex": 1,
               ...stylex.props(styles.visuallyHidden),
-              children: formatWeekRange(week[0], week[week.length - 1], timezoneID, locale)
+              children: formatWeekRange(week[0], week[week.length - 1], timezoneID, locale, calendar)
             }), week.map((day, dayIndex) => {
               const index = weekIndex * 7 + dayIndex;
               const isOutsideMonth = day.month !== rangeDate.month;
@@ -233,7 +238,7 @@ function ScheduleMonthlyView({
               const hiddenCount = overflowByDay.get(index);
               return /*#__PURE__*/_jsxs("div", {
                 role: "cell",
-                "aria-label": formatFullDate(day, timezoneID, locale),
+                "aria-label": formatFullDate(day, locale, calendar),
                 "aria-colindex": dayIndex + 2
                 // Focus lands here when the day's "+N more" goes away.
                 ,
@@ -248,7 +253,7 @@ function ScheduleMonthlyView({
                     color: "inherit",
                     weight: "medium",
                     hasTabularNumbers: true,
-                    children: formatDayNumber(day, timezoneID, locale)
+                    children: formatDayNumber(day, locale, calendar)
                   })
                 }), (chipsByDay.get(index) ?? EMPTY_CHIPS).map(chip => {
                   const key = chipKey(chip);
@@ -256,7 +261,7 @@ function ScheduleMonthlyView({
                     const startDay = days[chip.week * 7 + chip.columnStart];
                     return hasPopover && startDay != null ? /*#__PURE__*/_jsx("span", {
                       ...stylex.props(styles.visuallyHidden),
-                      children: formatMonthEventName(chip.event, `since ${formatFullDate(startDay, timezoneID, locale)}`, timezoneID, categories, locale)
+                      children: formatMonthEventName(chip.event, `since ${formatFullDate(startDay, locale, calendar)}`, timezoneID, categories, locale)
                     }, key) : null;
                   }
                   chipStartDay.set(key, dayISO);
@@ -275,7 +280,7 @@ function ScheduleMonthlyView({
                   }, event.id))
                 }), hiddenCount != null && /*#__PURE__*/_jsx("button", {
                   type: "button",
-                  "aria-label": `${hiddenCount} more ${hiddenCount === 1 ? 'event' : 'events'}, ${formatFullDate(day, timezoneID, locale)}`,
+                  "aria-label": `${hiddenCount} more ${hiddenCount === 1 ? 'event' : 'events'}, ${formatFullDate(day, locale, calendar)}`,
                   ...monthPopover.getTriggerProps(dayKey(dayISO),
                   // An event handed over from this day's list
                   // keeps "+N more" as its trigger while the
@@ -321,6 +326,7 @@ function MonthChip({
     timezoneID,
     locale
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const placement = [styles.monthChip(chip.columnEnd - chip.columnStart + 1, chip.level), isLastColumn && styles.monthChipInLastColumn];
   const pill = /*#__PURE__*/_jsx(MonthEventPill, {
     event: chip.event,
@@ -335,7 +341,7 @@ function MonthChip({
       children: pill
     });
   }
-  const name = formatMonthEventName(chip.event, formatEventDays(chip.event, timezoneID, locale), timezoneID, categories, locale);
+  const name = formatMonthEventName(chip.event, formatEventDays(chip.event, timezoneID, locale, calendar), timezoneID, categories, locale);
   if (renderPopover(chip.event) == null) {
     return /*#__PURE__*/_jsxs("div", {
       "data-schedule-month-chip": "",
@@ -375,8 +381,9 @@ function MonthDayEvents({
     timezoneID,
     locale
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const currentTime = useCurrentTime();
-  const fullDate = formatFullDate(day, timezoneID, locale);
+  const fullDate = formatFullDate(day, locale, calendar);
   return /*#__PURE__*/_jsxs("div", {
     ...stylex.props(styles.monthDayEvents),
     children: [/*#__PURE__*/_jsx(Text, {
@@ -416,9 +423,9 @@ function formatMonthEventName(event, dayLabel, timezoneID, categories, locale) {
 }
 
 /** The event's day, or its date range when it covers several days. */
-function formatEventDays(event, timezoneID, locale) {
+function formatEventDays(event, timezoneID, locale, calendar) {
   const [first, last] = getEventDateSpan(event, timezoneID);
-  return plainDateIsEqual(first, last) ? formatFullDate(first, timezoneID, locale) : formatWeekRange(first, last, timezoneID, locale);
+  return plainDateIsEqual(first, last) ? formatFullDate(first, locale, calendar) : formatWeekRange(first, last, timezoneID, locale, calendar);
 }
 function getWeeks(days) {
   const weeks = [];

package/dist/Schedule/TimeGridView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeGridView.d.ts","sourceRoot":"","sources":["../../src/Schedule/TimeGridView.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EASL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAMf,OAAO,EASL,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAmClC,OAAO,KAAK,EACV,aAAa,EAGd,MAAM,SAAS,CAAC;AAEjB,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,aAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD,+BA2kBA"}
+{"version":3,"file":"TimeGridView.d.ts","sourceRoot":"","sources":["../../src/Schedule/TimeGridView.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EASL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAOf,OAAO,EASL,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAoClC,OAAO,KAAK,EACV,aAAa,EAGd,MAAM,SAAS,CAAC;AAEjB,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,aAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD,+BAglBA"}