nynexman4464 · Nov 10, 2026 · Nov 10, 2026
@@ -0,0 +1,8 @@
+---
+'@astryxdesign/core': patch
+'@astryxdesign/cli': patch
+---
+
+[docs] InternationalizationProvider shows its examples in reading order: load a shipped locale, mirror the layout for right-to-left text (a new code example), override one string, then the calendar examples. Each live example is titled after its code example, so the two lists match.
+
+@nynexman4464
@@ -4,8 +4,9 @@
 export const doc = {
   type: 'block',
   exampleFor: 'InternationalizationProvider',
-  name: 'InternationalizationProvider — Shipped Locale',
+  name: 'Load a shipped Astryx locale catalog',
   displayName: 'Internationalization Provider — Shipped Locale',
+  registry: {slug: 'shipped-locale'},
   description:
     'Load a locale catalog shipped by Astryx and re-render InternationalizationProvider with a new locale to update Astryx strings live.',
   isReady: true,

@@ -4,8 +4,9 @@
 export const doc = {
   type: 'block',
   exampleFor: 'InternationalizationProvider',
-  name: 'InternationalizationProvider — Overrides',
+  name: 'Override one Astryx string',
   displayName: 'Internationalization Provider — Overrides',
+  registry: {slug: 'overrides'},
   description:
     'Override a small number of Astryx strings without providing a full locale catalog.',
   isReady: true,

@@ -4,8 +4,9 @@
 export const doc = {
   type: 'block',
   exampleFor: 'InternationalizationProvider',
-  name: 'InternationalizationProvider — RTL Direction',
+  name: 'Mirror the layout for right-to-left text',
   displayName: 'Internationalization Provider — RTL Direction',
+  registry: {slug: 'rtl-direction'},
   description:
     'Toggle text direction with the `dir` prop and watch Astryx components mirror. Pagination flips its prev/next chevrons under RTL. The `dir` prop is passed to both `InternationalizationProvider` (so Astryx components pick it up) and the `VStack` (so the DOM subtree mirrors); both channels stay in sync with no extra wrapper.',
   isReady: true,

@@ -4,8 +4,9 @@
 export const doc = {
   type: 'block',
   exampleFor: 'InternationalizationProvider',
-  name: 'InternationalizationProvider — Calendar',
+  name: 'Show Calendar and DateInput in another calendar',
   displayName: 'Internationalization Provider — Calendar',
+  registry: {slug: 'calendar'},
   description:
     'Set the `calendar` prop and the `Calendar` and `DateInput` inside the provider show that calendar system. The value stays a Gregorian ISO date. Japanese and Buddhist dates work in every browser; calendars such as Persian or Hebrew also need `Temporal` or a polyfill.',
   isReady: true,

@@ -118,6 +118,26 @@ export function AppI18n({children}: {children: ReactNode}) {
       {children}
     </InternationalizationProvider>
   );
+}`,
+    },
+    {
+      label: 'Mirror the layout for right-to-left text',
+      code: `import type {ReactNode} from 'react';
+import {
+  InternationalizationProvider,
+  getLocaleDirection,
+} from '@astryxdesign/core/i18n';
+
+// Pass the same direction to the provider and to the element that holds the
+// content, so Astryx components and the page mirror together.
+export function AppI18n({children}: {children: ReactNode}) {
+  const locale = 'ar-SA';
+  const dir = getLocaleDirection(locale);
+  return (
+    <InternationalizationProvider locale={locale} dir={dir}>
+      <div dir={dir}>{children}</div>
+    </InternationalizationProvider>
+  );
 }`,
     },
     {
@@ -136,6 +156,25 @@ export function AppI18n({children}: {children: ReactNode}) {
       {children}
     </InternationalizationProvider>
   );
+}`,
+    },
+    {
+      label: 'Provide a local fallback catalog',
+      code: `import type {ReactNode} from 'react';
+import {
+  InternationalizationProvider,
+  type MessagesByLocale,
+} from '@astryxdesign/core/i18n';
+import ptBR from './locales/pt-BR.json';
+
+const messages: MessagesByLocale = {'pt-BR': ptBR};
+
+export function AppI18n({children}: {children: ReactNode}) {
+  return (
+    <InternationalizationProvider locale="pt-BR" messages={messages}>
+      {children}
+    </InternationalizationProvider>
+  );
 }`,
     },
     {
@@ -153,15 +192,15 @@ export function AppI18n({children}: {children: ReactNode}) {
 }`,
     },
     {
-      label: 'Show Calendar and DateInput in the Japanese calendar',
+      label: 'Show Calendar and DateInput in another calendar',
       code: `import {useState} from 'react';
 import {InternationalizationProvider} from '@astryxdesign/core/i18n';
 import {Calendar, type ISODateString} from '@astryxdesign/core/Calendar';
 import {DateInput} from '@astryxdesign/core/DateInput';
 import {VStack} from '@astryxdesign/core/Layout';
 
-// Japanese, Buddhist, and ROC dates need no Temporal, so they work in every
-// browser. The value stays a Gregorian ISO date.
+// Japanese, Buddhist, and Minguo calendar dates need no Temporal, so they work
+// in every browser. The value stays a Gregorian ISO date.
 export function StartDate() {
   const [value, setValue] = useState<ISODateString | undefined>('2026-10-30');
   return (
@@ -172,25 +211,6 @@ export function StartDate() {
       </VStack>
     </InternationalizationProvider>
   );
-}`,
-    },
-    {
-      label: 'Provide a local fallback catalog',
-      code: `import type {ReactNode} from 'react';
-import {
-  InternationalizationProvider,
-  type MessagesByLocale,
-} from '@astryxdesign/core/i18n';
-import ptBR from './locales/pt-BR.json';
-
-const messages: MessagesByLocale = {'pt-BR': ptBR};
-
-export function AppI18n({children}: {children: ReactNode}) {
-  return (
-    <InternationalizationProvider locale="pt-BR" messages={messages}>
-      {children}
-    </InternationalizationProvider>
-  );
 }`,
     },
   ],