Clarify global language synchronization for tabs and code blocks (Docs)

fern/products/docs/pages/component-library/default-components/code-blocks.mdx

@@ -306,9 +306,16 @@ The `CodeBlocks` component allows you to display multiple code blocks in a tabbe
   </Tab>
 </Tabs>
 
-## Example of Synchronized Blocks
+## Language synchronization
 
-Multiple `CodeBlocks` on a page automatically synchronize, showing the same language across all blocks.
+Multiple `CodeBlocks` on a documentation site automatically synchronize. This
+means when a user selects a `CodeBlock` with a specific language, all other
+`CodeBlocks` across your documentation site with the same language will
+automatically sync and switch to match. Language preferences are stored in
+client-side local storage and persist across browser sessions.
+
+The example below demonstrates language sync in action – choosing a language in
+either set of code blocks will automatically update both sets to match:
 
 <CodeBlocks>
   ```python title="Python"
@@ -362,6 +369,10 @@ Multiple `CodeBlocks` on a page automatically synchronize, showing the same lang
   ```
 </CodeBlocks>
 
+<Note title="Tabs and CodeBlocks integration">
+  `CodeBlocks` automatically synchronize with [`<Tab>` components that have a `language` property](/docs/writing-content/components/tabs#language-synchronization).
+</Note>
+
 ### Override synchronization
 
 You can override the synchronization of code blocks by setting the `for` prop.

fern/products/docs/pages/component-library/default-components/tabs.mdx

@@ -1,55 +1,188 @@
 ---
-title: 'Tabs'
-description: 'The Tabs component allows you to display related content in a tabbed view.'
+title: Tabs
+description: The Tabs component allows you to display related content in a tabbed view with support for language synchronization.
 ---
 
-The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples or code snippets.
+The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.
+
+<Tabs>
+  <Tab title="First Tab">
+    ☝️ Welcome to the content that you can only see inside the first Tab.
+  </Tab>
+  <Tab title="Second Tab">
+    ✌️ Here's content that's only inside the second Tab.
+  </Tab>
+  <Tab title="Third Tab">
+    💪 Here's content that's only inside the third Tab.
+  </Tab>
+</Tabs>
+
+<CodeBlock title="Markdown">
+```jsx
+<Tabs>
+  <Tab title="First Tab">
+    ☝️ Welcome to the content that you can only see inside the first Tab.
+  </Tab>
+  <Tab title="Second Tab">
+    ✌️ Here's content that's only inside the second Tab.
+  </Tab>
+  <Tab title="Third Tab">
+    💪 Here's content that's only inside the third Tab.
+  </Tab>
+</Tabs>
+```
+</CodeBlock>
 
 ## Properties
+
 <ParamField path="title" type="string" required={true}>
   The title displayed in the tab header
 </ParamField>
 
 <ParamField path="language" type="string" required={false}>
   The language associated with the code block. Any arbitrary string may be used.
 
-  When a user selects a tab with a specific language, all other tabs assigned to the same language will automatically sync and switch to match. Syncs with the [`for` property of `<CodeBlocks />`](/learn/docs/writing-content/components/code-blocks#override-synchronization).
+  When specified, enables global language synchronization across all tabs and code blocks with the same language value.
 </ParamField>
 
 <ParamField path="children" type="string | JSX" required={true}>
   The content to be displayed when the tab is selected. Can include text, markdown, and components.
 </ParamField>
 
-<br />
+## Language synchronization
+
+Multiple `Tabs` with a `language` property automatically synchronize. This means
+when a user selects a tab with a specific language, all other tabs across your
+documentation site with the same language will automatically sync and switch to
+match. Language preferences are stored in client-side local storage and persist
+across browser sessions.
+
+In the example below, choosing a language in either set of tabs will automatically update both sets to match:
 
 <Tabs>
-  <Tab title="First Tab">
-    ☝️ Welcome to the content that you can only see inside the first Tab.
+  <Tab title="TypeScript" language="typescript">
+    ```typescript
+    console.log("First code block!");
+    ```
   </Tab>
-  <Tab title="Second Tab">
-    ✌️ Here's content that's only inside the second Tab.
+  <Tab title="Python" language="python">
+    ```python
+    print("First code block!")
+    ```
   </Tab>
-  <Tab title="Third Tab">
-    💪 Here's content that's only inside the third Tab.
+  <Tab title="Java" language="java">
+    ```java
+    System.out.println("First code block!");
+    ```
   </Tab>
 </Tabs>
 
-<Aside>
+<Tabs>
+  <Tab title="TypeScript" language="typescript">
+    ```typescript
+    console.log("Second code block – language syncs with the one above!");
+    ```
+  </Tab>
+  <Tab title="Python" language="python">
+    ```python
+    print("Second code block – language syncs with the one above!")
+    ```
+  </Tab>
+  <Tab title="Java" language="java">
+    ```java
+    System.out.println("Second code block – language syncs with the one above!");
+    ```
+  </Tab>
+</Tabs>
 
 <CodeBlock title="Markdown">
-```jsx
+````jsx
 <Tabs>
-  <Tab title="First Tab">
-    ☝️ Welcome to the content that you can only see inside the first Tab.
+  <Tab title="TypeScript" language="typescript">
+    ```typescript
+    console.log("Content inside the TypeScript tab");
+    ```
   </Tab>
-  <Tab title="Second Tab">
-    ✌️ Here's content that's only inside the second Tab.
+  <Tab title="Python" language="python">
+    ```python
+    print("Content inside the Python tab")
+    ```
   </Tab>
-  <Tab title="Third Tab">
-    💪 Here's content that's only inside the third Tab.
+  <Tab title="Java" language="java">
+    ```java
+    System.out.println("Content inside the Java tab");
+    ```
   </Tab>
 </Tabs>
-```
+````
 </CodeBlock>
 
-</Aside>
+<Note title="Tabs and CodeBlocks integration">
+  Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization).
+</Note>
+
+<Accordion title="Tabs without the language property" toc={true}>
+
+Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in
+either set of tabs doesn't affect the other set of tabs:
+
+<Tabs>
+  <Tab title="TypeScript">
+    ```typescript
+    console.log("First code block!");
+    ```
+  </Tab>
+  <Tab title="Python">
+    ```python
+    print("First code block!")
+    ```
+  </Tab>
+  <Tab title="Java">
+    ```java
+    System.out.println("First code block!");
+    ```
+  </Tab>
+</Tabs>
+
+<Tabs>
+  <Tab title="TypeScript">
+    ```typescript
+    console.log("Second code block – this won't sync with the one above!");
+    ```
+  </Tab>
+  <Tab title="Python">
+    ```python
+    print("Second code block – this won't sync with the one above!")
+    ```
+  </Tab>
+  <Tab title="Java">
+    ```java
+    System.out.println("Second code block – this won't sync with the one above!");
+    ```
+  </Tab>
+</Tabs>
+
+<CodeBlock title="Markdown">
+````jsx
+<Tabs>
+  <Tab title="TypeScript">
+    ```typescript
+    console.log("Content inside the TypeScript tab, with no language property");
+    ```
+  </Tab>
+  <Tab title="Python">
+    ```python
+    print("Content inside the Python tab, with no language property")
+    ```
+  </Tab>
+  <Tab title="Java">
+    ```java
+    System.out.println("Content inside the Java tab, with no language property");
+    ```
+  </Tab>
+</Tabs>
+````
+</CodeBlock>
+
+</Accordion>
+