Update from code changes: document Variation component

components/variation.mdx

@@ -0,0 +1,79 @@
+---
+title: "Variation"
+description: "Use the variation component to conditionally show content based on a reader-selected variation, such as region, plan tier, or audience type."
+keywords: ["variation", "conditional content", "audience", "region", "willow"]
+boost: 3
+---
+
+Use the `Variation` component to show or hide content based on the variation a reader selects from the variation dropdown. Variations are useful when the same page needs to describe a different audience, region, plan tier, or deployment target without duplicating the page.
+
+<Note>
+  Variations are available on the [Willow theme](/customize/themes). On other themes, the configuration and switcher are ignored.
+</Note>
+
+## Configure variations
+
+Add a `variations` object to your `docs.json` with the options you want readers to switch between. The first option is the default.
+
+```json docs.json
+{
+  "theme": "willow",
+  "variations": {
+    "options": [
+      { "id": "cloud", "label": "Cloud" },
+      { "id": "self-hosted", "label": "Self-hosted" }
+    ]
+  }
+}
+```
+
+<ResponseField name="options" type="array" required>
+  Variation options in display order. The first option is the default. Each option requires:
+
+  - `id`: A stable, unique identifier used in the `Variation` component and URL.
+  - `label`: The display name shown in the variation dropdown.
+</ResponseField>
+
+When `variations` is configured, a **Variation** dropdown appears above the existing view switcher in the table of contents sidebar, side panels, changelog filters, and inline on mobile.
+
+## Use the component
+
+Wrap conditional content in a `Variation` component and set `is` to the option `id` that should reveal it. Content outside a `Variation` block always shows.
+
+```mdx
+Both audiences see this introduction.
+
+<Variation is="cloud">
+  Sign in at [app.example.com](https://app.example.com) to get your API key.
+</Variation>
+
+<Variation is="self-hosted">
+  Generate an API key from the admin console on your instance.
+</Variation>
+```
+
+To share content between multiple variations, pass an array to `is`:
+
+```mdx
+<Variation is={["cloud", "self-hosted"]}>
+  Store your API key in the `EXAMPLE_API_KEY` environment variable.
+</Variation>
+```
+
+## How readers switch variations
+
+- Readers pick a variation from the dropdown in the table of contents sidebar.
+- The selection is saved in local storage per project, so readers keep their variation as they move between pages.
+- The current variation is reflected in the URL as `?variation=<id>`, which makes it easy to share a link to a specific variation.
+
+## Table of contents behavior
+
+Headings inside a `Variation` block are automatically filtered from the table of contents when a different variation is active. Headings outside any `Variation` block always appear.
+
+Nested `Variation` blocks intersect: an inner block only shows when its `is` value is compatible with every enclosing block.
+
+## Properties
+
+<ResponseField name="is" type="string or string[]" required>
+  The variation `id` (or array of ids) that should reveal the wrapped content. Ids must match an option defined in `variations.options` in `docs.json`.
+</ResponseField>

docs.json

@@ -152,6 +152,7 @@
                       "components/tooltips",
                       "components/tree",
                       "components/update",
+                      "components/variation",
                       "components/view",
                       "components/visibility"
                     ]

es.json

@@ -131,6 +131,7 @@
                 "es/components/tooltips",
                 "es/components/tree",
                 "es/components/update",
+                "es/components/variation",
                 "es/components/view",
                 "es/components/visibility"
               ]

es/components/variation.mdx

@@ -0,0 +1,89 @@
+---
+title: "Variación"
+description: "Usa el componente variation para mostrar contenido de forma condicional según la variación elegida por el lector, como región, plan o audiencia."
+keywords: ["variación", "contenido condicional", "audiencia", "región", "willow"]
+boost: 3
+---
+
+Usa el componente `Variation` para mostrar u ocultar contenido según la variación que el lector seleccione en el menú desplegable de variaciones. Las variaciones son útiles cuando la misma página debe describir una audiencia, región, nivel de plan o entorno de despliegue distintos sin duplicar la página.
+
+<Note>
+  Las variaciones están disponibles en el [tema Willow](/es/customize/themes). En otros temas, se ignoran la configuración y el selector.
+</Note>
+
+<div id="configure-variations">
+  ## Configurar variaciones
+</div>
+
+Añade un objeto `variations` en tu `docs.json` con las opciones entre las que quieres que los lectores puedan cambiar. La primera opción es la predeterminada.
+
+```json docs.json
+{
+  "theme": "willow",
+  "variations": {
+    "options": [
+      { "id": "cloud", "label": "Cloud" },
+      { "id": "self-hosted", "label": "Autohospedado" }
+    ]
+  }
+}
+```
+
+<ResponseField name="options" type="array" required>
+  Opciones de variación en el orden en que se muestran. La primera opción es la predeterminada. Cada opción requiere:
+
+  - `id`: Un identificador único y estable que se usa en el componente `Variation` y en la URL.
+  - `label`: El nombre visible en el menú desplegable de variaciones.
+</ResponseField>
+
+Cuando `variations` está configurado, aparece un menú desplegable de **Variación** encima del selector de vistas existente en la barra lateral del índice, en los paneles laterales, en los filtros del changelog y en línea en móviles.
+
+<div id="use-the-component">
+  ## Usar el componente
+</div>
+
+Envuelve el contenido condicional en un componente `Variation` y establece `is` con el `id` de la opción que debe revelarlo. El contenido fuera de un bloque `Variation` se muestra siempre.
+
+```mdx
+Ambas audiencias ven esta introducción.
+
+<Variation is="cloud">
+  Inicia sesión en [app.example.com](https://app.example.com) para obtener tu clave de API.
+</Variation>
+
+<Variation is="self-hosted">
+  Genera una clave de API desde la consola de administración de tu instancia.
+</Variation>
+```
+
+Para compartir contenido entre varias variaciones, pasa un array a `is`:
+
+```mdx
+<Variation is={["cloud", "self-hosted"]}>
+  Guarda tu clave de API en la variable de entorno `EXAMPLE_API_KEY`.
+</Variation>
+```
+
+<div id="how-readers-switch-variations">
+  ## Cómo cambian de variación los lectores
+</div>
+
+- Los lectores eligen una variación en el menú desplegable de la barra lateral del índice.
+- La selección se guarda en el almacenamiento local por proyecto, por lo que los lectores mantienen su variación al navegar entre páginas.
+- La variación actual se refleja en la URL como `?variation=<id>`, lo que facilita compartir un enlace a una variación concreta.
+
+<div id="table-of-contents-behavior">
+  ## Comportamiento del índice
+</div>
+
+Los encabezados dentro de un bloque `Variation` se filtran automáticamente del índice cuando hay otra variación activa. Los encabezados fuera de cualquier bloque `Variation` siempre aparecen.
+
+Los bloques `Variation` anidados se intersectan: un bloque interno solo se muestra cuando su valor de `is` es compatible con todos los bloques que lo contienen.
+
+<div id="properties">
+  ## Propiedades
+</div>
+
+<ResponseField name="is" type="string o string[]" required>
+  El `id` de variación (o el array de ids) que debe revelar el contenido envuelto. Los ids deben coincidir con una opción definida en `variations.options` en `docs.json`.
+</ResponseField>

fr.json

@@ -131,6 +131,7 @@
                 "fr/components/tooltips",
                 "fr/components/tree",
                 "fr/components/update",
+                "fr/components/variation",
                 "fr/components/view",
                 "fr/components/visibility"
               ]

fr/components/variation.mdx

@@ -0,0 +1,89 @@
+---
+title: "Variation"
+description: "Utilisez le composant variation pour afficher un contenu conditionnel selon la variation choisie par le lecteur, comme la région, le plan ou l'audience."
+keywords: ["variation", "contenu conditionnel", "audience", "région", "willow"]
+boost: 3
+---
+
+Utilisez le composant `Variation` pour afficher ou masquer du contenu selon la variation choisie par le lecteur dans le menu déroulant de variations. Les variations sont utiles quand la même page doit décrire une audience, une région, un niveau d'offre ou une cible de déploiement différents sans dupliquer la page.
+
+<Note>
+  Les variations sont disponibles sur le [thème Willow](/fr/customize/themes). Sur les autres thèmes, la configuration et le sélecteur sont ignorés.
+</Note>
+
+<div id="configure-variations">
+  ## Configurer les variations
+</div>
+
+Ajoutez un objet `variations` à votre `docs.json` avec les options entre lesquelles vous voulez que les lecteurs puissent basculer. La première option est la valeur par défaut.
+
+```json docs.json
+{
+  "theme": "willow",
+  "variations": {
+    "options": [
+      { "id": "cloud", "label": "Cloud" },
+      { "id": "self-hosted", "label": "Auto-hébergé" }
+    ]
+  }
+}
+```
+
+<ResponseField name="options" type="array" required>
+  Options de variation dans l'ordre d'affichage. La première option est la valeur par défaut. Chaque option nécessite :
+
+  - `id` : Un identifiant stable et unique utilisé dans le composant `Variation` et dans l'URL.
+  - `label` : Le nom affiché dans le menu déroulant de variations.
+</ResponseField>
+
+Quand `variations` est configuré, un menu déroulant **Variation** apparaît au-dessus du sélecteur de vue existant dans la barre latérale de la table des matières, les panneaux latéraux, les filtres du changelog et en ligne sur mobile.
+
+<div id="use-the-component">
+  ## Utiliser le composant
+</div>
+
+Enveloppez le contenu conditionnel dans un composant `Variation` et définissez `is` sur l'`id` de l'option qui doit le révéler. Le contenu hors d'un bloc `Variation` est toujours affiché.
+
+```mdx
+Les deux audiences voient cette introduction.
+
+<Variation is="cloud">
+  Connectez-vous sur [app.example.com](https://app.example.com) pour obtenir votre clé API.
+</Variation>
+
+<Variation is="self-hosted">
+  Générez une clé API depuis la console d'administration de votre instance.
+</Variation>
+```
+
+Pour partager du contenu entre plusieurs variations, passez un tableau à `is` :
+
+```mdx
+<Variation is={["cloud", "self-hosted"]}>
+  Stockez votre clé API dans la variable d'environnement `EXAMPLE_API_KEY`.
+</Variation>
+```
+
+<div id="how-readers-switch-variations">
+  ## Comment les lecteurs changent de variation
+</div>
+
+- Les lecteurs choisissent une variation dans le menu déroulant de la barre latérale de la table des matières.
+- La sélection est enregistrée dans le stockage local par projet, ce qui permet aux lecteurs de conserver leur variation en naviguant entre les pages.
+- La variation active est reflétée dans l'URL sous la forme `?variation=<id>`, ce qui facilite le partage d'un lien vers une variation précise.
+
+<div id="table-of-contents-behavior">
+  ## Comportement de la table des matières
+</div>
+
+Les titres à l'intérieur d'un bloc `Variation` sont automatiquement filtrés de la table des matières quand une autre variation est active. Les titres en dehors de tout bloc `Variation` apparaissent toujours.
+
+Les blocs `Variation` imbriqués se croisent : un bloc interne ne s'affiche que si sa valeur `is` est compatible avec tous les blocs englobants.
+
+<div id="properties">
+  ## Propriétés
+</div>
+
+<ResponseField name="is" type="string ou string[]" required>
+  L'`id` de variation (ou le tableau d'ids) qui doit révéler le contenu enveloppé. Les ids doivent correspondre à une option définie dans `variations.options` dans `docs.json`.
+</ResponseField>

zh.json

@@ -128,6 +128,7 @@
                 "zh/components/tooltips",
                 "zh/components/tree",
                 "zh/components/update",
+                "zh/components/variation",
                 "zh/components/view",
                 "zh/components/visibility"
               ]

zh/components/variation.mdx

@@ -0,0 +1,89 @@
+---
+title: "变体"
+description: "使用 variation 组件根据读者所选的变体（如地区、套餐或受众）有条件地显示内容。"
+keywords: ["变体", "条件内容", "受众", "地区", "willow"]
+boost: 3
+---
+
+使用 `Variation` 组件根据读者在变体下拉菜单中所选的变体来显示或隐藏内容。当同一页面需要面向不同的受众、地区、套餐或部署目标进行说明，又不想重复整个页面时，变体非常有用。
+
+<Note>
+  变体功能可用于 [Willow 主题](/zh/customize/themes)。在其他主题上，配置和切换器会被忽略。
+</Note>
+
+<div id="configure-variations">
+  ## 配置变体
+</div>
+
+在你的 `docs.json` 中添加一个 `variations` 对象，其中包含你希望读者可以切换的选项。第一个选项是默认选项。
+
+```json docs.json
+{
+  "theme": "willow",
+  "variations": {
+    "options": [
+      { "id": "cloud", "label": "Cloud" },
+      { "id": "self-hosted", "label": "自托管" }
+    ]
+  }
+}
+```
+
+<ResponseField name="options" type="array" required>
+  按显示顺序排列的变体选项。第一个选项是默认选项。每个选项需要：
+
+  - `id`：在 `Variation` 组件和 URL 中使用的稳定、唯一标识符。
+  - `label`：在变体下拉菜单中显示的名称。
+</ResponseField>
+
+配置 `variations` 后，会在目录侧边栏、侧边面板、更新日志过滤器以及移动端内联位置的现有视图切换器上方出现一个 **变体** 下拉菜单。
+
+<div id="use-the-component">
+  ## 使用组件
+</div>
+
+将条件内容包裹在 `Variation` 组件中，并将 `is` 设为应显示该内容的选项 `id`。`Variation` 块之外的内容始终显示。
+
+```mdx
+两种受众都会看到这段介绍。
+
+<Variation is="cloud">
+  在 [app.example.com](https://app.example.com) 登录以获取你的 API 密钥。
+</Variation>
+
+<Variation is="self-hosted">
+  在你的实例的管理控制台中生成 API 密钥。
+</Variation>
+```
+
+若要在多个变体之间共享内容，请将数组传递给 `is`：
+
+```mdx
+<Variation is={["cloud", "self-hosted"]}>
+  将你的 API 密钥保存在 `EXAMPLE_API_KEY` 环境变量中。
+</Variation>
+```
+
+<div id="how-readers-switch-variations">
+  ## 读者如何切换变体
+</div>
+
+- 读者从目录侧边栏的下拉菜单中选择变体。
+- 选择结果按项目保存在本地存储中，因此读者在页面之间切换时会保留其选择的变体。
+- 当前变体会以 `?variation=<id>` 的形式反映在 URL 中，便于分享指向特定变体的链接。
+
+<div id="table-of-contents-behavior">
+  ## 目录行为
+</div>
+
+当另一变体处于活动状态时，`Variation` 块内的标题会自动从目录中过滤掉。位于任何 `Variation` 块之外的标题始终显示。
+
+嵌套的 `Variation` 块之间会取交集：只有当内层块的 `is` 值与所有外层块都兼容时，内层块才会显示。
+
+<div id="properties">
+  ## 属性
+</div>
+
+<ResponseField name="is" type="string 或 string[]" required>
+  用于显示所包裹内容的变体 `id`（或 id 数组）。这些 id 必须与 `docs.json` 中 `variations.options` 定义的选项相匹配。
+</ResponseField>