@astryxdesign/core 0.7.8 → 0.7.9-canary.07992bb

package/src/Calendar/hooks/useCalendarDays.ts

@@ -4,9 +4,11 @@
 
 /**
  * @file useCalendarDays.ts
- * @input Uses React useMemo, useLocale, PlainDate utilities, generated CLDR weekday data
- * @output Exports useCalendarDays hook for generating calendar day grids
- * @position Calendar-specific hook; used by Calendar
+ * @input Uses React useMemo, useLocale, PlainDate and calendar-system
+ *   utilities, generated CLDR weekday data
+ * @output Exports useCalendarDays, the day grid of one month of any calendar
+ *   system (Gregorian by default)
+ * @position Calendar-specific hook; used by Calendar and MonthScroller
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Calendar/hooks/index.ts
@@ -17,12 +19,17 @@ import type {DayOfWeek, ISODateString} from '../../utils/dateTypes';
 import {
   type PlainDate,
   plainDateToISO,
-  getDaysInMonth,
   plainDateDayOfWeek,
   plainDateAddDays,
 } from '../../utils/plainDate';
 import {useLocale} from '../../i18n';
 import {getWeekdayHeaderNames} from '../getWeekdayHeaderNames';
+import {
+  type CalendarSystem,
+  calendarDayOfMonth,
+  calendarMonthFromYearMonth,
+} from '../../utils/calendarSystem';
+import {resolveShownCalendar} from '../../i18n/useCalendarSystem';
 
 /**
  * Represents a single day in the calendar grid.
@@ -42,14 +49,27 @@ export interface CalendarDay {
  * Configuration for calendar days generation
  */
 export interface UseCalendarDaysOptions {
-  /** The year to generate days for */
+  /** The year to generate days for, in `calendar`'s numbering */
   year: number;
-  /** The month (1-based: 1 = January, 12 = December) */
+  /**
+   * The month's position in its year (1-based). In the Gregorian calendar,
+   * 1 is January and 12 is December. In other calendars it is numbered as
+   * `Temporal.PlainDate` numbers it: 1 through 13 in a Hebrew leap year.
+   */
   month: number;
   /** First day of week (0=Sunday through 6=Saturday) */
   weekStartsOn?: DayOfWeek;
   /** Use variable rows per month vs. fixed 6-row grid */
   hasVariableRowCount?: boolean;
+  /**
+   * The calendar system that numbers `year`, `month`, and each `dayNumber`.
+   * Each day keeps its Gregorian `date` and `iso`. The hook never reads the
+   * InternationalizationProvider calendar. Calendars other than gregory,
+   * iso8601, buddhist, roc, and japanese need Temporal; without it, the hook
+   * reads Gregorian numbers and warns once in development.
+   * @default 'gregory'
+   */
+  calendar?: CalendarSystem;
 }
 
 /**
@@ -80,71 +100,82 @@ export interface UseCalendarDaysReturn {
  *   weekStartsOn: 0, // Sunday
  * });
  * // days[i].date is a PlainDate { year, month (1-based), day }
+ *
+ * // Aban 1405 in the Persian calendar; dates stay Gregorian
+ * useCalendarDays({year: 1405, month: 8, calendar: 'persian'});
  * ```
  */
 export function useCalendarDays(
   options: UseCalendarDaysOptions,
 ): UseCalendarDaysReturn {
-  const {year, month, weekStartsOn = 0, hasVariableRowCount = false} = options;
-  const locale = useLocale();
-
-  // Calculate grid structure
-  const gridInfo = useMemo(() => {
-    const totalDaysInMonth = getDaysInMonth(year, month);
+  const {
+    year,
+    month,
+    weekStartsOn = 0,
+    hasVariableRowCount = false,
+    calendar: calendarOption = 'gregory',
+  } = options;
+  const calendar = resolveShownCalendar(calendarOption, 'useCalendarDays');
+  const days = useMemo(() => {
+    const calendarMonth = calendarMonthFromYearMonth(calendar, {year, month});
+    return layOutMonthDays({
+      first: calendarMonth.start,
+      length: calendarMonth.length,
+      weekStartsOn,
+      hasVariableRowCount,
+      dayNumberOf: (pd, offset) =>
+        offset >= 0 && offset < calendarMonth.length
+          ? offset + 1
+          : calendarDayOfMonth(calendar, pd),
+    });
+  }, [year, month, calendar, weekStartsOn, hasVariableRowCount]);
+  return useMonthGrid(days, weekStartsOn);
+}
 
-    // Calculate starting offset based on weekStartsOn
-    let startingDayOfWeek =
-      plainDateDayOfWeek({year, month, day: 1}) - weekStartsOn;
-    if (startingDayOfWeek < 0) {
-      startingDayOfWeek += 7;
-    }
+interface MonthLayout {
+  first: PlainDate;
+  length: number;
+  weekStartsOn: DayOfWeek;
+  hasVariableRowCount: boolean;
+  /** The day number of a grid day, given its offset from the month's first day. */
+  dayNumberOf: (pd: PlainDate, offset: number) => number;
+}
 
-    // Calculate total cells
-    const totalDays = totalDaysInMonth + startingDayOfWeek;
-    const totalRows = hasVariableRowCount ? Math.ceil(totalDays / 7) : 6;
-    const totalCells = totalRows * 7;
+function layOutMonthDays(layout: MonthLayout): CalendarDay[] {
+  const {first, length, weekStartsOn, hasVariableRowCount, dayNumberOf} =
+    layout;
+  let startingDayOfWeek = plainDateDayOfWeek(first) - weekStartsOn;
+  if (startingDayOfWeek < 0) {
+    startingDayOfWeek += 7;
+  }
+  const totalRows = hasVariableRowCount
+    ? Math.ceil((length + startingDayOfWeek) / 7)
+    : 6;
+  const result: CalendarDay[] = [];
+  for (let i = 0; i < totalRows * 7; i++) {
+    const offset = i - startingDayOfWeek;
+    const pd = plainDateAddDays(first, offset);
+    result.push({
+      date: pd,
+      iso: plainDateToISO(pd),
+      isOutside: offset < 0 || offset >= length,
+      dayNumber: dayNumberOf(pd, offset),
+    });
+  }
+  return result;
+}
 
-    return {
-      daysInMonth: totalDaysInMonth,
-      startingDayOfWeek,
-      totalCells,
-    };
-  }, [year, month, weekStartsOn, hasVariableRowCount]);
+function useMonthGrid(
+  days: CalendarDay[],
+  weekStartsOn: DayOfWeek,
+): UseCalendarDaysReturn {
+  const locale = useLocale();
 
   const dayNames = useMemo(
     () => getWeekdayHeaderNames(locale, weekStartsOn),
     [locale, weekStartsOn],
   );
 
-  // Generate days array
-  const days = useMemo(() => {
-    const {
-      daysInMonth: totalDaysInMonth,
-      startingDayOfWeek,
-      totalCells,
-    } = gridInfo;
-    const firstOfMonth: PlainDate = {year, month, day: 1};
-    const result: CalendarDay[] = [];
-
-    for (let i = 0; i < totalCells; i++) {
-      const dayOffset = i - startingDayOfWeek + 1;
-      const isOutside = dayOffset < 1 || dayOffset > totalDaysInMonth;
-      const pd: PlainDate = isOutside
-        ? plainDateAddDays(firstOfMonth, dayOffset - 1)
-        : {year, month, day: dayOffset};
-
-      result.push({
-        date: pd,
-        iso: plainDateToISO(pd),
-        isOutside,
-        dayNumber: pd.day,
-      });
-    }
-
-    return result;
-  }, [year, month, gridInfo]);
-
-  // Group days into weeks
   const weeks = useMemo(() => {
     const result: CalendarDay[][] = [];
     for (let i = 0; i < days.length; i += 7) {
@@ -153,10 +184,5 @@ export function useCalendarDays(
     return result;
   }, [days]);
 
-  return {
-    days,
-    weeks,
-    dayNames,
-    totalCells: gridInfo.totalCells,
-  };
+  return {days, weeks, dayNames, totalCells: days.length};
 }

package/src/Calendar/hooks/useCalendarNavigation.ts

@@ -4,9 +4,11 @@
 
 /**
  * @file useCalendarNavigation.ts
- * @input Uses React useState, useMemo, useCallback, useLocale, PlainDate utilities
- * @output Exports useCalendarNavigation hook for month navigation
- * @position Calendar-specific hook; used by Calendar
+ * @input Uses React useState, useMemo, useCallback, useLocale, PlainDate and
+ *   calendar-system utilities
+ * @output Exports useCalendarNavigation hook for month navigation in any
+ *   calendar system (Gregorian by default)
+ * @position Calendar-specific public hook
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Calendar/hooks/index.ts
@@ -19,12 +21,17 @@ import {
   plainDateFromISO,
   plainDateToISO,
   plainDateToday,
-  plainDateSetFirstOfMonth,
-  plainDateAddMonths,
   plainDateAddDays,
 } from '../../utils/plainDate';
-import {plainDateFormatStandaloneMonthYear} from '../../utils/plainDate';
+import {
+  type CalendarSystem,
+  calendarAddMonths,
+  calendarMonthOf,
+  calendarYearMonthOf,
+  formatCalendarMonthLabel,
+} from '../../utils/calendarSystem';
 import {useLocale} from '../../i18n';
+import {resolveShownCalendar} from '../../i18n/useCalendarSystem';
 
 /**
  * Configuration for calendar navigation
@@ -38,17 +45,31 @@ export interface UseCalendarNavigationOptions {
   onFocusDateChange?: (focusDate: ISODateString) => void;
   /** Number of months to display */
   numberOfMonths?: 1 | 2;
+  /**
+   * The calendar system whose months the hook steps and labels. Dates stay
+   * Gregorian ISO. The hook never reads the InternationalizationProvider
+   * calendar. Calendars other than gregory, iso8601, buddhist, roc, and
+   * japanese need Temporal; without it, the hook steps Gregorian months and
+   * warns once in development.
+   * @default 'gregory'
+   */
+  calendar?: CalendarSystem;
 }
 
 /**
  * Return type for useCalendarNavigation hook
  */
 export interface UseCalendarNavigationReturn {
-  /** The base month (first day of the focus month) as a PlainDate */
+  /** The Gregorian first day of the focus month */
   baseMonth: PlainDate;
-  /** Array of visible months to render as PlainDates */
+  /** The Gregorian first day of each visible month */
   visibleMonths: PlainDate[];
-  /** Formatted label for the month header */
+  /**
+   * The year and month numbers of each visible month in `calendar`, as
+   * `useCalendarDays` reads them with the same `calendar`
+   */
+  visibleCalendarMonths: {year: number; month: number}[];
+  /** Formatted label for the month header, in `calendar` */
   monthYearLabel: string;
   /** Navigate to previous/next month */
   navigateMonth: (
@@ -87,6 +108,13 @@ export interface UseCalendarNavigationReturn {
  * // Navigate from arrow key (with focus tracking)
  * navigateMonth(1, focusedDate, 1); // horizontal offset
  * navigateMonth(1, focusedDate, 7); // vertical offset
+ *
+ * // Persian months, laid out by useCalendarDays
+ * const nav = useCalendarNavigation({initialValue, calendar: 'persian'});
+ * const {weeks} = useCalendarDays({
+ *   ...nav.visibleCalendarMonths[0],
+ *   calendar: 'persian',
+ * });
  * ```
  */
 export function useCalendarNavigation(
@@ -97,8 +125,13 @@ export function useCalendarNavigation(
     focusDate: focusDateProp,
     onFocusDateChange,
     numberOfMonths = 1,
+    calendar: calendarOption = 'gregory',
   } = options;
   const locale = useLocale();
+  const calendar = resolveShownCalendar(
+    calendarOption,
+    'useCalendarNavigation',
+  );
 
   // Pending focus target after month navigation
   const [pendingFocus, setPendingFocus] = useState<ISODateString | null>(null);
@@ -121,32 +154,40 @@ export function useCalendarNavigation(
     ? plainDateFromISO(focusDateProp)
     : internalFocusDate;
 
-  // Base month (first day of focus month)
-  const baseMonth = useMemo(() => {
-    return plainDateSetFirstOfMonth(focusDate);
-  }, [focusDate]);
+  // A controlled focus date is a new object on each render. Key the memo on
+  // its ISO string.
+  const focusIso = plainDateToISO(focusDate);
+  const shownMonths = useMemo(() => {
+    const first = calendarMonthOf(calendar, plainDateFromISO(focusIso));
+    return Array.from({length: numberOfMonths}, (_, i) =>
+      calendarAddMonths(calendar, first, i),
+    );
+  }, [calendar, focusIso, numberOfMonths]);
+
+  const visibleMonths = useMemo(
+    () => shownMonths.map(month => month.start),
+    [shownMonths],
+  );
+  const baseMonth = visibleMonths[0];
 
-  // Generate visible months
-  const visibleMonths = useMemo(() => {
-    return Array.from({length: numberOfMonths}, (_, i) => {
-      return plainDateAddMonths(baseMonth, i);
-    });
-  }, [baseMonth, numberOfMonths]);
+  const visibleCalendarMonths = useMemo(
+    () => shownMonths.map(month => calendarYearMonthOf(calendar, month)),
+    [calendar, shownMonths],
+  );
 
-  // Format month header
-  // Each month is its own stand-alone label (Calendar FR1).
+  // Each month is its own stand-alone label.
   const monthYearLabel = useMemo(
     () =>
-      visibleMonths
-        .map(m => plainDateFormatStandaloneMonthYear(m, locale))
+      shownMonths
+        .map(month => formatCalendarMonthLabel(calendar, month, locale))
         .join(' – '),
-    [visibleMonths, locale],
+    [calendar, shownMonths, locale],
   );
 
   // Navigate to previous/next month
   const navigateMonth = useCallback(
     (delta: number, focusedDate?: ISODateString, offset?: number) => {
-      const newMonth = plainDateAddMonths(baseMonth, delta);
+      const newMonth = calendarAddMonths(calendar, shownMonths[0], delta).start;
       const newISO = plainDateToISO(newMonth);
 
       // Calculate target focus date if provided
@@ -164,7 +205,7 @@ export function useCalendarNavigation(
         setInternalFocusDate(newMonth);
       }
     },
-    [baseMonth, onFocusDateChange],
+    [calendar, shownMonths, onFocusDateChange],
   );
 
   // Clear pending focus
@@ -175,6 +216,7 @@ export function useCalendarNavigation(
   return {
     baseMonth,
     visibleMonths,
+    visibleCalendarMonths,
     monthYearLabel,
     navigateMonth,
     pendingFocus,

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -109,7 +109,7 @@ export const docs = {
       name: 'size',
       type: "'sm' | 'md'",
       description:
-        'The size of the checkbox. sm for compact layouts, md for default.',
+        'The size of the checkbox. sm for compact layouts, md for default. Under a coarse pointer a labelled checkbox’s target grows toward 44 px through an invisible hit area. It never shrinks below the row and stops at half the gap to a closer neighbour; nothing changes size.',
       default: "'md'",
     },
     {
@@ -361,7 +361,8 @@ export const docsZh = {
     {
       name: 'size',
       type: "'sm' | 'md'",
-      description: '复选框尺寸。sm 用于紧凑布局，md 为默认。',
+      description:
+        '复选框尺寸。sm 用于紧凑布局，md 为默认。在粗指针（触摸）下，带可见标签的复选框的目标通过不可见的点击区域向 44 px 扩展。它不小于所在行，与相邻控件较近时止于间距的一半；尺寸不变。',
       default: "'md'",
     },
     {

package/src/CheckboxInput/CheckboxInput.tsx

@@ -24,6 +24,8 @@ import {
   useTransition,
   type ChangeEvent,
   type FocusEvent,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -55,6 +57,8 @@ import {useIndicator} from '../Indicator/useIndicator';
 import {themeProps} from '../utils/themeProps';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {watchHitArea, writeHitInsets} from '../utils/hitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -83,6 +87,10 @@ const styles = stylex.create({
   containerLabelHidden: {
     gap: 0,
   },
+  // Under a coarse pointer the row contains its hit band.
+  hitAreaHost: {
+    position: {default: null, '@media (pointer: coarse)': 'relative'},
+  },
   // An indicator in another package may not name this row's private press
   // attribute. So the row hands its touch press image down to an indicator
   // that paints its own press, but only in its own press states. A pressed
@@ -407,6 +415,63 @@ export function CheckboxInput({
   useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);
   const {focusProps} = useIndicatorFocusRing(indicatorRef);
 
+  // Under a coarse pointer a labelled checkbox's row grows toward 44 px
+  // through an invisible band, and nothing changes size. A label-hidden
+  // checkbox is a marker in another component's row, which keeps its target.
+  const hasHitArea = !isLabelHidden && !isDisabled && !isReadOnly;
+  const inputRef = useRef<HTMLInputElement>(null);
+  // The watch lives as long as the row is attached: the ref's cleanup stops
+  // it, and a replaced row starts its own.
+  const watchRowHitArea = useCallback(
+    (row: HTMLDivElement | null) => {
+      if (row == null || !hasHitArea) {
+        return;
+      }
+      return watchHitArea(row, insets => writeHitInsets(row, insets));
+    },
+    [hasHitArea],
+  );
+  // The disabled-message tooltip listens for hover and focus on the whole
+  // row, a larger trigger. It anchors on the checkbox itself (below), so it
+  // shows next to the control. Its handlers check isEnabled, so the row
+  // always attaches them.
+  const rowRef = useMergedRefs(
+    disabledMessageTooltip.interactionRef,
+    watchRowHitArea,
+  );
+  // Where a press on the row itself began. A browser can move a tap's click
+  // onto the row's edge, so the band is judged from the press.
+  const pressPointRef = useRef<{x: number; y: number} | null>(null);
+  const handleRowPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    pressPointRef.current =
+      event.target === event.currentTarget
+        ? {x: event.clientX, y: event.clientY}
+        : null;
+  };
+  // A press that began on the band, outside the row's box, toggles the
+  // checkbox, as a tap on the box does. A click from code has no press count
+  // (`detail` is 0), so it never toggles from here.
+  const handleRowClick = (event: ReactMouseEvent<HTMLDivElement>) => {
+    const press = pressPointRef.current;
+    pressPointRef.current = null;
+    if (
+      press == null ||
+      event.detail === 0 ||
+      event.target !== event.currentTarget
+    ) {
+      return;
+    }
+    const box = event.currentTarget.getBoundingClientRect();
+    const isOnBand =
+      press.x < box.left ||
+      press.x > box.right ||
+      press.y < box.top ||
+      press.y > box.bottom;
+    if (isOnBand) {
+      inputRef.current?.click();
+    }
+  };
+
   const isIndeterminate = optimisticValue === 'indeterminate';
   const isChecked = optimisticValue === true;
 
@@ -455,19 +520,15 @@ export function CheckboxInput({
         style,
       )}>
       <div
-        ref={el => {
-          // Interaction (hover/focus) listeners for the disabled-message
-          // tooltip attach to the whole row for a larger trigger target;
-          // positioning anchors on the checkbox itself (below) so the tooltip
-          // appears next to the control, not the far edge of the row.
-          // Handlers are gated internally by isEnabled, so attaching
-          // unconditionally is safe.
-          disabledMessageTooltip.interactionRef(el);
-        }}
+        ref={rowRef}
+        onPointerDown={hasHitArea ? handleRowPointerDown : undefined}
+        onClick={hasHitArea ? handleRowClick : undefined}
         {...(isDisabled ? undefined : pressable)}
         {...stylex.props(
           styles.container,
           isLabelHidden && styles.containerLabelHidden,
+          hasHitArea && styles.hitAreaHost,
+          hasHitArea && touchHitAreaStyles.layer,
           // Hover and focus reach the checkbox visual through this ancestor
           // marker rather than props, so the whole row drives it.
           !isDisabled && indicatorScope,
@@ -490,6 +551,7 @@ export function CheckboxInput({
               ref,
               indeterminateRef,
               disabledMessageTooltip.positionRef,
+              inputRef,
             )}
             id={id}
             type="checkbox"

package/src/ClickableCard/ClickableCard.tsx

@@ -46,6 +46,7 @@ import {
 } from '../theme/tokens.stylex';
 import type {SizeValue, SpacingStep, Elevation} from '../utils/types';
 import {mergeProps} from '../utils';
+import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
@@ -314,6 +315,7 @@ export function ClickableCard({
   label,
   onClick: onClickProp,
   onMouseUp: onMouseUpProp,
+  onPointerDown: onPointerDownProp,
   href,
   target,
   isDisabled = false,
@@ -370,7 +372,7 @@ export function ClickableCard({
 
   const LinkComponent = useLinkComponent();
 
-  const {onClick, onMouseUp} = useClickableContainer({
+  const {onClick, onMouseUp, onPointerDown} = useClickableContainer({
     containerRef,
     interactiveRef,
     onClick: onClickProp,
@@ -427,6 +429,11 @@ export function ClickableCard({
       }
       onClick={!isDisabled ? onClick : undefined}
       onMouseUp={!isDisabled ? handleMouseUp : undefined}
+      onPointerDown={
+        !isDisabled
+          ? chainEventHandlers(onPointerDown, onPointerDownProp)
+          : onPointerDownProp
+      }
       {...props}>
       {isLink ? (
         <LinkRoot

package/src/DateInput/DateInput.tsx

@@ -1030,6 +1030,8 @@ function PointerDateField({
         // calendar only while it is open; it opens on the current value.
         !popover.isOpen ? null : (
           <Calendar
+            // The field text is Gregorian, so the popover calendar is too.
+            calendar="gregory"
             handleRef={calendarRef}
             mode="single"
             value={optimisticValue ?? null}

package/src/DateInput/PickerWheel.tsx

@@ -73,6 +73,12 @@ const UIKIT_SCALE = ROW_HEIGHT / picker.geometry.rowHeight;
 /** UIKit's rubber band dimension for the picker's table, at that pitch. */
 const RUBBER_BAND_DIMENSION = picker.geometry.rubberBandDimension * UIKIT_SCALE;
 
+/**
+ * The rows' opacity at the column's edges. At 0.7 the row four from the band
+ * keeps 5:1 or more in every shipped theme, a margin over WCAG AA's 4.5:1.
+ */
+const FADE_FLOOR = 0.7;
+
 const styles = stylex.create({
   // The scrolling column's box, band and rows (Wheel.tsx), moved by the
   // gesture system and the compositor instead of a native scroller.
@@ -92,8 +98,7 @@ const styles = stylex.create({
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
-    maskImage:
-      'linear-gradient(to bottom, rgb(0 0 0 / 0.3), rgb(0 0 0) 50%, rgb(0 0 0 / 0.3))',
+    maskImage: `linear-gradient(to bottom, rgb(0 0 0 / ${FADE_FLOOR}), rgb(0 0 0) 50%, rgb(0 0 0 / ${FADE_FLOOR}))`,
   },
   /**
    * The selection band: a centred row-height plate behind the rows.

package/src/DateRangeInput/DateRangeInput.tsx

@@ -238,7 +238,7 @@ const styles = stylex.create({
   },
   presetButtonActive: {
     backgroundColor: colorVars['--color-accent-muted'],
-    color: colorVars['--color-accent'],
+    color: colorVars['--color-text-accent'],
   },
   presetButtonDisabled: {
     color: colorVars['--color-text-disabled'],
@@ -910,6 +910,8 @@ export function DateRangeInput({
               calendar only while it is open. */}
             {popover.isOpen && (
               <Calendar
+                // The field text is Gregorian, so the popover calendar is too.
+                calendar="gregory"
                 mode="range"
                 value={optimisticValue}
                 onChange={handleRangeSelect}

package/src/DateTimeInput/DateTimeInput.tsx

@@ -1976,6 +1976,8 @@ function PointerDateTimeField({
           // opens on the current value.
           !popover.isOpen ? null : (
             <Calendar
+              // The field text is Gregorian, so the popover calendar is too.
+              calendar="gregory"
               handleRef={calendarRef}
               mode="single"
               value={valueParts.date ?? null}

package/src/Dialog/Dialog.doc.mjs

@@ -69,7 +69,7 @@ export const docs = {
     ],
   },
   description:
-    'Modal dialog using the native <dialog> element. Modal and inline content starts with theme body text defaults. Ancestor surface/group membership ends as a whole, including group-owned state. Explicit props and unrelated contexts remain unchanged. Place intentional groups and complete required providers inside the dialog. With reduced motion the dialog never slides or scales in: on a touch screen it fades in, in 200 ms or less, and with a mouse it appears at once.',
+    'Modal dialog using the native <dialog> element. Modal and inline content starts with theme body text defaults. Ancestor surface/group membership ends as a whole, including group-owned state. Explicit props and unrelated contexts remain unchanged. Place intentional groups and complete required providers inside the dialog. With reduced motion the dialog never slides or scales in: on a touch screen it fades in, in 200 ms or less, and with a mouse it appears at once. On a phone or tablet (a coarse primary pointer), a tap or a drag that lands while the dialog is still entering reaches nothing, and the dialog finishes entering; keys and assistive technology stay live, and a mouse or a trackpad still clicks: at once when it was the last pointer used, otherwise once it moves.',
   props: [
     {
       name: 'isOpen',