fr: tutorial/06/01-02-03-04

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-a/src/lib/App.svelte

@@ -1,7 +1,7 @@
 <script>
-	let name = $state('world');
+	let name = $state('tout le monde');
 </script>
 
 <input value={name} />
 
-<h1>Hello {name}!</h1>
+<h1>Bonjour {name} !</h1>

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/+assets/app-b/src/lib/App.svelte

@@ -1,7 +1,7 @@
 <script>
-	let name = $state('world');
+	let name = $state('tout le monde');
 </script>
 
 <input bind:value={name} />
 
-<h1>Hello {name}!</h1>
+<h1>Bonjour {name} !</h1>

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/01-text-inputs/index.md

@@ -1,16 +1,22 @@
 ---
-title: Text inputs
+title: Inputs texte
 ---
 
-As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+De manière générale, la donnée circule en _descendant_ — un composant parent peut définir des props
+sur un composant enfant, et un composant peut définir des attributs sur un élément, mais pas
+l'inverse.
 
-Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we _could_ add an `oninput` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+Parfois, il peut être utile d'ignorer cette règle. Prenez le cas du élément `<input>` dans ce
+composant — nous _pourrions_ ajouter un gestionnaire d'évènement `oninput` qui définit la valeur de
+`name` à `event.target.value`, mais ça semble un peu... compliqué. Et ça peut empirer avec d'autres
+éléments de formulaires, comme nous le verrons plus tard.
 
-Instead, we can use the `bind:value` directive:
+Au lieu de faire ça, nous pouvons utiliser la directive `bind:value` :
 
 ```svelte
 /// file: App.svelte
 <input +++bind:+++value={name}>
 ```
 
-This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
+Ceci signifie que non seulement les changements de valeur de `name` vont mettre à jour la valeur de
+l'input, mais aussi que les changements sur la valeur de l'input vont mettre à jour `name`.

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/02-numeric-inputs/index.md

@@ -1,10 +1,12 @@
 ---
-title: Numeric inputs
+title: Inputs numériques
 ---
 
-In the DOM, every input value is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+Dans le DOM, chaque valeur d'input est une chaîne de caractères. Cela n'est pas très pratique
+lorsqu'il s'agit d'inputs numériques — `type="number"` et `type="range"` — puisque cela signifie que
+vous devez vous souvenir de transformer la valeur de `input.value` avant de vous en servir.
 
-With `bind:value`, Svelte takes care of it for you:
+Avec `bind:value`, Svelte s'occupe de ça pour vous :
 
 ```svelte
 /// file: App.svelte

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-a/src/lib/App.svelte

@@ -4,19 +4,17 @@
 
 <label>
 	<input type="checkbox" checked={yes} />
-	Yes! Send me regular email spam
+	Oui ! Envoyez des emails de spam régulièrement
 </label>
 
 {#if yes}
 	<p>
-		Thank you. We will bombard your inbox and sell
-		your personal details.
+		Merci. Nous bombarderons votre boîte de réceloption et vendrons vos données personnelles.
 	</p>
 {:else}
 	<p>
-		You must opt in to continue. If you're not
-		paying, you're the product.
+		Vous devez acceptez pour continuer. Si vous ne payez pas, vous êtes le produit.
 	</p>
 {/if}
 
-<button disabled={!yes}>Subscribe</button>
+<button disabled={!yes}>Abonnez-vous</button>

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/+assets/app-b/src/lib/App.svelte

@@ -4,19 +4,17 @@
 
 <label>
 	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
+	Oui ! Envoyez des emails de spam régulièrement
 </label>
 
 {#if yes}
 	<p>
-		Thank you. We will bombard your inbox and sell
-		your personal details.
+		Merci. Nous bombarderons votre boîte de réceloption et vendrons vos données personnelles.
 	</p>
 {:else}
 	<p>
-		You must opt in to continue. If you're not
-		paying, you're the product.
+		Vous devez acceptez pour continuer. Si vous ne payez pas, vous êtes le produit.
 	</p>
 {/if}
 
-<button disabled={!yes}>Subscribe</button>
+<button disabled={!yes}>Abonnez-vous</button>

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/index.md

@@ -1,8 +1,9 @@
 ---
-title: Checkbox inputs
+title: Checkbox
 ---
 
-Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+Les checkbox sont utilisées pour activer ou désactiver des états. Plutôt que de créer une liaison à
+`input.value`, nous pouvons créer une liaison avec `input.checked` :
 
 ```svelte
 /// file: App.svelte

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/+assets/app-a/src/lib/App.svelte

@@ -2,15 +2,16 @@
 	let questions = $state([
 		{
 			id: 1,
-			text: `Where did you go to school?`
+			text: `Où êtes-vous allé à l'école ?`
 		},
 		{
 			id: 2,
-			text: `What is your mother's name?`
+			text: `Quel est le nom de jeune fille de votre mère ?`
 		},
 		{
 			id: 3,
-			text: `What is another personal fact that an attacker could easily find with Google?`
+			text: `Quelle information personnelle une personne mal intentionnée pourrait aisément trouver
+grâce à Google ?`
 		}
 	]);
 
@@ -22,12 +23,12 @@
 		e.preventDefault();
 
 		alert(
-			`answered question ${selected.id} (${selected.text}) with "${answer}"`
+			`vous avez répondu à la question ${selected.id} (${selected.text}) avec "${answer}"`
 		);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Questions pas du tout sécurisées</h2>
 
 <form onsubmit={handleSubmit}>
 	<select
@@ -44,12 +45,12 @@
 	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit">
-		Submit
+		Envoyer
 	</button>
 </form>
 
 <p>
-	selected question {selected
+	question sélectionnée {selected
 		? selected.id
-		: '[waiting...]'}
+		: '[chargement...]'}
 </p>

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/+assets/app-b/src/lib/App.svelte

@@ -2,15 +2,16 @@
 	let questions = $state([
 		{
 			id: 1,
-			text: `Where did you go to school?`
+			text: `Où êtes-vous allé à l'école ?`
 		},
 		{
 			id: 2,
-			text: `What is your mother's name?`
+			text: `Quel est le nom de jeune fille de votre mère ?`
 		},
 		{
 			id: 3,
-			text: `What is another personal fact that an attacker could easily find with Google?`
+			text: `Quelle information personnelle une personne mal intentionnée pourrait aisément trouver
+grâce à Google ?`
 		}
 	]);
 
@@ -22,12 +23,12 @@
 		e.preventDefault();
 
 		alert(
-			`answered question ${selected.id} (${selected.text}) with "${answer}"`
+			`vous avez répondu à la question ${selected.id} (${selected.text}) avec "${answer}"`
 		);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Questions pas du tout sécurisées</h2>
 
 <form onsubmit={handleSubmit}>
 	<select
@@ -44,12 +45,12 @@
 	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit">
-		Submit
+		Envoyer
 	</button>
 </form>
 
 <p>
-	selected question {selected
+	question sélectionnée {selected
 		? selected.id
-		: '[waiting...]'}
+		: '[chargement...]'}
 </p>

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/04-select-bindings/index.md

@@ -1,8 +1,8 @@
 ---
-title: Select bindings
+title: Liaisons de select
 ---
 
-We can also use `bind:value` with `<select>` elements:
+Nous pouvons aussi utiliser `bind:value` avec des éléments `<select>` :
 
 ```svelte
 /// file: App.svelte
@@ -12,6 +12,11 @@ We can also use `bind:value` with `<select>` elements:
 >
 ```
 
-Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+Notez que les valeurs d'`<option>` sont des objets plutôt que des chaînes de caractères. Svelte s'en
+fiche.
 
-> [!NOTE] Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template.
+> [!NOTE] Puisque nous n'avons pas défini de valeur initiale pour `selected`, la liaison va
+> automatiquement utiliser la valeur par défaut (la première dans la liste). Faites toutefois
+> attention — tant que la liaison n'est pas initialisée, `selected` reste à `undefined`, ce qui
+> empêche de facto de référencer aveuglément `selected` en écrivant par exemple `selected.id` dans
+> le template.

apps/svelte.dev/content/tutorial/01-svelte/06-bindings/index.md

@@ -1,5 +1,5 @@
 ---
-title: Bindings
+title: Liaisons
 scope: { 'prefix': '/src/lib/', 'name': 'src' }
 focus: /src/lib/App.svelte
 ---