From 7fedd8d596e738a0ccab2863d6a0408f5f4d9853 Mon Sep 17 00:00:00 2001
From: Romain Crestey <rcrestey@gmail.com>
Date: Mon, 20 Jan 2025 06:55:21 +0100
Subject: [PATCH] fr: tutorial/01/05

---
 .../01-dom-events/+assets/app-a/src/lib/App.svelte |  2 +-
 .../01-dom-events/+assets/app-b/src/lib/App.svelte |  2 +-
 .../01-svelte/05-events/01-dom-events/index.md     | 14 +++++++++-----
 .../+assets/app-b/src/lib/App.svelte               |  2 +-
 .../05-events/02-inline-handlers/index.md          |  6 +++---
 .../01-svelte/05-events/03-capturing/index.md      | 14 ++++++++++----
 .../+assets/app-a/src/lib/App.svelte               |  2 +-
 .../+assets/app-b/src/lib/App.svelte               |  2 +-
 .../05-events/04-component-events/index.md         |  9 +++++----
 .../+assets/app-a/src/lib/BigRedButton.svelte      |  2 +-
 .../+assets/app-b/src/lib/BigRedButton.svelte      |  2 +-
 .../05-events/05-spreading-events/index.md         |  6 ++++--
 .../content/tutorial/01-svelte/05-events/index.md  |  2 +-
 13 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte
index 5ba72bd22..43368e351 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-a/src/lib/App.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-b/src/lib/App.svelte
index e56e92d7a..57d33413e 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/+assets/app-b/src/lib/App.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div {onpointermove}>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md
index 8778f8ce7..f74b233df 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/01-dom-events/index.md
@@ -1,21 +1,25 @@
 ---
-title: DOM events
+title: Évènements DOM
 ---
 
-As we've briefly seen already, you can listen to any DOM event on an element (such as click or [pointermove](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) with an `on<name>` function:
+Comme nous l'avons vu rapidement, vous pouvez écouter n'importe quel évènement sur un élément (comme
+un `click` ou un
+[`pointermove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event)) avec
+une fonction `on<nom>` :
 
 ```svelte
 /// file: App.svelte
 <div +++onpointermove={onpointermove}+++>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 ```
 
-Like with any other property where the name matches the value, we can use the short form:
+Comme avec toute autre propriété dont le nom correspond à la valeur, nous pouvons utiliser la forme
+raccourcie :
 
 ```svelte
 /// file: App.svelte
 <div +++{onpointermove}+++>
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 ```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/+assets/app-b/src/lib/App.svelte
index 4a474a886..f38b78e84 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/+assets/app-b/src/lib/App.svelte
@@ -8,7 +8,7 @@
 		m.y = event.clientY;
 	}}
 >
-	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md
index f263be246..c4aa91204 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/02-inline-handlers/index.md
@@ -1,8 +1,8 @@
 ---
-title: Inline handlers
+title: Gestionnaires inline
 ---
 
-You can also declare event handlers inline:
+Vous pouvez aussi déclarer des gestionnaires d'évènement de manière inline :
 
 ```svelte
 /// file: App.svelte
@@ -21,6 +21,6 @@ You can also declare event handlers inline:
 		m.y = event.clientY;
 	}+++}
 >
-	The pointer is at {m.x} x {m.y}
+	Le pointeur se trouve à la position {Math.round(m.x)} x {Math.round(m.y)}
 </div>
 ```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/03-capturing/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/03-capturing/index.md
index cf829e4af..50c197bc3 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/03-capturing/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/03-capturing/index.md
@@ -1,10 +1,15 @@
 ---
-title: Capturing
+title: Capture
 ---
 
-Normally, event handlers run during the [_bubbling_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling) phase. Notice what happens if you type something into the `<input>` in this example — the inner handler runs first, as the event 'bubbles' from the target up to the document, followed by the outer handler.
+En général, les gestionnaires d'évènement sont exécutés pendant la phase de
+[\_bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling).
+Remarquez ce qu'il se passe si vous tapez quelque chose dans l'`<input>` de cet exemple — le
+gestionnaire "intérieur" est joué en premier, puisque l'évènement "bubble" depuis la cible vers
+la racine du document, suivi par le gestionnaire "extérieur".
 
-Sometimes, you want handlers to run during the _capture_ phase instead. Add `capture` to the end of the event name:
+Parfois, vous voulez que les gestionnaires soient joués plutôt pendant la phase de _capture_.
+Ajoutez `capture` à la fin du nom de l'évènement :
 
 ```svelte
 /// file: App.svelte
@@ -13,4 +18,5 @@ Sometimes, you want handlers to run during the _capture_ phase instead. Add `cap
 </div>
 ```
 
-Now, the relative order is reversed. If both capturing and non-capturing handlers exist for a given event, the capturing handlers will run first.
+Désormais, l'ordre relatif est inversé. Si des gestionnaires de capture et de non-capture existent
+en même temps pour un même évènement, les gestionnaires de capture seront joués en premier.
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-a/src/lib/App.svelte
index dd02635a9..a467c6a11 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-a/src/lib/App.svelte
@@ -4,6 +4,6 @@
 	let value = $state(0);
 </script>
 
-<p>The current value is {value}</p>
+<p>La valeur actuelle est {value}</p>
 
 <Stepper />
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-b/src/lib/App.svelte
index ace861d60..e3fb7045b 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/+assets/app-b/src/lib/App.svelte
@@ -4,7 +4,7 @@
 	let value = $state(0);
 </script>
 
-<p>The current value is {value}</p>
+<p>La valeur actuelle est {value}</p>
 
 <Stepper
 	increment={() => value += 1}
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md
index 820517cdb..ff3b21c7b 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/04-component-events/index.md
@@ -1,8 +1,9 @@
 ---
-title: Component events
+title: Évènements de composant
 ---
 
-You can pass event handlers to components like any other prop. In `Stepper.svelte`, add `increment` and `decrement` props...
+Vous pouvez passer des gestionnaires d'évènement aux composants comme n'importe quelle autre prop.
+Dans `Stepper.svelte`, ajoutez les props `increment` et `decrement`...
 
 ```svelte
 /// file: Stepper.svelte
@@ -11,7 +12,7 @@ You can pass event handlers to components like any other prop. In `Stepper.svelt
 </script>
 ```
 
-...and wire them up:
+... et connectez les :
 
 ```svelte
 /// file: Stepper.svelte
@@ -19,7 +20,7 @@ You can pass event handlers to components like any other prop. In `Stepper.svelt
 <button +++onclick={increment}+++>+1</button>
 ```
 
-In `App.svelte`, define the handlers:
+Dans `App.svelte`, définissez les gestionnaires :
 
 ```svelte
 <Stepper
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-a/src/lib/BigRedButton.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-a/src/lib/BigRedButton.svelte
index 3a197a977..903d70f1c 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-a/src/lib/BigRedButton.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-a/src/lib/BigRedButton.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <button>
-	Push
+	Appuyer
 </button>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-b/src/lib/BigRedButton.svelte b/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-b/src/lib/BigRedButton.svelte
index 05721ada0..6e0b1f2b9 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-b/src/lib/BigRedButton.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/+assets/app-b/src/lib/BigRedButton.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <button {...props}>
-	Push
+	Appuyer
 </button>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/index.md
index fe6f4f37b..8860dec79 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/05-spreading-events/index.md
@@ -1,8 +1,10 @@
 ---
-title: Spreading events
+title: Étaler les évènements
 ---
 
-We can also [spread](spread-props) event handlers directly onto elements. Here, we've defined an `onclick` handler in `App.svelte` — all we need to do is pass the props to the `<button>` in `BigRedButton.svelte`:
+Nous pouvons aussi ["étaler" (_spread_)](spread-props) les gestionnaires d'évènements sur les
+éléments. Ici, nous avons défini un gestionnaire `onclick` dans `App.svelte` — tout ce qu'il reste à
+faire est de passer les props au `<button>` dans `BigRedButton.svelte` :
 
 ```svelte
 /// file: BigRedButton.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/05-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/05-events/index.md
index dd6b8e8e8..395c93ec7 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/05-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/05-events/index.md
@@ -1,5 +1,5 @@
 ---
-title: Events
+title: Évènements
 scope: { 'prefix': '/src/lib/', 'name': 'src' }
 focus: /src/lib/App.svelte
 ---