From 8f4ee2dce0304e9b14738e9e39b63a606f96c45e Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@slint.dev>
Date: Tue, 21 Jan 2025 13:13:44 +0200
Subject: [PATCH 1/2] Docs: Apply usage of language tabs everywhere

---
 .../guide/development/custom-controls.mdx     | 32 ++++++++++---------
 .../docs/guide/language/coding/globals.mdx    | 23 ++++++-------
 .../docs/reference/std-widgets/style.mdx      |  2 +-
 3 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/docs/astro/src/content/docs/guide/development/custom-controls.mdx b/docs/astro/src/content/docs/guide/development/custom-controls.mdx
index 2739f1cd669..48c5222e71c 100644
--- a/docs/astro/src/content/docs/guide/development/custom-controls.mdx
+++ b/docs/astro/src/content/docs/guide/development/custom-controls.mdx
@@ -5,6 +5,7 @@ title: Custom Controls
 description: Custom Controls
 ---
 
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 # Custom Control Introduction
 
@@ -76,8 +77,8 @@ In Slint, `-` and `_` are equivalent and interchangeable in all identifiers.
 This is different in native code: Most programming languages forbid `-` in
 identifiers, so `-` is replaced with `_`.
 
-<details data-snippet-language="rust">
-<summary>Rust code</summary>
+<Tabs syncKey="dev-language">
+<TabItem label="Rust">
 
 For technical reasons, this example uses `export {Recipe}` in the `slint!` macro.
 In real code, you can put the whole Slint code in the `slint!` macro, or use
@@ -113,10 +114,10 @@ can move into the callback.
 We can't use a strong handle here, because that would form a cycle: The component
 handle has ownership of the callback, which itself has ownership of the
 closure's captured variables.
-</details>
 
-<details data-snippet-language="cpp">
-<summary>C++ code</summary>
+</TabItem> 
+<TabItem label="C++">
+
 In C++ you can write
 
 ```cpp
@@ -143,7 +144,8 @@ for each accessible callback in `Recipe`. In this case we will have `get_counter
 `set_counter` to access the `counter` property and `on_button_pressed` to
 set up the callback.
 
-</details>
+</TabItem>
+</Tabs>
 
 ## Use Property Bindings to Synchronize Controls
 
@@ -437,9 +439,9 @@ export component Recipe inherits Window {
     }
 }
 ```
+<Tabs syncKey="dev-language">
+<TabItem label="Rust">
 
-<details  data-snippet-language="rust">
-<summary>Rust code</summary>
 In Rust you can set the callback like this:
 
 ```rust
@@ -477,9 +479,8 @@ fn main() {
     // ...
 }
 ```
-</details>
-
-<details  data-snippet-language="cpp">
+</TabItem>
+<TabItem label="C++">
 <summary>C++ code</summary>
 In C++ you can set the callback like this:
 
@@ -495,10 +496,10 @@ int main(int argc, char **argv)
     // ...
 }
 ```
-</details>
+</TabItem>
+<TabItem label="NodeJS">
+
 
-<details  data-snippet-language="javascript">
-<summary>JavaScript code</summary>
 In JavaScript you can set the callback like this:
 
 ```js
@@ -510,7 +511,8 @@ recipe.Logic.to_upper_case = (str) => {
 };
 // ...
 ```
-</details>
+</TabItem>
+</Tabs>
 
 # Custom Widgets
 
diff --git a/docs/astro/src/content/docs/guide/language/coding/globals.mdx b/docs/astro/src/content/docs/guide/language/coding/globals.mdx
index 5c355e92f7d..3710a810e46 100644
--- a/docs/astro/src/content/docs/guide/language/coding/globals.mdx
+++ b/docs/astro/src/content/docs/guide/language/coding/globals.mdx
@@ -4,6 +4,7 @@ title: Globals
 description: Globals
 ---
 import Link from '/src/components/Link.astro';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Declare a global singleton with `global Name { /* .. properties or callbacks .. */ }` to
 make properties and callbacks available throughout the entire project. Access them using `Name.property`.
@@ -34,9 +35,8 @@ export global Logic  {
 }
 // ...
 ```
-
-<details data-snippet-language="rust">
-<summary>Usage from Rust</summary>
+<Tabs syncKey="dev-language">
+<TabItem label="Rust">
 
 ```rust
 slint::slint!{
@@ -61,10 +61,8 @@ fn main() {
 }
 ```
 
-</details>
-
-<details data-snippet-language="cpp">
-<summary>Usage from C++</summary>
+</TabItem>
+<TabItem label="C++">
 
 ```cpp
 #include "app.h"
@@ -78,11 +76,8 @@ fn main() {
     // ...
 }
 ```
-
-</details>
-
-<details data-snippet-language="javascript">
-<summary>Usage from JavaScript</summary>
+</TabItem>
+<TabItem label="NodeJS">
 
 ```js
 let slint = require("slint-ui");
@@ -94,8 +89,8 @@ app.Logic.magic_operation = (value) => {
 app.Logic.the_value = 42;
 // ...
 ```
-
-</details>
+</TabItem>
+</Tabs>
 
 It's possible to re-expose a callback or properties from a global using the two way binding syntax.
 
diff --git a/docs/astro/src/content/docs/reference/std-widgets/style.mdx b/docs/astro/src/content/docs/reference/std-widgets/style.mdx
index 7f7780c6cc3..33893d4445c 100644
--- a/docs/astro/src/content/docs/reference/std-widgets/style.mdx
+++ b/docs/astro/src/content/docs/reference/std-widgets/style.mdx
@@ -45,7 +45,7 @@ Define a `SLINT_STYLE` CMake cache variable to contain the style name as a strin
 cmake -DSLINT_STYLE="material" /path/to/source
 ```
 </TabItem>
-<TabItem label="Node.js">
+<TabItem label="NodeJS">
 
 You can select the style by setting the `style` property in [`LoadFileOptions`](slint-node:interfaces/LoadFileOptions) passed to [`loadFile`](slint-node:functions/loadFile):
 

From 50349dfe8a082c395e06bab4a7ae5e9434afb163 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:15:39 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 .../src/content/docs/guide/development/custom-controls.mdx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/astro/src/content/docs/guide/development/custom-controls.mdx b/docs/astro/src/content/docs/guide/development/custom-controls.mdx
index 48c5222e71c..24d27bc8337 100644
--- a/docs/astro/src/content/docs/guide/development/custom-controls.mdx
+++ b/docs/astro/src/content/docs/guide/development/custom-controls.mdx
@@ -115,7 +115,7 @@ We can't use a strong handle here, because that would form a cycle: The componen
 handle has ownership of the callback, which itself has ownership of the
 closure's captured variables.
 
-</TabItem> 
+</TabItem>
 <TabItem label="C++">
 
 In C++ you can write