@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/src/Table/TableRow.tsx

@@ -61,13 +61,13 @@ const hoverRowStyles = stylex.create({
   row: {
     backgroundColor: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
     '--table-row-overlay': {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -82,14 +82,14 @@ const stripedHoverRowStyles = stylex.create({
     backgroundColor: {
       default: null,
       ':nth-child(even)': colorVars['--color-background-muted'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
     '--table-row-overlay': {
       default: null,
       ':nth-child(even)': colorVars['--color-background-muted'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -216,7 +216,8 @@ const handleStyles = stylex.create({
     // can't receive :hover directly.
     '--indicator-color': {
       default: 'transparent',
-      ':hover': colorVars['--color-accent'],
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))':
+        colorVars['--color-accent'],
       ':focus-visible': colorVars['--color-accent'],
     },
     '@media (pointer: coarse)': {

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -148,7 +148,8 @@ const styles = stylex.create({
     cursor: 'pointer',
     color: {
       default: colorVars['--color-icon-secondary'],
-      ':hover': colorVars['--color-icon-primary'],
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))':
+        colorVars['--color-icon-primary'],
     },
   },
   chevronIcon: {

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -23,6 +23,7 @@ import {spacingVars, colorVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
 import {useTranslator} from '../../../i18n';
+import {rtlStyles} from '../../../utils';
 import type {
   TablePlugin,
   TableColumn,
@@ -84,16 +85,28 @@ const expansionStyles = stylex.create({
     // Match IconButton ghost hover: subtle overlay background.
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       color: colorVars['--color-icon-primary'],
     },
   },
+  // The RTL mirror is folded into each state's transform rather than living
+  // on a parent span, matching TreeListItem's chevron (both are `transform`,
+  // so on one element the later value would win).
   chevronExpanded: {
-    transform: 'rotate(90deg)',
+    transform: {
+      default: 'rotate(90deg)',
+      ':is([dir="rtl"] *)': 'scaleX(-1) rotate(90deg)',
+    },
+  },
+  chevronCollapsed: {
+    transform: {
+      default: 'rotate(0deg)',
+      ':is([dir="rtl"] *)': 'scaleX(-1) rotate(0deg)',
+    },
   },
   expandedRow: {
     backgroundColor: colorVars['--color-background-muted'],
@@ -121,7 +134,9 @@ function ExpansionChevron({
       type="button"
       {...stylex.props(
         expansionStyles.chevronButton,
-        isExpanded && expansionStyles.chevronExpanded,
+        isExpanded
+          ? expansionStyles.chevronExpanded
+          : expansionStyles.chevronCollapsed,
       )}
       onClick={e => {
         e.stopPropagation();
@@ -249,6 +264,9 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                   icon={isExpanded ? 'chevronDown' : 'chevronRight'}
                   size="xsm"
                   aria-hidden
+                  // chevronDown needs no mirroring; chevronRight (collapsed,
+                  // pointing toward the reveal direction) does.
+                  xstyle={!isExpanded && rtlStyles.mirror}
                 />
               ),
               onSelect: () => onToggle(key),

package/src/Table/plugins/sortable/useTableSortableState.test.tsx

@@ -17,6 +17,7 @@ import {useTableSortable} from './useTableSortable';
 import type {TableSortState} from './useTableSortable';
 import {useTableSortableState} from './useTableSortableState';
 import type {UseTableSortableStateConfig} from './useTableSortableState';
+import {InternationalizationProvider} from '../../../i18n';
 
 // =============================================================================
 // Test Data
@@ -119,6 +120,39 @@ describe('useTableSortableState', () => {
       ]);
     });
 
+    it('re-sorts strings when the provider locale changes', () => {
+      const localeData: Employee[] = [
+        {
+          id: '1',
+          name: 'z',
+          age: 1,
+          department: 'Test',
+          salary: 1,
+        },
+        {
+          id: '2',
+          name: 'ä',
+          age: 2,
+          department: 'Test',
+          salary: 2,
+        },
+      ];
+      const table = (locale: string) => (
+        <InternationalizationProvider locale={locale}>
+          <SortableStateTable
+            data={localeData}
+            defaultSort={[{sortKey: 'name', direction: 'ascending'}]}
+          />
+        </InternationalizationProvider>
+      );
+
+      const {rerender} = render(table('sv-SE'));
+      expect(getNameColumnValues()).toEqual(['z', 'ä']);
+
+      rerender(table('de-DE'));
+      expect(getNameColumnValues()).toEqual(['ä', 'z']);
+    });
+
     it('renders unsorted when no defaultSort', () => {
       render(<SortableStateTable />);
 

package/src/Table/plugins/sortable/useTableSortableState.tsx

@@ -18,10 +18,8 @@
  */
 
 import {useState, useMemo, useCallback, useRef} from 'react';
-import type {
-  TableSortState,
-  UseTableSortableConfig,
-} from './useTableSortable';
+import type {TableSortState, UseTableSortableConfig} from './useTableSortable';
+import {useCollator} from '../../../i18n/useCollator';
 
 // =============================================================================
 // Comparator Types
@@ -104,14 +102,16 @@ export interface UseTableSortableStateConfig<
    * two row items. Comparators should sort ascending — the hook flips the
    * sign for descending.
    *
-   * For keys not in this map, the hook falls back to `localeCompare` with
-   * `{ numeric: true }` on the stringified values.
+   * For keys not in this map, the hook falls back to an `Intl.Collator`
+   * comparison (`{numeric: true}`) on the stringified values, bound to the
+   * active `InternationalizationProvider` locale.
    *
    * @example
    * ```
+   * const collator = useCollator({numeric: true});
    * comparators: {
    *   age: (a, b) => a.age - b.age,
-   *   name: (a, b) => a.name.localeCompare(b.name),
+   *   name: (a, b) => collator.compare(a.name, b.name),
    * }
    * ```
    */
@@ -164,6 +164,7 @@ function defaultCompare<T extends Record<string, unknown>>(
   a: T,
   b: T,
   sortKey: string,
+  collator: Intl.Collator,
 ): number {
   const aVal = a[sortKey];
   const bVal = b[sortKey];
@@ -171,8 +172,10 @@ function defaultCompare<T extends Record<string, unknown>>(
   // null/undefined/NaN sort to the end. NaN must not reach the numeric fast
   // path: a NaN comparator result reads as "equal" to Array.sort, which makes
   // the comparator inconsistent and corrupts the order of the other rows.
-  const aMissing = aVal == null || (typeof aVal === 'number' && Number.isNaN(aVal));
-  const bMissing = bVal == null || (typeof bVal === 'number' && Number.isNaN(bVal));
+  const aMissing =
+    aVal == null || (typeof aVal === 'number' && Number.isNaN(aVal));
+  const bMissing =
+    bVal == null || (typeof bVal === 'number' && Number.isNaN(bVal));
   if (aMissing && bMissing) {
     return 0;
   }
@@ -188,14 +191,9 @@ function defaultCompare<T extends Record<string, unknown>>(
     return aVal - bVal;
   }
 
-  // string comparison with numeric collation
-  return toSortableString(aVal).localeCompare(
-    toSortableString(bVal),
-    undefined,
-    {
-      numeric: true,
-    },
-  );
+  // string comparison with numeric collation, bound to the provider locale
+  // via useCollator() rather than a raw localeCompare(value, locale) call.
+  return collator.compare(toSortableString(aVal), toSortableString(bVal));
 }
 
 // =============================================================================
@@ -208,7 +206,8 @@ function sortData<
 >(
   data: T[],
   sortState: TableSortState<TSortKey>,
-  comparators?: Partial<Record<TSortKey, TableSortComparator<T>>>,
+  comparators: Partial<Record<TSortKey, TableSortComparator<T>>> | undefined,
+  collator: Intl.Collator,
 ): T[] {
   if (sortState.length === 0) {
     return data;
@@ -218,7 +217,9 @@ function sortData<
     for (const entry of sortState) {
       const {sortKey, direction} = entry;
       const customCmp = comparators?.[sortKey];
-      const cmp = customCmp ? customCmp(a, b) : defaultCompare(a, b, sortKey);
+      const cmp = customCmp
+        ? customCmp(a, b)
+        : defaultCompare(a, b, sortKey, collator);
 
       if (cmp !== 0) {
         return direction === 'ascending' ? cmp : -cmp;
@@ -265,6 +266,7 @@ export function useTableSortableState<
     allowUnsortedState,
     isMultiSortEnabled,
   } = config;
+  const collator = useCollator({numeric: true});
 
   // Internal state (used in uncontrolled mode)
   const [internalSort, setInternalSort] =
@@ -287,14 +289,15 @@ export function useTableSortableState<
 
   // Sorted data — memoized on sort state + data identity
   const sortedData = useMemo(
-    () => sortData(data, sort, comparatorsRef.current),
-    [data, sort],
+    () => sortData(data, sort, comparatorsRef.current, collator),
+    [data, sort, collator],
   );
 
   // applySort — lets consumers sort arbitrary data with the current state
   const applySort = useCallback(
-    (inputData: T[]): T[] => sortData(inputData, sort, comparatorsRef.current),
-    [sort],
+    (inputData: T[]): T[] =>
+      sortData(inputData, sort, comparatorsRef.current, collator),
+    [sort, collator],
   );
 
   // Config ready for useTableSortable

package/src/Table/plugins/tree/useTableTreeData.tsx

@@ -251,11 +251,11 @@ const treeStyles = stylex.create({
     // Match IconButton ghost hover: subtle overlay background
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       color: colorVars['--color-icon-primary'],
     },
   },

package/src/TextArea/TextArea.doc.mjs

@@ -105,7 +105,7 @@ export const docs = {
       name: 'maxLength',
       type: 'number',
       description:
-        'Maximum number of characters allowed, counted as user-perceived characters — an emoji or flag sequence counts as one. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced. Consumers validating the limit should count with characterCount (exported from the package) so enforcement matches the displayed count.',
+        'Maximum number of characters allowed, counted as user-perceived characters: an emoji or flag sequence counts as one. When set, a character counter (current/max) is displayed inside the input container, anchored to the bottom-right beneath the text. Does not enforce the limit natively; when exceeded the counter turns red and shows a warning icon (a non-color cue), and screen-reader users hear the remaining/over-limit count announced. Consumers validating the limit should count with characterCount (exported from the package) so enforcement matches the displayed count.',
     },
     {
       name: 'status',

package/src/TextArea/TextArea.tsx

@@ -52,6 +52,7 @@ import type {SizeValue} from '../utils/types';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useAnnounce} from '../hooks/useAnnounce';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {characterCount} from '../utils/characters';
@@ -394,6 +395,7 @@ export function TextArea({
 }: TextAreaProps) {
   const size = useSize(sizeProp, 'md');
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const announce = useAnnounce();
   const id = useId();
   const descriptionID = useId();
@@ -598,7 +600,7 @@ export function TextArea({
           autoFocus={hasAutoFocus}
           data-autofocus={hasAutoFocus || undefined}
           aria-describedby={ariaDescribedBy}
-          aria-required={isRequired && !isOptional ? 'true' : undefined}
+          aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={
             status?.type === 'error' ||
             (maxLength != null && valueLength > maxLength)

package/src/TextInput/TextInput.tsx

@@ -101,6 +101,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -301,6 +302,7 @@ export function TextInput({
   ...rest
 }: TextInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const size = useSize(sizeProp, 'md');
 
   const id = useId();
@@ -445,7 +447,7 @@ export function TextInput({
         autoFocus={hasAutoFocus}
         data-autofocus={hasAutoFocus || undefined}
         aria-describedby={ariaDescribedBy}
-        aria-required={isRequired === true ? 'true' : undefined}
+        aria-required={isEffectivelyRequired ? 'true' : undefined}
         aria-invalid={status?.type === 'error' ? 'true' : undefined}
         aria-busy={isBusy || undefined}
         aria-labelledby={ariaLabelledBy}

package/src/Thumbnail/Thumbnail.tsx

@@ -183,7 +183,7 @@ const styles = stylex.create({
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover::after': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))::after': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },

package/src/TimeInput/TimeInput.tsx

@@ -67,6 +67,7 @@ import {useSize} from '../SizeContext/SizeContext';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useTooltip} from '../Tooltip';
@@ -347,6 +348,7 @@ export function TimeInput({
   ref,
 }: TimeInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
     placeholderFromProps ?? t('@astryx.timeInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -664,7 +666,7 @@ export function TimeInput({
         autoFocus={hasAutoFocus}
         data-autofocus={hasAutoFocus || undefined}
         aria-describedby={ariaDescribedBy}
-        aria-required={isRequired === true ? 'true' : undefined}
+        aria-required={isEffectivelyRequired ? 'true' : undefined}
         aria-invalid={
           status?.type === 'error' || !isInputValid ? 'true' : undefined
         }

package/src/Timestamp/Timestamp.test.tsx

@@ -257,6 +257,26 @@ describe('Timestamp', () => {
 
   // --- Standard display formats ---
 
+  it('updates absolute output when the provider locale changes', () => {
+    const value = '2026-01-25T12:00:00Z';
+    const timestamp = (locale: string) => (
+      <InternationalizationProvider locale={locale}>
+        <Timestamp
+          value={value}
+          format="date_long"
+          hasTooltip={false}
+          data-testid="ts"
+        />
+      </InternationalizationProvider>
+    );
+
+    const {rerender} = render(timestamp('en-US'));
+    expect(screen.getByTestId('ts')).toHaveTextContent('January 25, 2026');
+
+    rerender(timestamp('de-DE'));
+    expect(screen.getByTestId('ts')).toHaveTextContent('25. Januar 2026');
+  });
+
   it('renders date format', () => {
     render(
       <Timestamp value="2026-02-19T17:00:00Z" format="date" data-testid="ts" />,
@@ -441,7 +461,7 @@ describe('Timestamp', () => {
     );
 
     const longTz =
-      new Intl.DateTimeFormat(undefined, {timeZoneName: 'long'})
+      new Intl.DateTimeFormat('en', {timeZoneName: 'long'})
         .formatToParts(oneHourAgo)
         .find(p => p.type === 'timeZoneName')?.value ?? '';
     expect(longTz).not.toBe('');
@@ -462,7 +482,7 @@ describe('Timestamp', () => {
     );
 
     const tzPart = (form: 'short' | 'long') =>
-      new Intl.DateTimeFormat(undefined, {timeZoneName: form})
+      new Intl.DateTimeFormat('en', {timeZoneName: form})
         .formatToParts(date)
         .find(p => p.type === 'timeZoneName')?.value ?? '';
     const text = screen.getByTestId('ts').textContent ?? '';
@@ -673,7 +693,7 @@ describe('Timestamp', () => {
       // no-break spaces that jest-dom's matcher normalization would break on.
       const normalize = (s: string) => s.replace(/\s+/g, ' ');
       const datetime = new Date(el.getAttribute('datetime') ?? '');
-      const expected = new Intl.DateTimeFormat(undefined, {
+      const expected = new Intl.DateTimeFormat('en', {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
@@ -789,7 +809,7 @@ describe('Timestamp', () => {
       const datetime = new Date(
         screen.getByTestId('ts').getAttribute('datetime') ?? '',
       );
-      const expected = new Intl.DateTimeFormat(undefined, {
+      const expected = new Intl.DateTimeFormat('en', {
         year: 'numeric',
         month: 'long',
         day: 'numeric',
@@ -1252,7 +1272,7 @@ describe('Timestamp', () => {
             data-testid="ts"
           />,
         );
-        const [line] = formatTooltipLines(new Date(VALUE), [{format}]);
+        const [line] = formatTooltipLines(new Date(VALUE), [{format}], 'en');
         expect(line.value).toBe(screen.getByTestId('ts').textContent);
       },
     );
@@ -1275,10 +1295,10 @@ describe('Timestamp', () => {
       );
       const date = new Date(VALUE);
       const tzPart = (form: 'short' | 'long') =>
-        new Intl.DateTimeFormat(undefined, {timeZoneName: form})
+        new Intl.DateTimeFormat('en', {timeZoneName: form})
           .formatToParts(date)
           .find(p => p.type === 'timeZoneName')?.value ?? '';
-      const [line] = formatTooltipLines(date, [{format: 'full'}]);
+      const [line] = formatTooltipLines(date, [{format: 'full'}], 'en');
       expect(screen.getByTestId('ts').getAttribute('aria-label')).toBe(
         line.value.replace(tzPart('short'), tzPart('long')),
       );

package/src/Timestamp/Timestamp.tsx

@@ -23,6 +23,7 @@ import type {TextType, TextSize, TextColor, TextWeight} from '../theme/types';
 import {mergeProps, mergeRefs} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useTranslator} from '../i18n';
+import {useLocale} from '../i18n/useLocale';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {formatInstant} from './formatInstant';
@@ -419,6 +420,7 @@ export function Timestamp({
   'data-testid': testId,
 }: TimestampProps) {
   const t = useTranslator();
+  const locale = useLocale();
   const timeRef = useRef<HTMLTimeElement>(null);
   const [now, setNow] = useState(() => new Date());
 
@@ -448,16 +450,18 @@ export function Timestamp({
       : effectiveFormat === 'relative_short'
         ? getRelativeTimeShortString(date, now)
         : isAbsoluteFormat(effectiveFormat)
-          ? formatInstant(date, effectiveFormat, {isTimezoneShown})
+          ? formatInstant(date, effectiveFormat, locale, {isTimezoneShown})
           : '';
 
   // Full absolute text for the tooltip (visible — keeps the compact timezone
   // abbreviation) and for the AT-facing aria-label, which spells the timezone
   // out in full: abbreviations like "PST" or "GMT+2" are unexpanded
   // abbreviations to a screen-reader user (WCAG 3.1.4).
-  const fullAbsoluteText = isValidDate ? formatInstant(date, 'full') : '';
+  const fullAbsoluteText = isValidDate
+    ? formatInstant(date, 'full', locale)
+    : '';
   const ariaLabelText = isValidDate
-    ? formatInstant(date, 'full', {timeZoneNameStyle: 'long'})
+    ? formatInstant(date, 'full', locale, {timeZoneNameStyle: 'long'})
     : '';
 
   // Live updates
@@ -506,7 +510,7 @@ export function Timestamp({
   const lines: ReadonlyArray<TimestampTooltipLine> =
     entries === undefined
       ? [{value: fullAbsoluteText, isCopyable: true}]
-      : formatTooltipLines(date, entries);
+      : formatTooltipLines(date, entries, locale);
 
   const timestampProps = mergeProps(
     themeProps('timestamp', {format: effectiveFormat}),

package/src/Timestamp/formatInstant.ts

@@ -30,6 +30,7 @@
  */
 
 import {SHARED_DATE_FORMAT_OPTIONS, getTimeZoneParts} from '../utils/plainDate';
+import type {Locale} from '../i18n/types';
 import type {TimestampFormat} from './Timestamp';
 
 // =============================================================================
@@ -159,12 +160,13 @@ function getWallClock(date: Date, timeZone: string | undefined): WallClock {
 /**
  * Renders one instant in one absolute format.
  *
- * Pure: the same arguments always produce the same string for a given host
+ * Pure: the same arguments always produce the same string for the requested
  * locale (and, when no `timeZone` is given, host zone).
  */
 export function formatInstant(
   date: Date,
   format: InstantFormat,
+  locale: Locale,
   {
     timeZone,
     isTimezoneShown = false,
@@ -176,39 +178,39 @@ export function formatInstant(
 
   switch (format) {
     case 'full':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...FULL_OPTIONS,
         timeZoneName: timeZoneNameStyle,
         ...zone,
       }).format(date);
 
     case 'date':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...SHARED_DATE_FORMAT_OPTIONS.date,
         ...zone,
       }).format(date);
 
     case 'date_long':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...SHARED_DATE_FORMAT_OPTIONS.date_long,
         ...zone,
       }).format(date);
 
     case 'date_weekday':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...SHARED_DATE_FORMAT_OPTIONS.date_weekday,
         ...zone,
       }).format(date);
 
     case 'date_time':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...DATE_TIME_OPTIONS,
         ...zoneName,
         ...zone,
       }).format(date);
 
     case 'time':
-      return new Intl.DateTimeFormat(undefined, {
+      return new Intl.DateTimeFormat(locale, {
         ...TIME_OPTIONS,
         ...zoneName,
         ...zone,

package/src/Timestamp/tooltipEntries.test.ts

@@ -16,12 +16,17 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {SHARED_DATE_FORMAT_OPTIONS} from '../utils/plainDate';
-import {formatTooltipLines} from './tooltipEntries';
+import {formatTooltipLines as formatTooltipLinesForLocale} from './tooltipEntries';
+
+const formatTooltipLines = (
+  date: Parameters<typeof formatTooltipLinesForLocale>[0],
+  entries: Parameters<typeof formatTooltipLinesForLocale>[1],
+) => formatTooltipLinesForLocale(date, entries, 'en-US');
 
 /** 2026-02-19T17:00:00Z — chosen so several zones land on different dates. */
 const INSTANT = new Date('2026-02-19T17:00:00Z');
 
-const LOCAL_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+const LOCAL_ZONE = Intl.DateTimeFormat('en-US').resolvedOptions().timeZone;
 
 describe('formatTooltipLines', () => {
   // --- Explicit zones: exact, locale-free, TZ-agnostic ---
@@ -86,7 +91,7 @@ describe('formatTooltipLines', () => {
       for (const timezoneID of ['UTC', 'Asia/Tokyo']) {
         const [line] = formatTooltipLines(INSTANT, [{timezoneID, format}]);
         expect(line.value).toBe(
-          new Intl.DateTimeFormat(undefined, {
+          new Intl.DateTimeFormat('en-US', {
             ...SHARED_DATE_FORMAT_OPTIONS[format],
             timeZone: timezoneID,
           }).format(INSTANT),
@@ -208,7 +213,7 @@ describe('formatTooltipLines', () => {
       {format: 'date_time'},
       {format: 'system_date_time'},
     ]);
-    const localName = new Intl.DateTimeFormat(undefined, {
+    const localName = new Intl.DateTimeFormat('en-US', {
       timeZoneName: 'short',
     })
       .formatToParts(INSTANT)
@@ -230,7 +235,7 @@ describe('formatTooltipLines', () => {
     // aria-describedby, and that element's accessible name is the LOCAL
     // absolute time. A lone foreign-zone line with no marker is therefore
     // announced right after a local time, with nothing to say it is not one.
-    const zoneName = new Intl.DateTimeFormat(undefined, {
+    const zoneName = new Intl.DateTimeFormat('en-US', {
       timeZone: 'Asia/Tokyo',
       timeZoneName: 'short',
     })
@@ -248,7 +253,7 @@ describe('formatTooltipLines', () => {
     // The consumer never named a zone, so there is nothing to disambiguate
     // against — this must stay as bare as the visible text is by default.
     const [line] = formatTooltipLines(INSTANT, [{format: 'date_time'}]);
-    const localName = new Intl.DateTimeFormat(undefined, {
+    const localName = new Intl.DateTimeFormat('en-US', {
       timeZoneName: 'short',
     })
       .formatToParts(INSTANT)