@transferwise/components 46.131.2 → 46.132.0

package/build/styles/css/neptune.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/styles/main.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,
@@ -28096,6 +28143,10 @@ a[data-toggle="tooltip"] {
   --Card-padding: var(--size-16);
 }
 
+.wds-LiveRegion {
+  width: 100%;
+}
+
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }

package/build/styles/styles/less/neptune.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
 }
 
+:lang(ja) .display-1,
+:lang(ja) .display-2,
+:lang(ja) .display-3,
+:lang(ja) .display-4,
+:lang(ja) .display-5,
+:lang(ja) .np-text-display-extra-large,
+:lang(ja) .np-text-display-large,
+:lang(ja) .np-text-display-medium,
+:lang(ja) .np-text-display-small,
+:lang(th) .display-1,
+:lang(th) .display-2,
+:lang(th) .display-3,
+:lang(th) .display-4,
+:lang(th) .display-5,
+:lang(th) .np-text-display-extra-large,
+:lang(th) .np-text-display-large,
+:lang(th) .np-text-display-medium,
+:lang(th) .np-text-display-small,
+:lang(zh-CN) .display-1,
+:lang(zh-CN) .display-2,
+:lang(zh-CN) .display-3,
+:lang(zh-CN) .display-4,
+:lang(zh-CN) .display-5,
+:lang(zh-CN) .np-text-display-extra-large,
+:lang(zh-CN) .np-text-display-large,
+:lang(zh-CN) .np-text-display-medium,
+:lang(zh-CN) .np-text-display-small,
+:lang(zh-HK) .display-1,
+:lang(zh-HK) .display-2,
+:lang(zh-HK) .display-3,
+:lang(zh-HK) .display-4,
+:lang(zh-HK) .display-5,
+:lang(zh-HK) .np-text-display-extra-large,
+:lang(zh-HK) .np-text-display-large,
+:lang(zh-HK) .np-text-display-medium,
+:lang(zh-HK) .np-text-display-small {
+  /**
+     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
+     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
+     * font files are browser-cached and we carried over to launchpad, where it causes issues
+     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/types/common/liveRegion/LiveRegion.d.ts

@@ -1,10 +1,13 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export type AriaLive = 'off' | 'polite' | 'assertive';
+export declare const resetLiveRegionAnnouncementQueue: () => void;
 export interface LiveRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-live' | 'aria-atomic'> {
     /**
      * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
      */
     'aria-live': AriaLive;
+    /** Optional stable key that triggers a new announcement when it changes. */
+    announceOnChange?: string | number;
     /** Test ID for testing tools */
     'data-testid'?: string;
     children?: ReactNode;
@@ -14,10 +17,10 @@ export interface LiveRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
  *
  * - `aria-live="polite"` → `role="status"`
  * - `aria-live="assertive"` → `role="alert"`
- * - `aria-live="off"` → no live region
+ * - `aria-live="off"` → no live region (renders children unwrapped)
  *
  * The `role` prop is intentionally excluded from the public API
  * to prevent mismatches between `aria-live` and `role`.
  */
-export declare const LiveRegion: ({ "aria-live": ariaLive, children, ...props }: LiveRegionProps) => import("react").JSX.Element;
+export declare const LiveRegion: ({ "aria-live": ariaLive, announceOnChange, children, className, ...props }: LiveRegionProps) => import("react").JSX.Element;
 //# sourceMappingURL=LiveRegion.d.ts.map

package/build/types/common/liveRegion/LiveRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../../src/common/liveRegion/LiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,GAAG,WAAW,GAAG,aAAa,CACrC;IACC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,+CAA+C,eAAe,gCAgBxF,CAAC"}
+{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../../src/common/liveRegion/LiveRegion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,WAAW,CAAC;AA6BtD,eAAO,MAAM,gCAAgC,QAAO,IAGnD,CAAC;AAaF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,GAAG,WAAW,GAAG,aAAa,CACrC;IACC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC;IACtB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,4EAMxB,eAAe,gCAoCjB,CAAC"}

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA4EjB,CAAC"}
+{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA6EjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.131.2",
+  "version": "46.132.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,7 +87,7 @@
     "storybook-addon-tag-badges": "^3.0.6",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.27.0",
+    "@transferwise/neptune-css": "14.27.1",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },

package/src/alert/Alert.story.tsx

@@ -42,12 +42,6 @@ export default {
       },
     },
   },
-
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 } satisfies Meta<typeof Alert>;
 
 type Story = StoryObj<typeof Alert>;

package/src/button/_stories/Button.story.tsx

@@ -276,11 +276,6 @@ const meta: Meta<typeof Button> = {
   },
 
   decorators: [withContainer],
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 };
 
 export default meta;

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -7,7 +7,6 @@ import CheckboxButton from './CheckboxButton';
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
-
   args: {
     disabled: false,
     onBlur: action('blur'),

package/src/circularButton/CircularButton.story.tsx

@@ -10,7 +10,6 @@ import Body from '../body';
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
-
   args: {
     children: 'Button text',
     icon: <Icons.Freeze />,

package/src/common/liveRegion/LiveRegion.css

@@ -0,0 +1,3 @@
+.wds-LiveRegion {
+  width: 100%;
+}

package/src/common/liveRegion/LiveRegion.less

@@ -0,0 +1,3 @@
+.wds-LiveRegion {
+  width: 100%;
+}

package/src/common/liveRegion/LiveRegion.test.tsx

@@ -1,23 +1,43 @@
-import { render, screen } from '@testing-library/react';
-import { LiveRegion, LiveRegionProps } from './LiveRegion';
+import { act, render, screen } from '@testing-library/react';
+import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
+import { LiveRegion, LiveRegionProps, resetLiveRegionAnnouncementQueue } from './LiveRegion';
 
 describe('LiveRegion', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    resetLiveRegionAnnouncementQueue();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   const renderLiveRegion = (props: Partial<LiveRegionProps> & Pick<LiveRegionProps, 'aria-live'>) =>
     render(<LiveRegion {...props}>{props.children ?? 'Live content'}</LiveRegion>);
 
+  const enableLiveRegion = (delay = WDS_LIVE_REGION_DELAY_MS) => {
+    act(() => {
+      jest.advanceTimersByTime(delay);
+    });
+  };
+
   describe('when aria-live is "polite"', () => {
     it('renders with role="status"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
+      enableLiveRegion();
       expect(screen.getByRole('status')).toBeInTheDocument();
     });
 
     it('sets aria-live="polite"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
+      enableLiveRegion();
       expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
     });
 
     it('sets aria-atomic="true"', () => {
       renderLiveRegion({ 'aria-live': 'polite' });
+      enableLiveRegion();
       expect(screen.getByRole('status')).toHaveAttribute('aria-atomic', 'true');
     });
   });
@@ -25,32 +45,79 @@ describe('LiveRegion', () => {
   describe('when aria-live is "assertive"', () => {
     it('renders with role="alert"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
+      enableLiveRegion();
       expect(screen.getByRole('alert')).toBeInTheDocument();
     });
 
     it('sets aria-live="assertive"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
+      enableLiveRegion();
       expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
     });
 
     it('sets aria-atomic="true"', () => {
       renderLiveRegion({ 'aria-live': 'assertive' });
+      enableLiveRegion();
       expect(screen.getByRole('alert')).toHaveAttribute('aria-atomic', 'true');
     });
   });
 
+  it('delays live-region activation before the configured timeout', () => {
+    renderLiveRegion({ 'aria-live': 'polite', children: 'Delayed content' });
+
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion).toBeInTheDocument();
+    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion(WDS_LIVE_REGION_DELAY_MS - 1);
+    expect(liveRegion.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion(1);
+    expect(liveRegion.firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(liveRegion).toHaveTextContent('Delayed content');
+  });
+
+  it('queues multiple assertive regions so each one gets announced', () => {
+    render(
+      <>
+        <LiveRegion aria-live="assertive">First prompt</LiveRegion>
+        <LiveRegion aria-live="assertive">Second prompt</LiveRegion>
+      </>,
+    );
+
+    const liveRegions = screen.getAllByRole('alert');
+    expect(liveRegions).toHaveLength(2);
+    expect(liveRegions[0].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+    expect(liveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+
+    enableLiveRegion();
+    const firstEnabledLiveRegions = screen.getAllByRole('alert');
+    expect(firstEnabledLiveRegions[0].firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(firstEnabledLiveRegions[1].firstElementChild).toHaveAttribute('aria-hidden', 'true');
+    expect(firstEnabledLiveRegions[0]).toHaveTextContent('First prompt');
+
+    enableLiveRegion();
+    const secondEnabledLiveRegions = screen.getAllByRole('alert');
+    expect(secondEnabledLiveRegions[1].firstElementChild).not.toHaveAttribute('aria-hidden');
+    expect(secondEnabledLiveRegions[0]).toHaveTextContent('First prompt');
+    expect(secondEnabledLiveRegions[1]).toHaveTextContent('Second prompt');
+  });
+
   it('renders children', () => {
     renderLiveRegion({ 'aria-live': 'polite', children: 'Transfer sent' });
+    enableLiveRegion();
     expect(screen.getByText('Transfer sent')).toBeInTheDocument();
   });
 
   it('passes additional HTML attributes to the wrapper div', () => {
     renderLiveRegion({ 'aria-live': 'polite', className: 'custom' });
+    enableLiveRegion();
     expect(screen.getByRole('status')).toHaveClass('custom');
   });
 
   it('supports data-testid prop', () => {
     renderLiveRegion({ 'aria-live': 'polite', 'data-testid': 'live-region' });
+    enableLiveRegion();
     expect(screen.getByTestId('live-region')).toBeInTheDocument();
   });
 });

package/src/common/liveRegion/LiveRegion.tsx

@@ -1,11 +1,52 @@
+import { useEffect, useState } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
 
-const ARIA_LIVE_ROLE_MAP = {
+import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
+
+export type AriaLive = 'off' | 'polite' | 'assertive';
+
+type LivePoliteness = Exclude<AriaLive, 'off'>;
+
+const LIVE_REGION_ROLE_BY_POLITENESS: Record<LivePoliteness, 'status' | 'alert'> = {
   assertive: 'alert',
   polite: 'status',
-} as const;
+};
 
-export type AriaLive = 'off' | 'polite' | 'assertive';
+let nextPoliteAnnouncementAt = 0;
+let nextAssertiveAnnouncementAt = 0;
+
+const getNextAnnouncementAt = (politeness: LivePoliteness): number => {
+  if (politeness === 'polite') {
+    return nextPoliteAnnouncementAt;
+  }
+
+  return nextAssertiveAnnouncementAt;
+};
+
+const setNextAnnouncementAt = (politeness: LivePoliteness, value: number): void => {
+  if (politeness === 'polite') {
+    nextPoliteAnnouncementAt = value;
+    return;
+  }
+
+  nextAssertiveAnnouncementAt = value;
+};
+
+export const resetLiveRegionAnnouncementQueue = (): void => {
+  nextPoliteAnnouncementAt = 0;
+  nextAssertiveAnnouncementAt = 0;
+};
+
+const calcAnnouncementDelayMs = (politeness: LivePoliteness, now: number): number => {
+  return Math.max(now + WDS_LIVE_REGION_DELAY_MS, getNextAnnouncementAt(politeness)) - now;
+};
+
+const scheduleAnnouncement = (politeness: LivePoliteness): number => {
+  const now = Date.now();
+  const delayMs = calcAnnouncementDelayMs(politeness, now);
+  setNextAnnouncementAt(politeness, now + delayMs + WDS_LIVE_REGION_DELAY_MS);
+  return delayMs;
+};
 
 export interface LiveRegionProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -15,6 +56,8 @@ export interface LiveRegionProps extends Omit<
    * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
    */
   'aria-live': AriaLive;
+  /** Optional stable key that triggers a new announcement when it changes. */
+  announceOnChange?: string | number;
   /** Test ID for testing tools */
   'data-testid'?: string;
   children?: ReactNode;
@@ -25,25 +68,51 @@ export interface LiveRegionProps extends Omit<
  *
  * - `aria-live="polite"` → `role="status"`
  * - `aria-live="assertive"` → `role="alert"`
- * - `aria-live="off"` → no live region
+ * - `aria-live="off"` → no live region (renders children unwrapped)
  *
  * The `role` prop is intentionally excluded from the public API
  * to prevent mismatches between `aria-live` and `role`.
  */
-export const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {
+export const LiveRegion = ({
+  'aria-live': ariaLive,
+  announceOnChange,
+  children,
+  className,
+  ...props
+}: LiveRegionProps) => {
+  const [shouldAnnounce, setShouldAnnounce] = useState(false);
+  const announcementTrigger =
+    announceOnChange ??
+    (typeof children === 'string' || typeof children === 'number' ? children : undefined);
+
+  useEffect(() => {
+    setShouldAnnounce(false);
+
+    if (ariaLive === 'off') {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(
+      () => setShouldAnnounce(true),
+      scheduleAnnouncement(ariaLive),
+    );
+
+    return () => window.clearTimeout(timeoutId);
+  }, [ariaLive, announcementTrigger]);
+
   if (ariaLive === 'off') {
     return <>{children}</>;
   }
 
   return (
     <div
-      role={ARIA_LIVE_ROLE_MAP[ariaLive]}
+      role={LIVE_REGION_ROLE_BY_POLITENESS[ariaLive]}
       aria-live={ariaLive}
       aria-atomic="true"
-      style={{ display: 'contents' }}
+      className={`wds-LiveRegion ${className ?? ''}`}
       {...props}
     >
-      {children}
+      <div aria-hidden={shouldAnnounce ? undefined : 'true'}>{children}</div>
     </div>
   );
 };

package/src/display/Display.story.tsx

@@ -14,6 +14,8 @@ export const Basic = () => {
   const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
   const UA = 'Ми будуємо найбільш міжнародний рахунок у світі';
   const JA = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてで';
+  const ZN =
+    '的一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年样能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去最性性齉龘龘靐齉爩鱻猋驫麤籲爨癵驫鲙鬯鬻厵纛';
   return (
     <>
       <div lang="en">
@@ -77,7 +79,7 @@ export const Basic = () => {
       </div>
       <hr />
       <div lang="ja">
-        <h1>Everything eles, e.g 🇯🇵</h1>
+        <h1>Japanese</h1>
         Large
         <Display type={Typography.DISPLAY_LARGE}>{JA}</Display>
         <hr />
@@ -87,6 +89,18 @@ export const Basic = () => {
         Small
         <Display type={Typography.DISPLAY_SMALL}>{JA}</Display>
       </div>
+      <hr />
+      <div lang="zh-CN">
+        <h1>Simplified Chinese</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>{ZN}</Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>{ZN}</Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>{ZN}</Display>
+      </div>
     </>
   );
 };

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -55,7 +55,6 @@ export default {
   tags: ['contribution'],
   parameters: {
     docs: {
-      toc: true,
       canvas: {
         sourceState: 'hidden',
       },

package/src/header/Header.story.tsx

@@ -63,11 +63,6 @@ const meta: Meta<typeof Header> = {
   },
   tags: ['autodocs'],
   decorators: [withContainer],
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
 };
 
 export default meta;

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -16,7 +16,6 @@ const meta: Meta<typeof InputWithDisplayFormat> = {
       </Field>
     );
   },
-
   args: {
     onFocus: fn(),
     onBlur: fn(),