@astryxdesign/core 0.7.3-canary.b74cf21 → 0.7.3-canary.ca48bb7

package/src/SideNav/SideNav.test.tsx

@@ -3691,3 +3691,38 @@ describe('SideNav collapse conflict warning', () => {
     expect(warn).not.toHaveBeenCalled();
   });
 });
+
+// =============================================================================
+// SideNavItem — collapsed-from-mount rail tooltip
+// =============================================================================
+
+describe('SideNavItem collapsed-from-mount rail tooltip', () => {
+  // #7692: a childless item that mounts inside an already-collapsed SideNav
+  // renders its Tooltip inside the very element anchorRef points at. React
+  // attaches that ref only after the tooltip's layout effect has run, so the
+  // tooltip never attached and a persisted collapsed rail lost all tooltips
+  // on page load.
+  it('anchors the rail tooltip when the nav is collapsed at mount', async () => {
+    render(
+      <SideNav
+        aria-label="Main"
+        collapsible={{isCollapsed: true, hasButton: false}}>
+        <SideNavItem label="Dashboard" icon={StubIcon} href="/dashboard" />
+      </SideNav>,
+    );
+    const link = screen.getByRole('link', {name: 'Dashboard'});
+    const anchor = link.parentElement as HTMLElement;
+
+    // The tooltip attaches despite mounting inside its own anchor: the item
+    // row is described by the tooltip layer.
+    await waitFor(() => {
+      expect(anchor.getAttribute('aria-describedby')).not.toBe('');
+    });
+    const layer = document.getElementById(
+      anchor.getAttribute('aria-describedby') as string,
+    );
+    expect(layer).not.toBeNull();
+    expect(layer).toHaveAttribute('role', 'tooltip');
+    expect(layer).toHaveTextContent('Dashboard');
+  });
+});

package/src/Slider/Slider.test.tsx

@@ -385,7 +385,7 @@ describe('Slider', () => {
     render(<Slider label="Volume" value={50} isDisabled />);
     const slider = screen.getByRole('slider');
     expect(slider).toHaveAttribute('aria-disabled', 'true');
-    expect(slider).toHaveAttribute('tabIndex', '-1');
+    expect(slider).toHaveAttribute('tabIndex', '0');
   });
 
   it('does not fire onChange on pointer down when disabled', () => {
@@ -1111,11 +1111,11 @@ describe('Slider', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains non-focusable when disabled without a reason', () => {
+    it('stays focusable when disabled without a reason', () => {
       render(
         <Slider label="Volume" value={50} valueDisplay="none" isDisabled />,
       );
-      expect(screen.getByRole('slider')).toHaveAttribute('tabindex', '-1');
+      expect(screen.getByRole('slider')).toHaveAttribute('tabindex', '0');
     });
   });
   describe('form participation', () => {

package/src/Slider/Slider.tsx

@@ -558,15 +558,12 @@ export function Slider({ref, ...props}: SliderProps) {
 
   const handleThumbFocus = useCallback(
     (thumbIndex: number, _e: FocusEvent<HTMLDivElement>) => {
-      // A disabled thumb draws no ring even when it stays focusable for its
-      // reason tooltip, so there is nothing to track for one.
+      // A focused disabled thumb still shows the ring (spec:AST-085 FR6).
       setKeyboardFocusThumb(
-        !isDisabled && getInteractionModality() === 'keyboard'
-          ? thumbIndex
-          : null,
+        getInteractionModality() === 'keyboard' ? thumbIndex : null,
       );
     },
-    [isDisabled],
+    [],
   );
 
   const handleThumbBlur = useCallback((_e: FocusEvent<HTMLDivElement>) => {
@@ -960,10 +957,8 @@ export function Slider({ref, ...props}: SliderProps) {
         ref={!isRange ? ref : undefined}
         id={!isRange ? id : undefined}
         role="slider"
-        // With a disabledMessage the thumb keeps focusability so the reason is
-        // focus-discoverable; value changes stay blocked by the isDisabled
-        // guards in the pointer/keyboard handlers.
-        tabIndex={isDisabled && !showsDisabledMessage ? -1 : 0}
+        // A disabled thumb keeps its Tab stop (spec:AST-085 FR1).
+        tabIndex={0}
         aria-valuemin={ariaValueMin}
         aria-valuemax={ariaValueMax}
         aria-valuenow={val}
@@ -999,8 +994,7 @@ export function Slider({ref, ...props}: SliderProps) {
               : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
             !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed,
-            !isDisabled &&
-              keyboardFocusThumb === thumbIndex &&
+            keyboardFocusThumb === thumbIndex &&
               focusOutlineStyles.focusVisible,
             isDisabled && styles.thumbDisabled,
           ),
@@ -1095,7 +1089,9 @@ export function Slider({ref, ...props}: SliderProps) {
           }),
           stylex.props(styles.sliderRow),
         )}>
+        {/* A disabled slider submits no value (spec:AST-085 FR3). */}
         {htmlName != null &&
+          !isDisabled &&
           values.map((v, i) => (
             <input
               // Positional identity: index 0 is the start thumb, 1 the end.
@@ -1103,9 +1099,6 @@ export function Slider({ref, ...props}: SliderProps) {
               type="hidden"
               name={htmlName}
               value={String(v)}
-              // Disabled native controls are excluded from form submission;
-              // mirror that for the hidden carrier.
-              disabled={isDisabled}
             />
           ))}
         <div

package/src/Switch/Switch.test.tsx

@@ -22,6 +22,7 @@
  * SYNC: When Switch.tsx changes, update tests to match new behavior
  */
 
+import {StrictMode} from 'react';
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -417,6 +418,61 @@ describe('Switch', () => {
     });
   });
 
+  it('announces one busy start once under StrictMode, from the switch alone', async () => {
+    // Count every message the shared polite region is given. Each announce
+    // writes its text in a later frame, so two announces add it twice.
+    const written: string[] = [];
+    const observer = new MutationObserver(records => {
+      for (const record of records) {
+        const target = record.target as Element;
+        if (target.getAttribute?.('data-astryx-live-region') !== 'polite') {
+          continue;
+        }
+        for (const node of record.addedNodes) {
+          if (node.textContent) {written.push(node.textContent);}
+        }
+      }
+    });
+    observer.observe(document.body, {childList: true, subtree: true});
+
+    const {container} = render(
+      <StrictMode>
+        <Switch
+          label="Sync photos"
+          value={false}
+          onChange={() => {}}
+          isLoading
+        />
+      </StrictMode>,
+    );
+    await waitFor(() => {
+      expect(written).toContain('Loading');
+    });
+    await new Promise(resolve => setTimeout(resolve, 50));
+    observer.disconnect();
+
+    expect(written.filter(text => text === 'Loading')).toHaveLength(1);
+    // The thumb's spinner is a silent indicator: no live role reaches
+    // assistive technology from inside the switch.
+    for (const status of container.querySelectorAll('[role="status"]')) {
+      expect(status.closest('[aria-hidden="true"]')).not.toBeNull();
+    }
+    expect(container.querySelector('[aria-live]')).toBeNull();
+  });
+
+  it('announces again when the switch becomes busy again after settling', async () => {
+    const polite = () =>
+      document.querySelector('[data-astryx-live-region="polite"]');
+    const props = {label: 'Sync photos', value: false, onChange: () => {}};
+    const {rerender} = render(<Switch {...props} isLoading />);
+    await waitFor(() => expect(polite()).toHaveTextContent('Loading'));
+
+    rerender(<Switch {...props} />);
+    polite()!.textContent = '';
+    rerender(<Switch {...props} isLoading />);
+    await waitFor(() => expect(polite()).toHaveTextContent('Loading'));
+  });
+
   it('localizes the loading announcement through the i18n catalog', async () => {
     render(
       <InternationalizationProvider
@@ -624,16 +680,37 @@ describe('Switch', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains natively disabled when disabled without a reason', () => {
+    it('stays focusable via aria-disabled when disabled without a reason', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const onClick = vi.fn();
       render(
-        <Switch
-          label="Enable notifications"
-          value={false}
-          onChange={() => {}}
-          isDisabled
-        />,
+        <form>
+          <Switch
+            label="Enable notifications"
+            value={false}
+            onChange={onChange}
+            onClick={onClick}
+            htmlName="notifications"
+            isRequired
+            isDisabled
+          />
+        </form>,
       );
-      expect(screen.getByRole('switch')).toBeDisabled();
+      const control = screen.getByRole('switch');
+      expect(control).not.toHaveAttribute('disabled');
+      expect(control).toHaveAttribute('aria-disabled', 'true');
+      await user.tab();
+      expect(control).toHaveFocus();
+      await user.keyboard(' ');
+      await user.click(control);
+      await user.click(screen.getByText('Enable notifications'));
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onClick).not.toHaveBeenCalled();
+      expect(control).not.toBeChecked();
+      const form = control.closest('form')!;
+      expect(form.checkValidity()).toBe(true);
+      expect([...new FormData(form).keys()]).toEqual([]);
     });
   });
   describe('labelSpacing', () => {

package/src/Switch/Switch.tsx

@@ -21,6 +21,7 @@ import {
   useOptimistic,
   useTransition,
   useEffect,
+  useRef,
   type ChangeEvent,
   type FocusEvent,
   type ReactNode,
@@ -43,7 +44,7 @@ import type {InputStatus} from '../Field/types';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps, mergeRefs, rtlStyles} from '../utils';
-import {switchScope} from './switch.markers.stylex';
+import {switchFocusScope, switchScope} from './switch.markers.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -265,12 +266,12 @@ const styles = stylex.create({
   trackFocus: {
     outline: {
       default: 'none',
-      [stylex.when.ancestor(':has(:focus-visible)', switchScope)]:
+      [stylex.when.ancestor(':has(:focus-visible)', switchFocusScope)]:
         `${focusVars['--focus-outline-width']} ${focusVars['--focus-outline-style']} ${focusVars['--focus-outline-color']}`,
     },
     outlineOffset: {
       default: null,
-      [stylex.when.ancestor(':has(:focus-visible)', switchScope)]:
+      [stylex.when.ancestor(':has(:focus-visible)', switchFocusScope)]:
         focusVars['--focus-outline-offset'],
     },
   },
@@ -587,10 +588,20 @@ export function Switch({
   const isBusy = isLoading || optimisticValue !== value;
 
   const announce = useAnnounce();
+  // One announcement per busy start (spec:AST-086 FR6). The ref outlives
+  // StrictMode's effect replay and rerenders, so only a new busy start (busy
+  // again after settling) speaks again.
+  const announcedBusyRef = useRef(false);
   useEffect(() => {
-    if (isBusy) {
-      announce(t('@astryx.switch.loading'));
+    if (!isBusy) {
+      announcedBusyRef.current = false;
+      return;
     }
+    if (announcedBusyRef.current) {
+      return;
+    }
+    announcedBusyRef.current = true;
+    announce(t('@astryx.switch.loading'));
   }, [announce, isBusy, t]);
 
   const isOn = optimisticValue === true;
@@ -637,17 +648,13 @@ export function Switch({
         id={id}
         type="checkbox"
         role="switch"
-        // Withhold the name while disabled: with a disabledMessage the
-        // input stays focusable (not natively disabled), and a disabled
-        // control must not submit.
+        // Withhold the name while disabled: the input stays focusable (not
+        // natively disabled), and a disabled control must not submit.
         name={isDisabled ? undefined : htmlName}
         checked={isOn}
-        // With a disabledMessage the switch keeps focusability via aria-disabled
-        // so the reason is focus-discoverable; toggling is still blocked by the
-        // isDisabled guard in onChange below.
-        disabled={isDisabled && !showsDisabledMessage}
-        aria-disabled={showsDisabledMessage ? 'true' : undefined}
-        form={showsDisabledMessage ? '' : undefined}
+        // Focusable but detached from the form while disabled (spec:AST-085).
+        aria-disabled={isDisabled ? 'true' : undefined}
+        form={isDisabled ? '' : undefined}
         required={isRequired}
         aria-required={isEffectivelyRequired ? 'true' : undefined}
         onChange={e => {
@@ -693,7 +700,7 @@ export function Switch({
             styles.track,
             trackSizeStyles[size],
             isOn ? styles.trackOn : styles.trackOff,
-            !isDisabled && styles.trackFocus,
+            styles.trackFocus,
             isDisabled && styles.trackDisabled,
             isDisabled && !isOn && styles.trackDisabledOff,
           ),
@@ -747,7 +754,9 @@ export function Switch({
         className,
         style,
       )}
-      {...rest}>
+      {...rest}
+      // Native `disabled` suppressed clicks on the switch (spec:AST-085 FR2).
+      onClick={isDisabled ? undefined : rest.onClick}>
       <div
         ref={el => {
           // Interaction (hover/focus) listeners for the disabled-message
@@ -764,6 +773,7 @@ export function Switch({
           isLabelHidden && styles.containerLabelHidden,
           labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
+          switchFocusScope,
           // The touch press's strength and release live on the row the
           // controller writes to; the track and thumb inherit and paint it.
           !isDisabled && interactionOverlayStyles.pressedAlpha,

package/src/Switch/__tests__/Switch.a11y.states.ts

@@ -147,7 +147,7 @@ export const SWITCH_BINDING_STATES: ReadonlyArray<SwitchBindingState> = [
   },
   {
     id: 'disabled',
-    summary: 'a natively disabled switch, out of the tab sequence',
+    summary: 'a disabled switch that keeps its tab stop',
     storyId: 'core-switch--disabled',
     visibleLabel: 'Premium feature',
     props: {
@@ -159,7 +159,7 @@ export const SWITCH_BINDING_STATES: ReadonlyArray<SwitchBindingState> = [
     facts: {
       checked: false,
       operable: false,
-      focusable: false,
+      focusable: true,
       disabled: true,
       described: true,
       required: false,

package/src/Switch/switch.markers.stylex.ts

@@ -8,3 +8,7 @@ import * as stylex from '@stylexjs/stylex';
  */
 export const switchScope: ReturnType<typeof stylex.defineMarker> =
   stylex.defineMarker();
+
+/** Focus-ring marker; unlike `switchScope`, it stays on while disabled. */
+export const switchFocusScope: ReturnType<typeof stylex.defineMarker> =
+  stylex.defineMarker();

package/src/Table/plugins/selection/useTableSelection.test.tsx

@@ -195,9 +195,11 @@ describe('useTableSelection', () => {
   it('disables checkbox for disabled rows', () => {
     render(<SelectionTable getIsItemEnabled={item => !item.isLocked} />);
     const rowCheckboxes = screen.getAllByLabelText('Select row');
-    expect(rowCheckboxes[0]).not.toBeDisabled();
-    expect(rowCheckboxes[1]).not.toBeDisabled();
-    expect(rowCheckboxes[2]).toBeDisabled();
+    expect(rowCheckboxes[0]).not.toHaveAttribute('aria-disabled');
+    expect(rowCheckboxes[1]).not.toHaveAttribute('aria-disabled');
+    // Focusable disabled (spec:AST-085 FR1): aria-disabled, no native disabled.
+    expect(rowCheckboxes[2]).toHaveAttribute('aria-disabled', 'true');
+    expect(rowCheckboxes[2]).not.toHaveAttribute('disabled');
   });
 
   it('prepends selection <td> to each body row', () => {

package/src/TimeInput/TimeInput.doc.mjs

@@ -212,7 +212,7 @@ export const docs = {
       name: 'increment',
       type: 'number',
       description:
-        'Number of minutes to add or subtract when the user presses the up or down arrow key.',
+        'Number of minutes to add or subtract when the user presses the up or down arrow key. Steps are whole minutes; a fractional value leaves the time unchanged.',
       default: '1',
     },
     {
@@ -392,7 +392,8 @@ export const docsZh = {
     {
       name: 'increment',
       type: 'number',
-      description: '用户按上或下方向键时增加或减少的分钟数。',
+      description:
+        '用户按上或下方向键时增加或减少的分钟数。步长为整分钟；传入小数时时间保持不变。',
       default: '1',
     },
     {
@@ -623,7 +624,8 @@ export const docsDense = {
     hasClear: 'Shows clear button when value set+not disabled.',
     hourFormat:
       "Display format. '12h' shows AM/PM; '24h' uses 24-hour notation.",
-    increment: 'Minutes to add/subtract on arrow up/down.',
+    increment:
+      'Minutes to add/subtract on arrow up/down. Whole minutes only; a fractional value leaves the time unchanged.',
     presentation:
       "picker surface: 'adaptive-native' (default) = typed field fine / browser/OS coarse (hasSeconds or increment!=1 retains typed); 'native' = browser/OS always, no fallback; 'adaptive-bottom-sheet' = typed fine / Astryx wheel sheet coarse; 'bottom-sheet' = sheet always; 'text-input'/'popover' = typed field only.",
     nativePicker:

package/src/TimeInput/TimeInput.test.tsx

@@ -65,6 +65,26 @@ describe('TimeInput', () => {
     expect(onChange).toHaveBeenCalledWith('14:31');
   });
 
+  it('does not step into a fractional minute when increment is fractional', () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        increment={0.5}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText('Time');
+
+    // `increment` is documented as minutes and typed `number`. A fractional one
+    // used to reach formatISOTime unrounded, which pads "30.5" to two
+    // characters and leaves it, so the arrow key handed the consumer a value
+    // that is no longer a time at all.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('14:30');
+  });
+
   it('displays formatted time in 12h format', () => {
     render(
       <TimeInput

package/src/TimeInput/TimeInput.tsx

@@ -286,7 +286,8 @@ export interface TimeInputProps extends Omit<
   hourFormat?: TimeInputHourFormat;
 
   /**
-   * Increment in minutes when using arrow keys.
+   * Increment in minutes when using arrow keys. Steps are whole minutes: a
+   * fractional value leaves the time unchanged.
    * @default 1
    */
   increment?: number;

package/src/Timestamp/Timestamp.doc.mjs

@@ -28,7 +28,7 @@ export const docs = {
       name: 'format',
       type: "'relative' | 'relative_short' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time' | 'unix_seconds'",
       description:
-        "Display format. 'relative' uses the locale's native long relative-time wording ('2 hours ago' in English), 'relative_short' uses its narrow pattern ('2h ago' in English) for compact surfaces, 'date' shows 'Mar 21, 2025', 'date_long' shows 'March 21, 2025', 'date_weekday' shows 'Wed, Mar 21, 2025', 'date_time' shows 'Mar 21, 2025, 2:51 PM', 'time' shows '2:51 PM', 'system_*' variants use ISO-style formatting, 'unix_seconds' shows the Unix time in whole seconds since the epoch (an absolute, zone-independent value), 'auto' switches from relative to date_time based on recency.",
+        "Display format. 'relative' uses the locale's native long relative-time wording ('2 hours ago' in English), 'relative_short' uses its narrow pattern ('2h ago' in English) for compact surfaces, 'date' shows 'Mar 21, 2025', 'date_long' shows 'March 21, 2025', 'date_weekday' shows 'Wed, Mar 21, 2025', 'date_time' shows 'Mar 21, 2025, 2:51 PM', 'time' shows '2:51 PM', 'system_*' variants use ISO-style formatting, 'unix_seconds' shows the Unix time in whole seconds since the epoch (an absolute, zone-independent value), 'auto' switches from relative to date_time based on recency. Absolute formats never read the current time. 'relative', 'relative_short' and 'auto' read it on the client only: a server render or static prerender shows the full date and time in UTC, labelled, and the client switches to the format's normal output after hydration.",
       default: "'auto'",
     },
     {

package/src/Timestamp/Timestamp.test.tsx

@@ -11,6 +11,9 @@ import {
 } from 'vitest';
 import {render, screen, act, waitFor, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {Profiler} from 'react';
+import {hydrateRoot, type Root} from 'react-dom/client';
+import {renderToString} from 'react-dom/server';
 import {Timestamp} from './Timestamp';
 import {formatInstant} from './formatInstant';
 import {formatTooltipLines} from './tooltipEntries';
@@ -1466,3 +1469,168 @@ describe('Timestamp pass-through props', () => {
     });
   });
 });
+
+/**
+ * Counts `new Date()` calls with no argument (reads of the current time) made
+ * while `run` executes.
+ */
+function countClockReads(run: () => void): number {
+  const ActiveDate = globalThis.Date;
+  let reads = 0;
+  class CountingDate extends ActiveDate {
+    constructor(...args: [] | [string | number | Date]) {
+      if (args.length === 0) {
+        reads += 1;
+      }
+      super(...(args as [string | number | Date]));
+    }
+  }
+  globalThis.Date = CountingDate as DateConstructor;
+  try {
+    run();
+  } finally {
+    globalThis.Date = ActiveDate;
+  }
+  return reads;
+}
+
+describe('Timestamp server rendering', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-03-25T12:00:00Z'));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it.each(['date', 'date_time', 'time', 'unix_seconds'] as const)(
+    'never reads the current time for the absolute %s format',
+    format => {
+      const element = (
+        <Timestamp value="2026-03-25T10:00:00Z" format={format} />
+      );
+      expect(countClockReads(() => renderToString(element))).toBe(0);
+      expect(countClockReads(() => render(element))).toBe(0);
+    },
+  );
+
+  it.each(['relative', 'relative_short', 'auto'] as const)(
+    'renders the %s format as the full date and time in UTC on the server without reading the clock',
+    format => {
+      const value = '2026-03-25T10:00:00Z';
+      let html = '';
+      expect(
+        countClockReads(() => {
+          html = renderToString(<Timestamp value={value} format={format} />);
+        }),
+      ).toBe(0);
+      const host = document.createElement('div');
+      host.innerHTML = html;
+      expect(host.textContent).toBe(
+        formatInstant(new Date(value), 'date_time', 'en-US', {
+          timeZone: 'UTC',
+          isTimezoneShown: true,
+        }),
+      );
+    },
+  );
+
+  it('never commits the UTC placeholder when a client Timestamp switches to a relative format', () => {
+    const value = Date.now() / 1000 - 7200;
+    const committed: string[] = [];
+    function Spy({format}: {format: 'date' | 'relative'}) {
+      return (
+        <Profiler
+          id="ts"
+          onRender={() => {
+            committed.push(document.querySelector('time')?.textContent ?? '');
+          }}>
+          <Timestamp value={value} format={format} hasTooltip={false} />
+        </Profiler>
+      );
+    }
+    const {rerender} = render(<Spy format="date" />);
+    committed.length = 0;
+    rerender(<Spy format="relative" />);
+    expect(screen.getByText('2 hours ago')).toBeInTheDocument();
+    expect(committed.some(text => text.includes('UTC'))).toBe(false);
+  });
+
+  describe('across time zones', () => {
+    const originalTZ = process.env.TZ;
+
+    afterEach(() => {
+      if (originalTZ === undefined) {
+        delete process.env.TZ;
+      } else {
+        process.env.TZ = originalTZ;
+      }
+    });
+
+    it('writes the same server markup whatever the server time zone', () => {
+      const element = (
+        <Timestamp value="2026-03-25T10:00:00Z" format="relative" />
+      );
+      process.env.TZ = 'UTC';
+      const utc = renderToString(element);
+      process.env.TZ = 'Asia/Tokyo';
+      expect(renderToString(element)).toBe(utc);
+    });
+
+    it('hydrates server markup from another time zone without a mismatch', () => {
+      const value = Date.now() / 1000 - 7200;
+      const element = (
+        <Timestamp value={value} format="relative" hasTooltip={false} />
+      );
+      process.env.TZ = 'UTC';
+      const host = document.createElement('div');
+      document.body.appendChild(host);
+      host.innerHTML = renderToString(element);
+
+      process.env.TZ = 'America/Los_Angeles';
+      const errors = vi.spyOn(console, 'error').mockImplementation(() => {});
+      let root: Root | undefined;
+      try {
+        act(() => {
+          root = hydrateRoot(host, element, {
+            onRecoverableError: error => {
+              throw error;
+            },
+          });
+        });
+        expect(host.textContent).toBe('2 hours ago');
+        expect(errors).not.toHaveBeenCalled();
+      } finally {
+        errors.mockRestore();
+        act(() => root?.unmount());
+        host.remove();
+      }
+    });
+  });
+
+  it('hydrates the server markup without a mismatch, then shows the relative phrase', () => {
+    const value = Date.now() / 1000 - 7200;
+    const element = (
+      <Timestamp value={value} format="relative" hasTooltip={false} />
+    );
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    host.innerHTML = renderToString(element);
+    expect(host.textContent).not.toBe('2 hours ago');
+
+    const errors = vi.spyOn(console, 'error').mockImplementation(() => {});
+    let root: Root | undefined;
+    try {
+      act(() => {
+        root = hydrateRoot(host, element);
+      });
+      expect(host.textContent).toBe('2 hours ago');
+      expect(errors).not.toHaveBeenCalled();
+    } finally {
+      errors.mockRestore();
+      act(() => root?.unmount());
+      host.remove();
+    }
+  });
+});