Merge branch 'main' into scripts-doc

.changeset/sweet-vans-carry.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Refactors `<ThemeSelect>` custom element logic to improve performance

.changeset/swift-files-wave.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes responding to system color scheme changes when theme is `auto`

docs/src/content/docs/es/reference/configuration.mdx

@@ -489,18 +489,18 @@ Si necesitas establecer variantes adicionales o favicons de respaldo, puedes agr
 
 ```js
 starlight({
-  favicon: '/images/favicon.svg'.
-  head: [
-    // Agregar un favicon ICO de respaldo para Safari.
-    {
-      tag: 'link',
-      attrs: {
-        rel: 'icon',
-        href:'/images/favicon.ico',
-        sizes: '32x32',
-      },
-    },
-  ],
+	favicon: '/images/favicon.svg',
+	head: [
+		// Agregar un favicon ICO de respaldo para Safari.
+		{
+			tag: 'link',
+			attrs: {
+				rel: 'icon',
+				href: '/images/favicon.ico',
+				sizes: '32x32',
+			},
+		},
+	],
 });
 ```
 

docs/src/content/docs/es/resources/community-content.mdx

@@ -74,6 +74,11 @@ Explora contenido producido por la comunidad mantenido por usuarios de Starlight
 		title="Publicación de documentación con Astro Starlight"
 		description="Comenzando con la documentación de Starlight."
 	/>
+	<LinkCard
+		href="https://events-3bg.pages.dev/jotter/starlight/guide/"
+		title="Habilita View Transitions"
+		description="Consigue esa apariencia SPA con el soporte de View Transitions de Bag of Tricks"
+	/>
 
 </CardGrid>
 

docs/src/content/docs/es/resources/showcase.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 :::tip[¡Agrega el tuyo!]
 ¿Has construido un sitio de Starlight o una herramienta para Starlight?
-¡Abre una PR agregando un enlace a esta página!
+¡[Abre una PR](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md#showcase) agregando un enlace a esta página!
 :::
 
 ## Sitios

docs/src/content/docs/fr/resources/community-content.mdx

@@ -74,7 +74,11 @@ Explorez le contenu communautaire produit par les utilisateurs de Starlight :
 		title="Publier une documentation avec Astro Starlight"
 		description="Démarrer une documentation avec Starlight"
 	/>
-
+	<LinkCard
+		href="https://events-3bg.pages.dev/jotter/starlight/guide/"
+		title="Utiliser les transitions de vue (view transitions)"
+		description="Obtenir l'apparence et ressenti d'une application monopage (SPA) grâce au support des transitions de vue de Bag of Tricks"
+	/>
 </CardGrid>
 
 ## Contenu vidéo

docs/src/content/docs/hi/guides/components.mdx

@@ -59,23 +59,32 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 आप `<Tabs>` और `<TabItem>` अवयवों का उपयोग करके एक टैब्ड इंटरफ़ेस प्रदर्शित कर सकते हैं।
 प्रत्येक `<TabItem>` में उपयोगकर्ताओं को प्रदर्शित करने के लिए एक `label` होना चाहिए।
+लेबल के आगे [Starlight के अंतर्निर्मित आइकन](#सभी-आइकन) में से एक को शामिल करने के लिए वैकल्पिक `icon` विशेषता का उपयोग करें।
 
 ```mdx
 # src/content/docs/example.mdx
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
-	<TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
-	<TabItem label="Moons">Io, Europa, Ganymede</TabItem>
+	<TabItem label="Stars" icon="star">
+		Sirius, Vega, Betelgeuse
+	</TabItem>
+	<TabItem label="Moons" icon="moon">
+		Io, Europa, Ganymede
+	</TabItem>
 </Tabs>
 ```
 
 उपरोक्त कोड पेज पर निम्नलिखित टैब उत्पन्न करता है:
 
 <Tabs>
-	<TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
-	<TabItem label="Moons">Io, Europa, Ganymede</TabItem>
+	<TabItem label="Stars" icon="star">
+		Sirius, Vega, Betelgeuse
+	</TabItem>
+	<TabItem label="Moons" icon="moon">
+		Io, Europa, Ganymede
+	</TabItem>
 </Tabs>
 
 ### कार्ड
@@ -224,33 +233,6 @@ import { Aside } from '@astrojs/starlight/components';
 Starlight `<Aside>` अवयव के विकल्प के रूप में Markdown” और MDX में असाइड् प्रस्तुत करने के लिए एक कस्टम सिंटैक्स भी प्रदान करता है।
 कस्टम सिंटैक्स के विवरण के लिए ["Markdown में कंटेंट संलेखन"](/hi/guides/authoring-content/#asides) मार्गदर्शिका देखें।
 
-### आइकन
-
-import { Icon } from '@astrojs/starlight/components';
-import IconsList from '~/components/icons-list.astro';
-
-Starlight सामान्य आइकन का एक संग्रह प्रदान करता है जिसे आप `<Icon>` अवयव का उपयोग करके अपने कंटेंट में प्रदर्शित कर सकते हैं।
-
-प्रत्येक `<Icon>` को एक [`name`](#सभी-आइकन) की आवश्यकता होती है और इसमें वैकल्पिक रूप से एक `label`, `size`, और `color` विशेषता शामिल हो सकती है।
-
-```mdx
-# src/content/docs/example.mdx
-
-import { Icon } from '@astrojs/starlight/components';
-
-<Icon name="star" color="goldenrod" size="2rem" />
-```
-
-उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:
-
-<Icon name="star" color="goldenrod" size="2rem" />
-
-#### सभी आइकन
-
-सभी उपलब्ध आइकनों की एक सूची उनके संबंधित नामों के साथ नीचे दिखाई गई है। इसके अवयव कोड की प्रतिलिपि बनाने के लिए किसी भी आइकन पर क्लिक करें।
-
-<IconsList />
-
 ### कोड
 
 जब [Markdown कोड ब्लॉक](/hi/guides/authoring-content/#code-blocks) का उपयोग करना संभव नहीं हो, तब सिंटैक्स हाइलाइट किए गए कोड को रेंडर करने के लिए `<Code>` अवयव का उपयोग करें, उदाहरण के लिए, फ़ाइलों, डेटाबेस, या APIs जैसे बाहरी स्रोतों से आने वाले डेटा को रेंडर करना।
@@ -296,3 +278,118 @@ import importedCode from '/src/env.d.ts?raw';
 import importedCode from '/src/env.d.ts?raw';
 
 <Code code={importedCode} lang="ts" title="src/env.d.ts" />
+
+### फ़ाइल वृक्ष
+
+फ़ाइल आइकन और बंधने योग्य उप-निर्देशिकाओं के साथ निर्देशिका की संरचना प्रदर्शित करने के लिए `<FileTree>` घटक का उपयोग करें।
+
+`<FileTree>` के अंदर एक [अव्यवस्थित Markdown सूची](https://www.markdownguide.org/basic-syntax/#unordered-lists) के साथ अपनी फ़ाइलों और निर्देशिकाओं की संरचना निर्दिष्ट करें। नेस्टेड सूची का उपयोग करके एक उप-निर्देशिका बनाएं या इसे विशिष्ट सामग्री के बिना निर्देशिका के रूप में प्रस्तुत करने के लिए सूची आइटम के अंत में `/` जोड़ें।
+
+फ़ाइल वृक्ष के स्वरूप को अनुकूलित करने के लिए निम्नलिखित सिंटैक्स का उपयोग किया जा सकता है:
+
+- किसी फ़ाइल या निर्देशिका का नाम बोल्ड करके उसे हाइलाइट करें, उदा. `**README.md**` पढ़ें.
+- किसी फ़ाइल या निर्देशिका में नाम के बाद और टेक्स्ट जोड़कर एक टिप्पणी जोड़ें।
+- नाम के रूप में `...`. या `…` का उपयोग करके प्लेसहोल्डर फ़ाइलें और निर्देशिकाएँ जोड़ें।
+
+```mdx
+# src/content/docs/example.mdx
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs an **important** file
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+```
+
+उपरोक्त कोड पृष्ठ पर निम्नलिखित उत्पन्न करता है:
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs एक **महत्वपूर्ण** फ़ाइल
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+
+### चरण
+
+कार्यों की क्रमांकित सूचियों को स्टाइल करने के लिए `<चरण>` घटक का उपयोग करें।
+यह अधिक जटिल चरण-दर-चरण मार्गदर्शिकाओं के लिए उपयोगी है जहां प्रत्येक चरण को स्पष्ट रूप से हाइलाइट करने की आवश्यकता होती है।
+
+`<चरण>` को मानक Markdown आदेशित सूची के चारों ओर लपेटें।
+सभी सामान्य Markdown सिंटैक्स `<Steps>` के अंदर लागू होते हैं।
+
+````mdx title="src/content/docs/example.mdx"
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. अवयव को अपनी MDX फ़ाइल में आयात करें:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. अपने ऑर्डर किए गए सूची आइटम के चारों ओर `<Steps>` लपेटें।
+
+</Steps>
+````
+
+उपरोक्त कोड पृष्ठ पर निम्नलिखित उत्पन्न करता है:
+
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. अवयव को अपनी MDX फ़ाइल में आयात करें:
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. अपने ऑर्डर किए गए सूची आइटम के चारों ओर `<Steps>` लपेटें।
+
+</Steps>
+
+### आइकन
+
+import { Icon } from '@astrojs/starlight/components';
+import IconsList from '~/components/icons-list.astro';
+
+Starlight सामान्य आइकन का एक संग्रह प्रदान करता है जिसे आप `<Icon>` अवयव का उपयोग करके अपने कंटेंट में प्रदर्शित कर सकते हैं।
+
+प्रत्येक `<Icon>` को एक [`name`](#सभी-आइकन) की आवश्यकता होती है और इसमें वैकल्पिक रूप से एक `label`, `size`, और `color` विशेषता शामिल हो सकती है।
+
+```mdx
+# src/content/docs/example.mdx
+
+import { Icon } from '@astrojs/starlight/components';
+
+<Icon name="star" color="goldenrod" size="2rem" />
+```
+
+उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:
+
+<Icon name="star" color="goldenrod" size="2rem" />
+
+#### सभी आइकन
+
+सभी उपलब्ध आइकनों की एक सूची उनके संबंधित नामों के साथ नीचे दिखाई गई है। इसके अवयव कोड की प्रतिलिपि बनाने के लिए किसी भी आइकन पर क्लिक करें।
+
+<IconsList />

docs/src/content/docs/hi/guides/css-and-tailwind.mdx

@@ -3,12 +3,16 @@ title: CSS और स्टाइलिंग
 description: जानें कि अपनी Starlight साइट को कस्टम CSS के साथ कैसे शैली करें या Tailwind CSS के साथ एकीकृत करें।
 ---
 
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
 आप अपनी Starlight साइट को कस्टम CSS फ़ाइलों के साथ स्टाइल कर सकते हैं या Starlight Tailwind प्लगइन का उपयोग कर सकते हैं।
 
 ## कस्टम CSS शैलियाँ
 
 Starlight की डिफ़ॉल्ट शैलियों को संशोधित या विस्तारित करने के लिए अतिरिक्त CSS फ़ाइलें प्रदान करके अपनी Starlight साइट पर लागू शैलियों को अनुकूलित करें।
 
+<Steps>
+
 1. अपनी `src/` निर्देशिका में एक CSS फ़ाइल जोड़ें।
    उदाहरण के लिए, आप पेज शीर्षकों के लिए व्यापक डिफ़ॉल्ट कॉलम चौड़ाई और बड़ा टेक्स्ट आकार सेट कर सकते हैं:
 
@@ -40,6 +44,8 @@ Starlight की डिफ़ॉल्ट शैलियों को संश
    });
    ```
 
+</Steps>
+
 आप Starlight द्वारा उपयोग किए गए सभी CSS कस्टम गुणों को देख सकते हैं जिन्हें आप [GitHub पर `props.css` फ़ाइल](https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css) में अपनी साइट को अनुकूलित करने के लिए सेट कर सकते हैं।
 
 ## Tailwind CSS
@@ -55,8 +61,6 @@ Starlight प्लगइन निम्नलिखित कॉन्फ़
 
 ### Tailwind के साथ एक नयी परियोजना बनाएं
 
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
 `create astro` का उपयोग करके पहले से कॉन्फ़िगर किए गए Tailwind CSS के साथ एक नयी Starlight परियोजना शुरू करें:
 
 <Tabs>
@@ -87,6 +91,8 @@ yarn create astro --template starlight/tailwind
 
 यदि आपके पास पहले से ही एक Starlight साइट है और आप Tailwind CSS जोड़ना चाहते हैं, तो इन चरणों का पालन करें।
 
+<Steps>
+
 1.  Astro का Tailwind एकीकरण जोड़ें:
 
     <Tabs>
@@ -194,6 +200,8 @@ yarn create astro --template starlight/tailwind
     };
     ```
 
+</Steps>
+
 ### Tailwind के साथ Starlight को स्टाइल करें
 
 Starlight अपने UI में आपके [Tailwind थीम कॉन्फिगरेशन](https://tailwindcss.com/docs/theme) से मूल्यों का उपयोग करेगा।