@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/ComplexSelector/ComplexSelector.tsx

@@ -50,6 +50,7 @@ import {
 import {isRenderable, mergeProps} from '../utils';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 
@@ -115,13 +116,6 @@ const styles = stylex.create({
     width: 'auto',
     borderWidth: 0,
     backgroundColor: 'transparent',
-    backgroundImage: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
-    },
     boxShadow: {
       default: 'none',
       ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
@@ -209,7 +203,8 @@ export interface ComplexSelectorRenderState {
  * they respect focus restoration, light dismiss, and Escape. Prefer these
  * callbacks over mirroring open state in the parent — the selector owns its
  * visibility, and imperative calls avoid the focus-management pitfalls of
- * syncing an external `isOpen` prop.
+ * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every
+ * open and close, including the ones the selector performs itself.
  */
 export interface ComplexSelectorHandle {
   /** Open the selector surface. No-op when disabled or already open. */
@@ -286,6 +281,13 @@ export interface ComplexSelectorProps<Value> extends Omit<
    * state in the parent — the selector owns its visibility.
    */
   handleRef?: React.Ref<ComplexSelectorHandle>;
+  /**
+   * Called whenever the selector surface opens or closes, however it happened
+   * — the trigger, the keyboard, a light dismiss, Escape, content that calls
+   * `close()`, or the imperative handle. Pair it with `handleRef` to drive the
+   * surface from outside without mirroring its state.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
   /** StyleX styles for the popup content container. */
   contentXstyle?: StyleXStyles;
   /** Test ID for the trigger container. */
@@ -343,6 +345,7 @@ export function ComplexSelector<Value>({
   placement = 'below',
   alignment = 'start',
   handleRef,
+  onOpenChange,
   contentXstyle,
   xstyle,
   className,
@@ -373,29 +376,35 @@ export function ComplexSelector<Value>({
       .join(' ') || undefined;
 
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const lastHideTimeRef = useRef(0);
 
   const [isPending, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || isPending;
 
+  const handlePopoverShow = useCallback(() => {
+    onOpenChange?.(true);
+  }, [onOpenChange]);
+
   const handlePopoverHide = useCallback(() => {
-    lastHideTimeRef.current = Date.now();
+    // Focus is restored first so a consumer that moves focus elsewhere from
+    // the callback wins, instead of being overwritten a line later.
     triggerRef.current?.focus();
-  }, []);
+    onOpenChange?.(false);
+  }, [onOpenChange]);
 
   const popover = usePopover({
     dialogLabel: label,
     hasCloseButton: false,
     hasAutoFocus: true,
     surfaceTarget: 'complex-selector-popup',
+    onShow: handlePopoverShow,
     onHide: handlePopoverHide,
   });
 
   const isOpen = popover.isOpen;
 
   const handleTriggerClick = useCallback(() => {
-    if (isDisabled || Date.now() - lastHideTimeRef.current < 50) {
+    if (isDisabled) {
       return;
     }
     if (popover.isOpen) {
@@ -487,6 +496,7 @@ export function ComplexSelector<Value>({
             // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
             focusOutlineStyles.focusWithin,
             variant === 'ghost' && styles.triggerGhost,
+            variant === 'ghost' && interactionOverlayStyles.backgroundImage,
             isDisabled && inputWrapperStyles.disabled,
             variant === 'ghost' && isDisabled && styles.triggerGhostDisabled,
             isDisabled && styles.disabled,

package/src/DateInput/DateInput.doc.mjs

@@ -156,6 +156,13 @@ export const docs = {
         "How the committed date value is displayed. Named values are reused from Timestamp's format vocabulary: 'date' shows 'Mar 21, 2026', 'date_long' shows 'March 21, 2026', 'date_weekday' shows 'Wed, Mar 21, 2026', 'system_date' shows '2026-03-21'. A function receives the ISO value and returns a custom string. Applies only to the committed value, never to text being typed.",
       default: "'date_long'",
     },
+    {
+      name: 'nativePicker',
+      type: "'touch' | 'always' | 'never'",
+      description:
+        "Which surface draws the date picker. 'touch' (the default) hands a touch device to the browser/OS: the field becomes an input type=date and the platform draws the picker (the iOS wheel, the Android calendar dialog); 'always' does that wherever the browser supports input type=date; 'never' keeps Astryx's own pickers everywhere (the bottom-sheet picker on a finger, the calendar popover on a mouse). Use 'never' for a field that needs weekStartsOn, numberOfMonths or dateConstraints, none of which a native picker can express. format and placeholder still apply in native mode; min and max are forwarded, but a native picker may not show them (on iOS an out-of-range date can be selected and is refused on commit rather than greyed out).",
+      default: "'touch'",
+    },
     {
       name: 'width',
       type: 'SizeValue',
@@ -437,6 +444,13 @@ export const docsZh = {
         "已选日期的显示格式。命名值复用 Timestamp 的格式词汇：'date' 显示 'Mar 21, 2026'，'date_long' 显示 'March 21, 2026'，'date_weekday' 显示 'Wed, Mar 21, 2026'，'system_date' 显示 '2026-03-21'。函数接收 ISO 值并返回自定义字符串。仅作用于已提交的值，不影响正在输入的文本。",
       default: "'date_long'",
     },
+    {
+      name: 'nativePicker',
+      type: "'touch' | 'always' | 'never'",
+      description:
+        "由哪个界面绘制日期选择器。'touch'（默认）在触摸设备上交给浏览器/操作系统：字段变为 input type=date，由平台绘制选择器（iOS 滚轮、Android 日历对话框）；'always' 在所有支持 input type=date 的浏览器上都这样做；'never' 始终使用 Astryx 自带的选择器（触摸设备用底部弹出选择器，鼠标设备用日历弹出层）。需要 weekStartsOn、numberOfMonths 或 dateConstraints 的字段应使用 'never'，原生选择器无法表达这些。原生模式下 format 和 placeholder 仍然生效；min 和 max 会传递给原生控件，但原生选择器可能不会显示这些限制（在 iOS 上仍可选中超出范围的日期，会在提交时被拒绝，而不是变灰）。",
+      default: "'touch'",
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -537,6 +551,8 @@ export const docsDense = {
     weekStartsOn: 'first day of week in calendar (0=Sunday, or name e.g. "mon")',
     format:
       "committed-value display: 'date_long' (default, March 21, 2026), 'date' (Mar 21, 2026), 'date_weekday' (Wed, Mar 21, 2026), 'system_date' (2026-03-21), or (iso)=>string; reuses Timestamp vocabulary. Committed value only, not while typing.",
+    nativePicker:
+      "which surface draws the picker: 'touch' (default) = browser/OS on a coarse pointer, 'always', 'never' = Astryx's own everywhere. use 'never' for weekStartsOn/numberOfMonths/dateConstraints. format+placeholder still apply; min/max forwarded but not necessarily shown by the OS picker, refused on commit instead.",
     xstyle: 'StyleX styles for layout; must be stylex.create() value',
   },
 };

package/src/DateInput/DateInput.test.tsx

@@ -917,17 +917,22 @@ describe('DateInput', () => {
       expect(screen.getByDisplayValue('Jan 25, 2026')).toBeInTheDocument();
     });
 
-    it('follows the InternationalizationProvider locale (#5074)', () => {
-      render(
-        <InternationalizationProvider locale="es-ES">
+    it('updates when the InternationalizationProvider locale changes (#5074)', () => {
+      const renderDateInput = (locale: 'en-US' | 'es-ES') => (
+        <InternationalizationProvider locale={locale}>
           <DateInput
             label="Date"
             value="2026-01-25"
             onChange={() => {}}
             format="date_long"
           />
-        </InternationalizationProvider>,
+        </InternationalizationProvider>
       );
+      const {rerender} = render(renderDateInput('en-US'));
+
+      expect(screen.getByDisplayValue('January 25, 2026')).toBeInTheDocument();
+
+      rerender(renderDateInput('es-ES'));
       expect(
         screen.getByDisplayValue('25 de enero de 2026'),
       ).toBeInTheDocument();

package/src/DateInput/DateInput.tsx

@@ -17,7 +17,6 @@
  */
 
 import {
-  use,
   useId,
   useState,
   useCallback,
@@ -62,6 +61,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {usePopover} from '../Popover';
+import {NativeDateField} from './NativeDateField';
 import {TouchDateField} from './TouchDateField';
 import {useTooltip} from '../Tooltip';
 import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
@@ -150,6 +150,17 @@ export type DateInputSize = keyof typeof sizeStyles;
  * types stay in compile-time lockstep: renaming or removing one of these
  * members from `TimestampFormat` breaks this type at build time.
  */
+/**
+ * When DateInput hands date picking to the browser/OS instead of its own
+ * surfaces.
+ *
+ * - `'touch'`: native on touch devices (coarse pointer), Astryx's calendar
+ *   popover on mouse-driven ones
+ * - `'always'`: native wherever the browser supports `<input type="date">`
+ * - `'never'`: Astryx's own pickers everywhere
+ */
+export type DateInputNativePicker = 'touch' | 'always' | 'never';
+
 export type DateInputFormat = Extract<
   TimestampFormat,
   'date' | 'date_long' | 'date_weekday' | 'system_date'
@@ -167,7 +178,7 @@ import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
-import {useTranslator, InternationalizationContext} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 export interface DateInputProps extends Omit<
@@ -361,6 +372,40 @@ export interface DateInputProps extends Omit<
    * ```
    */
   format?: DateInputFormat | ((value: ISODateString) => string);
+
+  /**
+   * When date picking is handed to the browser/OS instead of Astryx's own
+   * surfaces: the field becomes an `<input type="date">` and the platform
+   * draws the picker — the iOS wheel, the Android calendar dialog — with the
+   * OS's own hit areas, momentum scrolling, locale and accessibility
+   * settings.
+   *
+   * - `'touch'` (default): native on touch devices (coarse pointer), the text
+   *   field and calendar popover on mouse-driven ones
+   * - `'always'`: native wherever the browser supports `<input type="date">`
+   * - `'never'`: Astryx's own pickers everywhere — the touch picker on a
+   *   finger, the calendar popover on a mouse
+   *
+   * `format` and `placeholder` still apply in native mode: DateInput paints
+   * the closed field's text itself, over the control. `numberOfMonths` and
+   * `weekStartsOn` do not — they describe a calendar grid the native picker
+   * does not have — so a field that needs either should pass `'never'`.
+   *
+   * `min` and `max` are forwarded, but note that a native picker may not
+   * *show* them: on iOS they are constraint-validation flags rather than
+   * clamps, so an out-of-range date can be selected and is refused on commit
+   * (announced to assistive technology) rather than being greyed out in the
+   * picker. `dateConstraints` is enforced the same way, on commit, and is
+   * reason enough to prefer `'never'` on a field that uses it.
+   *
+   * @default 'touch'
+   * @example
+   * ```
+   * // Astryx's own touch picker instead of the platform's
+   * <DateInput label="Event date" value={date} onChange={setDate} nativePicker="never" />
+   * ```
+   */
+  nativePicker?: DateInputNativePicker;
 }
 
 /**
@@ -419,8 +464,8 @@ function PointerDateField({
   ...rest
 }: DateInputProps) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
-  const {locale} = use(InternationalizationContext);
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -887,7 +932,13 @@ PointerDateField.displayName = 'PointerDateField';
  */
 export function DateInput(props: DateInputProps) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  const nativePicker = props.nativePicker ?? 'touch';
 
+  // The platform's picker, where the consumer asked for it — see the
+  // `nativePicker` prop for what that trades away.
+  if (nativePicker === 'always' || (nativePicker === 'touch' && isTouch)) {
+    return <NativeDateField {...props} />;
+  }
   return isTouch ? (
     <TouchDateField {...props} />
   ) : (

package/src/DateInput/DateInputTouch.test.tsx

@@ -41,6 +41,7 @@ import {fileURLToPath} from 'node:url';
 import {useState} from 'react';
 import type {ISODateString} from '../utils';
 import {InputGroup} from '../InputGroup';
+import {InternationalizationProvider} from '../i18n';
 import {stableClassName} from '../naming';
 import {DateInput} from './DateInput';
 import {
@@ -219,6 +220,11 @@ function Controlled({
   return (
     <DateInput
       label="Event date"
+      // This suite is about Astryx's own touch surface, which is now opt-out:
+      // `nativePicker` defaults to 'touch', so a coarse pointer gets the
+      // platform's picker unless a field says otherwise. Tests that assert on
+      // the surface selection itself pass their own value over this.
+      nativePicker="never"
       {...DEFAULT_RANGE}
       {...props}
       value={value}
@@ -276,6 +282,16 @@ function weekdayRow(): HTMLElement {
 // ---------------------------------------------------------------------------
 
 describe('DateInput — surface selection', () => {
+  it('hands a touch device to the platform picker by default', () => {
+    // `nativePicker` defaults to 'touch': the OS draws the picker unless a
+    // field opts out. Everything else in this file passes 'never', so this is
+    // the one place the default itself is asserted.
+    stubMedia({pointer: 'coarse', width: 393});
+    render(<DateInput label="Event date" onChange={() => {}} />);
+    const input = document.querySelector('input');
+    expect(input).toHaveAttribute('type', 'date');
+  });
+
   it('switches on the pointer alone, so a tablet gets the picker too', () => {
     // `pointer` is the PRIMARY device, which is what makes it the whole test:
     // a touchscreen laptop reports `fine` (its trackpad) and keeps the
@@ -320,7 +336,12 @@ describe('DateInput — surface selection', () => {
     setViewport('desktop');
     const onChange = vi.fn();
     render(
-      <DateInput label="Event date" onChange={onChange} min={undefined} />,
+      <DateInput
+        nativePicker="never"
+        label="Event date"
+        onChange={onChange}
+        min={undefined}
+      />,
     );
     fireEvent.change(field(), {target: {value: '2026-03-25'}});
     expect(onChange).toHaveBeenCalledWith('2026-03-25');
@@ -337,6 +358,41 @@ describe('DateInput — surface selection', () => {
     expect(input).toHaveAttribute('inputmode', 'none');
   });
 
+  it('updates the field and open picker when the provider locale changes', () => {
+    const renderDateInput = (locale: 'en-US' | 'es-ES') => (
+      <InternationalizationProvider locale={locale}>
+        <Controlled initial="2026-03-21" />
+      </InternationalizationProvider>
+    );
+
+    withLayout(() => {
+      const {rerender} = render(renderDateInput('en-US'));
+      expect(field()).toHaveValue('March 21, 2026');
+
+      fireEvent.click(field());
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('March 2026');
+      expect(pane('March 2026')).toBeInTheDocument();
+
+      rerender(renderDateInput('es-ES'));
+      expect(field()).toHaveValue('21 de marzo de 2026');
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('marzo de 2026');
+      expect(pane('marzo de 2026')).toBeInTheDocument();
+
+      const nextButton = document.querySelector<HTMLButtonElement>(
+        '[data-arrows="months"] button:last-child',
+      );
+      expect(nextButton).not.toBeNull();
+      fireEvent.click(nextButton!);
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('abril de 2026');
+    });
+  });
+
   it('forwards ref to the input on both surfaces', () => {
     const desktopRef = {current: null as HTMLInputElement | null};
     setViewport('desktop');
@@ -360,12 +416,17 @@ describe('DateInput — surface selection', () => {
 describe('DateInput — field parity', () => {
   it('shows a placeholder until a date is chosen, then the formatted value', () => {
     const {rerender} = render(
-      <DateInput label="Ship date" onChange={() => {}} />,
+      <DateInput nativePicker="never" label="Ship date" onChange={() => {}} />,
     );
     expect(field()).toHaveValue('');
     expect(field()).toHaveAttribute('placeholder', 'Select a date');
     rerender(
-      <DateInput label="Ship date" value="2026-03-21" onChange={() => {}} />,
+      <DateInput
+        nativePicker="never"
+        label="Ship date"
+        value="2026-03-21"
+        onChange={() => {}}
+      />,
     );
     expect(field()).toHaveValue('March 21, 2026');
   });
@@ -373,6 +434,7 @@ describe('DateInput — field parity', () => {
   it('honors a named format', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         format="system_date"
@@ -385,6 +447,7 @@ describe('DateInput — field parity', () => {
   it('honors a function format', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         format={iso => `ISO:${iso}`}
@@ -397,6 +460,7 @@ describe('DateInput — field parity', () => {
   it('honors a custom placeholder', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         placeholder="Pick a day"
         onChange={() => {}}
@@ -409,6 +473,7 @@ describe('DateInput — field parity', () => {
     const onChange = vi.fn();
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         value="2026-03-21"
         hasClear
@@ -432,6 +497,7 @@ describe('DateInput — field parity', () => {
     try {
       render(
         <DateInput
+          nativePicker="never"
           label="Ship date"
           value="2026-03-21"
           hasClear
@@ -457,7 +523,13 @@ describe('DateInput — field parity', () => {
 
   it('does not open the picker until the field is tapped', () => {
     withLayout(() => {
-      render(<DateInput label="Ship date" onChange={() => {}} />);
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          onChange={() => {}}
+        />,
+      );
       expect(field()).toHaveAttribute('aria-expanded', 'false');
       expect(screen.queryByRole('grid')).not.toBeInTheDocument();
       fireEvent.click(field());
@@ -475,7 +547,14 @@ describe('DateInput — field parity', () => {
   });
 
   it('is not openable while disabled', () => {
-    render(<DateInput label="Ship date" isDisabled onChange={() => {}} />);
+    render(
+      <DateInput
+        nativePicker="never"
+        label="Ship date"
+        isDisabled
+        onChange={() => {}}
+      />,
+    );
     expect(field()).toBeDisabled();
     fireEvent.click(field());
     expect(screen.queryByRole('grid')).not.toBeInTheDocument();
@@ -484,6 +563,7 @@ describe('DateInput — field parity', () => {
   it('stays focusable and explains itself when disabled with a reason', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         isDisabled
         disabledMessage="You need the Editor role"
@@ -500,6 +580,7 @@ describe('DateInput — field parity', () => {
   it('renders label, description and status through Field', () => {
     render(
       <DateInput
+        nativePicker="never"
         label="Ship date"
         description="When it leaves the warehouse"
         status={{type: 'error', message: 'Pick a date'}}
@@ -516,12 +597,21 @@ describe('DateInput — field parity', () => {
   });
 
   it('marks required for assistive technology', () => {
-    render(<DateInput label="Ship date" isRequired onChange={() => {}} />);
+    render(
+      <DateInput
+        nativePicker="never"
+        label="Ship date"
+        isRequired
+        onChange={() => {}}
+      />,
+    );
     expect(field()).toHaveAttribute('aria-required', 'true');
   });
 
   it('associates the label natively, so the field is named without ARIA', () => {
-    render(<DateInput label="Ship date" onChange={() => {}} />);
+    render(
+      <DateInput nativePicker="never" label="Ship date" onChange={() => {}} />,
+    );
     expect(screen.getByLabelText('Ship date')).toBe(field());
   });
 
@@ -536,6 +626,7 @@ describe('DateInput — field parity', () => {
     withLayout(() => {
       render(
         <DateInput
+          nativePicker="never"
           label="Ship date"
           value="2026-03-10"
           min="2026-03-01"
@@ -558,7 +649,7 @@ describe('DateInput — field parity', () => {
   it('drops the Field wrapper inside an InputGroup', () => {
     render(
       <InputGroup label="Range">
-        <DateInput label="Start" onChange={() => {}} />
+        <DateInput nativePicker="never" label="Start" onChange={() => {}} />
       </InputGroup>,
     );
     // Named by the group label plus its own, the way core's inputs are.
@@ -643,7 +734,13 @@ describe('DateInput — calendar surface', () => {
   it('Save closes even with no date chosen, committing nothing', () => {
     const onChange = vi.fn();
     withLayout(() => {
-      render(<DateInput label="Ship date" onChange={onChange} />);
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          onChange={onChange}
+        />,
+      );
       fireEvent.click(field());
       fireEvent.click(screen.getByRole('button', {name: 'Save'}));
     });
@@ -1519,12 +1616,22 @@ describe('DateInput — month/year wheels', () => {
     expect(title()).toHaveTextContent('May 2027');
   });
 
-  it('offers Reset only on the calendar, beside Save', () => {
+  it('offers Reset only on the calendar, in the header corner', () => {
     renderAndOpen();
-    expect(screen.getByRole('button', {name: 'Reset'})).toBeInTheDocument();
+    const reset = screen.getByRole('button', {name: 'Reset'});
+    // The trailing-most thing in the header, past the arrows — not the
+    // footer, which is Save's alone.
+    const header = reset.closest('[data-action="reset"]')!.parentElement!;
+    expect(header.querySelector('[data-title="month-year"]')).not.toBeNull();
+    expect(header.lastElementChild).toHaveAttribute('data-action', 'reset');
+
     openWheels();
     // The wheels choose a month; there is no date there to clear.
     expect(screen.queryByRole('button', {name: 'Reset'})).toBeNull();
+    // Hidden, not unmounted, so the header cannot change height mid-swap.
+    expect(
+      document.querySelector('dialog[open] [data-action="reset"]'),
+    ).toHaveAttribute('inert');
   });
 
   it('Save closes the whole picker; Done only leaves the wheels', () => {
@@ -2390,18 +2497,27 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     expect(footer).not.toContain('paddingInline');
   });
 
-  it('floors the touch target without discarding the size prop', () => {
-    const source = read('TouchDateField.tsx');
-    // Each size keeps its own height AND cannot render below a thumb's reach.
-    const sizeMap = source.slice(
-      source.indexOf('const sizeStyles = stylex.create('),
-      source.indexOf('const styles = stylex.create('),
+  it('sizes the closed field the same on both surfaces', () => {
+    // `DateInput` picks a surface from the pointer and `nativePicker`, so a
+    // field that sizes itself differently on one of them changes height for
+    // a reason the call site never asked about.
+    //
+    // Compared with formatting normalized away: the two files write the same
+    // declarations differently, one entry per line against one per size.
+    const sizeMap = (file: string) => {
+      const source = read(file);
+      const start = source.indexOf('const sizeStyles = stylex.create(');
+      expect(start).toBeGreaterThan(-1);
+      return source
+        .slice(start, source.indexOf('});', start))
+        .replace(/\/\/.*$/gm, '')
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        .replace(/\s+/g, '')
+        .replace(/,(?=[}\]])/g, '');
+    };
+    expect(sizeMap('TouchDateField.tsx')).toEqual(
+      sizeMap('NativeDateField.tsx'),
     );
-    expect(
-      sizeMap.match(
-        /minBlockSize: \{default: null, '@media \(pointer: coarse\)': TOUCH_TARGET\}/g,
-      ),
-    ).toHaveLength(3);
   });
 
   it('floors the month arrows too — Button tops out at 36px', () => {
@@ -2523,16 +2639,14 @@ describe('DateInput — scroll CSS (definition-level)', () => {
   });
 
   /**
-   * Both footer actions span the sheet. A full-width primary is the shape a
+   * The footer action spans the sheet. A full-width primary is the shape a
    * phone form ends with, and it puts the target under the thumb wherever
    * the hand is.
    */
-  it('spans the footer with its actions', () => {
+  it('spans the footer with its action', () => {
     const source = read('TouchDateField.tsx');
-    // Reset + Save share the calendar's cell; Done is the wheels'. Each
-    // fills the space it is given, so the row divides evenly rather than by
-    // label length.
-    expect(source.match(/width="100%"/g)).toHaveLength(3);
+    // One per surface: Save on the calendar, Done on the wheels.
+    expect(source.match(/width="100%"/g)).toHaveLength(2);
   });
 
   /**
@@ -2581,7 +2695,7 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     expect(
       styles.match(/transitionTimingFunction: easeVars\['--ease-standard'\]/g),
     ).toHaveLength(1);
-    expect(styles.match(/transitionTimingFunction: 'linear'/g)).toHaveLength(3);
+    expect(styles.match(/transitionTimingFunction: 'linear'/g)).toHaveLength(4);
   });
 
   /**
@@ -2599,9 +2713,9 @@ describe('DateInput — scroll CSS (definition-level)', () => {
     const styles = source.slice(
       source.indexOf('const styles = stylex.create('),
     );
-    // The arrows, the weekday row, the layer beneath, the layer above, and
-    // the chevron.
-    expect(styles.match(/transitionDuration: SWAP_DURATION/g)).toHaveLength(5);
+    // The arrows, Reset, the weekday row, the layer beneath, the layer
+    // above, and the chevron.
+    expect(styles.match(/transitionDuration: SWAP_DURATION/g)).toHaveLength(6);
     // And no leftover hand-rolled timing beside them.
     expect(styles).not.toContain('PANEL_FADE_MS');
     expect(source).toContain(

package/src/DateInput/MonthScroller.tsx

@@ -25,6 +25,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/TouchDateField.tsx
+ * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
@@ -39,7 +40,7 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {useCalendarDays} from '../Calendar';
-import {useDirection} from '../i18n';
+import {useDirection, useLocale} from '../i18n';
 import {
   colorVars,
   radiusVars,
@@ -763,6 +764,7 @@ function MonthPane({
   onDayKeyDown,
   onDayFocus,
 }: MonthPaneProps) {
+  const locale = useLocale();
   const {year, month} = fromMonthIndex(monthIndex);
   const {weeks} = useCalendarDays({
     year,
@@ -776,6 +778,7 @@ function MonthPane({
   const monthLabel = plainDateFormat(
     {year, month, day: 1},
     DATE_FORMAT_MONTH_YEAR,
+    locale,
   );
 
   // Exactly one day per pane is tab-reachable, so Tab moves through the
@@ -836,6 +839,7 @@ function MonthPane({
                   aria-label={plainDateFormat(
                     day.date,
                     DATE_FORMAT_WITH_WEEKDAY,
+                    locale,
                   )}
                   aria-disabled={isDisabled || undefined}
                   aria-current={isToday ? 'date' : undefined}