i18n(it): Updates `guides/components.mdx` (#2191)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

1 files changed, 77 insertions, 0 deletions

diff --git a/docs/src/content/docs/it/guides/components.mdx b/docs/src/content/docs/it/guides/components.mdx
index dc85ffca..7178a53d 100644
--- a/docs/src/content/docs/it/guides/components.mdx
+++ b/docs/src/content/docs/it/guides/components.mdx
@@ -87,6 +87,50 @@ Il codice sopra genera quanto segue nella pagina:
 	</TabItem>
 </Tabs>
 
+#### Schede sincronizzate
+
+Mantieni sincronizzati più gruppi di schede aggiungendo l'attributo `syncKey`.
+
+Tutti i componenti `<Tabs>` in una pagina con lo stesso valore `syncKey` mostreranno la stessa etichetta attiva. Questo permette al lettore di scegliere una volta (ad esempio, il proprio sistema operativo o gestore di pacchetti) e vedere la propria scelta riflessa in tutta la pagina.
+
+Per sincronizzare le schede correlate, aggiungi una proprietà `syncKey` identica a ciascun componente `<Tabs>` e assicurati che utilizzino tutte le stesse etichette `<TabItem>`:
+
+```mdx 'syncKey="constellations"'
+# src/content/docs/example.mdx
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+_Alcune stelle:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
+	<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
+</Tabs>
+
+_Alcuni esopianeti:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
+	<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
+</Tabs>
+```
+
+Il codice sopra genera quanto segue nella pagina:
+
+_Alcune stelle:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
+	<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
+</Tabs>
+
+_Alcuni esopianeti:_
+
+<Tabs syncKey="constellations">
+	<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
+	<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
+</Tabs>
+
 ### Card
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
@@ -374,6 +418,36 @@ import { Steps } from '@astrojs/starlight/components';
 
 </Steps>
 
+### Badge
+
+import { Badge } from '@astrojs/starlight/components';
+
+Usa il componente `<Badge>` per mostrare piccole informazioni, come stati o etichette.
+
+Passa il contenuto che vuoi mostrare all'attributo `text` del componente `<Badge>`.
+
+Per impostazione predefinita, il badge utilizzerà il colore di accento del tema del tuo sito. Per utilizzare un colore di badge predefinito, imposta l'attributo `variant` su uno dei seguenti valori: `note` (blu), `tip` (viola), `danger` (rosso), `caution` (arancione), o `success` (verde).
+
+L'attributo `size` (predefinito: `small`) controlla la dimensione del testo del badge. Sono disponibili anche le opzioni `medium` e `large` per visualizzare un badge più grande.
+
+Per ulteriori personalizzazioni, usa altri attributi `<span>` come `class` o `style` con CSS personalizzato.
+
+```mdx title="src/content/docs/example.mdx"
+import { Badge } from '@astrojs/starlight/components';
+
+<Badge text="Nuovo" variant="tip" size="small" />
+<Badge text="Deprecato" variant="caution" size="medium" />
+<Badge text="Starlight" variant="note" size="large" />
+<Badge text="Personalizzato" variant="success" style={{ fontStyle: 'italic' }} />
+```
+
+Il codice sopra genera quanto segue nella pagina:
+
+<Badge text="Nuovo" variant="tip" size="small" />
+<Badge text="Deprecato" variant="caution" size="medium" />
+<Badge text="Starlight" variant="note" size="large" />
+<Badge text="Personalizzato" variant="success" style={{ fontStyle: 'italic' }} />
+
 ### Icone
 
 import { Icon } from '@astrojs/starlight/components';
@@ -382,6 +456,7 @@ import IconsList from '~/components/icons-list.astro';
 Starlight fornisce una serie di icone comuni che puoi visualizzare nei tuoi contenuti utilizzando il componente `<Icon>`.
 
 Ogni `<Icon>` richiede un [`name`](#tutte-le-icone) e può facoltativamente includere un attributo `label`, `size` e `color`.
+Gli attributi `size` e `color` possono essere utilizzati per regolare l'aspetto dell'icona utilizzando unità CSS e valori di colore.
 
 ```mdx
 # src/content/docs/example.mdx
@@ -389,11 +464,13 @@ Ogni `<Icon>` richiede un [`name`](#tutte-le-icone) e può facoltativamente incl
 import { Icon } from '@astrojs/starlight/components';
 
 <Icon name="star" color="goldenrod" size="2rem" />
+<Icon name="rocket" color="var(--sl-color-text-accent)" />
 ```
 
 Il codice sopra genera quanto segue nella pagina:
 
 <Icon name="star" color="goldenrod" size="2rem" />
+<Icon name="rocket" color="var(--sl-color-text-accent)" />
 
 #### Tutte le icone